/* =====================================================================
   Hoola Finance - the portal's look (html[data-ui="newv2"]; the only look since v2.2.0)
   ---------------------------------------------------------------------
   Presentation only; every rule is scoped to html[data-ui="newv2"]. The
   layout and alignment fixes were carried over from the first redesign; the
   look is new, art-directed with the taste skill ("The quiet instrument").

   Idea: a ledger, not a dashboard, in Hoola's own colours: a deep brand-
   violet sidebar, lavender-neutral ground, and the Hoola primary #614B9F
   spent only on the action you are meant to take. No shadows on things at
   rest, no outlined boxes, no emoji icons: surfaces are separated by a step
   in tone, and colour otherwise only marks the stage a bill is at.
   ===================================================================== */

html[data-ui="newv2"] {
    --ui-accent: #614b9f;          /* Hoola primary - actions, "you are here" */
    --ui-accent-deep: #4c3a7c;     /* brand-700 - pressed / hover */
    --ui-accent-soft: #b5abd4;     /* brand-300 - violet on the dark sidebar */
    --ui-ink: #1f1833;             /* brand-950 - headings, amounts */
    --ui-ink-2: #2d2349;           /* brand-900 - running text */
    --ui-muted: #5d5578;           /* secondary text */
    --ui-faint: #8e87a6;           /* hints, placeholders */
    --ui-select: #eae7f3;          /* brand-100 - selected / hovered rows */
    --ui-ground: #eeebf5;          /* page ground */
    --ui-surface: #fbfaff;         /* working surface, one step up */
    --ui-surface-2: #f3f1f8;       /* table heads, inset areas */
    --ui-line: #ddd8ea;            /* table rules and field borders only */
    --ui-line-soft: #e9e5f2;
    --side-bg: #2d2349;            /* brand-900 sidebar */
    --side-ink: #e6e1f3;
    --side-muted: #a59cc6;

    /* Stage colours (text / wash) - from v1, made to sit with the brand violet */
    --st-manager: #a86412;  --st-manager-bg: #fbf0dc;
    --st-finance: #3f5a8a;  --st-finance-bg: #e3eaf5;
    --st-query: #23649e;    --st-query-bg: #e4eff9;
    --st-bank: #0e7064;     --st-bank-bg: #ddf1ec;
    --st-paid: #2c7a4b;     --st-paid-bg: #e3f2e8;
    --st-stop: #a8325a;     --st-stop-bg: #f9e5ec;
    --st-idle: #5f5a72;     --st-idle-bg: #eceaf2;

    --ui-radius-lg: 4px;           /* square-ish surfaces */
    --ui-radius: 3px;              /* buttons and fields: square, decided once */
    --ui-radius-sm: 2px;
    --ui-focus: 0 0 0 3px rgba(97, 75, 159, .30);
}

/* ---------------------------------------------------------------- component colours
   Generated from styles.css (scratchpad gen_v2_overrides.py): component rules there that use
   cool slate greys, white panels or gradients, re-done as Hoola's lavender neutrals and flat
   colour. Placed first so the v2 rules below win where both apply. */
html[data-ui="newv2"] #global-progress-bar { background: #4c3a7c; box-shadow: 0 0 8px rgba(61, 77, 43,.5); }
html[data-ui="newv2"] #global-loading-overlay .gp-spinner { border: 4px solid rgba(61, 77, 43,.15); }
html[data-ui="newv2"] .query-filter-btn { color: #5d5578; background-color: #fbfaff; border: 1px solid #ddd8ea; }
html[data-ui="newv2"] .query-filter-btn:hover { background-color: #f3f1f8; }
html[data-ui="newv2"] { --hf-border: #ddd8ea; --hf-muted: #5d5578; --hf-bg: #eeebf5; }
html[data-ui="newv2"] .app-sidebar { background: #fbfaff; box-shadow: 4px 0 20px rgba(31, 24, 51, .04); }
html[data-ui="newv2"] .brand-mark { background: #4c3a7c; box-shadow: 0 8px 18px rgba(79, 98, 56, .28); }
html[data-ui="newv2"] .sidebar-section-label { color: #8e87a6; }
html[data-ui="newv2"] .app-sidebar .sidebar-btn { color: #4a4263; }
html[data-ui="newv2"] .app-sidebar .sidebar-btn.bg-white\/10 { background: rgba(79, 98, 56,.05); box-shadow: inset 0 0 0 1px rgba(79, 98, 56,.08); }
html[data-ui="newv2"] .app-header { background: #4c3a7c; box-shadow: 0 4px 16px rgba(31, 24, 51,.12); }
html[data-ui="newv2"] .role-switcher-select option { background: #fbfaff; }
html[data-ui="newv2"] .form-field > label { color: #4a4263; }
html[data-ui="newv2"] .form-field > input,
html[data-ui="newv2"] .form-field > select,
html[data-ui="newv2"] .currency-field input,
html[data-ui="newv2"] .percent-field input { background: #fbfaff; color: #2d2349; }
html[data-ui="newv2"] .form-field > input:focus,
html[data-ui="newv2"] .form-field > select:focus,
html[data-ui="newv2"] .currency-field:focus-within,
html[data-ui="newv2"] .percent-field:focus-within { background: #fbfaff; box-shadow: 0 0 0 3px rgba(79, 98, 56,.10); }
html[data-ui="newv2"] .finance-card { background: #fbfaff; }
html[data-ui="newv2"] .section-icon-slate { background: #f3f1f8; color: #4a4263; }
html[data-ui="newv2"] .currency-field > span,
html[data-ui="newv2"] .percent-field > span { color: #8e87a6; }
html[data-ui="newv2"] .file-dropzone { background: #fbfaff; }
html[data-ui="newv2"] .allocation-header { background: #fbfdff; }
html[data-ui="newv2"] .add-split-btn,
html[data-ui="newv2"] .primary-action { background: #4c3a7c; box-shadow: 0 8px 18px rgba(79, 98, 56,.22); }
html[data-ui="newv2"] .add-split-btn:hover,
html[data-ui="newv2"] .primary-action:hover { box-shadow: 0 10px 22px rgba(79, 98, 56,.30); }
html[data-ui="newv2"] .secondary-action { border: 1px solid #ddd8ea; color: #4a4263; }
html[data-ui="newv2"] .allocation-card { background: #fbfaff; }
html[data-ui="newv2"] .collapse-split-btn { border: 1px solid #ddd8ea; background: #fbfaff; color: #5d5578; }
html[data-ui="newv2"] .collapse-split-btn:hover { background: #f3f1f8; color: #2d2349; }
html[data-ui="newv2"] .collapse-all-btn { color: #8e87a6; }
html[data-ui="newv2"] .collapse-all-btn:hover { color: #2d2349; }
html[data-ui="newv2"] .opt-tag { color: #8e87a6; }
html[data-ui="newv2"] .upload-page-header h2 { color: #1f1833; }
html[data-ui="newv2"] .upload-page-header p { color: #5d5578; }
html[data-ui="newv2"] .allocations-pager-arrow { border: 1px solid #ddd8ea; background: #fbfaff; }
html[data-ui="newv2"] .allocations-pager-dot { border: 1px solid #ddd8ea; background: #fbfaff; color: #5d5578; }
html[data-ui="newv2"] .allocations-pager-label { color: #5d5578; }
html[data-ui="newv2"] .upload-status-bar { border: 1px solid #ddd8ea; background: #f6f4fa; }
html[data-ui="newv2"] .upload-status-info { color: #5d5578; }
html[data-ui="newv2"] .file-tile-add { background: #fbfaff; }
html[data-ui="newv2"] .location-panel { border: 1px solid #e9e5f2; }
html[data-ui="newv2"] .location-panel-title { color: #1f1833; }
html[data-ui="newv2"] .location-panel-subtitle { color: #8e87a6; }
html[data-ui="newv2"] .location-search-input { border: 1px solid #ddd8ea; background: #fbfaff; color: #2d2349; }
html[data-ui="newv2"] .location-search-input:focus { box-shadow: 0 0 0 3px rgba(79, 98, 56,.08); }
html[data-ui="newv2"] .location-search-icon { color: #8e87a6; }
html[data-ui="newv2"] .location-dropdown { background: #fbfaff; }
html[data-ui="newv2"] .location-row { border: 1px solid #ddd8ea; background: #fbfaff; }
html[data-ui="newv2"] .loc-row-name-text { color: #1f1833; }
html[data-ui="newv2"] .location-percent-field { border: 1px solid #ddd8ea; background: #fbfaff; }
html[data-ui="newv2"] .location-percent-field span { border-right: 1px solid #ddd8ea; color: #8e87a6; }
html[data-ui="newv2"] .location-budget-bar-cell:empty::before { color: #cdc6de; }
html[data-ui="newv2"] .loc-budget-label { color: #8e87a6; }
html[data-ui="newv2"] .loc-budget-amount { color: #1f1833; }
html[data-ui="newv2"] .loc-budget-pct { color: #2d2349; }
html[data-ui="newv2"] .loc-budget-cap { color: #8e87a6; }
html[data-ui="newv2"] .loc-total-title { color: #1f1833; }
html[data-ui="newv2"] .loc-total-subtitle { color: #8e87a6; }
html[data-ui="newv2"] .loc-total-label { color: #8e87a6; }
html[data-ui="newv2"] .loc-total-value-amount { color: #1f1833; }
html[data-ui="newv2"] .empty-location-state { color: #8e87a6; background: #fbfaff; }
html[data-ui="newv2"] .budget-summary { background: #ecfdf5; }
html[data-ui="newv2"] .budget-summary-label { color: #5d5578; }
html[data-ui="newv2"] .budget-summary-danger { background: #fff1f2; }
html[data-ui="newv2"] .cl-stat-chip .cl-stat-value { color: #1f1833; }
html[data-ui="newv2"] .cl-stat-chip .cl-stat-label { color: #8e87a6; }
html[data-ui="newv2"] .cl-group { border: 1px solid #ddd8ea; background: #fbfaff; }
html[data-ui="newv2"] .cl-group:hover { border-color: #cdc6de; }
html[data-ui="newv2"] .cl-group-header { background: #ffffff; }
html[data-ui="newv2"] .cl-group-name { color: #1f1833; }
html[data-ui="newv2"] .cl-loc-row:hover { background: #f6f4fa; }
html[data-ui="newv2"] .cl-loc-name { color: #2d2349; }
html[data-ui="newv2"] .cl-badge-inactive { background: #f3f1f8; color: #5d5578; }
html[data-ui="newv2"] .cl-empty-locs { color: #8e87a6; }
html[data-ui="newv2"] .ov-bar-fill { background: #614b9f; }
html[data-ui="newv2"] .ov-bar-fill.ov-bar-other { background: #cdc6de; }
html[data-ui="newv2"] .ov-tooltip { background: #1f1833; }
html[data-ui="newv2"] .ov-tooltip:after { border-top-color: #1f1833; }
html[data-ui="newv2"] .ov-trend-col { background: #614b9f; }
html[data-ui="newv2"] .ov-trend-axis { color: #8e87a6; }
html[data-ui="newv2"] .ov-legend-item { color: #4a4263; }
html[data-ui="newv2"] .ov-insight-card { background: #ffffff; }
html[data-ui="newv2"] .ov-insight-value { color: #1f1833; }
html[data-ui="newv2"] .ov-insight-meta { color: #5d5578; }
html[data-ui="newv2"] .suggest-row input { background: #fbfaff; color: #2d2349; }
html[data-ui="newv2"] .suggest-row input:focus { box-shadow: 0 0 0 3px rgba(79, 98, 56,.10); }
html[data-ui="newv2"] .suggest-item { border: 1px solid #ddd8ea; background: #fbfaff; }
html[data-ui="newv2"] .suggest-item:hover { box-shadow: 0 2px 8px rgba(79, 98, 56,.12); }
html[data-ui="newv2"] .suggest-path { color: #1f1833; }
html[data-ui="newv2"] .suggest-reason { color: #5d5578; }
html[data-ui="newv2"] .suggest-status { color: #5d5578; }
html[data-ui="newv2"] .suggest-scope { color: #4a4263; }
html[data-ui="newv2"] .suggest-scope-note { color: #8e87a6; }
html[data-ui="newv2"] .bill-ai-card { background: #fbfaff; border: 1px solid #ddd8ea; }
html[data-ui="newv2"] .bill-ai-head { color: #1f1833; }
html[data-ui="newv2"] .bill-ai-row { border-top: 1px solid #f3f1f8; }
html[data-ui="newv2"] .bill-ai-k { color: #5d5578; }
html[data-ui="newv2"] .bill-ai-v { color: #1f1833; }
html[data-ui="newv2"] .bill-ai-v small { color: #5d5578; }
html[data-ui="newv2"] .bill-ai-row.is-missing .bill-ai-v { color: #8e87a6; }
html[data-ui="newv2"] .bill-ai-cands { color: #5d5578; }
html[data-ui="newv2"] .bill-ai-summary { border-top: 1px solid #f3f1f8; color: #2d2349; }
html[data-ui="newv2"] .bill-ai-again { background: #fbfaff; color: #4a4263; }
html[data-ui="newv2"] .bill-ai-again:hover { background: #f6f4fa; }
html[data-ui="newv2"] .ai-feature { border: 1px solid #ddd8ea; background: #fbfaff; }
html[data-ui="newv2"] .ai-feature.is-paused { background: #f6f4fa; }
html[data-ui="newv2"] .ai-feature-name { color: #1f1833; }
html[data-ui="newv2"] .ai-feature-text { color: #5d5578; }
html[data-ui="newv2"] .ai-feature-stat { color: #8e87a6; }
html[data-ui="newv2"] .ai-master { border: 1px solid #ddd8ea; background: #f6f4fa; }
html[data-ui="newv2"] .ai-master-title { color: #1f1833; }
html[data-ui="newv2"] .ai-master-text { color: #5d5578; }
html[data-ui="newv2"] .ai-slider { background: #cdc6de; }
html[data-ui="newv2"] .ai-slider::before { background: #fbfaff; }
html[data-ui="newv2"] .ai-switch input:focus-visible + .ai-slider { box-shadow: 0 0 0 3px rgba(79, 98, 56,.3); }
html[data-ui="newv2"] .name-hint-chip { background: #fbfaff; }
html[data-ui="newv2"] .bill-ai-loading { background: #fbfaff; border: 1px solid #ddd8ea; }
html[data-ui="newv2"] .bill-ai-loading-file { color: #8e87a6; }
html[data-ui="newv2"] .bill-ai-skel-row { border-top: 1px solid #f3f1f8; }
html[data-ui="newv2"] .bill-ai-skel-k { color: #cdc6de; }
html[data-ui="newv2"] .bill-ai-skel-bar { background: #eef0f4; }
html[data-ui="newv2"] .dup-modal { background: #fbfaff; }
html[data-ui="newv2"] .dup-modal h3 { color: #1f1833; }
html[data-ui="newv2"] .dup-modal-question { color: #4a4263; }
html[data-ui="newv2"] .dup-modal-question b { color: #1f1833; }
html[data-ui="newv2"] .dup-modal-yes { background: #fbfaff; }
html[data-ui="newv2"] .ai-chip { border: 1px solid #ddd8ea; background: #fbfaff; color: #4a4263; }
html[data-ui="newv2"] .ai-answer-points { color: #4a4263; }
html[data-ui="newv2"] .ai-chart-card { border: 1px solid #ddd8ea; background: #fbfaff; }
html[data-ui="newv2"] .ai-chart-title { color: #1f1833; }
html[data-ui="newv2"] .ai-legend { color: #4a4263; }
html[data-ui="newv2"] .ai-axis { fill: #5d5578; }
html[data-ui="newv2"] .ai-pie-total { fill: #1f1833; }
html[data-ui="newv2"] .ai-pie-row { color: #2d2349; }
html[data-ui="newv2"] .ai-pie-row b { color: #1f1833; }
html[data-ui="newv2"] .ai-pie-row em { color: #8e87a6; }
html[data-ui="newv2"] .ai-data { border: 1px solid #ddd8ea; }
html[data-ui="newv2"] .ai-table th { color: #8e87a6; border-bottom: 1px solid #ddd8ea; }
html[data-ui="newv2"] .ai-table td { border-bottom: 1px solid #f3f1f8; color: #2d2349; }
html[data-ui="newv2"] .ai-table tfoot td { color: #1f1833; border-top: 1px solid #ddd8ea; }
html[data-ui="newv2"] .ai-followups { color: #5d5578; }
html[data-ui="newv2"] .ai-cell-grid { border: 1px solid #ddd8ea; }
html[data-ui="newv2"] .ai-cell-grid th { color: #8e87a6; border-bottom: 1px solid #ddd8ea; }
html[data-ui="newv2"] .ai-cell-grid td { border-bottom: 1px solid #f3f1f8; color: #1f1833; }
html[data-ui="newv2"] .ai-cell-grid td small { color: #8e87a6; }
html[data-ui="newv2"] .ai-cell-empty { color: #cdc6de !important; }
html[data-ui="newv2"] .ai-cell-foot td { border-top: 1px solid #ddd8ea; }
html[data-ui="newv2"] .bcol-rupee { color: #8e87a6; }
html[data-ui="newv2"] .bcol-input { border: 1px solid #cdc6de; background: #fbfaff; color: #1f1833; }
html[data-ui="newv2"] .bcol-input:focus { box-shadow: 0 0 0 3px rgba(79, 98, 56,.15); }
@media (min-width: 640px) {
    html[data-ui="newv2"] .budget-head { color: #8e87a6; }
}


/* ---------------------------------------------------------------- type */
html[data-ui="newv2"] body,
html[data-ui="newv2"] button,
html[data-ui="newv2"] input,
html[data-ui="newv2"] select,
html[data-ui="newv2"] textarea {
    /* Symbols the app uses as icons (↥ ⟳ ⇄ …) aren't in Onest - fall back to the same
       fonts the old look used for them (system-ui draws some of them wrongly). */
    font-family: 'Archivo', 'Helvetica Neue', Arial, 'Apple Symbols', 'Segoe UI Symbol', sans-serif;
}
html[data-ui="newv2"] body.app-shell {
    background: var(--ui-ground);
    color: var(--ui-ink-2);
    font-variant-numeric: tabular-nums;     /* amounts line up in columns */
    -webkit-font-smoothing: antialiased;
}
html[data-ui="newv2"] .font-black { font-weight: 700; }
html[data-ui="newv2"] .tracking-tight { letter-spacing: -0.012em; }
/* Labels in sentence case - the old all-caps tracked labels everywhere were noise. */
html[data-ui="newv2"] .uppercase { text-transform: none; }
html[data-ui="newv2"] .tracking-wider,
html[data-ui="newv2"] .tracking-widest { letter-spacing: 0; }
/* Several components set their own all-caps tracked labels in styles.css (budget table
   heads, Overview "Top spender" tiles, chart axes...) - sentence case everywhere. */
html[data-ui="newv2"] body.app-shell * { text-transform: none !important; letter-spacing: normal; }
html[data-ui="newv2"] body.app-shell .tracking-tight { letter-spacing: -0.012em; }
html[data-ui="newv2"] h1, html[data-ui="newv2"] h2, html[data-ui="newv2"] h3 { color: var(--ui-ink); }
html[data-ui="newv2"] .text-slate-900 { color: var(--ui-ink); }
html[data-ui="newv2"] .text-slate-800 { color: var(--ui-ink); }
html[data-ui="newv2"] .text-slate-700 { color: var(--ui-ink-2); }
html[data-ui="newv2"] .text-slate-600 { color: var(--ui-ink-2); }
html[data-ui="newv2"] .text-slate-500 { color: var(--ui-muted); }
html[data-ui="newv2"] .text-slate-400 { color: var(--ui-faint); }

/* ---------------------------------------------------------------- brand colour utilities */
html[data-ui="newv2"] .bg-brand-700,
html[data-ui="newv2"] .bg-brand-600 { background-color: var(--ui-accent); }
html[data-ui="newv2"] .hover\:bg-brand-800:hover,
html[data-ui="newv2"] .bg-brand-800 { background-color: var(--ui-accent-deep); }
html[data-ui="newv2"] .text-brand-700,
html[data-ui="newv2"] .text-brand-800,
html[data-ui="newv2"] .text-brand-600 { color: var(--ui-accent); }
html[data-ui="newv2"] .bg-brand-50,
html[data-ui="newv2"] .bg-brand-100 { background-color: var(--ui-select); }
html[data-ui="newv2"] .border-brand-600,
html[data-ui="newv2"] .border-brand-500,
html[data-ui="newv2"] .border-brand-700 { border-color: var(--ui-accent); }
html[data-ui="newv2"] .border-slate-200 { border-color: var(--ui-line); }
html[data-ui="newv2"] .border-slate-100 { border-color: var(--ui-line-soft); }
html[data-ui="newv2"] .bg-slate-50 { background-color: var(--ui-surface-2); }
html[data-ui="newv2"] .hover\:bg-slate-50:hover { background-color: var(--ui-select); }
html[data-ui="newv2"] .bg-slate-100 { background-color: var(--ui-surface-2); }

/* ---------------------------------------------------------------- sidebar */
html[data-ui="newv2"] .app-sidebar {
    background: var(--side-bg);
    border-right: 0;
    box-shadow: none;
    color: var(--side-ink);
}
/* The Hoola wordmark is a purple image - shown in white on the ink panel. */
html[data-ui="newv2"] .app-sidebar .logo img { filter: brightness(0) invert(1); opacity: .95; }
html[data-ui="newv2"] .app-sidebar .text-slate-900 { color: #fff; }
html[data-ui="newv2"] .sidebar-section-label,
html[data-ui="newv2"] .app-sidebar .sidebar-nav > div:not(.sidebar-btn) {
    color: var(--side-muted);
    font-size: 11px;
    font-weight: 600;
}
html[data-ui="newv2"] .app-sidebar .sidebar-btn {
    color: var(--side-ink);
    border-left: 3px solid transparent;
    border-radius: 0 var(--ui-radius-sm) var(--ui-radius-sm) 0;
    font-size: 13px;
    font-weight: 500;
    padding-top: .55rem;
    padding-bottom: .55rem;
    transform: none;
}
html[data-ui="newv2"] .app-sidebar .sidebar-btn:hover {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    transform: none;
}
html[data-ui="newv2"] .app-sidebar .sidebar-btn.bg-white\/10 {
    background: rgba(255, 255, 255, .12);
    border-left-color: var(--ui-accent-soft);
    color: #fff;
    box-shadow: none;
    font-weight: 600;
}
/* Emoji icons go quiet (monochrome) and only light up on the page you're on. */
html[data-ui="newv2"] .app-sidebar .sidebar-btn > span > span:first-child {
    filter: grayscale(1) brightness(1.6);
    opacity: .7;
    width: 18px;
    text-align: center;
}
html[data-ui="newv2"] .app-sidebar .sidebar-btn.bg-white\/10 > span > span:first-child,
html[data-ui="newv2"] .app-sidebar .sidebar-btn:hover > span > span:first-child { filter: none; opacity: 1; }
html[data-ui="newv2"] .notif-badge {
    background: #f0a531;
    color: #2a1d02;
    font-weight: 700;
    box-shadow: none;
}
html[data-ui="newv2"] .sidebar-signout {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .14);
    color: var(--side-ink);
}
html[data-ui="newv2"] .sidebar-signout:hover { background: rgba(255, 255, 255, .06); color: #fff; }
html[data-ui="newv2"] .sidebar-nav { scrollbar-color: rgba(255,255,255,.18) transparent; }
html[data-ui="newv2"] .sidebar-nav::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.18); }

/* ---------------------------------------------------------------- header */
html[data-ui="newv2"] .app-header {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-line);
    box-shadow: none;
    padding-top: .8rem;
    padding-bottom: .8rem;
}
html[data-ui="newv2"] .app-header #welcome-header {
    color: var(--ui-ink) !important;   /* old rule forced white for the purple header */
    font-size: 18px;
    font-weight: 700;
}
html[data-ui="newv2"] .app-header .role-chip,
html[data-ui="newv2"] #role-badge {
    background: var(--ui-select);
    color: var(--ui-accent);
    border: 0;
    font-size: 11px;
    font-weight: 600;
}
html[data-ui="newv2"] #role-switcher .text-white\/70 { color: var(--ui-muted); }
html[data-ui="newv2"] .role-switcher-select {
    background: var(--ui-ground);
    color: var(--ui-ink-2);
    border: 1px solid var(--ui-line);
}
html[data-ui="newv2"] #managed-departments,
html[data-ui="newv2"] #managed-departments .text-white\/70 { color: var(--ui-muted); }
html[data-ui="newv2"] #managed-departments .rounded-full {
    background: var(--ui-ground);
    color: var(--ui-ink-2);
    border: 1px solid var(--ui-line);
}
html[data-ui="newv2"] .app-main { background: var(--ui-ground); }

/* ---------------------------------------------------------------- surfaces */
html[data-ui="newv2"] .finance-card,
html[data-ui="newv2"] .allocation-card,
html[data-ui="newv2"] .help-card {
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    box-shadow: 0 1px 0 rgba(31, 24, 51, .03);
}
/* The old purple stripe on top of every card read as decoration - removed. */
html[data-ui="newv2"] .finance-card::before { display: none; }
html[data-ui="newv2"] .card-header {
    background: var(--ui-surface);
    border-bottom: 1px solid var(--ui-line);
    border-top: 0;                      /* old purple accent stripe on every card */
}
html[data-ui="newv2"] .section-icon {
    background: var(--ui-select);
    color: var(--ui-accent);
    border-radius: var(--ui-radius);
    box-shadow: none;
}
html[data-ui="newv2"] .rounded-2xl { border-radius: var(--ui-radius-lg); }
html[data-ui="newv2"] .rounded-xl { border-radius: var(--ui-radius); }
html[data-ui="newv2"] .shadow-xs,
html[data-ui="newv2"] .shadow-sm { box-shadow: 0 1px 0 rgba(31, 24, 51, .04); }

/* ---------------------------------------------------------------- tables */
html[data-ui="newv2"] table thead tr,
html[data-ui="newv2"] table thead tr.bg-slate-50 { background: var(--ui-surface-2); }
html[data-ui="newv2"] table thead th {
    color: var(--ui-muted);
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid var(--ui-line);
}
html[data-ui="newv2"] table tbody tr { transition: background-color .12s ease; }
html[data-ui="newv2"] table tbody tr:hover { background-color: var(--ui-surface-2); }
html[data-ui="newv2"] .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
html[data-ui="newv2"] .divide-slate-50 > :not([hidden]) ~ :not([hidden]) { border-color: var(--ui-line-soft); }

/* Pills and chips never break across lines (a wrapped pill split its background in two). */
html[data-ui="newv2"] span.rounded-full,
html[data-ui="newv2"] .status-pill { white-space: nowrap; }
/* Row action buttons (Ready / Edit / Query / Reject / Junk...): a tidy right-aligned wrap
   with even gaps, wide enough that the last button never ends up alone on a third line. */
html[data-ui="newv2"] td.space-x-1 { min-width: 196px; }
/* Request numbers (INV-1791525320-9E2F-1...) are references people read and copy - never
   broken over lines; the other columns give way instead. */
html[data-ui="newv2"] td:first-child .font-mono { white-space: nowrap; }
html[data-ui="newv2"] td:not(:first-child) .font-mono { white-space: normal; overflow-wrap: anywhere; }
html[data-ui="newv2"] td.space-x-1 > * { margin: 0 0 4px 4px !important; }

/* ---------------------------------------------------------------- buttons */
html[data-ui="newv2"] .primary-action,
html[data-ui="newv2"] .add-split-btn {
    background: var(--ui-accent);
    box-shadow: none;
    border-radius: var(--ui-radius);
    font-weight: 600;
    font-size: 13px;
}
html[data-ui="newv2"] .primary-action:hover,
html[data-ui="newv2"] .add-split-btn:hover {
    background: var(--ui-accent-deep);
    box-shadow: none;
    transform: none;
    filter: none;
}
html[data-ui="newv2"] .secondary-action {
    background: var(--ui-surface);
    border: 1px solid var(--ui-line);
    color: var(--ui-ink-2);
    border-radius: var(--ui-radius);
    font-weight: 600;
    font-size: 13px;
}
html[data-ui="newv2"] .secondary-action:hover { background: var(--ui-select); }
html[data-ui="newv2"] button.font-bold,
html[data-ui="newv2"] a.font-bold { font-weight: 600; }
html[data-ui="newv2"] button:focus-visible,
html[data-ui="newv2"] a:focus-visible,
html[data-ui="newv2"] select:focus-visible,
html[data-ui="newv2"] input:focus-visible,
html[data-ui="newv2"] textarea:focus-visible { outline: none; box-shadow: var(--ui-focus); }

/* ---------------------------------------------------------------- form fields */
html[data-ui="newv2"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html[data-ui="newv2"] select,
html[data-ui="newv2"] textarea {
    border-color: var(--ui-line);
    color: var(--ui-ink-2);
}
html[data-ui="newv2"] input:focus,
html[data-ui="newv2"] select:focus,
html[data-ui="newv2"] textarea:focus { border-color: var(--ui-accent); }
html[data-ui="newv2"] .form-field label { color: var(--ui-ink-2); font-weight: 600; }
html[data-ui="newv2"] ::placeholder { color: var(--ui-faint); }

/* ---------------------------------------------------------------- status pills (stage colours) */
html[data-ui="newv2"] .status-pill::first-letter { text-transform: uppercase !important; }
html[data-ui="newv2"] .status-pill {
    display: inline-block;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    white-space: nowrap;
}
html[data-ui="newv2"] .status-pill::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 6px;
    vertical-align: 1px;
}
html[data-ui="newv2"] .status-pill[data-status="pending_approval"],
html[data-ui="newv2"] .status-pill[data-status="pending_admin_revision"] { background: var(--st-manager-bg); color: var(--st-manager); }
html[data-ui="newv2"] .status-pill[data-status="pending_action"],
html[data-ui="newv2"] .status-pill[data-status="approved"],
html[data-ui="newv2"] .status-pill[data-status="ready_to_process"] { background: var(--st-finance-bg); color: var(--st-finance); }
html[data-ui="newv2"] .status-pill[data-status="query_raised"] { background: var(--st-query-bg); color: var(--st-query); }
html[data-ui="newv2"] .status-pill[data-status="batch_draft"],
html[data-ui="newv2"] .status-pill[data-status="sent_to_admin"],
html[data-ui="newv2"] .status-pill[data-status="admin_rejected"],
html[data-ui="newv2"] .status-pill[data-status="sent_to_bank"] { background: var(--st-bank-bg); color: var(--st-bank); }
html[data-ui="newv2"] .status-pill[data-status="part_paid"],
html[data-ui="newv2"] .status-pill[data-status="card_paid"],
html[data-ui="newv2"] .status-pill[data-status="completed"] { background: var(--st-paid-bg); color: var(--st-paid); }
html[data-ui="newv2"] .status-pill[data-status="rejected"],
html[data-ui="newv2"] .status-pill[data-status="revision_rejected"] { background: var(--st-stop-bg); color: var(--st-stop); }
html[data-ui="newv2"] .status-pill[data-status="junk"] { background: var(--st-idle-bg); color: var(--st-idle); }

/* Generic coloured pills elsewhere (counts, tags) keep their meaning, softened. */
html[data-ui="newv2"] .bg-amber-100 { background-color: var(--st-manager-bg); }
html[data-ui="newv2"] .text-amber-700 { color: var(--st-manager); }
html[data-ui="newv2"] .bg-emerald-100 { background-color: var(--st-paid-bg); }
html[data-ui="newv2"] .text-emerald-700,
html[data-ui="newv2"] .text-emerald-600 { color: var(--st-paid); }
html[data-ui="newv2"] .bg-red-100 { background-color: var(--st-stop-bg); }
html[data-ui="newv2"] .text-red-700 { color: var(--st-stop); }
html[data-ui="newv2"] .bg-blue-100 { background-color: var(--st-query-bg); }
html[data-ui="newv2"] .text-blue-700 { color: var(--st-query); }
html[data-ui="newv2"] .bg-emerald-600 { background-color: var(--ui-accent); }
html[data-ui="newv2"] .hover\:bg-emerald-700:hover { background-color: var(--ui-accent-deep); }

/* ---------------------------------------------------------------- tabs inside pages */
html[data-ui="newv2"] #bill-stage-tabs button,
html[data-ui="newv2"] .sub-tab-btn,
html[data-ui="newv2"] .query-filter-btn { font-weight: 500; font-size: 13px; }
html[data-ui="newv2"] #bill-stage-tabs button.border-brand-600,
html[data-ui="newv2"] .sub-tab-btn.border-brand-600 {
    color: var(--ui-accent);
    background: transparent;
    font-weight: 600;
}

/* ---------------------------------------------------------------- modals + overlays */
html[data-ui="newv2"] .bg-slate-900\/50 { background-color: rgba(31, 24, 51, .42); backdrop-filter: blur(2px); }
html[data-ui="newv2"] #global-loading-overlay { background: rgba(31, 24, 51, .08); }
html[data-ui="newv2"] #global-progress-bar { background: var(--ui-accent); }
html[data-ui="newv2"] .fixed .bg-white.rounded-2xl,
html[data-ui="newv2"] .fixed .bg-white.rounded-3xl { border-radius: 16px; box-shadow: 0 24px 60px rgba(31, 24, 51, .22); }

/* ---------------------------------------------------------------- upload page details */
html[data-ui="newv2"] .allocation-card-head { background: var(--ui-surface-2); border-bottom: 1px solid var(--ui-line); }
html[data-ui="newv2"] .allocation-number { background: var(--ui-select); color: var(--ui-accent); }
html[data-ui="newv2"] .split-pct-badge { background: var(--ui-select); color: var(--ui-accent); }
html[data-ui="newv2"] .allocations-pager-dot.is-active { background: var(--ui-accent); border-color: var(--ui-accent); }
html[data-ui="newv2"] .suggest-box { background: var(--ui-surface-2); border-color: var(--ui-line); }
html[data-ui="newv2"] .suggest-btn { background: var(--ui-accent); }
html[data-ui="newv2"] .upload-status-bar { background: var(--ui-surface); border-color: var(--ui-line); }

/* ---------------------------------------------------------------- mobile navigation */
/* The sidebar used to simply disappear on phones (no way to change page). In the new UI
   a menu button opens it as a drawer. */
.mobile-nav-btn, .mobile-nav-backdrop { display: none; }
@media (max-width: 767px) {
    html[data-ui="newv2"] .mobile-nav-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px; height: 38px;
        margin-right: 4px;
        border-radius: var(--ui-radius);
        border: 1px solid var(--ui-line);
        background: var(--ui-surface);
        color: var(--ui-ink);
        font-size: 18px;
        line-height: 1;
        flex-shrink: 0;
    }
    html[data-ui="newv2"] .app-sidebar {
        display: flex !important;
        position: fixed;
        inset: 0 auto 0 0;
        width: 272px;
        max-width: 84vw;
        z-index: 60;
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    html[data-ui="newv2"] body.nav-open .app-sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .3); }
    html[data-ui="newv2"] body.nav-open .mobile-nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(31, 24, 51, .45);
    }
    html[data-ui="newv2"] .app-header { padding-left: 14px; padding-right: 14px; }
    html[data-ui="newv2"] .app-header #welcome-header { font-size: 16px; }
    html[data-ui="newv2"] .app-main { padding: 14px; }
    html[data-ui="newv2"] .card-header { padding: 12px 14px; }
    /* Card headers with buttons (Import / Export, Refresh...) wrap the buttons under the
       title instead of squeezing the title into three lines. */
    html[data-ui="newv2"] .card-header.flex { flex-wrap: wrap; row-gap: 10px; }
    html[data-ui="newv2"] .card-header.flex > .section-icon { flex: 0 0 auto; }
    html[data-ui="newv2"] .card-header.flex > .section-icon + * { flex: 1 1 calc(100% - 60px); min-width: 0; }
    /* Tables that aren't already inside a scroll box scroll sideways within their card
       instead of running off the screen (e.g. Admin > Users). */
    html[data-ui="newv2"] :not(.overflow-x-auto) > table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
        -webkit-overflow-scrolling: touch;
    }
    /* One-line quick-add forms (input + picker + button) wrap: the text box takes the
       full row, the rest sits under it (e.g. Clusters > + Location). */
    /* Data tables scroll sideways at a readable width instead of being squeezed until
       headers wrap a word per line. */
    html[data-ui="newv2"] .overflow-x-auto > table { min-width: 640px; }
    html[data-ui="newv2"] table thead th { white-space: nowrap; }
    /* "No records found" / "Fetching records..." rows span the whole (scrolling) table -
       start them at the left edge so they're visible without scrolling. */
    html[data-ui="newv2"] table td[colspan] {
        text-align: left;
        display: block;                       /* the row's only cell - sized to the screen, */
        max-width: calc(100vw - 72px);        /* not the 640px scrolling table, so it wraps */
        width: calc(100vw - 72px);            /* (and gets that width, not shrink-to-fit) */
        white-space: normal;
    }
    html[data-ui="newv2"] table td[colspan] > .flex.justify-center { justify-content: flex-start; }
    html[data-ui="newv2"] form.flex { flex-wrap: wrap; }
    /* Finance's filter bar (5 fields) filled a whole phone screen above every page -
       two per row, the user filter across the full width. */
    html[data-ui="newv2"] .finance-filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; gap: 10px; }
    html[data-ui="newv2"] .finance-filter-bar > div:first-child { grid-column: 1 / -1; }
    html[data-ui="newv2"] form.flex > input.flex-1 { flex-basis: 100%; min-width: 0; }
    html[data-ui="newv2"] form.flex > select { flex: 1 1 auto; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="newv2"] .app-sidebar,
    html[data-ui="newv2"] table tbody tr { transition: none; }
}

/* ---------------------------------------------------------------- login page */
html[data-ui="newv2"] body.login-page {
    background: var(--side-bg);
    font-family: 'Archivo', system-ui, sans-serif;
}
html[data-ui="newv2"] .login-card {
    border: 0;
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    padding: 44px 48px;
}
html[data-ui="newv2"] .login-card h1 { color: var(--ui-ink); font-weight: 700; letter-spacing: -0.02em; }
html[data-ui="newv2"] .login-card p { color: var(--ui-muted); }

/* =====================================================================
   v2 layer - the house rules (taste skill), applied to an app
   ===================================================================== */

/* ---- type: one family, two weights; regular-weight headings, never black */
html[data-ui="newv2"] .font-black,
html[data-ui="newv2"] .font-extrabold { font-weight: 600; }
html[data-ui="newv2"] .font-bold { font-weight: 600; }
html[data-ui="newv2"] h1, html[data-ui="newv2"] h2 { font-weight: 500; letter-spacing: -0.02em; }
html[data-ui="newv2"] .card-header h3,
html[data-ui="newv2"] section > h3 { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
html[data-ui="newv2"] .app-header #welcome-header { font-weight: 500; font-size: 19px; letter-spacing: -0.02em; }

/* ---- no emoji icons: the words carry it */
html[data-ui="newv2"] .section-icon { display: none !important; }
/* The emoji is hidden from the very first paint, before nav-icons-v2.js swaps in the icon
   (it runs right after the menu), so the old emoji never flashes on a refresh. */
html[data-ui="newv2"] .app-sidebar .sidebar-btn[data-tab-id] > span:first-child > span:first-child:not(.nav-icon) { display: none; }
/* Sidebar: Lucide line icons (static/js/nav-icons-v2.js) replace the emoji. The emoji is only
   hidden on buttons that got an icon, so a menu item is never left without one. */
html[data-ui="newv2"] .app-sidebar .sidebar-btn.has-nav-icon .nav-icon + span { display: none; }
html[data-ui="newv2"] .app-sidebar .nav-icon {
    display: inline-flex;
    width: 18px; height: 18px;
    flex: 0 0 18px;
    color: var(--side-muted);
    filter: none !important;       /* v1's greyed-out emoji rule targets this slot too */
    opacity: 1 !important;
}
html[data-ui="newv2"] .app-sidebar .nav-icon svg { width: 18px; height: 18px; display: block; }
html[data-ui="newv2"] .app-sidebar .sidebar-btn:hover .nav-icon { color: var(--side-ink); }
html[data-ui="newv2"] .app-sidebar .sidebar-btn.bg-white\/10 .nav-icon { color: #fff; }

html[data-ui="newv2"] .stage-icon { display: none; }
html[data-ui="newv2"] #bill-stage-tabs .text-slate-300 { color: var(--ui-faint); }
html[data-ui="newv2"] #bill-stage-tabs .text-slate-500 { color: var(--ui-ink-2); }

/* ---- sidebar: a plain leaf-green field */
html[data-ui="newv2"] .app-sidebar .sidebar-btn {
    border-radius: 0;
    border-left-width: 3px;
    font-size: 13.5px;
    font-weight: 400;
}
html[data-ui="newv2"] .app-sidebar .sidebar-btn.bg-white\/10 {
    background: rgba(255, 255, 255, .10);
    border-left-color: var(--ui-accent-soft);
    font-weight: 600;
}
html[data-ui="newv2"] .sidebar-section-label,
html[data-ui="newv2"] .app-sidebar .sidebar-nav > div:not(.sidebar-btn) { color: var(--side-muted); font-weight: 500; font-size: 12px; }
html[data-ui="newv2"] .sidebar-signout { border-radius: var(--ui-radius); border-color: rgba(255, 255, 255, .22); }

/* ---- header: a plain bar on the ground, no rule */
html[data-ui="newv2"] .app-header { background: var(--ui-ground); border-bottom: 0; }
html[data-ui="newv2"] .role-switcher-select { background: var(--ui-surface); border-color: var(--ui-line); border-radius: var(--ui-radius); }
html[data-ui="newv2"] .app-header .role-chip,
html[data-ui="newv2"] #role-badge { background: var(--ui-surface); color: var(--ui-ink-2); }

/* ---- surfaces: separated by tone, never by outline or shadow */
html[data-ui="newv2"] .finance-card,
html[data-ui="newv2"] .allocation-card,
html[data-ui="newv2"] .help-card {
    background: var(--ui-surface);
    border: 0;
    box-shadow: none;
}
html[data-ui="newv2"] .card-header { background: var(--ui-surface); border-bottom: 0; padding-bottom: 6px; }
html[data-ui="newv2"] .bg-white { background-color: var(--ui-surface); }
html[data-ui="newv2"] .bg-slate-50,
html[data-ui="newv2"] .bg-slate-100,
html[data-ui="newv2"] .bg-brand-50 { background-color: var(--ui-surface-2); }
html[data-ui="newv2"] .shadow, html[data-ui="newv2"] .shadow-xs, html[data-ui="newv2"] .shadow-sm,
html[data-ui="newv2"] .shadow-md, html[data-ui="newv2"] .shadow-lg, html[data-ui="newv2"] .shadow-xl,
html[data-ui="newv2"] .shadow-2xl, html[data-ui="newv2"] [class*="hover:shadow"]:hover { box-shadow: none; }
/* Inner boxes (batch rows, ticket items, budget tiles...) lose their 1px outline and sit
   one tone down from the card instead. Form fields keep their borders. */
html[data-ui="newv2"] .finance-card div.border:not(.border-dashed),
html[data-ui="newv2"] .finance-card div.border-2:not(.border-dashed) {
    border-color: transparent;
    background-color: var(--ui-surface-2);
}
html[data-ui="newv2"] .finance-card div.border div.border:not(.border-dashed) { background-color: var(--ui-surface); }
html[data-ui="newv2"] .border-dashed { border-color: var(--ui-line); }
html[data-ui="newv2"] .rounded-2xl, html[data-ui="newv2"] .rounded-3xl,
html[data-ui="newv2"] .rounded-xl, html[data-ui="newv2"] .rounded-lg { border-radius: var(--ui-radius-lg); }
html[data-ui="newv2"] .finance-card, html[data-ui="newv2"] .allocation-card { border-radius: var(--ui-radius-lg); }

/* ---- tables: the one place rules belong */
html[data-ui="newv2"] table thead tr,
html[data-ui="newv2"] table thead tr.bg-slate-50 { background: transparent; }
html[data-ui="newv2"] table thead th { color: var(--ui-muted); font-weight: 500; border-bottom: 1px solid var(--ui-line); }
html[data-ui="newv2"] table tbody tr:hover { background-color: var(--ui-select); }
html[data-ui="newv2"] table tbody td { color: var(--ui-ink-2); }

/* ---- controls: square-cornered, flat, one fill */
html[data-ui="newv2"] .primary-action,
html[data-ui="newv2"] .add-split-btn,
html[data-ui="newv2"] .secondary-action,
html[data-ui="newv2"] button.rounded-xl, html[data-ui="newv2"] button.rounded-lg,
html[data-ui="newv2"] button.rounded-2xl, html[data-ui="newv2"] a.rounded-xl,
html[data-ui="newv2"] button.rounded-md, html[data-ui="newv2"] button.rounded { border-radius: var(--ui-radius); }
html[data-ui="newv2"] .secondary-action { background: var(--ui-surface-2); border-color: transparent; }
html[data-ui="newv2"] .secondary-action:hover { background: var(--ui-select); }
html[data-ui="newv2"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
html[data-ui="newv2"] select,
html[data-ui="newv2"] textarea { background-color: #ffffff; border-radius: var(--ui-radius); }
html[data-ui="newv2"] button:active { transform: translateY(1px); }

/* ---- floating things keep a shadow; no glass */
html[data-ui="newv2"] .bg-slate-900\/50 { backdrop-filter: none; background-color: rgba(31, 24, 51, .45); }
html[data-ui="newv2"] .fixed .bg-white.rounded-2xl,
html[data-ui="newv2"] .fixed .bg-white.rounded-3xl { border-radius: 6px; background: var(--ui-surface); }
html[data-ui="newv2"] .login-card { border-radius: 6px; background: var(--ui-surface); }

@media (max-width: 767px) {
    html[data-ui="newv2"] .mobile-nav-btn { background: var(--ui-surface); border-color: transparent; }
    html[data-ui="newv2"] .card-header.flex > :first-child { flex: 1 1 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
    html[data-ui="newv2"] button:active { transform: none; }
}

/* ---- the app's colour utilities, mapped onto the stage palette (meaning kept) */
html[data-ui="newv2"] .bg-red-500, html[data-ui="newv2"] .bg-red-600, html[data-ui="newv2"] .bg-red-700 { background-color: var(--st-stop); }
html[data-ui="newv2"] .hover\:bg-red-600:hover, html[data-ui="newv2"] .hover\:bg-red-700:hover, html[data-ui="newv2"] .hover\:bg-red-800:hover { background-color: #8c2549; }
html[data-ui="newv2"] .bg-red-50, html[data-ui="newv2"] .bg-red-100 { background-color: var(--st-stop-bg); }
html[data-ui="newv2"] .hover\:bg-red-100:hover, html[data-ui="newv2"] .hover\:bg-red-200:hover { background-color: #ead0c5; }
html[data-ui="newv2"] .text-red-500, html[data-ui="newv2"] .text-red-600,
html[data-ui="newv2"] .text-red-700, html[data-ui="newv2"] .text-red-800 { color: var(--st-stop); }
html[data-ui="newv2"] .bg-emerald-600, html[data-ui="newv2"] .bg-emerald-700 { background-color: var(--st-paid); }
html[data-ui="newv2"] .hover\:bg-emerald-700:hover, html[data-ui="newv2"] .hover\:bg-emerald-800:hover { background-color: #22633c; }
html[data-ui="newv2"] .bg-emerald-50, html[data-ui="newv2"] .bg-emerald-100 { background-color: var(--st-paid-bg); }
html[data-ui="newv2"] .text-emerald-600, html[data-ui="newv2"] .text-emerald-700,
html[data-ui="newv2"] .text-emerald-900 { color: var(--st-paid); }
html[data-ui="newv2"] .bg-amber-50, html[data-ui="newv2"] .bg-amber-100, html[data-ui="newv2"] .bg-amber-200 { background-color: var(--st-manager-bg); }
html[data-ui="newv2"] .bg-amber-500, html[data-ui="newv2"] .bg-amber-600, html[data-ui="newv2"] .bg-amber-700 { background-color: #c27a17; }
html[data-ui="newv2"] .text-amber-500, html[data-ui="newv2"] .text-amber-600,
html[data-ui="newv2"] .text-amber-700, html[data-ui="newv2"] .text-amber-800 { color: var(--st-manager); }
html[data-ui="newv2"] .bg-blue-50, html[data-ui="newv2"] .bg-blue-100 { background-color: var(--st-query-bg); }
html[data-ui="newv2"] .text-blue-500, html[data-ui="newv2"] .text-blue-600, html[data-ui="newv2"] .text-blue-700 { color: var(--st-query); }
html[data-ui="newv2"] .bg-indigo-50 { background-color: var(--st-finance-bg); }
html[data-ui="newv2"] .bg-indigo-600, html[data-ui="newv2"] .bg-indigo-700 { background-color: var(--st-finance); }
html[data-ui="newv2"] .text-indigo-400, html[data-ui="newv2"] .text-indigo-600, html[data-ui="newv2"] .text-indigo-700,
html[data-ui="newv2"] .text-indigo-800, html[data-ui="newv2"] .text-indigo-900 { color: var(--st-finance); }
html[data-ui="newv2"] .bg-slate-200 { background-color: #e4e0ee; }
html[data-ui="newv2"] .hover\:bg-slate-200:hover, html[data-ui="newv2"] .hover\:bg-slate-300:hover { background-color: #d8d2e6; }

/* ---- one height for every single-line field, so labels and fields in a row line up */
html[data-ui="newv2"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
html[data-ui="newv2"] select { height: 36px; padding-top: 0; padding-bottom: 0; }

/* ---- reference numbers: the text face with tabular figures, not monospace */
html[data-ui="newv2"] .font-mono { font-family: inherit; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---- leftovers from styles.css that carried the old violet */
html[data-ui="newv2"] .gp-spinner,
html[data-ui="newv2"] #global-loading-overlay .gp-spinner { border-top-color: var(--ui-accent); }
html[data-ui="newv2"] .query-filter-btn.active-query-filter { background-color: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
html[data-ui="newv2"] .query-filter-btn:not(.active-query-filter) { background-color: var(--ui-surface-2); border-color: transparent; }
/* Bordered buttons (Export CSV, Import...) sit flat on their surface like the rest. */
html[data-ui="newv2"] button.border:not(.border-dashed),
html[data-ui="newv2"] a.border:not(.border-dashed) { border-color: transparent; background-color: var(--ui-surface); }
html[data-ui="newv2"] .finance-card > .card-header button.border,
html[data-ui="newv2"] .card-header button.border { background-color: var(--ui-surface-2); }

/* ---- the rest of the brand-* scale, as moss (v1 above covers 50/100/600/700/800) */
html[data-ui="newv2"] .text-brand-900, html[data-ui="newv2"] .hover\:text-brand-900:hover { color: #2d2349; }
html[data-ui="newv2"] .bg-brand-50\/50, html[data-ui="newv2"] .bg-brand-50\/60, html[data-ui="newv2"] .bg-brand-50\/80 { background-color: var(--ui-select); }
html[data-ui="newv2"] .hover\:bg-brand-100:hover { background-color: #ddd8ec; }
html[data-ui="newv2"] .bg-brand-500 { background-color: #7059b1; }
html[data-ui="newv2"] .border-brand-100, html[data-ui="newv2"] .border-brand-200 { border-color: #d3cce5; }
html[data-ui="newv2"] .border-brand-400 { border-color: #8e7bc1; }
html[data-ui="newv2"] .focus\:border-brand-500:focus, html[data-ui="newv2"] .focus\:border-brand-600:focus { border-color: var(--ui-accent); }
html[data-ui="newv2"] .ring-brand-100 { --tw-ring-color: #eae7f3; }
html[data-ui="newv2"] .ring-brand-600 { --tw-ring-color: var(--ui-accent); }

/* ---- Overview */
html[data-ui="newv2"] .ov-insight-card { background: var(--ui-surface); border: 0; box-shadow: none; border-radius: var(--ui-radius-lg); }
html[data-ui="newv2"] [id^="overview-"].text-2xl { white-space: nowrap; }
@media (max-width: 767px) {
    /* Archivo runs wider than Onest: ₹ 51,66,434.20 overflowed a half-width tile. */
    html[data-ui="newv2"] [id^="overview-"].text-2xl { font-size: 18px; }
}
/* Stat tiles and panels that sit straight on the page (not inside a card): flat paper. */
html[data-ui="newv2"] .app-main div.border.bg-white:not(.border-dashed) { border-color: transparent; }
html[data-ui="newv2"] .ov-bar-track { background: var(--ui-surface-2); }
html[data-ui="newv2"] .cl-group-header { background: var(--ui-surface-2); }