/* ============================================================================
   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 | busy | server | offline

   `slow` and `busy` are deliberately different colours: amber for "your
   connection is the problem" (something the user can act on) and a neutral blue
   for "this request is a big one" (nothing to do but wait). Giving both the
   same warning colour would put the user back to guessing which it is.

   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="busy"],
#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;
}

/* Blue, not amber: the connection is fine and there is nothing for the user to
   fix — this is an "we're working on it, please wait" notice, not a warning
   about their equipment. */
#mrepNetStatus[data-state="busy"] .mrep-net-pill {
    color: #1B5E9E;
    background: #E8F1FB;
    border-color: #B4D2EE;
}

#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="busy"] .mrep-net-pill {
    color: #86BCEC;
    background: #16232E;
    border-color: #274156;
}

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;
    }
}