/* ============================================================
   MUBSIRA BUSINESS -- Design System
   Black and white. SaaS grade. No fluff.
   ============================================================ */

/* ── FOUC Prevention: hide SEO content, show loading state ── */
#seo-content { display: none !important; }

/* ══════════════════════════════════════════════════════════════
   FULL-SCREEN SPLASH SCREEN (Outlook / Teams style)
   Covers the entire viewport, fades out smoothly when app boots.
   ══════════════════════════════════════════════════════════════ */
.app-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    opacity: 1;
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] .app-loading { background: #0a0a0a; }

/* Fade-out when app is ready */
.app-loading.splash-exit {
    opacity: 0;
    pointer-events: none;
}

/* ── Brand container ── */
.splash-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    animation: splash-enter 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes splash-enter {
    from { opacity: 0; transform: scale(0.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Logo icon (larger, animated) ── */
.splash-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.splash-logo-icon {
    width: 80px;
    height: 80px;
    border-radius: 22px;
    background: #0a0a0a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
    animation: splash-icon-breathe 2.4s ease-in-out infinite;
}
[data-theme="dark"] .splash-logo-icon {
    background: #fff;
    color: #0a0a0a;
    box-shadow: 0 8px 32px rgba(255,255,255,0.08), 0 2px 8px rgba(255,255,255,0.04);
}
@keyframes splash-icon-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08); }
    50%      { transform: scale(1.04); box-shadow: 0 12px 48px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.12); }
}
[data-theme="dark"] .splash-logo-icon {
    animation-name: splash-icon-breathe-dark;
}
@keyframes splash-icon-breathe-dark {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 32px rgba(255,255,255,0.06); }
    50%      { transform: scale(1.04); box-shadow: 0 12px 48px rgba(255,255,255,0.12); }
}

.splash-logo-icon svg {
    width: 42px;
    height: 42px;
}

/* ── Text block below icon ── */
.splash-logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
.splash-logo-name {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[data-theme="dark"] .splash-logo-name { color: #fafafa; }
.splash-dot { color: #4f46e5; }
[data-theme="dark"] .splash-dot { color: #818cf8; }

.splash-logo-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #737373;
    margin-top: 0.15rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[data-theme="dark"] .splash-logo-label { color: #a3a3a3; }

/* ── Animated progress bar ── */
.splash-progress {
    width: 200px;
    height: 3px;
    background: #e5e5e5;
    border-radius: 999px;
    overflow: hidden;
}
[data-theme="dark"] .splash-progress { background: #2a2a2a; }

.splash-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0a0a0a, #404040);
    border-radius: 999px;
    animation: splash-progress-fill 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
[data-theme="dark"] .splash-progress-bar {
    background: linear-gradient(90deg, #fafafa, #a3a3a3);
}
@keyframes splash-progress-fill {
    0%   { width: 0%; }
    20%  { width: 35%; }
    50%  { width: 65%; }
    75%  { width: 82%; }
    100% { width: 95%; }
}

/* ── Tagline ── */
.splash-tagline {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #a3a3a3;
    letter-spacing: 0.04em;
    animation: splash-tagline-in 0.5s 0.5s ease both;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
[data-theme="dark"] .splash-tagline { color: #737373; }
@keyframes splash-tagline-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Smooth reveal when app is ready */
body.app-ready .main-content {
    animation: app-fadein 0.25s ease;
}
@keyframes app-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

:root {
    --color-bg:             #fafafa;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f5f5f5;
    --color-border:         #e5e5e5;
    --color-border-strong:  #d4d4d4;

    --color-text:           #0a0a0a;
    --color-text-secondary: #404040;
    --color-text-muted:     #737373;
    --color-text-faint:     #a3a3a3;

    --color-accent:         #0a0a0a;
    --color-accent-hover:   #262626;
    --color-accent-inverse: #ffffff;

    --color-primary:        #4f46e5;
    --color-primary-light:  rgba(79, 70, 229, 0.08);
    --color-primary-soft:   rgba(79, 70, 229, 0.1);

    --color-success:        #16a34a;
    --color-success-bg:     #f0fdf4;
    --color-warning:        #ca8a04;
    --color-warning-bg:     #fefce8;
    --color-danger:         #dc2626;
    --color-danger-bg:      #fef2f2;
    --color-info:           #2563eb;
    --color-info-bg:        #eff6ff;

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;

    --text-xs:    0.75rem;
    --text-sm:    0.8125rem;
    --text-base:  0.875rem;
    --text-md:    0.9375rem;
    --text-lg:    1.0625rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    --leading-tight:   1.2;
    --leading-snug:    1.35;
    --leading-normal:  1.5;

    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:  0 4px 8px rgba(0,0,0,0.06);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.08);

    --transition-fast: 100ms ease;
    --transition-base: 180ms ease;

    --max-width: 1120px;
    --sidebar-width: 220px;
}


/* ============================================================
   DARK MODE
   Overrides all root variables when [data-theme="dark"] is set.
   The toggle in the topbar sets this attribute on <html>.
   ============================================================ */

[data-theme="dark"] {
    --color-bg:             #0f0f0f;
    --color-surface:        #1a1a1a;
    --color-surface-alt:    #222222;
    --color-border:         #2e2e2e;
    --color-border-strong:  #3a3a3a;

    --color-text:           #ededed;
    --color-text-secondary: #b0b0b0;
    --color-text-muted:     #808080;
    --color-text-faint:     #555555;

    --color-accent:         #ededed;
    --color-accent-hover:   #d4d4d4;
    --color-accent-inverse: #0f0f0f;

    --color-primary:        #818cf8;
    --color-primary-light:  rgba(129, 140, 248, 0.12);
    --color-primary-soft:   rgba(129, 140, 248, 0.15);

    --color-success:        #4ade80;
    --color-success-bg:     rgba(74, 222, 128, 0.1);
    --color-warning:        #facc15;
    --color-warning-bg:     rgba(250, 204, 21, 0.1);
    --color-danger:         #f87171;
    --color-danger-bg:      rgba(248, 113, 113, 0.1);
    --color-info:           #60a5fa;
    --color-info-bg:        rgba(96, 165, 250, 0.1);

    --shadow-xs:  0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:  0 4px 8px rgba(0,0,0,0.4);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.5);

    color-scheme: dark;
}

/* Scrollbar tinting for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3a3a3a;
    border-radius: 4px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4a4a4a;
}

/* Dark mode: toast already uses --color-text as bg, which is now light,
   so invert the toast to keep it readable. */
[data-theme="dark"] .toast {
    background: #ededed;
    color: #0f0f0f;
}
[data-theme="dark"] .toast-action {
    color: #0f0f0f;
    border-color: rgba(0,0,0,0.15);
}

/* Dark mode: confirm dialog */
[data-theme="dark"] .confirm-dialog {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

/* Dark mode: modal overlay slightly darker */
[data-theme="dark"] .modal-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* Dark mode: status badges remain vibrant */
[data-theme="dark"] .badge-warning {
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
}
[data-theme="dark"] .badge-danger,
[data-theme="dark"] .badge-overdue {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
}
[data-theme="dark"] .badge-success,
[data-theme="dark"] .badge-paid {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}

/* Dark mode: table row hover */
[data-theme="dark"] .table-row:hover,
[data-theme="dark"] tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Dark mode: sidebar active link */
[data-theme="dark"] .sidebar-link.active {
    background: rgba(255, 255, 255, 0.08);
}

/* ---------- Theme Toggle Button ---------- */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    background: var(--color-surface-alt);
}

.theme-toggle svg {
    width: 14px;
    height: 14px;
}


/* ---------- Reset ---------- */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
    overflow-wrap: break-word;
    word-break: break-word;
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    transition: background-color 0.2s ease, color 0.2s ease;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }


/* ============================================================
   LAYOUT
   ============================================================ */

.app-shell {
    display: flex;
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
}

/* ── Safe-area: topbar & sidebar always respect the notch/status bar ── */
/* env(safe-area-inset-top) is 0 in normal browsers, nonzero on notched
   devices and in standalone PWA mode (black-translucent status bar).
   Applying it unconditionally is harmless and ensures no cutoff. */
@supports (padding-top: env(safe-area-inset-top)) {
    .topbar {
        padding-top: env(safe-area-inset-top, 0px);
    }
    .sidebar {
        padding-top: env(safe-area-inset-top, 0px);
    }
    /* Fullscreen modals on mobile sit behind the notch/status bar */
    .modal-header {
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
    }
}
/* JS-detected standalone fallback (iOS older WebKit) */
.pwa-standalone .topbar {
    padding-top: env(safe-area-inset-top, 20px);
}
.pwa-standalone .sidebar {
    padding-top: env(safe-area-inset-top, 20px);
}
.pwa-standalone .modal-header {
    padding-top: calc(env(safe-area-inset-top, 20px) + var(--space-4));
}

/* ---------- Sidebar ---------- */

.sidebar {
    width: var(--sidebar-width);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 50;
    transition: transform var(--transition-base);
}

.sidebar-header {
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.sidebar-logo {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text);
}

.sidebar-logo-dot {
    color: var(--color-text-muted);
}

.sidebar-label {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-faint);
    margin-top: var(--space-3);
}

.sidebar-nav {
    flex: 1;
    padding: var(--space-3) var(--space-2);
    overflow-y: auto;
}

.sidebar-section {
    margin-bottom: var(--space-4);
}

.sidebar-section-title {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-faint);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-1);
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.4375rem var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-normal);
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    min-width: 0; /* allow flex children to shrink */
}

button.sidebar-link {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    text-align: left;
}

.sidebar-link-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.sidebar-link:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.sidebar-link.active {
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-weight: var(--weight-medium);
}

.sidebar-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.55;
}

.sidebar-link.active svg {
    opacity: 0.85;
}

/* ── Navigation guidance dot (new user onboarding) ── */
.nav-guide-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    margin-left: auto;
    flex-shrink: 0;
    animation: nav-guide-pulse 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes nav-guide-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
}
/* Mobile "More" menu dot */
.more-guide-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    animation: nav-guide-pulse 2s ease-in-out infinite;
    pointer-events: none;
}
/* Dot on the bottom-nav "More" button itself */
.bottom-nav-guide-dot {
    position: absolute;
    top: 5px;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3b82f6;
    animation: nav-guide-pulse 2s ease-in-out infinite;
    pointer-events: none;
}

.sidebar-badge {
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: var(--weight-semibold);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--color-danger);
    color: #fff;
    padding: 0 5px;
}

/* Tax season badge on Export Center nav item */
.nav-tax-badge {
    margin-left: auto;
    font-size: 0.575rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 4px;
    background: linear-gradient(135deg, #f59e0b, #ea580c);
    color: #fff;
    white-space: nowrap;
    animation: taxBadgePulse 3s ease-in-out infinite;
}
@keyframes taxBadgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.sidebar-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.sidebar-footer-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.sidebar-footer-link:hover {
    color: var(--color-text);
}

/* Trust strip */
.trust-strip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.625rem;
    font-weight: var(--weight-medium);
    color: var(--color-text-faint);
    letter-spacing: 0.01em;
    line-height: 1;
    padding: 2px 0;
}

.trust-badge svg {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    opacity: 0.5;
}

/* Mobile trust strip in More panel */
.trust-strip-mobile {
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

/* Sidebar backdrop -- hidden on desktop */
.sidebar-backdrop {
    display: none;
}


/* ---------- Main Content ---------- */

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.topbar {
    min-height: 48px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-6);
    position: sticky;
    top: 0;
    z-index: 40;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.topbar-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.menu-toggle {
    display: none;
    padding: var(--space-2);
}

.menu-toggle svg {
    width: 18px;
    height: 18px;
}

.page-content {
    flex: 1;
    padding: var(--space-6);
    max-width: 960px;
}

.page-content-wide {
    flex: 1;
    padding: var(--space-6);
}


/* ============================================================
   TYPOGRAPHY
   ============================================================ */

.page-title {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.page-subtitle {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
}

.section-heading {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

.mono {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
}


/* ============================================================
   COMPONENTS
   ============================================================ */

/* ---------- Cards ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.card-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
}

.card-body {
    padding: 0.5rem 0 0;
}


/* ---------- Stat Cards ---------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.stat-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text);
    line-height: 1;
}

.stat-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.stat-positive .stat-value { color: var(--color-success, #22c55e); }
.stat-negative .stat-value { color: var(--color-danger, #ef4444); }

/* ---------- Dashboard Tooltip System ---------- */

.dash-tip-trigger {
    position: relative;
    cursor: default;
}

.dash-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.6rem;
    font-weight: 600;
    font-style: normal;
    line-height: 1;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    flex-shrink: 0;
    vertical-align: middle;
    position: relative;
    z-index: 1;
}

.dash-tip-icon:hover {
    background: var(--color-primary-light, rgba(79,70,229,0.08));
    border-color: var(--color-primary, #4f46e5);
    color: var(--color-primary, #4f46e5);
}

.dash-tooltip {
    position: fixed;
    z-index: 9999;
    max-width: 320px;
    padding: 0.5rem 2rem 0.5rem 0.875rem;
    background: var(--color-text, #0a0a0a);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.55;
    border-radius: var(--radius-md, 6px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    display: none;
    word-wrap: break-word;
}

.dash-tooltip-close {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    font-size: 0.7rem;
    font-weight: 700;
    font-family: system-ui, sans-serif;
    cursor: pointer;
    pointer-events: auto;
    line-height: 1;
    padding: 0;
    transition: background 0.15s, color 0.15s;
}

.dash-tooltip-close:hover {
    background: rgba(255,255,255,0.3);
    color: #fff;
}

.dash-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.dash-tooltip.arrow-top {
    transform: translateY(-4px);
}

.dash-tooltip.arrow-top.visible {
    transform: translateY(0);
}

/* ---------- Key Metrics Row ---------- */

.key-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.key-metric-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    text-align: center;
    position: relative;
    cursor: default;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.key-metric-card:hover {
    border-color: var(--color-border-hover, var(--color-border));
    box-shadow: var(--shadow-sm);
}

.key-metric-value {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    line-height: 1.2;
    margin-bottom: var(--space-1);
}

.key-metric-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.key-metric-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}


/* ---------- Buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
}

.btn svg {
    width: 14px;
    height: 14px;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-inverse);
    border-color: var(--color-accent);
}

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

.btn-success {
    background: #22c55e;
    color: #fff;
    border-color: #22c55e;
}

.btn-success:hover {
    background: #16a34a;
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.btn-secondary:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-text-muted);
}

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

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

.btn-danger {
    background: var(--color-danger);
    color: #fff;
    border-color: var(--color-danger);
}

.btn-danger:hover {
    background: #b91c1c;
}

.btn-sm {
    padding: 0.3125rem 0.625rem;
    font-size: var(--text-xs);
}

.btn-active,
.btn-ghost.btn-active {
    background: var(--color-accent);
    color: var(--color-accent-inverse);
    border-color: var(--color-accent);
}

.btn-active:hover,
.btn-ghost.btn-active:hover {
    background: var(--color-accent-hover);
}

.btn-lg {
    padding: 0.625rem 1.25rem;
    font-size: var(--text-base);
}

.btn-icon {
    padding: 0.375rem;
    border-radius: var(--radius-sm);
}


/* ---------- Form Controls ---------- */

.form-group {
    margin-bottom: var(--space-4);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.form-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: 2px;
    margin-bottom: var(--space-1);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.4375rem 0.625rem;
    font-size: var(--text-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    transition: border-color var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-text);
}

.form-input::placeholder {
    color: var(--color-text-faint);
}

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

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.form-row-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
}


/* ---------- Form Sections (visual grouping inside modals) ---------- */

.form-section {
    position: relative;
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-2);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.form-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.form-section .form-group {
    margin-bottom: var(--space-3);
}

.form-section .form-group:last-child {
    margin-bottom: var(--space-2);
}

[data-theme="dark"] .form-section {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

@media (max-width: 600px) {
    .form-section {
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }
}

/* ---------- Batch Entry Preview ---------- */
.batch-preview {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface-alt, #f8f9fa);
    border: 1px solid var(--color-border);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text);
    margin-top: 0.5rem;
}

[data-theme="dark"] .batch-preview {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}

/* ---------- Receipt Badge (inline in expense rows) ---------- */

.receipt-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem 0.2rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--color-primary, #4f46e5);
    background: var(--color-primary-light, rgba(79, 70, 229, 0.08));
    border: 1px solid var(--color-primary, #4f46e5);
    border-radius: 999px;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}

.receipt-badge:hover {
    background: rgba(79, 70, 229, 0.15);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.18);
    transform: translateY(-1px);
}

.receipt-badge:active {
    transform: scale(0.96);
    box-shadow: none;
}

.receipt-badge svg {
    flex-shrink: 0;
    opacity: 0.85;
}

/* Ensure the badge is accessible with keyboard focus */
.receipt-badge:focus-visible {
    outline: 2px solid var(--color-primary, #4f46e5);
    outline-offset: 2px;
}

/* Dark-mode adjustments */
[data-theme="dark"] .receipt-badge {
    color: #a5b4fc;
    background: rgba(99, 102, 241, 0.14);
    border-color: rgba(129, 140, 248, 0.4);
}

[data-theme="dark"] .receipt-badge:hover {
    background: rgba(99, 102, 241, 0.25);
    box-shadow: 0 0 0 2px rgba(129, 140, 248, 0.22);
}

/* ---------- Receipt Capture Area (inside modals) ---------- */

.receipt-capture-area {
    border: 2px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    text-align: center;
    transition: border-color 0.2s, background 0.2s;
    cursor: pointer;
    background: var(--color-surface);
}

.receipt-capture-area:hover,
.receipt-capture-area.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light, rgba(79, 70, 229, 0.04));
}

.receipt-icon {
    color: var(--color-text-faint);
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: center;
}

.receipt-label {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

.receipt-capture-btns {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    flex-wrap: wrap;
}

.receipt-preview {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-surface);
    text-align: center;
}

.receipt-preview img {
    max-width: 100%;
    max-height: 200px;
    object-fit: contain;
    border-radius: var(--radius-md);
    margin: var(--space-3);
}

.receipt-preview-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
    padding: var(--space-2) var(--space-3) var(--space-3);
    border-top: 1px solid var(--color-border);
}

.receipt-compress-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
    justify-content: center;
}

.receipt-compress-info.compressing {
    color: var(--color-primary);
    font-weight: var(--weight-medium);
}

/* ---------- Smart Receipt Parse Status ---------- */
.receipt-parse-status {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-md);
    margin-top: var(--space-2);
    transition: all 0.3s ease;
}
.receipt-parse-status.parsing {
    background: rgba(79,70,229,0.06);
    color: var(--color-primary);
    font-weight: var(--weight-medium);
}
.receipt-parse-status.parse-success {
    background: rgba(16,185,129,0.08);
    color: var(--color-success, #10b981);
}
.receipt-parse-status.parse-partial {
    background: rgba(245,158,11,0.08);
    color: var(--color-warning, #f59e0b);
}
.receipt-parse-status.parse-error,
.receipt-parse-status.parse-none {
    background: rgba(107,114,128,0.06);
    color: var(--color-text-muted);
}
.receipt-parse-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--color-primary);
    border-top-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: receipt-spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes receipt-spin {
    to { transform: rotate(360deg); }
}

/* Auto-filled field highlight: subtle background fade to signal the field was filled by receipt scan */
.receipt-autofilled {
    animation: receipt-autofill-fade 2.5s ease-out;
}
@keyframes receipt-autofill-fade {
    0%   { background-color: rgba(16, 185, 129, 0.12); }
    100% { background-color: transparent; }
}
/* Small "auto-filled" label below field */
.receipt-autofill-tag {
    font-size: 0.65rem;
    color: var(--color-success, #10b981);
    margin-top: 2px;
    opacity: 1;
    transition: opacity 0.6s ease;
}
.receipt-autofill-tag.fading {
    opacity: 0;
}
/* Scan hint under the capture area */
.receipt-scan-hint {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
    line-height: 1.4;
}

@media (max-width: 600px) {
    .receipt-capture-area {
        padding: var(--space-4) var(--space-3);
    }
    .receipt-preview img {
        max-height: 160px;
    }
}


/* ---------- Table ---------- */

.table-wrapper {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    gap: var(--space-3);
}

.table-search {
    width: 220px;
    padding: 0.3125rem 0.625rem 0.3125rem 1.75rem;
    font-size: var(--text-xs);
    background: var(--color-surface-alt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") no-repeat 0.5rem center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
}

.table-search:focus {
    outline: none;
    border-color: var(--color-text-muted);
}

.data-table {
    width: 100%;
    font-size: var(--text-sm);
}

.data-table th {
    text-align: left;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

.data-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: var(--color-surface-alt);
}

.data-table .text-right {
    text-align: right;
}

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

.data-table .col-actions {
    width: 100px;
    text-align: right;
}

/* ---------- Sortable Column Headers ---------- */
.data-table th.sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: color 0.15s ease;
}
.data-table th.sortable-th:hover {
    color: var(--color-primary, #3b82f6);
}
.data-table th.sortable-th .sort-arrow {
    display: inline-block;
    width: 14px;
    margin-left: 2px;
    font-size: 0.65rem;
    color: var(--color-text-faint, #cbd5e1);
    vertical-align: middle;
    transition: color 0.15s, transform 0.15s;
}
.data-table th.sortable-th.sort-active .sort-arrow {
    color: var(--color-primary, #3b82f6);
}
.data-table th.sortable-th.sort-desc .sort-arrow {
    transform: rotate(180deg);
}

/* ---------- Smart Filter Bar ---------- */
.smart-filter-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.35rem 0.5rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    margin-bottom: 0.75rem;
    min-height: 38px;
    transition: border-color 0.15s;
    position: relative;
}
.smart-filter-bar:focus-within {
    border-color: var(--color-primary, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}
.smart-filter-bar .filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--color-primary-light, #eff6ff);
    color: var(--color-primary, #3b82f6);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
    animation: chip-in 0.15s ease-out;
}
@keyframes chip-in {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}
.smart-filter-bar .filter-chip .chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-primary, #3b82f6);
    font-size: 0.7rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.1s;
}
.smart-filter-bar .filter-chip .chip-remove:hover {
    background: rgba(59, 130, 246, 0.15);
}
.smart-filter-bar .filter-input {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    background: transparent;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text, #1e293b);
    padding: 0.2rem 0;
}
.smart-filter-bar .filter-input::placeholder {
    color: var(--color-text-faint, #cbd5e1);
}
.smart-filter-bar .filter-clear-all {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border: none;
    background: var(--color-surface-alt, #f8fafc);
    color: var(--color-text-muted, #94a3b8);
    font-size: var(--text-xs, 0.75rem);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.smart-filter-bar .filter-clear-all:hover {
    background: var(--color-danger-soft, #fef2f2);
    color: var(--color-danger, #ef4444);
}
[data-theme="dark"] .smart-filter-bar {
    background: var(--color-surface, #1e293b);
    border-color: var(--color-border, #334155);
}
[data-theme="dark"] .smart-filter-bar .filter-chip {
    background: rgba(59, 130, 246, 0.15);
}

/* ── Filter bar icon + quick-filter dropdown ── */
.filter-bar-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-text-muted, #94a3b8);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    padding-right: 0.25rem;
    border-right: 1px solid var(--color-border, #e2e8f0);
    margin-right: 0.15rem;
    user-select: none;
}
.filter-bar-icon svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.filter-bar-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm, 4px);
    border: none;
    background: transparent;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    margin-left: auto;
}
.filter-bar-dropdown-trigger:hover {
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text, #1e293b);
}
.filter-bar-dropdown-trigger svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    transition: transform 0.15s;
}
.filter-bar-dropdown-trigger.open svg {
    transform: rotate(180deg);
}
[data-theme="dark"] .filter-bar-icon {
    border-right-color: var(--color-border, #334155);
}
[data-theme="dark"] .filter-bar-dropdown-trigger:hover {
    background: rgba(255,255,255,0.06);
}

/* Quick-filter dropdown menu */
.filter-quick-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding: 0.5rem 0;
    max-height: 320px;
    overflow-y: auto;
    animation: filter-dropdown-in 0.15s ease-out;
}
@keyframes filter-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.filter-quick-menu-section {
    padding: 0.25rem 0;
}
.filter-quick-menu-section:not(:last-child) {
    border-bottom: 1px solid var(--color-border, #e2e8f0);
}
.filter-quick-menu-title {
    padding: 0.3rem 0.75rem 0.2rem;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #94a3b8);
}
.filter-quick-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text, #1e293b);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.1s;
    font-family: inherit;
}
.filter-quick-menu-item:hover {
    background: var(--color-surface-alt, #f8fafc);
}
.filter-quick-menu-item.active {
    color: var(--color-primary, #4f46e5);
    font-weight: 600;
}
.filter-quick-menu-count {
    font-size: 0.7rem;
    color: var(--color-text-muted, #94a3b8);
    min-width: 1.2rem;
    text-align: right;
}
.filter-active-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    background: var(--color-primary, #4f46e5);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0 4px;
    margin-left: 0.25rem;
}
[data-theme="dark"] .filter-quick-menu {
    background: var(--color-surface, #1e293b);
    border-color: var(--color-border, #334155);
    box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}
[data-theme="dark"] .filter-quick-menu-item:hover {
    background: rgba(255,255,255,0.04);
}

/* Mobile collapsed filter */
@media (max-width: 600px) {
    .filter-bar-icon span.filter-bar-text {
        display: none;
    }
}

/* ── Filter Status Bar (shown below smart filter bar when filters narrow the list) ── */
.filter-status-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-primary-light, #eff6ff);
    border: 1px solid var(--color-primary-soft, rgba(59,130,246,0.15));
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text, #1e293b);
    line-height: 1.5;
    margin-bottom: 0.5rem;
    animation: chip-in 0.15s ease-out;
}
.filter-status-bar .filter-status-text {
    flex: 1;
    min-width: 0;
}
.filter-status-bar .filter-status-clear {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-primary, #3b82f6);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    cursor: pointer;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm, 4px);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.filter-status-bar .filter-status-clear:hover {
    background: var(--color-danger-soft, #fef2f2);
    color: var(--color-danger, #ef4444);
}
[data-theme="dark"] .filter-status-bar {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.18);
}

/* ── Fix Tour Chip ── */
.fix-tour-chip {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: 999px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.06);
    font-size: var(--text-sm, 0.875rem);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    backdrop-filter: blur(8px);
    white-space: nowrap;
}
.fix-tour-chip.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.fix-tour-chip-icon {
    font-size: 1rem;
}
.fix-tour-chip-label {
    font-weight: 600;
    color: var(--color-text, #1e293b);
}
.fix-tour-chip-btn {
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--color-border, #e2e8f0);
    background: var(--color-surface-alt, #f8fafc);
    color: var(--color-text, #1e293b);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.1s;
}
.fix-tour-chip-btn:hover {
    background: var(--color-surface, #fff);
    border-color: var(--color-primary, #4f46e5);
}
.fix-tour-chip-btn-primary {
    background: var(--color-primary, #4f46e5);
    color: #fff;
    border-color: var(--color-primary, #4f46e5);
}
.fix-tour-chip-btn-primary:hover {
    background: var(--color-primary-dark, #4338ca);
}
.fix-tour-chip-done {
    font-size: 0.75rem;
    color: #22c55e;
    font-weight: 600;
}
.fix-tour-chip-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--color-text-muted, #94a3b8);
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.1s;
}
.fix-tour-chip-close:hover {
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-danger, #ef4444);
}
[data-theme="dark"] .fix-tour-chip {
    background: rgba(30, 41, 59, 0.96);
    border-color: var(--color-border, #334155);
}

/* Fix Tour row highlight (amber variant) */
.fix-tour-active {
    position: relative;
    z-index: 2;
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
    box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.12), 0 0 16px rgba(245, 158, 11, 0.15);
    animation: fix-tour-glow 1.2s ease-in-out infinite alternate;
}
@keyframes fix-tour-glow {
    from { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0.12), 0 0 16px rgba(245, 158, 11, 0.15); }
    to   { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0.20), 0 0 24px rgba(245, 158, 11, 0.22); }
}

/* ---------- File Format Badge ---------- */
.file-format-badge {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text-secondary, #64748b);
    border: 1px solid var(--color-border, #e2e8f0);
    vertical-align: middle;
    line-height: 1.3;
    text-transform: uppercase;
    white-space: nowrap;
}
[data-theme="dark"] .file-format-badge {
    background: var(--color-surface-alt, #1e293b);
    color: var(--color-text-muted, #94a3b8);
    border-color: var(--color-border, #334155);
}

/* ---------- Document Link Skip Button ---------- */
.doc-link-skip-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface-alt, #f8fafc);
    border: 1.5px dashed var(--color-border, #cbd5e1);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}
.doc-link-skip-btn:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    background: var(--color-surface, #f1f5f9);
    border-style: solid;
}
.doc-link-skip-btn:active {
    transform: scale(0.98);
}
[data-theme="dark"] .doc-link-skip-btn {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--color-border, #334155);
}
[data-theme="dark"] .doc-link-skip-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-text-muted);
}

/* ---------- Row Action Menu ---------- */
.action-menu-wrap {
    position: relative;
    display: inline-block;
}
.action-menu-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.action-menu-trigger:hover {
    background: var(--color-surface-alt);
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

/* Subtle nudge pulse on ⋯ menu after saving an invoice/quote */
.action-menu-trigger.nudge-flash {
    animation: menuNudgePulse 0.6s ease-in-out 3;
    border-color: var(--color-primary);
    color: var(--color-primary);
}
@keyframes menuNudgePulse {
    0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0.45); transform: scale(1); }
    50%  { box-shadow: 0 0 0 6px rgba(99,102,241,0); transform: scale(1.12); }
    100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); transform: scale(1); }
}

/* ── Flash highlight on newly created/updated row ── */
@keyframes newRowFlash {
    0%   { background-color: rgba(99,102,241,0.18); }
    40%  { background-color: rgba(99,102,241,0.08); }
    70%  { background-color: rgba(99,102,241,0.14); }
    100% { background-color: transparent; }
}
tr.row-flash-new > td {
    animation: newRowFlash 2s ease-out;
}
/* Dark mode subtle adjustment */
[data-theme="dark"] tr.row-flash-new > td {
    animation: newRowFlashDark 2s ease-out;
}
@keyframes newRowFlashDark {
    0%   { background-color: rgba(129,140,248,0.18); }
    40%  { background-color: rgba(129,140,248,0.07); }
    70%  { background-color: rgba(129,140,248,0.12); }
    100% { background-color: transparent; }
}

.action-menu-dropdown {
    display: none;
    position: fixed;
    z-index: 9999;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 4px 0;
    animation: menuFadeIn 0.12s ease;
}
@keyframes menuFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.action-menu-dropdown.open {
    display: block;
}
.action-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    border: none;
    background: none;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
    white-space: nowrap;
}
.action-menu-item:hover {
    background: var(--color-surface-alt);
}
.action-menu-item svg {
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.action-menu-item:hover svg {
    color: var(--color-text);
}
.action-menu-item.menu-danger {
    color: var(--color-danger);
}
.action-menu-item.menu-danger svg {
    color: var(--color-danger);
}
.action-menu-item.menu-disabled {
    opacity: 0.38;
    pointer-events: none;
}
.action-menu-sep {
    height: 1px;
    background: var(--color-border);
    margin: 4px 0;
}


/* ---------- Status Badges ---------- */

.status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    padding: 2px 8px;
    border-radius: 9999px;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.status-draft       { background: var(--color-surface-alt); color: var(--color-text-muted); }
.status-draft .status-dot { background: var(--color-text-faint); }

.status-sent        { background: var(--color-info-bg); color: var(--color-info); }
.status-sent .status-dot  { background: var(--color-info); }

.status-paid        { background: var(--color-success-bg); color: var(--color-success); }
.status-paid .status-dot  { background: var(--color-success); }

.status-overdue     { background: var(--color-danger-bg); color: var(--color-danger); }
.status-overdue .status-dot { background: var(--color-danger); }

.status-partial     { background: var(--color-warning-bg); color: var(--color-warning); }
.status-partial .status-dot { background: var(--color-warning); }

.status-cancelled   { background: var(--color-surface-alt); color: var(--color-text-faint); }
.status-cancelled .status-dot { background: var(--color-text-faint); }

.status-accepted    { background: #dcfce7; color: #15803d; }
.status-accepted .status-dot { background: #15803d; }

.status-declined    { background: #fef2f2; color: #b91c1c; }
.status-declined .status-dot { background: #b91c1c; }

.status-converted   { background: #ede9fe; color: #7c3aed; }
.status-converted .status-dot { background: #7c3aed; }

/* Quote badge in invoice list */
.doc-type-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-left: 0.4rem;
}
.doc-type-badge.badge-quote {
    background: #fef3c7;
    color: #92400e;
}


/* ---------- Document Table: Entity & Period Badges ---------- */

.doc-entity-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: var(--text-xs);
    line-height: 1;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    border: 1px solid var(--color-border);
    max-width: 220px;
}

.doc-entity-type {
    display: inline-block;
    padding: 3px 7px;
    background: var(--color-primary, #4f46e5);
    color: #fff;
    font-weight: var(--weight-semibold, 600);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.doc-entity-name {
    display: inline-block;
    padding: 3px 8px;
    background: var(--color-surface-alt, #f8fafc);
    color: var(--color-text);
    font-weight: var(--weight-medium, 500);
    font-size: 0.72rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
}

.doc-period-badge {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-size: var(--text-xs);
    line-height: 1;
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.doc-period-quarter {
    display: inline-block;
    padding: 3px 7px;
    background: var(--color-info-bg, #eff6ff);
    color: var(--color-info, #2563eb);
    font-weight: var(--weight-semibold, 600);
    font-size: 0.68rem;
    white-space: nowrap;
}

.doc-period-year {
    display: inline-block;
    padding: 3px 7px;
    background: var(--color-surface-alt, #f8fafc);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium, 500);
    font-size: 0.68rem;
    white-space: nowrap;
}

.doc-table-empty {
    color: var(--color-text-faint, #ccc);
    font-size: var(--text-xs);
}

/* Dark theme overrides for document badges */
[data-theme="dark"] .doc-entity-type {
    background: var(--color-primary, #6366f1);
}

[data-theme="dark"] .doc-entity-name {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .doc-period-quarter {
    background: rgba(59, 130, 246, 0.15);
}

[data-theme="dark"] .doc-period-year {
    background: rgba(255, 255, 255, 0.05);
}


/* ---------- Empty State ---------- */

.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-4);
    color: var(--color-text-faint);
}

.empty-state-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.empty-state-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-6);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}


/* ---------- Smart Summary (Business Analysis Phrase) ---------- */

/* Dashboard Data Safety Strip */
.dashboard-safety-strip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    margin-bottom: 0.75rem;
    background: var(--color-surface-alt, #f8fafc);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
.dashboard-safety-text {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-safety-btn {
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition-fast);
    white-space: nowrap;
}
.dashboard-safety-btn:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.smart-summary {
    margin-bottom: var(--space-5);
    padding: var(--space-5) var(--space-6);
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-alt) 100%);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg);
    position: relative;
    box-shadow: var(--shadow-sm);
}

.smart-summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-info, #2563eb), transparent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.smart-summary-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-2);
}

.smart-summary-text {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--leading-normal);
    margin: 0;
}

[data-theme="dark"] .smart-summary {
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(129, 140, 248, 0.06) 100%);
}

/* ---------- Action Center ---------- */

.action-center-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-6);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border-top: 3px solid var(--color-warning, #f59e0b);
}

.action-center-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.action-center-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 2px;
}

.action-center-subtitle {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.action-center-list {
    padding: 0;
}

.action-center-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition-fast);
}

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

.action-center-item:hover {
    background: var(--color-surface-alt);
}

.action-center-item-danger {
    border-left: 3px solid var(--color-danger);
}

.action-center-item-warn {
    border-left: 3px solid var(--color-warning);
}

.action-center-item-info {
    border-left: 3px solid var(--color-info);
}

.action-center-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.action-center-item-danger .action-center-icon { color: var(--color-danger); }
.action-center-item-warn .action-center-icon   { color: var(--color-warning); }
.action-center-item-info .action-center-icon   { color: var(--color-info); }

.action-center-text {
    flex: 1;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    min-width: 0;
}

.action-center-btns {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

.action-center-btns .btn {
    font-size: 0.7rem;
    padding: 3px 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.action-center-btns .btn:hover {
    background: var(--color-accent);
    color: var(--color-accent-inverse);
    border-color: var(--color-accent);
}

/* Action Center: all-clear state */
.action-center-clear {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-success-bg);
    border-color: rgba(34, 197, 94, 0.2);
}

.action-center-clear svg {
    color: var(--color-success);
}

.action-center-clear-title {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 2px;
}

.action-center-clear-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ── Action Center: Welcome card for new users ── */
.action-center-welcome {
    display: flex;
    flex-direction: column;
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.action-center-welcome-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: 0.25rem;
}
.action-center-welcome-sub {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}
.welcome-steps {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.welcome-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    transition: background 0.15s;
    font-size: var(--text-sm);
    color: var(--color-text);
}
.welcome-step:hover:not(.welcome-step-done) {
    background: var(--color-surface-alt, #f8fafc);
}
.welcome-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    flex-shrink: 0;
}
.welcome-step-done .welcome-step-num {
    background: var(--color-success, #22c55e);
}
.welcome-step-done .welcome-step-text {
    text-decoration: line-through;
    color: var(--color-text-muted);
}
.welcome-step-text {
    flex: 1;
}
.welcome-reassure {
    margin-top: 0.5rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: center;
}

/* ── Improved empty state with icon and CTA ── */
.empty-state .btn {
    margin-top: var(--space-2);
}

@media (max-width: 600px) {
    .action-center-item {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding: var(--space-3);
    }
    .action-center-btns {
        width: 100%;
        justify-content: flex-end;
    }
    .action-center-text {
        flex: 1 1 calc(100% - 32px);
    }
}

/* ── Action Center: Alive/vibrant mode ── */
.action-center-alive {
    border-top: 3px solid var(--color-danger, #ef4444);
    animation: ac-entrance 0.4s ease-out;
    box-shadow: 0 2px 16px rgba(245, 158, 11, 0.10), var(--shadow-sm);
}

@keyframes ac-entrance {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.action-center-alive .action-center-header {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.06) 0%, rgba(239, 68, 68, 0.04) 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-center-header-icon {
    display: inline-flex;
    color: var(--color-warning, #f59e0b);
    animation: ac-icon-pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes ac-icon-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.12); }
}

.action-center-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    border-radius: 12px;
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--color-danger, #ef4444);
    color: #fff;
    padding: 0 6px;
    animation: ac-badge-pop 0.5s ease-out 0.3s both;
}

@keyframes ac-badge-pop {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

.action-center-alive .action-center-item {
    transition: background var(--transition-fast), transform 0.15s ease;
}

.action-center-alive .action-center-item:hover {
    transform: translateX(3px);
}

.action-center-alive .action-center-item-danger {
    background: rgba(239, 68, 68, 0.04);
}

.action-center-alive .action-center-item-warn {
    background: rgba(245, 158, 11, 0.03);
}

.action-center-action-btn {
    font-size: 0.7rem;
    padding: 3px 10px;
    border: 1px solid var(--color-primary, #4f46e5);
    border-radius: var(--radius-sm);
    color: #fff;
    background: var(--color-primary, #4f46e5);
    cursor: pointer;
    transition: background var(--transition-fast), transform 0.15s ease;
    font-weight: 600;
}

.action-center-action-btn:hover {
    background: var(--color-primary-hover, #4338ca);
    transform: translateY(-1px);
}

.action-center-dismiss-btn {
    font-size: 0.65rem;
    padding: 2px 7px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    background: transparent;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    line-height: 1;
}

.action-center-dismiss-btn:hover {
    background: var(--color-surface-alt);
    color: var(--color-danger, #ef4444);
}

/* ── Action Center: Mobile collapse (chevron + toggle) ── */
.action-center-chevron {
    display: none; /* hidden on desktop */
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .action-center-chevron {
        display: inline-flex;
    }

    .ac-collapsed .action-center-list {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        padding: 0;
        transition: max-height 0.35s ease, opacity 0.25s ease;
    }

    .action-center-alive:not(.ac-collapsed) .action-center-list {
        max-height: 600px;
        opacity: 1;
        transition: max-height 0.4s ease, opacity 0.3s ease 0.05s;
    }

    .ac-collapsed .action-center-chevron {
        transform: rotate(-90deg);
    }

    .ac-collapsed .action-center-header {
        border-bottom: none;
    }

    /* Compact header when collapsed */
    .ac-collapsed .action-center-subtitle {
        display: none;
    }
}

/* ── Spotlight Highlight Effect ── */
.spotlight-highlight {
    position: relative;
    z-index: 2;
    outline: 2px solid var(--color-primary, #4f46e5);
    outline-offset: 3px;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.12), 0 0 20px rgba(79, 70, 229, 0.15);
    animation: spotlight-glow 1.2s ease-in-out infinite alternate;
}

@keyframes spotlight-glow {
    from { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.12), 0 0 20px rgba(79, 70, 229, 0.15); }
    to   { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0.20), 0 0 30px rgba(79, 70, 229, 0.22); }
}

.spotlight-highlight-out {
    animation: none;
    outline-color: transparent;
    box-shadow: none;
    transition: all 0.5s ease-out;
}

/* ── Tour field: "Continue" button (replaces "Skip") ── */
.tour-field-continue {
    padding: 0.3rem 0.75rem;
    font-size: var(--text-xs);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-primary, #4f46e5);
    cursor: pointer;
    font-weight: 600;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.tour-field-continue:hover {
    background: var(--color-primary, #4f46e5);
    color: #fff;
}


/* ---------- Chart Bar Value Labels ---------- */

.chart-bar-value {
    font-size: 0.55rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
    line-height: 1;
    padding-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ---------- Dashboard Projects Mobile ---------- */

.dash-projects-card {
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--color-primary);
}

.dash-projects-summary {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: var(--text-sm);
    flex-wrap: wrap;
}

.dash-project-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
}

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

.dash-project-name {
    flex: 1;
    min-width: 0;
}

.dash-project-col {
    width: 90px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
}

@media (max-width: 600px) {
    .dash-project-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.375rem;
        padding: 0.625rem 0;
    }
    .dash-project-cols-header {
        display: none !important;
    }
    .dash-project-col {
        width: auto;
        text-align: left;
        display: flex;
        justify-content: space-between;
        font-size: var(--text-xs);
        gap: 0.5rem;
    }
    .dash-projects-summary {
        gap: 0.75rem;
        font-size: var(--text-xs);
    }
    .smart-summary {
        padding: var(--space-4);
    }
    .smart-summary-text {
        font-size: var(--text-md);
    }
    .smart-summary-label {
        font-size: 0.625rem;
    }
    .chart-bar-value {
        font-size: 0.5rem;
    }
}

/* ---------- Dashboard Quick Action Bar ---------- */

/* ---------- Dashboard Header Row ---------- */
.dashboard-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--space-2);
}

.dashboard-header-row .page-subtitle {
    margin-bottom: 0;
}

/* ---------- Quick Add Dropdown ---------- */
.quick-add-wrap {
    position: relative;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.quick-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    white-space: nowrap;
    border-radius: var(--radius-md);
}

.quick-add-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 120;
    display: none;
    padding: 0.375rem 0;
}

.quick-add-menu.open {
    display: block;
}

.quick-add-separator {
    height: 1px;
    margin: 0.3rem 0.75rem;
    background: var(--color-border);
}

.quick-add-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    background: none;
    border: none;
    cursor: pointer;
    transition: background 0.1s ease;
    text-align: left;
    line-height: 1.4;
}

.quick-add-menu-item:hover {
    background: var(--color-bg-hover, #f3f4f6);
}

.quick-add-menu-item > span:first-child {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Legacy: keep for mobile Quick Receipt FAB and other pages */
.dashboard-quick-bar {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.btn-quick-receipt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-success, #22c55e);
    background: var(--color-success, #22c55e);
    color: #fff;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    white-space: nowrap;
}

.btn-quick-receipt:hover {
    opacity: 0.9;
}

/* ---------- Quick Receipt FAB (mobile, expenses page) ---------- */
.quick-receipt-fab {
    position: fixed;
    /* Sit above bottom nav + safe area, right side */
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 18px);
    right: 16px;
    z-index: 200;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: var(--color-success, #22c55e);
    color: #fff;
    box-shadow: 0 4px 14px rgba(34, 197, 94, 0.35);
    cursor: pointer;
    display: none; /* only show on mobile */
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.quick-receipt-fab:active {
    transform: scale(0.92);
}
.quick-receipt-fab svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .quick-receipt-fab {
        display: flex;
    }
}

/* ---------- Tax Auto-Calc Button (in expense/receipt forms) ---------- */
.tax-auto-calc-btn {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-xs) !important;
    padding: 0.3rem 0.65rem !important;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-primary, #4f46e5) !important;
    background: var(--color-primary-light, rgba(79, 70, 229, 0.08)) !important;
    color: var(--color-primary, #4f46e5) !important;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
}
.tax-auto-calc-btn:hover {
    background: var(--color-primary, #4f46e5) !important;
    color: #fff !important;
}
.tax-auto-calc-btn:active {
    transform: scale(0.96);
}
.tax-auto-calc-btn.tax-calc-applied {
    background: var(--color-success, #22c55e) !important;
    border-color: var(--color-success, #22c55e) !important;
    color: #fff !important;
}

/* ---------- Tax Rate Picker (per-transaction tax selection) ---------- */
.tax-rate-picker {
    padding: 0.5rem 0.6rem;
    background: var(--color-surface-alt, #f9fafb);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.tax-rate-chip {
    user-select: none;
    line-height: 1.2;
}
.tax-rate-chip:hover {
    filter: brightness(0.96);
}

/* ---------- Product Autocomplete Dropdown (in-modal) ---------- */
.product-autocomplete-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 500;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    max-height: 180px;
    overflow-y: auto;
}
@media (max-width: 768px) {
    .product-autocomplete-dropdown {
        max-height: 150px;
        /* On mobile: position inline below the input instead of floating over it */
        position: relative;
        left: 0;
        right: 0;
        width: 100%;
        top: auto;
        margin-top: 2px;
    }
}


/* ---------- Smart Nudge System ---------- */

/* Pulse glow animation — one soft ring that expands and fades */
@keyframes nudge-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.35); }
    70%  { box-shadow: 0 0 0 8px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
@keyframes nudge-pulse-warning {
    0%   { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.35); }
    70%  { box-shadow: 0 0 0 8px rgba(245, 158, 11, 0); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}
@keyframes nudge-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Pulse glow on element */
.nudge-pulse {
    animation: nudge-pulse 1.5s ease-out 2;
    border-color: var(--color-primary, #4f46e5) !important;
}
.nudge-pulse-warning {
    animation: nudge-pulse-warning 1.5s ease-out 2;
    border-color: var(--color-warning, #f59e0b) !important;
}

/* Inline nudge hint — small contextual tip below a field or section */
.nudge-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-top: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--color-primary, #4f46e5);
    background: rgba(79, 70, 229, 0.06);
    border-left: 3px solid var(--color-primary, #4f46e5);
    border-radius: var(--radius-sm);
    animation: nudge-fade-in 0.4s ease-out;
    transition: opacity 0.3s ease, max-height 0.3s ease;
    overflow: hidden;
}
.nudge-hint.warning {
    color: var(--color-warning, #f59e0b);
    background: rgba(245, 158, 11, 0.06);
    border-left-color: var(--color-warning, #f59e0b);
}
.nudge-hint.success {
    color: var(--color-success, #22c55e);
    background: rgba(34, 197, 94, 0.06);
    border-left-color: var(--color-success, #22c55e);
}

.nudge-hint-text {
    flex: 1;
    min-width: 0;
}

.nudge-hint-action {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary, #4f46e5);
    background: none;
    border: 1px solid var(--color-primary, #4f46e5);
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.5rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nudge-hint-action:hover {
    background: var(--color-primary, #4f46e5);
    color: #fff;
}
.nudge-hint.warning .nudge-hint-action {
    color: var(--color-warning, #f59e0b);
    border-color: var(--color-warning, #f59e0b);
}
.nudge-hint.warning .nudge-hint-action:hover {
    background: var(--color-warning, #f59e0b);
    color: #fff;
}

.nudge-hint-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.7rem;
    padding: 0 0.25rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.nudge-hint-dismiss:hover {
    opacity: 1;
}

/* Dashboard nudge banner — slightly larger, card-like */
.nudge-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    margin-bottom: 0.75rem;
    background: rgba(79, 70, 229, 0.05);
    border: 1px solid rgba(79, 70, 229, 0.15);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text);
    animation: nudge-fade-in 0.5s ease-out;
    transition: opacity 0.3s ease;
}
.nudge-banner.warning {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
}
.nudge-banner-text {
    flex: 1;
    min-width: 0;
}
.nudge-banner-action {
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary, #4f46e5);
    background: none;
    border: 1px solid var(--color-primary, #4f46e5);
    border-radius: var(--radius-sm);
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nudge-banner-action:hover {
    background: var(--color-primary, #4f46e5);
    color: #fff;
}
.nudge-banner-dismiss {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 1rem;
    padding: 0;
    line-height: 1;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.nudge-banner-dismiss:hover {
    opacity: 1;
}

/* Dark theme adjustments */
[data-theme="dark"] .nudge-hint {
    background: rgba(79, 70, 229, 0.1);
}
[data-theme="dark"] .nudge-hint.warning {
    background: rgba(245, 158, 11, 0.1);
}
[data-theme="dark"] .nudge-hint.success {
    background: rgba(34, 197, 94, 0.1);
}
[data-theme="dark"] .nudge-banner {
    background: rgba(79, 70, 229, 0.08);
    border-color: rgba(79, 70, 229, 0.2);
}
[data-theme="dark"] .nudge-banner.warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.25);
}

@media (max-width: 480px) {
    .nudge-hint {
        padding: 0.4rem 0.6rem;
        gap: 0.35rem;
    }
    .nudge-banner {
        flex-wrap: wrap;
        padding: 0.5rem 0.75rem;
        gap: 0.4rem;
    }
}


/* ---------- Data Trust Banner ---------- */

.trust-banner {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.02) 100%);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--color-text-secondary);
    flex-wrap: wrap;
}

.trust-banner-text {
    flex: 1;
    min-width: 0;
}

.trust-banner-link {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.trust-banner-link:hover {
    text-decoration: underline;
}

@media (max-width: 600px) {
    .trust-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
        padding: 0.5rem 0.75rem;
    }
    .trust-banner-link {
        align-self: flex-end;
    }
}

/* ---------- Guidance Callouts ---------- */

.guidance {
    position: relative;
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-5);
}

.guidance p {
    margin: 0;
}

.guidance p + p {
    margin-top: var(--space-2);
}

.guidance-title {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}

.guidance-info {
    border-left-color: var(--color-info);
}

.guidance-warn {
    border-left-color: var(--color-warning);
    background: var(--color-warning-bg);
}

.guidance-danger {
    border-left-color: var(--color-danger);
    background: var(--color-danger-bg);
}

.guidance-success {
    border-left-color: var(--color-success);
    background: var(--color-success-bg);
}

.guidance-compact {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Desktop: guidance collapsed by default behind a toggle */
.guidance-section {
    margin-bottom: var(--space-4);
}

.guidance-section .guidance {
    margin-bottom: var(--space-3);
}

.guidance-toggle-desktop {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: var(--text-xs);
    font-family: var(--font-sans);
    font-weight: var(--weight-medium);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    margin-bottom: var(--space-2);
}

.guidance-toggle-desktop svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.guidance-toggle-desktop:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.guidance-toggle-desktop.open {
    color: var(--color-text);
    border-color: var(--color-border-strong);
}

.guidance-body-desktop {
    display: none;
    animation: guidance-slide-in 0.2s ease-out;
}

.guidance-body-desktop.open {
    display: block;
}

@keyframes guidance-slide-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* FIX #4: Guidance callouts — collapsed on mobile with info icon toggle */
.guidance-toggle {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    .guidance.guidance-collapsible {
        padding: 0;
        border: none;
        background: none;
        margin-bottom: var(--space-3);
        border-left: none;
    }

    .guidance-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: auto;
        padding: 6px 12px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-text-muted);
        cursor: pointer;
        font-size: var(--text-xs);
        font-family: var(--font-sans);
        transition: background 0.15s ease, color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .guidance-toggle svg {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .guidance-toggle:hover,
    .guidance-toggle:active {
        background: var(--color-surface-alt);
        color: var(--color-text);
    }

    .guidance-toggle-label {
        font-weight: 500;
    }

    .guidance-body {
        display: none;
        padding: var(--space-3) var(--space-4);
        font-size: var(--text-xs);
        color: var(--color-text-muted);
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-left: 3px solid var(--color-border-strong);
        border-radius: var(--radius-md);
        margin-top: var(--space-2);
        animation: nudge-fade-in 0.25s ease-out;
    }

    .guidance.guidance-collapsible.guidance-open .guidance-body {
        display: block;
    }

    .guidance.guidance-collapsible.guidance-open .guidance-toggle {
        background: var(--color-surface-alt);
        color: var(--color-primary, #4f46e5);
        border-color: var(--color-primary, #4f46e5);
    }
}


/* ---------- Modal ---------- */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 400;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal-overlay.open {
    display: flex;
}

.modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.modal-close {
    padding: var(--space-1);
    color: var(--color-text-muted);
    transition: color var(--transition-fast);
}

.modal-close:hover {
    color: var(--color-text);
}

.modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: var(--space-5);
}

.modal-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
}

/* ---------- Confirm Action Dialog ---------- */

.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 450;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.confirm-dialog {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    text-align: center;
}

.confirm-icon {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.confirm-title {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    margin-bottom: 0.5rem;
}

.confirm-message {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.confirm-actions .btn {
    min-width: 100px;
    padding: 0.5rem 1.25rem;
}

/* Slide-in animation for confirm dialog */
.animate-slide-in {
    animation: confirmSlideIn 0.2s ease-out;
}

@keyframes confirmSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}


/* ---------- Timeline ---------- */

.timeline {
    position: relative;
    padding-left: var(--space-6);
}

.timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: var(--color-border);
}

.timeline-item {
    position: relative;
    padding-bottom: var(--space-4);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-dot {
    position: absolute;
    left: calc(-1 * var(--space-6) + 3px);
    top: 4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-border-strong);
    border: 2px solid var(--color-surface);
}

.timeline-item:first-child .timeline-dot {
    background: var(--color-text);
}

.timeline-content {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.timeline-date {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    margin-top: 2px;
}


/* ---------- Tabs ---------- */

.tabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    border-bottom: none;
}

.tab {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    background: var(--color-surface-alt, #f3f4f6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full, 999px);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tab:hover {
    color: var(--color-text);
    background: var(--color-surface);
    border-color: var(--color-text-muted);
}

.tab.active {
    color: var(--color-primary, #4f46e5);
    background: var(--color-primary-light, #eff6ff);
    border-color: var(--color-primary, #4f46e5);
    font-weight: var(--weight-semibold, 600);
    box-shadow: 0 0 0 1px var(--color-primary, #4f46e5);
}

.tab-count {
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    margin-left: var(--space-1);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}


/* ---------- Onboarding Tour ---------- */

.tour-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #93c5fd;
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 1.25rem;
}
[data-theme="dark"] .tour-bar {
    background: linear-gradient(135deg, #1e3a5f 0%, #14532d 100%);
    border-color: #3b82f6;
}
.tour-bar-dots {
    display: flex;
    align-items: center;
    gap: 0;
}
.tour-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--color-border, #e2e8f0);
    color: var(--color-text-muted, #94a3b8);
    transition: all 0.25s ease;
}
.tour-dot.done {
    background: #22c55e;
    color: #fff;
}
.tour-dot.active {
    background: var(--color-primary, #4f46e5);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    transform: scale(1.1);
}
.tour-dot-line {
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--color-border, #e2e8f0);
    transition: background 0.25s ease;
}
.tour-dot-line.done {
    background: #22c55e;
}
.tour-bar-info {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.tour-bar-step {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-primary, #4f46e5);
}
.tour-bar-title {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text);
}
.tour-bar-desc {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted);
    line-height: 1.5;
    flex: 1 1 100%;
}
.tour-bar-btn {
    margin-left: auto;
}
.tour-bar-skip {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #94a3b8);
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0.25rem 0.5rem;
    opacity: 0.75;
    transition: opacity 0.2s, color 0.2s;
    white-space: nowrap;
}
.tour-bar-skip:hover {
    opacity: 1;
    color: var(--color-text);
}

/* Tour field-by-field hints */
.tour-field-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #86efac;
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: #166534;
    margin: 0.35rem 0;
    animation: tourHintAppear 0.3s ease;
}
[data-theme="dark"] .tour-field-hint {
    background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
    border-color: #22c55e;
    color: #86efac;
}
@keyframes tourHintAppear {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tour-field-skip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-text-muted);
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s;
}
.tour-field-skip:active {
    background: var(--color-surface-alt);
}

/* Tour "Continue" card */
.tour-continue-card {
    padding: 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #86efac;
    border-radius: var(--radius-lg, 12px);
    margin-top: 1rem;
    animation: tourHintAppear 0.3s ease;
}
[data-theme="dark"] .tour-continue-card {
    background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
    border-color: #22c55e;
}

/* Tour transition overlay */
.tour-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.tour-transition-overlay.visible {
    opacity: 1;
}
.tour-transition-card {
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    padding: 2rem;
    max-width: 400px;
    width: 100%;
    text-align: center;
}
.tour-t-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.25rem;
}
.tour-t-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--color-border, #e2e8f0);
    color: var(--color-text-muted, #94a3b8);
    transition: all 0.3s ease;
}
.tour-t-dot.done,
.tour-t-dot.just-done {
    background: #22c55e;
    color: #fff;
}
.tour-t-dot.just-done {
    animation: tourDotPop 0.4s ease;
}
@keyframes tourDotPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.tour-t-dot.next {
    background: var(--color-primary, #4f46e5);
    color: #fff;
    opacity: 0.5;
}
.tour-t-line {
    display: inline-block;
    width: 28px;
    height: 2px;
    background: var(--color-border, #e2e8f0);
    transition: background 0.3s ease;
}
.tour-t-line.done {
    background: #22c55e;
}
.tour-t-check {
    margin-bottom: 0.75rem;
}
.tour-t-done-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #22c55e;
    margin-bottom: 0.25rem;
}
.tour-t-title {
    font-size: var(--text-lg, 1.125rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.tour-t-text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
.tour-t-next-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: var(--text-sm, 0.875rem);
}
.tour-t-next-label {
    color: var(--color-text-muted);
}
.tour-t-next-value {
    font-weight: 600;
    color: var(--color-primary, #4f46e5);
}
.tour-t-btn {
    width: 100%;
}

/* Tour complete overlay */
.tour-complete-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.tour-complete-overlay.visible {
    opacity: 1;
}
.tour-complete-card {
    background: var(--color-surface, #fff);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    padding: 2rem;
    max-width: 440px;
    width: 100%;
    text-align: center;
}
.tour-complete-icon {
    margin-bottom: 0.75rem;
}
.tour-complete-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.5rem;
}
.tour-complete-text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin-bottom: 1.25rem;
}
.tour-complete-reminders {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
    text-align: left;
}
.tour-reminder-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text);
    padding: 0.35rem 0;
}
.tour-complete-btn {
    width: 100%;
}

/* Tour review card (invoice review step) */
.tour-review-card {
    padding: 1.25rem;
    background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 100%);
    border: 1px solid #93c5fd;
    border-radius: var(--radius-lg, 12px);
    margin-bottom: 1.25rem;
}
[data-theme="dark"] .tour-review-card {
    background: linear-gradient(135deg, #1e3a5f 0%, #14532d 100%);
    border-color: #3b82f6;
}
.tour-review-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
}


/* ---------- Toast / Notification ---------- */

.toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: 450;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-text);
    color: #fff;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: toast-in 200ms ease;
    flex-wrap: wrap;
}

.toast-text {
    flex: 1;
    min-width: 0;
}

.toast-action {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: #fff;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    font-family: inherit;
}

.toast-action:hover {
    background: rgba(255, 255, 255, 0.35);
}

.toast-action-secondary {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.toast-action-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Dual-action toast: wrap text + actions vertically for cleaner layout */
.toast-dual-action {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast-dual-action .toast-text {
    margin-bottom: 0.1rem;
}
.toast-actions {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.toast-actions .toast-action {
    flex: 1;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding: 0.35rem 0.5rem;
}

.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-danger);  }

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ---------- Update Banner ---------- */

.update-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

.update-banner.visible {
    transform: translateY(0);
    opacity: 1;
}

.update-banner-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.5rem;
}

.update-banner-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft, rgba(99, 102, 241, 0.1));
    color: var(--color-primary);
    border-radius: 50%;
}

.update-banner-text {
    flex: 1;
    min-width: 0;
}

.update-banner-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
    margin-bottom: 2px;
}

.update-banner-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.update-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.update-banner-progress {
    height: 3px;
    background: var(--color-border);
    overflow: hidden;
}

.update-banner-progress-bar {
    height: 100%;
    background: var(--color-primary);
    width: 0%;
    transition: width 0.4s ease;
    border-radius: 0 0 2px 2px;
}

@media (max-width: 768px) {
    .update-banner-inner {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }
    .update-banner-icon {
        width: 32px;
        height: 32px;
    }
    .update-banner-icon svg {
        width: 18px;
        height: 18px;
    }
    .update-banner-text {
        flex: 1 1 calc(100% - 48px);
    }
    .update-banner-actions {
        width: 100%;
        justify-content: flex-end;
    }
}


/* ---------- Language Toggle ---------- */

.lang-toggle {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.lang-toggle:hover {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}


/* ---------- Detail Panel ---------- */

.detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.detail-title-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.detail-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
}

.detail-actions {
    display: flex;
    gap: var(--space-2);
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.detail-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-block-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.detail-block-value {
    font-size: var(--text-sm);
    color: var(--color-text);
}


/* ---------- Invoice Preview ---------- */

.invoice-preview {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-lg, 12px);
    padding: 2rem 2.5rem;
    max-width: 750px;
    color: #1a1a1a;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

[data-theme="dark"] .invoice-preview {
    background: var(--color-surface);
    border-color: var(--color-border);
    color: var(--color-text);
}

.invoice-preview-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-8);
}

.invoice-preview-company {
    font-size: var(--text-md);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.invoice-preview-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

.invoice-preview-title {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    letter-spacing: -0.02em;
    color: var(--color-text);
    text-align: right;
}

.invoice-preview-number {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: right;
    margin-top: var(--space-1);
}

.invoice-preview-parties {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
    font-size: var(--text-sm);
}

.invoice-preview-party-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.invoice-preview-table {
    width: 100%;
    font-size: var(--text-sm);
    margin-bottom: var(--space-6);
}

.invoice-preview-table th {
    text-align: left;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-text);
}

.invoice-preview-table td {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.invoice-preview-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.invoice-preview-total-row {
    display: flex;
    gap: var(--space-8);
    min-width: 200px;
    justify-content: space-between;
}

.invoice-preview-total-row.grand {
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    padding-top: var(--space-2);
    border-top: 2px solid var(--color-text);
}

.invoice-preview-notes {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}


/* ---------- Global Search (Spotlight) ---------- */

.search-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3125rem 0.75rem;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
    min-width: 180px;
}

.search-trigger:hover {
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

.search-trigger svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.5;
}

.search-trigger-label {
    flex: 1;
    text-align: left;
}

.search-kbd {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.04em;
    padding: 1px 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    color: var(--color-text-faint);
    line-height: 1.4;
}

.spotlight-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 500;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: min(20vh, 140px);
}

.spotlight-overlay.open {
    display: flex;
}

.spotlight {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0,0,0,0.15), 0 0 0 1px var(--color-border);
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    animation: spotlight-in 120ms ease-out;
}

@keyframes spotlight-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.spotlight-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

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

.spotlight-input {
    flex: 1;
    border: none;
    outline: none;
    background: none;
    font-size: var(--text-md);
    font-family: var(--font-sans);
    color: var(--color-text);
    padding: var(--space-1) 0;
}

.spotlight-input::placeholder {
    color: var(--color-text-faint);
}

.spotlight-esc {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: var(--weight-medium);
    padding: 2px 5px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    color: var(--color-text-faint);
    flex-shrink: 0;
}

.spotlight-close {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    line-height: 1;
    margin-left: var(--space-2);
    padding: 0;
}

.spotlight-close svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.spotlight-close:hover {
    background: var(--color-surface);
    border-color: var(--color-text-muted);
    color: var(--color-text);
}

/* On desktop, the ESC kbd hint is enough; show ✕ button on all devices */

/* On mobile/touch, hide the ESC kbd hint — the ✕ button is sufficient */
@media (pointer: coarse) {
    .spotlight-esc { display: none; }
}

.spotlight-results {
    max-height: 360px;
    overflow-y: auto;
}

.spotlight-group {
    padding: var(--space-1) 0;
}

.spotlight-group-title {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: var(--weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-faint);
    padding: var(--space-2) var(--space-4) var(--space-1);
}

.spotlight-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    transition: background-color 60ms;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.spotlight-item:hover,
.spotlight-item.active {
    background: var(--color-surface-alt);
}

.spotlight-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.spotlight-item:hover .spotlight-item-icon,
.spotlight-item.active .spotlight-item-icon {
    background: var(--color-border);
}

.spotlight-item-icon svg {
    width: 14px;
    height: 14px;
    stroke: var(--color-text-secondary);
}

.spotlight-item-text {
    flex: 1;
    min-width: 0;
}

.spotlight-item-title {
    font-weight: var(--weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotlight-item-title mark {
    background: none;
    color: var(--color-text);
    font-weight: var(--weight-bold);
    text-decoration: underline;
    text-decoration-color: var(--color-text-muted);
    text-underline-offset: 2px;
}

.spotlight-item-sub {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spotlight-item-badge {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--color-text-faint);
    flex-shrink: 0;
}

.spotlight-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm, 0.8rem);
}

.spotlight-hint {
    padding: var(--space-2) var(--space-4) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: 0.6875rem;
    color: var(--color-text-faint);
}

.spotlight-hint kbd {
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: var(--weight-medium);
    padding: 1px 4px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 3px;
    margin-right: 2px;
}

@media (max-width: 768px) {
    .search-trigger {
        min-width: auto;
        padding: 0.3125rem;
    }
    .search-trigger-label,
    .search-kbd {
        display: none;
    }
    .spotlight {
        max-width: calc(100vw - 2rem);
        margin: 0 1rem;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        width: 260px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    /* Dark backdrop behind open sidebar */
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 49;
        opacity: 0;
        transition: opacity 0.25s ease;
    }
    .sidebar-backdrop.visible {
        display: block;
        opacity: 1;
    }

    .main-content {
        margin-left: 0;
    }

    .menu-toggle {
        display: none; /* hidden on mobile — bottom nav replaces it */
    }

    .page-content,
    .page-content-wide {
        padding: var(--space-3);
    }

    .page-title {
        font-size: var(--text-lg);
        margin-bottom: var(--space-2);
    }

    .page-subtitle {
        display: none;
    }

    /* Hide guidance callouts on mobile — empty states already guide the user */
    .guidance {
        display: none;
    }

    /* Cleaner empty state on mobile */
    .empty-state {
        padding: var(--space-8) var(--space-4);
    }
    .empty-state-title {
        font-size: var(--text-sm);
    }
    .empty-state-desc {
        font-size: var(--text-xs);
        margin-bottom: var(--space-4);
    }
    /* Hide the second (redundant) description paragraph */
    .empty-state-desc + .empty-state-desc {
        display: none;
    }
    /* Hide add buttons inside empty states — toolbar already has one */
    .empty-state .btn {
        display: none;
    }

    /* Welcome card: full-width CTA should remain visible on mobile */
    .action-center-welcome {
        padding: var(--space-4);
    }
    .action-center-welcome .btn {
        display: block;
    }
    .action-center-welcome-title {
        font-size: var(--text-md);
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .stat-card {
        padding: var(--space-3);
    }

    .stat-value {
        font-size: var(--text-xl);
    }

    .dashboard-section {
        border-radius: var(--radius-md);
    }

    .dashboard-section-header {
        padding: var(--space-3) var(--space-4);
    }

    .dashboard-section-title {
        font-size: var(--text-sm);
        gap: var(--space-2);
    }

    .key-metrics-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }

    .key-metric-card {
        padding: var(--space-3);
    }

    .key-metric-value {
        font-size: var(--text-xl);
    }

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

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

    .invoice-preview-header {
        flex-direction: column;
        gap: var(--space-4);
    }

    .invoice-preview-title {
        text-align: left;
    }

    .invoice-preview-number {
        text-align: left;
    }

    .invoice-preview-parties {
        grid-template-columns: 1fr;
    }

    /* Responsive tables — card layout on mobile */
    .table-wrapper {
        overflow-x: visible;
    }

    .data-table {
        min-width: 0;
        width: 100%;
    }

    .data-table thead {
        display: none;
    }

    .data-table tbody {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .data-table tr {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 0.15rem 0.75rem;
        padding: var(--space-3) var(--space-4);
        padding-right: 3rem; /* space for actions */
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        position: relative;
    }

    .data-table td {
        display: inline;
        border-bottom: none;
        padding: 0;
        font-size: var(--text-sm);
        max-width: none;
        overflow: visible;
        text-overflow: unset;
        white-space: normal;
        vertical-align: baseline;
        grid-column: 1 / -1;
        line-height: 1.5;
    }

    /* First cell (name / number) — full width, bold, prominent */
    .data-table td:first-child {
        font-size: var(--text-base);
        font-weight: var(--weight-semibold);
        color: var(--color-text);
        margin-bottom: 0.1rem;
    }

    /* Secondary cells — muted, inline flow with separators */
    .data-table td:not(:first-child):not(.col-actions):not(.text-right) {
        display: inline;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }

    /* Amount cell — right-aligned on its own line, bold */
    .data-table td.text-right {
        font-size: var(--text-sm);
        font-weight: var(--weight-semibold);
        color: var(--color-text);
        text-align: left;
        margin-top: 0.25rem;
    }

    /* Actions cell — fixed to top-right corner */
    .data-table td.col-actions {
        position: absolute;
        right: var(--space-3);
        top: var(--space-3);
        width: auto;
        min-width: auto;
        box-shadow: none;
        background: transparent;
        grid-column: auto;
    }

    .data-table tr:hover td {
        background: transparent;
    }

    .data-table tr:hover .col-actions {
        background: transparent;
    }

    /* Date/mono cells — smaller, muted */
    .data-table td.mono {
        display: inline;
        font-size: var(--text-xs);
        color: var(--color-text-muted);
    }
    
    /* Add a subtle separator between inline secondary cells */
    .data-table td.mono + td:not(.col-actions):not(.text-right)::before {
        content: " · ";
        color: var(--color-border-strong);
        font-size: 0.6rem;
    }

    /* Status badges inline */
    .data-table td .status {
        font-size: 0.6875rem;
    }

    /* Modal full screen on mobile — use dvh to respect virtual keyboard */
    .modal-overlay.open {
        align-items: stretch;
        padding: 0;
        height: 100vh;
        height: 100dvh;
    }

    .modal {
        max-width: 100vw;
        width: 100vw;
        max-height: 100vh;
        max-height: 100dvh; /* dynamic vh: shrinks when keyboard opens */
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden; /* prevent modal itself from scrolling */
    }

    /* JS-driven keyboard-aware height (for browsers without dvh) */
    .modal.keyboard-open {
        height: var(--visual-vh, 100vh) !important;
        max-height: var(--visual-vh, 100vh) !important;
        transition: height 0.15s ease;
    }

    .modal-header {
        flex: 0 0 auto;
        position: relative;
        background: var(--color-surface);
        z-index: 2;
        border-bottom: 1px solid var(--color-border);
        /* Add safe-area on top of normal padding so notch doesn't cut the title */
        padding-top: calc(env(safe-area-inset-top, 0px) + var(--space-4));
    }

    .modal-body {
        flex: 1 1 0;
        min-height: 0; /* crucial for flex shrinking */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-4);
    }

    .modal-footer {
        flex: 0 0 auto;
        flex-direction: row;
        gap: var(--space-2);
        background: var(--color-surface);
        z-index: 2;
        border-top: 1px solid var(--color-border);
        padding: var(--space-3) var(--space-4);
        padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
    }

    .modal-footer .btn {
        flex: 1 1 0;
        min-height: 44px;
        font-size: var(--text-sm);
    }

    /* Touch-friendly tap targets */
    .btn {
        min-height: 40px;
        white-space: normal;
        word-break: break-word;
        font-size: var(--text-xs);
        padding: 0.5rem 0.65rem;
    }

    .btn-sm {
        min-height: 34px;
    }

    .sidebar-link {
        padding: 0.625rem var(--space-3);
        font-size: var(--text-base);
        min-height: 44px;
    }

    /* Toolbar stacking */
    .page-content-wide > div[style*="justify-content:space-between"] {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.5rem;
    }

    .table-search {
        width: 100%;
        min-width: 0;
    }

    /* Let toolbar button groups fill width on mobile */
    .page-content-wide > div[style*="justify-content:space-between"] > div[style*="display:flex"] {
        flex-wrap: wrap;
        width: 100%;
    }

    .page-content-wide > div[style*="justify-content:space-between"] .btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    /* Receipt button: allow text wrap */
    .btn-quick-receipt {
        white-space: normal;
        word-break: break-word;
    }

    /* Filter bar on invoices/projects */
    .filter-bar,
    .invoice-filter-bar {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .filter-bar .tab,
    .filter-bar .btn,
    .invoice-filter-bar .btn {
        font-size: var(--text-xs);
        padding: 0.35rem 0.5rem;
    }

    /* Dashboard health row */
    .dashboard-health-row {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Export layout */
    .export-layout {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    /* Export section: compact header on mobile */
    .export-section-header {
        gap: 0.65rem;
        padding: 0.75rem 0.85rem;
    }
    .export-section-icon {
        width: 36px;
        height: 36px;
    }
    .export-section-title {
        font-size: 0.9rem;
    }
    .export-section-desc {
        font-size: var(--text-xs);
        line-height: 1.35;
    }
    .export-section-body {
        padding: 0 0.85rem 1rem;
        overflow-x: hidden;
    }
    /* Export controls card on mobile */
    .export-controls.card,
    .export-preview.card {
        padding: var(--space-3);
    }
    .export-controls .card-body,
    .export-preview .card-body {
        padding: 0.25rem 0 0;
    }
    /* Export preview grid: 2-column on mobile, compact */
    .export-preview-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .export-preview-cell {
        padding: 0.5rem 0.35rem;
        font-size: var(--text-xs);
        gap: 0.15rem;
        min-width: 0;
        overflow: hidden;
    }
    .export-preview-cell .stat-value {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .export-preview-cell .stat-label {
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .export-preview-cell svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    .export-preview-summary {
        font-size: var(--text-xs);
        padding: 0.6rem;
        line-height: 1.5;
    }
    /* Export format badge + desc: compact */
    .export-format-desc {
        margin-top: 0.5rem;
    }
    .export-format-desc p {
        font-size: var(--text-xs) !important;
        line-height: 1.4;
    }
    .export-badge {
        font-size: 0.625rem;
        padding: 0.15rem 0.5rem;
    }
    /* Export status message */
    .export-status {
        font-size: var(--text-xs);
    }

    /* Confirm dialog */
    .confirm-dialog {
        max-width: calc(100vw - 2rem);
    }

    /* Collapsible section toggle icon */
    .section-collapse-icon {
        transition: transform 0.25s ease;
    }
    .section-collapse-icon.collapsed {
        transform: rotate(-90deg);
    }

    /* ── Activity section mobile ── */
    .tabs {
        flex-wrap: wrap;
        gap: var(--space-1);
    }
    .tab {
        flex: 0 1 auto;
        text-align: center;
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-xs);
        white-space: nowrap;
    }

    .timeline-item > div[style*="display:flex"] {
        flex-wrap: wrap;
        gap: 0.25rem 0.5rem;
    }
    .timeline-item .mono {
        min-width: auto;
        font-size: var(--text-xs);
    }
    .timeline-content {
        font-size: var(--text-xs);
        word-break: break-word;
    }
    .timeline-date {
        font-size: 0.625rem;
    }

    /* ── Settings section mobile ── */
    .page-content {
        padding: var(--space-3);
    }

    /* Accountant / Export Comptable mobile — prevent horizontal overflow */
    .comptable-header {
        padding: 1rem;
        margin: calc(-1 * var(--space-3));
        margin-bottom: 0;
    }
    .comptable-title {
        font-size: 1rem;
    }
    .comptable-subtitle {
        font-size: var(--text-xs);
    }
    .comptable-title-row {
        gap: 0.5rem;
    }
    .comptable-title-row svg {
        width: 20px;
        height: 20px;
    }
    .comptable-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .comptable-summary-cell {
        padding: 0.65rem 0.5rem;
        min-width: 0;
        overflow: hidden;
    }
    .comptable-summary-cell .stat-label {
        font-size: 0.6rem;
        letter-spacing: 0.03em;
        margin-bottom: 0.2rem;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .comptable-summary-cell .stat-value {
        font-size: 1.1rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .comptable-preflight {
        padding: 0.75rem;
    }
    .comptable-check-row {
        font-size: var(--text-xs);
        gap: 0.35rem;
        padding: 0.3rem 0.4rem;
    }
    .comptable-status-strip {
        gap: 0.5rem;
    }
    .comptable-status-badge {
        font-size: var(--text-xs);
        padding: 0.2rem 0.5rem;
    }
    .comptable-send-btn {
        padding: 0.75rem 1rem;
        font-size: var(--text-sm);
    }
    .comptable-send-label {
        font-size: var(--text-sm);
    }
    .comptable-file-item {
        font-size: var(--text-xs);
        padding: 0.4rem 0.6rem;
        gap: 0.35rem;
    }
    .export-section-body {
        overflow-x: hidden;
    }
    .backup-section-body {
        overflow-x: hidden;
    }
    .backup-section-header {
        gap: 0.75rem;
        padding: 0.85rem 1rem;
    }
    .backup-section-icon {
        width: 38px;
        height: 38px;
    }
    .backup-section-title {
        font-size: 0.95rem;
    }
    .backup-section-desc {
        font-size: var(--text-xs);
    }
    .backup-section-body {
        padding: 0 1rem 1rem;
    }
    .backup-status-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1rem;
    }
    .backup-folder-hero,
    .backup-auto-card,
    .backup-now-card {
        padding: 1rem;
    }
    .backup-onboard-wizard {
        padding: 1rem 1.15rem;
    }
    .backup-onboard-step {
        gap: 0.5rem;
    }
    .comptable-panel {
        overflow: hidden;
    }
    .comptable-body {
        padding: 1rem 0 0;
    }
    .comptable-tax-banner {
        flex-wrap: wrap;
        font-size: var(--text-xs);
        padding: 0.6rem 0.85rem;
        gap: 0.4rem;
    }
    .comptable-celebration {
        padding: 1rem 0.75rem;
    }
    .comptable-celebration-title {
        font-size: var(--text-base);
    }
    .comptable-celebration-sub {
        font-size: var(--text-xs);
    }

    /* ── Doc-Export mobile ── */
    .doc-export-header {
        padding: 1rem;
    }
    .doc-export-header h2 {
        font-size: 1rem !important;
    }
    .doc-export-header p {
        font-size: var(--text-xs) !important;
    }
    .doc-export-filters {
        flex-direction: column;
        gap: 0;
    }
    .doc-export-stats {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .doc-export-stat-cell {
        padding: 0.5rem 0.35rem;
        font-size: var(--text-xs);
        min-width: 0;
        overflow: hidden;
    }
    .doc-export-stat-cell .stat-value {
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .doc-export-stat-cell .stat-label {
        font-size: 0.6rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
    .doc-export-stat-cell svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
    }
    .doc-export-folder-preview {
        padding: 0.6rem 0.75rem;
    }
    .doc-export-tree {
        font-size: 0.65rem;
    }

    /* ── French overflow prevention — all nowrap elements ── */
    .comptable-tax-days {
        white-space: normal;
        word-break: break-word;
        text-align: right;
    }
    .tax-prep-time-estimate {
        white-space: normal;
        word-break: break-word;
    }
    .tax-prep-priority-badge {
        white-space: normal;
        word-break: break-word;
    }
    .setup-progress-label {
        white-space: normal;
        word-break: break-word;
    }
    .nav-tax-badge {
        white-space: normal;
        word-break: break-word;
    }
    .action-menu-item {
        white-space: normal;
        word-break: break-word;
    }
    .trust-banner-link {
        white-space: normal;
    }
    /* Ensure children respect parent boundaries — but NOT .main-content
       because overflow on it breaks position:sticky for the topbar on iOS */
    .page-content,
    .page-content-wide {
        max-width: 100vw;
        overflow-x: hidden;
    }
    .topbar {
        max-width: 100vw;
        overflow: hidden;
        padding: 0 var(--space-3);
        position: sticky;
        top: 0;
        z-index: 40;
    }

    /* ── Mobile: Toolbar / Action buttons — prevent cut-off ── */
    /* All inline toolbars with buttons should wrap */
    .page-content-wide > div[style*="display:flex"],
    .page-content > div[style*="display:flex"] {
        flex-wrap: wrap;
    }

    /* Dashboard quick-action bar: full width buttons */
    .dashboard-quick-bar {
        flex-direction: column;
        gap: 0.35rem;
    }
    .dashboard-quick-bar .btn,
    .dashboard-quick-bar .btn-quick-receipt {
        width: 100%;
        justify-content: center;
    }

    /* All "Add" / action buttons in toolbar rows — stack vertically */
    .page-content-wide > div[style*="justify-content:space-between"] > div[style*="gap"] {
        width: 100%;
    }

    /* Stats grid: ensure tooltip icons don't overflow */
    .stats-grid .stat-card {
        overflow: visible;
    }
    .dash-tip-icon {
        width: 16px;
        height: 16px;
    }

    /* Settings sections — prevent overflow */
    .card {
        overflow: hidden;
        word-break: break-word;
    }
    .card-header {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    /* Form rows inside modals — single column */
    .modal-body .form-row,
    .modal-body .form-row-3 {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Settings page: ensure all card titles + buttons don't overflow */
    .form-group {
        overflow: hidden;
    }
    .form-group .btn {
        white-space: normal;
        word-break: break-word;
    }

    /* French: longer text — ensure all labels and buttons wrap */
    [lang="fr"] .btn,
    .btn {
        hyphens: auto;
        overflow-wrap: break-word;
    }
    .stat-label {
        font-size: 0.65rem;
        word-break: break-word;
        hyphens: auto;
    }
    .key-metric-label {
        font-size: 0.625rem;
        word-break: break-word;
        hyphens: auto;
    }

    /* Action center mobile — prevent button cut-off */
    .action-center-item {
        flex-wrap: wrap;
        gap: 0.35rem;
    }
    .action-center-btns {
        width: 100%;
        flex-wrap: wrap;
    }
    .action-center-btns .btn {
        flex: 1;
        min-width: 0;
        text-align: center;
    }
    .action-center-text {
        width: 100%;
    }

    /* Tooltip positioning fix for mobile */
    .dash-tooltip {
        max-width: calc(100vw - 2rem);
        left: 1rem !important;
        right: 1rem;
    }

    /* FIX #5: Data Protection card text overflow on mobile (French) */
    .card-body,
    .tax-prep-card .card-body,
    .card {
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    .card-body div[style*="font-size:0.7"] {
        line-height: 1.4;
    }

    /* FIX #6: Hide dashboard quick-action bar on mobile (duplicated by bottom nav) */
    .dashboard-quick-bar {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* FIX #3: Invoice line items — mobile card layout */
    .invoice-line-card {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        padding: 0.75rem !important;
        background: var(--color-surface-alt) !important;
        border: 1px solid var(--color-border) !important;
        border-radius: var(--radius-md) !important;
        margin-bottom: 0.5rem !important;
    }
    .invoice-line-card .form-group {
        margin-bottom: 0 !important;
        width: 100% !important;
    }
    .invoice-line-card .form-input {
        width: 100% !important;
        max-width: 100% !important;
    }
    .invoice-line-card .invoice-line-row-numbers {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    .invoice-line-card .invoice-line-row-numbers .form-group {
        width: 100% !important;
    }
    .invoice-line-card .invoice-line-row-numbers .form-input {
        max-width: 100% !important;
        width: 100% !important;
    }
    .invoice-line-card .invoice-line-remove {
        align-self: flex-end !important;
    }
    .invoice-line-save-chip {
        margin: 0 0 0.5rem 0 !important;
    }

    /* Legacy form-row-3 fallback inside modals */
    .modal-body .form-row-3 {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-2) !important;
    }
    .modal-body .form-row-3 > .form-group {
        width: 100% !important;
    }
    .modal-body .form-row-3 .form-input {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* FIX #5: Data Protection card — prevent vertical text in checklist rows */
    .data-protection-shield .card-body > div {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .data-protection-shield .card-body > div > .btn,
    .data-protection-shield .card-body > div > button {
        white-space: nowrap !important;
        min-width: fit-content !important;
        flex-shrink: 0 !important;
        font-size: 0.6rem !important;
        padding: 3px 8px !important;
    }
    .data-protection-shield .card-body > div > span[style*="white-space:nowrap"] {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* FIX: iOS Safari auto-zoom prevention.
       Safari zooms the page when focusing inputs with font-size < 16px,
       then doesn't zoom back out — making the screen look "zoomed out".
       Force all form elements to 16px on mobile to prevent this. */
    .form-input,
    .form-select,
    .form-textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="url"],
    input[type="search"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;
    }

    .table-search {
        font-size: 16px !important;
    }
}

/* ==============================================================
   VENDOR CATALOG
   ============================================================== */

.vendor-catalog-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.vendor-catalog-toolbar-left {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: 1;
    min-width: 0;
}
.vendor-catalog-toolbar-left .table-search {
    max-width: 280px;
}
.vendor-catalog-toolbar-right {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.vendor-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.vendor-catalog-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.vendor-catalog-card:hover {
    border-color: var(--color-primary-light, #a5b4fc);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.vendor-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.vendor-card-name {
    font-weight: 600;
    font-size: var(--text-base, 0.95rem);
    color: var(--color-text, #1e293b);
    line-height: 1.3;
    word-break: break-word;
    min-width: 0;
}
.vendor-card-actions {
    display: flex;
    gap: 0.125rem;
    flex-shrink: 0;
}
.vendor-card-actions .btn {
    padding: 0.25rem;
    min-width: unset;
}

.vendor-card-category {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    font-size: var(--text-xs, 0.7rem);
    border-radius: 999px;
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text-muted, #64748b);
    font-weight: 500;
    margin-bottom: 0.625rem;
}

.vendor-card-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-light, #f1f5f9);
}
.vendor-card-stat {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.vendor-card-stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #94a3b8);
    font-weight: 500;
    white-space: nowrap;
}
.vendor-card-stat-value {
    font-size: var(--text-sm, 0.8rem);
    font-weight: 600;
    color: var(--color-text, #1e293b);
}

.vendor-card-notes {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border-light, #f1f5f9);
    font-size: var(--text-xs, 0.7rem);
    color: var(--color-text-muted, #64748b);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.vendor-merge-hint {
    margin-top: 1rem;
    padding: 0.625rem 0.875rem;
    font-size: var(--text-xs, 0.7rem);
    color: var(--color-text-muted, #64748b);
    background: var(--color-surface-alt, #f8fafc);
    border-radius: var(--radius-md, 8px);
    line-height: 1.5;
}

.vendor-catalog-no-results {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted, #94a3b8);
    font-size: var(--text-sm, 0.8rem);
}

/* ---- Mobile: vendor catalog ---- */
@media (max-width: 600px) {
    .vendor-catalog-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .vendor-catalog-toolbar-left {
        width: 100%;
    }
    .vendor-catalog-toolbar-left .table-search {
        max-width: 100%;
        width: 100%;
    }
    .vendor-catalog-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }
    .vendor-catalog-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .vendor-catalog-card {
        padding: 0.875rem;
    }
    .vendor-card-stats {
        gap: 0.5rem;
    }
    .vendor-card-stat {
        flex: 1;
        min-width: 60px;
    }
}

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

    .detail-header {
        flex-direction: column;
        gap: var(--space-3);
    }

    .page-content,
    .page-content-wide {
        padding: var(--space-2);
    }

    .page-title {
        font-size: var(--text-md);
    }

    .stat-value {
        font-size: var(--text-lg);
    }

    .data-table {
        min-width: 0;
    }

    .modal-body {
        padding: var(--space-3);
    }

    .modal-header {
        padding: var(--space-3) var(--space-4);
    }

    .card {
        padding: var(--space-3);
    }

    .topbar {
        padding: 0 var(--space-3);
    }

    /* Very small screens: key metrics stay 2-per-row for clean grid */
    .key-metrics-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
    }

    /* Buttons must stack */
    .btn {
        font-size: 0.7rem;
        padding: 0.45rem 0.5rem;
        min-height: 36px;
    }

    /* Settings page sections */
    .section-heading {
        font-size: var(--text-xs);
        word-break: break-word;
    }

    /* Dashboard sections compact */
    .dashboard-section-header {
        padding: var(--space-2) var(--space-3);
    }
    .dashboard-section-title {
        font-size: var(--text-xs);
        gap: var(--space-1);
    }
    .dashboard-section-badge {
        font-size: 0.6rem;
        padding: 0.05rem 0.35rem;
    }

    /* Comptable summary grid: stack on very small screens */
    .comptable-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem;
    }
    .comptable-summary-cell {
        padding: 0.5rem 0.35rem;
        min-width: 0;
    }
    .comptable-summary-cell .stat-value {
        font-size: 0.95rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .comptable-summary-cell .stat-label {
        font-size: 0.55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Export section: extra compact on very small screens */
    .export-section-header {
        gap: 0.5rem;
        padding: 0.65rem 0.75rem;
    }
    .export-section-icon {
        width: 32px;
        height: 32px;
    }
    .export-section-title {
        font-size: 0.8rem;
    }
    .export-section-body {
        padding: 0 0.75rem 0.75rem;
    }
    .export-preview-grid {
        gap: 0.35rem;
    }
    .export-preview-cell {
        padding: 0.4rem 0.25rem;
        font-size: 0.65rem;
        min-width: 0;
    }
    .export-preview-cell .stat-value {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .export-preview-cell .stat-label {
        font-size: 0.55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Doc-export stats: extra compact */
    .doc-export-stats {
        gap: 0.35rem;
    }
    .doc-export-stat-cell {
        padding: 0.4rem 0.25rem;
        min-width: 0;
    }
    .doc-export-stat-cell .stat-value {
        font-size: 0.9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .doc-export-stat-cell .stat-label {
        font-size: 0.55rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ============================================================
   CLIENT DOSSIER (inside modal)
   ============================================================ */

/* Financial stats row — 5 stat boxes in a responsive row */
.client-dossier-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1rem 0;
    margin-bottom: 1.25rem;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.client-dossier-stats > div {
    flex: 1;
    min-width: 90px;
    text-align: center;
    padding: 0.5rem 0.25rem;
}

.client-dossier-stats .stat-label {
    font-size: 0.65rem;
    margin-bottom: 4px;
}

.client-dossier-stats .stat-value {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Smart summary banner inside dossier */
.client-smart-summary {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    border-left: 3px solid var(--color-primary);
}

.client-smart-summary svg {
    flex-shrink: 0;
    margin-top: 2px;
}

/* Timeline inside client dossier */
.client-timeline {
    position: relative;
    padding-left: 1.25rem;
}

.client-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: var(--color-border);
    border-radius: 1px;
}

.client-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
}

.client-timeline-item:last-child {
    padding-bottom: 0;
}

.client-timeline-item .timeline-dot {
    position: absolute;
    left: calc(-1.25rem + 3px);
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-border-strong, var(--color-text-muted));
    border: 2px solid var(--color-surface);
    flex-shrink: 0;
    z-index: 1;
}

.client-timeline-item:first-child .timeline-dot {
    background: var(--color-primary);
}

/* Collapsible cards inside dossier modal */
.modal-body .card {
    margin-bottom: 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
}

.modal-body .card .collapsible-header {
    padding: 0.25rem 0;
}

.modal-body .card .section-heading {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0;
}

.modal-body .card .collapsible-body {
    padding-top: 0.5rem;
}

/* Tables inside dossier cards */
.modal-body .card .data-table {
    font-size: 0.8rem;
}

.modal-body .card .data-table th {
    font-size: 0.68rem;
    padding: 0.5rem 0.625rem;
}

.modal-body .card .data-table td {
    padding: 0.45rem 0.625rem;
}

/* Responsive: stack dossier stats on small screens */
@media (max-width: 600px) {
    .client-dossier-stats {
        gap: 0.5rem;
    }
    .client-dossier-stats > div {
        min-width: 70px;
        flex: 1 1 calc(50% - 0.5rem);
    }
    .client-dossier-stats .stat-value {
        font-size: 1rem;
    }
    .client-smart-summary {
        font-size: 0.78rem;
        padding: 0.6rem 0.75rem;
    }
}


/* ============================================================
   COLLAPSIBLE SECTIONS
   ============================================================ */

.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 0.25rem 0;
}

.collapsible-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.25s ease;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.collapsible-icon.collapsed {
    transform: rotate(-90deg);
}

.collapsible-body {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
}

.collapsible-body.collapsed {
    display: none;
}

/* ============================================================
   DASHBOARD: BUSINESS HEALTH + CATEGORY BREAKDOWN
   ============================================================ */

.dashboard-health-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

.dashboard-health-card,
.dashboard-category-card {
    overflow: hidden;
}

.health-score-circle {
   
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--color-success);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.health-score-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.health-score-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

.health-metrics {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.health-metric-cell {
    text-align: center;
    padding: 0.25rem 0;
}

/* ============================================================
   DASHBOARD COLLAPSIBLE SECTIONS
   ============================================================ */

.dashboard-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    overflow: hidden;
    transition: box-shadow var(--transition-base);
}

.dashboard-section:hover {
    box-shadow: var(--shadow-sm);
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    cursor: pointer;
    user-select: none;
    transition: background var(--transition-fast);
    border-bottom: 1px solid transparent;
}

.dashboard-section-header:hover {
    background: var(--color-surface-alt);
}

.dashboard-section-header.expanded {
    border-bottom: 1px solid var(--color-border);
}

.dashboard-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    line-height: var(--leading-snug);
}

.dashboard-section-title .section-icon {
    color: var(--color-text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.dashboard-section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: #fff;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    line-height: 1.4;
    min-width: 20px;
}

.dashboard-section-chevron {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

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

.dashboard-section-body {
    max-height: 1200px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

.dashboard-section-body.collapsed {
    max-height: 0;
    opacity: 0;
}

/* ── Category bars (expense breakdown) ── */
.cat-bar-row {
    margin-bottom: 0.6rem;
}

.cat-bar-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    margin-bottom: 0.2rem;
    color: var(--color-text);
}

.cat-bar-track {
    width: 100%;
    height: 8px;
    background: var(--color-surface-alt, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}

.cat-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
    min-width: 2px;
}

/* ============================================================
   ANOMALY ALERTS CARD
   ============================================================ */

.anomaly-card {
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
}

.anomaly-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 0.85rem 1rem;
    gap: 0.75rem;
}

.anomaly-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.anomaly-header-left .card-title {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
}

.anomaly-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.anomaly-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 7px;
    color: #fff;
}

.anomaly-badge-danger  { background: var(--color-danger, #ef4444); }
.anomaly-badge-warn    { background: var(--color-warning, #f59e0b); }
.anomaly-badge-info    { background: var(--color-primary, #3b82f6); }

.anomaly-subtitle {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted);
    margin-bottom: 0.65rem;
    line-height: 1.4;
    padding: 0 0.25rem;
}

.anomaly-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.anomaly-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
    transition: opacity 0.25s, max-height 0.3s;
}

.anomaly-row-danger {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.anomaly-row-warn {
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.anomaly-row-info {
    background: rgba(59, 130, 246, 0.05);
    border: 1px solid rgba(59, 130, 246, 0.12);
}

.anomaly-row-text {
    flex: 1;
    min-width: 0;
}

.anomaly-row-title {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
    flex-wrap: wrap;
    font-weight: 500;
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

.anomaly-severity-tag {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    flex-shrink: 0;
    white-space: nowrap;
    vertical-align: middle;
    line-height: 1.4;
}

.anomaly-row-why {
    font-size: 0.76rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    line-height: 1.5;
}

.anomaly-row-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    padding-top: 1px;
}

.anomaly-row-actions .btn-sm {
    font-size: 0.75rem !important;
    padding: 5px 14px !important;
    border-radius: 6px;
    white-space: nowrap;
    font-weight: 600;
    line-height: 1.3;
}

.anomaly-dismiss-btn {
    background: none;
    border: 1px solid var(--color-border, #e5e5e5);
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 13px;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.anomaly-dismiss-btn:hover {
    color: var(--color-danger, #ef4444);
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Responsive: stack actions below text on very narrow screens */
@media (max-width: 480px) {
    .anomaly-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .anomaly-row-actions {
        align-self: flex-end;
    }
}

.anomaly-show-more {
    margin-top: 0.5rem;
    text-align: center;
}

[data-theme="dark"] .anomaly-row-danger {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="dark"] .anomaly-row-warn {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
}

[data-theme="dark"] .anomaly-row-info {
    background: rgba(59, 130, 246, 0.08);
    border-color: rgba(59, 130, 246, 0.12);
}

/* ============================================================
   TAX PREP SCORE
   ============================================================ */

.tax-prep-card {
    overflow: hidden;
}

.tax-prep-score-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 3px solid currentColor;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tax-prep-readiness {
    word-wrap: break-word;
}

.tax-prep-time-estimate {
    white-space: nowrap;
}

.tax-prep-coach {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.tax-prep-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.tax-prep-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.tax-prep-fail {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.tax-prep-pass {
    background: rgba(34, 197, 94, 0.04);
}

.tax-prep-priority-badge {
    white-space: nowrap;
}

.tax-prep-passed-section {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--color-border);
}

.tax-prep-positive-msg {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.tax-prep-passed-list {
    opacity: 0.85;
}

.tax-prep-export-warning {
    font-size: var(--text-sm);
    color: var(--color-warning, #f59e0b);
    font-weight: 500;
    line-height: 1.5;
}

/* ── Tax Prep: Ignore dropdown ── */
.tax-prep-ignore-wrap {
    position: relative;
    display: inline-flex;
}
.tax-prep-ignore-btn {
    cursor: pointer;
    border: none;
    border-radius: var(--radius-sm, 4px);
}
.tax-prep-ignore-btn:hover {
    background: var(--color-surface-alt, #f1f5f9);
}
.tax-prep-ignore-dropdown {
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 50;
    min-width: 220px;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: 4px 0;
    display: flex;
    flex-direction: column;
}
.tax-prep-ignore-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 14px;
    font-size: 0.78rem;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1.4;
    white-space: nowrap;
}
.tax-prep-ignore-option:hover {
    background: var(--color-surface-alt, #f1f5f9);
    color: var(--color-text);
}

/* ── Tax Prep: Ignored checks section ── */
.tax-prep-ignored-section {
    border-top: 1px solid var(--color-border);
    padding-top: 0.5rem;
}
.tax-prep-ignored-toggle {
    cursor: pointer;
}
.tax-prep-ignored-toggle:hover {
    color: var(--color-text-secondary) !important;
}
.tax-prep-ignored-list .tax-prep-check-row {
    background: transparent;
    border: 1px solid var(--color-border);
    border-style: dashed;
}

/* Row dismiss animation */
.tax-prep-check-row.dismissing {
    opacity: 0;
    transform: translateX(30px);
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.35s ease 0.1s, margin 0.35s ease 0.1s, padding 0.35s ease 0.1s;
}
/* Row restore animation (fade in from left) */
.tax-prep-check-row.restoring {
    animation: taxRowRestore 0.3s ease forwards;
}
@keyframes taxRowRestore {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   EXPORT CENTER SECTIONS (Accordion)
   ============================================================ */

.export-section {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface);
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.export-section:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.export-section--open {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.export-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.export-section-header:hover {
    background: var(--color-surface-alt);
}

.export-section-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.export-section-text {
    flex: 1;
    min-width: 0;
}

.export-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.export-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.export-section-chevron {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}
.export-section--open .export-section-chevron {
    transform: rotate(180deg);
}

.export-section-body {
    padding: 0 1.25rem 1.25rem;
    animation: exportSectionSlide 0.25s ease;
    overflow-x: hidden;
}

@keyframes exportSectionSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Export Center: inner layout (controls + preview) ── */
.export-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.export-controls {
    min-width: 0;
    overflow: hidden;
}

.export-preview {
    min-width: 0;
    overflow: hidden;
}

.export-format-desc {
    margin-top: 0.75rem;
}

.export-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.02em;
}
.export-badge--qb {
    background: #dcfce7;
    color: #166534;
}
.export-badge--acc {
    background: #dbeafe;
    color: #1e40af;
}
[data-theme="dark"] .export-badge--qb {
    background: rgba(22, 163, 74, 0.15);
    color: #4ade80;
}
[data-theme="dark"] .export-badge--acc {
    background: rgba(37, 99, 235, 0.15);
    color: #93c5fd;
}

.export-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.export-preview-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    text-align: center;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: normal;
}

.export-preview-cell .stat-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.export-preview-cell .stat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.export-preview-cell svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.export-preview-summary {
    padding: 0.75rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.7;
}

.export-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-sm);
}

/* ============================================================
   EXPORT CENTER — "For Your Accountant" (Comptable) Section
   ============================================================ */

/* ── Tax-season info card (subtle, dismissible) ── */
.comptable-tax-banner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--color-surface-alt, #f8fafc);
    color: var(--color-text, #1e293b);
    border: 1px solid var(--color-border, #e2e8f0);
    border-left: 3px solid var(--color-info, #3b82f6);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.4;
    position: relative;
}

.comptable-tax-banner svg {
    color: var(--color-info, #3b82f6) !important;
    flex-shrink: 0;
}

.comptable-tax-days {
    margin-left: auto;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2rem 0.65rem;
    background: var(--color-info-bg, #eff6ff);
    color: var(--color-info, #3b82f6);
    border-radius: 999px;
    white-space: nowrap;
}

.comptable-tax-dismiss {
    background: none;
    border: none;
    color: var(--color-text-muted, #94a3b8);
    cursor: pointer;
    padding: 0.15rem;
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.comptable-tax-dismiss:hover {
    opacity: 1;
}

/* ── Main panel ── */
.comptable-panel {
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

/* ── Gradient header ── */
.comptable-header {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    padding: 1.5rem;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

.comptable-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.comptable-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.comptable-subtitle {
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.85);
    margin: 0.15rem 0 0;
    line-height: 1.4;
}

/* ── Body area ── */
.comptable-body {
    padding: 1.25rem 0 0;
}

/* ── Period selector ── */
.comptable-period {
    margin-bottom: 1.25rem;
}

.comptable-year-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.comptable-year-row .form-label {
    margin-bottom: 0;
    white-space: nowrap;
    font-size: var(--text-sm);
}
.comptable-year-row .form-select {
    max-width: 120px;
}

.comptable-custom-dates {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}

/* ── Summary section ── */
.comptable-summary-section {
    margin-bottom: 1.25rem;
}

.comptable-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.comptable-summary-cell {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 0.75rem;
    text-align: center;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: normal;
}

.comptable-summary-cell .stat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comptable-summary-cell .stat-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Pre-flight verification ── */
.comptable-preflight {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
}

.comptable-preflight-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

/* ── Status badge strip ── */
.comptable-status-strip {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.comptable-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
}

.comptable-badge-blocking {
    background: var(--color-danger-bg, #fef2f2);
    color: var(--color-danger, #dc2626);
}

.comptable-badge-warning {
    background: var(--color-warning-bg, #fefce8);
    color: var(--color-warning, #ca8a04);
}

.comptable-badge-ready {
    background: var(--color-success-bg, #f0fdf4);
    color: var(--color-success, #16a34a);
}

/* ── All-clear message ── */
.comptable-all-clear {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    background: var(--color-success-bg, #f0fdf4);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-md);
    color: var(--color-success, #16a34a);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* ── Checklist ── */
.comptable-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.comptable-check-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    transition: background 0.1s ease;
}

.comptable-check-row:hover {
    background: rgba(0, 0, 0, 0.03);
}

.comptable-check-blocking {
    color: var(--color-danger, #dc2626);
}

.comptable-check-warning {
    color: var(--color-warning, #ca8a04);
}

.comptable-check-ready {
    color: var(--color-text-muted);
}

/* ── Package preview ── */
.comptable-package {
    margin-bottom: 1.25rem;
}

.comptable-package-grid {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.comptable-file-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    transition: background 0.1s ease;
}

.comptable-file-item:hover {
    background: var(--color-surface);
}

.comptable-file-count {
    margin-left: auto;
    font-weight: 700;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background: var(--color-surface);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    min-width: 28px;
    text-align: center;
}

/* ── Actions area ── */
.comptable-actions {
    margin-bottom: 0.5rem;
}

/* ── Main send button ── */
.comptable-send-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
    font-size: var(--text-base);
    transition: opacity 0.15s ease, transform 0.1s ease;
}

.comptable-send-btn:hover {
    opacity: 0.92;
}

.comptable-send-btn:active {
    transform: scale(0.99);
}

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

.comptable-send-label {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.3;
}

.comptable-send-sub {
    font-size: var(--text-xs);
    opacity: 0.8;
    line-height: 1.3;
}

.comptable-blocked-hint {
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-danger, #dc2626);
    font-weight: 500;
    margin-top: 0.5rem;
}

/* ── Success celebration ── */
.comptable-success {
    margin-top: 1rem;
}

.comptable-celebration {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    background: var(--color-success-bg, #f0fdf4);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-lg, 12px);
}

.comptable-celebration-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comptable-celebration-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-success, #16a34a);
}

.comptable-celebration-sub {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ── Dark-theme overrides — comptable ── */
[data-theme="dark"] .comptable-tax-banner {
    background: var(--color-surface-alt, #1e293b);
    border-color: var(--color-border, #334155);
    border-left-color: var(--color-info, #3b82f6);
    color: var(--color-text, #e2e8f0);
}

[data-theme="dark"] .comptable-header {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.35) 0%, rgba(15, 118, 110, 0.35) 100%);
}

[data-theme="dark"] .comptable-send-btn {
    background: linear-gradient(135deg, rgba(13, 148, 136, 0.6) 0%, rgba(15, 118, 110, 0.6) 100%);
}

[data-theme="dark"] .comptable-badge-blocking {
    background: rgba(220, 38, 38, 0.15);
}

[data-theme="dark"] .comptable-badge-warning {
    background: rgba(202, 138, 4, 0.15);
}

[data-theme="dark"] .comptable-badge-ready {
    background: rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] .comptable-all-clear {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.2);
}

[data-theme="dark"] .comptable-celebration {
    background: rgba(22, 163, 74, 0.1);
    border-color: rgba(22, 163, 74, 0.15);
}

[data-theme="dark"] .comptable-check-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .comptable-file-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

[data-theme="dark"] .comptable-file-count {
    background: rgba(255, 255, 255, 0.06);
}


/* ============================================================
   EXPORT CENTER — "Documents & Receipts" (Doc-Export) Section
   ============================================================ */

/* ── Main panel ── */
.doc-export-panel {
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

/* ── Gradient header ── */
.doc-export-header {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
    padding: 1.5rem;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}

/* ── Info box ── */
.doc-export-info {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
}

/* ── Filters row ── */
.doc-export-filters {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* ── Preview area ── */
.doc-export-preview {
    margin-bottom: 0.5rem;
}

/* ── Empty state ── */
.doc-export-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    color: var(--color-text-muted);
    text-align: center;
}

.doc-export-empty svg {
    opacity: 0.4;
    margin-bottom: 0.25rem;
}

/* ── Stats grid ── */
.doc-export-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.doc-export-stat-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem 0.5rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-align: center;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    word-break: normal;
    overflow-wrap: normal;
}

.doc-export-stat-cell .stat-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.doc-export-stat-cell .stat-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.doc-export-stat-cell svg {
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* ── Folder structure preview ── */
.doc-export-folder-preview {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.doc-export-tree {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.7;
}

/* ── Status text ── */
.doc-export-status {
    font-size: var(--text-sm);
}

/* ── Dark-theme overrides — doc-export ── */
[data-theme="dark"] .doc-export-header {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.35) 0%, rgba(79, 70, 229, 0.35) 100%);
}

[data-theme="dark"] .doc-export-empty svg {
    opacity: 0.25;
}


/* ── Backup collapsible sections ── */
.backup-section {
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-surface);
    margin-bottom: 0.85rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.backup-section:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.backup-section--open {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.backup-section-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.backup-section-header:hover {
    background: var(--color-surface-alt);
}

.backup-section-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md, 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.backup-section-text {
    flex: 1;
    min-width: 0;
}

.backup-section-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
}

.backup-section-desc {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.4;
}

.backup-section-chevron {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.backup-section--open .backup-section-chevron {
    transform: rotate(180deg);
}

.backup-section-body {
    padding: 0 1.25rem 1.25rem;
    animation: backupSectionSlide 0.25s ease;
}

@keyframes backupSectionSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Status banner (always visible at top) ── */
.backup-status-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.backup-status-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Backup folder hero card ── */
.backup-folder-hero {
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-left: 4px solid var(--color-primary, #4f46e5);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

/* ── Backup onboarding wizard ── */
.backup-onboard-wizard {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 2px solid #93c5fd;
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    animation: backupWizardFadeIn 0.5s ease;
}
@keyframes backupWizardFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.backup-onboard-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0;
}
.backup-onboard-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary, #4f46e5);
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Automatic backup card ── */
.backup-auto-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

/* ── Back up now card ── */
.backup-now-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid #22c55e;
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

/* ── Info box (why backups matter) ── */
.backup-info-box {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* ── Preview area (appears after save/restore) ── */
.backup-preview-area {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
}

/* ── Snapshot rows ── */
.backup-snapshot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}
.backup-snapshot-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.backup-snapshot-row:first-of-type {
    padding-top: 0;
}

/* ── Protection check rows ── */
.backup-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-border);
}
.backup-check-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.backup-check-row:first-of-type {
    padding-top: 0;
}
.backup-check-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
}

/* ── Device Transfer ── */
.backup-transfer-box {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.15rem 1.25rem;
}
.backup-transfer-box-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: var(--text-base);
    color: var(--color-text);
    margin-bottom: 0.75rem;
}
.backup-transfer-box-title svg {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}
.backup-transfer-steps {
    padding-left: 1.25rem;
    margin: 0 0 0.75rem 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.85;
}
.backup-transfer-steps li {
    padding-left: 0.25rem;
}
.backup-transfer-steps li::marker {
    color: var(--color-text-muted);
    font-weight: 600;
}
.backup-transfer-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0;
    color: var(--color-text-muted);
}
.backup-transfer-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-success-bg, #f0fdf4);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
}
.backup-transfer-note svg {
    color: var(--color-info, #2563eb);
}

/* ── FAQ (What if I lose my data?) ── */
.backup-faq-item {
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-text-muted);
    border-radius: var(--radius-md);
    margin-bottom: 0.6rem;
    overflow: hidden;
    background: var(--color-surface);
    transition: box-shadow 0.15s ease;
}
.backup-faq-item:hover {
    box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}
.backup-faq-item:last-child {
    margin-bottom: 0;
}

.backup-faq-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem 0.5rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}
.backup-faq-header:hover {
    background: var(--color-surface-alt);
}
.backup-faq-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.backup-faq-title {
    flex: 1;
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-text);
    min-width: 0;
}
.backup-faq-chevron {
    flex-shrink: 0;
    color: var(--color-text-muted);
    transition: transform 0.25s ease;
}
.backup-faq-header.open .backup-faq-chevron {
    transform: rotate(180deg);
}

.backup-faq-answer {
    padding: 0 1rem 0.85rem 2.35rem;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.65;
    animation: backupFaqSlide 0.2s ease;
}
@keyframes backupFaqSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.backup-faq-prevention {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-success-bg, #f0fdf4);
    border: 1px solid rgba(22, 163, 74, 0.2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
    font-weight: 500;
}

/* ============================================================
   MOBILE BOTTOM NAVIGATION BAR
   Hidden on desktop, visible on mobile (≤768px)
   ============================================================ */

.bottom-nav {
    display: none; /* hidden on desktop */
}

.bottom-nav-more-overlay {
    display: none; /* hidden on desktop */
}

@media (max-width: 768px) {
    /* ── Bottom nav bar ── */
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 300;
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        min-height: 56px;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
        box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
        align-items: center;
        justify-content: space-around;
    }

    /* FIX #1: Bottom nav items — proper centering of icon + label */
    .bottom-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 2px !important;
        flex: 1 1 0 !important;
        height: 56px !important;
        min-width: 0 !important;
        border: none !important;
        background: none !important;
        color: var(--color-text-muted);
        font-family: var(--font-sans);
        cursor: pointer;
        position: relative;
        padding: 6px 0 4px 0 !important;
        -webkit-tap-highlight-color: transparent;
        margin: 0 !important;
    }

    .bottom-nav-item svg {
        display: block !important;
        margin: 0 auto !important;
        flex-shrink: 0 !important;
    }

    .bottom-nav-item.active {
        color: var(--color-primary, #4f46e5);
    }

    .bottom-nav-label {
        display: block !important;
        font-size: 0.6rem !important;
        font-weight: 500;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100% !important;
    }

    /* Offset main content so it doesn't hide behind bottom nav */
    .main-content {
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }

    /* Offset toasts above the bottom nav */
    .toast-container {
        bottom: calc(56px + var(--space-4, 1rem) + env(safe-area-inset-bottom, 0px));
    }

    /* Active indicator line */
    .bottom-nav-item.active::before {
        content: "";
        position: absolute;
        top: 0;
        left: 25%;
        right: 25%;
        height: 2.5px;
        background: var(--color-primary, #4f46e5);
        border-radius: 0 0 2px 2px;
    }

    /* Center "+" button */
    .bottom-nav-add {
        flex: 0 0 48px !important;
        width: 48px !important;
        height: 48px !important;
        border-radius: 50% !important;
        background: var(--color-primary, #4f46e5) !important;
        color: #fff !important;
        margin-top: -14px !important;
        box-shadow: 0 4px 16px rgba(79, 70, 229, 0.35);
        transition: transform 0.15s ease, box-shadow 0.15s ease;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .bottom-nav-add svg {
        width: 22px;
        height: 22px;
    }

    .bottom-nav-add .bottom-nav-label {
        display: none !important;
    }

    .bottom-nav-add:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
    }

    .bottom-nav-add.active::before {
        display: none;
    }

    /* Dark theme adjustment */
    [data-theme="dark"] .bottom-nav {
        box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
    }

    [data-theme="dark"] .bottom-nav-add {
        box-shadow: 0 4px 16px rgba(79, 70, 229, 0.5);
    }

    /* ── "More" menu overlay ── */
    .bottom-nav-more-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 350;
        background: rgba(0,0,0,0.35);
        align-items: flex-end;
        justify-content: center;
    }

    .bottom-nav-more-overlay.open {
        display: flex;
    }

    .bottom-nav-more-panel {
        background: var(--color-surface);
        width: 100%;
        max-height: 70vh;
        border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
        padding: 0;
        overflow-y: auto;
        animation: bottomNavSlideUp 0.2s ease-out;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }

    @keyframes bottomNavSlideUp {
        from { transform: translateY(100%); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }

    .bottom-nav-more-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.25rem 0.5rem;
        position: sticky;
        top: 0;
        background: var(--color-surface);
        z-index: 1;
    }

    .bottom-nav-more-title {
        font-size: var(--text-md, 1rem);
        font-weight: var(--weight-semibold, 600);
        color: var(--color-text);
    }

    .bottom-nav-more-close {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border: none;
        background: var(--color-surface-alt);
        border-radius: 50%;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background 0.15s ease;
    }

    .bottom-nav-more-close:hover,
    .bottom-nav-more-close:active {
        background: var(--color-border);
    }

    .bottom-nav-more-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
        padding: 0.5rem 0.75rem;
    }

    .bottom-nav-more-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        padding: 0.85rem 0.5rem;
        border: none;
        background: none;
        border-radius: var(--radius-md, 8px);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: 0.72rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.12s ease;
        -webkit-tap-highlight-color: transparent;
        text-align: center;
        word-break: break-word;
        hyphens: auto;
        line-height: 1.2;
    }

    .bottom-nav-more-item:active {
        background: var(--color-surface-alt);
    }

    .bottom-nav-more-item.active-page {
        background: var(--color-primary-light, rgba(79,70,229,0.06));
        color: var(--color-primary, #4f46e5);
    }

    .bottom-nav-more-icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--color-surface-alt);
        border-radius: var(--radius-md, 8px);
        color: var(--color-text-muted);
        transition: background 0.12s ease, color 0.12s ease;
    }

    .bottom-nav-more-item.active-page .bottom-nav-more-icon {
        background: var(--color-primary, #4f46e5);
        color: #fff;
    }

    .bottom-nav-more-item:active .bottom-nav-more-icon {
        background: var(--color-border);
    }

    /* Hamburger hidden — bottom nav is the sole mobile navigation */
}

/* ── Quick-add popup (floats above + button) ── */
.bottom-nav-add-menu {
    position: fixed;
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 310;
    background: var(--color-surface);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 0 0 1px var(--color-border);
    padding: 0.35rem;
    min-width: 200px;
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.bottom-nav-add-menu.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.bottom-nav-add-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    background: none;
    border-radius: var(--radius-md, 8px);
    font-family: var(--font-sans);
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.1s ease;
    -webkit-tap-highlight-color: transparent;
    text-align: left;
}

.bottom-nav-add-menu-item:active {
    background: var(--color-surface-alt);
}

.bottom-nav-add-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    flex-shrink: 0;
}

/* Arrow pointing down to the + button */
.bottom-nav-add-menu::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

[data-theme="dark"] .bottom-nav-add-menu {
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--color-border);
}

/* Bottom nav hidden on wider screens — extra safety */
@media (min-width: 769px) {
    .bottom-nav,
    .bottom-nav-more-overlay,
    .bottom-nav-add-menu {
        display: none !important;
    }
}


/* ============================================================
   UPGRADE BANNER — shown when free plan nears limits
   ============================================================ */

.upgrade-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md, 8px);
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 50%, #fef3c7 100%);
    border: 1px solid #fde68a;
    margin-bottom: 1rem;
}

.upgrade-banner-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fbbf24;
    color: #78350f;
    flex-shrink: 0;
}

.upgrade-banner-text {
    flex: 1;
    font-size: var(--text-sm, 0.8125rem);
    color: #78350f;
    line-height: 1.4;
    font-weight: 500;
}

.upgrade-banner-btn {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border-radius: var(--radius-md, 8px);
    border: none;
    background: #d97706;
    color: #fff;
    font-size: var(--text-sm, 0.8125rem);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s;
    font-family: inherit;
}

.upgrade-banner-btn:hover {
    background: #b45309;
}

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

[data-theme="dark"] .upgrade-banner {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(217, 119, 6, 0.12) 100%);
    border-color: rgba(251, 191, 36, 0.25);
}

[data-theme="dark"] .upgrade-banner-text {
    color: #fbbf24;
}

[data-theme="dark"] .upgrade-banner-icon {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

[data-theme="dark"] .upgrade-banner-btn {
    background: #d97706;
}

@media (max-width: 768px) {
    .upgrade-banner {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .upgrade-banner-btn {
        width: 100%;
        text-align: center;
        padding: 0.5rem;
    }
}


/* ============================================================
   MUBSIRA PRO SECTION — Settings page pricing / license
   ============================================================ */

.pro-section {
    margin-top: 1.5rem;
    padding: 1.5rem;
    padding-bottom: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 12px);
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.pro-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
}

.pro-section-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.pro-section-header h3 {
    margin: 0;
    font-size: var(--text-lg, 1.0625rem);
    font-weight: var(--weight-bold, 700);
    color: var(--color-text);
    flex: 1;
}

.pro-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
}

.pro-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--text-sm, 0.8125rem);
    font-weight: var(--weight-medium, 500);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-md, 8px);
    margin-bottom: 1rem;
}

.pro-status-active {
    background: var(--color-success-bg, #f0fdf4);
    color: var(--color-success, #16a34a);
}

.pro-status-inactive {
    background: var(--color-surface-alt, #f5f5f5);
    color: var(--color-text-muted, #737373);
}

.pro-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pro-status-active .pro-status-dot {
    background: var(--color-success, #16a34a);
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.pro-status-inactive .pro-status-dot {
    background: var(--color-text-faint, #a3a3a3);
}

/* Pro features grid */
.pro-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
}

.pro-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm, 0.8125rem);
    color: var(--color-text-secondary, #404040);
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-surface-alt, #f5f5f5);
}

.pro-feature-item.locked {
    background: var(--color-primary-light, rgba(79, 70, 229, 0.08));
    color: var(--color-primary, #4f46e5);
    font-weight: var(--weight-medium, 500);
}

/* License key input row */
.pro-key-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
}

.pro-key-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

.pro-key-row .btn {
    flex-shrink: 0;
    min-height: 40px;
}

/* Usage meters (free tier) */
.usage-meter {
    margin-bottom: 0.65rem;
}

.usage-meter-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-muted, #737373);
    margin-bottom: 0.2rem;
}

.usage-meter-bar {
    height: 6px;
    background: var(--color-border, #e5e5e5);
    border-radius: 3px;
    overflow: hidden;
}

.usage-meter-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--color-primary, #4f46e5);
    transition: width 0.4s ease;
}

.usage-meter-fill.near-limit {
    background: var(--color-warning, #ca8a04);
}

.usage-meter-fill.at-limit {
    background: var(--color-danger, #dc2626);
}

/* Pro version footer */
.pro-version-footer {
    text-align: center;
}

/* Dark theme overrides */
[data-theme="dark"] .pro-section {
    border-color: var(--color-border);
}

[data-theme="dark"] .pro-feature-item {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .pro-feature-item.locked {
    background: rgba(79, 70, 229, 0.15);
}

/* Mobile adjustments for Pro section */
@media (max-width: 768px) {
    .pro-section {
        padding: 1rem;
        margin-top: 1.5rem;
    }

    .pro-section-header h3 {
        font-size: var(--text-base, 0.875rem);
    }

    .pro-features-grid {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .pro-key-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pro-key-row .btn {
        width: 100%;
    }

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


/* ============================================================
   FLOATING RETURN BUTTON
   Compact circle with back arrow. Visible on all screen sizes.
   On desktop, positioned past the sidebar. On mobile, above the
   bottom nav.
   ============================================================ */

.floating-return-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    left: calc(var(--sidebar-width, 220px) + 24px);
    right: auto;
    transform: translateY(20px);
    opacity: 0;
    z-index: 290;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-surface, #fff);
    color: var(--color-text, #0a0a0a);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12), 0 0 0 1px var(--color-border, #e5e5e5);
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.floating-return-btn svg {
    display: block;
}

.floating-return-btn.floating-return-visible {
    opacity: 1;
    transform: translateY(0);
}

.floating-return-btn.floating-return-out {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.floating-return-btn:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.18), 0 0 0 1px var(--color-border, #e5e5e5);
}

.floating-return-btn:active {
    transform: scale(0.92);
    box-shadow: 0 1px 6px rgba(0,0,0,0.15);
}

@media (max-width: 768px) {
    .floating-return-btn {
        bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 18px);
        left: 14px;
    }
}

/* Dark theme */
[data-theme="dark"] .floating-return-btn {
    background: var(--color-surface, #1e1e1e);
    color: var(--color-text, #e5e5e5);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 1px var(--color-border, #333);
}


/* ============================================================
   IN-APP DOCUMENT VIEWER
   Fullscreen overlay for viewing uploaded documents.
   Required for iOS where blob URLs cannot be opened in new tabs.
   ============================================================ */

.doc-viewer-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.doc-viewer-overlay.doc-viewer-open {
    opacity: 1;
}
.doc-viewer-overlay.doc-viewer-closing {
    opacity: 0;
}

.doc-viewer-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.85rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.doc-viewer-name {
    color: #fff;
    font-size: var(--text-sm, 0.85rem);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
    padding-right: 0.75rem;
}

.doc-viewer-close {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}
.doc-viewer-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

/* Action buttons in the document viewer top bar (open, download) */
.doc-viewer-action-btn {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}
.doc-viewer-action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.45);
}

.doc-viewer-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
}

.doc-viewer-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
    user-select: none;
    -webkit-user-select: none;
}

.doc-viewer-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 0.25rem;
    background: #fff;
}

.doc-viewer-fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 2rem;
    font-size: var(--text-sm, 0.85rem);
}
.doc-viewer-fallback .btn {
    margin-top: 0.25rem;
}

/* iOS safe area padding for the top bar */
@supports (padding-top: env(safe-area-inset-top)) {
    .doc-viewer-topbar {
        padding-top: calc(0.6rem + env(safe-area-inset-top));
    }
}


/* ============================================================
   NEXT ACTION GUIDANCE — subtle breathing glow on the logical
   next action button / field.  Never harsh, always dismissible
   by interacting with the element.
   ============================================================ */

@keyframes next-action-breathe {
    0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.28); }
    50%  { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0.10); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.28); }
}
@keyframes next-action-breathe-success {
    0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.30); }
    50%  { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.10); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.30); }
}

/* The main glow class — applied to any interactive element */
.next-action-glow {
    animation: next-action-breathe 2s ease-in-out infinite;
    outline: 2px solid rgba(79, 70, 229, 0.25);
    outline-offset: 2px;
    border-radius: inherit;
    transition: outline 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Save-button variant: green glow = "you're done, save now!" */
.next-action-glow-save {
    animation: next-action-breathe-success 1.8s ease-in-out infinite;
    outline: 2px solid rgba(34, 197, 94, 0.30);
    outline-offset: 2px;
    border-radius: inherit;
    transition: outline 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1;
}

/* Remove glow immediately on hover/focus — user is engaging */
.next-action-glow:hover,
.next-action-glow:focus,
.next-action-glow-save:hover,
.next-action-glow-save:focus {
    animation: none;
    outline: none;
    box-shadow: none;
}

/* Fade-out transition when removing the glow */
.next-action-glow-out {
    animation: none !important;
    outline: 2px solid transparent !important;
    box-shadow: 0 0 0 0 transparent !important;
    transition: outline 0.4s ease, box-shadow 0.4s ease;
}

/* For table rows — subtler left-border highlight */
tr.next-action-row-glow {
    position: relative;
}
tr.next-action-row-glow > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--color-primary, #4f46e5);
}

/* Reduce motion: disable animations entirely */
@media (prefers-reduced-motion: reduce) {
    .next-action-glow,
    .next-action-glow-save {
        animation: none;
        outline: 2px solid rgba(79, 70, 229, 0.18);
    }
}

/* ==============================================================
   TEAM DIRECTORY + PAY LOG
   ============================================================== */

.team-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; flex-wrap:wrap; gap:0.5rem; }
.team-toolbar-left { display:flex; gap:0.5rem; align-items:center; flex:1; min-width:0; }
.team-toolbar-right { display:flex; gap:0.5rem; align-items:center; }
.team-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0.75rem; }
.team-card { background:var(--color-surface,#fff); border:1px solid var(--color-border-light,#e2e8f0); border-radius:var(--radius-lg,12px); padding:1rem; transition:box-shadow .15s,border-color .15s; cursor:pointer; }
.team-card:hover { border-color:var(--color-primary,#6366f1); box-shadow:0 2px 12px rgba(99,102,241,.08); }
.team-card-inactive { opacity:0.6; }
.team-card-header { display:flex; align-items:flex-start; gap:0.625rem; margin-bottom:0.5rem; }
.team-avatar { width:38px; height:38px; min-width:38px; border-radius:50%; background:var(--color-primary-light,#e0e7ff); color:var(--color-primary,#6366f1); display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; letter-spacing:0.02em; }
.team-avatar-lg { width:56px; height:56px; min-width:56px; font-size:1.1rem; }
.team-card-name-block { flex:1; min-width:0; }
.team-card-name { font-weight:600; font-size:var(--text-sm,0.875rem); color:var(--color-text,#1e293b); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.team-card-role { font-size:var(--text-xs,0.75rem); color:var(--color-text-muted,#64748b); margin-top:0.1rem; }
.team-card-actions { display:flex; gap:0.25rem; margin-left:auto; flex-shrink:0; }
.team-card-badges { display:flex; flex-wrap:wrap; gap:0.375rem; margin-bottom:0.5rem; }
.team-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:999px; font-size:0.65rem; font-weight:600; letter-spacing:0.03em; text-transform:uppercase; }
.team-badge-employee { background:var(--color-primary-light,#e0e7ff); color:var(--color-primary,#6366f1); }
.team-badge-subcontractor { background:#fef3c7; color:#92400e; }
.team-badge-inactive { background:var(--color-surface-alt,#f1f5f9); color:var(--color-text-muted,#94a3b8); }
.team-badge-freq { background:#ecfdf5; color:#065f46; }
.team-card-stats { display:flex; flex-wrap:wrap; gap:0.75rem; margin-bottom:0.375rem; }
.team-card-stat { display:flex; flex-direction:column; gap:0.1rem; min-width:60px; }
.team-card-stat-label { font-size:0.6rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--color-text-muted,#94a3b8); font-weight:500; }
.team-card-stat-value { font-size:var(--text-sm,0.8rem); font-weight:600; color:var(--color-text,#1e293b); }
.team-card-contact { display:flex; flex-wrap:wrap; gap:0.375rem 0.75rem; margin-top:0.375rem; padding-top:0.375rem; border-top:1px solid var(--color-border-light,#f1f5f9); font-size:var(--text-xs,0.7rem); color:var(--color-text-muted,#64748b); }
.team-no-results { grid-column:1/-1; text-align:center; padding:2rem 1rem; color:var(--color-text-muted,#94a3b8); font-size:var(--text-sm,0.8rem); }

/* ---- Team Detail ---- */
.team-detail-header { display:flex; align-items:flex-start; gap:1rem; padding:1.25rem; background:var(--color-surface,#fff); border:1px solid var(--color-border-light,#e2e8f0); border-radius:var(--radius-lg,12px); margin:1rem 0; }
.team-detail-info { flex:1; min-width:0; }
.team-detail-name { font-size:1.15rem; font-weight:700; margin:0 0 0.25rem; color:var(--color-text,#1e293b); }
.team-detail-meta { font-size:var(--text-sm,0.8rem); color:var(--color-text-muted,#64748b); margin-bottom:0.25rem; }
.team-detail-contact { font-size:var(--text-xs,0.75rem); color:var(--color-text-muted,#64748b); }
.team-detail-notes { margin-top:0.5rem; font-size:var(--text-xs,0.75rem); color:var(--color-text-muted,#94a3b8); line-height:1.5; }

/* ---- Pay Log ---- */
.team-pay-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem; }
.team-pay-toolbar h3 { margin:0; font-size:1rem; font-weight:700; color:var(--color-text,#1e293b); }
.team-pay-summary { display:flex; align-items:center; gap:0.25rem; padding:0.625rem 0.875rem; background:var(--color-surface-alt,#f8fafc); border-radius:var(--radius-md,8px); margin-bottom:0.75rem; font-size:var(--text-sm,0.8rem); color:var(--color-text-muted,#64748b); flex-wrap:wrap; }
.team-pay-list { display:flex; flex-direction:column; }
.team-pay-row { display:flex; align-items:center; gap:0.75rem; padding:0.625rem 0.875rem; border-bottom:1px solid var(--color-border-light,#f1f5f9); transition:background .1s; }
.team-pay-row:hover { background:var(--color-surface-alt,#f8fafc); }
.team-pay-date { min-width:90px; font-size:var(--text-sm,0.8rem); color:var(--color-text-muted,#64748b); flex-shrink:0; }
.team-pay-amount { min-width:80px; font-weight:700; font-size:var(--text-sm,0.875rem); color:var(--color-text,#1e293b); flex-shrink:0; }
.team-pay-desc { flex:1; min-width:0; display:flex; flex-wrap:wrap; gap:0.25rem 0.5rem; font-size:var(--text-xs,0.75rem); color:var(--color-text-muted,#64748b); }
.team-pay-method { background:var(--color-surface-alt,#f1f5f9); padding:0.1rem 0.4rem; border-radius:4px; font-size:0.65rem; text-transform:uppercase; letter-spacing:0.03em; }
.team-pay-linked { color:var(--color-primary,#6366f1); font-size:0.65rem; font-weight:500; }
.team-pay-actions { flex-shrink:0; }

/* ---- Form Row helper (team modals) ---- */
.form-row { display:flex; gap:0.75rem; }
.form-group-half { flex:1; min-width:0; }

/* ---- Mobile: team ---- */
@media (max-width: 600px) {
    .team-toolbar { flex-direction:column; align-items:stretch; }
    .team-toolbar-left { width:100%; flex-wrap:wrap; }
    .team-toolbar-left .table-search { max-width:100%; width:100%; }
    .team-toolbar-right { width:100%; justify-content:stretch; }
    .team-toolbar-right .btn { flex:1; }
    .team-grid { grid-template-columns:1fr; gap:0.5rem; }
    .team-card { padding:0.875rem; }
    .team-card-stats { gap:0.5rem; }
    .team-card-stat { flex:1; min-width:55px; }
    .team-detail-header { flex-direction:column; align-items:center; text-align:center; padding:1rem; }
    .team-pay-row { flex-wrap:wrap; gap:0.375rem; padding:0.5rem 0.625rem; }
    .team-pay-date { min-width:auto; font-size:var(--text-xs,0.7rem); }
    .team-pay-amount { min-width:auto; }
    .team-pay-desc { width:100%; order:3; }
    .form-row { flex-direction:column; gap:0; }
}
/* ============================================================
   PLANNER — Notes, Reminders & Appointments
   Beautiful, addictive daily companion styles
   ============================================================ */

/* ── Planner SVG Icon System ── */
.planner-svg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}
.planner-svg-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* ── Notification Permission Banner ── */
.planner-notif-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(79,70,229,0.08), rgba(59,130,246,0.08));
    border: 1px solid var(--color-primary, #4f46e5);
    border-radius: var(--radius-lg, 8px);
    font-size: var(--text-sm);
    animation: planner-fade-in 0.3s ease-out;
}
.planner-notif-icon {
    font-size: 1.25rem;
    color: var(--color-primary, #4f46e5);
    flex-shrink: 0;
}
.planner-notif-granted {
    background: rgba(34,197,94,0.08);
    border-color: #22c55e;
    color: #16a34a;
}
.planner-notif-granted .planner-notif-icon { color: #16a34a; }
.planner-notif-denied {
    background: rgba(239,68,68,0.06);
    border-color: #f87171;
    color: #b91c1c;
}
.planner-notif-denied .planner-notif-icon { color: #dc2626; }

/* ── Tab Bar ── */
.planner-tabs {
    display: flex;
    gap: 0.25rem;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 8px);
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--color-border, #e5e7eb);
    overflow-x: auto;
}
.planner-tab {
    flex: 1;
    padding: 0.625rem 1rem;
    border: none;
    background: transparent;
    border-radius: var(--radius-md, 6px);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-secondary, #6b7280);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.planner-tab:hover {
    background: var(--color-bg-hover, rgba(0,0,0,0.04));
    color: var(--color-text);
}
.planner-tab.active {
    background: var(--color-primary, #4f46e5);
    color: #fff;
    box-shadow: 0 2px 8px rgba(79,70,229,0.25);
}

/* ── Greeting Card ── */
.planner-greeting-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #a855f7 100%);
    border-radius: var(--radius-lg, 8px);
    color: #fff;
    box-shadow: 0 4px 20px rgba(79,70,229,0.3);
    animation: planner-fade-in 0.4s ease-out;
}
.planner-greeting-emoji {
    font-size: 2.5rem;
    line-height: 1;
    color: rgba(255,255,255,0.9);
}
.planner-greeting-emoji svg {
    width: 2.5rem;
    height: 2.5rem;
}
.planner-greeting-text {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.planner-greeting-date {
    font-size: var(--text-sm);
    opacity: 0.85;
    margin-top: 0.125rem;
}

/* ── Panel Header ── */
.planner-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}
.planner-section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

/* ── Empty States ── */
.planner-empty,
.planner-empty-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
    color: var(--color-text-secondary, #6b7280);
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 8px);
    border: 1px dashed var(--color-border, #e5e7eb);
}
.planner-empty-icon {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-secondary, #9ca3af);
}
.planner-empty-icon svg { width: 2.5rem; height: 2.5rem; }
.planner-empty p,
.planner-empty-day p {
    margin: 0;
    font-size: var(--text-sm);
    max-width: 280px;
}

/* ── Stats Row (Overview) ── */
.planner-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.planner-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
    transition: transform 0.2s, box-shadow 0.2s;
}
.planner-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.planner-stat-icon { font-size: 1.5rem; margin-bottom: 0.375rem; color: var(--color-primary, #4f46e5); }
.planner-stat-icon svg { width: 1.5rem; height: 1.5rem; }
.planner-stat-count { font-size: 1.5rem; font-weight: 700; color: var(--color-text); }
.planner-stat-label { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.125rem; }

/* ── Timeline (Overview) ── */
.planner-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.planner-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
    animation: planner-slide-in 0.3s ease-out;
}
.planner-timeline-item.overdue { border-left-color: #ef4444; background: rgba(239,68,68,0.04); }
.planner-timeline-item.due { border-left-color: #f59e0b; background: rgba(245,158,11,0.04); }
.planner-timeline-item.appointment { border-left-color: #4f46e5; background: rgba(79,70,229,0.04); }
.planner-timeline-item.note { border-left-color: #22c55e; background: rgba(34,197,94,0.04); }

.planner-timeline-icon { font-size: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; color: var(--color-primary, #4f46e5); }
.planner-timeline-icon svg { width: 1.25rem; height: 1.25rem; }
.planner-timeline-item.overdue .planner-timeline-icon { color: #ef4444; }
.planner-timeline-item.due .planner-timeline-icon { color: #f59e0b; }
.planner-timeline-item.appointment .planner-timeline-icon { color: #4f46e5; }
.planner-timeline-item.note .planner-timeline-icon { color: #22c55e; }
.planner-timeline-content { flex: 1; min-width: 0; }
.planner-timeline-time { font-size: var(--text-xs, 0.75rem); color: var(--color-primary, #4f46e5); font-weight: 600; margin-bottom: 0.125rem; }
.planner-timeline-label { font-weight: 600; color: var(--color-text); font-size: 0.9rem; }
.planner-timeline-meta { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary); margin-top: 0.125rem; display: flex; align-items: center; gap: 0.25rem; }
.planner-timeline-meta .planner-svg-icon { font-size: 0.8rem; opacity: 0.7; }
.planner-timeline-meta .planner-svg-icon svg { width: 0.8rem; height: 0.8rem; }
.planner-note-preview { font-style: italic; }

.planner-inline-btn { flex-shrink: 0; align-self: center; }

/* SVG icons in planner buttons and titles */
.planner-section-title .planner-svg-icon { font-size: 1.1rem; vertical-align: -0.1em; color: var(--color-primary, #4f46e5); }
.planner-section-title .planner-svg-icon svg { width: 1.1rem; height: 1.1rem; }
.planner-reminder-due .planner-svg-icon,
.planner-repeat-badge .planner-svg-icon,
.planner-upcoming-location .planner-svg-icon,
.planner-appt-meta .planner-svg-icon { font-size: 0.85rem; opacity: 0.7; }
.planner-panel .btn .planner-svg-icon,
.planner-notif-banner .btn .planner-svg-icon,
.planner-widget .btn .planner-svg-icon { font-size: 0.9em; }
.planner-panel .btn svg,
.planner-notif-banner .btn svg,
.planner-widget .btn svg,
.planner-inline-btn svg { width: 1em; height: 1em; vertical-align: -0.15em; }

/* ── Badges ── */
.planner-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.badge-danger { background: rgba(239,68,68,0.1); color: #dc2626; }
.badge-warning { background: rgba(245,158,11,0.1); color: #d97706; }
.badge-info { background: rgba(59,130,246,0.1); color: #2563eb; }
.badge-success { background: rgba(34,197,94,0.1); color: #16a34a; }

/* ── Notes Grid ── */
.planner-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}
.planner-note-card {
    position: relative;
    padding: 1rem;
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
    transition: transform 0.2s, box-shadow 0.2s;
    animation: planner-fade-in 0.3s ease-out;
    min-height: 100px;
}
.planner-note-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
.planner-note-card.pinned {
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 2px 12px rgba(79,70,229,0.12);
}
.planner-note-pin {
    position: absolute;
    top: -6px;
    right: 8px;
    font-size: 1rem;
    transform: rotate(15deg);
    color: var(--color-primary, #4f46e5);
}
.planner-note-pin svg { width: 1rem; height: 1rem; }
.planner-note-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.375rem;
    color: var(--color-text);
}
.planner-note-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 120px;
    overflow: hidden;
    line-height: 1.5;
}
.planner-note-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary);
    opacity: 0.7;
}
.planner-note-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.planner-note-card:hover .planner-note-actions {
    opacity: 1;
}

/* ── Color Picker (Note Form) ── */
.planner-color-picker {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.planner-color-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s;
}
.planner-color-dot:hover { transform: scale(1.15); }
.planner-color-dot.active {
    border-color: var(--color-primary, #4f46e5);
    box-shadow: 0 0 0 2px rgba(79,70,229,0.3);
}

/* ── Note Textarea ── */
.planner-note-textarea {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

/* ── Reminders List ── */
.planner-reminders-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.planner-reminder-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
    border-left: 4px solid var(--color-border);
    transition: all 0.3s ease;
    animation: planner-slide-in 0.3s ease-out;
}
.planner-reminder-card.overdue { border-left-color: #ef4444; background: rgba(239,68,68,0.03); }
.planner-reminder-card.today { border-left-color: #f59e0b; background: rgba(245,158,11,0.03); }
.planner-reminder-card.upcoming { border-left-color: #2563eb; }
.planner-reminder-card.done { opacity: 0.5; border-left-color: #22c55e; }

.planner-reminder-left { flex: 1; min-width: 0; }
.planner-reminder-text { font-weight: 600; color: var(--color-text); margin: 0.375rem 0; }
.planner-reminder-due { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.planner-reminder-actions { display: flex; gap: 0.375rem; flex-shrink: 0; flex-wrap: wrap; align-items: flex-start; }

.planner-repeat-badge {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background: rgba(79,70,229,0.08);
    color: var(--color-primary);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
}

/* ── Done Section (collapsible) ── */
.planner-done-section { margin-top: 1.5rem; }
.planner-done-toggle {
    width: 100%;
    text-align: left;
    opacity: 0.7;
    font-size: var(--text-sm);
}
.planner-done-toggle::after {
    content: " \25B6";
    font-size: 0.625rem;
    transition: transform 0.2s;
    display: inline-block;
    margin-left: 0.25rem;
}
.planner-done-toggle.expanded::after {
    transform: rotate(90deg);
}
.planner-done-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.5rem;
}

/* ── Appointments ── */
.planner-appt-group { margin-bottom: 1.5rem; }
.planner-appt-group-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.625rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.planner-appt-card {
    display: flex;
    gap: 1rem;
    padding: 0.875rem 1rem;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 0.5rem;
    transition: all 0.2s;
    animation: planner-slide-in 0.3s ease-out;
}
.planner-appt-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: var(--color-primary, #4f46e5);
}
.planner-appt-card.past { opacity: 0.5; }

.planner-appt-left {
    flex-shrink: 0;
    min-width: 65px;
    text-align: center;
}
.planner-appt-time {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary, #4f46e5);
}
.planner-appt-end {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary);
}
.planner-appt-date-label {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary);
    margin-top: 0.125rem;
}
.planner-appt-middle { flex: 1; min-width: 0; }
.planner-appt-title { font-weight: 600; color: var(--color-text); }
.planner-appt-meta { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary); margin-top: 0.125rem; display: flex; align-items: center; gap: 0.25rem; }
.planner-appt-notes { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary); margin-top: 0.375rem; font-style: italic; }
.planner-appt-actions { display: flex; gap: 0.25rem; flex-shrink: 0; align-self: center; }

/* Upcoming card (overview) */
.planner-upcoming-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-md, 6px);
    border: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 0.375rem;
}
.planner-upcoming-date { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); min-width: 80px; }
.planner-upcoming-time { font-size: var(--text-sm); color: var(--color-text-secondary); min-width: 45px; }
.planner-upcoming-title { flex: 1; font-weight: 500; color: var(--color-text); }
.planner-upcoming-location { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary); display: flex; align-items: center; gap: 0.25rem; }

.planner-overview-section { margin-bottom: 1.5rem; }

/* ── Dashboard Planner Widget ── */
.planner-widget {
    background: var(--color-bg-card, #fff);
    border-radius: var(--radius-lg, 8px);
    border: 1px solid var(--color-border, #e5e7eb);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s;
    animation: planner-fade-in 0.4s ease-out;
}
.planner-widget:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.planner-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(79,70,229,0.06), rgba(139,92,246,0.06));
    border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.planner-widget-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}
.planner-widget-body {
    padding: 0.5rem;
}
.planner-widget-empty {
    text-align: center;
    padding: 1rem;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}
.planner-widget-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: var(--radius-md, 6px);
    transition: background 0.15s;
}
.planner-widget-item:hover {
    background: var(--color-bg-hover, rgba(0,0,0,0.03));
}
.planner-widget-item.reminder { border-left: 3px solid #f59e0b; }
.planner-widget-item.appointment { border-left: 3px solid #4f46e5; }
.planner-widget-item.note { border-left: 3px solid #22c55e; }
.planner-widget-icon { font-size: 1rem; flex-shrink: 0; color: var(--color-primary, #4f46e5); }
.planner-widget-icon svg { width: 1rem; height: 1rem; }
.planner-widget-item.reminder .planner-widget-icon { color: #f59e0b; }
.planner-widget-item.appointment .planner-widget-icon { color: #4f46e5; }
.planner-widget-item.note .planner-widget-icon { color: #22c55e; }
.planner-widget-text { flex: 1; font-size: var(--text-sm); color: var(--color-text); font-weight: 500; }
.planner-widget-text-col { flex: 1; display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.planner-widget-text-col .planner-widget-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.planner-widget-meta { font-size: var(--text-xs, 0.75rem); color: var(--color-text-secondary); display: flex; align-items: center; gap: 0.25rem; }
.planner-widget-meta .planner-svg-icon { font-size: 0.75rem; opacity: 0.7; }
.planner-widget-meta .planner-svg-icon svg { width: 0.75rem; height: 0.75rem; }
.planner-widget-meta.overdue { color: #ef4444; font-weight: 600; }

/* ── Delete button (subtle red on hover) ── */
.planner-del-btn:hover { color: #ef4444 !important; }

/* ── Animations ── */
@keyframes planner-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes planner-slide-in {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}
.planner-item-done {
    animation: planner-done-anim 0.5s ease-out forwards;
}
@keyframes planner-done-anim {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.97); background: rgba(34,197,94,0.1); }
    100% { opacity: 0; transform: scale(0.95) translateX(20px); }
}

/* ── Dark theme overrides ── */
[data-theme="dark"] .planner-note-card {
    border-color: var(--color-border);
}
[data-theme="dark"] .planner-greeting-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
[data-theme="dark"] .planner-note-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
[data-theme="dark"] .planner-widget-header {
    background: linear-gradient(135deg, rgba(79,70,229,0.12), rgba(139,92,246,0.12));
}

/* Note card dark theme color adjustments */
[data-theme="dark"] .planner-note-card { background: var(--color-bg-card, #1e1e1e); }

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .planner-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .planner-tab { padding: 0.5rem 0.75rem; font-size: var(--text-xs, 0.75rem); }
    .planner-greeting-card { padding: 1rem; flex-direction: column; text-align: center; }
    .planner-greeting-emoji { font-size: 2rem; }
    .planner-greeting-emoji svg { width: 2rem; height: 2rem; }
    .planner-greeting-text { font-size: 1.125rem; }
    .planner-stats-row { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .planner-stat-card { padding: 0.75rem 0.5rem; }
    .planner-stat-count { font-size: 1.25rem; }
    .planner-notes-grid { grid-template-columns: 1fr; }
    .planner-note-actions { opacity: 1; }
    .planner-reminder-card { flex-direction: column; }
    .planner-reminder-actions { width: 100%; justify-content: flex-start; }
    .planner-appt-card { flex-direction: column; gap: 0.5rem; }
    .planner-appt-left { text-align: left; display: flex; gap: 0.5rem; align-items: baseline; }
    .planner-appt-actions { align-self: flex-start; }
    .planner-panel-header { flex-wrap: wrap; }
    .planner-upcoming-card { flex-wrap: wrap; }
}


/* ============================================================
   iOS / SAFARI MOBILE FIXES
   iPhones render CSS pixels at higher DPI than most Android
   devices, making sub-0.75rem text feel small.  These rules
   ensure minimum readable sizes and proper touch targets.
   ============================================================ */

/* Prevent Safari auto-zoom when focusing inputs (requires >=16px) */
@media (max-width: 768px) {
    input.form-input,
    select.form-select,
    textarea.form-textarea {
        font-size: max(var(--text-sm), 16px);
    }
}

/* Prevent double-tap-to-zoom on interactive elements (iOS Safari) */
@supports (-webkit-touch-callout: none) {
    button, a, .btn, .sidebar-link, .bottom-nav-item, .bottom-nav-more-item,
    .action-center-item, .search-trigger, input, select, textarea {
        touch-action: manipulation;
    }
}

/* iOS Safari: bump tiny text so it stays readable on high-DPI screens.
   @supports (-webkit-touch-callout: none) targets only WebKit/Safari. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        /* Nudge smallest text up from e.g. 0.6rem to at least 0.72rem */
        .stat-label,
        .nudge-hint-text,
        .form-label,
        .empty-state-desc,
        .action-center-item-text,
        .bottom-nav-label,
        .bottom-nav-more-item {
            font-size: max(0.72rem, inherit);
        }

        /* Ensure buttons & tap targets meet the 44px minimum */
        .btn,
        .bottom-nav-item,
        .bottom-nav-more-item,
        .action-center-item {
            min-height: 44px;
        }

        /* Slightly more generous padding in main content */
        .page-content,
        .page-content-wide {
            padding: var(--space-4);
        }

        /* Stat cards: a touch larger for readability */
        .stat-value {
            font-size: max(var(--text-lg), 1.1rem);
        }
    }
}