/* ============================================================================
   MREP Portal — Connection-quality indicator
   ----------------------------------------------------------------------------
   A navbar pill that stays out of the way while the connection is healthy, and
   a banner reserved for an actual outage. Driven entirely by the `data-state`
   attribute network-status.js writes on the wrapper:
       hidden | recovered | online | slow | unstable | server | offline

   Colours come from the app's own tokens where one fits, and are stated
   explicitly for the status hues (amber/red/green) so the meaning survives a
   theme change — a warning must not turn into body text in dark mode.
   ========================================================================== */

#mrepNetStatus {
    display: none;
    align-items: center;
}

/* Healthy is the normal case and shows nothing at all: a permanent green tick
   would be noise on every page, and users stop reading anything that is always
   there — which is exactly when a real warning needs to be noticed. */
#mrepNetStatus[data-state="online"],
#mrepNetStatus[data-state="hidden"],
#mrepNetStatus:empty {
    display: none !important;
}

#mrepNetStatus[data-state="slow"],
#mrepNetStatus[data-state="unstable"],
#mrepNetStatus[data-state="server"],
#mrepNetStatus[data-state="offline"],
#mrepNetStatus[data-state="recovered"] {
    display: inline-flex;
}

.mrep-net-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 190px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.mrep-net-pill:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.mrep-net-dot {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
}

.mrep-net-label {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- states -------------------------------------------------------------- */

/* Amber: it still works, it is just worse than it should be. */
#mrepNetStatus[data-state="slow"] .mrep-net-pill {
    color: #B26A00;
    background: #FFF4E0;
    border-color: #F0D3A0;
}

/* Amber + pulse: work is being lost intermittently, which needs more attention
   than "slow" but is not the dead stop that red implies. */
#mrepNetStatus[data-state="unstable"] .mrep-net-pill {
    color: #B24A00;
    background: #FFEEDF;
    border-color: #F0BE96;
}

#mrepNetStatus[data-state="server"] .mrep-net-pill,
#mrepNetStatus[data-state="offline"] .mrep-net-pill {
    color: #B3261E;
    background: #FDECEA;
    border-color: #F2B8B5;
}

#mrepNetStatus[data-state="recovered"] .mrep-net-pill {
    color: #1E7B34;
    background: #E7F6EC;
    border-color: #A9DDBA;
}

/* The dot pulses only while something is actively wrong; a static dot would
   read as a label rather than a live reading. */
#mrepNetStatus[data-state="unstable"] .mrep-net-dot,
#mrepNetStatus[data-state="offline"] .mrep-net-dot,
#mrepNetStatus[data-state="server"] .mrep-net-dot {
    animation: mrep-net-pulse 1.4s ease-in-out infinite;
}

@keyframes mrep-net-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.82); }
}

/* Respect a user who has asked for less motion — a blinking dot is exactly the
   kind of thing that setting exists for. The colour still carries the meaning. */
@media (prefers-reduced-motion: reduce) {
    .mrep-net-dot { animation: none !important; }
}

/* ---- dark theme ---------------------------------------------------------- */

html.theme-dark #mrepNetStatus[data-state="slow"] .mrep-net-pill {
    color: #F0C070;
    background: #2E2517;
    border-color: #4A3A1E;
}

html.theme-dark #mrepNetStatus[data-state="unstable"] .mrep-net-pill {
    color: #F0A970;
    background: #30231A;
    border-color: #4E3524;
}

html.theme-dark #mrepNetStatus[data-state="server"] .mrep-net-pill,
html.theme-dark #mrepNetStatus[data-state="offline"] .mrep-net-pill {
    color: #F2938C;
    background: #31201F;
    border-color: #522E2C;
}

html.theme-dark #mrepNetStatus[data-state="recovered"] .mrep-net-pill {
    color: #7FD196;
    background: #16281D;
    border-color: #27472F;
}

/* ---- outage banner ------------------------------------------------------- */

.mrep-net-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;                 /* above the sticky header, below modals */
    padding: 9px 44px 9px 16px;
    background: #B3261E;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
    animation: mrep-net-drop .22s ease-out;
}

@keyframes mrep-net-drop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .mrep-net-banner { animation: none; }
}

/* ---- small screens ------------------------------------------------------- */

/* Below ~576px the navbar has no room for a sentence, so the pill keeps only
   its dot — the banner is already carrying the words for the states that
   matter, and the full text stays in the pill's tooltip. */
@media (max-width: 575.98px) {
    .mrep-net-label { display: none; }

    .mrep-net-pill {
        gap: 0;
        padding: 6px;
        max-width: none;
    }

    .mrep-net-banner {
        padding: 8px 12px;
        font-size: 12px;
        text-align: left;
    }
}