/* ══════════════════════════════════════════════════════════════════
   main.css — the one stylesheet every page links.

   Layered, in cascade order:

     tokens.css        palette + semantic design tokens
     components/*.css  buttons, forms, cards/surfaces, tables,
                       badges/icons, alerts/skeletons
     layout.css        the app shell (sidebar, topbar, content)
     this file         the default (dark) palette, base element styles
                       and the shared widgets that predate the layers
                       (toasts, dropdown, combobox)

   No build step: @import keeps the source split without concatenation.
   Palette themes load AFTER this file as a separate <link> and only
   restate the palette block below — every semantic token re-derives.
   ══════════════════════════════════════════════════════════════════ */

@import url("tokens.css");
@import url("components/buttons.css");
@import url("components/forms.css");
@import url("components/flatpickr.css");
@import url("components/cards.css");
@import url("components/tables.css");
@import url("components/badges.css");
@import url("components/alerts.css");
@import url("components/hints.css");
@import url("components/tooltip.css");
@import url("components/search.css");
@import url("components/shortcuts.css");
@import url("components/signature.css");
@import url("components/accountant-modal.css");
@import url("layout.css");
/* After layout.css: the export control overrides its .inv-extras
   button rules (same specificity, so order is what decides). */
@import url("components/export-menu.css");

/* ──────────────────────────────────────────────────────────────
   Default theme — dark.
   Not near-black: a slightly blue-grey base so the surface ramp
   above it has somewhere to go, and muted text sits at a readable
   contrast rather than fading out.
   ────────────────────────────────────────────────────────────── */
:root {
    --bg:              #12151c;
    --bg-card:         #191d26;
    --border:          rgba(255,255,255,0.09);
    --text:            #dcdfe7;
    --text-muted:      #9aa0ad;
    --text-white:      #ffffff;
    --accent:          #5b8def;
    --accent-darker:   #4a7ad9;
    --accent-soft:     rgba(91,141,239,0.16);
    --accent-focus-bg: rgba(91,141,239,0.06);
    --error:           #e5706b;
    --error-soft:      rgba(229,112,107,0.14);
    --warn:            #e2ac57;
    --warn-soft:       rgba(226,172,87,0.14);
    --success:         #56b96a;
    --status-paid:         #56b96a;
    --status-paid-soft:    rgba(86,185,106,0.16);
    --status-partial:      #e2ac57;
    --status-partial-soft: rgba(226,172,87,0.16);
    --status-overdue:      #e5706b;
    --status-overdue-soft: rgba(229,112,107,0.16);
    --modal-overlay:   rgba(6,8,12,0.62);
    --shadow-lg:       0 18px 60px rgba(0,0,0,0.50);
    --radius:          9px;                 /* legacy alias — see --radius-* */
    --row-alt-bg:      rgba(255,255,255,0.035);
    color-scheme:      dark;
}

/* ──────────────────────────────────────────────────────────────
   Base elements
   ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* `hidden` must win over a component's own display value — the pages
   use the attribute as "this is not here right now", and a rule like
   `.inv-grid { display: grid }` would otherwise keep it visible. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
    background: var(--bg);
    color: var(--text);
    font: var(--font-size-md)/var(--line-normal) var(--font-sans);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    /* Theme switches shouldn't flash. */
    transition: background-color var(--motion-normal) var(--ease-standard),
                color var(--motion-normal) var(--ease-standard);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}
h1, h2, h3, h4 { color: var(--text-white); letter-spacing: -0.01em; }
hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--space-6) 0; }
::selection { background: var(--accent-soft); }

/* Page heading pair used by every module page. */
.page-header h1 {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-white);
    line-height: var(--line-tight);
}
.page-sub { color: var(--text-muted); margin: 0 0 var(--space-6); }
@media (min-width: 1024px) {
    .page-header h1 { font-size: var(--font-size-3xl); }
}

/* ──────────────────────────────────────────────────────────────
   Toasts (Inv.toast)
   ────────────────────────────────────────────────────────────── */
#inv-toasts {
    position: fixed;
    bottom: var(--space-5);
    right: var(--space-5);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
@media (max-width: 767px) {
    #inv-toasts { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
}
.inv-toast {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--surface-3);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    color: var(--text);
    min-width: 220px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--motion-normal) var(--ease-standard),
                transform var(--motion-normal) var(--ease-emphasized);
}
.inv-toast-show { opacity: 1; transform: translateY(0); }
.inv-toast-error   { border-color: color-mix(in srgb, var(--error) 55%, transparent);   color: var(--error); }
.inv-toast-success { border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--success); }
.inv-toast-warn    { border-color: color-mix(in srgb, var(--warn) 55%, transparent);    color: var(--warn); }

/* ──────────────────────────────────────────────────────────────
   Shared dropdown widget (Inv.Dropdown)
   ────────────────────────────────────────────────────────────── */
.inv-dropdown {
    position: relative;
    display: flex;
    width: 100%;
}
.inv-dropdown__sr-select {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}
.inv-dropdown__trigger {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-h-md);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard);
}
.inv-dropdown[hidden] { display: none; }
.inv-dropdown.is-disabled .inv-dropdown__trigger {
    opacity: .55;
    cursor: not-allowed;
    background: var(--surface-sunken);
}
.inv-dropdown__trigger:hover:not(:disabled) { border-color: var(--border-strong); }
.inv-dropdown__trigger:focus  { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.inv-dropdown.is-open .inv-dropdown__trigger {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.inv-dropdown__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inv-dropdown__label.is-placeholder { color: var(--text-muted); }
.inv-dropdown__caret {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    transition: transform var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard);
}
.inv-dropdown.is-open .inv-dropdown__caret {
    transform: rotate(180deg);
    color: var(--accent);
}

/* Floating panel (appended to <body> by the JS — position:fixed). */
.inv-dropdown__panel {
    z-index: 10050;
    min-width: 200px;
    max-width: min(440px, calc(100vw - 1rem));
    max-height: min(360px, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-4px) scale(0.985);
    transition: opacity var(--motion-fast) var(--ease-standard),
                transform var(--motion-fast) var(--ease-emphasized);
    overflow: hidden;
}
.inv-dropdown__panel.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.inv-dropdown__search {
    flex: 0 0 auto;
    margin: var(--space-2) var(--space-2) var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font: inherit;
}
.inv-dropdown__search::placeholder { color: var(--text-muted); }
.inv-dropdown__search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}
.inv-dropdown__list {
    flex: 1 1 auto;
    overflow-y: auto;
    list-style: none;
    padding: var(--space-1);
    margin: 0;
    scrollbar-width: thin;
}
.inv-dropdown__item {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-xs);
    cursor: pointer;
    line-height: 1.3;
    color: var(--text);
    transition: background var(--motion-fast) var(--ease-standard),
                color var(--motion-fast) var(--ease-standard);
}
.inv-dropdown__item.is-active { background: var(--surface-hover); }
.inv-dropdown__item.is-selected {
    background: var(--accent-soft);
    color: var(--text-white);
    font-weight: 500;
}
.inv-dropdown__item.is-selected.is-active { background: color-mix(in srgb, var(--accent) 32%, transparent); }
.inv-dropdown__item[hidden] { display: none !important; }

/* ──────────────────────────────────────────────────────────────
   Searchable input combobox (Inv.Combobox) — shares the panel above.
   ────────────────────────────────────────────────────────────── */
.inv-combo {
    position: relative;
    display: inline-block;
    width: 100%;
}
.inv-combo > input { width: 100%; }
.inv-combo__item-secondary {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}
.inv-combo__empty {
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
    list-style: none;
}

/* Filter chips at the head of a combobox panel. A quiet row of pills:
   the panel is already a floating surface, and a second bordered box
   inside it would read as a nested control. */
.inv-combo__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-1);
    border-bottom: 1px solid var(--border-subtle);
}
.inv-combo__chip {
    padding: 2px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}
.inv-combo__chip:hover { color: var(--text); border-color: var(--border); }
.inv-combo__chip.is-on {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.inv-combo__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }