:root { --navy: #0d1b2a; --accent: #FD4719; --accent-dark: #d63a12; --bg: #f7f7f8; --card: #ffffff; --border: #e2e4e8; --text: #1a1d23; /* 26 sept. 2026 (P1.9, audit 09f, finding B4) — #6b7280 (Tailwind gray-500) trecea WCAG AA (4.5:1 text normal) la limită: 4.52:1 pe --bg, 4.83:1 pe --card — o margine prea subțire pentru un text folosit constant la 12-13px. #5b6472 păstrează același aspect „gri neutru, discret" dar cu o marjă confortabilă: 5.59:1 pe --bg, 5.98:1 pe --card. */ --text-muted: #5b6472; --green: #1a7f4e; --green-bg: #e8f7ef; --red: #b3261e; --red-bg: #fdecea; --amber: #92600a; --amber-bg: #fef3d9; --radius: 10px; /* ============================================================ 28 sept. 2026 (Faza A — fundație de design tokens, cerere Constantin: "as vrea ca platforma sa arate profi, state of the art"). Fundație pur vizuală — extinde tokenurile deja existente mai sus (neatinse, ca nimic din regulile care le folosesc deja să nu se rupă) cu o scală sistematică: tip, spațiere, elevație (umbre), gri neutru și rotunjire. Aplicată mai jos în regulile de bază (body, .card, butoane, rail, table, dropdown/modal) — NU în markup/JS, nicio schimbare de comportament, doar variabile CSS + reguli existente rescrise cu ele. ============================================================ */ /* Scală de gri neutru — până acum existau doar --border (echivalent gray-200) și --text-muted (echivalent gray-500), fără pași intermediari pentru stări noi (hover, disabled, elevație). */ --gray-50: #f7f7f8; --gray-100: #eef0f2; --gray-200: #e2e4e8; --gray-300: #cbd0d6; --gray-400: #9aa2ac; --gray-500: #5b6472; --gray-700: #3a414c; --gray-900: #1a1d23; /* Scală tipografică — până acum fiecare regulă își fixa propriul font-size (12/13/13.5/14/15/ 17px etc.), fără o progresie explicită. Valorile de mai jos reflectă exact ce se folosea deja cel mai des, nu introduc mărimi noi — doar le numesc, ca următoarele componente să le refolosească în loc să inventeze alte valori apropiate. */ --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 24px; --fs-2xl: 32px; /* Grilă de spațiere pe bază de 8px (cu pasul de 4px pentru cazuri fine) — aceeași observație: majoritatea marginilor/padding-urilor din fișier erau deja multipli de 4, doar nenumiți. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Scală de rotunjire — --radius (10px) rămâne neschimbată (folosită deja peste tot pentru carduri/panouri/modale — echivalentul --radius-md de mai jos). Se adaugă doar cele două capete lipsă: un rotunjit mai mic pentru butoane/input-uri (deja 6px în majoritatea regulilor) și unul mai mare pentru elemente mari, pe toată lățimea (module viitoare). */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; /* Elevație — până acum 3 umbre ad-hoc, fiecare cu propria valoare și propria culoare (negru pur la .notif-dropdown/.legal-gate-modal, navy la .match-card), fără nicio relație între ele. Cele 3 niveluri de mai jos le înlocuiesc cu o singură scală, toate nuanțate spre --navy (mai coerent vizual cu restul paletei decât negru pur) — .match-card rămâne practic identică (diferență de 0.01 în opacitate), .notif-dropdown/.legal-gate-modal capătă o umbră puțin mai deschisă, aceeași distanță/difuzie ca înainte. Se adaugă și un nivel "sm" nou, subtil, pentru .card — singurul element repetat de zeci de ori în platformă care nu avea, până acum, nicio separare vizuală de fundal (--bg) în afara border-ului de 1px. */ --shadow-sm: 0 1px 2px rgba(13, 27, 42, 0.06); --shadow-md: 0 4px 12px rgba(13, 27, 42, 0.10); --shadow-lg: 0 12px 32px rgba(13, 27, 42, 0.18); /* Tranziție standard pentru stări interactive (hover/focus) — 150ms, aceeași durată deja folosită la .app-body .container/.skip-link, acum numită și extinsă la butoane, rail, carduri. */ --transition-fast: 150ms ease; } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================ 28 sept. 2026 (Faza C — "premium", cerere directă Constantin: "vreau sa arate premium"). Trecere pur vizuală peste fundația deja construită (Faza A/B) — nicio culoare nouă, doar tokenurile existente combinate mai bogat: umbre pe interacțiune (nu doar statice), micro-mișcare la click/hover pe butoane, accent de culoare pe elementul activ din navigare, scrollbar/selecție proprii în loc de cele implicite ale browserului, tipografie puțin mai strânsă pe titluri. Nicio schimbare de markup/JS. ============================================================ */ /* Selecție de text și scrollbar — implicit ale browserului (albastru de sistem / gri simplu), singurele două elemente de "chrome" rămase nestilizate în toată platforma. */ ::selection { background: rgba(253, 71, 25, 0.18); color: var(--navy); } * { scrollbar-width: thin; scrollbar-color: var(--gray-300) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; } *::-webkit-scrollbar-thumb:hover { background: var(--gray-400); } /* Focus-visible mai rafinat: outline-ul (Faza A/P1.9) rămâne — e dovedit accesibil, nu se elimină — dar capătă și un halo discret (box-shadow, adăugat la regula existentă mai jos în fișier), tipar folosit de produsele SaaS "premium" (Stripe, Linear) pentru un focus care se simte proiectat, nu doar bifat la cerința de accesibilitate. */ h1, h2, h3 { letter-spacing: -0.01em; } /* 26 sept. 2026 (cerere Constantin) — topbar + rail formează un „app shell" fix: rămân vizibile tot timpul, doar conținutul paginii (.container) se scrolează pe sub ele. Fără asta, la o pagină lungă (ex. un rezultat de verificare cu mulți candidați) utilizatorul pierde din vedere navigarea și contextul de cont (organizație, rol, ieșire) exact când are nevoie să schimbe pagina sau să iasă. Valabil doar pe desktop (>860px) — pe mobil railul e deja un rând orizontal sub topbar (vezi rail.js/feedback Cristina), nu o coloană laterală permanentă, așa că acolo layout-ul rămâne neschimbat (ambele revin la poziționare normală, vezi media query de mai jos). 53px = înălțimea măsurată a topbar-ului, folosită deja ca referință în .app-rail (vezi și notele de mai jos, la .list-panel/.history-col, care înlănțuiau 53→69→85→101). 29 sept. 2026 (feedback Constantin — logo prea mic față de titlul paginii) — topbar-ul crește la 60px (+7) ca sigla să poată crește de la 24px la 28px cu spațiu de respirație (32px zonă utilă în interiorul padding-ului vertical de 14px, față de 25px înainte, prea strâmt pentru 28px). +7px propagat mai jos la TOATE valorile care depindeau de vechea înălțime de 53px (.app-body/.app-rail: 53→60; .list-panel: 69→76 și 85→92; .history-col > .list-panel:first-child: 85→92 și 101→108) — ca să nu reapară alunecarea vizibilă a panourilor sticky rezolvată pe 26 sept. */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; background: var(--navy); color: #fff; position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 200; /* 28 sept. 2026 (Faza C) — topbar-ul fix stătea perfect lipit de conținut, fără nicio separare de-adâncime cât timp pagina se scrolează pe sub el; o umbră discretă (aceeași scală --shadow-md deja folosită la dropdown-uri) îl așază vizual "deasupra" paginii, nu doar culorat diferit. */ box-shadow: var(--shadow-md); } .topbar .brand { font-weight: 700; letter-spacing: 0.3px; display: flex; align-items: center; gap: 10px; } /* 29 sept. 2026 (feedback Constantin) — titlul paginii (ex. "Verificator Sancțiuni") era scris cu --accent (portocaliu-roșu), pe un fundal deja portocaliu-accentuat în restul UI-ului — pe banda navy a topbar-ului citea ca o eroare/highlight, nu ca text de brand. Alb, ca restul topbar-ului; greutate mai mică (500, față de 700 moștenit de la .brand) și puțin atenuat (85% opacitate) ca să rămână clar SECUNDAR față de sigla albă solidă — o ierarhie, nu doar o schimbare de culoare. */ .topbar .brand span { color: rgba(255, 255, 255, 0.85); font-weight: 500; } .topbar .brand-logo { height: 28px; width: auto; display: block; } .topbar .user-info { display: flex; align-items: center; gap: 12px; font-size: 14px; } .role-badge { background: rgba(255,255,255,0.12); padding: 3px 10px; border-radius: 999px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; } /* Nume utilizator logat, în topbar — cerere Constantin, 25 sept.: pe lângă rol (badge) și organizație, topbar-ul trebuie să arate și cine e logat, nu doar rolul lui. */ .topbar .user-name { font-weight: 600; } .topbar .user-info .sep { opacity: 0.4; } /* 29 sept. 2026 (feedback Constantin, exemplu PEPCheck) — bară compactă de consum plan, în topbar (vezi renderUsageBadge, js/utils.js), pe fundalul navy existent al topbar-ului — aceleași alb-transparențe deja folosite la .role-badge/.btn-logout, nicio culoare nouă. */ .usage-badge { display: flex; align-items: center; gap: 8px; } .usage-label { text-transform: uppercase; letter-spacing: 0.4px; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.55); } .usage-track { width: 56px; height: 5px; border-radius: 999px; background: rgba(255,255,255,0.2); overflow: hidden; } .usage-fill { height: 100%; border-radius: 999px; background: rgba(255,255,255,0.85); transition: width var(--transition-fast); } .usage-fill.warning { background: var(--amber); } .usage-fill.critical { background: #ff8080; } .usage-value { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .btn-logout { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); transition: background var(--transition-fast); } .btn-logout:hover { background: rgba(255,255,255,0.1); } .container { max-width: 880px; margin: 32px auto; padding: 0 20px; } /* ============================================================ 25 sept. 2026 — rail lateral de navigare, comun celor trei pagini autentificate (app.html, org-settings.html, admin.html), cerut de Constantin ca fundație pentru secțiunile viitoare (Cazuri, Surse, Jurnal de audit, PEP — vezi doc-ul de roadmap). Colapsabil la doar iconițe; starea (extins/restrâns) e o preferință vizuală per-browser, ținută în localStorage — nu ține de date sau de audit, deci nu contează dacă diferă între dispozitive. Topbar-ul rămâne neschimbat deasupra (brand, cont, notificări, ieșire); railul e sub el, în stânga conținutului paginii (.container). ============================================================ */ /* ============================================================ 26 sept. 2026 (P1, audit 09f, finding B2) — set unic de iconițe SVG inline (Lucide, ISC), înlocuind emoji/simboluri Unicode brute (rail, clopoțel, creion, bifă, avertisment, săgeți) — inconsistente vizual între sisteme de operare/browsere și needucate pentru accesibilitate. Toate: stroke="currentColor" (moștenesc automat culoarea textului/starea activă din jur, fără variantă separată per temă), stroke-width 2, aceleași proporții (viewBox 24×24). Decorative — aria-hidden="true" pe fiecare ; numele accesibil vine din eticheta vizibilă alăturată (.rail-label) sau din title/aria-label de pe elementul interactiv părinte (buton/link), nu de pe iconiță însăși — evită dubla anunțare la screen reader. ============================================================ */ .icon { vertical-align: -3px; flex-shrink: 0; } .app-body { display: flex; align-items: flex-start; padding-top: 60px; } .app-rail { flex: 0 0 auto; width: 212px; background: var(--card); border-right: 1px solid var(--border); padding: 16px 10px; position: fixed; top: 60px; left: 0; bottom: 0; overflow-y: auto; z-index: 150; } .app-rail.collapsed { width: 58px; } /* Railul e scos din fluxul .app-body (fixed) — .container trebuie să-i lase loc manual prin margin-left, în loc să se bazeze pe flex ca înainte. Urmează lățimea rail-ului, extins/restrâns. */ .app-body .container { margin-left: 212px; transition: margin-left var(--transition-fast); } .app-rail.collapsed ~ .container { margin-left: 58px; } .rail-toggle { display: flex; align-items: center; justify-content: center; width: 100%; height: 34px; margin-bottom: 14px; background: none; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-muted); font-size: 15px; transition: background var(--transition-fast); } .rail-toggle:hover { background: var(--bg); } .rail-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; margin-bottom: 4px; box-sizing: border-box; border: none; background: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; transition: background var(--transition-fast), color var(--transition-fast); } .rail-item .rail-icon { flex: 0 0 20px; font-size: 15px; text-align: center; display: inline-flex; align-items: center; justify-content: center; } .rail-item:hover { background: var(--bg); } /* 28 sept. 2026 (Faza C) — bară de accent colorată pe item-ul activ din rail (inset box-shadow, nu border, ca să nu deplaseze conținutul cu 3px) — tipar de navigare "premium" consacrat (Linear/Vercel/Stripe: fundalul plin marchează secțiunea curentă, accentul de culoare arată EXACT ce e activ, dintr-o privire, chiar și cu coada ochiului). --accent, deja folosit peste tot ca culoare de acțiune/atenție — nicio culoare nouă. */ .rail-item.active { background: var(--navy); color: #fff; box-shadow: inset 3px 0 0 var(--accent); } .app-rail.collapsed .rail-label { display: none; } .app-rail.collapsed .rail-item { justify-content: center; } /* 25 sept. 2026 — .rail-soon (linia "În curând: ...") a fost eliminată din toate paginile odată ce Cazuri, Surse & liste și Jurnal de audit au devenit linkuri reale (vezi doc 09e) — regula CSS corespunzătoare a fost scoasă odată cu ultimul ei folosire, nu lăsată moartă. */ /* ============================================================ 26 sept. 2026 (feedback Cristina) — pe mobil, railul nu mai afișează implicit toate cele 8 linkuri într-un rând care se rupe pe mai multe linii (ocupa mult spațiu vizibil, împingea conținutul paginii mult mai jos). Devine un meniu hamburger: doar butonul #railToggle (aceeași iconiță ≡, deja folosită pe desktop pentru restrângerea la iconițe) rămâne vizibil implicit; #railItems (linkurile propriu-zise, acum grupate într-un wrapper dedicat — vezi markup-ul din /.match-detail fiind primele elemente, aici e nevoie de o regulă explicită pentru .linked-case-main, reutilizată aici doar pentru badge+meta). */ .pep-check-card .linked-case-main { margin-bottom: 10px; } /* 29 sept. 2026 (feedback Constantin, exemplu PEPCheck) — rezultatul căutării GDELT (găsit/ negăsit) trecea direct de la spinner la un

simplu, fără nicio ierarhie vizuală. Card nou, aceeași convenție ca .match-card (bară colorată la stânga + fundal tinctat), dar fără logica de decizie — verde implicit (nicio constatare), chihlimbar când există constatări (GDELT doar semnalează, analistul tot decide, la fel ca înainte). */ .gdelt-outcome { border-left: 4px solid var(--green); background: var(--green-bg); border-radius: 8px; padding: 14px 16px; } .gdelt-outcome.has-results { border-left-color: var(--amber); background: var(--amber-bg); } .gdelt-outcome h5 { margin: 0 0 4px; font-size: var(--fs-base); font-weight: 700; } .gdelt-outcome p { margin: 0; font-size: var(--fs-sm); } .gdelt-outcome-footer { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: var(--fs-xs); color: var(--text-muted); } /* 25 sept. 2026 (feedback Constantin, testare live) — scorul era 13px, gri (--text-muted), aproape la fel de discret ca restul metadatelor, deși e informația pe care un analist o scanează primul. Mai mare, mai gros, culoare de text plină (--navy, deja folosită pentru accente puternice) — se distinge acum clar de restul rândului, fără nicio culoare nouă. */ .match-card .score { float: right; font-size: 15px; font-weight: 700; color: var(--navy); } .match-detail { font-size: 13px; color: var(--text-muted); margin: 2px 0; } .decision-row { display: flex; gap: 10px; margin-top: 12px; } .btn-decision { flex: 1; padding: 9px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: #fff; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; transition: background var(--transition-fast), border-color var(--transition-fast); } .btn-decision:hover:not(.selected) { background: var(--gray-50); } .btn-decision.false-positive.selected { background: var(--green-bg); border-color: var(--green); color: var(--green); } .btn-decision.positive-match.selected { background: var(--red-bg); border-color: var(--red); color: var(--red); } /* 28 sept. 2026 (Faza B) — border: 1px solid currentColor, adăugat la .decision-badge/.status-badge (mai jos): fiecare variantă își setează deja `color` (verde/roșu/chihlimbar), așa că border-ul preia automat aceeași culoare, fără nicio regulă suplimentară per variantă. Tipar consacrat de "badge cu contur" (ex. etichetele GitHub) — dă o definiție mai clară pe lângă fundalul pastel, mai ales lângă alte badge-uri de culori apropiate (ex. .amber vs .running, ambele chihlimbar). */ .decision-badge { display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; flex-shrink: 0; } .decision-badge.no_match { background: var(--green-bg); color: var(--green); } .decision-badge.false_positive { background: var(--green-bg); color: var(--green); } .decision-badge.positive_match { background: var(--red-bg); color: var(--red); } /* 26 sept. 2026 (feedback Cristina) — .potential_match era folosită pentru DOUĂ lucruri diferite, greu de distins vizual la aceeași culoare (chihlimbar): (1) un rezultat de căutare cu o potrivire încă nedecisă — semnal de risc, cere atenția analistului — și (2) etichete pur informative, fără nicio urgență ("⟳ monitorizat", "⟳ periodică", "DOB diferă"). Separate acum: .potential_match rămâne strict semnalul de risc (recolorat roșu, ca „Potrivire găsită"/„În analiză" să iasă în evidență, distinct de „Fals pozitiv"/„No Match" — verzi — și de „Potrivire confirmată" — tot roșu, la fel de urgentă), iar etichetele informative folosesc noua clasă .amber, cu exact culorile pe care le avea .potential_match înainte de această schimbare — niciun aspect nou, doar decuplat de semnalul de risc. */ .decision-badge.potential_match { background: var(--red-bg); color: var(--red); } .decision-badge.amber { background: var(--amber-bg); color: var(--amber); } table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); transition: background var(--transition-fast); } /* 28 sept. 2026 (Faza B) — un fundal foarte discret pe antet (--gray-100, un pas mai închis decât --gray-50/--bg folosit la zebra/hover, ca antetul să rămână distinct de rânduri) — ajută scanarea unui tabel cu multe coloane (ex. Utilizatori per organizație, admin.html) fără să schimbe nimic altceva (culoarea textului, greutatea, padding-ul rămân identice). */ /* 28 sept. 2026 (Faza C) — antet de tabel: text mai mic, majuscule, spațiat — tipar de tabel "premium" (Stripe/Linear), diferențiază antetul de rândurile de date mai clar decât doar fundalul --gray-100 (Faza B) singur. Doar vizual — text-transform nu schimbă datele reale din celule. */ th { color: var(--text-muted); font-weight: 600; background: var(--gray-100); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; } /* 28 sept. 2026 (Faza B) — zebra: rândurile pare capătă un fundal foarte discret (--gray-50), ca un tabel lung (Cazuri, Jurnal de audit) să se scaneze pe orizontală fără să numeri rândurile. Declarată ÎNAINTE de regula de hover de mai jos, ca aceeași specificitate CSS (element+element+ pseudo-clasă, pe ambele) să fie decisă de ordinea din sursă — hover câștigă mereu peste zebra, inclusiv pe un rând par. */ tbody tr:nth-child(even) { background: var(--gray-50); } /* 28 sept. 2026 (Faza A) — rândurile de tabel nu aveau niciun feedback vizual la hover, spre deosebire de .list-item (folosit pentru liste similare); adăugat aici o dată, pentru toate tabelele din platformă (Echipă, Utilizatori, Surse etc.), fără nicio schimbare de structură. */ /* 28 sept. 2026 (Faza C, rundă 3) — hover folosea aceeași culoare ca zebra (--gray-50), deci pe rândurile pare (jumătate din tabel) hover-ul era complet invizibil. --gray-100 e un pas mai închis, vizibil peste ambele fundaluri (par/impar), păstrând totuși discreția (aceeași nuanță deja folosită la antetul de tabel). */ tbody tr:hover { background: var(--gray-100); } .error-msg { color: var(--red); font-size: var(--fs-sm); margin-top: 10px; } .muted { color: var(--text-muted); font-size: var(--fs-sm); } .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; /* 28 sept. 2026 (Faza C) — fundal plat (--bg) înlocuit cu un gradient radial foarte discret, mai deschis spre centru (unde e cardul) — aproape imperceptibil ca diferență de culoare, dar dă puțină profunzime unei pagini altfel complet plate; --bg rămâne culoarea de bază, nu se introduce niciun ton nou. */ background: radial-gradient(circle at 50% 35%, #ffffff 0%, var(--bg) 65%); } /* 28 sept. 2026 (Faza B, design system) — brand deasupra cardului, comun celor 4 stări (login, resetare parolă, parolă nouă, 2FA); vezi login.html pentru structură. */ .login-shell { display: flex; flex-direction: column; align-items: center; width: 340px; } .login-brand { display: flex; flex-direction: column; align-items: center; margin-bottom: var(--space-8); } /* 29 sept. 2026 (feedback Constantin — logo "foarte mic" pe pagina de login) — 44px era potrivit lângă un titlu text mic în linie (vechiul tipar din topbar), dar aici sigla e singură, deasupra cardului, ca element hero al paginii — 80px (aproape dublu) o face vizibilă dintr-o privire, fără să domine cardul de 340px lățime (icon 300×300 → ~80px lățime, lasă ~130px respirație pe fiecare parte). */ .login-logo { height: 80px; width: auto; display: block; margin-bottom: var(--space-3); } .login-tagline { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); letter-spacing: .2px; } .login-card { width: 340px; } /* 28 sept. 2026 (Faza C) — cardul de login e singurul element "hero" al paginii (spre deosebire de restul platformei, unde un card e unul dintre multe) — umbră mai prezentă (--shadow-lg, deja folosită la modale/dropdown-uri) decât --shadow-sm implicit de pe .card, ca să pară că "plutește" puțin deasupra fundalului, nu doar conturat cu un border. */ .login-card .card { box-shadow: var(--shadow-lg); } /* ============================================================ 24 sept. 2026 — detaliu verificare, decizii, raport printabil ============================================================ */ .card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .card-head h2 { margin: 0; } /* flex-wrap adăugat 28 sept. 2026 (export CSV/PDF, reports.html) — prima situație cu 3 controale în același .card-actions (select de interval + 2 butoane de descărcare); fără wrap, pe un telefon îngust rândul ar depăși lățimea cardului. Pe desktop, unde toate .card-actions existente încap oricum pe un rând, nu schimbă nimic vizual. */ .card-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .btn-link { background: none; border: none; padding: 4px 6px; cursor: pointer; color: var(--navy); font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; transition: color var(--transition-fast); } .btn-link:hover { color: var(--accent-dark); } .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 16px 0; font-size: var(--fs-base); } .meta-grid .muted { display: block; font-size: var(--fs-xs); margin-bottom: 2px; } .result-banner.positive { background: var(--red-bg); color: var(--red); } /* .positive_match/.false_positive de mai sus (lângă .match-card) fixează deja fundalul pentru cazurile decise — regula .decided rămâne doar ca fallback, teoretic mort azi (orice decizie e ori positive_match ori false_positive), dar inofensiv de păstrat. */ .match-card.decided { background: #fafafb; } .decision-summary { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); font-size: var(--fs-sm); } .decision-summary .muted { margin-left: 8px; } .decision-summary p { margin: 8px 0 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* 26 sept. 2026 (P1.9, audit 09f, finding B4) — link „Sari la conținut", prima ancoră focusabilă din fiecare pagină (înainte de topbar/rail), pentru cine navighează cu tastatura/screen reader: altfel ar trebui să treacă prin tot railul (8 linkuri) la fiecare încărcare de pagină doar ca să ajungă la conținut. Ascuns vizual până primește focus (Tab), apoi vizibil, peste tot restul. */ .skip-link { position: absolute; top: -60px; left: 8px; z-index: 1000; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; transition: top var(--transition-fast); } .skip-link:focus { top: 8px; } button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; /* 28 sept. 2026 (Faza C) — halo discret, vezi comentariul de la regula soră de mai sus (lângă ::selection); combinat aici cu outline-ul deja existent (P1.9), nu-l înlocuiește. */ box-shadow: 0 0 0 4px rgba(253, 71, 25, 0.15); } #reportView { display: none; } @media print { @page { size: A4; margin: 16mm 14mm; } body { background: #fff; } body > *:not(#reportView) { display: none !important; } #reportView { display: block; color: #000; font-size: 11pt; } #reportView h3 { font-size: 12pt; margin: 18px 0 6px; border-bottom: 1px solid #999; padding-bottom: 3px; } #reportView table { width: 100%; border-collapse: collapse; font-size: 10pt; page-break-inside: auto; } #reportView tr { page-break-inside: avoid; } #reportView th, #reportView td { border-bottom: 1px solid #ccc; padding: 5px 6px; vertical-align: top; text-align: left; } .r-kv th { width: 38%; color: #444; font-weight: 600; } .r-grid th { background: #f0f0f0; } .r-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 3px solid #FD4719; padding-bottom: 8px; } .r-brand { font-size: 18pt; font-weight: 700; } /* 29 sept. 2026 (feedback Constantin, continuare polish premium) — assets/logo-report.png a fost înlocuit cu wordmark-ul complet (hexagon+triunghi + „AML Expert", text negru — versiunea pt. fundal deschis, simetrică cu logo-white.png din topbar) în locul iconiței simple folosite până acum; height: 40px, width: auto se adaptează automat la noul raport de aspect (848×204 vs. 300×300 înainte), fără nicio schimbare de markup în cele 5 fișiere JS care-l randează. */ .r-logo { height: 40px; width: auto; display: block; margin-bottom: 4px; } .r-title { font-size: 14pt; font-weight: 700; text-align: right; } .r-right { text-align: right; } .r-small { font-size: 8.5pt; color: #555; } .r-result { font-weight: 700; padding: 8px 10px; border: 1px solid #999; } .r-footer { margin-top: 24px; padding-top: 8px; border-top: 1px solid #999; font-size: 8.5pt; color: #555; } } /* Rapoarte — grafic bare CSS-only (25 sept. 2026, Faza 4), fără librărie externă. 28 sept. 2026 (audit stress-test) — mutat AICI, înaintea @media (max-width: 600px) de mai jos. Era declarat mai jos în fișier (după secțiunea admin/master-detail), DUPĂ acel @media — cascada CSS rezolvă egalitatea de specificitate prin ordinea din sursă, indiferent dacă o regulă e sau nu într-un @media, deci regula necondiționată de mai jos câștiga mereu în fața celei mobile de mai sus (gap/height/flex/max-width/writing-mode), pe orice lățime de ecran — inclusiv pe telefon. Compactarea mobilă descrisă în comentariul de la @media (max-width: 600px) nu se aplica deloc: graficul "Verificări pe zi" tot dădea scroll orizontal pe telefon la intervalul implicit de 30 de zile, exact problema pe care acel fix pretindea că o rezolvă. Nicio schimbare de conținut — doar mutarea blocului înaintea regulilor mobile care trebuie să-l suprascrie. */ .bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 8px; overflow-x: auto; } .bar-chart-col { flex: 1 0 18px; min-width: 18px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .bar-chart-count { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; height: 14px; } .bar-chart-bar { width: 100%; max-width: 28px; background: var(--navy); border-radius: 3px 3px 0 0; min-height: 2px; } .bar-chart-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; transform: rotate(0deg); } /* 30 sept. 2026 (runda 4) — culori pe bară pentru graficul de distribuție CRA (portofoliu, reports.html): aceleași tokenuri verde/portocaliu/roșu ca restul platformei (vezi regulile .cra-preview-box și .cra-list-badge din acest fișier); "Fără evaluare" într-un gri neutru, nu o a 4-a culoare de risc. colorClass e opțional (vezi renderChart, js/reports.js) — graficele existente (volum pe zi, distribuție rezultate) nu îl trec, deci rămân cu bara navy implicită, neschimbate. */ .bar-chart-bar.level-low { background: var(--green); } .bar-chart-bar.level-medium { background: var(--amber); } .bar-chart-bar.level-high { background: var(--red); } .bar-chart-bar.level-none { background: var(--gray-400); } /* Ecrane mici */ @media (max-width: 600px) { .topbar { flex-wrap: wrap; gap: 8px; padding: 12px 16px; } .topbar .user-info { flex-wrap: wrap; gap: 8px; font-size: 13px; } .container { margin: 16px auto; padding: 0 12px; } .card { padding: 18px 16px; } /* 26 sept. 2026 (feedback Cristina) — graficul "Verificări pe zi" (reports.html) la lățimea implicită a barelor (18px + gol 4px) depășea lățimea unui telefon deja la intervalul implicit de 30 de zile (~656px conținut într-un card de ~319px), forțând scroll orizontal pentru cel mai comun caz de utilizare. Bare/etichete mult mai compacte pe mobil (etichetele datei rotite vertical, ca lățimea lor să nu mai fie factorul limitativ) fac intervalul de 30 de zile să încapă fără scroll pe majoritatea telefoanelor. Pentru 90 de zile/"Tot" (mult mai multe bare), scroll-ul orizontal rămâne — e comportamentul așteptat pentru o serie temporală zilnică densă pe un ecran mic, nu un defect; alternativa (bare sub ~5px) ar fi ilizibilă. */ .bar-chart { gap: 1px; height: 190px; } .bar-chart-col { flex: 1 0 8px; min-width: 8px; } .bar-chart-bar { max-width: 100%; } .bar-chart-count { display: none; } /* numărul exact rămâne disponibil la atingere lungă/hover, via title */ .bar-chart-label { writing-mode: vertical-rl; transform: rotate(180deg); text-orientation: mixed; font-size: 9px; max-height: 46px; overflow: hidden; margin-top: 4px; } /* 28 sept. 2026 (D, idee 09j) — graficul de "Distribuție rezultate" (reports.html) are mereu exact 4 categorii, spre deosebire de graficul de volum pe zi/lună (până la 90 de bare) — regulile de compactare de mai sus (bare de 8px, etichete rotite vertical) ar fi inutile aici și ar face etichetele ("Potrivire confirmată" etc.) greu de citit. .bar-chart-categorical suprascrie doar pentru acest grafic (vezi extraClass în renderChart, js/reports.js). */ .bar-chart.bar-chart-categorical { gap: 6px; height: 150px; } .bar-chart.bar-chart-categorical .bar-chart-col { flex: 1 0 60px; min-width: 60px; } .bar-chart.bar-chart-categorical .bar-chart-label { writing-mode: horizontal-tb; transform: none; text-orientation: initial; font-size: 10px; max-height: none; overflow: visible; white-space: normal; } /* 28 sept. 2026 (C5, audit 09f #14) — tratament responsive real pentru tabelele de date (Echipă din org-settings.html, Utilizatori per organizație din admin.html), în loc de doar scroll orizontal (.table-wrap { overflow-x: auto } rămâne ca fallback general, neschimbat). NU ține de tabelele din raportul printabil (#reportView, clasele .r-kv/.r-grid) -- acelea nu apar niciodată pe ecran, doar la print pe hârtie (vezi @media print de mai sus), deci n-au nevoie de tratament mobil. Fiecare devine un "card" vertical: dispare, iar fiecare își arată eticheta proprie prin atributul data-label (dus înainte prin ::before) -- nicio informație pierdută, doar schimbată orientarea (rând -> coloană), fără scroll orizontal. Cerință: fiecare generat pentru un tabel din .table-wrap trebuie să aibă data-label pus explicit în JS (vezi admin.js/org-settings.js) -- un fără data-label ar apărea pe mobil fără etichetă. */ .table-wrap table thead { display: none; } .table-wrap table, .table-wrap table tbody, .table-wrap table tr, .table-wrap table td { display: block; width: 100%; } .table-wrap table tr { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; } .table-wrap table tr:last-child { margin-bottom: 0; } .table-wrap table td { border-bottom: none; padding: 6px 0; } .table-wrap table td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--text-muted); margin-bottom: 2px; } .table-wrap table td:empty { display: none; } } /* Panou admin — organizații, utilizatori, link-uri de invitație */ label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; color: var(--text); margin-top: 16px; } label.check input { width: auto; margin: 0; } .success-msg { color: var(--green); font-size: var(--fs-sm); font-weight: 600; margin: 12px 0 0; } .link-box { margin-top: 14px; padding: 14px; border: 1px solid var(--amber); background: var(--amber-bg); border-radius: 8px; } .link-box label { margin-top: 0; color: var(--text); } .link-row { display: flex; gap: 8px; } .link-row input { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-xs); } .table-wrap { overflow-x: auto; } details.add-user { margin-top: 10px; } details.add-user summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--navy); padding: 6px 0; } .add-user-form { max-width: 460px; padding-bottom: 8px; } /* ============================================================ 24 sept. 2026 (extindere) — pattern generic master-detail, folosit în admin.html (organizații — listă în stânga) și app.html (istoric verificări — listă în dreapta, vezi modificatorul .list-right). ============================================================ */ .master-detail { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; } .master-detail.list-right { grid-template-columns: 1fr 320px; } @media (max-width: 860px) { .master-detail, .master-detail.list-right { grid-template-columns: minmax(0, 1fr); } } /* 13 oct. 2026 — pe mobil coloanele grilei nu se mai lărgesc după conținutul nowrap (taburi, meta): fără min-width:0 un copil „nowrap" împingea tot cardul în afara ecranului, spre dreapta. */ .master-detail > * { min-width: 0; } .list-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; position: sticky; top: 76px; max-height: calc(100vh - 92px); overflow-y: auto; box-shadow: var(--shadow-sm); } /* 26 sept. 2026 (cerere Constantin) — top/max-height recalculate ca să țină cont de topbar-ul fix de 53px (vezi .topbar, mai sus): fără asta, panoul se ancora la 16px de vârful ferestrei — sub topbar-ul fix, care rămâne deasupra (z-index mai mare) — deci partea de sus a panoului (~37px) ajungea acoperită de topbar în timpul scrollului. 69px = 53px topbar + 16px respirație originală; 85px = 69px + 16px respirație simetrică jos, ca înainte. 29 sept. 2026 — topbar-ul a crescut la 60px (vezi .topbar, mai sus); valorile efective de mai sus au fost repropagate la 76px/92px (+7 față de 69/85), formula (topbar + respirație) rămâne aceeași. */ @media (max-width: 860px) { .list-panel { position: static; max-height: none; } } /* ============================================================ 25 sept. 2026 — panoul de istoric verificări (app.html) trebuie să rămână complet vizibil, cu propriul scroll, pe toată durata paginii, indiferent cât de lungă e coloana principală (un rezultat cu mulți candidați poate fi mult mai înalt decât un ecran) — cerere explicită Constantin. Fără acest fix, elementul sticky are loc de "alunecare" doar cât înălțimea PROPRIE a coloanei din dreapta (istoric + subiecți monitorizați), nu cât rândul întreg al grid-ului — de-asta .history-col e întins (stretch) la înălțimea rândului (nu afectează admin.html, care nu folosește această clasă), ca sticky să aibă loc pe tot scroll-ul, nu doar pe primul ecran. Panoul „Subiecți monitorizați" rămâne neschimbat (position: static, inline, în app.html) — continuă să se scrolleze normal cu pagina, sub istoric. ============================================================ */ .master-detail.list-right .history-col { align-self: stretch; } /* 26 sept. 2026 (cerere Constantin, a doua trecere) — top:69px (generic, mai sus) tot lăsa ~16px de "alunecare" vizibilă înainte ca panoul să se prindă (sticky se activează abia când elementul ajunge la poziția `top`, nu de la primul pixel de scroll). Aici, pe app.html, poziția de repaus a panoului e exact 85px (53px topbar fix + 32px marginea de sus a .container — vezi .app-body/ .container, mai sus; nimic altceva nu se interpune,

e position:absolute, deci nu ocupă loc). Punând top exact la 85px, panoul e deja "prins" din primul pixel de scroll — zero alunecare, nu doar una mai mică. Selectorul e mai specific decât .list-panel generic, deci suprascrie top/max-height doar aici, fără să afecteze .list-panel din admin.html (context diferit, altă poziție de repaus). 101px = 85px + aceiași 16px de respirație jos, ca înainte. 29 sept. 2026 — repropagat la 92px/108px (+7), din același motiv (topbar 53px→60px, vezi .topbar). */ .history-col > .list-panel:first-child { top: 92px; max-height: calc(100vh - 108px); height: calc(100vh - 108px); } @media (max-width: 860px) { .history-col > .list-panel:first-child { position: static; height: auto; max-height: none; } } /* ============================================================ 25 sept. 2026 — notificări in-app pentru potriviri noi găsite de monitorizarea periodică (completează notificarea pe email din sql/031 — vezi doc 09). Clopoțel în topbar, cu contor (numărul de potriviri NOI, nedecise încă, provenite din verificări periodice) și un dropdown cu verificările care le conțin. O potrivire dispare din listă imediat ce e decisă (fals pozitiv/confirmată), plus un refresh periodic la 60s cât timp pagina e deschisă. 26 sept. 2026 (P1, audit 09f, finding B3) — markup + logică (loadNotifications() etc.) mutate din app.html/app.js în topbar-ul comun + js/notifications.js: clopoțelul e acum prezent pe toate cele 8 pagini autentificate, nu doar pe „Verificare". ============================================================ */ .notif-wrap { position: relative; } .btn-notif { background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff; padding: 6px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 15px; position: relative; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background var(--transition-fast); } .btn-notif:hover { background: rgba(255,255,255,0.1); } .notif-badge { position: absolute; top: -6px; right: -6px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 5px; border-radius: 999px; min-width: 16px; text-align: center; } /* box-shadow standardizat pe --shadow-lg (28 sept. 2026, Faza A) — valoare vizual identică (0 8px 24px/rgba 0.18 -> 0 12px 32px/rgba 0.18, ambele "dropdown/modal plutitor peste conținut"), acum parte din aceeași scală ca .legal-gate-modal mai jos, în loc de o valoare proprie. */ .notif-dropdown { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; overflow-y: auto; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 50; } .notif-dropdown-head { padding: 12px 14px; font-weight: 700; font-size: var(--fs-sm); border-bottom: 1px solid var(--border); } .notif-item { display: block; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: 10px 14px; cursor: pointer; font: inherit; color: inherit; transition: background var(--transition-fast); } .notif-item:last-child { border-bottom: none; } .notif-item:hover { background: var(--bg); } .notif-item .notif-item-title { font-weight: 600; font-size: 13.5px; } .notif-item .notif-item-meta { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; } @media (max-width: 600px) { .notif-dropdown { position: fixed; top: 64px; right: 8px; left: 8px; width: auto; } } .list-search { margin: 0 0 12px; } .list-item { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 8px; padding: 10px 12px; cursor: pointer; margin-bottom: 4px; font: inherit; color: inherit; transition: background var(--transition-fast); } .list-item:hover { background: var(--bg); } /* 28 sept. 2026 (Faza C) — aceeași bară de accent ca la .rail-item.active (mai sus): un rând selectat dintr-o listă (istoric verificări, Cazuri) e conceptual același tip de "acesta e activ acum" ca item-ul de rail activ — același limbaj vizual peste tot unde apare ideea, nu doar fundal navy. */ .list-item.selected { background: var(--navy); color: #fff; box-shadow: inset 3px 0 0 var(--accent); } .list-item.selected .muted { color: rgba(255,255,255,0.7); } .list-item .list-item-title { font-weight: 600; font-size: var(--fs-base); display: flex; align-items: center; gap: 6px; } .list-item .list-item-meta { font-size: var(--fs-xs); margin-top: 2px; } /* ============================================================ 25 sept. 2026 (Faza 2, "Cazuri" — browser dedicat, cases.html/cases.js) — listă full-width, nu sidebar îngust ca istoricul din app.html, deci rândul are nevoie de un layout orizontal (nume+meta în stânga, badge-uri în dreapta) — restul (.list-item, .decision-badge, .badge-neutral) e reutilizat identic, niciun element vizual nou. ============================================================ */ .list-item.case-item { display: flex; justify-content: space-between; align-items: center; gap: 14px; } .list-item.case-item .list-item-main { min-width: 0; } .list-item.case-item .list-item-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex-shrink: 0; } /* 30 sept. 2026 (runda 4, verificare vizuală mobil) — bug preexistent (semnalat la verificarea vizuală a secțiunii 4 din doc 11, agravat de badge-ul CRA adăugat atunci): sub 600px, cu 3-4 badge-uri simultan (rezultat + CRA + cazuri legate + monitorizare) pe același rând cu titlul, .list-item-main era storcit la o lățime aproape nulă și numele subiectului se rupea vizual pe caractere. Fix: sub 600px, rândul devine pe două "linii" — nume+meta pe lățime completă, apoi badge-urile dedesubt, aliniate la stânga — în loc să lupte pe același rând orizontal. */ @media (max-width: 600px) { .list-item.case-item { flex-wrap: wrap; } .list-item.case-item .list-item-main { flex: 1 1 100%; } .list-item.case-item .list-item-badges { justify-content: flex-start; } } /* 29 sept. 2026 (sql/062 + feedback Constantin, „scorul ar trebui să fie mai evidențiat") — badge-ul CRA din listă era un .decision-badge simplu, la fel de discret ca "monitorizat" sau "N cazuri legate" — deși e informație de risc de conformitate, nu doar metadate operaționale. Rămâne clar SEPARAT de badge-ul de rezultat al verificării (nu revine problema din 26 sept.: eticheta "CRA" e afișată ca un tag propriu, plin, în loc de doar text), dar capătă o etichetă solidă "CRA" + valoarea alături, ca să iasă în evidență la o singură privire pe rând. */ .cra-list-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 3px; border-radius: 999px; border: 1.5px solid currentColor; font-size: var(--fs-xs); font-weight: 600; } .cra-list-badge.no_match { background: var(--green-bg); color: var(--green); } .cra-list-badge.amber { background: var(--amber-bg); color: var(--amber); } .cra-list-badge.positive_match { background: var(--red-bg); color: var(--red); } .cra-list-badge-tag { color: var(--card); border-radius: 999px; padding: 2px 8px; font-size: 10px; letter-spacing: .03em; } /* NU background: currentColor aici — currentColor ar prelua propriul color (alb) al acestui element, nu culoarea badge-ului părinte, și textul "CRA" ar deveni alb pe alb, invizibil (depistat la verificarea vizuală). Fundalul plin trebuie legat explicit de fiecare nivel. */ .cra-list-badge.no_match .cra-list-badge-tag { background: var(--green); } .cra-list-badge.amber .cra-list-badge-tag { background: var(--amber); } .cra-list-badge.positive_match .cra-list-badge-tag { background: var(--red); } .cra-list-badge-value { white-space: nowrap; } .cases-filter-row { display: flex; gap: 10px; margin: 14px 0 12px; } .cases-filter-row input[type="text"] { flex: 1; margin: 0; } .cases-filter-row select { width: 220px; margin: 0; } @media (max-width: 600px) { .cases-filter-row { flex-direction: column; } .cases-filter-row select { width: 100%; } } .cases-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); } .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .status-dot.active { background: var(--green); } .status-dot.inactive { background: var(--red); } .status-badge { display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; } .status-badge.active { background: var(--green-bg); color: var(--green); } .status-badge.inactive { background: var(--red-bg); color: var(--red); } /* 25 sept. 2026 (Faza 2, "Surse & liste") — status rulare fetch (sanctions_import_log), aceleași trei culori deja folosite peste tot (verde/roșu/chihlimbar), niciuna nouă. */ .status-badge.success { background: var(--green-bg); color: var(--green); } .status-badge.error { background: var(--red-bg); color: var(--red); } .status-badge.running { background: var(--amber-bg); color: var(--amber); } /* 25 sept. 2026 — badge neutru, read-only, pentru informații de context (ex. pragul de potrivire al organizației afișat pe pagina de verificare, după ce editarea lui a fost mutată în org-settings.html — vezi doc-ul 09). */ .badge-neutral { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; background: var(--bg); color: var(--text-muted); border: 1px solid var(--border); white-space: nowrap; } /* 28 sept. 2026 (Faza B, design system) — extins de la text simplu centrat la icon + text (vezi admin.js, renderDetail) — flex-direction:column + gap în loc de un singur rând centrat. Neschimbat pentru orice alt eventual consumator viitor al clasei fără iconiță: .icon lipsă pur și simplu nu ocupă loc (gap se aplică doar între copiii existenți). */ .detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 260px; color: var(--text-muted); text-align: center; padding: 20px; } /* 28 sept. 2026 (Faza C) — iconița trecea drept transparentă (opacity .4) direct pe fundalul cardului; acum stă într-un cerc discret (--gray-100, aceeași nuanță deja folosită la zebra/antet de tabel), tipar de "empty state" consacrat în produsele premium (Notion, Linear) — iconița însăși rămâne mată (--gray-400), fără nicio transparență, doar cercul din spate o "așază". */ .detail-empty .icon { width: 32px; height: 32px; padding: 12px; box-sizing: content-box; border-radius: 50%; background: var(--gray-100); color: var(--gray-400); } .detail-empty-title { margin: 0; font-size: var(--fs-base); } /* 28 sept. 2026 — variantă compactă, pentru un loc unde .detail-empty înlocuiește o zonă mică (ex. sumarul de 4 cifre din Rapoarte, .detail-stats) — 260px de înălțime ar fi arătat disproporționat de înalt față de rândul de cifre pe care-l înlocuiește, cu un salt vizual la fiecare schimbare de interval de dată. Restul (icon + text, culoare, centrare) rămâne identic. */ .detail-empty.compact { min-height: 100px; padding: 14px; gap: 6px; } /* 28 sept. 2026 — variantă de eroare, pentru locurile unde o listă/panou principal nu s-a putut încărca (eroare de rețea/server) — același schelet (icon + text centrat), dar în roșu (--red), cu iconița mai puțin transparentă (o eroare merită mai multă atenție decât o listă goală) și un buton „Reîncearcă" dedesubt (reapelează direct funcția de încărcare a paginii respective). */ .detail-empty.error-state { color: var(--red); } .detail-empty.error-state .icon { background: var(--red-bg); color: var(--red); } /* butonul de reîncercare rămâne neutru (text normal), nu roșu prin moștenire de la .error-state — altfel s-ar citi ca o acțiune distructivă (tiparul .btn-danger, roșu pe text ȘI pe border), nu ca o reîncercare obișnuită. */ .detail-empty.error-state .btn-secondary { color: var(--text); margin-top: 4px; } .detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .detail-head h2 { margin: 0 0 4px; } .detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 16px 0; } .detail-stats .stat-box { background: var(--bg); border-radius: 8px; padding: 10px 12px; } /* 28 sept. 2026 (Faza C) — cifrele agregate (Rapoarte, panoul admin, detaliul unei organizații) capătă puțin mai multă greutate vizuală (--navy în loc de --text implicit, ca un accent puternic deja folosit în platformă) + font-variant-numeric: tabular-nums, ca cifrele de lățimi diferite (1 vs 100) să nu "danseze" quando alte cutii din același rând își schimbă valoarea (ex. la schimbarea intervalului de raport) — cifrele rămân aliniate, tipar standard în dashboard-uri financiare/de conformitate. */ .detail-stats .stat-box strong { display: block; font-size: var(--fs-xl); color: var(--navy); font-variant-numeric: tabular-nums; } .detail-stats .stat-box span { font-size: var(--fs-xs); color: var(--text-muted); } .danger-zone { margin-top: 24px; border: 1px solid var(--red); border-radius: 8px; padding: 14px 16px; background: var(--red-bg); } .danger-zone h4 { margin: 0 0 8px; color: var(--red); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .4px; } .danger-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(179,38,30,0.15); } .danger-row:first-of-type { border-top: none; } .danger-row p { margin: 0; font-size: var(--fs-sm); } .btn-danger { background: #fff; border: 1px solid var(--red); color: var(--red); padding: 7px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--fs-sm); font-weight: 600; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn-danger:hover:not(:disabled) { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(179, 38, 30, 0.25); transform: translateY(-1px); } .btn-danger:active:not(:disabled) { transform: translateY(0); box-shadow: none; } .btn-danger:disabled { opacity: .4; cursor: not-allowed; } .audit-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); } .audit-list li { padding: 8px 0; border-bottom: 1px dashed var(--border); } .audit-list li:last-child { border-bottom: none; } .audit-list .audit-when { color: var(--text-muted); font-size: var(--fs-xs); } /* 25 sept. 2026 (Faza 2, "Surse & liste" — dashboard de sănătate, sources.html/sources.js). Rând simplu per sursă — același limbaj vizual ca .danger-row (spațiere, separator), dar neutru (nu e o "zonă de pericol"). */ .source-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); } .source-row:first-of-type { border-top: none; } .source-row .source-main { min-width: 0; } .source-row .source-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; } /* ============================================================ 24-25 sept. 2026 — prag de potrivire configurabil per organizație (sql/021). 24 sept. seara: candidații sub prag nu se mai afișează deloc în ecranul de verificare (nici colapsați) — regula .below-threshold-toggle de mai jos a devenit inutilă și a fost eliminată; rămân stocați integral și apar complet doar în raportul PDF. ============================================================ */ input[type="range"] { width: 100%; accent-color: var(--accent); } input[type="number"] { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--fs-base); } /* ============================================================ 24 sept. 2026 — monitorizare periodică (sql/024-026): înscriere/dezactivare subiecți, etichetă "NOU" pe potriviri apărute abia la o verificare periodică, panou "Subiecți monitorizați" (același tipar vizual ca .list-panel/.danger-row, pentru consistență). ============================================================ */ .decision-badge.new-match { background: var(--amber-bg); color: var(--amber); } .monitoring-box { margin: 16px 0; padding: 14px 16px; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); } .monitoring-box h4 { margin: 0 0 8px; font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); } .monitoring-box .monitoring-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .monitoring-box select { width: auto; flex: 0 0 auto; } .pep-mon { margin: 0 0 12px; padding: 10px 0 0; border-top: 1px solid var(--border, #e5e7eb); } .pep-mon h5 { margin: 0 0 6px; font-size: var(--fs-sm); font-weight: 600; } .pep-mon label { display: inline-flex; align-items: center; gap: 8px; } .monitored-item { padding: 10px 0; border-top: 1px dashed var(--border); font-size: var(--fs-sm); } .monitored-item:first-child { border-top: none; } .monitored-item .monitored-name { font-weight: 600; } .monitored-item .monitored-meta { color: var(--text-muted); font-size: var(--fs-xs); margin: 2px 0 8px; } /* ============================================================ 25 sept. 2026 — Cazuri legate (sql/033): legături manuale între cazuri (persoane fizice/ juridice), afișate în același .monitoring-box din panoul de detaliu. Reutilizează .btn-link, .btn-primary, .btn-danger, .list-item, .badge-neutral, .toggle-group și .error-msg existente — doar câteva reguli noi, specifice structurii rândurilor. ============================================================ */ .linked-case-item { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 0; border-top: 1px dashed var(--border); font-size: var(--fs-sm); } .linked-case-item:first-of-type { border-top: none; } .linked-case-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .linked-case-name { font-weight: 600; } .linked-case-add { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); } /* 29 sept. 2026 (feedback Constantin: la salvarea unei evaluări CRA, cu matricea de factori lungă, nu se vedea nicio confirmare fără derulare manuală) — rândul evaluării proaspăt salvate (reutilizează .linked-case-item, vezi renderCraBox în app.js) primește un fundal verde care se stinge treptat, aplicat din JS doar pe acel rând, imediat după scroll automat la secțiune. */ @keyframes craSavedFlash { from { background: var(--green-bg); } to { background: transparent; } } .cra-just-saved { animation: craSavedFlash 2000ms ease-out; border-radius: var(--radius-sm); padding-left: var(--space-2); padding-right: var(--space-2); } /* ============================================================ 26 sept. 2026 — Verificare PEP (sql/042): fiecare candidat dilisense dintr-o verificare e afișat direct, fără expand/collapse (cerință explicită — analistul vede tot dintr-o privire). Când o verificare are mai mulți candidați (nume comune), .pep-result-card e o listă imbricată în .linked-case-item — același tipar de despărțitor ca .linked-case-item/.monitored-item. ============================================================ */ .pep-result-card { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: var(--fs-sm); } .pep-result-card:first-of-type { border-top: none; margin-top: 0; padding-top: 0; } .link-search-results { margin-top: 8px; max-height: 220px; overflow-y: auto; } .link-search-results .list-item { padding: 8px 10px; } /* ============================================================ 26 sept. 2026 (cerere Constantin) — pe app.html, secțiunile de context din detaliul unei verificări (monitorizare, cazuri legate, adverse media, PEP) treceau înaintea rezultatelor propriu-zise (#matchesList), obligând la scroll ca să ajungi la ele. Rezultatele s-au mutat direct sub #resultBanner (vezi app.html); secțiunile de mai jos devin tab-uri — toate rămân la un click distanță (context de audit/conformitate, verificat des), fără să mai ocupe spațiu vertical implicit ca patru carduri stivuite. Nu e un toggle binar (.toggle-group, mai sus) — model clasic de tab-bar cu underline, ca să susțină 4 opțiuni fără să pară un comutator. ============================================================ */ .section-tabs { display: flex; flex-wrap: wrap; /* 6 oct. 2026: gap și padding reduse + etichetă scurtă ca cele 6 taburi să încapă pe un rând */ gap: 2px; border-bottom: 1px solid var(--border); margin-top: 20px; } .section-tab { flex: 0 0 auto; padding: 10px 12px; border: none; background: none; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; transition: color var(--transition-fast), border-bottom-color var(--transition-fast), background var(--transition-fast); } /* 28 sept. 2026 (Faza C) — hover avea doar schimbare de culoare a textului, greu de observat; un fundal foarte discret (--gray-50, aceeași nuanță de la zebra tabelelor) face zona clickabilă să se simtă "apăsabilă", nu doar text colorat diferit. */ .section-tab:hover { color: var(--text); background: var(--gray-50); } .section-tab.active { color: var(--navy); border-bottom-color: var(--accent); } .section-tab.active:hover { background: none; } /* 13 oct. 2026: un singur rând de taburi; „Dosar" e un meniu derulant cu restul secțiunilor. */ .section-tabs.tab-row { flex-wrap: nowrap; align-items: flex-end; overflow: visible; } .tab-menu { position: relative; flex: 0 0 auto; } .tab-menu-trigger { padding: 10px 12px; border: none; background: none; cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .tab-menu-trigger:hover, .tab-menu-trigger[aria-expanded="true"] { color: var(--text); background: var(--gray-50); } .tab-menu-trigger.active { color: var(--navy); border-bottom-color: var(--accent); } .tab-menu-current { font-weight: 500; color: var(--text-muted); } .tab-menu-current:not(:empty)::before { content: "· "; } .tab-menu-caret { margin-left: 6px; font-size: 11px; } .tab-menu-list { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 220px; padding: 4px 0; margin-top: 1px; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(0,0,0,.12); } .tab-menu-list[hidden] { display: none; } .tab-menu-list .section-tab { display: block; width: 100%; text-align: left; margin: 0; padding: 9px 16px; border-radius: 0; border-bottom: none; border-left: 3px solid transparent; font-weight: 500; } .tab-menu-list .section-tab.active { border-left-color: var(--accent); background: var(--gray-50); font-weight: 600; } @media (max-width: 640px) { .section-tabs.tab-row { overflow-x: auto; } .tab-menu-list { position: fixed; left: 16px; right: 16px; } } .section-tab-panels { padding-top: 4px; } /* 13 oct. 2026 (Faza 2): chip de stare pe tab — text scurt, ton după ce mai e de făcut; nu se bazează doar pe culoare (textul spune starea). */ .tab-chip { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.5; vertical-align: 1px; border: 1px solid transparent; } .tab-chip-ok { background: var(--green-bg); color: var(--green); } .tab-chip-warn { background: var(--amber-bg); color: var(--amber); } .tab-chip-alert { background: var(--red-bg); color: var(--red); } .tab-chip-muted { background: var(--gray-100, #eef0f3); color: var(--text-muted); font-weight: 500; } .tab-chip-neutral { background: var(--gray-100, #eef0f3); color: var(--text); } .section-tab-panel { display: none; } /* 28 sept. 2026 (Faza C, rundă 3) — switch-ul între tab-uri era instant (display:none → block), fără nicio tranziție; o animație scurtă de fade+slide la activare face schimbarea de conținut să se simtă intenționată, nu un "pop" brusc. Rulează automat de fiecare dată când JS adaugă clasa .active (element trece din display:none direct în starea cu clasă, deci animația pornește mereu de la 0) — nu necesită nicio schimbare în app.js. */ .section-tab-panel.active { display: block; animation: sectionTabFadeIn 180ms ease; } @keyframes sectionTabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* ============================================================ 28 sept. 2026 (Faza C, rundă 3) — placeholder "skeleton" pentru listele principale (Cazuri, Jurnal de audit etc.) cât timp se așteaptă răspunsul de rețea, în loc de textul simplu "Se încarcă...". Fiecare .skeleton-item imită forma unui .list-item real (bară de titlu + bară de meta, mai scurtă). Shimmer discret (gray-100 → gray-200 → gray-100), aceleași nuanțe deja folosite la zebra/antet — nicio culoare nouă. Generat de skeletonListHTML() în utils.js. ============================================================ */ .skeleton-item { padding: 14px 16px; border-bottom: 1px solid var(--border); } .skeleton-item:last-child { border-bottom: none; } .skeleton-line { height: 11px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; } .skeleton-line-title { width: 42%; margin-bottom: 8px; } .skeleton-line-meta { width: 64%; height: 9px; opacity: 0.7; } @keyframes skeletonShimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .skeleton-line { animation: none; background: var(--gray-100); } } /* ============================================================ 26 sept. 2026 (P0.4 + P0.5, sql/045) — modal blocant pentru acceptarea textelor juridice (declarație PEP / T&C / DPA). Comun (js/utils.js, showLegalGate) — un singur set de reguli pentru ambele utilizări: gate-ul de login (T&C+DPA, mai multe documente deodată) și gate-ul declarației PEP (un singur document, deschis din app.js la click pe "Verifică PEP"). ============================================================ */ .legal-gate-overlay { position: fixed; inset: 0; background: rgba(13, 27, 42, 0.55); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 20px; } .legal-gate-modal { background: var(--card); border-radius: var(--radius); padding: 28px; max-width: 640px; width: 100%; max-height: 86vh; overflow-y: auto; /* standardizat pe --shadow-lg (28 sept. 2026, Faza A) — aceeași valoare, doar numită acum, ca .notif-dropdown mai sus. */ box-shadow: var(--shadow-lg); } .legal-gate-modal h2 { margin-top: 0; font-size: 18px; } .legal-gate-doc { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; } .legal-gate-doc h3 { font-size: 14px; margin: 0 0 8px; } .legal-gate-text { max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; font-size: var(--fs-sm); color: var(--text-muted); background: var(--bg); } .legal-gate-text p { margin: 0 0 10px; } .legal-gate-text p:last-child { margin-bottom: 0; } .legal-gate-check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--text); } .legal-gate-check input { margin: 0; } .legal-gate-modal .btn-primary { width: 100%; margin-top: 20px; } /* ============================================================ 26 sept. 2026 (P0.3, sql/046) — banner de mod pilot (js/utils.js, renderPilotBanner), primul element din #main-content pe orice pagină autentificată a unei organizații client aflată pe planul pilot. Doar informativ (enforcement-ul real e server-side, check_plan_active) — chihlimbar cât timp mai sunt zile rămase, roșu după expirare, aceleași tokenuri deja folosite peste tot (--amber/--amber-bg/--red/--red-bg), nicio culoare nouă. ============================================================ */ .pilot-banner { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; } .pilot-banner.expired { background: var(--red-bg); color: var(--red); border-color: var(--red); } /* 5 oct. 2026 — formularul de invitare a unui utilizator (Setări organizație, secțiunea Echipă). Trei câmpuri pe un rând pe ecran lat, unul sub altul pe mobil. */ .team-invite-fields { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 12px; } .team-invite-fields input, .team-invite-fields select { width: 100%; } @media (max-width: 700px) { .team-invite-fields { grid-template-columns: 1fr; } } .status-badge.pending { background: var(--amber-bg); color: var(--amber); } .member-email { display: block; font-size: var(--fs-xs); color: var(--muted, #6b7280); } .member-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } /* ============================================================ 6 oct. 2026 (F2b) — pagina „Matrice de risc client” (risk-matrix.html). Refăcută după prima rulare reală (feedback Constantin: „arată jalnic”). Cauze găsite: .btn-primary are margin-top 20px și corp 14px, deci nu se aliniază cu .btn-secondary/.btn-danger;