/* ============================================================================= THEME BRIDGE — mapează componentele Bootstrap 5 pe design tokens (navy) Se încarcă DUPĂ Bootstrap + design-tokens.css, ÎNAINTE de main.css. Scop: brand navy #134a6d aplicat pe componentele native (butoane, focus, tab-uri), fără a rescrie markup-ul existent. ============================================================================= */ /* ---- Buton primar → navy brand (regula de aur #1) ---- */ .btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; font-weight: 600; border-radius: var(--r-btn); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; filter: brightness(1.12); box-shadow: none; } .btn-outline-primary { color: var(--c-primary); border-color: var(--c-primary); border-radius: var(--r-btn); } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } /* Radius consistent pe butoanele mici Bootstrap */ .btn { border-radius: var(--r-btn); } /* ---- Focus navy pe form controls (Bootstrap default e albastru) ---- */ .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--c-primary); box-shadow: var(--focus-ring); } .form-check-input:checked { background-color: var(--c-primary); border-color: var(--c-primary); } /* ---- Link-uri brand (doar cele explicit .text-primary / link-primary) ---- */ .text-primary { color: var(--c-primary) !important; } .link-primary { color: var(--c-primary) !important; } .link-primary:hover { color: var(--c-primary-hover) !important; } /* ---- Select2 (single) aliniat la form-control-sm + brand navy (global) ---- */ .select2-container--default .select2-selection--single { height: calc(1.5em + .5rem + 2px); border: 1px solid var(--c-border-2); border-radius: var(--r-btn); } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: calc(1.5em + .5rem); color: var(--c-body); padding-left: .6rem; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: calc(1.5em + .5rem); } .select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--c-primary); box-shadow: var(--focus-ring); } .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--c-primary); } .select2-dropdown { border-color: var(--c-border-2); } /* ---- Header modal standard navy (§7.7) — deja folosit ca .modal-general-header ---- */ .modal-general-header { background: var(--c-primary) !important; color: #fff !important; padding: 15px 24px; } .modal-general-header .modal-title { font-weight: 700; } .modal-general-header .btn-close { filter: invert(1) grayscale(1) brightness(1.8); opacity: .9; } /* ---- Variant modal foarte lat (workspace cu tab-uri) ---- */ .ui-modal .modal-dialog.ui-modal--xl { max-width: 92vw; } /* ---- Variant modal full workspace (95% viewport, inaltime mare) ---- */ .ui-modal .modal-dialog.ui-modal--full { max-width: 95vw; height: 92vh; margin-top: 4vh; margin-bottom: 4vh; } /* header + body + footer pe coloana flex: cu inaltime fixa (calc(100% - 62px)) corpul nu lasa loc footer-ului si acesta iesea in afara modalului. */ .ui-modal .modal-dialog.ui-modal--full .modal-content { height: 100%; display: flex; flex-direction: column; } .ui-modal .modal-dialog.ui-modal--full .modal-header, .ui-modal .modal-dialog.ui-modal--full .modal-footer { flex: 0 0 auto; } /* Corpul e SINGURUL container cu scroll din modal: - `height:0` + `flex-grow` → ia exact spatiul ramas intre header si footer. Cu baza `auto` corpul creste dupa continut, depaseste .modal-content (care are overflow:hidden) si e taiat: bara de scroll apare, dar nu mai are unde derula. - `max-height:none` anuleaza plafonul de 80vh din design-tokens (modalul full are 92vh). */ .ui-modal .modal-dialog.ui-modal--full .modal-body { flex: 1 1 auto; height: 0; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; background: var(--c-surface-alt); } /* „Creată de / data / ora" stă în subsolul modalului (`.modal-footer` din templates/request/modal_details_request.html.twig), cu `.profile-e__added` — acelasi tipar ca subsolul modalului punctului de lucru. Vechea bandă de subsol, scoasă în 17 aug 2026, avea 0.12rem padding și text de 0.7rem pe albastru, deci era practic invizibilă; nu o reintroduce în forma aceea. */ /* Bara de rezumat intervenție (info-panel enterprise) */ .req-summary { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: .85rem 1.1rem; margin-bottom: 1rem; } .req-summary__meta { display: flex; flex-wrap: wrap; gap: .35rem 1.6rem; align-items: center; } .req-summary__item { display: inline-flex; align-items: center; gap: .45rem; color: var(--c-body); font-size: .9rem; } .req-summary__item i { color: var(--c-primary); width: 1.1em; text-align: center; } .req-summary__item strong { color: var(--c-heading); font-weight: 600; } .req-summary__addr { margin-top: .5rem; color: var(--c-muted); font-size: .85rem; display: inline-flex; align-items: center; gap: .45rem; } .req-summary__addr i { color: var(--c-primary); } .req-summary__schedule { color: var(--c-body); font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; } .req-summary__schedule i { color: var(--c-primary); } /* Tab-uri workspace (peste .nav-tabs standard) — rezista override-ului vechi din main.css */ .ui-modal--full .nav-tabs { border-bottom: 1px solid var(--c-divider); gap: .1rem; } .ui-modal--full .nav-tabs .nav-link { background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; color: var(--c-muted) !important; font-weight: 600; font-size: .85rem; padding: .6rem 1rem !important; } .ui-modal--full .nav-tabs .nav-link:hover { color: var(--c-primary) !important; background: var(--c-surface-alt) !important; } .ui-modal--full .nav-tabs .nav-link.active { color: var(--c-primary) !important; background: transparent !important; border-bottom: 2px solid var(--c-primary) !important; } .ui-modal--full .nav-tabs .nav-link.active:after { display: none !important; } /* elimina triunghiul vechi */ /* Conținutul tab-ului stă într-un panou propriu (chenar), ca să se vadă clar unde începe și unde se termină informația tab-ului curent, separat de bara de tab-uri și de fundalul modalului. */ .ui-modal--full .tab-content { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 1.1rem 1.15rem .35rem; margin-top: .85rem; /* panoul creste cat e continutul; scroll-ul il face corpul modalului */ height: auto; } .ui-modal--full .tab-content > .tab-pane { height: auto !important; } /* `.auto-scroll-y` (main.css) impune height:calc(100% - 1px)!important + scroll intern, legat de inaltimea fixa de dinainte. Cu panoul crescut dupa continut, scroll-ul intern ar taia continutul in interiorul chenarului — il dezactivam aici. */ .ui-modal--full .tab-content .auto-scroll-y { padding: 0 .25rem; height: auto !important; overflow-y: visible; } /* În interiorul panoului alb, secțiunile nu mai au nevoie de umbră proprie */ .ui-modal--full .tab-content .sec { box-shadow: none; } /* Carduri de secțiune elevate + aerisite în workspace */ .ui-modal--full .sec { box-shadow: var(--sh-card); border-color: var(--c-border); } .ui-modal--full .sec { margin-bottom: 1rem; } .ui-modal--full .sec__head { background: var(--c-surface-alt); border-bottom: 1px solid var(--c-divider); } .ui-modal--full .sec__body { padding: 1rem 1.1rem; } /* Sub-titluri (Echipe/Lucratori) mai clare */ .ui-modal--full .sec__body > .field__label { color: var(--c-heading); font-weight: 700; letter-spacing: .01em; margin-bottom: .35rem; } /* ============================================================================= TABELE ENTERPRISE — global, pentru toate tabelele din .card-e / DataTables ============================================================================= */ .card-e table.table { margin-bottom: 0; color: var(--c-body); border-color: var(--c-row-line); --bs-table-bg: transparent; } /* `:not(.tbl-e)` — tabelele care declară explicit componenta `.tbl-e` din design system își aduc singure stilul de celulă (antet tentat, alte padding-uri). Regula de aici e mai specifică decât `.tbl-e thead th` și, fiind încărcată după design-tokens.css, i-ar suprascrie fundalul; excluderea o lasă doar pe tabelele vechi. */ .card-e table.table:not(.tbl-e) thead th { text-transform: uppercase; letter-spacing: .03em; font-size: .72rem; font-weight: 600; color: var(--c-muted); background: transparent; border-bottom: 2px solid var(--c-divider); border-top: none; padding: .55rem .6rem; vertical-align: middle; white-space: nowrap; } .card-e table.table:not(.tbl-e) tbody td { border-top: none; border-bottom: 1px solid var(--c-row-line); color: var(--c-body); vertical-align: middle; padding: .5rem .6rem; font-size: .84rem; } .card-e table.table tbody tr:last-child td { border-bottom: none; } /* hover subtil (nativ + clasa .highlight adaugata de JS) */ .card-e table.table tbody tr:hover td, .card-e table.table tbody tr.highlight td { background-color: var(--c-surface-alt) !important; } /* coduri / numere aliniate */ .card-e table.table td.text-end, .card-e table.table th.text-end { text-align: right; } /* ---- Iconuri de acțiune în rânduri de tabel: aspect curat, enterprise ---- Transformă butoanele mici moștenite (btn-outline-*) în icon-acțiuni discrete. */ .card-e table td .btn.btn-sm:not(.toggle):not(.dropdown-toggle), .card-e table td .btn.btn-xs:not(.toggle):not(.dropdown-toggle), .card-e table td .btn.btn-md:not(.toggle):not(.dropdown-toggle) { border: none !important; background: transparent !important; box-shadow: none !important; padding: .18rem .4rem; color: var(--c-muted); line-height: 1; } .card-e table td .btn.btn-outline-info:not(.toggle):hover, .card-e table td .btn.btn-outline-primary:not(.toggle):hover, .card-e table td .btn.btn-outline-secondary:not(.toggle):hover, .card-e table td .btn.btn-outline-success:not(.toggle):hover, .card-e table td .btn.btn-info:not(.toggle):hover { color: var(--c-primary) !important; background: transparent !important; } .card-e table td .btn.btn-outline-danger:not(.toggle):hover, .card-e table td .btn.btn-danger:not(.toggle):hover { color: var(--c-err-fg) !important; background: transparent !important; } .card-e table td .act { font-size: .9rem; } /* ============================================================================= CONTROALELE DataTables (paginare / „afișează N" / info / processing) — GLOBAL Se aplică tuturor listelor din aplicație, indiferent de modul. ⚠️ Markup-ul real, produs de `renderer: "bootstrap"` din datatables-slim.js: