/* ================================================================
   AP Automation Dashboard — Design System CSS
   Spec: specs/frontend-revamp.md (Stripe-inspired dark mode)
   ================================================================ */

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

/* ----------------------------------------------------------------
   1. Design Tokens (CSS Custom Properties)
   ---------------------------------------------------------------- */
:root {
    /* Surfaces */
    --bg-base:       #09100a;
    --bg-surface:    #111811;
    --bg-elevated:   #192019;

    /* Borders */
    --border:        #1f2f1f;
    --border-strong: #2d3f2d;

    /* Accent */
    --accent:        #10b981;
    --accent-dim:    #064e35;

    /* Text hierarchy */
    --text-primary:   #ecfdf5;
    --text-secondary: #86a392;
    --text-muted:     #4d6b57;
    --text-number:    #d1fae5;

    /* Status semantic colours */
    --status-pending:    #f59e0b;
    --status-approved:   #10b981;
    --status-booked:     #64748b;
    --status-rejected:   #ef4444;
    --status-disputed:   #f97316;
    --status-error:      #dc2626;
    --status-skipped:    #4d6b57;

    /* Typography */
    --font-family:   'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs:  10px;
    --font-size-sm:  11px;
    --font-size-base: 13px;
    --font-size-md:  14px;
    --font-size-lg:  15px;
    --font-size-xl:  18px;
    --font-size-2xl: 24px;

    /* Spacing (4px base) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 6px;

    /* Layout */
    --header-height: 56px;

    /* Dash 4.0 component theme (overrides built-in light-mode tokens) */
    --Dash-Fill-Inverse-Strong: var(--bg-surface);
    --Dash-Stroke-Strong:       var(--border);
    --Dash-Stroke-Weak:         var(--border);
    --Dash-Fill-Interactive-Strong: var(--accent);
    --Dash-Fill-Interactive-Weak:   var(--accent-dim);
    --Dash-Fill-Disabled:       var(--border);
    --Dash-Fill-Primary-Hover:  var(--bg-elevated);
    --Dash-Fill-Primary-Active: var(--bg-elevated);
    --Dash-Text-Primary:        var(--text-primary);
    --Dash-Text-Strong:         var(--text-primary);
    --Dash-Text-Weak:           var(--text-secondary);
    --Dash-Text-Disabled:       var(--text-muted);
    --Dash-Shading-Strong:      rgba(0, 0, 0, 0.5);
    --Dash-Shading-Weak:        rgba(0, 0, 0, 0.3);
}


/* ----------------------------------------------------------------
   2. Reset & Base
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--text-primary);
    background-color: var(--bg-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}


/* ----------------------------------------------------------------
   3. Scrollbar Styling
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}


/* ----------------------------------------------------------------
   4. Typography Utilities
   ---------------------------------------------------------------- */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-number    { color: var(--text-number); font-variant-numeric: tabular-nums; }
.text-accent    { color: var(--accent); }

.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

.tabular-nums {
    font-variant-numeric: tabular-nums;
}


/* ----------------------------------------------------------------
   5. Header (fixed, 56px)
   ---------------------------------------------------------------- */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 var(--sp-6);
    z-index: 1000;
    gap: var(--sp-6);
}

/* Logo area */
.header-logo {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}

.header-logo-icon {
    width: 28px;
    height: 28px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.header-logo-text {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

/* Navigation tabs */
.header-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    height: 100%;
}

.header-nav-tab {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-3);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 120ms ease-out, border-color 120ms ease-out;
    white-space: nowrap;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}

.header-nav-tab:hover {
    color: var(--text-primary);
}

.header-nav-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

/* Search bar */
.header-search {
    flex: 0 0 300px;
    margin-left: auto;
    position: relative;
}

.header-search input {
    width: 100%;
    height: 34px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 var(--sp-3) 0 var(--sp-8);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    outline: none;
    transition: border-color 120ms ease-out;
}

.header-search input::placeholder {
    color: var(--text-muted);
}

.header-search input:focus {
    border-color: var(--border-strong);
}

.header-search-icon {
    position: absolute;
    left: var(--sp-2);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

/* Search Results Dropdown */
.search-results-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    min-width: 360px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-height: 0;
    overflow: hidden;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: max-height 150ms ease-out, opacity 120ms ease-out;
}

.search-results-dropdown.open {
    max-height: 480px;
    overflow-y: auto;
    opacity: 1;
    pointer-events: auto;
}

.search-section-header {
    padding: var(--sp-2) var(--sp-3);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
    background: var(--bg-base);
}

.search-section-header:not(:first-child) {
    border-top: 1px solid var(--border);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 8px var(--sp-3);
    height: 40px;
    cursor: pointer;
    transition: background 80ms ease-out;
    text-decoration: none;
    color: inherit;
}

.search-result-item:hover,
.search-result-item.active {
    background: var(--bg-elevated);
}

.search-result-badge {
    flex-shrink: 0;
    font-size: 10px;
}

.search-result-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-supplier {
    font-weight: 500;
    color: var(--text-primary);
    font-size: var(--font-size-base);
}

.search-result-sep {
    color: var(--text-muted);
    margin: 0 2px;
}

.search-result-invnum {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.search-result-amount {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    font-size: var(--font-size-base);
    font-weight: 500;
}

.search-result-supplier-icon {
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-result-supplier-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-count {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.search-no-results {
    padding: var(--sp-4) var(--sp-3);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-base);
}



/* User area */
.header-user {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
    cursor: pointer;
    padding: var(--sp-1) var(--sp-2);
    border-radius: var(--radius-sm);
    transition: background 120ms ease-out;
    position: relative;
}

.header-user:hover {
    background: var(--bg-elevated);
}

.header-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--accent);
}

.header-username {
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-primary);
}

.header-chevron {
    color: var(--text-muted);
}

/* User dropdown */
.header-user-dropdown {
    position: absolute;
    top: calc(100% + var(--sp-1));
    right: 0;
    width: 200px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-1) 0;
    z-index: 1001;
    display: none;
}

.header-user-dropdown.open {
    display: block;
}

.header-user-dropdown-role {
    padding: var(--sp-2) var(--sp-3);
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

.header-user-dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: var(--sp-1) 0;
}

.header-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
    text-decoration: none;
    width: 100%;
    background: none;
    border: none;
    font-family: var(--font-family);
    text-align: left;
}

.header-user-dropdown-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}


/* ----------------------------------------------------------------
   6. Main Content Area
   ---------------------------------------------------------------- */
.app-content {
    margin-top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow: hidden;
}


/* ----------------------------------------------------------------
   7. Login Page
   ---------------------------------------------------------------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--bg-base);
}

.login-card {
    width: 380px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-8);
}

.login-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-8);
}

.login-logo-icon {
    width: 36px;
    height: 36px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.login-logo-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.login-field {
    margin-bottom: var(--sp-4);
}

.login-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sp-1);
}

.login-input,
.login-input input {
    width: 100%;
    height: 38px;
    background: var(--bg-base) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0 var(--sp-3) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-base) !important;
    color: var(--text-primary) !important;
    outline: none !important;
    transition: border-color 120ms ease-out;
}

.login-input:focus,
.login-input input:focus {
    border-color: var(--border-strong) !important;
}

.login-input.error {
    border-color: var(--status-rejected);
}

.login-btn {
    width: 100%;
    height: 38px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease-out;
    margin-top: var(--sp-2);
}

.login-btn:hover {
    background: #0a6b4a;
}

.login-btn:active {
    background: var(--accent-dim);
}

.login-error {
    color: var(--status-rejected);
    font-size: var(--font-size-sm);
    margin-top: var(--sp-2);
    text-align: center;
}


/* ----------------------------------------------------------------
   8. Status Badges
   ---------------------------------------------------------------- */
.status-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--sp-2);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    line-height: 1;
}

.status-badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--status-pending);
}

.status-badge--approved {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-approved);
}

.status-badge--booked {
    background: rgba(100, 116, 139, 0.15);
    color: var(--status-booked);
}

.status-badge--rejected {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-rejected);
}

.status-badge--disputed {
    background: rgba(249, 115, 22, 0.15);
    color: var(--status-disputed);
}

.status-badge--error {
    background: rgba(220, 38, 38, 0.15);
    color: var(--status-error);
}

.status-badge--skipped {
    background: rgba(77, 107, 87, 0.15);
    color: var(--status-skipped);
}


/* ----------------------------------------------------------------
   9. Document Type Badges (INV / CN)
   ---------------------------------------------------------------- */
.doc-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 20px;
    padding: 0 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 2px;
}

.doc-badge--inv {
    background: rgba(16, 185, 129, 0.12);
    color: var(--accent);
    border-left: 2px solid var(--accent);
}

.doc-badge--cn {
    background: rgba(249, 115, 22, 0.12);
    color: var(--status-disputed);
    border-left: 2px solid var(--status-disputed);
}

.doc-badge--l2 {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    border-left: 2px solid #6366f1;
}


/* ----------------------------------------------------------------
   10. Role Chips
   ---------------------------------------------------------------- */
.role-chip {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--sp-2);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    border: 1px solid;
}

.role-chip--admin {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(16, 185, 129, 0.1);
}

.role-chip--approver {
    color: var(--status-pending);
    border-color: var(--status-pending);
    background: rgba(245, 158, 11, 0.1);
}

.role-chip--ap_staff {
    color: var(--status-booked);
    border-color: var(--status-booked);
    background: rgba(100, 116, 139, 0.1);
}


/* ----------------------------------------------------------------
   11. Master-Detail Split Layout
   ---------------------------------------------------------------- */
.split-layout {
    display: flex;
    height: 100%;
    overflow: hidden;
}

.split-left {
    width: 30%;
    min-width: 280px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

/* Left panel header */
.list-header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-3);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.list-header-count {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Select-all checkbox in list header */
.select-all-checkbox {
    flex-shrink: 0;
    margin-right: var(--sp-1);
}

/* Checkbox wrapper around each invoice card */
.invoice-card-wrapper {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
}

.invoice-card-wrapper .invoice-card {
    flex: 1;
    min-width: 0;
}

.card-checkbox {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding-left: 2px;
}

.card-checkbox label {
    margin: 0;
    padding: 0;
}

/* Bulk toolbar — appears between header and card list */
.bulk-toolbar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.bulk-toolbar-count {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-right: auto;
}

.btn-bulk {
    height: 30px;
    padding: 0 var(--sp-3);
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease-out;
    white-space: nowrap;
}

.btn-bulk-approve {
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    color: var(--accent);
}

.btn-bulk-approve:hover {
    background: #0a6b4a;
}

.btn-bulk-reject {
    background: transparent;
    border: 1px solid var(--status-rejected);
    color: var(--status-rejected);
}

.btn-bulk-reject:hover {
    background: rgba(239, 68, 68, 0.1);
}

/* Left panel scroll area */
.list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-2);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

/* Right panel scroll area */
.detail-scroll {
    flex: 1;
    overflow-y: auto;
    padding: var(--sp-4);
}

/* Empty state (right panel default) */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: var(--sp-3);
    color: var(--text-muted);
}

.empty-state-icon {
    font-size: 40px;
}

.empty-state-text {
    font-size: var(--font-size-md);
    color: var(--text-secondary);
}


/* ----------------------------------------------------------------
   12. Invoice List Card
   ---------------------------------------------------------------- */
.invoice-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.invoice-card:hover {
    background: var(--bg-elevated);
}

.invoice-card.selected {
    background: var(--bg-elevated);
    border-left: 2px solid var(--accent);
}

.invoice-card-row1 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.invoice-card-supplier {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.invoice-card-amount {
    font-variant-numeric: tabular-nums;
    color: var(--text-number);
    font-weight: 500;
    white-space: nowrap;
}

.invoice-card-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-1);
    font-size: 12px;
    color: var(--text-secondary);
}

.invoice-card-row2-sep {
    color: var(--text-muted);
}

.invoice-card-timeline {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
}

.invoice-card-status {
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
}


/* ----------------------------------------------------------------
   13. Status Timeline (5 dots)
   ---------------------------------------------------------------- */
.timeline {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.timeline-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid var(--text-muted);
    background: transparent;
    position: relative;
    z-index: 1;
}

.timeline-dot.completed {
    background: var(--accent);
    border-color: var(--accent);
}

.timeline-dot.current {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

.timeline-dot.rejected {
    background: var(--status-rejected);
    border-color: var(--status-rejected);
}

.timeline-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--sp-1);
    white-space: nowrap;
}

.timeline-line {
    position: absolute;
    top: 5px;
    left: calc(50% + 5px);
    right: calc(-50% + 5px);
    height: 1.5px;
    background: var(--border);
}

.timeline-line.completed {
    background: var(--accent);
}

.timeline-step:last-child .timeline-line {
    display: none;
}


/* ----------------------------------------------------------------
   14. Detail Panel Header (sticky)
   ---------------------------------------------------------------- */
.detail-header {
    position: sticky;
    top: 0;
    background: var(--bg-base);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    min-height: 52px;
}

.detail-header-left {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1;
    min-width: 0;
}

.detail-header-supplier {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-header-sep {
    color: var(--text-muted);
}

.detail-header-invnum {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.detail-header-right {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-shrink: 0;
}


/* ----------------------------------------------------------------
   15. Alert Banners
   ---------------------------------------------------------------- */
.alert-banner {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: 40px;
    padding: 0 var(--sp-3);
    background: var(--bg-surface);
    border-left: 3px solid;
    font-size: var(--font-size-base);
    margin-bottom: var(--sp-2);
}

.alert-banner--amber  { border-left-color: var(--status-pending); }
.alert-banner--blue   { border-left-color: #3b82f6; }
.alert-banner--red    { border-left-color: var(--status-rejected); }
.alert-banner--green  { border-left-color: var(--accent); }

.alert-banner-icon {
    flex-shrink: 0;
}

.alert-banner--amber  .alert-banner-icon { color: var(--status-pending); }
.alert-banner--blue   .alert-banner-icon { color: #3b82f6; }
.alert-banner--red    .alert-banner-icon { color: var(--status-rejected); }
.alert-banner--green  .alert-banner-icon { color: var(--accent); }

.alert-banner-text {
    flex: 1;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.alert-banner-dismiss {
    flex-shrink: 0;
    cursor: pointer;
    color: var(--text-muted);
    background: none;
    border: none;
    padding: var(--sp-1);
    font-size: var(--font-size-base);
    transition: color 120ms ease-out;
}

.alert-banner-dismiss:hover {
    color: var(--text-primary);
}

/* Auto-dismiss toast animation (fades out after 4s) */
.alert-banner--autodismiss {
    animation: alertFadeOut 0.5s ease 4s forwards;
}
@keyframes alertFadeOut {
    from { opacity: 1; max-height: 60px; margin-bottom: var(--sp-3); }
    to   { opacity: 0; max-height: 0; margin-bottom: 0; overflow: hidden; }
}

/* Age badges on invoice cards */
.age-badge {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-left: 4px;
    vertical-align: middle;
}
.age-badge--amber {
    background: rgba(245, 158, 11, 0.15);
    color: var(--status-pending);
}
.age-badge--red {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-rejected);
}

/* "Received Xh ago" text on invoice cards */
.invoice-card-received {
    color: var(--text-muted);
}


/* ----------------------------------------------------------------
   16. Form Fields (detail panel editable fields)
   ---------------------------------------------------------------- */
.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
}

.field-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.field-group--full {
    grid-column: 1 / -1;
}

.field-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.field-label--required::after {
    content: " *";
    color: var(--status-rejected);
    font-weight: 600;
}

.field-input {
    height: 34px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 var(--sp-2);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    outline: none;
    transition: border-color 120ms ease-out;
}

.field-input:focus {
    border-color: var(--border-strong);
}

.field-input:read-only {
    color: var(--text-secondary);
    cursor: default;
}

.field-input.error {
    border-color: var(--status-rejected);
}

.field-value-readonly {
    height: 34px;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-2);
    background: var(--bg-elevated);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.field-textarea {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    outline: none;
    resize: vertical;
    min-height: 60px;
    transition: border-color 120ms ease-out;
}

.field-textarea:focus {
    border-color: var(--border-strong);
}

/* Amounts summary strip */
.amounts-strip {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.amounts-strip-item {
    display: flex;
    align-items: baseline;
    gap: var(--sp-1);
}

.amounts-strip-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.amounts-strip-value {
    font-size: var(--font-size-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-number);
}

.amounts-strip-currency {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-left: auto;
}

.amounts-strip-currency-lead {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: var(--sp-4);
}


/* ----------------------------------------------------------------
   17. Dropdown / Select
   ---------------------------------------------------------------- */
/* (Main dark-theme overrides are consolidated in section 27a below) */

/* Sort dropdown (small, inline) */
.sort-dropdown {
    min-width: 140px;
}


/* ----------------------------------------------------------------
   18. Line Items Table (spreadsheet-style)
   ---------------------------------------------------------------- */
.line-items-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-3) 0;
}

.line-items-table th {
    height: 32px;
    padding: 0 var(--sp-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.line-items-table th.num-col {
    text-align: right;
}

.line-items-table td {
    height: 36px;
    padding: 0 var(--sp-2);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.line-items-table td.num-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-number);
}

.line-items-table tr:hover {
    background: var(--bg-elevated);
}

.line-items-table input,
.line-items-table select {
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    padding: 0 var(--sp-1);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: inherit;
    outline: none;
    width: 100%;
    transition: border-color 120ms ease-out;
}

.line-items-table input:focus,
.line-items-table select:focus {
    border-color: var(--border-strong);
    background: var(--bg-surface);
}

.line-items-table input.modified {
    border-bottom: 1px solid var(--accent);
}

.line-items-table .row-delete {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease-out, color 120ms ease-out;
    border-radius: 2px;
}

.line-items-table tr:hover .row-delete {
    opacity: 1;
}

.line-items-table .row-delete:hover {
    color: var(--status-rejected);
    background: rgba(239, 68, 68, 0.1);
}

.add-line-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    cursor: pointer;
    padding: var(--sp-2) 0;
    transition: color 120ms ease-out;
}

.add-line-btn:hover {
    color: var(--text-primary);
}

/* Read-only line item cells (booking tab) */
.line-ro-text {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    padding: 0 var(--sp-2);
}

.line-ro-num {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-variant-numeric: tabular-nums;
    color: var(--text-number);
    text-align: right;
    padding: 0 var(--sp-2);
}

/* Dash 4.0 dropdown overrides inside line-items table cells */
.line-items-table .dash-dropdown-wrapper {
    min-width: 0;
}

.line-items-table .dash-dropdown {
    min-height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
}

.line-items-table .dash-dropdown:hover,
.line-items-table .dash-dropdown:focus {
    border-color: var(--border-strong);
    background: var(--bg-surface);
}

.line-items-table .dash-dropdown-trigger {
    min-height: 28px;
    padding: 0 var(--sp-2);
}

/* Dash 4.0 input overrides inside line-items table cells */
.line-items-table .dash-input-container {
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
}

.line-items-table .dash-input-container:focus-within {
    border-color: var(--border-strong);
    background: var(--bg-surface);
}

.line-items-table .dash-input-element {
    padding: 0 var(--sp-1);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: inherit;
}

.line-items-table .num-col .dash-input-element {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-number);
}


/* ----------------------------------------------------------------
   19. Action Bar (bottom of detail pane)
   ---------------------------------------------------------------- */
.action-bar {
    position: sticky;
    bottom: 0;
    height: 64px;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0 var(--sp-4);
    background: var(--bg-base);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.btn-approve {
    flex: 7;
    height: 38px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease-out;
}

.btn-approve:hover {
    background: #0a6b4a;
}

.btn-reject {
    flex: 3;
    height: 38px;
    background: transparent;
    border: 1px solid var(--status-rejected);
    border-radius: var(--radius-sm);
    color: var(--status-rejected);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease-out;
}

.btn-reject:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-book {
    flex: 1;
    height: 38px;
    background: var(--accent-dim);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--accent);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease-out;
}

.btn-book:hover {
    background: #0a6b4a;
}


/* ----------------------------------------------------------------
   20. Outlined Button (generic)
   ---------------------------------------------------------------- */
.btn-outlined {
    height: 34px;
    padding: 0 var(--sp-4);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    white-space: nowrap;
}

.btn-outlined:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.btn-outlined--accent {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-outlined--accent:hover {
    background: var(--accent-dim);
}

.btn-outlined--amber {
    border-color: var(--status-pending);
    color: var(--status-pending);
}

.btn-outlined--amber:hover {
    background: rgba(245, 158, 11, 0.1);
}

.btn-outlined--red {
    border-color: var(--status-rejected);
    color: var(--status-rejected);
}

.btn-outlined--red:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-outlined--small {
    height: 28px;
    padding: 0 var(--sp-2);
    font-size: var(--font-size-sm);
}

a.btn-outlined {
    text-decoration: none;
}


/* ----------------------------------------------------------------
   21. Rejection Drawer
   ---------------------------------------------------------------- */
.rejection-drawer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    padding: var(--sp-4);
    transform: translateY(100%);
    transition: transform 200ms ease-out;
    z-index: 20;
}

.rejection-drawer.open {
    transform: translateY(0);
}

.rejection-drawer-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
}

.btn-confirm-reject {
    width: 100%;
    height: 38px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid var(--status-rejected);
    border-radius: var(--radius-sm);
    color: var(--status-rejected);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease-out;
    margin-top: var(--sp-3);
}

.btn-confirm-reject:hover {
    background: rgba(239, 68, 68, 0.25);
}

.btn-confirm-reject:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.rejection-cancel {
    display: block;
    text-align: center;
    margin-top: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--font-size-base);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-family);
    transition: color 120ms ease-out;
}

.rejection-cancel:hover {
    color: var(--text-primary);
}


/* ----------------------------------------------------------------
   22. Full-Width Data Table (Audit, Disputed, Error tabs)
   ---------------------------------------------------------------- */
.data-table-wrap {
    overflow-x: auto;
    padding: var(--sp-3);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    height: 36px;
    padding: 0 var(--sp-3);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--bg-base);
    z-index: 2;
}

.data-table td {
    height: 40px;
    padding: 0 var(--sp-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.data-table tr:hover td {
    background: var(--bg-elevated);
}

.data-table td.num-col {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-number);
}

.data-table td.muted {
    color: var(--text-secondary);
}

.data-table td.mono {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.data-table tr.row-error {
    border-left: 3px solid var(--status-error);
}


/* ----------------------------------------------------------------
   23. Filter Bar (Audit log, tables)
   ---------------------------------------------------------------- */
.filter-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.filter-bar .field-input {
    height: 32px;
    font-size: var(--font-size-sm);
}

.filter-clear {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-family);
    transition: color 120ms ease-out;
    white-space: nowrap;
}

.filter-clear:hover {
    color: var(--accent);
}


/* ----------------------------------------------------------------
   24. Admin Panel Sub-Tabs
   ---------------------------------------------------------------- */
.admin-tabs {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0 var(--sp-3);
    border-bottom: 1px solid var(--border);
    height: 44px;
}

.admin-tab {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 var(--sp-3);
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 120ms ease-out;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-family);
}

.admin-tab:hover {
    color: var(--text-primary);
}

.admin-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

.admin-content {
    padding: var(--sp-4);
    overflow-y: auto;
    flex: 1;
}


/* ----------------------------------------------------------------
   25. PDF Viewer Drawer
   ---------------------------------------------------------------- */
.pdf-drawer {
    position: fixed;
    top: var(--header-height);
    right: 0;
    width: 480px;
    height: calc(100vh - var(--header-height));
    background: var(--bg-surface);
    border-left: 1px solid var(--border);
    z-index: 100;
    transform: translateX(100%);
    transition: transform 200ms ease-out;
    display: flex;
    flex-direction: column;
}

.pdf-drawer.open {
    transform: translateX(0);
}

.pdf-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.pdf-drawer-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--sp-1);
    transition: color 120ms ease-out;
}

.pdf-drawer-close:hover {
    color: var(--text-primary);
}

.pdf-drawer iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #fff;
}


/* ----------------------------------------------------------------
   26. Popover / Confirmation
   ---------------------------------------------------------------- */
.popover {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    min-width: 240px;
    z-index: 50;
}

.popover-text {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--sp-3);
}

.popover-actions {
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
}


/* ----------------------------------------------------------------
   27. Dash Component Overrides
   ---------------------------------------------------------------- */
/* Hide Dash debug menu */
._dash-debug-menu {
    display: none !important;
}

/* Override Dash default background */
#react-entry-point {
    background: var(--bg-base) !important;
}

/* DatePickerRange overrides */
.DateInput_input {
    background: var(--bg-surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    font-family: var(--font-family) !important;
    font-size: var(--font-size-sm) !important;
    padding: var(--sp-1) var(--sp-2) !important;
}

.DateInput_input__focused {
    border-color: var(--border-strong) !important;
}


/* ----------------------------------------------------------------
   28. Utility Classes
   ---------------------------------------------------------------- */
.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1       { gap: var(--sp-1); }
.gap-2       { gap: var(--sp-2); }
.gap-3       { gap: var(--sp-3); }
.gap-4       { gap: var(--sp-4); }
.ml-auto     { margin-left: auto; }
.mr-auto     { margin-right: auto; }
.mt-2        { margin-top: var(--sp-2); }
.mt-3        { margin-top: var(--sp-3); }
.mt-4        { margin-top: var(--sp-4); }
.mb-2        { margin-bottom: var(--sp-2); }
.mb-3        { margin-bottom: var(--sp-3); }
.p-3         { padding: var(--sp-3); }
.p-4         { padding: var(--sp-4); }
.w-full      { width: 100%; }
.h-full      { height: 100%; }
.overflow-y-auto { overflow-y: auto; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hidden      { display: none !important; }
.cursor-pointer { cursor: pointer; }


/* ----------------------------------------------------------------
   29. Disputed / On-hold Tab
   ---------------------------------------------------------------- */
.disputed-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.disputed-count-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Override data-table td overflow for the action cell so popover is visible */
.disputed-action-cell {
    position: relative;
    overflow: visible !important;
    white-space: normal !important;
}

.disputed-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* Orange chip for rejection category */
.rejection-category-chip {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 var(--sp-2);
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius-sm);
    background: rgba(249, 115, 22, 0.12);
    color: var(--status-disputed);
    white-space: nowrap;
}

/* Truncated reason text with help cursor for title tooltip */
.rejection-reason-text {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}


/* ----------------------------------------------------------------
   30. Error Tab
   ---------------------------------------------------------------- */
.error-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.error-count-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* ROLLBACK_FAILED rows: red left border */
.row-rollback-failed > td:first-child {
    border-left: 3px solid var(--status-rejected);
}

/* Warning badge for ROLLBACK_FAILED error type */
.error-type-badge--rollback {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    color: var(--status-rejected);
    font-weight: 600;
}

/* Clickable error detail text */
.error-detail-clickable {
    cursor: pointer;
    color: var(--text-secondary);
    max-width: 250px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 120ms ease-out;
}

.error-detail-clickable:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Override data-table td overflow for the action cell so popover is visible */
.error-action-cell {
    position: relative;
    overflow: visible !important;
    white-space: normal !important;
}

.error-popover {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    min-width: 300px;
}

.error-dismiss-textarea {
    width: 100%;
    min-height: 60px;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    outline: none;
    resize: vertical;
    margin: var(--sp-2) 0;
}

.error-dismiss-textarea:focus {
    border-color: var(--border-strong);
}

/* Expansion row for full error detail + stack trace */
.error-expand-row td {
    padding: var(--sp-4) !important;
    white-space: normal !important;
    max-width: none !important;
    background: var(--bg-surface);
    border-left: 2px solid var(--status-rejected);
}

.error-expand-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.error-expand-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-1);
}

.error-expand-message {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    line-height: 1.6;
    word-break: break-word;
}

.error-expand-stacktrace {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}


/* ----------------------------------------------------------------
   31. Audit Log Tab
   ---------------------------------------------------------------- */

/* Page header */
.audit-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.audit-count-label {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Filter bar layout */
.audit-filter-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 130px;
}

.audit-filter-group--date {
    min-width: 100px;
}

.audit-filter-label {
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.audit-filter-dropdown {
    min-width: 200px;
}

.audit-filter-dropdown--actor {
    min-width: 140px;
}

/* Date input dark theme */
.audit-filter-date {
    height: 34px !important;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    font-size: var(--font-size-base) !important;
    padding: 0 var(--sp-2) !important;
}

.audit-filter-date::-webkit-calendar-picker-indicator {
    filter: invert(0.7);
    cursor: pointer;
}

/* Multi-select tag pills in audit event type dropdown (Dash 4.0) */
.audit-filter-dropdown .dash-dropdown-value-count {
    background: var(--accent-dim);
    color: var(--accent);
    font-size: var(--font-size-xs);
}

/* Event type badge (audit-specific — distinct from status_badge) */
.audit-event-badge {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 var(--sp-2);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    line-height: 1;
}

.audit-event-badge--approved {
    background: rgba(16, 185, 129, 0.15);
    color: var(--status-approved);
}

.audit-event-badge--pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--status-pending);
}

.audit-event-badge--rejected {
    background: rgba(239, 68, 68, 0.15);
    color: var(--status-rejected);
}

.audit-event-badge--disputed {
    background: rgba(249, 115, 22, 0.15);
    color: var(--status-disputed);
}

.audit-event-badge--info {
    background: rgba(77, 107, 87, 0.15);
    color: var(--status-skipped);
}

.audit-event-badge--override {
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
}

.audit-event-badge--neutral {
    background: rgba(100, 116, 139, 0.15);
    color: var(--status-booked);
}

/* UUID text — monospaced, select-all on click */
.audit-uuid-text {
    cursor: default;
    user-select: all;
}

/* Clickable detail text */
.audit-detail-clickable {
    cursor: pointer;
    color: var(--text-secondary);
    max-width: 300px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 120ms ease-out;
}

.audit-detail-clickable:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* PDF / inbox icon links */
.audit-doc-link {
    color: var(--text-muted);
    opacity: 0.75;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.audit-doc-link:hover {
    color: var(--text-primary);
    opacity: 1;
}

/* Expansion row */
.audit-expand-row td {
    padding: var(--sp-4) !important;
    white-space: normal !important;
    max-width: none !important;
    background: var(--bg-surface);
    border-left: 2px solid var(--accent);
}

.audit-expand-content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.audit-expand-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sp-1);
}

.audit-expand-json {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-3);
    max-height: 240px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    line-height: 1.6;
}


/* ----------------------------------------------------------------
   28. Admin Panel (Stage 9)
   ---------------------------------------------------------------- */

/* Section header (count + Add button) */
.admin-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--sp-3);
    margin-bottom: var(--sp-2);
}

.admin-section-count {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
}

/* Inline add / edit form row */
.admin-form-row td {
    padding: var(--sp-2) var(--sp-3) !important;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--accent-dim) !important;
    vertical-align: middle;
}

/* Action buttons in table cells */
.admin-action-cell {
    display: flex;
    gap: var(--sp-1);
    align-items: center;
}

/* Inactive row dimming */
.admin-row-inactive td {
    opacity: 0.45;
}

.admin-row-inactive:hover td {
    opacity: 0.7;
}

/* Status badge */
.admin-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-status-badge--active {
    color: var(--accent);
    background: rgba(16, 185, 129, 0.1);
}

.admin-status-badge--inactive {
    color: var(--text-muted);
    background: rgba(77, 107, 87, 0.15);
}

/* Role badge */
.admin-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-role-badge--admin {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.admin-role-badge--approver {
    color: var(--accent);
    background: rgba(16, 185, 129, 0.1);
}

.admin-role-badge--staff {
    color: #60a5fa;
    background: rgba(96, 165, 250, 0.1);
}

/* Generated password display */
.admin-password-text {
    font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-base);
    color: var(--accent);
    background: var(--bg-base);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    user-select: all;
    cursor: text;
    display: inline-block;
    margin-left: var(--sp-1);
}

/* ── Dash 4.0 component refinements ───────────────────────────
   The main theming is via --Dash-* custom properties in :root.
   These add layout/sizing tweaks for specific contexts.        */

/* Dropdown popup menu — slightly elevated bg for contrast */
.dash-dropdown-content {
    background: var(--bg-elevated);
    border-color: var(--border-strong);
}

/* Dropdown option hover/selected states */
.dash-dropdown-option[data-highlighted] {
    background: var(--bg-surface);
}

.dash-dropdown-option[data-state="checked"] {
    background: var(--accent-dim);
    color: var(--accent);
}

/* Compact dropdown height for form fields */
.admin-edit-dropdown .dash-dropdown {
    min-height: 32px;
}

.admin-edit-dropdown .dash-dropdown-trigger {
    min-height: 32px;
    padding: 0 var(--sp-2);
}

/* Search input inside dropdown popup */
.dash-dropdown-search {
    color: var(--text-primary);
    background: transparent;
}

/* Multi-select tag pills */
.dash-dropdown-value-count {
    background: var(--accent-dim);
    color: var(--accent);
}


/* ----------------------------------------------------------------
   22. Skeleton Screens (§11.1)
   ---------------------------------------------------------------- */

@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-bar {
    background: linear-gradient(90deg, #1f2f1f 25%, #2d3f2d 37%, #1f2f1f 63%);
    background-size: 800px 100%;
    animation: shimmer 1.2s linear infinite;
    border-radius: 4px;
    height: 14px;
    flex-shrink: 0;
}

/* Width modifiers */
.skeleton-bar--xs   { width: 40px; height: 10px; }
.skeleton-bar--sm   { width: 60px; height: 12px; }
.skeleton-bar--md   { width: 120px; }
.skeleton-bar--lg   { width: 180px; }
.skeleton-bar--xl   { width: 240px; }
.skeleton-bar--full { width: 100%; }
.skeleton-bar--h20  { height: 20px; }
.skeleton-bar--h32  { height: 32px; }

/* Timeline dots */
.skeleton-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: linear-gradient(90deg, #1f2f1f 25%, #2d3f2d 37%, #1f2f1f 63%);
    background-size: 800px 100%;
    animation: shimmer 1.2s linear infinite;
}

/* Card container (matches .invoice-card shape) */
.skeleton-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-3);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.skeleton-row--spread {
    justify-content: space-between;
}

.skeleton-dots-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 2px;
}

/* Detail pane skeleton */
.skeleton-detail {
    padding: var(--sp-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.skeleton-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--sp-4);
}

.skeleton-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-field .skeleton-bar:first-child {
    width: 70px;
    height: 10px;
    opacity: 0.5;
}

.skeleton-amounts-strip {
    display: flex;
    gap: var(--sp-4);
    padding: var(--sp-3);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.skeleton-amount-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
}

.skeleton-table {
    display: flex;
    flex-direction: column;
}

.skeleton-table-header {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-1);
}

.skeleton-table-row {
    display: flex;
    gap: var(--sp-3);
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.skeleton-table-cell {
    flex: 1;
}

.skeleton-table-cell--narrow {
    flex: 0.6;
}

.skeleton-table-cell--wide {
    flex: 1.8;
}


/* ----------------------------------------------------------------
   23. Alert Banner — Action Button (§12.1)
   ---------------------------------------------------------------- */

.alert-banner-action {
    margin-left: auto;
    padding: 4px 12px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    font-family: var(--font-family);
    border-radius: var(--radius-sm);
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 120ms ease-out;
    white-space: nowrap;
    flex-shrink: 0;
}

.alert-banner-action:hover {
    background: rgba(255, 255, 255, 0.08);
}

.alert-banner--red .alert-banner-action {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

.alert-banner--red .alert-banner-action:hover {
    background: rgba(239, 68, 68, 0.1);
}

.alert-banner--amber .alert-banner-action {
    color: #f59e0b;
    border-color: rgba(245, 158, 11, 0.3);
}

.alert-banner--amber .alert-banner-action:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* ----------------------------------------------------------------
   28. Setup Cards (Admin > Setup tab)
   ---------------------------------------------------------------- */
.setup-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.setup-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: var(--radius-sm);
    color: var(--accent);
    flex-shrink: 0;
}

.setup-card-body {
    flex: 1;
    min-width: 0;
}

.setup-card-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.setup-card-desc {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    margin-top: 2px;
}

.setup-status-msg {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

/* ----------------------------------------------------------------
   29. Error State
   ---------------------------------------------------------------- */
.error-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    padding: var(--sp-10);
    height: 100%;
    min-height: 200px;
}

.error-state-icon {
    color: var(--status-error);
    opacity: 0.6;
}

.error-state-message {
    font-size: var(--font-size-base);
    color: var(--text-muted);
    text-align: center;
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}


/* ----------------------------------------------------------------
   31. Responsive — Tablet (≤ 1100px)
   ---------------------------------------------------------------- */
@media (max-width: 1100px) {
    /* Widen the left split panel slightly */
    .split-left {
        width: 38%;
        min-width: 240px;
    }

    /* Tighten the field grid to 2 columns */
    .field-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Admin sub-tabs: wrap overflow */
    .admin-tabs {
        flex-wrap: wrap;
    }
}


/* ----------------------------------------------------------------
   32. Responsive — Mobile (≤ 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
    /* ── App header ── */
    .app-header {
        padding: 0 var(--sp-3);
        gap: var(--sp-3);
    }

    /* Compress nav tabs to fit on small screens */
    .header-nav-tab {
        padding: 0 var(--sp-2);
        font-size: var(--font-size-sm);
    }

    /* Shrink logo text */
    .header-logo-text {
        display: none;
    }

    /* ── Split layouts → stack vertically ── */
    .split-layout {
        flex-direction: column;
        overflow: auto;
    }

    .split-left {
        width: 100%;
        min-width: unset;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .split-right {
        width: 100%;
        height: auto;
        min-height: 60vh;
    }

    /* ── Detail panel ── */
    .detail-panel {
        height: auto;
        overflow: visible;
    }

    /* ── Field grid → single column ── */
    .field-grid {
        grid-template-columns: 1fr;
    }

    /* ── Amounts strip → stack vertically ── */
    .amounts-strip {
        flex-direction: column;
        gap: var(--sp-2);
    }

    .amounts-strip-item {
        width: 100%;
    }

    /* ── Invoice card → full width ── */
    .invoice-card {
        width: 100%;
    }

    /* ── PDF drawer → full screen ── */
    .pdf-drawer {
        width: 100% !important;
    }

    /* ── Admin sub-tabs → wrap ── */
    .admin-tabs {
        flex-wrap: wrap;
        gap: var(--sp-1);
    }

    .admin-tab {
        flex: 1 0 auto;
    }

    /* ── Line items table → horizontal scroll ── */
    .line-items-table {
        overflow-x: auto;
    }

    /* ── Audit table → horizontal scroll ── */
    #audit-table-container {
        overflow-x: auto;
    }

    /* ── Alert banners → stack content ── */
    .alert-banner {
        flex-wrap: wrap;
    }

    /* ── Action bar → stack buttons full-width ── */
    .action-bar {
        flex-direction: column;
        padding: var(--sp-3);
        gap: var(--sp-2);
    }

    .action-bar .btn-approve,
    .action-bar .btn-reject,
    .action-bar .btn-book,
    .action-bar .btn-secondary {
        width: 100%;
        justify-content: center;
        min-height: 48px;          /* WCAG 2.5.8 touch target */
        font-size: var(--font-size-base);
    }

    /* ── Larger touch targets for all interactive elements ── */
    .invoice-card {
        min-height: 72px;
    }

    .header-nav-tab {
        min-height: 40px;
        display: flex;
        align-items: center;
    }

    /* ── Rejection drawer → full viewport width ── */
    .rejection-drawer {
        width: 100%;
        left: 0;
        right: 0;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    /* ── List header → wrap on small screens ── */
    .list-header {
        flex-wrap: wrap;
        gap: var(--sp-2);
    }

    .list-header .sort-dropdown {
        flex: 1 1 100%;
    }

    /* ── Detail header → single column ── */
    .detail-header {
        flex-direction: column;
        align-items: flex-start;
    }

    /* ── Card amount → wrap so it doesn't overflow ── */
    .invoice-card-amount {
        word-break: break-all;
    }

    /* ── Status timeline → horizontal scroll ── */
    .status-timeline {
        overflow-x: auto;
    }
}


/* ----------------------------------------------------------------
   33. Analytics tab
   ---------------------------------------------------------------- */
.analytics-filter-bar {
    padding: var(--sp-3) 0 var(--sp-4);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--sp-5);
}

.analytics-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.analytics-kpi-card {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
}

.analytics-kpi-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.analytics-kpi-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.analytics-kpi-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: 2px;
}

.analytics-chart-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.analytics-chart-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
}

.analytics-chart-panel--wide {
    /* already wider via grid ratio */
}

.analytics-chart-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}

@media (max-width: 1100px) {
    .analytics-kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .analytics-chart-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .analytics-kpi-row {
        grid-template-columns: 1fr 1fr;
    }
}