/* Outfit (auto-găzduit, variable) — sans geometric modern, terminale rotunjite. Două subset-uri: latin + latin-ext (ultimul aduce ș/ț/ă din Română, să nu cadă pe alt font). */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/outfit-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/outfit-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Fonturi ca TOKENI: `var(--font, inherit)` era folosit deja în cod, dar tokenul nu exista nicăieri — fallback-ul `inherit` moștenea exact fontul pe care regula voia să-l anuleze. Definite o dată aici; nu depind de temă. */ --font: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --bg: #0b0f17; --bg-2: #111725; --panel: #141c2b; --panel-2: #1a2434; --line: #232f45; --line-soft: #1b2536; /* ⚠ SEPARATOR DE SECTIUNE, distinct de `--line-soft`. Cerere Bogdan (08 sep): „vreau sa se vada mai strident acel separator intre CONTACT / ACCES si ACTIUNI PE CONT […] valabil general, pe tot portalul". NU s-a intarit `--line-soft` — el desparte RANDURI de tabel (opt locuri), unde o linie mai tare face tabelul zebrat si obositor. Un separator care spune „aici incepe alt subiect" si unul care spune „urmatorul rand" sunt doua lucruri diferite; pana acum aveau aceeasi culoare. */ --line-sect: #38486a; --txt: #e6edf7; --txt-dim: #8a97ad; --txt-faint: #7b8aa4; /* 4.89:1 pe carduri; era #5c6a82 = 3.12:1, sub pragul pentru text mic */ /* brand DAB. --brand = roșul exact al logo-ului; --accent = variantă vie, lizibilă pe navy, pentru interactiv (butoane/focus/hover/activ). Distinct de --down (coral de „incident"). */ --brand: #AE272F; --accent: #d0303c; --accent-bg: rgba(208,48,60,.15); --ok: #2ecc71; --ok-bg: rgba(46,204,113,.12); --warn: #f5a623; --warn-bg: rgba(245,166,35,.12); --down: #ff4d5e; --down-bg: rgba(255,77,94,.12); /* stale = probe tăcut / monitorizare oprită. Violet, distinct de roșu (cameră confirmată jos) — semnalează „nu știm", nu „e jos". */ --stale: #b18aff; --stale-bg: rgba(177,138,255,.12); /* maint = echipament scos INTENȚIONAT din alerte (branșament / service). Gri neutru: vizibil, dar deliberat nealarmant — „știut și asumat", nu „problemă de rezolvat". */ --maint: #8b97a8; --maint-bg: rgba(139,151,168,.14); --maint-line: rgba(139,151,168,.5); /* borduri de stare soft (uniforme, stil KPI) — pastile colorate pe toată marginea */ --ok-line: rgba(46,204,113,.5); --warn-line: rgba(245,166,35,.5); --down-line: rgba(255,77,94,.55); --stale-line: rgba(177,138,255,.55); /* ---- SCARA DE SPATIERE (08 sep 2026) -------------------------------------------------- Cerere Bogdan: „in unele zone am spatii prea mari, in alte zone n-am spatii deloc […] spatierea e general valabila pe tot portalul, fara spatii inutile si spatiere egala". Masurat inainte, in cele doua ferestre de utilizator: **noua** valori diferite (0, 5, 6, 7, 9, 12, 13, 18, 20) pentru **patru** feluri de relatii. Una dintre ele era 0 — chiar locul unde se vedea ca lipseste spatiul. Patru trepte, fiecare pentru o RELATIE, nu pentru un loc: `--sp-1` eticheta si cimpul ei — cea mai strinsa, sint un singur lucru `--sp-2` un bloc si textul care-l explica · un titlu de sectiune si continutul lui `--sp-3` intre lucruri de acelasi rang (cimp linga cimp, bloc linga bloc) `--sp-4` intre SECTIUNI — singurul salt care se citeste ca „alt subiect" ⚠ Regula, la orice felie noua: daca un spatiu nou nu incape in niciuna din cele patru, intrebarea nu e „ce valoare pun", e „ce relatie e asta de fapt". */ --sp-1: 5px; --sp-2: 9px; --sp-3: 14px; --sp-4: 20px; --radius: 12px; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.25); color-scheme: dark; /* tokeni de temă (valorile dark = culorile hardcodate ACTUALE → dark rămâne identic) */ --line-strong: #2e3c56; /* era ORFAN (folosit la .modal-close:hover, nedefinit) — acum definit */ --bg-glow: #16233b; --topbar-bg: rgba(11,15,23,.85); --overlay-panel: rgba(11,15,23,.82); --overlay-panel-strong: rgba(15,20,32,.97); --label-halo: rgba(11,15,23,.75); --uisp-fg: #ccd5e3; --uisp-border: rgba(255,255,255,.28); --uisp-bg: rgba(255,255,255,.07); --digi-fg: #8f8dff; --digi-border: rgba(0,43,254,.55); --digi-bg: rgba(0,43,254,.12); font-synthesis: none; /* ⚠ Iconițe DESENATE, nu caractere tipografice (07 sep 2026). Portalul avea 9 sageti scrise cu glife — `▾` la selectoare, iar la deschidere DOUA glife diferite pentru acelasi inteles (`▸` si `›`). Un caracter ia grosimea fontului, nu pe cea a desenelor din jur; de-aia aratau vechi langa SVG-urile din bara laterala si de pe harta. ⚠ Ca MASCA, nu ca imagine de fundal: masca ia `currentColor`, deci iconita urmeaza culoarea textului (hover, tema, stare) fara sa existe doua fisiere. Acelasi tipar ca la butonul „Straturi" de pe harta. */ /* calendar — pentru `input[type=date]`, pus peste indicatorul nativ al WebKit */ --ico-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E"); --ico-jos: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --ico-dreapta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); --ico-bifa-alba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); --ico-punct-alb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23fff'/%3E%3C/svg%3E"); --ico-linie-alba: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 6'%3E%3Crect width='24' height='6' rx='3' fill='%23fff'/%3E%3C/svg%3E"); } /* ---- temă LIGHT (M365: carduri albe pe canvas gri deschis). Overlay pe . Doar tokeni + câteva overrides punctuale (harta) — restul componentelor se recolorează prin tokeni. ---- */ :root[data-theme="light"] { color-scheme: light; --bg:#eceff3; --bg-2:#e4e8ee; --panel:#ffffff; --panel-2:#eef1f5; --line:#d5dae1; --line-soft:#e6eaef; --line-strong:#b9c2cd; --line-sect:#bcc5d0; --txt:#1b2330; --txt-dim:#55606f; --txt-faint:#5f6975; --brand:#AE272F; --accent:#c62330; --accent-bg:rgba(198,35,48,.10); --ok:#0d7d42; --ok-bg:rgba(13,125,66,.12); --ok-line:rgba(13,125,66,.5); --warn:#a35f00; --warn-bg:rgba(163,95,0,.12); --warn-line:rgba(163,95,0,.5); --down:#d92d3a; --down-bg:rgba(217,45,58,.12); --down-line:rgba(217,45,58,.55); --stale:#7b52d6; --stale-bg:rgba(123,82,214,.12); --stale-line:rgba(123,82,214,.55); --maint:#5b6675; --maint-bg:rgba(91,102,117,.12); --maint-line:rgba(91,102,117,.5); --radius:12px; --shadow:0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.08); --bg-glow:#f4f7fb; --topbar-bg:rgba(255,255,255,.85); --overlay-panel:rgba(255,255,255,.82); --overlay-panel-strong:rgba(255,255,255,.97); --label-halo:rgba(255,255,255,.85); --uisp-fg:#3a4353; --uisp-border:rgba(58,67,83,.35); --uisp-bg:#e4e8ee; --digi-fg:#002BFE; --digi-border:rgba(0,43,254,.45); --digi-bg:rgba(0,43,254,.08); } /* Light: umbrele negre bespoke de pe carduri/panouri (nu backdrop-urile de modal) devin gri-reci blânde. Backdrop-urile (background: rgba(0,0,0,...)) rămân neatinse. Dark neschimbat. */ :root[data-theme="light"] .modal-dialog, :root[data-theme="light"] .cred-card { box-shadow: 0 10px 34px rgba(16,24,40,.14), 0 2px 8px rgba(16,24,40,.08); } :root[data-theme="light"] .site:hover { box-shadow: 0 6px 20px rgba(16,24,40,.12); } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(1200px 600px at 80% -10%, var(--bg-glow) 0%, transparent 60%), var(--bg); color: var(--txt); font: 15px/1.5 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: inherit; text-decoration: none; } .mono { font-family: var(--mono), "SF Mono", "JetBrains Mono", Menlo, monospace; font-size: .92em; } /* ---- topbar ---- */ .topbar { display: flex; align-items: center; gap: 28px; height: var(--topbar-h); padding: 0 24px; background: var(--topbar-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .2px; } /* Marca reală DAB, aceeași cu iconița de pe ecranul telefonului și cu cea de pe pagina de autentificare. Era un caracter text (`◉`), care nu semăna cu nimic din produs. */ .brand-mark { display: block; width: 22px; height: 22px; border-radius: 6px; flex: none; } .brand-dim { color: var(--txt-dim); font-weight: 500; } .topnav { display: flex; gap: 6px; } .topnav a { padding: 6px 12px; border-radius: 8px; color: var(--txt-dim); font-weight: 500; } .topnav a:hover { color: var(--txt); background: var(--panel); } .topnav a.active { color: var(--txt); background: var(--panel-2); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .env-pill { font-size: 12px; color: var(--txt-dim); border: 1px solid var(--line); border-radius: 20px; padding: 4px 12px; } .live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--txt-dim); font-variant-numeric: tabular-nums; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); animation: livepulse 2.4s infinite; } @keyframes livepulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } /* refresh în pauză (modal deschis / câmp în focus): ceasul NU mai avansează, iar indicatorul o spune — altfel ora arată proaspătă peste date vechi */ .live.is-paused { opacity: .55; } .live.is-paused .live-dot { background: var(--txt-faint); box-shadow: none; animation: none; } @media (max-width: 620px) { .live { display: none; } } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin-right: 4px; background: transparent; border: 1px solid var(--line); border-radius: 8px; color: var(--txt-dim); font-size: 16px; cursor: pointer; line-height: 1; transition: color .12s ease, background .12s ease, border-color .12s ease; } .nav-toggle:hover { color: var(--txt); background: var(--panel); border-color: var(--line); } .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- app shell: side-meniu (stânga) + zonă de conținut (dreapta) ---- */ .app { display: flex; align-items: stretch; min-height: 100vh; } .sidebar { flex: 0 0 246px; width: 246px; background: var(--bg-2); border-right: 1px solid var(--line); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: flex-basis .18s ease, width .18s ease; } .sidebar-brand { /* aceeași înălțime ca banda de sus, ca marca din meniu să se alinieze cu ea */ display: flex; align-items: center; gap: 9px; height: var(--topbar-h); padding: 0 18px; font-weight: 700; letter-spacing: .2px; white-space: nowrap; overflow: hidden; border-bottom: 1px solid var(--line); } .sidebar-nav { padding: 10px 8px; display: flex; flex-direction: column; gap: 2px; } .sidebar-nav a { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 8px; color: var(--txt-dim); font-weight: 500; white-space: nowrap; overflow: hidden; } .sidebar-nav a:hover { color: var(--txt); background: var(--panel); } .sidebar-nav a.active { color: var(--txt); background: var(--panel-2); box-shadow: inset 3px 0 0 var(--accent); } .sidebar-nav a.nav-soon { opacity: .55; cursor: default; } .sidebar-nav a.nav-soon:hover { background: transparent; color: var(--txt-dim); } /* ⚠ SVG, nu emoji: emoji-urile se randează cu fontul sistemului (altfel pe iOS față de Android) și nu pot prelua culoarea stării active. Aceleași desene ca în bara de jos — aceeași destinație trebuie să arate la fel în ambele navigații. */ .sidebar-ico { flex: 0 0 22px; width: 22px; display: inline-flex; align-items: center; justify-content: center; } .sidebar-ico svg { width: 19px; height: 19px; stroke: currentColor; } .sidebar-nav a.active .sidebar-ico svg { color: var(--accent); } .sidebar-label { overflow: hidden; text-overflow: ellipsis; } .sidebar-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--txt-faint); font-weight: 600; padding: 14px 12px 4px; white-space: nowrap; } .nav-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* ⚠ `isolation: isolate` pe conținut: fără el, orice `z-index` dinăuntru CONCUREAZĂ cu banda de sus (10) și cu bara de jos. Butonul ⋮ al unui card NVR avea 20 și trecea peste ele — se vedea plutind lângă ☰, deasupra antetului, fără nicio legătură cu cardul lui (semnalat de Bogdan cu poze). Izolarea îl închide în conținut, indiferent ce număr are. Numerele de dinăuntru rămân relative între ele: antet de comună 8 > panou de meniu 7 > antet de județ 5 > buton ⋮ 2. Un panou se deschide ÎN JOS, deci nu urcă niciodată peste antet — dar dacă rândul lui e derulat sub antet, se ascunde odată cu el, cum se cuvine. */ .app-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; } .app-main > main, .app-main > .content { isolation: isolate; } .app-main .topbar { gap: 12px; } /* retras (rail): doar iconuri; ascunde etichetele + brand-text + secțiuni */ .app.nav-collapsed .sidebar { flex-basis: 60px; width: 60px; } .app.nav-collapsed .sidebar-label, .app.nav-collapsed .sidebar-sec, .app.nav-collapsed .brand-name { display: none; } .app.nav-collapsed .sidebar-brand { padding: 0; justify-content: center; } .app.nav-collapsed .sidebar-nav { padding: 10px 6px; } .app.nav-collapsed .sidebar-nav a { justify-content: center; padding: 8px 0; } /* ⚠ PLASĂ GLOBALĂ: orice regulă de autor cu `display` BATE `[hidden]{display:none}` din stylesheet-ul browserului (author > UA), deci un element ascuns din JS prin `.hidden = true` rămâne VIZIBIL dacă clasa lui setează `display`. Greșeala a apărut deja de trei ori în proiect: `.nav-scrim` (voalul fura toate tap-urile pe mobil), `.modal-overlay`, și `#ob-uisp-wrap` din wizard (câmpul UISP rămânea vizibil și editabil la comunele DIGI). Regula asta o închide o dată pentru tot portalul. */ [hidden] { display: none !important; } /* scrim (doar mobil, când meniul e deschis peste conținut) */ .nav-scrim { display: none; } @media (max-width: 820px) { /* mobil: sidebar off-canvas peste conținut; retras by default, toggle îl aduce */ .sidebar { position: fixed; top: 0; left: 0; z-index: 40; flex-basis: 246px; width: 246px; transform: translateX(-100%); transition: transform .2s ease; } .app.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow); } .app.nav-collapsed .sidebar { flex-basis: 246px; width: 246px; } /* rail-ul e concept desktop */ .app.nav-collapsed .sidebar-label, .app.nav-collapsed .sidebar-sec, .app.nav-collapsed .brand-name { display: revert; } /* scrim vizibil DOAR când meniul e deschis (nav-open). Fără scoparea asta, regula de autor .nav-scrim{display:block} suprascrie atributul [hidden] (author > UA) → voalul acoperă tot ecranul pe mobil și fură toate tap-urile (bug: „totul e gri, nu pot apăsa nimic"). */ .app.nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.5); } .wrap { padding: 20px 16px 48px; } } @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } } /* conținutul umple zona din dreapta side-meniului (full-viewport, se adaptează la rezoluția displayului); fără coloană centrată fixă → fără spațiu mort pe laterale */ .wrap { width: 100%; max-width: none; margin: 0; padding: 24px 32px 60px; } .foot { text-align: center; color: var(--txt-faint); font-size: 12px; padding: 24px; border-top: 1px solid var(--line-sect); } .section-h { font-size: 13px; text-transform: uppercase; letter-spacing: .8px; color: var(--txt-dim); font-weight: 600; margin: 13px 0 8px; } .section-h .count { color: var(--txt-faint); font-weight: 500; margin-left: 4px; } /* pagina de nepotriviri de corelare (fleet-wide) */ .page-header { margin-bottom: 20px; } .page-header h1 { font-size: 22px; font-weight: 700; letter-spacing: -.3px; margin: 0 0 8px; } .corr-site { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); } .corr-site:first-of-type { border-top: none; } .corr-site-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; font-size: 17px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 4px; } .corr-site-h a { color: var(--txt); } .corr-site-h a:hover { color: var(--accent); } .corr-site-h .count { font-size: 12px; font-weight: 500; color: var(--txt-faint); text-transform: none; letter-spacing: 0; } /* zona de nepotriviri de corelare, colapsabilă, în pagina de comună (doar admin) */ .corr-zone { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); box-shadow: var(--shadow); } .corr-zone-sum { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 12px 16px; } .corr-zone-sum::-webkit-details-marker { display: none; } .corr-zone-sum::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; color: var(--txt-faint); -webkit-mask: var(--ico-dreapta) center/contain no-repeat; mask: var(--ico-dreapta) center/contain no-repeat; transition: transform .15s; } .corr-zone[open] > .corr-zone-sum::before { transform: rotate(90deg); } .corr-zone[open] > .corr-zone-sum { border-bottom: 1px solid var(--line-sect); } .corr-zone-sum:hover { background: var(--panel); border-radius: var(--radius); } .corr-zone-title { font-size: 14px; font-weight: 700; color: var(--txt-dim); text-transform: uppercase; letter-spacing: .5px; } .corr-zone-note { margin-left: auto; font-size: 12px; color: var(--txt-faint); font-style: oblique 8deg; font-synthesis: style; } .corr-zone > h3, .corr-zone > p, .corr-zone > .panel { margin-left: 16px; margin-right: 16px; } .corr-zone > .panel:last-child { margin-bottom: 16px; } .corr-zone > h3.section-h:first-of-type { margin-top: 14px; } .empty-state { display: flex; align-items: center; gap: 14px; padding: 20px 22px; color: var(--txt-dim); } .empty-state strong { color: var(--txt); } /* strip de pastile per comună (sub KPI) — click = filtrează la o singură comună */ .corr-strip { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; } .corr-pill { flex: 1 1 200px; max-width: 320px; background: var(--panel); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; box-shadow: var(--shadow); transition: transform .12s ease; } .corr-pill:hover { transform: translateY(-1px); } .corr-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .corr-pill { transition: none; } .corr-pill:hover { transform: none; } } .corr-pill.sev-dup { border-color: var(--down); background: linear-gradient(var(--down-bg), var(--down-bg)), var(--panel); } .corr-pill.sev-warn { border-color: var(--warn); background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--panel); } .corr-pill.corr-pill-sel { transform: translateY(-1px); } .corr-pill.sev-dup.corr-pill-sel { box-shadow: 0 0 0 2.5px var(--down), var(--shadow); } .corr-pill.sev-warn.corr-pill-sel { box-shadow: 0 0 0 2.5px var(--warn), var(--shadow); } .corr-pill-head { display: flex; align-items: baseline; gap: 8px; } .corr-pill-name { font-weight: 700; font-size: 14px; letter-spacing: .2px; } .corr-pill-total { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--txt-dim); font-variant-numeric: tabular-nums; } .corr-pill-break { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-variant-numeric: tabular-nums; } .cp-dup { color: var(--down); } .cp-noont { color: var(--warn); } .cp-orphan { color: var(--txt-dim); } .county-h { display: flex; align-items: baseline; gap: 11px; margin: 14px 0 9px; padding-bottom: 7px; border-bottom: 1px solid var(--line); } .county-h:first-of-type { margin-top: 6px; } .county-h .dot { align-self: center; } .county-name { font-size: 17px; font-weight: 700; letter-spacing: .2px; margin: 0; } .county-count { font-size: 12px; color: var(--txt-faint); font-weight: 500; } .county-sum { margin-left: auto; font-size: 12.5px; color: var(--txt-dim); font-weight: 500; } .county-sum-down { color: var(--down); } .county-sum-stale { color: var(--stale); } .county-sum-warn { color: var(--warn); } .county-sum-ok { color: var(--ok); } /* strip rezumat NVR (pagina de comună) */ /* pastilele cresc egal ca să umple TOATĂ lățimea (fără spațiu gol în dreapta); justify-content:center centrează când sunt puține (1–2 NVR nu se întind grotesc). */ .nvr-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 12px 0 8px; } .nvr-card { flex: 1 1 220px; max-width: 420px; background: var(--panel); border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 13px; box-shadow: var(--shadow); cursor: pointer; transition: transform .08s ease, box-shadow .12s ease; } /* ⚠ RIDICAREA LA HOVER, doar unde există cu adevărat un cursor. Pe iOS `:hover` RĂMÂNE LIPIT după o atingere, iar `transform` creează un CONTEXT DE STIVUIRE: panoul meniului ⋮ rămânea prins în cardul atins și era acoperit de cardul de dedesubt (semnalat de Bogdan cu poză — se vedea doar o fâșie din meniul lui NVR 1, sub NVR 3). Reprodus în WebKit punând `transform` pe card: panoul trece de la „deasupra" la „acoperit". */ @media (hover: hover) { .nvr-card:hover { transform: translateY(-1px); } } .nvr-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* card selectat (filtru activ pe acel NVR): margine îngroșată ÎN CULOAREA DE STARE (nu albastru), + lift. Inelul de aceeași culoare dublează vizual grosimea bordurii. */ .nvr-card.nvr-card-sel { transform: translateY(-1px); } .nvr-card-ok.nvr-card-sel { box-shadow: 0 0 0 2.5px var(--ok), var(--shadow); } .nvr-card-warn.nvr-card-sel { box-shadow: 0 0 0 2.5px var(--warn), var(--shadow); } .nvr-card-down.nvr-card-sel { box-shadow: 0 0 0 2.5px var(--down), var(--shadow); } .nvr-card-stale.nvr-card-sel { box-shadow: 0 0 0 2.5px var(--stale), var(--shadow); } @media (prefers-reduced-motion: reduce) { .nvr-card { transition: none; } .nvr-card:hover { transform: none; } } /* culoarea de stare pe TOT conturul + fundal ușor tentat (compus peste panel) */ .nvr-card.nvr-card-ok { border-color: var(--ok); background: linear-gradient(var(--ok-bg), var(--ok-bg)), var(--panel); } .nvr-card.nvr-card-warn { border-color: var(--warn); background: linear-gradient(var(--warn-bg), var(--warn-bg)), var(--panel); } .nvr-card.nvr-card-down { border-color: var(--down); background: linear-gradient(var(--down-bg), var(--down-bg)), var(--panel); } .nvr-card.nvr-card-maint { border-color: var(--maint); background: linear-gradient(var(--maint-bg), var(--maint-bg)), var(--panel); } .nvr-card-maint.nvr-card-sel { box-shadow: 0 0 0 2.5px var(--maint), var(--shadow); } .nvr-reason-maint { color: var(--maint); } /* Meniul ⋮ din colțul cardului NVR. Cardul e el însuși buton de filtrare, deci meniul stă deasupra (z-index) și JS-ul îi oprește propagarea click-ului. ⚠ SPECIFICITATE, nu ordine: elementul poartă ȘI `.row-menu` (JS-ul îl caută cu `closest('.row-menu')` ca să-l închidă după acțiune), iar `.row-menu{position:relative}` e declarat mai jos în fișier — la specificitate egală câștiga el, meniul cădea în flux și apărea sus-STÂNGA, împingând conținutul cardului. Prefixul `.nvr-card` face regula imună la poziția în fișier, deci nu se mai strică la următoarea clasă adăugată la coadă. */ .nvr-card { position: relative; } .nvr-card .nvr-menu { position: absolute; top: 6px; right: 6px; z-index: 2; } .nvr-card .nvr-menu > summary { width: 26px; height: 26px; font-size: 16px; } @media (max-width: 620px) { .nvr-card .nvr-menu > summary { width: 40px; height: 40px; } } /* Butonul preia STAREA cardului pe bordură, textul rămâne neutru. ⚠ Culoarea de stare ca TEXT pică sub 4.5:1 pe light-warn (4.27) și light-down (4.00) — gliful ⋮ nu se califică drept „text mare". Bordura e element non-text (WCAG 1.4.11, prag 3:1) → trece confortabil. */ .nvr-card .nvr-menu > summary { background: transparent; color: var(--txt-dim); } .nvr-card-ok .nvr-menu > summary { border-color: var(--ok-line); } .nvr-card-warn .nvr-menu > summary { border-color: var(--warn-line); } .nvr-card-down .nvr-menu > summary { border-color: var(--down-line); } .nvr-card-stale .nvr-menu > summary { border-color: var(--stale-line); } .nvr-card-maint .nvr-menu > summary { border-color: var(--maint-line); } .nvr-card .nvr-menu > summary:hover, .nvr-card .nvr-menu[open] > summary { background: var(--panel); color: var(--txt); } .nvr-card .nvr-menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .nvr-card.nvr-card-stale { border-color: var(--stale); background: linear-gradient(var(--stale-bg), var(--stale-bg)), var(--panel); } /* ⚠ Spațiu rezervat pentru meniul ⋮ (poziționat absolut în colțul din dreapta-sus): fără el, IP-ul (împins la margine cu `margin-left:auto`) și contorul de discuri (ultimul dintr-un `space-between`) ajung EXACT sub buton. Se aplică pe cele două rânduri de sus — rândul de motiv e sub butonul de 26px, deci nu-l atinge. Pe mobil butonul e 40px, deci și marja crește. */ .nvr-card .nvr-card-head, .nvr-card .nvr-card-count { padding-right: 32px; } @media (max-width: 620px) { .nvr-card .nvr-card-head, .nvr-card .nvr-card-count { padding-right: 46px; } } .nvr-card-head { display: flex; align-items: center; gap: 8px; } .nvr-card-head .dot { width: 8px; height: 8px; flex: none; } .nvr-card-name { font-weight: 700; font-size: 14px; letter-spacing: .2px; } /* ⚠ E acum LINK către interfața NVR-ului (2026-08-12), deci trebuie să arate ca un link, nu ca text șters: culoare de text obișnuit, subliniere doar la hover. `font-size` urcat de la 12px — e o adresă pe care omul chiar o citește și o tastează, nu o notă de subsol. */ .nvr-card-host { margin-left: auto; font-size: 13.5px; color: var(--txt-dim); font-variant-numeric: tabular-nums; text-decoration: none; } .nvr-card-host:hover { color: var(--accent); text-decoration: underline; } .nvr-card-host:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } .nvr-card-count { margin-top: 6px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--txt-dim); font-variant-numeric: tabular-nums; font-style: oblique 8deg; font-synthesis: style; } .nvr-cell { white-space: nowrap; font-variant-numeric: tabular-nums; } .ev-kind { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; letter-spacing: .3px; } .ev-kind-cam { color: var(--accent); background: var(--accent-bg); } .ev-kind-ont { color: var(--txt-dim); background: var(--panel-2); border: 1px solid var(--line); } .ev-kind-maint { color: var(--maint); background: var(--maint-bg); border: 1px solid var(--maint-line); } .ev-detail { display: block; margin-top: 3px; color: var(--txt-faint); font-size: 12px; white-space: normal; } .nvr-card-disks { color: var(--txt-faint); } .nvr-card-disks.bad { color: var(--down); } .nvr-card-reason { margin-top: 3px; font-size: 12px; line-height: 1.35; } .nvr-card-reason.nvr-reason-down { color: var(--down); } .nvr-card-reason.nvr-reason-warn { color: var(--warn); } .nvr-card-reason.nvr-reason-stale { color: var(--stale); } /* bară de filtre (tabel unificat) */ /* ⚠ `scroll-margin-top` = înălțimea barei de sus + puțin aer. Bara e `position: sticky`, deci fără offset `scrollIntoView` ar duce filtrele exact SUB ea — adică pastila te-ar trimite undeva unde tot nu vezi ce s-a filtrat. */ .filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 10px; scroll-margin-top: 70px; } /* Rândul-țintă, venind din harta N3 (`/site/x#cam-R41`). Același offset pentru bara sticky. Evidențierea e un puls scurt, nu o culoare permanentă: spune «aici e», apoi se dă la o parte, ca să nu concureze cu bulinele de severitate ale rândului. */ .camrow { scroll-margin-top: 70px; } .cam-tinta { animation: tinta 2.4s ease-out 1; } @keyframes tinta { 0%, 55% { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); } 100% { background: transparent; box-shadow: none; } } @media (prefers-reduced-motion: reduce) { .cam-tinta { animation: none; background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); } } /* Titlul comunei și numele camerei din panoul N3 = legături către pagina comunei. ⚠ FĂRĂ linie sub text: pusesem un `border-bottom` punctat ca semn de link, dar în capul panoului arată exact ca o subliniere scăpată (semnalat de Bogdan). Afordanța rămâne cursorul și culoarea la hover — destul într-un panou unde restul textului e static. */ .n3-panel-link, .n3-cam-link { color: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: color .12s ease; } .n3-panel-link:hover, .n3-cam-link:hover { color: var(--accent); } .n3-panel-link:focus-visible, .n3-cam-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .filt { background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; } .filt:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .filt-q { flex: 1; min-width: 160px; } .filt-count { color: var(--txt-faint); font-size: 12px; margin-left: auto; font-variant-numeric: tabular-nums; } .filt-dd { width: 178px; flex: none; } .filt-dd .sel-current { overflow: hidden; text-overflow: ellipsis; } /* ⛔ FĂRĂ plafon de lățime pe textele explicative. Măsurat, e drept, că la 1920 rândurile ajung la ~214 caractere — dar plafonul a fost încercat de TREI ori și respins de fiecare dată pentru același motiv: pe un panou lat, un paragraf îngust arată a text neterminat, și se rupe pe trei rânduri acolo unde ar încăpea pe unul. Ultima oară, 08 sep, Bogdan: „în loc să fie pe toată lățimea paginii, e pe o lățime fixă și se duce aiurea pe 3 rânduri". ⚠ Dacă revine ideea: problema NU e valoarea plafonului (70ch, 90ch, 38em — toate trei respinse), e faptul că textul introductiv stă într-un panou cât pagina. S-ar rezolva îngustând ZONA, nu paragraful. Până atunci, nu se pune la loc. */ /* ⚠ Un text explicativ APARȚINE blocului de deasupra (deci `--sp-2`, treapta „bloc și lămurirea lui") și e despărțit de ce urmează (deci `--sp-3`, rang diferit). Avea `margin-top` ZERO, deci stătea LIPIT de elementul de deasupra — măsurat 0px pe pagina de grupuri, în trei locuri. Semnalat de Bogdan: „spațierea inexistentă între textele gri și restul". */ .hint { color: var(--txt-dim); font-size: 12.5px; margin: var(--sp-2) 0 var(--sp-3); } /* pop-up istoric (nu schimbă pagina) */ .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); } .modal-overlay[hidden] { display: none; } /* ⚠ `calc(100vh - 48px)`, nu `85vh`. Plafonul de 85% era o alegere arbitrară care lăsa 15% din fereastră nefolosiți TOCMAI cînd fereastra e mică — adică exact cînd contează. Cu 24px marjă sus și jos, aceeași fereastră care derula la un viewport de 840 acum încape de la 769 în sus. ⚠ Contează fiindcă plafonul e din VIEWPORT, nu din ecran: Safari cu bară de file, de adrese și de semne de carte lasă dintr-un ecran de 1080 un viewport de ~850–940, iar diferența variază de la om la om. */ .modal-dialog { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 48px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); padding: 6px 22px 22px; } .modal-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--line); color: var(--txt-dim); font-size: 14px; line-height: 1; } .modal-close:hover { color: var(--txt); border-color: var(--line-strong); } .modal-body .site-header { margin-top: 8px; } .nvr-reason { margin-left: 10px; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 12px; } .nvr-reason-down { color: var(--down); } .nvr-reason-warn { color: var(--warn); } /* ---- KPIs ---- */ .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 12px; margin-bottom: 6px; } .kpi { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 18px; box-shadow: var(--shadow); text-align: center; } .kpi-val { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; } .kpi-sub { font-size: 17px; color: var(--txt-faint); font-weight: 700; letter-spacing: -.5px; } .kpi-lbl { margin-top: 4px; color: var(--txt-dim); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; } /* KPI-urile de stare: bordură colorată uniform (token) + un fir subțire sus, în aceeași culoare */ .kpi-warn { border-color: var(--warn-line); } .kpi-warn .kpi-val { color: var(--warn); } .kpi-stale { border-color: var(--stale-line); } .kpi-stale .kpi-val { color: var(--stale); } .kpi-down { border-color: var(--down-line); } .kpi-down .kpi-val { color: var(--down); } .kpi-warn::before, .kpi-stale::before, .kpi-down::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; } .kpi-warn::before { background: var(--warn); } .kpi-stale::before { background: var(--stale); } .kpi-down::before { background: var(--down); } .kpi-maint { border-color: var(--maint-line); } .kpi-maint .kpi-val { color: var(--maint); } .kpi-maint::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--maint); } /* Pastile-filtru: afordanță de buton + stare activă, ca la cardurile NVR (`.nvr-card`). „Hard Disk"/„ONT" NU primesc `.kpi-f` — numără alte entități decât rândurile tabelului, deci au doar ancora `.kpi-jump` către secțiunea lor. */ .kpi-f { cursor: pointer; transition: transform .12s, box-shadow .12s; user-select: none; } .kpi-f:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.08), var(--shadow); } .kpi-f:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .kpi-sel { box-shadow: 0 0 0 2.5px var(--accent), var(--shadow); } /* ⚠ `.kpi-f:hover` (0-2-0) bate `.kpi-sel` (0-1-0) INDIFERENT de ordine → pe o pastilă selectată, hover-ul îi ștergea inelul de selecție. Combo explicit, cu specificitate ≥. */ .kpi-f.kpi-sel:hover { box-shadow: 0 0 0 2.5px var(--accent), var(--shadow); transform: translateY(-1px); } .kpi-jump { color: var(--txt-dim); font-weight: 700; text-decoration: underline; margin-left: 4px; } .kpi-jump:hover { color: var(--accent); } .filt-clear { background: none; border: none; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 0; } /* ---- mentenanță: modal + formular ---- */ .maint-current { border: 1px solid var(--maint-line); background: var(--maint-bg); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; } .maint-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } .maint-tag { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 700; color: var(--maint); background: var(--panel); border: 1px solid var(--maint-line); } .maint-progress { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--txt-dim); font-variant-numeric: tabular-nums; } .maint-updated { margin-top: 3px; font-size: 12.5px; } /* acțiunea de scoatere din meniul ⋮ = distructivă-ușoară, marcată ca atare */ .row-menu-panel .btn-maint-close { color: var(--down); } .maint-hint { margin-top: 6px; } .maint-notes { margin-bottom: 12px; } .maint-types { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .maint-type { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; } .maint-type:hover { border-color: var(--line-strong); } .maint-type:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); } .maint-type input { margin-top: 3px; flex: none; } .maint-type-txt { display: flex; flex-direction: column; gap: 2px; } .maint-type-txt em { font-style: normal; color: var(--txt-dim); font-size: 12px; } .maint-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .maint-close { color: var(--down); } /* ---- dots ---- */ .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .dot-lg { width: 14px; height: 14px; } /* verde = static (e ok, nu-ți fură atenția); galben/roșu/stale = pulsează (problemă) */ .dot-ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); } .dot-warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); animation: pulse-warn 1.8s infinite; } .dot-down { background: var(--down); box-shadow: 0 0 0 3px var(--down-bg); animation: pulse 1.8s infinite; } .dot-stale { background: var(--stale); box-shadow: 0 0 0 3px var(--stale-bg); animation: pulse-stale 1.8s infinite; } /* maint = static, ca `ok`: e o stare cunoscută și asumată, nu are voie să-ți fure atenția */ .dot-maint { background: var(--maint); box-shadow: 0 0 0 3px var(--maint-bg); } /* fără stare: un stick băgat în NVR nu e nici bun, nici stricat — e doar prezent. Contur gol, ca să se vadă că rândul e informativ, nu o judecată despre sănătatea unui disc. */ .dot-none { background: transparent; box-shadow: inset 0 0 0 2px var(--txt-dim); } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--down-bg); } 50% { box-shadow: 0 0 0 8px rgba(255,77,94,.20); } } @keyframes pulse-warn { 0%,100% { box-shadow: 0 0 0 3px var(--warn-bg); } 50% { box-shadow: 0 0 0 8px rgba(245,166,35,.20); } } @keyframes pulse-stale { 0%,100% { box-shadow: 0 0 0 3px var(--stale-bg); } 50% { box-shadow: 0 0 0 8px rgba(177,138,255,.20); } } @media (prefers-reduced-motion: reduce) { .dot-warn, .dot-down, .dot-stale { animation: none; } } /* ---- site grid ---- */ /* 320px minim → pe 1920 (lățime utilă 1610 = 1920 − 246 sidebar − 64 padding) intră exact 4 carduri, fiindcă 5×320+48 = 1698 > 1610. Sub asta, auto-fill scade singur la 3 / 2 / 1. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 12px; align-items: stretch; } .site { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 9px 14px; box-shadow: var(--shadow); min-height: 44px; display: flex; flex-direction: column; /* fill pe înălțimea rândului → carduri egale */ transition: transform .12s ease, border-color .12s ease; /* border UNIFORM colorat pe stare */ } .site:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 6px 20px rgba(0,0,0,.35); } .site.st-ok { border-color: var(--ok-line); } .site.st-warn { border-color: var(--warn-line); } .site.st-down { border-color: var(--down-line); } .site.st-stale { border-color: var(--stale-line); } .site-head { display: flex; align-items: center; gap: 9px; } /* Numele comunei nu se rupe pe două rânduri, oricât de îngust ar fi cardul („Balta Doamnei", „Bretea Română"). Cardurile mai late de mai sus rezolvă cazul obișnuit; asta e garda care ține la orice lățime — dacă tot nu încape, se taie cu „…", nu strică înălțimea cardului. */ .site-name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .site-status { flex: none; } .site-status { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--txt-dim); } .site.st-down .site-status { color: var(--down); } .site.st-warn .site-status { color: var(--warn); } .site.st-stale .site-status { color: var(--stale); } .site.st-ok .site-status { color: var(--ok); } /* rând stare secundar: motivul (stânga, colorat pe stare) + „actualizat acum X" (dreapta, sub status) */ .site-sub { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; } .site-reason { font-size: 12px; font-style: oblique 8deg; font-synthesis: style; color: var(--txt-dim); line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .site.st-down .site-reason { color: var(--down); } .site.st-stale .site-reason { color: var(--stale); } .site-body { display: flex; align-items: center; gap: 14px; margin: 6px 0; } .metric-val { font-size: 19px; font-weight: 700; line-height: 1.1; } .metric-sub { color: var(--txt-faint); font-size: 14px; font-weight: 500; } .metric-lbl { font-size: 13px; color: var(--txt-dim); letter-spacing: .3px; margin-left: 6px; } .cam-bar { flex: 1; display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--bg-2); } .seg { display: block; } .seg-ok { background: var(--ok); } .seg-warn { background: var(--warn); } .seg-down { background: var(--down); } .seg-maint { background: var(--maint); } /* semnul discret de pe cardul comunei din flotă */ .site-maint { font-size: 12px; line-height: 1; cursor: help; opacity: .85; } .site-foot { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; margin-top: auto; } .chip { font-size: 11px; color: var(--txt-dim); background: var(--bg-2); border: 1px solid var(--line-soft); border-radius: 20px; padding: 2px 8px; white-space: nowrap; } .chip-alert { color: var(--warn); border-color: rgba(245,166,35,.3); } .chip-disk-ok { color: var(--ok); border-color: rgba(46,204,113,.3); } .chip-disk-bad { color: var(--down); border-color: rgba(255,77,94,.3); } .chip-uisp { color: var(--uisp-fg); border-color: var(--uisp-border); } /* fibră proprie — alb-albăstrui UISP */ .chip-digi { color: var(--digi-fg); border-color: var(--digi-border); background: var(--digi-bg); } /* transport DIGI — albastru logo #002BFE */ .empty { grid-column: 1/-1; text-align: center; color: var(--txt-dim); padding: 60px 20px; } .empty code { background: var(--panel); padding: 2px 7px; border-radius: 5px; color: var(--txt); } .empty h1 { font-size: 48px; margin: 0 0 8px; } /* ---- site header ---- */ .crumbs { color: var(--txt-dim); font-size: 13px; margin-bottom: 10px; } .crumbs a:hover { color: var(--txt); } .crumbs span { margin: 0 6px; color: var(--txt-faint); } /* zona de administrare: bară de tab-uri (segmented control) + conținut compact */ .admin-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 18px; padding: 5px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; } .admin-tab { padding: 8px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--txt-dim); text-decoration: none; white-space: nowrap; transition: background .12s, color .12s; } .admin-tab:hover { background: var(--panel); color: var(--txt); } .admin-tab.active { background: var(--accent); color: #fff; } .admin-tab.active:hover { background: var(--accent); color: #fff; } .admin-intro { margin: 0 0 14px; } /* dialog „deconectat pentru inactivitate" (auto-refresh detectează sesiunea moartă) */ .idle-modal { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); } .idle-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 34px; max-width: 400px; text-align: center; box-shadow: var(--shadow); } .idle-ico { font-size: 34px; margin-bottom: 8px; } .idle-card h3 { margin: 0 0 8px; font-size: 20px; } .idle-card p { margin: 0 0 22px; color: var(--txt-dim); line-height: 1.5; } .idle-card button { background: var(--accent); color: #fff; border: none; border-radius: 8px; padding: 11px 24px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; } .idle-card button:hover { filter: brightness(1.08); } /* bară de progres la schimbarea paginii (feedback că se încarcă) */ #page-loader { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000; opacity: 0; background: var(--accent); box-shadow: 0 0 10px var(--accent), 0 0 4px var(--accent); transition: width .35s cubic-bezier(.2,.8,.3,1), opacity .25s ease; pointer-events: none; } #page-loader.active { width: 92%; opacity: 1; } @media (prefers-reduced-motion: reduce) { #page-loader { transition: opacity .2s ease; } } .site-header { position: relative; display: flex; align-items: center; gap: 16px; margin-bottom: 13px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: var(--radius); padding: 13px 24px; box-shadow: var(--shadow); } /* Badge „necesită atenție — corelare": centrat sus pe pastila comunei, doar admin când există nepotriviri */ .corr-flag { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 6px; z-index: 3; background: var(--down); color: #fff; text-decoration: none; padding: 3px 13px; border-radius: 999px; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; box-shadow: 0 2px 8px rgba(255, 77, 94, .35); } .corr-flag:hover { filter: brightness(1.08); } .site-header.st-ok { border-left-color: var(--ok); } .site-header.st-warn { border-left-color: var(--warn); } .site-header.st-down { border-left-color: var(--down); } .site-header.st-stale { border-left-color: var(--stale); } .site-header-main { display: flex; align-items: center; gap: 16px; } .site-header h1 { margin: 0; font-size: calc(16px + 8px); } .site-county { color: var(--txt-dim); font-weight: 400; } .site-meta { color: var(--txt-dim); font-size: calc(12px + 1px); margin-top: 4px; } .meta-age { font-style: oblique 8deg; font-synthesis: style; } .site-header-status { margin-left: auto; text-align: right; } .site-status-label { font-size: 19px; font-weight: 700; letter-spacing: .2px; } .site-header.st-ok .site-status-label { color: var(--ok); } .site-header.st-warn .site-status-label { color: var(--warn); } .site-header.st-down .site-status-label { color: var(--down); } .site-header.st-stale .site-status-label { color: var(--stale); } .site-header-reason { display: block; font-size: calc(12px + 2px); margin-top: 4px; color: var(--txt-dim); } .site-header.st-down .site-header-reason { color: var(--down); } .site-header.st-stale .site-header-reason { color: var(--stale); } .site-header.st-warn .site-header-reason { color: var(--warn); } .badge { font-size: 11px; padding: 2px 8px; border-radius: 6px; margin-left: 6px; } .badge-warn { background: var(--warn-bg); color: var(--warn); } /* etichete de stare pe pastila comunei (Setări site-uri): litere mari, culori clare */ .badge-ct-ok, .badge-ct-no, .badge-uisp, .badge-digi-c { display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-transform: uppercase; font-weight: 700; letter-spacing: .5px; font-size: 10px; border-radius: 5px; padding: 3px 9px; } .badge-ct-ok { background: var(--ok-bg); color: var(--ok); border: 1px solid rgba(46,204,113,.4); } .badge-ct-no { background: var(--warn-bg); color: var(--warn); border: 1px solid rgba(245,166,35,.4); } .badge-uisp { background: var(--uisp-bg); color: var(--uisp-fg); border: 1px solid var(--uisp-border); } /* neutru alb-gri, contrast cu DIGI albastru */ .badge-digi-c { background: var(--digi-bg); color: var(--digi-fg); border: 1px solid var(--digi-border); } /* albastru DIGI #002BFE */ /* ---- alerts ---- */ .alerts { display: flex; flex-direction: column; gap: 6px; } .alert { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: 9px; border: 1px solid var(--line); background: var(--panel); } .alert.al-down { border-color: rgba(255,77,94,.35); background: linear-gradient(90deg, var(--down-bg), var(--panel) 40%); } .alert.al-warn { border-color: rgba(245,166,35,.3); background: linear-gradient(90deg, var(--warn-bg), var(--panel) 40%); } .alert.al-stale { border-color: rgba(177,138,255,.35); background: linear-gradient(90deg, var(--stale-bg), var(--panel) 40%); } .al-subj { font-weight: 600; min-width: 90px; font-family: ui-monospace, monospace; font-size: .92em; } .al-msg { color: var(--txt-dim); font-size: 13.5px; } /* ---- device tables ---- */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .dev { width: 100%; border-collapse: collapse; } /* lățimi de coloană fixe → margini de coloană consecvente (fără goluri inegale). Conținutul prea lung se taie curat cu „…" (are tooltip oricum). */ .dev-fixed { table-layout: fixed; } .dev-fixed tbody td, .dev-fixed thead th { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* prima coloană = bulina de stare: fără clip (altfel se taie punctul), fără ellipsis */ .dev-fixed tbody td:first-child, .dev-fixed td.row-actions { overflow: visible; } .dev thead th { text-align: left; font-size: 14px; letter-spacing: .2px; color: var(--txt-dim); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--line); } .dev tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line-soft); } .dev tbody tr:last-child td { border-bottom: none; } .dev tbody tr:hover { background: var(--panel-2); } .dev tbody tr td:first-child { width: 30px; padding-left: 18px; } /* tabelul de camere (97 rânduri) = rânduri mai strânse, mai puțin scroll */ #cam-table tbody td, #cam-table thead th { padding-top: 6px; padding-bottom: 6px; } .cam-panel { overflow: visible; } /* meniul ⋮ pe ultimele rânduri să nu fie tăiat */ /* Același lucru pentru ORICE panou care conține un meniu de rând — regula generică previne repetarea bug-ului la tabelele viitoare (discurile au avut-o exact așa: meniul ultimului rând era tăiat de `overflow:hidden` al panoului). Clasa explicită de mai jos rămâne ca plasă pentru browserele fără `:has()`. */ .panel:has(.row-menu) { overflow: visible; } .strong { font-weight: 600; } .dim { color: var(--txt-dim); } .tick { color: var(--ok); } .cross { color: var(--down); } .sev-down td:first-child { box-shadow: inset 3px 0 0 var(--down); } .sev-warn td:first-child { box-shadow: inset 3px 0 0 var(--warn); } .sev-maint td:first-child { box-shadow: inset 3px 0 0 var(--maint); } /* ⚠ AICI a fost `opacity: .72` pe td, ca rândul să pară estompat. DOUĂ defecte reale: 1. `opacity` randează tot SUBARBORELE într-un buffer și îl compune la alpha — iar panoul meniului ⋮ (`position:absolute`, dar descendent DOM al celulei) intra în același buffer → meniul apărea transparent, cu conținutul de sub el vizibil. Un `opacity:1` pe copil NU poate anula alpha-ul unui ancestor. 2. în tema light scădea contrastul textului `--txt-dim` pe alb sub pragul WCAG AA. Distincția vizuală o poartă oricum punctul gri + badge-ul „🔧 Mentenanță", deci regula a fost scoasă complet în loc să fie doar restrânsă. */ /* coloana „Stare" = pastilă colorată pe stare (se scanează dintr-o privire); restul coloanelor (Rec/Motion/ONT) rămân text colorat */ .ok-mark, .verdict { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600; line-height: 1.5; border: 1px solid transparent; } .ok-mark { color: var(--ok); background: var(--ok-bg); border-color: rgba(46,204,113,.3); } .v-ok { color: var(--txt-dim); background: var(--bg-2); border-color: var(--line-soft); } .v-warn { color: var(--warn); background: var(--warn-bg); border-color: rgba(245,166,35,.3); } .v-down { color: var(--down); background: var(--down-bg); border-color: rgba(255,77,94,.3); } .v-stale { color: var(--stale); background: var(--stale-bg); border-color: var(--stale-line); } .v-maint { color: var(--maint); background: var(--maint-bg); border-color: var(--maint-line); cursor: help; } /* „NVR jos": cameră fantomă (NVR inaccesibil) — border punctat = stare inferată, nu verificată direct */ .v-ghost { border-style: dashed; } .warn-tag { color: var(--warn); margin-left: 6px; cursor: help; } .btn-hist { font-size: 11.5px; color: var(--txt-dim); text-decoration: none; border: 1px solid var(--txt-dim); border-radius: 5px; padding: 2px 8px; white-space: nowrap; opacity: .75; } .btn-hist:hover { opacity: 1; color: var(--txt); border-color: var(--txt); } .row-actions { white-space: nowrap; } .row-actions .btn-map { margin-left: 6px; } /* buton „hartă": placeholder acum, va duce la coordonatele camerei (modul hartă) */ .btn-map { font-size: 11.5px; color: var(--txt-dim); background: transparent; border: 1px solid var(--txt-dim); border-radius: 5px; padding: 2px 8px; white-space: nowrap; opacity: .75; cursor: pointer; font-family: inherit; line-height: 1.4; } /* Iconițele desenate din `_macros.html`. `currentColor` ⇒ preiau culoarea butonului, deci și starea de hover/apăsare — ce nu putea face un emoji. */ .ico { display: block; flex: none; width: 15px; height: 15px; } .row-actions .btn-map { display: inline-flex; align-items: center; gap: 6px; } .btn-map:hover { opacity: 1; color: var(--accent); border-color: var(--accent); } .btn-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Sub 1700px butonul rămâne DOAR icoană. Coloana de acțiuni are 139px iar conținutul cerea ~164 ⇒ `⋮` se revărsa în afara tabelului: 49px la 1280, 28 la 1440, 8 la 1600 (măsurat). ⚠ Pragul a fost întâi 1500 și a lăsat 1600 tot cu 8px afară — depășirea nu se stinge la 1500, ci undeva sub 1920. Prima variantă a fost aleasă „la ochi"; a doua, după re-măsurare. Pinul e deja acolo, iar `title` și `aria-label` rămân pe buton — nu se pierde nimic la citirea cu voce. ⚠ COPIL DIRECT al `.row-actions`: meniul `⋮` e ÎNĂUNTRUL aceleiași celule și are propriul „hartă", unde textul e singurul indiciu. Scrisă cu descendent, regula l-ar fi golit și pe el. Aceeași capcană, în același loc, ca la ascunderea de pe telefon. */ @media (max-width: 1700px) { td.row-actions > .btn-map .btn-map-txt { display: none; } td.row-actions > .btn-map { padding: 2px 6px; } } /* varianta din alerte: pin compact, între nume și mesaj */ .al-map { padding: 1px 6px; font-size: 12px; border-color: var(--line); border-radius: 6px; flex: 0 0 auto; opacity: .85; } /* toast (placeholder buton hartă; se poate refolosi) */ .toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 12px); background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); border-radius: 10px; padding: 11px 18px; font-size: 13.5px; box-shadow: var(--shadow); z-index: 60; max-width: min(92vw, 460px); opacity: 0; transition: opacity .2s ease, transform .2s ease; } .toast.toast-on { opacity: 1; transform: translate(-50%, 0); } @media (max-width: 620px) { .wrap { padding: 20px 14px 40px; } .dev { font-size: 13px; } .dev thead th:nth-child(5), .dev tbody td:nth-child(5) { display: none; } .site-header { flex-wrap: wrap; } /* Tabelul de camere pe telefon: colegii sunt pe teren, iar acțiunea principală (⋮ → mentenanță) trebuie să fie la degetul lor, nu după scroll orizontal. Rămân dot / NVR / Cameră / Stare / acțiuni; IP, Model, Rec, Motion, ONT se ascund. Scopat pe #cam-table ca să nu atingă tabelul de discuri sau zona de corelare. */ #cam-table { table-layout: auto; } #cam-table thead th:nth-child(4), #cam-table tbody td:nth-child(4), #cam-table thead th:nth-child(6), #cam-table tbody td:nth-child(6), #cam-table thead th:nth-child(7), #cam-table tbody td:nth-child(7), #cam-table thead th:nth-child(8), #cam-table tbody td:nth-child(8) { display: none; } #cam-table col { width: auto !important; } /* ⚠ Regulile de `.row-menu` pentru mobil NU stau aici — `.row-menu > summary` de bază e declarat mai jos în fișier și, la specificitate egală, câștiga el. Au fost mutate imediat după regula de bază (caută „ținte de atingere"). */ .btn-hist, .btn-map { min-height: 34px; display: inline-flex; align-items: center; } .maint-actions button { flex: 1 1 auto; min-height: 44px; } } /* ==== auth (Felia 1 — zona de admin) ==== */ /* login = pagină standalone (fără shell), card centrat */ /* ⚠ Rămâne container flex pentru celelalte două pagini ale fluxului (cod 2FA / cod pe email), care n-au încă scenă. Pe pagina de autentificare singurul copil e scena, care e `fixed`, deci în afara fluxului — regulile de aici n-o ating. */ .login-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px; min-height: 100svh; padding: 24px; position: relative; overflow: hidden; } /* Scena: exact zona rămasă la vedere. `--vv`/`--vv-top` vin din `login-viewport.js`; până se încarcă el, `100svh` e o aproximare bună, deci pagina nu pâlpâie. */ .login-stage { position: fixed; left: 0; right: 0; top: var(--vv-top, 0px); height: var(--vv, 100svh); display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 20px; z-index: 1; overflow-y: auto; padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom)); } /* Semnătura DAB, deasupra cardului. Discretă: e identitatea firmei, nu a produsului. ⚠ CENTRARE SIGURĂ, nu `justify-content: center`: cu centrare clasică, un conținut mai înalt decât containerul se revarsă în AMÂNDOUĂ direcțiile, iar partea de sus ajunge sub bara de stare — imposibil de derulat înapoi. Marginile `auto` fac exact centrare cât timp e loc și se prăbușesc la zero când nu mai e, deci conținutul nu iese NICIODATĂ pe sus. ⚠ Înălțimea e SCRISĂ, nu `auto`: un SVG fără dimensiuni intrinseci lasă motorul s-o deducă, iar rezultatul diferă între Chromium și WebKit. (Am pus și atribute pe SVG.) */ .login-sig { flex: none; display: block; width: 208px; height: 68px; max-width: 62%; margin: auto auto 0; align-self: center; opacity: .55; transition: width .16s ease, height .16s ease, opacity .16s ease; } .login-card { margin-bottom: auto; } /* Varianta STRÂNSĂ — cu tastatura deschisă rămân ~470px din 852 pe un iPhone 15 Pro. ⚠ Nu se ascunde NIMIC: totul se micșorează, ca să rămână și logoul, și formularul întreg. Cifrele sunt alese ca suma să încapă în ~410px (înălțimea vizibilă minus zona sigură de sus). */ .login-strans .login-stage { gap: 8px; padding-bottom: 10px; } .login-strans .login-sig { width: 152px; height: 50px; opacity: .5; } .login-strans .login-card { padding: 16px 20px 14px; border-radius: 15px; } .login-strans .login-brand { margin-bottom: 10px; gap: 9px; } .login-strans .login-mark { width: 26px; height: 26px; border-radius: 7px; } .login-strans .login-title { font-size: 18px; margin-bottom: 8px; } .login-strans .login-form { gap: 8px; } .login-strans .login-form label { gap: 5px; } .login-strans .login-form button { margin-top: 4px; min-height: 44px; padding: 10px 14px; } .login-strans .login-foot { margin-top: 8px; font-size: 11.5px; } .login-strans .login-error { margin-bottom: 10px; padding: 8px 11px; } /* Atmosferă, în trei straturi foarte discrete: o aură caldă în roșul mărcii, un caroiaj fin care trimite la hărțile din produs, și o vinietă care închide marginile. Nimic din ele nu se citește ca „decor" — dau doar adâncime unui fundal care era plat. */ .login-bg { /* `fixed`, nu `absolute`: scena de deasupra e ea însăși fixată și se poate micșora la deschiderea tastaturii — fundalul trebuie să acopere ecranul indiferent de ea. */ position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 70% 46% at 50% 32%, rgba(174,39,47,.20), transparent 70%), repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 44px), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 40%, rgba(0,0,0,.55)); } .login-card { position: relative; z-index: 1; width: 100%; max-width: 372px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 24px 60px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.35); padding: 30px 26px 24px; } .login-brand { display: flex; align-items: center; gap: 11px; font-weight: 700; margin-bottom: 22px; } .login-mark { display: block; width: 34px; height: 34px; border-radius: 9px; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.45); } .login-brand .brand-name { font-size: 17px; letter-spacing: -.2px; } .login-title { font-size: 26px; font-weight: 700; letter-spacing: -.6px; margin: 0 0 20px; line-height: 1.1; } .login-form { display: flex; flex-direction: column; gap: 14px; } .login-form label, .form-card label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--txt-dim); font-weight: 600; } /* ⚠ 16px, NU 15: sub 16px Safari pe iPhone MĂREȘTE pagina la atingerea câmpului, iar omul trebuie să dea zoom înapoi de fiecare dată. Se aplică la toate controalele portalului, mai jos în fișier — aici e doar cel de autentificare. */ .login-form input, .form-card input[type="text"], .form-card input[type="password"] { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; color: var(--txt); font: inherit; font-size: 16px; transition: border-color .12s ease, box-shadow .12s ease, background .12s ease; } .login-form input::placeholder { color: var(--txt-faint); } /* ⚠ Focusul e un INEL, nu doar o bordură roșie: culoarea mărcii e roșie, iar culoarea de eroare tot roșie — un câmp focusat arăta identic cu unul greșit. Haloul spune „aici scrii acum"; eroarea rămâne banda de sus, care e altceva ca formă, nu doar ca nuanță. */ .login-form input:focus, .form-card input:focus { outline: none; border-color: var(--accent); background: var(--panel); box-shadow: 0 0 0 3px var(--accent-bg); } /* ⚠ `:not(.btn-salveaza)` — regula asta e (0,2,1) și bate `.btn-salveaza` (0,1,0), deci butonul de Salvează din Setări cont rămăsese TRANSPARENT și de 48px, singurul din portal care nu se colorase. A noua coliziune de cascadă din felia de design, și a doua oară cînd fix regula asta înghite o clasă explicită (prima dată `.btn-quiet`). ⚠ Regula generală, de aplicat: un selector generic pe `button[type=submit]` dintr-un container NU are voie să reclame butoanele care au deja o clasă proprie. */ .login-form button, .form-card button[type="submit"]:not(.btn-salveaza) { margin-top: 8px; color: #fff; border: none; border-radius: 10px; background: linear-gradient(180deg, #d8404b, var(--accent)); box-shadow: 0 1px 0 rgba(255,255,255,.16) inset, 0 4px 14px rgba(174,39,47,.26); padding: 13px 14px; font: inherit; font-weight: 700; font-size: 16px; letter-spacing: .2px; cursor: pointer; min-height: 48px; transition: transform .1s ease, box-shadow .12s ease, filter .12s ease; } .login-form button:hover, .form-card button[type="submit"]:hover { filter: brightness(1.06); } .login-form button:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 7px rgba(174,39,47,.22); } .login-foot { margin: 20px 0 0; text-align: center; color: var(--txt-faint); font-size: 12px; letter-spacing: .2px; } .login-error { display: flex; align-items: flex-start; gap: 9px; background: var(--down-bg); color: var(--down); border: 1px solid var(--down-line); border-radius: 10px; padding: 11px 13px; font-size: 13.5px; margin-bottom: 16px; line-height: 1.35; } /* Semnul de exclamare dă erorii o FORMĂ, nu doar o culoare — se deosebește de inelul de focus chiar și pentru cineva care nu distinge bine roșul. */ .login-error::before { content: "!"; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--down); color: var(--panel); font-weight: 800; font-size: 12px; line-height: 18px; text-align: center; } /* Pe telefon cardul urcă: la mijloc, cu tastatura deschisă, ajunge împins sub marginea de jos. */ @media (max-width: 620px) { .login-stage { gap: 18px; padding-left: 18px; padding-right: 18px; } .login-title { font-size: 23px; } } /* form card generic (schimbă parola, adaugă user) */ .form-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 22px; max-width: 420px; display: flex; flex-direction: column; gap: 14px; } .hint-inline { font-weight: 500; color: var(--txt-faint); font-size: 12px; } .check { flex-direction: row !important; align-items: center; gap: 8px; } .check input { width: auto; } /* 2FA / TOTP: subtitlu login, link-buton, înrolare (QR + cheie + pași) */ .login-sub { color: var(--txt-faint); font-size: 13px; margin: -6px 0 14px; } .login-alt { margin-top: 14px; text-align: center; } /* Bifă pe UN RÂND cu textul ei, cu ținta de atins ≥44px (colegii sunt pe telefon). ⚠ SELECTORUL TREBUIE SĂ NUMEASCĂ FIECARE CONTEXT ÎN CARE E FOLOSITĂ. Atât `.login-form label` cât și `.form-card label` au specificitate (0,1,1) și le pun în COLOANĂ; o clasă simplă (0,1,0) e bătută TĂCUT, iar bifa ajunge DEASUPRA textului ei. ⚠ S-a întâmplat de DOUĂ ori în aceeași zi (2026-08-10): întâi la login, apoi în Setări cont, unde regula scopată doar pe `.login-form` pur și simplu nu se aplica. Aceeași familie cu regula de 44px, care a stat moartă săptămâni. Când muți o bifă într-un formular nou, verifică dacă selectorul îl acoperă — nu presupune că „e aceeași clasă, deci arată la fel". */ .login-form label.login-check, .form-card label.login-check { display: flex; flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 13px; color: var(--txt-dim); font-weight: 500; cursor: pointer; } .login-form .login-check input[type="checkbox"], .form-card .login-check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: none; padding: 0; } .linklike { background: none; border: none; color: var(--txt-faint); font-size: 12px; text-decoration: underline; cursor: pointer; padding: 0; } .totp-enroll { display: flex; flex-direction: column; gap: 18px; max-width: 460px; } .totp-steps { margin: 0; padding-left: 20px; color: var(--txt); line-height: 1.7; font-size: 14px; } .totp-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; word-break: break-all; } .totp-qr { background: #fff; padding: 12px; border-radius: 10px; width: max-content; box-shadow: var(--shadow); } .totp-qr svg { width: 200px; height: 200px; display: block; } /* Setări cont: coloană centrată (nu mai pare goală, aliniată la stânga) */ /* ⚠ 460px → 940px, pe DOUĂ coloane (Bogdan, 2026-08-10): parola și 2FA una lângă alta, dispozitivele late dedesubt, ca pagina să încapă pe un ecran fără scroll. Titlurile nu mai sunt centrate — într-o grilă, un titlu centrat peste un card aliniat la stânga arată strâmb. */ .acct-page { max-width: 940px; margin: 0 auto; } .acct-page .form-card { max-width: none; } /* `auto-fit` + `minmax` fac trecerea la o coloană pe telefon fără media query separat. `align-items: start` — altfel cardul scurt (2FA) s-ar întinde degeaba cât cel de parolă. */ .acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 0 22px; align-items: start; } .acct-wide { max-width: none; } /* Setări cont: secțiuni (parolă, 2FA) + buton-link + confirmare 2FA activ */ .acct-sec { margin: 0 0 26px; } .acct-sec h2 { font-size: 15px; font-weight: 700; letter-spacing: -.2px; margin: 0 0 12px; } .acct-ok { color: var(--ok); font-weight: 600; margin: 0 0 8px; } /* ⚠ Folosit ȘI pe , ȘI pe