@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

body {
    font-family: 'Inter', sans-serif;
}

/* Remove the native up/down spin buttons on every number input app-wide - they add
   nothing on amount/percentage fields here and just clutter the input. */
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ==================== GLOBAL PROGRESS BAR ====================
   One indicator for the whole app instead of hand-adding a spinner to every button:
   apiFetch() (the single chokepoint nearly every button/action already calls through)
   shows/hides this automatically, so it covers every network-triggered action site-wide
   with no per-button wiring. See showGlobalProgress/hideGlobalProgress in common.js. */
#global-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, #8e7bc1, #4c3a7c);
    box-shadow: 0 0 8px rgba(76,58,124,.5);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: width .25s ease, opacity .2s ease;
}
#global-progress-bar.gp-active {
    opacity: 1;
    /* Eases toward (but never reaches) 90% for as long as a request is in flight -
       classic indeterminate-progress illusion since real byte-progress isn't known. */
    width: 90%;
    transition: width 6s cubic-bezier(.15,.6,.2,1), opacity .15s ease;
}
#global-progress-bar.gp-complete {
    width: 100%;
    transition: width .2s ease;
}

/* Blocking overlay - the thin bar above is a passive signal, this one actually stops
   the user from clicking anything else until the in-flight action finishes. Shown
   with a short delay (see showGlobalProgress in common.js) so a fast (<120ms) action
   never flashes it - only genuinely slow ones block. Background/auto-save calls pass
   apiFetch's `silent` option and never trigger this at all. */
#global-loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.12);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}
#global-loading-overlay.gp-visible {
    opacity: 1;
    pointer-events: all;
    cursor: wait;
}
#global-loading-overlay .gp-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid rgba(76,58,124,.15);
    border-top-color: #4c3a7c;
    border-radius: 50%;
    animation: gp-spin .7s linear infinite;
}
@keyframes gp-spin { to { transform: rotate(360deg); } }

/* Sidebar notification bubble - shows a count of items needing the user's attention. */
.notif-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 9999px;
    background-color: #ef4444; /* red-500 */
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.notif-badge.hidden {
    display: none;
}

/* Open / Closed toggle shown above the On-going Query ticket list (all roles). */
.query-filter-btn {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 4px 10px;
    border-radius: 9999px;
    color: #64748b; /* slate-500 */
    background-color: #fff;
    border: 1px solid #e2e8f0; /* slate-200 */
    cursor: pointer;
    transition: all 0.15s ease;
}

.query-filter-btn:hover {
    background-color: #f1f5f9; /* slate-100 */
}

.query-filter-btn.active-query-filter {
    background-color: #614b9f; /* brand-600 */
    border-color: #614b9f;
    color: #fff;
}

/* ================================================================
   Hoola Finance - refreshed visual theme
   Presentation only: no application logic is defined here.
   ================================================================ */
:root {
    /* Brand primary, anchored at the exact requested #614B9F - see tailwind.config.js
       for the matching brand-50..950 Tailwind scale used throughout the templates. */
    --hf-brand: #614b9f;
    --hf-brand-dark: #4c3a7c;
    --hf-brand-light: #eae7f3;
    --hf-blue: #3b82f6;
    --hf-border: #e5edf5;
    --hf-muted: #64748b;
    --hf-bg: #f6f8fb;
}

body.app-shell {
    background: var(--hf-bg);
    color: #172033;
    font-family: 'Inter', sans-serif;
}

.app-sidebar {
    background: #ffffff;
    border-right: 1px solid var(--hf-border);
    box-shadow: 4px 0 20px rgba(45, 35, 73, .04);
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #7059b1, #4c3a7c);
    box-shadow: 0 8px 18px rgba(97, 75, 159, .28);
    font-size: 16px;
}

.sidebar-section-label {
    color: #94a3b8;
}

/* The nav list gets its own scroll region (see base.html) when there are more menu
   items than fit the screen - a thin, brand-tinted scrollbar reads better here than
   the browser default, and only appears when content actually overflows. */
.sidebar-nav {
    scrollbar-width: thin;
    scrollbar-color: #d3cce5 transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background-color: #d3cce5; border-radius: 999px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background-color: #b5abd4; }

.app-sidebar .sidebar-btn {
    border-left-width: 2px;
    border-radius: 10px;
    padding-top: .65rem;
    padding-bottom: .65rem;
    color: #475569;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.app-sidebar .sidebar-btn:hover {
    background: #f6f5fa;
    color: #2d2349;
    transform: translateX(1px);
}

.app-sidebar .sidebar-btn.bg-white\/10 {
    background: linear-gradient(90deg, rgba(97,75,159,.12), rgba(97,75,159,.05));
    border-color: #614b9f;
    color: #4c3a7c;
    box-shadow: inset 0 0 0 1px rgba(97,75,159,.08);
}

.sidebar-signout {
    color: #e11d48;
    background: rgba(225,29,72,.07);
    border: 1px solid rgba(225,29,72,.14);
}

.sidebar-signout:hover {
    background: rgba(225,29,72,.13);
}

.app-header {
    background: linear-gradient(135deg, #614b9f 0%, #4c3a7c 100%);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(45,35,73,.12);
}

.app-header #welcome-header {
    color: #ffffff !important;
}

.user-chip {
    background: rgba(255,255,255,.14);
    color: #ffffff;
}

.role-chip {
    background: rgba(255,255,255,.16);
    color: #ffffff;
}

.role-switcher-select {
    background: rgba(255,255,255,.16);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,.35);
}

.role-switcher-select option {
    /* Native <select> options render with the OS's own popup styling, not the header's
       purple background, so they need their own (dark-on-light) colors to stay legible. */
    color: #1f2937;
    background: #ffffff;
}

.dept-chip {
    background: rgba(255,255,255,.14);
    color: #ffffff;
}

.app-main {
    background: #8e7bc112;
}
/* #f6f8fb */
/* Shared form controls */
.form-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    color: #475569;
}

.form-field > input,
.form-field > select,
.currency-field input,
.percent-field input {
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #dbe5ef;
    border-radius: 11px;
    background: #fbfcfe;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.form-field > input:focus,
.form-field > select:focus,
.currency-field:focus-within,
.percent-field:focus-within {
    border-color: #b5abd4;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(97,75,159,.10);
}

.finance-card {
    background: #fff;
    border: 1px solid var(--hf-border);
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(15,23,42,.055);
}

/* A slim brand-purple accent stripe rather than a fully-filled purple header on
   every card - dozens of these appear per page, so a solid fill everywhere would
   drown out the one header that's meant to stand out (the top app header). */
.card-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eaf0f5;
    border-top: 3px solid #baafd9;
    background: ghostwhite;
}

.section-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
}

.section-icon-brand { background: #eae7f3; color: #4c3a7c; }
.section-icon-blue { background: #edf4ff; color: #377de3; }
.section-icon-amber { background: #fef6e7; color: #b7791f; }
.section-icon-rose { background: #fdedf0; color: #c0264b; }
.section-icon-slate { background: #f1f5f9; color: #475569; }
.section-icon-indigo { background: #edeeff; color: #4c4de3; }
.section-icon-emerald { background: #e9fbf2; color: #0a9a5c; }
.section-icon-purple { background: #f6edff; color: #7e3de3; }

.help-card {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid #d3cce5;
    background: #f9f8fc;
    border-radius: 13px;
    min-width: 260px;
}

.help-icon {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #b5abd4;
    color: #4c3a7c;
    font-weight: 900;
    background: #eae7f3;
}

.currency-field,
.percent-field {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-field > span,
.percent-field > span {
    position: absolute;
    z-index: 1;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 800;
    pointer-events: none;
}

.currency-field > span { left: 13px; }
.currency-field input { padding-left: 31px; }
.percent-field > span { right: 12px; }
.percent-field input { padding-right: 30px; }

.file-dropzone {
    position: relative;
    min-height: 42px;
    padding: 7px 11px;
    border: 1px dashed #b9c9d8;
    border-radius: 11px;
    background: #fbfcfe;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.file-dropzone:hover { border-color: #8e7bc1; background: #f9f8fc; }
.file-icon {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eae7f3;
    color: #4c3a7c;
    font-weight: 900;
}
.file-preview-badge {
    background: #ecfdf5;
    border: 1px solid #bbf7d0;
    border-radius: 9px;
    padding: 5px 8px;
}

.allocation-header { background: linear-gradient(180deg, #ffffff, #fbfdff); }
.count-pill,
.allocation-percent {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 999px;
    background: #edf7ff;
    color: #3775be;
    font-size: 10px;
    font-weight: 900;
}
.count-pill { color: #4c3a7c; background: #eae7f3; }

.add-split-btn,
.primary-action {
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, #7059b1, #4c3a7c);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 8px 18px rgba(97,75,159,.22);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.add-split-btn { padding: 10px 14px; }
.primary-action { padding: 12px 19px; }
.add-split-btn:hover,
.primary-action:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(97,75,159,.30); filter: brightness(1.02); }
.add-split-btn span,
.primary-action span { font-size: 16px; margin-right: 4px; }

.primary-action:disabled { opacity: .75; cursor: not-allowed; transform: none !important; }
.btn-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 7px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    vertical-align: -2px;
    animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

.secondary-action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 11px;
    background: #f3f6fa;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}
.secondary-action:hover { background: #e9eef5; }

.allocation-card {
    background: #fff;
    border: 1px solid #dce9f5;
    border-radius: 16px;
    overflow: visible;
    box-shadow: 0 4px 14px rgba(15,23,42,.035);
}

.allocation-card-head {
    min-height: 64px;
    padding: 12px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: lavender;
    border-radius: 16px 16px 0 0;
}

.allocation-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf3ff;
    color: #3c7fda;
    font-size: 12px;
    font-weight: 900;
}

.remove-split-btn {
    padding: 5px 8px;
    border-radius: 8px;
    background: #fff5f5;
    color: #ef4444;
    font-size: 10px;
    font-weight: 900;
}
.remove-split-btn:hover { background: #fee2e2; }
.collapse-split-btn {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.collapse-split-btn:hover { background: #f1f5f9; color: #334155; }

.collapse-all-btn {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 0;
    background: transparent;
    color: #94a3b8;
    font-weight: 900;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, color .15s ease;
}
.collapse-all-btn:hover { color: #334155; }
.collapse-all-btn.is-collapsed { transform: rotate(-90deg); }

.split-pct-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: #edf4ff;
    color: #3775be;
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.req-star { color: #ef4444; }
.opt-tag {
    color: #94a3b8;
    font-weight: 700;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 3px;
}

/* ============ Upload a Bill: two-column page shell ============ */
.upload-page-header { margin-bottom: 18px; }
.upload-page-header h2 {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.01em;
}
.upload-page-header p {
    font-size: 12px;
    color: #64748b;
    margin-top: 3px;
}

/* Upload a Bill: Bill Details stays completely still while Allocation Splits is
   worked through, exactly like the sidebar nav (see .sidebar-nav) - not
   `position: sticky` (which still travels with the page scroll until it happens to
   reach the top), but a genuinely separate, height-bound panel with its own
   overflow-y: auto, so it never moves at all. No magic-number pixel heights needed:
   #section-upload inherits `main`'s own real computed height (100%; `main` already
   has a definite height from the flex layout in base.html), and that height is
   handed down through a plain flex column (page title bar sized to its own content,
   the grid filling whatever's left) to the two columns, which each get their own
   independent scrollbar within that fixed space - only above the 1024px breakpoint
   where the grid is actually two columns side by side; below that everything's
   already one stacked column, where "freezing" one side over the other doesn't
   make sense. */
#section-upload { height: 100%; }
@media (min-width: 1025px) {
    #section-upload .upload-page {
        height: 100%;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    #section-upload .upload-page-header { flex-shrink: 0; }
}

.upload-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: 20px;
    align-items: stretch;
}
@media (max-width: 1024px) {
    .upload-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1025px) {
    .upload-grid { flex: 1; min-height: 0; }
    .upload-col-left, .upload-col-right {
        height: 100%;
        overflow-y: auto;
    }
}
.upload-col-left, .upload-col-right { min-width: 0; }

/* Same thin, brand-tinted scrollbar as the sidebar nav (see .sidebar-nav) for these
   two independent-scroll columns. */
.upload-col-left,
.upload-col-right {
    scrollbar-width: thin;
    scrollbar-color: #d3cce5 transparent;
}
.upload-col-left::-webkit-scrollbar,
.upload-col-right::-webkit-scrollbar { width: 6px; }
.upload-col-left::-webkit-scrollbar-track,
.upload-col-right::-webkit-scrollbar-track { background: transparent; }
.upload-col-left::-webkit-scrollbar-thumb,
.upload-col-right::-webkit-scrollbar-thumb { background-color: #d3cce5; border-radius: 999px; }
.upload-col-left::-webkit-scrollbar-thumb:hover,
.upload-col-right::-webkit-scrollbar-thumb:hover { background-color: #b5abd4; }

/* Allocation Splits: a horizontally-scrolling carousel (rather than stacked full-width
   downward) - so adding more splits grows the row sideways, not the page's vertical
   height. Each card is 90% of the Allocation Splits column's width (a percentage, so
   it scales the same on desktop and a phone), leaving the next split peeking in at
   the right edge as a scroll hint; mandatory snapping lands every swipe/scroll on a
   whole card. A lone split has nothing to peek at, so it takes the full width. The
   pager above the row (see renderAllocationsPager in common.js) moves between splits
   without needing a horizontal scroll gesture on desktop. */
.allocations-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
}
.allocation-card {
    flex: 0 0 90%;
    width: 90%;
    min-width: 0;
    scroll-snap-align: start;
}
.allocation-card:only-child { flex-basis: 100%; width: 100%; }

.allocations-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
}
.allocations-pager-arrow {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #4c3a7c;
    font-size: 15px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease;
}
.allocations-pager-arrow:hover:not(:disabled) { background: #f6f5fa; }
.allocations-pager-arrow:disabled { opacity: .35; cursor: default; }
.allocations-pager-dots { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
.allocations-pager-dot {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.allocations-pager-dot.is-active { background: #614b9f; border-color: #614b9f; color: #fff; }
.allocations-pager-label { font-size: 11px; font-weight: 800; color: #64748b; white-space: nowrap; }

/* Narrow screens (phones): the split card is ~300px wide, too narrow for the number,
   title, amount badge, Remove and collapse buttons on one line - let the badge drop
   to its own line under the title, and stack the Suggest button under its input. */
@media (max-width: 640px) {
    .allocation-card-head { flex-wrap: wrap; padding: 10px 12px; min-height: 0; row-gap: 8px; }
    .allocation-card-head > .shrink-0 { flex-wrap: wrap; justify-content: flex-end; }
    .allocation-card > div > .p-4 { padding: 12px; }
    .suggest-row { flex-direction: column; }
    .suggest-btn { justify-content: center; min-height: 40px; }
    .suggest-label { flex-wrap: wrap; }
    .allocations-pager-label { display: none; }
}

/* Same thin, brand-tinted scrollbar treatment as the sidebar nav (see .sidebar-nav). */
.allocations-row {
    scrollbar-width: thin;
    scrollbar-color: #d3cce5 transparent;
}
.allocations-row::-webkit-scrollbar { height: 6px; }
.allocations-row::-webkit-scrollbar-track { background: transparent; }
.allocations-row::-webkit-scrollbar-thumb { background-color: #d3cce5; border-radius: 999px; }
.allocations-row::-webkit-scrollbar-thumb:hover { background-color: #b5abd4; }

.upload-footer-actions { display: flex; flex-direction: column; gap: 10px; }
.upload-footer-actions .primary-action,
.upload-footer-actions .secondary-action {
    justify-content: center;
    width: 100%;
}

.upload-status-bar {
    margin-top: 16px;
    padding: 12px 16px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.upload-status-info { font-size: 11px; color: #64748b; font-weight: 700; }
.upload-status-total { font-size: 11px; font-weight: 900; color: #dc2626; }
.upload-status-total.is-ok { color: #059669; }

/* File upload: a row of small square tiles (an always-present "+" add tile, plus one
   tile per uploaded file) instead of one big drag-and-drop dropzone - about 4 fit per
   row at the Bill Details column's width, wrapping to further rows beyond that. */
.file-tiles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.file-tile {
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.file-tile-add {
    border: 1.5px dashed #b9c9d8;
    background: #fbfcfe;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.file-tile-add:hover { border-color: #8e7bc1; background: #f9f8fc; }
.file-tile-add-icon {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    color: #614b9f;
}
.file-tile-add input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.file-tile-uploaded {
    border: 1px solid #d3cce5;
    background: #f6f5fa;
    padding: 4px;
    gap: 2px;
}
.file-tile-icon { font-size: 17px; line-height: 1; }
.file-tile-name {
    font-size: 8px;
    font-weight: 700;
    color: #4c3a7c;
    max-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.file-tile-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    cursor: pointer;
    line-height: 1;
}
.file-tile-remove:hover { background: #dc2626; }

.location-panel {
    position: relative;
    margin-top: 17px;
    padding: 14px;
    border: 1px solid #eef0f5;
    border-radius: 20px;
    background: #fbfbfd;
}
.location-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.location-panel-head-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.location-panel-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #eae7f3;
    color: #614b9f;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.location-panel-icon svg { width: 19px; height: 19px; }
.location-panel-title {
    font-size: 16px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.25;
}
.location-panel-subtitle {
    font-size: 12px;
    color: #94a3b8;
    margin-top: 1px;
}
.share-equally-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 12px;
    background: #eae7f3;
    color: #4c3a7c;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}
.share-equally-btn:hover { background: #d3cce5; }
.share-equally-icon { display: inline-flex; }
.share-equally-icon svg { width: 14px; height: 14px; }

.location-search-wrap { position: relative; margin-bottom: 12px; }
.location-search-input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 38px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    color: #334155;
    font-size: 13px;
    outline: none;
}
.location-search-input:focus { border-color: #b5abd4; box-shadow: 0 0 0 3px rgba(97,75,159,.08); }
.location-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #94a3b8; z-index: 2; }
.location-search-icon svg { width: 15px; height: 15px; }
.location-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 46px;
    z-index: 30;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #dbe5ef;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 14px 30px rgba(15,23,42,.12);
}
.location-dropdown > div { padding: 10px 14px !important; }
.location-dropdown > div:hover { background: #f6f5fa !important; }

/* Each location is a full-width card (the allocation split it belongs to is now
   full-width too - see .allocation-card - so there's room to breathe): icon + name
   with the %-input and delete button on the same top row, a divider, then a
   2-column Budget Used / Remaining panel built by renderLocBudgetCellHtml. */
.location-list { display: flex; flex-direction: column; gap: 10px; }
.location-row {
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
}
.loc-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.loc-row-name {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.loc-row-name-text {
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
}
.loc-row-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.loc-row-remove {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc2626;
    background: #fee2e2;
    cursor: pointer;
    transition: background .15s ease;
}
.loc-row-remove svg { width: 15px; height: 15px; }
.loc-row-remove:hover { background: #fecaca; }
.loc-row-divider {
    height: 1px;
    background: #eef2f6;
    margin: 12px 0;
}
.location-home {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #d1f5ea;
    color: #0f8d82;
    flex-shrink: 0;
}
.location-home svg { width: 16px; height: 16px; }
.location-percent-field {
    display: flex;
    align-items: stretch;
    width: auto;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    background: #fbfcfe;
}
.location-percent-field input {
    /* Wider than the old %-only input (max 2-3 digits) - a rupee amount can run to
       6+ digits plus decimals. */
    width: 84px;
    min-height: 36px;
    border: 0;
    background: transparent;
    text-align: center;
    font-size: 13px;
    font-weight: 800;
    padding: 0 4px;
}
.location-percent-field span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    /* ₹ now sits as a prefix (was a "%" suffix) - the divider follows it, not
       precedes it. */
    border-right: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
}

/* Per-location "Budget Used" / "Remaining" panel - both figures include this bill's
   own proposed allocation (not just other bills' spend), so they always sum to the
   combo's ceiling and the status pill always agrees with Remaining's sign: green
   "On track" while there's room left, red "Budget exceeded" once there isn't. */
.location-budget-bar-cell:empty::before {
    content: '—';
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
}
.loc-budget-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.loc-budget-col { padding-right: 10px; min-width: 0; }
.loc-budget-col-remaining {
    padding-left: 10px;
    padding-right: 0;
    border-left: 1px solid #eef2f6;
}
.loc-budget-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #94a3b8;
    margin-bottom: 3px;
    white-space: nowrap;
}
.loc-budget-amount {
    font-size: 15px;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-budget-amount.is-ok { color: #059669; }
.loc-budget-amount.is-danger { color: #dc2626; }
.loc-budget-bar-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
}
.loc-budget-track {
    flex: 1;
    min-width: 0;
    height: 6px;
    border-radius: 99px;
    background: #eef2f6;
    overflow: hidden;
}
.loc-budget-fill {
    height: 100%;
    border-radius: 99px;
    background: #10b981;
    transition: width .25s ease;
}
.loc-budget-fill.is-danger { background: #ef4444; }
.loc-budget-pct {
    font-size: 11px;
    font-weight: 800;
    color: #334155;
    white-space: nowrap;
    flex-shrink: 0;
}
.loc-budget-cap {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.loc-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}
.loc-status-pill.is-ok { background: #d1fae5; color: #059669; }
.loc-status-pill.is-danger { background: #fee2e2; color: #dc2626; }

/* Split N Total footer */
.location-total-row {
    margin-top: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    background: #f6f5fa;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.loc-total-section { flex: 1; min-width: 100px; }
.loc-total-section-divided { border-left: 1px solid #e2ddf0; padding-left: 12px; }
.loc-total-title { font-size: 14px; font-weight: 900; color: #0f172a; }
.loc-total-subtitle { font-size: 11px; color: #94a3b8; margin-top: 1px; }
.loc-total-label {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: 3px;
}
.loc-total-value { font-size: 15px; font-weight: 900; color: #4c3a7c; white-space: nowrap; }
.loc-total-value.is-invalid { color: #dc2626; }

/* GST readout (Amount minus Subtotal) - flags when Total is less than Subtotal,
   which the server will also reject. */
#req-gst-preview.is-invalid-amount { color: #dc2626; font-weight: 800; }
.loc-total-value-amount { color: #0f172a; }

.empty-location-state {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 12px;
    border: 1px dashed #dce6ef;
    border-radius: 14px;
    background: #fff;
}

@media (max-width: 767px) {
    .app-main { padding: 16px; }
    .card-header { padding: 14px; }
    .help-card { width: 100%; min-width: 0; }
    .loc-budget-grid { grid-template-columns: 1fr; }
    .loc-budget-col-remaining {
        border-left: 0;
        border-top: 1px solid #eef2f6;
        padding-left: 0;
        padding-top: 14px;
        margin-top: 14px;
    }
}

/* =========================================================
   Allocation Budget Summary
   ========================================================= */

.budget-summary {
    margin-top: 6px;
    width: 100%;
    min-height: 48px;
    height: 48px;

    display: flex;
    align-items: center;

    border: 1px solid #b8f0dc;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #f0fdf8 0%,
        #ecfdf5 100%
    );

    padding: 5px 10px;

    box-sizing: border-box;
}

.budget-summary-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #d7faec;
    color: #059669;

    font-size: 13px;
    font-weight: 900;

    margin-right: 9px;
}

.budget-summary-item {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;
}

.budget-summary-label {
    font-size: 8px;
    line-height: 11px;

    color: #64748b;

    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.budget-summary-item strong {
    margin-top: 1px;

    font-size: 11px;
    line-height: 14px;

    color: #047857;

    font-weight: 900;
    white-space: nowrap;
}

.budget-summary-divider {
    width: 1px;
    height: 28px;

    background: #c9eadf;

    margin: 0 12px;
}

.budget-summary-danger {
    background: linear-gradient(
        135deg,
        #fff7f7 0%,
        #fff1f2 100%
    );

    border-color: #fecaca;
}

.budget-summary-danger .budget-summary-icon {
    background: #fee2e2;
    color: #dc2626;
}

.budget-summary-danger .budget-summary-item strong {
    color: #dc2626;
}

.budget-summary-danger .budget-summary-divider {
    background: #fecaca;
}

/* `finance-tailwind.css` (the compiled Tailwind bundle) was a one-time snapshot that
   fell out of sync as classes were added over time - dozens of ordinary utilities
   (w-4/h-4, mt-2, italic, hover states, etc.) were silently missing, which is what
   caused bugs like a chevron icon rendering as a full-screen arrow. That file has
   been regenerated from the current templates/JS (`npx tailwindcss@3.4.19 --content
   "templates/**/*.html,static/js/**/*.js"`), so it now covers everything actually in
   use. `shadow-xs` is the one exception worth keeping here: it isn't a real Tailwind
   v3 utility at all (v3 stops at `shadow-sm`; `shadow-xs` only exists in v4), so no
   amount of regenerating the v3 bundle will ever produce it. */
.shadow-xs { box-shadow: 0 1px 2px 0 rgba(0,0,0,.04); }

/* ==================== CLUSTERS & LOCATIONS ==================== */
.cl-stat-chip {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
}
.cl-stat-chip .cl-stat-value { font-size: 16px; font-weight: 900; color: #0f172a; }
.cl-stat-chip .cl-stat-label { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; }

.cl-group {
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease;
}
.cl-group:hover { border-color: #cbd5e1; }
.cl-group.cl-group-unassigned { border-style: dashed; background: #fafbfc; }

.cl-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 16px;
    background: linear-gradient(180deg, #f8fefd 0%, #ffffff 100%);
    border-bottom: 1px solid #eef2f6;
}
.cl-group-name { font-size: 13.5px; font-weight: 900; color: #0f172a; }
.cl-group-count {
    font-size: 10.5px;
    font-weight: 800;
    color: #4c3a7c;
    background: #eae7f3;
    padding: 2px 9px;
    border-radius: 999px;
    margin-left: 8px;
}

.cl-loc-list { padding: 6px 8px; }
.cl-loc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 10px;
    transition: background .12s ease;
}
.cl-loc-row:hover { background: #f8fafc; }
.cl-loc-name { font-size: 13px; font-weight: 700; color: #334155; }

.cl-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2.5px 8px;
    border-radius: 999px;
}
.cl-badge-active { background: #e9fbee; color: #0ca30c; }
.cl-badge-inactive { background: #f1f5f9; color: #64748b; }
.cl-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.cl-empty-locs { padding: 16px; text-align: center; font-size: 12px; color: #94a3b8; }

/* ==================== ADMIN OVERVIEW CHARTS ====================
   Hand-built (no charting library) per the data-viz mark spec: thin marks,
   rounded data-ends, a 2px surface gap between touching segments, one hue
   for magnitude (brand purple, #614B9F), a small validated categorical
   set (purple/amber/blue/rose) for the one part-to-whole chart (bill type mix),
   and a per-mark hover tooltip everywhere instead of a chart-wide crosshair. */

.ov-bar-row { margin-bottom: 14px; position: relative; }
.ov-bar-row:last-child { margin-bottom: 0; }
.ov-bar-track {
    position: relative;
    height: 20px;
    background: #eef2f6;
    border-radius: 9999px;
    overflow: hidden;
}
.ov-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, #8e7bc1, #614b9f);
    border-radius: 9999px;
    transition: width .5s cubic-bezier(.4,0,.2,1), filter .15s ease;
}
.ov-bar-row:hover .ov-bar-fill { filter: brightness(1.08); }
.ov-bar-fill.ov-bar-other { background: #cbd5e1; }

.ov-tooltip {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    background: #0f172a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 6px 10px;
    border-radius: 8px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .12s ease, transform .12s ease;
    box-shadow: 0 8px 20px rgba(15,23,42,.28);
}
.ov-tooltip:after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #0f172a;
}
.ov-bar-row:hover .ov-tooltip,
.ov-trend-col-wrap:hover .ov-tooltip,
.ov-stack-seg:hover .ov-tooltip { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Monthly spend trend - column chart */
.ov-trend-chart {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 3vw, 22px);
    height: 190px;
    padding: 0 4px;
}
.ov-trend-col-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}
.ov-trend-col {
    width: 100%;
    max-width: 46px;
    background: linear-gradient(180deg, #8e7bc1, #614b9f);
    border-radius: 6px 6px 3px 3px;
    transition: filter .15s ease;
    min-height: 3px;
}
.ov-trend-col-wrap:hover .ov-trend-col { filter: brightness(1.08); }
.ov-trend-axis {
    margin-top: 10px;
    font-size: 10px;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}
.ov-trend-axis.ov-trend-axis-current { color: #4c3a7c; }

/* Bill type mix - single 100% stacked bar (part-to-whole) */
.ov-stack-bar {
    display: flex;
    height: 30px;
    border-radius: 9999px;
    overflow: hidden;
    background: #eef2f6;
    gap: 2px;
}
.ov-stack-seg {
    position: relative;
    min-width: 4px;
    transition: filter .15s ease;
}
.ov-stack-seg:hover { filter: brightness(1.08); }

.ov-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; }
.ov-legend-item { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; color: #475569; }
.ov-legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* CEO insight callout tiles */
.ov-insight-card {
    border-radius: 16px;
    padding: 16px 18px;
    border: 1px solid #d3cce5;
    background: linear-gradient(135deg, #f6f5fa 0%, #ffffff 65%);
}
.ov-insight-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #4c3a7c; }
.ov-insight-value { font-size: 18px; font-weight: 900; color: #0f172a; margin-top: 6px; line-height: 1.25; }
.ov-insight-meta { font-size: 11px; font-weight: 600; color: #64748b; margin-top: 3px; }
/* ---- AI category / sub-category suggestion box (per allocation split) ---- */
.suggest-box {
    padding: 12px;
    border: 1px dashed #c9bfe6;
    border-radius: 14px;
    background: #f7f5fc;
}
.suggest-label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 11px;
    font-weight: 800;
    color: #4c3a7c;
}
.suggest-ai-tag {
    padding: 1px 6px;
    border-radius: 999px;
    background: #614b9f;
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .05em;
}
.suggest-row { display: flex; gap: 8px; }
.suggest-row input {
    flex: 1;
    min-width: 0;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #dbe5ef;
    border-radius: 11px;
    background: #fff;
    color: #334155;
    font-size: 12px;
    font-weight: 600;
    outline: none;
}
.suggest-row input:focus { border-color: #b5abd4; box-shadow: 0 0 0 3px rgba(97,75,159,.10); }
.suggest-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 16px;
    border-radius: 11px;
    background: #614b9f;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    transition: background .15s ease;
}
.suggest-btn:hover { background: #4c3a7c; }
.suggest-btn:disabled { opacity: .6; cursor: wait; }
.suggest-btn svg { width: 15px; height: 15px; }
.suggest-results { display: flex; flex-direction: column; gap: 8px; }
.suggest-results:not(:empty) { margin-top: 10px; }
.suggest-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.suggest-item:hover { border-color: #b5abd4; box-shadow: 0 2px 8px rgba(97,75,159,.12); }
.suggest-item.is-applied { border-color: #10b981; background: #f0fdf7; }
.suggest-rank {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #eae7f3;
    color: #4c3a7c;
    font-size: 11px;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.suggest-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.suggest-path { font-size: 13px; font-weight: 800; color: #0f172a; }
.suggest-reason { font-size: 11px; color: #64748b; }
.suggest-hint { font-size: 11px; font-weight: 700; color: #b45309; }
.suggest-use { flex: none; font-size: 11px; font-weight: 800; color: #614b9f; }
.suggest-item.is-applied .suggest-use { color: #059669; }
.suggest-status { font-size: 12px; font-weight: 700; color: #64748b; }
.suggest-status.is-error { color: #dc2626; }
.suggest-scope {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    cursor: pointer;
}
.suggest-scope.hidden { display: none; }
.suggest-scope input { width: 14px; height: 14px; accent-color: #614b9f; }
.suggest-scope-note { font-weight: 500; color: #94a3b8; }

/* ---- AI bill reading + duplicate check (upload form) ---- */
.suggest-status.is-ok { color: #059669; }
.suggest-status.is-warn { color: #b45309; }
.bill-check-banner { padding: 10px 12px; border-radius: 12px; border: 1px solid #fde68a; background: #fffbeb; color: #92400e; font-size: 12px; }
.bill-check-banner.hidden { display: none; }
.bill-check-banner.is-high { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.bill-check-banner p { margin-top: 4px; line-height: 1.4; }
.bill-check-title { font-weight: 800; }
.bill-check-foot { font-size: 11px; opacity: .75; }
.dup-badge { margin-top: 6px; padding: 5px 8px; border-radius: 8px; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; font-size: 10px; font-weight: 700; line-height: 1.35; max-width: 340px; }

/* ---- "What the AI read" review card ---- */
.bill-ai-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 12px; }
.bill-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 12px; color: #0f172a; }
.bill-ai-conf { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; }
.bill-ai-conf.is-high { background: #dcfce7; color: #166534; }
.bill-ai-conf.is-medium { background: #fef3c7; color: #92400e; }
.bill-ai-conf.is-low { background: #fee2e2; color: #991b1b; }
.bill-ai-row { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid #f1f5f9; font-size: 12px; }
.bill-ai-k { font-size: 11px; font-weight: 800; color: #64748b; }
.bill-ai-v { min-width: 0; font-weight: 800; color: #0f172a; word-break: break-word; }
.bill-ai-v small { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; color: #64748b; }
.bill-ai-v small.is-warn { color: #b45309; }
.bill-ai-row.is-missing .bill-ai-v { font-style: italic; font-weight: 600; color: #94a3b8; }
.bill-ai-use { padding: 4px 10px; border-radius: 8px; background: #eae7f3; color: #4c3a7c; font-size: 11px; font-weight: 800; white-space: nowrap; }
.bill-ai-use:hover { background: #d3cce5; }
.bill-ai-done { font-size: 11px; font-weight: 800; color: #059669; white-space: nowrap; }
.bill-ai-cands { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 11px; font-weight: 600; color: #64748b; }
.bill-ai-summary { padding: 7px 0; border-top: 1px solid #f1f5f9; font-size: 12px; color: #334155; }
.bill-ai-summary .bill-ai-k { margin-right: 8px; }
.bill-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.bill-ai-actions .suggest-btn { min-height: 34px; }
.bill-ai-again { padding: 0 14px; min-height: 34px; border-radius: 11px; border: 1px solid #dbe5ef; background: #fff; color: #475569; font-size: 12px; font-weight: 800; }
.bill-ai-again:hover { background: #f8fafc; }

/* ---- AI master switch (admin) + hiding AI boxes when it's off ---- */
body.ai-off-category_suggest .suggest-box:not(#bill-ai-panel) { display: none !important; }
body.ai-off-bill_extract #bill-ai-panel { display: none !important; }
body.ai-off-budget_suggest #budget-suggest-btn, body.ai-off-budget_suggest #budget-suggest-modal { display: none !important; }
body.ai-off-overview_ask #ai-overview-card { display: none !important; }
/* per-feature rows in the admin AI Assistant tab */
.ai-feature { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; }
.ai-feature.is-paused { background: #f8fafc; }
.ai-feature-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; font-weight: 900; color: #0f172a; }
.ai-feature-text { margin-top: 3px; font-size: 12px; line-height: 1.5; color: #64748b; max-width: 620px; }
.ai-feature-stat { margin-top: 4px; font-size: 11px; font-weight: 700; color: #94a3b8; }
.ai-pill.is-paused { background: #fef3c7; color: #92400e; }
.ai-switch.is-small { width: 50px; height: 28px; }
.ai-switch.is-small .ai-slider::before { top: 3px; left: 3px; width: 22px; height: 22px; }
.ai-switch.is-small input:checked + .ai-slider::before { transform: translateX(22px); }
.ai-master { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
.ai-master-title { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; color: #0f172a; }
.ai-master-text { margin-top: 4px; font-size: 12px; line-height: 1.5; color: #64748b; max-width: 640px; }
.ai-pill { padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.ai-pill.is-on { background: #dcfce7; color: #166534; }
.ai-pill.is-off { background: #fee2e2; color: #991b1b; }
.ai-switch { position: relative; display: inline-block; flex: none; width: 64px; height: 34px; cursor: pointer; }
.ai-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.ai-slider { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .2s ease; }
.ai-slider::before { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(15,23,42,.3); transition: transform .2s ease; }
.ai-switch input:checked + .ai-slider { background: #614b9f; }
.ai-switch input:checked + .ai-slider::before { transform: translateX(30px); }
.ai-switch input:focus-visible + .ai-slider { box-shadow: 0 0 0 3px rgba(97,75,159,.3); }
@media (max-width: 640px) { .ai-master { flex-direction: column; align-items: flex-start; } }

/* ---- "already exists" hints under the add category / sub-category boxes ---- */
.name-hint-box:empty { display: none; }
.name-hint-box { margin-bottom: 12px; }
.name-hint { margin-top: 6px; padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.5; }
.name-hint.is-exact { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.name-hint.is-similar { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.name-hint-chip { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 9px; border-radius: 999px; background: #fff; border: 1px solid #fde68a; font-weight: 700; }
.name-hint-chip.is-inactive { opacity: .7; font-style: italic; }

/* ---- loading animation for the "AI reads your bill" panel ---- */
.ai-spinner { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid #d9d2ee; border-top-color: #614b9f; animation: ai-spin .8s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.bill-ai-loading { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px; }
.bill-ai-loading-head { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; color: #4c3a7c; }
.bill-ai-loading-file { margin: 4px 0 8px 28px; font-size: 11px; font-weight: 600; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bill-ai-skel-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid #f1f5f9; }
.bill-ai-skel-k { font-size: 11px; font-weight: 800; color: #cbd5e1; }
.bill-ai-skel-bar { display: block; height: 12px; width: 70%; border-radius: 6px; background: linear-gradient(90deg, #eef0f4 25%, #e2e6ee 45%, #eef0f4 65%); background-size: 200% 100%; animation: ai-shimmer 1.3s ease-in-out infinite; }
.bill-ai-skel-row:nth-child(2n) .bill-ai-skel-bar { width: 55%; }
.bill-ai-skel-row:nth-child(3n) .bill-ai-skel-bar { width: 40%; }
@keyframes ai-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ai-spinner { animation-duration: 2.4s; } .bill-ai-skel-bar { animation: none; } }

/* ---- "this bill may already be uploaded" confirmation ---- */
.dup-modal-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(15,23,42,.55); }
.dup-modal { width: 100%; max-width: 460px; padding: 24px; border-radius: 20px; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.35); text-align: center; }
.dup-modal-icon { font-size: 34px; line-height: 1; }
.dup-modal h3 { margin-top: 8px; font-size: 18px; font-weight: 900; color: #0f172a; }
.dup-modal-list { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: #fef2f2; border: 1px solid #fecaca; text-align: left; }
.dup-modal-list p { font-size: 12px; line-height: 1.5; font-weight: 600; color: #991b1b; }
.dup-modal-list p + p { margin-top: 6px; }
.dup-modal-question { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #475569; }
.dup-modal-question b { color: #0f172a; }
.dup-modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.dup-modal-actions button { flex: 1; min-height: 42px; border-radius: 12px; font-size: 13px; font-weight: 800; }
.dup-modal-no { background: #614b9f; color: #fff; }
.dup-modal-no:hover { background: #4c3a7c; }
.dup-modal-yes { background: #fff; color: #991b1b; border: 1px solid #fecaca; }
.dup-modal-yes:hover { background: #fef2f2; }

/* ---- Overview "Ask AI" answers ---- */
.ai-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 12px; font-weight: 700; text-align: left; transition: background .15s, border-color .15s; }
.ai-chip:hover { background: #f3f0fa; border-color: #c9bfe6; color: #4c3a7c; }
.ai-answer { display: flex; flex-direction: column; gap: 14px; }
.ai-answer-summary { padding: 14px 16px; border-radius: 14px; background: #f7f5fc; border: 1px solid #e3ddf3; font-size: 14px; line-height: 1.6; font-weight: 600; color: #1e1b2e; }
.ai-answer-points { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; list-style: disc; font-size: 13px; color: #475569; }
.ai-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ai-chart-card { padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; min-width: 0; }
.ai-chart-title { margin-bottom: 10px; font-size: 13px; font-weight: 800; color: #0f172a; }
.ai-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: 11px; font-weight: 700; color: #475569; }
.ai-legend i, .ai-pie-row i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ai-stack-row { margin-bottom: 12px; }
.ai-stack-track { display: flex; gap: 2px; height: 20px; border-radius: 9999px; overflow: hidden; background: #eef2f6; }
.ai-stack-seg { height: 100%; }
.ai-svg { width: 100%; height: auto; overflow: visible; }
.ai-grid { stroke: #e8ecf1; stroke-width: 1; }
.ai-axis { fill: #64748b; font-size: 10px; font-weight: 600; }
.ai-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.ai-pie-svg { width: 160px; height: 160px; flex: none; }
.ai-pie-total { fill: #0f172a; font-size: 16px; font-weight: 900; }
.ai-pie-legend { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 6px; }
.ai-pie-row { display: grid; grid-template-columns: 1fr auto 40px; align-items: center; gap: 8px; font-size: 12px; color: #334155; }
.ai-pie-row b { font-weight: 800; color: #0f172a; }
.ai-pie-row em { font-style: normal; color: #94a3b8; text-align: right; }
.ai-data { border: 1px solid #e2e8f0; border-radius: 12px; padding: 10px 14px; background: #fafbfc; }
.ai-data summary { cursor: pointer; font-size: 12px; font-weight: 800; color: #614b9f; }
.ai-data-block { margin-top: 12px; }
.ai-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.ai-table th { padding: 6px 10px; text-align: left; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #94a3b8; border-bottom: 1px solid #e2e8f0; }
.ai-table td { padding: 6px 10px; border-bottom: 1px solid #f1f5f9; color: #334155; }
.ai-table tfoot td { font-weight: 800; color: #0f172a; border-top: 1px solid #e2e8f0; border-bottom: none; }
.ai-table th.text-right, .ai-table td.text-right { text-align: right; }
.ai-followups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: #64748b; }

/* ---- cell-by-cell grid inside the budget suggestions dialog ---- */
.ai-cells-toggle { font-size: 11px; font-weight: 800; color: #614b9f; }
.ai-cells-toggle:hover { text-decoration: underline; }
.bill-ai-use.is-strong { background: #614b9f; color: #fff; }
.bill-ai-use.is-strong:hover { background: #4c3a7c; }
.ai-cell-grid { width: 100%; border-collapse: collapse; font-size: 12px; background: #fafbfc; border: 1px solid #e2e8f0; border-radius: 10px; }
.ai-cell-grid th { padding: 7px 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; text-align: right; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.ai-cell-grid th.text-left { text-align: left; }
.ai-cell-grid td { padding: 6px 10px; text-align: right; border-bottom: 1px solid #f1f5f9; color: #0f172a; white-space: nowrap; }
.ai-cell-grid td.text-left { text-align: left; white-space: normal; }
.ai-cell-grid td b { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }
.ai-cell-grid td small { display: block; font-size: 10px; color: #94a3b8; }
.ai-cell-empty { color: #cbd5e1 !important; }
.ai-cell-total { font-weight: 800; background: #f3f0fa; }
.ai-cell-foot td { font-weight: 800; border-top: 1px solid #e2e8f0; border-bottom: none; background: #f3f0fa; }

/* ---- Department Budgets: aligned columns ---- */
.budget-cols { display: flex; align-items: center; gap: 20px; }
.bcol-amount { position: relative; width: 200px; max-width: 100%; flex: none; }
.bcol-num { width: 150px; flex: none; text-align: right; }
.bcol-chev { width: 36px; flex: none; }
.bcol-usage { width: 200px; max-width: 100%; }
@media (min-width: 640px) { .bcol-usage { margin-right: 396px; } }  /* under the amount box: 150 + 150 + 36 + 3 gaps of 20 */
.bcol-rupee { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 700; color: #94a3b8; pointer-events: none; }
.bcol-input { width: 100%; padding: 10px 14px 10px 32px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff; text-align: right; font-size: 18px; font-weight: 800; color: #0f172a; font-variant-numeric: tabular-nums; outline: none; transition: border-color .15s, box-shadow .15s; }
.bcol-input:focus { border-color: #614b9f; box-shadow: 0 0 0 3px rgba(97,75,159,.15); }
.bcol-status { position: absolute; right: 0; top: 100%; margin-top: 2px; z-index: 10; white-space: nowrap; font-size: 11px; font-weight: 700; text-align: right; }
.budget-head { display: none; }
@media (min-width: 640px) {
    .budget-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 0 17px 4px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; }
    .budget-head .bcol-amount, .budget-head .bcol-num { position: static; }
}
.budget-head .bcol-amount, .budget-head .bcol-num { text-align: right; }

/* Bank batch summary rows (Finance > Sent to Bank, Admin > Bank Approvals): fixed-width
   columns so Batch date / Bills / Amount / Status line up from one batch row to the next,
   whatever the length of each value or the "awaiting UTR · paid" note; labels top-aligned
   on one line. Two columns on phones. */
.batch-stats {
    display: grid;
    grid-template-columns: 175px 150px 155px 130px;
    align-items: start;
    column-gap: 20px;
    row-gap: 14px;
}
.batch-stats > div { min-width: 0; }
.batch-stats > div:first-child { align-items: flex-start; }
@media (max-width: 1023px) {
    .batch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; }
    .batch-stats > div:first-child { grid-column: 1 / -1; }
    /* Full row width, so every batch row's two columns are the same width (sized by
       content they differed per row and drifted). */
    .batch-stats { flex: 1 1 100%; width: 100%; }
}
.batch-stats .text-sm { white-space: nowrap; }
/* Keep the action buttons (Export CSV / Send to Admin) on the same line, right-aligned. */
@media (min-width: 1024px) {
    div:has(> .batch-stats) { flex-wrap: nowrap !important; }
    div:has(> .batch-stats) > div:last-child { flex-shrink: 0; }
}

/* Admin > Budget Requests > "Already Responded": fixed columns so status / department /
   month / requester / amount line up from row to row (they were inline and drifted).
   Phones: two lines - status + department, then month · requester and the amount. */
.br-dense-row {
    display: grid;
    grid-template-columns: 84px minmax(0, 1.4fr) 72px minmax(0, 1fr) 140px;
    align-items: center;
    column-gap: 14px;
}
.br-status { justify-self: start; }
.br-amount { text-align: right; white-space: nowrap; }
@media (max-width: 767px) {
    .br-dense-row {
        grid-template-columns: 84px minmax(0, 1fr) auto;
        grid-template-areas: "status dept dept" "month raiser amount";
        row-gap: 4px;
    }
    .br-status { grid-area: status; }
    .br-dept { grid-area: dept; white-space: normal; }
    .br-month { grid-area: month; }
    .br-raiser { grid-area: raiser; }
    .br-amount { grid-area: amount; }
}
/* Admin > Clusters on phones: the clinic name gets the full row (it was cut to
   "Akshay Na..."), with Deactivate / Edit under it on the right. */
@media (max-width: 767px) {
    .cl-loc-row { flex-wrap: wrap; row-gap: 6px; }
    .cl-loc-row > div:first-child { flex: 1 1 100%; }
    .cl-loc-row .cl-loc-name { white-space: normal; overflow: visible; text-overflow: clip; }
    .cl-loc-row > div:last-child { margin-left: auto; }
}

/* ================================================================
   Spend Flow (Admin) - see static/js/spend-flow.js
   Works in every look: v2 tokens where they exist, brand colours otherwise.
   ================================================================ */
.sf-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sf-tile { background: var(--ui-surface-2, #f6f5fa); border-radius: 12px; padding: 14px 16px; }
.sf-tile-label { font-size: 12px; color: var(--ui-muted, #64748b); }
.sf-tile-value { font-size: 20px; font-weight: 700; color: var(--ui-ink, #1f1833); margin-top: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-ok { color: #2c7a4b; }
.sf-over { color: #a8325a; }
.sf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.sf-crumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sf-crumb-current { font-weight: 600; color: var(--ui-ink, #1f1833); }
.sf-crumb-link { color: #614b9f; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sf-crumb-sep { color: var(--ui-faint, #94a3b8); }
.sf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ui-ink-2, #334155); cursor: pointer; }
.sf-check input { accent-color: #614b9f; width: 16px; height: 16px; }
.sf-chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sf-svg { display: block; font-family: inherit; width: 100%; min-width: 760px; height: auto; }
.sf-empty { padding: 48px 12px; text-align: center; color: var(--ui-muted, #64748b); font-size: 14px; }
.sf-link { fill: none; stroke-opacity: .28; transition: stroke-opacity .15s ease; }
.sf-link:hover { stroke-opacity: .6; }
.sf-link-unspent { stroke-opacity: .55; }
.sf-label, .sf-sub, .sf-col-head {
    paint-order: stroke;
    stroke: var(--ui-surface, #ffffff);
    stroke-width: 3px;
    stroke-linejoin: round;
}
.sf-label { font-size: 12.5px; font-weight: 600; fill: var(--ui-ink, #1f1833); }
.sf-sub { font-size: 11.5px; font-weight: 400; fill: var(--ui-muted, #5d5578); font-variant-numeric: tabular-nums; }
.sf-col-head { font-size: 12px; font-weight: 500; fill: var(--ui-faint, #8e87a6); }
.sf-node-click { cursor: pointer; }
.sf-node-click:hover rect, .sf-node-click:focus rect { filter: brightness(1.12); }
.sf-node-click:focus { outline: none; }
.sf-node-click:focus-visible rect { stroke: #1f1833; stroke-width: 2px; }
.sf-table td { padding: 10px 12px; vertical-align: middle; font-variant-numeric: tabular-nums; }
.sf-table td:not(:first-child), .sf-table th:not(:first-child) { white-space: nowrap; }
.sf-row-dept td { font-weight: 600; color: var(--ui-ink, #1f1833); }
.sf-row-cat td { color: var(--ui-ink-2, #334155); }
.sf-row-loc td { color: var(--ui-muted, #64748b); font-size: 13px; }
.sf-toggle { display: inline-flex; align-items: center; gap: 8px; text-align: left; font-weight: inherit; color: inherit; }
.sf-toggle:disabled { cursor: default; }
.sf-chev { display: inline-block; width: 12px; color: var(--ui-faint, #94a3b8); }
.sf-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; }
.sf-indent-1 { padding-left: 22px; }
.sf-indent-2 { display: inline-block; padding-left: 62px; }
.sf-bills { color: var(--ui-faint, #94a3b8); font-size: 12px; margin-left: 4px; }
.sf-flag { font-size: 12px; font-weight: 600; color: #a86412; background: #fbf0dc; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.sf-used { display: flex; align-items: center; gap: 8px; min-width: 120px; font-size: 12px; }
.sf-bar { flex: 1 1 auto; height: 6px; border-radius: 999px; background: var(--ui-line-soft, #e9e5f2); overflow: hidden; min-width: 60px; }
.sf-bar > span { display: block; height: 100%; background: #614b9f; border-radius: inherit; }
.sf-bar > span.sf-bar-over { background: #a8325a; }
@media (max-width: 767px) {
    .sf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .sf-tile-value { font-size: 17px; }
    .sf-indent-2 { padding-left: 40px; }
}
@media (prefers-reduced-motion: reduce) { .sf-link { transition: none; } }

/* ================================================================
   Changelog (Admin) - see static/js/changelog.js
   ================================================================ */
.changelog-now { font-size: 13px; color: var(--ui-muted, #64748b); }
.changelog-now strong { color: var(--ui-ink, #1f1833); font-weight: 700; margin-left: 4px; }
#changelog-list { display: flex; flex-direction: column; gap: 28px; }
.changelog-entry { position: relative; padding-left: 22px; max-width: 860px; }
.changelog-entry::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: -28px; width: 2px; background: var(--ui-line-soft, #e9e5f2); }
.changelog-entry:last-child::before { bottom: 0; }
.changelog-entry::after { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-faint, #b5abd4); }
.changelog-entry.is-latest::after { background: #614b9f; box-shadow: 0 0 0 4px #eae7f3; }
.changelog-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.changelog-version { font-weight: 700; font-size: 13px; color: #614b9f; font-variant-numeric: tabular-nums; }
.changelog-title { font-size: 16px; font-weight: 600; color: var(--ui-ink, #1f1833); }
.changelog-date { font-size: 13px; color: var(--ui-muted, #64748b); }
.changelog-group { margin-top: 8px; }
.changelog-kind { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 10px; margin-bottom: 6px; }
.cl-kind-new { background: #eae7f3; color: #4c3a7c; }
.cl-kind-improved { background: #e3eaf5; color: #3f5a8a; }
.cl-kind-fixed { background: #fbf0dc; color: #a86412; }
.cl-kind-base { background: #eceaf2; color: #5f5a72; }
.changelog-group ul { list-style: disc; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.changelog-group li { font-size: 14px; line-height: 1.5; color: var(--ui-ink-2, #334155); }

/* Credit card invoices (every portal): Finance's queue filter bar doesn't apply to this
   list (it has its own month picker), so it's hidden while the page is open. */
body:has(#section-card-invoices:not(.hidden)) .finance-filter-bar { display: none; }

/* Uploaded Bills stage tabs: on desktop they wrap onto a second line instead of one long
   sideways-scrolling row, where the later stages (Completed, Paid by Credit Card, Rejected,
   Junk) sat off-screen with nothing to show they were there. Phones keep the scroll. */
@media (min-width: 768px) {
    #bill-stage-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 2px; }
}

/* "New" tag next to a menu item for a freshly launched feature (navbtn new_until=..., expires
   by itself - see expireNewTags in common.js). Reads on both the dark and the white sidebar. */
.nav-new-tag { display: none; }
.nav-new-tag.is-on {
    display: inline-block;
    flex-shrink: 0;
    margin-left: 4px;
    padding: 1px 5px;
    border-radius: 999px;
    background: #10b981;
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: none;
    vertical-align: 1px;
    white-space: nowrap;
}
/* The row carrying a "New" tag keeps its label on one line: a little less right padding
   (there's no count badge to make room for) and no wrapping. */
.sidebar-btn:has(.nav-new-tag) { padding-right: 10px; }
.sidebar-btn:has(.nav-new-tag) > span:first-child { white-space: nowrap; min-width: 0; }