/*
 * oneui-compat.css
 *
 * Bootstrap 3 -> Bootstrap 5 / OneUI bridge, loaded ONLY on OneUI-shell pages
 * (after oneui.min.css + custom.css). Lets the ~700 legacy Bootstrap-3 view
 * templates render acceptably inside the new BS5 shell without rewriting them.
 *
 * Load order matters: this file is loaded LAST so it wins on the classes it
 * bridges. Selectors that must beat a BS5 rule use element+class specificity or
 * !important so they are order-independent.
 *
 * NOTE: the BS3 `.col-xs-*` infix is intentionally NOT bridged here (it cannot
 * cleanly lose to BS5's `.col-md-*` by source order). Migrated views rename
 * `col-xs-*` -> `col-*` instead (identical semantics in BS5).
 */

/* ============================================================
   Typography — Instrument Sans (from the redesign mockup), self-hosted in
   instrument-sans.css. Prepended to OneUI's stack so Cyrillic (not in the font)
   falls back to Inter/system. Overrides OneUI's :root var by source order.
   ============================================================ */
:root {
    --bs-body-font-family: "Instrument Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
}
body { font-family: var(--bs-body-font-family); }

/* ============================================================
   Panels -> card look (BS5 removed .panel)
   ============================================================ */
.panel {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    margin-bottom: 1.5rem;
}
.panel-heading {
    padding: .75rem 1.25rem;
    font-weight: 600;
    border-bottom: 1px solid #e3e8ef;
    border-radius: .5rem .5rem 0 0;
    background: #f9fafc;
}
.panel-title { margin: 0; font-size: 1rem; }
.panel-body { padding: 1.25rem; }
.panel-footer {
    padding: .75rem 1.25rem;
    border-top: 1px solid #e3e8ef;
    background: #f9fafc;
    border-radius: 0 0 .5rem .5rem;
}
.panel-primary { border-color: #0d6efd; }
.panel-primary > .panel-heading { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.panel-success { border-color: #198754; }
.panel-success > .panel-heading { background: #d1e7dd; color: #0f5132; border-color: #badbcc; }
.panel-info { border-color: #0dcaf0; }
.panel-info > .panel-heading { background: #cff4fc; color: #055160; border-color: #b6effb; }
.panel-warning { border-color: #ffc107; }
.panel-warning > .panel-heading { background: #fff3cd; color: #664d03; border-color: #ffecb5; }
.panel-danger { border-color: #dc3545; }
.panel-danger > .panel-heading { background: #f8d7da; color: #842029; border-color: #f5c2c7; }

/* Bootstrap 3 .well */
.well {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: .375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

/* ============================================================
   Forms
   ============================================================ */
/* `.hidden-field` lives in default/css/style.css (NOT loaded on OneUI), so the
   dossier add-forms (#hidden-form, toggled by the "+" .show-form) were all shown.
   Restore the hide-by-default so the "+" reveals them, like the default template. */
.hidden-field { display: none; }
/* muted "no data" row injected into empty dossier tables (grid-scroll.js) */
.dossier-redesign .dz-empty { text-align: center; color: #8492a6; padding: 14px 8px; font-style: normal; }
html.dark .dossier-redesign .dz-empty { color: #7c8aa0; }

/* BS5 dropped .form-group's bottom margin */
.form-group { margin-bottom: 1rem; }
fieldset.form-group { border: 0; padding: 0; margin: 0 0 1rem; }
.control-label { font-weight: 600; margin-bottom: .25rem; display: inline-block; }
.help-block { display: block; margin-top: .25rem; font-size: .875em; color: #6c757d; }

/* Give native selects the BS5 form-select look, but leave select2-enhanced
   selects alone (they are visually replaced by the select2 widget). */
select.form-control:not([multiple]):not([size]):not(.select2-hidden-accessible) {
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* ============================================================
   Select2 — match the BS5 .form-control size so filter panels line up.
   Stock select2 (select.css) makes single-selects 28px and multiselects
   32px tall (native inputs are ~38px) — the "inputs don't match" problem —
   and its multiselect chips came out white-on-grey / unreadable. Loaded last,
   so these win by source order; !important on the essentials to be safe.
   ============================================================ */
.select2-container { width: 100% !important; vertical-align: middle; }
.select2-container--default .select2-selection--single {
    height: 38px !important;
    border: 1px solid var(--bs-border-color, #dfe3ea) !important;
    border-radius: .375rem !important;
    background-color: var(--bs-body-bg, #fff);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: .75rem; padding-right: 1.85rem;
    color: var(--bs-body-color, #212529);
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; right: .4rem; }
.select2-container--default .select2-selection--multiple {
    min-height: 38px !important;
    border: 1px solid var(--bs-border-color, #dfe3ea) !important;
    border-radius: .375rem !important;
    background-color: var(--bs-body-bg, #fff);
    padding: 1px 4px 4px;
}
/* readable chips (was white-on-grey): light chip + dark text + subtle border */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e9eef5 !important;
    color: #26334a !important;
    border: 1px solid #cfd8e6 !important;
    border-radius: .3rem !important;
    padding: 1px 8px !important;
    margin-top: 4px !important;
    font-size: .82rem; line-height: 1.5;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #7c8aa0 !important; margin-right: 5px !important; font-weight: 700;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { color: #d9534f !important; }
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple { border-color: #86b7fe !important; }
/* consistent label rhythm so fields align row to row */
form .form-group > label { margin-bottom: .3rem; font-weight: 500; }

/* Filter panel type scale — match the dense grid (13px). The body default is
   ~16px, so filters read a whole size larger than the table; pull them in line. */
#advanced-search-fields,
#advanced-search-fields .form-control,
#advanced-search-fields select.form-control,
#advanced-search-fields .select2-container .select2-selection__rendered,
#advanced-search-fields .select2-selection__choice,
#advanced-search-fields .select2-search__field { font-size: 0.8125rem; }
#advanced-search-fields .form-group > label,
#advanced-search-fields > form > .row > .col-md-6 > label,
#advanced-search-fields > form .row > .col-md-6 > label { font-size: 0.75rem; font-weight: 500; }

/* Select2 — dark mode (OneUI html.dark) */
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple {
    background-color: #1c2532 !important;
    border-color: #3a4a5f !important;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered { color: #cbd5e3; }
html.dark .select2-container--default .select2-selection--single .select2-selection__placeholder,
html.dark .select2-container--default .select2-selection--multiple .select2-selection__placeholder { color: #7c8aa0; }
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #31415a !important; color: #dbe4f0 !important; border-color: #43597a !important;
}
html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: #9fb0c7 !important; }
html.dark .select2-dropdown { background-color: #1c2532; border-color: #3a4a5f; color: #cbd5e3; }
html.dark .select2-container--default .select2-results__option[aria-selected=true] { background-color: #26344a; }
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #2356d7; }
html.dark .select2-search--dropdown .select2-search__field { background: #141d29; border-color: #3a4a5f; color: #cbd5e3; }

/* Legacy inline check/radio wrappers (BS3). Form::checkbox now emits BS5
   .form-check markup, but many views still hand-write .checkbox-inline. */
.checkbox-inline,
.radio-inline {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-right: 1rem;
    margin-bottom: .25rem;
    font-weight: normal;
}
.checkbox-inline > input[type="checkbox"],
.radio-inline > input[type="radio"] { margin: 0; }

/* BS3 validation-state helpers used by the app's inline validation JS */
.error-field,
.has-error .form-control { border-color: #C01518 !important; }
.error-field:not(.select2-hidden-accessible) { box-shadow: 0 0 0 3px rgba(192,21,24,.10); }
/* red error message — must beat the .dz-eform form-label rules (which are more specific),
   so it stays red (and full-width block) wherever the validation JS injects it */
.error-label,
.dz-eform .error-label,
.dz-eform fieldset.form-group > label.error-label,
.dossier-redesign .error-label,
.has-error .control-label {
    display: block !important; width: 100%; margin: 4px 0 0 !important; padding: 0 !important;
    font-weight: 500 !important; font-size: 11.5px !important; line-height: 1.35;
    color: #C01518 !important; letter-spacing: 0 !important; text-transform: none !important;
}
html.dark .error-label,
html.dark .dz-eform .error-label,
html.dark .dossier-redesign .error-label { color: #ff8a8d !important; }
html.dark .error-field,
html.dark .has-error .form-control { border-color: #ff6b6e !important; }

/* ============================================================
   Buttons
   ============================================================ */
.btn-default {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #ced4da;
}
.btn-default:hover,
.btn-default:focus {
    color: #212529;
    background-color: #e9ecef;
    border-color: #adb5bd;
}
/* legacy small button size used across grids/actions */
.btn.small,
.btn-xs {
    padding: 2px 5px;
    font-size: 12px;
    line-height: 1.5;
}
.btn-block { display: block; width: 100%; }

/* ============================================================
   Floats / visibility / text alignment aliases (BS3 -> BS5)
   ============================================================ */
.pull-left, .left { float: left !important; }
.pull-right, .right { float: right !important; }
.hidden { display: none !important; }
.show { display: block !important; }

/* custom.css defines `.d-none{display:none!important}` (a hide helper for the BS3
   pages). Loaded after oneui.min.css, that !important beats Bootstrap 5's
   responsive `.d-{bp}-{value}` utilities — hiding elements that must show at a
   breakpoint (#main-navigation `d-none d-lg-block`, header labels
   `d-none d-sm-inline-block`, the mobile toggle `d-lg-none`, etc.). Re-assert the
   BS5 responsive display utilities here (this file loads last) so they win again. */
@media (min-width: 576px) {
    .d-sm-none { display: none !important; }
    .d-sm-inline { display: inline !important; }
    .d-sm-inline-block { display: inline-block !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
    .d-sm-inline-flex { display: inline-flex !important; }
}
@media (min-width: 768px) {
    .d-md-none { display: none !important; }
    .d-md-inline { display: inline !important; }
    .d-md-inline-block { display: inline-block !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
    .d-md-inline-flex { display: inline-flex !important; }
}
@media (min-width: 992px) {
    .d-lg-none { display: none !important; }
    .d-lg-inline { display: inline !important; }
    .d-lg-inline-block { display: inline-block !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
    .d-lg-inline-flex { display: inline-flex !important; }
}
@media (min-width: 1200px) {
    .d-xl-none { display: none !important; }
    .d-xl-inline-block { display: inline-block !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.clearfix::after { display: block; clear: both; content: ""; }

/* Tighter page top: trim the hero (title/breadcrumb band) and the content's top
   padding so the list sits closer to the menu instead of leaving a big empty gap. */
#main-container > .bg-body-light > .content { padding-top: .7rem; padding-bottom: .7rem; }
#main-container > .content { padding-top: .8rem; }

/* ============================================================
   Tables / Grid helper output
   ============================================================ */
/* BS5 renamed .table-condensed -> .table-sm; restore tighter padding for legacy class */
.table-condensed > :not(caption) > * > * { padding: .3rem .5rem; }

/* ============================================================
   Data grid — Grid::view() output. VARIANT A (user-chosen):
   single-line rows + frozen Nr./Nume columns + horizontal scroll.
   No zebra; status/row colors full strength; empty cells muted.
   ============================================================ */
.grid-block { margin-bottom: 1.25rem; }
/* the page scrolls normally; horizontal overflow scrolls inside .table-responsive.
   The column header is kept on top by a JS clone (grid-scroll.js), not CSS sticky
   (CSS sticky can't pin to the viewport while an ancestor scrolls horizontally). */
.grid-view-table { margin: 0; }
.grid-view-table > table.entries { margin: 0; width: 100%; font-size: 0.8125rem; color: #2b3440; }
/* neutralise tablesorter's own stickyHeaders clone: it's position:fixed and syncs
   to window scrollLeft, so it can't track our inner horizontal scroll or frozen
   columns. We render our own (.grid-sticky-head) instead. */
.tablesorter-sticky-wrapper { display: none !important; }

/* single-line cells (clean, scannable); the .table-responsive wrapper scrolls
   horizontally when the columns don't fit */
.grid-view-table > table.entries > thead > tr > th,
.grid-view-table > table.entries > thead > tr > td,
.grid-view-table > table.entries > tbody > tr > td {
    padding: .4rem .6rem;
    vertical-align: middle;
    line-height: 1.4;
    white-space: nowrap;
}
.grid-view-table > table.entries > tbody > tr > td { font-variant-numeric: tabular-nums; }

/* No zebra: kill BS5's stripe/hover inset box-shadow overlay (it washed out the
   colored status cells). Rows are separated by borders; colors show full-strength. */
.grid-view-table > table.entries > tbody > tr > td,
.grid-view-table > table.entries > tbody > tr > th,
.grid-view-table > table.entries > thead > tr > th,
.grid-view-table > table.entries > thead > tr > td {
    --bs-table-accent-bg: transparent;
    --bs-table-bg-state: transparent;
    box-shadow: none !important;
}

/* clean header (sentence case, not uppercase) */
.grid-view-table > table.entries > thead > tr > th,
.grid-view-table > table.entries > thead > tr > td {
    background: #eef1f6;
    color: #5c6675;
    font-weight: 600;
    border-bottom: 2px solid #d7dde5;
}

/* per-row effective background — the frozen columns use it so they match the
   row / row-status color (instead of letting scrolled content show through) */
.grid-view-table > table.entries > tbody > tr { --row-bg: #fff; }
.grid-view-table > table.entries > tbody > tr.row-archive   { --row-bg: #FF0; }
.grid-view-table > table.entries > tbody > tr.row-alert     { --row-bg: #ffb3b3; }
.grid-view-table > table.entries > tbody > tr.row-active    { --row-bg: #a7f98f; }
.grid-view-table > table.entries > tbody > tr.row-complaint { --row-bg: #DDA0DD; }

/* Frozen columns — configurable via the table classes Grid.php emits:
   gfl1 = freeze Nr. only; gfl2 = freeze Nr.+Nume (default); gfr1 = freeze the
   Actions column (.g-freeze-r) on the right. Set per list via
   $data['freeze_left'] / $data['freeze_right']. */
/* LEFT — Nr. column (gfl1 and gfl2) */
.grid-view-table > table.gfl1 > thead > tr > td:first-child,
.grid-view-table > table.gfl1 > tbody > tr > td:first-child,
.grid-view-table > table.gfl2 > thead > tr > td:first-child,
.grid-view-table > table.gfl2 > tbody > tr > td:first-child {
    position: sticky !important; left: 0; z-index: 2; width: 46px; min-width: 46px;
}
/* LEFT — Nume column (gfl2 only) with the separator shadow */
.grid-view-table > table.gfl2 > thead > tr > td:nth-child(2),
.grid-view-table > table.gfl2 > tbody > tr > td:nth-child(2) {
    position: sticky !important; left: 46px; z-index: 2; min-width: 140px;
    box-shadow: 6px 0 8px -7px rgba(20,30,45,.25) !important;
}
/* when only Nr. is frozen (gfl1), it carries the separator shadow */
.grid-view-table > table.gfl1 > thead > tr > td:first-child,
.grid-view-table > table.gfl1 > tbody > tr > td:first-child { box-shadow: 6px 0 8px -7px rgba(20,30,45,.25) !important; }
/* RIGHT — Actions column (gfr1) */
.grid-view-table > table.gfr1 > thead > tr > td.g-freeze-r,
.grid-view-table > table.gfr1 > tbody > tr > td.g-freeze-r {
    position: sticky !important; right: 0; z-index: 2;
    box-shadow: -6px 0 8px -7px rgba(20,30,45,.25) !important;
}
/* body frozen cells take the row background (Nr.'s own inline color still wins) */
.grid-view-table > table.entries > tbody > tr > td:first-child,
.grid-view-table > table.entries > tbody > tr > td:nth-child(2),
.grid-view-table > table.entries > tbody > tr > td.g-freeze-r { background: var(--row-bg, #fff); }
/* header frozen cells sit above and keep the header bg */
.grid-view-table > table.entries > thead > tr > td:first-child,
.grid-view-table > table.entries > thead > tr > td:nth-child(2),
.grid-view-table > table.entries > thead > tr > td.g-freeze-r { background: #f4f6fa; z-index: 4; }

/* first "Nr." column: centered, muted */
.grid-view-table > table.entries > tbody > tr > td:first-child {
    text-align: center;
    font-weight: 600;
    color: #8a94a3;
}

/* colored status cells */
.grid-view-table > table.entries > tbody > tr > td[style*="background"] {
    text-align: center;
    font-weight: 600;
}

/* Sortable columns — make it obvious which headers sort (tablesorter).
   Sortable headers get a pointer, hover, and an ⇅ icon that becomes ↑/↓ when
   active; non-sortable headers (Nr., Acțiuni, checkbox) show nothing. */
.grid-view-table > table.entries > thead > tr > td.tablesorter-header:not(.sorter-false) {
    cursor: pointer;
    position: relative;
    padding-right: 1.35rem;
    -webkit-user-select: none;
    user-select: none;
}
.grid-view-table > table.entries > thead > tr > td.tablesorter-header:not(.sorter-false):hover { background: #e3e8ef; }
.grid-view-table > table.entries > thead > tr > td.tablesorter-header:not(.sorter-false)::after {
    content: "\f0dc";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: .5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    opacity: .32;
}
.grid-view-table > table.entries > thead > tr > td.tablesorter-header:not(.sorter-false):hover::after { opacity: .6; }
.grid-view-table > table.entries > thead > tr > td.tablesorter-headerAsc::after { content: "\f0de"; opacity: .95; color: #2f6db0; }
.grid-view-table > table.entries > thead > tr > td.tablesorter-headerDesc::after { content: "\f0dd"; opacity: .95; color: #2f6db0; }
.grid-view-table > table.entries > thead > tr > td.sorter-false { cursor: default; }
.grid-view-table > table.entries > thead > tr > td.sorter-false::after { content: none; }
/* hide tablesorter's own icon element — the ::after above renders the indicator */
.grid-view-table .tablesorter-icon { display: none; }

/* empty placeholder ("Nu-s date") de-emphasized so real data stands out */
.grid-view-table .grid-empty { color: #aab0bb; }

/* sticky top horizontal scrollbar (grid-scroll.js) — synced with the table's own
   bottom scroll, so wide grids can be scrolled from the top / while pinned under
   the header, not only from the bottom edge. `top` is set inline (header height). */
.grid-hscroll {
    position: sticky;
    z-index: 5;
    overflow-x: auto;
    overflow-y: hidden;
    height: 15px;
    margin-bottom: 3px;
    background: #eef1f6;
    border: 1px solid #e0e5ec;
    border-radius: 6px;
}
.grid-hscroll-inner { height: 1px; }

/* Custom sticky column header (grid-scroll.js). A fixed bar pinned under the page
   header holding a clone of the <thead>. The bar is itself an overflow container
   whose scrollLeft we keep synced with the table, so the frozen columns (position:
   sticky) keep sticking inside the clone exactly like in the body. Position (top/
   left/width) + show/hide are set inline by JS. */
.grid-sticky-head {
    position: fixed;
    overflow: hidden;
    z-index: 500;               /* above table content + top scrollbar, below header/dropdowns */
    background: #eef1f6;
    box-shadow: 0 6px 8px -6px rgba(20,30,45,.35);
    display: none;
}
.grid-sticky-head > .grid-view-table { margin: 0; overflow: visible; }
.grid-sticky-head table { margin: 0 !important; }

/* action buttons column: keep the row compact */
.grid-view-table .btn { margin: 1px; }

/* ------------------------------------------------------------------ *
 * Inspired by the candidati-table redesign mockup (styling only — no
 * markup/behaviour changes): tighter icon action buttons, a subtle row
 * hover, and cleaner cell rhythm. Status cells keep their full-cell DB
 * colors (contrastText) as required.
 * ------------------------------------------------------------------ */

/* action buttons — compact, evenly spaced, gentle hover lift. Colors stay
   exactly as the app sets them (btn-primary/danger/success/…); only the
   size, spacing and interaction are refined. */
.grid-view-table td.g-freeze-r { white-space: nowrap; }
/* uniform, correctly-sized icon buttons (square-ish, centered glyph) */
.grid-view-table td.g-freeze-r .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-width: 1.875rem;
    height: 1.75rem;
    padding: 0 .45rem;
    font-size: 0.8125rem;
    line-height: 1;
    border-radius: .35rem;
    margin: 0 .1rem;
    vertical-align: middle;
    box-shadow: none;
    transition: transform .06s ease, box-shadow .12s ease, filter .12s ease;
}
.grid-view-table td.g-freeze-r .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(20,30,45,.20);
    filter: brightness(1.04);
}
.grid-view-table td.g-freeze-r .btn > i { line-height: 1; }

/* action-button color hierarchy (per user): view = primary blue (default class),
   edit = success green, delete/remove = danger red. Scoped to the oneui grid;
   colors applied over whatever base class the app emits. */
.grid-view-table td.g-freeze-r .btn.edit {
    --bs-btn-color: #fff; --bs-btn-bg: #5cb85c; --bs-btn-border-color: #5cb85c;
    --bs-btn-hover-bg: #449d44; --bs-btn-hover-border-color: #449d44;
    color: #fff; background-color: #5cb85c; border-color: #5cb85c;
}
.grid-view-table td.g-freeze-r .btn.delete,
.grid-view-table td.g-freeze-r .btn.remove {
    --bs-btn-color: #fff; --bs-btn-bg: #d9534f; --bs-btn-border-color: #d9534f;
    --bs-btn-hover-bg: #c9302c; --bs-btn-hover-border-color: #c9302c;
    color: #fff; background-color: #d9534f; border-color: #d9534f;
}

/* subtle row hover to help scan wide rows — only non-colored cells tint, so
   status cells and row-status colors keep their own color. */
.grid-view-table > table.entries > tbody > tr:hover > td:not([style*="background"]) {
    background: #eef4fb;
}

/* ============================================================
   DARK MODE (OneUI `html.dark`). The grid chrome is hardcoded light, so re-skin
   it to OneUI's dark palette (#1f2937 body surface, #253041 raised, #bec8d5 text).
   Non-frozen body cells + DB status-cell colors adapt on their own (BS table vars
   / inline styles), so only the header, frozen cells, row-status tints, sticky
   header, top scrollbar and hover need overriding here.
   ============================================================ */
html.dark .grid-view-table > table.entries > thead > tr > th,
html.dark .grid-view-table > table.entries > thead > tr > td {
    background: #253041;
    color: #aab6c6;
    border-bottom-color: #3a4a5f;
}
html.dark .grid-view-table > table.entries > thead > tr > td:first-child,
html.dark .grid-view-table > table.entries > thead > tr > td:nth-child(2),
html.dark .grid-view-table > table.entries > thead > tr > td.g-freeze-r { background: #253041; }
/* normal rows: frozen cells match the dark table body */
html.dark .grid-view-table > table.entries > tbody > tr { --row-bg: #1f2937; }
/* row-status colors — dark, hue-hinting variants so the light table text reads */
html.dark .grid-view-table > table.entries > tbody > tr.row-archive   { --row-bg: #4d4413; }
html.dark .grid-view-table > table.entries > tbody > tr.row-alert     { --row-bg: #4d2222; }
html.dark .grid-view-table > table.entries > tbody > tr.row-active    { --row-bg: #1f4020; }
html.dark .grid-view-table > table.entries > tbody > tr.row-complaint { --row-bg: #3d2650; }
html.dark .grid-view-table > table.entries > tbody > tr.row-archive   > td:not([style*="background"]),
html.dark .grid-view-table > table.entries > tbody > tr.row-alert     > td:not([style*="background"]),
html.dark .grid-view-table > table.entries > tbody > tr.row-active    > td:not([style*="background"]),
html.dark .grid-view-table > table.entries > tbody > tr.row-complaint > td:not([style*="background"]) {
    background: var(--row-bg) !important;
    color: #e2e8f0;
}
html.dark .grid-view-table > table.entries > tbody > tr > td:first-child { color: #8a94a3; }
html.dark .grid-view-table .grid-empty { color: #66717f; }
html.dark .grid-view-table > table.entries > thead > tr > td.tablesorter-header:not(.sorter-false):hover { background: #2c3a4d; }
html.dark .grid-view-table > table.entries > thead > tr > td.tablesorter-headerAsc::after,
html.dark .grid-view-table > table.entries > thead > tr > td.tablesorter-headerDesc::after { color: #5b8fd6; }
html.dark .grid-view-table > table.entries > tbody > tr:hover > td:not([style*="background"]) { background: #26344a; }
/* sticky column-header clone + top scrollbar */
html.dark .grid-sticky-head { background: #253041; box-shadow: 0 6px 8px -6px rgba(0,0,0,.55); }
html.dark .grid-hscroll { background: #253041; border-color: #3a4a5f; }

/* keep the empty-state alert tidy */
.grid-block + .alert, .grid-view-table + .alert { margin-top: 1rem; }

table.entries { border-spacing: 0; margin: 0; }
.icon-center { position: relative; display: block; text-align: center; line-height: 18px; }
.icon-center .glyphicon-earphone { font-size: 18px; color: #56882A; }
.icon-center .remove { position: absolute; z-index: 1; color: red; font-size: 16px; }

/* Grid row-status colors (.row-archive/.row-alert/.row-active/.row-complaint)
   are defined in custom.css so the same Grid markup works under BOTH the
   Bootstrap-3 `default` shell and this OneUI shell (custom.css is loaded by
   both). Not duplicated here to keep a single source of truth.

   Dynamic per-cell colors set via CSS custom props (optional future use): */
.cell-state { background: var(--cell-bg, transparent); color: var(--cell-fg, #fff); text-align: center; }

/* ============================================================
   Misc app helpers ported from style.css (views rely on these)
   ============================================================ */
.page-title { margin-top: 10px; }
.page-title.inline { margin-top: 0; }
.page-title a { float: right; text-decoration: none; margin-left: 10px; }
.page-title a span { font-size: 11px; text-transform: uppercase; font-weight: normal; }

/* generic count badge (menu badges use OneUI .nav-main-link-badge instead) */
.count {
    display: inline-block;
    min-width: 10px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #6c757d;
    border-radius: 10px;
}
.count.wrong { background-color: #a94442; }
.count.blue { background-color: #2641F0; }

/* Legacy contextual badges (BS5 removed .badge-*) */
.badge-error { background-color: #b94a48; }
.badge-warning { background-color: #f89406; }
.badge-success { background-color: #468847; }
.badge-info { background-color: #3a87ad; }
.badge-inverse { background-color: #333333; }

/* Legacy BS3 modal close button (AJAX-injected fragments use .close, often outside a
   .modal-header) — pin it to the top-right of the modal as a proper icon button. */
.modal-content { position: relative; }
.modal .close, .modal-header .close, .modal-content > .close {
    position: absolute; top: 12px; right: 14px; z-index: 6; float: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0; margin: 0;
    background: #eef1f5; border: 0; border-radius: 8px;
    font-size: 20px; line-height: 1; font-weight: 400; color: #64748b;
    text-shadow: none; opacity: 1; cursor: pointer; transition: background .12s, color .12s;
}
.modal .close:hover, .modal .close:focus { background: #d9534f; color: #fff; opacity: 1; outline: 0; }
html.dark .modal .close { background: #2a384b; color: #cbd5e1; }
html.dark .modal .close:hover { background: #d9534f; color: #fff; }

/* ============================================================
   Dossier (employee/view.php) — sticky candidate identity bar. Pinned under the
   fixed header so the candidate's name / photo / status stay visible on every
   tab and while scrolling. Pure addition; reuses the existing .stat-pill style.
   ============================================================ */
.dossier-identity {
    position: sticky;
    top: var(--dz-header-h, 62px);  /* just under the fixed OneUI #page-header (JS keeps the var synced) */
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: .5rem;
    padding: 9px 16px;
    margin: 0 0 12px;
    box-shadow: 0 2px 8px rgba(20, 30, 45, .07);
}
.dossier-identity .di-photo {
    width: 46px; height: 46px; flex: 0 0 46px;
    border-radius: 50%; object-fit: cover;
    border: 1px solid #e0e5ec; background: #f4f7fb;
}
.dossier-identity .di-photo-empty { display: inline-flex; align-items: center; justify-content: center; color: #9aa4b2; font-size: 20px; }
.dossier-identity .di-main { min-width: 0; flex: 1 1 auto; }
.dossier-identity .di-name { font-size: 1.05rem; font-weight: 700; color: #1f2937; line-height: 1.2; }
.dossier-identity .di-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }

/* pills in dark mode (identity bar + overview) */
html.dark .dossier-identity { background: #1f2937; border-color: #2a384b; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
html.dark .dossier-identity .di-name { color: #e6ecf3; }
html.dark .dossier-identity .di-photo { border-color: #3a4a5f; background: #253041; }
html.dark .dossier-identity .di-photo-empty { color: #7c8aa0; }
html.dark .dossier-redesign .stat-pill { background: #31415a; border-color: #43597a; color: #dbe4f0; }
html.dark .dossier-redesign .stat-pill .glyphicon { color: #8fb3ee; }
html.dark .dossier-redesign .stat-pill.pill-danger { background: #4a2226; border-color: #7a3a40; color: #f0b8be; }
html.dark .dossier-redesign .stat-pill.pill-danger .glyphicon { color: #f0b8be; }

/* --- Dossier: the sticky identity bar now shows name + pills, so hide the
   overview's duplicate copy of them (Faza B, 1+2). --- */
.dossier-redesign #dz-overview > #contact-info > h3.page-title:first-of-type,
.dossier-redesign #dz-overview > #contact-info > .dossier-pills { display: none; }

/* --- Dossier cards: a touch airier --- */
.dossier-redesign table.ov-kv td { padding: 7px 14px; }
.dossier-redesign .ov-card-h { padding: 9px 14px; }
.dossier-redesign .ov-card { margin-bottom: 16px; }

/* --- Dossier dark mode — the cards / tabs / timeline / panels are styled
   light-only in custom.css; re-skin them to OneUI's dark palette. --- */
html.dark .dossier-redesign .page-title { color: #e2e8f0; }
html.dark .dossier-redesign .ov-card { background: #1f2937; border-color: #2a384b; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
html.dark .dossier-redesign .ov-card-h { background: #253041; color: #93a1b3; border-color: #2a384b; }
html.dark .dossier-redesign .ov-card-h .glyphicon { color: #6f9be6; }
html.dark .dossier-redesign table.ov-kv td { border-bottom-color: #2a384b; color: #cdd7e3; }
html.dark .dossier-redesign table.ov-kv td:first-child { color: #8a97a8; }
html.dark .dossier-redesign .ov-card-danger { border-color: #7a3a40; }
html.dark .dossier-redesign .ov-card-danger .ov-card-h { color: #f0b8be; background: #3a1e21; border-color: #7a3a40; }
html.dark .dossier-redesign .ov-badge-danger { background: #b3474e; }
html.dark .dossier-redesign .dossier-toptabs { border-bottom-color: #2a384b; }
html.dark .dossier-redesign .dossier-toptabs > li > a { color: #93a1b3; }
html.dark .dossier-redesign .dossier-toptabs > li > a:hover { background: #253041; color: #6f9be6; }
html.dark .dossier-redesign .dossier-toptabs > li.active > a,
html.dark .dossier-redesign .dossier-toptabs > li.active > a:hover,
html.dark .dossier-redesign .dossier-toptabs > li.active > a:focus { color: #6f9be6; border-bottom-color: #6f9be6; }
html.dark .dossier-redesign .timeline .timeline-item p { color: #cbd5e3; }
html.dark .dossier-redesign .timeline-horizontal:before { background: #2a384b; }
/* general panel dark bridge (matches OneUI .block dark) */
html.dark .panel { background: #1f2937; border-color: #2a384b; color: #cdd7e3; }
html.dark .panel-heading { background: #253041; border-color: #2a384b; color: #cdd7e3; }
html.dark .panel-footer { background: #253041; border-color: #2a384b; }
html.dark .panel-primary { border-color: #1c45ac; }
html.dark .panel-primary > .panel-heading { background: #1c45ac; border-color: #1c45ac; color: #fff; }
html.dark .well { background: #1c2532; border-color: #2a384b; }

/* Fixed page-header must stay dark + OPAQUE in dark mode. OneUI's base and every
   color-theme keep an `#page-header{background:rgba(255,255,255,.75/.95)}` light
   rule; under some theme/glass/stale-cache combos it wins over the dark rule and
   the semi-transparent white over the dark page reads as a light blue-grey bar
   (very visible as the header floats mid-page in a full-page screenshot). Force
   it opaque-dark with !important so no theme state can leak a light header. */
html.dark #page-container #page-header,
html.dark #page-header { background-color: #1f2937 !important; }

/* --- Dossier folder-state timeline -> compact stepper. The original had big
   emoji/state-image badges (folder_state/*.png) + 150px-wide, 60px-tall items
   with 50px top padding, eating huge vertical + horizontal space. Re-skin to a
   small dots + connector stepper (reached = blue, upcoming = grey). --- */
.dossier-redesign #statusFolderWrapper { margin: 2px 0 8px !important; overflow-x: auto !important; overflow-y: visible !important; }
.dossier-redesign .timeline-horizontal { padding: 6px 0 2px !important; margin: 0 !important; }
.dossier-redesign .timeline-horizontal:before { display: none !important; }
.dossier-redesign .timeline-horizontal .timeline-item {
    min-width: 74px !important; width: auto !important; height: auto !important;
    padding: 0 4px !important; vertical-align: top; position: relative;
}
/* connector line between consecutive dots */
.dossier-redesign .timeline-horizontal .timeline-item:not(:last-child):after {
    content: "" !important; display: block !important; position: absolute;
    top: 13px; left: 50%; width: 100%; height: 2px; background: #dfe3ea; z-index: 0;
}
/* small dots */
.dossier-redesign .timeline-horizontal .timeline-badge {
    position: relative !important; top: auto !important; left: auto !important; right: auto !important;
    margin: 6px auto 6px !important; width: 15px !important; height: 15px !important;
    border: 2px solid #c7d0dd !important; background: #fff !important; z-index: 1;
}
/* remove the emoji / state images */
.dossier-redesign .timeline-horizontal .timeline-badge:after,
.dossier-redesign .timeline-horizontal .timeline-item:first-child .timeline-badge:after,
.dossier-redesign .timeline-horizontal .timeline-item:last-child .timeline-badge:after,
.dossier-redesign .timeline .timeline-item .timeline-badge.current-status:after {
    display: none !important; content: none !important; background: none !important;
}
/* reached states = filled blue */
.dossier-redesign .timeline-horizontal .timeline-badge.current-status { background: #1f6fb2 !important; border-color: #1f6fb2 !important; }
/* compact labels */
.dossier-redesign .timeline-horizontal .timeline-item p { margin: 0 !important; font-size: 11px; line-height: 1.25; color: #6a7685; white-space: normal; }

/* dark stepper */
html.dark .dossier-redesign .timeline-horizontal .timeline-item:not(:last-child):after { background: #2a384b; }
html.dark .dossier-redesign .timeline-horizontal .timeline-badge { background: #253041 !important; border-color: #3f4f63 !important; }
html.dark .dossier-redesign .timeline-horizontal .timeline-badge.current-status { background: #3f7fd6 !important; border-color: #3f7fd6 !important; }
html.dark .dossier-redesign .timeline-horizontal .timeline-item p { color: #97a4b5; }

/* ============================================================
   Dossier CONSOLE layout (Faza B) — left section rail + content area.
   Reuses the existing .dossier-toptabs .dz-tab links + tab JS (unchanged); only
   the shell is restructured (top tab bar -> vertical rail). Quick actions
   (Apel/Task) live in the identity bar.
   ============================================================ */
.dossier-redesign .di-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.dossier-redesign .di-actions .di-btn { white-space: nowrap; }
.dossier-redesign .dossier-console { display: grid; grid-template-columns: 232px 1fr; gap: 18px; align-items: start; margin-top: 6px; }
.dossier-redesign .dossier-console > .dossier-topcontent { min-width: 0; }
/* the horizontal tab bar becomes a vertical rail card */
.dossier-redesign .dossier-console > .dossier-toptabs {
    display: block !important; float: none; margin: 0 !important; padding: 8px !important;
    background: #fff; border: 1px solid #e3e8ef !important; border-radius: 10px;
    box-shadow: 0 1px 2px rgba(20,30,45,.05); position: sticky; top: calc(var(--dz-header-h, 62px) + 34px);
}
.dossier-redesign .dossier-console > .dossier-toptabs > li { display: block !important; float: none !important; margin: 0 !important; }
.dossier-redesign .dossier-console > .dossier-toptabs > li.dz-rail-grp {
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8492a6; padding: 11px 10px 4px;
}
.dossier-redesign .dossier-console > .dossier-toptabs > li.dz-rail-grp:first-child { padding-top: 4px; }
.dossier-redesign .dossier-console > .dossier-toptabs > li > a {
    display: flex !important; align-items: center; gap: 10px; margin: 0;
    border: 0 !important; border-left: 3px solid transparent !important; border-radius: 8px;
    padding: 9px 11px; color: #46536b; font-weight: 600; font-size: 13px; background: transparent;
}
.dossier-redesign .dossier-console > .dossier-toptabs > li > a:hover { background: #f7f9fc; color: #175a94; }
.dossier-redesign .dossier-console > .dossier-toptabs > li > a .glyphicon { color: #8492a6; font-size: 14px; margin: 0; top: 0; }
.dossier-redesign .dossier-console > .dossier-toptabs > li.active > a,
.dossier-redesign .dossier-console > .dossier-toptabs > li.active > a:hover,
.dossier-redesign .dossier-console > .dossier-toptabs > li.active > a:focus {
    background: #eaf2fb !important; color: #175a94 !important; border: 0 !important; border-left: 3px solid #1f6fb2 !important;
}
.dossier-redesign .dossier-console > .dossier-toptabs > li.active > a .glyphicon { color: #1f6fb2; }
/* stack on narrow screens */
@media (max-width: 991px) {
    .dossier-redesign .dossier-console { grid-template-columns: 1fr; }
    .dossier-redesign .dossier-console > .dossier-toptabs { position: static; display: flex !important; flex-wrap: wrap; }
    .dossier-redesign .dossier-console > .dossier-toptabs > li.dz-rail-grp { display: none !important; }
    .dossier-redesign .dossier-console > .dossier-toptabs > li > a { border-left: 0 !important; }
}
/* dark */
html.dark .dossier-redesign .dossier-console > .dossier-toptabs { background: #1f2937; border-color: #2a384b !important; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li.dz-rail-grp { color: #7c8aa0; }
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li > a { color: #aab6c6; }
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li > a:hover { background: #253041; color: #6f9be6; }
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li > a .glyphicon { color: #7c8aa0; }
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li.active > a,
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li.active > a:hover { background: #1c3050 !important; color: #8fb3ee !important; border-left-color: #3f7fd6 !important; }
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li.active > a .glyphicon { color: #8fb3ee; }

/* ============================================================
   Dossier polish — inspired by candidat-dosar-polish.html: JetBrains Mono for
   dates/numbers, teal Task action, dashed key/value separators, check-marks on
   reached stepper dots.
   ============================================================ */
:root { --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.dossier-redesign .mono { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; font-size: .93em; letter-spacing: -.01em; }
/* teal Task quick-action */
.dossier-redesign .di-actions #addTaskFromUserCard {
    background-color: #1f6fb2 !important; border-color: #1f6fb2 !important; color: #fff !important;
}
.dossier-redesign .di-actions #addTaskFromUserCard:hover { background-color: #175a94 !important; border-color: #175a94 !important; }
/* dashed key/value separators + tabular values */
.dossier-redesign table.ov-kv td { border-bottom-style: dashed !important; border-bottom-color: #e6eaef !important; }
.dossier-redesign table.ov-kv td:last-child { font-variant-numeric: tabular-nums; }
html.dark .dossier-redesign table.ov-kv td { border-bottom-color: #2a384b !important; }
/* KV cards — "tight inline": each value sits immediately after its label (label
   takes only its natural width, value follows with a small gap), so short pairs
   like "Gen  Masculin" read as tight as long ones — no far-right dead space.
   Applies to every ov-kv card (Personal, Pașaport, Viză, Control). */
.dossier-redesign table.ov-kv { display: block; }
.dossier-redesign table.ov-kv tbody { display: block; padding: 5px 14px 9px; }
.dossier-redesign table.ov-kv tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px; padding: 6px 0 !important; border-bottom: 1px dashed #e6eaef !important; }
.dossier-redesign table.ov-kv tr:last-child { border-bottom: 0 !important; }
.dossier-redesign table.ov-kv td { display: inline; border: 0 !important; padding: 0 !important; vertical-align: baseline; }
.dossier-redesign table.ov-kv td:first-child { flex: 0 1 auto; width: auto !important; color: #64748b; font-weight: 500; }
.dossier-redesign table.ov-kv td:last-child { flex: 1 1 auto; min-width: 36px; text-align: left !important; font-weight: 600; color: #1f2937; overflow-wrap: anywhere; }
html.dark .dossier-redesign table.ov-kv td:first-child { color: #93a1b3; }
html.dark .dossier-redesign table.ov-kv td:last-child { color: #dbe4f0; }
/* stepper: white check on reached dots */
.dossier-redesign .timeline-horizontal .timeline-badge.current-status::before {
    content: "\2713"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #fff; font-size: 9px; font-weight: 700; line-height: 1;
}

/* ---- Dossier status-history table (Statuturile dosarului) — compact, sticky
   header, current row highlighted (teal), mono date column. Inspired by the
   dossier-polish mockup. ---- */
.dossier-redesign .dz-hist-wrap { max-height: 460px !important; overflow: auto; border: 1px solid #e6eaef; border-radius: .5rem; margin: 0; }
.dossier-redesign table.dz-hist { margin: 0; width: 100%; border-collapse: separate; border-spacing: 0; font-size: .82rem; }
.dossier-redesign table.dz-hist > thead > tr > td {
    position: sticky; top: 0; z-index: 2; background: #f6f8fa;
    font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7c8aa0;
    border-bottom: 2px solid #e6eaef; padding: .5rem .7rem;
}
.dossier-redesign table.dz-hist > tbody > tr > td { padding: .42rem .7rem; border-bottom: 1px solid #eef1f5; white-space: nowrap; vertical-align: middle; }
.dossier-redesign table.dz-hist > tbody > tr:last-child > td { border-bottom: 0; }
.dossier-redesign table.dz-hist > tbody > tr > td:first-child { white-space: normal; }
.dossier-redesign table.dz-hist > tbody > tr:hover > td { background: #f6f8fa; }
.dossier-redesign table.dz-hist > tbody > tr > td:nth-child(3) { font-family: var(--bs-font-monospace); font-variant-numeric: tabular-nums; color: #7c8aa0; font-size: .95em; }
.dossier-redesign table.dz-hist > tbody > tr.dz-now > td { background: #eaf7f4; }
.dossier-redesign table.dz-hist > tbody > tr.dz-now > td:first-child { font-weight: 700; box-shadow: inset 3px 0 0 #1f6fb2; }
.dossier-redesign table.dz-hist .delete-state-ajax { color: #9aa4b2; }
.dossier-redesign table.dz-hist .delete-state-ajax:hover { color: #c0392b; }
/* dark */
html.dark .dossier-redesign .dz-hist-wrap { border-color: #2a384b; }
html.dark .dossier-redesign table.dz-hist > thead > tr > td { background: #253041; color: #93a1b3; border-bottom-color: #2a384b; }
html.dark .dossier-redesign table.dz-hist > tbody > tr > td { border-bottom-color: #2a384b; color: #cdd7e3; }
html.dark .dossier-redesign table.dz-hist > tbody > tr:hover > td { background: #253041; }
html.dark .dossier-redesign table.dz-hist > tbody > tr > td:nth-child(3) { color: #8a97a8; }
html.dark .dossier-redesign table.dz-hist > tbody > tr.dz-now > td { background: #12352e; }
html.dark .dossier-redesign table.dz-hist > tbody > tr.dz-now > td:first-child { box-shadow: inset 3px 0 0 #14b8a6; }

/* ---- Overview: cap long list tables (kill the endless scroll) + one consistent,
   usable text scale across cards. Excludes the .ov-kv key/value cards. ---- */
.dossier-redesign .dz-scroll { max-height: 340px; overflow: auto; border: 1px solid #e6eaef; border-radius: .5rem; }
html.dark .dossier-redesign .dz-scroll { border-color: #2a384b; }
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) { font-size: 12.5px; width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > thead > tr > td {
    position: sticky; top: 0; z-index: 2; background: #f6f8fa; white-space: nowrap;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #7c8aa0;
    border-bottom: 2px solid #e6eaef; padding: .5rem .6rem;
}
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > tbody > tr > td { padding: .42rem .6rem; border-bottom: 1px solid #eef1f5; vertical-align: top; }
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > tbody > tr:last-child > td { border-bottom: 0; }
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > tbody > tr:hover > td { background: #f6f8fa; }
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) .orange-color { color: #8492a6; font-weight: 600; }
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) .mono { font-size: .95em; white-space: nowrap; color: #7c8aa0; }
html.dark .dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > thead > tr > td { background: #253041; color: #93a1b3; border-bottom-color: #2a384b; }
html.dark .dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > tbody > tr > td { border-bottom-color: #2a384b; color: #cdd7e3; }
html.dark .dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > tbody > tr:hover > td { background: #253041; }

/* ============================================================
   RED-TEAM UX FIXES — dossier (batch B3: consistency + emphasis + contrast)
   ============================================================ */
/* #12 contrast — darken tiny muted tokens toward ~4.5:1 */
.dossier-redesign .dossier-console > .dossier-toptabs > li.dz-rail-grp { color: #5b6b82; }
html.dark .dossier-redesign .dossier-console > .dossier-toptabs > li.dz-rail-grp { color: #9fb0c4; }
.dossier-redesign .ov-card-h { color: #5f6b7e; }
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > thead > tr > td { color: #5f6b7e; }
.dossier-redesign .dz-empty { color: #6b7686; }

/* #8 the "+" add-form togglers become real buttons (were bare text links) */
.dossier-redesign .show-form, .dossier-redesign .show-form-pencil, .dossier-redesign .show-statuses {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; text-decoration: none;
    background: #eef2f7; color: #46536b; border: 1px solid #dfe3ea; margin-left: 6px; vertical-align: middle;
}
.dossier-redesign .show-form:hover, .dossier-redesign .show-form-pencil:hover, .dossier-redesign .show-statuses:hover { background: #e2e8f0; color: #175a94; }
.dossier-redesign .show-form .glyphicon, .dossier-redesign .show-form-pencil .glyphicon, .dossier-redesign .show-statuses .glyphicon { top: 0; font-size: 12px; }
html.dark .dossier-redesign .show-form, html.dark .dossier-redesign .show-form-pencil, html.dark .dossier-redesign .show-statuses { background: #253041; color: #aab6c6; border-color: #3a4a5f; }

/* #6 emphasize critical signals in the identity bar */
.dossier-redesign .di-pills .stat-pill:first-child { background: #eaf2fb; border-color: #c5ddf2; color: #175a94; }
.dossier-redesign .di-pills .stat-pill:first-child .glyphicon { color: #1f6fb2; }
.dossier-redesign .di-pills .stat-pill.pill-danger { background: #d9534f; border-color: #d9534f; color: #fff; font-weight: 600; }
.dossier-redesign .di-pills .stat-pill.pill-danger .glyphicon { color: #fff; }

/* #11 identity bar overflow guard (long name / many pills) */
.dossier-redesign .dossier-identity { flex-wrap: wrap; }
.dossier-redesign .di-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dossier-redesign .di-pills { max-width: 100%; }

/* #4 unify the perf-eval panel to the ov-card look (was BS .panel) */
.dossier-redesign #dz-overview .panel { border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.04); overflow: hidden; margin-bottom: 16px; }
.dossier-redesign #dz-overview .panel > .panel-heading { padding: 9px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #5f6b7e; background: #fbfcfe; border-bottom: 1px solid #e3e8ef; }
.dossier-redesign #dz-overview .panel > .panel-heading .panel-title { font-size: 12px; font-weight: 700; }
html.dark .dossier-redesign #dz-overview .panel { background: #1f2937; border-color: #2a384b; }
html.dark .dossier-redesign #dz-overview .panel > .panel-heading { background: #253041; color: #93a1b3; border-color: #2a384b; }

/* #19 Financiar / Istoric tables — same compact, light-separator language as the rest */
.dossier-redesign #dz-financiar table.table, .dossier-redesign #dz-istoric table.table { font-size: 12.5px; }
.dossier-redesign #dz-financiar table.table > thead > tr > th, .dossier-redesign #dz-financiar table.table > thead > tr > td,
.dossier-redesign #dz-istoric table.table > thead > tr > th, .dossier-redesign #dz-istoric table.table > thead > tr > td {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #5f6b7e; background: #f6f8fa; border-bottom: 2px solid #e6eaef;
}
.dossier-redesign #dz-financiar table.table-bordered, .dossier-redesign #dz-istoric table.table-bordered { border: 0; }
.dossier-redesign #dz-financiar table.table-bordered > tbody > tr > td, .dossier-redesign #dz-istoric table.table-bordered > tbody > tr > td { border-left: 0; border-right: 0; border-top: 0; }
html.dark .dossier-redesign #dz-financiar table.table > thead > tr > th, html.dark .dossier-redesign #dz-financiar table.table > thead > tr > td,
html.dark .dossier-redesign #dz-istoric table.table > thead > tr > th, html.dark .dossier-redesign #dz-istoric table.table > thead > tr > td { background: #253041; color: #93a1b3; border-bottom-color: #2a384b; }

/* #1 stepper orientation: caption + legend + a distinct CURRENT step */
.dossier-redesign .dz-stepper-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 0; font-size: 12px; }
.dossier-redesign .dz-stepper-title { font-weight: 700; color: #1f2937; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.dossier-redesign .dz-stepper-cur { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: #175a94; }
.dossier-redesign .dz-stepper-cur .glyphicon { color: #1f6fb2; font-size: 12px; top: 1px; }
.dossier-redesign .dz-stepper-count { background: #eef2f7; color: #46536b; border-radius: 2rem; padding: 1px 9px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dossier-redesign .dz-stepper-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: #6b7686; font-size: 11px; }
.dossier-redesign .dz-stepper-legend .dz-lg { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dossier-redesign .dz-stepper-legend .dz-lg-done { background: #1f6fb2; }
.dossier-redesign .dz-stepper-legend .dz-lg-todo { background: #fff; border: 2px solid #c7d0dd; margin-left: 8px; }
.dossier-redesign .timeline-horizontal .dz-cur-step .timeline-badge { width: 19px !important; height: 19px !important; box-shadow: 0 0 0 4px rgba(31,111,178,.18); }
.dossier-redesign .timeline-horizontal .dz-cur-step p { color: #175a94 !important; font-weight: 700; }
html.dark .dossier-redesign .dz-stepper-title { color: #e2e8f0; }
html.dark .dossier-redesign .dz-stepper-cur, html.dark .dossier-redesign .dz-stepper-cur .glyphicon { color: #8fb3ee; }
html.dark .dossier-redesign .dz-stepper-count { background: #253041; color: #aab6c6; }
html.dark .dossier-redesign .dz-stepper-legend { color: #7c8aa0; }
html.dark .dossier-redesign .dz-stepper-legend .dz-lg-done { background: #3f7fd6; }
html.dark .dossier-redesign .dz-stepper-legend .dz-lg-todo { background: #253041; border-color: #3f4f63; }
html.dark .dossier-redesign .timeline-horizontal .dz-cur-step p { color: #8fb3ee !important; }

/* #25 phone pill is a real tel: link */
.dossier-redesign .di-pills .stat-pill-link { text-decoration: none; cursor: pointer; }
.dossier-redesign .di-pills .stat-pill-link:hover { background: #eaf2fb; border-color: #c5ddf2; color: #175a94; }
html.dark .dossier-redesign .di-pills .stat-pill-link:hover { background: #26344a; border-color: #3f5170; color: #8fb3ee; }

/* B4 — AJAX sub-tab loading / error state (was: blank pane) */
.dossier-redesign .dz-loading { padding: 22px 12px; text-align: center; color: #6b7686; font-size: 13px; }
.dossier-redesign .dz-loading-err { color: #b42a1e; }
.dossier-redesign .dz-loading .dz-retry { color: #175a94; text-decoration: underline; cursor: pointer; margin-left: 4px; }
.dossier-redesign .dz-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid #c7d0dd; border-top-color: #1f6fb2; border-radius: 50%; vertical-align: -2px; margin-right: 4px; animation: dz-spin .7s linear infinite; }
@keyframes dz-spin { to { transform: rotate(360deg); } }
html.dark .dossier-redesign .dz-loading { color: #8a97a8; }
html.dark .dossier-redesign .dz-spin { border-color: #3f4f63; border-top-color: #6f9be6; }
@media (prefers-reduced-motion: reduce) { .dossier-redesign .dz-spin { animation: none; } }

/* "Relații & activitate" (#dz-oper): grouped PILL sub-nav + carded content.
   Was a row of plain, unstyled text links with no active/hover affordance. */
.dossier-redesign .employee-view-tabs { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 6px 7px !important; border: 0 !important; padding: 0 !important; margin: 0 0 14px !important; }
.dossier-redesign .employee-view-tabs > li { float: none !important; flex: 0 0 auto !important; margin: 0 !important; }
/* the pill itself (overrides view.php inline 20%-grid + top-only radius via specificity+!important) */
.dossier-redesign .employee-view-tabs > li > a {
  display: inline-flex !important; align-items: center; justify-content: flex-start !important; gap: 6px;
  height: auto !important; min-height: 0 !important; text-align: left !important;
  padding: 6px 12px !important; border-radius: 8px !important; line-height: 1.25;
  font-size: 12.5px; font-weight: 600; color: #475569;
  background: #f3f5f9; border: 1px solid #e4e9f0;
  transition: background .12s, color .12s, border-color .12s, box-shadow .12s;
}
.dossier-redesign .employee-view-tabs > li > a .glyphicon { font-size: 12px; color: #94a3b8; }
.dossier-redesign .employee-view-tabs > li > a:hover { background: #eef4fb; color: #1f6fb2; border-color: #cfe0f3; }
.dossier-redesign .employee-view-tabs > li > a:hover .glyphicon { color: #1f6fb2; }
.dossier-redesign .employee-view-tabs > li > a.active,
.dossier-redesign .employee-view-tabs > li.active > a { background: #1f6fb2 !important; color: #fff !important; border-color: #1f6fb2 !important; box-shadow: 0 1px 3px rgba(31,111,178,.28); }
.dossier-redesign .employee-view-tabs > li > a.active .glyphicon,
.dossier-redesign .employee-view-tabs > li.active > a .glyphicon { color: #fff; }
/* count/state badges inside pills */
.dossier-redesign .employee-view-tabs > li > a .badge { margin-left: 2px !important; background: #eef1f5; color: #5f6b7e; border-radius: 10px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; }
.dossier-redesign .employee-view-tabs > li > a.active .badge,
.dossier-redesign .employee-view-tabs > li.active > a .badge { background: rgba(255,255,255,.24); color: #fff; }
/* group headers break the row into labeled sections */
.dossier-redesign .employee-view-tabs .dz-subgrp { flex: 0 0 100% !important; width: 100% !important; margin: 12px 0 3px !important; padding: 0; border: 0; }
.dossier-redesign .employee-view-tabs .dz-subgrp:first-of-type { margin-top: 0 !important; }
.dossier-redesign .employee-view-tabs .dz-subgrp span { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #94a3b8; padding-left: 2px; }
.dossier-redesign .employee-view-tabs .dz-status-pill { display: none; } /* relocated to Overview by reorgDossier */
/* the sub-tab content sits in a clean card */
.dossier-redesign #dz-oper .tab-content { background: #fff; border: 1px solid #e6eaf1; border-radius: 11px; box-shadow: 0 1px 2px rgba(16,24,40,.04); padding: 16px 18px 18px; }
.dossier-redesign #dz-oper .tab-content > .tab-pane .page-title:first-child,
.dossier-redesign #dz-oper .tab-content h3.page-title { margin-top: 0; }
html.dark .dossier-redesign .employee-view-tabs > li > a { background: #1f2937; border-color: #33404f; color: #c8d2df; }
html.dark .dossier-redesign .employee-view-tabs > li > a .glyphicon { color: #7c899c; }
html.dark .dossier-redesign .employee-view-tabs > li > a:hover { background: #253041; color: #6f9be6; border-color: #3a5170; }
html.dark .dossier-redesign .employee-view-tabs > li > a:hover .glyphicon { color: #6f9be6; }
html.dark .dossier-redesign .employee-view-tabs > li > a .badge { background: #2a384b; color: #9fb0c3; }
html.dark .dossier-redesign .employee-view-tabs .dz-subgrp span { color: #7c899c; }
html.dark .dossier-redesign #dz-oper .tab-content { background: #1f2937; border-color: #2a384b; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
/* the individual sub-tab panes (#history, #couple_employee, #complaint_pane, …)
   carry their own white background (base/theme) that covers the dark wrapper —
   let them show the dark .tab-content through (their inner tables/panels have
   their own dark rules). */
html.dark .dossier-redesign #dz-oper .tab-content > .tab-pane { background: transparent !important; }

/* B6 #16 — stepper dots carry hover detail (state + date); future steps dimmed for clarity */
.dossier-redesign .timeline-horizontal .timeline-item[title] { cursor: help; }
.dossier-redesign .timeline-horizontal .dz-future-step { opacity: .5; }
.dossier-redesign .timeline-horizontal .dz-future-step .timeline-badge { background: #cbd5e1 !important; box-shadow: none !important; }
html.dark .dossier-redesign .timeline-horizontal .dz-future-step .timeline-badge { background: #475569 !important; }

/* B6 #17 — Financiar in-tab jump nav (Balanță first) */
.dossier-redesign .dz-fin-nav { position: sticky; top: calc(var(--dz-header-h,62px) + 34px); z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px; margin: 0 0 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; }
.dossier-redesign .dz-fin-nav .dz-fin-jump { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: #334155; padding: 5px 11px; border: 1px solid #d5deea; border-radius: 6px; background: #fff; text-decoration: none; transition: background .12s, border-color .12s; }
.dossier-redesign .dz-fin-nav .dz-fin-jump:first-child { border-color: #b6d4ea; background: #eaf4fb; color: #175a94; }
.dossier-redesign .dz-fin-nav .dz-fin-jump:hover { background: #eef4fb; border-color: #9fc4e6; color: #175a94; }
.dossier-redesign .dz-fin-nav .glyphicon { font-size: 11px; opacity: .8; }
.dossier-redesign [id^="dz-fin-"] { scroll-margin-top: calc(var(--dz-header-h,62px) + 104px); }
.dossier-redesign .dz-fin-flash { animation: dz-fin-flash 1.2s ease-out; }
@keyframes dz-fin-flash { 0% { background: #fff7db; } 100% { background: transparent; } }
html.dark .dossier-redesign .dz-fin-nav { background: #1c2836; border-color: #33404f; }
html.dark .dossier-redesign .dz-fin-nav .dz-fin-jump { background: #23303f; border-color: #3a4a5c; color: #cdd7e3; }
html.dark .dossier-redesign .dz-fin-nav .dz-fin-jump:first-child { background: #1f3346; border-color: #35597a; color: #9fc4e6; }
html.dark .dossier-redesign .dz-fin-nav .dz-fin-jump:hover { background: #2a3a4c; border-color: #45657f; color: #cfe4f6; }
html.dark .dossier-redesign .dz-fin-flash { animation: dz-fin-flash-dark 1.2s ease-out; }
@keyframes dz-fin-flash-dark { 0% { background: #3a3826; } 100% { background: transparent; } }

/* ---- Dossier section/financial cards — dark bridge. These bodies + header bars
   were hardcoded #fff/#fbfcfe in custom.css with no dark counterpart, so in dark
   mode the full-width cards (identity, missions, cost-sheet, flux, balance) and
   the 2-column masonry cards rendered as white boxes. ---- */
html.dark .dossier-redesign .dossier-card,
html.dark .dossier-redesign .dossier-extra > .row { background: #1f2937; border-color: #2a384b; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
html.dark .dossier-redesign .dossier-card > .page-title { background: #253041; color: #93a1b3; border-bottom-color: #2a384b; }
/* general (outside .dz-pane) dossier table headers were #f8fafc */
html.dark .dossier-redesign .table-user-information thead td,
html.dark .dossier-redesign .table thead th { background: #253041; color: #93a1b3; border-bottom-color: #2a384b; }
/* striped odd rows: swap the light #f9f9f9 stripe for a subtle dark one (keep the
   dark cell text from the dz-pane rules readable); never touch a .success row */
html.dark .dossier-redesign .table-striped > tbody > tr:nth-of-type(odd):not(.success) > td,
html.dark .dossier-redesign .table-striped > tbody > tr:nth-of-type(odd):not(.success) > th { background: #202b3a; }
/* "current mission"/success tint: light green -> dark green, readable text */
html.dark .dossier-redesign .table > tbody > tr.success > td { background: #12352e; color: #d8e4dd; }
/* inline labels inside the section cards (e.g. cost-sheet "Scutirea lunară:") */
html.dark .dossier-redesign .dossier-card .form-inline > label { color: #cbd5e1; }

/* B6 #13 — inline status-change form (was hidden behind a +Add toggle) */
.dossier-redesign .dz-status-form { display: block; margin: 2px 0 16px; padding: 12px 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; max-width: 540px; }
.dossier-redesign .dz-status-form label { font-size: 12px; font-weight: 600; color: #64748b; margin-bottom: 4px; }
.dossier-redesign .dz-status-form #ajax-load:not(:empty) { margin-top: 10px; }
html.dark .dossier-redesign .dz-status-form { background: #1c2836; border-color: #33404f; }
html.dark .dossier-redesign .dz-status-form label { color: #93a1b3; }

/* B3 #27 — Date personale: flow the (tight-inline) pairs into 2 columns. The row
   layout itself comes from the base .ov-kv rules above; here we only split the
   list into two masonry columns with a divider. */
@media (min-width: 768px) {
  .dossier-redesign .ov-card-2col table.ov-kv tbody { column-count: 2; column-gap: 34px; column-rule: 1px solid #eef1f6; }
  .dossier-redesign .ov-card-2col table.ov-kv tr { break-inside: avoid; }
}
html.dark .dossier-redesign .ov-card-2col table.ov-kv tbody { column-rule-color: #2a384b; }

/* #20 — dossier save-feedback toasts */
#dz-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 12000; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.dz-toast { display: flex; align-items: center; gap: 9px; min-width: 210px; max-width: 360px; padding: 10px 14px; border-radius: 9px; font-size: 13px; font-weight: 500; color: #1f2937; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 8px 24px rgba(15,23,42,.16); opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; pointer-events: auto; }
.dz-toast.dz-toast-in { opacity: 1; transform: none; }
.dz-toast .dz-toast-ico { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; font-size: 11px; font-weight: 700; color: #fff; flex: 0 0 auto; }
.dz-toast-success { border-color: #bfe6cd; }
.dz-toast-success .dz-toast-ico { background: #15a05f; }
.dz-toast-error { border-color: #f0c4c0; }
.dz-toast-error .dz-toast-ico { background: #c0392b; }
.dz-toast-busy .dz-spin { border-top-color: #1f6fb2; }
.dz-toast-msg { line-height: 1.3; }
html.dark .dz-toast { background: #253041; color: #cdd7e3; border-color: #3a4a5c; box-shadow: 0 8px 24px rgba(0,0,0,.45); }

/* #26 — quick-note inline input on the overview note card */
.dossier-redesign .dz-quicknote { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; }
.dossier-redesign .dz-quicknote .dz-qn-text { flex: 1 1 auto; min-height: 38px; resize: vertical; font-size: 13px; }
.dossier-redesign .dz-quicknote .dz-qn-save { flex: 0 0 auto; white-space: nowrap; }
.dossier-redesign .dz-note-table .dz-qn-new > td { animation: dz-qn-flash 1.4s ease-out; }
@keyframes dz-qn-flash { 0% { background: #fff7db; } 100% { background: transparent; } }
html.dark .dossier-redesign .dz-note-table .dz-qn-new > td { animation: dz-qn-flash-dark 1.4s ease-out; }
@keyframes dz-qn-flash-dark { 0% { background: #3a3826; } 100% { background: transparent; } }

/* ============ Overview redesign (usability red-team): one clean 2-lane grid ============
   Was: nested Bootstrap col-md-6 > (col-md-6 + col-md-6) → 3+ ragged card widths + cramped
   left column. Now: reference data (left, wider) | assessment+activity (right). Uniform 16px
   rhythm, consistent card width per lane, no masonry raggedness. */
.dossier-redesign .dz-ov-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: 16px; align-items: start; }
.dossier-redesign .dz-ov-main,
.dossier-redesign .dz-ov-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dossier-redesign .dz-ov-main > *,
.dossier-redesign .dz-ov-side > * { margin: 0 !important; }
.dossier-redesign .dz-ov-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* status/note/links mounts render bare Bootstrap .row blocks — neutralize row/col so they fill the lane */
.dossier-redesign .dz-ov-side .row { margin-left: 0 !important; margin-right: 0 !important; }
.dossier-redesign .dz-ov-side [class*="col-md-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 1200px) { .dossier-redesign .dz-ov-grid { grid-template-columns: 1fr; } }

/* ---- Stepper: calm the "wall of blue dots" — completed steps neutral, only CURRENT is the blue accent ---- */
.dossier-redesign .timeline-horizontal .timeline-badge.current-status { background: #c3cede !important; border-color: #c3cede !important; box-shadow: none !important; }
.dossier-redesign .timeline-horizontal .dz-cur-step .timeline-badge { background: #1f6fb2 !important; border-color: #1f6fb2 !important; box-shadow: 0 0 0 3px rgba(31,111,178,.20) !important; }
html.dark .dossier-redesign .timeline-horizontal .timeline-badge.current-status { background: #3f4f63 !important; border-color: #3f4f63 !important; }
html.dark .dossier-redesign .timeline-horizontal .dz-cur-step .timeline-badge { background: #3f7fd6 !important; border-color: #3f7fd6 !important; }

/* ---- Side lane: make Statuturi / Notiță / Linkuri consistent cards with the small card-header tier ---- */
.dossier-redesign .dz-ov-side .page-title { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; color: #5f6b7e !important; }
html.dark .dossier-redesign .dz-ov-side .page-title { color: #93a1b3 !important; }
.dossier-redesign .dz-ov-side .page-title a { font-size: 12px; }
.dossier-redesign .dz-ov-side > #ov-note-mount,
.dossier-redesign .dz-ov-side > #ov-links-mount { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 1px 2px rgba(20,30,45,.05); overflow: hidden; }
html.dark .dossier-redesign .dz-ov-side > #ov-note-mount,
html.dark .dossier-redesign .dz-ov-side > #ov-links-mount { background: #1f2937; border-color: #2a384b; }
/* the INNER relocated .row (id #blk-note / #blk-links) had background:#fff in
   custom.css with no dark twin — it covered the dark mount container with white */
html.dark .dossier-redesign #ov-note-mount > .row,
html.dark .dossier-redesign #ov-links-mount > .row { background: #1f2937 !important; border-color: #2a384b !important; }
.dossier-redesign .dz-ov-side #ov-note-mount .col-md-12,
.dossier-redesign .dz-ov-side #ov-links-mount .col-md-12 { padding: 0 14px 12px !important; }
.dossier-redesign .dz-ov-side #ov-note-mount .page-title,
.dossier-redesign .dz-ov-side #ov-links-mount .page-title { margin: 0 -14px 12px !important; padding: 9px 14px !important; background: #fbfcfe; border-bottom: 1px solid #e3e8ef; }
html.dark .dossier-redesign .dz-ov-side #ov-note-mount .page-title,
html.dark .dossier-redesign .dz-ov-side #ov-links-mount .page-title { background: #253041; border-color: #2a384b; }

/* ============ Status hero (redesign): identity + current status + progress + flags + actions ============ */
.dossier-redesign .dz-hero { background: #fff; border: 1px solid #e3e8ef; border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 14px rgba(16,24,40,.05); overflow: hidden; margin-bottom: 16px; }
html.dark .dossier-redesign .dz-hero { background: #1f2937; border-color: #2a384b; box-shadow: 0 1px 2px rgba(0,0,0,.35); }
.dossier-redesign .dz-hero-top { display: flex; align-items: center; gap: 18px; padding: 16px 22px; }
.dossier-redesign .dz-hero-av { flex: 0 0 auto; width: 78px; height: 92px; border-radius: 10px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: #e2e8f0; border: 1px solid #d3dced; color: #5b6b82; font-size: 26px; font-weight: 700; text-decoration: none; }
.dossier-redesign .dz-hero-av img { display: block; max-width: 160px; object-fit: initial !important; height: 200px !important; width: auto !important; }
.dossier-redesign .dz-hero-top { align-items: flex-start; }
.dossier-redesign .dz-hero-id { align-self: center; }
.dossier-redesign .dz-hero-id { flex: 1 1 auto; min-width: 0; }
.dossier-redesign .dz-hero-name { font-size: 21px; font-weight: 700; letter-spacing: -.2px; color: #1f2937; line-height: 1.15; }
html.dark .dossier-redesign .dz-hero-name { color: #eef2f7; }
.dossier-redesign .dz-hero-meta { display: flex; align-items: center; flex-wrap: wrap; margin-top: 6px; color: #64748b; font-size: 13px; }
.dossier-redesign .dz-hero-meta .m { display: inline-flex; align-items: center; gap: 6px; color: #4a5568; text-decoration: none; }
.dossier-redesign .dz-hero-meta .m .glyphicon { font-size: 12px; color: #94a3b8; }
.dossier-redesign .dz-hero-meta .sep { color: #cbd5e1; padding: 0 11px; }
.dossier-redesign .dz-hero-meta .mono { font-family: var(--bs-font-monospace); }
.dossier-redesign .dz-hero-meta .of { color: #94a3b8; }
.dossier-redesign .dz-hero-tel:hover { color: #1f6fb2; }
html.dark .dossier-redesign .dz-hero-meta .m { color: #bcc7d6; }
.dossier-redesign .dz-hero-quals { display: flex; align-items: center; flex-wrap: wrap; margin-top: 4px; color: #64748b; font-size: 13px; }
.dossier-redesign .dz-hero-quals .q { display: inline-flex; align-items: center; gap: 6px; color: #4a5568; }
.dossier-redesign .dz-hero-quals .q .glyphicon { font-size: 12px; color: #94a3b8; }
.dossier-redesign .dz-hero-quals .qv { font-weight: 600; color: #334155; }
.dossier-redesign .dz-hero-quals .sep { color: #cbd5e1; padding: 0 11px; }
html.dark .dossier-redesign .dz-hero-quals { color: #bcc7d6; }
html.dark .dossier-redesign .dz-hero-quals .q { color: #bcc7d6; }
html.dark .dossier-redesign .dz-hero-quals .qv { color: #eef2f7; }
.dossier-redesign .dz-hero-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dossier-redesign .dz-hero-btn { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid #d5deea; background: #fff; color: #334155; text-decoration: none; }
.dossier-redesign .dz-hero-btn .glyphicon { font-size: 12px; opacity: .8; }
.dossier-redesign .dz-hero-btn:hover { background: #f4f7fb; border-color: #b9c6d8; color: #1f6fb2; }
.dossier-redesign .dz-hero-btn-primary { background: #1f6fb2 !important; border-color: #1f6fb2 !important; color: #fff !important; }
.dossier-redesign .dz-hero-btn-primary:hover { background: #175a94 !important; border-color: #175a94 !important; }
html.dark .dossier-redesign .dz-hero-btn { background: #23303f; border-color: #3a4a5c; color: #cdd7e3; }
.dossier-redesign .dz-hero-strip { display: flex; align-items: center; gap: 26px; padding: 14px 22px; border-top: 1px solid #eceff4; background: #fbfcfe; }
html.dark .dossier-redesign .dz-hero-strip { background: #1b2531; border-top-color: #2a384b; }
.dossier-redesign .dz-hero-cap { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 5px; }
.dossier-redesign .dz-hero-status { flex: 0 1 auto; min-width: 0; max-width: 320px; }
.dossier-redesign .dz-hero-statusval { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #1f6fb2; line-height: 1.25; }
.dossier-redesign .dz-hero-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #1f6fb2; box-shadow: 0 0 0 4px #eef5fb; }
html.dark .dossier-redesign .dz-hero-dot { box-shadow: 0 0 0 4px rgba(31,111,178,.2); }
.dossier-redesign .dz-hero-vdiv { flex: 0 0 auto; width: 1px; align-self: stretch; min-height: 40px; background: #e3e8ef; }
html.dark .dossier-redesign .dz-hero-vdiv { background: #2a384b; }
/* current-employer segment (mirrors .dz-hero-status; briefcase + linked beneficiar + position) */
.dossier-redesign .dz-hero-employer .dz-hero-statusval .glyphicon { font-size: 13px; color: #8492a6; }
.dossier-redesign .dz-hero-employer .dz-hero-statusval a { color: #1f6fb2; }
.dossier-redesign .dz-hero-employer .dz-hero-statusval a:hover { text-decoration: underline; }
.dossier-redesign .dz-hero-emppos { font-size: 11.5px; color: #8492a6; font-weight: 500; margin-top: 3px; padding-left: 21px; }
html.dark .dossier-redesign .dz-hero-employer .dz-hero-statusval a { color: #6f9be6; }
html.dark .dossier-redesign .dz-hero-emppos { color: #8a97a8; }
.dossier-redesign .dz-hero-prog { flex: 1 1 auto; min-width: 130px; }
.dossier-redesign .dz-hero-prog-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; }
.dossier-redesign .dz-hero-count { font-family: var(--bs-font-monospace); font-size: 13px; color: #475569; }
.dossier-redesign .dz-hero-count b { color: #1f6fb2; }
.dossier-redesign .dz-hero-count .tot { color: #94a3b8; }
.dossier-redesign .dz-hero-track { height: 7px; border-radius: 99px; background: #e6ebf2; overflow: hidden; }
html.dark .dossier-redesign .dz-hero-track { background: #2a384b; }
.dossier-redesign .dz-hero-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2a7cc0, #1f6fb2); }
.dossier-redesign .dz-hero-prog-foot { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; font-size: 11.5px; color: #94a3b8; }
.dossier-redesign .dz-traseu-toggle { color: #1f6fb2; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; }
.dossier-redesign .dz-traseu-toggle .glyphicon { font-size: 9px; }
.dossier-redesign .dz-traseu-toggle:hover { text-decoration: underline; }
.dossier-redesign .dz-hero-flags { flex: 0 0 auto; display: flex; gap: 9px; }
.dossier-redesign .dz-hero-chip { display: flex; flex-direction: column; gap: 3px; padding: 7px 12px; border-radius: 9px; border: 1px solid #e3e8ef; background: #fff; }
html.dark .dossier-redesign .dz-hero-chip { background: #23303f; border-color: #3a4a5c; }
.dossier-redesign .dz-hero-chip .ck { font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
.dossier-redesign .dz-hero-chip .cv { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #334155; }
.dossier-redesign .dz-hero-chip .cv .glyphicon { font-size: 11px; }
.dossier-redesign .dz-hero-chip .cv .mono { font-family: var(--bs-font-monospace); font-size: 12px; font-weight: 700; }
.dossier-redesign .dz-hero-chip.red { background: #fdf3f2; border-color: #f2cfcd; } .dossier-redesign .dz-hero-chip.red .cv { color: #d9534f; }
.dossier-redesign .dz-hero-chip.green { background: #eefaf3; border-color: #c6ecd6; } .dossier-redesign .dz-hero-chip.green .cv { color: #15a05f; }
html.dark .dossier-redesign .dz-hero-chip.red { background: #3a1e21; border-color: #7a3a40; }
html.dark .dossier-redesign .dz-hero-chip.green { background: #143024; border-color: #2f5f43; }
.dossier-redesign .dz-traseu-full { padding: 6px 14px 12px; border-top: 1px solid #eceff4; }
html.dark .dossier-redesign .dz-traseu-full { border-top-color: #2a384b; }
@media (max-width: 992px) {
  .dossier-redesign .dz-hero-top { flex-wrap: wrap; }
  .dossier-redesign .dz-hero-actions { width: 100%; justify-content: flex-start; }
  .dossier-redesign .dz-hero-strip { flex-wrap: wrap; }
  .dossier-redesign .dz-hero-vdiv { display: none; }
}

/* Evaluare tab: contain the perf-eval panel (was in a narrow side lane, don't stretch it full-width) */
.dossier-redesign #dz-eval .dz-eval-wrap { max-width: 780px; }

/* Control intern folded into the Date personale card as a full-width bottom row (out of the 2-col flow) */
.dossier-redesign .ov-card-2col .dz-ov-control { border-top: 1px solid #eceff4; }
.dossier-redesign .ov-card-2col .dz-ov-control table.ov-kv tbody { column-count: 1 !important; column-rule: none !important; }
html.dark .dossier-redesign .ov-card-2col .dz-ov-control { border-top-color: #2a384b; }

/* Hero: big photo panel spanning the full hero height (top-left); name/meta/actions + status/progress sit to its right */
.dossier-redesign .dz-hero { display: grid; grid-template-columns: auto minmax(0,1fr); grid-template-areas: "photo top" "photo strip" "full full"; }
.dossier-redesign .dz-hero > .dz-hero-av { grid-area: photo; align-self: start; width: auto; height: auto; max-width: 164px; margin: 16px 2px 16px 18px; border-radius: 10px; background: transparent; }
.dossier-redesign .dz-hero > .dz-hero-av.dz-hero-av-empty { width: 116px; height: 146px; background: #e2e8f0; }
.dossier-redesign .dz-hero > .dz-hero-top { grid-area: top; align-items: center; padding-left: 12px; }
.dossier-redesign .dz-hero > .dz-hero-strip { grid-area: strip; padding-left: 12px; }
.dossier-redesign .dz-hero > .dz-traseu-full { grid-area: full; }
@media (max-width: 992px) {
  .dossier-redesign .dz-hero { grid-template-columns: 1fr; grid-template-areas: "photo" "top" "strip" "full"; }
  .dossier-redesign .dz-hero > .dz-hero-av { align-self: start; margin: 16px 0 0 18px; }
  .dossier-redesign .dz-hero-av img { max-width: 130px; max-height: 156px; }
  .dossier-redesign .dz-hero > .dz-hero-top, .dossier-redesign .dz-hero > .dz-hero-strip { padding-left: 22px; }
}

/* Hero: "no photo" placeholder — centered person silhouette on a light backdrop */
.dossier-redesign .dz-hero-av-empty { background: #eef1f5 !important; }
.dossier-redesign .dz-hero-av-empty .dz-hero-av-ph { width: 54%; height: auto; fill: #aeb8c6; }
html.dark .dossier-redesign .dz-hero-av-empty { background: #253041 !important; }
html.dark .dossier-redesign .dz-hero-av-empty .dz-hero-av-ph { fill: #55637a; }

/* Breadcrumb — cleaner, modern look: subtle pill trail, chevron separators, muted links,
   the current page bold. Replaces the plain "/" Bootstrap breadcrumb. */
.dossier-redesign .breadcrumb, #page-container .breadcrumb { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 1px; margin: 0; padding: 4px 6px; background: #fff; border: 1px solid #e6eaf0; border-radius: 9px; box-shadow: 0 1px 2px rgba(20,30,45,.04); font-size: 12.5px; }
.breadcrumb .breadcrumb-item { display: inline-flex; align-items: center; color: #64748b; text-decoration: none; padding: 3px 9px; border-radius: 6px; font-weight: 500; transition: background .12s, color .12s; }
.breadcrumb .breadcrumb-item:hover { background: #eef4fb; color: #1f6fb2; }
.breadcrumb .breadcrumb-item:last-child { color: #334155; font-weight: 600; }
.breadcrumb .breadcrumb-item:first-child::before { content: "\2302"; font-size: 13px; margin-right: 5px; color: #94a3b8; }
.breadcrumb .breadcrumb-item + .breadcrumb-item { padding-left: 9px; }
.breadcrumb .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; float: none; display: inline-block; color: #cbd5e1; font-weight: 400; padding: 0 8px 0 0; }
/* logo swap: the default logo has BLACK text (invisible on the dark header) —
   show the light-text variant in dark mode (gold snowflake preserved). */
.dz-logo-dark { display: none; }
html.dark .dz-logo-light { display: none; }
html.dark .dz-logo-dark { display: inline-block; }

html.dark #page-container .breadcrumb { background: #1f2937; border-color: #2a384b; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
/* !important beats OneUI's high-specificity `html.dark a:not(...)` link rule
   (a ~16-:not() chain, oneui.css) that otherwise forces every breadcrumb link to
   the bright #547de3 link-blue instead of this muted breadcrumb tone. */
html.dark .breadcrumb .breadcrumb-item { color: #93a1b3 !important; }
html.dark .breadcrumb .breadcrumb-item:hover { background: #23303f; color: #6f9be6 !important; }
html.dark .breadcrumb .breadcrumb-item:last-child { color: #cdd7e3 !important; font-weight: 600; }
html.dark .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #55637a; }

/* ============ Candidate add/edit form (_form.php): grouped section cards ============
   Was a dense ungrouped 2-column wall of fields on the bare page. Fields are now
   wrapped in labeled .dz-fs cards (contiguous runs, no field moved). */
.dz-eform { margin: 4px 0 22px; }
/* section card */
.dz-eform .dz-fs { background: #fff; border: 1px solid #e6eaf1; border-radius: 11px; box-shadow: 0 1px 2px rgba(16,24,40,.04); padding: 2px 18px 14px; margin: 0 0 16px; }
html.dark .dz-eform .dz-fs { background: #1f2937; border-color: #2a384b; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
/* section heading */
.dz-eform .dz-fs-h { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1f6fb2; padding: 13px 2px 10px; margin-bottom: 12px; border-bottom: 1px solid #eef1f5; }
html.dark .dz-eform .dz-fs-h { color: #6f9be6; border-bottom-color: #2a384b; }
/* two lanes: keep the BS columns, small symmetric gutter, no divider (cards separate) */
.dz-eform > .name-row > .col-md-6:first-child { padding-right: 9px; }
.dz-eform > .name-row > .col-md-6 + .col-md-6 { padding-left: 9px; }
/* consistent vertical rhythm; trim the last field's gap inside a card */
.dz-eform fieldset.form-group { margin-bottom: 15px; }
.dz-eform .dz-fs > fieldset.form-group:last-child { margin-bottom: 4px; }
/* clean field labels (direct-child only, so inline radio/checkbox labels are untouched) */
.dz-eform fieldset.form-group > label:first-child { display: block; font-size: 12px; font-weight: 600; color: #5f6b7e; margin-bottom: 5px; letter-spacing: .01em; }
html.dark .dz-eform fieldset.form-group > label:first-child { color: #93a1b3; }
/* radio/checkbox option labels stay inline (not stacked), normal weight */
.dz-eform fieldset.form-group > label:not(:first-child) { display: inline-flex; align-items: center; gap: 5px; font-weight: 400; color: #334155; margin: 0 16px 0 0; }
html.dark .dz-eform fieldset.form-group > label:not(:first-child) { color: #cbd5e1; }
.dz-eform .form-control { border-radius: 8px; }
.dz-eform small { color: #94a3b8; font-size: 11.5px; }
.dz-eform #ajaxValidation { margin-top: 4px; }
/* "Dosar Definitivat" (extrainfo) is one wide card; its <center><label> act as sub-headings */
.dz-eform .dz-fs-ext > .row > .col-md-12 > center > label,
.dz-eform .dz-fs-ext > .row > center > label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #1f6fb2; text-align: left; padding: 10px 0 6px; margin: 14px 0 8px; border-bottom: 1px solid #eef1f5; }
.dz-eform .dz-fs-ext > .row > .col-md-12 > center > h2 { text-align: left; font-size: 15px; font-weight: 700; color: #1f2d3d; margin: 0 0 4px; }
html.dark .dz-eform .dz-fs-ext > .row > .col-md-12 > center > h2 { color: #e6edf5; }
@media (max-width: 991px) {
  .dz-eform > .name-row > .col-md-6:first-child { padding-right: 12px; }
  .dz-eform > .name-row > .col-md-6 + .col-md-6 { padding-left: 12px; }
}

/* ============================================================================
   DOSSIER STANDARDIZATION — generalize the redesign look to ALL panes
   (Documente, Financiar, Istoric, Evaluare, and the Relații sub-content).
   #dz-overview and table.dz-hist keep their own id/specific rules (higher
   specificity), so these broader rules only fill in the un-styled panes.
   ============================================================================ */

/* --- Section headings (h3.page-title / h3.panel-title) as uppercase section labels --- */
.dossier-redesign #dz-docs .page-title,
.dossier-redesign #dz-financiar .page-title,
.dossier-redesign #dz-istoric .page-title,
.dossier-redesign #dz-eval .page-title,
.dossier-redesign #dz-oper .tab-content .page-title {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #5f6b7e; margin: 2px 0 11px; padding: 0 0 8px; border-bottom: 1px solid #eef1f5;
}
html.dark .dossier-redesign #dz-docs .page-title,
html.dark .dossier-redesign #dz-financiar .page-title,
html.dark .dossier-redesign #dz-istoric .page-title,
html.dark .dossier-redesign #dz-eval .page-title,
html.dark .dossier-redesign #dz-oper .tab-content .page-title { color: #93a1b3; border-bottom-color: #2a384b; }
.dossier-redesign .dz-pane .page-title.task-error { color: #C01518 !important; border-bottom-color: #f2c9ca; }
.dossier-redesign .dz-pane .page-title a { float: right; text-decoration: none; }

/* --- Clean tables across every pane (broad; overview + .dz-hist keep their own) --- */
.dossier-redesign .dz-pane table.table-user-information:not(.ov-kv),
.dossier-redesign .dz-pane table.cost-sheet-table,
.dossier-redesign .dz-pane table.table-bordered:not(.ov-kv) {
  font-size: 12.5px; width: 100%; margin: 0 0 8px; border-collapse: separate; border-spacing: 0; background: transparent;
}
.dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > thead > tr > td,
.dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > thead > tr > th,
.dossier-redesign .dz-pane table.table-bordered:not(.ov-kv) > thead > tr > td,
.dossier-redesign .dz-pane table.table-bordered:not(.ov-kv) > thead > tr > th {
  padding: .5rem .6rem; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #8492a6; background: #f6f8fb; border-bottom: 1px solid #e6eaf1; white-space: nowrap; text-align: left; vertical-align: middle;
}
.dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > tbody > tr > td,
.dossier-redesign .dz-pane table.table-bordered:not(.ov-kv) > tbody > tr > td {
  padding: .45rem .6rem; border-bottom: 1px solid #eef1f5; border-left: 0; border-right: 0; vertical-align: middle; color: #334155;
}
.dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > tbody > tr:last-child > td { border-bottom: 0; }
.dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > tbody > tr:not(.active):not(.info):not(.warning):not(.success):not(.danger):hover > td:not([style*="background"]) { background: #f6f8fa; }
.dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) .orange-color { color: #8492a6; font-weight: 600; }
.dossier-redesign .dz-pane table td .glyphicon-trash,
.dossier-redesign .dz-pane table td .glyphicon-remove { color: #9aa4b2; }
.dossier-redesign .dz-pane table td a:hover .glyphicon-trash,
.dossier-redesign .dz-pane table td a:hover .glyphicon-remove { color: #c0392b; }
html.dark .dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > thead > tr > td,
html.dark .dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > thead > tr > th,
html.dark .dossier-redesign .dz-pane table.table-bordered:not(.ov-kv) > thead > tr > td,
html.dark .dossier-redesign .dz-pane table.table-bordered:not(.ov-kv) > thead > tr > th { background: #253041; color: #93a1b3; border-bottom-color: #2a384b; }
html.dark .dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > tbody > tr > td,
html.dark .dossier-redesign .dz-pane table.table-bordered:not(.ov-kv) > tbody > tr > td { border-bottom-color: #2a384b; color: #cdd7e3; }
html.dark .dossier-redesign .dz-pane table.table-user-information:not(.ov-kv) > tbody > tr:hover > td:not([style*="background"]) { background: #253041; }

/* --- BS3 panels → cards (docs traverses, MIA, financiar, performance panel) --- */
.dossier-redesign #dz-docs .panel,
.dossier-redesign #dz-financiar .panel,
.dossier-redesign #dz-eval .panel,
.dossier-redesign #dz-oper .tab-content .panel {
  border: 1px solid #e3e8ef; border-radius: 10px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  overflow: hidden; margin-bottom: 16px; background: #fff;
}
.dossier-redesign #dz-docs .panel > .panel-heading,
.dossier-redesign #dz-financiar .panel > .panel-heading,
.dossier-redesign #dz-eval .panel > .panel-heading,
.dossier-redesign #dz-oper .tab-content .panel > .panel-heading {
  padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: #5f6b7e; background: #fbfcfe; border-bottom: 1px solid #e3e8ef;
}
.dossier-redesign #dz-docs .panel > .panel-heading .panel-title,
.dossier-redesign #dz-financiar .panel > .panel-heading .panel-title,
.dossier-redesign #dz-eval .panel > .panel-heading .panel-title,
.dossier-redesign #dz-oper .tab-content .panel > .panel-heading .panel-title { font-size: 12px; font-weight: 700; margin: 0; }
.dossier-redesign #dz-docs .panel > .panel-body,
.dossier-redesign #dz-financiar .panel > .panel-body,
.dossier-redesign #dz-eval .panel > .panel-body { padding: 14px; }
html.dark .dossier-redesign #dz-docs .panel,
html.dark .dossier-redesign #dz-financiar .panel,
html.dark .dossier-redesign #dz-eval .panel,
html.dark .dossier-redesign #dz-oper .tab-content .panel { background: #1f2937; border-color: #2a384b; }
html.dark .dossier-redesign #dz-docs .panel > .panel-heading,
html.dark .dossier-redesign #dz-financiar .panel > .panel-heading,
html.dark .dossier-redesign #dz-eval .panel > .panel-heading,
html.dark .dossier-redesign #dz-oper .tab-content .panel > .panel-heading { background: #253041; color: #93a1b3; border-color: #2a384b; }

/* --- Forms inside dossier panes: match the edit-form field styling --- */
.dossier-redesign .dz-pane fieldset.form-group { margin-bottom: 13px; }
.dossier-redesign .dz-pane fieldset.form-group > label:first-child {
  display: block; font-size: 12px; font-weight: 600; color: #5f6b7e; margin-bottom: 5px; letter-spacing: .01em;
}
.dossier-redesign .dz-pane fieldset.form-group > label:not(:first-child) {
  display: inline-flex; align-items: center; gap: 5px; font-weight: 400; color: #334155; margin: 0 16px 0 0;
}
.dossier-redesign .dz-pane .form-control { border-radius: 8px; }
.dossier-redesign .dz-pane .btn { border-radius: 8px; }
.dossier-redesign .dz-pane .scrollable350 { max-height: 380px; overflow: auto; }
html.dark .dossier-redesign .dz-pane fieldset.form-group > label:first-child { color: #93a1b3; }
html.dark .dossier-redesign .dz-pane fieldset.form-group > label:not(:first-child) { color: #cbd5e1; }

/* --- "Arhivează dosar" (#blk-folderclose, moved into #dz-docs) → its own card --- */
.dossier-redesign #blk-folderclose > div {
  background: #fff; border: 1px solid #e6eaf1; border-radius: 11px; box-shadow: 0 1px 2px rgba(16,24,40,.04);
  padding: 14px 18px 18px; margin-bottom: 16px;
}
.dossier-redesign #blk-folderclose > div > .page-title { margin-top: 0; }
.dossier-redesign #blk-folderclose > div > .hidden-field { margin-top: 4px; }
.dossier-redesign #blk-folderclose > div > .hidden-field br { display: none; }
html.dark .dossier-redesign #blk-folderclose > div { background: #1f2937; border-color: #2a384b; box-shadow: 0 1px 2px rgba(0,0,0,.3); }

/* --- Each file-handling section (physical file / ready-for-archive / debit.md) in its
       OWN card, before Arhivează dosar (moved by reorgDossier into #dz-docs-handling-mount) --- */
.dossier-redesign .dz-doc-card { padding: 14px 18px 16px; }
.dossier-redesign .dz-doc-card > #dz-blk-fizic,
.dossier-redesign .dz-doc-card > #dz-blk-arhivare,
.dossier-redesign .dz-doc-card > #dz-blk-debit { float: none; width: 100%; padding-left: 0; padding-right: 0; margin: 0; }
.dossier-redesign .dz-doc-card > #dz-blk-arhivare > .col-md-12,
.dossier-redesign .dz-doc-card > #dz-blk-debit > .col-md-12 { float: none; width: 100%; padding-left: 0; padding-right: 0; }
.dossier-redesign .dz-doc-card > #dz-blk-arhivare > .col-md-12:first-child > .page-title,
.dossier-redesign .dz-doc-card > #dz-blk-debit > .col-md-12:first-child > .page-title { margin-top: 0; }
/* flatten the DOSAR FIZIC panel so its card isn't a card-in-card */
.dossier-redesign .dz-doc-card #dz-blk-fizic .panel { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0 !important; overflow: visible !important; }
.dossier-redesign .dz-doc-card #dz-blk-fizic .panel > .panel-heading { background: transparent !important; border: 0 !important; border-bottom: 1px solid #eef1f5 !important; border-radius: 0 !important; padding: 0 0 9px !important; margin: 0 0 11px !important; }
.dossier-redesign .dz-doc-card #dz-blk-fizic .panel > .panel-body { padding: 0 !important; }
html.dark .dossier-redesign .dz-doc-card #dz-blk-fizic .panel > .panel-heading { border-bottom-color: #2a384b !important; }

/* --- Empty states: a clear "Nu există date" instead of a blank/half-broken table --- */
.dossier-redesign .dz-pane td.dz-empty-cell {
  text-align: center !important; color: #94a3b8 !important; font-style: italic;
  font-weight: 400 !important; padding: 16px 8px !important; background: #fbfcfe; border-bottom: 0 !important;
}
.dossier-redesign .dz-pane .dz-empty-block {
  text-align: center; color: #94a3b8; font-style: italic; margin: 4px 0 0;
  padding: 18px; border: 1px dashed #dfe5ee; border-radius: 10px; background: #fbfcfe;
}
html.dark .dossier-redesign .dz-pane td.dz-empty-cell { color: #7c899c !important; background: #202b3a; }
html.dark .dossier-redesign .dz-pane .dz-empty-block { color: #7c899c; border-color: #33404f; background: #202b3a; }

/* --- Financiar: money-flow type card (title + totals row) --- */
.dossier-redesign #dz-financiar .dz-flow-head { margin: 6px 0 6px; padding: 0; }
.dossier-redesign #dz-financiar .dz-flow-title {
  float: none; width: 100%; padding: 6px 2px 8px !important; margin: 0;
  text-align: left !important; font-size: 12px !important; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #1f6fb2; border-bottom: 1px solid #eef1f5;
}
html.dark .dossier-redesign #dz-financiar .dz-flow-title { color: #6f9be6; border-bottom-color: #2a384b; }
/* totals row (last row when there IS data) reads as a summary */
.dossier-redesign #dz-financiar table.table-user-information > tbody > tr:last-child:not(.dz-empty-row) > td {
  border-top: 2px solid #e6eaf1; border-bottom: 0; font-weight: 600; background: #fafbfd; color: #1f2d3d;
}
html.dark .dossier-redesign #dz-financiar table.table-user-information > tbody > tr:last-child:not(.dz-empty-row) > td { border-top-color: #33404f; background: #253041; color: #e2e8f0; }

/* --- Financiar: cost-sheet key-value table (label <th> + value <td> + emphasis rows) --- */
.dossier-redesign #dz-financiar table.cost-sheet-table { max-width: 680px; border: 1px solid #e6eaf1; border-radius: 10px; overflow: hidden; }
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr > th {
  width: 58%; text-align: left; font-weight: 600; color: #5f6b7e; background: #fbfcfe;
  padding: .45rem .7rem; border-bottom: 1px solid #eef1f5; vertical-align: top;
}
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr > td {
  padding: .45rem .7rem; border-bottom: 1px solid #eef1f5; vertical-align: top; color: #334155; font-variant-numeric: tabular-nums;
}
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr:last-child > th,
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr:last-child > td { border-bottom: 0; }
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.active > th,
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.active > td { background: #eef2f7; font-weight: 700; color: #1f2d3d; }
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.info > th,
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.info > td { background: #e8f3fb; }
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.warning > th,
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.warning > td { background: #fdf3e3; }
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.success > th,
.dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.success > td { background: #e6f5ec; font-weight: 700; color: #12603a; }
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table { border-color: #2a384b; }
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr > th { background: #202b3a; color: #93a1b3; border-bottom-color: #2a384b; }
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr > td { border-bottom-color: #2a384b; color: #cdd7e3; }
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.active > th,
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.active > td { background: #2b3a4f; color: #e2e8f0; }
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.info > th,
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.info > td { background: #1e3a46; }
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.warning > th,
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.warning > td { background: #3a3320; }
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.success > th,
html.dark .dossier-redesign #dz-financiar table.cost-sheet-table > tbody > tr.success > td { background: #12352e; color: #9be6c4; }
/* the money-flow / missions grids get horizontal scroll, not squashed columns */
.dossier-redesign #dz-financiar .table-responsive { border: 0; }

/* --- Financiar: cost sheets ("cartele de pontaj") → 2-column grid of collapsible
   cards. Each vertical sheet is tall (~28 rows); stacked full-width they swallow the
   whole tab, so collapse them behind a compact summary header (offer / beneficiary /
   total incl. VAT) and lay two per row. First card open, rest collapsed. --- */
.dossier-redesign #dz-financiar .dz-cost-toolbar { display: flex; gap: 6px; margin: 0 0 10px; }
.dossier-redesign #dz-financiar .dz-cost-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start;
}
@media (max-width: 1199px) { .dossier-redesign #dz-financiar .dz-cost-grid { grid-template-columns: 1fr; } }
.dossier-redesign #dz-financiar .dz-cost-card { border: 1px solid #e6eaf1; border-radius: 10px; overflow: hidden; background: #fff; }
.dossier-redesign #dz-financiar .dz-cost-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 12px; margin: 0; background: #fbfcfe; border: 0; border-bottom: 1px solid transparent;
  text-align: left; cursor: pointer; font: inherit; color: #1f2d3d; transition: background .12s;
}
.dossier-redesign #dz-financiar .dz-cost-card.dz-open .dz-cost-head { border-bottom-color: #e6eaf1; }
.dossier-redesign #dz-financiar .dz-cost-head:hover { background: #f1f5fb; }
.dossier-redesign #dz-financiar .dz-cost-head-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dossier-redesign #dz-financiar .dz-cost-offer { font-size: 12.5px; font-weight: 700; color: #1f2d3d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier-redesign #dz-financiar .dz-cost-benef { font-size: 11.5px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier-redesign #dz-financiar .dz-cost-benef .glyphicon { font-size: 10px; margin-right: 3px; opacity: .7; }
.dossier-redesign #dz-financiar .dz-cost-head-meta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.dossier-redesign #dz-financiar .dz-cost-total { font-size: 13px; font-weight: 700; color: #12603a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dossier-redesign #dz-financiar .dz-cost-chev { font-size: 11px; color: #8492a6; transition: transform .15s ease; }
.dossier-redesign #dz-financiar .dz-cost-card.dz-open .dz-cost-chev { transform: rotate(180deg); }
.dossier-redesign #dz-financiar .dz-cost-body { padding: 2px 12px 8px; }
.dossier-redesign #dz-financiar .dz-cost-card:not(.dz-open) .dz-cost-body { display: none; }
/* inside a card the sheet is full-width; the card supplies the frame */
.dossier-redesign #dz-financiar .dz-cost-card table.cost-sheet-table { max-width: none; border: 0; border-radius: 0; margin: 0; }
html.dark .dossier-redesign #dz-financiar .dz-cost-card { background: #1f2937; border-color: #2a384b; }
html.dark .dossier-redesign #dz-financiar .dz-cost-head { background: #253041; color: #e2e8f0; }
html.dark .dossier-redesign #dz-financiar .dz-cost-card.dz-open .dz-cost-head { border-bottom-color: #2a384b; }
html.dark .dossier-redesign #dz-financiar .dz-cost-head:hover { background: #2b3a4f; }
html.dark .dossier-redesign #dz-financiar .dz-cost-offer { color: #e2e8f0; }
html.dark .dossier-redesign #dz-financiar .dz-cost-benef { color: #93a1b3; }
html.dark .dossier-redesign #dz-financiar .dz-cost-total { color: #9be6c4; }

/* ============================================================================
   ONE canonical table-header standard — every column-title row looks identical
   across the candidate list AND all dossier tables (was: 3 divergent looks —
   list=sentence/600/#5c6675, overview=UPPER/#7c8aa0, panes=UPPER/#8492a6).
   Appended last so it wins by source order; sticky/frozen/sort rules (separate
   selectors) are untouched, so behavior is preserved.
   ============================================================================ */
.grid-view-table > table.entries > thead > tr > th,
.grid-view-table > table.entries > thead > tr > td,
.dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > thead > tr > td,
.dossier-redesign table.dz-hist > thead > tr > td,
.dossier-redesign .dz-pane table:not(.ov-kv):not(.cost-sheet-table) > thead > tr > td,
.dossier-redesign .dz-pane table:not(.ov-kv):not(.cost-sheet-table) > thead > tr > th {
  background: #f4f6fa;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-bottom: 2px solid #e4e9f0;
  padding: .5rem .65rem;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
}
html.dark .grid-view-table > table.entries > thead > tr > th,
html.dark .grid-view-table > table.entries > thead > tr > td,
html.dark .dossier-redesign #dz-overview table.table-user-information:not(.ov-kv) > thead > tr > td,
html.dark .dossier-redesign table.dz-hist > thead > tr > td,
html.dark .dossier-redesign .dz-pane table:not(.ov-kv):not(.cost-sheet-table) > thead > tr > td,
html.dark .dossier-redesign .dz-pane table:not(.ov-kv):not(.cost-sheet-table) > thead > tr > th {
  background: #253041;
  color: #93a1b3;
  border-bottom-color: #33404f;
}

/* ============ Home / Pagina principală — welcome landing (not inside .dossier-redesign) ============ */
.dz-home { max-width: 1120px; margin: 4px auto 24px; }
.dz-home-hero { background: linear-gradient(135deg,#1f6fb2,#2c8fd6); color:#fff; border-radius:14px; padding:26px 30px; box-shadow:0 2px 10px rgba(31,111,178,.22); }
.dz-home-eyebrow { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }
.dz-home-eyebrow .glyphicon { font-size:11px; margin-right:2px; }
.dz-home-title { font-size:26px; font-weight:800; margin:6px 0 4px; color:#fff; line-height:1.15; }
.dz-home-sub { margin:0; opacity:.92; font-size:14px; }
.dz-home-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; margin-top:18px; }
.dz-home-tile { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:22px 12px; background:#fff; border:1px solid #e6eaf1; border-radius:12px; box-shadow:0 1px 2px rgba(16,24,40,.04); color:#334155; text-decoration:none; transition:transform .12s,box-shadow .12s,border-color .12s,color .12s; }
.dz-home-tile:hover, .dz-home-tile:focus { transform:translateY(-2px); box-shadow:0 6px 16px rgba(16,24,40,.10); border-color:#cfe0f3; color:#1f6fb2; text-decoration:none; }
.dz-home-ico { width:52px; height:52px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:#eef4fb; color:#1f6fb2; transition:background .12s,color .12s; }
.dz-home-ico .glyphicon { font-size:22px; }
.dz-home-tile:hover .dz-home-ico { background:#1f6fb2; color:#fff; }
.dz-home-lbl { font-size:13.5px; font-weight:600; text-align:center; }
html.dark .dz-home-hero { box-shadow:0 2px 10px rgba(0,0,0,.35); }
html.dark .dz-home-tile { background:#1f2937; border-color:#2a384b; color:#c8d2df; }
html.dark .dz-home-tile:hover { border-color:#3a5170; color:#6f9be6; }
html.dark .dz-home-ico { background:#253041; color:#6f9be6; }
html.dark .dz-home-tile:hover .dz-home-ico { background:#1f6fb2; color:#fff; }

/* ==== User: role permission form (_form_role.php) — CSS-only reskin ==== */
/* The role form markup is load-bearing (visible_fields[]/permission[] name arrays +
   the Security::methods() loop + serialize round-trip) so we style, never restructure. */
.role-option {
    background: #fff;
    border: 1px solid #e4e9f0;
    border-radius: .6rem;
    padding: 0 18px 14px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(16,24,40,.05);
}
/* module header bar; the checkbox inside is the "select all permissions" master */
.role-option .page-header {
    margin: 0 -18px 14px;
    padding: 12px 18px;
    border: 0;
    border-bottom: 1px solid #eef1f6;
    background: #f6f8fb;
    border-radius: .6rem .6rem 0 0;
}
.role-option .page-header h4 { margin: 0; font-size: 15px; font-weight: 700; color: #1e293b; }
.role-option .page-header h4 label { margin: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; }
.role-option .page-header input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: #1f6fb2; flex: 0 0 auto; }

/* each fieldset = a labeled group; its checkboxes flow as a readable chip grid */
.role-option fieldset.form-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 0 0 2px; padding: 0; border: 0; }
.role-option fieldset.form-group > label { flex: 0 0 100%; margin: 12px 0 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.role-option fieldset.form-group br { display: none; }

/* permission / visible-field checkbox -> bordered chip; checked = highlighted so
   the enabled permissions are obvious at a glance */
.role-option .form-check.form-check-inline {
    margin: 0; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 34px; padding: 5px 13px 5px 11px;
    border: 1px solid #dbe0ea; border-radius: .45rem; background: #fff;
    cursor: pointer; transition: background-color .12s ease, border-color .12s ease;
}
.role-option .form-check.form-check-inline:hover { background: #f2f6fc; border-color: #c3d0e2; }
.role-option .form-check-input { margin: 0; float: none; cursor: pointer; }
.role-option .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(31,111,178,.2); }
.role-option .form-check-label { margin: 0; cursor: pointer; font-size: 13px; color: #334155; }
.role-option .form-check.form-check-inline:has(.form-check-input:checked) { background: #e8f1fb; border-color: #9dc0e8; }
.role-option .form-check-input:checked + .form-check-label { color: #14507f; font-weight: 600; }
.role-option .panel-group, .role-option .panel { margin-bottom: 10px; }

html.dark .role-option { background: #1f2937; border-color: #2a384b; box-shadow: none; }
html.dark .role-option .page-header { background: #253041; border-bottom-color: #33404f; }
html.dark .role-option .page-header h4 { color: #dbe4f0; }
html.dark .role-option fieldset.form-group > label { color: #99a8bd; }
html.dark .role-option .form-check.form-check-inline { background: #253041; border-color: #3a4a5f; }
html.dark .role-option .form-check.form-check-inline:hover { background: #2d3b4f; border-color: #4a5d75; }
html.dark .role-option .form-check.form-check-inline:has(.form-check-input:checked) { background: #1e3a5f; border-color: #2f6dad; }
html.dark .role-option .form-check-label { color: #c3cede; }
html.dark .role-option .form-check-input:checked + .form-check-label { color: #a9cef0; }

/* destructive permissions (delete/remove, class perm-del) highlight RED when
   enabled — in any group — so they stand out from the blue view/add ones */
.role-option .form-check.form-check-inline:has(.form-check-input.perm-del:checked) { background: #fdecec; border-color: #e6a9a9; }
.role-option .form-check-input.perm-del:checked { accent-color: #b42318; }
.role-option .form-check-input.perm-del:checked + .form-check-label { color: #b42318; }
html.dark .role-option .form-check.form-check-inline:has(.form-check-input.perm-del:checked) { background: #3a1f22; border-color: #7a3a3a; }
html.dark .role-option .form-check-input.perm-del:checked + .form-check-label { color: #f0a5a5; }

/* ============================================================
   Pagination — Helpers/Paginator.php emits Bootstrap-3 markup
   (<ul class="pagination"> > <li> > <a>/<span>, plus li.active / li.disabled).
   BS5 only styles .page-item/.page-link, so the bare li>a rendered as tiny
   unstyled text links ("«12»"). Bridge the BS3 markup to OneUI pills here.
   (oneui-compat.css loads only on OneUI pages, so BS3 templates are untouched.)
   ============================================================ */
ul.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0; margin: 14px 0 4px; list-style: none; }
ul.pagination > li { display: inline-flex; margin: 0; }
ul.pagination > li > a,
ul.pagination > li > span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.125rem; height: 2.125rem; padding: 0 .55rem;
    border: 1px solid #dbe0ea; border-radius: .375rem; float: none;
    background: #fff; color: #1f6fb2; font-size: .8125rem; font-weight: 500; line-height: 1;
    text-decoration: none; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
ul.pagination > li > a:hover,
ul.pagination > li > a:focus { background: #eef4fb; border-color: #b9c6da; color: #14507f; }
ul.pagination > li.active > span,
ul.pagination > li.active > a { background: #1f6fb2; border-color: #1f6fb2; color: #fff; cursor: default; }
ul.pagination > li.disabled > a,
ul.pagination > li.disabled > span { color: #9aa7b8; background: #f5f7fa; border-color: #e5e9f0; pointer-events: none; }
/* the "…" ellipsis spacer (Paginator emits it with inline border:none;background:none) */
ul.pagination > li > span[style*="border"] { border: 0 !important; background: none !important; color: #9aa7b8; min-width: 1rem; padding: 0 .25rem; }
nav:has(> ul.pagination) { margin-top: 4px; }

html.dark ul.pagination > li > a,
html.dark ul.pagination > li > span { background: #253041; border-color: #3a4a5f; color: #7fb2e6; }
html.dark ul.pagination > li > a:hover,
html.dark ul.pagination > li > a:focus { background: #2d3b4f; border-color: #4a5d75; color: #a9cef0; }
html.dark ul.pagination > li.active > span,
html.dark ul.pagination > li.active > a { background: #1f6fb2; border-color: #1f6fb2; color: #fff; }
html.dark ul.pagination > li.disabled > a,
html.dark ul.pagination > li.disabled > span { background: #1c2532; border-color: #2a384b; color: #5f6d7e; }
html.dark ul.pagination > li > span[style*="border"] { color: #5f6d7e; background: none !important; }

/* ============================================================
   Photo thumbnails — BS3 .thumbnail was removed in BS5, so the office/
   employer/offer photo grids (.col-md-* .photos > .thumbnail > img + delete)
   rendered unstyled (raw img + a stray trash icon). Style them as photo cards.
   ============================================================ */
.photos { position: relative; margin-bottom: 14px; }
.photos .thumbnail { position: relative; margin: 0; padding: 4px; border: 1px solid #dbe0ea; border-radius: .5rem; background: #fff; overflow: hidden; }
.photos .thumbnail > a.showModal,
.photos > a.showModal { display: block; }
.photos img { display: block; width: 100%; height: 150px; object-fit: cover; border-radius: .35rem; border: 1px solid #dbe0ea; background: #f6f7f9; }
.photos .thumbnail img { border: 0; }
.photos a.remove {
    position: absolute; top: 8px; right: 8px; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: .35rem;
    background: rgba(255,255,255,.92); border: 1px solid #e5e9f0; color: #d9534f;
    box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.photos a.remove:hover, .photos a.remove:focus { background: #d9534f; border-color: #d9534f; color: #fff; }
.photos a.remove i { margin: 0; }

html.dark .photos .thumbnail { background: #253041; border-color: #3a4a5f; }
html.dark .photos img { border-color: #3a4a5f; background: #1c2532; }
html.dark .photos a.remove { background: rgba(37,48,65,.92); border-color: #3a4a5f; color: #f08a8a; }
html.dark .photos a.remove:hover { background: #d9534f; border-color: #d9534f; color: #fff; }

/* ============================================================
   Buttons glued to the bottom edge of a card.
   OneUI's .block-content has padding-bottom:1px — it assumes the last child
   carries the bottom margin. Legacy views drop a bare action button (the
   "Caută/Search" submit on filter cards, or a submit at the end of a form)
   straight into .block-content, so with no margin it sat flush against the
   card's bottom edge. Restore a normal bottom gutter for ANY block whose last
   element is such a button — directly, or as the last child of a trailing form.
   Only cards ending in a button are touched; cards ending in .form-group (which
   already carry their own margin) are left alone, so nothing gets double-spaced.
   ============================================================ */
.block-content:has(> .btn:last-child),
.block-content:has(> input[type="submit"]:last-child),
.block-content:has(> button[type="submit"]:last-child),
.block-content:has(> form:last-child > .btn:last-child),
.block-content:has(> form:last-child > input[type="submit"]:last-child),
.block-content:has(> form:last-child > button[type="submit"]:last-child) {
    padding-bottom: 1.25rem;
}
/* Guaranteed fallback for the advanced-search filter cards (employer users,
   offices, …) even where :has() is unavailable. */
#advanced-search-fields.block-content { padding-bottom: 1.25rem; }
/* A little breathing room above the filter submit so it isn't glued to the
   last row of fields either. */
#advanced-search-fields > .btn,
#advanced-search-fields input[type="submit"],
#advanced-search-fields button[type="submit"] { margin-top: .5rem; }

/* ============================================================
   Sortable (drag-and-drop rank) lists — e.g. folder-state/sortable.
   The legacy jQuery-UI `.ui-state-default` look (thin grey gradient bars, list
   bullets, a detached icon sprite) rendered broken inside OneUI. Style each
   item as a clean, full-width draggable row with a drag-handle glyph.
   ============================================================ */
ul.sortable-drag-and-drop { list-style: none; margin: 0; padding: 0; width: 100%; }
ul.sortable-drag-and-drop li {
    display: flex; align-items: center; gap: .625rem;
    margin: 0 0 .5rem; padding: .6rem .9rem;
    height: auto; font-size: 1rem; color: #33404f; cursor: grab;
    background: #fff; border: 1px solid #e5e9f0; border-radius: .5rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
ul.sortable-drag-and-drop li::before {
    content: "\2261"; /* ≡ drag handle */
    color: #b3bdca; font-size: 1.05rem; line-height: 1; flex: 0 0 auto;
}
ul.sortable-drag-and-drop li:hover { border-color: #c7d0dc; background: #f8fafc; }
ul.sortable-drag-and-drop li .ui-icon { display: none; } /* hide the old jQuery-UI sprite */
ul.sortable-drag-and-drop li.ui-sortable-helper { cursor: grabbing; box-shadow: 0 8px 20px rgba(0,0,0,.15); }
/* the gap shown at the drop target while dragging */
ul.sortable-drag-and-drop .ui-sortable-placeholder,
ul.sortable-drag-and-drop li.ui-state-highlight {
    visibility: visible !important; height: 2.4rem;
    background: #eef2f7; border: 1px dashed #b3bdca; border-radius: .5rem;
}

/* ============================================================
   jQuery-UI datepicker (.datepicker/.datesearch/.passport/.date-range/…) —
   re-skin the dated grey-gradient jQuery-UI look into an OneUI card, light + dark.
   The widget is appended to <body> (outside .dossier-redesign), so selectors are
   global and the dark variant keys off html.dark. Pure CSS; no behaviour change.
   ============================================================ */
.ui-datepicker.ui-widget {
    width: 19em; padding: 8px; margin-top: 4px;
    background: #fff; border: 1px solid #dbe2ec; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(16,24,40,.14);
    font-family: inherit; font-size: 13px; z-index: 1200 !important;
}
.ui-datepicker .ui-datepicker-header {
    position: relative; background: transparent; border: 0; border-radius: 0;
    padding: 2px 0 8px; margin: 0; font-weight: 600;
}
/* prev/next -> clean circular hover buttons with a crisp CSS chevron */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 2px; width: 28px; height: 28px; border-radius: 7px; cursor: pointer;
    background: transparent; border: 1px solid transparent;
}
.ui-datepicker .ui-datepicker-prev { left: 2px; }
.ui-datepicker .ui-datepicker-next { right: 2px; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: #eef4fb; border-color: #d5e3f2; top: 2px;
    left: 2px; /* jQuery-UI shifts hover by 1px; keep it steady */
}
.ui-datepicker .ui-datepicker-next:hover { left: auto; right: 2px; }
.ui-datepicker .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-next .ui-icon {
    background: none !important; text-indent: 0; overflow: hidden;
    font-size: 0; /* hide jQuery-UI's localized "Precedent"/"Următorul" label */
    width: 100%; height: 100%; margin: 0; left: 0; top: 0;
}
.ui-datepicker .ui-datepicker-prev .ui-icon::before,
.ui-datepicker .ui-datepicker-next .ui-icon::before {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #5a6678; font-size: 15px; font-weight: 700; line-height: 1;
}
.ui-datepicker .ui-datepicker-prev .ui-icon::before { content: "\2039"; } /* ‹ */
.ui-datepicker .ui-datepicker-next .ui-icon::before { content: "\203A"; } /* › */
/* month / year selects */
.ui-datepicker .ui-datepicker-title { margin: 0 30px; line-height: 28px; display: flex; gap: 6px; justify-content: center; }
.ui-datepicker .ui-datepicker-title select {
    height: 28px; padding: 2px 6px; font-size: 12.5px; color: #2b3440;
    background: #f6f8fb; border: 1px solid #dbe2ec; border-radius: 6px; cursor: pointer;
}
.ui-datepicker .ui-datepicker-title select:hover { border-color: #b6d4ea; }
/* calendar grid */
.ui-datepicker table.ui-datepicker-calendar { margin: 4px 0 0; font-size: 12.5px; border-collapse: separate; border-spacing: 1px; }
.ui-datepicker .ui-datepicker-calendar th {
    padding: 5px 0; font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
    text-transform: uppercase; color: #8a97a8;
}
.ui-datepicker .ui-datepicker-calendar td { padding: 1px; border: 0; }
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
    display: block; padding: 6px 0; text-align: center; border: 1px solid transparent;
    border-radius: 6px; background: transparent; color: #2b3440; font-weight: 500; text-decoration: none;
}
.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover { background: #eef4fb; border-color: #cfe0f2; color: #175a94; }
.ui-datepicker .ui-datepicker-calendar td a.ui-state-active { background: #1f6fb2; border-color: #1f6fb2; color: #fff; font-weight: 700; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { background: #eaf2fb; border-color: #cfe0f2; color: #175a94; font-weight: 700; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active { background: #1f6fb2; color: #fff; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span { color: #b3bdca; font-weight: 400; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end a,
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end span { color: #a94442; }
.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month.ui-datepicker-week-end a { color: #d9a7a7; }
/* footer (Today/Done buttons, if enabled) */
.ui-datepicker .ui-datepicker-buttonpane { border-top: 1px solid #eef1f5; margin: 6px -8px -8px; padding: 6px 8px; }
.ui-datepicker .ui-datepicker-buttonpane button { border-radius: 6px; }

/* ---- dark ---- */
html.dark .ui-datepicker.ui-widget { background: #1f2937; border-color: #2a384b; box-shadow: 0 10px 28px rgba(0,0,0,.5); }
html.dark .ui-datepicker .ui-datepicker-prev:hover,
html.dark .ui-datepicker .ui-datepicker-next:hover { background: #253041; border-color: #3a4a5f; }
html.dark .ui-datepicker .ui-datepicker-prev .ui-icon::before,
html.dark .ui-datepicker .ui-datepicker-next .ui-icon::before { color: #aab6c6; }
html.dark .ui-datepicker .ui-datepicker-title select { background: #253041; border-color: #3a4a5f; color: #dbe4f0; }
html.dark .ui-datepicker .ui-datepicker-title select:hover { border-color: #45657f; }
html.dark .ui-datepicker .ui-datepicker-calendar th { color: #7c8aa0; }
html.dark .ui-datepicker .ui-datepicker-calendar td a,
html.dark .ui-datepicker .ui-datepicker-calendar td span { color: #cdd7e3; }
html.dark .ui-datepicker .ui-datepicker-calendar td a.ui-state-hover { background: #253041; border-color: #35597a; color: #9fc4e6; }
html.dark .ui-datepicker .ui-datepicker-calendar td a.ui-state-active { background: #3f7fd6; border-color: #3f7fd6; color: #fff; }
html.dark .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a { background: #1f3346; border-color: #35597a; color: #9fc4e6; }
html.dark .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today a.ui-state-active { background: #3f7fd6; color: #fff; }
html.dark .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month a,
html.dark .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-other-month span { color: #55637a; }
html.dark .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end a,
html.dark .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-week-end span { color: #e88a8d; }
html.dark .ui-datepicker .ui-datepicker-buttonpane { border-top-color: #2a384b; }

/* ============================================================
   Login page polish (scoped to .dz-login / .dz-login-page). Works in light and
   dark (the card itself is a OneUI .block so it themes automatically; here we add
   the brand accent, segmented language control, input icons and page backdrop).
   ============================================================ */
.dz-login-page .hero-static {
    background-image:
        radial-gradient(900px 460px at 50% -6%, rgba(200,151,27,.08), transparent 68%),
        radial-gradient(700px 420px at 50% 108%, rgba(31,111,178,.06), transparent 70%);
}
.dz-login-logo { max-width: 210px; height: auto; }
.dz-login .dz-logo-dark { display: none; }
html.dark .dz-login .dz-logo-light { display: none; }
html.dark .dz-login .dz-logo-dark { display: inline-block; }

/* segmented language pills */
.dz-login .dz-lang-seg { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border-radius: 10px; background: #eef1f5; border: 1px solid #e2e8f0; }
.dz-login .dz-lang-opt { margin: 0; cursor: pointer; }
.dz-login .dz-lang-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.dz-login .dz-lang-opt > span { display: block; padding: 5px 18px; border-radius: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #64748b; transition: background .12s, color .12s, box-shadow .12s; }
.dz-login .dz-lang-opt:hover > span { color: #1f6fb2; }
.dz-login .dz-lang-opt input:checked + span { background: #fff; color: #1f6fb2; box-shadow: 0 1px 2px rgba(16,24,40,.14); }
.dz-login .dz-lang-opt input:focus-visible + span { outline: 2px solid #9fc4e6; outline-offset: 1px; }
html.dark .dz-login .dz-lang-seg { background: #253041; border-color: #2a384b; }
html.dark .dz-login .dz-lang-opt > span { color: #93a1b3; }
html.dark .dz-login .dz-lang-opt:hover > span { color: #8fb3ee; }
html.dark .dz-login .dz-lang-opt input:checked + span { background: #1f2937; color: #8fb3ee; box-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* sign-in card: brand top accent + lift */
.dz-login .dz-login-card { border-top: 3px solid #c8971b; box-shadow: 0 12px 34px rgba(16,24,40,.12); overflow: hidden; }
html.dark .dz-login .dz-login-card { box-shadow: 0 14px 38px rgba(0,0,0,.5); }
.dz-login .dz-login-card .block-header-default { background: transparent; border-bottom: 1px solid #eef1f5; }
html.dark .dz-login .dz-login-card .block-header-default { border-bottom-color: #2a384b; }
.dz-login .dz-login-card .block-title { text-transform: uppercase; letter-spacing: .05em; font-size: 12.5px; font-weight: 700; color: #7c8aa0; }

/* input icons (input-group leading addon) */
.dz-login .input-group-text { background: #f6f8fb; border-color: #dbe2ec; color: #64748b; }
html.dark .dz-login .input-group-text { background: #253041; border-color: #3a4a5f; color: #93a1b3; }
.dz-login .form-label { font-size: 12.5px; font-weight: 600; color: #5f6b7e; }
html.dark .dz-login .form-label { color: #93a1b3; }
.dz-login .dz-login-reset { text-decoration: none; }
.dz-login .dz-login-reset:hover { text-decoration: underline; }