/* ==========================================================================
   TDL Facturare — design tokens
   ========================================================================== */

:root {
    color-scheme: light;

    /*
     * Surfaces.
     *
     * The palette used to be warm beige (#f2efe9 body, #f7f3ec panels, #e2ddd5 borders), which read
     * as dated and, against the grey sidebar, as cold. It is now a near-white blue: the workspace
     * still recedes behind the content, but the tint is on the blue side of neutral so cards and the
     * TDL blue belong to the same family. Every value is a token - no page restates a colour.
     */
    --tdl-body-bg: #eaf4ff;
    --tdl-page-gradient: linear-gradient(180deg, #f2f8ff 0%, #e3eefc 100%);
    --tdl-surface: #ffffff;
    --tdl-surface-soft: #f3f9ff;
    --tdl-surface-muted: #dfecfb;
    /* Navy rather than grey-brown: the sidebar is the one place the brand can be assertive. */
    --tdl-sidebar-bg: #12395d;
    --tdl-sidebar-bg-soft: #1b5285;
    --tdl-sidebar-border: rgba(255, 255, 255, 0.10);

    /* Borders - blue-grey and deliberately faint, so cards separate without drawing a box. */
    --tdl-border: #cfe0f2;
    --tdl-border-strong: #a9c8e6;
    --tdl-border-soft: rgba(207, 224, 242, 0.8);

    /* Text - unchanged in contrast terms, nudged slightly blue to match the surfaces. */
    --tdl-text-primary: #1e2a37;
    --tdl-text-secondary: #44546a;
    --tdl-text-muted: #64748b;
    --tdl-text-subtle: #8fa0b4;

    /* Brand - a cleaner, more saturated TDL blue; the old #4a7494 was muted to the point of grey. */
    --tdl-primary: #1677d2;
    --tdl-primary-hover: #1263b3;
    --tdl-primary-active: #0e5093;
    --tdl-primary-soft: #dbecff;
    --tdl-primary-soft-border: #a8d0f7;
    --tdl-secondary: #dfecfb;
    --tdl-secondary-hover: #c9e0f7;

    /*
       Data grid - the column-separated variant.

       Four of these are aliases rather than new colours: the band, the hover, the selection and the
       separator are values the palette already carries, named here so a grid asks for "the grid band"
       instead of reaching for a brand token and quietly pinning itself to it. Only the heading ink is
       genuinely new: the muted greys are too light to head a ruled column, and this is the same navy
       the invoice PDF prints its table head in, so the screen and the document match.
    */
    --tdl-grid-header-bg: var(--tdl-primary-soft);
    --tdl-grid-header-text: #173b5f;
    --tdl-grid-separator: var(--tdl-border);
    --tdl-grid-row-hover: var(--tdl-surface-soft);
    --tdl-grid-row-selected: var(--tdl-primary-soft);

    /* Status */
    --tdl-success: #275c3d;
    --tdl-success-soft: #e5f0ea;
    --tdl-success-soft-border: #c9dfd2;
    --tdl-warning: #8c5a14;
    --tdl-warning-soft: #fdf0df;
    --tdl-warning-soft-border: #f2d8b5;
    --tdl-danger: #9e2a2b;
    --tdl-danger-soft: #fae8e8;
    --tdl-danger-soft-border: #e9c1c1;
    --tdl-info: #0e7490;
    --tdl-info-soft: #ecfeff;
    --tdl-info-soft-border: #a5f3fc;
    --tdl-violet: #7c3aed;
    --tdl-violet-soft: #ede9fe;

    /* Shadows */
    /* Blue-tinted and very discreet: cards should lift off the surface, not cast a grey box. */
    --tdl-shadow-sm: 0 1px 2px rgba(22, 48, 77, 0.05);
    --tdl-shadow: 0 3px 10px rgba(22, 48, 77, 0.07);
    --tdl-shadow-md: var(--tdl-shadow);
    --tdl-shadow-lg: 0 20px 44px rgba(22, 48, 77, 0.16);

    /* Radii */
    --tdl-radius-xl: 0.65rem;
    --tdl-radius-lg: 0.55rem;
    --tdl-radius-md: 0.4rem;
    --tdl-radius-sm: 0.3rem;

    /* Spacing scale */
    --tdl-space-1: 0.25rem;
    --tdl-space-2: 0.5rem;
    --tdl-space-3: 0.75rem;
    --tdl-space-4: 1rem;
    --tdl-space-5: 1.5rem;
    --tdl-space-6: 2rem;
    --tdl-space-7: 3rem;

    /* Generic aliases */
    --border: var(--tdl-border);
    --surface: var(--tdl-surface);
    --surface-raised: var(--tdl-surface-soft);
    --text-primary: var(--tdl-text-primary);
    --text-secondary: var(--tdl-text-secondary);
    --accent: var(--tdl-primary);
    --app-bg: var(--tdl-body-bg);
    --surface-bg: var(--tdl-surface);
    --border-color: var(--tdl-border);
    --primary: var(--tdl-primary-hover);
    --danger: var(--tdl-danger);
    --radius: var(--tdl-radius-lg);
    --radius-sm: var(--tdl-radius-sm);
    --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--tdl-body-bg);
    color: var(--tdl-text-primary);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    line-height: 1.5;
    font-size: 15px;
}

#app,
.app {
    min-height: 100vh;
}

::selection {
    background: rgba(74, 116, 148, 0.22);
}

.field-flash {
    animation: tdl-field-flash 1.2s ease-out;
    outline: 2px solid var(--tdl-danger, #9e2a2b);
    outline-offset: 2px;
    border-radius: var(--tdl-radius-sm, 0.3rem);
}

@keyframes tdl-field-flash {
    0% {
        background-color: rgba(158, 42, 43, 0.18);
    }
    100% {
        background-color: transparent;
    }
}

.field-error-text {
    color: var(--tdl-danger, #9e2a2b);
    font-size: 0.82rem;
    margin-top: 0.25rem;
}

main,
aside,
section,
header {
    min-width: 0;
}

a {
    color: var(--tdl-primary);
    text-decoration: none;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--tdl-primary-hover);
    text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    overflow-wrap: anywhere;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--tdl-text-primary);
    letter-spacing: 0;
}

p {
    color: var(--tdl-text-secondary);
}

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

/* ==========================================================================
   Buttons (Bootstrap overrides + tdl-btn primitives)
   ========================================================================== */

.btn {
    --bs-btn-border-radius: var(--tdl-radius-sm);
    min-height: 2.35rem;
    border-radius: var(--tdl-radius-sm);
    font-weight: 600;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    text-decoration: none;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
}

.btn:hover,
.btn:focus,
.btn:active {
    text-decoration: none;
}

.btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(74, 116, 148, 0.22);
    outline: 0;
}

.btn-sm {
    min-height: 2rem;
    border-radius: 0.5rem;
    font-weight: 600;
    padding: 0.32rem 0.65rem;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:disabled,
.btn-primary[disabled],
.btn-primary[aria-disabled="true"] {
    color: #fff;
}

.btn-primary {
    background-color: var(--tdl-primary);
    border-color: var(--tdl-primary);
    box-shadow: 0 6px 14px rgba(74, 116, 148, 0.18);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tdl-primary-hover);
    border-color: var(--tdl-primary-hover);
}

.btn-primary:active {
    background-color: var(--tdl-primary-active) !important;
    border-color: var(--tdl-primary-active) !important;
    transform: translateY(1px);
}

.btn-outline-primary {
    color: var(--tdl-primary-hover);
    border-color: var(--tdl-primary-soft-border);
    background-color: var(--tdl-surface);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--tdl-primary-soft);
    color: var(--tdl-primary-hover);
    border-color: #93c5fd;
}

.btn-outline-secondary {
    color: var(--tdl-text-secondary);
    border-color: var(--tdl-border-strong);
    background-color: var(--tdl-surface);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
    background: var(--tdl-surface-soft);
    color: var(--tdl-text-primary);
    border-color: var(--tdl-text-subtle);
}

.btn-outline-danger {
    color: var(--tdl-danger);
    border-color: var(--tdl-danger-soft-border);
    background-color: #fff;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus {
    background: var(--tdl-danger-soft);
    color: var(--tdl-danger);
    border-color: #fca5a5;
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success:visited,
.btn-success:disabled,
.btn-success[disabled],
.btn-success[aria-disabled="true"] {
    color: #fff;
}

.btn-success {
    background-color: var(--tdl-success);
    border-color: var(--tdl-success);
    box-shadow: 0 6px 14px rgba(39, 92, 61, 0.18);
}

.btn-success:hover,
.btn-success:focus {
    background-color: #1f4a31;
    border-color: #1f4a31;
}

.btn-success:active {
    background-color: #173a26 !important;
    border-color: #173a26 !important;
    transform: translateY(1px);
}

.btn-outline-success {
    color: var(--tdl-success);
    border-color: var(--tdl-success-soft-border);
    background-color: #fff;
}

.btn-outline-success:hover,
.btn-outline-success:focus {
    background: var(--tdl-success-soft);
    color: var(--tdl-success);
    border-color: #9ec1ad;
}

.btn-outline-warning {
    color: var(--tdl-warning);
    border-color: var(--tdl-warning-soft-border);
    background-color: #fff;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background: var(--tdl-warning-soft);
    color: var(--tdl-warning);
    border-color: #e8b97a;
}

.btn-link {
    color: var(--tdl-primary-hover);
    font-weight: 600;
}

/* Anchor-as-button: the global `a:hover { color; text-decoration: underline }` rule
   (specificity 0,1,1) would otherwise override `.btn-*` colors on hover, leaving
   "barely readable" dark text on a coloured button. These compound selectors
   (specificity 0,2,1) lock the button text colour across :link/:visited/:hover/:focus
   without using !important. */
a.btn,
a.btn:link,
a.btn:visited,
a.btn:hover,
a.btn:focus {
    text-decoration: none;
}

a.btn-primary,
a.btn-primary:link,
a.btn-primary:visited,
a.btn-primary:hover,
a.btn-primary:focus {
    color: #fff;
}

a.btn-success,
a.btn-success:link,
a.btn-success:visited,
a.btn-success:hover,
a.btn-success:focus {
    color: #fff;
}

a.btn-outline-primary,
a.btn-outline-primary:link,
a.btn-outline-primary:visited,
a.btn-outline-primary:hover,
a.btn-outline-primary:focus {
    color: var(--tdl-primary-hover);
}

a.btn-outline-secondary,
a.btn-outline-secondary:link,
a.btn-outline-secondary:visited {
    color: var(--tdl-text-secondary);
}
a.btn-outline-secondary:hover,
a.btn-outline-secondary:focus {
    color: var(--tdl-text-primary);
}

a.btn-outline-danger,
a.btn-outline-danger:link,
a.btn-outline-danger:visited,
a.btn-outline-danger:hover,
a.btn-outline-danger:focus {
    color: var(--tdl-danger);
}

a.btn-outline-warning,
a.btn-outline-warning:link,
a.btn-outline-warning:visited,
a.btn-outline-warning:hover,
a.btn-outline-warning:focus {
    color: var(--tdl-warning);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

/* tdl-btn primitives kept for backward compatibility */
.tdl-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.4rem;
    border: 1px solid transparent;
    border-radius: var(--tdl-radius-sm);
    padding: 0.5rem 0.9rem;
    color: var(--tdl-text-primary);
    background: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease;
}

.tdl-btn:hover { color: var(--tdl-text-primary); text-decoration: none; }
.tdl-btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(74, 116, 148, 0.22); }
.tdl-btn:disabled, .tdl-btn[aria-disabled="true"] { cursor: not-allowed; opacity: 0.6; box-shadow: none; }
.tdl-btn-primary { color: #fff; border-color: var(--tdl-primary); background: var(--tdl-primary); box-shadow: 0 8px 16px rgba(74, 116, 148, 0.18); }
.tdl-btn-primary:hover { color: #fff; border-color: var(--tdl-primary-hover); background: var(--tdl-primary-hover); }
.tdl-btn-secondary { color: var(--tdl-primary-hover); border-color: var(--tdl-primary-soft-border); background: #fff; }
.tdl-btn-secondary:hover { color: var(--tdl-primary-hover); border-color: var(--tdl-primary-soft-border); background: var(--tdl-primary-soft); }
.tdl-btn-danger { color: var(--tdl-danger); border-color: var(--tdl-danger-soft-border); background: #fff; }
.tdl-btn-danger:hover { color: #991b1b; border-color: #fca5a5; background: var(--tdl-danger-soft); }
.tdl-btn-ghost { color: var(--tdl-text-secondary); border-color: transparent; background: transparent; }
.tdl-btn-ghost:hover { color: var(--tdl-primary-hover); background: var(--tdl-primary-soft); }
.tdl-btn-sm { min-height: 2rem; border-radius: 0.5rem; padding: 0.35rem 0.6rem; font-size: 0.8rem; }

/* Icon-only button — always pair with title + aria-label */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.45rem;
    min-width: 2.45rem;
    height: 2.45rem;
    padding: 0;
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface);
    border: 1px solid var(--tdl-border-strong);
    color: var(--tdl-text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-icon:hover,
.btn-icon:focus {
    background: var(--tdl-surface-soft);
    border-color: var(--tdl-text-subtle);
    color: var(--tdl-text-primary);
}

.btn-icon:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(74, 116, 148, 0.22);
}

.btn-icon-sm {
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.form-label,
.settings-label {
    color: var(--tdl-text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
    display: block;
}

.form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.form-label-row .form-label {
    margin-bottom: 0;
}

.auth-inline-link {
    color: var(--tdl-primary-hover);
    font-size: 0.84rem;
    font-weight: 600;
    white-space: nowrap;
}

.auth-inline-link:hover,
.auth-inline-link:focus {
    color: var(--tdl-primary);
}

.form-control,
.form-select,
.form-check-input,
.input-validation-error,
textarea {
    border-radius: var(--tdl-radius-sm);
    border: 1px solid var(--tdl-border-strong);
    background: #fff;
    color: var(--tdl-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.form-control,
.form-select {
    min-height: 2.45rem;
    padding: 0.5rem 0.75rem;
}

.form-control-sm,
.form-select-sm {
    min-height: 2.15rem;
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--tdl-text-subtle);
}

.form-control:hover,
.form-select:hover,
textarea:hover {
    border-color: #94a3b8;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
textarea:focus {
    border-color: #7a9cb8;
    box-shadow: 0 0 0 3px rgba(74, 116, 148, 0.12);
    background-color: #fff;
}

.form-control:disabled,
.form-select:disabled,
textarea:disabled {
    background: var(--tdl-surface-muted);
    color: var(--tdl-text-muted);
    cursor: not-allowed;
}

.form-text,
.field-hint {
    color: var(--tdl-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
    margin-top: 0.35rem;
}

.form-check-input {
    border-color: var(--tdl-border-strong);
    background-color: #fff;
}

.form-check-input:checked {
    background-color: var(--tdl-primary);
    border-color: var(--tdl-primary);
}

.form-check-label {
    color: var(--tdl-text-secondary);
    font-weight: 500;
}

/* ── Reusable app switch ──────────────────────────────────────────────
   Modern pill toggle used by `Client activ` / `Produs activ` / `Serie activă`.
   Native <input type="checkbox"> visually hidden inside a <label>, so:
   - label click toggles the input
   - keyboard space/enter still toggles
   - focus ring on the track when the input has focus
*/

.app-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    min-height: 1.85rem;
    padding: 0;
    margin: 0;
}

.app-switch-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

/*
    Checkbox de selecție pentru grid-uri.

    DE CE checkbox și nu switch: un switch înseamnă „pornit/oprit", o stare persistentă a unui lucru.
    Selecția unui rând într-un tabel este altceva - alegi elemente pentru o acțiune - și are nevoie de
    a treia stare, „unele selectate", pe care un switch nu o poate exprima. Switch-ul rămâne pentru
    setări booleene reale, cum este „Client activ".

    Dimensiunea: 20px vizual, dar zona de clic urcă la 40px prin ::before. Într-un tabel dens, o țintă
    de 20px se ratează des, iar o bifă ratată înseamnă o factură transmisă sau netransmisă din greșeală.
*/
.tdl-checkbox {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid var(--tdl-border, #c9cfd6);
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
    vertical-align: middle;
}

/* Zona de clic, invisibilă, centrată pe casetă. */
.tdl-checkbox::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    transform: translate(-50%, -50%);
}

.tdl-checkbox:hover:not(:disabled) {
    border-color: var(--tdl-primary, #2563eb);
}

.tdl-checkbox:checked,
.tdl-checkbox:indeterminate {
    background: var(--tdl-primary, #2563eb);
    border-color: var(--tdl-primary, #2563eb);
}

/* Bifa, desenată din două laturi ale unui dreptunghi rotit. */
.tdl-checkbox:checked::after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* „Unele selectate": o linie, nu o bifă - altfel ar promite că totul este selectat. */
.tdl-checkbox:indeterminate::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 3px;
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
}

.tdl-checkbox:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--tdl-primary-soft, #dbeafe);
    border-color: var(--tdl-primary, #2563eb);
}

/*
    Dezactivat trebuie să arate dezactivat, nu doar palid: rândurile blocate sunt exact cele pe care
    operatorul NU are voie să le retransmită, iar tooltipul de pe input explică de ce.
*/
.tdl-checkbox:disabled {
    cursor: not-allowed;
    background: var(--tdl-surface-muted, #f1f3f5);
    border-color: var(--tdl-border, #d6dae0);
    opacity: 0.6;
}

.tdl-checkbox:disabled::before {
    display: none;
}

.app-switch-track {
    position: relative;
    display: inline-block;
    width: 2.65rem;
    height: 1.45rem;
    flex-shrink: 0;
    background: #d6cfc1;
    border: 1px solid var(--tdl-border-strong);
    border-radius: 999px;
    transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.app-switch-thumb {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 1.05rem;
    height: 1.05rem;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(43, 50, 59, 0.25);
    transform: translateY(-50%);
    transition: left 0.18s ease, background-color 0.18s ease;
}

.app-switch-input:checked ~ .app-switch-track {
    background: var(--tdl-primary);
    border-color: var(--tdl-primary);
}

.app-switch-input:checked ~ .app-switch-track .app-switch-thumb {
    left: calc(100% - 1.05rem - 2px);
}

.app-switch-input:focus-visible ~ .app-switch-track {
    box-shadow: 0 0 0 3px rgba(74, 116, 148, 0.22);
}

.app-switch:hover .app-switch-track {
    border-color: #b9b09c;
}

.app-switch:hover .app-switch-input:checked ~ .app-switch-track {
    border-color: var(--tdl-primary-hover);
}

.app-switch-label {
    color: var(--tdl-text-primary);
    font-weight: 600;
    line-height: 1.25;
}

.app-switch-input:disabled ~ .app-switch-track,
.app-switch-input:disabled ~ .app-switch-label {
    opacity: 0.55;
    cursor: not-allowed;
}

.app-switch:has(.app-switch-input:disabled) {
    cursor: not-allowed;
}

.required-star {
    color: var(--tdl-danger);
    font-weight: 700;
    margin-left: 0.1rem;
}

.field-error,
.validation-message {
    display: block;
    color: var(--tdl-danger);
    font-size: 0.82rem;
    font-weight: 500;
    margin-top: 0.3rem;
}

/* Reusable form scaffolds */
.settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1.1rem;
    margin-bottom: 1.1rem;
}

.settings-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.settings-field--wide {
    grid-column: 1 / -1;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1.1rem;
    margin-bottom: 1.1rem;
}

.form-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.form-field { min-width: 0; display: flex; flex-direction: column; }
.form-field--wide { grid-column: 1 / -1; }
.form-field--switch {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0.1rem;
}

.form-section-label {
    margin: 0.25rem 0 0.65rem 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tdl-text-muted);
}

.form-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: center;
}

.form-actions--end { justify-content: flex-end; }

/* Action groups — used for grouping related buttons (e.g., invoice detail panel) */
.action-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.action-group + .action-group {
    padding-left: 0.6rem;
    margin-left: 0.2rem;
    border-left: 1px solid var(--tdl-border);
}

.action-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.action-bar--split {
    justify-content: space-between;
}

@media (max-width: 720px) {
    .action-group + .action-group {
        padding-left: 0;
        margin-left: 0;
        border-left: 0;
    }
}

@media (max-width: 900px) {
    .settings-form,
    .form-grid {
        grid-template-columns: 1fr;
    }
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--tdl-success);
}

.invalid {
    outline: 1px solid var(--tdl-danger);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table {
    margin-bottom: 0;
    color: var(--tdl-text-primary);
}

.table thead th {
    border-bottom: 1px solid var(--tdl-border);
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
    background: #f4f0e8;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.table > :not(caption) > * > * {
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom-color: #eef2f7;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f7f3ec;
    --bs-table-bg-state: #f7f3ec;
}

.table-clean tbody tr:last-child > * { border-bottom: 0; }

.table-responsive {
    border-radius: var(--tdl-radius-md);
    overflow: auto;
}

/* ==========================================================================
   Touch and small screens
   ==========================================================================

   WCAG 2.2 Target Size (Minimum) puts the floor at 24x24 CSS px. The controls below are the ones
   a thumb actually goes for, so they get about 44px instead - a floor is a floor, not a target.

   Nothing here disables zoom, and nothing here depends on hover or on a double click: on touch,
   neither of those exists.
   ========================================================================== */

@media (max-width: 767.98px) {
    .btn,
    .form-control,
    .form-select {
        min-height: 2.75rem;
    }

    .btn-sm {
        min-height: 2.25rem;
        padding-inline: 0.75rem;
    }

    /*
     * The page itself never scrolls sideways. A grid dense enough to need it says so for itself,
     * inside its own container - which is what .table-responsive already is.
     */
    .page-body,
    .workspace {
        min-width: 0;
        max-width: 100%;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   Dense grids become cards on a phone
   ==========================================================================

   Eight or nine columns do not fit on a 400px screen. Squeezed that far the client name wrapped a
   letter at a time, the money columns lost their alignment, and the table stopped being readable
   long before it stopped being a table.

   A grid opts in with `tdl-card-grid` on the <table> and two things in the markup:

     - explicit ARIA roles (`table` / `rowgroup` / `row` / `cell`). Taking a table's display
       properties away also takes its semantics away; the roles are what put them back, so a screen
       reader still reads rows and cells rather than a pile of divs.
     - `data-label` on every <td>, holding that column's header text. The header row is gone at this
       width, so each value carries its own label and no figure is left meaning nothing.

   That is the W3C tables guidance in practice: the presentation may change on a small screen, the
   data relationships may not.
   ========================================================================== */

@media (max-width: 767.98px) {
    .tdl-card-grid,
    .tdl-card-grid > tbody,
    .tdl-card-grid > tfoot {
        display: block;
        width: 100%;
        min-width: 0;
    }

    /* The column headers live in each cell's data-label from here on. */
    .tdl-card-grid > thead {
        display: none;
    }

    .tdl-card-grid > tbody > tr,
    .tdl-card-grid > tfoot > tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.1rem;
        margin-bottom: 0.7rem;
        padding: 0.85rem 0.9rem;
        border: 1px solid var(--tdl-border);
        border-radius: var(--tdl-radius-lg, 0.75rem);
        background: var(--tdl-surface);
        box-shadow: var(--tdl-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.06));
    }

    .tdl-card-grid > tbody > tr > td,
    .tdl-card-grid > tfoot > tr > td,
    .tdl-card-grid > tfoot > tr > th {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.85rem;
        width: auto;
        padding: 0.28rem 0;
        border: 0;
        text-align: right;
        white-space: normal;
    }

    .tdl-card-grid > tbody > tr > td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: var(--tdl-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: left;
    }

    /* A cell with no header text to show keeps its value on one full-width line. */
    .tdl-card-grid > tbody > tr > td:not([data-label])::before {
        content: none;
    }

    /* Actions become a full-width tap target at the foot of the card, not a 90px cell. */
    .tdl-card-grid > tbody > tr > td.tdl-card-grid-actions {
        justify-content: stretch;
        margin-top: 0.5rem;
        padding-top: 0.6rem;
        border-top: 1px solid var(--tdl-border);
    }

    .tdl-card-grid > tbody > tr > td.tdl-card-grid-actions::before {
        content: none;
    }

    .tdl-card-grid > tbody > tr > td.tdl-card-grid-actions .btn {
        flex: 1 1 auto;
        min-height: 2.75rem;
    }

    /*
     * An action cell holding several buttons wraps them into a row of full-width targets rather
     * than a strip of 60px slivers. The inner wrapper is whatever the page already used to group
     * them, so this reaches all of them without each page inventing its own mobile rule.
     */
    .tdl-card-grid > tbody > tr > td.tdl-card-grid-actions > * {
        display: flex;
        flex: 1 1 auto;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .tdl-card-grid > tbody > tr > td.tdl-card-grid-actions > * > .btn {
        flex: 1 1 9rem;
        min-height: 2.75rem;
    }

    /* Nothing left to scroll sideways once the columns are gone. */
    .table-responsive:has(> .tdl-card-grid) {
        overflow: visible;
    }
}

/* ==========================================================================
   Grid rows: selected, focused and hovered are three different states
   ==========================================================================

   selected      the business choice. One row per single-select grid, `aria-selected="true"`, and
                 it stays put when focus goes elsewhere. Drawn as a tinted band with a left accent -
                 quiet enough to live on screen indefinitely.
   focus-visible where the keyboard is. A ring, and only for keyboard users: a mouse click moves
                 focus too, and painting a ring for it is what left the previous row looking active
                 next to the one just clicked.
   hover         a pointer passing over. Lightest of the three, and never mistaken for either.

   Drawing selection with `outline` was the original mistake: the browser's own focus indicator is
   an outline as well, so two rows in two different states came out looking identical.

   `tdl-grid-row` is the shared contract. A grid opts in by putting the class on its rows and
   keeping `aria-selected` truthful; the page stylesheet is then free to add colour, never states.
   ========================================================================== */

.tdl-grid-row {
    cursor: pointer;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.table-hover > tbody > tr.tdl-grid-row:hover > * {
    background-color: var(--tdl-surface-soft, #f7f3ec);
    --bs-table-bg-state: var(--tdl-surface-soft, #f7f3ec);
}

.tdl-grid-row[aria-selected="true"] > * {
    background-color: var(--tdl-primary-soft, #e6eff5);
    --bs-table-bg-state: var(--tdl-primary-soft, #e6eff5);
    font-weight: 700;
    color: var(--tdl-text-primary, #2d333b);
}

/*
 * The accent rides on the first cell: a <tr> in a collapsed-border table draws no box of its own.
 * It is layered over Bootstrap's own state shadow (`inset 0 0 0 9999px var(--bs-table-bg-state)`,
 * which is what actually paints a .table cell) instead of replacing it - replacing it left the first
 * cell a different colour from the rest of the selected row.
 */
.tdl-grid-row[aria-selected="true"] > *:first-child {
    box-shadow: inset 4px 0 0 var(--tdl-primary, #4a7494),
                inset 0 0 0 9999px var(--bs-table-bg-state, transparent);
}

.table-hover > tbody > tr.tdl-grid-row[aria-selected="true"]:hover > * {
    background-color: var(--tdl-primary-soft-border, #bfd1df);
    --bs-table-bg-state: var(--tdl-primary-soft-border, #bfd1df);
}

/*
 * A click focuses the row - it carries tabindex - and the browser would ring it. Suppressed here,
 * and given back to :focus-visible, which is the browser's own judgement about whether the user is
 * navigating by keyboard.
 */
.tdl-grid-row:focus {
    outline: none;
}

.tdl-grid-row:focus-visible {
    outline: 2px solid var(--tdl-primary, #4a7494);
    outline-offset: -2px;
}

/* Same three states for grids whose rows are not table rows. */
.tdl-grid-row:not(tr)[aria-selected="true"] {
    background-color: var(--tdl-primary-soft, #e6eff5);
    box-shadow: inset 4px 0 0 var(--tdl-primary, #4a7494);
}

/* ==========================================================================
   Alerts
   ========================================================================== */

.alert {
    border: 1px solid transparent;
    border-radius: var(--tdl-radius-md);
    font-weight: 500;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.alert::before {
    content: "";
    flex-shrink: 0;
    width: 0.85rem;
    height: 0.85rem;
    margin-top: 0.25rem;
    border-radius: 999px;
}

.alert-success {
    background: var(--tdl-success-soft);
    border-color: var(--tdl-success-soft-border);
    color: #14532d;
}

.alert-success::before { background: var(--tdl-success); }

.alert-warning {
    background: var(--tdl-warning-soft);
    border-color: var(--tdl-warning-soft-border);
    color: #7c2d12;
}

.alert-warning::before { background: var(--tdl-warning); }

.alert-danger {
    background: var(--tdl-danger-soft);
    border-color: var(--tdl-danger-soft-border);
    color: #7f1d1d;
}

.alert-danger::before { background: var(--tdl-danger); }

.alert-info {
    background: var(--tdl-info-soft);
    border-color: var(--tdl-info-soft-border);
    color: #155e75;
}

.alert-info::before { background: var(--tdl-info); }

/*
   The single text item of an alert.

   `.alert` is a flex row so the status dot rendered by ::before can sit beside the message. That
   makes every direct child a flex item - including the anonymous boxes around a raw text node. An
   alert written as "text <strong>SERIE 3</strong> more text" therefore became three columns with
   the number stranded in the middle one, which is exactly how the fiscal delete warning broke.

   Wrapping the message in this element gives the row one text item again, so inline markup inside
   it flows as ordinary inline content.
*/
.alert-body {
    flex: 1 1 auto;
    /* Long numbers and codes must wrap rather than push the dialog into horizontal overflow. */
    min-width: 0;
}

.alert a {
    font-weight: 700;
    color: inherit;
    text-decoration: underline;
}

.message-stack {
    display: grid;
    gap: 0.65rem;
    margin-bottom: 1.1rem;
}

/* ==========================================================================
   Cards / surfaces
   ========================================================================== */

.tdl-card {
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-xl);
    box-shadow: var(--tdl-shadow-sm);
    background: var(--tdl-surface);
}

.page-shell {
    display: grid;
    gap: 1.25rem;
}

.workflow-context-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: rgba(253, 252, 251, 0.76);
    box-shadow: var(--tdl-shadow-sm);
}

.workflow-step {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 1.9rem;
    padding: 0.28rem 0.62rem;
    border-radius: var(--tdl-radius-md);
    border: 1px solid var(--tdl-border);
    background: var(--tdl-surface);
    color: var(--tdl-text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}

.workflow-step--active {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-primary-soft);
    color: var(--tdl-primary-hover);
}

a.workflow-step,
a.workflow-step:link,
a.workflow-step:visited,
a.workflow-step:hover,
a.workflow-step:focus {
    text-decoration: none;
}

a.workflow-step:hover,
a.workflow-step:focus {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-primary-soft);
    color: var(--tdl-primary-hover);
}

.process-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-bottom: 0.75rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--tdl-border);
}

.process-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--tdl-radius-md);
    border: 1px solid var(--tdl-border);
    background: var(--tdl-surface);
    color: var(--tdl-text-secondary);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

.process-tab:hover,
.process-tab:focus {
    background: var(--tdl-surface-soft);
    color: var(--tdl-text-primary);
    text-decoration: none;
}

.process-tab--active,
.process-tab[aria-selected="true"] {
    border-color: var(--tdl-primary);
    background: var(--tdl-primary);
    color: #ffffff;
}

.process-tab--active:hover,
.process-tab[aria-selected="true"]:hover,
.process-tab[aria-selected="true"]:focus {
    background: var(--tdl-primary-hover);
    color: #ffffff;
}

.alop-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--tdl-border);
}

.alop-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.1rem;
    max-width: 100%;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface);
    color: var(--tdl-text-secondary);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.alop-tab:hover,
.alop-tab:focus {
    background: var(--tdl-surface-soft);
    color: var(--tdl-text-primary);
    text-decoration: none;
}

.alop-tab--active,
.alop-tab[aria-selected="true"] {
    border-color: var(--tdl-primary);
    background: var(--tdl-primary);
    color: #ffffff;
}

.alop-tab:disabled {
    cursor: default;
    opacity: 0.68;
}

.document-hub {
    display: grid;
    gap: 1rem;
}

.document-info-card {
    padding: 0.9rem 1rem;
    border: 1px solid var(--tdl-info-soft-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-info-soft);
    color: #155e75;
    font-weight: 650;
    line-height: 1.55;
    box-shadow: var(--tdl-shadow-sm);
}

.document-hub-tabs {
    gap: 0.55rem;
    margin-bottom: 1.1rem;
}

.document-tab-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.document-tab-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1.06rem;
    font-weight: 850;
}

.document-tab-header p {
    margin: 0;
    max-width: 60rem;
    color: var(--tdl-text-secondary);
}

.document-tab-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
    gap: 1.1rem;
    align-items: start;
}

.document-list-card,
.document-preview-card {
    min-width: 0;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface);
    box-shadow: var(--tdl-shadow-sm);
}

.document-list-card {
    padding: 0.85rem;
}

.document-preview-card {
    display: grid;
    gap: 0.85rem;
    padding: 1rem;
}

.document-preview-card h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 850;
}

.document-preview-card p {
    margin: 0.25rem 0 0;
    color: var(--tdl-text-secondary);
}

.document-preview-section {
    display: grid;
    gap: 0.65rem;
    min-width: 0;
}

.document-card {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface);
    box-shadow: var(--tdl-shadow-sm);
}

.document-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
}

.document-card-header h4 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 850;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.55rem;
}

.detail-field {
    min-width: 0;
}

.detail-label {
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.25;
}

.detail-value {
    overflow-wrap: anywhere;
    color: var(--tdl-text-primary);
    font-weight: 750;
}

.document-section-title {
    color: var(--tdl-text-muted);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.document-warning {
    margin: 0;
}

.document-empty-state {
    min-height: 10rem;
}

.document-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
}

.document-action-row .btn {
    white-space: normal;
}

.document-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.document-pagination__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.document-pagination__indicator,
.document-pagination__count {
    color: var(--tdl-text-secondary);
    font-size: 0.82rem;
    font-weight: 750;
}

.compact-filter-row {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 0.28fr);
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.compact-filter-row--single {
    grid-template-columns: minmax(16rem, 1fr);
}

.compact-filter-row--budget {
    grid-template-columns: minmax(16rem, 1fr) repeat(4, minmax(9rem, 0.18fr));
}

.compact-filter-row--documente {
    grid-template-columns: minmax(11rem, 0.24fr) minmax(18rem, 1fr);
}

.compact-filter-row > * {
    min-width: 0;
}

.document-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.65rem;
    min-width: 0;
}

.document-summary-grid--cards {
    align-items: stretch;
}

.document-summary-grid--compact {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.document-summary-card,
.document-summary-grid--cards .detail-field {
    display: grid;
    gap: 0.22rem;
    min-width: 0;
    min-height: 4.4rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
    box-shadow: var(--tdl-shadow-sm);
}

.document-summary-card--total {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-primary-soft);
}

.document-summary-card .detail-label,
.document-summary-grid--cards .detail-label {
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.25;
    text-transform: uppercase;
}

.document-summary-card .detail-value,
.document-summary-grid--cards .detail-value {
    overflow-wrap: anywhere;
    color: var(--tdl-text-primary);
    font-size: 1.05rem;
    font-weight: 850;
    line-height: 1.2;
}

.budget-selector-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.budget-selector-card {
    display: grid;
    gap: 0.15rem;
    min-height: 4.35rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
    color: var(--tdl-text);
    text-align: left;
}

.budget-selector-card:hover,
.budget-selector-card--active {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-primary-soft);
}

.budget-selector-card span,
.budget-selector-card small {
    color: var(--tdl-text-muted);
    font-size: 0.76rem;
    line-height: 1.3;
}

.budget-selector-card strong {
    overflow-wrap: anywhere;
    font-size: 0.9rem;
    line-height: 1.25;
}

.budget-context-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.budget-context-bar > div:first-child {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.budget-context-bar strong {
    overflow-wrap: anywhere;
}

.budget-context-bar small {
    color: var(--tdl-text-muted);
}

.budget-context-metrics {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.budget-context-metrics span {
    display: grid;
    gap: 0.1rem;
    min-width: 7.5rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface);
    color: var(--tdl-text-muted);
    font-size: 0.72rem;
}

.budget-context-metrics strong {
    color: var(--tdl-text);
    font-size: 0.82rem;
}

.budget-line-table {
    min-width: 1180px;
}

.budget-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.budget-credit-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.budget-credit-grid > div {
    display: grid;
    gap: 0.35rem;
    padding: 0.65rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.budget-credit-grid strong {
    font-size: 0.82rem;
}

.budget-credit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    color: var(--tdl-text-secondary);
    font-size: 0.78rem;
}

.budget-credit-row span:last-child {
    color: var(--tdl-text);
    font-weight: 750;
    text-align: right;
}

.budget-flow-preview {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.45rem;
}

.budget-flow-step {
    display: grid;
    gap: 0.1rem;
    min-height: 3.6rem;
    padding: 0.55rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface-soft);
}

.budget-flow-step span {
    color: var(--tdl-text-muted);
    font-size: 0.72rem;
}

.budget-flow-step strong {
    font-size: 1.08rem;
}

.budget-editor-shell {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
}


.budget-editor-card {
    display: grid;
    gap: 1rem;
    width: min(720px, 100%);
    max-height: calc(100vh - 2rem);
    padding: 1.15rem;
    overflow: auto;
    border: 1px solid var(--tdl-primary-soft-border, rgba(25, 79, 145, 0.18));
    border-radius: var(--tdl-radius-lg, 14px);
    background: var(--tdl-surface, #fffaf0);
    color: var(--tdl-text-primary, #1f2a44);
    box-shadow: var(--tdl-shadow-lg, 0 24px 70px rgba(15, 23, 42, 0.28));
}

.budget-editor-card--wide {
    width: min(980px, 100%);
}

.budget-editor-card .form-control,
.budget-editor-card .form-select {
    background-color: #fff;
}

.budget-editor-card .budget-editor-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tdl-border, rgba(15, 23, 42, 0.12));
    flex-wrap: wrap;
}

@media (max-width: 700px) {
    .budget-editor-card {
        max-height: calc(100vh - 1rem);
        padding: 0.9rem;
    }

    .budget-editor-card .budget-editor-actions {
        justify-content: stretch;
    }

    .budget-editor-card .budget-editor-actions .btn {
        flex: 1 1 100%;
    }
}

/*
 * The abandon confirmation always belongs on top of the modal it is protecting, so it sits above
 * every modal backdrop rather than tying with them. At 1100 it tied with .tdl-modal-backdrop and
 * lost outright to the ALOP workspace backdrop at 1200, which rendered it behind the dialog it was
 * meant to guard - present in the DOM, invisible and unclickable.
 *
 * Still below the toast host (2000), which must stay reachable above everything.
 */
.data-entry-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(19, 25, 36, 0.42);
}

.data-entry-confirm-dialog {
    width: min(460px, 100%);
    border-radius: 8px;
    background: #fffaf0;
    border: 1px solid rgba(25, 79, 145, 0.18);
    box-shadow: 0 22px 70px rgba(15, 23, 42, 0.24);
    padding: 1.25rem;
}

.data-entry-confirm-header h3 {
    margin: 0 0 0.4rem;
    font-size: 1.15rem;
    color: #1f2a44;
}

.data-entry-confirm-header p {
    margin: 0;
    color: #596071;
}

.data-entry-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.1rem;
    flex-wrap: wrap;
}

.budget-editor-panel {
    display: grid;
    gap: 1rem;
    width: min(1120px, 100%);
    max-height: min(92vh, 980px);
    padding: 1rem;
    overflow: auto;
    border: 1px solid var(--tdl-primary-soft-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface);
    box-shadow: var(--tdl-shadow-lg);
}

/* ==========================================================================================
   Documente editors: one shared shell for the five editable panels
   ==========================================================================================

   These panels are not TdlModal - they are historical RenderFragment shells - so they cannot use
   the component's stylesheet. The contract is the same one though: the panel is a flex column that
   does not scroll, the header and the action bar are fixed rows, and .budget-editor-body is the
   only scroller. Actions therefore cannot scroll out of reach, without position: sticky and
   without CSS `order` reordering anything.

   Opt-in per panel via --stacked, so the four confirmation panels keep the old behaviour.
   ========================================================================================== */

.budget-editor-panel--stacked {
    display: flex;
    flex-direction: column;
    /* The old grid spaced its children; that spacing now belongs to the body. */
    gap: 0;
    min-height: 0;
    overflow: hidden;
}

.budget-editor-panel--stacked > .budget-editor-header {
    flex: 0 0 auto;
    margin-bottom: 0.85rem;
}

.budget-editor-actionbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 -1rem 0.9rem;
    padding: 0.7rem 1rem;
    border-top: 1px solid var(--tdl-border);
    border-bottom: 1px solid var(--tdl-border);
    background: var(--tdl-surface-soft, var(--tdl-surface));
    /* Above the body so a dropdown opening in the content cannot paint over the actions. */
    position: relative;
    z-index: 2;
}

.budget-editor-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    gap: 1rem;
    align-content: start;
    /* Room for focus rings on the first and last controls inside the scroller. */
    padding: 0.15rem 0.15rem 0.35rem;
    margin: -0.15rem -0.15rem -0.35rem;
}

@media (max-width: 900px) {
    /* Wrap onto more rows rather than shrinking the buttons, but never eat the whole panel. */
    .budget-editor-actionbar {
        max-height: 40dvh;
        overflow-y: auto;
    }
}

.budget-year-selector {
    display: inline-grid;
    grid-template-columns: auto minmax(6rem, 8rem);
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--tdl-text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.budget-year-selector .form-select {
    min-width: 6.5rem;
}

.budget-editor-panel--compact {
    width: min(560px, 100%);
}

.budget-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.budget-editor-header h3 {
    margin: 0.1rem 0 0.25rem;
    font-size: 1.08rem;
    font-weight: 850;
}

.budget-editor-header p {
    margin: 0;
    max-width: 58rem;
    color: var(--tdl-text-secondary);
}

.budget-editor-form {
    display: grid;
    gap: 0.85rem;
}

[data-entry-form="true"] :is(input, select, textarea, button, [tabindex]) {
    scroll-margin-block: 5rem 6rem;
}

.budget-editor-fieldset {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.budget-editor-fieldset legend {
    float: none;
    width: auto;
    margin: 0;
    padding: 0 0.25rem;
    color: var(--tdl-text-primary);
    font-size: 0.86rem;
    font-weight: 850;
}

.budget-editor-fieldset--muted {
    border-style: dashed;
}

.budget-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.form-field {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    margin: 0;
}

.form-field > span {
    color: var(--tdl-text-secondary);
    font-size: 0.78rem;
    font-weight: 800;
}

.form-field small {
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.form-field--wide {
    grid-column: span 2;
}

.form-field--disabled .form-control,
.budget-editor-fieldset .form-control:disabled {
    background: var(--tdl-surface);
    color: var(--tdl-text-muted);
    border-style: dashed;
}

.budget-code-preview {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--tdl-primary-soft-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-primary-soft);
}

.budget-code-preview span {
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
    font-weight: 850;
    text-transform: uppercase;
}

.budget-code-preview strong {
    overflow-wrap: anywhere;
    font-size: 1rem;
}

.budget-code-preview small {
    color: var(--tdl-warning);
}

.budget-code-preview--warning {
    border-color: var(--tdl-warning-soft-border);
    background: var(--tdl-warning-soft);
}

.budget-status-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 0.8fr) repeat(2, minmax(14rem, 1fr)) minmax(12rem, 0.8fr);
    gap: 0.75rem;
    align-items: stretch;
}

.budget-toggle {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: center;
    min-height: 4rem;
    margin: 0;
    padding: 0.65rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface);
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.budget-toggle:hover {
    border-color: var(--tdl-primary-soft-border);
    box-shadow: var(--tdl-shadow-sm);
}

.budget-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.budget-toggle-control {
    position: relative;
    width: 2.8rem;
    height: 1.55rem;
    border: 2px solid var(--tdl-border-strong);
    border-radius: 999px;
    background: var(--tdl-surface-soft);
}

.budget-toggle-control::after {
    content: "";
    position: absolute;
    top: 0.16rem;
    left: 0.16rem;
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 50%;
    background: var(--tdl-text-muted);
    transition: transform 0.16s ease, background 0.16s ease;
}

.budget-toggle--on .budget-toggle-control {
    border-color: var(--tdl-success);
    background: var(--tdl-success);
}

.budget-toggle--on .budget-toggle-control::after {
    transform: translateX(1.2rem);
    background: #fff;
}

.budget-toggle--on {
    border-color: var(--tdl-success-soft-border);
    background: var(--tdl-success-soft);
}

.budget-toggle--on strong {
    color: var(--tdl-success);
}

.budget-toggle--approval-off {
    border-color: var(--tdl-warning-soft-border);
    background: var(--tdl-warning-soft);
}

.budget-toggle--approval-off .budget-toggle-control {
    border-color: var(--tdl-warning);
    background: var(--tdl-warning-soft-border);
}

.budget-toggle--approval-off strong {
    color: var(--tdl-warning);
}

.budget-toggle strong,
.budget-toggle small {
    display: block;
}

.budget-toggle strong {
    color: var(--tdl-text-primary);
    font-size: 0.88rem;
}

.budget-toggle small {
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
    line-height: 1.35;
}

.budget-toggle--readonly {
    cursor: not-allowed;
    opacity: 1;
}

.budget-editor-footer {
    position: sticky;
    bottom: -1rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    margin: 0 -1rem -1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--tdl-border);
    background: var(--tdl-surface);
}

.budget-delete-summary {
    display: grid;
    gap: 0.2rem;
    padding: 0.8rem;
    border: 1px solid var(--tdl-danger-soft-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-danger-soft);
}

.budget-delete-summary span {
    color: var(--tdl-text-muted);
    font-size: 0.75rem;
    font-weight: 850;
    text-transform: uppercase;
}

.budget-delete-summary strong {
    overflow-wrap: anywhere;
    color: var(--tdl-danger);
}

.budget-delete-summary small {
    color: var(--tdl-text-secondary);
}

.document-inner-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.document-inner-tab {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface);
    color: var(--tdl-text-secondary);
    font-size: 0.76rem;
    font-weight: 800;
}

.document-inner-tab--active {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-primary-soft);
    color: var(--tdl-primary-hover);
}

.document-preview-table {
    min-width: 460px;
    font-size: 0.86rem;
}

.document-preview-mini-list {
    display: grid;
    gap: 0.45rem;
}

.document-mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface-soft);
}

.document-mini-row span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.document-mini-row strong {
    white-space: nowrap;
}

.document-muted {
    color: var(--tdl-text-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.document-hub-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.document-hub-intro h3 {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
    font-weight: 800;
}

.document-hub-intro p {
    margin: 0;
    max-width: 58rem;
    color: var(--tdl-text-secondary);
}

.details-preview {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface-soft);
    box-shadow: var(--tdl-shadow-sm);
}

.details-preview h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 850;
}

.details-preview p {
    margin: -0.45rem 0 0;
    color: var(--tdl-text-secondary);
}

.compact-table {
    min-width: 760px;
}

.compact-table thead th {
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.compact-table tbody td {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
    vertical-align: middle;
}

.filter-grid {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(12rem, 0.35fr) auto;
    gap: 0.75rem;
    align-items: end;
    margin-bottom: 1rem;
}

.filter-grid > * {
    min-width: 0;
}

.action-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.warning-panel {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--tdl-radius-md);
    border: 1px solid var(--tdl-warning-soft-border);
    background: var(--tdl-warning-soft);
    color: #7c2d12;
    font-size: 0.9rem;
    line-height: 1.45;
}

.warning-panel + .warning-panel {
    margin-top: 0.6rem;
}

.warning-panel::before {
    content: "";
    width: 0.8rem;
    height: 0.8rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: var(--tdl-warning);
}

.warning-panel--info {
    border-color: var(--tdl-info-soft-border);
    background: var(--tdl-info-soft);
    color: #155e75;
}

.warning-panel--info::before {
    background: var(--tdl-info);
}

.warning-panel--danger {
    border-color: var(--tdl-danger-soft-border);
    background: var(--tdl-danger-soft);
    color: #7f1d1d;
}

.warning-panel--danger::before {
    background: var(--tdl-danger);
}

.warning-panel-title {
    display: block;
    margin-bottom: 0.12rem;
    color: inherit;
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.warning-panel-text {
    display: block;
    color: inherit;
    font-weight: 600;
}

.linked-documents-card {
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
    padding: 0.8rem;
}

.master-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.42fr);
    gap: 1.15rem;
    align-items: start;
}

.sticky-detail-panel {
    position: sticky;
    top: 5.2rem;
    max-height: calc(100vh - 6.4rem);
    min-height: 0;
    overflow: auto;
}

.sticky-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem -1.2rem -1.15rem;
    padding: 0.85rem 1.2rem;
    border-top: 1px solid var(--tdl-border);
    background: rgba(253, 252, 251, 0.96);
    box-shadow: 0 -8px 22px rgba(43, 50, 59, 0.08);
}

.surface-card {
    background: var(--tdl-surface);
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-xl);
    box-shadow: var(--tdl-shadow-sm);
}

.section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
    color: var(--tdl-text-primary);
}

.toolbar,
.action-row {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.toolbar {
    justify-content: space-between;
}

.money-cell,
.table .money-cell {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--tdl-text-primary);
}

.tdl-section-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--tdl-text-primary);
}

.tdl-section-subtitle {
    margin-top: 0.3rem;
    color: var(--tdl-text-muted);
}

/* Page chip — used in PageHeader Actions slot */
.page-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: var(--tdl-surface);
    border: 1px solid var(--tdl-border);
    color: var(--tdl-text-secondary);
    font-weight: 600;
    font-size: 0.88rem;
    box-shadow: var(--tdl-shadow-sm);
}


.summary-chip {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 0.45rem;
    row-gap: 0.1rem;
    min-height: 2.1rem;
    padding: 0.42rem 0.72rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: rgba(253, 252, 251, 0.82);
    box-shadow: var(--tdl-shadow-sm);
    color: var(--tdl-text-secondary);
    white-space: nowrap;
}

.summary-chip span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tdl-text-muted);
}

.summary-chip strong {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--tdl-text-primary);
    font-variant-numeric: tabular-nums;
}

.summary-chip--success {
    border-color: var(--tdl-success-soft-border);
    background: var(--tdl-success-soft);
}

.summary-chip--success strong {
    color: var(--tdl-success);
}

.summary-chip--warning {
    border-color: var(--tdl-warning-soft-border);
    background: var(--tdl-warning-soft);
}

.summary-chip--warning strong {
    color: var(--tdl-warning);
}

.summary-chip--danger {
    border-color: var(--tdl-danger-soft-border);
    background: var(--tdl-danger-soft);
}

.summary-chip--danger strong {
    color: var(--tdl-danger);
}

.summary-chip--info {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-primary-soft);
}

.summary-chip--info strong {
    color: var(--tdl-primary-hover);
}

.summary-chip--muted {
    background: var(--tdl-surface-soft);
}

@media (max-width: 640px) {
    .summary-chip {
        flex: 1 1 100%;
        grid-template-columns: 1fr auto;
    }
}

/* ==========================================================================
   Stat tiles (used on InvoiceSeries, Customers, Reports, etc.)
   ========================================================================== */

.stat-tile {
    background: var(--tdl-surface);
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    padding: 1rem 1.15rem;
    box-shadow: var(--tdl-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-chip {
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface);
    border-color: var(--tdl-border);
    color: var(--tdl-text-secondary);
}

.stat-tile:hover {
    transform: translateY(-1px);
    box-shadow: var(--tdl-shadow);
    border-color: #c7d2e0;
}

.stat-label {
    color: var(--tdl-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
}

.stat-value {
    color: var(--tdl-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.stat-value--active   { color: var(--tdl-success); }
.stat-value--inactive { color: var(--tdl-danger); }
.stat-value--preview  { color: var(--tdl-primary-hover); font-size: 1.25rem; letter-spacing: 0.02em; }

/* ==========================================================================
   Status pills / badges
   ========================================================================== */

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.6rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pill--active    { background: var(--tdl-success-soft); color: var(--tdl-success); border-color: var(--tdl-success-soft-border); }
.status-pill--success   { background: var(--tdl-success-soft); color: var(--tdl-success); border-color: var(--tdl-success-soft-border); }
.status-pill--inactive  { background: var(--tdl-surface-muted); color: var(--tdl-text-secondary); border-color: var(--tdl-border); }
.status-pill--warning   { background: var(--tdl-warning-soft); color: var(--tdl-warning); border-color: var(--tdl-warning-soft-border); }
.status-pill--danger    { background: var(--tdl-danger-soft); color: var(--tdl-danger); border-color: var(--tdl-danger-soft-border); }
.status-pill--info      { background: var(--tdl-primary-soft); color: var(--tdl-primary-hover); border-color: var(--tdl-primary-soft-border); }
.status-pill--draft     { background: #fdf0df; color: #8c5a14; border-color: #f2d8b5; }
.status-pill--issued    { background: #e6eff5; color: #2f5675; border-color: #bfd1df; }
.status-pill--partial   { background: #fff2df; color: #a35317; border-color: #f2d1a4; }
.status-pill--paid      { background: #e5f0ea; color: #275c3d; border-color: #c9dfd2; }
.status-pill--cancelled,
.status-pill--overdue   { background: #fae8e8; color: #9e2a2b; border-color: #e9c1c1; }
.status-pill--storno    { background: #ece6f3; color: #5d4375; border-color: #d8cbe4; }

/* ==========================================================================
   Empty state
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 2rem 1rem;
    color: var(--tdl-text-muted);
    text-align: center;
    border: 1px dashed var(--tdl-border-strong);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.empty-state .btn,
.empty-state .tdl-btn {
    margin-top: 0.45rem;
}

.empty-state-text {
    max-width: 42rem;
}

@media (max-width: 1200px) {
    .master-detail-layout,
    .invoice-page-grid,
    .document-tab-layout {
        grid-template-columns: 1fr;
    }

    .sticky-detail-panel {
        position: static;
        max-height: none;
        overflow: visible;
    }

    .compact-filter-row--budget {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .compact-filter-row--documente {
        grid-template-columns: minmax(10rem, 0.35fr) minmax(16rem, 1fr);
    }

    .budget-flow-preview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .budget-form-grid,
    .budget-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .document-tab-header,
    .document-hub-intro,
    .action-panel {
        align-items: stretch;
        flex-direction: column;
    }

    .document-action-row,
    .document-hub-intro .btn,
    .action-panel .btn,
    .document-pagination {
        width: 100%;
    }

    .document-action-row {
        align-items: stretch;
    }

    .document-action-row .btn {
        width: 100%;
    }

    .compact-filter-row,
    .compact-filter-row--documente,
    .filter-grid {
        grid-template-columns: 1fr;
    }

    .document-card-header,
    .document-pagination {
        align-items: stretch;
        flex-direction: column;
    }

    .document-pagination__controls,
    .document-pagination__controls .btn,
    .document-pagination .form-field {
        width: 100%;
    }

    .budget-context-bar,
    .budget-context-metrics {
        flex-direction: column;
        align-items: stretch;
    }

    .budget-preview-grid,
    .budget-credit-grid,
    .budget-flow-preview,
    .budget-form-grid,
    .budget-status-grid {
        grid-template-columns: 1fr;
    }

    .form-field--wide {
        grid-column: span 1;
    }

    .budget-editor-header,
    .budget-editor-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .process-tab,
    .alop-tab,
    .workflow-step {
        flex: 1 1 12rem;
    }
}

.empty-state::before {
    content: "";
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #c7d6ed 0%, #c7d6ed 28%, transparent 28%) center / 0.6rem 0.6rem no-repeat,
        var(--tdl-surface);
    border: 1px solid var(--tdl-border);
    margin-bottom: 0.3rem;
}

.empty-state-title {
    color: var(--tdl-text-primary);
    font-weight: 750;
}

.empty-state-text {
    color: var(--tdl-text-muted);
    font-size: 0.9rem;
}

/* When the empty state appears inside a SectionCard body, drop the dashed border noise */
.section-card-body > .empty-state:only-child {
    border: 0;
    background: transparent;
    padding: 2.5rem 1rem;
}

/* ==========================================================================
   List footer (used under tables)
   ========================================================================== */

.list-footer {
    padding-top: 0.75rem;
    font-size: 0.82rem;
    color: var(--tdl-text-muted);
    font-weight: 500;
}

/* ==========================================================================
   Auth shell (used by /autentificare and /inregistrare via EmptyLayout)
   ========================================================================== */

.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    background:
        radial-gradient(circle at top left, rgba(74, 116, 148, 0.16), transparent 34rem),
        var(--tdl-page-gradient);
}

.auth-shell--split {
    display: grid;
    grid-template-columns: minmax(22rem, 0.92fr) minmax(24rem, 0.72fr);
    gap: 1.4rem;
    align-items: stretch;
}

.auth-shell--compact {
    grid-template-columns: minmax(20rem, 0.82fr) minmax(23rem, 0.64fr);
}

.auth-shell--register {
    grid-template-columns: minmax(22rem, 0.78fr) minmax(30rem, 1fr);
    align-items: center;
}

.auth-hero-panel,
.auth-card {
    width: 100%;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-xl);
    box-shadow: var(--tdl-shadow-lg);
}

.auth-hero-panel {
    max-width: 700px;
    min-height: 34rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(43, 50, 59, 0.97), rgba(56, 90, 117, 0.92)),
        var(--tdl-sidebar-bg);
    color: #fff;
    position: relative;
}

.auth-hero-panel::after {
    content: "";
    position: absolute;
    right: -8rem;
    bottom: -8rem;
    width: 18rem;
    height: 18rem;
    border-radius: 999px;
    border: 2.5rem solid rgba(255, 255, 255, 0.06);
}

.auth-hero-panel--quiet {
    min-height: 25rem;
}

.auth-brand-line {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.auth-hero-panel .auth-brand-title {
    color: #fff;
}

.auth-hero-panel .auth-brand-sub,
.auth-hero-copy p,
.auth-hero-metrics span,
.auth-steps small {
    color: rgba(255, 255, 255, 0.72);
}

.auth-hero-copy {
    position: relative;
    z-index: 1;
    max-width: 36rem;
}

.auth-hero-copy h1 {
    margin: 0.85rem 0 0.85rem;
    color: #f8fafc;
    font-size: clamp(2rem, 4vw, 3.35rem);
    line-height: 1.03;
    letter-spacing: -0.04em;
    text-shadow: 0 0.12rem 0.35rem rgba(0, 0, 0, 0.28);
}

.auth-hero-copy p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
}

.auth-hero-metrics,
.auth-steps {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.auth-hero-metrics div,
.auth-steps div {
    padding: 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--tdl-radius-lg);
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

.auth-hero-metrics strong,
.auth-steps strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
}

.auth-hero-metrics span,
.auth-steps small {
    display: block;
    margin-top: 0.16rem;
    font-size: 0.78rem;
    line-height: 1.35;
}

.auth-steps span {
    width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 850;
}

.auth-card {
    max-width: 460px;
    background: rgba(253, 252, 251, 0.96);
    backdrop-filter: blur(10px);
    padding: 2.05rem;
}

.auth-card--floating {
    align-self: center;
}

.auth-card--wide {
    max-width: 760px;
}

.auth-card-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--tdl-border);
}

.auth-card-header--compact {
    padding-bottom: 0.95rem;
    margin-bottom: 1.05rem;
}

.auth-brand {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--tdl-primary), var(--tdl-sidebar-bg));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: 0 10px 22px rgba(74, 116, 148, 0.22);
}

.auth-brand--large {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.auth-brand-text {
    line-height: 1.15;
}

.auth-brand-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--tdl-text-primary);
}

.auth-brand-sub {
    font-size: 0.78rem;
    color: var(--tdl-text-muted);
}

.auth-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.55rem;
    border-radius: 999px;
    background: var(--tdl-primary-soft);
    color: var(--tdl-primary-hover);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.auth-eyebrow--light {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.86);
}

.auth-title {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--tdl-text-primary);
    letter-spacing: -0.02em;
}

.auth-description {
    margin: 0.5rem 0 1.35rem 0;
    color: var(--tdl-text-secondary);
    line-height: 1.55;
}

.auth-form-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
}

.auth-settings-form {
    margin-bottom: 1rem;
}

.auth-section-title {
    margin: 1rem 0 0.65rem;
    color: var(--tdl-text-primary);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-actions {
    margin-top: 0.9rem;
}

.auth-actions .btn-primary {
    flex: 1 1 auto;
}

.auth-actions--split .btn-primary {
    flex: 0 0 auto;
}

.auth-invitation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--tdl-info-soft-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-info-soft);
}

.auth-invitation-banner span:first-child {
    display: block;
    color: var(--tdl-info);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-invitation-banner strong {
    color: var(--tdl-text-primary);
}

.auth-footer {
    margin-top: 1.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--tdl-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--tdl-text-muted);
}

.auth-footer a {
    font-weight: 600;
}

.auth-status {
    margin-bottom: 1rem;
}

.auth-readonly-value {
    min-height: 2.35rem;
    display: flex;
    align-items: center;
    padding: 0.55rem 0.72rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface-soft);
    color: var(--tdl-text-primary);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.auth-help-text {
    margin-top: -0.25rem;
    margin-bottom: 0.9rem;
    color: var(--tdl-text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

.auth-footer--single {
    justify-content: center;
}

.account-status-hero,
.invitation-panel,
.create-institution-aside {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1.15rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-xl);
    background: var(--tdl-surface);
    box-shadow: var(--tdl-shadow-sm);
}

.account-status-hero--pending {
    border-color: var(--tdl-warning-soft-border);
    background: linear-gradient(135deg, var(--tdl-warning-soft), var(--tdl-surface));
}

.account-status-hero--danger {
    border-color: var(--tdl-danger-soft-border);
    background: linear-gradient(135deg, var(--tdl-danger-soft), var(--tdl-surface));
}

.account-status-icon,
.invitation-icon {
    width: 3.2rem;
    height: 3.2rem;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--tdl-primary-hover);
    font-size: 1.35rem;
    font-weight: 900;
    box-shadow: var(--tdl-shadow-sm);
}

.account-status-eyebrow,
.invitation-eyebrow,
.create-institution-eyebrow {
    display: block;
    color: var(--tdl-text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-status-hero h2,
.invitation-panel h2,
.create-institution-aside h2 {
    margin: 0.12rem 0 0.2rem;
    font-size: 1.25rem;
    font-weight: 850;
    color: var(--tdl-text-primary);
}

.account-status-hero p,
.invitation-panel p,
.create-institution-aside p {
    margin: 0;
    color: var(--tdl-text-secondary);
}

.account-status-actions {
    margin-left: auto;
    flex: 0 0 auto;
}

.account-status-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.account-status-card {
    padding: 1rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface);
    box-shadow: var(--tdl-shadow-sm);
}

.account-status-step {
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.55rem;
    border-radius: 999px;
    background: var(--tdl-primary-soft);
    color: var(--tdl-primary-hover);
    font-weight: 850;
}

.account-status-card strong,
.account-status-card span {
    display: block;
}

.account-status-card span {
    margin-top: 0.2rem;
    color: var(--tdl-text-muted);
    font-size: 0.88rem;
}

.account-status-details,
.invitation-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.account-status-details div,
.invitation-summary-grid div {
    min-width: 0;
    padding: 0.85rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface-soft);
}

.account-status-details span,
.invitation-summary-grid span {
    display: block;
    color: var(--tdl-text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.account-status-details strong,
.invitation-summary-grid strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--tdl-text-primary);
    font-weight: 780;
    overflow-wrap: anywhere;
}

.invitation-shell {
    display: grid;
    gap: 1rem;
}

.invitation-next-step {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface-soft);
}

.invitation-next-step strong {
    color: var(--tdl-text-primary);
    font-weight: 850;
}

.invitation-next-step span {
    color: var(--tdl-text-muted);
}

.create-institution-shell {
    display: grid;
    grid-template-columns: minmax(18rem, 0.42fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.create-institution-aside {
    position: sticky;
    top: 1rem;
    display: block;
    padding: 1.25rem;
    background: linear-gradient(135deg, var(--tdl-primary-soft), var(--tdl-surface));
}

.create-institution-steps {
    display: grid;
    gap: 0.7rem;
    margin-top: 1.1rem;
}

.create-institution-steps div {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 0.65rem;
    padding: 0.8rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: rgba(255, 255, 255, 0.58);
}

.create-institution-steps span {
    grid-row: span 2;
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--tdl-primary);
    color: #fff;
    font-weight: 850;
}

.create-institution-steps strong,
.create-institution-steps small {
    display: block;
}

.create-institution-steps small {
    color: var(--tdl-text-muted);
}

.create-institution-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
}

.create-institution-lookup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.65rem;
    align-items: start;
}

.create-institution-actions {
    margin-top: 1rem;
}

@media (max-width: 1100px) {
    .auth-shell--split,
    .auth-shell--compact,
    .auth-shell--register,
    .create-institution-shell {
        grid-template-columns: 1fr;
    }

    .auth-hero-panel {
        min-height: auto;
    }

    .create-institution-aside {
        position: static;
    }
}

@media (max-width: 780px) {
    .auth-shell {
        padding: 1.2rem;
    }

    .auth-card,
    .auth-hero-panel {
        padding: 1.35rem;
    }

    .auth-hero-metrics,
    .auth-steps,
    .account-status-grid,
    .account-status-details,
    .invitation-summary-grid,
    .create-institution-form {
        grid-template-columns: 1fr;
    }

    .account-status-hero,
    .invitation-panel {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .account-status-actions .btn,
    .create-institution-lookup .btn {
        width: 100%;
    }

    .create-institution-lookup {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Focus
   ========================================================================== */

:focus-visible {
    outline: 3px solid rgba(74, 116, 148, 0.28);
    outline-offset: 2px;
}

.btn:focus-visible,
.tdl-btn:focus-visible {
    outline: 0;
}

/* ==========================================================================
   Blazor error UI + loading
   ========================================================================== */

#blazor-error-ui {
    color-scheme: light only;
    background: #fef3c7;
    color: #7c2d12;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.55rem;
}

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto;
}

.loading-progress circle {
    fill: none;
    stroke: #dbe4f0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: var(--tdl-primary);
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: 600;
    color: var(--tdl-text-primary);
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Se încarcă");
}

/* Bugete workspace refinement: line-centric actions and inline details */
.budget-tab-layout {
    display: block;
}

.budget-work-card {
    width: 100%;
}

.document-action-row--primary {
    align-items: center;
}

.budget-grid-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin: 0.8rem 0 0.65rem;
    padding: 0.7rem 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.budget-grid-toolbar > div:first-child {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.budget-grid-toolbar strong {
    font-size: 0.95rem;
}

.budget-grid-toolbar small {
    color: var(--tdl-text-muted);
}

.budget-line-table-wrap {
    overflow: visible;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.budget-line-table {
    min-width: 1320px;
}

.document-work-card {
    display: grid;
    gap: 0.75rem;
}

.document-grid-toolbar {
    margin-top: 0;
}

.document-table-wrap {
    overflow: visible;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.document-table {
    min-width: 860px;
}

.df-table {
    min-width: 920px;
}

.df-lines-table {
    min-width: 720px;
}

.document-detail-card {
    display: grid;
    gap: 0.85rem;
}

.df-detail-card .document-card-header {
    align-items: flex-start;
    gap: 0.85rem;
}

.df-validation-summary {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-surface);
}

.df-filter-row .form-control,
.df-filter-row .form-select {
    width: 100%;
}

.budget-line-row td {
    vertical-align: middle;
}

.budget-inline-link {
    display: inline-flex;
    align-items: center;
    max-width: 11rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--tdl-primary);
    font: inherit;
    font-weight: 800;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    cursor: pointer;
}

.budget-inline-link:hover,
.budget-inline-link:focus-visible {
    color: var(--tdl-primary-strong);
    outline: none;
}

.row-options-menu {
    position: relative;
    display: inline-block;
    text-align: left;
}

.row-options-menu summary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.25rem;
    min-height: 2rem;
    padding: 0.25rem 0.65rem;
    border: 1px solid var(--tdl-border-strong);
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface);
    color: var(--tdl-primary);
    font-size: 0.8rem;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.row-options-menu summary::-webkit-details-marker {
    display: none;
}

.row-options-menu summary::after {
    content: "▾";
    margin-left: 0.45rem;
    color: var(--tdl-text-muted);
    font-size: 0.72rem;
}

.row-options-menu[open] summary {
    border-color: var(--tdl-primary-soft-border);
    background: var(--tdl-primary-soft);
}

.row-options-menu__panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 20;
    display: grid;
    min-width: 11rem;
    padding: 0.35rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface);
    box-shadow: var(--tdl-shadow-lg);
}

.row-options-menu__panel button {
    padding: 0.45rem 0.55rem;
    border: 0;
    border-radius: var(--tdl-radius-sm);
    background: transparent;
    color: var(--tdl-text);
    font-size: 0.82rem;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
}

.row-options-menu__panel button:hover,
.row-options-menu__panel button:focus-visible {
    background: var(--tdl-primary-soft);
    color: var(--tdl-primary-strong);
    outline: none;
}

.row-options-menu__panel .row-options-menu__danger {
    color: var(--tdl-danger);
}

.row-options-menu__panel .row-options-menu__danger:hover,
.row-options-menu__panel .row-options-menu__danger:focus-visible {
    background: var(--tdl-danger-soft);
    color: var(--tdl-danger);
}

.budget-line-detail-row > td {
    padding: 0 !important;
    border-top: 0;
    background: var(--tdl-surface-soft);
}

.budget-line-inline-panel {
    display: grid;
    gap: 0.85rem;
    margin: 0.45rem 0.6rem 0.8rem;
    padding: 0.9rem;
    border: 1px solid var(--tdl-primary-soft-border);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface);
    box-shadow: var(--tdl-shadow-sm);
}

.budget-line-inline-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem;
}

.budget-line-inline-header h4 {
    margin: 0.1rem 0 0.15rem;
    font-size: 1rem;
    font-weight: 850;
}

.budget-line-inline-header p {
    margin: 0;
    color: var(--tdl-text-secondary);
}

.budget-line-inline-actions {
    justify-content: flex-end;
}

.budget-line-inline-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 0.85rem;
}

.budget-inline-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.budget-inline-metrics span {
    display: grid;
    gap: 0.12rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-sm);
    background: var(--tdl-surface-soft);
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
}

.budget-inline-metrics strong {
    color: var(--tdl-text);
    font-size: 0.85rem;
}

.budget-flow-preview--compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .budget-grid-toolbar,
    .budget-line-inline-header {
        align-items: stretch;
        flex-direction: column;
    }

    .budget-line-inline-grid,
    .budget-inline-metrics {
        grid-template-columns: 1fr;
    }

    .budget-flow-preview--compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Budget UI polish: clearer year context, readable detail labels and masked-code inputs. */
.budget-context-bar > div:first-child strong {
    font-size: 1.05rem;
}

.budget-context-bar > div:first-child small {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}

.budget-status-grid--approval {
    grid-template-columns: minmax(17rem, 1fr) minmax(17rem, 1fr) minmax(12rem, 0.75fr) minmax(12rem, 0.75fr);
}

.budget-code-input {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.budget-preview-grid {
    gap: 0.45rem;
}

.budget-preview-grid .detail-field {
    display: grid;
    grid-template-columns: minmax(10.5rem, 0.52fr) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: start;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.budget-preview-grid .detail-field:last-child {
    border-bottom: 0;
}

.budget-preview-grid .detail-label {
    color: var(--tdl-text-muted);
    font-size: 0.73rem;
    font-weight: 850;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.budget-preview-grid .detail-label::after {
    content: ":";
}

.budget-preview-grid .detail-value {
    min-width: 0;
    color: var(--tdl-text-primary);
    font-size: 0.86rem;
    font-weight: 750;
    overflow-wrap: anywhere;
}

.budget-line-inline-panel .document-preview-section {
    padding: 0.75rem;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.budget-line-inline-panel .document-section-title {
    margin-bottom: 0.35rem;
}

@media (max-width: 1200px) {
    .budget-status-grid--approval {
        grid-template-columns: 1fr 1fr;
    }

    .budget-preview-grid .detail-field {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
}

.budget-editor-panel--wide {
    width: min(1280px, 100%);
}

.budget-info-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.budget-info-item {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.budget-info-item > span {
    color: var(--tdl-text-muted);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.budget-info-item > strong {
    color: var(--tdl-text-primary);
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

.budget-info-item > small {
    color: var(--tdl-text-secondary);
    font-size: 0.76rem;
    overflow-wrap: anywhere;
}

.budget-approval-toolbar {
    display: grid;
    grid-template-columns: minmax(18rem, 1.2fr) minmax(12rem, 0.8fr);
    gap: 0.8rem;
    align-items: stretch;
    padding: 0.85rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface-soft);
}

.budget-approval-month-field {
    align-self: stretch;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface);
}

.budget-approval-table-wrap {
    max-height: 46vh;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    background: var(--tdl-surface);
}

.budget-approval-table {
    margin-bottom: 0;
}

.budget-approval-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--tdl-surface-soft);
}

.budget-toggle--compact {
    min-height: 3.5rem;
}

.budget-toggle--table {
    display: inline-grid;
    grid-template-columns: auto 1fr;
    min-height: 2.35rem;
    padding: 0.35rem 0.45rem;
    white-space: nowrap;
}

.budget-toggle--table .budget-toggle-control {
    width: 2.35rem;
    height: 1.3rem;
}

.budget-toggle--table .budget-toggle-control::after {
    width: 0.76rem;
    height: 0.76rem;
}

.budget-toggle--table.budget-toggle--on .budget-toggle-control::after {
    transform: translateX(1.05rem);
}

@media (max-width: 900px) {
    .budget-info-list,
    .budget-approval-toolbar {
        grid-template-columns: 1fr;
    }
}

.document-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.document-form-grid .form-group {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.document-form-grid .form-group--wide {
    grid-column: 1 / -1;
}

.alop-incoming-lines {
    display: grid;
    gap: 1rem;
}

.alop-incoming-line-card {
    border: 1px solid var(--tdl-border, #e2e8f0);
    border-radius: 14px;
    background: #fff;
    padding: 1rem;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.alop-incoming-line-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.alop-incoming-line-totals {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid var(--tdl-border, #e2e8f0);
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    font-size: 0.88rem;
    color: var(--tdl-muted, #64748b);
}

.document-section-header--compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.empty-state--compact {
    padding: 1rem;
    min-height: auto;
}

@media (max-width: 768px) {
    .document-section-header--compact,
    .alop-incoming-line-card__header,
    .alop-incoming-line-totals {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Accounting invoice template selector */
.modal-backdrop-custom {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(15, 23, 42, 0.35);
}

.modal-panel-custom {
    position: fixed;
    z-index: 1050;
    top: 50%;
    left: 50%;
    width: min(820px, calc(100vw - 2rem));
    max-height: calc(100vh - 3rem);
    overflow: auto;
    transform: translate(-50%, -50%);
    padding: 1.2rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-xl);
    background: var(--tdl-surface);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
}

/* Invoice details owns its inner chrome; width comes from TdlModalSize.ExtraLarge. */
/*
 * Invoice Details is a flex column: header, tab strip and action bar are fixed rows, and only the
 * tab panel scrolls. Before this, the whole panel scrolled, so the actions at the bottom were only
 * reachable after scrolling past the entire document.
 *
 * The two-class selector deliberately outranks both .modal-panel-custom (overflow: auto) and the
 * component's own .tdl-modal--stacked, so the outcome does not depend on stylesheet bundle order.
 */
.modal-panel-custom.invoice-details-modal {
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/*
 * Dialogul SPV / ANAF, lărgit pentru gridul de transmitere.
 *
 * Regula trăiește AICI, nu în Invoices.razor.css, și acesta este motivul: panoul modalului este
 * randat de TdlModal, deci nu poartă atributul de scope al paginii. O regulă `.spv-sync-modal`
 * scrisă în CSS-ul scoped al paginii nu se aplică niciodată - iar `::deep` nu ajută, pentru că
 * <TdlModal> stă la rădăcina paginii și nu are un element ancestor cu scope de care să se agațe.
 *
 * Selectorul cu două clase depășește `.modal-panel-custom` (820px), la fel ca precedentul de
 * deasupra, deci rezultatul nu depinde de ordinea pachetelor de stiluri.
 */
/*
 * Lățimea: gridul de transmitere are unsprezece coloane, iar la 1180px ultima - „Document", cu
 * butonul de previzualizare - cădea în afara zonei vizibile, așa că butonul arăta retezat de
 * marginea dialogului. `min(...)` păstrează totuși o margine REALĂ față de viewport: 2.5rem, adică
 * 1.25rem de fiecare parte, deci dialogul nu ajunge niciodată lipit de marginea ecranului.
 *
 * La 1366x768 rezultă 1326px utili - gridul intră întreg. La 1920x1080 se oprește la 1480px, pentru
 * că un tabel întins pe toată lățimea unui ecran mare se citește mai greu, nu mai ușor.
 *
 * `dvh`, nu `vh`: pe mobil bara de adrese a browserului face `vh` să mintă, iar dialogul depășea
 * ecranul exact cu înălțimea ei.
 */
.modal-panel-custom.spv-sync-modal {
    width: min(1480px, calc(100vw - 2.5rem));
    max-height: min(92dvh, 1000px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

/*
 * A shell whose body renders into a single wrapper has to relay the column through it, or the
 * scroller below inherits no height to shrink into and the panel clips it instead.
 */
.tdl-modal--stacked > .tdl-modal-passthrough-column,
.modal-panel-custom.invoice-details-modal > .tdl-modal-passthrough-column {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

/*
 * Same column layout for the other CustomLayout editors built on .modal-panel-custom: header and
 * action bar are fixed rows, the body scrolls. The two-class selector outranks .modal-panel-custom's
 * own `overflow: auto` so the outcome does not depend on stylesheet bundle order.
 */
.modal-panel-custom.tdl-modal--stacked {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ==========================================================================================
   Scroll contract for every stacked modal
   ==========================================================================================

   One scroller per dialog, and it is the body. The panel is a bounded flex column that clips;
   header and action bar are fixed rows beside the scroller, never inside it.

   These rules are global rather than component-scoped because the elements come from three
   different places - TdlModal renders some, a CustomLayout page renders others - and a scoped
   stylesheet only ever reaches its own. A body styled from the page that renders it is a body
   that silently stops scrolling the day the markup moves.

   A panel that clips without a scrolling body is the failure this guards against: `overflow:
   hidden` still scrolls programmatically, so "jump to Încasări" kept working while the wheel,
   the scrollbar and PageDown did nothing - which is exactly how the regression stayed hidden.
   ========================================================================================== */

.tdl-modal--stacked .tdl-modal-body,
.tdl-modal--stacked .invoice-details-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* The wheel stops at the end of the body instead of carrying on into the page behind it. */
    overscroll-behavior: contain;
}

/*
 * `clip`, not `hidden`.
 *
 * A `hidden` box is still scrollable by script even though the user cannot touch it, and that is
 * the shape the bug took: the panel quietly became the scroller, "jump to Încasări" moved it
 * because scrollIntoView is allowed to, and the wheel, the scrollbar and PageDown did nothing.
 * `clip` cannot scroll at all, so if the body ever loses its own scrolling the failure is
 * immediate and obvious rather than a dialog that scrolls for one button and nothing else.
 *
 * `hidden` stays as the fallback for anything that does not know `clip`.
 */
.modal-panel-custom.invoice-details-modal.tdl-modal--stacked,
.modal-panel-custom.tdl-modal--stacked.tdl-modal--stacked {
    overflow: hidden;
    overflow: clip;
}


/*
 * The page behind a modal is not a scrolling surface while the modal is up. Written against the
 * modal panel itself, so it holds for every shell without a single line of JavaScript and cannot
 * be left switched on by a dialog that closed without cleaning up.
 */
body:has([data-tdl-modal="true"]) {
    overflow: hidden;
}

/* ==========================================================================================
   Modals on a phone
   ==========================================================================================

   Near full-screen, but never edge to edge: the small margin is what tells the user there is a
   page underneath and gives the backdrop something to be. Height is measured in dvh, because
   100vh on a phone is the address bar's optimistic guess and leaves the bottom of the dialog
   under browser chrome.

   These apply to every CustomLayout shell built on .modal-panel-custom. TdlModal's own panels
   are handled in its stylesheet, which is where the element it renders can be reached from.
   ========================================================================================== */

@media (max-width: 640px) {
    .modal-panel-custom,
    .modal-panel-custom--small {
        width: calc(100vw - 1rem);
        max-width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 0.9rem;
    }

    /*
     * Invoice Details supplies its own inner padding; the panel keeps none. Three classes because
     * TdlModal's own phone rule reaches this element too - it renders it - and a page-scoped
     * selector carries an extra attribute that outranks two plain classes.
     */
    .modal-panel-custom.invoice-details-modal.tdl-modal--stacked {
        padding: 0;
    }

    /*
     * flex-basis is measured along the main axis, and this header turns into a column on a narrow
     * screen. `flex: 1 1 22rem` then stops meaning "at least 22rem wide, wrap otherwise" and starts
     * meaning "352px TALL" - one for the title, one for the actions. That is how the dialog came to
     * be a title at the top, a status pill and a close button at the very bottom, and a screen and
     * a half of white in between, with the invoice itself squeezed into the few pixels left over.
     *
     * 22rem is wider than the whole viewport here in either direction, so auto is what it wanted.
     */
    .modal-panel-custom .modal-panel-header > div {
        flex-basis: auto;
    }

    /*
     * The action bar wraps onto as many rows as it needs and each action gets a real target,
     * rather than shrinking every button until the labels are unreadable. Capped, so a long bar
     * can never take the whole dialog and leave the body with nothing to scroll in.
     */
    .modal-panel-custom .tdl-modal-actionbar,
    .modal-panel-custom .invoice-details-actionbar {
        max-height: 45dvh;
        overflow-y: auto;
    }

    .modal-panel-custom .tdl-modal-actionbar .btn,
    .modal-panel-custom .invoice-details-actionbar .btn,
    .modal-panel-custom .invoice-details-actionbar a.btn {
        flex: 1 1 9rem;
        min-height: 2.75rem;
    }
}

/*
 * ALOP DF workspace panel.
 *
 * Global rather than page/component-scoped: TdlModal renders this element, so a rule in
 * AlopDfWorkspaceModal.razor.css would compile to `.alop-workspace[b-<that component>]` and never
 * match it. Without these the panel had no height limit, grew to fit the whole document, and the
 * backdrop scrolled the dialog - which is what pushed the primary action off-screen.
 *
 * The height is bounded by the viewport rather than by a percentage of the backdrop, so it holds
 * regardless of how the backdrop is positioned.
 */
/* The global topbar (institution selector) stays reachable above the workspace. */
.alop-workspace-backdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 64px;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.55);
    padding: 1rem;
}

.alop-workspace {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(95vw, 1680px);
    height: min(97dvh, 1040px);
    min-height: 0;
    background: #fdfcfb;
    border-radius: 0.75rem;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.35);
    overflow: hidden;
    outline: none;
}

@media (max-width: 1024px) {
    .alop-workspace-backdrop {
        padding: 0;
    }

    .alop-workspace {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
    }
}

.alop-workspace:focus-visible {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.55), 0 30px 80px rgba(15, 23, 42, 0.35);
}

/*
 * ALOP "Adăugare document" panel.
 *
 * Global rather than page-scoped on purpose: TdlModal renders this element, so it carries the
 * component's scope and a rule in AlopDocuments.razor.css would never match it. Without a real
 * max-height the panel grew past the viewport and the backdrop scrolled the whole dialog - taking
 * the action bar with it.
 */
.alop-modal {
    width: min(1120px, 100%);
    max-height: calc(100dvh - 4rem);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.24);
}

.alop-modal > .alop-modal-header,
.alop-modal > .tdl-modal-actionbar {
    flex: 0 0 auto;
}

.alop-modal > .tdl-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.alop-modal-shell.tdl-modal--stacked > .alop-modal-card {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
}

.alop-modal-shell.tdl-modal--stacked {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/*
 * The shared action bar for these shells. The component's own .tdl-modal-actionbar rule only
 * reaches markup the component renders; here the page supplies it, so the padding/border live with
 * the shells that use them.
 */
.modal-panel-custom.tdl-modal--stacked > .tdl-modal-passthrough > .tdl-modal-actionbar,
.modal-panel-custom.tdl-modal--stacked > .tdl-modal-actionbar,
.alop-modal-shell.tdl-modal--stacked > .alop-modal-card > .tdl-modal-actionbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--tdl-border);
    position: relative;
    z-index: 2;
}

.modal-panel-custom.tdl-modal--stacked .tdl-modal-body,
.alop-modal-shell.tdl-modal--stacked .tdl-modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* Room for focus rings on the first and last controls inside the scroller. */
    padding: 0.15rem 0.15rem 0.35rem;
    margin: -0.15rem -0.15rem -0.35rem;
}

.modal-panel-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.modal-panel-header > div {
    min-width: 0;
    flex: 1 1 22rem;
}

.modal-panel-title {
    font-size: 1.12rem;
    font-weight: 850;
    color: var(--tdl-text-primary);
}

.modal-panel-subtitle {
    margin-top: 0.25rem;
    color: var(--tdl-text-secondary);
    font-size: 0.9rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--tdl-border);
}

.settings-field--full {
    grid-column: 1 / -1;
}

.invoice-template-settings-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-lg);
    background: rgba(255, 255, 255, 0.65);
}

.invoice-template-settings-summary div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.invoice-template-settings-summary strong,
.invoice-template-picker-section h4 {
    color: var(--tdl-text-primary);
    font-size: 0.86rem;
}

.invoice-template-settings-summary span,
.invoice-template-card-description {
    color: var(--tdl-text-secondary);
    font-size: 0.84rem;
    overflow-wrap: anywhere;
}

.invoice-template-modal {
    width: min(980px, calc(100vw - 2rem));
}

.invoice-template-same-check {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.85rem 0.95rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(25, 79, 145, 0.16);
    border-radius: var(--tdl-radius-lg);
    background: #eff8ff;
}

.invoice-template-same-check .form-check-input {
    flex: 0 0 auto;
}

.invoice-template-same-check .form-check-label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.invoice-template-picker-section + .invoice-template-picker-section {
    margin-top: 1rem;
}

.invoice-template-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: 0.85rem;
}

.invoice-template-card {
    display: grid;
    gap: 0.45rem;
    text-align: left;
    padding: 0.85rem;
    min-width: 0;
    border: 2px solid var(--tdl-border-strong);
    border-radius: var(--tdl-radius-lg);
    background: var(--tdl-surface);
    color: var(--tdl-text-primary);
    cursor: pointer;
}

.invoice-template-card:hover,
.invoice-template-card--selected {
    border-color: var(--tdl-primary);
}

.invoice-template-card--selected {
    background: var(--tdl-primary-soft);
    box-shadow: 0 0 0 3px var(--tdl-primary-soft-border);
}

.invoice-template-card:focus-visible {
    outline: 3px solid var(--tdl-primary-active);
    outline-offset: 3px;
}

.invoice-template-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.invoice-template-card-title {
    font-weight: 800;
}

.invoice-template-selected-badge,
.invoice-template-unselected-badge {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 0.16rem 0.48rem;
    font-size: 0.72rem;
    font-weight: 800;
}

.invoice-template-selected-badge {
    color: var(--tdl-primary-active);
    background: var(--tdl-primary-soft);
    border: 1px solid var(--tdl-primary-soft-border);
}

.invoice-template-unselected-badge {
    color: var(--tdl-text-secondary);
    background: var(--tdl-surface-soft);
    border: 1px solid var(--tdl-border);
}

.invoice-template-preview {
    display: grid;
    gap: 0.25rem;
    min-height: 120px;
    padding: 0.65rem;
    border-radius: 0.65rem;
    background: #f8fafc;
    border: 1px solid #dbe3ec;
}

.invoice-template-preview-title {
    justify-self: end;
    font-weight: 900;
    letter-spacing: 0.08em;
}

.invoice-template-preview-line,
.invoice-template-preview-table,
.invoice-template-preview-total {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: #cbd5e1;
}

.invoice-template-preview-line--wide {
    width: 70%;
}

.invoice-template-preview-line {
    width: 45%;
}

.invoice-template-preview-table {
    width: 100%;
    height: 32px;
    border-radius: 0.3rem;
    background: linear-gradient(180deg, #e9edf3 0 45%, #fff 45% 100%);
}

.invoice-template-preview-total {
    justify-self: end;
    width: 45%;
    height: 16px;
    background: #1f2a44;
}

.invoice-template-preview--compact {
    gap: 0.16rem;
    min-height: 92px;
}

.invoice-template-preview--compact .invoice-template-preview-table {
    height: 22px;
}

@media (min-width: 768px) and (max-width: 1199px) {
    .invoice-template-settings-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .invoice-template-modal {
        width: min(860px, calc(100vw - 2rem));
    }
}

@media (max-width: 767px) {
    .invoice-template-settings-summary,
    .invoice-template-card-grid {
        grid-template-columns: 1fr;
    }

    .invoice-template-modal {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
        padding: 1rem;
        overflow-x: hidden;
    }

    .invoice-template-card,
    .invoice-template-modal .modal-actions .btn {
        width: 100%;
    }

    .invoice-template-modal .modal-actions {
        align-items: stretch;
    }
}

/* Sort reset button */
.sort-reset-btn {
    font-size: 0.75rem;
    color: var(--tdl-text-muted);
    background: none;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-sm);
    padding: 0.2rem 0.55rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
    line-height: 1.4;
}

.sort-reset-btn:hover {
    color: var(--tdl-text-secondary);
    border-color: var(--tdl-border-strong);
}

/* ------------------------------------------------------------------------------------------
   Selected invoice row
   Single click selects; double click opens the details. The selection has to read as "this is
   the current row" without turning every cell bold, which is why it leans on a soft background
   plus a left accent rather than on font weight.
   ------------------------------------------------------------------------------------------ */
.invoice-row {
    cursor: pointer;
}

.invoice-row--selected > td {
    background-color: var(--tdl-primary-soft);
}

/* The accent lives on the first cell so it reads as a bar down the left edge of the row without
   needing a pseudo-element on the <tr>, which Safari positions unreliably inside tables. */
.invoice-row--selected > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--tdl-primary);
}

/* Only the identifying column gains weight - enough to locate the row, not enough to shout. */
.invoice-row--selected .invoice-number-cell {
    font-weight: 600;
}

.invoice-row:focus-visible {
    outline: 2px solid var(--tdl-primary-active);
    outline-offset: -2px;
}

/* ------------------------------------------------------------------------------------------
   Temporary section highlight, driven by js/tdl-scroll.js
   The class is removed after ~1.6s, so the section returns to its normal appearance.
   ------------------------------------------------------------------------------------------ */
.tdl-section-highlight {
    animation: tdl-section-highlight-fade 1.6s ease-out 1;
    border-radius: 8px;
}

@keyframes tdl-section-highlight-fade {
    0% {
        background-color: var(--tdl-primary-soft);
        box-shadow: 0 0 0 3px var(--tdl-primary-soft-border);
    }
    70% {
        background-color: var(--tdl-primary-soft);
        box-shadow: 0 0 0 3px var(--tdl-primary-soft-border);
    }
    100% {
        background-color: transparent;
        box-shadow: 0 0 0 3px transparent;
    }
}

@media (prefers-reduced-motion: reduce) {
    /* No fade, but the section still has to be findable: hold a static tint for the same window. */
    .tdl-section-highlight {
        animation: none;
        background-color: var(--tdl-primary-soft);
        box-shadow: 0 0 0 3px var(--tdl-primary-soft-border);
    }
}

/* =============================================================================================
   Invoice editor workspace - the one rule that has to live globally.

   EditForm is a component, so the <form> it renders carries no page scope attribute. A scoped
   selector in Invoices.razor.css therefore cannot match it at any specificity, which is exactly
   what defeated two earlier attempts at this layout. The class is the contract; it is styled here,
   where selectors are unscoped, and nowhere else.

   Everything above the form is handled by SectionCard.FillHeight; everything below it by
   Invoices.razor.css, which owns that markup.
   ============================================================================================= */
@media (min-width: 901px) {
    .invoice-editor-form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* ==========================================================================
   Mediu RO e-Factura
   --------------------------------------------------------------------------
   Insigna care spune în ce mediu ANAF lucrează o instituție sau în ce mediu a
   fost transmis un document. Este globală, nu scoped, fiindcă aceeași insignă
   apare în lista de instituții, în administrarea instituției și în coloana SPV
   din lista de facturi; trei definiții scoped ar diverge.
   ========================================================================== */

.efactura-env {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1.2;
    white-space: nowrap;
}

.efactura-env--live     { background: var(--tdl-success-soft); color: var(--tdl-success); border-color: var(--tdl-success-soft-border); }
.efactura-env--test     { background: var(--tdl-warning-soft); color: var(--tdl-warning); border-color: var(--tdl-warning-soft-border); }
.efactura-env--disabled { background: var(--tdl-surface-muted); color: var(--tdl-text-secondary); border-color: var(--tdl-border); }
.efactura-env--unknown  { background: var(--tdl-surface-muted); color: var(--tdl-text-secondary); border-color: var(--tdl-border); }

/* Banda permanentă afișată cât timp instituția curentă nu este în producție. */
.efactura-env-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm, 0.5rem);
    background: var(--tdl-warning-soft);
    color: var(--tdl-warning);
    border: 1px solid var(--tdl-warning-soft-border);
    font-weight: 600;
    font-size: 0.82rem;
}

/* ==========================================================================
   Data grids that are not tables
   ==========================================================================

   Some grids in the application are CSS-grid rows of <div>s rather than <table> rows: the invoice
   line editor and the recurrence model editor both are, because their cells hold controls and a
   table would fight the layout.

   The cost of that choice was that they inherited none of the table styling, so the invoice line
   list looked nothing like the invoice list right above it - no header band, heavier separators,
   different hover, numbers not aligned. That is the complaint this contract answers.

   A grid opts in with `tdl-data-grid` on the container and the three element classes on its rows and
   cells. What stays in the page stylesheet is `grid-template-columns` and nothing else: the columns
   really are specific to each grid, the LOOK is not.

       <div class="tdl-data-grid">
         <div class="tdl-data-grid__row tdl-data-grid__header"> ... </div>
         <div class="tdl-data-grid__row" aria-selected="true"> ... </div>
       </div>

   Colours, spacing and states are taken from the same tokens `.table` and `.tdl-grid-row` use, so
   the two families cannot drift apart.
   ========================================================================== */

.tdl-data-grid {
    display: grid;
    border: 1px solid var(--tdl-border);
    border-radius: var(--tdl-radius-md);
    overflow: hidden;
    background: var(--tdl-surface);
}

.tdl-data-grid__row {
    display: grid;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid #eef2f7;
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.tdl-data-grid__row:last-child {
    border-bottom: 0;
}

/* The same band the table headers use, so the two read as one family. */
.tdl-data-grid__header {
    background: #f4f0e8;
    border-bottom: 1px solid var(--tdl-border);
    color: var(--tdl-text-muted);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    white-space: nowrap;
}

.tdl-data-grid__row--selectable {
    cursor: pointer;
}

.tdl-data-grid__row--selectable:hover {
    background-color: var(--tdl-surface-soft, #f7f3ec);
}

.tdl-data-grid__row[aria-selected="true"],
.tdl-data-grid__row--active {
    background-color: var(--tdl-primary-soft, #e6eff5);
    box-shadow: inset 4px 0 0 var(--tdl-primary, #4a7494);
}

.tdl-data-grid__row:focus {
    outline: none;
}

.tdl-data-grid__row:focus-visible {
    outline: 2px solid var(--tdl-primary, #4a7494);
    outline-offset: -2px;
}

.tdl-data-grid__cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--tdl-text-primary);
    overflow-wrap: anywhere;
}

/* Numbers line up on the right, in every grid, without each page deciding again. */
.tdl-data-grid__cell--num {
    align-items: flex-end;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tdl-data-grid__cell--actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.tdl-data-grid__cell--index {
    align-items: center;
    font-weight: 700;
    color: var(--tdl-text-secondary);
}

/* ==========================================================================
   Column-separated modifier

   The base grid separates rows and leaves the columns to alignment alone. That is enough for a list
   of three or four wide fields; it is not enough for an invoice line, where eight narrow values sit
   side by side and the eye has nothing to tell "Cant." from "Preț" from "Total" but the gap between
   them. Values ran together and the header band did not read as a header.

   This is a modifier, not a second grid: `grid-template-columns` still comes from the page, every
   state still comes from the same tokens, and a grid that does not opt in is untouched.

       <div class="tdl-data-grid tdl-data-grid--column-separated"> ... </div>

   `.tdl-table--column-separated` gives a real <table> the identical treatment, for the places where
   the markup is a table rather than a div grid. The two selectors exist because the DOM differs; the
   look does not, because both read the same five variables.
   ========================================================================== */

.tdl-data-grid--column-separated .tdl-data-grid__header {
    background: var(--tdl-grid-header-bg);
    color: var(--tdl-grid-header-text);
    border-bottom: 1px solid var(--tdl-border-strong);
}

.tdl-data-grid--column-separated .tdl-data-grid__row {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--tdl-grid-separator);
}

/*
   The rule lives on the cell, not the row, so it is drawn between every pair of columns and stops at
   the last one without the page having to know how many columns it has.
*/
/*
   The horizontal padding is deliberately smaller than the row gap it replaces. Separation now comes
   from the rule, not from whitespace, so spending the same number of pixels on both would take room
   away from the columns for no gain - and this grid's columns are already on a tight budget at 1366.
*/
.tdl-data-grid--column-separated .tdl-data-grid__cell {
    padding: 0.5rem 0.45rem;
    border-right: 1px solid var(--tdl-grid-separator);
    justify-content: center;
}

.tdl-data-grid--column-separated .tdl-data-grid__cell:last-child {
    border-right: 0;
}

.tdl-data-grid--column-separated .tdl-data-grid__row--selectable:hover {
    background-color: var(--tdl-grid-row-hover);
}

.tdl-data-grid--column-separated .tdl-data-grid__row[aria-selected="true"],
.tdl-data-grid--column-separated .tdl-data-grid__row--active {
    background-color: var(--tdl-grid-row-selected);
}

/* Real tables get the same grid, addressed the way a table is addressed. */
.tdl-table--column-separated {
    border-collapse: collapse;
    width: 100%;
}

/*
   text-align is stated rather than left to the browser: a bare <th> defaults to centred, so a header
   sat over a left-aligned column of descriptions and read as belonging to neither. The two utilities
   below override it for the columns that are not text.
*/
.tdl-table--column-separated > thead > tr > th {
    background: var(--tdl-grid-header-bg);
    color: var(--tdl-grid-header-text);
    font-weight: 700;
    text-align: left;
    border: 1px solid var(--tdl-grid-separator);
    border-bottom-color: var(--tdl-border-strong);
    vertical-align: middle;
}

.tdl-table--column-separated > tbody > tr > td {
    border: 1px solid var(--tdl-grid-separator);
    vertical-align: middle;
}

.tdl-table--column-separated > tbody > tr:hover > td {
    background-color: var(--tdl-grid-row-hover);
}

.tdl-table--column-separated > tbody > tr[aria-selected="true"] > td {
    background-color: var(--tdl-grid-row-selected);
}

/* Numbers line up on the right here too, without each page deciding again. */
.tdl-table--column-separated .tdl-col--num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tdl-table--column-separated .tdl-col--center {
    text-align: center;
}

.tdl-data-grid--scrollable {
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    overflow-x: auto;
}

.tdl-data-grid--scrollable > .tdl-data-grid__row {
    min-width: 60rem;
}

.tdl-data-grid--scrollable .tdl-data-grid__cell--num > strong,
.tdl-data-grid--scrollable .tdl-data-grid__cell--num > span:first-child {
    white-space: nowrap;
    overflow-wrap: normal;
}

/*
   Below the width the columns need, the row stops being a row and becomes a card - the same
   treatment `.tdl-card-grid` gives a table on a phone, so the two behave alike there too.
*/
@media (max-width: 767.98px) {
    /*
       A card has no columns, so the vertical rules would draw a grid over a stack. The horizontal
       separation between records is what matters at this width, and it stays.
    */
    .tdl-data-grid--column-separated:not(.tdl-data-grid--scrollable) .tdl-data-grid__row {
        padding: 0.75rem 0.7rem;
    }

    .tdl-data-grid--column-separated:not(.tdl-data-grid--scrollable) .tdl-data-grid__cell {
        border-right: 0;
        padding: 0;
    }

    .tdl-data-grid:not(.tdl-data-grid--scrollable) .tdl-data-grid__header {
        display: none;
    }

    .tdl-data-grid:not(.tdl-data-grid--scrollable) .tdl-data-grid__row {
        grid-template-columns: 1fr 1fr !important;
        row-gap: 0.35rem;
        padding: 0.75rem 0.7rem;
    }

    .tdl-data-grid:not(.tdl-data-grid--scrollable) .tdl-data-grid__cell--num {
        align-items: flex-start;
        text-align: left;
    }

    .tdl-data-grid:not(.tdl-data-grid--scrollable) .tdl-data-grid__cell--wide,
    .tdl-data-grid:not(.tdl-data-grid--scrollable) .tdl-data-grid__cell--actions {
        grid-column: 1 / -1;
    }

    .tdl-data-grid:not(.tdl-data-grid--scrollable) .tdl-data-grid__cell--actions {
        justify-content: flex-start;
    }
}

/* =================================================================================================
   Checkbox cu bifă reală (.app-check)
   =================================================================================================

   Perechea lui .app-switch, pentru cazurile unde metafora de întrerupător nu se potrivește: un rând
   dintr-o listă de opțiuni, sau o celulă dintr-o matrice de permisiuni.

   Starea se citește din DOUĂ semnale independente - forma bifei și culoarea de fond - ca să rămână
   lizibilă alb-negru și pentru cine nu distinge culorile. Pătratul albastru fără bifă din matricea
   de roluri era exact cazul în care un singur semnal nu ajunge.

   Input-ul nativ rămâne în DOM, ascuns vizual: click pe etichetă, Space, focus și anunțul pentru
   cititorul de ecran vin de la browser, nu sunt reimplementate.
*/

.app-check {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    min-height: 1.85rem;
    padding: 0;
    margin: 0;
}

.app-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

.app-check-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    background: #ffffff;
    border: 2px solid var(--tdl-border-strong, #a9c8e6);
    border-radius: 0.28rem;
    transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.app-check-box svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;

    /* Bifa există mereu în DOM și doar se dezvăluie, ca tranziția să nu remonteze nimic. */
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.app-check-input:checked ~ .app-check-box {
    background: var(--tdl-primary, #1677d2);
    border-color: var(--tdl-primary, #1677d2);
}

.app-check-input:checked ~ .app-check-box svg {
    opacity: 1;
    transform: scale(1);
}

.app-check-input:focus-visible ~ .app-check-box {
    box-shadow: 0 0 0 3px rgba(74, 116, 148, 0.22);
}

.app-check:hover .app-check-input:not(:disabled) ~ .app-check-box {
    border-color: var(--tdl-primary-hover, #1160ad);
}

.app-check-label {
    color: var(--tdl-text-primary);
    font-weight: 600;
    line-height: 1.25;
}

/*
   Dezactivat trebuie să rămână CITIBIL, nu doar stins: într-o matrice de permisiuni diferența
   dintre „nu ai voie să bifezi” și „nu este bifat” este chiar informația căutată. De aceea bifa
   își păstrează forma și primește un fond gri propriu, în loc să fie doar transparentizată.
*/
.app-check-input:disabled ~ .app-check-box {
    background: var(--tdl-surface-muted, #eef2f6);
    border-color: var(--tdl-border, #cfe0f2);
}

.app-check-input:disabled:checked ~ .app-check-box {
    background: #9db4c8;
    border-color: #9db4c8;
}

.app-check-input:disabled ~ .app-check-label {
    opacity: 0.6;
}

.app-check:has(.app-check-input:disabled) {
    cursor: not-allowed;
}

/* Varianta pentru griduri dense: aceeași formă, mai puțin spațiu în jur. */
.app-check--compact {
    gap: 0;
    min-height: 0;
}

.app-check--compact .app-check-box {
    width: 1.05rem;
    height: 1.05rem;
}

/* Textul „Da/Nu” de lângă o setare binară, când valoarea în sine este răspunsul. */
.app-boolean-state {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--tdl-text-muted, #64748b);
}

.app-switch-input:checked ~ .app-boolean-state,
.app-check-input:checked ~ .app-boolean-state {
    color: var(--tdl-primary, #1677d2);
}

.tdl-field-invalid {
    border-color: var(--tdl-danger, #9e2a2b) !important;
    box-shadow: 0 0 0 0.2rem rgba(158, 42, 43, 0.18) !important;
}