/* =====================================================================
   ContaRO — sistem de design (light, profesional, dens)
   Reproiectat pentru contabili: shell cu meniuri grupate, tabele dense,
   formulare eficiente. Temă deschisă, accent albastru corporativ.
   ===================================================================== */

@layer reset, base, components, utilities;

/* ---------------------------------------------------------------------
   Tokenuri de design
   --------------------------------------------------------------------- */
:root {
    color-scheme: light;

    /* Spațiere (bază 4px) */
    --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
    --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
    --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
    --space-16: 4rem;

    /* Rază de colț (mai mici = aspect tehnic) */
    --radius-sm: 4px;  --radius-md: 6px;  --radius-lg: 9px;
    --radius-xl: 14px; --radius-full: 9999px; --radius-pill: 9999px;

    /* Tipografie (densă) */
    --text-xs: 0.75rem;   --text-sm: 0.8125rem;  --text-base: 0.875rem;
    --text-md: 1rem;      --text-lg: 1.125rem;   --text-xl: 1.375rem;
    --text-2xl: 1.75rem;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
                 system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', ui-monospace, monospace;

    /* Tranziții */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 110ms; --dur-normal: 180ms; --dur-slow: 300ms;

    /* Umbre */
    --shadow-xs: 0 1px 2px oklch(45% 0.03 256 / 0.08);
    --shadow-sm: 0 1px 3px oklch(45% 0.03 256 / 0.10);
    --shadow-md: 0 6px 18px oklch(45% 0.03 256 / 0.12);
    --shadow-lg: 0 14px 40px oklch(40% 0.03 256 / 0.18);

    /* Culoare de brand (albastru corporativ) */
    --color-primary: oklch(52% 0.2 256);
    --color-primary-strong: oklch(45% 0.2 256);
    --color-primary-soft: oklch(95.5% 0.03 256);
    --shadow-primary: 0 2px 8px oklch(52% 0.2 256 / 0.28);

    /* Suprafețe */
    --surface-app: oklch(97.2% 0.005 256);
    --surface-card: oklch(100% 0 0);
    --surface-muted: oklch(96% 0.006 256);
    --surface-subtle: oklch(97.6% 0.005 256);

    /* Borduri */
    --border-default: oklch(91% 0.007 256);
    --border-strong: oklch(85% 0.01 256);

    /* Text */
    --text-primary: oklch(27% 0.02 256);
    --text-secondary: oklch(45% 0.018 256);
    --text-muted: oklch(58% 0.013 256);

    /* Stări semantice (text / fundal) */
    --success: oklch(52% 0.14 155);   --success-bg: oklch(95.5% 0.035 155);
    --danger: oklch(54% 0.21 25);     --danger-bg: oklch(95.5% 0.035 25);
    --warning: oklch(58% 0.13 70);    --warning-bg: oklch(95.5% 0.05 75);
    --info: oklch(54% 0.13 240);      --info-bg: oklch(95.5% 0.035 240);

    /* Înălțimi shell */
    --header-h: 56px;
}

/* ---------------------------------------------------------------------
   Reset
   --------------------------------------------------------------------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { -webkit-text-size-adjust: 100%; }

    body {
        min-height: 100dvh;
        font-family: var(--font-sans);
        font-size: var(--text-base);
        line-height: 1.55;
        color: var(--text-primary);
        background: oklch(0.52 0.12 246.3 / 0.16);
        -webkit-font-smoothing: antialiased;
        display: flex;
        flex-direction: column;
    }

    h1, h2, h3, h4 { line-height: 1.25; font-weight: 650; }
    p { text-wrap: pretty; }

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

    button, input, select, textarea { font: inherit; color: inherit; }
    button { cursor: pointer; }

    img, svg { display: block; max-width: 100%; }

    :focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    [x-cloak] { display: none !important; }
}

/* ---------------------------------------------------------------------
   Bază
   --------------------------------------------------------------------- */
@layer base {
    .skip-link {
        position: absolute;
        left: -999px;
        top: var(--space-2);
        z-index: 100;
        padding: var(--space-2) var(--space-4);
        background: var(--color-primary);
        color: #fff;
        border-radius: var(--radius-md);
    }
    .skip-link:focus { left: var(--space-2); }
}

/* ---------------------------------------------------------------------
   Componente
   --------------------------------------------------------------------- */
@layer components {

    /* ===== Antet / shell ===== */
    .app-header {
        position: sticky;
        top: 0;
        z-index: 30;
        background: var(--surface-card);
        border-bottom: 1px solid var(--border-default);
        box-shadow: var(--shadow-xs);
    }
    .app-header__inner {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        min-height: var(--header-h);
        width: min(1320px, 100% - 2 * var(--space-5));
        margin-inline: auto;
    }
    .app-footer__inner,
    .app-main {
        width: min(1320px, 100% - 2 * var(--space-5));
        margin-inline: auto;
    }

    .brand {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        font-weight: 700;
        color: var(--text-primary);
        flex-shrink: 0;
    }
    .brand:hover { text-decoration: none; }
    .brand__mark {
        display: grid;
        place-items: center;
        width: 30px; height: 30px;
        border-radius: var(--radius-md);
        background: linear-gradient(135deg, var(--color-primary), var(--color-primary-strong));
        color: #fff;
        font-size: var(--text-md);
        font-weight: 800;
        box-shadow: var(--shadow-primary);
    }
    .brand__name { font-size: var(--text-md); letter-spacing: -0.01em; }

    .app-nav { flex: 1; min-width: 0; }
    .app-nav__hint { color: var(--text-muted); font-size: var(--text-sm); }
    @media (width < 640px) { .app-nav__hint { display: none; } }

    /* ===== Bara de meniuri (top nav cu dropdown-uri) ===== */
    .menubar {
        display: flex;
        align-items: center;
        gap: 2px;
        list-style: none;
    }
    .menubar__spacer { margin-left: auto; }
    .menu-item { position: relative; }

    .menu-link,
    .menu-trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2) var(--space-3);
        border: 0;
        background: none;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        font-size: var(--text-sm);
        font-weight: 550;
        white-space: nowrap;
        transition: background var(--dur-fast) var(--ease-out),
                    color var(--dur-fast) var(--ease-out);
    }
    .menu-link:hover,
    .menu-trigger:hover {
        background: var(--surface-muted);
        color: var(--text-primary);
        text-decoration: none;
    }
    .menu-link.is-active {
        color: var(--color-primary-strong);
        background: var(--color-primary-soft);
    }
    .menu-trigger[aria-expanded="true"] {
        background: var(--surface-muted);
        color: var(--color-primary-strong);
    }
    .menu-caret { font-size: 0.6em; opacity: 0.7; }
    /* Badge contor pe un element de meniu (ex. viramente de confirmat) */
    .menu-badge {
        display: inline-flex; align-items: center; justify-content: center;
        min-width: 18px; height: 18px; padding: 0 5px;
        border-radius: 999px;
        background: var(--warning); color: #fff;
        font-size: 11px; font-weight: 700; line-height: 1;
    }

    .dropdown {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        min-width: 224px;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: var(--space-1);
        z-index: 40;
        display: flex;
        flex-direction: column;
    }
    .dropdown--right { left: auto; right: 0; }
    .dropdown__label {
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        padding: var(--space-2) var(--space-3) var(--space-1);
    }
    .dropdown__item,
    .dropdown__item button {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        width: 100%;
        text-align: left;
        padding: var(--space-1) var(--space-3);
        border: 0;
        background: none;
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        font-size: var(--text-sm);
        transition: background var(--dur-fast) var(--ease-out),
                    color var(--dur-fast) var(--ease-out);
    }
    .dropdown__item:hover {
        background: var(--surface-muted);
        color: var(--color-primary-strong);
        text-decoration: none;
    }
    .dropdown__sep { height: 1px; background: var(--border-default); margin: 3px 0; }

    /* Submeniu (flyout) — o secțiune cu mai multe operații, deschisă la hover/click */
    .dropdown__group { position: relative; }
    .dropdown__item--sub { justify-content: space-between; cursor: pointer; }
    .dropdown__caret { color: currentColor; opacity: .7; font-size: var(--text-xs); margin-left: var(--space-2); }
    .dropdown__sub {
        position: absolute; top: -1px; left: 100%;
        min-width: 240px;
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: var(--space-1);
        display: none; flex-direction: column;
        z-index: 50;
    }
    .dropdown__group:hover > .dropdown__sub,
    .dropdown__group.is-open > .dropdown__sub { display: flex; }
    .dropdown__group:hover > .dropdown__item--sub,
    .dropdown__group.is-open > .dropdown__item--sub {
        background: var(--surface-muted); color: var(--color-primary-strong);
    }
    @media (max-width: 720px) {
        /* Pe ecrane mici: submeniul devine listă indentată, mereu vizibilă */
        .dropdown__sub {
            position: static; display: flex; box-shadow: none; border: 0;
            border-left: 2px solid var(--border-default); border-radius: 0;
            margin-left: var(--space-3); min-width: 0; padding: 0;
        }
        .dropdown__caret { transform: rotate(90deg); }
    }

    /* Chip companie activă + meniu utilizator */
    .menu-chip {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        background: var(--color-primary-soft);
        color: var(--color-primary-strong);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        font-size: var(--text-xs);
        font-weight: 600;
        white-space: nowrap;
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .menu-chip:hover { background: var(--color-primary); color: #fff; text-decoration: none; }
    .menu-chip--warn { background: var(--warning-bg); color: var(--warning); }
    .menu-chip--warn:hover { background: var(--warning); color: #fff; }
    .menu-chip__icon { opacity: 0.85; }

    .user-trigger {
        display: inline-flex;
        align-items: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-2);
        border: 1px solid var(--border-default);
        background: var(--surface-card);
        border-radius: var(--radius-full);
        color: var(--text-secondary);
        font-size: var(--text-sm);
        font-weight: 550;
        white-space: nowrap;
    }
    .user-trigger:hover { background: var(--surface-muted); color: var(--text-primary); }
    .user-avatar {
        display: grid;
        place-items: center;
        width: 24px; height: 24px;
        border-radius: var(--radius-full);
        background: var(--color-primary);
        color: #fff;
        font-size: var(--text-xs);
        font-weight: 700;
        flex-shrink: 0;
    }

    /* Navigare condensată pe ecrane mici */
    @media (width < 900px) {
        .menu-link, .menu-trigger { padding: var(--space-2); font-size: var(--text-xs); }
        .user-trigger .user-name { display: none; }
    }

    /* ===== Conținut principal ===== */
    .app-main {
        flex: 1;
        padding-block: var(--space-6) var(--space-10);
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    /* ===== Subsol ===== */
    .app-footer {
        border-top: 1px solid var(--border-default);
        background: var(--surface-card);
    }
    .app-footer__inner {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        min-height: 48px;
        color: var(--text-muted);
        font-size: var(--text-xs);
    }
    .app-footer__sep { color: var(--border-strong); }

    /* ===== Antet de pagină (fost .hero) ===== */
    .hero {
        display: flex;
        flex-flow: row wrap;
        align-items: baseline;
        gap: var(--space-1) var(--space-3);
    }
    .hero__badge {
        flex-basis: 100%;
        order: -1;
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-primary-strong);
    }
    .hero__title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
    .hero__lead {
        color: var(--text-secondary);
        max-width: 86ch;
        font-size: var(--text-sm);
    }

    /* ===== Antet de pagină cu acțiuni (titlu stânga, butoane dreapta) ===== */
    .page-head {
        display: flex; align-items: flex-start; justify-content: space-between;
        gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5);
    }
    .page-head__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }

    /* Rând de acțiuni inline (footer pagini de detaliu) */
    .inline-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-5); }

    /* ===== Toolbar / bara de filtre (formulare GET în conținut) ===== */
    .app-main form[method="get"],
    .toolbar {
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: var(--space-3) var(--space-4);
        box-shadow: var(--shadow-xs);
        align-items: end;
    }
    .toolbar {
        display: flex;
        gap: var(--space-3);
        flex-wrap: wrap;
        justify-content: space-between;
    }

    /* ===== Grilă de carduri / KPI ===== */
    .card-grid {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
    .card {
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: var(--space-4);
        box-shadow: var(--shadow-xs);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        transition: box-shadow var(--dur-normal) var(--ease-out),
                    border-color var(--dur-normal) var(--ease-out);
    }
    .card:hover { box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
    .card__head { display: flex; align-items: center; gap: var(--space-2); }
    .card__title {
        font-size: var(--text-xs);
        font-weight: 650;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .card__metric {
        font-size: var(--text-xl);
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.1;
    }
    .card__metric--muted { color: var(--text-muted); }
    .card__note { font-size: var(--text-sm); color: var(--text-muted); }

    /* ===== Acțiuni rapide (dashboard) ===== */
    .quick-grid {
        display: grid;
        gap: var(--space-3);
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .quick {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        color: var(--text-primary);
        box-shadow: var(--shadow-xs);
        transition: border-color var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-fast) var(--ease-out),
                    transform var(--dur-fast) var(--ease-out);
    }
    .quick:hover {
        text-decoration: none;
        border-color: var(--color-primary);
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }
    .quick__icon {
        display: grid;
        place-items: center;
        width: 36px; height: 36px;
        border-radius: var(--radius-md);
        background: var(--color-primary-soft);
        color: var(--color-primary-strong);
        font-size: var(--text-md);
        flex-shrink: 0;
    }
    .quick__title { font-weight: 600; font-size: var(--text-sm); }
    .quick__note { font-size: var(--text-xs); color: var(--text-muted); }

    /* Titlu de secțiune intern */
    .section-title {
        font-size: var(--text-md);
        font-weight: 650;
        margin-bottom: var(--space-3);
        color: var(--text-primary);
    }

    /* ===== Indicator de stare ===== */
    .status-dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; }
    .status-dot--ok   { background: var(--success); box-shadow: 0 0 0 3px var(--success-bg); }
    .status-dot--warn { background: var(--warning); box-shadow: 0 0 0 3px var(--warning-bg); }
    .status-dot--err  { background: var(--danger);  box-shadow: 0 0 0 3px var(--danger-bg); }

    /* ===== Butoane ===== */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        transition: background var(--dur-fast) var(--ease-out),
                    border-color var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-fast) var(--ease-out),
                    transform var(--dur-fast) var(--ease-out);
    }
    .btn:hover { text-decoration: none; }
    .btn:active { transform: translateY(1px); }
    .btn:disabled { opacity: 0.5; pointer-events: none; }
    .btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }

    .btn--primary {
        background: var(--color-primary);
        color: #fff;
        box-shadow: var(--shadow-primary);
    }
    .btn--primary:hover { background: var(--color-primary-strong); }

    .btn--ghost {
        background: var(--surface-card);
        color: var(--text-primary);
        border-color: var(--border-strong);
    }
    .btn--ghost:hover { background: var(--surface-muted); border-color: var(--text-muted); }

    .btn--danger { background: var(--danger); color: #fff; }
    .btn--danger:hover { background: oklch(from var(--danger) calc(l - 0.06) c h); }

    /* ===== Alerte / flash ===== */
    .flash-stack { display: flex; flex-direction: column; gap: var(--space-2); }
    .alert {
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-md);
        border: 1px solid transparent;
        border-left-width: 3px;
        font-size: var(--text-sm);
    }
    .alert--success { background: var(--success-bg); border-color: var(--success); color: oklch(from var(--success) calc(l - 0.08) c h); }
    .alert--danger  { background: var(--danger-bg);  border-color: var(--danger);  color: oklch(from var(--danger) calc(l - 0.05) c h); }
    .alert--warning { background: var(--warning-bg); border-color: var(--warning); color: oklch(from var(--warning) calc(l - 0.1) c h); }
    .alert--info    { background: var(--info-bg);    border-color: var(--info);    color: oklch(from var(--info) calc(l - 0.05) c h); }

    /* ===== Badge ===== */
    .badge {
        display: inline-flex;
        align-items: center;
        padding: 2px var(--space-2);
        border-radius: var(--radius-sm);
        font-size: var(--text-xs);
        font-weight: 600;
        line-height: 1.4;
    }
    .badge--neutral { background: var(--surface-muted); color: var(--text-secondary); border: 1px solid var(--border-default); }
    .badge--primary { background: var(--color-primary-soft); color: var(--color-primary-strong); }

    /* ===== Stare document (factură / notă) — pill cu status dot ===== */
    .stare-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px 3px 8px;
        border-radius: 999px;
        font-size: var(--text-xs);
        font-weight: 600;
        line-height: 1.4;
        white-space: nowrap;
        border: 1px solid transparent;
        cursor: help;
    }
    .stare-badge__dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        flex: 0 0 auto;
        background: currentColor;
        box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 18%, transparent);
    }
    .stare-badge--draft {
        background: var(--warning-bg);
        color: oklch(from var(--warning) calc(l - 0.08) c h);
        border-color: color-mix(in oklch, var(--warning) 28%, transparent);
    }
    .stare-badge--ok {
        background: var(--success-bg);
        color: oklch(from var(--success) calc(l - 0.06) c h);
        border-color: color-mix(in oklch, var(--success) 28%, transparent);
    }
    .stare-badge--cancel {
        background: var(--surface-muted);
        color: var(--text-secondary);
        border-color: var(--border-default);
    }
    .stare-badge--cancel .stare-badge__dot { box-shadow: none; opacity: 0.7; }

    .stare-legend {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-4);
        margin-top: var(--space-3);
        padding: var(--space-3) var(--space-1);
        font-size: var(--text-xs);
        color: var(--text-muted);
    }
    .stare-legend__item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .stare-legend .stare-badge { cursor: default; }

    /* ===== Master-detail (listă facturi + panou liniile selectate) ===== */
    .fp-grid .table tbody tr { cursor: pointer; }
    .fp-grid .table tbody tr:hover { background: var(--surface-muted); }
    .fp-grid .table tbody tr.is-selected {
        background: var(--color-primary-soft);
        box-shadow: inset 3px 0 0 var(--color-primary);
    }
    .fp-grid .table tbody tr.is-selected:hover { background: var(--color-primary-soft); }
    /* Listă compactă: ~10 facturi vizibile, header fix, scroll peste */
    .fp-grid .table-wrap { max-height: 380px; overflow-y: auto; }
    .fp-grid .table th, .fp-grid .table td { padding: 5px var(--space-3); }
    .fp-grid .table thead th { z-index: 2; }
    .fp-detail {
        margin-top: var(--space-4);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        background: var(--surface-subtle);
        box-shadow: var(--shadow-sm);
        padding: var(--space-4);
        min-height: 140px;
    }
    .fp-detail__empty { color: var(--text-muted); text-align: center; padding: var(--space-6); }
    .fp-detail__head {
        display: flex; justify-content: space-between; align-items: flex-start;
        gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3);
    }
    .fp-detail__doc { font-size: var(--text-md); font-weight: 600; }
    .fp-detail__toolbar {
        display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center;
        margin-top: var(--space-3); padding-top: var(--space-3);
        border-top: 1px solid var(--border-default);
    }
    .fp-summary {
        display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3);
        margin-top: var(--space-3);
    }
    .fp-summary__item {
        background: var(--surface-muted);
        border: 1px solid var(--border-default);
        border-radius: 999px;
        padding: 4px 12px;
        font-size: var(--text-sm);
        color: var(--text-secondary);
    }

    /* ===== Ecran facturi (intrare/ieșire): KPI + tab-uri + master-detail inline ===== */
    .tva-card.is-warning { border-color: color-mix(in oklch, var(--warning) 35%, transparent); background: var(--warning-bg); }

    .inv-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--surface-muted); color: var(--text-secondary); font-size: 11px; font-weight: 700; margin-left: 4px; }
    .tva-tab.is-active .inv-count { background: rgba(255,255,255,.25); color: #fff; }
    .inv-count--danger { background: var(--danger); color: #fff; }
    .tva-tab.is-active .inv-count--danger { background: #fff; color: var(--danger); }

    .inv-toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: var(--space-3) 0; }
    .inv-search { max-width: 340px; flex: 1 1 240px; }
    .inv-daterange { display: flex; gap: var(--space-2); align-items: center; flex-wrap: nowrap; }
    .inv-daterange .input, .inv-daterange .select { width: auto; }

    .inv-grid { margin-top: var(--space-2); }
    .inv-grid .table tbody tr.inv-row { cursor: pointer; }
    .inv-grid .table tbody tr.inv-row:hover { background: var(--surface-muted); }
    .inv-grid .table tbody tr.inv-row.is-open { background: var(--color-primary-soft); box-shadow: inset 3px 0 0 var(--color-primary); }
    .inv-grid .table th, .inv-grid .table td { padding: 6px var(--space-3); }
    .inv-caret { display: inline-block; color: var(--text-muted); font-size: var(--text-xs); transition: transform var(--dur-fast) var(--ease-out); margin-right: 4px; }
    .inv-caret.is-open { transform: rotate(90deg); color: var(--color-primary); }
    .inv-expand > td { padding: 0 !important; background: var(--surface-app); }
    .inv-expand .fp-detail { margin: 0; border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
    .inv-foot td { background: var(--surface-muted); font-weight: 600; border-top: 1px solid var(--border-strong); }
    .inv-foot__rest { color: var(--danger); }

    .inv-note-sumar {
        display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
        margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
        background: var(--surface-card); border: 1px solid var(--border-default);
        border-radius: var(--radius-md); font-size: var(--text-sm);
    }
    .inv-note-sumar__lbl { font-weight: 600; color: var(--text-secondary); }
    .inv-note-sumar__pd { font-weight: 600; }
    .inv-note-sumar__link { font-size: var(--text-xs); color: var(--color-primary-strong); white-space: nowrap; }
    .inv-note-sumar__plata { margin-left: auto; font-size: var(--text-xs); color: var(--text-muted); }

    /* ===== Ecran Registru de casă ===== */
    .casa-datenav {
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3);
        margin-top: var(--space-3); padding: var(--space-2) var(--space-3);
        background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    }
    .casa-datenav__nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
    .casa-datenav__label { font-weight: 600; min-width: 180px; text-align: center; }
    .casa-datenav__pick { margin: 0; }
    .casa-datenav__pick .input { width: auto; }
    .casa-datenav__modes { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-muted); border: 1px solid var(--border-default); border-radius: var(--radius-md); }
    .casa-mode { padding: 5px 14px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); text-decoration: none; }
    .casa-mode:hover { background: var(--surface-card); color: var(--text-primary); }
    .casa-mode.is-active { background: var(--color-primary); color: #fff; }

    .casa-actions { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
    .casa-action {
        display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
        padding: var(--space-3); background: var(--surface-card); border: 1px solid var(--border-default);
        border-radius: var(--radius-lg); color: var(--text-secondary); text-decoration: none; font-size: var(--text-xs); font-weight: 600;
        transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    }
    .casa-action:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); transform: translateY(-1px); color: var(--color-primary-strong); }
    .casa-action__ic { font-size: 22px; line-height: 1; }

    .casa-kpi { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
    .casa-plafon__bar { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin: 4px 0 2px; }
    .casa-plafon__bar > span { display: block; height: 100%; background: var(--success); border-radius: 999px; }
    .casa-plafon--warning .casa-plafon__bar > span { background: var(--warning); }
    .casa-plafon--danger { border-color: color-mix(in oklch, var(--danger) 35%, transparent); background: var(--danger-bg); }
    .casa-plafon--danger .casa-plafon__bar > span { background: var(--danger); }

    .cont-badge { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; padding: 1px 7px; border-radius: 999px; }
    .cont-b-blue { background: var(--color-primary-soft); color: var(--color-primary-strong); }
    .cont-b-amber { background: var(--warning-bg); color: oklch(from var(--warning) calc(l - 0.1) c h); }
    .cont-b-gray { background: var(--surface-muted); color: var(--text-secondary); }

    .casa-table .casa-special td { background: var(--surface-muted); font-weight: 600; }
    .casa-table .casa-sold-row td { background: var(--surface-subtle); }
    .casa-table .casa-total-row td { border-top: 1px solid var(--border-strong); }
    .casa-table tr.casa-row--alert td { background: var(--row-alert-bg, rgba(250,238,218,0.45)); }
    .casa-warn { color: var(--warning); cursor: help; font-weight: 700; }

    .casa-detaliu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-sm); }
    .casa-detaliu__lbl { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }

    @media (max-width: 1023px) {
        .casa-actions { grid-template-columns: repeat(3, 1fr); }
        .casa-kpi { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 600px) { .casa-actions { grid-template-columns: repeat(2, 1fr); } }

    /* ===== Ecran Registru de bancă ===== */
    .banca-cards__head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
    .banca-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
    .banca-card {
        background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg);
        padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-xs); cursor: pointer;
        transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    }
    .banca-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
    .banca-card.is-active { border-color: var(--color-primary); border-width: 2px; box-shadow: 0 0 0 3px var(--color-primary-soft); }
    .banca-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
    .banca-card__bank { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .02em; }
    .banca-card__sold { font-size: var(--text-lg); font-weight: 700; margin: 6px 0 2px; }
    .banca-card__cur { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
    .banca-card__iban { font-size: var(--text-xs); color: var(--text-muted); margin: 0; }
    .banca-card__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
    .banca-card__recon { font-size: var(--text-xs); }
    .recon-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
    .banca-card--add {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        border-style: dashed; color: var(--text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: 600; text-align: center;
    }
    .banca-card--add:hover { color: var(--color-primary-strong); }

    /* ===== Ecran Exerciții financiare ===== */
    .ex-active {
        margin-top: var(--space-3); padding: var(--space-4) var(--space-5);
        background: oklch(from var(--color-primary) 97% 0.02 h); border: 1px solid color-mix(in oklch, var(--color-primary) 25%, transparent);
        border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    }
    .ex-active__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-4); flex-wrap: wrap; }
    .ex-active__title { display: flex; align-items: center; gap: var(--space-3); }
    .ex-active__an { font-size: 2rem; font-weight: 600; line-height: 1; }
    .ex-active__progress { text-align: right; min-width: 200px; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 2px; }
    .ex-active__progress-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
    .ex-progressbar { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin: 2px 0; }
    .ex-progressbar > span { display: block; height: 100%; background: var(--success); border-radius: 999px; }
    .ex-active__termen { font-size: var(--text-xs); color: var(--text-muted); }
    .ex-active__meta { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-2); }

    .ex-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
    .ex-kpi__cell { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; }
    .ex-kpi__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
    .ex-kpi__val { font-size: 1.5rem; font-weight: 600; line-height: 1.1; }
    .ex-kpi__note { font-size: var(--text-xs); color: var(--text-muted); }

    .ex-calendar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
    .ex-month { border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-card); display: flex; flex-direction: column; gap: 4px; }
    .ex-month__top { display: flex; justify-content: space-between; align-items: center; }
    .ex-month__name { font-weight: 600; font-size: var(--text-sm); }
    .ex-month__ic { font-size: var(--text-sm); }
    .ex-month__stat { font-size: var(--text-xs); color: var(--text-secondary); margin: 0; }
    .ex-month__stat--muted { color: var(--text-muted); }
    .ex-month__foot { margin-top: 2px; }
    .ex-month__action { font-size: var(--text-xs); font-weight: 600; text-decoration: none; }
    .ex-month__action--ok { color: var(--success); }
    .ex-month__action--info { color: var(--color-primary-strong); }
    .ex-month__action--warn { color: var(--warning); }
    .ex-month__action--muted { color: var(--text-muted); font-weight: 400; }
    .ex-month__close { border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); padding: 3px 10px; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
    .ex-month__close:hover { background: var(--color-primary-strong); }
    .ex-month--inchisa { background: var(--success-bg); border-color: color-mix(in oklch, var(--success) 30%, transparent); }
    .ex-month--curenta { background: var(--color-primary-soft); border-color: var(--color-primary); border-width: 2px; }
    .ex-month--problema { background: var(--warning-bg); border-color: color-mix(in oklch, var(--warning) 35%, transparent); }
    .ex-month--gata { border-color: var(--color-primary); }
    .ex-month--viitoare { background: var(--surface-subtle); color: var(--text-muted); }

    .ex-alerts { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
    .ex-alert { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid; border-left-width: 4px; border-radius: var(--radius-md); flex-wrap: wrap; }
    .ex-alert__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
    .ex-alert__msg { flex: 1; font-size: var(--text-sm); }
    .ex-alert__cta { font-size: var(--text-xs); font-weight: 700; color: var(--color-primary-strong); white-space: nowrap; text-decoration: none; }

    @media (max-width: 1023px) {
        .ex-kpi { grid-template-columns: repeat(2, 1fr); }
        .ex-calendar { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 600px) { .ex-calendar { grid-template-columns: repeat(2, 1fr); } }

    /* ===== Ecran Mijloace fixe ===== */
    .mf-amort {
        display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
        margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
        background: var(--color-primary-soft); border: 1px solid var(--color-primary); border-radius: var(--radius-lg);
    }
    .mf-amort__title { font-size: var(--text-md); margin: 0 0 4px; }
    .mf-amort__line { font-size: var(--text-sm); margin: 0; }
    .mf-amort__last { font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0 0; }
    .mf-amort__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
    .mf-progress { height: 5px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; margin-top: 3px; max-width: 140px; }
    .mf-progress > span { display: block; height: 100%; border-radius: 999px; }

    /* ===== Ecran Deconturi de cheltuieli ===== */
    .dc-avatar {
        display: inline-flex; align-items: center; justify-content: center;
        width: 24px; height: 24px; border-radius: 50%; margin-right: 6px; vertical-align: middle;
        background: var(--color-primary-soft); color: var(--color-primary-strong);
        font-size: 10px; font-weight: 700;
    }
    .dc-validari { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-3); font-size: var(--text-sm); }
    .dc-ok { color: var(--success); font-weight: 600; }
    .dc-warn { color: var(--danger); font-weight: 600; }
    .dc-sumar { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-default); }
    .dc-sumar > div { display: flex; flex-direction: column; gap: 2px; }
    .dc-sumar__lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); }
    .dc-sumar strong { font-size: var(--text-md); }
    .dc-detaliu__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }

    /* Avertizare „produs asemănător" pe linia facturii */
    .line-sim {
        display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
        margin-top: 6px; padding: 6px 8px;
        background: var(--warning-bg);
        border: 1px solid color-mix(in oklch, var(--warning) 35%, transparent);
        border-radius: var(--radius-md);
        font-size: var(--text-xs);
    }
    .line-sim__lbl { color: oklch(from var(--warning) calc(l - 0.1) c h); font-weight: 600; }
    .line-sim__pick {
        border: 1px solid var(--border-strong); background: var(--surface-card);
        color: var(--color-primary-strong); border-radius: 999px;
        padding: 2px 10px; font-size: var(--text-xs); cursor: pointer;
    }
    .line-sim__pick:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }
    .line-sim__close {
        margin-left: auto; border: 0; background: none; cursor: pointer;
        color: var(--text-muted); font-size: var(--text-md); line-height: 1; padding: 0 4px;
    }

    /* Atenționare viramente interne (581) de confirmat din extras */
    .virament-alert {
        display: flex; align-items: center; gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
        background: var(--warning-bg);
        border: 1px solid color-mix(in oklch, var(--warning) 40%, transparent);
        border-left: 4px solid var(--warning);
        border-radius: var(--radius-lg);
        text-decoration: none; color: var(--text-primary);
        transition: background var(--dur-fast) var(--ease-out);
    }
    .virament-alert:hover { background: color-mix(in oklch, var(--warning) 18%, var(--surface-card)); }
    .virament-alert__icon { font-size: var(--text-xl); flex: 0 0 auto; }
    .virament-alert__txt { flex: 1; font-size: var(--text-sm); line-height: 1.5; }
    .virament-alert__cta { flex: 0 0 auto; font-weight: 700; color: var(--color-primary-strong); white-space: nowrap; }

    /* ===== Ecran Jurnal & Decont TVA ===== */
    .tva-filtre { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-top: var(--space-3); box-shadow: var(--shadow-xs); }
    .tva-chips, .tva-cote-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
    .chip {
        border: 1px solid var(--border-default); background: var(--surface-muted);
        color: var(--text-secondary); border-radius: 999px; padding: 4px 12px;
        font-size: var(--text-sm); cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
    }
    .chip:hover { border-color: var(--color-primary); color: var(--color-primary-strong); }
    .chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
    .tva-filtre__row { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; }
    .tva-filtre__actions { display: flex; gap: var(--space-2); align-items: end; margin-left: auto; flex-wrap: wrap; }
    .tva-termen {
        display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
        border: 1px solid; border-left-width: 4px; border-radius: var(--radius-md);
        padding: var(--space-2) var(--space-4); margin-top: var(--space-3); font-size: var(--text-sm);
    }
    .tva-termen__lbl { font-weight: 600; }

    .tva-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
    .tva-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: 8px 14px; box-shadow: var(--shadow-xs); }
    .tva-card.is-danger { border-color: color-mix(in oklch, var(--danger) 35%, transparent); background: var(--danger-bg); }
    .tva-card.is-success { border-color: color-mix(in oklch, var(--success) 35%, transparent); background: var(--success-bg); }
    .tva-card__title { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 0; line-height: 1.2; }
    .tva-card__metric { font-size: 1.25rem; font-weight: 600; margin: 1px 0; line-height: 1.15; }
    .tva-card__note { font-size: var(--text-xs); color: var(--text-muted); margin: 0; line-height: 1.2; }
    .tva-delta { margin-left: 6px; font-weight: 600; }
    .tva-delta.up { color: var(--success); }
    .tva-delta.down { color: var(--danger); }

    .tva-tabs {
        display: inline-flex; gap: 4px; padding: 4px; margin-top: var(--space-4);
        background: var(--surface-muted); border: 1px solid var(--border-default);
        border-radius: var(--radius-md); max-width: 100%; overflow-x: auto;
    }
    .tva-tab {
        border: 0; background: transparent; cursor: pointer; padding: 7px 16px;
        border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500;
        color: var(--text-secondary); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px;
        transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    }
    .tva-tab:hover { background: var(--surface-card); color: var(--text-primary); }
    .tva-tab.is-active { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-xs); }
    .tva-tab__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; }
    .tva-tab.is-active .tva-tab__badge { background: #fff; color: var(--danger); }

    .tva-toolbar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin: var(--space-3) 0; }
    .tva-search { max-width: 320px; }
    .tva-table th[data-sort] { cursor: pointer; user-select: none; }
    .tva-table th[data-sort]::after { content: ' ⇅'; opacity: .35; font-size: .85em; }
    .tva-table th[data-dir="asc"]::after { content: ' ↑'; opacity: .9; }
    .tva-table th[data-dir="desc"]::after { content: ' ↓'; opacity: .9; }
    .tva-table thead th { position: sticky; top: 0; z-index: 1; }
    .tva-trunc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tva-warn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: var(--warning); color: #fff; font-weight: 700; font-size: 11px; cursor: help; }
    .tva-subtotal td { background: var(--surface-subtle); font-weight: 600; }
    .tva-total td { background: var(--surface-muted); font-weight: 500; border-top: 1px solid var(--border-strong); }

    .cota-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: 600; }
    .cota-b-blue { background: var(--color-primary-soft); color: var(--color-primary-strong); }
    .cota-b-amber { background: var(--warning-bg); color: oklch(from var(--warning) calc(l - 0.1) c h); }
    .cota-b-purple { background: oklch(94% 0.04 300); color: oklch(45% 0.16 300); }
    .cota-b-gray { background: var(--surface-muted); color: var(--text-secondary); }

    .tva-anomalii { display: flex; flex-direction: column; gap: var(--space-2); }
    .tva-anomalie { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-card); }
    .tva-anomalie__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
    .tva-anomalie--warning .tva-anomalie__dot { background: var(--warning); }
    .tva-anomalie--danger .tva-anomalie__dot { background: var(--danger); }
    .tva-anomalie__msg { flex: 1; font-size: var(--text-sm); }

    @media (max-width: 1023px) { .tva-kpi { grid-template-columns: repeat(2, 1fr); } }
    @media print {
        .no-print { display: none !important; }
        .tva-panel { display: block !important; }
        .tva-panel + .tva-panel { margin-top: 1rem; }
        .tva-table thead th { position: static; }
    }

    /* ===== Ecran Note contabile ===== */
    .note-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-top: var(--space-3); }
    .note-stat { background: var(--surface-card); border: 1px solid var(--border-default); border-left-width: 3px; border-radius: var(--radius-lg); padding: 8px 14px; box-shadow: var(--shadow-xs); }
    .note-stat__title { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); margin: 0; line-height: 1.2; }
    .note-stat__metric { font-size: 1.25rem; font-weight: 600; margin: 1px 0 0; line-height: 1.15; }
    .note-stat--ciorna { border-left-color: var(--warning); }
    .note-stat--validata { border-left-color: var(--success); }
    .note-stat--stornata { border-left-color: var(--text-muted); }

    .note-toolbar { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; justify-content: space-between; margin-top: var(--space-3); }
    .note-filtre { display: flex; gap: var(--space-3); align-items: end; flex-wrap: wrap; }
    .note-filtre .field { min-width: 150px; }
    .note-search-field { min-width: 220px; }
    .note-toolbar__actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
    .note-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--warning); color: #fff; font-size: 11px; font-weight: 700; }

    .note-frecvente { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }
    .note-frecvente__lbl { font-size: var(--text-xs); color: var(--text-muted); }

    .note-anomalii { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
    .note-anomalie { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-default); border-left: 3px solid var(--warning); border-radius: var(--radius-md); background: var(--surface-card); flex-wrap: wrap; }
    .note-anomalie__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); flex: 0 0 auto; }
    .note-anomalie__ref { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; }
    .note-anomalie__msg { flex: 1; font-size: var(--text-sm); color: var(--text-secondary); }

    .note-bulk { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-primary-soft); border: 1px solid var(--color-primary); border-radius: var(--radius-md); }
    .note-bulk__count { font-size: var(--text-sm); }

    .note-table td, .note-table th { vertical-align: middle; }
    .note-col-check { width: 32px; text-align: center; }
    .note-descriere { max-width: 320px; }
    .note-src { margin-right: 4px; cursor: help; }
    .note-conturi { white-space: normal; }
    .acct { display: inline-block; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; padding: 1px 6px; border-radius: var(--radius-sm); margin: 1px 2px 1px 0; }
    .acct-d { background: var(--success-bg); color: var(--success); }
    .acct-c { background: var(--danger-bg); color: var(--danger); }
    .acct-sep { color: var(--text-muted); margin: 0 2px; }
    .note-actiuni { text-align: right; white-space: nowrap; }
    .note-exp-btn { border: 0; background: transparent; cursor: pointer; color: var(--text-secondary); font-size: var(--text-md); line-height: 1; padding: 2px 6px; transition: transform var(--dur-fast) var(--ease-out); }
    .note-exp-btn:hover { color: var(--color-primary); }
    .note-exp-btn.is-open { transform: rotate(90deg); color: var(--color-primary); }

    .note-expand > td { background: var(--surface-subtle); padding: 0; }
    .note-expand__inner { padding: var(--space-3) var(--space-4); }
    .note-pd { width: 100%; border-collapse: collapse; }
    .note-pd th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 2px 8px; border-bottom: 1px solid var(--border-default); }
    .note-pd td { padding: 3px 8px; border-bottom: 1px solid color-mix(in oklch, var(--border-default) 55%, transparent); }
    .note-pd tfoot td { border-top: 1px solid var(--border-strong); border-bottom: 0; }

    @media (max-width: 1023px) { .note-stats { grid-template-columns: repeat(2, 1fr); } }

    /* ===== Câmpuri de formular ===== */
    .field { display: flex; flex-direction: column; gap: var(--space-1); }
    .field__label {
        font-size: var(--text-xs);
        font-weight: 600;
        color: var(--text-secondary);
    }
    .input, .select, .textarea {
        width: 100%;
        padding: var(--space-2) var(--space-3);
        background: var(--surface-card);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
        color: var(--text-primary);
        transition: border-color var(--dur-fast) var(--ease-out),
                    box-shadow var(--dur-fast) var(--ease-out);
    }
    .input::placeholder, .textarea::placeholder { color: var(--text-muted); }
    .input:focus, .select:focus, .textarea:focus {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-soft);
    }
    .field:has(:invalid:not(:placeholder-shown)) .input { border-color: var(--danger); }
    .textarea { min-height: 90px; resize: vertical; font-family: inherit; }
    .field__error { font-size: var(--text-xs); color: var(--danger); font-weight: 500; }
    .field__hint  { font-size: var(--text-xs); color: var(--text-muted); }
    .field__label .req { color: var(--danger); margin-left: 2px; }

    /* ===== Sistem de formulare (creare / editare) ===== */
    .form-card {
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        padding: 0;
        box-shadow: var(--shadow-xs);
        overflow: hidden;
        max-width: 880px;
    }
    .form-card--wide { max-width: 100%; }
    /* Antetul unui card de formular */
    .form-card__head {
        padding: var(--space-4) var(--space-6);
        border-bottom: 1px solid var(--border-default);
        background: var(--surface-subtle);
    }
    .form-card__title { font-size: var(--text-md); font-weight: 650; color: var(--text-primary); }
    .form-card__sub   { font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; }
    .form-card__body  { padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }

    /* Câmpuri vizibil „de completat" în formularele de date (creare/editare):
       fundal pal + bordură clară ca să sară în ochi pe cardul alb; la focus devin
       albe cu inel albastru. Specificitate .form-card .input bate regula globală .input.
       NU afectează barele de căutare/filtrare (care nu sunt în .form-card). */
    .form-card .input, .form-card .select, .form-card .textarea {
        background: #f4f8ff;
        border: 1px solid #aebfd6;
    }
    .form-card .input:hover, .form-card .select:hover, .form-card .textarea:hover { border-color: var(--saga-blue, #003B7A); }
    .form-card .input:focus, .form-card .select:focus, .form-card .textarea:focus {
        background: #fff;
        border-color: var(--saga-blue, #003B7A);
        box-shadow: 0 0 0 3px rgba(0, 59, 122, .14);
        outline: none;
    }
    .form-card .input::placeholder, .form-card .textarea::placeholder { color: #98a6bd; }
    .form-card .field__label { color: var(--saga-blue, #003B7A); }

    /* Rând orizontal de câmpuri (toolbar de formular) — se înfășoară la nevoie.
       De folosit în loc de display:flex inline pe .form-card__body (care e
       coloană), ca să nu reapară alinierea greșită pe dreapta. */
    .form-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }

    /* Secțiune de formular (înlocuiește fieldset inline) */
    .form-section { display: flex; flex-direction: column; gap: var(--space-3); }
    .form-section__title {
        font-size: var(--text-xs); font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.05em; color: var(--text-muted);
        padding-bottom: var(--space-2); border-bottom: 1px solid var(--border-default);
        display: flex; align-items: center; gap: var(--space-2);
    }
    .form-section + .form-section { margin-top: var(--space-2); }

    /* Grile de câmpuri responsive */
    .form-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
    .form-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .form-grid--3 { grid-template-columns: repeat(3, 1fr); }
    .form-grid--2-1 { grid-template-columns: 2fr 1fr; }
    .form-grid--2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
    .field--full { grid-column: 1 / -1; }
    @media (max-width: 720px) {
        .form-grid--2, .form-grid--3, .form-grid--2-1, .form-grid--2-1-1 { grid-template-columns: 1fr; }
    }

    /* Câmp de tip checkbox / switch */
    .check-field {
        display: flex; align-items: center; gap: var(--space-2);
        padding: var(--space-2) var(--space-3);
        border: 1px solid var(--border-default); border-radius: var(--radius-md);
        background: var(--surface-subtle); font-size: var(--text-sm); cursor: pointer;
        transition: border-color var(--dur-fast) var(--ease-out);
    }
    .check-field:hover { border-color: var(--border-strong); }
    .check-field input[type="checkbox"], .check-field input[type="radio"] { width: 16px; height: 16px; accent-color: var(--color-primary); }
    .check-field:has(:checked) { border-color: var(--color-primary); background: var(--color-primary-soft); }

    /* Bara de acțiuni a formularului (footer sticky vizual) */
    .form-actions {
        display: flex; gap: var(--space-3); align-items: center;
        padding: var(--space-4) var(--space-6);
        border-top: 1px solid var(--border-default); background: var(--surface-subtle);
    }
    .form-actions--end { justify-content: flex-end; }
    .form-actions__spacer { flex: 1; }

    /* Prefix/sufix pe input (ex: lei, %, RO) */
    .input-group { display: flex; align-items: stretch; }
    .input-group .input { border-radius: var(--radius-md) 0 0 var(--radius-md); border-right: 0; }
    .input-group__suffix {
        display: inline-flex; align-items: center; padding: 0 var(--space-3);
        background: var(--surface-muted); border: 1px solid var(--border-strong);
        border-left: 0; border-radius: 0 var(--radius-md) var(--radius-md) 0;
        font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap;
    }

    /* ===== Modal (dialog suprapus) ===== */
    .modal-backdrop {
        position: fixed; inset: 0; z-index: 100;
        background: oklch(20% 0.02 256 / 0.45);
        display: grid; place-items: center; padding: var(--space-4);
        backdrop-filter: blur(2px);
    }
    .modal {
        background: var(--surface-card); border: 1px solid var(--border-default);
        border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
        width: 100%; max-width: 640px; max-height: 90vh; overflow: auto;
        display: flex; flex-direction: column;
    }
    .modal__head {
        display: flex; align-items: center; justify-content: space-between;
        padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default);
        background: var(--surface-subtle); position: sticky; top: 0;
    }
    .modal__title { font-size: var(--text-md); font-weight: 650; color: var(--text-primary); }
    .modal__close {
        border: 0; background: transparent; cursor: pointer; color: var(--text-muted);
        font-size: var(--text-xl); line-height: 1; padding: 0 var(--space-1);
    }
    .modal__close:hover { color: var(--text-primary); }
    .modal__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
    .modal__foot {
        display: flex; gap: var(--space-3); justify-content: flex-end;
        padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-default);
        background: var(--surface-subtle); position: sticky; bottom: 0;
    }

    /* Buton mic „adaugă" lângă un select */
    .field-with-add { display: flex; gap: var(--space-2); align-items: stretch; }
    .field-with-add .select { flex: 1; }
    .btn-add {
        flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
        width: 38px; border: 1px solid var(--border-strong); border-radius: var(--radius-md);
        background: var(--surface-card); color: var(--color-primary); font-size: var(--text-lg);
        font-weight: 700; cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
    }
    .btn-add:hover { background: var(--color-primary-soft); border-color: var(--color-primary); }

    /* ===== Tabel ===== */
    .table-wrap {
        overflow-x: auto;
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        background: var(--surface-card);
        box-shadow: var(--shadow-xs);
    }
    .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
    .table th, .table td {
        padding: var(--space-2) var(--space-3);
        text-align: left;
        border-bottom: 1px solid var(--border-default);
        vertical-align: middle;
    }
    .table thead th {
        position: sticky;
        top: 0;
        background: var(--surface-muted);
        color: var(--text-secondary);
        font-weight: 650;
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border-bottom: 1px solid var(--border-strong);
        white-space: nowrap;
        z-index: 1;
    }
    .table tbody tr:nth-child(even) td { background: var(--surface-subtle); }
    .table tbody tr:hover td { background: var(--color-primary-soft); }
    .table tbody tr:last-child td { border-bottom: none; }
    .table tfoot td { border-top: 2px solid var(--border-strong); border-bottom: none; }
    .table a { font-weight: 500; }

    /* ===== Cutia de test HTMX ===== */
    .ping-box { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
    .ping-box__result { font-size: var(--text-sm); color: var(--text-muted); }
    .ping-ok { color: var(--success); font-weight: 600; font-size: var(--text-sm); }
    .htmx-request .btn { opacity: 0.65; pointer-events: none; }

    /* ===== Stare goală / pasul următor ===== */
    .next-steps {
        background: var(--surface-card);
        border: 1px dashed var(--border-strong);
        border-radius: var(--radius-lg);
        padding: var(--space-5) var(--space-6);
    }
    .next-steps__title { font-size: var(--text-md); margin-bottom: var(--space-2); }
    .next-steps p { color: var(--text-secondary); font-size: var(--text-sm); }

    /* ===== Pagini de eroare ===== */
    .error-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
    .error-page__box {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
        max-width: 560px;
    }
    .error-page__code { font-size: 4rem; font-weight: 800; color: var(--color-primary); line-height: 1; }
    .error-page__code--danger { color: var(--danger); }
    .error-page__title { font-size: var(--text-xl); }
    .error-page__text { color: var(--text-secondary); }
    .error-page__trace {
        width: 100%;
        text-align: left;
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        background: var(--surface-muted);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        overflow-x: auto;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* ===== Autentificare ===== */
    .auth {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-5);
        padding: var(--space-6);
        background:
            radial-gradient(70% 55% at 50% -5%, var(--color-primary-soft), transparent),
            var(--surface-app);
    }
    .auth__card {
        width: min(400px, 100%);
        background: var(--surface-card);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-lg);
        padding: var(--space-8) var(--space-6);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    .auth__brand { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
    .auth__brand-name { font-size: var(--text-md); font-weight: 700; }
    .auth__title { font-size: var(--text-xl); }
    .auth__subtitle { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-2); }
    .auth__form { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-2); }
    .auth__submit { width: 100%; margin-top: var(--space-1); }
    .auth__footer { color: var(--text-muted); font-size: var(--text-xs); }
    .auth__separator {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        color: var(--text-muted);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: 0.1em;
        margin: var(--space-2) 0;
    }
    .auth__separator::before, .auth__separator::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border-default);
    }
}

/* ---------------------------------------------------------------------
   Utilitare
   --------------------------------------------------------------------- */
@layer utilities {
    .text-muted { color: var(--text-muted); }
    .mono { font-family: var(--font-mono); }
    .num { font-family: var(--font-mono); text-align: right; white-space: nowrap; }
    .row-actions { text-align: right; white-space: nowrap; }
    .hidden { display: none !important; }
    .stack { display: flex; flex-direction: column; gap: var(--space-4); }
    .inline-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; }
}

/* ---------------------------------------------------------------------
   Accesibilitate — reducerea mișcării
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* =====================================================================
   TEMĂ SAGA / WinMentor (Iter #11) — strat FINAL nelayerat de suprascriere.
   Stil „modern classic": albastru Saga, panouri dense, butoane cu gradient,
   tabele clasice, pill-uri de stare. Fiind în afara @layer, are prioritate
   peste tot design-system-ul de bază, fără !important. Bara de sus cu
   meniuri este PĂSTRATĂ și doar retematizată.
   ===================================================================== */
:root {
    /* Brand Saga */
    --color-primary:        #1E5BA8;
    --color-primary-strong: #003B7A;
    --color-primary-soft:   #E3F2FD;
    --saga-blue:   #003B7A;
    --saga-blue-2: #1E5BA8;
    --shadow-primary: 0 2px 6px rgba(0,59,122,.30);

    /* Tipografie clasică, densă */
    --font-sans: "Segoe UI", Tahoma, "Lucida Sans Unicode", Verdana, sans-serif;
    --font-mono: "Consolas", "Liberation Mono", "Courier New", monospace;
    --text-xs: 0.69rem; --text-sm: 0.73rem; --text-base: 0.78rem;
    --text-md: 0.86rem; --text-lg: 1.0rem; --text-xl: 1.18rem; --text-2xl: 1.5rem;

    /* Colțuri tehnice */
    --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 6px;

    /* Suprafețe & borduri */
    --surface-app:    #ECECEC;
    --surface-card:   #FFFFFF;
    --surface-muted:  #F2F3F5;
    --surface-subtle: #FAFBFD;
    --surface-2:      #F2F3F5;
    --border-default: #C8C8C8;
    --border-strong:  #A8A8A8;
    --border:         #C8C8C8;

    /* Text */
    --text-primary:   #1F1F1F;
    --text-secondary: #555555;
    --text-muted:     #6B6B6B;
    --text-subtle:    #8A8A8A;

    /* Stări semantice */
    --success: #2E7D32; --success-bg: #E8F5E9;
    --danger:  #C62828; --danger-bg:  #FFEBEE;
    --warning: #E65100; --warning-bg: #FFF3E0;
    --info:    #1565C0; --info-bg:    #E3F2FD;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.10);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.12);
    --shadow-md: 0 4px 14px rgba(0,0,0,.16);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.22);
}

body { background: var(--surface-app); font-size: var(--text-base); }

/* ---- Header + bara de meniuri (păstrată, retematizată) ---- */
.app-header {
    background: linear-gradient(to bottom, #2C5282 0%, #1A3F6B 100%);
    border-bottom: 1px solid #0D2845;
    box-shadow: 0 1px 4px rgba(0,0,0,.20);
}
.app-header__inner { max-width: 1700px; margin: 0 auto; }
.brand, .brand__name { color: #fff; }
.brand__name { letter-spacing: .4px; }
.brand__mark { background: #FFD56B; color: #422C00; border-radius: 3px; font-weight: 800; }
.menu-link, .menu-trigger { color: #EAF1FA; background: transparent; border-radius: 2px; font-weight: 600; }
.menu-link:hover, .menu-trigger:hover { background: rgba(255,255,255,.14); color: #fff; text-decoration: none; }
.menu-link.is-active, .menu-trigger.is-active { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 -3px 0 #FFD56B; }
.menu-caret { color: #A8C3E5; }
.menu-badge { background: var(--danger); color: #fff; border-radius: 2px; }

.dropdown { background: #fff; border: 1px solid var(--border-strong); border-radius: 0; box-shadow: var(--shadow-md); padding: 3px; }
.dropdown__item { color: var(--text-primary); border-radius: 2px; font-weight: 500; }
.dropdown__item:hover { background: var(--color-primary-soft); color: var(--color-primary-strong); text-decoration: none; }
.dropdown__item.is-active { background: var(--color-primary); color: #fff; }
.dropdown__sep { background: var(--border-default); }
.app-nav__hint { color: #C9D8EC; }

/* ---- Butoane (gradient WinMentor) ---- */
.btn { border-radius: 2px; background: linear-gradient(to bottom, #FCFCFC, #DCDCDC); border: 1px solid var(--border-strong); color: var(--text-primary); font-weight: 500; box-shadow: none; }
.btn:hover { background: linear-gradient(to bottom, #FFFFFF, #E8E8E8); border-color: var(--border-strong); }
.btn--primary { background: linear-gradient(to bottom, #4A8BCC, #2865A8); border-color: #1E4F8A; color: #fff; font-weight: 600; }
.btn--primary:hover { background: linear-gradient(to bottom, #5A9BDC, #2F70B8); }
.btn--ghost { background: linear-gradient(to bottom, #FCFCFC, #E6E6E6); border-color: var(--border); color: var(--text-primary); }
.btn--ghost:hover { background: linear-gradient(to bottom, #FFFFFF, #ECECEC); }
.btn--sm { font-size: var(--text-xs); padding: 2px 8px; }
.btn--danger { background: linear-gradient(to bottom, #E07C7C, #C04A4A); border-color: #8B2C2C; color: #fff; }
.btn--danger:hover { background: linear-gradient(to bottom, #E88C8C, #C85656); border-color: #8B2C2C; color: #fff; }
.btn--success { background: linear-gradient(to bottom, #6CC56C, #4A9E4A); border-color: #2E7D32; color: #fff; }
.btn--success:hover { background: linear-gradient(to bottom, #7CD17C, #56AE56); border-color: #2E7D32; color: #fff; }

/* ---- Tabele clasice ---- */
.table-wrap { border: 1px solid var(--border-strong); border-radius: 2px; background: #fff; }
.table { font-size: var(--text-sm); border-collapse: separate; border-spacing: 0; }
.table thead th { background: linear-gradient(to bottom, #DCE4F0, #C5D5EC); color: var(--color-primary-strong); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 5px 8px; border-right: 1px solid #A0B5D5; border-bottom: 1px solid #7090B5; white-space: nowrap; }
.table thead th:last-child { border-right: none; }
.table tbody td { padding: 5px 8px; border-right: 1px solid var(--border-default); border-bottom: 1px solid #E8E8E8; }
.table tbody td:last-child { border-right: none; }
.table tbody tr:nth-child(even) { background: #FAFBFD; }
.table tbody tr:hover { background: #FFF7CD; }
.table tbody tr.selected, .table tbody tr.is-open { background: #B5D2FF; }
.table tfoot td, .table .inv-foot td { background: linear-gradient(to bottom, #F0E8B8, #E0D088); color: #3A2C00; font-weight: 700; border-top: 1px solid #B89C20; }

/* ---- Carduri / KPI ---- */
.card, .tva-card { background: #fff; border: 1px solid var(--border-strong); border-radius: 2px; box-shadow: none; }
.tva-card__title, .card__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); font-weight: 600; }
.tva-card__metric, .card__metric { font-family: var(--font-mono); color: var(--color-primary-strong); font-weight: 700; }
.tva-card.is-success { border-top: 2px solid var(--success); }
.tva-card.is-danger  { border-top: 2px solid var(--danger); }
.tva-card.is-warning { border-top: 2px solid var(--warning); }
.tva-card.is-info    { border-top: 2px solid var(--color-primary); }

/* ---- Tab-uri (folder WinMentor) ---- */
.tva-tab { background: #D5D5D5; border: 1px solid var(--border-strong); border-bottom: none; color: var(--text-muted); border-radius: 0; font-weight: 600; }
.tva-tab.is-active { background: #FFD56B; color: #422C00; border-color: #B8860B; }
.tva-tab:hover:not(.is-active) { background: #E8E8E8; }
.inv-count { background: rgba(0,0,0,.15); font-family: var(--font-mono); border-radius: 0; }
.inv-count--danger { background: var(--danger); color: #fff; }

/* ---- Badge / pill-uri ---- */
.badge { border-radius: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .2px; font-size: var(--text-xs); }
.stb, .stare-badge { border-radius: 2px; }

/* ---- Inputuri ---- */
.input, .select { border-radius: 2px; border: 1px solid var(--border); background: #fff; }
.input:focus, .select:focus { outline: 1px solid var(--color-primary); border-color: var(--color-primary); }
.field__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .3px; color: var(--text-muted); font-weight: 600; }

/* ---- page-head / hero / titluri ---- */
.hero__badge { color: var(--color-primary-strong); text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.hero__title { color: var(--text-primary); }
.section-title { color: var(--color-primary-strong); text-transform: uppercase; letter-spacing: .3px; font-size: var(--text-sm); }

/* ---- chips / alerte / formulare ---- */
.chip { border-radius: 2px; border: 1px solid var(--border); }
.chip.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary-strong); }
.alert { border-radius: 2px; }
.form-card { border: 1px solid var(--border-strong); border-radius: 2px; box-shadow: var(--shadow-sm); }

/* ---- acțiuni rapide ---- */
.casa-action { border: 1px solid var(--border-strong); border-radius: 2px; background: linear-gradient(to bottom, #FCFCFC, #ECECEC); }
.casa-action:hover { background: linear-gradient(to bottom, #FFFFFF, #E8F0FA); border-color: var(--color-primary); }

/* ---- footer ---- */
.app-footer { background: #F4F4F4; border-top: 1px solid var(--border-strong); color: var(--text-muted); }

/* =====================================================================
   COMPONENTĂ MASTER/DETAIL „WinMentor" (.fpx) — reutilizabilă pe ecranele
   de documente (facturi, note, casă, bancă). Folosită cu helperul JS
   global mdScreen('/baza') din layout.
   ===================================================================== */
.fpx { display: flex; flex-direction: column; }
.fpx-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--border-strong); border: 1px solid var(--border-strong); }
.fpx-kpi { background: #fff; padding: 8px 14px; }
.fpx-kpi .lbl { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.fpx-kpi .val { font-family: var(--font-mono); font-size: 1.35rem; font-weight: 700; color: var(--saga-blue); line-height: 1.1; margin-top: 2px; }
.fpx-kpi .val.danger { color: var(--danger); } .fpx-kpi .val.warn { color: var(--warning); } .fpx-kpi .val.ok { color: var(--success); }
.fpx-kpi .sub { font-size: var(--text-xs); color: var(--text-subtle); margin-top: 2px; }
.fpx-toolbar { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; background: linear-gradient(to bottom, #ECECEC, #D8D8D8); border: 1px solid var(--border-strong); border-top: none; padding: 4px 6px; }
.fpx kbd { background: rgba(0,0,0,.16); color: inherit; padding: 0 4px; font-family: var(--font-mono); font-size: 9.5px; border-radius: 2px; }
.btn--warnx { background: linear-gradient(to bottom, #F2C46C, #D69E2E); border: 1px solid #8B6914; color: #422C00; }
.btn--warnx:hover { background: linear-gradient(to bottom, #F8CE7C, #E0A838); }
.fpx .btn kbd { background: rgba(0,0,0,.18); }
.fpx .btn--primary kbd, .fpx .btn--danger kbd { background: rgba(255,255,255,.28); color: #fff; }
.tb-div { width: 1px; align-self: stretch; background: var(--border-strong); margin: 2px 4px; }
.fpx-search { height: 24px; min-width: 240px; flex: 1; }
.fpx-grid { overflow: auto; border: 1px solid var(--border-strong); border-top: none; background: #fff; }
.fpx .table tbody tr { cursor: pointer; }
.fpx-row.sel > td { background: #B5D2FF !important; }
.fpx .st { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font-size: var(--text-xs); font-weight: 600; border: 1px solid; text-transform: uppercase; letter-spacing: .2px; border-radius: 2px; }
.fpx .st::before { content: ''; width: 6px; height: 6px; background: currentColor; }
.fpx .st.paid { background: var(--success-bg); color: var(--success); border-color: #A5D6A7; }
.fpx .st.unpaid { background: var(--danger-bg); color: var(--danger); border-color: #EF9A9A; }
.fpx .st.draft { background: var(--warning-bg); color: var(--warning); border-color: #FFCC80; }
.fpx .st.info { background: var(--info-bg); color: var(--info); border-color: #90CAF9; }
.fpx .st.warn { background: #FFFDE7; color: #F57F17; border-color: #FFE082; }
.fpx-resizer { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 22px; padding: 0 12px; background: linear-gradient(to bottom, #4A6FA5, #2C5282); color: #fff; font-size: var(--text-xs); font-weight: 600; border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); cursor: ns-resize; user-select: none; }
.fpx-resizer .doc { font-family: var(--font-mono); color: #FFD56B; font-weight: 600; }
.fpx-resizer .grip { display: inline-flex; flex-direction: column; gap: 2px; }
.fpx-resizer .grip span { width: 16px; height: 2px; background: rgba(255,255,255,.5); }
.fpx-resizer .tgl { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); color: #fff; padding: 1px 8px; border-radius: 2px; font-size: var(--text-xs); }
.fpx-detail { border: 1px solid var(--border-strong); border-top: none; background: #fff; overflow: auto; }
.fpx-detail.hidden { display: none; }
.fpx-status { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: linear-gradient(to bottom, #5878A5, #2C5282); color: #fff; font-size: var(--text-xs); padding: 4px 10px; border: 1px solid var(--saga-blue); border-top: none; }
.fpx-status .lbl { color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .4px; }
.fpx-status .val { font-family: var(--font-mono); font-weight: 600; }
.fpx-status .sb-r { margin-left: auto; }
.fpx-fkeys { display: flex; gap: 2px; flex-wrap: wrap; align-items: center; background: linear-gradient(to bottom, #E8E8E8, #D0D0D0); border: 1px solid var(--border-strong); border-top: none; padding: 3px 4px; }
.fpx-fkey { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; background: linear-gradient(to bottom, #FAFAFA, #E0E0E0); border: 1px solid #999; font-size: var(--text-xs); font-weight: 500; border-radius: 2px; color: var(--text-primary); }
.fpx-fkey:hover { background: linear-gradient(to bottom, #fff, #E8E8E8); text-decoration: none; }
.fpx-fkey .k { background: var(--saga-blue); color: #fff; padding: 0 4px; font-size: 9.5px; font-weight: 700; border-radius: 2px; }
.fpx-fkey.danger .k { background: var(--danger); } .fpx-fkey.warn .k { background: var(--warning); } .fpx-fkey.ok .k { background: var(--success); }
.fpx-dtabs { display: flex; gap: 4px; background: #eef1f5; border-bottom: 2px solid var(--saga-blue, #003B7A); flex-wrap: wrap; padding: 4px 6px 0; }
.fpx-dtab { padding: 7px 16px; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 6px 6px 0 0; background: transparent; display: inline-flex; gap: 6px; align-items: center; margin-bottom: -2px; transition: background .12s, color .12s; }
.fpx-dtab:hover { background: #e2e9f3; color: var(--saga-blue, #003B7A); }
.fpx-dtab.act { background: #fff; color: var(--saga-blue, #003B7A); font-weight: 700; border-color: var(--saga-blue, #003B7A); border-bottom: 2px solid #fff; }
.fpx-dtab .c { background: rgba(0,0,0,.15); padding: 0 5px; font-family: var(--font-mono); font-size: 10px; border-radius: 2px; }
.fpx-dbody { padding: 12px 14px; display: grid; grid-template-columns: 1fr 1fr 360px; gap: 16px; font-size: var(--text-sm); }
.fpx-dcol h5 { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .4px; color: var(--saga-blue); font-weight: 700; padding-bottom: 4px; border-bottom: 1px dashed var(--border-default); margin-bottom: 8px; }
.fpx-kv { display: grid; grid-template-columns: 120px 1fr; gap: 4px 8px; }
.fpx-kv .k { color: var(--text-muted); } .fpx-kv .v { font-weight: 500; } .fpx-kv .v.mono { font-family: var(--font-mono); }
.fpx-sumtot { margin-top: 8px; padding: 6px 8px; background: linear-gradient(to bottom, #F0F6FE, #DCE4F0); border: 1px solid var(--saga-blue-2); display: flex; justify-content: space-between; align-items: center; }
.fpx-sumtot .l { text-transform: uppercase; font-weight: 700; color: var(--saga-blue); } .fpx-sumtot .v { font-family: var(--font-mono); font-size: 1rem; font-weight: 700; color: var(--saga-blue); }
.fpx-alert { padding: 6px 10px; font-size: var(--text-xs); border: 1px solid; border-radius: 2px; margin-top: 8px; }
.fpx-alert.warn { background: #FFFDE7; border-color: #FFCC80; color: #6B4D00; } .fpx-alert.success { background: var(--success-bg); border-color: #A5D6A7; color: #1B5E20; }
.fpx-nota { background: #FFFCE8; border: 1px solid #E0CB87; padding: 8px 10px; font-family: var(--font-mono); font-size: var(--text-xs); }
.fpx-nota .h { color: var(--saga-blue); font-weight: 700; margin-bottom: 5px; padding-bottom: 4px; border-bottom: 1px solid #E0CB87; display: flex; justify-content: space-between; gap: 8px; }
.fpx-nota table { width: 100%; } .fpx-nota td { padding: 2px 0; vertical-align: top; }
.fpx-nota td.cn { color: var(--saga-blue); font-weight: 700; width: 64px; } .fpx-nota td.lb { color: var(--text-muted); }
.fpx-nota td.d { text-align: right; color: var(--success); font-weight: 600; width: 74px; } .fpx-nota td.c { text-align: right; color: var(--info); font-weight: 600; width: 74px; }
.fpx-nota tr.sep td { border-top: 1px dashed #C9A227; color: #888; font-size: 10px; }
.fpx-nota .verif { margin-top: 6px; font-size: 10px; color: var(--success); font-weight: 600; font-family: var(--font-sans); }
@media (max-width: 1100px) { .fpx-kpis { grid-template-columns: repeat(2,1fr); } .fpx-dbody { grid-template-columns: 1fr; } }

/* =====================================================================
   Filtre GET compacte — bară slim WinMentor (global). Înlocuiește cardul
   alb voluminos pe care îl primeau automat formularele de filtrare GET.
   ===================================================================== */
.app-main form[method="get"] {
    background: linear-gradient(to bottom, #ECECEC, #D8D8D8);
    border: 1px solid var(--border-strong);
    border-radius: 2px;
    padding: 5px 8px;
    box-shadow: none;
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
    flex-wrap: wrap;
}
.app-main form[method="get"] .field { gap: 1px; }
.app-main form[method="get"] .field__label { margin-bottom: 1px; }