:root { --blue: #1d4ed8; --blue-dark: #1e3a8a; --blue-bg: #dbeafe; --green: #15803d; --green-bg: #dcfce7; --red: #b91c1c; --red-bg: #fee2e2; --amber: #b45309; --amber-bg: #fef3c7; --purple: #6d28d9; --purple-bg: #ede9fe; --teal: #0f766e; --teal-bg: #ccfbf1; --rose: #c026d3; --rose-bg: #fae8ff; --gray-50: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2e8f0; --gray-300: #cbd5e1; --gray-500: #64748b; --gray-700: #334155; --gray-900: #0f172a; --radius: 8px; --shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --shadow-lg: 0 4px 10px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06); /* Navy-ul din logo (eDih4Society2.0 LOGO.svg) — folosit DOAR pentru highlight-ul de meniu si avatarul de user (decizie explicita 11.09.2026). --blue ramane neschimbat peste tot unde inseamna altceva (link-uri, .mini-tag.wip/.dih1, butoane) — nu-l redenumim, ca sa nu schimbam din greseala acele culori. */ --navy: #222140; --navy-bg: #e8e8f1; --surface: #ffffff; } /* Tema dark (comuta pe atributul data-theme, setat devreme in — vezi partials/header.ejs — ca sa nu clipeasca tema gresita la incarcare). "auto" (fara atribut) urmeaza sistemul; un data-theme explicit castiga intotdeauna, in ambele directii. Redefinim doar scala de gri + fundaluri -bg (mai inchise, pentru contrast) — NU si --blue/--green/--red/--amber/ --purple/--teal/--rose in sine, ca sa nu atingem culorile de status/tag deja live (decizie explicita 11.09.2026, vezi .mini-tag mai jos). */ [data-theme="dark"] { --gray-50: #1b2333; --gray-100: #232c40; --gray-200: #2c3550; --gray-300: #3a4363; --gray-500: #93a1b8; --gray-700: #c3cbdb; --gray-900: #eef1f7; --surface: #141b2c; --navy: #9aa0da; --navy-bg: #262b4a; --blue-bg: #0e1a30; --green-bg: #0d1f14; --amber-bg: #231a05; --red-bg: #2a0f0f; --purple-bg: #1c1430; --teal-bg: #0a211f; --rose-bg: #2a0f2e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gray-50: #1b2333; --gray-100: #232c40; --gray-200: #2c3550; --gray-300: #3a4363; --gray-500: #93a1b8; --gray-700: #c3cbdb; --gray-900: #eef1f7; --surface: #141b2c; --navy: #9aa0da; --navy-bg: #262b4a; --blue-bg: #0e1a30; --green-bg: #0d1f14; --amber-bg: #231a05; --red-bg: #2a0f0f; --purple-bg: #1c1430; --teal-bg: #0a211f; --rose-bg: #2a0f2e; } } * { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--gray-50); color: var(--gray-900); font-size: 15px; line-height: 1.5; } a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; } .app-footer { max-width: 1280px; margin: 24px auto 0; padding: 10px 20px 16px; display: flex; justify-content: space-between; gap: 10px; color: var(--gray-400, #94a3b8); font-size: 11px; } .topbar { background: var(--surface); border-bottom: 1px solid var(--gray-200); position: sticky; top: 0; z-index: 10; } .topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 10px; height: 56px; } .logo-chip { background: #ffffff; border-radius: 6px; padding: 4px 8px; display: inline-flex; align-items: center; line-height: 0; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08); flex-shrink: 0; } .logo-chip:hover { text-decoration: none; } .logo-chip img { display: block; height: 24px; width: auto; } .navdivider { width: 1px; height: 26px; background: var(--gray-200); flex-shrink: 0; } .mainnav-row1 { display: flex; gap: 2px; flex: 1; flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: thin; } .mainnav-row1::-webkit-scrollbar { height: 5px; } .mainnav-row1::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 99px; } .navbtn { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-700); padding: 7px 13px; border-radius: 999px; font-size: 13.5px; font-weight: 500; font-family: inherit; background: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; } .navbtn .ico { font-size: 13px; line-height: 1; opacity: 0.85; } .navbtn:hover { background: var(--gray-100); text-decoration: none; } .navbtn.active { background: var(--navy); color: white; font-weight: 600; } .navbtn.active .ico { opacity: 1; } /* Contur navy (nu doar fondul gri, identic cu :hover si greu de deosebit de el) - userul a semnalat direct ca era greu de vazut care buton are submeniul deschis, mai ales dupa scroll. Fondul navy-bg + border-ul navy se leaga vizual cu border-top-ul navy de pe .nav-row2.open de mai jos, ca sa fie clar ca butonul si submeniul deschis sub el formeaza un singur grup. */ .navbtn.open:not(.active) { background: var(--navy-bg); color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); font-weight: 600; } /* ---------- Rand 2 (submeniu al sectiunii curente/deschise) ---------- */ .nav-row2 { display: none; flex-wrap: wrap; gap: 4px; justify-content: center; padding: 8px 20px; background: var(--gray-50); border-top: 1px solid var(--gray-100); border-bottom: 1px solid var(--gray-200); } .nav-row2.open { display: flex; border-top: 2px solid var(--navy); } .r2item, .r2placeholder { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--gray-200); background: var(--surface); color: var(--gray-700); white-space: nowrap; } .r2item:hover { background: var(--gray-100); color: var(--gray-900); text-decoration: none; border-color: var(--gray-300); } .r2item.active { background: var(--navy-bg); color: var(--navy); font-weight: 700; border-color: var(--navy); } .r2placeholder { opacity: 0.55; border-style: dashed; cursor: not-allowed; } .r2-tag { font-size: 9px; text-transform: uppercase; letter-spacing: 0.03em; background: var(--gray-200); color: var(--gray-700); padding: 1px 5px; border-radius: 3px; font-weight: 700; } .r2-tag-planned { background: none; border: 1px dashed var(--gray-300); } /* ---------- Zona din dreapta: tema + cont ---------- */ .topbar-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .theme-btn { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--gray-200); background: none; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; } .theme-btn:hover { background: var(--gray-100); } .user-chip-wrap { position: relative; } .user-avatar { width: 32px; height: 32px; border-radius: 999px; background: var(--navy); color: white; border: none; font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; padding: 0; } .user-menu { position: absolute; top: calc(100% + 8px); right: 0; background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14); padding: 12px 16px; min-width: 180px; z-index: 40; } .user-menu[hidden] { display: none; } .user-menu-name { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--gray-900); } .user-menu-partner { font-weight: 400; color: var(--gray-500); font-size: 12px; } .user-menu a, .user-menu .link-btn { display: block; font-size: 13px; color: var(--gray-700); padding: 4px 0; text-align: left; width: 100%; } .user-menu a:hover, .user-menu .link-btn:hover { color: var(--gray-900); text-decoration: none; } /* ---------- Carduri de tool (folosite pe pagina /instrumente) ---------- */ .tool-groups { display: flex; flex-direction: column; gap: 22px; } .tool-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); margin: 0 0 10px; } .tool-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .mini-tool-card { border: 1px solid var(--gray-200); border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; color: var(--gray-900); background: var(--surface); } .mini-tool-card:hover { border-color: var(--blue); text-decoration: none; background: var(--gray-50); } .mini-tool-card.is-planned { opacity: 0.55; border-style: dashed; cursor: default; } .mini-tool-card.is-planned:hover { border-color: var(--gray-200); background: var(--surface); } .mini-tool-tags { display: flex; gap: 5px; flex-wrap: wrap; } .mini-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; } .mini-tag.live { background: var(--green-bg); color: var(--green); } .mini-tag.wip { background: var(--blue-bg); color: var(--blue); } .mini-tag.dih2 { background: var(--purple); color: white; } .mini-tag.dih1 { background: var(--blue); color: white; } .mini-tag.planned { background: none; color: var(--gray-500); border: 1px dashed var(--gray-300); } .mini-tool-card strong { font-size: 14px; } .mini-tool-card span.desc { font-size: 12px; color: var(--gray-500); } /* ---------- Hamburger + meniu mobil ---------- */ .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 36px; height: 36px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .hamburger span { display: block; width: 20px; height: 2px; background: var(--gray-700); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; } .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .mobile-menu { display: none; flex-direction: column; border-top: 1px solid var(--gray-200); background: var(--surface); padding: 6px 20px 12px; max-height: calc(100vh - 56px); overflow-y: auto; } .mobile-menu.open { display: flex; } .mobile-menu a, .mobile-accordion-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 4px; font-size: 15px; color: var(--gray-700); border: none; border-bottom: 1px solid var(--gray-100); background: none; font-family: inherit; text-align: left; cursor: pointer; } .mobile-menu a.active { color: var(--navy); font-weight: 700; } .mobile-accordion-btn .chev { font-size: 11px; color: var(--gray-500); transition: transform 0.15s ease; } .mobile-accordion-btn.open .chev { transform: rotate(180deg); } .mobile-tools-panel { display: none; flex-direction: column; background: var(--gray-50); border-radius: 6px; margin: 4px 0 4px 8px; padding: 2px 10px; } .mobile-tools-panel.open { display: flex; } .mobile-tool-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 2px; border-bottom: 1px solid var(--gray-100); font-size: 14px; color: var(--gray-900); } .mobile-tool-row:last-child { border-bottom: none; } .mobile-tool-row.active { color: var(--navy); font-weight: 700; } .mobile-tool-row.is-placeholder { color: var(--gray-500); } .link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--gray-500); cursor: pointer; text-decoration: underline; } .inline-form { display: inline; } .page { max-width: 1280px; margin: 0 auto; padding: 24px 20px 64px; } .alert { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 14px; } .alert-success { background: #dcfce7; color: #166534; border: 1px solid #86efac; } .alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; } h1 { font-size: 22px; margin: 0 0 4px; } h2 { font-size: 16px; margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--navy-bg); color: var(--navy); text-transform: uppercase; letter-spacing: 0.02em; } form.stack h2:first-child, .card h2:first-child { margin-top: 0; } h2.section-blue { color: var(--blue); border-bottom-color: var(--blue-bg); } h2.section-teal { color: var(--teal); border-bottom-color: var(--teal-bg); } h2.section-purple { color: var(--purple); border-bottom-color: var(--purple-bg); } h2.section-amber { color: var(--amber); border-bottom-color: var(--amber-bg); } h2.section-rose { color: var(--rose); border-bottom-color: var(--rose-bg); } h2.section-green { color: var(--green); border-bottom-color: var(--green-bg); } .subtitle { color: var(--gray-500); font-size: 14px; margin: 0 0 20px; } .page-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; gap: 16px; flex-wrap: wrap; } .card { background: var(--surface); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; } .grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 24px; } /* ---------- Contracte Beneficiari (/acte-aditionale) — doua sectiuni alaturate ---------- */ .contracte-aa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; } .contracte-aa-grid.single { grid-template-columns: 1fr; max-width: 760px; } @media (max-width: 860px) { .contracte-aa-grid { grid-template-columns: 1fr; } } .stat-card { background: var(--surface); border: 1px solid var(--gray-200); border-top: 3px solid var(--accent, var(--blue)); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .stat-card .stat-value { font-size: 26px; font-weight: 700; color: var(--accent, var(--blue-dark)); font-variant-numeric: tabular-nums; } .stat-card .stat-label { color: var(--gray-500); font-size: 13px; margin-top: 2px; } .stat-card .stat-delta { font-size: 11.5px; font-weight: 600; margin-top: 8px; display: inline-block; padding: 1px 7px; border-radius: 999px; } .stat-delta.good { background: var(--green-bg); color: var(--green); } .stat-delta.warn { background: var(--amber-bg); color: var(--amber); } .stat-delta.info { background: var(--gray-100); color: var(--gray-700); } /* ---------- Dashboard de indicatori (/) ---------- */ .funnel { display: flex; align-items: flex-end; gap: 18px; height: 130px; padding: 0 4px; } .funnel-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; } .funnel-bar { width: 100%; border-radius: 6px 6px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 6px; } .funnel-bar b { color: white; font-size: 15px; font-variant-numeric: tabular-nums; } .funnel-label { margin-top: 8px; font-size: 12px; color: var(--gray-700); font-weight: 600; text-align: center; } .funnel-pct { font-size: 11px; color: var(--gray-500); } .card .card-sub { font-size: 12.5px; color: var(--gray-500); margin: 0 0 16px; } .barrow { display: grid; grid-template-columns: 150px 1fr 110px; align-items: center; gap: 12px; margin-bottom: 14px; } .barrow:last-child { margin-bottom: 0; } .barrow .label { font-size: 13px; color: var(--gray-700); font-weight: 600; } .barrow .label small { display: block; font-weight: 400; color: var(--gray-500); font-size: 11px; } .bartrack { position: relative; height: 11px; background: var(--gray-100); border-radius: 999px; overflow: hidden; } .barfill { position: absolute; inset: 0; width: 0; border-radius: 999px; } .barrow .barnum { font-size: 12.5px; color: var(--gray-700); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .barrow .barnum b { color: var(--gray-900); } .donut-wrap { display: flex; align-items: center; gap: 20px; } .donut-legend { flex: 1; display: flex; flex-direction: column; gap: 8px; } .legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .legend-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .legend-row .lv { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; } .donut-target { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--gray-100); font-size: 12px; color: var(--gray-500); } .donut-target b { color: var(--gray-900); font-variant-numeric: tabular-nums; } /* ---- Banda "Indicatori cheie" pe prima pagina (cerinta explicita 2026-09-14) ---- */ /* auto-fill, NU auto-fit — cu 9 carduri, auto-fit incapea 6 pe primul rand la latimi obisnuite de desktop, apoi intindea cele 3 ramase de pe randul 2 sa umple tot latul (fiecare mai lat decat cele de deasupra, "aruncate" dupa cum a semnalat userul 2026-09-21). auto-fill pastreaza coloanele goale in loc sa le colapseze, deci un rand incomplet ramane pur si simplu mai scurt, fara sa distorsioneze latimea cardurilor — si tot raspunde la latimea ecranului (mai multe coloane pe monitor mare, mai putine pe unul mic), spre deosebire de o valoare fixa gen repeat(3, 1fr) (incercata, respinsa explicit de user: prea late/goale pe monitor mare). */ /* Fix pe 4 coloane (cerinta explicita user 2026-09-21) — cu 8 carduri acum (dupa unirea RCO01/RCO04 intr-unul singur), 4 pe rand inseamna exact 2 randuri complete, fara rest. */ .hero-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 860px) { .hero-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .hero-grid { grid-template-columns: 1fr; } } .hero-card { background: var(--surface); border: 1px solid var(--gray-200); border-radius: 14px; padding: 16px 18px 14px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; border-top: 3px solid var(--src-color, var(--blue)); } .hero-src { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--src-color, var(--blue)); background: var(--src-bg, var(--blue-bg)); padding: 2px 9px; border-radius: 999px; } .hero-name { font-size: 12.5px; font-weight: 700; color: var(--gray-900); margin: 8px 0 6px; line-height: 1.35; min-height: 34px; } .hero-pct { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .hero-frac { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; margin: 8px 0 10px; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--src-bg, var(--blue-bg)); color: var(--src-color, var(--blue)); } .hero-glow { height: 28px; margin: 0 -6px; } .hero-glow svg { width: 100%; height: 100%; overflow: visible; display: block; } .heatmap { display: grid; gap: 4px; } .heatmap .hcell, .heatmap .hhead, .heatmap .hrow-label { border-radius: 5px; padding: 9px 4px; text-align: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .heatmap .hhead { background: none; color: var(--gray-500); font-weight: 600; font-size: 11px; padding: 0 4px 6px; } .heatmap .hrow-label { background: var(--gray-100); color: var(--gray-700); display: flex; align-items: center; justify-content: center; } .trend-svg { width: 100%; height: auto; } table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); } table.table-card { border: 1px solid var(--gray-200); border-radius: var(--radius); overflow: hidden; } th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--gray-100); } th { background: var(--gray-50); color: var(--gray-700); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; } /* Cap de tabel sortabil (ex. /beneficiari) — link-ul mosteneste culoarea gri-uppercase a th-ului in loc de albastru-link default, ca sa nu se confunde vizual cu un link normal, dar arata clar clickabil la hover. */ th .th-sort, th a.th-sort { color: inherit; text-decoration: none; cursor: pointer; } th .th-sort:hover, th a.th-sort:hover { color: var(--blue); text-decoration: none; } tr:last-child td { border-bottom: none; } tr:hover td { background: var(--gray-50); } .table-wrap { overflow-x: auto; } .btn { display: inline-block; background: var(--blue); color: white; border: none; padding: 9px 16px; border-radius: 6px; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--blue-dark); text-decoration: none; } .btn-secondary { background: var(--surface); color: var(--gray-700); border: 1px solid var(--gray-300); } .btn-secondary:hover { background: var(--gray-100); } .btn-sm { padding: 5px 10px; font-size: 13px; } .badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; } .badge-gray { background: var(--gray-100); color: var(--gray-700); } .badge-blue { background: #dbeafe; color: var(--blue-dark); } .badge-green { background: #dcfce7; color: var(--green); } .badge-red { background: #fee2e2; color: var(--red); } .badge-amber { background: #fef3c7; color: var(--amber); } .badge-purple { background: var(--purple-bg); color: var(--purple); } .stock-ok { color: var(--green); font-weight: 600; } .stock-low { color: var(--amber); font-weight: 600; } .stock-out { color: var(--red); font-weight: 700; } /* Valori monetare — aliniate la dreapta, cifre tabulare, usor evidentiate fata de textul din jur, ca sa se scaneze rapid o coloana de sume. */ .text-money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gray-900); white-space: nowrap; } th.text-money { text-align: right; } .text-money-muted { text-align: right; font-variant-numeric: tabular-nums; color: var(--gray-500); white-space: nowrap; } /* Sumar evidentiat (ex: total contract) — mai vizibil decat un card obisnuit, fara sa fie un avertisment (nu foloseste culorile de eroare/atentie). */ .summary-box { background: var(--purple-bg); border: 1px solid #ddd6fe; border-radius: var(--radius); padding: 14px 18px; margin-bottom: 20px; display: flex; gap: 32px; flex-wrap: wrap; } .summary-box .summary-item .summary-label { font-size: 12px; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 2px; } .summary-box .summary-item .summary-value { font-size: 18px; font-weight: 700; color: var(--purple); font-variant-numeric: tabular-nums; } .filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; align-items: flex-end; } .filters .field { min-width: 160px; } /* .filters-stacked: variantă pe mai multe rânduri pentru pagini cu multe filtre (ex. /contracte-si-aa — text + segment "Arata" + chips de raportare), ca fiecare grup să aibă loc pe orizontală în loc să se înghesuie și să se rupă urât pe două linii inegale. Scopat cu clasă separată (nu schimbă .filters de bază), ca să nu afecteze celelalte pagini care refolosesc .filters (Beneficiari, Servicii, Alocari, Deplasari, Indicatori, Pregatire RP).*/ .filters.filters-stacked { flex-direction: column; align-items: stretch; gap: 14px; } .filters-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } /* .chip-group-rp: modificator DEDICAT (nu refolosim .wide) — .wide are deja o suprascriere de culoare (navy) specifica Deplasari (vezi comentariul de mai jos de la .chip-group.wide), care s-ar aplica din greseala si aici daca am fi refolosit .wide doar pentru max-width. Exact tipul de bug de coliziune de clase deja gasit o data 2026-09-16 — de-acum, un modificator nou per caz. */ .chip-group.chip-group-rp { max-width: none; } /* Grup de "chip"-uri bifabile — alternativa prietenoasa la , acum e sub un
(nativ, fara JS, fara probleme de CSP), ca sa nu incarce vizual chip-grid-ul de mai sus. */ .categorii-legend { margin-top: 8px; font-size: 12px; color: var(--gray-600); } .categorii-legend summary { cursor: pointer; font-weight: 600; color: var(--navy); } .categorii-legend ul { margin: 8px 0 0; padding-left: 18px; } .categorii-legend li { margin-bottom: 4px; } /* Toggle de aprobare (Referat aprobat) - o singura bifa, dar cu suprafata de click mai clara decat un checkbox gol pe fond alb. */ label.approve-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: var(--radius); cursor: pointer; margin-bottom: 0; } label.approve-toggle input { width: auto; } label.approve-toggle:has(input:checked) { background: var(--green-bg); border-color: var(--green); color: var(--green); } /* ---------- Bara "versiune noua" (verificare automata, vezi public/js/main.js -> initVersionCheck) ---------- Culorile de mai jos sunt FIXE (nu var(--navy)/var(--blue)) - deliberat, nu o omisiune: e o bara de alerta de sistem, trebuie sa arate la fel indiferent de tema aleasa de utilizator, nu sa se inverseze in tema dark (unde --navy devine lavanda deschisa, gresit pentru un fundal de bara). */ .update-banner { position: sticky; top: 0; z-index: 1001; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: linear-gradient(155deg, #222140, #16152b); color: #fff; padding: 12px 20px; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.35); border-bottom: 3px solid #3b6bf5; animation: updateBannerIn 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); } @media (prefers-reduced-motion: reduce) { .update-banner { animation: none; } } @keyframes updateBannerIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } .update-banner .icon { width: 32px; height: 32px; border-radius: 999px; flex-shrink: 0; background: rgba(59, 107, 245, 0.25); display: flex; align-items: center; justify-content: center; } .update-banner .icon svg { width: 16px; height: 16px; } .update-banner .msg { flex: 1 1 auto; min-width: 160px; } .update-banner .msg .title { font-size: 14px; font-weight: 700; } .update-banner .msg .sub { font-size: 12.5px; opacity: 0.78; margin-top: 1px; } .update-banner .refresh-btn { background: #3b6bf5; color: #fff; border: none; border-radius: 8px; padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; flex-shrink: 0; display: flex; align-items: center; gap: 7px; } .update-banner .refresh-btn:hover { background: #4f7bff; } .update-banner .refresh-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .update-banner .refresh-btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* Cand bara e activa, restul paginii se blureaza si devine neinteractiv — singura actiune posibila ramane butonul de reincarcare din bara. Nu promitem "datele tale sunt salvate": daca update-ul a schimbat si structura bazei de date, o pagina veche lasata deschisa ar putea trimite un formular pe care noul server nu-l mai intelege la fel (cerinta explicita a userului 2026-09-21). */ body.update-locked > header, body.update-locked > main, body.update-locked > footer { filter: blur(3px) saturate(0.85) brightness(0.97); pointer-events: none; user-select: none; } /* Topbar-ul aplicatiei e deja sticky la top:0 - cat timp bara e afisata deasupra lui, il coboram cu inaltimea barei (masurata JS), ca sa nu se suprapuna cand utilizatorul deruleaza pagina. */ body.has-update-banner .topbar { top: var(--update-banner-h, 0px); } /* ---------- Contracte de munca ---------- */ .cm-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .cm-muted { color: var(--gray-500); font-size: 12.5px; } .cm-nowrap { white-space: nowrap; } .cm-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; } .cm-contract-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; } .cm-contract-head h3 { margin: 0 0 2px; font-size: 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .cm-changes { list-style: none; margin: 0; padding: 0; } .cm-changes li { margin-bottom: 3px; } .cm-arrow { color: var(--gray-500); } .cm-details { margin-top: 14px; } .cm-details summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-700); } .cm-current { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px; } .cm-current-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-500); margin-bottom: 4px; } .cm-mods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .cm-mod { border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); } .cm-conditional { margin-top: 10px; } .cm-conditional[hidden], #cmExpirareBox[hidden], #cmPreview[hidden] { display: none; } .cm-conditional label { display: block; font-size: 13px; font-weight: 600; color: var(--gray-700); margin-bottom: 5px; } .cm-preview { background: var(--green-bg); color: var(--green); border-radius: var(--radius); padding: 8px 14px; font-size: 13.5px; margin-bottom: 14px; } /* ---------- Notificari pop-up (dreapta-sus, pe orice pagina) ---------- */ .toast-stack { position: fixed; top: 110px; right: 16px; z-index: 900; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 130px); overflow-y: auto; } .toast { position: relative; background: var(--surface); color: var(--gray-900); border: 1px solid var(--gray-200); border-left: 4px solid var(--amber); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 12px 34px 12px 14px; font-size: 13.5px; } .toast-close { position: absolute; top: 6px; right: 8px; width: 24px; height: 24px; border: none; background: none; color: var(--gray-500); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 4px; } .toast-close:hover { background: var(--gray-100); color: var(--gray-900); } .toast-title { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .toast-sub { color: var(--amber); font-weight: 600; margin: 2px 0 6px; } .toast-list { margin: 0 0 8px; padding-left: 18px; } .toast-list li { margin-bottom: 3px; } .toast-link { font-weight: 600; font-size: 13px; } /* Alerta fixa din pagina Contracte de munca (in plus fata de pop-up-ul de mai sus) */ .cm-alert { background: var(--amber-bg); border: 1px solid var(--amber); color: var(--gray-900); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px; } .cm-alert strong:first-child { color: var(--amber); } .cm-alert ul { margin: 8px 0 0; padding-left: 18px; } .cm-alert li { margin-bottom: 4px; } /* ---------- Sortare pe cap de tabel, generala (vezi initSortableTables in main.js) ---------- */ th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; } th.th-sortable::after { content: '↕'; margin-left: 6px; font-size: 11px; opacity: 0.35; } th.th-sortable[aria-sort="ascending"]::after { content: '▲'; opacity: 1; color: var(--blue); } th.th-sortable[aria-sort="descending"]::after { content: '▼'; opacity: 1; color: var(--blue); } th.th-sortable:hover { color: var(--blue); } th.th-sortable:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }