/* ============================================================ TAX-INFO - strat de brand peste layout-ul ModernAdmin modern-admin.css aduce layout-ul (sidebar, header, main, carduri, tabele, formulare) si expune totul prin tokeni CSS. Fisierul acesta NU rescrie layoutul: schimba tokenii ca sa fie verdele institutional, apoi adauga componentele care exista doar in aplicatia noastra (carduri KPI, coloana Stare, tabele de cantitati, pagini de login). Ordinea de incarcare in header.php: modern-admin.css, apoi acesta. ============================================================ */ /* ============================================================ 1. Tokeni - identitatea vizuala ============================================================ */ /* * Paleta ramane cea implicita din ModernAdmin: accent albastru (#1a66c4), * meniu lateral bleumarin (#051831). NU redefinim aici culorile de brand - * asa ramane un singur loc de schimbat (modern-admin.css) daca se schimba * vreodata, iar tema intunecata a template-ului ramane coerenta din start. * * Tot ce urmeaza sunt completari: tipografia proprie, culoarea de avertizare * si aliasurile catre tokenii scrisi inainte de ModernAdmin. */ :root { /* Tipografie: Inter pentru text, IBM Plex Mono pentru cifrele fiscale. Numerele aliniate pe coloana sunt o cerinta de citire, nu o preferinta. */ --default-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --heading-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --nav-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mono-font: 'IBM Plex Mono', 'Courier New', monospace; /* Amberul este singura culoare de avertizare din aplicatie si se foloseste exclusiv cand ceva blocheaza o actiune. */ --color-warn: #b45309; --color-warn-bg: #fffbeb; --color-warn-border: #fde68a; /* Aliasuri pastrate pentru stilurile inline scrise inainte de ModernAdmin. Derivate din accent, ca sa urmeze automat tema template-ului. */ --color-primary: var(--accent-color); --color-primary-dark: color-mix(in srgb, var(--accent-color), black 12%); --color-primary-light: color-mix(in srgb, var(--accent-color), transparent 92%); --color-surface: var(--background-color); --color-border: var(--border-color); --color-text: var(--default-color); --color-text-muted: var(--muted-color); --font-primary: var(--default-font); } [data-theme="dark"] { --color-warn: #fbbf24; --color-warn-bg: rgba(251, 191, 36, 0.12); --color-warn-border: rgba(251, 191, 36, 0.35); } /* Utilitarele .bg-* si opacitatea. ModernAdmin le rescrie ca `background-color: var(--culoare) !important`, ceea ce rupe mecanismul Bootstrap `rgba(--bs-*-rgb, --bs-bg-opacity)`: perechile `bg-success bg-opacity-10` din calcul.php si tarife.php, gandite ca fundaluri subtile, deveneau blocuri saturate cu text ilizibil. Le punem la loc pe forma cu opacitate, cu valorile din paleta template-ului. */ /* Verdele, rosul si cyanul sunt nuantele 700, nu 500 ale sablonului: pe ele stau etichete cu text alb ("Aprobat", "Rural"), iar #22c55e cu alb are 2,3:1 (minimul e 4,5:1). Fundalurile cu opacitate 10% raman discrete. */ :root { --bs-primary-rgb: 26, 102, 196; --bs-secondary-rgb: 100, 116, 139; --bs-success-rgb: 21, 128, 61; --bs-warning-rgb: 245, 158, 11; --bs-danger-rgb: 220, 38, 38; --bs-info-rgb: 14, 116, 144; } [data-theme="dark"] { --bs-primary-rgb: 37, 99, 235; --bs-secondary-rgb: 71, 85, 105; --bs-success-rgb: 21, 128, 61; --bs-warning-rgb: 251, 191, 36; --bs-danger-rgb: 220, 38, 38; --bs-info-rgb: 14, 116, 144; } /* Tokenii semantici ai sablonului, numai pe tema deschisa: - textul secundar #64748b avea 4,3:1 pe fundalul paginii (#f0f4f9) si ~4,1:1 pe panourile colorate din calcul: subtitluri, breadcrumb, unitati de masura; - butoanele pline (Export Excel, Export PDF) aveau text alb pe #22c55e (2,3:1) si #ef4444 (3,8:1), iar conturul rosu (Deblocheaza) 3,2:1. Pe tema inchisa valorile sablonului se citesc bine pe fundal inchis. */ :root:not([data-theme="dark"]) { --muted-color: #526072; --success-color: #15803d; --danger-color: #dc2626; --info-color: #0e7490; } /* Hover-ul sablonului e mai deschis decat noul fundal: alb pe #16a34a are 3,3:1. */ :root:not([data-theme="dark"]) .btn-success:hover { background-color: #166534; border-color: #166534; } :root:not([data-theme="dark"]) .btn-danger:hover { background-color: #b91c1c; border-color: #b91c1c; } :root:not([data-theme="dark"]) .btn-outline-danger { color: #b91c1c; } /* Titlurile de grup din meniul lateral: alb 40% pe bleumarin avea 3,8:1. */ :root:not([data-theme="dark"]) { --sidebar-heading-color: rgba(255, 255, 255, 0.6); } /* O eticheta cu text alb nu are voie sa fie translucida: la 75% verdele devine iar prea deschis pentru alb. */ .badge.bg-opacity-75:not(.text-dark) { --bs-bg-opacity: 1; } /* Bootstrap pune text negru pe .text-bg-info; pe cyanul inchis de mai sus se citeste textul alb. */ .text-bg-info { color: #ffffff !important; } /* Textul colorat sta pe fundaluri deschise (panourile din calcul si tarife, cu opacitate 10%): nuantele 500 ale sablonului au acolo 2-3,5:1. Pe tema inchisa raman cele ale sablonului, care se citesc bine pe fundal inchis. */ :root:not([data-theme="dark"]) .text-success { color: #166534 !important; } :root:not([data-theme="dark"]) .text-danger { color: #b91c1c !important; } :root:not([data-theme="dark"]) .text-info { color: #0e7490 !important; } :root:not([data-theme="dark"]) .text-warning { color: var(--color-warn) !important; } .bg-primary { background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-secondary { background-color: rgba(var(--bs-secondary-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-success { background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-warning { background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-danger { background-color: rgba(var(--bs-danger-rgb), var(--bs-bg-opacity, 1)) !important; } .bg-info { background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity, 1)) !important; } /* ============================================================ 2. Ajustari de layout ============================================================ */ body { font-size: 0.9375rem; -webkit-font-smoothing: antialiased; } /* Paginile isi pastreaza wrapperul .container-fluid scris inainte de ModernAdmin; .main-content da deja padding, deci il neutralizam aici in loc sa atingem 11 fisiere de pagina. */ .main-content > .container-fluid { padding: 0 !important; max-width: 1600px; margin-inline: auto; } /* Firul Ariadnei - deasupra titlului propriu al paginii, discret. */ .page-breadcrumb { margin-bottom: 0.85rem; } .page-breadcrumb .breadcrumb { margin-bottom: 0; } .page-breadcrumb .breadcrumb-item i { font-size: 0.875rem; } /* Antetul de card e flex cu space-between. Paginile noastre pun titlu si subtitlu explicativ in acelasi antet; fara wrap, titlul se rupe pe doua randuri ca sa faca loc subtitlului. */ .card-header { flex-wrap: wrap; gap: 0.25rem 0.75rem; } /* Subtitlul explicativ de dupa titlu sta sub titlu, nu in dreapta lui (03.11.2026, D-100): space-between il impingea la margine cand incapea pe acelasi rand. Butoanele din antet (fara .small / .text-muted) raman in dreapta. */ .card-header > :is(h2, h3, h4, h5, h6, .card-title) + :is(.small, .text-muted, p) { flex-basis: 100%; margin-top: 0; } /* Listele de text isi recapata buletinele (D-100): sablonul le scoate peste tot (ul { list-style: none }), dar spatiul din stanga ramanea (.alert ul, ps-3), asa ca textul parea deplasat fata de titlu. Listele de navigare, paginatia, grupurile si cele marcate list-unstyled raman fara buletine. */ :is(.card-body, .alert, .modal-body, .offcanvas-body, .toast-body, .popover-body, dd) ul:not(.list-unstyled):not(.list-group):not(.nav):not(.pagination):not(.dropdown-menu):not(.list-inline) { list-style: disc; padding-left: 1.25rem; } :is(.card-body, .alert, .modal-body, .offcanvas-body) ol:not(.list-unstyled):not(.breadcrumb) { list-style: decimal; padding-left: 1.25rem; } /* Lista mica are aceeasi inaltime ca un camp mic (D-100): .form-select din sablon anula .form-select-sm din Bootstrap (40,5 px langa campuri de 33,5 px, la tarife). Aceleasi valori ca .form-control-sm din sablon. */ .form-select-sm { padding: 6px calc(var(--spacing-sm) + 24px) 6px var(--spacing-sm); font-size: 0.8125rem; border-radius: var(--radius-sm); background-position: right var(--spacing-sm) center; } /* Titlurile de pagina existente (h1.h3) - aliniate la scara ModernAdmin. */ .main-content h1.h3 { font-size: 1.5rem; font-weight: 600; color: var(--heading-color); letter-spacing: -0.01em; } /* Subsolul are un singur rand de context; padding-ul sablonului (2 x xl) era gandit pentru un subsol cu linkuri si coloane. */ .footer { padding-block: var(--spacing-md); } .footer-copyright { text-wrap: balance; } /* ============================================================ 3. Bara de sus - completari proprii ============================================================ */ /* Contextul de lucru: in multi-tenant, "in ce ADI sunt" trebuie sa fie vizibil permanent, nu doar dupa ce deschizi un raport. */ .header-context { display: none; align-items: center; gap: 0.4rem; min-width: 0; margin: 0 var(--spacing-lg); padding: 0.3rem 0.7rem; font-size: 0.8125rem; color: var(--muted-color); background: var(--background-color); border: 1px solid var(--border-color); border-radius: var(--radius-full); } @media (min-width: 992px) { .header-context { display: flex; } } /* ADI-ul in care se lucreaza, cu logo-ul lui (assets/img/adi/.svg) sau iconita. */ .header-adi { display: flex; align-items: center; gap: 0.6rem; min-width: 0; color: var(--heading-color); text-decoration: none; } .header-adi:hover { color: var(--accent-color); } .header-adi > i { font-size: 1.25rem; color: var(--accent-color); } .header-adi-logo { height: 30px; width: auto; flex-shrink: 0; } .header-adi-nume { display: none; font-weight: 600; font-size: 0.9375rem; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (min-width: 768px) { .header-adi-nume { display: inline; } } /* Logo-ul color pe tema deschisa, cel alb pe tema inchisa (sagetile negre nu se vad pe fundal inchis). */ .logo-tema-inchisa { display: none; } [data-theme="dark"] .logo-tema-deschisa { display: none; } [data-theme="dark"] .logo-tema-inchisa { display: inline-block; } .header-context-stare { padding: 0.05rem 0.45rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border-radius: var(--radius-full); background: color-mix(in srgb, var(--muted-color), transparent 88%); color: var(--muted-color); } .header-context-stare.stare-aprobat { background: var(--success-color-light); color: var(--success-color); } :root:not([data-theme="dark"]) .header-context-stare.stare-aprobat { color: #15803d; } /* Chip informativ in bara de sus (ex. acces read-only). */ .header-chip { display: none; align-items: center; gap: 0.35rem; padding: 0.25rem 0.6rem; font-size: 0.75rem; font-weight: 500; border-radius: var(--radius-full); white-space: nowrap; } @media (min-width: 768px) { .header-chip { display: inline-flex; } } .header-chip-readonly { background: var(--info-color-light); color: var(--info-color); } /* Avatar din initiale - aplicatia nu stocheaza poze de profil. */ .avatar-initiale { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; background: var(--accent-color); color: #ffffff; } /* modern-admin.css pune `.user-dropdown .avatar { display:block }` (specificitate mai mare decat .avatar-initiale): fara flex aici, initialele stateau sus in cerc. */ .user-dropdown .avatar.avatar-initiale { display: flex; font-size: 0.8125rem; } /* Antetul meniului utilizatorului (03.11.2026): numai text, fara fundal colorat si fara cercul cu initiale (il are deja butonul din bara de sus), cu o linie dedesubt. Numele si rolul in culoarea titlurilor (negru in tema deschisa). */ .user-dropdown-header { background: none; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border-color-light); } .user-dropdown-name, .user-dropdown-role { color: var(--heading-color); } .user-dropdown-email { padding: 0.35rem 0.75rem 0.5rem; font-size: 0.75rem; color: var(--muted-color); word-break: break-all; border-bottom: 1px solid var(--border-color-light); margin-bottom: 0.25rem; } /* ============================================================ 4. Meniul lateral - completari proprii ============================================================ */ .sidebar-logo i { font-size: 1.35rem; } .sidebar-footer-avatar.avatar-initiale { font-size: 0.875rem; background: rgba(255, 255, 255, 0.16); border: 2px solid rgba(255, 255, 255, 0.22); } /* Blocul de utilizator din subsol este un cu span-uri, nu un div, ca sa fie tot randul o singura tinta de click. */ .sidebar-footer-info { display: block; } .sidebar-footer-name, .sidebar-footer-role { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Etichetele INPUT-1 / INPUT-2 sunt referinte la foile din exportul oficial, nu notificari: nu au voie sa arate ca un badge de alerta. */ .sidebar .nav-badge-soft { background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.55); font-weight: 500; letter-spacing: 0.02em; } .sidebar .nav-badge-test { background: var(--warning-color); color: #1e293b; font-size: 0.75rem; } /* Cu mouse-ul, meniul intreg (superadmin: 9 intrari, 4 grupuri) incape pe un laptop de 768px inaltime; altfel ultima intrare ramanea taiata sub cardul utilizatorului, fara niciun semn ca se poate derula. Pe ecranele tactile raman intrarile sablonului, cu tinte de cel putin 44px. Spatiul dintre intrari si dintre sectiuni e putin mai mare (cerinta din 04.11.2026): meniul se citea inghesuit; pe un ecran mic meniul se deruleaza. */ /* Intrarile fara titlu de sectiune (Acces::MENIU, titlul gol), dupa prima: o linie subtire in locul titlului. */ .sidebar .nav-separator { margin: var(--spacing-md) var(--spacing-md) var(--spacing-sm); border-top: 1px solid rgba(255, 255, 255, 0.10); } @media (hover: hover) and (pointer: fine) { .sidebar .nav-menu { gap: 4px; } .sidebar .nav-item > .nav-link { padding-block: 8px; } .sidebar .nav-item > .nav-link > i:first-child { line-height: 1; } .sidebar .nav-heading:not(:first-child) { padding-top: 1.25rem; } } /* Bara de impersonare - context periculos, deci sta lipita sub header pe toata latimea continutului si nu se poate rata. */ .impersonare-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; padding: 0.55rem var(--spacing-xl); font-size: 0.8125rem; background: var(--warning-color-light); color: var(--default-color); border-bottom: 1px solid var(--warning-color); } .impersonare-bar i { color: var(--warning-color); } /* Butonul de iesire trebuie sa arate ca un buton pe fundal amber; variantele outline ale template-ului mostenesc culoarea barii si dispar. */ .impersonare-bar .btn { color: #1e293b; background: rgba(255, 255, 255, 0.65); border: 1px solid var(--warning-color); padding: 0.2rem 0.6rem; } .impersonare-bar .btn:hover { background: #ffffff; color: #1e293b; } .impersonare-bar .btn i { color: inherit; } @media (max-width: 767px) { .impersonare-bar { padding: 0.55rem var(--spacing-md); } } /* ============================================================ 5. Componente proprii aplicatiei ============================================================ */ /* ── Carduri KPI (dashboard) ── */ .kpi-card { padding: 1rem 1.1rem; } .kpi-label { font-size: 0.8125rem; font-weight: 500; color: var(--muted-color); margin-bottom: 0.35rem; } .kpi-label i { margin-right: 0.4rem; opacity: 0.8; } .kpi-value { font-size: 1.75rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--heading-color); margin-bottom: 0.35rem; } .kpi-value .kpi-of { font-size: 1.05rem; font-weight: 500; color: var(--muted-color); } .kpi-note { font-size: 0.75rem; color: var(--muted-color); margin-bottom: 0; } .kpi-meter { height: 5px; border-radius: 999px; background: var(--border-color); overflow: hidden; margin-bottom: 0.5rem; } .kpi-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--accent-color); } .kpi-meter > span.is-warn { background: var(--color-warn); } /* Iconita de KPI fara blob colorat: 4 patrate colorate pe un rand de carduri concureaza cu cifrele, care sunt continutul real. */ .stat-icon-blob { background: transparent !important; padding: 0 !important; } .stat-icon-blob i { color: var(--muted-color) !important; font-size: 1.5rem !important; } /* ── Denumirea zonei ── Denumirea din baza de date contine deja numarul zonei si mediul ("Zona 1 SANPAUL - Urban"); aici se afiseaza o singura data. */ .zona-nume { font-weight: 600; font-size: 0.9375rem; } .zona-loc { color: var(--muted-color); font-size: 0.8125rem; } /* ── Coloana Stare ── Starea buna e deliberat discreta: singurul lucru care are voie sa atraga privirea pe dashboard e o zona care blocheaza calculul. */ .td-stare { text-align: right; } .stare { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8125rem; } .stare[data-tip="complet"], .stare[data-tip="gata"], .stare[data-tip="fara_uat"] { color: var(--muted-color); } .stare[data-tip="complet"]::before, .stare[data-tip="gata"]::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--accent-color); opacity: 0.55; flex: none; } .stare[data-tip="lipsa"] { color: var(--color-warn); font-weight: 600; background: var(--color-warn-bg); border: 1px solid var(--color-warn-border); padding: 0.15rem 0.5rem; border-radius: var(--radius-md); } /* ── Carduri de zona pe mobil ── */ .zona-card { border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 0.8rem 0.9rem; margin-bottom: 0.75rem; } .zona-card:last-child { margin-bottom: 0; } .zona-card-meta { display: flex; gap: 1.25rem; font-size: 0.8125rem; color: var(--muted-color); margin-bottom: 0.6rem; } .zona-card-meta strong { color: var(--default-color); font-weight: 600; } .actiuni-card { display: flex; gap: 0.4rem; } .actiuni-card .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; padding-left: 0.4rem; padding-right: 0.4rem; } /* ── Mediul (Format::mediu) ── Text cu pictograma, fara fundal: culorile raman ale starilor (FINDING-023). */ .eticheta-mediu { display: inline-flex; align-items: baseline; gap: 0.3rem; white-space: nowrap; } .eticheta-mediu .bi { color: var(--muted-color); } /* ── Pagina zonei (zona.php) ── Zona si mediul sunt titlul, ca selector; dedesubt, tab-urile cu motivul „numai citire” la capat. Inainte: card cu filtre, alerta, tab-uri. */ .btn-titlu { font: inherit; color: inherit; padding: 0; border: 0; background: none; text-align: left; display: inline-flex; align-items: center; gap: 0.4rem; } .btn-titlu:hover, .btn-titlu:focus-visible { color: var(--accent-color); } .btn-titlu.dropdown-toggle::after { margin-left: 0; } /* Meniul sta in

: fara aceste doua reguli ar mosteni marimea si grosimea titlului. */ .dropdown-menu-zone { max-height: 70vh; overflow-y: auto; min-width: 16rem; font-size: 0.9375rem; font-weight: 400; } .dropdown-menu-zone .dropdown-header { font-weight: 600; } /* Selectorul de an sta langa butoanele mici din antet: aceeasi inaltime (sablonul suprascrie form-select-sm). */ .select-antet { width: auto; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.8125rem; } .tab-uri-zona { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 0.25rem 1rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; } /* Tab-urile derulează lateral pe ecran îngust, în loc să se rupă pe două rânduri. */ .tab-uri-zona .nav-tabs { border-bottom: 0; margin-bottom: -1px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; max-width: 100%; } .tab-uri-zona .nav-link { white-space: nowrap; } /* „Numai citire”, singura formulare (FINDING-025): ochi = contul nu are drept, lacat = datele sunt blocate. */ .eticheta-citire { display: inline-flex; align-items: baseline; gap: 0.35rem; font-size: 0.8125rem; font-weight: 400; color: var(--muted-color); } .tab-uri-zona .eticheta-citire { padding-bottom: 0.5rem; } /* Fluxurile din tab-ul UAT-uri, in antetul cardului cu tabelul. */ .card-header .nav-pills { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; } .card-header .nav-pills .nav-link { padding: 0.3rem 0.7rem; font-size: 0.875rem; white-space: nowrap; } /* ── Tabele ── Tabelele raman in stilul standard Bootstrap 5 + DataTables: fara antet colorat, fara densitate, font sau culori proprii (cerinta din 27.10.2026). Clasa ceruta pe orice tabel: `table table-hover ... datatable` (fundal alb, fara dungi, gri numai la hover; D-28 din 28.10.2026), verificat de tests/test_datatables.php. */ /* Cifre tabulare in campurile de cantitate (inputuri, nu celule de tabel). */ .input-cantitate, .input-q, .cifre { font-family: var(--mono-font); font-feature-settings: "tnum" 1; } /* Grila editabila pe UAT (templates/zona/uat.php; cerinta din 03.11.2026): incape pe ecran fara derulare laterala. Celule mai inguste, perioada si anul pe doua randuri in antet, grupa cu o linie sub ea. */ .tabel-grila { font-size: 0.875rem; } .tabel-grila > :not(caption) > * > * { padding: 0.45rem 0.4rem; } .tabel-grila .grila-grupa { border-bottom: 2px solid var(--border-color); } .tabel-grila .grila-perioada { font-weight: 600; line-height: 1.2; white-space: nowrap; } .tabel-grila .grila-an { display: block; font-weight: 400; color: var(--muted-color); } .tabel-grila td.cifre { font-size: 0.8125rem; } .tabel-grila td.grila-uat { white-space: nowrap; } /* numele UAT-ului pe un rand (D-100) */ .tabel-grila tfoot td { border-top: 2px solid var(--border-color); font-size: 0.8125rem; } .tabel-grila .input-q { min-width: 4.75rem; padding-inline: 0.35rem; } /* Ce se completeaza arata ca un camp (contur); totalul calculat ramane gri, fara contur. */ .tabel-grila .input-q:not([readonly]) { background: var(--input-bg); border: 1px solid var(--input-border) !important; } .tabel-grila .input-q.is-invalid { border-color: var(--bs-danger) !important; } /* Tarifele (templates/zona/tarife.php, D-101): un tarif pe un rand, in ordinea tarif, stare, denumirea actului, numarul si data lui, actul aditional, emitentul. Pe telefon doua campuri pe rand; pana la 1500 px doua randuri; peste, un rand cu capul coloanelor deasupra (atunci etichetele fiecarui camp raman numai pentru cititoarele de ecran). */ .rand-tarif { display: grid; gap: 0.35rem 0.6rem; align-items: start; padding: 0.65rem 0; border-bottom: 1px solid var(--border-color); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "act act" "tarif stare" "den den" "nr data" "aanr aadata" "emit emit"; } .rand-tarif:last-child { border-bottom: 0; } .rt-activitate { grid-area: act; padding-top: 0.3rem; } .rt-tarif { grid-area: tarif; } .rt-stare { grid-area: stare; } .rt-denumire { grid-area: den; } .rt-nr { grid-area: nr; } .rt-data { grid-area: data; } .rt-aa-nr { grid-area: aanr; } .rt-aa-data { grid-area: aadata; } .rt-emitent { grid-area: emit; } .rt-nota { grid-column: 1 / -1; } .cap-tarife { display: none; padding: 0 0 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--muted-color); } @media (min-width: 768px) { .rand-tarif { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-areas: "act act tarif stare den den" "nr data aanr aadata emit emit"; } } @media (min-width: 1500px) { .rand-tarif { grid-template-columns: minmax(11rem, 1.5fr) 5.5rem 10.75rem minmax(9rem, 1.4fr) 5.5rem 7rem 5.5rem 7rem minmax(9rem, 1.3fr); grid-template-areas: "act tarif stare den nr data aanr aadata emit"; } .cap-tarife { display: grid; } .ascuns-lat { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* „Introducerea datelor” pe telefon: sagetile pasilor inguste, zonele pe un rand care se deruleaza lateral. */ @media (max-width: 767.98px) { .alege-pas > .btn { padding-inline: 0.6rem; } .pastile-zone { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: 0.25rem; } .pastile-zone .nav-link { white-space: nowrap; } } /* Simbolurile (app/Simboluri.php, D-100): iconita spune sectiunea, culoarea spune deseul sau etapa. Discret: iconita si textul in culoare, fundal alb. Etapele au culorile din TraseuDeseuri::ETAPE (DESIGN.md); deseurile, paleta lor. */ .simbol-colectare { --f: #166534; } .simbol-transfer { --f: #1e40af; } .simbol-sortare { --f: #c2410c; } .simbol-tratare { --f: #0f766e; } .simbol-valorificare { --f: #6d28d9; } .simbol-depozitare { --f: #44403c; } .simbol-menajere { --f: #1e3a8a; } .simbol-similare { --f: #155e75; } .simbol-biodeseuri { --f: #713f12; } .simbol-reciclabile { --f: #166534; } .simbol-reziduale { --f: #374151; } .simbol-sticla { --f: #047857; } [data-theme="dark"] [class*="simbol-"] { --f-text: color-mix(in srgb, var(--f) 50%, #ffffff); } .simbol { display: inline-flex; align-items: baseline; gap: 0.4rem; color: var(--f-text, var(--f)); font-weight: 600; } .simbol > .bi { font-size: 1.05em; } /* Iconita sectiunii: cerc neutru, acelasi in toate paginile (Introducerea datelor, Stadiul datelor, De lucru pentru mine). */ .simbol-sectiune { display: inline-grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--accent-color) 10%, var(--surface-color)); color: var(--heading-color); font-size: 1rem; } .simbol-sectiune.mic { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; } /* Capul unei grupe de coloane in culoarea deseului: textul si linia de dedesubt, fara fundal. */ .tabel-grila .grila-grupa[class*="simbol-"] { border-bottom-color: var(--f-text, var(--f)); } /* Valorile din calculul aprobat, in albastru (cerinta din 03.11.2026): ochiul le gaseste printre explicatii. */ .valoare-calcul { color: var(--accent-color); } /* Pe pastila activa (mediul ales), iconita urbanului sau ruralului ia culoarea textului, altfel nu se vede. */ .nav-pills .nav-link.active .eticheta-mediu .bi { color: inherit; } /* Input de cantitate direct in celula de tabel. */ .input-cantitate { background: transparent; min-width: 85px; font-size: 0.85rem; } .input-cantitate:focus { background: var(--input-bg); box-shadow: 0 0 0 0.15rem var(--input-focus-ring); } /* ── Indicator putere parola ── */ .pw-meter { height: 5px; border-radius: 4px; background: var(--border-color); overflow: hidden; } .pw-meter > span { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .25s ease, background .25s ease; } /* Animatie la salvare */ .salva-spin { animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================ 6. DataTables 2.x - stilul standard al integrarii Bootstrap 5. Aici raman doar corecturi de asezare in carduri; culorile controalelor se mapeaza numai in tema intunecata. ============================================================ */ /* Tabelele care au doar sortare (grile editabile, dashboard) nu au controale sus; integrarea Bootstrap 5 le rezerva oricum spatiul, si ramanea o banda alba de 32px intre antetul cardului si capul de tabel. */ .dt-container > .row:first-child, .dt-container > .row:first-child > [class^="col"] { margin-top: 0; } /* Scrollul orizontal e pe celula tabelului, nu pe tot containerul (clasa e pusa din footer.php). Altfel cautarea si paginatorul, randate in interiorul `.table-responsive`, fugeau lateral odata cu un tabel mai lat decat cardul. */ .dt-container .dt-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Tabel randat lipit de marginile cardului (card-body fara padding). Tabelul ramane pe toata latimea, dar controalele DataTables se aliniaza la padding-ul antetului de card - altfel "Afiseaza 10 inregistrari" si paginatorul stau lipite de bordura. */ .dt-container.dt-flush > .row { margin-inline: 0; /* `.mt-2` pus de integrarea Bootstrap 5 e utilitar, deci cu !important. */ margin-top: 0 !important; } .dt-container.dt-flush > .row > [class*="col"] { padding-inline: 0; /* Integrarea BS5 pune 24px deasupra celulei cu tabelul. */ margin-top: 0; } /* Randurile de controale: aliniate la padding-ul antetului de card, ca „Afiseaza” si paginatorul sa nu stea lipite de bordura. */ .dt-container.dt-flush > .row.justify-content-between { padding: 0.6rem var(--spacing-lg); } /* Prima si ultima coloana, aliniate cu „Afiseaza” si „Cauta” de deasupra (28.10.2026): altfel continutul sta lipit de marginile cardului. In antet, prima celula numai pe primul rand (pe al doilea, prima celula e o subcoloana din mijloc). Celulele nu primesc ps-/pe- in pagini (tests/test_datatables.php). */ .dt-container.dt-flush table.dataTable > thead > tr:first-child > :first-child, .dt-container.dt-flush table.dataTable > :is(tbody, tfoot) > tr > :first-child { padding-inline-start: var(--spacing-lg); } .dt-container.dt-flush table.dataTable > :is(thead, tbody, tfoot) > tr > :last-child { padding-inline-end: var(--spacing-lg); } .dt-container .pagination { margin-bottom: 0; } /* Paginatia in gri, nu in culoarea de accent: pagina curenta gri, hover gri mai deschis (UI-1, 29.10.2026). */ .page-link:hover { color: var(--default-color); background-color: var(--border-color-light); border-color: var(--border-color-dark); } .page-link:focus { color: var(--default-color); box-shadow: 0 0 0 0.2rem rgba(100, 116, 139, 0.25); } .page-item.active .page-link { color: var(--heading-color); background-color: var(--border-color); border-color: var(--border-color-dark); } [data-theme="dark"] .page-link:hover { color: var(--default-color); background-color: #273449; border-color: #475569; } /* Sageata acordeonului e o imagine inchisa la culoare (Bootstrap): pe tema inchisa nu se vedea. */ [data-theme="dark"] .accordion-button::after { filter: invert(1) grayscale(1) brightness(1.6); } [data-theme="dark"] .page-item.active .page-link { color: var(--heading-color); background-color: #334155; border-color: #475569; } /* Tema intunecata nu e tema Bootstrap: campurile DataTables ar ramane albe. */ [data-theme="dark"] .dt-container .dt-search input, [data-theme="dark"] .dt-container .dt-length select { border-color: var(--input-border); background-color: var(--input-bg); color: var(--default-color); } [data-theme="dark"] .dt-container .dt-search label, [data-theme="dark"] .dt-container .dt-length label, [data-theme="dark"] .dt-container .dt-info { color: var(--muted-color); } /* ============================================================ 7. Pagini de autentificare (login, parola uitata, setare parola) ============================================================ */ /* Varianta A din machete (29.10.2026): sigla sus, formularul aliniat la stanga in mijlocul coloanei, randul legal jos; in dreapta panoul bleumarin cu ce face aplicatia, fara numele vreunui ADI (login-ul e acelasi pentru toti). Clase proprii (login-*): cele .auth-* ale sablonului au stilurile lor (lacatul in cerc, titlul centrat). Sub 992px panoul dispare si ramane numai formularul. */ .login-pagina { margin: 0; min-height: 100vh; background: var(--surface-color); color: var(--default-color); } .login-split { display: grid; grid-template-columns: 1fr 44%; min-height: 100vh; } .login-stanga { display: flex; flex-direction: column; padding: 2.25rem 3.5rem; } .login-marca { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; color: var(--heading-color); text-decoration: none; } .login-marca i { color: var(--accent-color); font-size: 1.4rem; } .login-mijloc { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; } .login-formular { width: 100%; max-width: 380px; } .login-formular h1 { font-size: 1.75rem; font-weight: 650; letter-spacing: -0.02em; margin: 0 0 0.4rem; } .login-lead { color: var(--muted-color); font-size: 0.9375rem; margin: 0 0 2rem; } .login-formular .form-label { font-size: 0.875rem; font-weight: 500; color: var(--heading-color); margin-bottom: 0.4rem; } /* Eticheta si linkul de langa ea („Ați uitat parola?”) pe acelasi rand. */ .login-rand-eticheta { display: flex; justify-content: space-between; align-items: baseline; } .login-rand-eticheta a { font-size: 0.8125rem; text-decoration: none; } .login-rand-eticheta a:hover { text-decoration: underline; } .login-formular .form-control { height: 44px; border-radius: 8px; font-size: 0.9375rem; } .login-formular .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 18%, transparent); } /* Ochiul sta in campul parolei, nu intr-un buton lipit de el. */ .login-parola { position: relative; } .login-parola .form-control { padding-right: 2.75rem; } .login-parola .form-control.is-invalid { background-image: none; padding-right: 2.75rem; } /* bordura rosie, fara iconita peste ochi */ .login-ochi { position: absolute; top: 4px; right: 4px; width: 36px; height: 36px; border: 0; border-radius: 6px; background: none; color: var(--muted-color); } .login-ochi:hover { color: var(--heading-color); background: color-mix(in srgb, var(--muted-color) 10%, transparent); } .login-formular .btn-primary { height: 44px; border-radius: 8px; font-weight: 600; } .login-nota { font-size: 0.8125rem; color: var(--muted-color); margin: 1.25rem 0 0; } .login-nota .btn-link { font-size: inherit; } /* Codul de 6 cifre primit pe email (parola uitata): cifrele tabulare, rare, ca in email. */ .login-cod { font-family: 'IBM Plex Mono', monospace; font-size: 1.25rem; letter-spacing: 0.4em; } .login-legal { font-size: 0.75rem; color: var(--muted-color); margin: 0; } /* Panoul din dreapta e numai o schita a tabloului de bord (decorativa, aria-hidden): meniul lateral, bara de sus, cele patru dale si tabelul zonelor, fara cifre si fara numele vreunui ADI. Culorile sunt fixe, ale temei deschise: schita arata aplicatia, nu tema curenta. Bleumarinul panoului e fix, nu --sidebar-bg: pe tema inchisa acela e culoarea formularului. */ .login-panou { background: #051831; display: flex; align-items: center; justify-content: center; padding: 3rem; overflow: hidden; } .schita { width: 100%; max-width: 34rem; display: grid; grid-template-columns: 3.25rem 1fr; border-radius: 12px; overflow: hidden; background: #f0f4f9; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35); font-size: 0.625rem; color: #1e293b; } .schita-meniu { background: #0b2545; padding: 0.85rem 0.6rem; display: flex; flex-direction: column; gap: 0.6rem; } .schita-meniu i { color: #60a5fa; font-size: 1rem; text-align: center; margin-bottom: 0.4rem; } .schita-meniu span { height: 0.4rem; border-radius: 3px; background: rgba(255, 255, 255, 0.18); } .schita-meniu span.activ { background: #60a5fa; } .schita-bara { height: 2rem; background: #fff; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; padding: 0 0.75rem; } .schita-cip { width: 7rem; height: 0.85rem; border-radius: 999px; background: #e8eef6; } .schita-avatar { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: #1a66c4; } .schita-continut { padding: 0.85rem; display: grid; gap: 0.7rem; } .schita-titlu { font-size: 0.875rem; font-weight: 700; color: #0f172a; } .schita-dale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } .schita-dala { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.5rem 0.55rem; display: grid; gap: 0.35rem; } .schita-dala small { font-size: 0.5625rem; color: #526072; } .schita-cifra { height: 0.7rem; width: 70%; border-radius: 3px; background: #334155; } .schita-progres { height: 0.2rem; border-radius: 2px; background: #1a66c4; } .schita-tabel { background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; } .schita-rand { display: grid; grid-template-columns: 1.4fr 0.8fr 0.9fr 1fr 0.9fr 0.9fr; gap: 0.5rem; align-items: center; padding: 0.45rem 0.6rem; border-top: 1px solid #edf1f6; } .schita-rand.cap { border-top: 0; font-weight: 600; color: #334155; } .schita-linie { height: 0.4rem; border-radius: 3px; background: #cbd5e1; } .schita-linie.tare { background: #64748b; } .schita-stare { display: flex; align-items: center; gap: 0.25rem; color: #526072; } .schita-stare::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #93c5fd; } .schita-buton { justify-self: end; border: 1px solid #94a3b8; border-radius: 4px; padding: 0.1rem 0.4rem; color: #334155; } @media (max-width: 991.98px) { .login-split { grid-template-columns: 1fr; } .login-panou { display: none; } .login-stanga { padding: 1.5rem; } } /* ============================================================ 8. Mod intunecat - corectii pentru clase folosite in pagini ============================================================ */ /* Alerta rosie (parola gresita, link expirat): #f87171 al sablonului pe fundalul ei da 4,3:1. */ [data-theme="dark"] .alert-danger { color: #fca5a5; } /* Fundalurile secundare Bootstrap (.bg-body-tertiary, .bg-light) raman pe valorile de tema deschisa: celulele calculate "Total anual" din tab-ul UAT-uri ieseau gri deschis cu text alb, ilizibile. */ [data-theme="dark"] { --bs-tertiary-bg: #273449; --bs-tertiary-bg-rgb: 39, 52, 73; --bs-secondary-bg: #334155; --bs-secondary-bg-rgb: 51, 65, 85; } [data-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; } /* Pe tema inchisa accentul (#60a5fa), verdele si rosul sablonului sunt deschise: textul alb de pe ele avea 1,7-2,8:1 (butoanele principale, Export Excel / PDF, avatarul, butonul activ din Urban/Rural si fluxuri). Pe fundal deschis se scrie inchis. */ [data-theme="dark"] { --contrast-color: #0f172a; } [data-theme="dark"] .btn-primary, [data-theme="dark"] .btn-success, [data-theme="dark"] .btn-danger, [data-theme="dark"] .nav-pills .nav-link.active, [data-theme="dark"] .avatar-initiale:not(.sidebar-footer-avatar) { color: #0f172a; } [data-theme="dark"] .sidebar .nav-item > .nav-link.active { color: #93c5fd; } [data-theme="dark"] .sidebar-footer-role { color: #b6c2d1; } [data-theme="dark"] .bg-white { background-color: var(--surface-color) !important; } [data-theme="dark"] .text-dark { color: var(--default-color) !important; } [data-theme="dark"] .border { border-color: var(--border-color) !important; } [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: var(--border-color) !important; } [data-theme="dark"] .badge.bg-warning, [data-theme="dark"] .badge.bg-warning.text-dark { color: #1e293b !important; } /* ============================================================ 9. Tiparire - raportul ajunge in dosarul de sedinta al CA ============================================================ */ @media print { .header, .sidebar, .sidebar-overlay, .footer, .back-to-top, .impersonare-bar, .page-breadcrumb, .mobile-header-menu, .d-print-none { display: none !important; } .main { margin: 0 !important; } .main-content { padding: 0 !important; } .main-content > .container-fluid { max-width: none; } .card { border: 1px solid #dee2e6 !important; box-shadow: none !important; } body { font-size: 10pt; background: #ffffff; } /* Raportul e pe tab-uri: la tiparire apar toate (in afara de Comunicare, d-print-none). */ .tab-content > .tab-pane:not(.d-print-none) { display: block !important; opacity: 1 !important; margin-bottom: 1rem; } } /* ============================================================ 10. Ecrane mici ============================================================ */ @media (max-width: 768px) { .input-cantitate { min-width: 65px; } } /* ============================================================ 11. Traseul deseurilor (informatii-uat.php, tab-ul „Drumul deseurilor”) Opririle sunt tab-uri (app.js, [data-traseu]); --etapa = culoarea etapei din paleta semantica a fluxului (DESIGN.md). Fara JS (.traseu fara .traseu-js), sectiunile raman toate vizibile, masina si butonul de redare sunt ascunse. ============================================================ */ .traseu-rezumat { padding: 1.25rem 1.5rem; } .traseu-rezumat-text { font-size: 1.1rem; line-height: 1.6; max-width: 62rem; } .traseu { position: relative; } .traseu-drum { position: relative; display: flex; justify-content: space-between; padding-top: 44px; } /* Drumul: de la centrul primei opriri la centrul ultimei, cu marcajul punctat la mijloc. */ .traseu-drum::before, .traseu-drum::after { content: ""; position: absolute; left: calc(100% / (var(--n) * 2)); right: calc(100% / (var(--n) * 2)); } .traseu-drum::before { top: 66px; height: 12px; border-radius: 6px; background: var(--border-color); } .traseu-drum::after { top: 71px; height: 2px; background: repeating-linear-gradient(90deg, var(--surface-color) 0 12px, transparent 12px 24px); } .traseu-progres { display: none; position: absolute; top: 66px; left: 0; width: 0; height: 12px; z-index: 1; border-radius: 6px; background: var(--accent-color); transition: width .9s cubic-bezier(.45, .05, .25, 1); } .traseu-oprire { flex: 1 1 0; min-width: 0; display: flex; justify-content: center; position: relative; z-index: 2; } .traseu-buton { display: flex; flex-direction: column; align-items: center; gap: .35rem; max-width: 100%; padding: 0; border: 0; background: none; color: var(--default-color); text-align: center; } .traseu-cerc { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: var(--surface-color); border: 2px solid var(--etapa); color: var(--etapa); transition: background-color .2s, color .2s, transform .2s, box-shadow .2s; } .traseu-buton:hover .traseu-cerc { transform: translateY(-2px); } .traseu-buton[aria-selected="true"] .traseu-cerc { background: var(--etapa); color: #ffffff; transform: scale(1.08); box-shadow: 0 0 0 5px color-mix(in srgb, var(--etapa) 18%, transparent); } .traseu-buton:focus-visible { outline: none; } .traseu-buton:focus-visible .traseu-cerc { outline: 3px solid var(--accent-color); outline-offset: 3px; } .traseu-eticheta { font-weight: 600; font-size: .875rem; line-height: 1.2; } .traseu-cifra { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-feature-settings: "tnum" 1; font-size: .75rem; color: var(--muted-color); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .traseu-buton[aria-selected="true"] .traseu-eticheta { color: var(--etapa); } /* Masina: deasupra drumului, se muta la oprirea aleasa (--x, din app.js). */ .traseu-masina { display: none; position: absolute; top: 2px; left: 0; z-index: 3; width: 44px; height: 30px; border-radius: 8px; place-items: center; font-size: 1.15rem; background: var(--accent-color); color: #ffffff; box-shadow: 0 4px 10px rgba(15, 23, 42, .18); transform: translateX(var(--x, 0)); transition: transform .9s cubic-bezier(.45, .05, .25, 1); } .traseu-masina::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--accent-color); } .traseu-js .traseu-masina { display: grid; } .traseu-js .traseu-progres { display: block; } .traseu-panou { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); } .traseu-js .traseu-panou[hidden] { display: none; } .traseu-pas { margin-bottom: .25rem; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-color); } .traseu-titlu { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; } .traseu-titlu .bi { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--etapa); color: #ffffff; font-size: 1rem; } .traseu-stat { height: 100%; padding: .8rem .95rem; border: 1px solid var(--border-color); border-radius: 10px; background: var(--surface-color); } .traseu-stat-et { font-size: .75rem; color: var(--muted-color); } .traseu-stat-val { font-size: 1.35rem; font-weight: 600; line-height: 1.3; color: var(--accent-color); } /* valorile in albastru (03.11.2026) */ .traseu-stat-um { font-size: .75rem; color: var(--muted-color); } .traseu-parte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .75rem; margin-bottom: .7rem; } .traseu-pista { grid-column: 1 / -1; height: 8px; border-radius: 4px; overflow: hidden; background: color-mix(in srgb, var(--etapa) 10%, var(--surface-color)); } .traseu-umplere { display: block; height: 100%; border-radius: 4px; background: var(--etapa); } /* Destinatia finala si costul pe etape (cerinta din 03.11.2026): cate o piesa pe destinatie sau etapa, cu iconita ei in mijlocul unui inel care arata procentul (--p, 0-100) in culoarea ei (--c); valoarea in albastru. */ .grafic-piese { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); gap: .85rem; } .grafic-piesa { margin: 0; padding: 1rem .75rem .9rem; text-align: center; border: 1px solid var(--border-color); border-radius: 12px; background: color-mix(in srgb, var(--c) 5%, var(--surface-color)); } .grafic-inel { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto .65rem; border-radius: 50%; background: conic-gradient(var(--c) calc(max(var(--p), 1) * 1%), color-mix(in srgb, var(--c) 15%, var(--surface-color)) 0); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .grafic-inel::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--surface-color); } .grafic-inel .bi { position: relative; font-size: 1.9rem; line-height: 1; color: var(--c-text, var(--c)); } .grafic-piesa figcaption > span { display: block; font-feature-settings: "tnum" 1; } .grafic-valoare { font-size: 1.3rem; font-weight: 700; line-height: 1.25; } .grafic-eticheta { margin-top: .15rem; font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--heading-color); } .grafic-detaliu { margin-top: .15rem; font-size: .75rem; color: var(--muted-color); } /* Sub fiecare piesa (D-101): cine face etapa sau unde ajung deseurile; numele, apoi rolul, mic si gri. */ .grafic-cine { margin: .6rem 0 0; padding-top: .5rem; border-top: 1px solid var(--border-color); font-size: .75rem; line-height: 1.35; text-align: left; } .grafic-cine li + li { margin-top: .35rem; } .grafic-cine li > span:first-child { display: block; font-weight: 600; color: var(--heading-color); } .grafic-rol { display: block; color: var(--muted-color); } .lista-parteneri li + li { margin-top: .45rem; } /* Tema inchisa: culorile etapelor sunt inchise; pe fundal inchis se deschid pentru contur si text. */ [data-theme="dark"] .traseu-oprire, [data-theme="dark"] .traseu-panou { --etapa-text: color-mix(in srgb, var(--etapa) 55%, #ffffff); } [data-theme="dark"] .grafic-piesa { --c-text: color-mix(in srgb, var(--c) 55%, #ffffff); } [data-theme="dark"] .traseu-cerc { border-color: var(--etapa-text); color: var(--etapa-text); } [data-theme="dark"] .traseu-buton[aria-selected="true"] .traseu-eticheta { color: var(--etapa-text); } [data-theme="dark"] .traseu-buton[aria-selected="true"] .traseu-cerc { color: #ffffff; border-color: var(--etapa); } @media (prefers-reduced-motion: reduce) { .traseu-masina, .traseu-progres, .traseu-cerc { transition: none; } } /* Ecrane mici: opririle una sub alta, drumul vertical in stanga; fara masina. */ @media (max-width: 767.98px) { .traseu-drum { flex-direction: column; gap: .75rem; padding-top: 0; } .traseu-drum::before { left: 22px; right: auto; top: 28px; bottom: 28px; width: 12px; height: auto; } .traseu-drum::after { display: none; } .traseu-oprire { justify-content: flex-start; } .traseu-buton { flex-direction: row; text-align: left; gap: .75rem; } .traseu-buton .traseu-cifra { margin-left: auto; } .traseu-js .traseu-masina, .traseu-js .traseu-progres { display: none; } } @media print { .traseu-masina, .traseu-progres { display: none !important; } .traseu-js .traseu-panou[hidden] { display: block !important; } .collapse.d-print-block { display: block !important; } } /* ============================================================ 12. Informatiile unei sectiuni (Info::buton(), D-68): „?” dupa titlu, card la click ============================================================ */ .btn-info-sectiune { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; margin-left: 0.25rem; vertical-align: middle; border: 0; border-radius: 50%; background: transparent; color: var(--muted-color); font-size: 1rem; line-height: 1; cursor: pointer; } .btn-info-sectiune:hover, .btn-info-sectiune[aria-describedby] { color: var(--accent-color); } .btn-info-sectiune:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; } .popover-info { --bs-popover-max-width: 26rem; --bs-popover-font-size: 0.8125rem; } .popover-info .popover-header { font-weight: 600; } .popover-info .popover-body { max-height: 60vh; overflow-y: auto; } .popover-info .popover-body p { margin-bottom: 0.5rem; } .popover-info .popover-body p:last-child { margin-bottom: 0; } /* ============================================================ 13. Navigarea de la tastatura si butonul „Inapoi sus” (auditul de design, F-018, F-019) ============================================================ */ /* „Sari la continut” (header.php): ascunsa pana primeste focus cu Tab, apoi deasupra barei de sus. */ .sari-continut:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 2000; padding: 0.5rem 1rem; border-radius: var(--radius-md); background: var(--accent-color); color: #ffffff; font-weight: 600; text-decoration: none; } #continut:focus { outline: none; } /* Sablonul il punea la 32px de margine, cat padding-ul continutului: cu 40px latime acoperea cifrele din ultima coloana a tabelelor. La 8px ramane in marginea alba a cardului. */ .back-to-top { right: 8px; bottom: 16px; } /* ============================================================ 14. Harta UAT-urilor (tabloul de bord, templates/harta_uat.php, assets/js/harta.js) Culorile zonelor urmeaza harta oficiala a zonarii (albastru, turcoaz, roz, rosu, verde, mov, galben), mai stinse, ca sa se citeasca drumul si semnele peste ele. ============================================================ */ .harta-zona-1 { --zona: #5b7fd6; } .harta-zona-2 { --zona: #2fb4c8; } .harta-zona-3 { --zona: #c98f8f; } .harta-zona-4 { --zona: #df5656; } .harta-zona-5 { --zona: #4caf50; } .harta-zona-6 { --zona: #c46ad6; } .harta-zona-7 { --zona: #d4ad3b; } .harta-svg { display: block; width: 100%; height: auto; max-height: 78vh; } .harta-forma { fill: var(--zona, var(--border-color)); fill-opacity: 0.55; stroke: var(--surface-color); stroke-width: 1.2; stroke-linejoin: round; transition: fill-opacity 0.15s; } .harta-forma[tabindex] { cursor: pointer; } .harta-forma[tabindex]:hover, .harta-forma[tabindex]:focus-visible { fill-opacity: 0.8; outline: none; } .harta-forma.harta-inactiv { fill: var(--border-color); fill-opacity: 0.6; } .harta-forma.harta-ales { fill-opacity: 0.95; stroke: var(--heading-color); stroke-width: 2.5; } .harta-forma[tabindex]:focus-visible { stroke: var(--accent-color); stroke-width: 3; } .harta-drum { fill: none; stroke: var(--heading-color); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .harta-drum-estimat { stroke-dasharray: 8 7; } .harta-start { fill: var(--surface-color); stroke: var(--heading-color); stroke-width: 3; } .harta-masina { fill: var(--accent-color); stroke: #ffffff; stroke-width: 3; } /* Instalatiile (01.11.2026): cate un semn pe tip, cu litera lui; familiile de culoare din HartaUat::SEMNE. */ .harta-instalatie { cursor: pointer; } .harta-semn > :not(text) { stroke: #ffffff; stroke-width: 2; } .harta-semn text { font-size: 15px; font-weight: 700; fill: #ffffff; stroke: none; pointer-events: none; } .harta-semn-depozit polygon { fill: #1f2937; } [data-theme="dark"] .harta-semn-depozit polygon { fill: #e5e7eb; stroke: #111827; } [data-theme="dark"] .harta-semn-depozit text { fill: #111827; } .harta-semn-transfer circle { fill: var(--accent-color); } .harta-semn-tratare rect { fill: #0f766e; } .harta-semn-compost rect { fill: #4d7c0f; } .harta-semn-energie rect { fill: #b45309; } .harta-instalatie:hover .harta-semn > :not(text), .harta-instalatie:focus-visible .harta-semn > :not(text), .harta-instalatie.harta-pe-drum .harta-semn > :not(text) { stroke: var(--heading-color); stroke-width: 3; } .harta-instalatie:focus-visible { outline: none; } .harta-eticheta-text { font-size: 22px; font-weight: 600; fill: var(--heading-color); paint-order: stroke; stroke: var(--surface-color); stroke-width: 5px; stroke-linejoin: round; } .harta-legenda { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; } .harta-legenda > span { display: inline-flex; align-items: center; gap: 0.35rem; } .harta-culoare { width: 0.85rem; height: 0.85rem; border-radius: 3px; background: var(--zona); opacity: 0.8; } .harta-semn-legenda { width: 1.15rem; height: 1.15rem; } .harta-panou { color: var(--default-color); } .harta-panou h3, .harta-panou .fw-medium { color: var(--heading-color); } .harta-date { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; } .harta-date dt { font-weight: 500; color: var(--muted-color); } .harta-date dd { margin: 0; font-weight: 600; } .harta-etape { padding-left: 1.1rem; } .harta-etape li { margin-bottom: 0.6rem; } @media (prefers-reduced-motion: reduce) { .harta-forma { transition: none; } } /* Încărcarea (incarcare.js, 03.11.2026): bara subțire de sus, între pagini; avansează singură până la 90% și se umple la plecarea paginii. Butonul apăsat: spinnerul în locul iconiței, fără al doilea clic. */ .bara-incarcare { position: fixed; top: 0; left: 0; z-index: 2100; height: 3px; width: 0; background: var(--accent-color); box-shadow: 0 0 6px color-mix(in srgb, var(--accent-color) 60%, transparent); opacity: 0; pointer-events: none; } .bara-incarcare.activa { opacity: 1; animation: bara-avans 12s cubic-bezier(0.08, 0.7, 0.2, 1) forwards; } .bara-incarcare.gata { width: 100%; opacity: 0; animation: none; transition: width 0.2s ease-out, opacity 0.3s ease 0.2s; } @keyframes bara-avans { from { width: 0; } 15% { width: 45%; } to { width: 90%; } } @media (prefers-reduced-motion: reduce) { .bara-incarcare.activa { animation: none; width: 90%; } .bara-incarcare.gata { transition: none; } } .se-incarca { pointer-events: none; opacity: 0.8; } .ascuns-incarcare { display: none !important; } /* modern-admin.css colorează .spinner-border cu accentul (invizibil pe un buton albastru): aici, culoarea textului butonului. */ .se-incarca .spinner-incarcare { color: inherit; width: 1em; height: 1em; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; } /* Notificarile de sistem (app.js, notifica(); 01.11.2026): peste pagina si peste ferestre, fara bordura pe o latura (D-29). */ .notificari { z-index: 1090; margin-top: 56px; } /* sub bara de sus: meniul contului ramane la indemana */ .notificari-auth { margin-top: 0; } /* paginile de conectare nu au bara de sus */ .notificare { max-width: 420px; cursor: pointer; } .notificare .toast-body { white-space: pre-line; } .notificare-danger .toast-header { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); } .notificare-warning .toast-header { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); } .notificare-success .toast-header { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); } .notificare-info .toast-header { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); } /* D-97: mesajul de rezultat al serverului apare numai ca notificare (notificari.js il muta si il scoate din pagina); ascuns de la incarcare, ca sa nu clipeasca in pagina. Fara JavaScript,