/* Reusable component styles shared by every page. */

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    padding: 8px var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease), border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn.primary { background: var(--accent); color: var(--text-on-accent); }
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn.primary:active:not(:disabled) { background: var(--accent-active); }

.btn.secondary { background: var(--bg-surface-2); color: var(--text-primary); border-color: var(--border); }
.btn.secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }

.btn.ghost { background: transparent; color: var(--text-secondary); }
.btn.ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }

.btn.danger { background: var(--danger-soft-bg); color: var(--danger-soft-text); }
.btn.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }

.btn.sm { padding: 5px var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn.lg { padding: 11px var(--space-6); font-size: var(--text-md); }
.btn.icon-only { padding: 8px; }
.btn.full { width: 100%; }

/* --- Cards --- */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-4); gap: var(--space-3); flex-wrap: wrap;
}
.card-title { font-size: var(--text-md); font-weight: 650; }
.card-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }

/* --- KPI stat cards --- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transition: border-color var(--duration) var(--ease);
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-card-top { display: flex; align-items: center; justify-content: space-between; }
.stat-card-label { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 550; }
.stat-card-icon {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    background: var(--accent-soft-bg); color: var(--accent-soft-text); flex-shrink: 0;
}
.stat-card-icon svg { width: 16px; height: 16px; }
.stat-card-icon.lime { background: var(--lime-soft-bg); color: var(--lime-soft-text); }
.stat-card-icon.warning { background: var(--warning-soft-bg); color: var(--warning-soft-text); }
.stat-card-icon.danger { background: var(--danger-soft-bg); color: var(--danger-soft-text); }
.stat-card-icon.info { background: var(--info-soft-bg); color: var(--info-soft-text); }
.stat-card-value { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-card-delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; width: fit-content; }
.stat-card-delta.up { color: var(--success); }
.stat-card-delta.down { color: var(--danger); }
.stat-card-delta svg { width: 12px; height: 12px; }

/* --- Badges / pills --- */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: 650; white-space: nowrap;
    background: var(--bg-surface-2); color: var(--text-secondary);
    border: 1px solid transparent;
}
.badge svg { width: 11px; height: 11px; }
.badge.success { background: var(--success-soft-bg); color: var(--success-soft-text); }
.badge.warning { background: var(--warning-soft-bg); color: var(--warning-soft-text); }
.badge.danger { background: var(--danger-soft-bg); color: var(--danger-soft-text); }
.badge.info { background: var(--info-soft-bg); color: var(--info-soft-text); }
.badge.accent { background: var(--accent-soft-bg); color: var(--accent-soft-text); }
.badge.lime { background: var(--lime-soft-bg); color: var(--lime-soft-text); }
.badge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.outline { background: transparent; border-color: var(--border-strong); color: var(--text-secondary); }

.column-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-1); }
.column-picker-option {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--text-sm);
}
.column-picker-option:hover { background: var(--bg-hover); }
.column-picker-option input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; }

/* --- Tables --- */
.table-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.table-toolbar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.table-scroll { overflow-x: auto; }

table.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
table.data-table thead th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg-surface);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}
table.data-table th.sortable { cursor: pointer; user-select: none; }
table.data-table th.sortable:hover { color: var(--text-secondary); }
table.data-table th .sort-icon { display: inline-flex; vertical-align: middle; margin-left: 4px; opacity: .55; }
table.data-table th.sorted .sort-icon { opacity: 1; color: var(--accent); }
table.data-table tbody tr { border-bottom: 1px solid var(--border); transition: background-color var(--duration-fast) var(--ease); }
table.data-table tbody tr:last-child { border-bottom: none; }
table.data-table tbody tr.clickable { cursor: pointer; }
table.data-table tbody tr.clickable:hover { background: var(--bg-hover); }
table.data-table td { padding: var(--space-3) var(--space-4); color: var(--text-primary); vertical-align: middle; }
table.data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data-table td.center { text-align: center; }
table.data-table .cell-title { font-weight: 600; }
table.data-table .cell-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }

.table-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border);
    gap: var(--space-3); flex-wrap: wrap;
}
.table-footer .range-label { font-size: var(--text-sm); color: var(--text-secondary); }
.pagination { display: flex; align-items: center; gap: 2px; }
.pagination button {
    min-width: 30px; height: 30px; padding: 0 8px;
    border-radius: var(--radius-sm); border: 1px solid transparent;
    background: transparent; color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); font-weight: 600;
}
.pagination button:hover:not(:disabled) { background: var(--bg-hover); }
.pagination button.active { background: var(--accent-soft-bg); color: var(--accent-soft-text); }
.pagination button:disabled { opacity: .4; cursor: not-allowed; }

/* --- Empty state --- */
.empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: var(--space-12) var(--space-6); color: var(--text-secondary);
}
.empty-state-icon {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-surface-2); color: var(--text-muted); margin-bottom: var(--space-4);
}
.empty-state-icon svg { width: 22px; height: 22px; }
.empty-state h3 { font-size: var(--text-md); color: var(--text-primary); margin-bottom: var(--space-1); }
.empty-state p { font-size: var(--text-sm); max-width: 360px; }
.empty-state .btn { margin-top: var(--space-4); }

/* --- Skeleton loading --- */
.skeleton {
    background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-hover) 37%, var(--bg-surface-2) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.skeleton.text { height: 14px; width: 100%; }
.skeleton.title { height: 20px; width: 40%; }
.skeleton.avatar { width: 34px; height: 34px; border-radius: 50%; }

/* --- Tabs --- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); overflow-x: auto; }
.tab-btn {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-base); font-weight: 600; color: var(--text-secondary);
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap; margin-bottom: -1px;
    display: flex; align-items: center; gap: var(--space-2);
}
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn .badge { padding: 1px 7px; }

/* --- Forms --- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.field label .req { color: var(--danger); margin-left: 2px; }
.field .hint { font-size: var(--text-xs); color: var(--text-muted); }

/* Deliberately not just input[type="text"] etc. — an <input> with no explicit type attribute at
   all (easy to forget, and several pages did) still behaves like text but doesn't match those
   attribute selectors, so it silently fell back to the unstyled browser default. Excluding the
   types that need their own native UI (checkbox/radio/range/file/color) or shouldn't be styled as
   a field (hidden/submit/button/image/reset) catches every genuine text-like input instead of
   needing to enumerate every valid HTML5 input type. */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="reset"]),
select, textarea {
    font: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-surface-2);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 9px var(--space-3);
    min-height: 40px;
    width: 100%;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
    transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
/* --text-muted fails contrast for placeholder text (~3:1 in light theme, below WCAG AA's 4.5:1) —
   --text-secondary reads clearly as "not yet typed" while staying legible in both themes. */
input::placeholder, textarea::placeholder { color: var(--text-secondary); }
input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--text-muted);
    background: var(--bg-elevated);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--shadow-focus); background: var(--bg-elevated); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; background: var(--bg-surface-2); box-shadow: none; }
textarea { resize: vertical; min-height: 80px; padding-top: 10px; }
select {
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808f8a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 38px;
    text-overflow: ellipsis;
}
select:disabled { cursor: not-allowed; }

/* Compact variant for filter bars / inline table cells, where the full 40px height feels heavy. */
.input-sm, select.input-sm, input.input-sm {
    min-height: 32px;
    padding: 5px 10px;
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}
select.input-sm { padding-right: 30px; background-position: right 8px center; background-size: 14px; }

/* Custom searchable Dropdown/DropdownItem — a themed, searchable replacement for native <select>.
   The trigger mirrors the native select's own box exactly (same tokens/radius/padding) so it drops
   into existing filter bars and forms without a layout shift; the panel below is fully custom. */
/* z-index rises only while a search input inside is focused (i.e. while its panel is open) — without
   this, an open panel that's wider than its own trigger (see min-width below) spills under an
   adjacent dropdown's trigger button, since later siblings win z-index:auto stacking ties. */
.dropdown { position: relative; display: flex; flex-direction: column; gap: 6px; }
.dropdown:focus-within { z-index: 40; }
.dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    font: inherit;
    font-size: var(--text-base);
    color: var(--text-primary);
    background: var(--bg-surface-2);
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 9px var(--space-3);
    min-height: 40px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .08);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease);
}
.dropdown-trigger:hover:not(:disabled) { border-color: var(--text-muted); background: var(--bg-elevated); }
.dropdown-trigger:focus-visible, .dropdown-trigger.open { border-color: var(--accent); box-shadow: var(--shadow-focus); background: var(--bg-elevated); }
.dropdown-trigger.invalid { border-color: var(--danger); }
.dropdown-trigger:disabled { opacity: .55; cursor: not-allowed; background: var(--bg-surface-2); box-shadow: none; }
.dropdown-trigger-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-trigger-label.placeholder { color: var(--text-muted); }
.dropdown-chevron { flex-shrink: 0; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease); }
.dropdown-trigger.open .dropdown-chevron { transform: rotate(180deg); }

/* Base position/left/right/min-width below are only the pre-JS fallback (briefly visible before
   freshytoDropdown.position runs). Once portalled to <body>, JS sets fixed/top/left/width inline,
   which override these — except min-width, which is why it's a plain px value, not a percentage:
   a percentage would resolve against the *viewport* once fixed-positioned at body level, not the
   trigger, silently blowing the panel out to full page width. */
.dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    min-width: 160px;
}
.dropdown-search {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px;
    padding: 7px 10px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.dropdown-search i, .dropdown-search svg { color: var(--text-muted); flex-shrink: 0; }
.dropdown-search input { flex: 1; min-height: 0; border: none; background: transparent; box-shadow: none; padding: 0; font-size: var(--text-sm); }
.dropdown-search input:hover, .dropdown-search input:focus { border: none; box-shadow: none; background: transparent; }
.dropdown-list { max-height: 260px; overflow-y: auto; padding: 4px; }
/* [hidden] must win over the plain-element rule below (same-element selectors, so it's purely source
   order) — without it, an option the search query has filtered out still renders, since the browser's
   built-in "[hidden] { display: none }" UA rule gets overridden by our own display:flex. This is why
   Dropdown's search box silently didn't filter anything until now (only ever used with lists small
   enough that nobody noticed every option was always shown). */
.dropdown-option[hidden] { display: none; }
.dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--text-primary);
    cursor: pointer;
}
.dropdown-option:hover { background: var(--bg-hover); }
.dropdown-option.selected { background: var(--accent-soft-bg); color: var(--accent-soft-text); }
.dropdown-option .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dropdown-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dropdown-option-sub { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs); flex-shrink: 0; }
.dropdown-option-check { margin-left: auto; color: var(--accent); flex-shrink: 0; }
.dropdown-empty { padding: var(--space-4); text-align: center; color: var(--text-muted); font-size: var(--text-sm); }

.dropdown.input-sm .dropdown-trigger { min-height: 32px; padding: 5px 10px; font-size: var(--text-sm); border-radius: var(--radius-sm); }

.search-input { position: relative; }
/* Direct-child selector matters here: Topbar's Quick Jump nests a results dropdown (with its own
   per-item icons) inside .search-input. A plain descendant selector would also absolutely-position
   those result icons against the dropdown's own positioned box (its nearest positioned ancestor),
   collapsing every row's icon onto the same spot instead of sitting next to that row's text. */
.search-input > svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-muted); pointer-events: none; }
/* !important needed: the base input rule above chains 10 :not() clauses onto `input`, which
   out-specifies this plain descendant selector — without it the icon overlaps the placeholder/text. */
.search-input input { padding-left: 32px !important; }
/* input[type="search"] (used by most .search-input instances) keeps its native OS/browser search-field
   chrome unless explicitly stripped — that native rendering can reserve its own internal padding for a
   built-in icon/cancel button, ignoring our padding-left and re-overlapping our own icon with the text.
   appearance:none makes it render like a plain text input and respect our padding everywhere. */
.search-input input[type="search"] {
    appearance: none;
    -webkit-appearance: none;
}
.search-input input[type="search"]::-webkit-search-decoration,
.search-input input[type="search"]::-webkit-search-cancel-button,
.search-input input[type="search"]::-webkit-search-results-button,
.search-input input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

.validation-message { color: var(--danger); font-size: var(--text-xs); font-weight: 550; margin-top: 2px; }
.invalid { border-color: var(--danger) !important; }

.alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm); border: 1px solid transparent; }
.alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.alert.error { background: var(--danger-soft-bg); color: var(--danger-soft-text); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.alert.success { background: var(--success-soft-bg); color: var(--success-soft-text); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.alert.info { background: var(--info-soft-bg); color: var(--info-soft-text); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.alert.warning { background: var(--warning-soft-bg); color: var(--warning-soft-text); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }

.toggle-switch { position: relative; display: inline-flex; align-items: center; width: 38px; height: 22px; }
.toggle-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.toggle-track { position: absolute; inset: 0; background: var(--bg-surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-full); transition: background-color var(--duration) var(--ease); }
.toggle-thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform var(--duration) var(--ease), background-color var(--duration) var(--ease); }
.toggle-switch input:checked ~ .toggle-track { background: var(--accent-soft-bg); border-color: var(--accent); }
.toggle-switch input:checked ~ .toggle-thumb { transform: translateX(16px); background: var(--accent); }

/* --- Modal / Drawer overlay --- */
.overlay-backdrop {
    position: fixed; inset: 0; background: rgba(4, 10, 8, .55); backdrop-filter: blur(2px);
    z-index: 200; animation: fade-in var(--duration) var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
    position: fixed; inset: 0; z-index: 201;
    display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.modal-panel {
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 520px; max-height: 88vh;
    display: flex; flex-direction: column; animation: modal-in var(--duration) var(--ease);
}
.modal-panel.wide { max-width: 760px; }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.modal-title { font-size: var(--text-lg); font-weight: 650; }
.modal-body { padding: var(--space-5); overflow-y: auto; }
.modal-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); flex-shrink: 0; }

.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
    width: 100%; max-width: 480px;
    background: var(--bg-elevated); border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
    animation: drawer-in var(--duration) var(--ease);
}
.drawer.wide { max-width: 680px; }
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-header { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: var(--space-3); }
.drawer-title { font-size: var(--text-lg); font-weight: 650; }
.drawer-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }
.drawer-body { padding: var(--space-5); overflow-y: auto; flex: 1 1 auto; }
.drawer-footer { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); flex-shrink: 0; }

.close-btn {
    width: 30px; height: 30px; border-radius: var(--radius-md); border: none; background: transparent;
    color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.close-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

/* --- Toasts --- */
.toast-host { position: fixed; top: var(--space-5); right: var(--space-5); z-index: 400; display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; }
.toast {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4); animation: toast-in var(--duration) var(--ease);
}
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
.toast-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--danger); }
.toast.info .toast-icon { color: var(--info); }
.toast-body { flex: 1; }
.toast-title { font-size: var(--text-sm); font-weight: 650; }
.toast-message { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 2px; }

.icon-spin { animation: icon-spin .8s linear infinite; transform-origin: center; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* --- Avatar --- */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--accent-soft-bg); color: var(--accent-soft-text);
    font-weight: 700; flex-shrink: 0; font-size: var(--text-sm);
}
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.avatar.md { width: 34px; height: 34px; }
.avatar.lg { width: 48px; height: 48px; font-size: var(--text-md); }

/* --- Misc layout helpers --- */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.two-col { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); align-items: start; }
.section-title { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: var(--space-3); }
.divider { height: 1px; background: var(--border); margin: var(--space-4) 0; border: none; }
.kv-list { display: flex; flex-direction: column; gap: var(--space-3); }
.kv-row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: var(--text-sm); }
.kv-row .k { color: var(--text-secondary); }
.kv-row .v { font-weight: 600; text-align: right; }

.progress-bar { height: 6px; border-radius: var(--radius-full); background: var(--bg-surface-2); overflow: hidden; }
.progress-bar-fill { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width var(--duration) var(--ease); }

/* --- Invoice line cards: one clearly-labeled block per line instead of a cramped wide table --- */
.invoice-lines { display: flex; flex-direction: column; gap: var(--space-3); }
.invoice-line-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    background: var(--bg-surface);
    transition: border-color var(--duration-fast) var(--ease);
}
.invoice-line-card.flagged { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); background: var(--danger-soft-bg); }
.data-table tr.row-flagged td { background: var(--warning-soft-bg); }
.data-table tr.row-unmatched td { background: var(--danger-soft-bg); }
.invoice-line-header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.invoice-line-index {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 26px; height: 26px; border-radius: var(--radius-full);
    background: var(--bg-surface-2); color: var(--text-secondary);
    font-size: var(--text-xs); font-weight: 700;
}
.invoice-line-fields { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.invoice-line-fields .field { justify-content: flex-end; }

@media (max-width: 720px) {
    .form-grid, .grid-2, .grid-3, .two-col { grid-template-columns: 1fr; }
}

/* Restock alerts — grouped-by-rack view (an alternative to the flat DataTable, better suited to
   walking the store rack by rack on a phone). */
.alert-groups { padding: var(--space-2) var(--space-4) var(--space-4); }
.alert-group { margin-top: var(--space-4); }
.alert-group:first-child { margin-top: var(--space-2); }
.alert-group-header {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) 0;
    font-weight: 700; font-size: var(--text-sm); color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.alert-group-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-2); color: var(--text-secondary);
    font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: normal;
}
.alert-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border);
}
.alert-row:last-child { border-bottom: none; }
.alert-row-info { flex: 1; min-width: 0; }
.alert-row-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; flex-shrink: 0; }
/* Restock quantity — the number an employee actually needs to act on, so it gets a filled pill
   rather than plain text (used both in the flat table and the grouped card rows). */
.qty-highlight {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4em; padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--accent-soft-bg); color: var(--accent-soft-text);
    font-size: var(--text-lg); font-weight: 700;
}

@media (max-width: 720px) {
    .table-toolbar { padding: var(--space-3) var(--space-4); }
    .alert-row { flex-wrap: wrap; }
    .alert-row-info { flex-basis: 100%; }
    .alert-row-stat { flex: 1 1 auto; align-items: flex-start; text-align: left; }
    .alert-row button { min-height: 44px; flex-shrink: 0; }
}