/* ================================================================
   PAGE HEADER — shared by list and details pages
   ================================================================ */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 16px;
}

.page-title {
    font-size: 1.25rem;
    font-weight: var(--fw-bold);
    color: var(--ink);
    margin: 0;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
}

.page-subtitle {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin: 1px 0 0;
}

/* Project Details header — an icon mark + the beneficiary name + its type as a soft pill, all on one
   line instead of a title/subtitle stack (Views/Projects/Details.cshtml only). */
.project-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .project-header-title .page-title {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.project-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent-hover);
}

.project-header-type {
    flex: 0 0 auto;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--card-2);
    border: 1px solid var(--border);
    color: var(--ink-2);
}
/* Acces pe proiect: a restricted project (Privat / Anumite roluri) — header pill, list lock, form section. */
.project-header-access {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--warn-soft);
    border: 1px solid var(--warn-line);
    color: var(--warn);
}

.grid-access-lock {
    display: inline-flex;
    vertical-align: -2px;
    margin-right: 6px;
    color: var(--warn);
}

.project-header-access[hidden],
.project-access-roles[hidden] {
    display: none;
}

.project-access {
    border-top: 1px solid var(--border);
    padding-top: 10px;
    margin-top: 4px;
}

.project-access-options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
}

.project-access-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--r-md);
    background: var(--card-2);
    border: 1px solid var(--border);
}

/* ================================================================
   LIST FILTER BAR
   ================================================================ */

.list-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Icon-in-input search box, matched to the reference's filter search: a leading icon sitting inside
   the field instead of the plain bordered box this used to be. */
.list-search {
    position: relative;
    display: flex;
}

    .list-search-icon {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-muted);
        pointer-events: none;
    }

.list-filter-input {
    height: 34px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    color: var(--ink-2);
    background: var(--card);
    outline: none;
    width: 260px;
}

    .list-filter-input:focus {
        border-color: var(--accent);
        box-shadow: var(--focus);
    }

    .list-filter-input::placeholder {
        color: var(--ink-muted);
    }

/* Filter-bar input without the leading search icon (e.g. a quantity box). */
.list-filter-input.list-filter-plain {
    padding-left: 10px;
}

/* Selects and date inputs in a list filter bar — same 34px box, border and type as the search input. */
.list-filter-select,
.list-filter-date {
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal, 400);
    color: var(--ink-2);
    background-color: var(--card);
    text-transform: none;
    letter-spacing: normal;
}

.list-filter-select {
    width: auto;
    max-width: 240px;
    padding: 0 30px 0 10px;
    background-position: right 10px center;
}

.list-filter-date {
    width: 140px;
    padding: 0 8px;
}

    .list-filter-select:focus,
    .list-filter-date:focus {
        border-color: var(--accent);
        box-shadow: var(--focus);
        outline: none;
    }

/* "de la — până la" pair of date filters. */
.list-filter-range {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal, 400);
}

/* Right side of a filter bar: counter + secondary actions (Export CSV). */
.list-filters-end {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

    .list-filters-end .btn {
        height: 34px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

/* A checkbox that lives in a filter bar (e.g. "și cantitățile 0"). */
.list-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal, 400);
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

/* Toggle chips in a filter bar — any number on at once (e.g. Utilizatori: firmă / invitați / sistem); each may carry its count. */
.list-filter-chips {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    background: var(--card);
}

.list-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 11px;
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--ink-muted);
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}

    .list-filter-chip:hover {
        background: var(--card-2);
        color: var(--ink-2);
    }

    .list-filter-chip[aria-pressed="true"] {
        background: var(--accent-soft);
        color: var(--accent-hover);
    }

    .list-filter-chip:focus-visible {
        outline: none;
        box-shadow: var(--focus);
    }

.list-filter-chip-n {
    min-width: 18px;
    padding: 0 5px;
    border-radius: var(--r-pill);
    background: var(--card-2);
    color: var(--ink-muted);
    font-size: var(--fs-3xs);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

    .list-filter-chip[aria-pressed="true"] .list-filter-chip-n {
        background: var(--card);
        color: var(--accent-hover);
    }

/* Several actions in the page header (secondary + primary CTA). */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

    .page-header-actions .btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

/* ================================================================
   DETAILS PANEL — card shell (variant C: accent rail + accent
   eyebrow header with a leading dot)
   ================================================================ */

.details-panel {
    position: relative;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--sh-card);
}

/* Placeholder body for a nav destination that exists but isn't built yet — see ComingSoon.cshtml,
   used by the Management stocuri / Rapoarte / Garanție nav groups until each gets a real page. */
.coming-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 56px 20px;
    text-align: center;
    color: var(--ink-muted);
}

.coming-soon-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-hover);
}

.coming-soon-title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.coming-soon-text {
    margin: 0;
    font-size: var(--fs-sm);
    max-width: 420px;
}

.details-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--ink);
    background: var(--card);
}

    .details-panel-header svg {
        color: var(--ink-2);
        flex: 0 0 auto;
    }

        /* An icon inside a button takes the button's text color (white on btn-primary, red on
           btn-outline-danger...) instead of the header's grey icon color above. */
        .details-panel-header .btn svg {
            color: inherit;
        }

.details-panel-body {
    padding: 20px 20px;
}

/* ================================================================
   TABULATOR — shared styling for all tables across the app
   NOTE: uses !important to beat the Tabulator stylesheet, which
   is loaded before this file but re-applies its own specificity.
   ================================================================ */

.tabulator {
    border: none !important;
    font-family: var(--font) !important;
    font-size: var(--fs-md) !important;
    background: var(--card) !important;
    /* Tabulator ships `transform: translateZ(0)` here as a paint hint. It also
       makes the grid its own stacking context, which would trap the header's
       z-index below the .details-panel accent rail (::after, z-index 1) and
       force an all-or-nothing choice. Dropping the hint (harmless on these
       small static grids) lets the header alone rise above the rail while the
       data rows stay behind it. */
    transform: none !important;
}

.tabulator .tabulator-header {
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    /* Paint over the .details-panel accent rail so the blue stub shows only
       next to the data rows, never the column-title row. */
    position: relative;
    z-index: 2;
}

.tabulator .tabulator-header .tabulator-col {
    background: var(--card) !important;
    border-right: none !important;
    color: var(--ink-muted);
    font-size: var(--fs-xs) !important;
    font-weight: var(--fw-bold) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--ls-label) !important;
    padding: 9px 14px !important;
}

.tabulator .tabulator-header .tabulator-col:hover {
    background: var(--card-2) !important;
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-sorter {
    color: var(--border);
}

.tabulator .tabulator-header .tabulator-col.tabulator-col-sorter-element:hover .tabulator-col-sorter {
    color: var(--ink-2);
}

.tabulator .tabulator-row {
    background: var(--card) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    transition: background var(--dur-fast);
}

.tabulator .tabulator-row.tabulator-row-even {
    background: var(--card-2) !important;
}

.tabulator .tabulator-row:hover {
    background: var(--border-soft) !important;
}

.tabulator .tabulator-row .tabulator-cell {
    border-right: none !important;
    padding: 11px 14px !important;
    color: var(--ink-2);
}

/* Cells opting into wrapping (e.g. long free-text columns) instead of the
   default single-line ellipsis truncation. Row height grows to fit. */
.tabulator .tabulator-row .tabulator-cell.wrap-cell {
    white-space: normal !important;
    word-break: break-word;
}

/* The app's top-level list pages (Proiecte, Utilizatori, Beneficiari, Societăți, plus every grid marked .list-grid —
   Roluri, Departamente and the stock module's lists and reports) — the whole point
   of a list is scanning many rows at once, so all four lean denser than the default row height (same
   reasoning as #deliverablesGrid below) and share this one rule instead of four separate copies. */
#projectsGrid .tabulator-row .tabulator-cell,
#usersGrid .tabulator-row .tabulator-cell,
#beneficiariGrid .tabulator-row .tabulator-cell,
#societatiGrid .tabulator-row .tabulator-cell,
.list-grid .tabulator-row .tabulator-cell {
    padding: 5px 14px !important;
}

/* Excludes .grid-primary-col — its own rule sets a different size (12.5px vs these grids' 13px), and
   since that rule has no #id in its selector, an ID-scoped rule would otherwise always win despite
   matching later in the file, whichever order the two end up in. */
#projectsGrid .tabulator-row .tabulator-cell:not(.grid-primary-col),
#usersGrid .tabulator-row .tabulator-cell:not(.grid-primary-col),
#beneficiariGrid .tabulator-row .tabulator-cell:not(.grid-primary-col),
#societatiGrid .tabulator-row .tabulator-cell:not(.grid-primary-col),
.list-grid .tabulator-row .tabulator-cell:not(.grid-primary-col) {
    font-size: var(--fs-sm) !important;
}

#projectsGrid .tabulator-header .tabulator-col,
#usersGrid .tabulator-header .tabulator-col,
#beneficiariGrid .tabulator-header .tabulator-col,
#societatiGrid .tabulator-header .tabulator-col,
.list-grid .tabulator-header .tabulator-col {
    padding: 6px 14px !important;
}

/* Shared "primary column" treatment — the first, identifying column of every top-level list page
   (Proiecte, Utilizatori, Beneficiari, Societăți): bold, and the same soft ink tone the reference
   uses for its patient-name treatment, instead of the grid's plain body color. One class, applied via
   each grid's own column def (cssClass), so a future tweak here updates every list at once. Not used
   inside Project Details' own embedded grids (Articole, Contacte, Echipă...) — those stay as they are. */
.tabulator-cell.grid-primary-col {
    font-size: 12.5px !important;
    font-weight: var(--fw-bold);
    color: #67707d;
}

/* Articole — no pagination (a project can have dozens of articles and the point of this grid is
   seeing all of them at once), so it leans denser than the app's other grids: smaller type, tighter
   padding, smaller stage icons — enough rows on screen that page-down is rarely needed, while staying
   readable (never below --fs-xs for real text, and stage icons stay a comfortable click target). */
#deliverablesGrid .tabulator-row .tabulator-cell {
    padding: 4px 8px !important;
    font-size: var(--fs-xs) !important;
}

#deliverablesGrid .tabulator-header .tabulator-col {
    padding: 5px 8px !important;
}

#deliverablesGrid .tabulator-cell.deliv-name {
    font-size: var(--fs-sm) !important;
}

/* Drag handle — Tabulator's stock #666, 3px-tall, full-width bars read too heavy against the rest of
   the condensed grid. Thinner, shorter, and faded down to a bare minimalist affordance. */
#deliverablesGrid .tabulator-row-handle-box {
    width: 50% !important;
}
#deliverablesGrid .tabulator-row-handle-bar {
    background: var(--ink-muted) !important;
    height: 1px !important;
    margin-top: 2px !important;
}

#deliverablesGrid .stage-ic,
#deliverablesGrid .stage--partial .ring {
    width: 18px !important;
    height: 18px !important;
}

#deliverablesGrid .stage--partial .ring svg {
    width: 18px;
    height: 18px;
}

#deliverablesGrid .stage-frac {
    font-size: 9px !important;
}

#deliverablesGrid .tabulator-row .tabulator-cell.deliv-toggle {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
}

/* Header row for the Articole panel: title/count on the left, the view toggle centered in the
   remaining space, contract-only actions on the right. */
.deliv-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.deliv-header-center {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

/* The deliverables panel header has 4 children (label, view toggle, and TWO action-button groups that
   swap visibility per view) sharing one flex row — with plain flex, showing/hiding the action buttons
   changes how much space is left for the centered toggle, so it visibly slides sideways on every view
   switch. Grid with two equal flanking columns pins the toggle to the row's true center regardless of
   which action group is visible; scoped to this one header only (.details-panel-header is shared by
   every other panel in the app, which must keep its plain flex layout).                                 */
#deliverablesSection .details-panel-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: 8px;
}
#deliverablesSection .deliv-header-left {
    grid-column: 1;
    justify-self: start;
}
#deliverablesSection .deliv-header-center {
    grid-column: 2;
    justify-self: center;
}
#deliverablesSection #delivContractActions,
#deliverablesSection #delivProductionActions {
    grid-column: 3;
    justify-self: end;
}

/* Contract / Producție / Etape segmented toggle — deliberately heavier than a normal in-header control
   since it decides which of three different grids (and column sets) is showing. */
.deliv-view-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm, none);
}
.deliv-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: var(--card);
    color: var(--ink-2);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: normal;
    padding: 8px 16px;
    cursor: pointer;
    transition: background var(--dur-fast), color var(--dur-fast);
}
.deliv-view-btn svg { flex: 0 0 auto; }
.deliv-view-btn + .deliv-view-btn {
    border-left: 1px solid var(--border);
}
.deliv-view-btn.is-active {
    background: var(--accent);
    color: var(--accent-ink);
}

/* "Pe producție" grid rows — one per article, master-detail (Data Tree) only once it has named
   subassemblies. */
#productionGrid .tabulator-row .tabulator-cell {
    padding: 4px 8px !important;
    font-size: var(--fs-xs) !important;
}
/* Tabulator's stock expand/collapse toggle is a plain dark square — restyle to match the app's palette. */
#productionGrid .tabulator-data-tree-control {
    background: var(--field-bg);
    border-color: var(--border);
}
#productionGrid .tabulator-data-tree-control-collapse:after,
#productionGrid .tabulator-data-tree-control-expand:after,
#productionGrid .tabulator-data-tree-control-expand {
    background: var(--ink-muted);
}
#productionGrid .tabulator-data-tree-branch {
    border-color: var(--border-soft);
}
/* Row status at a glance — green once Finalizat, red if nothing on the row has been touched yet,
   orange once something has (a serie, Model or Observații) but it's still not Finalizat. A dedicated
   faded orange here rather than the shared (browner/tan) --warn-soft token, which reads as amber. */
#productionGrid .tabulator-row.prod-row-done {
    background: var(--ok-soft) !important;
}
#productionGrid .tabulator-row.prod-row-partial {
    background: color-mix(in srgb, #f97316 18%, white) !important;
}
#productionGrid .tabulator-row.prod-row-empty {
    background: color-mix(in srgb, #ef4444 22%, white) !important;
}

/* _SerialsPanel.cshtml — reuses the .batch-pop/.batch-row/.batch-eyebrow shell from the batch popover. */
.sub-serial-row input {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--field-bg);
    padding: 4px 6px;
    font-size: var(--fs-sm);
    color: var(--ink);
}
.sub-serial-number { width: 40%; font-family: var(--mono); text-transform: uppercase; }
.js-add-serials-input { text-transform: uppercase; }
.sub-serial-tester { flex: 1 1 auto; }
.sub-add-serials {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.sub-add-serials textarea,
.sub-add-serials input[type="text"] {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--field-bg);
    padding: 6px 8px;
    font-size: var(--fs-sm);
    color: var(--ink);
    width: 100%;
}
.sub-preview {
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
    min-height: 1.2em;
}
.sub-preview.has-error { color: var(--danger); }

/* Societăți grid — "Șabloane PV" status column, 4 letter pills (P/I/F/R) at a glance; the whole cell opens
   the upload modal (see openTemplatesModal). Green+filled = uploaded, outline = still missing. */
.pv-stage-pills {
    display: flex;
    gap: 4px;
    cursor: pointer;
}
.pv-stage-pill {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--border);
    background: var(--field-bg);
    color: var(--ink-muted);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
}
.pv-stage-pill.has-template {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}

/* "Șabloane PV" modal (Societati/_TemplatesModal) — one card per stage, each an independent upload slot.
   Empty vs filled are deliberately different at a glance (dashed/muted vs solid/labeled actions), same
   spirit as the grid's own pv-stage-pill status. */
.pv-template-slots {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.pv-template-slot {
    padding: 10px 12px;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: var(--field-bg);
}
.pv-template-slot.has-file {
    border-style: solid;
    background: var(--card);
}
.pv-template-slot-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.pv-template-slot-label {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-sm);
}
.pv-template-slot-status {
    font-size: var(--fs-2xs);
    padding: 2px 8px;
    border-radius: var(--r-pill, 999px);
    background: var(--danger-soft);
    color: var(--danger);
}
.pv-template-slot-status.ok {
    background: var(--ok-soft);
    color: var(--ok);
}
.pv-template-slot-file {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    margin-bottom: 8px;
    min-width: 0;
}
.pv-template-filename {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pv-template-slot-empty {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.pv-template-slot-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.pv-template-slot-actions .btn,
.pv-template-upload-btn {
    margin-bottom: 0;
    cursor: pointer;
}

/* "Adaugă subansamblu" modal (openAddSubassemblyModal) — one compact row instead of three stacked
   Bootstrap .form-control fields, matching the density of every other add/edit surface in this feature. */
.newsub-row {
    display: flex;
    gap: var(--s2);
    margin-bottom: var(--s2);
}
.newsub-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 90px;
}
.newsub-field.grow { flex: 1 1 auto; width: auto; }
.newsub-field label {
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
}
.newsub-field input {
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--field-bg);
    padding: 6px 8px;
    font-size: var(--fs-sm);
    color: var(--ink);
    width: 100%;
}

/* This feature's own modal (add subansamblu / serii / generează etapă) all share #formModal — trimmed
   from Bootstrap's default ~16px so the already-dense content inside isn't fighting a loose shell. */
#formModal .modal-body {
    padding: 12px 16px;
}

.sub-noserials-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-xs);
    color: var(--ink-2);
    margin-bottom: var(--s3);
    cursor: pointer;
}

/* "Generează etapă contract" modal (openGenerateStageModal) — stage picker + per-article unit chips.
   Deliberately dense — this is a working list to scan quickly, not a form. */
.stage-pill-row {
    display: flex;
    gap: 4px;
    margin-bottom: var(--s2);
}
.stage-pill-row .stage-pill {
    padding: 4px 12px;
    font-size: var(--fs-xs);
}
.stage-article {
    border: 1px solid var(--border-soft);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    margin-bottom: 6px;
}
.stage-article-blocked {
    background: var(--field-bg);
    opacity: 0.75;
}

/* "Etape" grid — origin badge per batch row. */
.stage-origin {
    font-size: var(--fs-2xs);
    padding: 2px 8px;
    border-radius: var(--r-pill, 999px);
}
.stage-origin-serials {
    background: var(--accent-soft);
    color: var(--accent-hover);
}
.stage-origin-contract {
    background: var(--field-bg);
    color: var(--ink-2);
}
.stage-article-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--fs-sm);
    margin-bottom: 4px;
}
.stage-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    border-top: 1px solid var(--border-soft);
}
.stage-row:first-of-type { border-top: none; }
.stage-row-label {
    flex: 0 0 130px;
    font-size: var(--fs-xs);
    color: var(--ink-2);
    display: flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stage-unit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.stage-unit-chip {
    padding: 1px 7px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--border);
    background: var(--card);
    font-size: var(--fs-2xs);
    font-family: var(--mono);
    line-height: 1.6;
    cursor: pointer;
    user-select: none;
}
.stage-unit-chip.selected {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: var(--accent);
}
.stage-unit-chip.used {
    background: color-mix(in srgb, #ef4444 16%, white);
    color: #791f1f;
    border-color: color-mix(in srgb, #ef4444 40%, transparent);
    text-decoration: line-through;
    cursor: not-allowed;
}
.stage-count {
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.stage-count.over {
    color: var(--danger);
    font-weight: var(--fw-bold);
}
.stage-count.complete {
    color: var(--ok);
    font-weight: var(--fw-semibold);
}
.stage-article-header .stage-count { font-size: var(--fs-xs); }

/* Already fully covered for this stage (AlreadyUsed >= target, nothing newly picked) — tinted green so a
   second "Generează etapă" pass shows at a glance where there's nothing left to do. */
.stage-row.stage-row-complete {
    background: var(--ok-soft);
    border-radius: var(--r-sm);
}
.stage-article.stage-article-complete {
    background: var(--ok-soft);
    border-color: var(--ok-line, var(--ok));
}
.js-stage-qty {
    height: 26px;
    width: 80px;
    font-size: var(--fs-xs);
}
.js-stage-footer {
    border-top: 1px solid var(--border-soft);
    padding-top: var(--s3);
    margin-top: var(--s2);
}
.js-stage-selectall {
    margin-bottom: var(--s3);
}


.tabulator .tabulator-tableholder {
    height: auto !important;
    overflow-y: visible !important;
    overflow-x: auto !important;
    background: var(--card) !important;
}

.tabulator .tabulator-footer {
    border-top: 1px solid var(--border-soft) !important;
    background: var(--card) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    /* Paint over the .details-panel accent rail, same as the header — the
       rail should only show next to the data rows. */
    position: relative;
    z-index: 2;
}

.tabulator .tabulator-footer .tabulator-footer-contents {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.tabulator .tabulator-footer .tabulator-paginator {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: flex-end;
}

.tabulator .tabulator-footer .tabulator-page {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 4px 10px !important;
    margin: 0 !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-medium) !important;
    color: var(--ink-2) !important;
    background: var(--card) !important;
    cursor: pointer !important;
    transition: background var(--dur-fast), border-color var(--dur-fast);
    line-height: var(--lh-snug);
}

.tabulator .tabulator-footer .tabulator-page:hover:not(:disabled) {
    background: var(--border-soft) !important;
    border-color: var(--border) !important;
}

.tabulator .tabulator-footer .tabulator-page.active {
    background: var(--ink) !important;
    color: var(--card) !important;
    border-color: var(--ink) !important;
}

.tabulator .tabulator-footer .tabulator-page:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
}

.tabulator .tabulator-footer .tabulator-page-size {
    border: 1px solid var(--border) !important;
    border-radius: var(--r-sm) !important;
    padding: 4px 8px !important;
    font-size: var(--fs-sm) !important;
    font-weight: var(--fw-medium) !important;
    color: var(--ink-2) !important;
    background: var(--card) !important;
    margin-left: 12px !important;
    cursor: pointer;
}

.tabulator .tabulator-footer .tabulator-counter {
    font-size: var(--fs-sm);
    color: var(--ink-muted);
    margin-right: auto;
}

.tabulator-loader-msg {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--ink-2) !important;
    font-size: var(--fs-md) !important;
    font-family: var(--font) !important;
}

.tabulator-alert-msg {
    border: none !important;
    background: var(--danger-soft) !important;
    color: var(--danger) !important;
    border-radius: var(--r-md) !important;
    box-shadow: none !important;
    font-size: var(--fs-md) !important;
    font-family: var(--font) !important;
    padding: 10px 20px !important;
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-sorter-element:active,
.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element,
.tabulator .tabulator-header .tabulator-col:focus {
    outline: none !important;
    box-shadow: none !important;
    background: inherit !important;
}

.tabulator-cell:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Local grids with one page or less: no pager, no page-size selector, no footer. */
.tabulator.pager-off .tabulator-footer {
    display: none !important;
}

/* Responsive "collapse" — the per-row expand toggle + the folded field list */
.tabulator .tabulator-cell .tabulator-responsive-collapse-toggle,
.tabulator .tabulator-row .tabulator-responsive-collapse-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: var(--r-sm);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-weight: var(--fw-bold);
}

.tabulator .tabulator-responsive-collapse {
    border-top: 1px solid var(--border-soft);
    padding: 8px 14px;
    background: var(--card-2);
}

    .tabulator .tabulator-responsive-collapse table tr td {
        padding: 3px 0;
        vertical-align: top;
        color: var(--ink-2);
    }

    .tabulator .tabulator-responsive-collapse table tr td:first-child {
        font-size: var(--fs-2xs);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--ls-label);
        color: var(--ink-muted);
        white-space: nowrap;
        padding-right: 12px;
    }

/* ================================================================
   TOUCH — larger tap targets on coarse pointers / small screens
   ================================================================ */
@media (max-width: 767.98px), (pointer: coarse) {
    .deliv-act {
        width: 40px;
        height: 40px;
    }

    .details-panel-header .btn-sm,
    .details-panel-header .btn.btn-sm {
        min-height: 38px;
    }

    .tabulator .tabulator-row .tabulator-cell {
        min-height: 44px;
    }
}

/* On phones the top row stacks and the section headers may need to wrap. */
@media (max-width: 767.98px) {
    .details-panel-header {
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .page-header {
        flex-wrap: wrap;
    }
}

/* ================================================================
   UNIFIED "LIVRABILE" GRID — row action icons
   ================================================================ */

/* Each action gets its own permanent colored chip (diagonal gradient, matching the reference's
   "badge-solid" tiles) instead of a plain icon that only picks up color on hover — a row with
   several actions reads at a glance instead of every icon looking the same until you hover one.
   Semantic classes already existed for most of these (deliv-del/-save/-cancel/-edit); js-* hooks
   double as styling hooks for the rest so no markup class needed beyond what each action already
   has for its click handler. */
.deliv-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background-image: linear-gradient(155deg, #757f79, #454b46);
    color: #ffffff;
    cursor: pointer;
    vertical-align: middle;
    transition: filter var(--dur-fast), transform var(--dur-fast);
}

    .deliv-act:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
    }

    .deliv-act:focus-visible {
        outline: none;
        box-shadow: var(--focus);
    }

    /* edit (pencil) — Projects list, Contacts row */
    .deliv-act.deliv-edit {
        background-image: linear-gradient(155deg, #3e7ead, #235071);
    }

    /* delete (trash) — every grid's row/stage delete */
    .deliv-act.deliv-del {
        background-image: linear-gradient(155deg, #d0504c, #8f2e2c);
    }

    /* save / cancel — new-row confirm inline editors (Societăți, Beneficiari, Contacts...) */
    .deliv-act.deliv-save {
        background-image: linear-gradient(155deg, #1e9e6b, #106a3f);
    }

    .deliv-act.deliv-cancel {
        background-image: linear-gradient(155deg, #757f79, #454b46);
    }

    /* SVN repo link — Projects list */
    .deliv-act.deliv-link {
        background-image: linear-gradient(155deg, #f8a22c, #a17517);
    }

    /* "Generează PV" — Etape grid */
    .deliv-act.js-generate-pv {
        background-image: linear-gradient(155deg, var(--accent-grad-from), var(--accent-grad-to));
    }

    /* Observații row actions (_ListItem.cshtml): reply / edit / history / resolve, alongside delete —
       five icons on one row, each its own color. */
    .deliv-act.js-note-reply {
        background-image: linear-gradient(155deg, #f8a22c, #a17517);
    }

    .deliv-act.js-note-edit {
        background-image: linear-gradient(155deg, #3e7ead, #235071);
    }

    .deliv-act.js-note-history {
        background-image: linear-gradient(155deg, #757f79, #454b46);
    }

    .deliv-act.js-note-resolve {
        background-image: linear-gradient(155deg, #1e9e6b, #106a3f);
    }

.deliv-act-disabled {
    background-image: none;
    background-color: var(--border-soft);
    color: var(--ink-muted);
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.tabulator .tabulator-cell.deliv-toggle {
    cursor: pointer;
}

.deliv-type-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-muted);
}

/* "Nume contract" cell — same weight as the rest of the row, just the app's default ink color. */
.tabulator .tabulator-row .tabulator-cell.deliv-name {
    color: var(--ink);
    font-weight: var(--fw-normal);
}

/* Stage cell — filled green check chip (+ date) when done, hollow dashed ring when pending,
   an em dash when the stage doesn't apply to the row's type (rendered by stageDoneFormatter). */
.tabulator .tabulator-cell .stage {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    line-height: var(--lh-none);
    color: var(--ink-muted);
}

.tabulator .tabulator-cell .stage-ic {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: var(--r-pill);
}

/* Nothing done yet — reddish soft chip, no border. The dashed outline this used to share across all
   four states read as a broken/perforated circle at this size (worst on the partial ring, where it drew
   a second dashed circle right around the progress ring itself) — solid soft-background chips read
   cleaner and still tell the four states apart on color alone. */
.tabulator .tabulator-cell .stage--pending .stage-ic {
    background: var(--danger-soft);
    color: var(--danger);
}

/* Fully done — the done green (--ok), so this reads unambiguously as "green" against the red/orange of
   the other two. */
.tabulator .tabulator-cell .stage--done .stage-ic {
    background: var(--ok-soft);
    color: var(--ok);
}

/* Explicitly marked "not necessary" for this article (the Necesar checkbox in the advanced form) —
   teal, kept distinct from stage--done's green so the two don't read as identical. Distinct from
   stage--pending (still expected) and stage--na (the stage doesn't apply to the row's type at all). */
.tabulator .tabulator-cell .stage--optional .stage-ic {
    background: var(--teal-soft);
    color: var(--teal);
}

/* Partial batch progress — a proportionally-filled ring + "3/5", instead of the plain done/pending
   binary (Predare/Instalare on Echipament & Software, once at least one batch exists). A real, vivid
   orange (not the muted brownish --warn token used for other warning text elsewhere) so the fill reads
   clearly against its own track and against the red/green of the other two states — --warn's track/fill
   pair were too close in tone to tell how much was actually filled at this size. No outer border on the
   chip itself either: it was drawing a second dashed circle right around the ring's own track/fill
   circles, muddling exactly the thing this indicator needs to show at a glance. */
.tabulator .tabulator-cell .stage--partial .ring {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    background: #fff2e2;
    border-radius: var(--r-pill);
    box-sizing: border-box;
}

.tabulator .tabulator-cell .stage--partial .ring-track {
    fill: none;
    stroke: #fbcb96;
    stroke-width: 3;
}

.tabulator .tabulator-cell .stage--partial .ring-fill {
    fill: none;
    stroke: #ea580c;
    stroke-width: 3;
    stroke-linecap: round;
}

.tabulator .tabulator-cell .stage-frac {
    font-family: var(--mono);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    color: #c2410c;
}

.tabulator .tabulator-cell .stage time {
    font-family: var(--mono);
    font-size: var(--fs-3xs);
    color: var(--ink-muted);
}

/* Section-title count ("Articole 3") — a small soft pill, opts out of the eyebrow's caps/tracking.
   Weighted enough to read at a glance without competing with the header label itself. */
.details-panel-header .note {
    font-weight: var(--fw-semibold);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--fs-2xs);
    color: var(--ink-2);
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 2px 9px;
    line-height: 1.5;
}

/* Hint line between a section header and its grid. */
.grid-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 12px 18px 4px;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

/* ================================================================
   PROJECT DETAILS — collapsible "Detalii proiect" card
   ================================================================ */

/* .details-panel-header carries uppercase/letter-spaced label typography for its plain-text
   usages elsewhere (Projects list filter bar, Login) — buttons/badges added inside it here need
   to opt back out of that. */
.details-panel-header .btn,
.details-panel-header .project-state-pill {
    text-transform: none;
    letter-spacing: normal;
}

.project-state-pill {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    padding: 2px 9px;
    border-radius: var(--r-pill);
}

    .project-state-pill.is-saved {
        background: var(--ok-soft);
        color: var(--ok);
    }

    .project-state-pill.is-editing,
    .project-state-pill.is-saving {
        background: var(--accent-soft);
        color: var(--accent-hover);
    }

    .project-state-pill.is-unsaved {
        background: var(--warn-soft);
        color: var(--warn);
    }

    .project-state-pill.is-error {
        background: var(--danger-soft);
        color: var(--danger);
    }

.project-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.project-summary-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.project-summary-label {
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--ink-muted);
}

.project-summary-value {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: var(--lh-snug);
    overflow-wrap: break-word;
    white-space: pre-line;
}

.project-summary-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px 16px;
}

/* "Detalii proiect" — denser chrome than the standard .details-panel, so the header card stays
   short and leaves more of the screen to the Articole grid below it. */
#projectDetailsPanel > .details-panel-body {
    padding: 12px 16px;
}

@media (max-width: 560px) {
    .project-summary-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }
}

@media (max-width: 380px) {
    .project-summary-row {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   OBSERVATII — threaded notes list on the Project Details page
   ================================================================ */

.notes-body {
    padding: 8px 20px;
}

/* Generic empty state — a small icon above a muted line, used for every "nothing here" panel across
   the app (task lists, calendar day, dashboard sections, the observation thread). */
.notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 12px;
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--fs-sm);
    text-align: center;
}

    .notes-empty svg {
        color: var(--border);
    }

    /* re-skin every Bootstrap contextual badge in the app as a soft token pill — dashboard task
       chips, Tabulator grid cells (e.g. Proiecte's "Garanție rămasă" column) all share this. */
    .badge {
        font-weight: var(--fw-semibold);
        font-size: var(--fs-2xs);
        padding: 0.32em 0.62em;
        border-radius: var(--r-pill);
        border: 1px solid transparent;
    }

    .badge.bg-secondary {
        background: var(--bg) !important;
        color: var(--ink-2) !important;
        border-color: var(--border);
    }

    .badge.bg-success {
        background: var(--ok-soft) !important;
        color: var(--ok) !important;
        border-color: var(--ok-line);
    }

    .badge.bg-warning {
        background: var(--warn-soft) !important;
        color: var(--warn) !important;
        border-color: var(--warn-line);
    }

    .badge.bg-danger {
        background: var(--danger-soft) !important;
        color: var(--danger) !important;
        border-color: var(--danger-line);
    }

    .badge.bg-info {
        background: var(--accent-soft) !important;
        color: var(--accent-hover) !important;
        border-color: var(--accent);
    }

    .badge.bg-light {
        background: var(--card) !important;
        color: var(--ink-2) !important;
        border-color: var(--border);
    }

/* ================================================================
   OBSERVAȚII — one note: avatar + author/date, body text, a single
   muted meta line (deadline / responsible / calendar / private),
   action icons revealed on hover instead of sitting there always.
   Resolved / overdue get a clear left-rail + wash — colour is
   reserved for exactly those two states, nothing else competes.
   ================================================================ */
.note-item {
    display: flex;
    gap: 8px;
    padding: 6px 0 6px 8px;
    margin-bottom: 1px;
    border-top: 1px solid var(--border-soft);
    border-left: 2px solid transparent;
    position: relative;
}

#notesList > .note-item:first-child,
.replies > .note-item:first-child {
    border-top: none;
}

.note-item:hover .note-actions {
    opacity: 1;
    pointer-events: auto;
}

/* No background wash / left-rail for resolved or overdue — in a row this thin a full color fill read
   as too heavy. The status already shows once, clearly, via meta-resolved/meta-overdue's own colored
   text+icon below — no need to say it twice. */

.note-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    flex: 0 0 auto;
    border-radius: var(--r-pill);
    background: var(--accent-soft);
    color: var(--accent-hover);
    font-size: 9.5px;
    font-weight: var(--fw-bold);
}

.note-main {
    flex: 1 1 auto;
    min-width: 0;
    padding-right: 150px; /* keeps text clear of the hover action cluster */
}

.note-top {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.note-author {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-xs);
    color: var(--ink);
}

.note-date {
    font-size: var(--fs-3xs);
    color: var(--ink-muted);
}

.note-edited {
    font-size: var(--fs-3xs);
    color: var(--ink-muted);
    font-style: italic;
}

.note-text {
    margin-top: 2px;
    color: var(--ink-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    white-space: pre-wrap;
    word-break: break-word;
}

.note-item-resolved .note-text {
    color: var(--ink-muted);
}

.note-meta {
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: var(--fs-3xs);
    color: var(--ink-muted);
}

    .note-meta .meta-dot {
        opacity: .5;
    }

.meta-overdue {
    color: var(--danger);
    font-weight: var(--fw-bold);
}

.meta-resolved {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ok);
    font-weight: var(--fw-bold);
}

.note-actions {
    display: flex;
    gap: 2px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast);
    position: absolute;
    top: 4px;
    right: 0;
}

    /* Smaller than the standard 26px action chip — this row is now dense enough that a full-size one
       would visually dominate it. */
    .note-actions .deliv-act {
        width: 21px;
        height: 21px;
    }

    .note-actions .deliv-act svg {
        width: 12px;
        height: 12px;
    }

/* Replies: a connecting guide-line off the parent, indented under its avatar. Nests naturally for
   reply-to-reply since each level wraps its own children in another .replies. */
.replies {
    margin-left: 29px;
    padding-left: 14px;
    border-left: 2px solid var(--border-soft);
}

    .replies .note-item {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .replies .note-avatar {
        width: 18px;
        height: 18px;
        font-size: 9px;
    }

    .replies .note-author {
        font-size: var(--fs-3xs);
    }

@media (max-width: 767.98px) {
    .note-main {
        padding-right: 0;
    }

    .note-actions {
        position: static;
        opacity: 1;
        pointer-events: auto;
        margin-top: 8px;
    }

    .replies {
        margin-left: 14px;
        padding-left: 12px;
    }
}

/* ================================================================
   OBSERVAȚII — filter chips (Toate / Active / Rezolvate)
   ================================================================ */
.obs-filters-bar {
    padding: 10px 20px 0;
}

.obs-filters {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--card-2);
    border: 1px solid var(--border);
    border-radius: var(--r-pill);
    padding: 3px;
}

.obs-filter {
    padding: 5px 12px;
    border-radius: var(--r-pill);
    border: none;
    background: none;
    font-family: inherit;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--ink-muted);
    cursor: pointer;
}

    .obs-filter.is-active {
        background: var(--card);
        color: var(--ink);
        font-weight: var(--fw-semibold);
        box-shadow: var(--sh-xs);
    }

/* ================================================================
   DELIVERABLE FORM — advanced add/edit modal's compact stage table
   (Views/Deliverables/_Form.cshtml)
   ================================================================ */

.deliv-form-eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--ink-muted);
    margin: var(--s4) 0 var(--s2);
}

.deliv-stage-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--s4);
}

.deliv-stage-table th {
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--ink-muted);
    text-align: left;
    padding: 0 var(--s2) var(--s2);
    border-bottom: 1px solid var(--border);
}

.deliv-stage-table th.text-center,
.deliv-stage-table td.text-center {
    text-align: center;
}

.deliv-stage-table td {
    padding: var(--s2) var(--s2);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
    font-size: var(--fs-md);
}

.deliv-stage-table tr:last-child td {
    border-bottom: 1px solid var(--border);
}

.deliv-stage-table .stage-name {
    font-weight: var(--fw-semibold);
    color: var(--ink);
    white-space: nowrap;
}

/* Neutralise Bootstrap's .form-check label-offset hack (float + negative margin) — there's
   no visible label here (visually-hidden, for the a11y name only), so the checkbox should
   just sit centred in its cell like any other stage-table value. */
.deliv-stage-table .form-check {
    display: inline-flex;
    min-height: 0;
    padding-left: 0;
    margin: 0;
}

.deliv-stage-table .form-check-input {
    float: none;
    margin: 0;
}

/* Predare/Furnizare/Instalare read-only summary — replaces the checkbox+date cell once that stage
   is managed from the Articole grid's batch popover instead (Echipament & Software only). */
.deliv-stage-readonly {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

/* ================================================================
   DELIVERABLE BATCH POPOVER — Predare/Furnizare/Instalare breakdown
   (Views/Deliverables/_BatchPopover.cshtml, shown in #formModal)
   ================================================================ */

.batch-pop-title {
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    color: var(--ink);
}

.batch-pop-sub {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    margin-bottom: var(--s3);
}

.sub-serials-summary {
    font-size: var(--fs-xs);
    font-family: var(--mono);
    color: var(--ink-muted);
    background: var(--field-bg);
    border-radius: var(--r-sm);
    padding: 4px 8px;
    margin: -4px 0 var(--s3);
    word-break: break-word;
}

.batch-progress-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
    margin-bottom: var(--s4);
}

.batch-progress-track {
    flex: 1 1 auto;
    height: 8px;
    border-radius: var(--r-pill);
    background: var(--border-soft);
    overflow: hidden;
}

.batch-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: var(--r-pill);
}

.batch-progress-label {
    font-family: var(--mono);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    color: var(--ink);
    white-space: nowrap;
}

.batch-quick-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: var(--accent-soft);
    color: var(--accent-hover);
    border: 1px dashed var(--accent);
    border-radius: var(--r-md);
    padding: var(--s2) var(--s3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    margin-bottom: var(--s4);
    font-family: inherit;
}

    .batch-quick-btn:hover {
        background: var(--accent);
        color: var(--accent-ink);
        border-style: solid;
    }

.batch-eyebrow {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-eyebrow);
    color: var(--ink-muted);
    margin: 0 0 var(--s2);
}

.batch-list {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
    border-radius: var(--r-md);
    overflow: hidden;
    margin-bottom: var(--s3);
}

.batch-row {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s3);
    font-size: var(--fs-sm);
    background: var(--card);
}

/* .batch-row is now wrapped in .batch-entry (to make room for .batch-row-serials underneath it) — the
   separator line between entries moved up to the wrapper so only the outermost one loses it. */
.batch-entry {
    border-top: 1px solid var(--border-soft);
}
.batch-entry:first-child {
    border-top: none;
}
.batch-row-serials {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 var(--s3) var(--s2);
    background: var(--card);
}
.batch-row-serial {
    padding: 1px 7px;
    border-radius: var(--r-pill, 999px);
    border: 1px solid var(--border-soft);
    background: var(--field-bg);
    font-size: var(--fs-2xs);
    font-family: var(--mono);
    color: var(--ink-2);
}
.batch-readonly-note {
    font-size: var(--fs-xs);
    color: var(--ink-muted);
    background: var(--field-bg);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    margin-bottom: var(--s3);
}

.batch-qty {
    font-family: var(--mono);
    font-weight: var(--fw-bold);
    color: var(--ink);
    min-width: 5ch;
}

.batch-date {
    color: var(--ink-2);
    flex: 1 1 auto;
}

.batch-author {
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
}

.batch-del {
    width: 24px;
    height: 24px;
    border-radius: var(--r-sm);
    border: 0;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    transition: background var(--dur-fast), color var(--dur-fast);
}

    .batch-del:hover {
        background: var(--danger-soft);
        color: var(--danger);
    }

.batch-empty {
    padding: var(--s3);
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

.batch-add-row {
    display: flex;
    gap: var(--s2);
    align-items: flex-end;
}

.batch-add-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .batch-add-field.grow {
        flex: 1 1 auto;
    }

    .batch-add-field label {
        font-size: var(--fs-3xs);
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--ls-label);
        color: var(--ink-muted);
    }

    .batch-add-field input {
        border: 1px solid var(--border);
        border-radius: var(--r-sm);
        background: var(--field-bg);
        padding: 6px 8px;
        font-size: var(--fs-sm);
        color: var(--ink);
        width: 100%;
    }

    .batch-add-field:not(.grow) input {
        width: 80px;
    }

.batch-add-btn {
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    border-radius: var(--r-sm);
    padding: 7px 14px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
}

    .batch-add-btn:hover {
        background: var(--accent-hover);
    }

/* Observații: collapsed by default (#obsBody hidden), the chevron rotates 90° once expanded — full
   page width when open, since the section now sits outside the details/observations two-column
   split (see Views/Projects/Details.cshtml). */
.js-obs-header {
    cursor: pointer;
}

.js-obs-toggle svg {
    transition: transform var(--dur-normal) var(--ease);
}

.js-obs-toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

/* ================================================================
   HOME DASHBOARD — "Sarcinile mele" + month calendar
   (Views/Home/Index.cshtml)
   ================================================================ */

/* Stacked below lg; side-by-side 60/40 from lg up — same split as .project-top-row. */
.dashboard-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

@media (min-width: 992px) {
    .dashboard-row {
        flex-direction: row;
        align-items: flex-start;
    }

    .dashboard-row > .dashboard-main {
        flex: 1 1 60%;
        min-width: 0;
    }

    .dashboard-row > .dashboard-side {
        flex: 1 1 40%;
        min-width: 0;
    }
}

/* Denser padding than the standard .details-panel-body — the dashboard prioritises fitting more
   rows over breathing room. */
.dashboard-row .details-panel-header {
    padding: 9px 14px;
}

.dashboard-row .details-panel-body.dashboard-body {
    padding: 10px 14px 14px;
}

.task-list {
    display: flex;
    flex-direction: column;
}

/* Dashboard "Producție" view — checkbox picker (dashboard-side) + condensed read-only production cards,
   two per row, for whichever unaccepted projects are checked (selection kept in a cookie, not the DB). */
.prodpick-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.prodpick-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-pill, 999px);
    font-size: var(--fs-sm);
    color: var(--ink);
    cursor: pointer;
}
.prodpick-item:hover { background: var(--field-bg); }
.prodpick-item:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); }
.prodpick-item input { accent-color: var(--accent); }

/* Same treatment as .grid-primary-col / .prodcard-name — this label was still on the old plain
   ink color/weight, the one spot that hadn't picked it up yet. */
.prodpick-name { font-size: 12.5px; font-weight: var(--fw-bold); color: #67707d; }

/* Dashboard → Facturare: the picker's two groups (unaccepted / finished but not settled), and on a finished
   project what is still left to invoice (or, once invoiced, to collect). */
.fact-group-label {
    margin: 10px 0 6px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
}
.fact-group-label:first-child { margin-top: 0; }
.fact-left {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: #b45309;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* finished/total for this project's articles — green once every article is done, orange while some
   are still in progress, red when none has been started at all yet (same green/orange/red meaning as
   prod-row-done/-partial/-empty elsewhere in Pe producție). */
.prodpick-unfinished {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    border-radius: var(--r-pill, 999px);
    padding: 1px 7px;
    white-space: nowrap;
}

    .prodpick-unfinished.is-done { color: var(--ok); background: var(--ok-soft); }
    .prodpick-unfinished.is-partial { color: var(--warn); background: var(--warn-soft); }
    .prodpick-unfinished.is-empty { color: var(--danger); background: var(--danger-soft); }

/* One card per row, full width — two columns was squeezing Nume/Model/Observații down to where
   they truncated constantly; a single wide column gives each its own room to actually be read. */
.prodcards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}
.prodcards-grid .notes-empty { grid-column: 1 / -1; }

.prodcard {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--card);
    overflow: hidden;
}
.prodcard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    background: var(--card-2);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    cursor: pointer;
    user-select: none;
}
.prodcard-header a { color: var(--ink); text-decoration: none; }
.prodcard-header a:hover { color: var(--accent); text-decoration: underline; }
.prodcard-header-right { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.prodcard-header .note { font-weight: var(--fw-normal); font-size: var(--fs-2xs); }
.prodcard-caret { color: var(--ink-muted); flex: 0 0 auto; transition: transform var(--dur-normal); }
.prodcard-header[aria-expanded="true"] .prodcard-caret { transform: rotate(90deg); }

.prodcard-row {
    display: grid;
    /* Nume and Observații split the flexible space evenly — Nume used to take all of it (1fr with
       Observații fixed at 110px), squeezing Observații down to barely a sliver; splitting it 1fr/1fr
       halves Nume's share and hands the freed space to Observații, with no change to the card's own
       width. */
    grid-template-columns: 1fr 90px 1fr 56px 26px;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    font-size: var(--fs-xs);
    border-top: 1px solid var(--border-soft);
}
.prodcard-row:first-child { border-top: none; }
.prodcard-row.prod-row-done { background: var(--ok-soft); }
.prodcard-row.prod-row-partial { background: color-mix(in srgb, #f97316 12%, white); }
.prodcard-row.prod-row-empty { background: color-mix(in srgb, #ef4444 14%, white); }
.prodcard-row.is-child .prodcard-name { padding-left: 14px; color: var(--ink-2); }
.prodcard-name, .prodcard-model, .prodcard-notes { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same treatment as .grid-primary-col on the list pages (Proiecte/Utilizatori/...) — the article
   name is this card's identifying column, so it gets the same bold/12.5px/soft-ink look. */
.prodcard-name { font-size: 12.5px; font-weight: var(--fw-bold); color: #67707d; }
.prodcard-name strong { font-weight: var(--fw-bold); }
.prodcard-model, .prodcard-notes { color: var(--ink-muted); }
.prodcard-serii { text-align: center; font-variant-numeric: tabular-nums; }
.prodcard-serii.ok { color: var(--ok); }
.prodcard-serii.bad { color: var(--danger); font-weight: var(--fw-semibold); }
.prodcard-status { text-align: center; }
.prodcard-status.done { color: var(--ok); }
.prodcard-status.pending { color: var(--ink-muted); }

/* Facturare page — same .prodcard-row shell as the Producție view, but 4 columns (name/value/
   facturat/platit) instead of 5, since there's no model/serii/subassembly nesting here. Two cards per
   row (unlike Producție's single full-width column) so more projects fit on screen at once. */
.prodcards-grid-2col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
    .prodcards-grid-2col {
        grid-template-columns: 1fr;
    }
}

.prodcard-row.fact-row {
    grid-template-columns: 1fr 110px 80px;
}

.prodcard-row.fact-header-row {
    background: var(--card-2);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--ink-muted);
}
.prodcard-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
}
.prodcard-bool {
    text-align: center;
    font-weight: var(--fw-semibold);
}
.prodcard-bool.yes { color: var(--ok); }
.prodcard-bool.partial { color: var(--warn); }
.prodcard-bool.no { color: var(--ink-muted); font-weight: var(--fw-normal); }

.fact-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.fact-summary-item {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 8px 14px;
    border-radius: var(--r-md);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border: 1px solid transparent;
}

    .fact-summary-item strong {
        font-variant-numeric: tabular-nums;
        font-weight: var(--fw-bold);
    }

.fact-summary-unbilled {
    background: var(--warn-soft);
    color: var(--warn);
    border-color: var(--warn-line);
}

.fact-summary-unpaid {
    background: var(--danger-soft);
    color: var(--danger);
    border-color: var(--danger-line);
}

/* Project page, Livrabile: the project's money (value / invoiced / collected / left) and the Încasări button. */
.proj-money {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

    .proj-money-item strong {
        margin-left: 3px;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
        font-weight: var(--fw-bold);
    }

    .proj-money-item + .proj-money-item::before {
        content: "·";
        margin-right: 8px;
        color: var(--border);
    }

    /* "fără TVA" / "cu TVA" after an amount. */
    .proj-money-tva { font-size: var(--fs-xs); color: var(--ink-muted); }

.proj-money-left {
    padding: 2px 8px;
    border-radius: var(--r-md);
    background: var(--danger-soft);
    color: var(--danger);
}

    .proj-money-left strong { color: var(--danger); }

    .proj-money .proj-money-left::before { display: none; }

    .proj-money-left.is-zero { background: var(--ok-soft); color: var(--ok); }
    .proj-money-left.is-zero strong { color: var(--ok); }

/* Project page, Contract view → "Factură nouă": the articles left to invoice, each ticked with its whole remaining
   quantity; the total follows what's ticked. */
.inv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.inv-date { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.inv-date input { width: 11rem; }
.inv-picked { font-size: var(--fs-sm); color: var(--ink-muted); }
.inv-table-wrap { max-height: 55vh; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.inv-table { width: 100%; border-collapse: collapse; font-size: var(--fs-md); }
.inv-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--card-2);
    color: var(--ink-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: left;
    white-space: nowrap;
}
.inv-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.inv-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-table .inv-check { width: 36px; text-align: center; }
.inv-table .inv-qty-col { width: 8.5rem; }
.inv-table .inv-qty-col input { text-align: right; font-variant-numeric: tabular-nums; }
.inv-name { color: var(--ink); font-weight: var(--fw-medium); }
.inv-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-xs); color: var(--ink-muted); }
.inv-of { font-size: var(--fs-xs); color: var(--ink-muted); }
.inv-table tr.is-off td, .inv-table tr.is-off .inv-name { color: var(--ink-muted); }
.inv-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 20px; margin-top: 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.inv-totals strong { margin-left: 4px; color: var(--ink); font-variant-numeric: tabular-nums; }
.inv-totals-tva strong { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.inv-note { margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-muted); }
.inv-error { margin-top: 8px; font-size: var(--fs-xs); color: var(--danger); }
.inv-error:empty { display: none; }
.inv-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Dashboard → Facturare card: the project's collected money under its header. */
.fact-card-money {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-xs);
    color: var(--ink-muted);
}

    .fact-card-money strong { color: var(--ink); font-variant-numeric: tabular-nums; }
    .fact-card-money .is-due strong { color: var(--danger); }

.fact-filter-label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--ink-muted);
    white-space: nowrap;
}

/* ============================================================
   flatpickr theming — retint the vendored default skin to the
   pine/stone accent instead of its stock blue. altInput reuses
   .form-control/.form-select styling above, so it needs no rules
   here; only the calendar popup itself is restyled.
   ============================================================ */
.flatpickr-calendar {
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(30, 38, 32, 0.14), 0 0 0 1px var(--border);
    font-family: inherit;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
    background: var(--accent);
    border-color: var(--accent);
}

.flatpickr-day.today {
    border-color: var(--accent);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    background: var(--accent-soft);
    border-color: var(--accent-soft);
}

.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.numInputWrapper:hover {
    background: var(--accent-soft);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    color: var(--accent);
}

.task-item {
    display: block;
    padding: 6px 2px;
    border-top: 1px solid var(--border-soft);
    text-decoration: none;
    color: inherit;
    transition: background var(--dur-fast);
}

    .task-list > .task-item:first-child {
        border-top: none;
    }

    .task-item:hover {
        background: var(--card-2);
    }

.task-item-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.task-project {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink);
}

.task-item-text {
    margin-top: 2px;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: var(--lh-snug);
    word-break: break-word;
    /* Clamp to 2 lines so one long observation can't push the rest of the list off-screen. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-item-overdue .task-project {
    color: var(--danger);
}

.task-meta {
    margin-top: 4px;
    font-size: var(--fs-2xs);
    color: var(--ink-muted);
}

/* Project autocomplete on Notes/New — type-ahead dropdown under a plain text input. The panel
   holding it is short (just one field), so the dropdown must be allowed to spill past its bottom
   edge instead of being clipped by .details-panel's default overflow:hidden. */
.details-panel--overflow-visible {
    overflow: visible;
}

    .details-panel--overflow-visible::after {
        top: 3px;
        bottom: 3px;
        border-radius: var(--r-pill);
    }

.autocomplete {
    position: relative;
}

.autocomplete-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--sh-pop);
    max-height: 280px;
    overflow-y: auto;
}

.autocomplete-item {
    padding: 8px 12px;
    font-size: var(--fs-sm);
    color: var(--ink);
    cursor: pointer;
    transition: background var(--dur-fast);
}

    .autocomplete-item:hover {
        background: var(--card-2);
    }

    .autocomplete-item .desc {
        margin-top: 2px;
        font-size: var(--fs-2xs);
        color: var(--ink-muted);
    }

.autocomplete-empty {
    padding: 10px 12px;
    font-size: var(--fs-sm);
    color: var(--ink-muted);
}

/* Corespondență modal — file list from the project's SVN Corespondență folder. Row order: date pill
   (green = read from the file/folder name, red = fell back to the SVN commit date), file-type badge,
   Intrari/Iesiri icon (shape carries the category; the chip background is a secondary, quieter cue),
   file name. */
.correspondence-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 420px;
    overflow-y: auto;
}

.correspondence-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 8px;
    border-radius: var(--r-sm);
    color: var(--ink);
    transition: background var(--dur-fast);
}

    /* The UA's own [hidden]{display:none} loses to the display:flex above (same specificity, author
       sheet wins) — search filtering sets the hidden attribute to hide non-matching items, so this
       needs to be explicit or every item stays visible regardless. */
    .correspondence-item[hidden] {
        display: none;
    }

    .correspondence-item:hover {
        background: var(--card-2);
    }

/* The row's main click target (opens TortoiseSVN's repo browser at that path) — everything the old
   single <a class="correspondence-item"> used to be, minus the padding (now on the row itself so the
   "open file" button below shares the same hit area). */
.correspondence-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

/* "Deschide fișierul" — fetches the actual file from SVN (ProjectsController.CorrespondenceFile) and
   opens it in a new tab, instead of just the repo browser location. */
.correspondence-open-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    color: var(--ink-muted);
    text-decoration: none;
    transition: background var(--dur-fast), color var(--dur-fast);
}

    .correspondence-open-btn:hover {
        background: var(--accent-soft);
        color: var(--accent-hover);
    }

.correspondence-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    color: var(--ink-muted);
}

.correspondence-icon-in {
    background: var(--accent-soft);
    color: var(--accent-hover);
}

.correspondence-icon-out {
    background: var(--card-2);
    border: 1px solid var(--border);
    color: var(--ink-2);
}

.correspondence-path {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--fs-sm);
    word-break: break-all;
}

.correspondence-date {
    flex: 0 0 auto;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    padding: 2px 7px;
    border-radius: var(--r-pill);
    white-space: nowrap;
}

.correspondence-date-name {
    background: var(--accent-soft);
    color: var(--accent-hover);
}

.correspondence-date-svn {
    background: var(--danger-soft);
    color: var(--danger);
}

/* Text badge, not an actual application logo — see the FileBadge comment in _Correspondence.cshtml
   for why a web page can't read the icon a file type opens with on the viewer's own machine. */
.correspondence-filetype {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 18px;
    padding: 0 5px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--ink-muted);
}

.correspondence-filetype-pdf { background: #c0392b; }
.correspondence-filetype-doc { background: #2b579a; }
.correspondence-filetype-xls { background: #1d6f42; }
.correspondence-filetype-mail { background: #0a5aa8; }
.correspondence-filetype-zip { background: #8a6d3b; }
.correspondence-filetype-img { background: #7b4fa6; }

.cal-month-label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-2);
    text-transform: none;
    letter-spacing: normal;
    min-width: 7ch;
    text-align: center;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.cal-grid-head {
    margin-bottom: 2px;
}

    .cal-grid-head span {
        text-align: center;
        font-size: 0.6rem;
        font-weight: var(--fw-bold);
        text-transform: uppercase;
        letter-spacing: var(--ls-label);
        color: var(--ink-muted);
    }

.cal-cell {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 28px;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background var(--dur-fast), border-color var(--dur-fast);
}

.cal-cell-empty {
    cursor: default;
}

button.cal-cell:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}

.cal-daynum {
    font-size: var(--fs-2xs);
    color: var(--ink-2);
    line-height: var(--lh-none);
}

.cal-cell-today .cal-daynum {
    font-weight: var(--fw-bold);
    color: var(--accent);
}

.cal-count {
    font-size: 0.55rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    padding: 0 4px;
    border-radius: var(--r-pill);
    background: var(--warn-soft);
    color: var(--warn);
}

.cal-cell.is-selected {
    background: var(--accent);
    border-color: var(--accent);
}

    .cal-cell.is-selected .cal-daynum {
        color: var(--accent-ink);
        font-weight: var(--fw-bold);
    }

    .cal-cell.is-selected .cal-count {
        background: var(--accent-ink);
        color: var(--accent-hover);
    }

/* Keeps the selected cell's own (already high-contrast) background on hover instead of
   button.cal-cell:hover's lighter tint winning on specificity and washing out the white text. */
button.cal-cell.is-selected:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Internal divider that replaces what used to be a second panel's header — the day-detail list
   lives inside the same card as the calendar grid, one border instead of a whole extra panel. */
.cal-day-divider {
    margin: 10px 0 6px;
    padding-top: 9px;
    border-top: 1px solid var(--border-soft);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-label);
    color: var(--ink-muted);
}

/* Stock report tabs (StockReports/_ReportTabs) reuse .deliv-view-toggle; they are links, not buttons. */
.report-tabs a.deliv-view-btn { text-decoration: none; }
.report-summary { display: flex; flex-wrap: wrap; gap: 24px; font-size: var(--fs-sm); }
.report-summary strong { font-size: var(--fs-md, 1rem); }

/* ================================================================
   COMPACT DENSITY — every page (the user, 2026-10-04: "totul e prea mare și nu încape în ecran; stilul e
   foarte bun, dar mai condensat pe toate ferestrele"). The layout puts .app-compact on <main>; it was
   Stocuri's alone (.stock-compact) and is now the whole app's, so more rows fit on screen. The movement
   editor below refines it further and wins on equal specificity (it comes later).
   ================================================================ */

.app-compact .page-header { margin-bottom: 8px; gap: 10px; }
.app-compact .page-title { font-size: var(--fs-lg); }
.app-compact .page-subtitle { font-size: var(--fs-2xs); margin-top: 1px; }
.app-compact .project-header-icon { width: 26px; height: 26px; }
.app-compact .page-header .btn:not(.btn-sm) { padding: 4px 12px; font-size: var(--fs-sm); }

.app-compact .details-panel-header { padding: 7px 12px; font-size: var(--fs-sm); gap: 6px; }
.app-compact .details-panel-header .note { font-size: var(--fs-3xs); padding: 1px 7px; }
.app-compact .details-panel-body { padding: 10px 12px; }

/* Filter bars */
.app-compact .list-filters { gap: 6px; }
.app-compact .list-filter-input,
.app-compact .list-filter-select,
.app-compact .list-filter-date { height: 28px; font-size: var(--fs-xs); }
.app-compact .list-search .list-filter-input:not(.list-filter-plain) { width: 220px; padding-left: 28px; }
.app-compact .list-search-icon { left: 10px; }
.app-compact .list-filter-select { padding: 0 26px 0 8px; background-position: right 8px center; }
.app-compact .list-filter-date { width: 124px; }
.app-compact .list-filter-check { height: 28px; font-size: var(--fs-xs); }
.app-compact .list-filters-end .btn { height: 28px; padding: 0 10px; font-size: var(--fs-xs); }
.app-compact .deliv-view-btn { padding: 4px 10px; font-size: var(--fs-2xs); }

/* Grids — beats the .list-grid density rules (higher specificity, same !important). */
.app-compact .tabulator { font-size: var(--fs-xs) !important; }
.app-compact .tabulator .tabulator-header .tabulator-col { padding: 4px 10px !important; font-size: var(--fs-3xs) !important; }
.app-compact .tabulator .tabulator-row .tabulator-cell { padding: 3px 10px !important; }
.app-compact .tabulator .tabulator-row .tabulator-cell:not(.grid-primary-col) { font-size: var(--fs-xs) !important; }
.app-compact .tabulator .tabulator-cell.grid-primary-col { font-size: var(--fs-xs) !important; }
.app-compact .tabulator .tabulator-row.tabulator-group { padding: 3px 10px !important; font-size: var(--fs-xs); }
.app-compact .tabulator .badge { font-size: 10px; padding: .2em .45em; }
@media (min-width: 768px) and (pointer: fine) {
    /* Touch screens keep the big tap targets (TOUCH section above). */
    .app-compact .tabulator .deliv-act { width: 22px; height: 22px; }
    .app-compact .tabulator .deliv-act svg { width: 13px; height: 13px; }
}
.app-compact .tabulator .tabulator-footer { padding: 5px 10px !important; }
.app-compact .tabulator .tabulator-footer .tabulator-page { padding: 2px 8px !important; font-size: var(--fs-xs) !important; }
.app-compact .tabulator .tabulator-footer .tabulator-page-size { padding: 2px 6px !important; font-size: var(--fs-xs) !important; }
.app-compact .tabulator .tabulator-footer .tabulator-counter { font-size: var(--fs-xs); }

/* Report summaries (Căutare articol) */
.app-compact .project-summary { gap: 6px; }
.app-compact .project-summary-row { gap: 6px 14px; }

/* Article / center forms and the alert-threshold editor (modals) */
.app-compact .modal-body { padding: 12px 16px; }
.app-compact .modal-header { padding: 10px 16px; }
.app-compact .modal-title { font-size: var(--fs-md); }
.app-compact .modal .form-label { font-size: var(--fs-2xs); margin-bottom: 2px; }
.app-compact .modal .form-text { font-size: var(--fs-3xs); margin-top: 2px; }
.app-compact .modal .form-control,
.app-compact .modal .form-select { font-size: var(--fs-xs); padding-top: 3px; padding-bottom: 3px; min-height: 0; }
.app-compact .modal .btn { font-size: var(--fs-sm); padding: 4px 12px; }
/* ================================================================
   STOCK MOVEMENT EDITOR (StockMovements/Details, stock-movement.js) — compact: small type and tight
   spacing so a long movement fits on screen.
   ================================================================ */

/* Its panels hold dropdowns (center pickers, article search) that must spill out of the card. */
.details-panel.sm-panel { overflow: visible; }
.sm-panel > .details-panel-header { padding: 7px 14px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.sm-panel > .details-panel-body { padding: 10px 14px; }

.sm-muted { color: var(--ink-muted); font-weight: var(--fw-normal); }
#smCount:empty { display: none; }
.sm-hint { font-size: var(--fs-3xs); font-weight: var(--fw-normal); color: var(--ink-muted); text-transform: none; letter-spacing: normal; }

/* Traseu — two searchable pickers with a swap button between them. */
.sm-route { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: start; }
.sm-picker { position: relative; min-width: 0; }
.sm-picker-label { display: block; font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px; }
.sm-picker-box { display: flex; align-items: baseline; gap: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); padding: 4px 8px; transition: border-color var(--dur-fast); }
.sm-picker-box:focus-within { border-color: var(--accent); box-shadow: var(--focus); }
.sm-picker.is-empty .sm-picker-box { border-style: dashed; }
.sm-picker-input { flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent; padding: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.sm-picker-input::placeholder { color: var(--ink-muted); font-weight: var(--fw-normal); }
.sm-picker-input:disabled { color: var(--ink); background: transparent; }
.sm-picker-hint { flex: 0 1 auto; min-width: 0; font-size: var(--fs-3xs); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sm-swap { margin-top: 15px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); cursor: pointer; }
.sm-swap:hover { border-color: var(--accent); color: var(--accent-hover); }
.sm-route-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 8px; }
.sm-type .deliv-view-btn { padding: 3px 10px; font-size: var(--fs-2xs); }
.sm-recent { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: var(--fs-2xs); }
.sm-chip { border: 1px solid var(--border); background: var(--card-2); color: var(--ink-2); border-radius: var(--r-pill); padding: 1px 8px; font-size: var(--fs-2xs); cursor: pointer; }
.sm-chip:hover { border-color: var(--accent); color: var(--accent-hover); background: var(--accent-soft); }
.sm-date { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; font-size: var(--fs-2xs); color: var(--ink-muted); }
.sm-date input { height: 26px; width: 128px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0 6px; font-size: var(--fs-xs); color: var(--ink); background: var(--card); }
.sm-date input:disabled { background: var(--card-2); }

/* Dropdowns (center pickers, article search). */
.sm-dropdown { position: absolute; z-index: 1050; left: 0; right: 0; top: calc(100% + 2px); max-height: 300px; overflow-y: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--sh-pop); padding: 3px; }
.sm-dropdown-group { font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-muted); padding: 5px 6px 1px; }
.sm-dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: var(--r-sm); font-size: var(--fs-xs); cursor: pointer; color: var(--ink); }
.sm-dropdown-item.is-active { background: var(--accent-soft); }
.sm-dropdown-item.is-selected { font-weight: var(--fw-semibold); }
.sm-dropdown-empty { padding: 6px; font-size: var(--fs-2xs); color: var(--ink-muted); }
.chip-role { font-size: var(--fs-3xs); font-weight: var(--fw-bold); color: var(--accent-hover); background: var(--accent-soft); border-radius: var(--r-pill); padding: 0 6px; }
.sm-result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Quick add bar. */
.sm-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px 2px; }
.sm-add .list-filter-input { height: 30px; font-size: var(--fs-xs); }
.sm-add .btn { height: 30px !important; font-size: var(--fs-xs); }
.sm-add-search { position: relative; display: flex; flex: 1 1 300px; max-width: 480px; }
.sm-add-search .list-filter-input { width: 100%; }
.sm-add-qty { width: 76px !important; text-align: right; }

/* Lines. */
.sm-lines { padding: 4px 0 2px; }
.sm-line-row { display: grid; align-items: center; gap: 8px; padding: 3px 14px; min-height: 32px; }
.sm-line-head { font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); min-height: 0; padding-top: 2px; padding-bottom: 2px; }
.sm-line { border-top: 1px solid var(--border-soft); transition: background var(--dur-slow); }
.sm-line.is-open { background: var(--card-2); }
.sm-line.is-flash { background: var(--accent-soft); }
.sm-line-name { min-width: 0; font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-line-name a { font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; }
.sm-line-name a:hover { color: var(--accent-hover); text-decoration: underline; }
.sm-line-toggle { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-muted); border-radius: var(--r-sm); cursor: pointer; transition: transform var(--dur-normal); }
.sm-line.is-open .sm-line-toggle { transform: rotate(90deg); color: var(--accent-hover); }
.sm-stepper { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--card); }
.sm-stepper button { width: 22px; padding: 0; border: 0; background: var(--card-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.sm-stepper button:hover { background: var(--accent-soft); color: var(--accent-hover); }
.sm-stepper input { width: 58px; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); text-align: right; padding: 0 6px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; outline: none; }
.sm-stepper input:focus { background: var(--accent-soft); }
.sm-qty-text { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.sm-stock-chip { justify-self: start; font-size: var(--fs-3xs); font-weight: var(--fw-semibold); border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; border: 1px solid transparent; }
.sm-stock-chip.is-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.sm-stock-chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.sm-serial-chip { justify-self: start; font-size: var(--fs-3xs); font-weight: var(--fw-semibold); border-radius: var(--r-pill); padding: 1px 7px; white-space: nowrap; border: 1px solid var(--border); background: var(--card); color: var(--ink-2); cursor: pointer; }
.sm-serial-chip.is-empty { border-style: dashed; color: var(--ink-muted); }
.sm-serial-chip.is-ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.sm-serial-chip.is-partial { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
/* Trasabil: a traceable article on a supply still short of serials (required), and its tag next to the name. */
.sm-serial-chip.is-required { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.sm-traceable { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); padding: 0 6px; border-radius: var(--r-pill); background: #e4eaf6; color: #0c2350; }
.sm-icon-btn { width: 22px; height: 22px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--ink-muted); border-radius: var(--r-sm); cursor: pointer; }
.sm-icon-btn:hover { background: var(--danger-soft); color: var(--danger); }
.sm-empty { padding: 12px 14px; font-size: var(--fs-xs); color: var(--ink-muted); text-align: center; }

/* Serial panel of a line. */
.sm-serials { padding: 2px 14px 8px 44px; }
.sm-serial-add, .sm-serial-common { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-2xs); }
.sm-serial-add .list-filter-input { flex: 1 1 240px; max-width: 380px; height: 28px; font-size: var(--fs-xs); }
.sm-serial-add .btn, .sm-serial-common .btn { height: 26px; padding: 0 8px; font-size: var(--fs-2xs); }
.sm-serial-common { margin: 5px 0 3px; }
.sm-serial-common input, .sm-months input { width: 44px; height: 24px; border: 1px solid var(--border); border-radius: var(--r-sm); text-align: right; padding: 0 5px; font-size: var(--fs-xs); background: var(--card); }
.sm-serial-head, .sm-serial-row { display: grid; grid-template-columns: minmax(110px, 1.2fr) 86px 110px minmax(0, 1.5fr) 24px; gap: 6px; align-items: center; }
.sm-serial-head { font-size: var(--fs-3xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ink-muted); padding: 3px 0 1px; border-bottom: 1px solid var(--border-soft); }
.sm-serial-row { padding: 2px 0; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-xs); }
.sm-serial-number { font-family: var(--mono); font-size: var(--fs-2xs); overflow-wrap: anywhere; }
.sm-months { font-size: var(--fs-2xs); color: var(--ink-muted); white-space: nowrap; }
.sm-expiry { font-size: var(--fs-2xs); color: var(--ink-2); white-space: nowrap; }
.sm-cert { display: inline-flex; align-items: center; gap: 3px; min-width: 0; font-size: var(--fs-2xs); }
.sm-cert a { display: inline-flex; align-items: center; gap: 3px; color: var(--accent-hover); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sm-attach { display: inline-flex; align-items: center; gap: 3px; justify-self: start; border: 1px dashed var(--border); background: transparent; color: var(--ink-2); border-radius: var(--r-sm); padding: 1px 7px; font-size: var(--fs-2xs); cursor: pointer; }
.sm-attach:hover { border-color: var(--accent); color: var(--accent-hover); }
.sm-serial-empty { padding: 4px 0; font-size: var(--fs-2xs); }

/* Save bar — stays in view at the bottom of the screen. */
.sm-savebar { position: sticky; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; padding: 6px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 -4px 16px rgba(30, 33, 31, .08); }
.sm-savebar-desc { flex: 1 1 300px; }
.sm-savebar-desc .list-filter-input { width: 100%; height: 30px; font-size: var(--fs-xs); }
.sm-savebar .btn { height: 30px; display: inline-flex; align-items: center; font-size: var(--fs-sm); padding: 0 14px; }
.sm-warn { align-self: center; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn-line); border-radius: var(--r-pill); padding: 2px 8px; }

@media (max-width: 767.98px) {
    .sm-route { grid-template-columns: 1fr; }
    .sm-swap { margin: 0 auto; transform: rotate(90deg); }
    .sm-date { margin-left: 0; }
    .sm-lines { overflow-x: auto; }
    .sm-line-row { min-width: 520px; }
    .sm-serials { padding-left: 14px; overflow-x: auto; }
    .sm-serial-head, .sm-serial-row { min-width: 520px; }
}

/* ================================================================
   SARCINI (Tasks/Index, tasks.js) — WhatsApp-desktop-like: list on the left, conversation on the right.
   The page script sizes .tasks-app to fill the window below the top bar.
   ================================================================ */

.app-topnav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 2px; border-radius: var(--r-pill); background: #e0493e; color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 1; }
.app-topnav-badge[hidden] { display: none; }

/* The list is 480px wide (at most 40% of the page on a small screen); the conversation takes the rest of the width
   (edge to edge with the top bar). */
.tasks-app { display: grid; grid-template-columns: min(480px, 40%) minmax(0, 1fr); height: 640px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-card); }
.tasks-ic { flex: none; }
/* The Sarcini window is typeset like WhatsApp Web: one font for everything in it (WhatsApp's own stack - Segoe UI on Windows),
   a step denser than WhatsApp's sizes since 2026-10-04 (the user: "mai condensat pe toate ferestrele"), in px: list title 15 /
   preview 13 / time 12, header 15 / 12, message 13.5 / sender 12 / time 11, composer 14, search 13.5. The font is this one
   variable; the rest of the site keeps Plus Jakarta Sans. */
.tasks-app { --tf: "Segoe UI", "Helvetica Neue", Helvetica, "Lucida Grande", Arial, Ubuntu, Cantarell, "Fira Sans", sans-serif; font-family: var(--tf); }

/* ---- left: list ---- */
.tasks-side { position: relative; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); background: var(--card); }
/* Search, Echipa and "+" on one row; under it Deschise | Închise, then the filters in one row that scrolls sideways. */
.tasks-side-head { display: flex; align-items: center; gap: 4px; padding: 8px 8px 8px 10px; }
.tasks-search { position: relative; flex: 1 1 auto; min-width: 0; }
.tasks-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); }
.tasks-search input { width: 100%; height: 32px; padding: 0 10px 0 32px; border: 1px solid transparent; border-radius: 9px; background: var(--field-bg); font-size: 13.5px; color: var(--ink); outline: none; }
.tasks-search input:focus { border-color: var(--accent); background: var(--card); box-shadow: var(--focus); }
.tasks-new-btn { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-hover); }
.tasks-new-btn:hover { background: var(--accent); color: var(--accent-ink); }
.tasks-seg { display: flex; gap: 2px; margin: 0 10px 8px; padding: 2px; border-radius: 9px; background: var(--field-bg); }
.tasks-seg-btn { flex: 1 1 0; height: 26px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font-size: 13px; font-weight: var(--fw-semibold); cursor: pointer; }
.tasks-seg-btn:hover { color: var(--ink); }
.tasks-seg-btn.is-active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(23, 16, 60, .12); }
.tasks-seg-btn:focus-visible { outline: 0; box-shadow: var(--focus); }
.tasks-filterbar { position: relative; display: flex; border-bottom: 1px solid var(--border-soft); }
.tasks-filters { display: flex; flex-wrap: nowrap; gap: 4px; flex: 1 1 auto; min-width: 0; padding: 0 10px 8px; overflow-x: auto; scrollbar-width: none; }
.tasks-filters::-webkit-scrollbar { display: none; }
.tasks-filterbar-nav { position: absolute; top: 0; bottom: 8px; z-index: 2; display: flex; align-items: center; width: 36px; padding: 0 6px; border: 0; color: var(--ink-2); cursor: pointer; }
.tasks-filterbar-nav.is-prev { left: 0; justify-content: flex-start; background: linear-gradient(90deg, var(--card) 55%, rgba(255, 255, 255, 0)); }
.tasks-filterbar-nav.is-next { right: 0; justify-content: flex-end; background: linear-gradient(270deg, var(--card) 55%, rgba(255, 255, 255, 0)); }
.tasks-filterbar-nav:hover { color: var(--accent-hover); }
.tasks-filterbar-nav[hidden] { display: none; }
.tasks-filter { flex: none; height: 27px; border: 1px solid var(--border); background: var(--card); color: var(--ink-2); border-radius: var(--r-pill); padding: 0 11px; font-size: 13px; font-weight: var(--fw-medium); white-space: nowrap; cursor: pointer; }
.tasks-filter:hover { border-color: var(--accent); color: var(--accent-hover); }
.tasks-filter.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
/* Grupuri / De la / Către / Proiect / Stare open a list (caret); a person or project picked shows its name and a × that
   takes it off. */
.tasks-filter.is-picker { display: inline-flex; align-items: center; gap: 3px; max-width: 220px; }
.tasks-filter.is-picker[hidden] { display: none; }
.tasks-filter.is-picker::after { content: ""; width: 7px; height: 7px; margin: -3px 1px 0 2px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: rotate(45deg); opacity: .7; }
.tasks-filter.is-picker:has(.tasks-focus-clear:not([hidden]))::after { display: none; }
.tasks-focus-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-focus-clear { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -5px; border-radius: 50%; background: rgba(58, 50, 184, .12); font-size: 13px; line-height: 1; }
.tasks-focus-clear:hover { background: rgba(58, 50, 184, .24); }
.tasks-focus-clear[hidden] { display: none; }
.tasks-hidden-unread { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 12px; background: var(--accent-soft); color: var(--accent-hover); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.tasks-hidden-unread[hidden] { display: none; }
.tasks-picker { position: absolute; left: 12px; right: 12px; z-index: 20; display: flex; flex-direction: column; max-height: min(420px, 70%); background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 10px 30px rgba(16, 24, 40, .16); overflow: hidden; }
.tasks-picker[hidden] { display: none; }
.tasks-picker-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-soft); font-size: var(--fs-xs); }
.tasks-picker-actions { margin-left: auto; display: inline-flex; gap: 10px; }
.tasks-picker-search { flex: 1 1 auto; min-width: 0; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card-2); font-size: var(--fs-2xs); outline: none; }
.tasks-picker-search:focus { border-color: var(--accent); background: var(--card); }
.tasks-picker-list { overflow-y: auto; min-height: 0; padding: 4px 0; }
.tasks-picker-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.tasks-picker-item:hover, .tasks-picker-item:focus-visible { background: var(--card-2); outline: none; }
.tasks-picker-item[hidden] { display: none; }
.tasks-picker-item.is-current { background: var(--accent-soft); }
.tasks-picker-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: var(--fs-xs); color: var(--ink); }
.tasks-picker-text span, .tasks-picker-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-picker-text small { font-size: var(--fs-3xs); color: var(--ink-muted); }
.tasks-picker-check { color: var(--accent); font-weight: var(--fw-bold); }
.tasks-picker-group { display: flex; align-items: center; gap: 7px; padding: 5px 12px; font-size: var(--fs-xs); color: var(--ink); cursor: pointer; }
.tasks-picker-group:hover { background: var(--card-2); }
.tasks-picker-group input { accent-color: var(--accent); }
.tasks-picker-group small { margin-left: auto; font-size: var(--fs-3xs); color: var(--ink-muted); }
.tasks-picker-foot { padding: 6px 12px; border-top: 1px solid var(--border-soft); font-size: var(--fs-3xs); color: var(--ink-muted); }
.tasks-avatar.is-project { background: #fcf1d9; color: #8a5a0b; border-color: transparent; }
/* presence: the green dot on a face (someone active in the last couple of minutes) */
.tasks-avatar-wrap { position: relative; display: inline-flex; flex: 0 0 auto; align-self: flex-start; }
.tasks-online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--online); border: 2px solid var(--card); }
.tasks-filter-count { margin-left: 2px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.tasks-filter.is-active .tasks-filter-count { color: inherit; opacity: .85; }
.tasks-list { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.tasks-list-empty { padding: 24px 16px; text-align: center; font-size: var(--fs-xs); color: var(--ink-muted); }
.tasks-item { display: flex; gap: 10px; width: 100%; padding: 8px 12px 8px 10px; border: 0; border-bottom: 1px solid var(--border-soft); background: var(--card); text-align: left; cursor: pointer; }
.tasks-item:hover { background: var(--card-2); }
.tasks-item.is-active { background: var(--accent-soft); }
.tasks-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tasks-item-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tasks-item-title { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: var(--fw-normal); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-item.is-unread .tasks-item-title { font-weight: var(--fw-bold); }
/* an urgent task: a red bar on the left of its row, its title in red, and a red "urgent" chip */
.tasks-item.is-urgent { box-shadow: inset 4px 0 0 var(--danger); }
.tasks-item.is-urgent .tasks-item-title { color: var(--danger); font-weight: var(--fw-bold); }
.tasks-chip.is-urgent { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); font-weight: var(--fw-bold); }
.tasks-urgent-toggle { color: var(--danger); font-weight: var(--fw-bold); }
.tasks-item-time { flex: 0 0 auto; font-size: 12px; color: var(--ink-muted); }
.tasks-item.is-unread .tasks-item-time { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-item-preview { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-unread { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; }
.tasks-item-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.tasks-chip { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; font-size: var(--fs-3xs); font-weight: var(--fw-semibold); padding: 1px 7px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); border: 1px solid var(--border-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.tasks-chip.is-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
.tasks-chip.is-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
.tasks-chip.is-closed { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
.tasks-chip.is-muted { color: var(--ink-muted); }
.tasks-chip.is-link:hover { border-color: var(--accent); color: var(--accent-hover); }

/* Rows as in the mobile app: line 2 who wrote last (a small face), line 3 quiet meta (deadline coloured), quick actions on hover. */
.tasks-item { position: relative; }
.tasks-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tasks-item.is-closed .tasks-item-title { color: var(--ink-2); }
.tasks-item-preview.is-noreply { font-style: italic; }
.tasks-preview-author { font-weight: var(--fw-medium); color: var(--ink-2); }
.tasks-mini-face { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; border-radius: 50%; object-fit: cover; font-size: 8px; font-weight: var(--fw-bold); font-style: normal; background: var(--card-2); color: var(--ink-2); border: 1px solid var(--border-soft); }
.tasks-mini-face.is-dept { background: #e4eaf6; border-color: transparent; font-size: 9px; }
.tasks-item-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 1px; font-size: 12px; color: var(--ink-muted); }
.tasks-meta-part { display: inline-flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tasks-meta-part .tasks-ic { width: 14px; height: 14px; }
.tasks-meta-deadline.is-overdue { color: var(--danger); font-weight: var(--fw-semibold); }
.tasks-meta-part.is-soon { color: #a0470a; font-weight: var(--fw-semibold); }
.tasks-meta-deadline.is-closed { color: var(--ok); }
.tasks-meta-holder.is-working { color: var(--accent-hover); }
.tasks-muted-mark { display: inline-flex; vertical-align: -1px; margin-right: 4px; color: var(--ink-muted); }
.tasks-row-actions { position: absolute; right: 8px; bottom: 6px; display: none; gap: 3px; padding: 2px; border-radius: var(--r-pill); background: var(--card); box-shadow: 0 1px 6px rgba(16, 24, 40, .16); }
.tasks-item:hover .tasks-row-actions, .tasks-item:focus-within .tasks-row-actions { display: inline-flex; }
.tasks-row-act { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: transparent; line-height: 1; cursor: pointer; color: var(--ink-2); }
.tasks-row-act:hover { background: var(--accent-soft); color: var(--accent-hover); }
.tasks-online.is-recent { background: #eab308; }
/* the thread: who gave it in the header, "Văzut" ticks, faces open a profile */
.tasks-face-btn { display: inline-flex; flex: 0 0 auto; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; align-self: flex-end; }
.tasks-thread-head .tasks-face-btn { align-self: center; }
.tasks-face-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tasks-head-sub { margin-top: 1px; font-size: 12px; color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-head-sub .tasks-link { font-size: inherit; }
.tasks-task-seen { color: #0e8faa; }
.tasks-ticks { margin-left: 3px; color: #8696a0; font-size: 11px; letter-spacing: -2px; }
.tasks-ticks.is-seen { color: #0e8faa; }
.tasks-seen-by { align-self: flex-end; margin: -2px 6px 2px 0; font-size: var(--fs-3xs); color: var(--ink-muted); }
/* quick days (deadline dialog, new task) and the editor's recent assignees / projects */
.tasks-quick-days { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tasks-quick-day, .tasks-recent { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasks-quick-day small { color: var(--ink-muted); font-weight: var(--fw-normal); }
.tasks-quick-day:hover, .tasks-recent:hover { border-color: var(--accent); color: var(--accent-hover); }
.tasks-quick-day.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tasks-quick-day.is-active small { color: inherit; opacity: .85; }
/* The deadline's day and, beside it, its hour (optional). */
.tasks-deadline-row { display: flex; gap: 8px; align-items: flex-end; }
.tasks-deadline-day { flex: 1 1 auto; min-width: 0; }
.tasks-deadline-hour { flex: 0 0 7.5rem; }
.tasks-deadline-hour input:disabled { background: var(--card-2); cursor: not-allowed; }
/* Sarcini+ "Repetă": the frequency's fields under the deadline; ↻ on a task that repeats (list row, header). */
.tasks-repeat { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-2); }
.tasks-repeat[hidden], .tasks-repeat-row[hidden], .tasks-repeat-days[hidden] { display: none; }
.tasks-repeat-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-md); color: var(--ink-2); }
.tasks-repeat-row > span { white-space: nowrap; }
.tasks-repeat-num { width: 4rem; flex: 0 0 auto; }
.tasks-repeat-end { width: auto; flex: 0 1 10rem; }
.tasks-repeat-days { display: flex; flex-wrap: wrap; gap: 4px; }
.tasks-repeat-day { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.tasks-repeat-day input { position: absolute; opacity: 0; pointer-events: none; }
.tasks-repeat-day span { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 26px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-2); }
.tasks-repeat-day input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.tasks-repeat-day input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tasks-repeat-mark { display: inline-block; margin-right: 5px; color: var(--accent-hover); font-weight: var(--fw-bold); }
.tasks-repeat-mark.is-stopped { color: var(--ink-muted); }
.tasks-info.is-repeat { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.tasks-info.is-repeat.is-muted { color: var(--ink-muted); font-weight: inherit; }
.tasks-recents { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.tasks-recents[hidden] { display: none; }
.tasks-recents.is-projects { margin: 6px 0 0; }
.tasks-recent .tasks-mini-face { margin-right: 0; }
/* Echipa: the icon with how many are active, the list, a profile */
.tasks-team-btn { position: relative; width: 30px; height: 30px; }
.tasks-team-count { position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: var(--r-pill); background: var(--online); color: #fff; font-size: 10px; font-weight: var(--fw-bold); line-height: 16px; text-align: center; border: 2px solid var(--card); box-sizing: content-box; }
.tasks-team-count[hidden] { display: none; }
.tasks-team-search { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.tasks-team-search .tasks-picker-search { width: 100%; }
.tasks-team-head { padding: 10px 14px 4px; font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.tasks-team-list .tasks-avatar.is-sm { width: 34px; height: 34px; }
.tasks-profile-top { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; padding-bottom: 10px; }
.tasks-profile-photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
.tasks-profile-photo.is-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-hover); font-size: 36px; font-weight: var(--fw-bold); }
.tasks-profile-name { margin-top: 6px; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); text-wrap: balance; }
.tasks-profile-details { font-size: var(--fs-xs); color: var(--ink-muted); }
.tasks-profile-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.tasks-status-dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid #8696a0; }
.tasks-profile-status.is-active .tasks-status-dot { background: var(--online); border-color: var(--online); }
.tasks-profile-status.is-recent .tasks-status-dot { background: #eab308; border-color: #eab308; }
.tasks-profile-section { padding: 10px 0; border-top: 1px solid var(--border-soft); font-size: var(--fs-xs); }
.tasks-profile-label { margin-bottom: 4px; font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.tasks-profile-group { padding: 2px 0; }
.tasks-profile-tasks { margin: 0 -16px; border-top: 1px solid var(--border-soft); }
/* Contributori: the executant (or the group), then the ones added (who added them, when, × to take them off); "Adaugă
   contributor" opens a people picker under them. The executanți of a group's task use the same rows (ticked while picking). */
.tasks-member { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border-bottom: 1px solid var(--border-soft); }
.tasks-member .tasks-face-btn { align-self: center; }
.tasks-member-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tasks-member-text strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.tasks-member-text small { font-size: var(--fs-2xs); color: var(--ink-muted); }
.tasks-members-add { padding: 10px 16px 6px; border-bottom: 1px solid var(--border-soft); background: var(--card-2); }
.tasks-members-add[hidden] { display: none; }
.tasks-members-add .tasks-picker-search { width: 100%; height: 32px; }
.tasks-members-pick { max-height: 280px; overflow-y: auto; margin: 6px -16px 0; }
#tMembersFoot[hidden] { display: none; }
.tasks-members-note { padding: 10px 16px; font-size: var(--fs-2xs); color: var(--ink-muted); }
/* The task's text in the editor, for whoever may edit the rest but not what it says (only its creator does). */
#teText[readonly] { background: var(--card-2); color: var(--ink-2); cursor: default; }
#tExecFoot[hidden] { display: none; }
.tasks-exec-pick { margin: 0; cursor: pointer; }
.tasks-exec-pick:hover { background: var(--card-2); }
.tasks-exec-pick.is-on { background: var(--accent-soft); }
.tasks-exec-pick .form-check-input { flex: 0 0 auto; }
.tasks-exec-seg { display: inline-flex; align-items: center; gap: 5px; }
.tasks-exec-seg.is-working, .tasks-exec-seg.is-working .tasks-ic { color: var(--accent-hover); }
.tasks-info.tasks-exec-info { max-width: 100%; gap: 8px; }

/* avatars */
.tasks-avatar { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.tasks-avatar.is-sm { width: 28px; height: 28px; }
.tasks-avatar.is-lg { width: 36px; height: 36px; }
.tasks-avatar.is-icon, .tasks-avatar.is-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--ink-2); border: 1px solid var(--border-soft); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.tasks-avatar.is-dept { background: var(--accent-soft); color: var(--accent-hover); border-color: transparent; }
.tasks-avatar.is-private { background: var(--warn-soft); color: var(--warn); border-color: transparent; }

/* ---- right: conversation ---- */
.tasks-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.tasks-placeholder { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--ink-muted); font-size: var(--fs-sm); }
.tasks-placeholder svg { color: var(--accent); opacity: .6; }
.tasks-loading { padding: 24px; text-align: center; color: var(--ink-muted); font-size: var(--fs-xs); }
.tasks-thread { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.tasks-thread[hidden], .tasks-editor[hidden], .tasks-placeholder[hidden] { display: none; }
/* The header: who gave it, the title and the state on top; the info line (icons, as in the app) with Buzz at its end; a
   group's Preiau / Mă ocup / Prelungire. The lines under the top one start under the title. */
.tasks-thread-head { display: flex; flex-direction: column; gap: 6px; padding: 8px 14px; background: var(--card); border-bottom: 1px solid var(--border); }
.tasks-head-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tasks-head-body { flex: 1 1 auto; min-width: 0; }
.tasks-head-title { font-size: 15px; font-weight: var(--fw-bold); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.tasks-head-actions .btn { font-size: 12.5px; padding: 3px 10px; }
.tasks-state-btn { display: inline-flex; align-items: center; gap: 6px; }
.tasks-head-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; min-height: 28px; padding-left: 46px; font-size: 12.5px; color: var(--ink-2); }
.tasks-info { display: inline-flex; align-items: center; gap: 5px; max-width: 280px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); }
.tasks-info .tasks-ic { color: var(--ink-muted); }
.tasks-info .tasks-link { font-size: inherit; }
.tasks-info.is-overdue, .tasks-info.is-overdue .tasks-ic { color: var(--danger); font-weight: var(--fw-semibold); }
.tasks-info.is-soon, .tasks-info.is-soon .tasks-ic { color: #a0470a; font-weight: var(--fw-semibold); }
.tasks-info.is-muted { color: var(--ink-muted); }
.tasks-info.is-working, .tasks-info.is-working .tasks-ic { color: var(--accent-hover); }
.tasks-info.is-warn, .tasks-info.is-warn .tasks-ic { color: var(--danger); }
.tasks-info.is-urgent { padding: 2px 8px; border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font-size: 12px; font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); }
.tasks-info-btn { margin: -3px -6px; padding: 3px 6px; border: 0; border-radius: var(--r-sm); background: none; font: inherit; cursor: pointer; }
.tasks-info-btn:hover { background: var(--card-2); }
.tasks-info-link { text-decoration: none; }
.tasks-info-link:hover { color: var(--accent-hover); text-decoration: underline; }
.tasks-head-info-end { margin-left: auto; }
/* Buzz, as in the app: a round button with a red bell (only whoever gave the task). */
.tasks-buzz { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: #eef1f4; color: #b42318; cursor: pointer; transition: background var(--dur-fast); }
.tasks-buzz:hover { background: #fde0dc; }
.tasks-buzz:focus-visible { outline: 0; box-shadow: var(--focus); }
.tasks-status { font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--accent-hover); background: var(--accent-soft); border-radius: var(--r-pill); padding: 2px 8px; }
.tasks-status.is-closed { color: var(--ink-muted); background: var(--card-2); }
.tasks-muted { color: var(--ink-muted); font-weight: var(--fw-normal); }
.tasks-link { border: 0; background: none; padding: 0; color: var(--accent-hover); font-size: var(--fs-2xs); text-decoration: underline; cursor: pointer; }
.tasks-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.tasks-icon-btn:hover { background: var(--card-2); color: var(--ink); }
.tasks-back { display: none; }

/* The conversation's backdrop: the app's pale lavender (ThreadBg). Messages may take up to 80% of it, capped where lines
   would get too long to read. */
.tasks-messages { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 10px 18px; display: flex; flex-direction: column; gap: 4px; background-color: #f1effa; }
.tasks-day { align-self: center; margin: 6px 0 2px; }
.tasks-day span { font-size: 12px; font-weight: var(--fw-normal); color: var(--ink-2); background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-pill); padding: 2px 10px; }
.tasks-msg { display: flex; align-items: flex-end; gap: 8px; max-width: min(80%, 900px); }
.tasks-msg.is-mine { align-self: flex-end; flex-direction: row-reverse; }
/* The rest of one person's series: no face (its place kept) and no name, closer to the one before. */
.tasks-msg.is-cont { margin-top: -3px; }
.tasks-msg.is-cont .tasks-face-btn { visibility: hidden; }
.tasks-bubble { position: relative; min-width: 80px; padding: 5px 9px 3px; background: var(--card); border: 1px solid var(--border-soft); border-radius: 10px 10px 10px 3px; box-shadow: var(--sh-xs); }
.tasks-msg.is-mine .tasks-bubble { background: #dcd6fa; border-color: #cbc3f6; border-radius: 10px 10px 3px 10px; }
/* The task itself (its first message): pale blue, whoever gave it — the same as the phone's task bubble. */
.tasks-msg.is-task .tasks-bubble { background: #eef3fa; border-color: #dce5f2; }
.tasks-msg.is-task.is-mine .tasks-bubble { background: #eef3fa; border-color: #dce5f2; }
.tasks-bubble-author { font-size: 12px; font-weight: var(--fw-bold); color: var(--accent-hover); margin-bottom: 1px; }
/* Replies: the quoted message on top of the bubble (click: go to it), ↩ next to a message on hover, the bar over the
   composer while writing one. */
.tasks-quote { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 4px 8px; border-left: 3px solid var(--accent); border-radius: 6px; background: rgba(15, 42, 79, .06); cursor: pointer; max-width: 420px; }
.tasks-msg.is-mine .tasks-quote { background: rgba(58, 50, 184, .10); }
.tasks-quote-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tasks-quote-author { font-size: 12px; font-weight: var(--fw-bold); color: var(--accent-hover); }
.tasks-quote-text { font-size: 13px; color: var(--ink-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tasks-quote-photo { width: 38px; height: 38px; border-radius: 4px; object-fit: cover; flex: none; }
.tasks-reply-btn { align-self: center; visibility: hidden; border: 0; background: transparent; color: var(--ink-muted); padding: 4px; border-radius: 50%; cursor: pointer; flex: none; }
.tasks-msg:hover .tasks-reply-btn, .tasks-reply-btn:focus-visible { visibility: visible; }
.tasks-reply-btn:hover { background: var(--card-2); color: var(--accent-hover); }
.tasks-msg.is-flash .tasks-bubble { animation: tasks-flash 1.2s ease-out; }
@keyframes tasks-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(80, 71, 232, .45); } 100% { box-shadow: var(--sh-xs); } }
.tasks-replybar { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; padding: 6px 8px 6px 10px; border-left: 3px solid var(--accent); border-radius: 8px; background: var(--card-2); }
/* Editing one of my messages: the bar over the composer while its text is in it; "editat" by an edited message's time. */
.tasks-replybar.is-edit .tasks-quote-author { display: inline-flex; align-items: center; gap: 5px; }
.tasks-edited { font-style: italic; }
.tasks-bubble-text { font-size: 13.5px; line-height: 18px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.tasks-bubble-time { font-size: 11px; color: var(--ink-muted); text-align: right; margin-top: 1px; }
/* Events (deadline changes, Preiau / Mă ocup, Buzz, close / reopen): a quiet line with its icon. Stand-outs keep a colour:
   the executant pushing their own deadline (red), a deleted message (a pill), a buzz (red text). */
.tasks-event { align-self: center; max-width: 90%; text-align: center; margin: 2px 0; }
.tasks-event span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-muted); padding: 2px 10px; }
.tasks-event.is-warn span { background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: var(--r-pill); color: var(--danger); }
.tasks-event.is-deleted span { background: var(--card); border: 1px solid var(--border-soft); border-radius: var(--r-pill); font-style: italic; }
.tasks-event.is-buzz span { color: #b42318; }

/* A group's task: Preiau / Mă ocup (toggles — on: filled with the brand purple), Executanți (whoever may pick them) and
   Prelungire, as the app's pills — as many columns as there are buttons. */
.tasks-actionbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 140px); justify-content: start; gap: 6px; padding-left: 46px; }
.tasks-actionbar .dropdown > .tasks-act { width: 100%; }
.tasks-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px;
    border: 1px solid var(--border); background: var(--card); color: var(--ink);
    border-radius: var(--r-pill); padding: 0 14px; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast);
}
.tasks-act:hover { border-color: var(--accent); color: var(--accent-hover); }
.tasks-act.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.tasks-chip.is-warn { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }

.tasks-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 120px)); gap: 4px; margin-top: 4px; }
.tasks-photos.is-single { grid-template-columns: minmax(0, 260px); }
.tasks-photo { display: block; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--card-2); cursor: zoom-in; max-height: 260px; }
.tasks-photos:not(.is-single) .tasks-photo { aspect-ratio: 1 / 1 !important; }
.tasks-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tasks-new-messages { position: absolute; right: 18px; bottom: 64px; z-index: 5; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: var(--fs-2xs); font-weight: var(--fw-bold); padding: 4px 12px; box-shadow: var(--sh-pop); cursor: pointer; }

/* The composer: one rounded field holding the attach button and the text; send beside it. */
.tasks-composer { padding: 6px 14px 8px; background: var(--card); border-top: 1px solid var(--border); }
.tasks-composer-row { display: flex; align-items: flex-end; gap: 8px; }
.tasks-composer-field { display: flex; align-items: flex-end; gap: 2px; flex: 1 1 auto; min-width: 0; padding: 2px 8px 2px 3px; border: 1px solid transparent; border-radius: 22px; background: var(--field-bg); }
.tasks-composer-field:focus-within { border-color: var(--accent); background: var(--card); box-shadow: var(--focus); }
.tasks-composer textarea { flex: 1 1 auto; min-height: 34px; max-height: 160px; resize: none; padding: 7px 4px; border: 0; background: transparent; font-size: 14px; line-height: 1.35; color: var(--ink); outline: none; }
.tasks-attach { width: 32px; height: 32px; color: var(--ink-muted); }
.tasks-attach:disabled { opacity: .4; cursor: default; }
.tasks-send { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.tasks-send:hover { background: var(--accent-hover); }
.tasks-send:disabled { opacity: .6; cursor: default; }

.tasks-pending { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tasks-pending[hidden] { display: none; }
.tasks-pending-item { position: relative; width: 56px; height: 56px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); background: var(--card-2); }
.tasks-pending-item img { width: 100%; height: 100%; object-fit: cover; }
.tasks-pending-item.is-uploading img { opacity: .45; }
.tasks-pending-item.is-uploading::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; animation: tasks-spin .8s linear infinite; }
.tasks-pending-item.is-error { border-color: var(--danger); }
/* a document waiting to be sent: its icon and name in the same 56px box */
.tasks-pending-item.is-doc { width: 96px; }
.tasks-pending-doc { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; padding: 4px; font-size: .7rem; line-height: 1.1; text-align: center; }
.tasks-pending-doc-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; max-width: 100%; }
.tasks-pending-item.is-doc.is-uploading .tasks-pending-doc { opacity: .45; }
/* a document in a message: icon, name, size */
.tasks-doc { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: var(--card-2); border: 1px solid var(--border); color: inherit; text-decoration: none; max-width: 280px; }
.tasks-doc:hover { border-color: var(--accent); color: inherit; }
.tasks-doc-icon { font-size: 1.5rem; line-height: 1; }
.tasks-doc-body { display: flex; flex-direction: column; min-width: 0; }
.tasks-doc-name { font-size: .85rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-doc-size { font-size: .72rem; color: var(--muted, #6b7785); }
.tasks-pending-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; cursor: pointer; }
@keyframes tasks-spin { to { transform: rotate(360deg); } }

.tasks-drop { position: absolute; inset: 8px; z-index: 20; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--accent); border-radius: var(--r-lg); background: rgba(238, 236, 253, .92); color: var(--accent-hover); font-weight: var(--fw-bold); pointer-events: none; }
.tasks-drop[hidden] { display: none; }

/* ---- new / edit ---- */
.tasks-editor { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: var(--card); }
.tasks-editor-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.tasks-editor-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); }
.tasks-editor-body { flex: 1 1 auto; overflow-y: auto; padding: 12px 14px; }
.tasks-editor-body .form-label { font-size: var(--fs-2xs); font-weight: var(--fw-bold); margin-bottom: 3px; }
.tasks-editor-body .form-control, .tasks-editor-body .form-select { font-size: var(--fs-sm); }
.tasks-editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 12px; }
.tasks-assign .deliv-view-btn { padding: 4px 10px; font-size: var(--fs-2xs); }
.tasks-system-toggle { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-2xs); color: var(--ink-muted); cursor: pointer; }
.tasks-system-toggle[hidden] { display: none; }
.tasks-editor-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tasks-editor-photos .tasks-pending { margin: 0; }
.tasks-editor-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border); }

/* ---- photo viewer ---- */
.tasks-lightbox { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(12, 16, 14, .88); }
.tasks-lightbox[hidden] { display: none; }
.tasks-lightbox img { max-width: 92vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.tasks-lightbox-close { position: absolute; top: 12px; right: 18px; border: 0; background: none; color: #fff; font-size: 34px; line-height: 1; cursor: pointer; }
.tasks-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px; cursor: pointer; }
.tasks-lightbox-nav.is-prev { left: 18px; }
.tasks-lightbox-nav.is-next { right: 18px; }
.tasks-lightbox-nav[hidden] { display: none; }
.tasks-lightbox-open { position: absolute; bottom: 16px; color: #fff; font-size: var(--fs-xs); opacity: .8; }

/* Project page: its Sarcini list. */
.project-tasks .task-list { padding: 10px 14px; }

/* ---- phones: one pane at a time ---- */
@media (max-width: 767.98px) {
    /* minmax(0, …): the one-row filters and the nowrap titles mustn't stretch the column past the screen. */
    .tasks-app { grid-template-columns: minmax(0, 1fr); }
    .tasks-app .tasks-main { display: none; }
    .tasks-app.is-detail .tasks-side { display: none; }
    .tasks-app.is-detail .tasks-main { display: flex; }
    .tasks-back { display: inline-flex; }
    .tasks-msg { max-width: 92%; }
    .tasks-editor-grid { grid-template-columns: 1fr; }
    .tasks-head-actions .tasks-status { display: none; }
    .tasks-thread-head { padding: 10px 12px; }
    .tasks-head-info, .tasks-actionbar { padding-left: 0; }
    .tasks-actionbar { grid-auto-columns: minmax(0, 1fr); justify-content: stretch; }
    .tasks-act { padding: 0 8px; white-space: nowrap; }
    /* Narrow: three buttons, as before — the executants are picked from their line in the header (the one with the pencil). */
    .tasks-actionbar .tasks-act[data-action="executants"] { display: none; }
    .tasks-messages { padding: 12px; }
}

/* photo viewer: a click zooms to the real size (scrollable), another fits it back */
.tasks-lightbox.is-zoomed { overflow: auto; align-items: flex-start; justify-content: flex-start; }
.tasks-lightbox.is-zoomed #tLightboxImg { max-width: none; max-height: none; cursor: zoom-out; }
#tLightboxImg { cursor: zoom-in; }

/* ================================================================
   TODO (Home/Index) — as in the mobile app: the Sarcini filters, the month calendar, the picked day's tasks.
   The rows are the Sarcini list's (.tasks-item …).
   ================================================================ */
.todo-app { display: flex; flex-direction: column; gap: 12px; }
.todo-bar { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); padding: 8px 0 0; }
.todo-bar .tasks-filters { border-bottom: 0; }
.todo-cols { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 12px; align-items: start; }
.todo-app.is-folded .todo-cols { grid-template-columns: minmax(0, 1fr); }
.todo-cal-bar { gap: 6px; }
.todo-month { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); min-width: 12ch; text-align: center; }
.todo-app.is-folded .todo-month { text-align: left; }
.todo-app.is-folded #todoPrev, .todo-app.is-folded #todoNext { display: none; }
.todo-cal-body[hidden] { display: none; }
/* The shortcuts under the month bar (open or folded): a day, a week, the open tasks without a deadline — each with how
   many open tasks it holds after the filters. */
.todo-shortcuts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.todo-app.is-folded .todo-shortcuts { border-bottom: 0; }
.todo-shortcut { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); white-space: nowrap; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); }
.todo-shortcut:hover { border-color: var(--accent); color: var(--accent-hover); }
.todo-shortcut:focus-visible { outline: 0; box-shadow: var(--focus); }
.todo-shortcut.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-hover); }
.todo-shortcut-count { min-width: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); font-size: var(--fs-3xs); font-weight: var(--fw-bold); line-height: 16px; text-align: center; font-variant-numeric: tabular-nums; }
.todo-shortcut-count:empty { display: none; }
.todo-shortcut.is-active .todo-shortcut-count { background: var(--accent); color: var(--accent-ink); }
.todo-grid .cal-cell { height: 38px; flex-direction: column; gap: 1px; }
.todo-grid .cal-cell.is-other-month { opacity: .35; }
.todo-grid .cal-cell.is-weekend:not(.is-selected) .cal-daynum { color: var(--ink-muted); }
.todo-grid .cal-cell.is-in-week:not(.is-selected) { background: var(--accent-soft); }
.todo-day { overflow: hidden; }
/* What's picked: its title (‹ › around it in the week view) and "Sarcină nouă". */
.todo-day-head { display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 8px 10px 4px 14px; }
.todo-day-title { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); text-wrap: balance; }
.todo-new { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.todo-section-title { padding: 10px 14px 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--accent-hover); }
.todo-section-title.is-danger { color: var(--danger); }
.todo-list { border-top: 1px solid var(--border-soft); }
.todo-list:empty { display: none; }
.todo-list .tasks-item { color: inherit; text-decoration: none; }
.todo-list a.tasks-item:hover { background: var(--card-2); }
.todo-error { margin: 10px 14px 0; padding: 8px 12px; border-radius: var(--r-md); background: var(--danger-soft); color: var(--danger); font-size: var(--fs-xs); }
.todo-error[hidden] { display: none; }
/* Sarcini+: the occurrences still to come ("planificat") — a dashed badge on their day, dashed rows among the tasks. */
.cal-counts { display: inline-flex; gap: 2px; }
.cal-count.is-planned { background: transparent; color: var(--accent-hover); border: 1px dashed currentColor; padding: 0 3px; }
.cal-cell.is-selected .cal-count.is-planned { background: transparent; color: var(--accent-ink); }
.todo-list .tasks-item.is-planned { cursor: default; background: var(--card); outline: 1px dashed var(--border); outline-offset: -4px; border-radius: var(--r-md); }
.todo-list .tasks-item.is-planned .tasks-avatar-wrap { opacity: .6; }
.tasks-item.is-planned .tasks-item-title { color: var(--ink-2); }
.tasks-item.is-skipped { opacity: .7; }
.tasks-item.is-skipped .tasks-item-title { text-decoration: line-through; color: var(--ink-muted); }
.todo-planned-tag { color: var(--accent-hover); font-weight: var(--fw-semibold); }
.todo-planned-act { flex: 0 0 auto; font-size: 12px; }
@media (max-width: 768px) {
    .todo-cols { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================
   COMENZI (Stocuri) — the dashboard cards, the list, one order.
   Status colours: request (amber) → accepted (blue) → placed (navy) → delivered (teal) → operated (green); rejected red.
   ================================================================ */
.ord-reason { font-size: var(--fs-2xs); color: var(--danger); }
.ord-project { font-size: var(--fs-3xs); padding: 0 6px; border-radius: var(--r-pill); background: #fcf1d9; color: #8a5a0b; }
.ord-todo { color: var(--accent); font-size: 10px; vertical-align: 1px; }
.ord-add-um { width: 70px !important; }
.ord-add-um[hidden] { display: none; }
.ord-free-item { border-top: 1px dashed var(--border); margin-top: 2px; font-style: italic; }
.ord-lines { padding: 4px 0 8px; }
.ord-line { display: grid; grid-template-columns: minmax(0, 1fr) 80px 70px 90px minmax(0, 160px) 26px; align-items: center; gap: 8px; padding: 4px 14px; border-bottom: 1px solid var(--border-soft); }
.ord-line.is-readonly { grid-template-columns: minmax(0, 1fr) auto; }
.ord-line:last-child { border-bottom: 0; }
.ord-line-name { min-width: 0; font-size: var(--fs-xs); color: var(--ink); overflow-wrap: anywhere; }
.ord-line-qty, .ord-line-um { height: 28px; min-width: 0; width: 100%; padding: 2px 8px; font-size: var(--fs-xs); }
.ord-line-qty { text-align: right; }
.ord-line-qty-text { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-free-tag { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); padding: 0 6px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-muted); border: 1px dashed var(--border); }
.ord-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border-color: var(--accent); background: var(--accent-soft); }
.ord-actions-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--accent-hover); }
.ord-details { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 12px; }
.ord-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: var(--fs-xs); }
.ord-facts dt { font-weight: var(--fw-semibold); color: var(--ink-muted); }
.ord-facts dd { margin: 0; color: var(--ink); }
.ord-explanation { white-space: pre-line; }
.ord-reject-reason { color: var(--danger); white-space: pre-line; }
.ord-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ord-steps li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; align-items: baseline; font-size: var(--fs-xs); color: var(--ink-muted); }
.ord-step-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border); background: var(--card); align-self: center; }
.ord-steps li.is-done { color: var(--ink); }
.ord-steps li.is-done .ord-step-dot { background: var(--accent); border-color: var(--accent); }
.ord-steps li.is-rejected .ord-step-dot { background: var(--danger); border-color: var(--danger); }
.ord-step-label { font-weight: var(--fw-semibold); }
.ord-step-who { grid-column: 2; font-size: var(--fs-2xs); color: var(--ink-muted); }
.ord-op-line { padding: 10px 0; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 6px; }
.ord-op-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ord-op-qty { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); }
.ord-op-qty .form-control { width: 80px; height: 28px; padding: 2px 8px; text-align: right; }
/* Centre → Comenzi: who approves / places */
.center-orders { padding-top: 12px; border-top: 1px solid var(--border-soft); }
.center-orders-title { margin-bottom: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.center-order-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.center-order-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hover); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.center-order-chip button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; line-height: 1; cursor: pointer; }
.center-order-chip button:hover { background: rgba(0, 0, 0, .08); }
@media (max-width: 900px) {
    .ord-details { grid-template-columns: minmax(0, 1fr); }
}

/* Comenzi — the flow on the left, the picked step's orders on the right (Orders/Index). */
.ord-app { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.ord-flow { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); position: sticky; top: 12px; }
.ord-flow-title { padding: 0 8px 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.ord-flow-sep { height: 1px; margin: 6px 6px; background: var(--border); }
.ord-step { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--r-md); background: transparent; text-align: left; cursor: pointer; }
.ord-step:hover { background: var(--card-2); }
.ord-step > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.ord-step-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.ord-step-sub { font-size: var(--fs-2xs); color: var(--ink-muted); }
.ord-step-count { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 7px; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--card); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }
.ord-step-count:empty { visibility: hidden; }
.ord-step-count.is-mine { background: var(--danger); border-color: var(--danger); color: #fff; }
.ord-step.is-active { background: var(--accent); }
.ord-step.is-active .ord-step-name, .ord-step.is-active .ord-step-sub { color: var(--accent-ink); }
.ord-step.is-active .ord-step-sub { opacity: .85; }
.ord-main { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg, 12px); overflow: hidden; min-width: 0; }
.ord-main-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.ord-main-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--ink); }
.ord-main-count { padding: 2px 10px; border-radius: var(--r-pill); border: 1px solid var(--border); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.ord-main-count:empty { display: none; }
.ord-search { width: 300px; max-width: 100%; }
.ord-search .list-filter-input { width: 100%; }
.ord-note { padding: 10px 18px; border-bottom: 1px solid var(--border-soft); background: var(--accent-soft); color: var(--accent-hover); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ord-note[hidden] { display: none; }
.ord-table-wrap { overflow-x: auto; }
.ord-table { width: 100%; border-collapse: collapse; font-size: var(--fs-xs); }
.ord-table th { padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); text-align: left; white-space: nowrap; }
.ord-table td { padding: 12px 18px; border-bottom: 1px solid var(--border-soft); vertical-align: top; color: var(--ink-2); }
.ord-table tbody tr:last-child td { border-bottom: 0; }
.ord-row { cursor: pointer; }
.ord-row:hover td { background: var(--card-2); }
.ord-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ord-name { margin-bottom: 4px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); }
.ord-piece { color: var(--ink-2); line-height: 1.5; max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-piece.is-text { white-space: normal; font-style: italic; }
.ord-times { color: var(--ink-muted); }
.ord-more { color: var(--ink-muted); font-style: italic; }
.ord-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ord-empty { padding: 28px 18px !important; text-align: center; color: var(--ink-muted); }
.ord-urgent { display: inline-block; padding: 1px 10px; border-radius: var(--r-pill); background: var(--danger-soft); border: 1px solid var(--danger-line); color: var(--danger); font-size: var(--fs-2xs); font-weight: var(--fw-bold); vertical-align: 1px; }
.ord-urgent-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.ord-status { display: inline-block; padding: 2px 10px; border-radius: var(--r-pill); background: var(--card-2); border: 1px solid var(--border-soft); color: var(--ink-2); font-size: var(--fs-2xs); font-weight: var(--fw-bold); line-height: 1.5; white-space: nowrap; }
.ord-status.is-request { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.ord-status.is-accepted { background: #e3effd; border-color: #c4dbf6; color: #1f5fae; }
.ord-status.is-placed { background: #e4e9f5; border-color: #c9d3ea; color: #1e3a6e; }
.ord-status.is-delivered { background: #d9f3f1; border-color: #b4e3df; color: #0b6b66; }
.ord-status.is-operated { background: var(--ok-soft); border-color: var(--ok-line); color: var(--ok); }
.ord-status.is-rejected { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
.ord-status.is-cancelled { background: var(--card-2); border-color: var(--border); color: var(--ink-muted); text-decoration: line-through; }
.ord-status.is-partial { background: #fdecd6; border-color: #f3d3a8; color: #a0470a; }
.ord-status-sub { margin-top: 4px; font-size: var(--fs-2xs); color: var(--ink-muted); line-height: 1.4; }
.ord-late { color: var(--danger); font-weight: var(--fw-semibold); }
.ord-waiting { padding: 10px 14px; border-radius: var(--r-md); background: var(--card-2); border: 1px solid var(--border); font-size: var(--fs-xs); color: var(--ink-2); }
.ord-line-head { font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); border-bottom: 1px solid var(--border); padding-top: 8px; }
.ord-line-head[hidden] { display: none; }
.ord-line-price { text-align: right; }
.ord-line-price, .ord-line-supplier { height: 28px; min-width: 0; width: 100%; padding: 2px 8px; font-size: var(--fs-xs); }
.ord-total { padding: 6px 14px 12px; text-align: right; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.ord-total:empty { display: none; }
.ord-total-head { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.ord-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ord-short { color: #a0470a; font-weight: var(--fw-semibold); }
.ord-edit-table td, .ord-edit-table th { padding: 6px 8px; }
.ord-edit-table input { min-width: 80px; }
.ord-date-input { max-width: 200px; }
.project-orders-empty { padding: 14px 16px; font-size: var(--fs-xs); color: var(--ink-muted); }
@media (max-width: 900px) {
    .ord-app { grid-template-columns: minmax(0, 1fr); }
    .ord-flow { position: static; flex-direction: row; flex-wrap: wrap; }
    .ord-flow-title, .ord-flow-sep, .ord-step-sub { display: none; }
    .ord-step { width: auto; }
    .ord-line { grid-template-columns: minmax(0, 1fr) 70px 60px 26px; }
    .ord-line .ord-line-price, .ord-line .ord-line-supplier { grid-column: span 2; }
}
/* the list's columns: the pieces take the room, the state keeps its pill + who it waits for on one line */
.ord-table th:nth-child(4), .ord-table td:nth-child(4) { min-width: 210px; }
.ord-table td:nth-child(2), .ord-table td:nth-child(3) { white-space: nowrap; }
.ord-lines-table td:nth-child(4), .ord-lines-table th:nth-child(4) { min-width: 0; }
/* Place: the warning that the prices must be the supplier's real ones, each price with its unit and the list price
   under it, the live values and total, the tick that unlocks "Am plasat comanda". */
.ord-price-alert { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-lg); background: var(--warn-soft); color: var(--warn); }
.ord-price-alert svg { flex: none; margin-top: 1px; }
.ord-price-alert strong { display: block; font-size: var(--fs-sm); }
.ord-price-alert span { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-2); }
.ord-place-table td:nth-child(4), .ord-place-table th:nth-child(4) { min-width: 0; }
.ord-price-cell { display: flex; align-items: center; gap: 6px; }
.ord-price-cell .form-control { width: 104px; min-width: 0; }
.ord-price-cell .form-control.is-missing { border-color: var(--warn-line); background: var(--warn-soft); }
.ord-price-unit { font-size: var(--fs-2xs); color: var(--ink-muted); }
.ord-price-hint { margin-top: 3px; font-size: var(--fs-3xs); color: var(--ink-muted); }
.ord-place-table tfoot td { border-top: 1px solid var(--border); font-weight: var(--fw-semibold); color: var(--ink); }
.ord-place-table tfoot .ord-price-missing { color: var(--warn); }
.ord-price-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink); cursor: pointer; }
.ord-price-check .form-check-input { flex: none; margin-top: 1px; }
.ord-todo { white-space: nowrap; }

/* ================================================================
   COMANDĂ (Orders/Details) — the head with the figures, the track of the steps, whose turn it is, the items.
   ================================================================ */
.od-back { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-muted); text-decoration: none; }
.od-back:hover { color: var(--accent-hover); }
.od-card, .od-hero { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.od-hero { padding: 12px 16px 12px; }
.od-hero.is-urgent { box-shadow: inset 0 3px 0 var(--danger), var(--sh-card); }
.od-hero-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 24px; }
.od-hero-id { min-width: 0; }
.od-eyebrow { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--ink-muted); }
.od-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 6px; font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); font-variant-numeric: tabular-nums; }
.od-title .ord-status { font-size: var(--fs-2xs); letter-spacing: 0; }
.od-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.od-byline strong { color: var(--ink); font-weight: var(--fw-semibold); }
.od-sep { color: var(--ink-muted); }
.od-entered { color: var(--ink-muted); font-size: var(--fs-xs); }
.od-project { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); background: #fcf1d9; color: #8a5a0b; font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-decoration: none; }
a.od-project:hover { background: #f7e4bb; color: #6f4708; }
.od-hero-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.od-explanation { max-width: 72ch; margin: 14px 0 0; padding: 10px 14px; border-radius: var(--r-md); background: var(--card-2); font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-2); white-space: pre-line; }
.od-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.od-figure { display: flex; flex-direction: column; min-width: 0; padding: 0 14px; border-left: 1px solid var(--border-soft); }
.od-figure:first-child { padding-left: 0; border-left: 0; }
.od-figure dt { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--ink-muted); }
.od-figure dd { margin: 2px 0 1px; font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-figure dd small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--ink-muted); letter-spacing: 0; }
.od-figure dd.is-empty { color: var(--border); }
.od-figure-sub { font-size: var(--fs-xs); color: var(--ink-muted); }
.od-figure.is-late dd, .od-figure.is-late .od-figure-sub { color: var(--danger); }
.od-meter { display: block; height: 6px; margin-top: 8px; border-radius: var(--r-pill); background: var(--border-soft); overflow: hidden; }
.od-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.od-link { padding: 0; border: 0; background: none; color: var(--accent-hover); font-size: inherit; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* the track: done (filled), where it is now (ringed), to come (quiet); partly done in amber; rejected in red */
.od-trackcard { margin-top: 8px; padding: 10px 14px 10px; overflow-x: auto; }
.od-track { display: grid; grid-template-columns: repeat(5, minmax(110px, 1fr)); margin: 0; padding: 0; list-style: none; }
.od-track.is-rejected { grid-template-columns: repeat(2, minmax(150px, 240px)); justify-content: center; }
.od-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0 8px; text-align: center; }
.od-track li::before { content: ""; position: absolute; top: 12px; right: 50%; left: -50%; height: 2px; background: var(--border); }
.od-track li:first-child::before { display: none; }
.od-track li.is-done::before, .od-track li.is-current::before, .od-track li.is-partial::before { background: var(--accent); }
.od-track li.is-rejected::before { background: var(--danger); }
.od-node { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 2px; border: 2px solid var(--border); border-radius: 50%; background: var(--card); color: var(--ink-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.od-track li.is-done .od-node { border-color: var(--accent); background: var(--accent); color: var(--accent-ink); }
.od-track li.is-current .od-node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.od-track li.is-partial .od-node { border-color: #c77a2e; background: #fdecd6; color: #a0470a; box-shadow: none; }
.od-track li.is-rejected .od-node { border-color: var(--danger); background: var(--danger); color: #fff; }
.od-node-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink); }
.od-track li:not(.is-done):not(.is-current):not(.is-partial):not(.is-rejected) .od-node-label { color: var(--ink-muted); font-weight: var(--fw-medium); }
.od-node-who { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: var(--ink-2); }
.od-node-when { font-size: var(--fs-3xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.od-node-note { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: #a0470a; }
.od-node-wait { max-width: 180px; font-size: var(--fs-2xs); color: var(--accent-hover); }

/* whose turn */
.od-turn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 8px; padding: 8px 14px; border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: var(--accent-soft); }
.od-turn-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-turn-text strong { font-size: var(--fs-sm); color: var(--accent-hover); }
.od-turn-text span { font-size: var(--fs-xs); color: var(--ink-2); }
.od-turn-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.od-wait { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card-2); font-size: var(--fs-sm); color: var(--ink-2); }
.od-wait strong { color: var(--ink); font-weight: var(--fw-semibold); }
.od-wait-faces { display: inline-flex; }
.od-wait-faces .od-face + .od-face { margin-left: -6px; }
.od-wait-faces .od-face { box-shadow: 0 0 0 2px var(--card-2); }
.od-rejected { margin-top: 12px; padding: 14px 18px; border: 1px solid var(--danger-line); border-radius: var(--r-lg); background: var(--danger-soft); }
.od-rejected-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.od-rejected p { margin: 6px 0 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--danger); white-space: pre-line; }

/* faces */
.od-face { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.od-face.is-sm { width: 22px; height: 22px; }
.od-face.is-xs { width: 16px; height: 16px; }
.od-face.is-initials { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent-hover); font-size: 10px; font-weight: var(--fw-bold); letter-spacing: 0; }
.od-face.is-initials.is-xs { font-size: 7px; }
.od-face.is-initials.is-sm { font-size: 9px; }

/* the body: the items, and the stock entries beside them */
.od-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 8px; align-items: start; margin-top: 8px; }
.od-body.is-single { grid-template-columns: minmax(0, 1fr); }
.od-card-head { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--border-soft); }
.od-card-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--ink); }
.od-count { min-width: 22px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--card-2); border: 1px solid var(--border-soft); font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }
.od-card-meta { font-size: var(--fs-xs); color: var(--ink-2); }
.od-card-meta strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.od-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 9px 14px; border-bottom: 1px solid var(--border-soft); transition: background var(--dur-fast); }
.od-item:last-child { border-bottom: 0; }
.od-item:hover { background: var(--card-2); }
.od-item-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); }
.od-item.is-free .od-item-icon { border: 1px dashed var(--border); background: var(--card-2); color: var(--ink-muted); }
.od-item-main { min-width: 0; }
.od-item-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--ink); }
.od-item-title a { color: var(--ink); text-decoration: none; }
.od-item-title a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
/* A product's link written as a free line's name (Comenzi, etapa A): its site and the end of its path, in the accent. */
.od-item-title a.od-item-link { color: var(--accent-hover); overflow-wrap: anywhere; }
.od-items-empty { padding: 12px 14px; font-size: var(--fs-sm); color: var(--ink-muted); font-style: italic; }
.od-wanted { margin-top: 1px; color: var(--ink-2); }
.od-wanted.is-after { color: #a0470a; font-weight: var(--fw-semibold); }
.od-item-meta { margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-muted); }
.od-item-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: var(--fs-xs); }
.od-stock-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-2); }
.od-stock-chip strong { font-variant-numeric: tabular-nums; }
.od-stock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-muted); }
.od-stock-chip.has-stock { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.od-stock-chip.has-stock .od-stock-dot { background: var(--ok); }
.od-stock-total { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.od-item-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 6px; }
.od-bar { display: flex; flex: 1 1 160px; max-width: 280px; height: 6px; border-radius: var(--r-pill); background: var(--border-soft); overflow: hidden; }
.od-bar-operated { background: var(--accent); }
.od-bar-delivered { background: rgba(80, 71, 232, .32); }
.od-bar-legend { font-size: var(--fs-2xs); color: var(--ink-muted); }
.od-bar-legend strong { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.od-item-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 130px; text-align: right; }
.od-item-qty { font-size: var(--fs-md); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-item-qty small { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--ink-muted); }
.od-item-price { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-item-price.is-empty { color: var(--ink-muted); font-style: italic; }
.od-item-listprice { font-size: var(--fs-2xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.od-item-value { margin-top: 2px; font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-item-supplier { display: inline-flex; align-items: center; gap: 5px; max-width: 200px; margin-top: 3px; padding: 1px 8px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: var(--card-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-item-supplier svg { flex: none; }
.od-movements { margin: 0; padding: 4px 0; list-style: none; }
.od-movements li { display: flex; flex-direction: column; gap: 3px; padding: 10px 18px; border-bottom: 1px solid var(--border-soft); }
.od-movements li:last-child { border-bottom: 0; }
.od-movements a { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--accent-hover); text-decoration: none; }
.od-movements a:hover { text-decoration: underline; }
.od-movements span { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: var(--ink-muted); }
@media (max-width: 900px) {
    .od-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
    .od-figure:nth-child(3) { padding-left: 0; border-left: 0; }
    .od-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .od-hero { padding: 16px; }
    .od-item { grid-template-columns: 36px minmax(0, 1fr); gap: 10px; }
    .od-item-icon { width: 36px; height: 36px; }
    .od-item-side { grid-column: 2; align-items: flex-start; text-align: left; }
}
/* A track that ended early (cancelled): as many steps as it went through, then the red stop. */
.od-track.is-ended { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, 220px); justify-content: center; }
/* Closed with the difference: what the supplier didn't deliver. */
.od-short { margin-top: 12px; padding: 14px 18px; border: 1px solid var(--warn-line); border-radius: var(--r-lg); background: var(--warn-soft); }
.od-short-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.od-short p { margin: 6px 0 0; font-size: var(--fs-sm); line-height: var(--lh-relaxed); color: var(--ink-2); }
.od-short-list { margin: 6px 0 0; padding-left: 18px; font-size: var(--fs-sm); color: var(--warn); }
.od-short p.od-short-reason { color: var(--warn); font-weight: var(--fw-semibold); }
/* The exceptions: correct / close with the difference / cancel — each with when it is for. */
.od-more { margin-top: 12px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card); }
.od-more-title { margin-bottom: 8px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.od-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 20px; }
.od-more-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.od-more-item small { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--ink-muted); }
/* The lower cards: deliveries, files, history. */
.od-lower { margin-top: 12px; }
.od-empty { padding: 18px; font-size: var(--fs-sm); color: var(--ink-muted); }
.od-chip { display: inline-block; padding: 1px 9px; border: 1px solid var(--border-soft); border-radius: var(--r-pill); background: var(--card-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.od-chip.is-ok { border-color: var(--ok-line); background: var(--ok-soft); color: var(--ok); }
.od-deliveries { margin: 0; padding: 0; list-style: none; }
.od-deliveries > li { padding: 14px 18px; border-bottom: 1px solid var(--border-soft); }
.od-deliveries > li:last-child { border-bottom: 0; }
.od-delivery-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--fs-sm); color: var(--ink-2); }
.od-delivery-head strong { color: var(--ink); font-weight: var(--fw-semibold); }
.od-delivery-when { font-size: var(--fs-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.od-delivery-note { margin-top: 6px; font-size: var(--fs-xs); color: var(--ink-2); }
.od-delivery-lines { margin: 8px 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.od-delivery-lines li { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px dashed var(--border-soft); color: var(--ink); }
.od-delivery-lines li:last-child { border-bottom: 0; }
.od-delivery-qty { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.od-docs { margin: 0; padding: 0; list-style: none; }
.od-docs > li { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); }
.od-doc-kind { display: inline-block; justify-self: start; padding: 2px 10px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hover); font-size: var(--fs-2xs); font-weight: var(--fw-bold); }
.od-doc-main { min-width: 0; }
.od-doc-main a { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); overflow-wrap: anywhere; }
.od-doc-main a:hover { color: var(--accent-hover); }
.od-doc-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 2px; font-size: var(--fs-2xs); color: var(--ink-muted); }
.od-doc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.od-doc-note { margin-top: 3px; font-size: var(--fs-xs); color: var(--ink-2); }
.od-upload { padding: 14px 18px 16px; border-top: 1px solid var(--border-soft); background: var(--card-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.od-upload-title { margin-bottom: 8px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--ink); }
.od-upload-grid { display: grid; grid-template-columns: 130px 180px minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; gap: 10px; }
.od-upload-grid label { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); color: var(--ink-muted); }
.od-upload-error { margin-top: 6px; font-size: var(--fs-xs); color: var(--danger); }
.od-upload-error:empty { display: none; }
.od-upload-hint { margin-top: 6px; font-size: var(--fs-2xs); color: var(--ink-muted); }
@media (max-width: 900px) {
    .od-upload-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .od-docs > li { grid-template-columns: minmax(0, 1fr) auto; }
    .od-doc-kind { grid-column: 1 / -1; }
}
/* The history: a line down the left, a dot per event, who / what / when, then the reason and what changed. */
.od-history { position: relative; margin: 0; padding: 6px 18px 12px 38px; list-style: none; }
.od-history::before { content: ""; position: absolute; top: 14px; bottom: 18px; left: 22px; width: 2px; background: var(--border-soft); }
.od-ev { position: relative; padding: 8px 0; }
.od-ev-dot { position: absolute; top: 14px; left: -21px; width: 10px; height: 10px; border: 2px solid var(--card); border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.od-ev-12 .od-ev-dot, .od-ev-4 .od-ev-dot { background: var(--danger); box-shadow: 0 0 0 1px var(--danger-line); }
.od-ev-8 .od-ev-dot, .od-ev-10 .od-ev-dot, .od-ev-11 .od-ev-dot { background: #c77a2e; box-shadow: 0 0 0 1px #f3d3a8; }
.od-ev-9 .od-ev-dot { background: var(--ok); box-shadow: 0 0 0 1px var(--ok-line); }
.od-ev-13 .od-ev-dot, .od-ev-14 .od-ev-dot { background: var(--ink-muted); box-shadow: 0 0 0 1px var(--border); }
.od-ev-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: var(--fs-sm); color: var(--ink-2); }
.od-ev-line strong { color: var(--ink); font-weight: var(--fw-semibold); }
.od-ev-when { margin-left: auto; font-size: var(--fs-2xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.od-ev-text { margin-top: 3px; padding: 4px 10px; border-left: 3px solid var(--border); font-size: var(--fs-sm); color: var(--ink-2); white-space: pre-line; }
.od-ev-details { margin: 4px 0 0; padding-left: 18px; font-size: var(--fs-xs); color: var(--ink-2); }
.od-ev-details li { padding: 1px 0; }
/* The dialogs for the exceptions: when each is for, a picker for a line to add, a delivery to choose. */
.ord-explain { margin-bottom: 14px; padding: 12px 14px; border: 1px solid var(--accent-line); border-radius: var(--r-md); background: var(--accent-soft); font-size: var(--fs-sm); color: var(--ink-2); }
.ord-explain strong { color: var(--accent-hover); }
.ord-explain p { margin: 6px 0 0; line-height: var(--lh-relaxed); }
.ord-explain-list { margin: 0 0 14px; padding-left: 18px; font-size: var(--fs-sm); color: var(--warn); }
.ord-corr-table tr.is-removed td { opacity: .5; text-decoration: line-through; }
.ord-corr-table tr.is-removed td:last-child { opacity: 1; text-decoration: none; }
.ord-add { position: relative; }
.ord-pick { position: absolute; z-index: 5; left: 0; right: 0; max-height: 260px; overflow-y: auto; margin-top: 2px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); box-shadow: var(--sh-pop); }
.ord-pick[hidden] { display: none; }
.ord-pick-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--border-soft); background: transparent; text-align: left; cursor: pointer; font-size: var(--fs-sm); color: var(--ink); }
.ord-pick-item span { font-size: var(--fs-2xs); color: var(--ink-muted); }
.ord-pick-item:hover { background: var(--accent-soft); }
.ord-pick-item.is-free { font-style: italic; }
.ord-pick-list { display: flex; flex-direction: column; gap: 6px; }
.ord-pick-list .ord-pick-item { border: 1px solid var(--border); border-radius: var(--r-md); }
/* accept / reject right from the orders list */
.ord-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ord-quick .btn { padding: 2px 10px; font-size: var(--fs-2xs); }

/* ================================================================
   ARTICOLE — furnizori și istoric de preț (Views/Articles/_Form.cshtml, wwwroot/js/article-suppliers.js)
   ================================================================ */
.art-sup { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card-2); }
.art-sup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.art-sup-rows { display: flex; flex-direction: column; gap: 4px; }
.art-sup-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 90px 56px 28px; align-items: center; gap: 6px; }
.art-sup-row[hidden] { display: none; }
.art-sup-row.is-head { font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-label); color: var(--ink-muted); }
.art-sup-row.is-head span:nth-child(4) { text-align: center; }
.art-sup-pref { display: inline-flex; justify-content: center; margin: 0; cursor: pointer; }
.art-sup-pref input { position: absolute; opacity: 0; pointer-events: none; }
.art-sup-pref span { font-size: 17px; line-height: 1; color: var(--border); transition: color var(--dur-fast); }
.art-sup-pref input:checked + span { color: #e0a800; }
.art-sup-pref input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.art-sup .js-sup-remove { width: 26px; height: 26px; font-size: 16px; line-height: 1; }
.art-hist { padding-top: 2px; }
.art-hist-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.art-hist-group { padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
.art-hist-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: var(--fs-sm); }
.art-hist-pref { color: #e0a800; }
.art-hist-last { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.art-hist-spark { flex: none; color: var(--accent); }
.art-hist-rows { width: 100%; font-size: var(--fs-xs); border-collapse: collapse; }
.art-hist-rows td { padding: 2px 4px; border-top: 1px solid var(--border-soft); vertical-align: baseline; }
.art-hist-date { width: 76px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.art-hist-price { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
.art-hist-diff { margin-left: 4px; font-size: var(--fs-3xs); font-weight: var(--fw-semibold); }
.art-hist-diff.is-up { color: var(--danger); }
.art-hist-diff.is-down { color: var(--ok); }
.art-hist-src { color: var(--ink-2); }
.art-hist-who { color: var(--ink-muted); text-align: right; white-space: nowrap; }
@media (max-width: 560px) { .art-sup-row { grid-template-columns: minmax(0, 1fr) 80px 60px 40px 26px; } }

/* Comenzi — clarificări (Views/Orders/Details.cshtml, order-details.js): the open question, and the dialog's reason chips. */
.od-clarify { margin-top: 8px; padding: 8px 14px; border: 1px solid var(--warn-line); border-radius: var(--r-lg); background: var(--warn-soft); }
.od-clarify-head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink-2); }
.od-clarify-head strong { color: var(--ink); }
.od-clarify-reasons { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.od-clarify-reason { padding: 1px 8px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--warn-line); color: var(--warn); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.od-clarify-text { margin: 6px 0 0; font-size: var(--fs-sm); color: var(--ink); white-space: pre-line; }
.od-clarify-picks { display: flex; flex-wrap: wrap; gap: 6px; }
.od-clarify-pick { display: inline-flex; margin: 0; cursor: pointer; }
.od-clarify-pick input { position: absolute; opacity: 0; pointer-events: none; }
.od-clarify-pick span { padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--card); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--ink-2); }
.od-clarify-pick input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-hover); }
.od-clarify-pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Comenzi — plasarea cu articolele modificate (etapa B, order-details.js openPlace): the quantity box, × per row, the add row. */
.ord-place-table .ord-qty-input { display: inline-block; width: 74px; }
.ord-place-table .ord-um-input { width: 70px; }
.ord-place-add-row { display: grid; grid-template-columns: minmax(0, 1fr) 74px 70px auto; gap: 6px; align-items: center; }
.ord-new-tag { padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-hover); font-size: var(--fs-3xs); font-weight: var(--fw-bold); }
.ord-place-table .js-qty.is-missing { border-color: var(--danger); }