/* ===== Theme tokens — "Ambar Ledger": dense, data-first, hairline-structured ===== */
:root {
    /* ── Canvas & surfaces — warm-neutral, Stripe-quiet ── */
    --bg: #fafaf7;
    --bg-soft: #f4f4ef;
    --surface: #ffffff;
    --surface-2: #f6f6f1;

    /* ── Ink ── */
    --text: #18181b;
    --text-muted: #6b6b73;

    /* ── Hairline borders — the primary structural device ── */
    --border: #e6e6e1;
    --border-strong: #d4d4cf;

    /* ── RED accent — rationed: primary CTA, active nav, focus, key figure ── */
    --primary: #c00d0d;
    --primary-hover: #a30a0a;
    --primary-soft: rgba(192, 13, 13, 0.07);
    --on-primary: #ffffff;

    /* ── Semantics ── */
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.08);
    --success: #15803d;
    --success-soft: rgba(21, 128, 61, 0.09);
    --warning: #b45309;
    --warning-soft: rgba(180, 83, 9, 0.10);
    --info: #1d4ed8;
    --info-soft: rgba(29, 78, 216, 0.09);

    /* ── Elevation — near-flat; borders carry weight, shadow only on overlays ── */
    --shadow-sm: 0 1px 1px rgba(24, 24, 27, 0.04);
    --shadow: 0 1px 2px rgba(24, 24, 27, 0.06), 0 2px 6px rgba(24, 24, 27, 0.04);
    --shadow-lg: 0 8px 28px rgba(24, 24, 27, 0.10), 0 2px 6px rgba(24, 24, 27, 0.06);

    /* ── Geometry — tightened for a crisp, dense read ── */
    --radius-sm: 5px;
    --radius: 8px;
    --radius-lg: 12px;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);

    /* ── Dense shell metrics (drive heights everywhere) ── */
    --header-h: 52px;
    --ctrl-h: 34px;          /* buttons, inputs, selects */
    --ctrl-h-sm: 28px;       /* compact / inline controls */
    --ctrl-h-lg: 40px;       /* prominent actions */
    --row-h: 36px;           /* data + line table rows */
    --sidebar-w: 232px;

    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    color-scheme: light;
}

[data-theme="dark"] {
    /* ── Canvas & surfaces — true-neutral charcoal, layered by lightness ── */
    --bg: #0c0c0d;
    --bg-soft: #131315;
    --surface: #161618;
    --surface-2: #1f1f22;

    --text: #f4f4f5;
    --text-muted: #8b8b93;

    --border: #27272a;
    --border-strong: #3f3f46;

    --primary: #e23434;
    --primary-hover: #f24a4a;
    --primary-soft: rgba(226, 52, 52, 0.14);
    --on-primary: #ffffff;

    --danger: #f04444;
    --danger-soft: rgba(240, 68, 68, 0.15);
    --success: #34d171;
    --success-soft: rgba(52, 209, 113, 0.14);
    --warning: #e0921f;
    --warning-soft: rgba(224, 146, 31, 0.15);
    --info: #5b8def;
    --info-soft: rgba(91, 141, 239, 0.15);

    --shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.5);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 28px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);

    color-scheme: dark;
}

/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; background: var(--bg); }

/* ── Custom checkboxes ────────────────────────────────────────────────
   Fully custom — consistent across every browser, dark/light mode, and
   every context in the app. Sized to match the body font baseline.
   Radios keep accent-color (circular shape is fine); checkboxes get the
   full treatment so the tick reads clearly in both themes.              */
input[type="radio"] {
    accent-color: var(--primary);
    cursor: pointer;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.05rem;
    height: 1.05rem;
    border: 1.5px solid var(--border-strong);
    border-radius: 4px;
    background: var(--surface);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    position: relative;
    transition: border-color 0.12s var(--ease), background 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
input[type="checkbox"]:hover {
    border-color: var(--primary);
}
input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-soft);
    border-color: var(--primary);
}
input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
/* SVG tick via pseudo-element */
input[type="checkbox"]:checked::after {
    content: '';
    display: block;
    width: 0.28rem;
    height: 0.52rem;
    border: 1.75px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}
input[type="checkbox"]:indeterminate {
    background: var(--primary);
    border-color: var(--primary);
}
input[type="checkbox"]:indeterminate::after {
    content: '';
    display: block;
    width: 0.52rem;
    height: 1.75px;
    background: #fff;
    border: none;
    transform: none;
}
input[type="checkbox"]:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── Custom colour picker ─────────────────────────────────────────────
   Strip the native swatch chrome (inner border + wrapper padding) and
   render a clean rounded colour chip with our border + focus ring.      */
input[type="color"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 3rem;
    height: 2.4rem;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    overflow: hidden;
    vertical-align: middle;
    transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
input[type="color"]:hover { border-color: var(--primary); }
input[type="color"]:focus-visible {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type="color"]:disabled { opacity: 0.45; cursor: not-allowed; }
/* WebKit: kill the wrapper padding + swatch border, round the swatch */
input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: calc(var(--radius) - 4px);
}
/* Firefox */
input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: calc(var(--radius) - 4px);
}
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "tnum" 1, "cv11" 1, "ss01" 1;
    transition: background 0.25s var(--ease), color 0.25s var(--ease);
}

/* Neutralise Chrome's autofill yellow so dark-mode inputs don't go cream. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-text-fill-color: var(--text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important;
    box-shadow: 0 0 0 1000px var(--surface) inset !important;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--text);
}

h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.012em; line-height: 1.22; margin: 0 0 0.5rem; }
h1 { font-size: 1.375rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 0.975rem; }
h4 { font-size: 0.875rem; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Numbers read as a column: tabular figures everywhere a number lives */
.num, .stat-value, .seg-count, .badge, .grand .mono, .mono,
.data-table td, .data-table th, .line-table td, .line-table th {
    font-variant-numeric: tabular-nums;
}
.num { text-align: right; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--font-mono); font-size: 0.86em; letter-spacing: 0.01em; }

/* ===== Logo ===== */
.logo { display: inline-flex; color: var(--primary); }
.logo-svg { display: block; height: 100%; width: auto; }
.logo-sm { height: 22px; }
.logo-md { height: 36px; }
.logo-lg { height: 48px; }

/* ===== Buttons — 34px, weight 500, tight radius, near-flat ===== */
.btn {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    height: var(--ctrl-h);
    padding: 0 0.75rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font: inherit; font-size: 0.875rem; font-weight: 500;
    line-height: 1; white-space: nowrap; cursor: pointer; user-select: none;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: var(--border-strong); text-decoration: none; }
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.btn-primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); text-decoration: none; }
.btn-primary:active { background: var(--primary-hover); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--primary-soft); }

.btn-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); border-color: transparent; text-decoration: none; }

.btn-sm { height: var(--ctrl-h-sm); padding: 0 0.55rem; font-size: 0.8rem; }
.btn-lg { height: var(--ctrl-h-lg); padding: 0 1.1rem; font-size: 0.95rem; }
.btn-block { width: 100%; }

/* Icon button — square, 34px, hairline, quiet until hover */
.icon-btn {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--ctrl-h); height: var(--ctrl-h);
    padding: 0; border: 1px solid transparent; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted); cursor: pointer;
    transition: background .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--surface-2); }
.icon-btn:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.icon-btn > svg, .icon-btn svg { width: 18px; height: 18px; display: block; }

/* ===== Topbar chip — square 34px control for help, docs, theme, avatar ===== */
.topbar-chip {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--ctrl-h); height: var(--ctrl-h); flex: 0 0 var(--ctrl-h);
    border-radius: var(--radius-sm); border: 1px solid transparent;
    background: transparent; color: var(--text-muted); cursor: pointer; text-decoration: none;
    box-sizing: border-box; padding: 0;
    transition: background 0.12s var(--ease), color 0.12s var(--ease), border-color 0.12s var(--ease);
}
.topbar-chip:hover { color: var(--text); background: var(--surface-2); border-color: var(--border); }
.topbar-chip:focus-visible { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.topbar-chip svg { width: 18px; height: 18px; display: block; }

/* Theme toggle — same chip, swaps icons */
.theme-toggle { /* inherits .topbar-chip layout via class composition */ }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ===== Forms ===== */
.form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.8rem; font-weight: 500; color: var(--text); letter-spacing: -0.005em; }
.field .hint { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.1rem; line-height: 1.4; }

/* Client-side validation errors */
.field-error {
    font-size: 0.8rem;
    color: var(--danger, #bb1a1a);
    font-weight: 500;
    margin-top: 0.15rem;
}
.field.has-error > input,
.field.has-error > textarea,
.field.has-error > select,
.has-error > .iu-grid,
input.has-error, textarea.has-error, select.has-error {
    border-color: var(--danger, #bb1a1a) !important;
}
.form-error-banner {
    background: var(--danger-soft);
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: var(--radius);
    padding: 0.7rem 0.95rem;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}
.form-error-banner ul { margin: 0.3rem 0 0; padding-left: 1.2rem; }

/* Form controls — 34px, hairline, red focus ring. Applied globally (not
   scoped to .form) so toolbar / inline filter rows get the same treatment.
   Width stays scoped to .form so inline toolbar controls size to content. */
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
select,
textarea {
    appearance: none;
    -webkit-appearance: none;
    height: var(--ctrl-h);
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0 0.65rem;
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.4;
    transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
textarea { height: auto; min-height: 76px; padding: 0.5rem 0.65rem; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.75; }
/* Monospace for codes/identifiers — GSTIN, HSN, invoice no */
input.mono, .field-mono input { font-family: var(--font-mono); font-size: 0.84rem; letter-spacing: 0.01em; }
/* Full-width text-style inputs — but NOT checkboxes/radios/color, which keep
   their own fixed dimensions (custom appearance: none means they no longer
   resist width:100% on their own). */
.form input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .form select, .form textarea { width: 100%; }
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):hover, select:hover, textarea:hover { border-color: var(--text-muted); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
}
select {
    padding-right: 1.9rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b73' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
}

/* File input — style the wrapper, then style the browser's
   ::file-selector-button to look like a tiny btn-ghost on the left. */
input[type="file"] {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: var(--radius);
    padding: 0;
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
    overflow: hidden;
}
input[type="file"]:hover { border-color: var(--border-strong); }
input[type="file"]:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
input[type="file"]::file-selector-button {
    appearance: none;
    background: var(--surface-2);
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--text);
    padding: 0.65rem 1rem;
    margin: 0 0.85rem 0 0;
    font: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s var(--ease);
}
input[type="file"]::file-selector-button:hover { background: var(--border); }
.input-row { display: flex; gap: 0.5rem; }
.input-row .input-prefix { flex: 0 0 70px; text-align: center; }
.input-row > *:last-child { flex: 1; }

/* ===== Alerts — restrained tint, left rule ===== */
.alert {
    border-radius: var(--radius);
    padding: 0.6rem 0.8rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border);
    border-left-width: 3px;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    line-height: 1.45;
}
.alert-error { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.alert-info { background: var(--info-soft); border-color: var(--info); color: var(--info); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
/* display:flex above beats the UA [hidden] rule, so honour hidden explicitly. */
.alert[hidden] { display: none; }
[data-theme="dark"] .alert-info { color: #93b4fb; }
[data-theme="dark"] .alert-warning { color: #fbbf24; }

/* Shared brand lockup used by marketing, admin, and app sidebar. */
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }

/* ===== SaaS admin layout extras ===== */
.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}
.admin-stat {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    text-decoration: none;
    color: var(--text);
    transition: border-color 120ms;
}
a.admin-stat:hover { border-color: var(--border-strong); text-decoration: none; }
.admin-stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.admin-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
/* Table-heavy left, compact right — minmax(0,…) stops the table overflowing
   its track and squeezing the right column. */
.admin-grid--split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 920px) {
    /* minmax(0, 1fr), not 1fr: a bare fr track keeps min-width:auto, so a wide
       table inside a card stretches the track past the viewport instead of
       scrolling within its own wrapper. That blew the dashboard out to 1242px
       on a 375px screen. */
    .admin-grid, .admin-grid--split { grid-template-columns: minmax(0, 1fr); }
    .admin-grid .stack-card[style*="span 2"],
    .admin-grid .dash-card[style*="span 2"] { grid-column: auto !important; }
}
.plan-dist { list-style: none; padding: 0; margin: 0; }
.plan-dist li { padding: 0.6rem 0; border-top: 1px solid var(--border); }
.plan-dist li:first-child { border-top: none; }
.plan-dist-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    margin-bottom: 0.35rem;
}
.plan-dist-bar {
    height: 4px;
    background: var(--surface-2);
    border-radius: 999px;
    overflow: hidden;
}
.plan-dist-bar span {
    display: block;
    height: 100%;
    background: var(--primary);
    border-radius: 999px;
    min-width: 2px;
}
.nav-sep {
    height: 1px;
    background: var(--border);
    margin: 0.75rem 0.5rem;
}

/* Super-admin impersonation banner — sits above the entire app shell so the
   admin always knows whose data they're looking at. */
.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    z-index: 200;
    background: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.4rem 1rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}
.impersonation-banner .muted { color: rgba(255,255,255,0.75); }
.impersonation-banner .btn {
    background: rgba(255,255,255,0.15);
    color: var(--on-primary);
    border-color: rgba(255,255,255,0.35);
}
.impersonation-banner .btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.55);
}
/* The banner adds height above the sticky sidebar; nudge layout so it doesn't
   overlap the topbar's sticky positioning. Sidebar is fixed at 0, banner sits
   in normal flow above .page-app's flex children. */
.is-impersonating .sidebar  { top: 38px; height: calc(100vh - 38px); }
.is-impersonating .app-main { margin-top: 38px; }

/* ===== Auth layout ===== */
.page-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    background-color: var(--bg);
    background-image:
        radial-gradient(1000px 600px at 80% -10%, var(--primary-soft), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, var(--primary-soft), transparent 60%);
}
.auth-toggle { position: fixed; top: 1.25rem; right: 1.25rem; }
.auth-wrap { width: 100%; max-width: 420px; }
.auth-brand { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.auth-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow);
}
.auth-card-wide { max-width: 480px; }
.auth-card h1 { font-size: 1.4rem; margin-bottom: 0.4rem; }
.auth-sub { color: var(--text-muted); margin-bottom: 1.5rem; font-size: 0.95rem; }
.auth-foot { text-align: center; margin-top: 1.25rem; font-size: 0.9rem; color: var(--text-muted); }

/* ===== App layout ===== */
.page-app { display: flex; min-height: 100vh; }
.sidebar {
    width: var(--sidebar-w);
    background: var(--bg-soft);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 30;
    transition: transform 0.3s var(--ease);
}
.sidebar-brand {
    height: var(--header-h);
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
}
.sidebar-nav { padding: 0.6rem; display: flex; flex-direction: column; gap: 0.0625rem; flex: 1; overflow-y: auto; min-height: 0; }
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    height: 32px;
    padding: 0 0.6rem;
    position: relative;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.1s var(--ease), color 0.1s var(--ease);
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav-item.active::before {
    content: ""; position: absolute; left: -0.6rem; top: 7px; bottom: 7px; width: 2.5px;
    border-radius: 0 2px 2px 0; background: var(--primary);
}
.nav-item > svg { width: 17px; height: 17px; flex-shrink: 0; opacity: 0.85; }
.nav-item.active > svg { opacity: 1; color: var(--primary); }
.nav-item .badge { margin-left: auto; }
.nav-label { flex: 1; }

.nav-group { display: flex; flex-direction: column; }
.nav-group .nav-caret {
    width: 14px; height: 14px;
    color: var(--text-muted);
    transition: transform 0.2s var(--ease);
    flex-shrink: 0;
}
.nav-group.open .nav-caret { transform: rotate(180deg); }

.nav-children {
    display: none;
    flex-direction: column;
    gap: 0.0625rem;
    margin: 0 0 0 1.1rem;
    border-left: 1px solid var(--border);
    padding: 0 0 0 0.5rem;
}
.nav-group.open .nav-children {
    display: flex;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.nav-child {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.1s var(--ease), color 0.1s var(--ease);
}
.nav-child:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-child.active { color: var(--primary); background: var(--primary-soft); font-weight: 600; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 40;
}

.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; margin-left: var(--sidebar-w); }
.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: var(--header-h);
    padding: 0 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    gap: 0.75rem;
    flex-shrink: 0;
}
.sidebar-toggle { display: none; }
.topbar-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* margin-left:auto so the group sits right, mirroring .topbar-actions in the
   tenant layout. Without it the admin topbar bunched up against the heading. */
.topbar-right { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

/* Signed-in identity label. Deliberately not .topbar-chip: that is a fixed
   var(--ctrl-h) square with padding:0 for icon buttons, so text put inside it
   wraps and overflows. */
.topbar-user {
    display: inline-flex;
    align-items: center;
    max-width: 14rem;
    height: var(--ctrl-h);
    padding: 0 0.65rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.topbar-org { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.org-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.org-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

.user-menu { position: relative; display: inline-flex; }
.user-trigger {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
}
.user-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.user-trigger:hover .user-avatar { border-color: var(--border-strong); background: var(--surface); }
.menu-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: 0.35rem;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
    z-index: 50;
}
.user-menu.open .menu-pop { opacity: 1; transform: translateY(0); pointer-events: auto; }
.menu-header { padding: 0.6rem 0.75rem 0.5rem; border-bottom: 1px solid var(--border); margin-bottom: 0.3rem; }
.menu-name { font-weight: 500; }
.menu-item {
    display: block;
    padding: 0.55rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.9rem;
}
.menu-item:hover { background: var(--surface-2); text-decoration: none; }

/* Full-width by default — uniform across every page. Tables, voucher editors
   and dashboards fill the width; forms stay readable via .form-card (880px). */
.app-content { padding: 1.5rem 1.75rem; flex: 1; width: 100%; min-width: 0; }
.app-content--wide { max-width: none; } /* retained as a no-op alias for existing markup */
.page-header { margin-bottom: 1.1rem; }
.page-header h1 { margin-bottom: 0.15rem; }
.page-header p, .page-header .muted { color: var(--text-muted); font-size: 0.85rem; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.85rem 1rem 0.9rem;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
    transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.stat-card::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--border-strong); transition: background 0.12s var(--ease);
}
/* Full-width dashboard panel (chart, recent activity) — card look, no max-width. */
.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-sm);
}
.stat-label { color: var(--text-muted); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.stat-value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-value.is-key { color: var(--primary); }
.stat-foot { font-size: 0.78rem; margin-top: 0.35rem; font-weight: 500; color: var(--text-muted); }
.stat-foot.is-up { color: var(--success); }
.stat-foot.is-down, .stat-foot.is-risk { color: var(--danger); }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger); }
.stat-card-link,
.stat-card-link:hover,
.stat-card-link:focus,
.stat-card-link:active { text-decoration: none; color: inherit; }
.stat-card-link * { text-decoration: none !important; }
.stat-card-link { display: block; position: relative; transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease), transform 0.12s var(--ease); }
.stat-card-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.stat-card-link:hover::before { background: var(--primary); }
.stat-card-link::after {
    content: "→"; position: absolute; top: 0.85rem; right: 1rem;
    color: var(--text-muted); opacity: 0; transition: opacity 0.12s var(--ease);
}
.stat-card-link:hover::after { opacity: 0.6; }

.empty-state {
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 2rem 1.5rem;
    margin-top: 1rem;
    text-align: center;
}
.empty-state h2, .empty-state h3 { margin-bottom: 0.35rem; font-size: 1rem; color: var(--text); }
.empty-state p { color: var(--text-muted); max-width: 420px; margin: 0 auto 0.85rem; font-size: 0.88rem; line-height: 1.5; }

/* Compact empty state for inside cards — used on the admin dashboard
   placeholder cells where the parent .stack-card already supplies the box. */
.empty-mini {
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--text-muted);
}
.empty-mini-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.65rem;
}
.empty-mini-icon svg { width: 19px; height: 19px; }
.empty-mini-title {
    color: var(--text);
    font-weight: 600;
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
}
.empty-mini-text {
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0 auto 0.85rem;
    max-width: 300px;
}
.empty-mini .btn-link { font-weight: 500; }

/* ===== Page header row ===== */
.page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.back-link {
    display: inline-block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.back-link:hover { color: var(--text); text-decoration: none; }

/* ===== Tabs ===== */
.tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
}
.tab {
    padding: 0.65rem 0.9rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ===== Search bar ===== */
.search-bar {
    position: relative;
    margin-bottom: 1.25rem;
    max-width: 420px;
}
/* Inline modifier — used inside a .toolbar row alongside selects + buttons.
   Drops the standalone-only margin + max-width so flex sizing works. */
.search-bar--inline { margin-bottom: 0; max-width: none; }

/* Toolbar — a horizontal row of form controls + buttons (search + filter +
   action button). Items align on a shared baseline; gap matches the form
   stack's rhythm. */
.toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.toolbar > .search-bar { flex: 1; min-width: 240px; }

/* ──────────────────────────────────────────────────────────────
   Options-first variant builder (storefront products)
   ────────────────────────────────────────────────────────────── */
.opt-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.65rem; }
.opt-row {
    display: grid;
    grid-template-columns: 200px 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.65rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.opt-row > .opt-name input { width: 100%; }
.opt-chips {
    display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center;
    padding: 0.3rem 0.45rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 2.55rem;
}
.opt-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.18rem 0.55rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.85rem;
}
.opt-chip button {
    background: transparent; border: 0; color: var(--text-muted);
    cursor: pointer; padding: 0; line-height: 1; font-size: 1.05rem;
}
.opt-chip button:hover { color: var(--danger, #bb1a1a); }
.opt-chip-input {
    flex: 1; min-width: 100px;
    border: 0 !important; background: transparent !important;
    padding: 0.25rem 0.35rem !important; box-shadow: none !important;
    outline: none; font: inherit; color: var(--text);
}
.opt-chip-input:focus { box-shadow: none !important; }
.opt-x {
    background: transparent; border: 0; color: var(--text-muted);
    font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.4rem;
}
.opt-x:hover { color: var(--danger, #bb1a1a); }

.opt-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ──────────────────────────────────────────────────────────────
   Variant cards — one card per variant. Container is a responsive
   grid so wide screens fit multiple cards per row; narrow ones
   collapse to a single column. No fixed table columns → labels
   ("Default", "Active") render in full at every width.
   ────────────────────────────────────────────────────────────── */
.var-table {
    margin-top: 0.65rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 0.75rem;
}
.var-head { display: none; }          /* card mode — no header row */

.var-row {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 120ms, background 120ms;
}
.var-row.is-default {
    border-color: var(--primary);
    background: rgba(187, 26, 26, 0.04);
}
[data-theme="dark"] .var-row.is-default { background: rgba(255, 90, 90, 0.06); }
.var-row.is-default .var-combo-label { color: var(--primary); }

/* Card head — image · combo on one line */
.var-card-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.var-card-head .iu--inline { flex: 0 0 56px; }
.var-card-head .var-combo  { flex: 1; min-width: 0; }

.var-combo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.var-combo-label {
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.var-combo-sub {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Default + Active — own row at the bottom of the card. flex-wrap means
   that even on an impossibly narrow card the two controls stack instead
   of overlapping. */
.var-flags {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    font-size: 0.85rem;
    color: var(--text);
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    margin-top: 0.15rem;
}
.var-flags > label {
    display: flex !important;
    gap: 0.45rem;
    align-items: center;
    cursor: pointer;
    white-space: nowrap;
    position: static !important;   /* immune to any stray positioning rule */
    margin: 0;
}
.var-flags input[type="radio"],
.var-flags input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    flex: 0 0 auto;
    position: static !important;
}

/* Labelled field inside the card (item picker / price / mrp) */
.var-field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.var-field-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
}
.var-card-prices {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

/* Item picker — full card width */
.var-row .item-picker { position: relative; }
.var-row .item-picker input[type="text"] { width: 100%; }
.var-row .item-picker .results {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border: 1px solid var(--border-strong);
    border-radius: var(--radius); margin-top: 2px; max-height: 240px; overflow-y: auto;
    z-index: 30; display: none; box-shadow: var(--shadow-lg);
}
.var-row .item-picker .results.is-open { display: block; }
.var-row .item-picker .result {
    padding: 0.45rem 0.65rem; cursor: pointer; border-bottom: 1px solid var(--border);
}
.var-row .item-picker .result:last-child { border-bottom: 0; }
.var-row .item-picker .result:hover { background: var(--surface-2); }
.var-row .item-picker .result .meta { font-size: 0.78rem; color: var(--text-muted); }

.var-row input[type="number"] { width: 100%; padding: 0.5rem 0.65rem; }

.var-empty {
    padding: 1rem;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    text-align: center;
    font-size: 0.88rem;
    margin-top: 0.65rem;
    background: var(--surface);
}

@media (max-width: 600px) {
    .var-card-prices { grid-template-columns: 1fr; }
}

/* ──────────────────────────────────────────────────────────────
   Quill rich-text editor — dark-theme overrides + shared sizing.
   Used by store/pages/form, store/products/form, and anywhere else
   we drop a Quill editor.

   `!important` is necessary on the border + background here because
   quill.snow.css is `<link>`ed from within the view body, which runs
   AFTER this app.css load — same specificity, but later load wins
   on tie. This is the canonical "override third-party CSS" case.
   ────────────────────────────────────────────────────────────── */
.ql-toolbar.ql-snow {
    border-radius: var(--radius) var(--radius) 0 0;
    border: 1px solid var(--border) !important;
    background: var(--surface-2) !important;
}
.ql-container.ql-snow {
    border-radius: 0 0 var(--radius) var(--radius);
    border: 1px solid var(--border) !important;
    border-top: 0 !important;
    background: var(--surface) !important;
    color: var(--text);
    min-height: 220px;
    font-size: 1rem;
}
.ql-editor { min-height: 220px; color: var(--text); }

/* Focus ring matches the rest of the form */
.ql-container.ql-snow:focus-within {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.ql-toolbar.ql-snow + .ql-container.ql-snow:focus-within {
    /* shift the focus ring so it visually pairs with the toolbar above */
    margin-top: 0;
}
/* Placeholder — Quill defaults to near-black; restate against text-muted
   so it's visible in both themes. */
.ql-editor.ql-blank::before {
    color: var(--text-muted) !important;
    font-style: italic;
    opacity: 0.8;
}
/* Inline / link styling */
.ql-snow a { color: var(--primary); }
.ql-snow .ql-tooltip {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.ql-snow .ql-tooltip input[type="text"] {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--text-muted); }
[data-theme="dark"] .ql-snow .ql-fill   { fill:   var(--text-muted); }
[data-theme="dark"] .ql-snow .ql-picker { color:  var(--text); }
[data-theme="dark"] .ql-snow .ql-picker-options {
    background: var(--surface);
    border-color: var(--border-strong);
}
[data-theme="dark"] .ql-snow .ql-picker-options .ql-picker-item:hover { color: var(--primary); }
[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-stroke,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-stroke { stroke: var(--primary); }
[data-theme="dark"] .ql-toolbar.ql-snow button:hover .ql-fill,
[data-theme="dark"] .ql-toolbar.ql-snow button.ql-active .ql-fill   { fill:   var(--primary); }

/* Per-use modifier classes — apply when a wider editor surface is wanted */
.ql-tall .ql-container.ql-snow,
.ql-tall .ql-editor { min-height: 320px; }

/* ──────────────────────────────────────────────────────────────
   Image-uploader widgets — single + grid (card-based)
   ────────────────────────────────────────────────────────────── */

/* Single image */
.iu { position: relative; }
.iu.is-uploading { opacity: 0.6; pointer-events: none; }
.iu-drop {
    border: 2px dashed var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--text-muted);
    transition: border-color 120ms, background 120ms;
    display: flex; flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    /* Consistent baseline so dropzones don't stretch with their parent
       field's hint/label height. */
    min-height: 160px;
}
.iu-drop:hover, .iu-drop.is-drag {
    border-color: var(--primary);
    background: rgba(187,26,26,0.04);
    color: var(--text);
}
.iu-drop-icon { font-size: 1.6rem; line-height: 1; color: var(--text-muted); }
.iu-drop-text { font-weight: 500; }
.iu-drop-sub  { font-size: 0.82rem; }

.iu-preview {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
    max-width: 320px;
}
.iu-preview img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 240px;
    object-fit: cover;
}
.iu-preview .iu-actions {
    display: flex; gap: 0.4rem;
    padding: 0.5rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

/* Inline modifier — smaller, fixed-square preview (for variant rows) */
.iu--inline { width: 60px; }
.iu--inline .iu-drop {
    aspect-ratio: 1;
    min-height: 0;         /* override the wide-form floor */
    padding: 0;
    font-size: 0.78rem;
}
.iu--inline .iu-drop-icon { font-size: 1.2rem; }
.iu--inline .iu-drop-text { display: none; }
.iu--inline .iu-drop-sub  { display: none; }
.iu--inline .iu-preview { max-width: 60px; }
.iu--inline .iu-preview img { width: 60px; height: 60px; aspect-ratio: 1; object-fit: cover; max-height: none; }
.iu--inline .iu-preview .iu-actions {
    position: absolute; inset: auto 0 0 0;
    background: rgba(0,0,0,0.6);
    border-top: 0;
    padding: 0.15rem;
    justify-content: center;
    opacity: 0;
    transition: opacity 120ms;
}
.iu--inline .iu-preview:hover .iu-actions { opacity: 1; }
.iu--inline .iu-actions .btn { padding: 0.15rem 0.35rem; font-size: 0.7rem; }

/* Multi-image card grid */
.iu-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.65rem;
}
.iu-grid.is-uploading { opacity: 0.7; pointer-events: none; }
.iu-card {
    position: relative;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface-2);
}
.iu-card.is-empty {
    border-style: dashed;
    border-color: var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 0.25rem;
    align-items: center; justify-content: center;
    transition: border-color 120ms, background 120ms, color 120ms;
}
.iu-card.is-empty:hover, .iu-card.is-empty.is-drag {
    border-color: var(--primary);
    background: rgba(187,26,26,0.04);
    color: var(--text);
}
.iu-card-plus  { font-size: 1.8rem; line-height: 1; }
.iu-card-label { font-size: 0.82rem; }
.iu-card:not(.is-empty) { cursor: grab; }
.iu-card.is-dragging { opacity: 0.4; }
.iu-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iu-card-x {
    position: absolute; top: 0.35rem; right: 0.35rem;
    width: 24px; height: 24px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: 0; border-radius: 50%;
    cursor: pointer;
    line-height: 1; font-size: 1rem;
}
.iu-card-x:hover { background: rgba(0,0,0,0.85); }
.iu-card-badge {
    position: absolute; bottom: 0.35rem; left: 0.35rem;
    padding: 0.1rem 0.4rem;
    background: var(--primary);
    color: #fff;
    border-radius: 4px;
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* ──────────────────────────────────────────────────────────────
   Slug-availability indicator — sits just below the slug input.
   ────────────────────────────────────────────────────────────── */
.slug-check {
    font-size: 0.78rem;
    line-height: 1.3;
    min-height: 1.1em;
    margin-top: 0.3rem;
    color: var(--text-muted);
    transition: color 120ms;
}
.slug-check.is-checking { color: var(--text-muted); font-style: italic; }
.slug-check.is-ok       { color: var(--success, #16a34a); font-weight: 500; }
.slug-check.is-taken,
.slug-check.is-invalid  { color: var(--danger,  #bb1a1a); font-weight: 500; }

/* ──────────────────────────────────────────────────────────────
   Category chip picker (product form). Roots and their children
   are grouped; clicking a chip toggles the underlying checkbox.
   ────────────────────────────────────────────────────────────── */
.cat-picker {
    display: flex; flex-direction: column; gap: 0.85rem;
}
.cat-group {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    align-items: center;
}
.cat-chip {
    display: inline-flex; align-items: center;
    gap: 0;
    padding: 0.35rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    font-size: 0.88rem;
    line-height: 1.3;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.cat-chip:hover { border-color: var(--border-strong); background: var(--surface-2); }
/* Hide the native checkbox visually but keep it focusable + form-submittable */
.cat-chip input[type="checkbox"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.cat-chip:has(input:checked) {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary, #fff);
}
.cat-chip:has(input:checked):hover { background: var(--primary-hover, var(--primary)); }
.cat-chip:has(input:focus-visible) {
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.cat-chip--sub { font-size: 0.84rem; }
.cat-chip-sep {
    margin: 0 0.25rem;
    opacity: 0.55;
}

/* Mobile — keep the option-row stacked on narrow viewports. The variant
   cards are already responsive via their own auto-fit grid and don't
   need the old table-era overrides that used to live here. */
@media (max-width: 900px) {
    .opt-row { grid-template-columns: 1fr; }
}
.search-bar input[type="search"] {
    appearance: none;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius);
    padding: 0.6rem 2.25rem 0.6rem 2.4rem;
    font: inherit;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.search-bar input[type="search"]:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
.search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    line-height: 20px;
    text-align: center;
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 1.05rem;
    background: var(--surface-2);
}
.search-clear:hover { color: var(--text); text-decoration: none; background: var(--border); }

/* ===== Data table ===== */
.table-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
    color: var(--text);
}
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    text-align: left;
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}
.data-table thead th.num { text-align: right; }
.data-table tbody td {
    padding: 0.5rem 0.75rem;
    height: var(--row-h);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
    line-height: 1.35;
}
.data-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background 0.1s var(--ease); }
.data-table tbody tr:hover td { background: var(--surface-2); }
.data-table tbody tr[data-row-href] { cursor: pointer; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tfoot td, .data-table tfoot th {
    padding: 0.5rem 0.75rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border-strong);
    font-weight: 600;
    color: var(--text);
}
.data-table tfoot td.num, .data-table tfoot th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Row actions are ALWAYS visible — the quiet .btn-link styling keeps them
   unobtrusive; they reach full strength on row hover/focus. (Hover-only hid
   them from touch users and made them undiscoverable.) */
.data-table tbody tr .row-actions { opacity: 0.8; transition: opacity 0.1s var(--ease); }
.data-table tbody tr:hover .row-actions,
.data-table tbody tr:focus-within .row-actions { opacity: 1; }
/* Compact modifier for high-volume reports */
.data-table.is-compact tbody td { height: 30px; padding-top: 0; padding-bottom: 0; font-size: 0.8rem; }
.data-table.is-compact tbody tr:nth-child(even) td { background: transparent; }

/* Stretched link: one <a class="row-stretched-link"> in a cell, ::after fills the row.
   Gives full-row click + native right-click "Open in New Tab" + middle-click etc. */
.data-table tbody tr.has-stretched-link,
.line-table tbody tr.has-stretched-link { position: relative; cursor: pointer; }
.row-stretched-link { color: inherit; text-decoration: none; }
.row-stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.row-stretched-link:hover { text-decoration: none; color: var(--primary); }
/* Action buttons / forms in the row must sit above the stretched-link layer */
.data-table tbody tr.has-stretched-link > .row-actions,
.data-table tbody tr.has-stretched-link > .row-actions *,
.line-table tbody tr.has-stretched-link > .row-actions,
.line-table tbody tr.has-stretched-link > .row-actions * { position: relative; z-index: 2; }
.data-table .row-link { color: var(--text); font-weight: 500; }
.data-table .row-link:hover { color: var(--primary); text-decoration: none; }
.data-table .mono { font-family: var(--font-mono); font-size: 0.82em; color: var(--text-muted); }
.th-actions { width: 1%; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions > * { display: inline-block; }
.row-actions form { display: inline-block; margin-left: 0.25rem; }

.tree-indent { display: inline-flex; align-items: center; gap: 0.4rem; }
.tree-marker { color: var(--text-muted); font-size: 0.85em; }

/* ===== Badges ===== */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    height: 1.45em;
    padding: 0 0.5rem;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
    margin-left: 0.4rem;
    white-space: nowrap;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.badge:first-child { margin-left: 0; }
.badge-soft {
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.badge-success {
    background: var(--success-soft);
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
}
.badge-danger {
    background: var(--danger-soft);
    color: var(--danger);
    border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
}
.badge-info {
    background: var(--info-soft);
    color: var(--info);
    border: 1px solid color-mix(in srgb, var(--info) 28%, transparent);
}
.badge-warning {
    background: var(--warning-soft);
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 28%, transparent);
}
[data-theme="dark"] .badge-warning { color: #fbbf24; border-color: rgba(251, 191, 36, 0.3); }
[data-theme="dark"] .badge-info { color: #93b4fb; border-color: rgba(147, 180, 251, 0.3); }

/* ===== Radio cards (segmented) ===== */
.radio-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.radio-row-stack { flex-direction: column; }
.radio-card {
    flex: 1;
    min-width: 200px;           /* wider floor — prevents text-squash */
    display: flex;
    align-items: flex-start;   /* top-align so multi-line text never cuts */
    gap: 0.65rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s var(--ease), background 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.radio-card:hover { border-color: var(--border-strong); }
/* Keep the native radio visually aligned with first line of text */
.radio-card input[type="radio"] {
    accent-color: var(--primary);
    margin: 0;
    flex-shrink: 0;
    margin-top: 0.15rem;        /* nudge to baseline of first text line */
}
.radio-card:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.radio-card span { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.radio-card span strong { font-size: 0.92rem; }
.radio-card small { font-size: 0.82em; font-weight: 400; color: var(--text-muted); line-height: 1.45; }
.radio-card-wide { min-width: 0; }
.radio-card .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -0.01em; }

/* ===== Preview banner ===== */
.preview-banner {
    background:
        linear-gradient(135deg, var(--primary-soft), transparent 75%),
        var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.preview-label { color: var(--text-muted); font-size: 0.85rem; }
.preview-value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.75rem;
    font-weight: 600;
    margin-top: 0.35rem;
    letter-spacing: -0.01em;
    color: var(--text);
    word-break: break-all;
}

/* ===== Stacked form cards (multi-section form) ===== */
.stack-card { margin-bottom: 1rem; max-width: none; }
.stack-card + .stack-card { margin-top: 0; }
/* Variant that explicitly fills the available width, overriding form-card's 880px cap */
.form-card-full { max-width: none !important; width: 100%; }
.card-title { font-size: 0.975rem; font-weight: 600; margin-bottom: 0.15rem; }
.card-subtitle { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.1rem; line-height: 1.45; }
/* Adjacency spacing inside a stack-card. Cover every direction so two
   grids, a grid followed by a single field, or any pair of `.field`
   siblings get the same vertical rhythm. */
.stack-card > .field      + .form-grid,
.stack-card > .field      + .field,
.stack-card > .form-grid  + .form-grid,
.stack-card > .form-grid  + .field,
.stack-card > .preset-row + .form-grid { margin-top: 1.25rem; }
.form-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ===== Placeholder pills + preset chips ===== */
.placeholder-pill {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    color: var(--text);
    font-size: 0.82em;
    line-height: 1.4;
}
.placeholder-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
    margin: 0.75rem 0 1.1rem;
    font-size: 0.88rem;
}
.placeholder-row .muted { margin-right: 0.5rem; }

.preset-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.88rem;
}
.preset-row-label { margin-right: 0.35rem; }
.chip {
    appearance: none;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.chip:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface); }
.chip.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

/* ===== Toggle switch ===== */
.switch {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    user-select: none;
    padding: 0.55rem 0;
}
.switch > input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.switch-track {
    width: 40px;
    height: 22px;
    border-radius: 999px;
    background: var(--border-strong);
    position: relative;
    transition: background 0.2s var(--ease), box-shadow 0.15s var(--ease);
    flex-shrink: 0;
}
.switch-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s var(--ease);
}
.switch > input:checked + .switch-track { background: var(--primary); }
.switch > input:checked + .switch-track .switch-thumb { transform: translateX(18px); }
.switch > input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--primary-soft); }
.switch-label { font-size: 0.92rem; color: var(--text); }

/* ===== Read-only meta grid (used by voucher view pages) ===== */
.meta-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
    margin: 0;
}
.meta-grid dt {
    color: var(--text-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.2rem;
}
.meta-grid dd { margin: 0; font-size: 1rem; }
@media (max-width: 640px) { .meta-grid { grid-template-columns: 1fr; } }

/* ===== Numeric / mono cells ===== */
.num { text-align: right; }
.data-table .num, .line-table .num { font-variant-numeric: tabular-nums; }

/* ===== Line editor table ===== */
.line-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -0.5rem;
    padding: 0 0.5rem;
}
.line-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.84rem;
}
/* Voucher line-editors live inside .line-table-wrap (overflow-x:auto)
   and need the wide minimum so columns don't squish. Report tables
   use .line-table without a wrap and stay fluid. */
.line-table-wrap .line-table { min-width: 1200px; }
/* Inline checkbox+label under a cell input — e.g. "Tax-inclusive rate" below item search */
.row-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.row-toggle input {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}
.row-toggle:hover { color: var(--text); }
.row-toggle input:checked ~ span { color: var(--primary); }

/* ===== Barcode bar above the items table ===== */
.barcode-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--ctrl-h);
    margin-bottom: 0.85rem;
    padding: 0 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    width: 100%;
    max-width: 340px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.barcode-bar:hover { border-color: var(--text-muted); }
.barcode-bar:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.barcode-bar .barcode-icon { width: 16px; height: 16px; color: var(--text-muted); flex-shrink: 0; }
.barcode-bar input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.84rem;
    letter-spacing: 0.01em;
    outline: none;
    padding: 0;
    box-shadow: none;
    font-family: var(--font-mono);
}
.barcode-bar input:focus { box-shadow: none; border: none; }
.barcode-bar input::placeholder { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-muted); opacity: 0.9; letter-spacing: 0; }
.barcode-status {
    display: block;
    margin: -0.25rem 0 0.85rem;
    font-size: 0.85em;
    min-height: 1.1em;
}
.barcode-status-error { color: var(--danger); }
.barcode-status-ok    { color: var(--success); }
.line-table thead th {
    text-align: left;
    padding: 0.5rem 0.65rem;
    height: 34px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border-strong);
    border-top: 1px solid var(--border);
    font-weight: 600;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    white-space: nowrap;
}
.line-table thead th:first-child { border-top-left-radius: var(--radius-sm); border-left: 1px solid var(--border); }
.line-table thead th:last-child  { border-top-right-radius: var(--radius-sm); border-right: 1px solid var(--border); }
.line-table thead th.num { text-align: right; }
.line-table tbody td {
    padding: 0.2rem 0.4rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    background: var(--surface);
}
.line-table tbody td:first-child { border-left: 1px solid var(--border); }
.line-table tbody td:last-child  { border-right: 1px solid var(--border); }
.line-table tbody tr:hover td { background: var(--surface-2); }
/* When there's no thead, the first tbody row gets the top border + corners */
.line-table:not(:has(thead)) tbody tr:first-child td { border-top: 1px solid var(--border); }
.line-table:not(:has(thead)) tbody tr:first-child td:first-child { border-top-left-radius: var(--radius-sm); }
.line-table:not(:has(thead)) tbody tr:first-child td:last-child  { border-top-right-radius: var(--radius-sm); }
/* When there's no tfoot, last tbody row gets the bottom corners */
.line-table:not(:has(tfoot)) tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius-sm); }
.line-table:not(:has(tfoot)) tbody tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-sm); }
/* tfoot mirrors thead — same chrome, dark text. */
.line-table tfoot td,
.line-table tfoot th {
    text-align: left;
    padding: 0.55rem 0.65rem;
    background: var(--surface-2);
    border-top: 1px solid var(--border-strong);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
    white-space: nowrap;
}
.line-table tfoot th.num,
.line-table tfoot td.num { text-align: right; }
/* Side borders on outer cells of every footer row */
.line-table tfoot td:first-child,
.line-table tfoot th:first-child { border-left: 1px solid var(--border); }
.line-table tfoot td:last-child,
.line-table tfoot th:last-child  { border-right: 1px solid var(--border); }
/* Bottom border + corner radii only on the final footer row */
.line-table tfoot tr:last-child td,
.line-table tfoot tr:last-child th { border-bottom: 1px solid var(--border); }
.line-table tfoot tr:last-child td:first-child,
.line-table tfoot tr:last-child th:first-child { border-bottom-left-radius: var(--radius-sm); }
.line-table tfoot tr:last-child td:last-child,
.line-table tfoot tr:last-child th:last-child  { border-bottom-right-radius: var(--radius-sm); }

/* Report two-column grids: keep columns at 1fr/1fr even when one side is
   empty (grid items default to min-width:auto which is min-content). */
.report-grid > * { min-width: 0; }
.report-grid .stack-card { min-height: 7rem; }
.line-table .cell-input {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 0 0.45rem;
    font: inherit;
    font-size: 0.84rem;
    width: 100%;
    line-height: 1.3;
    height: 30px;
    transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease), background 0.12s var(--ease);
}
.line-table .cell-input:hover { border-color: var(--border-strong); background: var(--surface); }
.line-table .cell-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--surface);
    box-shadow: 0 0 0 2px var(--primary-soft);
}
.line-table .cell-input.cell-readonly {
    color: var(--text-muted);
    cursor: default;
    background: transparent;
    opacity: 0.7;
}
.line-table .cell-input.num { text-align: right; font-variant-numeric: tabular-nums; }
.line-table td.num { font-variant-numeric: tabular-nums; }

/* Native <select> in line table — add caret since appearance:none kills the default arrow */
.line-table select.cell-input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.55rem center;
    padding-right: 1.85rem;
}

.icon-btn-danger { color: var(--text-muted); }
.icon-btn-danger:hover { color: var(--danger); background: var(--danger-soft); }

/* ===== Totals ===== */
.totals-block {
    margin-left: auto;
    max-width: 360px;
}
.totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.35rem 0;
    font-size: 0.95rem;
}
.totals-row.totals-grand {
    border-top: 1px solid var(--border);
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    font-size: 1.05rem;
    font-weight: 600;
}

/* ===== POS totals — ledger rows, grand total emphasized ===== */
.pos-totals .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; font-size: 0.875rem; color: var(--text-muted); }
.pos-totals .row .mono { color: var(--text); font-variant-numeric: tabular-nums; }
.pos-totals .row.grand { margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--border-strong); font-size: 1.05rem; font-weight: 600; color: var(--text); }
.pos-totals .row.grand .mono { font-weight: 700; letter-spacing: -0.01em; }
.totals-input {
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 0 0.65rem;
    font: inherit;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
    height: var(--ctrl-h);
    text-align: right;
    width: 110px;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.totals-input:hover  { border-color: var(--border-strong); }
.totals-input:focus  { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.totals-row .reset-btn {
    background: transparent;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.2rem;
    font-size: 0.8em;
}
.totals-row .reset-btn:hover { color: var(--text); }
.totals-row .reset-btn[hidden] { display: none; }

/* ===== Cell unit suffix (under qty) ===== */
.cell-suffix {
    display: block;
    margin-top: 1px;
    text-align: right;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-muted);
    min-height: 0;
}
.cell-suffix:empty { display: none; }

/* ===== Tax-inclusive toggle bar above lines ===== */
.lines-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

/* ===== Tom Select theming — mirror .form input styling exactly ===== */
.ts-wrapper { width: 100%; display: block; margin: 0 !important; vertical-align: top; }
.ts-wrapper.single .ts-control,
.ts-wrapper.multi  .ts-control {
    background: var(--surface) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius) !important;
    color: var(--text) !important;
    font: inherit;
    font-size: 0.875rem;
    padding: 0 0.65rem !important;
    height: var(--ctrl-h);
    min-height: var(--ctrl-h);
    display: flex;
    align-items: center;
    line-height: 1.4;
    box-sizing: border-box;
    box-shadow: none !important;
    transition: border-color 0.12s var(--ease), box-shadow 0.12s var(--ease);
}
.ts-wrapper.single .ts-control > input,
.ts-wrapper.multi  .ts-control > input {
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit;
    height: auto !important;
}
.ts-wrapper.single .ts-control .item,
.ts-wrapper.multi  .ts-control .item {
    padding: 0 !important;
    margin: 0 !important;
    line-height: inherit;
}
.ts-wrapper.single .ts-control:hover,
.ts-wrapper.multi  .ts-control:hover { border-color: var(--border-strong) !important; }
.ts-wrapper.focus .ts-control {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.ts-wrapper.disabled .ts-control { background: var(--bg-soft) !important; opacity: 0.7; }

/* Cell-sized variant used inside the line-editor table — must match .cell-input exactly */
.line-table .ts-wrapper.single .ts-control,
.line-table .ts-wrapper.multi  .ts-control {
    border-radius: var(--radius-sm) !important;
    border-color: transparent !important;
    background: transparent !important;
    padding: 0 0.45rem !important;
    height: 30px;
    min-height: 30px;
    line-height: 1.3;
}
.line-table .ts-wrapper.single .ts-control:hover,
.line-table .ts-wrapper.multi  .ts-control:hover { border-color: var(--border-strong) !important; background: var(--surface) !important; }
.line-table .ts-wrapper.focus .ts-control {
    border-color: var(--primary) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 2px var(--primary-soft) !important;
}

.ts-wrapper.single .ts-control > input,
.ts-wrapper.multi  .ts-control > input,
.ts-wrapper.single .ts-control .item,
.ts-wrapper.multi  .ts-control .item { color: var(--text) !important; }
.ts-wrapper .ts-control input::placeholder { color: var(--text-muted); }

/* Caret */
.ts-wrapper.single .ts-control:after {
    border-color: var(--text-muted) transparent transparent transparent !important;
}

/* Dropdown */
.ts-dropdown {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--text) !important;
    margin-top: 4px !important;
    padding: 0.25rem !important;
}
.ts-dropdown .ts-dropdown-content { padding: 0; }
.ts-dropdown .option {
    padding: 0.55rem 0.75rem !important;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text);
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active,
.ts-dropdown .active.option {
    background: var(--primary-soft) !important;
    color: var(--primary) !important;
}
.ts-dropdown .option .ts-option-name { font-weight: 500; }
.ts-dropdown .option .ts-option-meta { color: var(--text-muted); font-size: 0.85em; margin-top: 2px; }
.ts-dropdown .option.active .ts-option-meta { color: var(--primary); opacity: 0.8; }
.ts-dropdown .no-results,
.ts-dropdown .no-results-message,
.ts-dropdown .ts-no-results {
    padding: 0.7rem 0.85rem;
    color: var(--text-muted);
    font-size: 0.9em;
}

.btn-link {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    height: auto;
    cursor: pointer;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-sm);
    transition: color 0.12s var(--ease), background 0.12s var(--ease);
}
.btn-link:hover { color: var(--text); background: var(--surface-2); }
.btn-link-danger:hover { color: var(--danger); background: var(--danger-soft); }

/* ===== Pagination ===== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
.is-disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* ===== Form card & grid ===== */
.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    max-width: 880px;
    box-shadow: var(--shadow-sm);
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 0.9rem 1.1rem;
}
.grid-span-2 { grid-column: 1 / -1; }
.form-section {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
    .form-grid { grid-template-columns: 1fr; }
    .grid-span-2 { grid-column: auto; }
    .form-card { padding: 1.25rem; }
    .pagination { justify-content: center; text-align: center; }
}

/* ===== Buttons: danger ===== */
.btn-danger {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; text-decoration: none; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== Modal ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
    opacity: 0;
    transition: opacity 0.18s var(--ease);
}
.modal-backdrop.open { display: flex; opacity: 1; }
[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.7); }

.modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 440px;
    padding: 1.5rem;
    transform: translateY(-6px) scale(0.98);
    opacity: 0;
    transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
}
.modal-backdrop.open .modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.modal h2 { margin-bottom: 0.4rem; font-size: 1.15rem; }
.modal p { margin-bottom: 1.25rem; font-size: 0.92rem; line-height: 1.5; }
.modal .form-actions {
    border-top: none;
    padding-top: 0;
    margin-top: 1rem;
}
.modal .confirm-name {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    background: var(--surface-2);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--text);
    font-size: 0.88em;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .sidebar {
        z-index: 50;
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop.open { display: block; }
    .sidebar-toggle { display: inline-flex; }
    .app-main { margin-left: 0; }
    .app-content { padding: 1.25rem; }
    /* Marketing nav/hero responsive rules live in marketing.css, which loads
       after this file — putting them here only created dead overrides. */
    .auth-card { padding: 1.5rem; }

    /* Page headers stack title-then-actions vertically */
    .page-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.85rem;
    }
    .page-header-row > form,
    .page-header-row > div:last-child { width: 100%; flex-wrap: wrap; }
    .page-header-row > form .field { flex: 1; min-width: 8rem; }

    /* Search bar is a fluid input strip on mobile */
    .search-bar { max-width: none; }

    /* Two-column report grid → single column */
    .report-grid { grid-template-columns: 1fr !important; }

    /* Voucher view header — actions wrap below */
    .has-stretched-link { -webkit-tap-highlight-color: rgba(187, 26, 26, 0.05); }

    /* Form-card actions hug right; on mobile let them wrap */
    .form-card-actions, .form-actions { flex-wrap: wrap; }

    /* Tabs row scrolls horizontally instead of wrapping */
    .tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs .tab { flex: 0 0 auto; }

    /* Wide tables: existing .table-wrap / .line-table-wrap already provide
       horizontal scroll. Just enable touch-momentum scrolling here. */
    .table-wrap, .line-table-wrap { -webkit-overflow-scrolling: touch; }

    /* Stat cards collapse to a single column under 768px (default minmax
       was 220px which fits two on a phone awkwardly) */
    .admin-stats { grid-template-columns: 1fr 1fr; }

    /* Topbar on mobile: keep it on one tight row. Hide the long org-name,
       tighten spacing, and cap the branch-switcher label so the switcher +
       chips + avatar never overflow on a phone. */
    .topbar { padding: 0 0.6rem; gap: 0.4rem; }
    .topbar-actions { gap: 0.3rem; }
    .topbar-org .org-name { display: none; }
    /* The switcher trigger is a .btn, which the mobile rule bumps to 44px
       min-height; shrink it back so it sits level with the topbar chips/badge. */
    .branch-switcher .btn { max-width: 150px; min-height: 30px; height: 30px; padding-block: 0; }
    .branch-switcher-label { max-width: 86px; }
}

/* AI assistant — floating launcher + side panel */
.ai-launcher {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
    width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--accent, #bb1a1a); color: #fff;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    display: flex; align-items: center; justify-content: center;
}
.ai-launcher:hover { transform: translateY(-1px); }
.ai-panel {
    position: fixed; right: 1.25rem; bottom: 5.5rem; z-index: 80;
    width: min(420px, 96vw); height: min(620px, 80vh);
    background: var(--surface, #fff); border: 1px solid var(--border, #d8d4cc);
    border-radius: 16px; box-shadow: 0 24px 48px rgba(0,0,0,0.18);
    display: none; flex-direction: column; overflow: hidden;
}
.ai-panel.is-open { display: flex; }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border, #d8d4cc); }
.ai-head h3 { margin: 0; font-size: 0.95rem; }
.ai-head small { color: var(--text-muted, #6b6058); font-size: 0.78rem; }
.ai-close { background: transparent; border: 0; cursor: pointer; font-size: 1.3rem; color: var(--text-muted, #6b6058); padding: 0.2rem 0.4rem; }
.ai-log { flex: 1; overflow-y: auto; padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.ai-bubble { max-width: 88%; padding: 0.65rem 0.85rem; border-radius: 14px; font-size: 0.92rem; line-height: 1.45; word-wrap: break-word; }
.ai-bubble.user      { align-self: flex-end;   background: var(--accent, #bb1a1a); color: #fff; border-bottom-right-radius: 4px; }
.ai-bubble.assistant { align-self: flex-start; background: rgba(0,0,0,0.05); color: inherit; border-bottom-left-radius: 4px; }
.ai-bubble a { color: inherit; text-decoration: underline; }
.ai-bubble pre { background: rgba(0,0,0,0.06); padding: 0.5rem 0.6rem; border-radius: 6px; overflow-x: auto; font: 0.85em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ai-bubble.user pre { background: rgba(255,255,255,0.15); }
.ai-bubble code { background: rgba(0,0,0,0.06); padding: 0.05rem 0.3rem; border-radius: 4px; font: 0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ai-bubble.user code { background: rgba(255,255,255,0.18); }
.ai-bubble h1, .ai-bubble h2, .ai-bubble h3 { margin: 0.6rem 0 0.35rem; font-weight: 600; line-height: 1.3; }
.ai-bubble h1 { font-size: 1.05rem; }
.ai-bubble h2 { font-size: 1rem; }
.ai-bubble h3 { font-size: 0.95rem; }
.ai-bubble p { margin: 0.35rem 0; }
.ai-bubble p:first-child { margin-top: 0; }
.ai-bubble p:last-child  { margin-bottom: 0; }
.ai-bubble ul, .ai-bubble ol { margin: 0.35rem 0; padding-left: 1.35rem; }
.ai-bubble li { margin: 0.1rem 0; }
.ai-bubble blockquote { margin: 0.35rem 0; padding: 0.15rem 0 0.15rem 0.65rem; border-left: 3px solid rgba(0,0,0,0.15); color: var(--text-muted, #6b6058); }
.ai-bubble.user blockquote { border-left-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); }
.ai-bubble table { border-collapse: collapse; margin: 0.5rem 0; font-size: 0.85em; width: 100%; }
.ai-bubble th, .ai-bubble td { border: 1px solid rgba(0,0,0,0.12); padding: 0.3rem 0.5rem; text-align: left; vertical-align: top; }
.ai-bubble th { background: rgba(0,0,0,0.04); font-weight: 600; }
.ai-bubble.user th, .ai-bubble.user td { border-color: rgba(255,255,255,0.25); }
.ai-bubble.user th { background: rgba(255,255,255,0.12); }
.ai-cited { font-size: 0.78em; color: var(--text-muted, #6b6058); margin-top: 0.25rem; }
.ai-cited a { color: inherit; margin-right: 0.5rem; }
.ai-empty { text-align: center; color: var(--text-muted, #6b6058); padding: 2rem 1rem; font-size: 0.9rem; }
.ai-empty .ai-suggestions { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; }
.ai-empty button { background: var(--surface, #fff); border: 1px solid var(--border, #d8d4cc); padding: 0.55rem 0.75rem; border-radius: 8px; cursor: pointer; font: inherit; text-align: left; font-size: 0.88rem; }
.ai-empty button:hover { border-color: var(--border-strong, #c8c1b8); }
.ai-form { border-top: 1px solid var(--border, #d8d4cc); padding: 0.65rem; display: flex; gap: 0.5rem; }
.ai-form textarea {
    flex: 1; resize: none; padding: 0.55rem 0.7rem; font: inherit; border: 1px solid var(--border, #d8d4cc);
    border-radius: 10px; max-height: 120px;
}
.ai-form button {
    background: var(--accent, #bb1a1a); color: #fff; border: 0; padding: 0 0.95rem; border-radius: 10px; font-weight: 600; cursor: pointer;
}
.ai-form button:disabled { opacity: 0.55; cursor: not-allowed; }

/* Knowledge-base prose — content rendered from Markdown. */
.kb-prose { line-height: 1.55; }
.kb-prose h1 { font-size: 1.6rem; margin: 1rem 0 0.65rem; }
.kb-prose h2 { font-size: 1.25rem; margin: 1.4rem 0 0.5rem; }
.kb-prose h3 { font-size: 1.05rem; margin: 1.2rem 0 0.45rem; }
.kb-prose p, .kb-prose ul, .kb-prose ol { margin: 0 0 0.85rem; }
.kb-prose ul, .kb-prose ol { padding-left: 1.5rem; }
.kb-prose li { margin: 0.2rem 0; }
.kb-prose code { font: 0.9em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: rgba(0,0,0,0.05); padding: 0.1rem 0.35rem; border-radius: 4px; }
.kb-prose pre { background: #1f1a17; color: #f8efe2; padding: 0.85rem 1rem; border-radius: 8px; overflow-x: auto; }
.kb-prose pre code { background: transparent; padding: 0; color: inherit; }
.kb-prose a { color: var(--primary, #bb1a1a); }
.kb-prose table { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; font-size: 0.95em; }
.kb-prose th, .kb-prose td { border: 1px solid var(--border, #d8d4cc); padding: 0.5rem 0.65rem; text-align: left; }
.kb-prose th { background: rgba(0,0,0,0.04); font-weight: 600; }
.kb-prose blockquote { border-left: 3px solid var(--border-strong, #c8c1b8); padding: 0.25rem 0 0.25rem 0.85rem; margin: 0.5rem 0; color: var(--text-muted, #6b6058); }

/* ──────────────────────────────────────────────────────────────
   Contextual help drawer — the "?" panel
   ────────────────────────────────────────────────────────────── */
.kb-drawer-backdrop {
    position: fixed; inset: 0; z-index: 69;
    background: rgba(0, 0, 0, 0.32);
    opacity: 0; visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}
.kb-drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.kb-drawer {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: min(460px, 100vw);
    background: var(--surface, #fff);
    border-left: 1px solid var(--border, #e7e0d2);
    box-shadow: -24px 0 48px rgba(0, 0, 0, 0.16);
    transform: translateX(100%); transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 70; display: flex; flex-direction: column;
    overflow: hidden;
}
.kb-drawer.is-open { transform: translateX(0); }

.kb-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border, #e7e0d2);
    background: var(--surface, #fff);
    flex: 0 0 auto;
}
.kb-drawer-head h3 { margin: 0; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; }
.kb-drawer-close {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted, #6b6058); padding: 0.4rem; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 120ms, color 120ms;
}
.kb-drawer-close:hover { background: rgba(0,0,0,0.06); color: var(--text, inherit); }
[data-theme="dark"] .kb-drawer-close:hover { background: rgba(255,255,255,0.08); }

.kb-drawer-content { flex: 1; overflow-y: auto; }
.kb-drawer-empty { padding: 1.25rem 1.25rem; color: var(--text-muted, #6b6058); }

.kb-drawer-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3rem 1rem; gap: 0.85rem;
}
.kb-drawer-spinner {
    width: 24px; height: 24px;
    border: 2px solid var(--border, #e7e0d2);
    border-top-color: var(--primary, #bb1a1a);
    border-radius: 50%;
    animation: kb-spin 720ms linear infinite;
}
@keyframes kb-spin { to { transform: rotate(360deg); } }

/* Hero — gradient header with eyebrow, screen title, blurb, action chips */
.kb-drawer-hero {
    padding: 1.5rem 1.5rem 1.25rem;
    background:
        radial-gradient(circle at 12% 0%, rgba(187,26,26,0.14), transparent 55%),
        linear-gradient(180deg, rgba(187,26,26,0.06), transparent 80%);
    border-bottom: 1px solid var(--border, #e7e0d2);
}
[data-theme="dark"] .kb-drawer-hero {
    background:
        radial-gradient(circle at 12% 0%, rgba(255,90,90,0.18), transparent 55%),
        linear-gradient(180deg, rgba(255,90,90,0.06), transparent 80%);
}
.kb-drawer-eyebrow {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--primary, #bb1a1a); font-weight: 700;
    margin-bottom: 0.4rem;
}
.kb-drawer-title {
    margin: 0 0 0.45rem;
    font-size: 1.35rem;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.kb-drawer-blurb {
    margin: 0 0 1rem;
    color: var(--text-muted, #6b6058);
    line-height: 1.5;
    font-size: 0.92rem;
}
.kb-drawer-actions {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.kb-drawer-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.75rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 999px;
    font-size: 0.82rem; font-weight: 500;
    color: var(--text, inherit); text-decoration: none;
    transition: border-color 120ms, color 120ms, background 120ms;
}
.kb-drawer-chip:hover {
    border-color: var(--primary, #bb1a1a);
    color: var(--primary, #bb1a1a);
}
[data-theme="dark"] .kb-drawer-chip { background: var(--surface-2, #1a1614); }

/* Body sections */
.kb-drawer-section { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border, #e7e0d2); }
.kb-drawer-section:last-child { border-bottom: 0; }
.kb-drawer-section-head { margin-bottom: 0.65rem; }
.kb-drawer-section-eyebrow {
    display: block;
    font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted, #6b6058); font-weight: 700;
    margin-bottom: 0.35rem;
}
.kb-drawer-section-head h3 { margin: 0; font-size: 1rem; letter-spacing: -0.005em; }

.kb-drawer-readmore { margin: 1rem 0 0; font-size: 0.85rem; }
.kb-drawer-readmore a { color: var(--primary, #bb1a1a); font-weight: 500; }

/* Compact prose for the drawer — tighter margins, smaller table */
.kb-prose--compact { font-size: 0.93rem; line-height: 1.55; }
.kb-prose--compact h1 { font-size: 1.1rem; margin: 1rem 0 0.4rem; }
.kb-prose--compact h2 { font-size: 0.98rem; margin: 1rem 0 0.35rem; }
.kb-prose--compact h3 { font-size: 0.9rem;  margin: 0.85rem 0 0.3rem; }
.kb-prose--compact p, .kb-prose--compact ul, .kb-prose--compact ol { margin: 0 0 0.6rem; }
.kb-prose--compact ul, .kb-prose--compact ol { padding-left: 1.2rem; }
.kb-prose--compact li { margin: 0.15rem 0; }
.kb-prose--compact table { font-size: 0.85em; }
.kb-prose--compact th, .kb-prose--compact td { padding: 0.4rem 0.55rem; }
.kb-prose--compact pre { font-size: 0.82em; padding: 0.65rem 0.85rem; }

/* Related articles */
.kb-drawer-related { background: var(--surface-2, #faf7f0); }
[data-theme="dark"] .kb-drawer-related { background: rgba(255,255,255,0.025); }
.kb-drawer-related-item {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 10px;
    background: var(--surface, #fff);
    text-decoration: none; color: inherit;
    margin-bottom: 0.5rem;
    transition: border-color 120ms;
}
.kb-drawer-related-item:last-child { margin-bottom: 0; }
.kb-drawer-related-item:hover { border-color: var(--primary, #bb1a1a); }
.kb-drawer-related-title { font-weight: 600; font-size: 0.9rem; }
.kb-drawer-related-summary { color: var(--text-muted, #6b6058); font-size: 0.8rem; line-height: 1.4; }
/* Legacy shim — old .kb-help-btn callers now use .topbar-chip styling. */

/* ──────────────────────────────────────────────────────────────
   Modern Knowledge Base — sidebar + hero + cards
   ────────────────────────────────────────────────────────────── */
.kb-hero {
    background:
        radial-gradient(circle at 18% 18%, rgba(187,26,26,0.12), transparent 55%),
        radial-gradient(circle at 88% 90%, rgba(187,26,26,0.08), transparent 55%),
        linear-gradient(135deg, #fff8ef 0%, #fff 70%);
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 18px;
    padding: 2.25rem 2rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .kb-hero {
    background:
        radial-gradient(circle at 18% 18%, rgba(255,90,90,0.14), transparent 55%),
        linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 70%);
    border-color: var(--border, #2a2520);
}
.kb-hero h1 { margin: 0 0 0.4rem; font-size: 1.9rem; letter-spacing: -0.01em; }
.kb-hero p  { margin: 0 0 1rem; color: var(--text-muted, #6b6058); max-width: 56ch; }
.kb-hero .search-bar { max-width: 580px; margin-top: 0.25rem; }
.kb-hero-stats { display: flex; gap: 1.5rem; margin-top: 1.25rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted, #6b6058); }
.kb-hero-stats strong { color: var(--text, inherit); font-weight: 600; }

.kb-shell {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
}
.kb-shell.kb-shell--article { grid-template-columns: 240px minmax(0, 1fr) 220px; }
.kb-side {
    position: sticky; top: 1rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 14px;
    padding: 1rem 0.65rem;
    font-size: 0.92rem;
}
.kb-side-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #6b6058);
    padding: 0.25rem 0.65rem 0.5rem;
    font-weight: 600;
}
.kb-side-link {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    color: inherit; text-decoration: none;
    transition: background 120ms;
}
.kb-side-link:hover { background: rgba(0,0,0,0.04); }
.kb-side-link.active { background: rgba(187,26,26,0.08); color: var(--primary, #bb1a1a); font-weight: 600; }
[data-theme="dark"] .kb-side-link:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .kb-side-link.active { background: rgba(255,90,90,0.15); }
.kb-side-link .count {
    font-size: 0.72rem; background: rgba(0,0,0,0.06); color: var(--text-muted, #6b6058);
    padding: 0.05rem 0.45rem; border-radius: 999px; font-weight: 500;
}
.kb-side-link.active .count { background: rgba(187,26,26,0.15); color: var(--primary, #bb1a1a); }

.kb-section { margin-bottom: 2rem; }
.kb-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.75rem; }
.kb-section-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -0.005em; }
.kb-section-head .muted { font-size: 0.82rem; }

.kb-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.85rem;
}
.kb-card {
    display: flex; flex-direction: column; gap: 0.4rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    text-decoration: none; color: inherit;
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.kb-card:hover {
    transform: translateY(-2px);
    border-color: var(--primary, #bb1a1a);
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.kb-card .kb-card-eyebrow {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--primary, #bb1a1a); font-weight: 600;
}
.kb-card h3 { margin: 0; font-size: 1rem; line-height: 1.35; }
.kb-card p  { margin: 0; color: var(--text-muted, #6b6058); font-size: 0.86rem; line-height: 1.45; }

.kb-results { display: flex; flex-direction: column; gap: 0.4rem; }
.kb-result {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 10px;
    background: var(--surface, #fff);
    text-decoration: none; color: inherit;
    transition: border-color 120ms;
}
.kb-result:hover { border-color: var(--primary, #bb1a1a); }
.kb-result-title { font-weight: 600; }
.kb-result-meta  { font-size: 0.78rem; color: var(--text-muted, #6b6058); }

.kb-article-head {
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border, #e7e0d2);
}
.kb-article-head .kb-eyebrow {
    display: inline-block;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--primary, #bb1a1a); font-weight: 700;
    margin-bottom: 0.4rem;
}
.kb-article-head h1 { margin: 0 0 0.35rem; letter-spacing: -0.01em; font-size: 1.95rem; }
.kb-article-head .kb-article-meta { color: var(--text-muted, #6b6058); font-size: 0.85rem; }

.kb-article-body { background: var(--surface, #fff); border: 1px solid var(--border, #e7e0d2); border-radius: 14px; padding: 1.5rem 1.75rem; }

.kb-toc {
    position: sticky; top: 1rem;
    border-left: 2px solid var(--border, #e7e0d2);
    padding: 0.25rem 0 0.25rem 0.85rem;
    font-size: 0.85rem;
}
.kb-toc-title {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted, #6b6058); font-weight: 700;
    margin-bottom: 0.6rem;
}
.kb-toc a { display: block; padding: 0.2rem 0; color: var(--text-muted, #6b6058); text-decoration: none; line-height: 1.4; }
.kb-toc a:hover, .kb-toc a.active { color: var(--primary, #bb1a1a); }
.kb-toc a.h3 { padding-left: 0.85rem; font-size: 0.82rem; }

.kb-pager { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
.kb-pager > * { flex: 1; }
.kb-pager a {
    display: block; padding: 0.85rem 1rem;
    border: 1px solid var(--border, #e7e0d2); border-radius: 10px;
    text-decoration: none; color: inherit;
    background: var(--surface, #fff);
}
.kb-pager a:hover { border-color: var(--primary, #bb1a1a); }
.kb-pager .kb-pager-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted, #6b6058); margin-bottom: 0.15rem; }
.kb-pager .kb-pager-title { font-weight: 600; }
.kb-pager .kb-pager-next { text-align: right; }

.kb-prose h2 { scroll-margin-top: 1rem; }
.kb-prose h3 { scroll-margin-top: 1rem; }

/* ──────────────────────────────────────────────────────────────
   Onboarding checklist (replaces Driver.js tours)
   ────────────────────────────────────────────────────────────── */
.onb-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 14px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.25rem;
}
.onb-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.85rem; }
.onb-head h2 { margin: 0; font-size: 1rem; }
.onb-head .muted { font-size: 0.82rem; }
.onb-progress {
    flex: 0 0 140px;
    height: 6px; background: rgba(0,0,0,0.07); border-radius: 999px; overflow: hidden;
}
.onb-progress > span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--primary, #bb1a1a), #e0593a);
    transition: width 200ms ease;
}
.onb-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.onb-item {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border, #e7e0d2);
    border-radius: 10px;
    text-decoration: none; color: inherit;
    transition: border-color 120ms, background 120ms;
}
.onb-item:hover { border-color: var(--primary, #bb1a1a); }
.onb-item.done { background: rgba(34,139,34,0.05); border-color: rgba(34,139,34,0.25); color: var(--text-muted, #6b6058); }
.onb-item.done .onb-label { text-decoration: line-through; }
.onb-tick {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--border-strong, #c8c1b8);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.78rem; color: transparent;
}
.onb-item.done .onb-tick { background: #228b22; border-color: #228b22; color: #fff; }
.onb-label { flex: 1; font-weight: 500; }
.onb-hint  { color: var(--text-muted, #6b6058); font-size: 0.8rem; }
.onb-cta { font-size: 0.8rem; color: var(--primary, #bb1a1a); font-weight: 600; }

@media (max-width: 900px) {
    .kb-shell, .kb-shell.kb-shell--article { grid-template-columns: 1fr; }
    .kb-side { position: static; }
    .kb-toc { display: none; }
}

@media (max-width: 480px) {
    .app-content { padding: 1rem; }
    .admin-stats { grid-template-columns: 1fr; }
    .form-grid { gap: 0.65rem; }
    .stack-card { padding: 1rem; }
    .page-header h1 { font-size: 1.5rem; }

    /* Dashboard KPI grid — single column on narrow phones */
    .stat-grid { grid-template-columns: 1fr; }

    /* Touch-target floors for buttons + links */
    .btn { min-height: 44px; padding-block: 0.65rem; }
    .btn-link { padding: 0.5rem 0.65rem; }

    /* Tab bar — smaller padding, easier to scroll */
    .tabs .tab { padding: 0.55rem 0.85rem; font-size: 0.92rem; }

    /* Voucher view dl meta-grid — single column */
    .meta-grid { grid-template-columns: 1fr !important; }
}

/* ─── Tabler Icon Picker ─────────────────────────────────────────── */
.ip-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(20, 16, 14, .45);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.ip-overlay[hidden] { display: none; }
.ip-panel {
    background: #fff; border-radius: 16px; box-shadow: 0 24px 80px rgba(0,0,0,.22);
    width: min(640px, 100%); max-height: 78vh;
    display: flex; flex-direction: column; overflow: hidden;
}
.ip-head {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 20px 14px; border-bottom: 1px solid var(--border, #ece8e3);
    flex-shrink: 0;
}
.ip-title { font-size: 16px; font-weight: 700; color: var(--text, #1c1917); flex-shrink: 0; }
.ip-search {
    flex: 1; height: 38px; padding: 0 12px; border: 1.5px solid var(--border, #ece8e3);
    border-radius: 10px; font-size: 14px; font-family: inherit;
    background: var(--surface-2, #faf8f5); color: var(--text, #1c1917);
    transition: border-color .15s ease;
}
.ip-search:focus { outline: none; border-color: var(--primary, #bb1a1a); }
.ip-close {
    width: 34px; height: 34px; border: none; background: var(--surface-2, #f5f3f0);
    border-radius: 8px; font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted, #78716c); flex-shrink: 0;
    transition: background .15s ease;
}
.ip-close:hover { background: var(--border, #ece8e3); }
.ip-grid {
    overflow-y: auto; padding: 12px 10px 14px;
    flex: 1; min-height: 0;
    scrollbar-width: thin;
}
.ip-section { margin-bottom: 20px; }
.ip-section:last-child { margin-bottom: 0; }
.ip-section-label {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
    color: var(--text-muted, #a8a29e); margin-bottom: 10px;
}
.ip-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ip-chip {
    width: 42px; height: 42px; border: 1.5px solid var(--border, #ece8e3);
    border-radius: 10px; background: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: var(--text, #1c1917);
    transition: border-color .12s ease, background .12s ease, transform .1s ease;
    position: relative;
}
.ip-chip:hover { border-color: var(--primary, #bb1a1a); background: #fef2f2; transform: scale(1.08); }
.ip-chip.is-active {
    border-color: var(--primary, #bb1a1a);
    background: color-mix(in srgb, var(--primary, #bb1a1a) 10%, #fff);
    color: var(--primary, #bb1a1a);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #bb1a1a) 18%, transparent);
}
.ip-chip .ti { pointer-events: none; }
.ip-empty { color: var(--text-muted, #a8a29e); font-size: 14px; text-align: center; padding: 32px 0; }

/* Assurance row editor */
.assurance-row { display: flex; align-items: center; gap: .6rem; }
.assurance-icon-preview {
    /* Square icon-only button — same border/radius token as inputs */
    width: 2.5rem; height: 2.5rem; flex-shrink: 0;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; cursor: pointer;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.assurance-icon-preview:hover { border-color: var(--border-strong); }
.assurance-icon-preview:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.assurance-icon-preview.is-empty { color: var(--text-muted); }
.assurance-icon-preview .ti { color: var(--primary); }
.assurance-label { flex: 1; }
.assurance-del {
    width: 2.5rem; height: 2.5rem; flex-shrink: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--surface);
    cursor: pointer; transition: color .15s, border-color .15s;
}
.assurance-del:hover { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }

/* ─── Icon picker: category tabs + count ────────────────────────── */
.ip-cats {
    display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    padding: 10px 18px 0; scrollbar-width: thin; flex-shrink: 0;
    border-bottom: 1px solid var(--border, #ece8e3);
    padding-bottom: 0;
}
.ip-cat {
    white-space: nowrap; padding: 8px 14px; border: none; background: none;
    border-bottom: 2.5px solid transparent; cursor: pointer; font-size: 13px;
    font-weight: 500; color: var(--text-muted, #78716c); border-radius: 0;
    transition: color .15s ease, border-color .15s ease; flex-shrink: 0;
    margin-bottom: -1px;
}
.ip-cat:hover { color: var(--text, #1c1917); }
.ip-cat.is-active { color: var(--primary, #bb1a1a); border-bottom-color: var(--primary, #bb1a1a); font-weight: 700; }
.ip-count {
    width: 100%; font-size: 11.5px; color: var(--text-muted, #a8a29e);
    padding: 6px 2px 10px; letter-spacing: .01em;
}
/* (ip-grid defined above — no override needed) */

/* ─── USP strip icon select ─────────────────────────────────────── */
.usp-icon-select {
    width: 100%; display: flex; align-items: center; gap: 0.5rem;
    padding: 0.65rem 0.75rem 0.65rem 0.85rem;  /* same as input, less right pad for chevron */
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface); color: var(--text);
    font: inherit; text-align: left; cursor: pointer;
    transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.usp-icon-select:hover  { border-color: var(--border-strong); }
.usp-icon-select:focus  { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.usp-icon-select .ti    { font-size: 1.15rem; color: var(--primary); flex-shrink: 0; }
.usp-icon-select .usp-icon-val {
    flex: 1; font-size: 0.85rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.usp-icon-select .usp-icon-placeholder { flex: 1; color: var(--text-muted); font-size: 0.9rem; }
.usp-chevron { width: 14px; height: 14px; flex-shrink: 0; color: var(--text-muted); }

/* ── Trial balance collapse / drill-down ─────────────────────────────── */
.tb-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
/* Stock report filter toolbar — fields in a responsive grid, actions on their
   own row so it never crams into a single congested line. */
.stock-toolbar {
    margin-top: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.stock-toolbar-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.85rem 1rem;
}
.stock-toolbar-fields .field { margin: 0; }
.stock-toolbar-fields .field label { margin-bottom: 0.35rem; }
.stock-toolbar-fields .field select,
.stock-toolbar-fields .field input { width: 100%; }
.stock-toolbar-search { grid-column: span 2; }
.stock-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    padding-top: 0.95rem;
}
.stock-toolbar-actions .check-row { margin: 0; white-space: nowrap; }
.stock-toolbar-spacer { flex: 1 1 auto; }
.stock-group-row { cursor: pointer; background: var(--surface-2); }
.stock-group-row:hover { background: var(--surface-3, var(--surface-2)); }
.stock-group-row td { font-size: 0.95em; }
.stock-group-row .tb-caret { color: var(--text-muted); }
.stock-row-grouped > td:first-child { padding-left: 1.5rem; }

/* Billing / trial banner */
.billing-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding: 0.7rem 1rem; border-radius: var(--radius);
    margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid var(--border);
}
.billing-banner--locked { background: var(--danger-soft); border-color: var(--danger); color: var(--text); }
.billing-banner--trial  { background: rgba(176,116,0,0.12); border-color: rgba(176,116,0,0.38); color: var(--text); }
.billing-banner .btn { flex-shrink: 0; }
.gst-fetch-note { display: block; font-size: 0.82rem; margin-top: 0.4rem; }

/* Quick-create ledger ("+" button beside a ledger picker) */
.quick-ledger-row { display: flex; gap: 0.4rem; align-items: center; }
.quick-ledger-row .ts-wrapper { flex: 1 1 auto; min-width: 0; }
/* The "+" add-ledger button — a real bordered button at control height (not a
   bare ghost), aligned to the search control beside it. */
.quick-ledger-add {
    flex: 0 0 auto;
    height: var(--ctrl-h);
    padding: 0 0.7rem;
    font-size: 1.1rem;
    line-height: 1;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text-muted);
    box-shadow: var(--shadow-sm);
}
.quick-ledger-add:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }

/* Report toolbar (auto-injected: Print + Export to Excel) */
.report-toolbar {
    display: flex; gap: 0.5rem; justify-content: flex-end;
    margin: -0.25rem 0 1rem;
}
.report-toolbar .btn { display: inline-flex; align-items: center; gap: 0.4rem; }

/* ── Print: strip the app chrome, print just the report ──────────────── */
@media print {
    /* Print ONLY the report: hide everything, reveal just .app-content. This
       also hides the body background (so no dark band), the sidebar, banners
       and the floating AI launcher — no need to enumerate them. */
    body * { visibility: hidden !important; }
    .app-content, .app-content * { visibility: visible !important; }
    .app-content {
        position: absolute !important; left: 0; top: 0;
        width: 100% !important; max-width: none !important;
        margin: 0 !important; padding: 0 !important;
    }
    html, body { background: #fff !important; }

    /* Neutralise the (possibly dark) theme inside the report → black on white. */
    .app-content, .app-content *, .app-content *::before, .app-content *::after {
        background: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: #000 !important;
        border-color: #ccc !important;
    }
    /* Controls that shouldn't print even though they live inside the report. */
    .app-content .report-toolbar, .app-content form, .app-content .btn,
    .app-content .tb-toolbar, .app-content .stock-toolbar, .app-content .search-bar,
    .app-content .pagination, .app-content .tabs, .app-content .seg-tabs,
    .app-content .back-link { display: none !important; }

    .stack-card, .form-card { border: none !important; padding: 0 !important; margin: 0 0 0.75rem !important; }
    .admin-stats { display: flex !important; gap: 1.5rem; }
    .admin-stat { border: 1px solid #bbb !important; padding: 0.5rem 0.75rem !important; }
    .line-table, .data-table { width: 100% !important; border-collapse: collapse !important; }
    .line-table thead th, .data-table thead th { border-bottom: 1.5px solid #999 !important; }
    .tree-row-group, .stock-group-row, tfoot tr { font-weight: 700 !important; }
    thead { display: table-header-group; }     /* repeat headers across pages */
    tr { page-break-inside: avoid; }
    a { text-decoration: none !important; }
    .page-header h1 { font-size: 1.4rem !important; }
    .badge { border: 1px solid #999 !important; padding: 0 0.3rem !important; }
    .muted, .text-muted, .hint, .section-sub { color: #444 !important; }
    @page { margin: 12mm; }
}
.gst-confirm-list {
    display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem;
    margin: 0 0 0.5rem; font-size: 0.9rem;
}
.gst-confirm-list dt { color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.gst-confirm-list dd { margin: 0; color: var(--text); white-space: pre-line; }
@media (max-width: 640px) {
    .stock-toolbar-search { grid-column: auto; }
    .stock-toolbar-spacer { flex-basis: 100%; }
}

.tb-search {
    display: flex; align-items: center; gap: 0.5rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 0 0.75rem; background: var(--surface); flex: 1; max-width: 360px;
}
.tb-search svg { color: var(--text-muted); flex-shrink: 0; }
.tb-search input { border: none; outline: none; background: transparent; height: 2.4rem; flex: 1; font: inherit; color: var(--text); }
.tb-toolbar-actions { display: flex; gap: 0.5rem; }

.tb-toggle { cursor: pointer; }
.tb-toggle:hover { background: var(--surface-2); }
.tb-caret {
    display: inline-block; width: 1rem; color: var(--text-muted);
    font-size: 0.7rem; margin-right: 0.25rem; user-select: none;
    transition: transform 0.12s ease;
}
.tb-caret-empty { display: inline-block; width: 1rem; margin-right: 0.25rem; }
.tb-leaf-dash { display: inline-block; margin-right: 0.4rem; font-size: 0.78rem; opacity: 0.5; }
.tb-count { font-size: 0.82em; font-weight: 400; margin-left: 0.3rem; }
.tree-row-ledger td:first-child { font-weight: 400; }
.tb-drill { margin-left: 0.6rem; font-size: 0.82rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.tb-drill:hover { text-decoration: underline; }
.back-link { display: inline-block; font-size: 0.85rem; color: var(--text-muted); text-decoration: none; margin-bottom: 0.4rem; }
.back-link:hover { color: var(--primary); }

/* ─── Admin: signup mode selector ─────────────────────────────── */
.signup-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.signup-mode-option {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 0.9rem 1rem; border: 1.5px solid var(--border);
    border-radius: 10px; cursor: pointer; transition: border-color .12s, background .12s;
    background: var(--surface);
}
.signup-mode-option:hover { border-color: var(--primary); }
.signup-mode-option.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, transparent); }
.signup-mode-option input { position: absolute; opacity: 0; pointer-events: none; }
.signup-mode-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.signup-mode-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; }
.signup-mode-option.is-active .signup-mode-dot { border-color: var(--primary); background: var(--primary); box-shadow: inset 0 0 0 2px var(--surface); }
.signup-mode-desc { font-size: 0.82rem; line-height: 1.4; }

/* ─── Segmented tabs (status filter) ──────────────────────────── */
.seg-tabs { display: inline-flex; gap: 0.15rem; background: var(--surface-2); padding: 0.2rem; border-radius: var(--radius); border: 1px solid var(--border); flex-wrap: wrap; }
.seg-tab {
    display: inline-flex; align-items: center; gap: 0.3rem;
    height: 26px; padding: 0 0.65rem; border-radius: var(--radius-sm); font-size: 0.82rem;
    color: var(--text-muted); text-decoration: none; font-weight: 500;
    transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.seg-tab:hover { color: var(--text); text-decoration: none; }
.seg-tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg-count { font-size: 0.7rem; font-weight: 600; background: var(--primary); color: var(--on-primary); border-radius: 999px; padding: 0 0.35rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.seg-tab:not(.is-active) .seg-count { background: var(--border-strong); color: var(--text-muted); }

/* Copyable signup link */
.copy-link { display: flex; gap: 0.35rem; align-items: center; max-width: 360px; }
.copy-link input {
    flex: 1; min-width: 0; font-size: 0.78rem; padding: 0.3rem 0.5rem;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
    color: var(--text); font-family: ui-monospace, monospace;
}

/* Invite-request success tick */
.auth-icon-ok {
    width: 56px; height: 56px; margin: 0 auto 0.75rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--success, #16a34a) 14%, transparent);
    color: var(--success, #16a34a);
}
.auth-icon-ok svg { width: 28px; height: 28px; }

@media (max-width: 640px) {
    .signup-mode-grid { grid-template-columns: 1fr; }
}

/* ─── Announcement banners (admin → tenants) ──────────────────── */
.announce-banner {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; padding: 0.7rem 1rem; border-radius: var(--radius);
    margin-bottom: 1rem; font-size: 0.9rem; border: 1px solid var(--border);
    background: var(--surface);
}
.announce-banner > div { display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.announce-banner strong { font-weight: 700; }
.announce-banner--info    { background: color-mix(in srgb, var(--primary) 8%, transparent); border-color: color-mix(in srgb, var(--primary) 35%, transparent); }
.announce-banner--success { background: rgba(21,128,61,0.10); border-color: rgba(21,128,61,0.35); }
.announce-banner--warning { background: rgba(176,116,0,0.12); border-color: rgba(176,116,0,0.40); }
.announce-dismiss {
    flex: 0 0 auto; background: none; border: none; cursor: pointer;
    font-size: 1.4rem; line-height: 1; color: var(--text-muted); padding: 0 0.25rem;
}
.announce-dismiss:hover { color: var(--text); }

.btn-danger-ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--danger); }
.btn-danger-ghost:hover { background: var(--danger-soft); border-color: transparent; }

/* ===== Upgrade page — app-native pricing cards (mirrors marketing pricing-tease,
   restyled for the in-app dense system; marketing.css is not loaded here) ===== */
.pricing-tease-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    align-items: stretch;
}
.pricing-tease-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;
    padding: 1.25rem 1.25rem 1.35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.pricing-tease-card--highlight {
    border-color: var(--primary);
    box-shadow: 0 0 0 1px var(--primary), var(--shadow);
}
.pricing-tease-badge {
    position: absolute; top: -9px; left: 1.25rem;
    background: var(--primary); color: var(--on-primary);
    font-size: 0.64rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.pricing-tease-name { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.pricing-tease-price { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.pricing-tease-price span { font-size: 0.85rem; font-weight: 500; color: var(--text-muted); }
.pricing-tease-list { list-style: none; padding: 0; margin: 0.1rem 0; flex: 1; }
.pricing-tease-list li {
    position: relative; padding: 0.35rem 0 0.35rem 1.4rem;
    font-size: 0.84rem; line-height: 1.45; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.pricing-tease-list li:last-child { border-bottom: none; }
.pricing-tease-list li::before { content: '✓'; position: absolute; left: 0; top: 0.35rem; color: var(--success); font-weight: 700; }
.pay-form { display: flex; flex-direction: column; margin-top: auto; }
/* CTA in the no-checkout branch (a bare .btn) also pins to the card bottom */
.pricing-tease-card > .btn { margin-top: auto; }

/* ===== Branch switcher (topbar) ===== */
.branch-switcher .btn { gap: 0.4rem; max-width: 220px; }
.branch-switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
button.menu-item { width: 100%; text-align: left; border: none; background: transparent; font: inherit; cursor: pointer; }
.menu-item.is-active { color: var(--primary); font-weight: 600; }
.branch-chip {
    display: inline-flex; align-items: center; gap: 0.35rem; height: var(--ctrl-h);
    padding: 0 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); color: var(--text-muted); font-size: 0.8rem; font-weight: 500; white-space: nowrap;
}
.branch-chip svg { opacity: 0.8; }

/* ===== Locked branch field (location set by the switcher) ===== */
.locked-field {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: var(--ctrl-h); padding: 0 0.65rem;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface-2); color: var(--text); font-size: 0.875rem; font-weight: 500;
}
.locked-field svg { color: var(--text-muted); flex-shrink: 0; }

/* GST "Fetch"/"Verify" rows: the GSTIN input grows; the button stays compact
   (the generic .input-row rule grows the last child, which here is the button). */
.input-row:has([data-gst-fetch]) > input,
.input-row:has(#gst-fetch) > input { flex: 1; }
.input-row > [data-gst-fetch],
.input-row > #gst-fetch { flex: 0 0 auto; }

/* ── Dashboard: mobile polish ─────────────────────────────────────── */
.dash-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem; padding: 0 0.25rem; }
@media (max-width: 600px) {
    /* KPI cards: 2-up instead of one long single column */
    .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
    .stat-value { font-size: 1.3rem; }
    /* Onboarding rows: the hint was crushing the label into a 3-line wrap —
       put the hint on its own line under the label. */
    .onb-item { flex-wrap: wrap; row-gap: 0.2rem; }
    .onb-label { flex: 1 1 auto; min-width: 0; }
    .onb-cta   { order: 2; margin-left: auto; flex: 0 0 auto; }
    .onb-hint  { order: 3; flex: 1 1 100%; padding-left: calc(22px + 0.85rem); }
    /* Onboarding head stacks so the progress bar isn't squeezed */
    .onb-head { flex-direction: column; align-items: stretch; gap: 0.6rem; }
    .onb-head > div:last-child { text-align: left !important; }
    .onb-progress { flex: 1 1 auto; }
}

/* ============================================================
   Voucher billing / shipping address block (voucher_address.php)
   ============================================================ */
.voucher-address .va-head { margin-bottom: 0.9rem; }
.voucher-address .va-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
.voucher-address .va-col {
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    padding: 0.85rem 0.9rem 0.95rem;
    background: var(--surface-2, var(--surface));
}
.voucher-address .va-col-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}
.voucher-address .va-col-title {
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--muted);
}
.voucher-address .va-same {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.voucher-address .va-same input { margin: 0; }
.voucher-address .addr-grid { margin-top: 0.15rem; }
.voucher-address .addr-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.65rem;
}
.voucher-address .addr-save-status { font-size: 0.78rem; }

/* "Same as billing" → collapse the shipping editor */
.voucher-address .va-col.is-same .addr-fields {
    opacity: 0.45;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    transition: max-height 0.18s ease, opacity 0.18s ease;
}
.voucher-address .va-col.is-same {
    background: repeating-linear-gradient(
        45deg,
        var(--surface-2, var(--surface)),
        var(--surface-2, var(--surface)) 10px,
        var(--surface, #fff) 10px,
        var(--surface, #fff) 20px
    );
}

@media (max-width: 720px) {
    .voucher-address .va-cols { grid-template-columns: 1fr; }
}

/* Address book panel on the party edit page (ledgers/form.php) */
.addr-book { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.addr-book-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    border: 1px solid var(--border); border-radius: var(--radius, 8px);
    padding: 0.6rem 0.75rem; background: var(--surface-2, var(--surface));
}
.addr-book-title { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.15rem; }
.addr-book-actions { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; flex-shrink: 0; }
.addr-book-actions form { margin: 0; }
.addr-book-add { margin-top: 0.5rem; }
.addr-book-add > summary {
    cursor: pointer; display: inline-block; font-size: 0.82rem; font-weight: 600;
    color: var(--primary); list-style: none; padding: 0.2rem 0;
}
.addr-book-add > summary::-webkit-details-marker { display: none; }
.addr-book-add-form { margin-top: 0.75rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }

@media (max-width: 560px) {
    .addr-book-item { flex-direction: column; gap: 0.5rem; }
}

/* Billing-only layout (purchase vouchers — no separate ship-to) */
.voucher-address .va-cols--single { grid-template-columns: minmax(0, 560px); }

/* Collapsed-by-default address summary (voucher_address.php) */
.voucher-address .va-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.voucher-address .va-summary { display: flex; flex-direction: column; gap: 0.4rem; }
.voucher-address .va-sum-row { display: flex; gap: 0.6rem; align-items: baseline; }
.voucher-address .va-sum-label {
    flex: 0 0 auto; min-width: 52px;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--muted);
}
.voucher-address .va-sum-text { font-size: 0.9rem; line-height: 1.35; }
.voucher-address .va-editor { margin-top: 0.6rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }

/* ─────────────────────────────────────────────────────────────────────
   PWA install banner (admin console; shared with any cookie-authed shell)
   Markup + behaviour come from assets/pwa.js.
   ───────────────────────────────────────────────────────────────────── */
.pwa-install[hidden] { display: none; }   /* author rule must beat the UA [hidden] */
.pwa-install {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .1);
}
.pwa-install-text { flex: 1 1 auto; font-size: 0.88rem; line-height: 1.3; }
.pwa-install-x {
    appearance: none; background: none; border: 0;
    font-size: 1.5rem; line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    flex: 0 0 auto;
    min-width: 44px; min-height: 44px;
}

/* Narrow phones: the admin topbar only has room for the heading and the two
   controls, so drop the identity label rather than let it squeeze them. */
@media (max-width: 560px) {
    .topbar-user { display: none; }
}