/* =============================================================
   HOMEEXPENSES v5.0 — Luxury Design System
   Senior UI/UX Overhaul — Mobile-First, PWA-Ready
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Inter:wght@400;500;600;700&display=swap');

/* =============================================
   CSS DESIGN TOKENS (Semantic Color System)
   ============================================= */
:root {
    --font-primary: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;

    /* Brand Palette */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-400: #818cf8;
    --brand-500: #6366f1;
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;

    /* Semantic Expense Type Colors */
    --color-household:     #4f46e5;   /* Indigo — household bills */
    --color-household-bg:  #eef2ff;
    --color-personal:      #7c3aed;   /* Violet — personal spend */
    --color-personal-bg:   #f5f3ff;
    --color-income:        #059669;   /* Emerald — inflows */
    --color-income-bg:     #ecfdf5;
    --color-payroll:       #d97706;   /* Amber — staff payroll */
    --color-payroll-bg:    #fffbeb;
    --color-reimbursement: #0891b2;   /* Cyan — settle-up */
    --color-reimbursement-bg: #ecfeff;
    --color-danger:        #dc2626;
    --color-danger-bg:     #fef2f2;
    --color-warning:       #f59e0b;
    --color-warning-bg:    #fffbeb;
    --color-success:       #16a34a;
    --color-success-bg:    #f0fdf4;

    /* Surface & Neutral */
    --surface-nav:    rgba(11, 15, 31, 0.97);
    --surface-card:   rgba(255, 255, 255, 0.92);
    --surface-glass:  rgba(255, 255, 255, 0.72);
    --border-subtle:  rgba(226, 232, 240, 0.85);
    --border-card:    rgba(226, 232, 240, 0.9);

    /* Elevation Shadows */
    --shadow-xs:    0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-sm:    0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 1px 4px rgba(15, 23, 42, 0.04);
    --shadow-md:    0 8px 32px -4px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-lg:    0 20px 48px -8px rgba(15, 23, 42, 0.12), 0 4px 16px rgba(15, 23, 42, 0.06);
    --shadow-brand: 0 8px 24px rgba(79, 70, 229, 0.3);
    --shadow-fab:   0 8px 32px rgba(79, 70, 229, 0.45);

    /* Typography Scale */
    --text-hero:  2.25rem;   /* 36px */
    --text-h1:    1.5rem;    /* 24px */
    --text-h2:    1.25rem;   /* 20px */
    --text-h3:    1.125rem;  /* 18px */
    --text-body:  0.875rem;  /* 14px */
    --text-sm:    0.8125rem; /* 13px */
    --text-xs:    0.75rem;   /* 12px */
    --text-2xs:   0.6875rem; /* 11px */
    --text-3xs:   0.625rem;  /* 10px */

    /* Motion */
    --duration-fast:    120ms;
    --duration-base:    200ms;
    --duration-slow:    350ms;
    --ease-spring:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);

    /* Radius */
    --radius-sm:   0.625rem;  /* 10px */
    --radius-md:   0.875rem;  /* 14px */
    --radius-lg:   1.25rem;   /* 20px */
    --radius-xl:   1.5rem;    /* 24px */
    --radius-2xl:  2rem;      /* 32px */
    --radius-full: 9999px;

    /* Safe Area Insets (notch/home bar) */
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}

/* =============================================
   BASE RESET & GLOBAL
   ============================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    background: #f0f2f8;
    color: #1e293b;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.35s ease, color 0.35s ease;
    min-height: 100vh;
}

/* Touch Target Hardening — WCAG 2.5.5 (44×44px minimum) */
button, select, input, .tab-btn, .bnav-btn, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Prevent auto-zoom on iOS Safari when focusing form inputs */
@media (max-width: 640px) {
    input, select, textarea {
        font-size: 16px !important;
    }
}

/* =============================================
   CUSTOM SCROLLBARS
   ============================================= */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; border-radius: 6px; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.nav-tabs-scroll::-webkit-scrollbar { display: none; }
.nav-tabs-scroll { scrollbar-width: none; -ms-overflow-style: none; }

/* =============================================
   GLASSMORPHISM SURFACE SYSTEM
   ============================================= */
.glass-nav {
    background: var(--surface-nav);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    transition: background-color 0.3s ease;
}

.glass-card {
    background: var(--surface-card);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease;
}

.glass-card-elevated {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: var(--shadow-md);
}

/* =============================================
   LUXURY KPI CARD SYSTEM
   ============================================= */
.kpi-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xs);
    padding: 1rem 1.25rem;
    transition: transform var(--duration-base) var(--ease-spring),
                box-shadow var(--duration-base) var(--ease-smooth);
    position: relative;
    overflow: hidden;
}

.kpi-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    transition: opacity var(--duration-fast);
    background: linear-gradient(135deg, rgba(99,102,241,0.04) 0%, transparent 60%);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.kpi-card:hover::before { opacity: 1; }

.kpi-card-accent {
    border-top: 3px solid transparent;
}
.kpi-indigo   { border-top-color: #6366f1; }
.kpi-emerald  { border-top-color: #10b981; }
.kpi-sky      { border-top-color: #0ea5e9; }
.kpi-violet   { border-top-color: #8b5cf6; }
.kpi-rose     { border-top-color: #f43f5e; }
.kpi-amber    { border-top-color: #f59e0b; }
.kpi-teal     { border-top-color: #14b8a6; }
.kpi-orange   { border-top-color: #f97316; }
.kpi-purple   { border-top-color: #a855f7; }
.kpi-cyan     { border-top-color: #06b6d4; }

/* =============================================
   HOVER LIFT ANIMATION
   ============================================= */
.hover-lift {
    transition: transform var(--duration-base) var(--ease-spring),
                box-shadow var(--duration-base) var(--ease-smooth);
}
.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* =============================================
   TAB NAV (Desktop scroll strip)
   ============================================= */
.tab-btn {
    transition: all var(--duration-base) var(--ease-smooth);
    position: relative;
    border-radius: var(--radius-md) !important;
    font-weight: 700;
    white-space: nowrap;
}
.tab-btn:focus-visible {
    outline: 2px solid var(--brand-500);
    outline-offset: 2px;
}
.tab-btn.active {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
}
.tab-btn.active i,
.tab-btn.active .ic { color: #ffffff !important; }

.nav-tabs-scroll {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* =============================================
   MOBILE BOTTOM NAVIGATION BAR
   ============================================= */
.bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    min-width: 44px;
    padding: 6px 2px;
    font-size: 10px;
    line-height: 1.15;
    font-weight: 700;
    color: #64748b;
    transition: color var(--duration-fast) ease,
                transform var(--duration-fast) ease,
                opacity var(--duration-fast) ease;
    background: transparent;
    border: none;
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-sm);
    position: relative;
}
.bnav-btn:hover { color: #e2e8f0; }
.bnav-btn:active { transform: scale(0.91); opacity: 0.82; }
.bnav-btn.active { color: #818cf8 !important; }
.bnav-btn i,
.bnav-btn .ic {
    font-size: 18px;
    margin-bottom: 2px;
    transition: transform var(--duration-fast) ease;
}
.bnav-btn.active i,
.bnav-btn.active .ic {
    color: #818cf8 !important;
    transform: scale(1.1) translateY(-1px);
}
.bnav-btn.active::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #818cf8;
}

/* =============================================
   FLOATING ACTION BUTTON (FAB)
   ============================================= */
.fab-add {
    width: 54px;
    height: 54px;
    margin-top: -22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-fab);
    transition: transform var(--duration-base) var(--ease-spring),
                box-shadow var(--duration-base) ease;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}
.fab-add:active {
    transform: scale(0.92);
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
}
.fab-add:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 36px rgba(79, 70, 229, 0.5);
}

/* =============================================
   MODAL SYSTEM
   ============================================= */
.modal-backdrop {
    background: rgba(11, 15, 31, 0.7);
    backdrop-filter: blur(10px) saturate(120%);
    -webkit-backdrop-filter: blur(10px) saturate(120%);
    transition: opacity var(--duration-base) ease;
}
.modal-content {
    animation: modalIn var(--duration-slow) var(--ease-spring) forwards;
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* =============================================
   FORM CONTROLS
   ============================================= */
select, input, textarea {
    transition: border-color var(--duration-fast) ease,
                box-shadow var(--duration-fast) ease;
}
select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

/* =============================================
   BUTTON SYSTEM
   ============================================= */
.btn-primary {
    background: linear-gradient(135deg, var(--brand-600), var(--brand-500));
    color: #fff;
    font-weight: 800;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(79,70,229,0.25);
    transition: all var(--duration-base) var(--ease-smooth);
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--brand-700), var(--brand-600));
    box-shadow: 0 6px 18px rgba(79,70,229,0.35);
    transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.96); }

.btn-secondary {
    background: rgba(241,245,249,0.9);
    color: #475569;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid #e2e8f0;
    transition: all var(--duration-fast) ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-secondary:hover { background: #e2e8f0; color: #1e293b; }

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(220,38,38,0.2);
    transition: all var(--duration-base) ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.btn-danger:hover { box-shadow: 0 6px 18px rgba(220,38,38,0.3); transform: translateY(-1px); }

/* =============================================
   QUICK FILTER CHIPS
   ============================================= */
.quick-chip {
    transition: all var(--duration-fast) var(--ease-smooth);
    cursor: pointer;
    white-space: nowrap;
}
.quick-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.quick-chip.active-chip {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.35) !important;
}

/* =============================================
   ACTIVE FILTER TAGS
   ============================================= */
.active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-full);
    background: #eef2ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
    font-weight: 700;
    font-size: 11px;
}
.active-filter-tag button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(79, 70, 229, 0.15);
    color: #4338ca;
    margin-left: 2px;
}
.active-filter-tag button:hover { background: #ef4444; color: #fff; }

/* =============================================
   SPENDING MATRIX TABLE
   ============================================= */
#spendingMatrixThead th,
#spendingMatrixTbody td {
    padding: 10px 14px;
    white-space: nowrap;
}
#spendingMatrixTbody tr:hover {
    background-color: rgba(99, 102, 241, 0.04);
}

/* Toasts: see the TOASTS section at the end of this file. */

/* =============================================
   STAFF ATTENDANCE CALENDAR
   ============================================= */
.att-day-btn {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    font-weight: 800;
    font-size: 0.75rem;
    transition: all 0.15s ease;
    cursor: pointer;
    border-width: 2px;
}
.att-present  { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.att-present:hover { background: #d1fae5; }
.att-leave    { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.att-leave:hover { background: #fee2e2; }
.att-half     { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.att-half:hover { background: #fef3c7; }
.att-holiday  { background: #f0fdf4; border-color: #bae6fd; color: #0369a1; }

@media (max-width: 640px) {
    .att-day-btn { font-size: 11px !important; border-width: 1.5px !important; padding: 2px !important; border-radius: 0.5rem !important; }
}

/* =============================================
   BILL RADAR CARDS
   ============================================= */
.bill-card-paid {
    background: linear-gradient(135deg, rgba(236,253,245,0.95), rgba(209,250,229,0.6));
    border-color: #a7f3d0;
}
.bill-card-due {
    background: linear-gradient(135deg, rgba(254,242,242,0.95), rgba(254,226,226,0.6));
    border-color: #fca5a5;
    animation: duePulse 2.5s ease-in-out infinite;
}
.bill-card-sched {
    background: linear-gradient(135deg, rgba(248,250,252,0.95), rgba(241,245,249,0.6));
    border-color: #e2e8f0;
}
@keyframes duePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.012); border-color: #f87171; }
}

/* =============================================
   SPLITWISE BALANCE CARDS
   ============================================= */
.split-balance-positive {
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border-color: #6ee7b7;
    color: #065f46;
}
.split-balance-negative {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #fca5a5;
    color: #991b1b;
}

/* =============================================
   SKELETON LOADERS
   ============================================= */
.skeleton {
    background: linear-gradient(90deg,
        rgba(226,232,240,0.8) 25%,
        rgba(241,245,249,0.9) 50%,
        rgba(226,232,240,0.8) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}
@keyframes skeletonShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* =============================================
   SECTION ENTER ANIMATION
   ============================================= */
.section-enter {
    animation: sectionEnter var(--duration-slow) var(--ease-spring) forwards;
}
@keyframes sectionEnter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   LUXURY HEADER GRADIENT
   ============================================= */
.luxury-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
    position: relative;
    overflow: hidden;
}
.luxury-header::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
    pointer-events: none;
}
.luxury-header::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(124,58,237,0.12) 0%, transparent 70%);
    pointer-events: none;
}

/* =============================================
   PERSONAL HEADER GRADIENT
   ============================================= */
.personal-header {
    background: linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #0f172a 100%);
}

/* =============================================
   SECTION HEADERS
   ============================================= */
.section-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.25rem;
}
.section-header-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* =============================================
   TRANSACTION ROW HOVER
   ============================================= */
.tx-row {
    transition: background-color var(--duration-fast) ease;
    position: relative;
}
.tx-row:hover { background-color: rgba(99,102,241,0.035); }

/* =============================================
   STATUS BADGE SYSTEM
   ============================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.badge-success  { background: #dcfce7; color: #15803d; }
.badge-warning  { background: #fef3c7; color: #92400e; }
.badge-danger   { background: #fee2e2; color: #991b1b; }
.badge-info     { background: #dbeafe; color: #1d4ed8; }
.badge-neutral  { background: #f1f5f9; color: #475569; }
.badge-brand    { background: #eef2ff; color: #4338ca; }
.badge-personal { background: #f5f3ff; color: #5b21b6; }
.badge-payroll  { background: #fffbeb; color: #92400e; }

/* =============================================
   AUDIT TRAIL CARDS
   ============================================= */
.audit-card-luxe {
    position: relative;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: var(--shadow-xs);
    transition: all var(--duration-base) var(--ease-spring);
}
.audit-card-luxe:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(199, 210, 254, 0.8);
}
.audit-badge-luxe {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

/* Chronological Audit Timeline Layout with Glowing Status Dots */
.audit-timeline-container {
    position: relative;
    padding-left: 2.25rem;
}
.audit-timeline-container::before {
    content: '';
    position: absolute;
    top: 1rem;
    bottom: 1.5rem;
    left: 1.05rem;
    width: 2px;
    background: linear-gradient(180deg, #6366f1 0%, #cbd5e1 50%, #e2e8f0 100%);
    border-radius: 9999px;
}
[data-theme="dark"] .audit-timeline-container::before {
    background: linear-gradient(180deg, #6366f1 0%, #334155 50%, #1e293b 100%);
}

.audit-timeline-node {
    position: relative;
    margin-bottom: 1.25rem;
}
.audit-timeline-dot {
    position: absolute;
    left: -2.25rem;
    top: 0.75rem;
    width: 2rem;
    height: 2rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.95), 0 4px 12px rgba(0, 0, 0, 0.12);
    z-index: 10;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .audit-timeline-dot {
    box-shadow: 0 0 0 4px #0f172a, 0 4px 14px rgba(0, 0, 0, 0.4);
}
.audit-timeline-node:hover .audit-timeline-dot {
    transform: scale(1.15);
}

.dot-create {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 12px rgba(16, 185, 129, 0.5) !important;
}
.dot-update {
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 12px rgba(99, 102, 241, 0.5) !important;
}
.dot-config {
    background: linear-gradient(135deg, #9333ea, #a855f7) !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 12px rgba(147, 51, 234, 0.5) !important;
}
.dot-delete {
    background: linear-gradient(135deg, #dc2626, #ef4444) !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 12px rgba(239, 68, 68, 0.5) !important;
}
.dot-system {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 12px rgba(245, 158, 11, 0.5) !important;
}

[data-theme="dark"] .dot-create,
[data-theme="dark"] .dot-update,
[data-theme="dark"] .dot-config,
[data-theme="dark"] .dot-delete,
[data-theme="dark"] .dot-system {
    box-shadow: 0 0 0 3px #0f172a, 0 0 12px currentColor !important;
}

/* =============================================
   MOMENTUM SCROLLING CONTAINERS
   ============================================= */
.table-scroll-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Safe area padding for PWA */
.safe-pb { padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)); }
.safe-pt { padding-top: max(0.75rem, env(safe-area-inset-top, 0px)); }

/* PWA Standalone detection */
@media all and (display-mode: standalone) {
    #mobilePwaBanner { display: none !important; }
}

/* =============================================
   PRINT STYLES — Executive 2-Page PDF Report
   ============================================= */
#printableExecutiveReport { display: none; }

@media print {
    @page { size: A4 portrait; margin: 10mm 12mm; }
    header, nav, .tab-btn, button, #filterCategory, #filterYear,
    #filterMonth, #themeSelector, #mainContentArea, .modal-backdrop,
    #toastContainer, #dashboardAnomalyBanner, #btnInstallPwa {
        display: none !important;
    }
    body { background: #fff !important; color: #0f172a !important; font-size: 11pt !important; margin: 0 !important; padding: 0 !important; }
    #printableExecutiveReport { display: block !important; visibility: visible !important; }
    .print-page-break { page-break-after: always; break-after: page; }
    .no-print { display: none !important; }
}

/* =============================================
   THEME: LUXE INDIGO (Default)
   ============================================= */
[data-theme="indigo"] body {
    background: radial-gradient(ellipse at 20% 0%, #e8ecff 0%, #f0f2f8 40%, #eef0f8 100%);
}

/* =============================================
   THEME: MIDNIGHT DARK
   ============================================= */
[data-theme="dark"] body {
    background: radial-gradient(ellipse at 20% 0%, #0d1117 0%, #0f172a 50%, #020617 100%) !important;
    color: #f1f5f9 !important;
}
[data-theme="dark"] .glass-card {
    background: rgba(15, 23, 42, 0.88) !important;
    border-color: rgba(51, 65, 85, 0.75) !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .kpi-card {
    background: rgba(20, 28, 50, 0.95) !important;
    border-color: rgba(51, 65, 85, 0.7) !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .glass-nav {
    background: rgba(2, 6, 23, 0.97) !important;
    border-color: rgba(30, 41, 59, 0.8) !important;
}
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800 {
    color: #f8fafc !important;
}
[data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-600 {
    color: #94a3b8 !important;
}
[data-theme="dark"] .text-slate-700 { color: #cbd5e1 !important; }
[data-theme="dark"] select, [data-theme="dark"] input, [data-theme="dark"] textarea {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .tab-btn.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
}
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg,
        rgba(51,65,85,0.8) 25%,
        rgba(71,85,105,0.9) 50%,
        rgba(51,65,85,0.8) 75%) !important;
    background-size: 200% 100% !important;
    animation: skeletonShimmer 1.6s ease-in-out infinite !important;
}
[data-theme="dark"] .btn-secondary {
    background: rgba(30,41,59,0.9) !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}
[data-theme="dark"] body { background: radial-gradient(ellipse at 20% 0%, #0d1117 0%, #0f172a 50%, #020617 100%) !important; }

/* =============================================
   THEME: EMERALD MINT
   ============================================= */
[data-theme="emerald"] body {
    background: radial-gradient(ellipse at 20% 0%, #ecfdf5 0%, #f0fdf4 40%, #dcfce7 100%) !important;
    color: #064e3b !important;
}
[data-theme="emerald"] .glass-nav { background: rgba(6, 78, 59, 0.97) !important; }
[data-theme="emerald"] .tab-btn.active {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 4px 12px rgba(5,150,105,0.3);
}
[data-theme="emerald"] .bnav-btn.active { color: #34d399 !important; }
[data-theme="emerald"] .bnav-btn.active i,
.bnav-btn.active .ic { color: #34d399 !important; }
[data-theme="emerald"] .bnav-btn.active::after { background: #34d399; }
[data-theme="emerald"] .fab-add { background: linear-gradient(135deg, #059669, #10b981); }
[data-theme="emerald"] .btn-primary { background: linear-gradient(135deg, #059669, #10b981); box-shadow: 0 4px 12px rgba(5,150,105,0.25); }

/* =============================================
   THEME: SUNSET ROSE
   ============================================= */
[data-theme="rose"] body {
    background: radial-gradient(ellipse at 20% 0%, #fff1f2 0%, #ffe4e6 40%, #fecdd3 100%) !important;
    color: #881337 !important;
}
[data-theme="rose"] .glass-nav { background: rgba(136, 19, 55, 0.97) !important; }
[data-theme="rose"] .tab-btn.active {
    background: linear-gradient(135deg, #e11d48, #f43f5e) !important;
    box-shadow: 0 4px 12px rgba(225,29,72,0.3);
}
[data-theme="rose"] .bnav-btn.active { color: #fb7185 !important; }
[data-theme="rose"] .bnav-btn.active i,
.bnav-btn.active .ic { color: #fb7185 !important; }
[data-theme="rose"] .bnav-btn.active::after { background: #fb7185; }
[data-theme="rose"] .fab-add { background: linear-gradient(135deg, #e11d48, #f43f5e); }
[data-theme="rose"] .btn-primary { background: linear-gradient(135deg, #e11d48, #f43f5e); box-shadow: 0 4px 12px rgba(225,29,72,0.25); }

/* =============================================
   THEME: OCEAN SAPPHIRE
   ============================================= */
[data-theme="ocean"] body {
    background: radial-gradient(ellipse at 20% 0%, #f0f9ff 0%, #e0f2fe 40%, #bae6fd 100%) !important;
    color: #0c4a6e !important;
}
[data-theme="ocean"] .glass-nav { background: rgba(12, 74, 110, 0.97) !important; }
[data-theme="ocean"] .tab-btn.active {
    background: linear-gradient(135deg, #0284c7, #0ea5e9) !important;
    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
}
[data-theme="ocean"] .bnav-btn.active { color: #38bdf8 !important; }
[data-theme="ocean"] .bnav-btn.active i,
.bnav-btn.active .ic { color: #38bdf8 !important; }
[data-theme="ocean"] .bnav-btn.active::after { background: #38bdf8; }
[data-theme="ocean"] .fab-add { background: linear-gradient(135deg, #0284c7, #0ea5e9); }
[data-theme="ocean"] .btn-primary { background: linear-gradient(135deg, #0284c7, #0ea5e9); box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25); }

/* =============================================
   THEME: GOLDEN AMBER
   ============================================= */
[data-theme="amber"] body {
    background: radial-gradient(ellipse at 20% 0%, #fffbeb 0%, #fef3c7 40%, #fde68a 100%) !important;
    color: #78350f !important;
}
[data-theme="amber"] .glass-nav { background: rgba(120, 53, 15, 0.97) !important; }
[data-theme="amber"] .tab-btn.active {
    background: linear-gradient(135deg, #d97706, #f59e0b) !important;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
}
[data-theme="amber"] .bnav-btn.active { color: #fbbf24 !important; }
[data-theme="amber"] .bnav-btn.active i,
.bnav-btn.active .ic { color: #fbbf24 !important; }
[data-theme="amber"] .bnav-btn.active::after { background: #fbbf24; }
[data-theme="amber"] .fab-add { background: linear-gradient(135deg, #d97706, #f59e0b); }
[data-theme="amber"] .btn-primary { background: linear-gradient(135deg, #d97706, #f59e0b); box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25); }

/* =============================================
   THEME: AMETHYST PURPLE
   ============================================= */
[data-theme="purple"] body {
    background: radial-gradient(ellipse at 20% 0%, #faf5ff 0%, #f3e8ff 40%, #e9d5ff 100%) !important;
    color: #581c87 !important;
}
[data-theme="purple"] .glass-nav { background: rgba(88, 28, 135, 0.97) !important; }
[data-theme="purple"] .tab-btn.active {
    background: linear-gradient(135deg, #9333ea, #a855f7) !important;
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.35);
}
[data-theme="purple"] .bnav-btn.active { color: #c084fc !important; }
[data-theme="purple"] .bnav-btn.active i,
.bnav-btn.active .ic { color: #c084fc !important; }
[data-theme="purple"] .bnav-btn.active::after { background: #c084fc; }
[data-theme="purple"] .fab-add { background: linear-gradient(135deg, #9333ea, #a855f7); }
[data-theme="purple"] .btn-primary { background: linear-gradient(135deg, #9333ea, #a855f7); box-shadow: 0 4px 12px rgba(147, 51, 234, 0.25); }

/* =============================================
   THEME: PLATINUM SLATE
   ============================================= */
[data-theme="slate"] body {
    background: radial-gradient(ellipse at 20% 0%, #f8fafc 0%, #f1f5f9 40%, #e2e8f0 100%) !important;
    color: #0f172a !important;
}
[data-theme="slate"] .glass-nav { background: rgba(15, 23, 42, 0.97) !important; }
[data-theme="slate"] .tab-btn.active {
    background: linear-gradient(135deg, #475569, #64748b) !important;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.35);
}
[data-theme="slate"] .bnav-btn.active { color: #94a3b8 !important; }
[data-theme="slate"] .bnav-btn.active i,
.bnav-btn.active .ic { color: #94a3b8 !important; }
[data-theme="slate"] .bnav-btn.active::after { background: #94a3b8; }
[data-theme="slate"] .fab-add { background: linear-gradient(135deg, #475569, #64748b); }
[data-theme="slate"] .btn-primary { background: linear-gradient(135deg, #475569, #64748b); box-shadow: 0 4px 12px rgba(71, 85, 105, 0.25); }

/* =============================================
   ANIMATED ONLINE/OFFLINE STATUS
   ============================================= */
@keyframes statusPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.status-online  { color: #22c55e; animation: statusPulse 2s ease-in-out infinite; }
.status-offline { color: #f59e0b; animation: statusPulse 1.2s ease-in-out infinite; }

/* =============================================
   MOBILE NOTIFICATION BELL ANIMATION
   ============================================= */
@keyframes bellRing {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(14deg); }
    40% { transform: rotate(-12deg); }
    60% { transform: rotate(8deg); }
    80% { transform: rotate(-6deg); }
}
.bell-ring { animation: bellRing 0.7s ease-in-out; }

/* =============================================
   LUXURY GRADIENT ACCENTS
   ============================================= */
.gradient-brand {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
}
.gradient-income {
    background: linear-gradient(135deg, #059669, #10b981);
}
.gradient-payroll {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}
.gradient-personal {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
}
.gradient-danger {
    background: linear-gradient(135deg, #dc2626, #f43f5e);
}
.gradient-settle {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
}

/* =============================================
   OFFLINE SYNC BADGE ANIMATION
   ============================================= */
@keyframes syncPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.75; transform: scale(0.97); }
}
.syncing-badge { animation: syncPulse 1.5s ease-in-out infinite; }

/* =============================================
   DATA HEALTH / INTEGRITY ROWS
   ============================================= */
.integrity-ok   { border-left: 3px solid #10b981; }
.integrity-warn { border-left: 3px solid #f59e0b; }
.integrity-err  { border-left: 3px solid #ef4444; }

/* =============================================
   RESPONSIVE UTILITIES
   ============================================= */
@media (max-width: 640px) {
    .hide-mobile { display: none !important; }
    .mobile-full { width: 100% !important; }
}
@media (min-width: 641px) {
    .hide-desktop { display: none !important; }
}

/* PWA iOS Momentum scroll */
.overflow-y-auto { -webkit-overflow-scrolling: touch; }

/* =============================================
   COMPREHENSIVE DARK MODE REFINEMENTS
   ============================================= */
[data-theme="dark"] .modal-content {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .modal-content label {
    color: #94a3b8 !important;
}
[data-theme="dark"] #cardPersonalPalash,
[data-theme="dark"] #cardPersonalPallavi,
[data-theme="dark"] #cardPersonalCombined,
[data-theme="dark"] #cardPersonalRatio {
    background: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(71, 85, 105, 0.6) !important;
}
[data-theme="dark"] #personalActiveFilterIndicator {
    background: rgba(30, 27, 75, 0.6) !important;
    border-color: rgba(109, 40, 217, 0.5) !important;
    color: #e9d5ff !important;
}
[data-theme="dark"] #customDateDrawer {
    background: rgba(30, 27, 75, 0.6) !important;
    border-color: rgba(99, 102, 241, 0.4) !important;
}
[data-theme="dark"] .bg-slate-50 {
    background-color: rgba(15, 23, 42, 0.75) !important;
}
[data-theme="dark"] .bg-slate-100 {
    background-color: rgba(30, 41, 59, 0.75) !important;
}
[data-theme="dark"] .border-slate-100,
[data-theme="dark"] .border-slate-200,
[data-theme="dark"] .border-slate-300 {
    border-color: rgba(51, 65, 85, 0.7) !important;
}
[data-theme="dark"] table tbody td {
    color: #e2e8f0 !important;
}
[data-theme="dark"] table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.12) !important;
}
[data-theme="dark"] #moreNavDrawer {
    background: rgba(2, 6, 23, 0.98) !important;
    border-color: rgba(51, 65, 85, 0.8) !important;
}
[data-theme="dark"] #notificationCenterDropdown,
[data-theme="dark"] #exportDropdownMenu,
[data-theme="dark"] #mobileActionDropdown {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] #notificationCenterDropdown button,
[data-theme="dark"] #exportDropdownMenu button,
[data-theme="dark"] #mobileActionDropdown button {
    color: #cbd5e1 !important;
}
[data-theme="dark"] #notificationCenterDropdown button:hover,
[data-theme="dark"] #exportDropdownMenu button:hover,
[data-theme="dark"] #mobileActionDropdown button:hover {
    background-color: #1e293b !important;
    color: #ffffff !important;
}

/* =============================================
   DESKTOP LEFT SIDEBAR STYLES
   ============================================= */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #94a3b8;
    transition: all var(--duration-base) var(--ease-smooth);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    width: 100%;
}
.sidebar-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}
.sidebar-link.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f46e5, #6366f1) !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3) !important;
}
.sidebar-link.active i,
.sidebar-link.active .ic {
    color: #ffffff !important;
}

/* ==========================================================================
   FIELD-LEVEL VALIDATION MESSAGES
   Shown next to the input that is wrong, so the owner can see on a phone
   exactly which field blocked the save instead of guessing why nothing
   happened. Hidden until a save actually fails.
   ========================================================================== */
.field-error {
    display: none;
    margin-top: 0.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.3;
    color: #e11d48;
}
.field-error.is-visible {
    display: block;
}
.has-field-error input,
.has-field-error select {
    border-color: #e11d48 !important;
}

/* ==========================================================================
   MOBILE TAP TARGETS
   The owner uses this app on a phone. Anything tappable has to be reachable
   with a thumb: 44x44 px is the WCAG 2.5.5 / Apple HIG floor. Before this
   rule, 34 of 42 visible controls at 390px were smaller than that, and some
   icon buttons were 8x8.

   Scoped to phone widths so the desktop table density is untouched. Opt out
   with .tap-exempt only for genuinely non-interactive decoration.
   ========================================================================== */
@media (max-width: 767px) {
    button:not(.tap-exempt),
    a[role="button"]:not(.tap-exempt),
    [role="button"]:not(.tap-exempt),
    select:not(.tap-exempt),
    [onclick]:not(.tap-exempt),
    .bnav-btn,
    .sidebar-link {
        min-height: 44px;
    }
    button:not(.tap-exempt),
    a[role="button"]:not(.tap-exempt),
    [role="button"]:not(.tap-exempt),
    select:not(.tap-exempt),
    .bnav-btn {
        min-width: 44px;
    }

    /* Destructive confirmations: full width, unmistakably separated, and
       large enough that a mis-tap is unlikely. */
    #deleteConfirmModal button {
        min-height: 48px;
    }

    /* The theme palette is an invisible <select> stretched over an icon tile;
       the tile is the tap target, so it has to carry the full 44px. */
    .theme-trigger {
        min-width: 44px;
        min-height: 44px;
    }

    /* Icon-only buttons centre their glyph in the enlarged box. */
    /* `:not(.hidden):not([hidden])` matters: this rule is more specific than
       Tailwind's `.hidden { display: none }`, so without it every button the app
       hides stays on screen and keeps taking up 44px. That is what pushed the
       mobile header controls past the right edge. */
    button:not(.tap-exempt):not(.hidden):not([hidden]) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Buttons that were laid out as blocks keep filling their row. */
    button.w-full:not(.tap-exempt) {
        width: 100%;
    }

    /* A checkbox stays visually small but its label carries the tap area. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
    }

    /* 16px is the threshold below which iOS Safari zooms the page on focus. */
    input:not([type="checkbox"]):not([type="radio"]),
    select,
    textarea {
        font-size: 16px;
    }

    /* Keep at least 8px between adjacent targets in the common flex rows. */
    .flex > button + button {
        margin-left: 0.5rem;
    }
}

/* ==========================================================================
   STICKY SAVE BAR  (mobile)
   Inline row edits are only persisted by the single global Save. On a phone
   that button is far above the fold, so a bar pinned above the bottom nav
   keeps it reachable and makes pending changes impossible to miss. Sits above
   the home indicator via env(safe-area-inset-bottom).
   ========================================================================== */
.sticky-save-bar {
    position: sticky;
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 30;
    padding: 0 0.25rem;
}
.sticky-save-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: #1e1b4b;
    border: 1px solid #4338ca;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.45);
}
.sticky-save-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 800;
    color: #fcd34d;
}
.sticky-save-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border: 0;
    border-radius: 0.75rem;
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 900;
    cursor: pointer;
}
.sticky-save-bar-btn:disabled {
    opacity: 0.65;
    cursor: progress;
}

/* Desktop keeps the header Save; the sticky bar is a phone affordance. */
@media (min-width: 768px) {
    .sticky-save-bar { display: none !important; }
}

/* A save in flight cannot be double-tapped. */
button[data-busy="1"] {
    opacity: 0.65;
    pointer-events: none;
}

/* ==========================================================================
   INLINE ROW LINKS
   A clickable name inside a table cell renders as a 38x15 inline span, which
   is far below the thumb minimum. Give it a real 44px tap box on phones
   without changing how it looks on desktop.
   ========================================================================== */
@media (max-width: 767px) {
    .tap-row-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;   /* short names like "Palash" are only 38px wide */
    }
}

/* ==========================================================================
   EXPENSE LEDGER VIEW SWITCHER
   "auto" reproduces the original behaviour exactly - timeline cards on phones,
   table on desktop - so nothing changes until the owner picks a view. An
   explicit choice then wins at every width, which is the point: a table is
   genuinely useful on a phone for scanning many rows, and the cards are nicer
   on a laptop when reading a few.

   Driven by an attribute rather than JS toggling classes, so the correct view
   still shows if the script has not run yet.
   ========================================================================== */
#expenseLedgerContainer[data-expense-view="auto"] #expenseTableView { display: none; }
#expenseLedgerContainer[data-expense-view="auto"] #mobileExpenseCardList { display: block; }

@media (min-width: 768px) {
    #expenseLedgerContainer[data-expense-view="auto"] #expenseTableView { display: block; }
    #expenseLedgerContainer[data-expense-view="auto"] #mobileExpenseCardList { display: none; }
}

#expenseLedgerContainer[data-expense-view="table"] #expenseTableView { display: block; }
#expenseLedgerContainer[data-expense-view="table"] #mobileExpenseCardList { display: none; }

#expenseLedgerContainer[data-expense-view="timeline"] #expenseTableView { display: none; }
#expenseLedgerContainer[data-expense-view="timeline"] #mobileExpenseCardList { display: block; }

/* Segmented control states */
.expense-view-btn {
    color: #475569;
    background: transparent;
    min-height: 44px;
}
.expense-view-btn:hover {
    color: #1e293b;
    background: rgba(255, 255, 255, 0.7);
}
.expense-view-btn[aria-pressed="true"] {
    color: #ffffff;
    background: linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

/* On a phone the table has to scroll sideways rather than squeeze every
   column into 390px. */
@media (max-width: 767px) {
    #expenseLedgerContainer[data-expense-view="table"] #expenseTableView table {
        min-width: 720px;
    }
}

/* =================================================================
   GHARKHATA v6 — ADVANCE DESIGN SYSTEM
   =================================================================
   A systems-level pass over every tab. It deliberately changes no
   markup contract: every id, every handler and every .hidden toggle
   behaves exactly as before. What changes is the visual language.

   Why a token bridge (section B): the markup styles itself with
   Tailwind utilities (bg-white, text-slate-900, border-slate-200 and
   friends). Those are hard-coded light values, so the dark theme used
   to be a patchwork - dark cards with light insets, invisible table
   headers, washed-out borders. Mapping the utilities onto semantic
   tokens makes every tab follow the theme instead of only the handful
   of components that had explicit overrides.
   ================================================================= */

/* -----------------------------------------------------------------
   A. SEMANTIC SURFACE / INK / LINE TOKENS
   Four surface depths, three ink weights, two hairlines. Themes
   redefine these and nothing else.
   ----------------------------------------------------------------- */
:root {
    --surface-0: #eef1f8;            /* the page itself          */
    --surface-1: #ffffff;            /* cards                    */
    --surface-2: #f7f9fc;            /* insets inside a card     */
    --surface-3: #eef2f7;            /* raised chips, table head */
    --surface-4: #0f172a;            /* inverted blocks          */

    --ink-1: #0f172a;                /* headings, amounts        */
    --ink-2: #475569;                /* body                     */
    --ink-3: #8795ab;                /* labels, captions         */
    --ink-inv: #f8fafc;

    --line-1: rgba(15, 23, 42, 0.07);  /* hairline               */
    --line-2: rgba(15, 23, 42, 0.13);  /* defined edge           */

    --accent: #4f46e5;
    --accent-soft: rgba(79, 70, 229, 0.10);
    --accent-ink: #ffffff;

    --tint-strength: 10%;

    /* Layered elevation. Two shadows each: a tight contact shadow
       and a wide ambient one, which reads as depth rather than blur. */
    --elev-1: 0 1px 2px rgba(15, 23, 42, .05), 0 1px 3px rgba(15, 23, 42, .04);
    --elev-2: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 20px -6px rgba(15, 23, 42, .10);
    --elev-3: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px -12px rgba(15, 23, 42, .18);
    --elev-4: 0 4px 8px rgba(15, 23, 42, .08), 0 32px 64px -16px rgba(15, 23, 42, .28);

    --ring: 0 0 0 3px rgba(79, 70, 229, .32);

    /* -------------------------------------------------------------
       CANONICAL SCALES
       The markup had eleven type sizes, six weights, six radii and
       eleven hues, so none of them carried meaning: when almost every
       number is font-black, weight stops saying "this one matters".
       These are the only values redesigned screens may use. Declared
       here, in the token layer, rather than as another override sheet.
       ------------------------------------------------------------- */

    /* Type - 5 steps. Nothing below 12px: 8px and 9px captions were
       below legibility and 10/11px was an unlabelled sixth and seventh
       step that existed only by accident. */
    --fs-xs:   0.75rem;    /* 12px  captions, meta, table cells       */
    --fs-sm:   0.875rem;   /* 14px  body                              */
    --fs-base: 1rem;       /* 16px  emphasis                          */
    --fs-lg:   1.125rem;   /* 18px  card titles                       */
    --fs-2xl:  1.5rem;     /* 24px  primary figures                   */

    /* Weight - 3 steps. Body is medium, headings semibold, figures
       bold. Nothing heavier: font-black was used 211 times app-wide. */
    --fw-body:    500;
    --fw-heading: 600;
    --fw-figure:  700;

    /* Radius - 4 steps plus pill: 6 / 8 / 12 / 16.
       --r-xl is retained as a name so nothing has to be rewritten, but it
       resolves to --r-lg: there is no fifth step. */
    --r-xs:   0.375rem;    /*  6px  chips, inline tags */
    --r-sm:   0.5rem;      /*  8px  inputs             */
    --r-md:   0.75rem;     /* 12px  buttons, tiles     */
    --r-lg:   1rem;        /* 16px  cards, sheets      */
    --r-xl:   var(--r-lg); /* legacy alias             */
    --r-pill: 9999px;

    /* Spacing - 6 steps: 4 / 8 / 12 / 16 / 24 / 32. */
    --sp-1: 0.25rem;       /*  4px  icon gaps            */
    --sp-2: 0.5rem;        /*  8px  within a control     */
    --sp-3: 0.75rem;       /* 12px  between controls     */
    --sp-4: 1rem;          /* 16px  card padding         */
    --sp-5: 1.5rem;        /* 24px  between cards        */
    --sp-6: 2rem;          /* 32px  between sections     */

    /* Hue - 5 semantic roles plus neutral. Decorative violet, teal,
       purple and orange carried no meaning and are mapped onto these. */
    --sem-primary: #4f46e5;   /* indigo  - brand, household        */
    --sem-success: #059669;   /* emerald - income, paid, positive  */
    --sem-warning: #d97706;   /* amber   - due soon, attention     */
    --sem-danger:  #e11d48;   /* rose    - overdue, over budget    */
    --sem-info:    #0284c7;   /* sky     - neutral information     */
}

/* Each theme restates only the tokens it changes. */
[data-theme="indigo"] { --accent: #4f46e5; --accent-soft: rgba(79,70,229,.10); }
[data-theme="emerald"] { --accent: #059669; --accent-soft: rgba(5,150,105,.12); }
[data-theme="rose"]    { --accent: #e11d48; --accent-soft: rgba(225,29,72,.12); }
[data-theme="ocean"]   { --accent: #0284c7; --accent-soft: rgba(2,132,199,.12); }
[data-theme="amber"]   { --accent: #d97706; --accent-soft: rgba(217,119,6,.14); }
[data-theme="purple"]  { --accent: #9333ea; --accent-soft: rgba(147,51,234,.12); }
[data-theme="slate"]   { --accent: #475569; --accent-soft: rgba(71,85,105,.12); }

[data-theme="dark"] {
    --surface-0: #070b16;
    --surface-1: #121a2b;
    --surface-2: #18223a;
    --surface-3: #1f2b45;
    --surface-4: #060a14;

    --ink-1: #f1f5f9;
    --ink-2: #b6c2d4;
    --ink-3: #7e8ca3;
    --ink-inv: #0b1120;

    --line-1: rgba(148, 163, 184, 0.13);
    --line-2: rgba(148, 163, 184, 0.24);

    --accent: #818cf8;
    --accent-soft: rgba(129, 140, 248, 0.16);
    --accent-ink: #0b1120;

    --tint-strength: 18%;

    --elev-1: 0 1px 2px rgba(0, 0, 0, .40);
    --elev-2: 0 1px 2px rgba(0, 0, 0, .40), 0 8px 20px -6px rgba(0, 0, 0, .55);
    --elev-3: 0 2px 4px rgba(0, 0, 0, .45), 0 18px 40px -12px rgba(0, 0, 0, .65);
    --elev-4: 0 4px 8px rgba(0, 0, 0, .50), 0 32px 64px -16px rgba(0, 0, 0, .75);

    --ring: 0 0 0 3px rgba(129, 140, 248, .40);
}

/* Per-theme ground. Each theme keeps its character through one token
   instead of its own body rule. */
[data-theme="indigo"]  { --surface-0: #eef1f8; }
[data-theme="emerald"] { --surface-0: #edf9f3; }
[data-theme="rose"]    { --surface-0: #fdf1f3; }
[data-theme="ocean"]   { --surface-0: #edf5fd; }
[data-theme="amber"]   { --surface-0: #fdf8ea; }
[data-theme="purple"]  { --surface-0: #f7f1fd; }
[data-theme="slate"]   { --surface-0: #f1f4f9; }

/* The page ground. A single soft wash instead of a hard flat fill, so cards
   read as sitting on something.
   This has to out-specify and out-rank the old per-theme body rules: most of
   them set a gradient through the `background` shorthand, which silently
   resets background-color to transparent. The page looked fine only because
   the gradient covered it, and nothing downstream could reason about the
   actual ground colour. */
[data-theme] body {
    background-color: var(--surface-0) !important;
    background-image:
        radial-gradient(60rem 40rem at 12% -10%, var(--accent-soft), transparent 60%),
        radial-gradient(50rem 36rem at 100% 0%, rgba(14, 165, 233, .07), transparent 55%) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    color: var(--ink-2) !important;
}
[data-theme="dark"] body {
    background-image:
        radial-gradient(60rem 40rem at 12% -10%, rgba(99, 102, 241, .18), transparent 60%),
        radial-gradient(50rem 36rem at 100% 0%, rgba(14, 165, 233, .12), transparent 55%) !important;
}

/* -----------------------------------------------------------------
   B. TAILWIND UTILITY BRIDGE
   The markup is styled with utilities; these map the ones actually
   used onto the tokens above. Scoped to the themed document so the
   default light theme keeps Tailwind's own values where they are
   already right, and every other theme gets a coherent surface.
   ----------------------------------------------------------------- */
[data-theme] .bg-white      { background-color: var(--surface-1) !important; }
[data-theme] .bg-slate-50   { background-color: var(--surface-2) !important; }
[data-theme] .bg-slate-100  { background-color: var(--surface-3) !important; }
[data-theme] .bg-slate-200  { background-color: var(--surface-3) !important; }

[data-theme] .text-slate-900,
[data-theme] .text-slate-800 { color: var(--ink-1) !important; }
[data-theme] .text-slate-700,
[data-theme] .text-slate-600 { color: var(--ink-2) !important; }
[data-theme] .text-slate-500,
[data-theme] .text-slate-400 { color: var(--ink-3) !important; }

[data-theme] .border-slate-100 { border-color: var(--line-1) !important; }
[data-theme] .border-slate-200,
[data-theme] .border-slate-300 { border-color: var(--line-2) !important; }

/* Inverted blocks (table heads, dark panels) keep their contrast by
   moving with the theme rather than staying pinned to slate-900. */
[data-theme] .bg-slate-900,
[data-theme] .bg-slate-950 { background-color: var(--surface-4) !important; }
[data-theme] .bg-slate-800 { background-color: var(--surface-4) !important; }

/* -----------------------------------------------------------------
   B2. DARK BRIDGE - GENERATED
   Every tinted Tailwind utility this app actually uses, mapped onto
   the token layer. Generated from the markup and the two renderers
   rather than listed by hand, because the member chips, badges and
   status pills are built in JS and kept drifting out of the hand-
   written list - which is how a near-white "Pallavi" chip and an
   unreadable "Filters:" pill survived on a dark background.
   ----------------------------------------------------------------- */
/* Near-white tinted panels become a card inset. */
[data-theme="dark"] [class~="bg-amber-50"],
[data-theme="dark"] [class~="bg-amber-50/30"],
[data-theme="dark"] [class~="bg-amber-50/40"],
[data-theme="dark"] [class~="bg-amber-50/50"],
[data-theme="dark"] [class~="bg-amber-50/60"],
[data-theme="dark"] [class~="bg-amber-50/70"],
[data-theme="dark"] [class~="bg-amber-50/80"],
[data-theme="dark"] [class~="bg-cyan-50"],
[data-theme="dark"] [class~="bg-emerald-50"],
[data-theme="dark"] [class~="bg-emerald-50/40"],
[data-theme="dark"] [class~="bg-emerald-50/60"],
[data-theme="dark"] [class~="bg-emerald-50/70"],
[data-theme="dark"] [class~="bg-indigo-50"],
[data-theme="dark"] [class~="bg-indigo-50/40"],
[data-theme="dark"] [class~="bg-indigo-50/50"],
[data-theme="dark"] [class~="bg-indigo-50/60"],
[data-theme="dark"] [class~="bg-indigo-50/70"],
[data-theme="dark"] [class~="bg-indigo-50/80"],
[data-theme="dark"] [class~="bg-indigo-50/90"],
[data-theme="dark"] [class~="bg-pink-50"],
[data-theme="dark"] [class~="bg-purple-50"],
[data-theme="dark"] [class~="bg-purple-50/40"],
[data-theme="dark"] [class~="bg-purple-50/90"],
[data-theme="dark"] [class~="bg-red-50"],
[data-theme="dark"] [class~="bg-rose-50"],
[data-theme="dark"] [class~="bg-rose-50/40"],
[data-theme="dark"] [class~="bg-sky-50"],
[data-theme="dark"] [class~="bg-slate-50"],
[data-theme="dark"] [class~="bg-slate-50/50"],
[data-theme="dark"] [class~="bg-slate-50/60"],
[data-theme="dark"] [class~="bg-slate-50/70"],
[data-theme="dark"] [class~="bg-slate-50/80"],
[data-theme="dark"] [class~="bg-slate-50/90"],
[data-theme="dark"] [class~="bg-violet-50"],
[data-theme="dark"] [class~="bg-violet-50/70"] {
    background-color: var(--surface-2) !important;
}
/* Neutral chips sit one step above the inset. */
[data-theme="dark"] [class~="bg-slate-100"],
[data-theme="dark"] [class~="bg-slate-100/70"],
[data-theme="dark"] [class~="bg-slate-100/80"],
[data-theme="dark"] [class~="bg-slate-200"] {
    background-color: var(--surface-3) !important;
}
/* Inverted panels stay the darkest surface. */
[data-theme="dark"] [class~="bg-indigo-950"],
[data-theme="dark"] [class~="bg-indigo-950/80"],
[data-theme="dark"] [class~="bg-slate-800"],
[data-theme="dark"] [class~="bg-slate-800/50"],
[data-theme="dark"] [class~="bg-slate-800/80"],
[data-theme="dark"] [class~="bg-slate-800/90"],
[data-theme="dark"] [class~="bg-slate-900"],
[data-theme="dark"] [class~="bg-slate-900/90"],
[data-theme="dark"] [class~="bg-slate-900/95"],
[data-theme="dark"] [class~="bg-slate-950"],
[data-theme="dark"] [class~="bg-slate-950/50"],
[data-theme="dark"] [class~="bg-slate-950/70"],
[data-theme="dark"] [class~="bg-slate-950/75"],
[data-theme="dark"] [class~="bg-slate-950/85"] {
    background-color: var(--surface-4) !important;
}
/* Accent chips keep their hue, at a weight that
   works on a dark card. */
[data-theme="dark"] [class~="bg-amber-100"] {
    background-color: rgba(245,158,11, .20) !important;
}
[data-theme="dark"] [class~="bg-amber-200"] {
    background-color: rgba(245,158,11, .28) !important;
}
[data-theme="dark"] [class~="bg-blue-100"] {
    background-color: rgba(59,130,246, .20) !important;
}
[data-theme="dark"] [class~="bg-cyan-100"] {
    background-color: rgba(6,182,212, .20) !important;
}
[data-theme="dark"] [class~="bg-emerald-100"] {
    background-color: rgba(16,185,129, .20) !important;
}
[data-theme="dark"] [class~="bg-emerald-200"] {
    background-color: rgba(16,185,129, .28) !important;
}
[data-theme="dark"] [class~="bg-indigo-100"],
[data-theme="dark"] [class~="bg-indigo-100/70"] {
    background-color: rgba(99,102,241, .20) !important;
}
[data-theme="dark"] [class~="bg-indigo-200"] {
    background-color: rgba(99,102,241, .28) !important;
}
[data-theme="dark"] [class~="bg-orange-100"] {
    background-color: rgba(249,115,22, .20) !important;
}
[data-theme="dark"] [class~="bg-pink-100"] {
    background-color: rgba(236,72,153, .20) !important;
}
[data-theme="dark"] [class~="bg-purple-100"] {
    background-color: rgba(168,85,247, .20) !important;
}
[data-theme="dark"] [class~="bg-purple-200"] {
    background-color: rgba(168,85,247, .28) !important;
}
[data-theme="dark"] [class~="bg-red-100"] {
    background-color: rgba(239,68,68, .20) !important;
}
[data-theme="dark"] [class~="bg-rose-100"] {
    background-color: rgba(244,63,94, .20) !important;
}
[data-theme="dark"] [class~="bg-sky-100"] {
    background-color: rgba(14,165,233, .20) !important;
}
[data-theme="dark"] [class~="bg-teal-100"] {
    background-color: rgba(20,184,166, .20) !important;
}
[data-theme="dark"] [class~="bg-violet-100"] {
    background-color: rgba(139,92,246, .20) !important;
}
/* Deep accent text is unreadable on a dark card; lift each
   hue to its 300 weight. */
[data-theme="dark"] [class~="text-amber-600"],
[data-theme="dark"] [class~="text-amber-700"],
[data-theme="dark"] [class~="text-amber-800"],
[data-theme="dark"] [class~="text-amber-900"],
[data-theme="dark"] [class~="text-amber-950"] {
    color: #fcd34d !important;
}
[data-theme="dark"] [class~="text-blue-600"],
[data-theme="dark"] [class~="text-blue-800"] {
    color: #93c5fd !important;
}
[data-theme="dark"] [class~="text-cyan-600"],
[data-theme="dark"] [class~="text-cyan-700"] {
    color: #67e8f9 !important;
}
[data-theme="dark"] [class~="text-emerald-600"],
[data-theme="dark"] [class~="text-emerald-700"],
[data-theme="dark"] [class~="text-emerald-800"],
[data-theme="dark"] [class~="text-emerald-900"],
[data-theme="dark"] [class~="text-emerald-950"] {
    color: #6ee7b7 !important;
}
[data-theme="dark"] [class~="text-indigo-600"],
[data-theme="dark"] [class~="text-indigo-700"],
[data-theme="dark"] [class~="text-indigo-800"],
[data-theme="dark"] [class~="text-indigo-900"],
[data-theme="dark"] [class~="text-indigo-950"] {
    color: #a5b4fc !important;
}
[data-theme="dark"] [class~="text-orange-600"],
[data-theme="dark"] [class~="text-orange-700"] {
    color: #fdba74 !important;
}
[data-theme="dark"] [class~="text-pink-600"],
[data-theme="dark"] [class~="text-pink-700"],
[data-theme="dark"] [class~="text-pink-900"],
[data-theme="dark"] [class~="text-pink-950"] {
    color: #f9a8d4 !important;
}
[data-theme="dark"] [class~="text-purple-600"],
[data-theme="dark"] [class~="text-purple-700"],
[data-theme="dark"] [class~="text-purple-800"],
[data-theme="dark"] [class~="text-purple-900"],
[data-theme="dark"] [class~="text-purple-950"] {
    color: #d8b4fe !important;
}
[data-theme="dark"] [class~="text-red-600"],
[data-theme="dark"] [class~="text-red-700"] {
    color: #fca5a5 !important;
}
[data-theme="dark"] [class~="text-rose-600"],
[data-theme="dark"] [class~="text-rose-700"],
[data-theme="dark"] [class~="text-rose-800"],
[data-theme="dark"] [class~="text-rose-900"] {
    color: #fda4af !important;
}
[data-theme="dark"] [class~="text-sky-600"],
[data-theme="dark"] [class~="text-sky-700"],
[data-theme="dark"] [class~="text-sky-800"],
[data-theme="dark"] [class~="text-sky-900"] {
    color: #7dd3fc !important;
}
[data-theme="dark"] [class~="text-teal-600"],
[data-theme="dark"] [class~="text-teal-700"],
[data-theme="dark"] [class~="text-teal-800"] {
    color: #5eead4 !important;
}
[data-theme="dark"] [class~="text-violet-600"],
[data-theme="dark"] [class~="text-violet-700"],
[data-theme="dark"] [class~="text-violet-800"],
[data-theme="dark"] [class~="text-violet-900"] {
    color: #c4b5fd !important;
}
/* Tinted hairlines would glow white. */
[data-theme="dark"] [class~="border-amber-100"],
[data-theme="dark"] [class~="border-amber-100/80"],
[data-theme="dark"] [class~="border-emerald-100"],
[data-theme="dark"] [class~="border-emerald-100/80"],
[data-theme="dark"] [class~="border-indigo-100"],
[data-theme="dark"] [class~="border-indigo-100/80"],
[data-theme="dark"] [class~="border-slate-100"],
[data-theme="dark"] [class~="border-slate-50"],
[data-theme="dark"] [class~="border-violet-100"],
[data-theme="dark"] [class~="border-violet-100/80"] {
    border-color: var(--line-1) !important;
}
[data-theme="dark"] [class~="border-amber-200"],
[data-theme="dark"] [class~="border-blue-200"],
[data-theme="dark"] [class~="border-cyan-200"],
[data-theme="dark"] [class~="border-emerald-200"],
[data-theme="dark"] [class~="border-indigo-200"],
[data-theme="dark"] [class~="border-indigo-200/70"],
[data-theme="dark"] [class~="border-indigo-200/80"],
[data-theme="dark"] [class~="border-indigo-200/90"],
[data-theme="dark"] [class~="border-pink-200"],
[data-theme="dark"] [class~="border-pink-200/70"],
[data-theme="dark"] [class~="border-purple-200"],
[data-theme="dark"] [class~="border-purple-200/70"],
[data-theme="dark"] [class~="border-purple-200/80"],
[data-theme="dark"] [class~="border-red-200"],
[data-theme="dark"] [class~="border-rose-200"],
[data-theme="dark"] [class~="border-sky-200"],
[data-theme="dark"] [class~="border-slate-200"],
[data-theme="dark"] [class~="border-slate-200/60"],
[data-theme="dark"] [class~="border-slate-200/70"],
[data-theme="dark"] [class~="border-slate-200/80"],
[data-theme="dark"] [class~="border-slate-200/90"],
[data-theme="dark"] [class~="border-slate-300"],
[data-theme="dark"] [class~="border-violet-200"],
[data-theme="dark"] [class~="border-violet-200/70"] {
    border-color: var(--line-2) !important;
}

/* -----------------------------------------------------------------
   B3. DARK COVERAGE FOR BASE COMPONENTS
   The generated bridge above only reaches Tailwind utilities. These
   components paint themselves from hard-coded hex in the base layer,
   so no amount of utility mapping touches them, and several only
   appear under a condition - an active filter, a configured bill, a
   non-zero split balance - which is why they stayed light long after
   the rest of the app went dark.
   ----------------------------------------------------------------- */

/* Active filter chips. The one the audit caught. */
[data-theme="dark"] .active-filter-tag {
    background: var(--surface-3);
    color: var(--ink-1);
    border-color: var(--line-2);
}
[data-theme="dark"] .active-filter-tag button {
    background: rgba(129, 140, 248, .22);
    color: #c7d2fe;
}

/* Attendance calendar day states. */
[data-theme="dark"] .att-present        { background: rgba(16, 185, 129, .18); border-color: rgba(16, 185, 129, .40); }
[data-theme="dark"] .att-present:hover  { background: rgba(16, 185, 129, .28); }
[data-theme="dark"] .att-leave          { background: rgba(244, 63, 94, .18);  border-color: rgba(244, 63, 94, .40); }
[data-theme="dark"] .att-leave:hover    { background: rgba(244, 63, 94, .28); }
[data-theme="dark"] .att-half           { background: rgba(245, 158, 11, .18); border-color: rgba(245, 158, 11, .40); }
[data-theme="dark"] .att-half:hover     { background: rgba(245, 158, 11, .28); }
[data-theme="dark"] .att-holiday        { background: rgba(56, 189, 248, .16); border-color: rgba(56, 189, 248, .36); }

/* Bill radar cards. */
[data-theme="dark"] .bill-card-paid  { background: linear-gradient(135deg, rgba(16, 185, 129, .20), rgba(16, 185, 129, .08)); }
[data-theme="dark"] .bill-card-due   { background: linear-gradient(135deg, rgba(244, 63, 94, .20), rgba(244, 63, 94, .08)); }
[data-theme="dark"] .bill-card-sched { background: linear-gradient(135deg, var(--surface-2), var(--surface-1)); }

/* Settle-up balance panels. */
[data-theme="dark"] .split-balance-positive { background: linear-gradient(135deg, rgba(16, 185, 129, .22), rgba(16, 185, 129, .10)); }
[data-theme="dark"] .split-balance-negative { background: linear-gradient(135deg, rgba(244, 63, 94, .22), rgba(244, 63, 94, .10)); }

/* Status badges keep their meaning, at a weight that reads on a dark card. */
[data-theme="dark"] .badge-success  { background: rgba(34, 197, 94, .20);   color: #86efac; }
[data-theme="dark"] .badge-warning  { background: rgba(245, 158, 11, .20);  color: #fcd34d; }
[data-theme="dark"] .badge-danger   { background: rgba(244, 63, 94, .20);   color: #fda4af; }
[data-theme="dark"] .badge-info     { background: rgba(59, 130, 246, .20);  color: #93c5fd; }
[data-theme="dark"] .badge-neutral  { background: var(--surface-3);         color: var(--ink-2); }
[data-theme="dark"] .badge-brand    { background: rgba(99, 102, 241, .20);  color: #a5b4fc; }
[data-theme="dark"] .badge-personal { background: rgba(168, 85, 247, .20);  color: #d8b4fe; }
[data-theme="dark"] .badge-payroll  { background: rgba(245, 158, 11, .20);  color: #fcd34d; }

/* Raised surfaces and the audit timeline cards. */
[data-theme="dark"] .glass-card-elevated,
[data-theme="dark"] .audit-card-luxe {
    background: var(--surface-1);
    border-color: var(--line-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
[data-theme="dark"] .audit-card-luxe:hover { border-color: var(--line-2); }

/* Chrome that is easy to forget. */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--line-2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--ink-3); }
[data-theme="dark"] .expense-view-btn:hover { background: var(--surface-3); }
[data-theme="dark"] .sidebar-link:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .toast-item { background: var(--surface-1); border-color: var(--line-2); color: var(--ink-1); }
[data-theme="dark"] .sticky-save-bar-inner { background: var(--surface-1); border-color: var(--line-2); }

/* Solid accent fills stay solid - they carry white text. */
[data-theme="dark"] .bg-indigo-600, [data-theme="dark"] .bg-indigo-700,
[data-theme="dark"] .bg-emerald-600, [data-theme="dark"] .bg-emerald-700,
[data-theme="dark"] .bg-amber-600, [data-theme="dark"] .bg-rose-600,
[data-theme="dark"] .bg-violet-600, [data-theme="dark"] .bg-purple-600 { color: #fff !important; }

/* -----------------------------------------------------------------
   C. TYPOGRAPHY & NUMERICS
   Amounts are the primary content of this app, so they get fixed-
   width figures: columns of money line up instead of jittering.
   ----------------------------------------------------------------- */
body {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "cv11" 1;
    letter-spacing: -0.005em;
}

h1, h2, h3, h4 {
    letter-spacing: -0.022em;
    color: var(--ink-1);
}

/* A real hierarchy. Everything was font-black, so nothing led. */
.kpi-card h3,
[id^="stat"], [id^="ytd"], [id^="budget"], [id^="runway"],
.money {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.03em;
}

/* Eyebrow labels: small, wide, quiet. */
.text-\[10px\].uppercase, .text-\[11px\].uppercase,
.uppercase.tracking-wider, .uppercase.tracking-widest {
    letter-spacing: 0.08em;
}

/* -----------------------------------------------------------------
   D. SURFACES
   Backdrop blur is expensive on phones and muddied every card. These
   are opaque surfaces with a hairline and layered elevation instead.
   ----------------------------------------------------------------- */
.glass-card {
    background: var(--surface-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-1);
    position: relative;
    transition: box-shadow var(--duration-base) var(--ease-smooth),
                border-color var(--duration-base) var(--ease-smooth),
                transform var(--duration-base) var(--ease-spring);
}
[data-theme="dark"] .glass-card {
    background: var(--surface-1) !important;
    border-color: var(--line-1) !important;
    color: var(--ink-2) !important;
}

.glass-card-elevated {
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-2);
}

/* Section headers inside cards get a hairline rule that stops short
   of the padding, which reads as deliberate rather than boxed-in. */
.glass-card > .flex:first-child > div > h3 {
    color: var(--ink-1);
}

.hover-lift:hover,
.glass-card.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-3);
    border-color: var(--line-2);
}

/* -----------------------------------------------------------------
   E. KPI CARDS
   Ten competing border-top colours read as noise. The accent moves to
   a left rail plus a tinted icon chip, the value gets room, and the
   footer becomes a quiet meta line.
   ----------------------------------------------------------------- */
.kpi-card {
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-1);
    padding: 0.95rem 1rem 0.85rem 1.15rem;
    overflow: hidden;
    isolation: isolate;
}
[data-theme="dark"] .kpi-card {
    background: var(--surface-1) !important;
    border-color: var(--line-1) !important;
}

.kpi-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: inherit;
    opacity: 1;
    background: var(--kpi-accent, var(--accent));
    transition: width var(--duration-base) var(--ease-spring);
}
.kpi-card:hover::before { width: 5px; }

.kpi-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0;
    background: linear-gradient(115deg,
        color-mix(in srgb, var(--kpi-accent, var(--accent)) 9%, transparent) 0%,
        transparent 55%);
    transition: opacity var(--duration-base) var(--ease-smooth);
}
.kpi-card:hover::after { opacity: 1; }

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--elev-2);
    border-color: var(--line-2);
}

/* The accent rail replaces the old border-top treatment. */
.kpi-card-accent { border-top: 1px solid var(--line-1); }
.kpi-indigo  { --kpi-accent: #6366f1; }
.kpi-emerald { --kpi-accent: #10b981; }
.kpi-sky     { --kpi-accent: #0ea5e9; }
.kpi-violet  { --kpi-accent: #8b5cf6; }
.kpi-rose    { --kpi-accent: #f43f5e; }
.kpi-amber   { --kpi-accent: #f59e0b; }
.kpi-teal    { --kpi-accent: #14b8a6; }
.kpi-orange  { --kpi-accent: #f97316; }
.kpi-purple  { --kpi-accent: #a855f7; }
.kpi-cyan    { --kpi-accent: #06b6d4; }

/* The icon chip picks up the card's accent automatically. */
.kpi-card [class*="rounded-xl"][class*="flex"][class*="items-center"][class*="justify-center"] {
    background: color-mix(in srgb, var(--kpi-accent, var(--accent)) 13%, transparent) !important;
    color: var(--kpi-accent, var(--accent)) !important;
    border-radius: var(--radius-md);
}

/* Eyebrow labels wrap to a second line rather than truncating. "Household
   Expenses" was rendering as "HOUSEHOLD EXPE..." in a five-column grid,
   which is the one word on the card that has to be readable.
   The :not() guards are deliberate: this is the only rule in the layer that
   sets `display`, and an unguarded one would out-rank Tailwind's .hidden and
   resurrect an element the app had hidden. */
.kpi-card > div > div > p:first-child:not(.hidden):not([hidden]),
.kpi-card p.uppercase:not(.hidden):not([hidden]) {
    white-space: normal;
    text-overflow: clip;
    letter-spacing: 0.045em;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Value line: bigger, tighter, calmer colour. */
.kpi-card h3 {
    color: var(--ink-1);
    font-weight: 800;
    line-height: 1.15;
}

/* Footer meta line sits on a hairline, not a hard border. */
.kpi-card .border-t { border-top-color: var(--line-1) !important; }

/* -----------------------------------------------------------------
   F. NAVIGATION
   ----------------------------------------------------------------- */
.glass-nav {
    background: color-mix(in srgb, var(--surface-4) 94%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.tab-btn {
    min-height: 44px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: rgba(226, 232, 240, .72);
}
.tab-btn:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.tab-btn.active {
    background: var(--accent) !important;
    background-image: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 100%, #fff 0%),
        color-mix(in srgb, var(--accent) 72%, #fff 28%)) !important;
    color: var(--accent-ink) !important;
    box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.tab-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.bnav-btn {
    min-height: 56px;
    color: var(--ink-3);
    transition: color var(--duration-fast) var(--ease-smooth);
}
.bnav-btn.active { color: var(--accent); }
.bnav-btn.active i,
.bnav-btn.active .ic { color: var(--accent); }
.bnav-btn.active::after {
    background: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
}
.bnav-btn:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

.fab-add {
    background: linear-gradient(135deg, var(--accent),
        color-mix(in srgb, var(--accent) 65%, #fff 35%));
    box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--accent) 75%, transparent),
                var(--elev-2);
}
.fab-add:focus-visible { outline: none; box-shadow: var(--ring), var(--elev-3); }

/* The hero header: a richer mesh, and text that survives both themes. */
.luxury-header {
    background:
        radial-gradient(40rem 20rem at 85% -40%, color-mix(in srgb, var(--accent) 55%, transparent), transparent 70%),
        radial-gradient(30rem 18rem at 0% 120%, rgba(14, 165, 233, .35), transparent 70%),
        linear-gradient(135deg, #1b2440 0%, #141b30 45%, #0c1222 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: var(--elev-3);
}
[data-theme="dark"] .luxury-header {
    background:
        radial-gradient(40rem 20rem at 85% -40%, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%),
        linear-gradient(135deg, #141c30 0%, #0d1424 50%, #070b16 100%);
}

/* -----------------------------------------------------------------
   G. DATA DISPLAY
   ----------------------------------------------------------------- */

/* Table heads stay put while a long ledger scrolls. */
.table-scroll-container thead th,
.overflow-x-auto > table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-4);
    color: var(--ink-inv);
    font-weight: 700;
    letter-spacing: 0.06em;
    box-shadow: inset 0 -1px 0 var(--line-2);
}
[data-theme="dark"] .overflow-x-auto > table thead th { color: #cbd5e1; }

/* Quiet zebra plus a readable hover, instead of hover alone. */
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink-1) 2.2%, transparent); }
tbody tr { transition: background-color var(--duration-fast) var(--ease-smooth); }
tbody tr:hover { background: var(--accent-soft) !important; }
tbody td { border-color: var(--line-1) !important; }

/* Money columns align. */
td[class*="text-right"], th[class*="text-right"],
#spendingMatrixTbody td { font-variant-numeric: tabular-nums; }

/* Horizontal scrollers advertise themselves rather than hiding
   content off the right edge on a phone. */
.table-scroll-container, .overflow-x-auto {
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.tx-row { border-bottom: 1px solid var(--line-1); }
.tx-row:hover { background: var(--accent-soft); }

.badge {
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid transparent;
}

/* Progress bars read as a track plus a fill, not a floating sliver. */
#budgetProgressBar, #runwayProgressBar {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
#budgetProgressBar { transition: width 600ms var(--ease-spring), background-color 300ms; }

/* Charts need a surface that follows the theme. */
canvas { border-radius: var(--radius-md); }

/* -----------------------------------------------------------------
   H. CONTROLS
   ----------------------------------------------------------------- */
select, input, textarea {
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    color: var(--ink-1);
    border-radius: var(--radius-md);
    transition: border-color var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth),
                background-color var(--duration-fast) var(--ease-smooth);
}
select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}
[data-theme="dark"] select,
[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background-color: var(--surface-2) !important;
    border-color: var(--line-2) !important;
    color: var(--ink-1) !important;
}
::placeholder { color: var(--ink-3); opacity: 1; }

/* Every interactive control clears the 44px touch target. */
button, [role="button"], .btn-primary, .btn-secondary, .btn-danger {
    min-height: 44px;
}
button.min-h-\[36px\] { min-height: 36px; }
/* KPI cards are dense, so their buttons may be 36px - unless one asks for a
   full target, which this used to silently override on specificity alone. */
.kpi-card button:not([class*="min-h-"]) { min-height: 36px; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent),
        color-mix(in srgb, var(--accent) 70%, #fff 30%));
    color: var(--accent-ink);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 80%, transparent);
    font-weight: 700;
}
.btn-primary:hover { box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-danger:focus-visible {
    outline: none; box-shadow: var(--ring);
}

.btn-secondary {
    background: var(--surface-2);
    color: var(--ink-2);
    border: 1px solid var(--line-2);
}

/* Modals: a calmer scrim and a surface that matches the theme. */
.modal-backdrop {
    background: color-mix(in srgb, var(--surface-4) 62%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.modal-content {
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    box-shadow: var(--elev-4);
    border-radius: var(--radius-xl);
}
[data-theme="dark"] .modal-content { background: var(--surface-1) !important; }

/* Field errors must stay loud - the audit asserts they appear. */
.field-error.is-visible { color: #e11d48; font-weight: 700; }
[data-theme="dark"] .field-error.is-visible { color: #fda4af; }

/* -----------------------------------------------------------------
   I. MOTION
   Sections stagger in rather than all popping at once. Anyone who has
   asked their system to calm down gets none of it.
   ----------------------------------------------------------------- */
.section-enter > * {
    animation: v6Rise var(--duration-slow) var(--ease-spring) backwards;
}
.section-enter > *:nth-child(1) { animation-delay: 0ms; }
.section-enter > *:nth-child(2) { animation-delay: 45ms; }
.section-enter > *:nth-child(3) { animation-delay: 90ms; }
.section-enter > *:nth-child(4) { animation-delay: 135ms; }
.section-enter > *:nth-child(5) { animation-delay: 180ms; }
.section-enter > *:nth-child(n+6) { animation-delay: 220ms; }

@keyframes v6Rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .section-enter > * { animation: none !important; }
}

/* -----------------------------------------------------------------
   J. RESPONSIVE REFINEMENTS
   ----------------------------------------------------------------- */
@media (max-width: 480px) {
    /* Tighter gutters buy back ~16px of content width on a 360px
       phone without letting anything touch the edge. */
    main, .tab-view { padding-left: 0; padding-right: 0; }

    .kpi-card { padding: 0.8rem 0.85rem 0.7rem 1rem; border-radius: var(--radius-md); }
    .kpi-card h3 { font-size: 1.125rem; }
    .glass-card { border-radius: var(--radius-lg); }

    /* Long headings wrap instead of forcing the row wide. */
    h2, h3 { overflow-wrap: anywhere; }
}

@media (min-width: 1280px) {
    /* On a wide screen the dashboard was a very long single column of
       full-width cards. Give the grid more room before it stops. */
    .tab-view > .grid { gap: 1.5rem; }
}

/* Printing keeps the new tokens from leaking a dark theme onto paper. */
@media print {
    :root, [data-theme] {
        --surface-0: #fff; --surface-1: #fff; --surface-2: #fff;
        --surface-3: #f1f5f9; --surface-4: #0f172a;
        --ink-1: #0f172a; --ink-2: #334155; --ink-3: #64748b;
        --line-1: #e2e8f0; --line-2: #cbd5e1;
    }
    .glass-card, .kpi-card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
    .section-enter > * { animation: none !important; }
}

/* =================================================================
   GHARKHATA v7 — PHONE HOME
   =================================================================
   Phone-only. Everything here is inside a max-width query or on an
   element the markup only renders at `md:hidden`, so the desktop
   layout is untouched.

   The reference designs all lead with one figure and a period switch,
   then go straight to data. Ours spent roughly 420px of a 390x844
   screen on chrome before showing a single rupee, then stacked ten KPI
   cards two-up - five rows of scrolling before the first chart.
   ================================================================= */

/* ---- Hero -------------------------------------------------------- */
.m-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    padding: 1.15rem 1.15rem 1.25rem;
    color: #fff;
    background:
        radial-gradient(28rem 16rem at 88% -30%, color-mix(in srgb, var(--accent) 62%, transparent), transparent 70%),
        radial-gradient(22rem 14rem at -10% 120%, rgba(14, 165, 233, .38), transparent 70%),
        linear-gradient(135deg, #1d2745 0%, #151d33 48%, #0b1020 100%);
    box-shadow: var(--elev-3);
    border: 1px solid rgba(255, 255, 255, .09);
}
[data-theme="dark"] .m-hero {
    background:
        radial-gradient(28rem 16rem at 88% -30%, color-mix(in srgb, var(--accent) 44%, transparent), transparent 70%),
        linear-gradient(135deg, #16203a 0%, #0e1526 50%, #070b16 100%);
}

.m-hero-period {
    font-size: 0.6875rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .64);
}

.m-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.2rem 0.75rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 800;
}
.m-hero-chip i,
.m-hero-chip .ic { font-size: 0.625rem; opacity: .85; }
.m-hero-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); }

.m-hero-label {
    margin-top: 0.9rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: rgba(255, 255, 255, .70);
}

.m-hero-figure {
    margin-top: 0.1rem;
    font-size: 2.35rem;
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}
.m-hero-figure.is-over { color: #fda4af; }

.m-hero-track {
    margin-top: 0.85rem;
    height: 7px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .16);
    overflow: hidden;
}
.m-hero-fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #34d399, #10b981);
    transition: width 600ms var(--ease-spring), background-color 300ms;
}
.m-hero-fill.is-warn { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.m-hero-fill.is-over { background: linear-gradient(90deg, #fb7185, #e11d48); }

.m-hero-note {
    margin-top: 0.4rem;
    font-size: 0.6875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .58);
}

.m-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
}
.m-hero-k {
    display: block;
    font-size: 0.625rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
}
.m-hero-v {
    margin-top: 0.15rem;
    font-size: 0.9375rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-hero-v.is-negative { color: #fda4af; }

.m-hero-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
    margin-top: 1rem;
}
.m-hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0 1rem;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    font-weight: 800;
    transition: transform var(--duration-fast) var(--ease-spring),
                box-shadow var(--duration-fast) var(--ease-smooth);
}
.m-hero-btn:active { transform: scale(.97); }
.m-hero-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .4); }
.m-hero-btn-primary {
    background: linear-gradient(135deg, #10b981, #0d9488);
    color: #fff;
    box-shadow: 0 8px 20px -8px rgba(16, 185, 129, .8);
}
.m-hero-btn-ghost {
    background: rgba(255, 255, 255, .11);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}

/* ---- Period switch ----------------------------------------------- */
.m-seg {
    display: flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: var(--surface-2);
    border: 1px solid var(--line-1);
}
.m-seg > button {
    flex: 1 1 0;
    min-height: 44px;
    border-radius: calc(var(--radius-md) - 0.25rem);
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--ink-3);
    transition: background-color var(--duration-fast) var(--ease-smooth),
                color var(--duration-fast) var(--ease-smooth);
}
.m-seg > button:hover { color: var(--ink-1); }
.m-seg > button[aria-pressed="true"] {
    background: var(--surface-1);
    color: var(--accent);
    box-shadow: var(--elev-1);
}
.m-seg > button:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Phone layout ------------------------------------------------ */
@media (max-width: 767px) {
    /* Ten KPI cards two-up is five rows of scrolling. One swipeable row
       keeps every card rendered and measurable - which matters, because
       the conditional-section rules hide cards with .hidden and the
       audit asserts the survivors still have height. */
    .kpi-strip {
        display: flex !important;
        gap: 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 0.1rem;
        overscroll-behavior-x: contain;
        padding-bottom: 0.35rem;
        -webkit-overflow-scrolling: touch;
    }
    .kpi-strip::-webkit-scrollbar { height: 0; }
    .kpi-strip > .kpi-card {
        flex: 0 0 68%;
        min-width: 0;
        scroll-snap-align: start;
    }

    /* The filter toolbar is chrome, not content. On a phone the period
       switch below the hero now owns period selection, so this shrinks to
       a single tap target and stops pushing the primary figure off the
       first screenful. */
    #mainFilterToolbar {
        padding: 0.55rem;
        border-radius: var(--radius-md);
    }
    #mainFilterToolbar > .space-y-3 > * + *,
    #mainFilterToolbar > * + * { margin-top: 0.5rem; }
    #activeFilterTags { padding-top: 0; gap: 0.3rem; }
    #activeFilterTags .active-filter-tag { padding: 2px 7px; font-size: 10px; }

    /* Airy: fewer things per screen, more room around each. */
    #view-dashboard.tab-view { gap: 1.25rem; }
    #view-dashboard .glass-card { padding: 1.1rem; border-radius: var(--radius-lg); }
    .m-hero-figure { font-size: 2.5rem; }
}

@media (max-width: 380px) {
    /* The narrowest phones still in use. */
    .m-hero { padding: 1rem; }
    .m-hero-figure { font-size: 2.05rem; }
    .m-hero-v { font-size: 0.875rem; }
    .m-seg > button { font-size: 0.6875rem; }
    .kpi-strip > .kpi-card { flex-basis: 76%; }
}

/* =================================================================
   GHARKHATA v7.1 — LEDGER GROUPS & CATEGORY BREAKDOWN
   ================================================================= */

/* ---- Date-grouped ledger ----------------------------------------
   A long ledger read as one undifferentiated stream. Day headings
   with that day's total turn it into days, the way every reference
   design presents transactions. */
.tx-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 0.25rem 0.4rem;
}
.tx-group-head:first-child { padding-top: 0.15rem; }

.tx-group-label {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.tx-group-total {
    font-size: 0.75rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* ---- Category breakdown bars ------------------------------------
   Ranked, with the bar scaled to the largest category rather than to
   the total, so the small ones stay readable instead of collapsing
   into a sliver. */
.cat-bar-row {
    /* Explicitly a column rather than relying on block layout: something in the
       Tailwind CDN layer computes a bare <button> as display:flex, which laid
       the label, the bar and the caption out side by side and collapsed the
       bar to nothing. Stating the direction makes this independent of it. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.3rem;
    width: 100%;
    text-align: left;
    min-height: 44px;
    padding: 0.4rem 0.45rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: background-color var(--duration-fast) var(--ease-smooth);
}
.cat-bar-row:hover { background: var(--accent-soft); }
.cat-bar-row:focus-visible { outline: none; box-shadow: var(--ring); }

.cat-bar-top {
    display: flex;
    width: 100%;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}
.cat-bar-name {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    font-weight: 700;
    color: var(--ink-2);
}
.cat-bar-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
.cat-bar-amt {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
    white-space: nowrap;
}
.cat-bar-track {
    display: block;
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--surface-3);
    overflow: hidden;
}
.cat-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    transition: width 500ms var(--ease-spring);
}
.cat-bar-pct {
    display: block;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink-3);
}

/* =================================================================
   PASSWORD FIELDS — reveal toggle
   The eye sits inside the field rather than beside it, so revealing a
   password never reflows the form, and it is a real 44px target.
   ================================================================= */
.pw-field {
    position: relative;
    display: flex;
    align-items: center;
}
.pw-input {
    width: 100%;
    padding: 0.65rem 3rem 0.65rem 0.9rem;
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-1);
    /* A masked password should not be read as money. */
    font-variant-numeric: normal;
    letter-spacing: 0.02em;
}
.pw-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--ring);
}
.pw-eye {
    position: absolute;
    right: 0.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    color: var(--ink-3);
    transition: color var(--duration-fast) var(--ease-smooth),
                background-color var(--duration-fast) var(--ease-smooth);
}
.pw-eye:hover { color: var(--ink-1); background: var(--accent-soft); }
.pw-eye[aria-pressed="true"] { color: var(--accent); }
.pw-eye:focus-visible { outline: none; box-shadow: var(--ring); }

.has-field-error .pw-input,
.pw-input.has-field-error { border-color: #e11d48; }

/* Per-category budget input in Master Settings, and the over-budget state on
   the dashboard bars. */
.cat-budget-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: 0.25rem;
}
.cat-budget-rupee {
    position: absolute;
    left: 0.45rem;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--ink-3);
    pointer-events: none;
}
.cat-budget-input {
    width: 6.25rem;
    min-height: 36px;
    padding: 0.25rem 0.4rem 0.25rem 1.25rem;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-sm);
    background: var(--surface-1);
    font-size: 0.6875rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
}
.cat-budget-input::placeholder { font-weight: 600; color: var(--ink-3); }
.cat-budget-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

.cat-bar-fill.is-over { background: linear-gradient(90deg, #fb7185, #e11d48) !important; }
.cat-bar-pct.is-over { color: #e11d48; font-weight: 700; }
[data-theme="dark"] .cat-bar-pct.is-over { color: #fda4af; }

/* =================================================================
   BILLS SCREEN
   Status is carried by one semantic colour each, and by the badge
   text alongside it - colour alone would exclude anyone who cannot
   separate red from amber.
   ================================================================= */
.bill-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1rem;
    padding: 0.75rem 0.5rem;
    border-radius: var(--r-md);
    background: var(--surface-1);
    border: 1px solid var(--line-1);
}
.bill-stat-n {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-figure);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.bill-stat-k {
    font-size: var(--fs-xs);
    font-weight: var(--fw-body);
    color: var(--ink-3);
}
.bill-stat-danger  .bill-stat-n { color: var(--sem-danger); }
.bill-stat-warning .bill-stat-n { color: var(--sem-warning); }
.bill-stat-success .bill-stat-n { color: var(--sem-success); }

.bill-filter {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 0.9rem;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--line-1);
    font-size: var(--fs-xs);
    font-weight: var(--fw-heading);
    color: var(--ink-3);
    white-space: nowrap;
}
.bill-filter[aria-pressed="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.bill-filter:focus-visible { outline: none; box-shadow: var(--ring); }

.bill-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border-radius: var(--r-lg);
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-left: 3px solid var(--line-2);
}
.bill-row-danger  { border-left-color: var(--sem-danger); }
.bill-row-warning { border-left-color: var(--sem-warning); }
.bill-row-success { border-left-color: var(--sem-success); }
.bill-row-info    { border-left-color: var(--sem-info); }
.bill-row-neutral { border-left-color: var(--line-2); }

.bill-row-main { min-width: 0; }
.bill-row-name {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-heading);
    color: var(--ink-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bill-row-when {
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-body);
    color: var(--ink-3);
    margin-top: 0.1rem;
}
.bill-row-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}
.bill-row-amount {
    font-size: var(--fs-sm);
    font-weight: var(--fw-figure);
    font-variant-numeric: tabular-nums;
    color: var(--ink-1);
    white-space: nowrap;
}
.bill-row-pay {
    width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: var(--r-md);
    background: var(--accent-soft);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bill-row-pay:focus-visible { outline: none; box-shadow: var(--ring); }

/* A widget the role has not earned is absent, not disabled. */
.perm-hidden { display: none !important; }


/* =================================================================
   ADD EXPENSE - BOTTOM SHEET
   -----------------------------------------------------------------
   On a phone the form is anchored to the bottom edge, where the thumb
   is, instead of centred where the keyboard covers it. On anything
   wider it is the centred dialog it always was.
   ================================================================= */
.expense-sheet {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (max-width: 639px) {
    .expense-sheet {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        animation: sheetRise 220ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
}

@keyframes sheetRise {
    from { transform: translateY(16px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .expense-sheet { animation: none; }
}


/* =================================================================
   SETTINGS SECTIONS
   -----------------------------------------------------------------
   A horizontal chip rail rather than a sidebar: at 390px a sidebar is
   either a hamburger or half the screen, and the groups are few enough
   to scroll past with a thumb.
   ================================================================= */
.settings-nav {
    display: flex;
    gap: var(--sp-2);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--sp-1);
    margin-bottom: var(--sp-1);
}
.settings-nav::-webkit-scrollbar { display: none; }

.settings-chip {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 0 var(--sp-3);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    border-radius: var(--r-pill);
    /* Tokens, not literals. A hardcoded #fff here stayed white in the dark
       theme, which is exactly what the theme audit is for. */
    border: 1px solid var(--line-2);
    background: var(--surface-1);
    color: var(--ink-2);
    font-size: var(--fs-xs);
    font-weight: var(--fw-heading);
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.settings-chip:hover { border-color: var(--accent); color: var(--accent); }
.settings-chip:focus-visible { outline: none; box-shadow: var(--ring); }
.settings-chip[aria-selected="true"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.settings-chip-count {
    font-size: 0.625rem;
    font-weight: var(--fw-figure);
    opacity: 0.75;
}

/* A card belonging to a section that is not on screen. */
.settings-section-hidden { display: none !important; }


/* =================================================================
   PIVOT MATRIX
   -----------------------------------------------------------------
   A wide table on a narrow screen is fine as long as the label you
   are reading against does not scroll away with it.
   ================================================================= */
.matrix-scroll { max-height: 70vh; overflow: auto; }

.matrix-table { border-collapse: separate; border-spacing: 0; }

.matrix-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-4);
    color: var(--ink-inv);
}

.matrix-table .matrix-corner {
    left: 0;
    z-index: 3;
}

.matrix-table .matrix-rowhead {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface-1);
    box-shadow: 1px 0 0 var(--line-1);
}

.matrix-table tr:hover .matrix-rowhead { background: var(--surface-2); }

.matrix-total-row td,
.matrix-total-row .matrix-rowhead {
    background: var(--surface-3);
    color: var(--ink-1);
    border-top: 2px solid var(--line-2);
}


/* =================================================================
   ICONS
   -----------------------------------------------------------------
   Lucide glyphs, drawn from the inline sprite. Sized in `em` so the
   existing text-xs / text-lg classes keep driving them exactly as
   they drove the font, and stroked in currentColor so every text
   colour class still applies.
   ================================================================= */
.ic {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
    pointer-events: none;
}


/* =================================================================
   TOASTS
   -----------------------------------------------------------------
   One line, 40px, two at most. "Category saved" does not need a card.
   ================================================================= */
.toast-stack {
    position: fixed;
    z-index: 70;
    left: 12px;
    right: 12px;
    top: calc(env(safe-area-inset-top, 0px) + 64px);   /* below the header */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
@media (min-width: 640px) {
    .toast-stack { left: auto; right: 20px; top: 76px; align-items: flex-end; width: 360px; }
}
.toast-item {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-height: 40px;
    padding: 6px 6px 6px 12px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    font-size: var(--fs-xs);
    box-shadow: 0 6px 20px rgba(2, 6, 23, 0.28);
    animation: toastIn 160ms ease-out;
}
.toast-success { border-color: rgba(16, 185, 129, 0.55); }
.toast-error   { border-color: rgba(244, 63, 94, 0.6); }
.toast-info    { border-color: rgba(99, 102, 241, 0.55); }
.toast-icon { flex-shrink: 0; }
.toast-success .toast-icon { color: #34d399; }
.toast-error .toast-icon   { color: #fb7185; }
.toast-info .toast-icon    { color: #818cf8; }
.toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast-text strong { font-weight: var(--fw-heading); }
.toast-sub { color: #cbd5e1; font-weight: var(--fw-body); }
.toast-close {
    flex-shrink: 0;
    width: 32px; height: 32px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-sm);
    color: #94a3b8;
}
.toast-close:hover { color: #fff; }
.toast-out { opacity: 0; transform: translateY(-4px); transition: opacity 180ms ease, transform 180ms ease; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .toast-item { animation: none; } }


/* =================================================================
   NEW DASHBOARD DESIGN  (#dashNew)
   -----------------------------------------------------------------
   Shown only when Appearance selects "New UI dashboard". The classic
   dashboard is the default and is not styled or altered from here:
   it is simply not displayed while the new design is on. Same tokens
   as the rest of the app, so every theme applies.
   ================================================================= */
#dashNew { display: none; }
html:is([data-dash-design="new"], [data-dash-design="minimal"], [data-dash-design="analytics"], [data-dash-design="timeline"]) #dashNew { display: block; }
html:is([data-dash-design="new"], [data-dash-design="minimal"], [data-dash-design="analytics"], [data-dash-design="timeline"]) #view-dashboard > :not(#dashNew) { display: none !important; }
.dash-section-off { display: none !important; }
.dn-off { display: none !important; }

.dn { color: var(--ink-1); }
.dn > * + * { margin-top: 1rem; }
.dn .ic { width: 1.1em; height: 1.1em; flex: none; }

/* header */
.dn-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.dn-eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-heading); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.dn-title { font-size: var(--fs-2xl); font-weight: var(--fw-figure); line-height: 1.1; }
.dn-chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: 0 .9rem; border-radius: var(--r-pill);
    background: var(--surface-1); border: 1px solid var(--line-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-heading); }

/* hero */
.dn-hero { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.25rem; align-items: center; padding: 1.25rem;
    border-radius: var(--r-lg); border: 1px solid var(--line-1);
    background: linear-gradient(135deg, var(--accent-soft), var(--surface-1) 70%); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.dn-ring { position: relative; width: 112px; height: 112px; }
.dn-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dn-ring-bg { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.dn-ring-fg { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.dn-ring-fg.is-warn { stroke: var(--sem-warning); }
.dn-ring-fg.is-over { stroke: var(--sem-danger); }
.dn-ring-pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-figure); font-size: var(--fs-lg); font-variant-numeric: tabular-nums; }
.dn-hero-label { font-size: var(--fs-xs); font-weight: var(--fw-heading); color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.dn-hero-fig { font-size: 2.25rem; line-height: 1.1; font-weight: var(--fw-figure); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dn-hero-fig.is-over { color: var(--sem-danger); }
.dn-hero-note { font-size: var(--fs-xs); color: var(--ink-3); margin-top: .15rem; }
.dn-hero-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; padding-top: .75rem; border-top: 1px solid var(--line-1); }
.dn-hero-stats dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-heading); text-transform: uppercase; letter-spacing: .04em; }
.dn-hero-stats dd { font-weight: var(--fw-figure); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-hero-stats dd.is-negative, .dn-kpi-v.is-negative { color: var(--sem-danger); }
.dn-hero-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .5rem; }
.dn-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 1rem; flex: 1 1 8rem;
    border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-1); color: var(--ink-1); font-size: var(--fs-sm); font-weight: var(--fw-heading); }
.dn-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* key figures */
.dn-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.dn-kpi { display: grid; grid-template-columns: auto 1fr; column-gap: .6rem; align-items: center; padding: .85rem 1rem; min-width: 0;
    border-radius: var(--r-md); border: 1px solid var(--line-1); background: var(--surface-1); }
.dn-kpi-ic { grid-row: span 2; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); }
.dn-kpi-k { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-heading); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-kpi-v { font-size: var(--fs-lg); font-weight: var(--fw-figure); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-morebtn { display: none; }

/* insights */
.dn-insights { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
.dn-ins { min-width: 0; padding: .6rem .8rem; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-1); }
.dn-ins span { display: block; font-size: .6875rem; color: var(--ink-3); font-weight: var(--fw-heading); text-transform: uppercase; letter-spacing: .04em; }
.dn-ins strong { display: block; font-size: var(--fs-sm); font-weight: var(--fw-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-ins strong[data-tone="good"] { color: var(--sem-success); }
.dn-ins strong[data-tone="bad"] { color: var(--sem-danger); }

/* cards */
.dn-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.dn-card { grid-column: span 12; min-width: 0; padding: 1rem 1.1rem; border-radius: var(--r-lg); border: 1px solid var(--line-1); background: var(--surface-1); }
.dn-span-4 { grid-column: span 4; } .dn-span-5 { grid-column: span 5; } .dn-span-6 { grid-column: span 6; } .dn-span-7 { grid-column: span 7; }
.dn-card-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-sm); font-weight: var(--fw-heading); margin-bottom: .75rem; list-style: none; }
.dn-card-title::-webkit-details-marker { display: none; }
.dn-fold > summary { cursor: pointer; }
.dn-fold[open] > summary .ic { transform: rotate(180deg); }
.dn-empty { font-size: var(--fs-xs); color: var(--ink-3); padding: .5rem 0; }
.dn-link { margin-top: .5rem; min-height: 44px; font-size: var(--fs-xs); font-weight: var(--fw-heading); color: var(--accent); }

/* bars */
.dn-bar + .dn-bar { margin-top: .7rem; }
.dn-bar-head { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--fs-xs); font-weight: var(--fw-heading); color: var(--ink-2); }
.dn-bar-head span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-bar-head span:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dn-bar-track { height: 8px; margin-top: 4px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.dn-bar-fill { height: 100%; border-radius: var(--r-pill); }
.dn-t0 { background: #6366f1; } .dn-t1 { background: #10b981; } .dn-t2 { background: #f59e0b; }
.dn-t3 { background: #ec4899; } .dn-t4 { background: #06b6d4; } .dn-t5 { background: #94a3b8; }

/* trend */
.dn-trend { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 170px; }
.dn-trend-col { display: flex; flex-direction: column; align-items: center; height: 100%; }
.dn-trend-bars { flex: 1; display: flex; align-items: flex-end; gap: 2px; width: 100%; justify-content: center; }
.dn-trend-b { display: block; width: 42%; max-width: 14px; min-height: 2px; border-radius: 3px 3px 0 0; }
.dn-trend-exp { background: #6366f1; }
.dn-trend-inc { background: #10b981; }
.dn-trend-m { font-size: .6875rem; color: var(--ink-3); margin-top: 4px; }
.dn-legend { display: flex; align-items: center; gap: .4rem; margin-top: .6rem; font-size: var(--fs-xs); color: var(--ink-3); }
.dn-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }

/* rows and transactions */
.dn-rows { display: flex; flex-direction: column; gap: .5rem; }
.dn-rows li { display: flex; justify-content: space-between; gap: .75rem; font-size: var(--fs-sm); padding: .5rem 0; border-bottom: 1px solid var(--line-1); }
.dn-row-r { color: var(--ink-2); font-weight: var(--fw-heading); text-align: right; }
.dn-row-r.is-bad { color: var(--sem-danger); }
.dn-list { display: flex; flex-direction: column; gap: .5rem; }
.dn-tx { display: flex; align-items: center; justify-content: space-between; gap: .75rem; width: 100%; min-height: 56px; padding: .5rem .75rem; text-align: left;
    border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line-1); }
.dn-tx-main { display: flex; flex-direction: column; min-width: 0; }
.dn-tx-main strong { font-size: var(--fs-sm); font-weight: var(--fw-heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-tx-main small { font-size: var(--fs-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dn-tx-amt { font-weight: var(--fw-figure); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dn-reimb { max-height: 300px; overflow-y: auto; }

/* density */
html[data-dash-layout="compact"] .dn > * + * { margin-top: .6rem; }
html[data-dash-layout="compact"] .dn-card { padding: .7rem .8rem; }
html[data-dash-kpi="compact"] .dn-kpi { padding: .5rem .7rem; }
html[data-dash-kpi="compact"] .dn-kpi-ic { display: none; }

/* tablet / small laptop */
@media (max-width: 1023px) {
    .dn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dn-insights { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dn-span-4, .dn-span-5, .dn-span-6, .dn-span-7 { grid-column: span 12; }
}

/* phone: one column, secondary figures and cards folded, no horizontal scroll */
@media (max-width: 767px) {
    .dn-hero { grid-template-columns: 1fr; justify-items: start; padding: 1rem; }
    .dn-ring { width: 88px; height: 88px; }
    .dn-hero-fig { font-size: 2rem; }
    .dn-hero-stats, .dn-hero-actions { width: 100%; }
    .dn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .dn-kpi { grid-template-columns: 1fr; padding: .6rem .75rem; }
    .dn-kpi-ic { display: none; }
    .dn-kpis:not(.is-open) .dn-more { display: none; }
    .dn-morebtn { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 .9rem;
        border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-1); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-heading); }
    .dn-kpis.is-open .dn-morebtn .ic { transform: rotate(180deg); }
    .dn-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dn-fold > summary { min-height: 44px; margin-bottom: 0; }
    html[data-dash-mobile="compact"] .dn-card { padding: .6rem .75rem; }
    html[data-dash-mobile="compact"] .dn-trend { height: 120px; }
}
@media (min-width: 768px) {
    .dn-fold > summary { pointer-events: none; }
    .dn-fold > summary .ic { display: none; }
}


/* ---- new dashboard: polish ------------------------------------------------
   The phone tap-target rule centres every button's content with a selector
   more specific than a class, so the new dashboard's buttons are anchored by
   id to keep their own alignment. */
#dashNew button.dn-tx,
#dashNew button.dn-btn,
#dashNew button.dn-chip,
#dashNew button.dn-morebtn { min-width: 0; }
#dashNew button.dn-tx { display: flex; align-items: center; justify-content: flex-start; gap: .75rem; text-align: left; }
#dashNew button.dn-btn, #dashNew button.dn-chip { display: inline-flex; align-items: center; justify-content: center; }
#dashNew button.dn-morebtn { justify-content: space-between; }
#dashNew button.dn-link { display: inline-flex; align-items: center; justify-content: flex-start; padding: 0; }

.dn-av { flex: none; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
    color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-heading); }
.dn-tx-main { flex: 1 1 auto; align-items: flex-start; text-align: left; }
.dn-tx-main strong, .dn-tx-main small { max-width: 100%; text-align: left; }
.dn-tx-amt { flex: none; }
.dn-tx-amt.is-income { color: var(--sem-success); }

/* a card header is a real header: space around it and a clear focus ring */
.dn-card-title { padding: .1rem 0 .65rem; border-bottom: 1px solid var(--line-1); }
.dn-card > .dn-card-title + * { margin-top: .85rem; }
.dn-fold > summary.dn-card-title { border-radius: var(--r-sm); }
.dn-fold > summary:focus-visible { outline: none; box-shadow: var(--ring); }
.dn-fold:not([open]) > summary.dn-card-title { padding-bottom: .1rem; margin-bottom: 0; border-bottom-color: transparent; }
.dn-fold > div { margin-top: .85rem; }

/* trend: current period stands out, the rest recedes */
.dn-trend-col.is-sel .dn-trend-m { color: var(--accent); font-weight: var(--fw-figure); }
.dn-trend:has(.is-sel) .dn-trend-col:not(.is-sel) .dn-trend-b { opacity: .45; }
.dn-legend-max { margin-right: auto; font-weight: var(--fw-heading); color: var(--ink-2); }

/* figures: calmer weight for labels, stronger numbers */
.dn-kpi-v { letter-spacing: -.01em; }
.dn-kpi:hover { border-color: var(--line-2); }
.dn-hero-stats dd { font-size: var(--fs-base); }

@media (max-width: 767px) {
    .dn-card { padding: .85rem .9rem; }
    .dn-card-title { font-size: var(--fs-base); }
    .dn-tx { min-height: 60px; }
    #dashNew .dn-reimb { max-height: none; overflow: visible; }
}
.dn-card-title { margin-bottom: 0; }


/* ---- new dashboard: design variants ---------------------------------------
   Minimal, Analytics and Timeline rearrange the same pieces. Everything here
   is scoped by the data-dn-design attribute on #dashNew. */
.dn-span-8 { grid-column: span 8; } .dn-span-12 { grid-column: span 12; }
.dn-aside { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.dn-aside > .dn-card { grid-column: auto; }

/* Minimal: one calm column, large type, nothing competing with the budget */
.dn[data-dn-design="minimal"] { max-width: 760px; margin-inline: auto; }
.dn[data-dn-design="minimal"] .dn-hero { text-align: center; grid-template-columns: 1fr; justify-items: center; background: var(--surface-1); }
.dn[data-dn-design="minimal"] .dn-hero-fig { font-size: 3rem; }
.dn[data-dn-design="minimal"] .dn-hero-stats { text-align: center; }
.dn[data-dn-design="minimal"] .dn-hero-actions { justify-content: center; }
.dn[data-dn-design="minimal"] .dn-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dn[data-dn-design="minimal"] .dn-more { display: none; }
.dn[data-dn-design="minimal"] .dn-morebtn { display: none !important; }
.dn[data-dn-design="minimal"] .dn-kpi:nth-child(n+5) { display: none; }
.dn[data-dn-design="minimal"] .dn-kpi-ic { display: none; }

/* Analytics: charts lead, taller trend, accent edge on cards */
.dn[data-dn-design="analytics"] .dn-card { border-top: 3px solid var(--accent); }
.dn[data-dn-design="analytics"] .dn-tall .dn-trend { height: 240px; }
.dn[data-dn-design="analytics"] .dn-hero { grid-template-columns: auto 1fr auto; }
.dn[data-dn-design="analytics"] .dn-hero-stats, .dn[data-dn-design="analytics"] .dn-hero-actions { grid-column: 1 / -1; }
.dn[data-dn-design="analytics"] .dn-kpi-v { font-size: var(--fs-xl, 1.35rem); }

/* Timeline: day groups with their total */
.dn-day + .dn-day { margin-top: 1rem; }
.dn-day-head { display: flex; justify-content: space-between; align-items: center; padding: 0 .25rem .4rem;
    font-size: var(--fs-xs); font-weight: var(--fw-heading); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.dn-day-head span:last-child { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dn[data-dn-design="timeline"] .dn-day .dn-list { border-left: 2px solid var(--line-2); padding-left: .6rem; margin-left: .25rem; }

@media (max-width: 1023px) {
    .dn-span-8, .dn-span-12 { grid-column: span 12; }
    .dn-aside { grid-column: span 12; }
    .dn[data-dn-design="analytics"] .dn-hero { grid-template-columns: auto 1fr; }
}
@media (max-width: 767px) {
    .dn[data-dn-design="minimal"] .dn-hero-fig { font-size: 2.4rem; }
    .dn[data-dn-design="analytics"] .dn-tall .dn-trend { height: 170px; }
}


/* =================================================================
   DIALOG SYSTEM  (every .modal-backdrop / .modal-content)
   -----------------------------------------------------------------
   One set of rules for every open window. The panel never grows past
   the visible screen: the header stays put, the fields scroll, and the
   button row stays in view. On a phone, form dialogs are bottom sheets
   (where the thumb is) and questions or messages stay centred. modal_ui.js
   adds the behaviour: page scroll lock, focus, Tab and Escape.
   ================================================================= */
.modal-backdrop {
    overscroll-behavior: contain;
    padding: max(.75rem, env(safe-area-inset-top)) max(.75rem, env(safe-area-inset-right)) max(.75rem, env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
}
.modal-backdrop .modal-content {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
    overflow: hidden;
}
/* Header and footer keep their size; the form or body is what scrolls. */
.modal-backdrop .modal-content > *:not(form):not(.modal-scroll-body) { flex-shrink: 0; }
.modal-backdrop .modal-content > form:not(#expenseForm),
.modal-backdrop .modal-content > .modal-scroll-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#expenseModal .modal-content { max-height: min(92dvh, 760px); }

/* The button row at the end of a form stays in view while fields scroll. */
.dlg-foot {
    position: sticky;
    bottom: calc(-1 * var(--dlg-pb, 1.25rem));
    z-index: 2;
    margin-inline: calc(-1 * var(--dlg-px, 1.25rem));
    margin-bottom: calc(-1 * var(--dlg-pb, 1.25rem));
    padding: .75rem var(--dlg-px, 1.25rem) max(.75rem, env(safe-area-inset-bottom));
    background: var(--surface-1);
    border-top: 1px solid var(--line-1);
}

/* The page behind a dialog does not scroll. */
html.dlg-open, body.dlg-open { overflow: hidden; }

/* Complex forms get room: two columns of fields need more than a phone card. */
@media (min-width: 640px) {
    #modalEditUser .modal-content, #modalCreateUser .modal-content,
    #modalEditHousehold .modal-content, #modalCreateHousehold .modal-content { max-width: 40rem; }
    #adminAddStaffModal .modal-content, #settleUpModal .modal-content, #modalMobileFilter .modal-content { max-width: 32rem; }
}

/* Close buttons are real targets everywhere, not only on a phone. */
.modal-backdrop .modal-content button[aria-label^="Close"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.5rem; min-height: 2.5rem; border-radius: var(--r-sm);
}

/* Phone: form dialogs rise from the bottom edge as sheets. */
@media (max-width: 639px) {
    .modal-backdrop:not(.dlg-center) { align-items: flex-end !important; padding: 0 !important; }
    .modal-backdrop:not(.dlg-center) > .modal-content {
        max-width: none;
        max-height: calc(100dvh - max(1rem, env(safe-area-inset-top)));
        border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
        animation: sheetRise 220ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
    }
    /* Grab handle: a visual cue that this is a sheet. */
    .modal-backdrop:not(.dlg-center):not(#expenseModal) > .modal-content::before {
        content: ""; flex: none; align-self: center;
        width: 2.5rem; height: 4px; margin: .5rem 0 .25rem; border-radius: 999px; background: var(--line-2);
    }
    /* Questions and messages stay centred, with a little air. */
    .modal-backdrop.dlg-center { padding: 1rem !important; align-items: center !important; }
    .modal-backdrop.dlg-center > .modal-content { max-height: calc(100dvh - 2rem); }
}
@media (max-width: 639px) and (orientation: landscape) {
    /* A phone on its side has little height: everything becomes a scrolling panel. */
    .modal-backdrop .modal-content { max-height: calc(100dvh - .5rem); }
}
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop .modal-content { animation: none !important; }
}

#btnToggleUserPermissions { justify-content: space-between; }


/* =================================================================
   NEW UI - PRODUCT-WIDE SKIN   (html[data-ui="new"])
   -----------------------------------------------------------------
   Set by dashboard_ui.js whenever a user is assigned any New UI
   dashboard design. Restyles every tab, form, table and dialog to the
   same language as the new dashboard: calm cards, uppercase eyebrow
   labels, light table headers, 44px controls, accent only where it
   means something. Pure CSS on existing markup: no layout, data or
   behaviour change, and the classic UI (no attribute) is untouched.
   Everything reads the theme tokens, so every theme and dark mode apply.
   ================================================================= */
html[data-ui="new"] body { background: var(--surface-0); }

/* ---- surfaces ------------------------------------------------------------ */
html[data-ui="new"] .glass-card:not(#desktopSidebar *),
html[data-ui="new"] .kpi-card {
    background: var(--surface-1);
    border: 1px solid var(--line-1);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html[data-ui="new"] .kpi-card { transition: border-color .15s ease; }
html[data-ui="new"] .kpi-card:hover { border-color: var(--line-2); transform: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
html[data-ui="new"] .rounded-2xl:not(.modal-content):not(.luxury-header):not(.m-hero) { border-radius: var(--r-lg); }
html[data-ui="new"] .rounded-xl { border-radius: var(--r-md); }

/* ---- screen headings ------------------------------------------------------ */
html[data-ui="new"] .tab-view > h2:first-child,
html[data-ui="new"] .tab-view > div > h2:first-child { font-size: var(--fs-2xl); font-weight: var(--fw-figure); letter-spacing: -.01em; }
html[data-ui="new"] .tab-view h3 { letter-spacing: -.005em; }
html[data-ui="new"] .tab-view .text-xs.uppercase { letter-spacing: .06em; }

/* ---- controls -------------------------------------------------------------- */
html[data-ui="new"] select,
html[data-ui="new"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-ui="new"] textarea {
    background: var(--surface-1);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    color: var(--ink-1);
}
html[data-ui="new"] select:focus,
html[data-ui="new"] input:focus,
html[data-ui="new"] textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
html[data-ui="new"] label.text-xs, html[data-ui="new"] .tab-view label.block {
    color: var(--ink-3); font-weight: var(--fw-heading); letter-spacing: .05em;
}
html[data-ui="new"] input[type="checkbox"], html[data-ui="new"] input[type="radio"] { accent-color: var(--accent); }

html[data-ui="new"] button:focus-visible, html[data-ui="new"] a:focus-visible, html[data-ui="new"] summary:focus-visible {
    outline: none; box-shadow: var(--ring);
}
/* filled primary buttons use the accent; the rest read as quiet secondary */
html[data-ui="new"] .tab-view button[class*="bg-indigo-600"], html[data-ui="new"] .tab-view button[class*="bg-indigo-500"],
html[data-ui="new"] .modal-content button[class*="bg-indigo-600"] {
    background: var(--accent); color: var(--accent-ink); border-radius: var(--r-md);
}
html[data-ui="new"] .tab-view button[class*="bg-slate-100"], html[data-ui="new"] .modal-content button[class*="bg-slate-100"] {
    background: var(--surface-2); border: 1px solid var(--line-1); color: var(--ink-2); border-radius: var(--r-md);
}

/* ---- tabs, chips, segmented controls -------------------------------------- */
html[data-ui="new"] .nav-tabs-scroll .tab-btn { border-radius: var(--r-pill); }
html[data-ui="new"] .m-seg { background: var(--surface-2); border: 1px solid var(--line-1); border-radius: var(--r-pill); }
html[data-ui="new"] .active-filter-tag { border-radius: var(--r-pill); }

/* ---- tables: light header, quiet rows --------------------------------------- */
html[data-ui="new"] table { border-collapse: separate; border-spacing: 0; width: 100%; }
html[data-ui="new"] table thead, html[data-ui="new"] table thead tr { background: var(--surface-2) !important; }
html[data-ui="new"] table thead th {
    background: var(--surface-2) !important;
    color: var(--ink-3) !important;
    font-size: var(--fs-xs); font-weight: var(--fw-heading);
    text-transform: uppercase; letter-spacing: .06em;
    border-bottom: 1px solid var(--line-2);
}
html[data-ui="new"] table tbody tr { transition: background-color .12s ease; }
html[data-ui="new"] table tbody tr:hover { background: var(--surface-2); }
html[data-ui="new"] table tbody td { border-bottom: 1px solid var(--line-1); color: var(--ink-1); }
html[data-ui="new"] table tfoot td { background: var(--surface-2); font-weight: var(--fw-heading); }
html[data-ui="new"] .overflow-x-auto { border-radius: var(--r-md); }

/* ---- empty states ------------------------------------------------------------- */
html[data-ui="new"] #emptyDashboardState, html[data-ui="new"] .tab-view [class*="py-12"][class*="text-center"] { color: var(--ink-3); }

/* ---- page chrome -------------------------------------------------------------- */
html[data-ui="new"] .sidebar-link { border-radius: var(--r-md); }
html[data-ui="new"] .bnav-btn { border-radius: var(--r-md); }
html[data-ui="new"] .toast-item { border-radius: var(--r-md); }

/* ---- dialogs ------------------------------------------------------------------ */
html[data-ui="new"] .modal-content { border-radius: var(--r-lg); border: 1px solid var(--line-1); box-shadow: var(--elev-4); }
html[data-ui="new"] .modal-content > div:first-child { background: var(--surface-1) !important; border-bottom: 1px solid var(--line-1); color: var(--ink-1); }
html[data-ui="new"] .modal-content h3 { color: var(--ink-1); font-weight: var(--fw-heading); }
html[data-ui="new"] #expenseModal .modal-content > div[class*="bg-slate-900"] { background: var(--surface-1) !important; color: var(--ink-1); border-bottom: 1px solid var(--line-1); }
html[data-ui="new"] #expenseModal .modal-content > div[class*="bg-slate-900"] h3 { color: var(--ink-1); }
html[data-ui="new"] #expenseModal .modal-content > div[class*="bg-slate-900"] button { color: var(--ink-3); }

/* ---- dark theme keeps contrast ------------------------------------------------ */
[data-theme="dark"][data-ui="new"] .glass-card,
html[data-theme="dark"][data-ui="new"] .kpi-card { box-shadow: none; }

/* The shell (header) keeps its own chrome in the new UI. */
html[data-ui="new"] header select, html[data-ui="new"] header input { background: transparent; border: 0; color: inherit; box-shadow: none; }