/* ═══════════════════════════════════════════════════════════════
   ScanTracker — Design System
   Aesthetic: Warm earth tones + Saudi desert palette
   ═══════════════════════════════════════════════════════════════ */

/* Theme transition for smooth dark/light switches */
/* ════════════════════════════════════════════════════
   ANTHROPIC BRAND TYPOGRAPHY
   Poppins for all headings — Anthropic official font
   DM Sans for UI — body/controls (existing)
   Saudi Green + Sand palette preserved on all elements
   ════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6,
.page-header h2,
.card-header h3,
.auth-logo h1,
.sidebar-brand h1,
.loading-logo h1 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}

/* Anthropic orange accent — used for badges, highlights, alerts */
.ant-accent {
    color: var(--ant-orange);
}
.ant-accent-bg {
    background-color: var(--ant-orange);
    color: #fff;
}

/* Anthropic blue — used for info states, links */
.ant-info {
    color: var(--ant-blue);
}

/* Override MudBlazor info color with Anthropic blue */
.mud-alert-outlined.mud-alert-outlined-info {
    border-color: var(--ant-blue) !important;
    color: var(--ant-blue) !important;
}

*,
*::before,
*::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

:root {
    --font-base-size: 16px;
    --font-scale: 1.125;

    /* ── Core palette — Saudi Green + Sand (preserved) ──── */
    --clr-primary: #1B4332;
    --clr-primary-light: #2D6A4F;
    --clr-primary-dark: #0F2A1D;
    --clr-accent: #D4A276;
    --clr-accent-light: #E6C9A8;
    --clr-accent-warm: #C17F3E;

    /* ── Light Mode — Claude.ai warm off-white system ───── */
    /* Background layers: 3 depth levels like Claude.ai      */
    --clr-bg:          #F9F8F6;   /* page background — warm ivory */
    --clr-surface:     #FFFFFF;   /* card / panel surface          */
    --clr-surface-alt: #F4F2EF;   /* input bg, secondary surfaces  */
    --clr-surface-raised: #FFFFFF; /* elevated elements, dropdowns  */

    /* Borders — warm gray, never cold blue-gray */
    --clr-border:       #EDEAE5;
    --clr-border-light: #F2EFEA;

    /* Text — warm charcoal scale, like Claude's typography */
    --clr-text:           #1A1917;   /* primary text — near black warm */
    --clr-text-secondary: #57534E;   /* secondary — warm gray           */
    --clr-text-muted:     #8A8580;   /* muted — warm gray (4.5:1 vs white) */

    /* ── Glassmorphism ─────────────────────────────── */
    --clr-glass-bg: rgba(255, 255, 255, 0.75);
    --clr-glass-border: rgba(255, 255, 255, 0.5);
    --clr-glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);

    /* ── Feedback ──────────────────────────────────── */
    --clr-success: #1B4332;
    --clr-error: #C0392B;
    --clr-warning: #D97706;
    --clr-info: #2563EB;

    /* ── Shadows — warm, tight, premium ────────────── */
    --shadow-sm: 0 1px 3px rgba(26, 25, 23, 0.04),
                 0 1px 2px rgba(26, 25, 23, 0.02);
    --shadow-md: 0 2px 6px rgba(26, 25, 23, 0.05),
                 0 4px 12px rgba(26, 25, 23, 0.04);
    --shadow-lg: 0 6px 20px rgba(26, 25, 23, 0.08),
                 0 12px 40px rgba(26, 25, 23, 0.05);
    --shadow-focus: 0 0 0 3px rgba(27, 67, 50, 0.18);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* ── Sidebar ──────────────────────────────────── */
    --sidebar-width: 260px;

    /* ── Transition ────────────────────────────────── */
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Motion Tokens ─────────────────────────────── */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-out-soft:   cubic-bezier(0.25, 0.1, 0.25, 1);
    --duration-quick:  120ms;
    --duration-normal: 180ms;
    --duration-enter:  250ms;

    /* ══ Anthropic Brand Tokens ══════════════════════
       Light mode: Anthropic warm backgrounds + grays.
       Saudi Green (#1B4332) and Sand (#D4A276) are
       preserved as --clr-primary and --clr-accent.
       Anthropic orange/blue layer adds visual richness.
       ═════════════════════════════════════════════ */
    --ant-dark:       #141413;   /* warm near-black — dark mode page bg   */
    --ant-light:      #faf9f5;   /* warm off-white — light bg reference   */
    --ant-mid-gray:   #b0aea5;   /* secondary elements, muted borders     */
    --ant-light-gray: #e8e6dc;   /* subtle dividers, alt surface tint     */
    --ant-orange:     #d97757;   /* Anthropic primary accent — highlights */
    --ant-blue:       #6a9bcc;   /* info, links, secondary accent         */
    --ant-green:      #788c5d;   /* Anthropic green — Saudi cultural ref  */

    /* ── Typography ─────────────────────────────────
       Poppins for headings, DM Sans for UI controls.
    ── */
    --font-heading: 'Poppins', Arial, sans-serif;
    --font-ui:      'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;
    --font-ar:      'Noto Sans Arabic', 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;

    /* ── Type Scale (English) — 16px base ────────────
       Arabic overrides these in [dir="rtl"] (+15%)
    ── */
    --st-text-xs:   0.6875rem;  /* 11px — micro-labels, timestamps */
    --st-text-sm:   0.75rem;    /* 12px — captions, helper text */
    --st-text-base: 0.875rem;   /* 14px — body text, form values */
    --st-text-md:   1rem;       /* 16px — emphasized body, labels */
    --st-text-lg:   1.125rem;   /* 18px — section headers */
    --st-text-xl:   1.25rem;    /* 20px — page titles */
    --st-text-2xl:  1.5rem;     /* 24px — KPI values */
    --st-text-3xl:  2rem;       /* 32px — hero numbers, grand total */

    /* ── Font Weights ─────────────────────────────────
       Arabic overrides label/value in [dir="rtl"]
    ── */
    --st-weight-body:     400;
    --st-weight-medium:   500;
    --st-weight-label:    500;  /* RTL override: 600 */
    --st-weight-value:    600;  /* RTL override: 700 */
    --st-weight-heading:  700;
    --st-weight-heavy:    800;  /* RTL override: 700 */

    /* Generic weight aliases (map to semantic tokens above) */
    --st-weight-regular:  var(--st-weight-body);     /* 400 */
    --st-weight-semibold: var(--st-weight-value);    /* 600, RTL: 700 */
    --st-weight-bold:     var(--st-weight-heading);  /* 700 */

    /* ── Line Heights ─────────────────────────────────
       Arabic overrides in [dir="rtl"] (diacriticals need room)
    ── */
    --st-leading-tight:   1.2;  /* headings, KPI numbers */
    --st-leading-normal:  1.5;  /* body text, descriptions */
    --st-leading-relaxed: 1.75; /* captions, dense data labels */

    /* ── Spacing Scale (4px base) ─────────────────────
       Reference tokens — use pa-N / mb-N MudBlazor classes
    ── */
    --st-space-1:  4px;
    --st-space-2:  8px;
    --st-space-3:  12px;
    --st-space-4:  16px;
    --st-space-5:  20px;
    --st-space-6:  24px;
    --st-space-8:  32px;
    --st-space-10: 40px;
    --st-space-12: 48px;
    --st-space-16: 64px;

    /* ── Vertical Rhythm ─────────────────────────────
       Semantic spacing between page-level blocks
    ── */
    --st-rhythm-tight:   var(--st-space-3);   /* 12px — within card */
    --st-rhythm-normal:  var(--st-space-4);   /* 16px — between cards / KPI→filter */
    --st-rhythm-section: var(--st-space-6);   /* 24px — between major sections */
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: calc(var(--font-base-size) * var(--font-scale));
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow: hidden;
    height: 100%;
}

body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    overflow: hidden;
    height: 100%;
    -webkit-font-smoothing: antialiased;
}

/* ── Scroll fix: each panel (sidebar / main) scrolls independently ── */
/* Prevents RTL confusion where body scrollbar sits next to sidebar    */
.mud-layout {
    height: 100vh;
    overflow: hidden;
}

.mud-main-content {
    overflow-y: auto;
    height: 100vh;
}

a {
    color: var(--clr-primary);
    text-decoration: none;
}

a:hover {
    color: var(--clr-primary-light);
}

img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   LOADING SCREEN
   ═══════════════════════════════════════════════════════════════ */

.loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--clr-bg);
    color: var(--clr-text);
}

.loading-logo {
    text-align: center;
}

.loading-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: var(--clr-primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px;
    animation: pulse 1.5s ease-in-out infinite;
}

.loading-logo h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clr-primary);
    letter-spacing: -0.02em;
}

.loading-logo p {
    color: var(--clr-text-muted);
    font-size: 0.875rem;
    margin-top: 4px;
}

.loading-bar {
    width: 120px;
    height: 3px;
    background: var(--clr-border);
    border-radius: var(--radius-full);
    margin: 16px auto 0;
    overflow: hidden;
}

.loading-bar-fill {
    height: 100%;
    width: 30%;
    background: var(--clr-primary);
    border-radius: var(--radius-full);
    animation: loadingSlide 1.2s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes loadingSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(400%);
    }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT — Sidebar + Main Content
   ═══════════════════════════════════════════════════════════════ */

.app-layout {
    display: flex;
    min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────── */

.sidebar {
    width: var(--sidebar-width);
    background: var(--clr-primary-dark);
    color: white;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    bottom: 0;
    z-index: 2000;
    transition: transform var(--transition);
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar.notransition,
.sidebar.notransition * {
    transition: none !important;
}



.sidebar-brand {
    padding: 20px 20px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand-icon {
    width: 40px;
    height: 40px;
    background: var(--clr-accent);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--clr-primary-dark);
    flex-shrink: 0;
}

.sidebar-brand h1 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sidebar-brand span {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    display: block;
    margin-top: 2px;
}

/* ── User Section (TOP) ───────────────────────────── */

.sidebar-user-section {
    padding: 14px 14px 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.05);
}

.sidebar-user-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--clr-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--clr-primary-dark);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.sidebar-user-info {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.sidebar-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-email {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-logout-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--radius-sm);
    font-size: 1.05rem;
    flex-shrink: 0;
    transition: all 0.2s;
}

.sidebar-logout-btn:hover {
    color: #FF6B6B;
    background: rgba(255, 107, 107, 0.12);
}

/* ── Navigation ───────────────────────────────────── */

.sidebar-nav {
    flex: 1;
    padding: 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section-label {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.45);
    padding: 18px 12px 6px;
    font-weight: 600;
}

/* Thin divider between sidebar sections (skip first) */
.sidebar-section-label:not(:first-child) {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
}

/* ── Collapsible section toggle ──────────────────── */
.sidebar-section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.2s ease;
}

.sidebar-section-toggle:hover {
    color: rgba(255, 255, 255, 0.6);
}

.sidebar-section-chevron {
    font-size: 0.7rem;
    transition: transform 0.25s ease;
    opacity: 0.5;
}

.sidebar-section-chevron.collapsed {
    transform: rotate(-90deg);
}

[dir="rtl"] .sidebar-section-chevron.collapsed {
    transform: rotate(90deg);
}

.sidebar-section-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    max-height: 500px;
    transition: max-height 0.3s ease, opacity 0.25s ease;
    opacity: 1;
}

.sidebar-section-items.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: start;
    text-decoration: none;
}



.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.nav-link.active {
    background: rgba(212, 162, 118, 0.15);
    color: var(--clr-accent-light);
}

.nav-link.locked {
    opacity: 0.5;
    cursor: default;
    filter: grayscale(0.8);
    background: transparent !important;
    pointer-events: none;
}

.nav-link.locked i {
    color: rgba(255, 255, 255, 0.4);
}

.lock-badge {
    font-size: 0.6rem;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    padding: 1px 5px;
    border-radius: 4px;
    margin-inline-start: auto;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.nav-link i {
    font-size: 1.125rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Footer Mini ──────────────────────────────────── */

.sidebar-footer-mini {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    text-align: center;
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.05em;
}

/* ── Main Content ─────────────────────────────────── */

.main-content {
    flex: 1;
    margin-inline-start: 0;
    /* MudBlazor handles drawer margins automatically on main content */
}

/* ── Focus Mode (MudBlazor overriding) ─────────────────────────── */
.mud-drawer-open .mud-main-content {
    transition: padding-left 0.25s ease;
}

/* ── Mobile Sidebar Click-Through Fix ──────────────────────────── */
/* MudBlazor renders its own scrim inside the drawer panel on mobile.
   It sits on top of nav links and eats pointer events — disable it.  */
@media (max-width: 1024px) {
    /* MudBlazor's internal overlay/scrim inside the drawer */
    .mud-drawer .mud-overlay,
    .mud-drawer-overlay {
        pointer-events: none !important;
        display: none !important;
    }

    /* Ensure sidebar nav links are always clickable */
    .sidebar .sidebar-nav,
    .sidebar .sidebar-nav .nav-link,
    .sidebar .sidebar-nav a {
        position: relative;
        z-index: 2100;
        pointer-events: all !important;
    }

    /* Ensure the whole sidebar interior is above any scrim */
    .mud-drawer--open.sidebar > * {
        position: relative;
        z-index: 2050;
        pointer-events: all !important;
    }
}



.page-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 32px 64px;
}

/* ── Mobile Top Bar ───────────────────────────────── */

.mobile-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--clr-primary-dark);
    color: white;
    padding: 12px 16px;
    align-items: center;
    gap: 12px;
}

.mobile-menu-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1500;   /* BELOW sidebar (2000) so overlay never blocks nav links */
    transition: opacity 0.3s ease;
}

/* ── Mobile Bottom Nav Bar ───────────────────────── */

.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 95;
    background: var(--clr-glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-top: 1px solid var(--clr-glass-border);
    box-shadow: var(--clr-glass-shadow);
    padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around;
    align-items: stretch;
}

.dark .mobile-bottom-nav {
    background: rgba(30, 30, 30, 0.7);
    border-top-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.4);
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
    padding: 8px 4px;
    background: none;
    border: none;
    color: var(--clr-text-muted);
    font-family: inherit;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.2s ease;
    position: relative;
}

.bottom-nav-item i {
    font-size: 1.25rem;
    line-height: 1;
}

.bottom-nav-item.active {
    color: var(--clr-primary);
}

.dark .bottom-nav-item.active {
    color: var(--clr-accent-light);
}

.bottom-nav-item.active i {
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 4px rgba(27, 67, 50, 0.3));
}

.dark .bottom-nav-item.active i {
    filter: drop-shadow(0 2px 4px rgba(230, 201, 168, 0.3));
}

/* Removed heavy top border indicator for active states, using subtle shadow instead */

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */

.page-header {
    margin-bottom: 32px;
}

.page-header h2 {
    font-size: 1.625rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--clr-text);
}

.page-header p {
    color: var(--clr-text-secondary);
    margin-top: 4px;
    font-size: 0.9375rem;
}

.page-header-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
    line-height: 1;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--clr-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--clr-primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-accent {
    background: var(--clr-accent);
    color: var(--clr-primary-dark);
}

.btn-accent:hover:not(:disabled) {
    background: var(--clr-accent-warm);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--clr-text);
    border: 1.5px solid var(--clr-border);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
    background: rgba(27, 67, 50, 0.04);
}

.btn-ghost {
    background: transparent;
    color: var(--clr-text-secondary);
}

.btn-ghost:hover:not(:disabled) {
    background: var(--clr-surface-alt);
    color: var(--clr-text);
}

.btn-danger {
    background: var(--clr-error);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #A93226;
}

.btn-sm {
    padding: 6px 14px;
    font-size: 0.8125rem;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1rem;
}

.btn-icon {
    padding: 8px;
    width: 36px;
    height: 36px;
}

.btn-block {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

.card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--clr-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.card-header h3 {
    font-size: 1rem;
    font-weight: 600;
}

.card-body {
    padding: 24px;
}

.card-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--clr-border-light);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-text);
    margin-bottom: 6px;
}

.form-hint {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    margin-top: 4px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--clr-text);
    background: var(--clr-surface);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    transition: all var(--transition);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-focus);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--clr-text-muted);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.form-input.invalid,
.form-textarea.invalid {
    border-color: var(--clr-error);
}

.validation-message {
    font-size: 0.75rem;
    color: var(--clr-error);
    margin-top: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ── Login method selector ────────────────────────── */

.method-selector {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.method-btn {
    flex: 1;
    padding: 12px;
    background: var(--clr-surface-alt);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
}

.method-btn i {
    display: block;
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.method-btn:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

.method-btn.active {
    border-color: var(--clr-primary);
    background: rgba(27, 67, 50, 0.06);
    color: var(--clr-primary);
}

/* ═══════════════════════════════════════════════════════════════
   AUTH PAGES
   ═══════════════════════════════════════════════════════════════ */

.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, var(--clr-bg) 0%, var(--clr-surface-alt) 50%, var(--clr-bg) 100%);
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 420px;
    animation: cardSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.auth-logo {
    text-align: center;
    margin-bottom: 32px;
}

.auth-logo-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-primary-light));
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: white;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.25);
}

.auth-logo h1 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--clr-primary);
    letter-spacing: -0.02em;
}

.auth-logo p {
    color: var(--clr-text-muted);
    font-size: 0.875rem;
}

.auth-toggle {
    text-align: center;
    margin-top: 20px;
    font-size: 0.875rem;
    color: var(--clr-text-secondary);
}

.auth-toggle a,
.auth-toggle button {
    color: var(--clr-primary);
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    text-decoration: underline;
}

.auth-error {
    background: #FDF2F2;
    color: var(--clr-error);
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    margin-bottom: 16px;
    border-inline-start: 3px solid var(--clr-error);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD STATS
   ═══════════════════════════════════════════════════════════════ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-icon.green {
    background: #ECFDF5;
    color: #065F46;
}

.stat-icon.amber {
    background: #FFF7ED;
    color: #9A3412;
}

.stat-icon.blue {
    background: #EFF6FF;
    color: #1E40AF;
}

.stat-icon.purple {
    background: #F5F3FF;
    color: #5B21B6;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   ENTRY LIST
   ═══════════════════════════════════════════════════════════════ */

.entries-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.entry-card {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: var(--shadow-sm);
}

.entry-card:hover {
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.entry-type-badge {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.entry-type-badge.recipe {
    background: #ECFDF5;
    color: #065F46;
}

.entry-type-badge.invoice {
    background: #EFF6FF;
    color: #1E40AF;
}

.entry-type-badge.bill {
    background: #FFF7ED;
    color: #9A3412;
}

.entry-type-badge.expense {
    background: #FFF1F2;
    color: #BE123C;
}

/* ── Date Group Headers ────────────────────────────── */

.date-group {
    margin-bottom: 24px;
}

.date-group-header {
    display: flex;
    align-items: center;
    padding: 8px 12px 6px 12px;
    margin-top: 24px;
    margin-bottom: 6px;
    border-top: 1.5px solid var(--mud-palette-divider);
    gap: 8px;
}

.date-group-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.date-group-text {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.date-group-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--mud-palette-primary);
    color: white;
    font-size: 0.68rem;
    font-weight: 700;
}

.date-group-total {
    font-size: 0.85rem;
    font-weight: 700;
    font-family: monospace;
    color: var(--mud-palette-text-primary);
}



.badge-expense {
    background: #FFF1F2;
    color: #BE123C;
}

.entry-info {
    flex: 1;
    min-width: 0;
}

.entry-title {
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entry-meta {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    margin-top: 2px;
}

.entry-amount {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    font-size: 1rem;
    color: var(--clr-text);
    white-space: nowrap;
}

.entry-actions {
    display: flex;
    gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   SCAN PAGE
   ═══════════════════════════════════════════════════════════════ */

.scan-zone {
    border: 2px dashed var(--clr-border);
    border-radius: var(--radius-xl);
    padding: 48px 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
    background: var(--clr-surface);
    position: relative;
}

.scan-zone:hover,
.scan-zone.dragging {
    border-color: var(--clr-primary);
    background: rgba(27, 67, 50, 0.03);
}

.scan-zone-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

.scan-zone h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.scan-zone p {
    color: var(--clr-text-muted);
    font-size: 0.875rem;
}

.scan-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.scan-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.scan-preview {
    margin-top: 24px;
    text-align: center;
}

.scan-preview img {
    max-height: 300px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border-light);
    box-shadow: var(--shadow-md);
}

.scan-type-selector {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 20px 0;
}

.scan-type-btn {
    padding: 10px 20px;
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--clr-surface);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
}

.scan-type-btn:hover {
    border-color: var(--clr-primary);
}

.scan-type-btn.active {
    border-color: var(--clr-primary);
    background: var(--clr-primary);
    color: white;
}

/* ── Processing animation ─────────────────────────── */

.processing-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    gap: 16px;
}

.spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--clr-border);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.processing-text {
    font-size: 0.9375rem;
    color: var(--clr-text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   EXPORT PAGE
   ═══════════════════════════════════════════════════════════════ */

.export-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.export-option {
    background: var(--clr-surface);
    border: 1.5px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition);
}

.export-option:hover {
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-md);
}

.export-option.selected {
    border-color: var(--clr-primary);
    background: rgba(27, 67, 50, 0.04);
}

.export-option i {
    font-size: 2rem;
    color: var(--clr-primary);
    margin-bottom: 8px;
}

.export-option h4 {
    font-size: 0.9375rem;
    font-weight: 600;
}

.export-option p {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    margin-top: 4px;
}

/* ── Checkbox list ─────────────────────────────────── */

.check-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}

.check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
}

.check-item:hover {
    background: var(--clr-surface-alt);
}

.check-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--clr-primary);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════════════════════ */

.toast-container {
    position: fixed;
    top: 20px;
    inset-inline-end: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--clr-surface);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
    min-width: 280px;
    max-width: 400px;
    animation: toastIn 0.3s ease-out;
    border-inline-start: 4px solid;
}

.toast.success {
    border-inline-start-color: var(--clr-success);
}

.toast.error {
    border-inline-start-color: var(--clr-error);
}

.toast.info {
    border-inline-start-color: var(--clr-info);
}

.toast.warning {
    border-inline-start-color: var(--clr-warning);
}

.toast-close {
    margin-inline-start: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--clr-text-muted);
    font-size: 1rem;
    padding: 2px;
}

@keyframes toastIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */

.empty-state {
    text-align: center;
    padding: 64px 24px;
    color: var(--clr-text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    margin-bottom: 4px;
}

.empty-state p {
    font-size: 0.875rem;
    max-width: 360px;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════
   DETAIL VIEW / MODAL
   ═══════════════════════════════════════════════════════════════ */

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.detail-field {
    padding: 12px 0;
}

.detail-field-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.detail-field-value {
    font-size: 1rem;
    margin-top: 4px;
}

.detail-field-value.mono {
    font-family: 'IBM Plex Mono', monospace;
}

.line-items-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    font-size: 0.875rem;
}

.line-items-table th {
    text-align: start;
    padding: 8px 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--clr-border);
}

.line-items-table td {
    padding: 4px 4px;
    border-bottom: 1px solid var(--clr-border-light);
    vertical-align: middle;
}

.line-items-table .text-right {
    text-align: end;
    font-family: 'IBM Plex Mono', monospace;
}

.form-input-sm {
    padding: 6px 8px !important;
    font-size: 0.8125rem !important;
    min-height: unset !important;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure MudDataGrid cell inputs fill available space */
.mud-table td .form-input-sm,
.mud-table td input[type="number"],
.mud-table td select {
    width: 100%;
    box-sizing: border-box;
}

/* RTL-safe horizontal scroll wrapper for line items */
.line-items-scroll-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    direction: ltr;
    /* force LTR scroll container */
    margin-bottom: 1rem;
}

.line-items-scroll-wrapper>* {
    direction: inherit;
    /* inner content inherits page direction (RTL) from body */
}

[dir="rtl"] .line-items-scroll-wrapper>* {
    direction: rtl;
}

/* Compact MudDataGrid cells for line items */
.mud-table-container {
    overflow-x: visible !important;
    /* let parent wrapper handle scroll */
}

/* ── Compact MudTable for edit-mode line items ── */
.line-items-table table,
.line-items-table-edit table {
    table-layout: auto !important;
}

.line-items-table-edit td.mud-table-cell {
    vertical-align: middle !important;
    padding: 2px 4px !important;
    line-height: 1.4;
}

.line-items-table-edit th.mud-table-cell {
    vertical-align: middle !important;
    padding: 4px 4px !important;
}

.line-items-table-edit .mud-input-root {
    font-size: 0.82rem !important;
    margin-top: 0 !important;
}

.line-items-table-edit .mud-select-input {
    font-size: 0.82rem !important;
}

/* Mobile card accent border — logical property auto-flips in RTL */
@media (max-width: 960px) {
    .line-items-mobile-card {
        border-inline-start: 3px solid var(--mud-palette-primary, var(--clr-primary));
    }
}

.text-right {
    text-align: end !important;
}

.text-center {
    text-align: center !important;
}

.line-items-section {
    margin-top: 16px;
}

.line-items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.line-item-card {
    border: 1px solid var(--clr-border-light);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
}

.line-item-card-body {
    padding: 12px 14px !important;
    display: grid;
    gap: 10px;
}

.line-item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}

.line-item-card-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.line-item-index {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--clr-text-secondary);
}

.binding-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
}

.binding-chip i {
    font-size: 0.7rem;
}

.binding-chip-bound {
    background: #DCFCE7;
    color: #166534;
}

.binding-chip-unbound {
    background: #FEF3C7;
    color: #92400E;
}

.binding-chip-muted {
    background: #E5E7EB;
    color: #4B5563;
}

.binding-chip-neutral {
    background: #E0F2FE;
    color: #075985;
}

.line-item-binding-row,
.line-item-main-grid,
.line-item-detail-grid,
.line-item-total-grid,
.line-item-read-grid,
.line-item-summary-grid {
    display: grid;
    gap: 10px;
}

.line-item-binding-row {
    grid-template-columns: minmax(0, 1.35fr) minmax(220px, 1fr);
}

.line-item-main-grid {
    grid-template-columns: minmax(120px, 0.7fr) minmax(0, 1.3fr);
}

.line-item-detail-grid {
    grid-template-columns: minmax(130px, 1fr) repeat(3, minmax(82px, 0.7fr));
}

.line-item-total-grid {
    grid-template-columns: repeat(3, minmax(92px, 1fr));
}

.line-item-read-grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(120px, 0.8fr));
}

.line-item-read-grid-compact {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
}

.line-item-field {
    margin: 0;
    min-width: 0;
}

.line-item-field-label {
    font-size: 0.68rem !important;
    margin-bottom: 4px;
}

.line-item-binding-field .mud-input-control,
.line-item-binding-field .mud-input-slot {
    margin-top: 0 !important;
}

.line-item-canonical,
.line-item-value-block {
    min-width: 0;
    border-radius: var(--radius-md);
}

.line-item-canonical {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    background: rgba(27, 67, 50, 0.05);
    border: 1px solid rgba(27, 67, 50, 0.12);
}

.line-item-canonical-label,
.line-item-source-label {
    font-size: 0.67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.line-item-canonical-label {
    color: var(--clr-text-muted);
}

.line-item-canonical-value {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--clr-text);
    line-height: 1.35;
    word-break: break-word;
}

.line-item-source {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: #F8FAFC;
    border: 1px dashed #BFDBFE;
    border-radius: var(--radius-md);
}

.line-item-source-label {
    color: #1D4ED8;
}

.line-item-source-text,
.line-item-supporting-text,
.line-item-static-value {
    font-size: 0.8rem;
    line-height: 1.4;
}

.line-item-source-text,
.line-item-supporting-text {
    color: var(--clr-text-secondary);
}

.line-item-supporting-text {
    padding: 8px 10px;
    background: var(--clr-surface-alt);
    border: 1px dashed var(--clr-border);
    border-radius: var(--radius-sm);
}

.line-item-value-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 10px;
    background: var(--clr-surface-alt);
    border: 1px solid var(--clr-border-light);
}

.line-item-static-value {
    color: var(--clr-text);
    word-break: break-word;
}

.line-item-static-value.mono,
.mono {
    font-family: 'IBM Plex Mono', monospace;
}

.line-item-total-strong {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--clr-primary);
    white-space: nowrap;
}

.line-item-summary-card {
    border-style: solid;
}

@media (max-width: 960px) {
    .line-item-binding-row,
    .line-item-main-grid,
    .line-item-detail-grid,
    .line-item-read-grid,
    .line-item-read-grid-compact,
    .line-item-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .line-item-card-body {
        padding: 10px 12px !important;
    }

    .line-item-binding-row,
    .line-item-main-grid,
    .line-item-detail-grid,
    .line-item-total-grid,
    .line-item-read-grid,
    .line-item-read-grid-compact,
    .line-item-summary-grid {
        grid-template-columns: 1fr;
    }

    .line-item-total-strong {
        font-size: 0.84rem;
    }
}

.btn-icon-delete {
    background: none;
    border: none;
    color: var(--clr-error);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 1rem;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-icon-delete:hover {
    opacity: 1;
    background: rgba(192, 57, 43, 0.1);
}

.btn-sm {
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES & TAGS
   ═══════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.badge-recipe {
    background: #ECFDF5;
    color: #065F46;
}

.badge-invoice {
    background: #EFF6FF;
    color: #1E40AF;
}

.badge-bill {
    background: #FFF7ED;
    color: #9A3412;
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */

.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--clr-border);
    margin-bottom: 24px;
}

.tab {
    padding: 10px 20px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    position: relative;
    transition: color var(--transition);
}

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

.tab.active {
    color: var(--clr-primary);
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 2px;
    background: var(--clr-primary);
    border-radius: 1px 1px 0 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 80vw;
        max-width: 320px;
        box-shadow: var(--shadow-lg);
        z-index: 2000 !important;  /* ensure drawer sits above overlay on mobile */
    }

    /* Use MudBlazor's actual open class — .open is never added by MudBlazor */
    .mud-drawer--open.sidebar {
        transform: translateX(0) !important;
    }

    .sidebar-overlay.open {
        display: block;
    }

    .mobile-topbar {
        display: flex;
    }

    .main-content {
        margin-inline-start: 0;
        margin-inline-end: 0;
    }

    .page-container {
        padding: 20px 16px 100px;
    }

    .mobile-bottom-nav {
        display: flex;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .export-options {
        grid-template-columns: 1fr;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .method-selector {
        flex-direction: column;
    }

    .scan-type-selector {
        flex-wrap: wrap;
    }

    .page-header-actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .scan-zone {
        padding: 32px 16px;
    }

    .scan-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BLAZOR ERROR UI
   ═══════════════════════════════════════════════════════════════ */

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    padding: 12px 20px;
    background: #FDF2F2;
    color: var(--clr-error);
    font-size: 0.875rem;
    text-align: center;
    z-index: 9999;
}

#blazor-error-ui .reload,
#blazor-error-ui .dismiss {
    margin-inline-start: 12px;
    cursor: pointer;
}

.st-error-fallback {
    max-width: 760px;
    margin: 64px auto 24px;
    padding: 24px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.st-error-fallback-icon {
    color: var(--clr-error);
    font-size: 2rem;
    margin-bottom: 10px;
}

.st-error-fallback h2 {
    font-size: 1.15rem;
    margin-bottom: 8px;
    color: var(--clr-text);
}

.st-error-fallback p {
    color: var(--clr-text-secondary);
    margin-bottom: 14px;
}

.st-error-fallback-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.st-error-fallback-detail {
    margin-top: 12px;
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    word-break: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */

.mt-1 {
    margin-top: 8px;
}

.mt-2 {
    margin-top: 16px;
}

.mt-3 {
    margin-top: 24px;
}

.mt-4 {
    margin-top: 32px;
}

.mb-2 {
    margin-bottom: 16px;
}

.mb-3 {
    margin-bottom: 24px;
}

.gap-2 {
    gap: 16px;
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.text-center {
    text-align: center;
}

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

.text-sm {
    font-size: 0.8125rem;
}

.font-mono {
    font-family: 'IBM Plex Mono', monospace;
}

.w-full {
    width: 100%;
}

.hidden {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — Claude.ai design system
   Deep warm charcoal — NOT cold blue-black, NOT pure #000
   3-layer depth system exactly like Claude.ai:
     Level 0 (page bg):    #1C1917  — very deep warm brown-black
     Level 1 (card/panel): #242320  — elevated surface
     Level 2 (input/alt):  #2C2A27  — further elevated
   Text: warm white, never harsh #FFF
   ═══════════════════════════════════════════════════════════════ */

.dark,
html.dark {
    /* ── Backgrounds — 3 depth layers ──────────────── */
    --clr-bg:             #141413;   /* page canvas — warm charcoal    */
    --clr-surface:        #1e1d1b;   /* card, panel, drawer            */
    --clr-surface-alt:    #252320;   /* input bg, secondary elements   */
    --clr-surface-raised: #2c2a27;   /* dropdown, tooltip, popup       */

    /* ── Borders — subtle warm lines ──────────────── */
    --clr-border:         #323028;   /* standard border                */
    --clr-border-light:   #2a2825;   /* lighter divider                */

    /* ── Text — warm white scale ──────────────────── */
    --clr-text:           #faf9f5;   /* primary — warm off-white       */
    --clr-text-secondary: #b0aea5;   /* secondary — warm mid-gray      */
    --clr-text-muted:     #7A756F;   /* muted — warm gray (4.5:1 vs dark bg) */

    /* ── Brand green — brighter in dark (Saudi green) */
    --clr-primary:        #2D6A4F;
    --clr-primary-light:  #40916C;
    --clr-primary-dark:   #1B4332;

    /* ── Accent sand — stays warm ──────────────────── */
    --clr-accent:         #D4A276;
    --clr-accent-light:   #E6C9A8;

    /* ── Shadows — deeper in dark mode ─────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
    --shadow-focus: 0 0 0 3px rgba(45, 106, 79, 0.35);

    /* ── Glass — dark tinted ─────────────────────── */
    --clr-glass-bg:     rgba(30, 29, 27, 0.88);
    --clr-glass-border: rgba(255, 255, 255, 0.07);
    --clr-glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}

/* ── Dark mode component overrides ─────────────────── */
.dark .sidebar {
    background: #181716;   /* Anthropic dark sidebar — sidebar feels grounded */
    border-inline-end: 1px solid var(--clr-border);
}

.dark .sidebar-brand {
    border-bottom-color: var(--clr-border);
}

.dark .mobile-topbar {
    background: #1A1816;
}

.dark .mobile-bottom-nav {
    background: #1F1E1B;
    border-top-color: var(--clr-border);
}

.dark .card {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.dark .card-header,
.dark .card-footer {
    border-color: var(--clr-border);
}

.dark .form-input,
.dark .form-textarea,
.dark .form-select {
    background: var(--clr-surface-alt);
    border-color: var(--clr-border);
    color: var(--clr-text);
}

.dark .form-input:focus,
.dark .form-textarea:focus,
.dark .form-select:focus {
    border-color: var(--clr-primary-light);
    background: var(--clr-surface-alt);
}

.dark .form-input::placeholder,
.dark .form-textarea::placeholder {
    color: var(--clr-text-muted);
}

.dark .line-items-table td input {
    background: var(--clr-surface-alt);
    color: var(--clr-text);
    border-color: var(--clr-border);
}

.dark .auth-card {
    background: var(--clr-surface);
}

.dark .auth-container {
    background: linear-gradient(145deg, var(--clr-bg) 0%, var(--clr-surface) 50%, var(--clr-bg) 100%);
}

.dark .tabs {
    border-bottom-color: var(--clr-border);
}

.dark .stat-card {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.dark .method-btn {
    background: var(--clr-surface-alt);
    border-color: var(--clr-border);
    color: var(--clr-text-secondary);
}

.dark .method-btn:hover {
    border-color: var(--clr-primary-light);
    color: var(--clr-primary-light);
}

.dark .method-btn.active {
    border-color: var(--clr-primary-light);
    background: rgba(45, 106, 79, 0.12);
    color: var(--clr-primary-light);
}

.dark .bulk-action-bar {
    background: var(--clr-surface-raised);
    border-color: var(--clr-border-light);
}

.dark #pull-indicator {
    background: var(--clr-surface);
}

.dark .swipe-content {
    background: var(--clr-surface);
}

.dark .donut-hole {
    background: var(--clr-surface);
}

.dark .donut-chart {
    background: var(--clr-surface-alt);
}

.dark .trend-positive {
    background: rgba(16, 185, 129, 0.12);
    color: #34D399;
}

.dark .trend-negative {
    background: rgba(220, 38, 38, 0.12);
    color: #F87171;
}

.dark .badge-recipe {
    background: rgba(6, 95, 70, 0.18);
    color: #6EE7B7;
}

.dark .badge-invoice {
    background: rgba(30, 64, 175, 0.18);
    color: #93C5FD;
}

.dark .badge-bill {
    background: rgba(154, 52, 18, 0.18);
    color: #FCA5A5;
}

.dark .aging-standard {
    background: rgba(239, 68, 68, 0.12);
    color: #FCA5A5;
}

.dark .aging-severe {
    background: #7F1D1D;
    color: #FCA5A5;
}

.dark #blazor-error-ui {
    background: #2D1515;
    color: #FCA5A5;
}

/* Mobile topbar actions */
.topbar-actions {
    display: flex;
    gap: 6px;
    margin-inline-start: auto;
}



.toggle-btn {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
}

.toggle-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════
   RTL (Arabic) SUPPORT
   ═══════════════════════════════════════════════════════════════ */

[dir="rtl"] {
    font-family: var(--font-ar);

    /* ── Arabic Type Scale (+15% over English) ─── */
    --st-text-xs:   0.8125rem;  /* 13px (was 11px) */
    --st-text-sm:   0.875rem;   /* 14px (was 12px) */
    --st-text-base: 1rem;       /* 16px (was 14px) */
    --st-text-md:   1.125rem;   /* 18px (was 16px) */
    --st-text-lg:   1.25rem;    /* 20px (was 18px) */
    --st-text-xl:   1.375rem;   /* 22px (was 20px) */
    --st-text-2xl:  1.75rem;    /* 28px (was 24px) */
    --st-text-3xl:  2.25rem;    /* 36px (was 32px) */

    /* ── Arabic Font Weights ─────────────────────── */
    --st-weight-label:  600;    /* Arabic labels need more stroke */
    --st-weight-value:  700;    /* Arabic values must dominate labels */
    --st-weight-heavy:  700;    /* IBM Plex Sans Arabic max is 700 */

    /* ── Arabic Line Heights ─────────────────────── */
    --st-leading-tight:   1.4;  /* room for hamza, connecting strokes */
    --st-leading-normal:  1.7;  /* diacritical marks need vertical clearance */
    --st-leading-relaxed: 1.9;  /* prevent dot/vowel mark collision */
}

/* Arabic headings — reset negative letter-spacing (destroys Arabic glyphs) */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .mud-typography-h1, [dir="rtl"] .mud-typography-h2,
[dir="rtl"] .mud-typography-h3, [dir="rtl"] .mud-typography-h4,
[dir="rtl"] .mud-typography-h5, [dir="rtl"] .mud-typography-h6 {
    font-family: var(--font-ar);
    letter-spacing: 0;
}













@media (max-width: 1024px) {}

/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM UTILITY CLASSES
   Token-based helpers for consistent typography across all pages
   ═══════════════════════════════════════════════════════════════ */

/* Field label — always secondary, always smaller than its value */
.st-label {
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-label);
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: var(--st-leading-relaxed);
    display: block;
}

[dir="rtl"] .st-label {
    letter-spacing: 0.01em;
    text-transform: none; /* Arabic has no case transformation */
}

/* Field value — the data itself */
.st-value {
    font-size: var(--st-text-base);
    font-weight: var(--st-weight-value);
    color: var(--clr-text);
    line-height: var(--st-leading-normal);
}

/* Financial value — monospace numeric, always LTR */
.st-value-financial {
    font-family: var(--font-mono);
    font-size: var(--st-text-base);
    font-weight: var(--st-weight-value);
    color: var(--clr-text);
    direction: ltr;
    display: inline-block;
}

/* KPI value — large emphasis number */
.st-value-kpi {
    font-family: var(--font-mono);
    font-size: var(--st-text-3xl);
    font-weight: var(--st-weight-heavy);
    color: var(--clr-primary);
    line-height: var(--st-leading-tight);
    direction: ltr;
    display: inline-block;
}

/* LTR wrapper — for numbers, codes, dates inside RTL context */
.st-ltr {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Numeric table cell — right-aligned only (safe for RTL headers & DataLabel) */
.st-numeric {
    text-align: right;
}

/* Inline numeric value — forces LTR for digit strings mixed with symbols */
.st-ltr-value {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Text-start alignment — flips with document direction */
.st-text-start {
    text-align: start;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE B — SURFACE HIERARCHY
   3-level system: page canvas → structural surfaces → KPI cards
   All tokens use CSS variables — dark mode works automatically.
   ═══════════════════════════════════════════════════════════════ */

/* ── Level 3: KPI / metric cards — highest emphasis ────────── */
.st-kpi-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-top: 2px solid var(--clr-primary);
    transition: box-shadow var(--duration-normal) var(--ease-out-spring),
                transform var(--duration-normal) var(--ease-out-spring);
}
.st-kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.dark .st-kpi-card {
    border-top-color: var(--clr-primary-light);
}

/* ── Level 2: Filter / search control surface ───────────────── */
.st-filter-bar {
    background: var(--clr-surface-alt);
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    margin-block-end: var(--st-rhythm-normal);
}
.dark .st-filter-bar {
    background: var(--clr-surface-alt);
    border-color: var(--clr-border);
}

/* ── Level 2: Structural section containers ─────────────────── */
.st-section {
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    margin-block-end: var(--st-rhythm-section);
}
.st-section:last-child {
    margin-block-end: 0;
}
.dark .st-section {
    border-color: var(--clr-border);
}

/* ── Table containers — clip border-radius on inner table ───── */
.st-table-wrap {
    border: 1px solid var(--clr-border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.dark .st-table-wrap {
    border-color: var(--clr-border);
}

/* ── Page-level vertical rhythm (lobotomized owl) ──────────── */
.st-page-flow > * + * {
    margin-block-start: var(--st-rhythm-normal);
}
.st-page-flow > .st-section + .st-section {
    margin-block-start: var(--st-rhythm-section);
}

/* ── KPI value typography ────────────────────────────────────── */
.st-kpi-value {
    font-family: var(--font-mono);
    font-size: var(--st-text-2xl);
    font-weight: var(--st-weight-heavy);
    line-height: var(--st-leading-tight);
    color: var(--clr-text);
    direction: ltr;
    display: inline-block;
}

/* ── KPI label typography ────────────────────────────────────── */
.st-kpi-label {
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-label);
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-block-start: var(--st-space-2);
    display: block;
}
[dir="rtl"] .st-kpi-label {
    letter-spacing: 0.01em;
    text-transform: none;
}

/* ── Mobile: reduce KPI border, loosen padding ──────────────── */
@media (max-width: 1024px) {
    .st-kpi-card { border-top-width: 2px; }
}
@media (max-width: 480px) {
    .st-kpi-card { padding: 12px 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE C — KPI INTELLIGENCE
   Interactive KPI cards, insight banners, upgraded empty states.
   All tokens use CSS variables — dark mode works automatically.
   ═══════════════════════════════════════════════════════════════ */

/* Clickable KPI card variant */
.st-kpi-clickable {
    cursor: pointer;
    user-select: none;
}
.st-kpi-clickable:active {
    transform: translateY(0) scale(0.97);
    box-shadow: var(--shadow-sm);
    transition: transform 80ms ease, box-shadow 80ms ease;
}
.st-kpi-clickable:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
}

/* Contextual insight banners (inline-start border = RTL-safe) */
.st-insight-banner {
    border-inline-start: 3px solid var(--mud-palette-info);
}
.st-insight-banner.st-insight-warning { border-inline-start-color: var(--mud-palette-warning); }
.st-insight-banner.st-insight-success { border-inline-start-color: var(--mud-palette-success); }

/* Upgraded empty states */
.st-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 32px;
    gap: 16px;
    border: 1.5px dashed var(--clr-border);
    border-radius: var(--radius-lg);
    background: var(--clr-surface-alt);
    animation: fadeSlideIn var(--duration-enter) var(--ease-out-spring);
}
.st-empty-state .mud-icon-root {
    font-size: 2rem;
    color: var(--clr-text-muted);
    opacity: 0.7;
}
.dark .st-empty-state {
    border-color: var(--clr-border);
    background: var(--clr-surface);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE D — INTELLIGENCE VISUALIZATION
   Table highlighting, KPI sub-indicators, medal badges.
   Row tints use hardcoded rgba — work on all backgrounds/dark mode.
   ═══════════════════════════════════════════════════════════════ */

/* KPI distribution sub-indicator */
.st-kpi-sub {
    font-size: var(--st-text-xs);
    font-weight: var(--st-weight-regular);
    line-height: var(--st-leading-relaxed);
    color: var(--clr-text-secondary);
    margin-block-start: 2px;
}

/* ── Bulk Action Bar ──────────────────────────────── */
.st-bulk-action-bar {
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 50;
    border-radius: 4px 4px 0 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}

/* Medal badges for leaderboard top 3 */
.st-medal { font-size: 1.1rem; margin-inline-end: 4px; }

/* ═══════════════════════════════════════════════════════════════
   UI/UX ENHANCEMENTS — Animations, Transitions, Polish
   ═══════════════════════════════════════════════════════════════ */

/* ── Page Enter Animation ──────────────────────────── */

.page-container {
    animation: pageEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Staggered Card Animations ─────────────────────── */

.stat-card {
    animation: cardSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.stat-card:nth-child(1) {
    animation-delay: 0.05s;
}

.stat-card:nth-child(2) {
    animation-delay: 0.1s;
}

.stat-card:nth-child(3) {
    animation-delay: 0.15s;
}

.stat-card:nth-child(4) {
    animation-delay: 0.2s;
}

@keyframes cardSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Entry Cards Stagger ───────────────────────────── */

.entry-card {
    animation: cardSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.entry-card:nth-child(1) {
    animation-delay: 0.03s;
}

.entry-card:nth-child(2) {
    animation-delay: 0.06s;
}

.entry-card:nth-child(3) {
    animation-delay: 0.09s;
}

.entry-card:nth-child(4) {
    animation-delay: 0.12s;
}

.entry-card:nth-child(5) {
    animation-delay: 0.15s;
}

.entry-card:nth-child(n+6) {
    animation-delay: 0.18s;
}

/* ── Enhanced Stat Cards ───────────────────────────── */

.stat-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-primary), var(--clr-accent));
    opacity: 0;
    transition: opacity 0.3s;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.stat-card:hover::before {
    opacity: 1;
}

/* ── Stat Icon Pulse on Hover ──────────────────────── */

.stat-card:hover .stat-icon {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Enhanced Upload Area ──────────────────────────── */

.upload-area {
    border: 2px dashed var(--clr-border);
    border-radius: var(--radius-xl);
    padding: 48px 24px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    background: var(--clr-surface);
    position: relative;
    overflow: hidden;
    animation: cardSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.upload-area .upload-options {
    cursor: default;
}

.upload-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(27, 67, 50, 0.04), transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    /* allow clicks to reach the three option buttons */
}

.upload-area:hover,
.upload-area.dragging {
    border-color: var(--clr-primary);
    background: rgba(27, 67, 50, 0.02);
    transform: scale(1.005);
}

.upload-area:hover::before,
.upload-area.dragging::before {
    opacity: 1;
}

.upload-label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.upload-icon {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
    margin-bottom: 8px;
    transition: transform 0.3s;
    box-shadow: 0 8px 24px rgba(27, 67, 50, 0.25);
}

.upload-area:hover .upload-icon {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 12px 32px rgba(27, 67, 50, 0.3);
}

.upload-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-preview img {
    max-height: 280px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border-light);
    box-shadow: var(--shadow-md);
    animation: fadeScale 0.4s ease;
}

@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Enhanced Card Hover Effects ───────────────────── */

.card {
    transition: box-shadow 0.3s, transform 0.3s;
    animation: cardSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.1s;
}

/* ── Button Micro-interactions ─────────────────────── */

.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.3s;
}

.btn:hover::after {
    transform: translateX(0);
}

.btn-primary:active {
    transform: scale(0.97);
}

/* ── Scan Type Button Animation ────────────────────── */

.scan-type-selector {
    animation: cardSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: 0.05s;
}

.scan-type-btn {
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.scan-type-btn:hover {
    transform: translateY(-2px);
}

.scan-type-btn.active {
    box-shadow: 0 4px 16px rgba(27, 67, 50, 0.3);
}

/* ── Chart Bar Animation ───────────────────────────── */

.card-body div[style*="flex:1"]>div[style*="background:var(--clr-primary)"] {
    animation: barGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@keyframes barGrow {
    from {
        transform: scaleY(0);
        transform-origin: bottom;
    }

    to {
        transform: scaleY(1);
        transform-origin: bottom;
    }
}

/* ── Smooth Nav Link Transitions ───────────────────── */

.nav-link {
    position: relative;
    overflow: hidden;
}

.nav-link::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--clr-accent);
    border-radius: 0 2px 2px 0;
    transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-link.active::before {
    height: 60%;
}



/* ── Page Header Enhancement ───────────────────────── */

.page-header {
    animation: pageEnter 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-header h2 {
    position: relative;
    display: inline-block;
}

/* ── Processing Spinner Enhancement ────────────────── */

.processing-overlay {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.spinner {
    background: conic-gradient(from 0deg, transparent, var(--clr-primary));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
    border: none;
}

/* ── Toast Animation Enhancement ───────────────────── */

.toast {
    animation: toastSlide 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    backdrop-filter: blur(12px);
}

@keyframes toastSlide {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* ── Export Options Animation ──────────────────────── */

.export-option {
    animation: cardSlideUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.export-option:nth-child(1) {
    animation-delay: 0.1s;
}

.export-option:nth-child(2) {
    animation-delay: 0.2s;
}

.export-option:hover {
    transform: translateY(-4px);
}

/* ── Check Items Stagger ───────────────────────────── */

.check-item {
    animation: cardSlideUp 0.3s ease backwards;
}

.check-item:nth-child(1) {
    animation-delay: 0.02s;
}

.check-item:nth-child(2) {
    animation-delay: 0.04s;
}

.check-item:nth-child(3) {
    animation-delay: 0.06s;
}

.check-item:nth-child(4) {
    animation-delay: 0.08s;
}

.check-item:nth-child(5) {
    animation-delay: 0.1s;
}

/* ── Tab Button Enhancement ────────────────────────── */

.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    padding: 4px;
    background: var(--clr-surface-alt);
    border-radius: var(--radius-md);
    animation: cardSlideUp 0.4s ease backwards;
    animation-delay: 0.05s;
}

.tab {
    flex: 1;
    padding: 10px 16px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--clr-text-secondary);
    transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.tab.active {
    background: var(--clr-surface);
    color: var(--clr-primary);
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

/* ── Detail View Enhancement ───────────────────────── */

.detail-grid {
    animation: cardSlideUp 0.4s ease backwards;
    animation-delay: 0.1s;
}

.detail-field {
    transition: background 0.2s;
    border-radius: var(--radius-sm);
    padding: 12px 8px;
}

.detail-field:hover {
    background: var(--clr-surface-alt);
}

/* ── Badge Enhancement ─────────────────────────────── */

.badge {
    transition: transform 0.2s;
}

.badge:hover {
    transform: scale(1.05);
}

/* ── Scrollbar Styling ─────────────────────────────── */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--clr-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clr-text-muted);
}

/* ── Focus visible for accessibility ───────────────── */

:focus-visible {
    outline: 2px solid var(--clr-primary);
    outline-offset: 2px;
}

/* ── Selection color ───────────────────────────────── */

::selection {
    background: rgba(27, 67, 50, 0.15);
    color: var(--clr-text);
}

/* ── Dark mode stat icon colors ────────────────────── */

.dark .stat-icon.green {
    background: rgba(6, 95, 70, 0.2);
    color: #6EE7B7;
}

.dark .stat-icon.amber {
    background: rgba(154, 52, 18, 0.2);
    color: #FCD34D;
}

.dark .stat-icon.blue {
    background: rgba(30, 64, 175, 0.2);
    color: #93C5FD;
}

.dark .stat-icon.purple {
    background: rgba(91, 33, 182, 0.2);
    color: #C4B5FD;
}

.dark .entry-type-badge.recipe {
    background: rgba(6, 95, 70, 0.2);
    color: #6EE7B7;
}

.dark .entry-type-badge.invoice {
    background: rgba(30, 64, 175, 0.2);
    color: #93C5FD;
}

.dark .entry-type-badge.bill {
    background: rgba(154, 52, 18, 0.2);
    color: #FCD34D;
}

.dark .auth-error {
    background: rgba(192, 57, 43, 0.15);
}

.dark .upload-area {
    background: var(--clr-surface);
    border-color: var(--clr-border);
}

.dark .tab.active {
    background: var(--clr-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* ── Button press feedback ─────────────────────────── */
.mud-button-root {
    transition: transform var(--duration-quick) var(--ease-out-soft);
}
.mud-button-root:active {
    transform: scale(0.98);
}

/* ── Alert / banner entrance ──────────────────────── */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mud-alert,
.st-insight-banner {
    animation: fadeSlideIn var(--duration-normal) var(--ease-out-spring);
}

/* ── Dropdown / popover entrance ──────────────────── */
@keyframes popoverEnter {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1); }
}
.mud-popover-open {
    animation: popoverEnter var(--duration-quick) var(--ease-out-spring);
}

/* ── Reduced Motion ────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01s !important;
        transition-duration: 0.01s !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   INVOICE PHOTO & LIGHTBOX
   ═══════════════════════════════════════════════════════════════ */

.invoice-photo {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    border: 1px solid var(--clr-border-light);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.invoice-photo:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-lg);
}

.photo-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    animation: fadeIn 0.2s;
}

.photo-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: 8px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — MINI STAT CARDS
   ═══════════════════════════════════════════════════════════════ */

.stat-card-mini {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px !important;
}

.stat-card-mini .stat-label {
    margin-top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — CHART TABS
   ═══════════════════════════════════════════════════════════════ */

.chart-tabs {
    display: flex;
    gap: 4px;
    background: var(--clr-surface-alt);
    border-radius: var(--radius-md);
    padding: 3px;
}

.chart-tab {
    padding: 5px 14px;
    border: none;
    background: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.chart-tab:hover {
    color: var(--clr-text);
}

.chart-tab.active {
    background: var(--clr-surface);
    color: var(--clr-primary);
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — BAR CHART
   ═══════════════════════════════════════════════════════════════ */

.chart-container {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 200px;
    padding-top: 12px;
}

.chart-bar-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.chart-bar-value {
    font-size: 0.625rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.chart-bar-wrapper {
    width: 100%;
    max-width: 48px;
    height: 140px;
    display: flex;
    align-items: flex-end;
}

.chart-bar {
    width: 100%;
    background: linear-gradient(180deg, var(--clr-primary-light) 0%, var(--clr-primary) 100%);
    border-radius: 6px 6px 0 0;
    min-height: 4px;
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.chart-bar-label {
    font-size: 0.625rem;
    color: var(--clr-text-muted);
    white-space: nowrap;
}

.chart-bar-count {
    font-size: 0.5625rem;
    color: var(--clr-text-muted);
    background: var(--clr-surface-alt);
    padding: 1px 5px;
    border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD — TOP VENDORS & CATEGORIES
   ═══════════════════════════════════════════════════════════════ */

.top-item {
    padding: 8px 0;
    border-bottom: 1px solid var(--clr-border-light);
}

.top-item:last-child {
    border-bottom: none;
}

.top-item-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.top-item-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.top-item-count {
    font-size: 0.6875rem;
    color: var(--clr-text-muted);
}

.top-item-bar {
    height: 6px;
    background: var(--clr-surface-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.top-item-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-primary-light) 100%);
    border-radius: 3px;
    min-width: 4px;
    transition: width 0.5s ease;
}

.top-item-bar-fill.cat {
    background: linear-gradient(90deg, var(--clr-accent) 0%, var(--clr-accent-warm) 100%);
}

.top-item-amount {
    font-size: 0.75rem;
    color: var(--clr-text-secondary);
    text-align: end;
}

@media (max-width: 768px) {
    .chart-container {
        height: 160px;
    }

    .chart-bar-wrapper {
        height: 100px;
    }

    div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   UNIT MANAGEMENT LIST
   ═══════════════════════════════════════════════════════════════ */

.unit-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--clr-border-light);
    transition: background 0.15s;
}

.unit-list-item:last-child {
    border-bottom: none;
}

.unit-list-item:hover {
    background: var(--clr-surface-alt);
}

.unit-list-value {
    min-width: 80px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-primary);
    background: rgba(27, 67, 50, 0.06);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
}

.unit-list-labels {
    flex: 1;
    display: flex;
    gap: 6px;
    font-size: 0.875rem;
    color: var(--clr-text);
}

.unit-list-labels .text-muted {
    color: var(--clr-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH BAR
   ═══════════════════════════════════════════════════════════════ */

.search-bar {
    position: relative;
}

.search-icon {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--clr-text-muted);
    font-size: 1rem;
}

.search-input {
    padding-inline-start: 36px !important;
    padding-inline-end: 36px !important;
}

/* ═══════════════════════════════════════════════════════════════
   PRICE CHANGE INDICATOR
   ═══════════════════════════════════════════════════════════════ */

.price-change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    margin-top: 2px;
    width: fit-content;
}

.price-change.up {
    color: #DC2626;
    background: #FEE2E2;
}

.price-change.down {
    color: #059669;
    background: #D1FAE5;
}

.price-change i {
    font-size: 0.5625rem;
}

/* ═══════════════════════════════════════════════════════════════
   ROLE BADGE
   ═══════════════════════════════════════════════════════════════ */

.role-badge {
    display: inline-block;
    font-size: 0.5625rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    vertical-align: middle;
    margin-inline-start: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.role-badge.admin {
    background: #D1FAE5;
    color: #065F46;
}

.role-badge.entry {
    background: #DBEAFE;
    color: #1E40AF;
}

/* ═══════════════════════════════════════════════════════════════
   VENDOR MANAGEMENT
   ═══════════════════════════════════════════════════════════════ */

.vendor-card {
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.vendor-card:hover {
    box-shadow: var(--shadow-md);
}

.vendor-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--clr-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.vendor-stat {
    display: flex;
    flex-direction: column;
}

.vendor-stat-label {
    font-size: 0.625rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.vendor-stat-value {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-text);
}

/* ═══════════════════════════════════════════════════════════════
   REORDER ALERTS
   ═══════════════════════════════════════════════════════════════ */

.reorder-item {
    display: flex;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--clr-border);
    transition: background 0.15s;
}

.reorder-item:last-child {
    border-bottom: none;
}

.reorder-item:hover {
    background: var(--clr-surface-alt);
}

.reorder-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.reorder-item.overdue .reorder-icon {
    background: #FEE2E2;
    color: #DC2626;
}

.reorder-item.due-soon .reorder-icon {
    background: #FEF3C7;
    color: #D97706;
}

.reorder-info {
    flex: 1;
    min-width: 0;
}

.reorder-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.reorder-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    margin-top: 2px;
}

.reorder-detail {
    display: flex;
    gap: 12px;
    font-size: 0.6875rem;
    color: var(--clr-text-muted);
    margin-top: 4px;
}

.reorder-detail i {
    margin-inline-end: 2px;
}

.reorder-badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    text-transform: uppercase;
}

.reorder-badge.overdue {
    background: #FEE2E2;
    color: #DC2626;
}

.reorder-badge.due {
    background: #FEF3C7;
    color: #D97706;
}

/* ═══════════════════════════════════════════════════════════════
   SHARE BUTTONS (WhatsApp / Telegram)
   ═══════════════════════════════════════════════════════════════ */

.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--radius-lg);
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.share-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.share-btn:active {
    transform: translateY(0);
}

.share-btn.whatsapp {
    background: #25D366;
    color: white;
}

.share-btn.whatsapp:hover {
    background: #22c55e;
}

.share-btn.telegram {
    background: #0088cc;
    color: white;
}

.share-btn.telegram:hover {
    background: #0077b5;
}

.share-btn.copy {
    background: var(--clr-surface-alt);
    color: var(--clr-text);
    border: 1px solid var(--clr-border);
}

.share-btn.copy:hover {
    background: var(--clr-border);
}

.share-btn i {
    font-size: 1.125rem;
}

/* ═══════════════════════════════════════════════════════════════
   IMAGE EDITOR (Scan page)
   ═══════════════════════════════════════════════════════════════ */

.editor-container {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--clr-border);
    overflow: hidden;
}

.editor-canvas-wrap {
    position: relative;
    background: #111;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    max-height: 500px;
    overflow: hidden;
    padding: 16px;
}

.editor-image {
    max-width: 100%;
    max-height: 460px;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 4px;
}

/* Filter classes applied via CSS for real-time preview */
.filter-original {
    filter: none;
}

.filter-auto {
    filter: contrast(1.6) brightness(1.1) saturate(1.1);
}

.filter-docs {
    filter: grayscale(1) contrast(3) brightness(1.2);
}

.filter-noshadow {
    filter: brightness(1.4) contrast(1.4);
}

.filter-bw {
    filter: grayscale(1) contrast(5);
}

.editor-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--clr-border);
}

.editor-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--clr-surface);
    cursor: pointer;
    color: var(--clr-text);
    font-size: 0.75rem;
    transition: background 0.15s;
}

.editor-btn i {
    font-size: 1.25rem;
}

.editor-btn:hover {
    background: var(--clr-surface-alt);
}

.editor-btn:active {
    background: var(--clr-border);
}

.editor-filters {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    overflow-x: auto;
    border-bottom: 1px solid var(--clr-border);
    -webkit-overflow-scrolling: touch;
}

.editor-filter-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: none;
    cursor: pointer;
    min-width: 64px;
    flex-shrink: 0;
    transition: border-color 0.15s;
}

.editor-filter-btn.active {
    border-color: var(--clr-primary);
}

.editor-filter-btn span {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
}

.editor-filter-btn.active span {
    color: var(--clr-primary);
}

.editor-filter-preview {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #f0f0f0;
}

.editor-filter-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editor-actions {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    gap: 12px;
}

.editor-actions .btn {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   PDF PAGE NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.pdf-page-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 16px;
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-border);
}

.pdf-page-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--clr-text);
}

.pdf-page-nav .editor-btn {
    padding: 6px 12px;
    flex-direction: row;
}

.pdf-page-nav .editor-btn i {
    font-size: 1rem;
}

/* ═══════════════════════════════════════════════════════════════
   PAYMENT BADGES
   ═══════════════════════════════════════════════════════════════ */

.payment-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-full);
}

/* Method badges */
.payment-badge.method-cash {
    background: #D1FAE5;
    color: #065F46;
}

.payment-badge.method-mada {
    background: #DBEAFE;
    color: #1E40AF;
}

.payment-badge.method-banktransfer {
    background: #E0E7FF;
    color: #3730A3;
}

.payment-badge.method-credit {
    background: #FEF3C7;
    color: #92400E;
}

.payment-badge.method-creditcard {
    background: #F3E8FF;
    color: #6B21A8;
}

/* Status badges */
.payment-badge.status-paid {
    background: #D1FAE5;
    color: #065F46;
}

.payment-badge.status-unpaid {
    background: #FEE2E2;
    color: #DC2626;
}

.payment-badge.status-partial {
    background: #FEF3C7;
    color: #D97706;
}

/* Small badge for entries list */
.payment-badge-sm {
    display: inline-block;
    font-size: 0.6875rem;
    padding: 0 2px;
    vertical-align: middle;
}

.text-error {
    color: #DC2626 !important;
}

/* ═══════════════════════════════════════════════════════════════
   CROPPER.JS OVERRIDES
   ═══════════════════════════════════════════════════════════════ */

.editor-btn.active {
    background: var(--clr-primary);
    color: white;
    border-color: var(--clr-primary);
}

.editor-canvas-wrap img.cropper-hidden {
    display: block !important;
}

/* Make cropper container fill the area */
.editor-canvas-wrap .cropper-container {
    max-height: 460px !important;
}

/* Style crop handles */
.cropper-point {
    background-color: var(--clr-primary) !important;
}

.cropper-line {
    background-color: var(--clr-primary) !important;
}

.cropper-view-box {
    outline: 2px solid var(--clr-primary) !important;
    outline-color: rgba(27, 67, 50, 0.75) !important;
}

/* Blue auto-crop box in scanner / manual entry (document scan style) */
.scanner-crop-area .cropper-point,
.manual-entry-editor .cropper-point {
    background-color: #2563eb !important;
}

.scanner-crop-area .cropper-line,
.manual-entry-editor .cropper-line {
    background-color: #2563eb !important;
}

.scanner-crop-area .cropper-view-box,
.manual-entry-editor .cropper-view-box {
    outline: 2px solid #2563eb !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ANYSCANNER-STYLE SCANNER UI
   ═══════════════════════════════════════════════════════════════ */

.scanner-screen {
    display: flex;
    flex-direction: column;
    background: #111;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 500px;
}

/* ── Crop Area ──────────────────────────── */
.scanner-crop-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 380px;
    max-height: 520px;
    overflow: hidden;
    background: #1a1a1a;
}

.scanner-crop-image {
    max-width: 100%;
    max-height: 500px;
    display: block;
}

/* ── Filter Preview Area ────────────────── */
.scanner-preview-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 350px;
    max-height: 480px;
    background: #1a1a1a;
}

.scanner-preview-image {
    max-width: 100%;
    max-height: 460px;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ── Filter Strip (AnyScanner style) ─────── */
.scanner-filter-strip {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    overflow-x: auto;
    background: #222;
    -webkit-overflow-scrolling: touch;
}

.scanner-filter-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    min-width: 68px;
    flex-shrink: 0;
}

.scanner-filter-thumb.active {
    border-color: var(--clr-primary);
}

.scanner-filter-thumb span {
    font-size: 0.625rem;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
}

.scanner-filter-thumb.active span {
    color: var(--clr-primary);
}

.scanner-filter-img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    overflow: hidden;
    background: #333;
}

.scanner-filter-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Bottom Bar ──────────────────────────── */
.scanner-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #1a1a1a;
    border-top: 1px solid #333;
    gap: 8px;
}

.scanner-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    border: none;
    background: none;
    color: #ccc;
    font-size: 0.6875rem;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s;
}

.scanner-action-btn i {
    font-size: 1.25rem;
}

.scanner-action-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.scanner-action-btn:active {
    background: rgba(255, 255, 255, 0.15);
}

.scanner-next-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border: none;
    border-radius: var(--radius-full);
    background: #2563EB;
    color: white;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}

.scanner-next-btn:hover {
    background: #1D4ED8;
}

.scanner-next-btn.done {
    background: var(--clr-primary);
}

.scanner-next-btn.done:hover {
    background: #143D28;
}

/* ── Multi-page strip ─────────────────────── */
.pages-strip {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    background: #222;
    border-bottom: 1px solid #333;
    -webkit-overflow-scrolling: touch;
}

.page-thumb {
    position: relative;
    width: 44px;
    height: 56px;
    border: 2px solid #555;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-thumb.active {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 1px var(--clr-primary);
}

.page-thumb span {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.page-thumb-remove {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #DC2626;
    color: white;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    border: none;
    cursor: pointer;
    display: none;
}

.page-thumb:hover .page-thumb-remove {
    display: block;
}

.page-thumb.add-page {
    border-style: dashed;
    border-color: #666;
    color: #888;
}

.page-thumb.add-page i {
    font-size: 1.125rem;
    color: #888;
}

/* ═══════════════════════════════════════════════════════════════
   AI CHAT FLOATING PANEL
   ═══════════════════════════════════════════════════════════════ */

.ai-chat-fab {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary), #2563EB);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    z-index: 1000;
    transition: transform 0.2s, background 0.2s, bottom 0.3s;
    border: none;
}

.ai-chat-fab:hover {
    transform: scale(1.08);
}

@media (max-width: 768px) {
    .ai-chat-fab {
        bottom: calc(70px + env(safe-area-inset-bottom, 0px));
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }
}

.ai-chat-fab.open {
    background: #666;
    width: 36px;
    height: 36px;
    font-size: 1rem;
    bottom: 480px;
}

.ai-chat-panel {
    position: fixed;
    bottom: 20px;
    inset-inline-end: 20px;
    width: 380px;
    height: 460px;
    background: var(--clr-bg);
    border: 1px solid var(--clr-border);
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (max-width: 480px) {
    .ai-chat-panel {
        width: calc(100vw - 16px);
        inset-inline-end: 8px;
        bottom: 8px;
        height: calc(100vh - 80px);
        border-radius: 12px;
    }

    .ai-chat-fab.open {
        bottom: calc(100vh - 68px);
        inset-inline-end: 12px;
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* Header */
.ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--clr-primary), #1a5c3a);
    color: white;
}

.ai-chat-header-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ai-chat-header-info .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.ai-chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.ai-chat-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    cursor: pointer;
    padding: 4px;
}

.ai-chat-close:hover {
    color: white;
}

/* Messages area */
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-chat-welcome {
    text-align: center;
    padding: 20px 10px;
}

.ai-chat-avatar-lg {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-primary), #2563EB);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto;
}

.ai-chat-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.ai-suggest-btn {
    padding: 8px 14px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--clr-surface);
    color: var(--clr-text);
    font-size: 0.8125rem;
    cursor: pointer;
    text-align: start;
    transition: background 0.15s, border-color 0.15s;
}

.ai-suggest-btn:hover {
    background: var(--clr-primary);
    color: white;
    border-color: var(--clr-primary);
}

/* Message bubbles */
.ai-chat-msg {
    display: flex;
    gap: 8px;
    max-width: 90%;
}

.ai-chat-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-chat-msg.bot {
    align-self: flex-start;
}

.ai-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--clr-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.ai-msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-word;
}

.ai-chat-msg.user .ai-msg-bubble {
    background: var(--clr-primary);
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-chat-msg.bot .ai-msg-bubble {
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-bottom-left-radius: 4px;
}

/* Typing animation */
.ai-typing {
    display: flex;
    gap: 4px;
    padding: 4px 0;
}

.ai-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--clr-text-muted);
    animation: ai-bounce 1.4s infinite;
}

.ai-typing span:nth-child(2) {
    animation-delay: 0.2s;
}

.ai-typing span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes ai-bounce {

    0%,
    80%,
    100% {
        transform: scale(0.6);
        opacity: 0.4;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Input bar */
.ai-chat-input-bar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--clr-border);
    background: var(--clr-bg);
}

.ai-chat-input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-full);
    background: var(--clr-surface);
    color: var(--clr-text);
    font-size: 0.8125rem;
    outline: none;
}

.ai-chat-input:focus {
    border-color: var(--clr-primary);
}

.ai-chat-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--clr-primary);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.15s;
}

.ai-chat-send:hover {
    background: #143D28;
}

.ai-chat-send:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Role badges */
.role-badge.accountant {
    background: #DBEAFE;
    color: #1E40AF;
}

.role-badge.viewer {
    background: #F3F4F6;
    color: #6B7280;
}

/* ═══════════════════════════════════════════════════════════════
   BUSINESS PROFILE PREVIEW
   ═══════════════════════════════════════════════════════════════ */
.biz-preview {
    border: 2px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
    background: var(--clr-surface);
}

.biz-preview-name {
    margin-bottom: 12px;
}

.biz-preview-details {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    justify-content: center;
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
}

.biz-label {
    font-weight: 600;
    color: var(--clr-text);
}

.text-xs {
    font-size: 0.6875rem;
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH & INSIGHTS
   ═══════════════════════════════════════════════════════════════ */
.insight-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--clr-border);
    cursor: pointer;
    transition: background 0.15s;
}

.insight-row:hover {
    background: rgba(0, 0, 0, 0.02);
}

.dark .insight-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.insight-row:last-child {
    border-bottom: none;
}

.insight-name {
    font-weight: 600;
    font-size: 0.875rem;
}

.insight-meta {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    margin-top: 2px;
}

.ai-search-reply {
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(27, 67, 50, 0.04);
    border: 1px solid rgba(27, 67, 50, 0.12);
    border-radius: var(--radius-md);
}

.dark .ai-search-reply {
    background: rgba(74, 222, 128, 0.06);
    border-color: rgba(74, 222, 128, 0.15);
}

/* ── Dashboard responsive grid ── */
.dashboard-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 768px) {
    .dashboard-two-col {
        grid-template-columns: 1fr;
    }
}

/* ── Vendor Type Badges ── */
.badge-major {
    background: #FDE68A;
    color: #92400E;
    font-size: 0.6875rem;
}

.badge-daily {
    background: #DBEAFE;
    color: #1E40AF;
    font-size: 0.6875rem;
}

.badge-onetime {
    background: #E5E7EB;
    color: #374151;
    font-size: 0.6875rem;
}

/* ═══ Credit Page ═══ */
.credit-overdue {
    background: rgba(220, 38, 38, 0.03) !important;
    border-inline-start: 3px solid #DC2626;
}

.dark .credit-overdue {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING — FIRST TIME USER
   ═══════════════════════════════════════════════════════════════ */
.onboarding-container {
    max-width: 480px;
    margin: 40px auto;
    padding: 0 16px;
    text-align: center;
}

.onboarding-hero {
    margin-bottom: 32px;
}

.onboarding-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--clr-primary), #2D6A4F);
    color: white;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin: 0 auto 20px;
    box-shadow: 0 8px 32px rgba(27, 67, 50, 0.2);
}

.onboarding-hero h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.onboarding-hero p {
    font-size: 1rem;
    color: var(--clr-text-muted);
    margin: 0;
}

.onboarding-steps {
    text-align: start;
}

.onboarding-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--clr-border);
}

.onboarding-step:last-child {
    border-bottom: none;
}

.onboarding-step-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--clr-primary);
    color: white;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-step-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.onboarding-step-desc {
    font-size: 0.8125rem;
    color: var(--clr-text-muted);
    margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   QUICK ACTIONS BAR
   ═══════════════════════════════════════════════════════════════ */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--clr-text);
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 0.15s;
}

.quick-action-btn i {
    font-size: 1.5rem;
}

.quick-action-btn:hover {
    border-color: var(--clr-primary);
    color: var(--clr-primary);
}

.quick-action-btn.primary {
    background: var(--clr-primary);
    color: white;
    border-color: var(--clr-primary);
}

.quick-action-btn.primary:hover {
    opacity: 0.9;
    color: white;
}

.quick-action-btn.danger {
    border-color: #DC2626;
    color: #DC2626;
}

.quick-action-btn.danger i {
    color: #DC2626;
}

@media (max-width: 480px) {
    .quick-actions {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .quick-action-btn {
        padding: 10px 4px;
    }

    .quick-action-btn i {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   UPLOAD OPTIONS (WhatsApp-style 3-option picker)
   Each option is one clickable row; hover applies per row only.
   ═══════════════════════════════════════════════════════════════ */
.upload-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: var(--radius-lg);
    position: relative;
    z-index: 1;
}

/* Keep the native file input accessible but off-screen; the label opens it reliably. */
.upload-option-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.upload-option-wrap {
    display: block;
    position: relative;
    border-radius: var(--radius-md);
    border: 2px solid var(--clr-border);
    background: var(--clr-surface);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.upload-option-wrap:hover {
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 2px rgba(27, 67, 50, 0.15);
    background: rgba(27, 67, 50, 0.02);
}

.upload-option-wrap:focus-within {
    border-color: var(--clr-primary);
    box-shadow: var(--shadow-focus);
}

.dark .upload-option-wrap:hover {
    background: rgba(255, 255, 255, 0.04);
}

.upload-option-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: transparent;
    cursor: pointer;
    transition: background 0.15s;
    border: none;
    width: 100%;
    text-align: start;
    color: inherit;
}

.upload-option-wrap:hover .upload-option-btn {
    background: transparent;
}

.upload-option-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.375rem;
    flex-shrink: 0;
}

.upload-option-label {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--clr-text);
}

.upload-option-desc {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    margin-top: 1px;
}

/* Manual Entry: invoice photo preview + editor */
.manual-entry-photo-preview {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.manual-entry-photo-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
}

.manual-entry-photo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.manual-entry-upload .upload-options {
    margin-top: 0;
}

.manual-entry-editor .scanner-crop-area,
.manual-entry-editor .scanner-preview-area {
    border-radius: var(--radius-md);
}

.btn-remove-photo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 8px;
    transition: transform 0.2s;
}

.btn-remove-photo:hover {
    background: #dc2626;
    transform: translateY(-2px);
}

.btn-remove-photo i {
    font-size: 18px;
}


/* Rotation container fix */
.scanner-crop-area {
    height: auto;
    max-height: 70vh;
    min-height: 300px;
    transition: height 0.3s ease;
}

.scanner-crop-area.rotated {
    height: auto;
    max-height: 85vh;
}

.rotation-indicator {
    position: absolute;
    bottom: 10px;
    inset-inline-end: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 10;
}

/* Auto-crop toggle */
.autocrop-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 8px 12px;
    border-radius: 8px;
}

.autocrop-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--clr-primary);
}

/* ── Auth mobile optimisation ─────────────────────── */
@media (max-width: 1024px) {
    .auth-container {
        padding: 0;
        align-items: flex-start;
        background: var(--clr-surface);
    }

    .auth-card {
        max-width: 100%;
        min-height: 100vh;
        padding: 32px 20px;
    }

    .auth-card .card {
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .auth-card .card-body {
        padding: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   DONUT CHART
   ═══════════════════════════════════════════════════════════════ */

.donut-chart-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

@media (min-width: 768px) {
    .donut-chart-container {
        flex-direction: row;
        justify-content: center;
        gap: 40px;
    }
}

.donut-chart {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    /* The conic-gradient will be applied inline via style */
    background: var(--clr-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05);
}

.donut-hole {
    position: absolute;
    width: 130px;
    height: 130px;
    background: var(--clr-surface);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

.donut-label {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    text-align: center;
}

.donut-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text);
    margin-top: 2px;
    direction: ltr;
    white-space: nowrap;
    text-align: center;
}

.donut-legend {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 200px;
}

.legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
}

.legend-color-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--clr-text);
    font-weight: 500;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.legend-amount {
    font-weight: 600;
    color: var(--clr-text);
}

.legend-percent {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
    min-width: 40px;
    text-align: end;
}

/* ═══════════════════════════════════════════════════════════════
   UI/UX ENHANCEMENTS - V42
   ═══════════════════════════════════════════════════════════════ */

/* ── Trend Badges ────────────────────────────────────────────── */
.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.trend-positive {
    background: #D1FAE5;
    color: #059669;
    /* Green down */
}

.trend-negative {
    background: #FEE2E2;
    color: #DC2626;
    /* Red up */
}

/* ── Interactive Chart Filtering ─────────────────────────────── */
.chart-bar-group {
    cursor: pointer;
    transition: all var(--transition);
}

.chart-bar-group:hover .chart-bar {
    filter: brightness(1.2);
}

.chart-bar-group.active-filter .chart-bar {
    box-shadow: 0 0 0 2px var(--clr-bg), 0 0 0 4px var(--clr-primary);
}

/* ── Aging Indicators ────────────────────────────────────────── */
.aging-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    margin-inline-start: 6px;
}



.aging-standard {
    background: #FEF2F2;
    color: #EF4444;
}

.aging-severe {
    background: #DC2626;
    color: white;
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════════
   TELEGRAM-STYLE SETTINGS UI
   ═══════════════════════════════════════════════════════════════ */

.tg-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 24px;
    text-align: center;
}

.tg-hero-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--clr-accent);
    color: var(--clr-primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin-block-end: 12px;
    box-shadow: var(--shadow-md);
}

.tg-hero h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-block-end: 4px;
}

.tg-hero p {
    font-size: 0.875rem;
    color: var(--clr-text-secondary);
    margin-block-end: 16px;
}

.tg-role-badges {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.tg-badge {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.tg-badge.business {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
}

.tg-badge.individual {
    background: rgba(212, 162, 118, 0.15);
    color: var(--clr-accent-warm);
}

.tg-badge.admin {
    background: rgba(217, 119, 6, 0.1);
    color: #D97706;
}

.tg-badge.accountant {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
}

.tg-badge.viewer {
    background: rgba(107, 102, 94, 0.15);
    color: var(--clr-text-secondary);
}

.dark .tg-badge.business,
.dark .tg-badge.accountant {
    color: #60A5FA;
}

.dark .tg-badge.admin {
    color: #FBBF24;
}

.dark .tg-badge.individual {
    color: var(--clr-accent-light);
}

.tg-settings-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 16px 64px;
}

.tg-settings-group {
    background: var(--clr-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-block-end: 24px;
    overflow: hidden;
    border: 1px solid var(--clr-border-light);
}

.dark .tg-settings-group {
    border-color: rgba(255, 255, 255, 0.05);
}

.tg-settings-row {
    display: flex;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--clr-border-light);
    gap: 16px;
    transition: background var(--transition);
}

.dark .tg-settings-row {
    border-bottom-color: rgba(255, 255, 255, 0.05);
}

.tg-settings-row:last-child {
    border-bottom: none;
}

/* Master data governance admin */
.master-data-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.master-data-summary-card {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background:
        linear-gradient(135deg, rgba(14, 116, 144, 0.08), rgba(245, 158, 11, 0.08)),
        #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.master-data-summary-card strong {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--clr-text);
}

.master-data-summary-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-text-muted);
}

.master-data-shell {
    display: grid;
    grid-template-columns: minmax(360px, 1.05fr) minmax(340px, 0.95fr);
    gap: 18px;
    align-items: start;
}

.master-data-list-card,
.master-data-editor-card {
    min-height: 620px;
}

.master-data-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1.8fr) repeat(2, minmax(120px, 0.8fr));
    gap: 12px;
    margin-bottom: 16px;
}

.master-data-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.master-data-row {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 16px;
    padding: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.master-data-row:hover,
.master-data-row.selected {
    border-color: rgba(14, 116, 144, 0.32);
    box-shadow: 0 14px 28px rgba(14, 116, 144, 0.09);
    transform: translateY(-1px);
}

.master-data-row-main {
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    min-width: 0;
}

.master-data-row-heading {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.master-data-row-heading strong {
    font-size: 1rem;
}

.master-data-row-meta,
.master-data-row-detail,
.master-data-note-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.master-data-row-detail,
.master-data-helper {
    color: var(--clr-text-muted);
    font-size: 0.83rem;
}

.master-data-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    align-content: start;
}

.master-data-editor-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.master-data-editor-grid .form-group:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.master-data-note-strip {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(14, 116, 144, 0.08);
}

.master-data-editor-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.master-data-usage-panel,
.master-data-merge-panel,
.master-data-attribute-panel {
    margin-top: 18px;
    padding: 14px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.92);
}

.master-data-usage-panel h4,
.master-data-merge-panel h4,
.master-data-attribute-panel h4 {
    margin: 0 0 8px 0;
    font-size: 0.95rem;
}

.master-data-usage-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

.master-data-usage-row:first-of-type {
    border-top: none;
    padding-top: 2px;
}

.master-data-merge-controls,
.master-data-attribute-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: end;
}

.master-data-attribute-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: stretch;
}

.master-data-checkbox {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.08);
}

.master-data-checkbox input {
    width: 16px;
    height: 16px;
}

.dark .master-data-summary-card,
.dark .master-data-row,
.dark .master-data-usage-panel,
.dark .master-data-merge-panel,
.dark .master-data-attribute-panel,
.dark .master-data-checkbox {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(148, 163, 184, 0.18);
    box-shadow: none;
}

@media (max-width: 1100px) {
    .master-data-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .master-data-toolbar,
    .master-data-editor-grid,
    .master-data-merge-controls {
        grid-template-columns: 1fr;
    }

    .master-data-row {
        grid-template-columns: 1fr;
    }

    .master-data-row-actions {
        justify-content: flex-start;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   ENTRY WORKSPACE SHELL  (ew-*)
   Two-column layout: left scrollable workspace + right sticky invoice viewer.
   Follows .master-data-shell pattern.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shell grid ──────────────────────────────────────────────────────── */
.ew-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--st-space-4);
    align-items: start;
    width: 100%;
}

/* Single-column mode: viewer absent or hidden */
.ew-shell--no-viewer {
    grid-template-columns: 1fr;
}

/* ── Left: workspace ─────────────────────────────────────────────────── */
.ew-workspace {
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* Single height source — constrains both scroll region + footer together so body never scrolls */
    max-height: var(--ew-workspace-max-h, 85vh);
    overflow: hidden;
}

.ew-workspace-scroll {
    /* flex: 1 fills remaining height after the footer; min-height: 0 allows flex shrink */
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-inline-end: var(--st-space-1);
    scrollbar-width: thin;
    scrollbar-color: var(--clr-border) transparent;
}

.ew-workspace-scroll::-webkit-scrollbar {
    width: 5px;
}

.ew-workspace-scroll::-webkit-scrollbar-thumb {
    background: var(--clr-border);
    border-radius: 99px;
}

.ew-workspace-footer {
    flex-shrink: 0;
    background: var(--mud-palette-surface);
    padding: 10px 0;
    border-top: 1px solid var(--mud-palette-divider);
    z-index: 10;
}

/* ── Right: invoice viewer column ────────────────────────────────────── */
.ew-viewer-column {
    position: sticky;
    top: var(--st-space-4);
}

/* ── Invoice viewer panel ────────────────────────────────────────────── */
.ew-viewer {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1.5px solid var(--clr-border);
    background: var(--clr-surface);
    box-shadow: var(--shadow-sm);
    /* Container-driven: caller sets --ew-viewer-max-h; default 85vh adapts to any chrome height */
    max-height: var(--ew-viewer-max-h, 85vh);
    display: flex;
    flex-direction: column;
}

.ew-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 8px;
    padding-inline: 12px;
    background: var(--clr-primary);
    flex-shrink: 0;
}

.ew-viewer-body {
    overflow: auto;
    flex: 1;
    background: #111;
    text-align: center;
    padding: 8px;
    min-height: 200px;
}

.ew-viewer-body img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    border-radius: var(--radius-sm);
}

/* Drag-to-pan cursor — active when image is zoomed beyond fit width */
.ew-viewer-body--zoomed {
    cursor: grab;
}
.ew-viewer-body--zoomed:active {
    cursor: grabbing;
}

/* ── Multi-page nav strip ────────────────────────────────────────────── */
.ew-viewer-pages {
    display: flex;
    gap: var(--st-space-1);
    padding: var(--st-space-1) var(--st-space-2);
    overflow-x: auto;
    background: var(--clr-surface-alt);
    border-top: 1px solid var(--clr-border);
    flex-shrink: 0;
}

.ew-viewer-page-thumb {
    width: 48px;
    height: 64px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    background: none;
    padding: 0;
    flex-shrink: 0;
}

.ew-viewer-page-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ew-viewer-page-thumb--active {
    border-color: var(--clr-primary);
}

.ew-viewer-zoom-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 3px 8px;
    background: var(--clr-surface-alt);
    border-bottom: 1px solid var(--clr-border);
    flex-shrink: 0;
}

.ew-viewer-zoom-level {
    font-size: 11px;
    font-weight: 600;
    color: var(--clr-text-secondary);
    min-width: 36px;
    text-align: center;
    user-select: none;
}

/* Hide viewer collapse toggle on desktop — collapsing has no CSS effect above 1100px */
@media (min-width: 1101px) {
    .ew-viewer-collapse-btn { display: none !important; }
}

/* ── Section panel ───────────────────────────────────────────────────── */
.ew-section-panel {
    margin-block-end: var(--st-space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.ew-section-header {
    display: flex;
    align-items: center;
    gap: var(--st-space-2);
    padding-block: 10px;
    padding-inline: var(--st-space-4);
}

.ew-section-header--clickable {
    cursor: pointer;
    user-select: none;
    transition: background-color 140ms ease;
}

.ew-section-header--clickable:hover {
    background: var(--clr-surface-alt);
}

.ew-section-header-icon {
    flex-shrink: 0;
}

.ew-section-header-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ew-section-header-title {
    font-size: var(--st-text-sm);
    font-weight: var(--st-weight-heading);
    color: var(--clr-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ew-section-header-subtitle {
    font-size: var(--st-text-xs);
    color: var(--clr-text-secondary);
}

.ew-section-header-badge {
    flex-shrink: 0;
}

.ew-section-header-actions {
    flex-shrink: 0;
}

.ew-section-chevron {
    flex-shrink: 0;
    color: var(--clr-text-muted);
    transition: transform 180ms ease;
}

.ew-section-chevron--rotated {
    transform: rotate(-90deg);
}

[dir="rtl"] .ew-section-chevron--rotated {
    transform: rotate(90deg);
}

.ew-section-body {
    padding-block: 0 var(--st-space-4);
    padding-inline: var(--st-space-4);
}

/* ── Dark mode ───────────────────────────────────────────────────────── */
.dark .ew-viewer {
    border-color: rgba(148, 163, 184, 0.18);
    background: var(--clr-surface);
}

.dark .ew-viewer-body {
    background: #0a0a0a;
}

.dark .ew-section-header--clickable:hover {
    background: rgba(148, 163, 184, 0.07);
}

.dark .ew-viewer-pages {
    background: var(--clr-surface-alt);
    border-color: var(--clr-border);
}

.dark .ew-workspace-footer {
    border-top-color: var(--clr-border);
    background: var(--clr-surface);
}

/* ── Responsive: collapse to single column at 1100px ────────────────── */
@media (max-width: 1100px) {
    .ew-shell {
        grid-template-columns: 1fr;
    }

    .ew-viewer-column {
        position: relative;
        top: auto;
        /* Place invoice viewer above the form on narrow screens so the
           source document stays adjacent to the fields being verified */
        order: -1;
    }

    /* Release workspace from its desktop height constraint so content
       flows into the page-level scroll (.mud-main-content overflow-y: auto).
       Without this, the parent clips everything beyond 85vh even though
       the child (.ew-workspace-scroll) already sets overflow-y: visible. */
    .ew-workspace {
        max-height: none;
        overflow: visible;
    }

    .ew-workspace-scroll {
        max-height: none;
        overflow-y: visible;
    }

    .ew-viewer {
        max-height: 400px;
    }
}

/* ── Collapsible viewer — matches shell stack breakpoint (≤1100px) ───── */
/* At ≤1100px the shell is single-column and the viewer is above the form;
   the collapse affordance must work at the same width where it is visible. */
@media (max-width: 1100px) {
    .ew-viewer--collapsible .ew-viewer-body {
        max-height: 0;
        min-height: 0; /* override the 200px default so collapsed state fully hides */
        overflow: hidden;
        transition: max-height 250ms ease;
    }

    .ew-viewer--collapsible.ew-viewer--expanded .ew-viewer-body {
        max-height: 55vh;
        min-height: 80px; /* restore a sensible floor when expanded */
        overflow: auto;   /* restore scrollability overridden by the collapsed rule above */
    }
}

/* ── Small-screen polish (≤640px) ───────────────────────────────────── */
@media (max-width: 640px) {
    .ew-section-header {
        padding-block: 8px;
        padding-inline: var(--st-space-3);
    }

    .ew-section-body {
        padding-block: 0 var(--st-space-3);
        padding-inline: var(--st-space-3);
    }

    .ew-viewer {
        max-height: 360px;
    }

    .ew-workspace-footer {
        padding-inline: var(--st-space-2);
    }
}

.tg-row-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
    color: white;
}

.tg-row-content {
    flex: 1;
    min-width: 0;
}

.tg-row-label {
    font-size: 0.98rem;
    color: var(--clr-text-secondary);
    margin-block-end: 4px;
    display: block;
}

/* Ensure inputs in tg rows are seamless */
.tg-row-content .form-input {
    border: none;
    background: transparent;
    padding: 0;
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--clr-text);
    box-shadow: none;
    height: auto;
}

.tg-row-content .form-input:focus {
    box-shadow: none;
}

.tg-row-content .form-input::placeholder {
    font-weight: 400;
}

.tg-row-content .text-xs {
    font-size: 0.84rem;
    line-height: 1.55;
}

.tg-row-action {
    color: var(--clr-text-muted);
    font-size: 1.25rem;
}

[dir="rtl"] .tg-row-action .ph-caret-right {
    transform: scaleX(-1);
}

/* ─── Topbar & Sidebar Inline Controls ─── */
.topbar-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
}

/* Sidebar is always visible on desktop — hide the redundant AppBar lang switcher */
@media (min-width: 1025px) {
    .topbar-controls {
        display: none;
    }
}

.topbar-toggle-group {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
    padding: 3px;
}

.topbar-toggle-btn {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    padding: 5px 10px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.topbar-toggle-btn.icon-only {
    padding: 5px 6px;
    font-size: 0.95rem;
}

.topbar-toggle-btn:hover {
    color: white;
}

.topbar-toggle-btn.active {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* Sidebar quick controls (desktop) */
.sidebar-quick-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 0;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .sidebar-quick-controls {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RTL SPECIFIC OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
[dir="rtl"] .ph-caret-right,
[dir="rtl"] .ph-arrow-right,
[dir="rtl"] .ph-arrow-circle-right,
[dir="rtl"] .ph-sign-out,
[dir="rtl"] .ph-trend-up,
[dir="rtl"] .ph-trend-down {
    transform: scaleX(-1);
}

/* ═══ Modal Overlay ═══ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
    padding: 16px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-overlay>.card {
    animation: slideUp 0.25s ease;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 32px);
}

.modal-overlay>.card>.card-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ═══ Swipe Gesture Entry Cards ═══ */
.swipe-container {
    position: relative;
    overflow: hidden;
}

.swipe-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-weight: 600;
    font-size: 0.8125rem;
    color: white;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 0;
}

.swipe-actions.left {
    left: 0;
    right: auto;
    background: #DC2626;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.swipe-actions.right {
    right: 0;
    left: auto;
    background: #10B981;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.swipe-container.swiping .swipe-actions {
    opacity: 1;
}

.swipe-content {
    position: relative;
    z-index: 1;
    background: var(--clr-surface);
    transition: transform 0.2s ease;
}

/* ═══ Pull-to-Refresh Indicator ═══ */
#pull-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-40px);
    z-index: 9998;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    background: var(--clr-surface);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

#pull-indicator i {
    font-size: 1.25rem;
    color: var(--clr-primary);
}

#pull-indicator.refreshing i {
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ═══ Bulk Action Bar ═══ */
.bulk-action-bar {
    bottom: 0 !important;
}

@media (max-width: 1024px) {
    .bulk-action-bar {
        bottom: 64px !important;
    }
}

.bulk-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    gap: 12px;
    padding: 0 8px;
}

.bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.bulk-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.mud-list-item:not(:last-child) {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
}

/* ═══ Budget Progress ═══ */
.budget-bar {
    margin-top: 8px;
}

.budget-bar-track {
    width: 100%;
    height: 6px;
    background: var(--clr-border);
    border-radius: 3px;
    overflow: hidden;
}

.budget-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* ═══ Voice Button ═══ */
.voice-btn {
    padding: 6px;
    border-radius: 50%;
    border: none;
    background: var(--clr-surface-alt);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.voice-btn:hover {
    background: var(--clr-accent-light);
}

.voice-btn.recording {
    background: #FEE2E2;
    animation: pulse 1s infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   ANTHROPIC THEME — Component Fixes
   Fixes for AI Auto-Bind panel, warning banners, and dark mode
   alignment with the Anthropic #141413 base token system.
   ═══════════════════════════════════════════════════════════════ */

/* ── AI Auto Binding Engine Panel — Light Mode ──────────────── */
/* The panel uses rgba(var(--clr-primary-rgb)) which needs fallback */
[class*="auto-bind"],
.auto-bind-panel {
    background: rgba(27, 67, 50, 0.04) !important;
    border: 1px solid rgba(27, 67, 50, 0.14) !important;
    border-radius: var(--radius-md);
}

/* ── AI Auto Binding Engine Panel — Dark Mode ───────────────── */
.dark [class*="auto-bind"],
.dark .auto-bind-panel {
    background: rgba(45, 106, 79, 0.08) !important;
    border-color: rgba(45, 106, 79, 0.22) !important;
}

/* Fix MudAlert Warning — Anthropic orange replaces washed-out yellow */
.mud-alert.mud-alert-filled-warning,
.mud-alert-filled.mud-alert-filled-warning {
    background-color: #c46a3f !important;   /* Anthropic orange — darker for contrast */
    color: #ffffff !important;
}

.mud-alert.mud-alert-filled-warning .mud-alert-message,
.mud-alert.mud-alert-filled-warning .mud-typography,
.mud-alert.mud-alert-filled-warning strong {
    color: #ffffff !important;
}

/* Dark mode warning alert — slightly more vivid */
.dark .mud-alert.mud-alert-filled-warning,
.dark .mud-alert-filled.mud-alert-filled-warning {
    background-color: var(--ant-orange) !important;
    color: #ffffff !important;
}

/* Accept Supplier Total button inside warning — keep readable */
.mud-alert.mud-alert-filled-warning .mud-button-filled-warning {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.mud-alert.mud-alert-filled-warning .mud-button-filled-warning:hover {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

/* ── Line item separator — saved entry read-only view ────────── */
/* Adds subtle divider between each line item block */
.mud-expansion-panel + .mud-expansion-panel,
[class*="line-item"] + [class*="line-item"] {
    border-top: 1px solid var(--clr-border-light);
}

.dark [class*="line-item"] + [class*="line-item"] {
    border-top-color: var(--clr-border);
}

/* ── Supplier total reconciliation banner — color fix ────────── */
/* The orange warning banner in view mode */
.supplier-total-warning,
.mud-alert[severity="warning"] {
    border-inline-start: 3px solid var(--ant-orange);
}

/* ── AutoBind component Generate Suggestions button ─────────── */
/* Ensure the button is visible against the new dark background */
.dark .btn-success,
.dark [class*="btn-success"] {
    background-color: var(--clr-primary-light) !important;
    color: #ffffff !important;
}

/* Low Confidence badge — orange not yellow */
.dark .mud-chip[class*="warning"],
.dark .mud-chip-label[class*="warning"] {
    background-color: rgba(217, 119, 87, 0.25) !important;
    color: #f4a67a !important;
    border-color: rgba(217, 119, 87, 0.4) !important;
}

/* Apply-All Disabled badge — neutral dark */
.dark .mud-chip[class*="default"],
.dark .mud-chip-label[class*="default"] {
    background-color: rgba(176, 174, 165, 0.15) !important;
    color: var(--clr-text-muted) !important;
}

/* Mobile adjustments for Bottom Nav Bar */
@media (max-width: 1024px) {
    .mud-main-content {
        padding-bottom: 80px !important;
    }
}

/* BUG 4: Upload Tiles Grid */
.scan-upload-tiles {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}

.scan-upload-tile {
    min-width: 0 !important;
    overflow: hidden !important;
}

/* ── Arabic input label alignment fix ── */
[lang="ar"] .mud-input-label-inputcontrol {
    font-size: var(--st-text-sm) !important; /* 14px in Arabic mode */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: var(--st-leading-relaxed) !important;
    right: 14px !important;
    left: auto !important;
    transform-origin: right top !important;
    text-align: right;
}

[lang="ar"] .mud-input-control > .mud-input-control-input-container {
    padding-top: 22px !important;
}

[lang="ar"] .mud-input.mud-input-outlined input,
[lang="ar"] .mud-input.mud-input-outlined textarea {
    text-align: right;
    direction: rtl;
}

[lang="ar"] .mud-select-input {
    text-align: right;
    direction: rtl;
}

/* Arabic section header and caption text — uses token scale */
[lang="ar"] .mud-typography-caption {
    font-size: var(--st-text-sm) !important; /* 14px in Arabic mode */
    line-height: var(--st-leading-relaxed) !important;
}

[lang="ar"] .mud-typography-overline {
    font-size: var(--st-text-xs) !important; /* 13px in Arabic mode */
    letter-spacing: 0.01em !important; /* minimal — Arabic doesn't benefit from wide tracking */
}

/* Line item card RTL fix */
[lang="ar"] .line-item-card .mud-grid {
    direction: rtl;
}


/* ═══════════════════════════════════════════════════════════════
   SMART PICKER — Universal bilingual category/unit selector
   Dropdown + search + memory. Works in LTR and RTL (Arabic).
   ═══════════════════════════════════════════════════════════════ */

.smart-picker {
    position: relative;
    width: 100%;
    font-family: var(--font-ui, 'DM Sans', sans-serif);
}

/* ── Trigger button ─────────────────────────────────────────── */
.smart-picker__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    min-height: 48px;
    background: var(--mud-palette-surface, #fff);
    border: 1.5px solid var(--mud-palette-lines-default, #E8E4DF);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    gap: 8px;
    user-select: none;
}

.smart-picker--open .smart-picker__trigger {
    border-color: var(--mud-palette-primary, #1B4332);
    box-shadow: 0 0 0 2px rgba(27, 67, 50, 0.12);
}

.smart-picker__trigger:hover:not(.smart-picker__trigger--disabled) {
    border-color: var(--mud-palette-primary, #1B4332);
}

.smart-picker__trigger--disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--mud-palette-background-grey, #f5f5f5);
}

.smart-picker__trigger-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.smart-picker__selected-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1A1917);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.smart-picker__selected-sub {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #57534E);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.75;
}

.smart-picker__placeholder {
    font-size: 13px;
    color: var(--mud-palette-text-secondary, #A8A29E);
    font-style: italic;
}

.smart-picker__arrow {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #57534E);
    transition: transform 0.2s;
    flex-shrink: 0;
    line-height: 1;
}

.smart-picker__arrow--up {
    transform: rotate(180deg);
}

/* ── Floating panel ─────────────────────────────────────────── */
.smart-picker__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--mud-palette-surface, #fff);
    border: 1.5px solid var(--mud-palette-primary, #1B4332);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: sp-slide-in 0.15s cubic-bezier(0.22, 1, 0.36, 1);
    min-width: 220px;
}

[dir="rtl"] .smart-picker__panel {
    left: 0;
    right: 0;
}

@keyframes sp-slide-in {
    from { opacity: 0; transform: translateY(-6px) scaleY(0.96); }
    to   { opacity: 1; transform: translateY(0) scaleY(1); }
}

/* ── Search box ─────────────────────────────────────────────── */
.smart-picker__search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-divider, #E8E4DF);
    background: var(--mud-palette-background-grey, #F9F8F6);
}

.smart-picker__search-icon {
    font-size: 13px;
    opacity: 0.6;
    flex-shrink: 0;
}

.smart-picker__search {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    font-family: inherit;
    color: var(--mud-palette-text-primary, #1A1917);
    padding: 0;
    min-width: 0;
}

.smart-picker__search::placeholder {
    color: var(--mud-palette-text-secondary, #A8A29E);
}

.smart-picker__search-clear {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #A8A29E);
    padding: 0 2px;
    line-height: 1;
    border-radius: 50%;
    transition: color 0.1s;
}

.smart-picker__search-clear:hover {
    color: var(--mud-palette-error, #C0392B);
}

/* ── Options list ───────────────────────────────────────────── */
.smart-picker__list {
    max-height: 260px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
}

.smart-picker__group-label {
    padding: 6px 12px 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mud-palette-text-secondary, #A8A29E);
    background: var(--mud-palette-background-grey, #F9F8F6);
}

.smart-picker__divider {
    height: 1px;
    background: var(--mud-palette-divider, #E8E4DF);
    margin: 2px 0;
}

.smart-picker__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 0.5px solid var(--mud-palette-divider, #E8E4DF);
}

.smart-picker__option:last-child {
    border-bottom: none;
}

.smart-picker__option:hover,
.smart-picker__option--highlighted {
    background: rgba(27, 67, 50, 0.06);
}

.smart-picker__option--selected {
    background: rgba(27, 67, 50, 0.08);
}

.smart-picker__opt-primary {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1A1917);
    flex: 1;
    word-break: break-word;
}

.smart-picker__opt-secondary {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #57534E);
    white-space: nowrap;
    opacity: 0.7;
}

.smart-picker__check {
    font-size: 13px;
    color: var(--mud-palette-primary, #1B4332);
    font-weight: 800;
    flex-shrink: 0;
}

.smart-picker__empty {
    padding: 16px;
    text-align: center;
    font-size: 13px;
    color: var(--mud-palette-text-secondary, #A8A29E);
}

/* ── Clear button (bottom) ──────────────────────────────────── */
.smart-picker__clear-btn {
    width: 100%;
    padding: 8px;
    background: none;
    border: none;
    border-top: 1px solid var(--mud-palette-divider, #E8E4DF);
    cursor: pointer;
    font-size: 12px;
    color: var(--mud-palette-error, #C0392B);
    font-family: inherit;
    transition: background 0.1s;
    text-align: center;
}

.smart-picker__clear-btn:hover {
    background: rgba(192, 57, 43, 0.06);
}

/* ── Backdrop (click-outside) ───────────────────────────────── */
.smart-picker__backdrop {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

/* ── Dark mode overrides ────────────────────────────────────── */
.dark .smart-picker__trigger {
    background: var(--mud-palette-surface, #1e1e1e);
    border-color: rgba(255, 255, 255, 0.15);
}

.dark .smart-picker__panel {
    background: var(--mud-palette-surface, #1e1e1e);
    border-color: var(--mud-palette-primary, #2D6A4F);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.dark .smart-picker__search-wrap {
    background: rgba(255, 255, 255, 0.04);
}

.dark .smart-picker__option:hover {
    background: rgba(74, 222, 128, 0.08);
}

.dark .smart-picker__option--selected {
    background: rgba(74, 222, 128, 0.12);
}

/* ── Scrollbar for the list ─────────────────────────────────── */
.smart-picker__list::-webkit-scrollbar {
    width: 4px;
}
.smart-picker__list::-webkit-scrollbar-thumb {
    background: var(--mud-palette-divider, #E8E4DF);
    border-radius: 2px;
}

/* ===== FILTER SEARCH WRAPPER ===== */
.filter-search-wrapper { position: relative; margin-bottom: 16px; }

.filter-overlay { position: fixed; inset: 0; z-index: 1200; background: transparent; }

.filter-dropdown-card {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    z-index: 1300; border-radius: 14px; padding: 16px;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}

.filter-dropdown-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filter-dropdown-title { font-size: 0.95rem; font-weight: 800; color: var(--mud-palette-text-primary); }
.filter-close-btn { border: none; background: transparent; cursor: pointer; font-size: 1rem; color: var(--mud-palette-text-secondary); padding: 4px 8px; border-radius: 6px; }
.filter-close-btn:hover { background: var(--mud-palette-action-hover); }
.filter-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--mud-palette-text-secondary); margin-bottom: 8px; margin-top: 8px; }
.filter-date-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.filter-action-row { display: flex; gap: 8px; margin-top: 14px; }

/* ===== BULK INLINE BAR ===== */
.bulk-inline-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 12px 16px; margin-top: 8px; margin-bottom: 8px;
    border-radius: 14px;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-divider);
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    flex-wrap: wrap;
}

.bulk-inline-left { display: flex; align-items: center; gap: 6px; flex-shrink: 0; flex-wrap: wrap; }
.bulk-inline-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bulk-text-btn { border: none; background: transparent; cursor: pointer; font-size: 0.82rem; font-weight: 700; padding: 6px 12px; border-radius: 8px; transition: background 0.15s; white-space: nowrap; }
.bulk-text-btn.primary { color: var(--mud-palette-primary); border: 1.5px solid var(--mud-palette-primary); }
.bulk-text-btn.muted { color: var(--mud-palette-text-secondary); border: 1px solid var(--mud-palette-divider); }
.bulk-text-btn:hover { opacity: 0.8; }

.bulk-count-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; background: var(--mud-palette-primary); color: #ffffff; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }

.bulk-hint-text { font-size: 0.82rem; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.bulk-action-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; border: none; cursor: pointer; font-size: 0.84rem; font-weight: 700; transition: opacity 0.15s, transform 0.1s; white-space: nowrap; }
.bulk-action-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.bulk-action-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.bulk-action-btn.excel { background: var(--mud-palette-primary); color: #ffffff; }
.bulk-action-btn.pdf { background: transparent; color: var(--mud-palette-primary); border: 1.5px solid var(--mud-palette-primary); }
.bulk-action-btn.delete { background: var(--mud-palette-error); color: #ffffff; }
/* ===== END BULK/FILTER ===== */
/* ===== STICKY SEARCH + FILTER + BULK BAR ===== */
.filter-search-wrapper {
    position: sticky !important;
    top: 0;
    z-index: 100;
    background: var(--mud-palette-background);
    padding-top: 8px;
    padding-bottom: 4px;
    margin-bottom: 8px;
}
/* ===== END STICKY ===== */

/* ═══ App Settings Redesign ═══ */

/* Font family override via CSS variable */
body {
    font-family: var(--st-font-family, 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif);
}
.mud-typography,
.mud-table,
.mud-input,
.mud-select,
.mud-button {
    font-family: inherit;
}

/* ── Settings page layout ── */
.settings-card {
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 0;
}

.settings-section-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 16px;
}

.settings-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.settings-preview-grid.four-col {
    grid-template-columns: repeat(4, 1fr);
}

.settings-option-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 12px;
    border-radius: 12px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    user-select: none;
    min-height: 80px;
}
.settings-option-card:hover {
    border-color: var(--mud-palette-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.settings-option-card.active {
    border: 2px solid var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(27, 67, 50, 0.10);
}
.settings-option-card .card-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: center;
}

/* Theme preview mini cards */
.theme-preview {
    width: 56px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}
.theme-preview.light-preview {
    background: #f5f5f5;
    border: 1px solid #e0e0e0;
}
.theme-preview.light-preview .bar { background: #d0d0d0; }
.theme-preview.dark-preview {
    background: #1e1e1e;
    border: 1px solid #333;
}
.theme-preview.dark-preview .bar { background: #444; }
.theme-preview.system-preview {
    background: linear-gradient(135deg, #f5f5f5 50%, #1e1e1e 50%);
    border: 1px solid #999;
}
.theme-preview .bar {
    height: 4px;
    border-radius: 2px;
    margin: 5px 6px 0;
}
.theme-preview .bar:nth-child(2) { width: 60%; }
.theme-preview .bar:nth-child(3) { width: 40%; }

/* Font preview cards */
.font-preview-text {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}

/* Sidebar density preview */
.density-preview {
    width: 48px;
    display: flex;
    flex-direction: column;
    gap: var(--density-gap, 4px);
    align-items: stretch;
}
.density-preview .bar {
    height: 3px;
    border-radius: 2px;
    background: var(--mud-palette-text-secondary);
    opacity: 0.4;
}

/* Font size slider area */
.font-size-label-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.font-size-label-row .size-a-small { font-size: 0.8rem; font-weight: 600; color: var(--mud-palette-text-secondary); }
.font-size-label-row .size-a-large { font-size: 1.4rem; font-weight: 700; color: var(--mud-palette-text-secondary); }

.font-size-stops {
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    margin-top: 4px;
}
.font-size-stops span {
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}
.font-size-stops span.active-stop {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

.font-preview-box {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--mud-palette-background-grey);
    border: 1px solid var(--mud-palette-lines-default);
    font-size: calc(var(--preview-scale, 1) * 0.9rem);
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
}

/* Settings row layout */
.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
}
.settings-row + .settings-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}
.settings-row .row-label {
    flex: 1;
    min-width: 0;
}
.settings-row .row-label .label-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}
.settings-row .row-label .label-desc {
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}
.settings-row .row-control {
    flex: 0 0 220px;
    min-width: 180px;
}

/* Coming soon section */
.settings-coming-soon {
    opacity: 0.5;
    pointer-events: none;
}
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    background: var(--mud-palette-info);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

/* About card */
.about-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--mud-palette-info);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
}

/* ── Sidebar density: compact ──────────────────────────────── */
html[data-sidebar-density="compact"] .sidebar .nav-link {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    min-height: 28px !important;
    font-size: 0.75rem !important;
}
html[data-sidebar-density="compact"] .sidebar .sidebar-section-label {
    font-size: 0.5625rem !important;
    padding-top: 8px !important;
    padding-bottom: 2px !important;
}
html[data-sidebar-density="compact"] .sidebar .nav-link i {
    font-size: 0.875rem !important;
}
html[data-sidebar-density="compact"] .sidebar .sidebar-nav {
    gap: 1px !important;
    padding: 8px 10px !important;
}
html[data-sidebar-density="compact"] .sidebar .sidebar-section-items {
    gap: 1px !important;
}
html[data-sidebar-density="compact"] .sidebar .sidebar-section-label:not(:first-child) {
    margin-top: 2px !important;
}

/* ── Sidebar density: comfortable (default — no overrides needed) ── */

/* ── Sidebar density: spacious ─────────────────────────────── */
html[data-sidebar-density="spacious"] .sidebar .nav-link {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 44px !important;
    font-size: 0.9375rem !important;
}
html[data-sidebar-density="spacious"] .sidebar .sidebar-section-label {
    font-size: 0.6875rem !important;
    padding-top: 20px !important;
    padding-bottom: 6px !important;
}
html[data-sidebar-density="spacious"] .sidebar .nav-link i {
    font-size: 1.25rem !important;
}
html[data-sidebar-density="spacious"] .sidebar .sidebar-nav {
    gap: 4px !important;
    padding: 16px 14px !important;
}
html[data-sidebar-density="spacious"] .sidebar .sidebar-section-items {
    gap: 4px !important;
}
html[data-sidebar-density="spacious"] .sidebar .sidebar-section-label:not(:first-child) {
    margin-top: 8px !important;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .settings-preview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .settings-preview-grid.four-col {
        grid-template-columns: repeat(2, 1fr);
    }
    .settings-row {
        flex-direction: column;
        align-items: stretch;
    }
    .settings-row .row-control {
        flex: 1;
        min-width: 0;
    }
}
/* ═══ END App Settings Redesign ═══ */

/* ═══════════════════════════════════════════════════════════════
   MANAGEMENT P&L STATEMENT
   Financial statement hierarchy, benchmark chips, data coverage.
   ═══════════════════════════════════════════════════════════════ */

/* Statement table */
.pnl-statement {
    width: 100%;
    border-collapse: collapse;
}
.pnl-statement th {
    background: var(--clr-primary);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-xs);
    padding: 8px 12px;
    text-align: start;
    white-space: nowrap;
}
.pnl-statement th.pnl-amount-col {
    text-align: end;
}
.pnl-statement td {
    padding: 6px 12px;
    font-size: var(--fs-sm);
    border-bottom: 1px solid var(--clr-border);
}

/* Section header row */
.pnl-section-header td {
    font-weight: 600;
    font-size: var(--fs-sm);
    background: var(--clr-surface-alt);
    border-bottom: 2px solid var(--clr-border);
    padding: 10px 12px;
}

/* Subtotal row (Gross Profit, Net Profit) */
.pnl-subtotal-row td {
    font-weight: 700;
    font-size: var(--fs-sm);
    border-top: 2px solid var(--clr-primary);
    border-bottom: 2px solid var(--clr-primary);
    background: color-mix(in srgb, var(--clr-primary) 5%, transparent);
    padding: 10px 12px;
}

/* Line item row */
.pnl-line-item td:first-child {
    padding-inline-start: 28px;
}

/* Placeholder row (not integrated) */
.pnl-placeholder-row td {
    opacity: 0.55;
    font-style: italic;
}

/* Amount alignment */
.pnl-amount {
    text-align: end;
    font-variant-numeric: tabular-nums;
    font-family: 'IBM Plex Mono', 'DM Sans', monospace;
}

/* Variance colors */
.pnl-variance-up { color: var(--mud-palette-error); }
.pnl-variance-down { color: var(--mud-palette-success); }
.pnl-variance-neutral { color: var(--clr-text-muted); }

/* Benchmark chip strip */
.pnl-benchmark-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
}
.pnl-benchmark-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--clr-border);
    background: var(--clr-bg);
    min-width: 120px;
    text-align: center;
    transition: box-shadow var(--duration-fast) ease;
}
.pnl-benchmark-chip:hover {
    box-shadow: var(--shadow-sm);
}
.pnl-benchmark-chip .chip-label {
    font-size: var(--fs-xs);
    color: var(--clr-text-muted);
    margin-bottom: 4px;
}
.pnl-benchmark-chip .chip-value {
    font-size: var(--fs-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.pnl-benchmark-chip .chip-target {
    font-size: 10px;
    color: var(--clr-text-muted);
    margin-top: 2px;
}
.pnl-benchmark-chip.status-good { border-color: var(--mud-palette-success); }
.pnl-benchmark-chip.status-good .chip-value { color: var(--mud-palette-success); }
.pnl-benchmark-chip.status-watch { border-color: var(--mud-palette-warning); }
.pnl-benchmark-chip.status-watch .chip-value { color: var(--mud-palette-warning); }
.pnl-benchmark-chip.status-bad { border-color: var(--mud-palette-error); }
.pnl-benchmark-chip.status-bad .chip-value { color: var(--mud-palette-error); }
.pnl-benchmark-chip.status-nodata { border-color: var(--clr-border); opacity: 0.6; }
.pnl-benchmark-chip.status-nodata .chip-value { color: var(--clr-text-muted); }

/* Data coverage banner */
.pnl-data-banner {
    background: color-mix(in srgb, var(--mud-palette-info) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 25%, transparent);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}
.pnl-data-banner ul {
    margin: 8px 0 0 0;
    padding-inline-start: 20px;
}
.pnl-data-banner li {
    font-size: var(--fs-xs);
    color: var(--clr-text-secondary);
    line-height: 1.6;
}

/* KPI card: not-integrated variant */
.st-kpi-card.kpi-not-integrated {
    opacity: 0.55;
    border-top-color: var(--clr-border);
    border-top-style: dashed;
}
.st-kpi-card.kpi-not-integrated .st-kpi-value {
    font-size: var(--fs-sm);
    font-style: italic;
    color: var(--clr-text-muted);
}

/* Dark mode adjustments */
.dark .pnl-section-header td {
    background: color-mix(in srgb, var(--clr-primary) 15%, var(--clr-dark-bg));
}
.dark .pnl-subtotal-row td {
    background: color-mix(in srgb, var(--clr-primary) 10%, var(--clr-dark-bg));
}
.dark .pnl-placeholder-row td {
    opacity: 0.4;
}
.dark .pnl-benchmark-chip {
    background: var(--clr-dark-surface);
}
.dark .pnl-data-banner {
    background: color-mix(in srgb, var(--mud-palette-info) 5%, var(--clr-dark-bg));
    border-color: color-mix(in srgb, var(--mud-palette-info) 15%, transparent);
}
.dark .st-kpi-card.kpi-not-integrated {
    opacity: 0.45;
}

/* RTL adjustments */
[dir="rtl"] .pnl-statement .pnl-amount {
    text-align: start;
}
[dir="rtl"] .pnl-line-item td:first-child {
    padding-inline-start: 28px;
    padding-inline-end: 12px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pnl-statement th, .pnl-statement td {
        padding: 4px 6px;
        font-size: 11px;
    }
    .pnl-benchmark-strip {
        gap: 8px;
    }
    .pnl-benchmark-chip {
        min-width: 90px;
        padding: 8px 10px;
    }
    .pnl-benchmark-chip .chip-value {
        font-size: var(--fs-sm);
    }
}
@media (max-width: 480px) {
    .pnl-statement .pnl-col-prev,
    .pnl-statement .pnl-col-variance,
    .pnl-statement .pnl-col-status {
        display: none;
    }
}

/* ═══ END Management P&L Statement ═══ */