:root {
    /* Paletă extrasă din sigla Padesoft: albastru în stânga, turcoaz în dreapta. */
    --brand-blue: #1c6e9f;
    --brand-cyan: #199fba;
    --brand-teal: #33b3bc;
    --brand-light: #63c6dc;

    /* Capetele gradientului de fundal, urmând aceeași direcție ca sigla. */
    --bg: #071f30;
    --bg-mid: #0b3b52;
    --bg-end: #0f5f6b;

    /* Ușor translucid, ca gradientul de fundal să se vadă prin panouri. */
    --panel: rgba(9, 42, 60, .78);
    --border: #1d4d68;
    --border-strong: #2b6b87;
    --field: #072534;

    --text: #f2f9fb;
    --muted: #9fbecd;
    --accent: var(--brand-teal);
    --accent-strong: var(--brand-light);
    --danger: #f87171;
    --ok: #4ade80;
    --radius: 12px;
    --font: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
    margin: 0;
    min-height: 100vh;
    background: linear-gradient(90deg, var(--bg) 0%, var(--bg-mid) 48%, var(--bg-end) 100%);
    /* Fixat, ca gradientul să traverseze ecranul o singură dată, indiferent de lungimea paginii. */
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: rgba(7, 31, 48, 0.72);
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.brand {
    display: flex; align-items: center; gap: .55rem;
    font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none;
}
/* Sigla e desenată pentru fundal deschis; pe fundalul închis literele din stânga
   au nevoie de puțină luminozitate în plus ca să rămână lizibile. */
.brand img { height: 26px; width: auto; display: block; filter: brightness(1.35) saturate(1.05); }
.brand:hover { text-decoration: none; }
.topbar nav, .main-nav { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.main-nav a, .main-nav ::deep a {
    color: var(--muted); text-decoration: none; font-size: .92rem; font-weight: 600;
}
.main-nav a:hover, .main-nav ::deep a:hover { color: var(--text); }
.main-nav ::deep a.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 2px;
}
/* Bara de sus are prea multe pagini ca să încapă una lângă alta, așa că sunt strânse în grupuri care se
   desfac la trecerea cu mausul sau la atingere. Fără JavaScript: focus-within ține meniul deschis și pe
   telefon, iar grupul se colorează singur când pagina deschisă e una dintre ale lui. */
.nav-group { position: relative; display: inline-flex; }
.nav-group-label {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--muted); font: inherit; font-size: .92rem; font-weight: 600;
}
.nav-group-label::after { content: "▾"; margin-left: .25rem; font-size: .7em; }
.nav-group:hover .nav-group-label,
.nav-group:focus-within .nav-group-label { color: var(--text); }
.nav-group:has(a.active) .nav-group-label { color: var(--accent); }
.nav-menu {
    position: absolute; top: 100%; left: 0; z-index: 20;
    display: none; flex-direction: column; gap: .6rem;
    min-width: 12rem; padding: .85rem .95rem;
    background: var(--panel);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
.nav-menu.align-right { left: auto; right: 0; }
.nav-group:hover .nav-menu,
.nav-group:focus-within .nav-menu { display: flex; }
.nav-menu a { white-space: nowrap; }
.nav-menu a.active { border-bottom: none; padding-bottom: 0; }

/* Semnul că se lucrează cu serverul: o dungă care aleargă sub bara de sus. Nu acoperă nimic, dar se vede
   din orice colț al ecranului. */
.busy-bar {
    position: sticky; top: 0; z-index: 9;
    height: 3px; overflow: hidden;
    background: transparent;
}
.busy-bar.on { background: rgba(51, 179, 188, .18); }
.busy-bar.on::after {
    content: ""; display: block; height: 100%; width: 40%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: busy-slide 1.1s ease-in-out infinite;
}

@keyframes busy-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(350%); }
}

@media (prefers-reduced-motion: reduce) {
    .busy-bar.on::after { animation: none; width: 100%; }
}

.inline-form { display: inline; margin: 0; }
.link-btn {
    background: none; border: none; color: var(--accent); cursor: pointer;
    font: inherit; padding: 0;
}
.link-btn:hover { text-decoration: underline; }

/* Alegerea casei stă în bara de sus, lângă navigare, deci trebuie să rămână mică și discretă. */
.home-switch { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.home-switch select {
    width: auto; max-width: 190px; padding: .3rem .5rem;
    font-size: .85rem; font-weight: 600;
}
.main-nav ::deep a.home-switch-link { color: var(--accent); }

/* Clopoțelul de alerte: numărul stă lipit de el, ca să se citească dintr-o privire. */
.bell { position: relative; display: inline-flex; align-items: center; text-decoration: none; }
.bell-count {
    margin-left: .15rem; padding: .05rem .35rem;
    border-radius: 999px; background: #ef4444; color: #fff;
    font-size: .7rem; font-weight: 700; line-height: 1.4;
}

/* Când lucrăm în casa unui client, avertizarea traversează toată lățimea, ca să nu treacă neobservată. */
.staff-banner {
    display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline;
    padding: .6rem 1.5rem;
    background: rgba(251,191,36,.16);
    border-bottom: 1px solid #fbbf24;
    color: #ffeec8;
    font-size: .88rem;
}

/* Toate ecranele au aceeași lățime, socotită într-un singur loc. Înainte, paginile cu tablouri de bord
   se lărgeau singure, iar trecerea de la una la alta muta tot conținutul pe ecran. */
.content { width: min(1400px, 100%); margin: 0 auto; padding: 1.5rem; flex: 1; }

.app-footer {
    margin-top: auto;
    padding: .65rem 1.5rem .9rem;
    text-align: center;
    font-size: .75rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    letter-spacing: .01em;
}
.app-footer.auth {
    border-top: none;
    padding-top: 1.25rem;
    width: 100%;
}

/* Învelișul paginilor cu tablouri de bord. Lățimea vine acum din .content; acesta doar grupează. */
.page-body { width: 100%; }

.dash-kpis {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    margin-bottom: 1rem;
}
.kpi {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.1rem;
}
a.kpi-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, transform .15s, background .15s;
}
a.kpi-link:hover {
    border-color: var(--accent);
    background: rgba(51, 179, 188, .12);
    text-decoration: none;
    transform: translateY(-1px);
}
.kpi-label { display: block; color: var(--muted); font-size: .8rem; font-weight: 600; }
.kpi-value { display: block; font-size: 1.6rem; margin: .35rem 0; }
.kpi-meta { color: var(--muted); font-size: .8rem; }

.dash-charts {
    display: grid;
    gap: .75rem;
    /* Sub vreo 340 px, un grafic cu legendă devine de nedeslușit, deci mai bine trei largi decât cinci
       înguste pe ecranul lat. */
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.dash-charts .panel { min-height: 260px; }
.dash-charts canvas { max-height: 200px; }

/* Chart.js fără raport fix umple tot containerul, deci acesta trebuie să aibă înălțime proprie. */
.chart-box { position: relative; height: 300px; }

.badge {
    display: inline-block; padding: .2rem .55rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700;
}
.badge.ok { background: rgba(74,222,128,.2); color: var(--ok); }
.badge.off { background: rgba(148,163,184,.2); color: var(--muted); }
.badge.err { background: rgba(248,113,113,.2); color: var(--danger); }
.badge.warn { background: rgba(251,191,36,.2); color: #fbbf24; }
.muted-cell { color: var(--muted); font-size: .85rem; max-width: 280px; word-break: break-word; }

input[type=date], input[type=month], input[type=time], input[type=number] {
    width: 100%;
    padding: .75rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--field);
    color: var(--text);
}

.auth-card, .panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.auth-wrap {
    min-height: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-card { width: min(420px, 100%); }
.auth-logo {
    display: block; width: 210px; max-width: 100%; margin: 0 auto 1.25rem;
    filter: brightness(1.35) saturate(1.05);
}
.auth-card h1 { margin: 0 0 .25rem; font-size: 1.6rem; }
.auth-card .sub { color: var(--muted); margin: 0 0 1.25rem; }

label { display: block; font-size: .85rem; color: var(--muted); margin: .75rem 0 .35rem; }
/* input:not([type]) prinde câmpurile scrise fără type în Razor, care altfel rămâneau
   cu stilul implicit al browserului, alb și mai mic decât select-urile de lângă ele. */
input:not([type]), input[type=email], input[type=password], input[type=text] {
    width: 100%;
    padding: .75rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--field);
    color: var(--text);
}
input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* Câmp obligatoriu încă gol: rămâne colorat ca o alertă până primește valoare. */
input.needs-value {
    border-color: var(--danger);
    background: rgba(248,113,113,.12);
}
input.needs-value::placeholder { color: rgba(255,196,196,.8); }

/* Browserul nu dă controalelor fontul paginii; fără reset, același „btn” iese mai mic
   pe <button> decât pe <a>. */
button, input, select, textarea { font: inherit; }

/* Un singur buton, indiferent de tag: <a class="btn"> pentru navigare,
   <button class="btn"> pentru acțiuni. Variante: secondary, danger, ghost.
   Dimensiuni: implicit, .sm în rânduri de tabel, .block pe toată lățimea. */
.btn {
    display: inline-flex; justify-content: center; align-items: center; gap: .4rem;
    min-height: 38px; padding: .55rem 1rem;
    border: 1px solid transparent; border-radius: 8px;
    background: var(--accent); color: var(--field);
    font-size: .92rem; font-weight: 700; line-height: 1.2;
    text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--accent-strong); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn.secondary { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn.secondary:hover { background: rgba(51,179,188,.14); color: var(--accent); }

.btn.danger { background: var(--danger); color: var(--field); border-color: var(--danger); }
.btn.danger:hover { background: #fb8a8a; }

.btn.ghost { background: transparent; color: var(--muted); border-color: var(--border-strong); }
.btn.ghost:hover { background: rgba(255,255,255,.05); color: var(--text); }

.btn.sm { min-height: 32px; padding: .35rem .7rem; font-size: .82rem; }
.btn.block { width: 100%; margin-top: 1rem; }

/* Butonul care ține o alegere rămâne apăsat. Fără semnul acesta, perioada aleasă și mărimile bifate se
   vedeau doar în grafic, iar omul nu avea de unde ști pe ce a apăsat. */
.btn.secondary.active, .btn.ghost.active {
    background: var(--accent); color: var(--field); border-color: var(--accent);
}
.btn.secondary.active:hover, .btn.ghost.active:hover { background: var(--accent-strong); color: var(--field); }

.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--accent); }
.btn.secondary:disabled:hover, .btn.ghost:disabled:hover { background: transparent; }
.btn.danger:disabled:hover { background: var(--danger); }
.error { color: var(--danger); margin-top: .75rem; font-size: .9rem; }
.status { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }

/* Mesajele care cer o acțiune se pierdeau în textul gri, deci primesc fundal și bordură colorată. */
.alert {
    margin: 0 0 1rem;
    padding: .75rem 1rem;
    border: 1px solid transparent;
    border-left-width: 4px;
    border-radius: 8px;
    font-size: .92rem;
    line-height: 1.45;
}
.alert.error { background: rgba(248,113,113,.15); border-color: var(--danger); color: #ffdede; }
.alert.warn { background: rgba(251,191,36,.15); border-color: #fbbf24; color: #ffeec8; }
.alert.ok { background: rgba(74,222,128,.15); border-color: var(--ok); color: #d9ffe7; }
.alert.info { background: rgba(51,179,188,.15); border-color: var(--accent); color: #dcf6f9; }
.alert.sm { padding: .45rem .7rem; font-size: .85rem; }

/* Marcajul câmpurilor obligatorii, ca lipsa lor să se vadă înainte de salvare. */
.req { color: var(--danger); font-weight: 700; margin-left: .15rem; }
label.invalid, input.invalid, select.invalid, textarea.invalid {
    border-color: var(--danger) !important;
    background: rgba(248, 113, 113, .08);
}

/* Instrucțiuni pas cu pas afișate în interfață, ca utilizatorul să nu caute documentația. */
.steps { margin: 0; padding-left: 1.35rem; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.steps li { margin-bottom: .4rem; }
.steps li:last-child { margin-bottom: 0; }
.steps em { color: var(--text); font-style: normal; font-weight: 600; }

.page-title { margin: 0 0 .25rem; font-size: 1.75rem; }
/* Explicațiile se citesc pe rânduri scurte: întinse pe toată lățimea ecranului, ochiul pierde rândul. */
.page-sub { color: var(--muted); margin: 0 0 1.25rem; max-width: 90ch; }

.device-list { display: grid; gap: .5rem; margin-bottom: 1rem; }
.device-row {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .65rem 1rem;
}
.device-row.compact { min-height: 0; }
.device-info { min-width: 0; flex: 1; }
.device-actions {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem;
    flex-shrink: 0;
}
.device-row h3 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.device-row p { margin: .15rem 0 0; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.metrics { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.metric {
    display: inline-flex; align-items: baseline; gap: .25rem;
    padding: .1rem .55rem; border-radius: 999px;
    border: 1px solid var(--border); background: rgba(56,189,248,.08);
    color: var(--muted); font-size: .75rem; line-height: 1.5;
}
.metric b { color: var(--text); font-weight: 700; font-size: .85rem; }
.metric.warn { border-color: var(--danger); background: rgba(248,113,113,.12); color: var(--danger); }
.metric.warn b { color: var(--danger); }
.metric.subtle { background: transparent; border-style: dashed; }

.group-title {
    margin: 1.1rem 0 .5rem; font-size: 1rem; color: var(--muted); font-weight: 700;
    display: flex; align-items: center; gap: .5rem;
}
.group-count {
    font-size: .75rem; font-weight: 600; color: var(--accent);
    background: rgba(51,179,188,.14); padding: .1rem .45rem; border-radius: 999px;
}
.switch {
    position: relative; width: 52px; height: 30px; flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--border-strong); border-radius: 999px; transition: .2s;
}
.slider:before {
    content: ""; position: absolute; height: 22px; width: 22px; left: 4px; top: 4px;
    background: white; border-radius: 50%; transition: .2s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider:before { transform: translateX(22px); }

/* Perdele: deschide, stop, închide și poziția, în locul întrerupătorului pornit/oprit. */
.cover-controls { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }
.cover-buttons { display: flex; gap: .3rem; }
.cover-slider { display: flex; align-items: center; gap: .45rem; }
.cover-slider input[type="range"] { width: 130px; accent-color: var(--accent); }
.cover-slider span { color: var(--muted); font-size: .75rem; white-space: nowrap; }

/* Panouri solare: harta instalației. Liniile se mișcă doar acolo unde chiar trece energie, iar sensul
   animației e sensul real al curentului — bateria care se încarcă merge invers față de cea care ajută casa. */
.flow { display: block; width: 100%; max-width: 46rem; height: auto; margin: 0 auto; }
.flow-lines path { fill: none; stroke: var(--border-strong); stroke-width: 2; }
.flow-lines.live path { stroke-width: 3; stroke-dasharray: 7 11; stroke-linecap: round; }
.flow-lines.live path.idle { stroke: none; }
.flow-lines.live path.on { stroke: var(--accent); animation: flow-dash 1.1s linear infinite; }
.flow-lines.live path.on.back { animation-direction: reverse; }

@keyframes flow-dash {
    to { stroke-dashoffset: -18; }
}

.flow-node rect { fill: var(--field); stroke: var(--border-strong); stroke-width: 1; }
.flow-node.solar rect { stroke: #fbbf24; }
.flow-node.battery rect { stroke: #4ade80; }
.flow-node.house rect { stroke: #33b3bc; }
.flow-node.grid rect { stroke: #1c6e9f; }
.flow-node.inverter rect { stroke: var(--accent); }
.flow-node .flow-icon { pointer-events: none; }
.flow-node .flow-name { fill: var(--muted); font-size: 12px; }
.flow-node .flow-value { fill: var(--text); font-size: 18px; font-weight: 600; }
.flow-node.inverter .flow-value { font-size: 15px; }
.flow-node .flow-note { fill: var(--muted); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
    .flow-lines.live path.on { animation: none; }
}

/* Câmpul prin care se alege o zi, o lună sau un an stă în rând cu săgețile lui. Câmpurile obișnuite se
   întind pe toată lățimea formularului, iar aici asta rupea rândul în trei: săgeata înainte, câmpul,
   săgeata înapoi, fiecare pe linia ei. */
/* Selectorul e scris cu tag înainte de clasă fiindcă altfel îl bate regula generală a câmpurilor de dată,
   care are un selector mai puternic decât o simplă clasă. */
input.picker, select.picker {
    width: auto; min-width: 8.5rem; max-width: 12rem;
    padding: .35rem .55rem; font-size: .85rem;
    border-radius: 8px; border: 1px solid var(--border-strong);
    background: var(--field); color: var(--text);
}

/* Ce mărimi se desenează: un rând de butoane care rămân apăsate, nu o listă de bifat. Stau lipite de
   grafic, ca legătura dintre apăsare și ce se schimbă să fie limpede. */
.series-picker {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    margin: 0 0 .5rem;
}
.series-label {
    color: var(--muted); font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; margin-right: .15rem;
}

.solar-charts {
    display: grid; gap: .75rem; margin-top: 1rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
    .solar-charts { grid-template-columns: 1fr; }
}

/* Trei carduri pe rând: producție, consum, ciclu lunar — listă pe linii, nu coloane înghesuite. */
.solar-summary-row {
    display: grid; gap: .75rem; margin-top: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
    .solar-summary-row { grid-template-columns: 1fr 1fr; }
    .solar-summary-row .solar-cycle { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .solar-summary-row { grid-template-columns: 1fr; }
    .solar-summary-row .solar-cycle { grid-column: auto; }
}

.solar-split-card,
.solar-cycle {
    display: flex; flex-direction: column; gap: .75rem;
    min-width: 0;
}
.solar-split-head {
    display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    flex-wrap: wrap;
}
.solar-split-head > span {
    color: var(--muted); font-weight: 600; font-size: .9rem; letter-spacing: .01em;
}
.solar-split-head > strong { font-size: 1.35rem; font-weight: 700; }

.solar-split-bar {
    display: flex; height: .55rem; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,.06);
}
.solar-split-bar .seg { display: block; height: 100%; min-width: 0; }
.solar-split-card.prod .seg.load { background: #7ec8f0; }
.solar-split-card.prod .seg.grid { background: #3b8fd9; }
.solar-split-card.prod .seg.battery { background: #1e5f9e; }
.solar-split-card.cons .seg.solar { background: #f07167; }
.solar-split-card.cons .seg.grid { background: #c44d4a; }
.solar-split-card.cons .seg.battery { background: #8a3530; }

.solar-split-list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: .45rem;
}
.solar-split-list li {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center; gap: .45rem .55rem;
    font-size: .92rem; line-height: 1.25;
}
.solar-split-list.cycle li {
    grid-template-columns: 1fr auto;
    padding: .35rem 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.solar-split-list.cycle li:last-child { border-bottom: none; }
.solar-split-list .name { color: var(--muted); }
.solar-split-list .val { font-weight: 600; text-align: right; white-space: nowrap; }
.solar-split-list .pct {
    color: var(--muted); font-size: .82rem; text-align: right;
    min-width: 2.6rem; white-space: nowrap;
}
.solar-split-list .dot {
    width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0;
}
.solar-split-card.prod .dot.load { background: #7ec8f0; }
.solar-split-card.prod .dot.grid { background: #3b8fd9; }
.solar-split-card.prod .dot.battery { background: #1e5f9e; }
.solar-split-card.cons .dot.solar { background: #f07167; }
.solar-split-card.cons .dot.grid { background: #c44d4a; }
.solar-split-card.cons .dot.battery { background: #8a3530; }

.solar-cycle-picker {
    display: inline-flex; align-items: center; gap: .35rem;
}
.solar-cycle-range {
    min-width: 6.5rem; text-align: center; font-weight: 600; font-size: .9rem;
    text-transform: capitalize;
}

/* Supraveghere: casetele se așază singure, două pe rând pe telefon și trei pe ecran mare. */
.cam-grid {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cam-tile {
    position: relative; overflow: hidden; cursor: pointer;
    background: #000; border: 1px solid var(--border-strong); border-radius: var(--radius);
    aspect-ratio: 4 / 3;
}
.cam-tile video, .cam-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-tile.offline video, .cam-tile.offline img { opacity: .35; }
/* Poza rămasă din urmă: recorderul n-a dat cadru nou, dar arătăm ultimul în loc de o casetă goală. */
.cam-tile img.cam-stale { opacity: .5; filter: grayscale(.4); }
/* Când imaginea chiar vine, avertizarea recorderului n-are ce căuta peste ea: ochiul bate raportul. */
.cam-tile.cam-ok img:not(.cam-stale) { opacity: 1; }
.cam-tile.cam-ok .cam-warn { display: none; }
.cam-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: space-between; gap: .5rem; align-items: baseline;
    padding: .4rem .6rem; background: linear-gradient(transparent, rgba(0,0,0,.75));
    color: #fff; font-size: .85rem;
}
.cam-label span { color: #cbd5e1; font-size: .75rem; }
.cam-warn {
    position: absolute; top: .5rem; left: .5rem;
    padding: .15rem .45rem; border-radius: 999px;
    background: rgba(239,68,68,.9); color: #fff; font-size: .72rem; font-weight: 600;
}

.cam-modal {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem; background: rgba(0,0,0,.8);
}
.cam-modal-inner {
    display: flex; flex-direction: column; gap: .6rem;
    width: min(1100px, 100%); padding: 1rem;
    background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius);
}
.cam-modal-inner video { width: 100%; max-height: 70vh; background: #000; border-radius: 8px; }

.empty {
    text-align: center; color: var(--muted); padding: 2rem 1rem;
    border: 1px dashed var(--border-strong); border-radius: var(--radius);
}

.worker-key {
    margin-top: 1rem; padding: 1rem; background: var(--field); border-radius: 8px;
    border: 1px solid var(--border); word-break: break-all; font-family: ui-monospace, monospace;
    font-size: .85rem;
}

.toolbar { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 1rem; align-items: end; }
/* Câmpurile nu se întind pe toată lățimea ecranului: la 1400 px ar ieși șapte coloane, iar ochiul ar
   sări de la una la alta. Patru coloane sunt cât se cuprinde dintr-o privire. */
.form-grid {
    display: grid; gap: .75rem; max-width: 58rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.form-grid .full { grid-column: 1 / -1; }
.inline-check { display: flex; align-items: center; gap: .4rem; color: var(--text); font-size: .92rem; }
.inline-check input { width: auto; margin: 0; }

/* Filtru cu mai multe alegeri (camere, tipuri, stări) — listă cu bifă, nu dropdown clasic. */
.multi-filter {
    position: relative;
}
.multi-filter > summary {
    list-style: none;
    cursor: pointer;
    width: 100%;
    padding: .75rem .9rem;
    border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--field);
    color: var(--text);
    font-size: .92rem;
    user-select: none;
}
.multi-filter > summary::-webkit-details-marker { display: none; }
.multi-filter > summary::after {
    content: "▾";
    float: right;
    color: var(--muted);
    font-size: .8rem;
}
.multi-filter[open] > summary {
    border-color: var(--accent);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}
.multi-filter-panel {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 14rem;
    overflow: auto;
    padding: .5rem .65rem;
    border: 1px solid var(--border-strong);
    border-top: none;
    border-radius: 0 0 8px 8px;
    background: var(--field);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .18);
    display: grid;
    gap: .35rem;
}
.multi-filter-panel label {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: .9rem;
    font-weight: 400;
    cursor: pointer;
    color: var(--text);
}
.multi-filter-panel input { width: auto; margin: 0; flex-shrink: 0; }
select, textarea {
    width: 100%; padding: .75rem .9rem; border-radius: 8px;
    border: 1px solid var(--border-strong); background: var(--field); color: var(--text);
}
table.data {
    width: 100%; border-collapse: collapse; background: var(--panel);
    border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
table.data th, table.data td {
    text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--border);
    font-size: .92rem;
}
table.data th { color: var(--muted); font-weight: 600; }
table.data tr:last-child td { border-bottom: none; }
.stack { display: grid; gap: 1rem; }
/* Într-un grid, elementele se întind pe toată coloana; butoanele trebuie să rămână la lățimea lor. */
.stack > .btn { justify-self: start; }
.stack > .btn.block { justify-self: stretch; }
.panel h2 { margin: 0 0 .75rem; font-size: 1.1rem; }

.day-picker { display: flex; flex-wrap: wrap; gap: .5rem; }
.day-option {
    display: flex; align-items: center; gap: .35rem;
    padding: .45rem .7rem; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--field); font-size: .85rem; cursor: pointer;
}
.day-option input { width: auto; margin: 0; }
.day-option:hover { border-color: var(--accent); }

/* Fereastra de reconectare Blazor. Clasele components-reconnect-* sunt puse de framework. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(4, 16, 26, .82);
    backdrop-filter: blur(4px);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-retrying,
#components-reconnect-modal.components-reconnect-paused,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-resume-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }

.reconnect-card {
    width: min(28rem, 100%);
    text-align: center;
    color: var(--text);
    background: #09293a;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    padding: 1.75rem;
    box-shadow: 0 18px 45px rgba(0,0,0,.5);
}
.reconnect-line { display: none; margin: 0; line-height: 1.5; }
.components-reconnect-show .reconnect-line-show,
.components-reconnect-retrying .reconnect-line-retrying,
.components-reconnect-paused .reconnect-line-paused,
.components-reconnect-failed .reconnect-line-failed,
.components-reconnect-resume-failed .reconnect-line-resume-failed,
.components-reconnect-rejected .reconnect-line-rejected { display: block; }
/* În timpul reîncercărilor rămâne și clasa „show”: se păstrează doar mesajul cu numărătoarea. */
.components-reconnect-show.components-reconnect-retrying .reconnect-line-show { display: none; }
.reconnect-attempt { color: var(--muted); font-size: .85rem; }
.reconnect-max:has(#components-reconnect-max-retries:empty) { display: none; }

.reconnect-spinner {
    display: none;
    width: 34px; height: 34px; margin: 0 auto 1rem;
    border: 3px solid var(--border-strong);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: reconnect-spin 1s linear infinite;
}
.components-reconnect-show .reconnect-spinner,
.components-reconnect-retrying .reconnect-spinner { display: block; }
@keyframes reconnect-spin { to { transform: rotate(360deg); } }

.reconnect-actions { display: none; gap: .6rem; justify-content: center; margin-top: 1.25rem; }
.components-reconnect-failed .reconnect-actions,
.components-reconnect-resume-failed .reconnect-actions,
.components-reconnect-rejected .reconnect-actions { display: flex; }
/* Reîncercarea nu are sens când serverul a închis definitiv sesiunea. */
.components-reconnect-rejected .reconnect-retry,
.components-reconnect-resume-failed .reconnect-retry { display: none; }

#blazor-error-ui {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 2100;
    padding: .9rem 3rem .9rem 1.25rem;
    background: #2a0f13;
    color: var(--text);
    border-top: 1px solid var(--danger);
    box-shadow: 0 -6px 20px rgba(0,0,0,.45);
    font-size: .92rem;
}
#blazor-error-ui .reload { margin-left: .75rem; color: var(--accent); text-decoration: underline; }
#blazor-error-ui .dismiss {
    position: absolute; right: 1rem; top: .55rem;
    cursor: pointer; font-size: 1.4rem; line-height: 1; color: var(--muted);
}