/* ================================================================
   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-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);
}

/* 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);
    }

/* Selects and date inputs in a list filter bar — same 34px box, border and type as the search input. */
.list-filter-select {
    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-select:focus {
        border-color: var(--accent);
        box-shadow: var(--focus);
        outline: none;
    }

/* 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);
    }

/* ================================================================
   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);
}

.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);
}

/* The app's top-level list pages (every grid marked .list-grid — Roluri, Utilizatori) — the whole point of a list is scanning many rows at once, so they lean denser than the default row height and share this one rule instead of separate copies. */
#projectsGrid .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),
.list-grid .tabulator-row .tabulator-cell:not(.grid-primary-col) {
    font-size: var(--fs-sm) !important;
}

#projectsGrid .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 (Utilizatori, Roluri): bold, in a soft ink tone, 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. */
.tabulator-cell.grid-primary-col {
    font-size: 12.5px !important;
    font-weight: var(--fw-bold);
    color: #67707d;
}


.seg-toggle {
    display: flex;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm, none);
}
.seg-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);
}
.seg-btn svg { flex: 0 0 auto; }
.seg-btn + .seg-btn {
    border-left: 1px solid var(--border);
}
.seg-btn.is-active {
    background: var(--accent);
    color: var(--accent-ink);
}

/* The form modals (openFormModal) 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;
}


.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;
}

/* 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) {
    .grid-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;
    }
}

/* ================================================================
   GRID — row action icons
   ================================================================ */

/* Each action gets its own permanent colored chip (diagonal gradient) 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 (grid-act-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. */
.grid-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);
}

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

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

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

    
    .grid-act.grid-act-save {
        background-image: linear-gradient(155deg, #1e9e6b, #106a3f);
    }

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

/* Section-title count — 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;
}



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

.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;
}

/* Generic empty state — a small icon above a muted line, used for every "nothing here" panel across the app (task lists, calendar day). */
.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. */
    .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-light {
        background: var(--card) !important;
        color: var(--ink-2) !important;
        border-color: var(--border);
    }

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

/* ============================================================
   flatpickr theming — retint the vendored default skin to the
   pine/stone accent instead of its default 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;
}

.autocomplete {
    position: relative;
}

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

/* ================================================================
   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>, so more
   rows fit on screen.
   ================================================================ */

.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 .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; }

.app-compact .list-filter-input,
.app-compact .list-filter-select { 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-check { height: 28px; font-size: var(--fs-xs); }
.app-compact .seg-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 .grid-act { width: 22px; height: 22px; }
    .app-compact .tabulator .grid-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); }


.app-compact .project-summary { gap: 6px; }


.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; }

.tasks-picker-item:hover, .tasks-picker-item:focus-visible { background: var(--card-2); outline: none; }
.tasks-picker-item.is-current { background: var(--accent-soft); }
.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-group small { margin-left: auto; font-size: var(--fs-3xs); color: var(--ink-muted); }
.tasks-quick-day { 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 { border-color: var(--accent); color: var(--accent-hover); }
.grpm-sub-chip small { color: var(--ink-muted); font-size: 12px; }
.tasks-repeat-row > span { white-space: nowrap; }
.tasks-member-text small { font-size: var(--fs-2xs); color: var(--ink-muted); }
.tasks-exec-pick:hover { background: var(--card-2); }
.tasks-exec-pick.is-on { background: var(--accent-soft); }

/* 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. */

.te-pop.is-compact { left: auto; right: 12px; width: 240px; }
.te-pop.is-compact .te-pop-head { display: none; }
.te-right .te-chip:not(.is-on) { background: var(--card); }
.te-card-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(12.5px + var(--fd, 0px)); color: var(--ink-muted); }
.te-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.te-chips[hidden], .te-label[hidden] { display: none; }
.te-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 240px; padding: 7px 12px; border: 0; border-radius: 16px; background: #eef1f4; color: var(--ink-2); font-size: calc(13.5px + var(--fd, 0px)); font-weight: var(--fw-medium); line-height: 1.2; cursor: pointer; }
.te-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-chip:hover { background: #e3e8ee; color: var(--ink); }
.te-chip:focus-visible { outline: 0; box-shadow: var(--focus); }
.te-chip.is-on { background: var(--accent); color: var(--accent-ink); }
.te-chip.is-on:hover { background: var(--accent-hover); color: var(--accent-ink); }
.te-chip.is-tool { padding-left: 10px; padding-right: 10px; }
.te-chip.is-static { padding-right: 4px; cursor: default; }
.te-chip.is-static:hover { background: #eef1f4; color: var(--ink-2); }
.te-chip.is-static button { display: inline-flex; padding: 4px; border: 0; background: none; color: inherit; cursor: pointer; }
.te-row-text > small { font-size: calc(12px + var(--fd, 0px)); color: var(--ink-muted); }
/* the lists the card and "Adaugă contributor" open: a popover under what opened it, with a search */
.te-pop { position: absolute; left: 0; right: 0; z-index: 30; display: flex; flex-direction: column; max-height: 260px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(16, 24, 40, .16); overflow: hidden; }
.te-pop-head { flex: none; padding: 6px; border-bottom: 1px solid var(--border-soft); }
.te-pop-search { width: 100%; height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; background: var(--field-bg); font-size: calc(14px + var(--fd, 0px)); color: var(--ink); outline: 0; }
.te-pop-search:focus { border-color: var(--accent); background: var(--card); box-shadow: var(--focus); }
.te-pop-list { overflow-y: auto; min-height: 0; padding: 4px 0; }
.te-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px 14px 4px 12px; border: 0; background: none; text-align: left; cursor: pointer; }
.te-pop-item:hover, .te-pop-item:focus-visible, .te-pop-item.is-kbd { background: var(--card-2); outline: 0; }
.te-pop-item.is-current { background: var(--accent-soft); }
.te-pop-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; font-size: calc(14.5px + var(--fd, 0px)); color: var(--ink); }
.te-pop-text > span, .te-pop-text > small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.te-pop-text > small { font-size: calc(12px + var(--fd, 0px)); color: var(--ink-muted); }
.te-pop-check { display: inline-flex; color: var(--accent); }
.te-pop-empty { padding: 16px; text-align: center; font-size: calc(13px + var(--fd, 0px)); color: var(--ink-muted); }
/* ---- phones: one pane at a time ---- */
@media (max-width: 767.98px) {
}

/* ---- ?embed=1: the Sarcini page inside another page (Calendar opens a task in place of its list): just the conversation
   (or the editor), no top bar, footer or list, with the way back to the list always in view. ---- */
.is-embed { background: var(--card); }
.is-embed .app-topnav, .is-embed .app-footer, .is-embed .tasks-side, .is-embed .tasks-bar { display: none !important; }
.is-embed .app-content, .is-embed .app-content.app-content-full { max-width: none; padding: 0; }
.is-embed main { padding-bottom: 0 !important; }

@keyframes ordn-flash { 0% { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-line); } 100% { background: var(--card); box-shadow: 0 0 0 0 transparent; } }