/* Fonts served by the app itself (wwwroot/fonts), no requests to Google */
@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-v23-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-v23-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-v23-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-condensed-v15-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-condensed-v15-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Sans Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/ibm-plex-sans-condensed-v15-latin_latin-ext-700.woff2') format('woff2');
}

/* DossierHub Web – styles
   Blue and white: a navy left menu, white cards on a pale blue page. */

:root {
    /* Blue and white palette (v2.1: left menu instead of folder tabs) */
    --paper: #f4f7fb;
    --surface: #ffffff;
    --ink: #13233f;
    --navy: #1f5fa8; /* primary actions, selected items */
    --navy-hover: #184e8c;
    --side: #0f2a55; /* left menu background */
    --side-ink: #c9d8ee; /* left menu text */
    --side-mute: #7f9cc4; /* left menu section titles */
    --blue-mid: #4a86c5;
    --blue-tint: #eef4fb;
    --manila: #c5d6ea; /* old folder colours, now mapped to blue tints */
    --manila-deep: #4a86c5;
    --manila-pale: #eef4fb;
    --line: #d6e2f0;
    --mute: #5b7290;
    --ok: #2e7a57;
    --warn: #9a5418;
    --err: #b3261e;
    --row-alt: #f7f9fc;
    --focus: #3d73d6;
    --radius-s: 6px;
    --radius-m: 10px;
    --font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --font-cond: 'IBM Plex Sans Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 15px/1.5 var(--font);
    min-height: 100vh;
}

button, input, select {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

/* ---------- Top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 28px;
    background: var(--navy);
    color: #fff;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 600 19px/1 var(--font-cond);
    letter-spacing: 0.01em;
}

    .brand svg {
        width: 26px;
        height: 26px;
        fill: var(--manila);
    }

.client {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #c9d5ea;
}

    .client select {
        appearance: none;
        background: rgba(255, 255, 255, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 11px;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: var(--radius-s);
        color: #fff;
        font-weight: 600;
        padding: 6px 34px 6px 12px;
        min-width: 170px;
        cursor: pointer;
    }

        .client select option {
            color: var(--ink);
        }

.meta {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 13px;
    color: #c9d5ea;
}

#today::first-letter {
    text-transform: uppercase;
}

.version {
    opacity: 0.7;
}

.api {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: 13px;
    cursor: default;
}

    .api::before {
        content: '';
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #9aa7bd;
    }

    .api[data-state='ok']::before {
        background: #5fd39a;
    }

    .api[data-state='down'] {
        color: #ffc9c4;
        cursor: pointer;
        text-decoration: underline dotted;
        text-underline-offset: 3px;
    }

        .api[data-state='down']::before {
            background: #ff7a6e;
        }

    .api[data-state='checking']::before {
        animation: pulse 1s ease-in-out infinite alternate;
    }

@keyframes pulse {
    to {
        opacity: 0.3;
    }
}

/* ---------- Folder tabs (the one distinctive element) ---------- */
main {
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 28px 48px;
}

.tabs {
    display: flex;
    gap: 6px;
    padding-left: 18px;
}

    .tabs [role='tab'] {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 26px 9px 20px;
        background: var(--manila-pale);
        border: 1px solid #dcc995;
        border-bottom: 0;
        border-radius: 10px 14px 0 0;
        font: 600 16px/1.2 var(--font-cond);
        color: #6b5a2c;
        cursor: pointer;
        transform: translateY(4px);
        transition: transform 0.15s ease, background-color 0.15s ease;
    }

        .tabs [role='tab'] small {
            font: 400 12.5px/1.3 var(--font);
            color: #8b7a4b;
            margin-top: 2px;
        }

        .tabs [role='tab']:hover {
            transform: translateY(1px);
        }

        .tabs [role='tab'][aria-selected='true'] {
            background: var(--manila);
            color: var(--ink);
            transform: none;
            z-index: 1;
        }

            .tabs [role='tab'][aria-selected='true'] small {
                color: #5b4d27;
            }

.folder {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 8px solid var(--manila);
    border-radius: 2px var(--radius-m) var(--radius-m) var(--radius-m);
    box-shadow: 0 1px 0 rgba(23, 35, 58, 0.04), 0 12px 32px -18px rgba(23, 35, 58, 0.25);
}

/* ---------- Controls ---------- */
.controls {
    padding: 22px 26px 20px;
    border-bottom: 1px solid var(--line);
}

.lede {
    margin: 0 0 16px;
    color: var(--mute);
    max-width: 72ch;
}

    .lede strong {
        color: var(--ink);
        font-weight: 600;
    }

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px 18px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .field label {
        font-size: 13px;
        font-weight: 500;
        color: var(--mute);
    }

input[type='date'] {
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
    min-width: 160px;
    font-variant-numeric: tabular-nums;
}

    input[type='date']:hover {
        border-color: #b4c0d4;
    }

input:disabled {
    background: var(--paper);
    color: var(--mute);
}

.presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-bottom: 4px;
}

.chip {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--mute);
    cursor: pointer;
}

    .chip:hover {
        border-color: var(--navy);
        color: var(--navy);
    }

.actions {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

.btn {
    height: 40px;
    padding: 0 18px;
    border-radius: var(--radius-s);
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 14.5px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    background: var(--navy);
    color: #fff;
}

    .btn-primary:hover:not(:disabled) {
        background: var(--navy-hover);
    }

.btn-ghost {
    background: #fff;
    border-color: var(--line);
    color: var(--ink);
}

    .btn-ghost:hover:not(:disabled) {
        border-color: var(--navy);
    }

.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

body.api-down .needs-api {
    opacity: 0.45;
    pointer-events: none;
}

/* File drop zone */
.drop {
    flex: 1 1 420px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 16px;
    padding: 14px 18px;
    border: 1.5px dashed #b9c4d6;
    border-radius: var(--radius-m);
    background: var(--row-alt);
    cursor: pointer;
}

    .drop input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

    .drop:focus-within {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }

    .drop:hover, .drop.dragging {
        border-color: var(--navy);
        background: #eef3fb;
    }

.drop-cta strong {
    color: var(--navy);
}

.drop-hint {
    grid-column: 1;
    font-size: 13px;
    color: var(--mute);
}

.file-info {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 13px;
}

    .file-info strong {
        font-weight: 600;
        max-width: 32ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .file-info span {
        color: var(--ok);
    }

.drop.has-file {
    border-style: solid;
    border-color: var(--manila-deep);
    background: #fbf7ea;
}

/* ---------- Progress ---------- */
.progress {
    padding: 14px 26px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfe;
}

.bar {
    height: 6px;
    background: #e3e8f0;
    border-radius: 3px;
    overflow: hidden;
}

    .bar span {
        display: block;
        height: 100%;
        width: 0;
        background: var(--navy);
        transition: width 0.3s ease;
    }

.status {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--mute);
    font-variant-numeric: tabular-nums;
}

/* ---------- Results ---------- */
.results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 26px;
}

.stages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.stage {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--radius-s);
    padding: 4px 6px 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

    .stage span {
        background: var(--paper);
        border-radius: 3px;
        padding: 0 6px;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
        font-size: 12px;
    }

    .stage:hover {
        border-color: var(--navy);
    }

    .stage[aria-pressed='true'] {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
    }

        .stage[aria-pressed='true'] span {
            background: rgba(255, 255, 255, 0.2);
        }

.results-tools {
    display: flex;
    align-items: center;
    gap: 14px;
}

.search input {
    height: 36px;
    width: 260px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
}

.count {
    font-size: 13px;
    color: var(--mute);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.results-tools .btn {
    height: 36px;
}

.table-wrap {
    position: relative;
    overflow: auto;
    max-height: calc(100vh - 330px);
    min-height: 220px;
    border-top: 1px solid var(--line);
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f4f6fa;
    border-bottom: 1px solid var(--line);
    text-align: left;
    padding: 0;
    white-space: nowrap;
}

thead button {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: 0;
    cursor: pointer;
    font: 600 13px/1.2 var(--font-cond);
    color: var(--mute);
    text-align: left;
}

    thead button:hover {
        color: var(--ink);
    }

.arrow::after {
    content: '';
    font-size: 10px;
}

th[aria-sort='ascending'] .arrow::after {
    content: '▲';
}

th[aria-sort='descending'] .arrow::after {
    content: '▼';
}

th[aria-sort='ascending'] button, th[aria-sort='descending'] button {
    color: var(--navy);
}

tbody td {
    padding: 8px 14px;
    border-bottom: 1px solid #e8ecf2;
    vertical-align: top;
}

tbody tr:nth-child(even) td {
    background: var(--row-alt);
}

tbody tr:hover td {
    background: #edf2fb;
}

td.num {
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

td.muted {
    color: #97a1b2;
}

.empty {
    position: absolute;
    inset: 44px 0 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: var(--mute);
}

    .empty p {
        max-width: 46ch;
        margin: 0;
    }

    .empty strong {
        color: var(--ink);
        font-weight: 600;
    }

/* ---------- Toasts ---------- */
.toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 10;
    max-width: min(420px, calc(100vw - 32px));
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--ink);
    color: #fff;
    padding: 12px 12px 12px 16px;
    border-radius: var(--radius-m);
    border-left: 4px solid #9aa7bd;
    box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.4);
    animation: toast-in 0.2s ease-out;
}

    .toast p {
        margin: 0;
        font-size: 14px;
        flex: 1;
    }

    .toast button {
        background: none;
        border: 0;
        color: #c9d5ea;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 0 4px;
    }

.toast-success {
    border-left-color: #5fd39a;
}

.toast-warn {
    border-left-color: #f0b35a;
}

.toast-error {
    border-left-color: #ff7a6e;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- Small screens ---------- */
@media (max-width: 860px) {
    .topbar {
        flex-wrap: wrap;
        gap: 10px 18px;
        padding: 12px 16px;
    }

    .meta {
        margin-left: 0;
        width: 100%;
        justify-content: space-between;
        gap: 10px;
    }

    #today {
        display: none;
    }

    main {
        padding: 18px 16px 40px;
    }

    .tabs {
        padding-left: 8px;
    }

        .tabs [role='tab'] {
            padding: 9px 14px 8px;
            font-size: 15px;
            flex: 1;
        }

            .tabs [role='tab'] small {
                display: none;
            }

    .controls {
        padding: 18px 16px;
    }

    .field {
        flex: 1 1 140px;
    }

    input[type='date'] {
        min-width: 0;
        width: 100%;
    }

    .actions {
        margin-left: 0;
        width: 100%;
    }

        .actions .btn {
            flex: 1;
        }

    .drop {
        grid-template-columns: 1fr;
    }

    .file-info {
        grid-column: 1;
        grid-row: auto;
        align-items: flex-start;
        margin-top: 6px;
    }

    .progress, .results-bar {
        padding-left: 16px;
        padding-right: 16px;
    }

    .results-tools {
        width: 100%;
        flex-wrap: wrap;
    }

    .search {
        flex: 1 1 100%;
    }

        .search input {
            width: 100%;
        }

    .results-tools .btn {
        margin-left: auto;
    }

    .table-wrap {
        max-height: none;
    }
}

/* ---------- Header: signed-in user + logout ---------- */
.user {
    color: #fff;
    font-weight: 500;
}

.validity {
    opacity: 0.75;
}

.logout {
    margin: 0;
}

    .logout button {
        background: none;
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: var(--radius-s);
        color: #fff;
        padding: 4px 12px;
        font-size: 13px;
        cursor: pointer;
    }

        .logout button:hover {
            background: rgba(255, 255, 255, 0.1);
        }

/* ---------- Login page ---------- */
.login-page {
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.login {
    width: 100%;
    max-width: 400px;
}

.login-tab {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 18px;
    padding: 10px 22px 9px 18px;
    background: var(--manila);
    border: 1px solid #dcc995;
    border-bottom: 0;
    border-radius: 10px 14px 0 0;
    font: 600 18px/1.2 var(--font-cond);
}

    .login-tab svg {
        width: 22px;
        height: 22px;
        fill: var(--navy);
    }

.login .folder {
    padding: 26px 28px 28px;
}

.login h1 {
    margin: 0 0 4px;
    font: 600 24px/1.25 var(--font-cond);
}

.login .lede {
    margin-bottom: 20px;
}

.login form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login input[type='text'], .login input[type='password'] {
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
}

.login input:hover {
    border-color: #b4c0d4;
}

.login .btn {
    width: 100%;
    height: 44px;
    margin-top: 4px;
}

.login-error {
    margin: 0 0 18px;
    padding: 10px 12px;
    border-left: 4px solid var(--err);
    border-radius: var(--radius-s);
    background: #fcefee;
    color: var(--err);
    font-size: 14px;
}

/* ---------- Account administration ---------- */
.header-link {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 12px;
    border-radius: var(--radius-s);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

    .header-link:hover {
        background: rgba(255, 255, 255, 0.1);
    }

.tab-static {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 26px 9px 20px;
    background: var(--manila);
    border: 1px solid #dcc995;
    border-bottom: 0;
    border-radius: 10px 14px 0 0;
    font: 600 16px/1.2 var(--font-cond);
}

    .tab-static small {
        font: 400 12.5px/1.3 var(--font);
        color: #5b4d27;
        margin-top: 2px;
    }

.admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
}

    .admin-head .lede {
        margin: 0;
    }

.admin-table {
    max-height: none;
    min-height: 0;
}

.th {
    display: block;
    padding: 10px 14px;
    font: 600 13px/1.2 var(--font-cond);
    color: var(--mute);
}

tbody td.row-actions {
    text-align: right;
    white-space: nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
}

.row-actions .btn + .btn {
    margin-left: 6px;
}

.you {
    color: var(--mute);
    font-weight: 400;
}

.muted {
    color: #97a1b2;
}

.status {
  display: inline-block;
  margin: 0; /* not the margin of the progress text (.progress .status) */
  padding: 1px 8px;
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Text under the progress bar (Import / Actualizări): same class name as the pills, so its own spacing here */
.progress .status {
  display: block;
  margin: 8px 0 0;
  padding: 0;
  font-weight: 400;
  font-size: 13px;
}

.status-on {
    background: #e3f3ea;
    color: var(--ok);
}

.status-wait {
    background: #fbf0dc;
    color: var(--warn);
}

.status-off {
    background: #fcefee;
    color: var(--err);
}

.btn-small {
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
}

.btn-danger {
    background: var(--err);
    color: #fff;
}

    .btn-danger:hover:not(:disabled) {
        background: #96201a;
    }

.btn-danger-text {
    color: var(--err);
}

    .btn-danger-text:hover:not(:disabled) {
        border-color: var(--err);
    }

dialog {
    width: min(480px, calc(100vw - 32px));
    padding: 0;
    border: 1px solid var(--line);
    border-top: 8px solid var(--manila);
    border-radius: var(--radius-m);
    color: var(--ink);
    box-shadow: 0 24px 60px -20px rgba(23, 35, 58, 0.45);
}

    dialog::backdrop {
        background: rgba(23, 35, 58, 0.45);
    }

    dialog form {
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 22px 24px 20px;
    }

    dialog h2 {
        margin: 0;
        font: 600 21px/1.25 var(--font-cond);
    }

    dialog p {
        margin: 0;
        color: var(--mute);
    }

    dialog input[type='text'], dialog input[type='password'] {
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius-s);
        background: #fff;
    }

    dialog input[type='date'] {
        min-width: 0;
        width: 100%;
    }

    dialog input:disabled {
        background: var(--paper);
        color: var(--mute);
    }

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.hint {
    font-size: 12.5px;
    color: var(--mute);
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

    .check input {
        width: 18px;
        height: 18px;
        margin: 2px 0 0;
        accent-color: var(--navy);
    }

    .check small {
        display: block;
        font-size: 12.5px;
        color: var(--mute);
    }

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.form-error {
    padding: 10px 12px;
    border-left: 4px solid var(--err);
    border-radius: var(--radius-s);
    background: #fcefee;
    color: var(--err) !important;
    font-size: 14px;
}

@media (max-width: 860px) {
    .field-row {
        grid-template-columns: 1fr;
    }

    .admin-head .btn {
        width: 100%;
    }
}

/* ---------- Footer: portal status (left) + version (right) ---------- */
body:not(.login-page) {
    display: flex;
    flex-direction: column;
}

    body:not(.login-page) > main {
        flex: 1 0 auto;
        width: 100%;
    }

.appfooter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 28px;
    border-top: 1px solid var(--line);
    background: var(--surface);
    font-size: 13px;
    color: var(--mute);
}

    .appfooter .api, .appfooter .version {
        color: var(--ink);
        font-weight: 700;
    }

        .appfooter .api[data-state='ok']::before {
            background: var(--ok);
        }

        .appfooter .api[data-state='down'] {
            color: var(--err);
        }

            .appfooter .api[data-state='down']::before {
                background: var(--err);
            }

    .appfooter .version {
        opacity: 1;
        margin-left: auto;
        font-variant-numeric: tabular-nums;
    }

.toasts {
    bottom: 56px;
}

@media (max-width: 860px) {
    .appfooter {
        padding: 10px 16px;
    }
}

/* ---------- Admin area: folder tabs as links + client page ---------- */
.tab-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 26px 9px 20px;
    background: var(--manila-pale);
    border: 1px solid #dcc995;
    border-bottom: 0;
    border-radius: 10px 14px 0 0;
    font: 600 16px/1.2 var(--font-cond);
    color: #6b5a2c;
    text-decoration: none;
    transform: translateY(4px);
    transition: transform 0.15s ease;
}

    .tab-link small {
        font: 400 12.5px/1.3 var(--font);
        color: #8b7a4b;
        margin-top: 2px;
    }

    .tab-link:hover {
        transform: translateY(1px);
    }

    .tab-link[aria-current='page'] {
        background: var(--manila);
        color: var(--ink);
        transform: none;
        z-index: 1;
    }

        .tab-link[aria-current='page'] small {
            color: #5b4d27;
        }

dialog.dialog-wide {
    width: min(620px, calc(100vw - 32px));
}

dialog textarea, dialog input[type='email'], dialog input[type='tel'], dialog input[type='number'] {
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
    font: inherit;
}

dialog input[type='email'], dialog input[type='tel'], dialog input[type='number'] {
    height: 40px;
}

dialog textarea {
    resize: vertical;
    min-height: 64px;
    line-height: 1.45;
}

.optional {
    font-weight: 400;
    color: var(--mute);
}

fieldset.group {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 10px 14px 14px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    fieldset.group legend {
        padding: 0 6px;
        font-size: 13px;
        font-weight: 500;
        color: var(--mute);
    }

.check-inline {
    align-self: end;
    padding-bottom: 6px;
}

.snames {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sname {
    background: var(--manila-pale);
    border: 1px solid #e3d3a6;
    border-radius: 3px;
    padding: 0 7px;
    font-size: 12.5px;
    white-space: nowrap;
}

.nowrap {
    white-space: nowrap;
}

td.contact {
    font-size: 12.5px;
    line-height: 1.45;
}

tr.row-disabled td:not(.row-actions):not(.row-menu) {
    color: #8a94a6;
}

tr.row-disabled .sname {
    opacity: 0.6;
}

span.num {
    font-weight: 600;
}

/* ---------- Conturi: client filter and picker ---------- */
.head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.filter select, dialog select {
    height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235e6b80' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 11px;
    appearance: none;
    font: inherit;
    color: var(--ink);
    cursor: pointer;
}

.filter select {
    min-width: 240px;
}

td.empty-row {
    padding: 22px 14px;
    text-align: center;
}

@media (max-width: 860px) {
    .head-actions {
        width: 100%;
    }

    .filter, .filter select {
        width: 100%;
        min-width: 0;
    }
}

/* Account form: validity block (hidden for the administrator) */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* ---------- No search names on the account: lock the search actions ---------- */
body.no-search .needs-api {
    pointer-events: none;
    opacity: .5;
}

/* ---------- Client type: segmented choice in the form, label in the list ---------- */
fieldset.segmented {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

    fieldset.segmented legend {
        padding: 0;
        margin-bottom: 5px;
        font-size: 13px;
        font-weight: 500;
        color: var(--mute);
    }

.segmented label {
    position: relative;
    cursor: pointer;
}

.segmented input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.segmented span {
    display: block;
    padding: 8px 16px;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 14px;
}

.segmented label:first-of-type span {
    border-radius: var(--radius-s) 0 0 var(--radius-s);
}

.segmented label:last-of-type span {
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    border-left: 0;
}

.segmented input:checked + span {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    font-weight: 600;
}

.segmented input:focus-visible + span {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.ctype {
    font-size: 12px;
    color: var(--mute);
}
/* ---------- Usage (step 5): three counters per account / client, and the per-user window ---------- */
.th small {
    display: block;
    font-weight: 400;
    font-size: 11px;
    color: var(--mute);
    text-transform: none;
    letter-spacing: 0;
}

.usage {
    display: flex;
    gap: 14px;
    white-space: nowrap;
}

    .usage span {
        display: flex;
        flex-direction: column;
        line-height: 1.15;
    }

    .usage b {
        font-size: 15px;
        font-weight: 600;
        color: var(--ink);
        font-variant-numeric: tabular-nums;
    }

    .usage small {
        font-size: 11px;
        color: var(--mute);
    }

    .usage.zero b {
        color: var(--mute);
        font-weight: 500;
    }

.month-switch {
    display: flex;
    gap: 6px;
    margin: 4px 0 14px;
}

    .month-switch .chip[aria-pressed="true"] {
        background: var(--navy);
        border-color: var(--navy);
        color: #fff;
    }

.usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

    .usage-table th, .usage-table td {
        padding: 8px 10px;
        border-bottom: 1px solid var(--line);
        text-align: right;
    }

        .usage-table th:first-child, .usage-table td:first-child {
            text-align: left;
        }

    .usage-table th {
        font-size: 12px;
        font-weight: 500;
        color: var(--mute);
    }

    .usage-table td {
        font-variant-numeric: tabular-nums;
    }

    .usage-table tfoot td {
        font-weight: 600;
        border-bottom: 0;
        border-top: 2px solid var(--ink);
    }

.usage-note {
    font-size: 12px;
    color: var(--mute);
    margin: 12px 0 0;
}

#usageDialog .dialog-actions {
    justify-content: space-between;
}
/* ---------- Quick-range chips: the active one is filled ---------- */
.chip[aria-pressed="true"] {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.chip[aria-pressed="true"]:hover {
        color: #fff;
}

/* =====================================================================
   v2.1 layout: navy left menu + page header + content (replaces the top bar,
   the folder tabs and the footer). Rules below override the older ones above.
   ===================================================================== */
body:not(.login-page) {
    display: flex;
    flex-direction: row;
    min-height: 100vh;
}

/* ---------- Left menu ---------- */
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    flex: 0 0 220px;
    display: flex;
    flex-direction: column;
    padding: 18px 12px 12px;
    background: var(--side);
    color: var(--side-ink);
}

    .sidebar .brand {
        padding: 4px 10px 20px;
        color: #fff;
        font: 600 19px/1 var(--font-cond);
    }

.brand-mark {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
}

    .brand-mark svg, .sidebar .brand svg {
        width: 20px;
        height: 20px;
        fill: #fff;
    }

.nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}

.nav-sec {
    margin: 18px 10px 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--side-mute);
}

.nav [role='tablist'] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.nav-form {
    margin: 0;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--side-ink);
    font-size: 14.5px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .nav-item .ico {
        width: 18px;
        height: 18px;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .nav-item:hover {
        background: rgba(255, 255, 255, 0.07);
        color: #fff;
    }

    .nav-item[aria-selected='true'], .nav-item[aria-current='page'] {
        background: var(--navy);
        color: #fff;
        font-weight: 600;
    }

    .nav-item:focus-visible {
        outline: 2px solid #9cc1ef;
        outline-offset: 1px;
    }

.side-foot {
    margin-top: auto;
    padding: 12px 10px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12.5px;
}

    .side-foot .api {
        color: var(--side-ink);
        font-size: 12.5px;
    }

        .side-foot .api[data-state='ok']::before {
            background: #5fd39a;
        }

        .side-foot .api[data-state='down'] {
            color: #ffc9c4;
        }

    .side-foot .version {
        color: #fff;
        font-weight: 700;
        opacity: 1;
        font-variant-numeric: tabular-nums;
    }

/* ---------- Page header ---------- */
.shell {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.pagebar {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 28px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
}

.page-head {
    display: flex;
    flex-direction: column;
}

.crumb {
    font-size: 12px;
    color: var(--mute);
}

#today {
    text-transform: none;
}

.pagebar h1 {
    margin: 0;
    font: 600 20px/1.25 var(--font-cond);
}

.pagebar .client {
    margin-left: auto;
    color: var(--mute);
    font-size: 13px;
}

    .pagebar .client select {
        background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b7290' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 11px;
        border: 1px solid var(--line);
        color: var(--ink);
        height: 38px;
    }

        .pagebar .client select:hover {
            border-color: var(--blue-mid);
        }

        .pagebar .client select:disabled {
            background-color: var(--paper);
            color: var(--mute);
        }

.who {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    text-align: right;
    font-size: 13px;
}

.pagebar .client + .who {
    margin-left: 0;
}

.who b {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

.who small {
    display: block;
    color: var(--mute);
    font-size: 12px;
}

.avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue-tint);
    color: var(--navy);
    font-weight: 700;
    font-size: 13px;
}

/* ---------- Content: white cards instead of manila folders ---------- */
.shell > main {
    flex: 1 0 auto;
    width: 100%;
    max-width: 1480px;
    margin: 0;
    padding: 24px 28px 48px;
}

.folder {
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: 0 1px 2px rgba(15, 42, 85, 0.05);
    overflow: hidden;
}

.table-wrap thead th, th {
    background: var(--blue-tint);
}

dialog {
    border-top: 4px solid var(--navy);
}

.sname {
    background: var(--blue-tint);
    border-color: var(--line);
    color: var(--navy);
}

.drop.has-file {
    border-color: var(--blue-mid);
    background: var(--blue-tint);
}

.toasts {
    bottom: 20px;
}

/* ---------- Login page in the same colours ---------- */
.login-tab {
    background: var(--side);
    border-color: var(--side);
    color: #fff;
}

    .login-tab svg {
        fill: #fff;
    }

.login .folder {
    border-radius: 0 var(--radius-m) var(--radius-m) var(--radius-m);
}

/* ---------- Small screens: the menu becomes a bar above the page ---------- */
@media (max-width: 860px) {
    body:not(.login-page) {
        flex-direction: column;
    }

    .sidebar {
        position: static;
        height: auto;
        flex: none;
        padding: 12px;
    }

        .sidebar .brand {
            padding: 4px 6px 8px;
        }

    .nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }

        .nav [role='tablist'] {
            flex-direction: row;
            gap: 4px;
        }

    .nav-sec {
        display: none;
    }

    .nav-item {
        width: auto;
        padding: 7px 10px;
    }

    .side-foot {
        flex-direction: row;
        justify-content: space-between;
        border-top: 0;
        padding: 8px 6px 0;
    }

    .pagebar {
        position: static;
        flex-wrap: wrap;
        gap: 10px 16px;
        padding: 12px 16px;
    }

        .pagebar .client {
            margin-left: 0;
        }

    .shell > main {
        padding: 16px 16px 40px;
    }
}

/* Keeps the login fields together on phones */
.login .field {
    flex: none;
}

/* Tighter admin tables so they fit next to the menu on a laptop screen */
.usage {
    gap: 10px;
}

    .usage small {
        font-size: 10.5px;
    }

.admin-table td.nowrap {
    white-space: normal;
}

tbody td.row-actions {
    white-space: normal;
}

.row-actions .btn, .row-actions .btn + .btn {
    margin: 2px 0 2px 4px;
}

/* Dashboard placeholder (client users) */
.placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 72px 20px;
    color: var(--mute);
    text-align: center;
}

.placeholder strong {
        color: var(--ink);
        font: 600 18px/1.3 var(--font-cond);
}

/* Client picker inside the page controls, styled like the date fields */
.client-field select {
    height: 40px;
    min-width: 180px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    color: var(--ink);
    font-weight: 600;
    cursor: pointer;
    appearance: none;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b7290' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 11px;
}

    .client-field select:hover {
        border-color: #b4c0d4;
    }

    .client-field select:disabled {
        background-color: var(--paper);
        color: var(--mute);
        cursor: not-allowed;
    }

/* Administrator: Parte as a search field with suggestions (app.js setupPartySearch) */
.party {
    position: relative;
    width: 240px;
}

    .party input {
        width: 100%;
        height: 40px;
        padding: 0 34px 0 36px;
        border: 1px solid var(--line);
        border-radius: var(--radius-s);
        background: #fff;
        color: var(--ink);
        font: inherit;
        font-weight: 600;
    }

        .party input::placeholder {
            color: var(--mute);
            font-weight: 400;
        }

        .party input:hover {
            border-color: #b4c0d4;
        }

        .party input:focus {
            outline: none;
            border-color: var(--navy);
            box-shadow: 0 0 0 3px rgba(31, 95, 168, 0.18);
        }

.party-ic {
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--mute);
    stroke-width: 2;
    stroke-linecap: round;
    pointer-events: none;
}

.party-x {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--mute);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

    .party-x:hover {
        background: var(--paper);
        color: var(--ink);
    }

.party-list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    box-shadow: 0 6px 18px rgba(10, 33, 73, 0.12);
}

    .party-list li[role="option"] {
        padding: 8px 12px;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .party-list li.act {
        background: var(--tint, #f1f6fc);
    }

    .party-list li.free {
        color: var(--navy);
        font-weight: 600;
    }

    .party-list li.sep {
        height: 1px;
        margin: 4px 0;
        background: var(--line);
    }

/* ---------- Page controls: one row, every control 40px tall, small uppercase labels ---------- */
.controls .row {
    align-items: flex-end;
    gap: 14px 16px;
}

.controls .field > label, .controls .flabel {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Quick periods as one joined control */
.segbar {
    display: flex;
    height: 40px;
    padding: 0;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
    overflow: hidden;
}

    .segbar .chip {
        height: 100%;
        padding: 0 14px;
        border: 0;
        border-right: 1px solid var(--line);
        border-radius: 0;
        font-size: 13.5px;
        color: var(--ink);
        background: none;
    }

        .segbar .chip:last-child {
            border-right: 0;
        }

        .segbar .chip:hover {
            background: var(--blue-tint);
            color: var(--ink);
        }

        .segbar .chip[aria-pressed='true'] {
            background: var(--navy);
            color: #fff;
            font-weight: 600;
        }
/* Start and end date as one Interval field */
.datepair {
    display: flex;
    align-items: center;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
}

    .datepair:hover {
        border-color: #b4c0d4;
    }

    .datepair:focus-within {
        border-color: var(--blue-mid);
    }

    .datepair input[type='date'] {
        height: 38px;
        min-width: 0;
        width: 150px;
        border: 0;
        background: transparent;
    }

    .datepair span {
        color: var(--mute);
    }

    .datepair input:disabled {
        background: transparent;
    }

.controls .actions {
    margin-left: auto;
}
/* Excel area in Actualizări at the same height as the other controls */
#panel-update .drop {
    flex: 1 1 320px;
}

@media (max-width: 860px) {
    .segbar {
        width: 100%;
    }

        .segbar .chip {
            flex: 1;
            padding: 0 8px;
        }

    .datepair {
        width: 100%;
    }

        .datepair input[type='date'] {
            flex: 1;
            width: auto;
        }
}

.shell > main {
    max-width: none;
}

#panel-update .drop {
    flex: 1 1 420px;
}
/* the Excel area takes the free width; buttons stay at the right end */

/* Change password form */
.pw-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 460px;
    border-bottom: 0;
}

    .pw-form .lede {
        margin: 0;
    }

    .pw-form input[type='password'] {
        height: 40px;
        padding: 0 12px;
        border: 1px solid var(--line);
        border-radius: var(--radius-s);
        background: #fff;
    }

        .pw-form input[type='password']:hover {
            border-color: #b4c0d4;
        }

    .pw-form .hint {
        margin-top: 2px;
    }

/* Links styled as buttons (e.g. "Schimbă parola" in Conturi) look and align like real buttons */
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    vertical-align: middle;
}

a.btn-ghost {
    color: var(--ink);
}

    a.btn-ghost:hover {
        border-color: var(--navy);
    }

/* Your own row in Conturi: the single button spans the width of "Editează" + "Șterge" below it */
.row-actions a.btn {
    min-width: 150px;
}

/* =====================================================================
   Dashboards (client and administrator)
   ===================================================================== */
.dash {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.dcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 18px 20px;
    min-width: 0;
}

    .dcard h3 {
        margin: 0 0 2px;
        font: 600 15px/1.3 var(--font-cond);
    }

    .dcard .sub {
        font-size: 12px;
        color: var(--mute);
        margin-bottom: 12px;
    }

.dcard-h2 {
    margin-top: 22px !important;
}

.c4 {
    grid-column: span 4;
}

.c5 {
    grid-column: span 5;
}

.c7 {
    grid-column: span 7;
}

.c12 {
    grid-column: span 12;
}

.dash > .kpi {
    grid-column: span 4;
}

#dashRoot:has(> .kpi:nth-of-type(4)) > .kpi {
    grid-column: span 3;
}
/* admin: four cards in the first row */
.kpi .lab {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mute);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.kpi .val {
    font: 600 32px/1.1 var(--font-cond);
    margin: 6px 0 4px;
    font-variant-numeric: tabular-nums;
}

    .kpi .val small {
        font-size: 17px;
        color: var(--mute);
        font-weight: 500;
    }

.kpi .delta {
    font-size: 12.5px;
    color: var(--mute);
}

.up {
    color: var(--ok);
}

.down {
    color: var(--err);
}

.spark {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 10px;
}

.empty-chart {
    color: var(--mute);
    font-size: 13.5px;
    padding: 24px 0;
    text-align: center;
}

.dash svg text {
    font: 11px var(--font);
    fill: var(--mute);
}

.dash svg .vlab {
    fill: var(--ink);
    font-weight: 600;
}

.dash .legend {
    display: flex;
    gap: 16px;
    font-size: 12.5px;
    color: var(--mute);
    margin-bottom: 6px;
}

    .dash .legend i {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 2px;
        margin-right: 6px;
        vertical-align: -1px;
    }

.bars {
    width: 100%;
    height: auto;
}
/* Calendar */
.hm {
    display: grid;
    gap: 4px;
    align-items: center;
    max-width: 520px;
}

.hm-day, .hm-month {
    font-size: 11px;
    color: var(--mute);
}

.hm-month {
    white-space: nowrap;
    overflow: visible;
}

.hm-cell {
    aspect-ratio: 1;
    border-radius: 3px;
}

.hm-empty {
    border: 1px solid #e6edf6;
}

.hm-leg {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    color: var(--mute);
    margin-top: 10px;
}

    .hm-leg span {
        width: 12px;
        height: 12px;
        border-radius: 2px;
        display: inline-block;
    }
/* Donut: fills its card; legend beside (or under, for narrow cards) */
.dcard-fill .dn {
    flex: 1;
}

.dn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

    .dn svg {
        width: 210px;
        height: 210px;
        flex: none;
    }

.dn-stack {
    flex-direction: column;
    gap: 14px;
}

    .dn-stack svg {
        width: 190px;
        height: 190px;
    }

.dn-legend {
    flex: 1;
    min-width: 170px;
    max-width: 300px;
}

.dn-stack .dn-legend {
    width: 100%;
    max-width: none;
}

.dn-row {
    display: grid;
    grid-template-columns: 12px 1fr auto 40px;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    margin: 7px 0;
}

    .dn-row i {
        width: 10px;
        height: 10px;
        border-radius: 2px;
    }

    .dn-row b {
        font-variant-numeric: tabular-nums;
    }

    .dn-row .muted {
        text-align: right;
    }

.dash svg .dn-total {
    font: 600 26px var(--font-cond);
    fill: var(--ink);
}
/* Ranking bars and seats */
.hb, .seat {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr 48px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    margin: 9px 0;
}

.hb-name {
    line-height: 1.3;
}
/* long client names wrap instead of being cut */
.hb-track {
    height: 10px;
    background: var(--blue-tint);
    border-radius: 0 4px 4px 0;
}

    .hb-track i {
        display: block;
        height: 100%;
        background: #9bb9de;
        border-radius: 0 4px 4px 0;
    }

.dash .c4 .hb-track i, .hb-me .hb-track i {
    background: var(--navy);
}

.hb-me {
    font-weight: 600;
}

.hb-val {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.seat-cells {
    display: flex;
    gap: 3px;
}

    .seat-cells span {
        flex: 1;
        height: 12px;
        border-radius: 2px;
        background: #e3ecf7;
    }

        .seat-cells span.u {
            background: var(--navy);
        }

.seat.full .seat-cells span.u {
    background: #c27a1f;
}
/* every seat taken */
.seat .hb-val {
    color: var(--mute);
}
/* Needs attention */
.att {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .att li {
        display: grid;
        grid-template-columns: 22px 1fr auto;
        gap: 8px;
        align-items: start;
        padding: 9px 0;
        border-top: 1px solid #edf2f8;
        font-size: 13.5px;
    }

        .att li:first-child {
            border-top: 0;
        }

    .att small {
        display: block;
        color: var(--mute);
        font-size: 12px;
    }

    .att a {
        font-size: 12.5px;
        color: var(--navy);
        text-decoration: none;
        font-weight: 600;
        white-space: nowrap;
    }

        .att a:hover {
            text-decoration: underline;
        }

.att-ic {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-top: 1px;
}

.att-error {
    background: var(--err);
}

.att-warn {
    background: #c27a1f;
}

.att-info {
    background: var(--navy);
}

.att-more {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--mute);
}
/* Tooltip */
.chart-tip {
    position: fixed;
    z-index: 50;
    pointer-events: none;
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--ink);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.4;
    box-shadow: 0 6px 18px rgba(15, 42, 85, 0.25);
}

@media (max-width: 1100px) {
    .c4, .c5, .c7, .dash > .kpi, #dashRoot:has(> .kpi:nth-of-type(4)) > .kpi {
        grid-column: span 6;
    }

    .c12 {
        grid-column: span 12;
    }
}

@media (max-width: 700px) {
    .dash > *, .c4, .c5, .c7, .dash > .kpi, #dashRoot:has(> .kpi:nth-of-type(4)) > .kpi {
        grid-column: span 12;
    }
}

/* ---------- Login history: link in "Ultima autentificare" and the Istoric window ---------- */
.linkish {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

    .linkish:hover {
        color: var(--navy);
    }

.fail-mark {
    display: inline-block;
    margin-left: 6px;
    padding: 0 6px;
    border-radius: 3px;
    background: #fcefee;
    color: var(--err);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

dialog.dialog-history {
    width: min(780px, calc(100vw - 32px));
}

.hsum {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    font-size: 13px;
    color: var(--mute);
}

    .hsum b {
        display: block;
        color: var(--ink);
        font-size: 15px;
    }

.hscroll {
    max-height: 340px;
    overflow: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.hist {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

    .hist th {
        position: sticky;
        top: 0;
        padding: 8px 10px;
        background: var(--blue-tint);
        text-align: left;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--mute);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .hist td {
        padding: 8px 10px;
        border-top: 1px solid #edf2f8;
        white-space: nowrap;
    }

        .hist td.ua {
            white-space: normal;
            color: var(--mute);
        }

.res {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
}

    .res i {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

.r-ok {
    color: var(--ok);
}

    .r-ok i {
        background: var(--ok);
    }

.r-bad {
    color: var(--err);
}

    .r-bad i {
        background: var(--err);
    }

.r-blk {
    color: var(--warn);
}

    .r-blk i {
        background: #c27a1f;
    }

/* ---------- Ajutor (help page) ---------- */
.help {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 16px;
    align-items: start;
}

.hcard {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    padding: 22px 26px;
    scroll-margin-top: 84px;
}

    .hcard + .hcard {
        margin-top: 16px;
    }

    .hcard h2 {
        margin: 0 0 4px;
        font: 600 18px/1.3 var(--font-cond);
    }

    .hcard h3 {
        margin: 0 0 8px;
        font: 600 15px/1.3 var(--font-cond);
    }

    .hcard p, .hcard li, .hcard td {
        color: #33415a;
        font-size: 14px;
        line-height: 1.6;
    }

    .hcard .lead {
        color: var(--mute);
        margin: 0 0 14px;
    }

.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.step {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--blue-tint);
    font-size: 13.5px;
    color: #33415a;
}

    .step b {
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        margin-bottom: 8px;
        border-radius: 50%;
        background: var(--navy);
        color: #fff;
        font-size: 12px;
    }

.cmp {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

    .cmp th {
        padding: 9px 12px;
        background: var(--blue-tint);
        text-align: left;
        font-size: 12px;
        color: var(--mute);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .cmp td {
        padding: 9px 12px;
        border-top: 1px solid #edf2f8;
        vertical-align: top;
    }

        .cmp td:first-child {
            width: 160px;
            font-weight: 600;
            color: var(--ink);
        }

.hcard details {
    padding: 11px 0;
    border-top: 1px solid #edf2f8;
}

    .hcard details:first-of-type {
        border-top: 0;
    }

.hcard summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
}

.hcard details p {
    margin: 8px 0 0;
}

.help-side {
    position: sticky;
    top: 84px;
}

.help-toc button {
    display: block;
    padding: 6px 0;
    border: 0;
    background: none;
    color: var(--navy);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

    .help-toc button:hover {
        text-decoration: underline;
    }

.help-contact b {
    display: block;
    margin: 2px 0 8px;
    font-size: 15px;
}

.help-contact div {
    margin: 6px 0;
    font-size: 14px;
    color: #33415a;
}

.help-contact a {
    color: var(--navy);
    text-decoration: none;
}

.help-contact .muted {
    font-size: 12.5px;
}

@media (max-width: 1100px) {
    .help {
        grid-template-columns: 1fr;
    }

    .help-side {
        position: static;
    }

    .steps {
        grid-template-columns: 1fr;
    }
}

/* Version centered at the bottom of the menu */
.side-foot .version {
    align-self: center;
    text-align: center;
}

/* Locked field (e.g. user limit for an individual lawyer) */
dialog input.locked {
    background: var(--blue-tint);
    color: var(--mute);
    cursor: not-allowed;
}

/* ---------- ⋮ row menus (Clienți, Conturi) ---------- */
tbody td.row-menu {
    text-align: right;
    width: 56px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.kebab {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--mute);
    cursor: pointer;
}

    .kebab svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
    }

    .kebab:hover {
        border-color: #b4c0d4;
        color: var(--ink);
    }

    .kebab[aria-expanded='true'] {
        border-color: var(--navy);
        color: var(--navy);
        box-shadow: 0 0 0 3px rgba(31, 95, 168, 0.15);
    }

    .kebab:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
    }

.kmenu {
    position: fixed;
    z-index: 50;
    min-width: 230px;
    padding: 6px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-m);
    box-shadow: 0 12px 32px rgba(15, 42, 85, 0.16);
}

.kitem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-s);
    background: none;
    color: var(--ink);
    font: 14px/1.3 var(--font);
    text-align: left;
    cursor: pointer;
}

    .kitem:hover, .kitem:focus-visible {
        background: var(--blue-tint);
        outline: none;
    }

    .kitem em {
        margin-left: auto;
        padding-left: 12px;
        font-style: normal;
        font-size: 12px;
        color: var(--mute);
    }

.kico {
    width: 16px;
    height: 16px;
    flex: none;
    fill: none;
    stroke: var(--mute);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.kitem.kdanger, .kitem.kdanger .kico {
    color: var(--err);
    stroke: var(--err);
}

    .kitem.kdanger:hover, .kitem.kdanger:focus-visible {
        background: #fcefee;
    }

.kitem:disabled {
    color: #a8b6c8;
    cursor: not-allowed;
    background: none;
}

    .kitem:disabled .kico {
        stroke: #c3cedb;
    }

.ksep {
    height: 1px;
    margin: 5px 4px;
    background: var(--line);
}

/* ---------- Temporary passwords ---------- */
.temp-mark {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--warn);
}

.note-box {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--blue-tint);
    color: var(--mute);
    font-size: 13px;
}

dialog .creds-ok {
    color: var(--ok);
}

.creds-msg {
    margin: 0;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--row-alt);
    font: 13.5px/1.55 var(--font);
    color: var(--ink);
    white-space: pre-wrap;
    user-select: all;
}

dialog p.creds-warn {
    color: var(--warn);
    font-size: 13px;
}

.pw-rules {
    list-style: none;
    margin: -4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 12.5px;
    color: var(--mute);
}

    .pw-rules li::before {
        content: '○';
        margin-right: 6px;
    }

    .pw-rules li.met {
        color: var(--ok);
    }

        .pw-rules li.met::before {
            content: '✓';
        }

.pw-logout {
    margin-top: 14px;
    text-align: center;
}

/* ---------- Backup (admin Dashboard) ---------- */
.backup-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    padding-right: 18px;
    margin-right: 4px;
    border-right: 1px solid var(--line);
}

    .backup-box + .who {
        margin-left: 0;
    }

.backup-last {
    text-align: right;
    font-size: 12px;
    color: var(--mute);
    line-height: 1.3;
}

    .backup-last b {
        display: block;
        color: var(--ink);
        font-weight: 600;
        font-size: 13px;
    }

.backup-box .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.backup-box .ico {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.backup-list {
    margin: -4px 0 0 18px;
    padding: 0;
    color: var(--ink);
    font-size: 14px;
}

    .backup-list li {
        margin: 2px 0;
    }

.backup-file {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--blue-tint);
    font-size: 13.5px;
}

    .backup-file span {
        color: var(--mute);
    }

@media (max-width: 720px) {
    .backup-last {
        display: none;
    }

    .backup-box {
        padding-right: 10px;
    }
}

/* ---------- Delete client ---------- */
.delete-box {
    padding: 12px 14px;
    border: 1px solid #f1c9c5;
    border-radius: 8px;
    background: #fcefee;
    font-size: 14px;
}

    .delete-box ul {
        margin: 4px 0 0 18px;
        padding: 0;
    }

    .delete-box li {
        margin: 2px 0;
    }

.btn-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
td.missing {
    color: #a3adbd;
}

/* Stadiu Procesual as a pill */
.pill {
    display: inline-block;
    padding: 1px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.pill-fond {
    background: #e6eefa;
    color: #1f5fa8;
}

.pill-apel {
    background: #fbefdd;
    color: #94570f;
}

.pill-recurs {
    background: #efe8fb;
    color: #5b3aa0;
}

.pill-other {
    background: #eef1f5;
    color: #4a5b73;
}

/* Placeholder rows while a search runs */
.sk {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e9eef5 0%, #f5f8fc 50%, #e9eef5 100%);
    background-size: 200% 100%;
    animation: sk-shimmer 1.4s ease-in-out infinite;
}

tr.sk-row td {
    background: #fff !important;
    padding-top: 14px;
    padding-bottom: 14px;
}

@keyframes sk-shimmer {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk {
        animation: none;
    }
}

/* ---------- Upcoming hearings and copying the dossier number ---------- */
.hearing-today {
    background: #c27a1f;
    color: #fff;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 600;
    white-space: nowrap;
}

.hearing-soon {
    background: #fde9c8;
    color: #7a4a10;
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 600;
    white-space: nowrap;
}

.hearing-when {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #c27a1f;
}

.stage.stage-soon {
    border-color: #e3a04a;
}

    .stage.stage-soon[aria-pressed='true'] {
        background: #c27a1f;
        border-color: #c27a1f;
        color: #fff;
    }

.stage-sep {
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--line);
}

td.num {
    cursor: copy;
    position: relative;
}

    td.num:hover {
        color: var(--navy);
        text-decoration: underline dotted;
        text-underline-offset: 3px;
    }

    td.num .copied {
        position: absolute;
        left: 10px;
        top: -4px;
        padding: 2px 7px;
        border-radius: 5px;
        background: var(--ink);
        color: #fff;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
        pointer-events: none;
    }

.results-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 10px 22px;
    border-top: 1px solid var(--line);
    color: var(--mute);
    font-size: 12px;
}

/* ---------- "Descarcă model" in the Actualizări drop area ---------- */
.model-link {
    grid-column: 1;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 2px 0;
    border: 0;
    background: none;
    color: var(--navy);
    font: 600 13px/1.3 var(--font);
    cursor: pointer;
}

    .model-link svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .model-link:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .model-link:focus-visible {
        outline: 2px solid var(--focus);
        outline-offset: 2px;
        border-radius: 4px;
    }

/* ---------- Access requests (admin Dashboard) ---------- */
.req-wrap {
    margin-top: 16px;
}

#solicitari {
    scroll-margin-top: 90px;
}

.req {
    padding: 12px 0;
    border-top: 1px solid var(--line);
}

.req-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    .req-top small {
        margin-left: auto;
        color: var(--mute);
        font-size: 12px;
    }

.req-new {
    padding: 0 7px;
    border-radius: 999px;
    background: #c27a1f;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.req-ct {
    color: var(--mute);
    font-size: 13px;
}

    .req-ct a {
        color: var(--navy);
    }

.req-msg {
    margin: 6px 0;
    padding: 7px 10px;
    border-radius: 7px;
    background: var(--blue-tint);
    font-size: 13.5px;
    white-space: pre-wrap;
}

.req-acts {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.req-done {
    opacity: 0.55;
}

/* ---------- Setări (admin) ---------- */
.settings-card {
    padding: 22px 26px;
    max-width: 980px;
}

    .settings-card form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .settings-card h2 {
        margin: 0 0 2px;
        font: 600 20px/1.25 var(--font-cond);
    }

    .settings-card .lede {
        margin: 0;
    }

.set-head {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.settings-card textarea {
    width: 100%;
    min-height: 64px;
    padding: 8px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    font: inherit;
    color: var(--ink);
    resize: vertical;
}

    .settings-card textarea:focus, .settings-card input[type='datetime-local']:focus {
        outline: 2px solid var(--focus);
        outline-offset: 0;
    }

.settings-card input[type='datetime-local'] {
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    font: inherit;
    color: var(--ink);
}

.set-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px 28px;
}

.set-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    min-height: 40px;
    align-items: center;
    font-size: 14px;
}

    .set-checks label {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-weight: 400;
        cursor: pointer;
    }

.set-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .set-preview #annPreview {
        border: 1px dashed var(--line);
        border-radius: var(--radius-s);
        overflow: hidden;
    }

.set-empty {
    margin: 0;
    padding: 12px;
    font-size: 13px;
}

.set-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.set-actions .btn:first-of-type {
        margin-left: auto;
}
/* both buttons together at the right end */

.set-status {
    font-size: 13px;
    font-weight: 600;
    color: var(--mute);
}

    .set-status.on {
        color: var(--ok);
    }

    .set-status.danger {
        color: #b42318;
    }

#mentenanta {
    margin-top: 18px;
}

/* On/off switch */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
}

    .switch input {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
    }

.switch-ui {
    position: relative;
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: #c3cedb;
    transition: background 0.15s;
}

    .switch-ui::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: #fff;
        transition: left 0.15s;
    }

.switch input:checked + .switch-ui {
    background: var(--ok);
}

    .switch input:checked + .switch-ui::after {
        left: 21px;
    }

.switch input:focus-visible + .switch-ui {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .switch-ui, .switch-ui::after {
        transition: none;
    }
}

/* Setări: fields faded while the announcement is hidden (still editable) */
.set-dim {
    opacity: 0.55;
}

    .set-dim:focus-within {
        opacity: 1;
    }

#annFields, #mntFields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.set-note {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--radius-s);
    background: var(--blue-tint);
    color: var(--mute);
    font-size: 13px;
}

/* Portal status centred in the menu footer, like the version below it */
.side-foot .api {
    align-self: center;
    text-align: center;
}


/* Actualizări for client users: grouped by Parte (app.js, ResultsView with a 'Parte' column) */
.by-parties #panel-update .client-field {
    display: none;
}
/* all the client's names are checked */
.parties-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 14px 24px 0;
}

.parties-label {
    font-size: 13px;
    color: var(--mute);
    margin-right: 4px;
}

tr.group-row td {
    background: #e9f0f9 !important;
    font-weight: 700;
    color: var(--deep, #0a2149);
    padding-top: 9px;
    padding-bottom: 9px;
}

    tr.group-row td small {
        font-weight: 600;
        color: var(--mute);
        margin-left: 8px;
    }

tr.group-row.group-other td {
    background: #f1f3f6 !important;
    color: var(--mute);
}

.role {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
}

.role-own {
    background: #e6f3ec;
    color: #2e7a57;
}

.role-def {
    background: #fcefee;
    color: #b3261e;
}


/* ---------- Results filter bar: [Parte ▾] [Stadiu ▾] [Ședințe în 7 zile] + "Filtre active" (app.js, ResultsView) ---------- */
.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.fmenu {
    position: relative;
}

.fbtn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

    .fbtn small {
        color: var(--mute);
        font-size: 13px;
    }

    .fbtn b {
        font-weight: 600;
        max-width: 220px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fbtn svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: var(--mute);
        stroke-width: 2;
    }

    .fbtn:hover {
        border-color: #b4c0d4;
    }

    .fbtn.on {
        border-color: #9fb8d8;
        background: #eef4fb;
    }

.fcnt {
    background: var(--navy);
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    line-height: 17px;
}

.fpop {
    position: absolute;
    z-index: 30;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-height: 360px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(10, 33, 73, 0.16);
    padding: 6px;
}

    .fpop hr {
        border: 0;
        border-top: 1px solid var(--line);
        margin: 5px 4px;
    }

.fitem {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    text-align: left;
    cursor: pointer;
}

    .fitem:hover, .fitem:focus-visible {
        background: #f1f6fc;
        outline: none;
    }

    .fitem.muted {
        color: var(--mute);
    }

    .fitem em {
        margin-left: auto;
        font-style: normal;
        color: var(--mute);
        font-size: 12.5px;
        font-variant-numeric: tabular-nums;
    }

.fcheck {
    flex: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #9fb0c6;
    border-radius: 4px;
    display: grid;
    place-items: center;
}

.fitem[aria-checked='true'] .fcheck {
    background: var(--navy);
    border-color: var(--navy);
}

    .fitem[aria-checked='true'] .fcheck::after {
        content: '✓';
        color: #fff;
        font-size: 11px;
        font-weight: 700;
    }

.ftoggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
}

    .ftoggle i {
        position: relative;
        width: 28px;
        height: 16px;
        border-radius: 999px;
        background: #c3cedb;
        transition: background 0.15s;
    }

        .ftoggle i::after {
            content: '';
            position: absolute;
            top: 2px;
            left: 2px;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #fff;
            transition: left 0.15s;
        }

    .ftoggle[aria-pressed='true'] {
        border-color: #f0c98d;
        background: #fff8ec;
        color: #7a4a0d;
        font-weight: 600;
    }

        .ftoggle[aria-pressed='true'] i {
            background: #d9a85a;
        }

            .ftoggle[aria-pressed='true'] i::after {
                left: 14px;
            }

@media (prefers-reduced-motion: reduce) {
    .ftoggle i, .ftoggle i::after {
        transition: none;
    }
}

.active-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 26px 12px;
    font-size: 13px;
    color: var(--mute);
}

.fchip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px 3px 11px;
    border: 1px solid #c9dcf3;
    border-radius: 999px;
    background: #eef4fb;
    color: #173d6e;
    font-weight: 600;
}

    .fchip button {
        width: 20px;
        height: 20px;
        border: 0;
        border-radius: 50%;
        background: none;
        color: var(--mute);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
    }

        .fchip button:hover {
            background: rgba(31, 95, 168, 0.12);
            color: var(--ink);
        }

.fclear {
    border: 0;
    background: none;
    color: var(--navy);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
}

    .fclear:hover {
        text-decoration: underline;
    }


/* Ajutor: definition lists ("Lucrul cu rezultatele", "Pentru administrator") and sub-headings */
#help-start h3 {
    margin: 18px 0 8px;
    font: 600 16px/1.3 var(--font-cond);
}

.hdl {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px 18px;
    margin: 6px 0 0;
}

    .hdl dt {
        font-weight: 600;
    }

    .hdl dd {
        margin: 0;
        color: var(--ink);
    }

@media (max-width: 700px) {
    .hdl {
        grid-template-columns: 1fr;
        gap: 2px;
    }

        .hdl dd {
            margin-bottom: 10px;
        }
}
/* ---------- Licență: Standard / Premium (Clienți) ---------- */
.lic {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

  .lic svg {
    width: 11px;
    height: 11px;
    fill: currentColor;
  }

.lic-std {
  background: #eef2f7;
  color: var(--mute);
}

.lic-pre {
  background: #fdf1dc;
  color: #94570f;
}

/* Licență choice + "Număr maxim de părți" (Premium only) side by side */
.lic-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}

  .lic-row .lic-max input {
    width: 120px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius-s);
    background: #fff;
    font: inherit;
    font-variant-numeric: tabular-nums;
  }

/* Parties list: label + counter, chips with ×, "Adaugă parte" */
.parties-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

  .parties-head .flabel {
    font-size: 13px;
    font-weight: 500;
    color: var(--mute);
  }

.parties-count {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

  .parties-count.full {
    color: var(--warn);
  }

  .parties-count.over {
    color: var(--err);
  }

.parties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

  .parties.over {
    border-color: var(--err);
    outline: 2px solid #f6d3d0;
  }

.pchip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--blue-tint);
  color: var(--navy);
  font-size: 13px;
}

  .pchip button {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 3px;
    background: none;
    color: #7f9cc4;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }

    .pchip button:hover {
      background: #dbe7f6;
      color: var(--err);
    }

.padd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 7px;
  border: 1px dashed #9fb8d8;
  border-radius: 4px;
  background: #fff;
  color: var(--navy);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

  .padd i {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-style: normal;
    font-size: 14px;
    line-height: 1;
  }

  .padd:disabled {
    border-style: solid;
    border-color: var(--line);
    color: #97a1b2;
    cursor: not-allowed;
  }

    .padd:disabled i {
      background: #c3ccd9;
    }

.pnew {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

  .pnew input {
    flex: 1;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--navy);
    border-radius: var(--radius-s);
    font: inherit;
  }

  .pnew .btn {
    height: 36px;
  }

.hint-warn {
  color: var(--warn);
}

.hint-err {
  color: var(--err);
}

/* Clienți list: "Vizualizați tot (n)" / "Arată mai puțin" after the first 10 parties */
.more-link {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--navy);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* ---------- Client Dashboard: "Licență și părți verificate" card ---------- */
.lic-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.lic-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--mute);
  white-space: nowrap;
}

  .lic-meta b {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

    .lic-meta b.full {
      color: var(--warn);
    }

.lic-parties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.pchip-ro {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--blue-tint);
  color: var(--navy);
  font-size: 13px;
}

/* parties after the first 10 stay folded until "Vizualizați tot" */
.lic-card:not(.open) .pchip-ro.extra {
  display: none;
}

.lic-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--warn);
}

@media (max-width: 700px) {
  .lic-head {
    flex-direction: column;
  }
}

/* ---------- "Solicită o parte nouă": client Dashboard card + admin Necesită atenție ---------- */
.lic-pending {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--navy);
}

.lic-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf2f8;
}

  .lic-foot small {
    font-size: 12px;
    color: var(--mute);
  }

/* ---------- "Solicitare parte nouă": eye button in Necesită atenție + the details window ---------- */
.att-eye {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}

  .att-eye svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
  }

  .att-eye:hover {
    border-color: var(--navy);
    background: var(--blue-tint);
  }

.reqd-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px 12px;
  margin: 0;
  font-size: 14px;
}

  .reqd-dl dt {
    color: var(--mute);
  }

  .reqd-dl dd {
    margin: 0;
  }

.reqd-msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

  .reqd-msg b {
    font-size: 13px;
    font-weight: 600;
  }

  .reqd-msg div {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--blue-tint);
    font-size: 13.5px;
    font-style: italic;
    white-space: pre-wrap;
  }

dialog .reqd-full {
  font-size: 12.5px;
  color: var(--warn);
}

.reqd-acts {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

  .reqd-acts span {
    display: flex;
    gap: 8px;
  }

  .reqd-acts .btn {
    min-width: 110px;
  }

  .reqd-acts a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
/* Ajutor: a heading right after a definition list (e.g. "Cum adăugați o parte nouă") gets some space above */
.hcard .hdl + h3 {
  margin-top: 16px;
}
/* ---------- "Adaugă în calendar" (Actualizări): icon column + the small window ---------- */
th.calc, td.calc {
  width: 46px;
  padding-left: 4px;
  padding-right: 12px;
  text-align: center;
}

.cal-btn {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: #fff;
  color: var(--navy);
  cursor: pointer;
}

  .cal-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  .cal-btn:hover {
    border-color: var(--navy);
    background: var(--blue-tint);
  }

.calpop {
  position: absolute;
  z-index: 20;
  width: 330px;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  box-shadow: 0 18px 40px -12px rgba(15, 42, 85, 0.35);
  font-size: 13.5px;
}

  .calpop h4 {
    margin: 0 0 2px;
    font: 600 15px var(--font-cond);
  }

.calpop-when {
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--mute);
}

.calpop-lab {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mute);
}

.calpop-seg {
  display: flex;
  margin-bottom: 12px;
}

  .calpop-seg button {
    flex: 1;
    padding: 6px 0;
    border: 1px solid var(--line);
    background: #fff;
    font-size: 13px;
    cursor: pointer;
  }

    .calpop-seg button + button {
      border-left: 0;
    }

    .calpop-seg button:first-child {
      border-radius: var(--radius-s) 0 0 var(--radius-s);
    }

    .calpop-seg button:last-child {
      border-radius: 0 var(--radius-s) var(--radius-s) 0;
    }

    .calpop-seg button[aria-pressed="true"] {
      border-color: var(--navy);
      background: var(--navy);
      color: #fff;
      font-weight: 600;
    }

.calpop-al {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

  .calpop-al span {
    padding: 1px 9px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--blue-tint);
    color: var(--navy);
    font-size: 12px;
  }

.calpop-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

  .calpop-acts .btn {
    height: 34px;
    font-size: 13.5px;
  }