/*
 * Pagina de stare (AU-68.5), pe jetoanele platformei Zentu.
 *
 * Culoarea apare doar unde poartă sens: verde = funcționează, chihlimbar =
 * merge greu, roșu = nu funcționează, gri = fără date. Pe tema luminoasă
 * culorile mărcii sunt prea deschise pentru o bară subțire (verdele 2,1:1,
 * chihlimbarul 1,8:1 pe alb), deci barele iau nuanțele închise din aceleași
 * familii, cele care există deja în platformă: #177A46 (5,4:1), #B07400
 * (3,9:1). Roșul #FF3B5C trece ca formă (3,5:1); ca text, #B3123A (6,9:1).
 * Pe tema întunecată trec toate: verdele 8,0:1, chihlimbarul 8,0:1, roșul
 * 5,7:1, griul 4,7:1. Spațiere pe grila de 8 (4, 8, 12, 16, 24, 32, 48).
 */
/*
 * Fonturile, găzduite aici, ca în platformă (15 oct 2026): de la Google,
 * IP-ul fiecărui vizitator ar fi ajuns la ei. Aceleași fișiere variabile,
 * tăiate la caracterele interfeței (zentu-ui/scripts/fonturi.mjs); licența
 * OFL stă lângă ele.
 */
@font-face { font-family: Inter; src: url(fonturi/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(fonturi/inter-tight.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --pagina: #F7F8FA;
  --card: #FFFFFF;
  --umplere: #EDEFF3;
  --linie: #EDEFF3;
  --linie-tare: #DCDFE6;
  --text: #0E1014;
  --text-2: #666D7A;
  --ok: #177A46;
  --ok-text: #177A46;
  --ok-fundal: #E6F4EC;
  --degradat: #B07400;
  --degradat-text: #7A5C00;
  --degradat-fundal: #FFF4DE;
  --cazut: #FF3B5C;
  --cazut-text: #B3123A;
  --cazut-fundal: #FFE8EC;
  --fara: #8E95A3;
  --fara-fundal: #EDEFF3;
  --focus: #1B5FA8;
  --umbra: 0 16px 48px rgba(14, 16, 20, .18);
  --fundal-foaie: rgba(14, 16, 20, .45);
  --sigla: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="luminoasa"]) {
    color-scheme: dark;
    --pagina: #0E1014;
    --card: #1A1D23;
    --umplere: #23272E;
    --linie: #262A31;
    --linie-tare: #383D47;
    --text: #EDEFF3;
    --text-2: #A3A9B5;
    --ok: #2FCC71;
    --ok-text: #2FCC71;
    --ok-fundal: #15301F;
    --degradat: #F0A31A;
    --degradat-text: #F0A31A;
    --degradat-fundal: #33270E;
    --cazut: #FF5C77;
    --cazut-text: #FF5C77;
    --cazut-fundal: #3A1A21;
    --fara: #7F8796;
    --fara-fundal: #23272E;
    --focus: #3D9BFF;
    --umbra: 0 16px 48px rgba(0, 0, 0, .5);
    --fundal-foaie: rgba(0, 0, 0, .6);
    --sigla: invert(1);
  }
}
:root[data-tema="intunecata"] {
  color-scheme: dark;
  --pagina: #0E1014;
  --card: #1A1D23;
  --umplere: #23272E;
  --linie: #262A31;
  --linie-tare: #383D47;
  --text: #EDEFF3;
  --text-2: #A3A9B5;
  --ok: #2FCC71;
  --ok-text: #2FCC71;
  --ok-fundal: #15301F;
  --degradat: #F0A31A;
  --degradat-text: #F0A31A;
  --degradat-fundal: #33270E;
  --cazut: #FF5C77;
  --cazut-text: #FF5C77;
  --cazut-fundal: #3A1A21;
  --fara: #7F8796;
  --fara-fundal: #23272E;
  --focus: #3D9BFF;
  --umbra: 0 16px 48px rgba(0, 0, 0, .5);
  --fundal-foaie: rgba(0, 0, 0, .6);
  --sigla: invert(1);
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` câștigă mereu: altfel un `display: flex` îl ascundea doar pe hârtie */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--pagina);
  color: var(--text);
  font: 400 1rem/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: "Inter Tight", Inter, system-ui, sans-serif; margin: 0; }
h2 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }

.sari {
  position: absolute; left: 16px; top: 8px; z-index: 30; transform: translateY(calc(-100% - 16px));
  background: var(--card); padding: 12px 16px; border-radius: 10px; border: 1px solid var(--linie-tare);
}
.sari:focus { transform: none; }

.pagina-lata { width: 100%; max-width: 760px; margin: 0 auto; padding-inline: 16px; }

/* ─── antetul ─── */
.antet { border-bottom: 1px solid var(--linie); background: var(--card); }
.antet-rand { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-top: env(safe-area-inset-top); }
.sigla { display: inline-flex; align-items: center; min-height: 44px; }
.sigla img { display: block; height: 24px; width: auto; filter: var(--sigla); }
.antet-titlu { font-size: .875rem; color: var(--text-2); padding-left: 12px; border-left: 1px solid var(--linie-tare); }
.buton-tema {
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--linie-tare); background: transparent; cursor: pointer; font-size: .875rem;
}
.buton-tema:hover { background: var(--umplere); }
@media (max-width: 479px) { .antet-titlu { display: none; } #tema-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .buton-tema { width: 44px; justify-content: center; padding: 0; } }

main { padding-top: 24px; padding-bottom: 32px; display: grid; gap: 16px; }

/* ─── fără rețea ─── */
.fara-retea {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 10px;
  background: var(--fara-fundal); color: var(--text); font-size: .875rem;
}

/* ─── banda de sus ─── */
.banda { border-radius: 14px; border: 1px solid var(--linie-tare); background: var(--card); overflow: hidden; }
.banda-sus { display: flex; align-items: center; gap: 12px; padding: 16px 24px; }
.banda-sus h1 { font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.banda-jos { padding: 16px 24px 20px; border-top: 1px solid var(--linie); display: grid; gap: 12px; }
.banda-jos p { margin: 0; }
.banda[data-stare="ok"] { border-color: var(--ok); }
.banda[data-stare="ok"] .banda-sus { background: var(--ok-fundal); }
.banda[data-stare="degradat"] { border-color: var(--degradat); }
.banda[data-stare="degradat"] .banda-sus { background: var(--degradat-fundal); }
.banda[data-stare="cazut"] { border-color: var(--cazut); }
.banda[data-stare="cazut"] .banda-sus { background: var(--cazut-fundal); }
.banda[data-stare="fara-date"] .banda-sus { background: var(--fara-fundal); }
.banda-incident { display: grid; gap: 4px; }
.banda-incident strong { font-weight: 600; }
.banda-incident .mic { color: var(--text-2); }
.proaspat { font-size: .875rem; color: var(--text-2); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ─── iconițele de stare: forma spune și ea, nu doar culoarea ─── */
.ic { flex: none; width: 24px; height: 24px; }
.ic-ok { color: var(--ok); }
.ic-degradat { color: var(--degradat); }
.ic-cazut { color: var(--cazut); }
.ic-fara-date { color: var(--fara); }

/* ─── cardurile ─── */
.card { background: var(--card); border: 1px solid var(--linie-tare); border-radius: 14px; }
.card-antet {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 24px; border-bottom: 1px solid var(--linie);
}
.card-nota { font-size: .875rem; color: var(--text-2); }

/* ─── serviciile și barele ─── */
.servicii { list-style: none; margin: 0; padding: 0; }
.serviciu { padding: 16px 24px 20px; display: grid; gap: 8px; }
.serviciu + .serviciu { border-top: 1px solid var(--linie); }
.serviciu-sus { display: flex; align-items: flex-start; gap: 8px; }
.serviciu-text { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding-top: 1px; }
.serviciu-nume { font-weight: 600; }
.serviciu-stare { font-size: .875rem; color: var(--text-2); }
.serviciu-uptime { flex: none; padding-top: 2px; font-size: .875rem; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 479px) { .serviciu-uptime .lat { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
.bare {
  display: flex; align-items: stretch; gap: 3px; height: 44px; padding: 6px 0;
  cursor: pointer; border-radius: 6px; touch-action: manipulation;
}
.bara { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--fara); }
.bara[data-stare="ok"] { background: var(--ok); }
.bara[data-stare="degradat"] { background: var(--degradat); }
.bara[data-stare="cazut"] { background: var(--cazut); }
.bara[data-stare="fara-date"] { opacity: .55; }
.bare:hover .bara { opacity: .7; }
.bare:hover .bara:hover, .bara[aria-selected="true"] { opacity: 1; }
.bare:focus-visible .bara[aria-selected="true"] { outline: 2px solid var(--focus); outline-offset: 2px; }
.bare-jos { display: flex; justify-content: space-between; font-size: .75rem; color: var(--text-2); }

/* ─── balonul (mouse) și foaia (atingere, tastatură) ─── */
.balon {
  position: fixed; z-index: 20; max-width: 320px; pointer-events: none;
  background: var(--card); border: 1px solid var(--linie-tare); border-radius: 10px;
  box-shadow: var(--umbra); padding: 12px 16px; font-size: .875rem;
}
.balon h3, .foaie-ziua h3 { font: 600 .875rem/1.4 Inter, system-ui, sans-serif; color: var(--text-2); margin: 0 0 8px; }
.lista-zi { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-zi li { display: flex; gap: 8px; align-items: flex-start; }
.lista-zi .ic { width: 20px; height: 20px; margin-top: 1px; }

.foaie-fundal { position: fixed; inset: 0; z-index: 40; background: var(--fundal-foaie); }
.foaie {
  position: fixed; z-index: 41; left: 0; right: 0; bottom: 0;
  max-height: 85vh; overflow: auto; background: var(--card);
  border-radius: 14px 14px 0 0; box-shadow: var(--umbra);
  padding: 8px 24px calc(24px + env(safe-area-inset-bottom));
  transition: transform .2s ease-out;
}
.foaie-maner { width: 40px; height: 4px; border-radius: 2px; background: var(--linie-tare); margin: 4px auto 8px; }
.foaie-antet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 12px; }
.foaie-continut { display: grid; gap: 16px; }
@media (min-width: 720px) {
  .foaie {
    left: 50%; right: auto; bottom: auto; top: 50%; width: 560px;
    transform: translate(-50%, -50%); border-radius: 14px; padding: 16px 24px 24px;
  }
  .foaie-maner { display: none; }
}

.buton-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
}
.buton-icon:hover:not(:disabled) { background: var(--umplere); }
.buton-icon:disabled { opacity: .4; cursor: not-allowed; }
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 16px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--linie-tare); background: var(--card); font-weight: 600;
}
.buton:hover { background: var(--umplere); }

/* ─── calendarul ─── */
.luna-nav { display: flex; align-items: center; gap: 4px; }
.luna-nume { min-width: 128px; text-align: center; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-cap { padding: 12px 0; text-align: center; font-size: .75rem; color: var(--text-2); border-bottom: 1px solid var(--linie); }
.cal-zi {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border-bottom: 1px solid var(--linie); border-right: 1px solid var(--linie);
  font-size: .875rem; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.cal-zi:nth-child(7n) { border-right: 0; }
.cal-zi.azi { color: var(--text); font-weight: 600; }
.cal-zi button {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid currentColor;
  background: transparent; cursor: pointer; font-size: .875rem; font-weight: 600;
}
.cal-zi button[data-stare="cazut"] { color: var(--cazut-text); }
.cal-zi button[data-stare="degradat"] { color: var(--degradat-text); }
.cal-zi button:hover { background: var(--umplere); }
.legenda { display: flex; gap: 16px; flex-wrap: wrap; margin: 0; padding: 12px 24px 16px; font-size: .75rem; color: var(--text-2); }
.legenda span { display: inline-flex; align-items: center; gap: 8px; }
.punct { width: 12px; height: 12px; border-radius: 50%; border: 2px solid; display: inline-block; }
.punct-cazut { border-color: var(--cazut-text); }
.punct-degradat { border-color: var(--degradat-text); }

/* ─── istoricul ─── */
.istoric { padding: 8px 24px 16px; }
.istoric-zi { padding: 16px 0; }
.istoric-zi + .istoric-zi { border-top: 1px solid var(--linie); }
.istoric-zi h3 { font: 600 .875rem/1.4 Inter, system-ui, sans-serif; color: var(--text-2); margin: 0 0 12px; }
.incident { display: grid; gap: 8px; }
.incident + .incident { margin-top: 16px; }
.incident-titlu { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; }
.incident-meta { font-size: .875rem; color: var(--text-2); }
.actualizari { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--linie-tare); display: grid; gap: 8px; }
.actualizari li { font-size: .875rem; }
.actualizari b { font-weight: 600; }
.actualizari time { color: var(--text-2); }
.gol { margin: 0; padding: 16px 0; color: var(--text-2); display: flex; gap: 8px; align-items: center; }

/* ─── subsolul ─── */
.subsol { padding-top: 8px; padding-bottom: calc(32px + env(safe-area-inset-bottom)); font-size: .875rem; color: var(--text-2); }
.subsol p { margin: 0 0 8px; }

/* ─── încărcarea ─── */
.schelet { display: block; border-radius: 6px; background: var(--umplere); animation: puls 1.4s ease-in-out infinite; }
.schelet-titlu { height: 24px; width: 60%; }
.schelet-rand { height: 16px; width: 40%; }
.schelet-bare { height: 32px; width: 100%; }
@keyframes puls { 50% { opacity: .5; } }

@media (prefers-reduced-motion: reduce) {
  .schelet { animation: none; }
  .foaie { transition: none; }
}