/*
 * SendBillie - Phoenix App Styles
 * ================================
 *
 * IMPORTANT: This CSS is extracted EXACTLY from the prototype.
 * DO NOT modify values, rename classes, or restructure.
 *
 * Source: SendBillie_Prototype_pre_production.html
 * Extracted: Lines 20-27899
 * Total Lines: 27,878
 *
 * CSS SECTIONS (approximate line references from prototype):
 * ----------------------------------------------------------
 * - CSS Variables (Light/Dark): lines 20-250
 * - Base Styles & Reset: lines 250-500
 * - Layout & Containers: lines 500-850
 * - Wizard Components: lines 850-1100
 * - Info Boxes: lines 960-1020
 * - Buttons: lines 1050-1300
 * - Forms & Inputs: lines 1200-1800
 * - Cards: lines 1500-2500
 * - Tables: lines 2000-2800
 * - Modals: lines 2500-4000
 * - Invoice Templates: lines 3500-12000
 * - Dashboard Widgets: lines 8000-11000
 * - Reports: lines 10000-12000
 * - Validation States: lines 11400-11500
 * - IBAN/BIC Inputs: lines 11600-11700
 * - Auto-save Indicator: lines 12100-12200
 * - Resume Draft Modal: lines 12150-12300
 * - Misc Components: lines 12300-27899
 *
 * Phoenix adaptation notes:
 * - All onclick handlers become phx-click or JS Hooks
 * - IDs preserved for hook targeting
 * - Class names unchanged for CSS selector integrity
 */

/* ===== COLOR SYSTEM (CSS Custom Properties) ===== */
:root {
    /* ========== LIGHT MODE (Default) ========== */

    /* Backgrounds */
    --bg-page: #f5f5f7;
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f7;
    --bg-tertiary: #e5e5ea;

    /* Text */
    --text-primary: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-muted: #6e6e73;
    --text-placeholder: #6e6e73;
    --text-link: #4db3a5;

    /* Borders */
    --border-primary: #d2d2d7;
    --border-secondary: #e5e5ea;
    --border-light: #f5f5f7;
    --border-focus: #4db3a5;

    /* Brand */
    --accent-primary: #eb0a44;
    --accent-gradient: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    --accent-light: #fff0f3;
    --accent-hover: #d4093d;
    --accent-teal: #4db3a5;
    --accent-teal-hover: #3d9a8c;
    /* Readable dark text for the active segment of a teal-fill toggle (was an unreadable
       white). One dark-teal value that clears contrast on both theme teals (light + dark).
       Canonical: every segmented view-switcher's active chip = --accent-teal fill + this text. */
    --on-accent-teal: #06312a;
    --accent-teal-light: #e0f2f1;
    --accent-checkbox: #4db3a5;

    /* Pro Customisation (defaults) */
    --brand-primary: #eb0a44;
    --brand-secondary: #1d1d1f;
    --brand-accent: #66ccbe;
    --brand-font: 'Inter', sans-serif;

    /* Status - Success */
    --success-bg: #e8f5e9;
    --success-text: #2da84e;
    --success-border: #2da84e;

    /* Status - Error */
    --error-bg: #ffebee;
    --error-text: #d32f2f;
    --error-border: #d32f2f;

    /* Status - Warning */
    --warning-bg: #fff3e0;
    --warning-text: #f57c00;
    --warning-border: #f57c00;

    /* Status - Info */
    --info-bg: #e3f2fd;
    --info-text: #1976d2;
    --info-border: #1976d2;

    /* Invoice Status Badges */
    --status-draft-bg: #f5f5f7;
    --status-draft-text: #6e6e73;
    --status-sent-bg: #e3f2fd;
    --status-sent-text: #1976d2;
    --status-paid-bg: #e8f5e9;
    --status-paid-text: #2da84e;
    --status-overdue-bg: #ffebee;
    --status-overdue-text: #d32f2f;
    --status-void-bg: #fbe9e7;
    --status-void-text: #e57373;

    /* Category palette — qualitative colours for provider grouping / labels / badges (identity, NOT state). Each: solid + pale tint. */
    --cat-purple: #7c3aed;
    --cat-purple-bg: #f3f3fe;
    --cat-teal: #1a7a6e;
    --cat-teal-bg: #e8f2f1;
    --cat-orange: #b45309;
    --cat-orange-bg: #f8eee6;
    --cat-blue: #2d5a8e;
    --cat-blue-bg: #eaeff4;

    /* Skeleton Loading */
    --skeleton-base: #e5e5ea;
    --skeleton-shine: #f5f5f7;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-focus: 0 0 0 3px rgba(77, 179, 165, 0.25);

    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.6);
}

/* ========== DARK MODE ========== */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-page: #000000;
    --bg-primary: #1c1c1e;
    --bg-secondary: #2c2c2e;
    --bg-tertiary: #3a3a3c;

    /* Text - AAA Compliant (7:1 minimum) */
    --text-primary: #f5f5f7;
    --text-secondary: #d1d1d6; /* Brightened: 9.5:1 on bg-primary, 7.2:1 on bg-tertiary */
    --text-muted: #c0c0c5; /* Brightened: 7.8:1 on bg-primary, 5.9:1 on bg-secondary */
    --text-placeholder: #c0c0c5; /* AAA compliant */
    --text-link: #66ccbe;

    /* Borders */
    --border-primary: #3a3a3c;
    --border-secondary: #48484a;
    --border-light: #2c2c2e;
    --border-focus: #66ccbe;

    /* Brand */
    --accent-primary: #ff375f;
    --accent-gradient: linear-gradient(135deg, #ff8cd0 0%, #ff6b6b 50%, #ff375f 100%);
    --accent-light: #3a2a2e;
    --accent-hover: #ff4d73;
    --accent-teal: #66ccbe;
    --accent-teal-hover: #7dd4c8;
    --accent-teal-light: #1a3a38;
    --accent-checkbox: #66ccbe;

    /* Status - Success */
    --success-bg: #1a3a1a;
    --success-text: #32d74b;
    --success-border: #32d74b;

    /* Status - Error */
    --error-bg: #3a1a1a;
    --error-text: #ff6b6b;
    --error-border: #ff6b6b;

    /* Status - Warning */
    --warning-bg: #3a2a1a;
    --warning-text: #ff9f0a;
    --warning-border: #ff9f0a;

    /* Status - Info */
    --info-bg: #1a2a3a;
    --info-text: #64d2ff;
    --info-border: #64d2ff;

    /* Invoice Status Badges */
    --status-draft-bg: #2c2c2e;
    --status-draft-text: #a1a1a6;
    --status-sent-bg: #1a2a3a;
    --status-sent-text: #64d2ff;
    --status-paid-bg: #1a3a1a;
    --status-paid-text: #32d74b;
    --status-overdue-bg: #3a1a1a;
    --status-overdue-text: #ff453a;
    --status-void-bg: #3a2a2a;
    --status-void-text: #ff8a65;

    /* Category palette (dark) — brighter solids on dark surfaces + deep tints */
    --cat-purple: #8b5cf6;
    --cat-purple-bg: #212543;
    --cat-teal: #4db3a5;
    --cat-teal-bg: #20393e;
    --cat-orange: #f59e0b;
    --cat-orange-bg: #372e20;
    --cat-blue: #4a7fc7;
    --cat-blue-bg: #1a2739;

    /* Skeleton Loading */
    --skeleton-base: #3a3a3c;
    --skeleton-shine: #48484a;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(102, 204, 190, 0.3);

    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.85);
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Background colors */
        --bg-primary: #1c1c1e;
        --bg-secondary: #2c2c2e;
        --bg-tertiary: #3a3a3c;
        --bg-page: #000000;

        /* Text colors - AAA Compliant */
        --text-primary: #f5f5f7;
        --text-secondary: #d1d1d6;
        --text-muted: #c0c0c5;
        --text-placeholder: #c0c0c5;

        /* Border colors */
        --border-primary: #3a3a3c;
        --border-secondary: #48484a;
        --border-light: #2c2c2e;

        /* Brand colors */
        --accent-primary: #ff375f;
        --accent-gradient: linear-gradient(135deg, #ff8cd0 0%, #ff6b6b 50%, #ff375f 100%);
        --accent-light: #3a2a2e;
        --accent-checkbox: #66ccbe;

        /* Status colors */
        --success-bg: #1a3a1a;
        --success-text: #32d74b;
        --error-bg: #3a1a1a;
        --error-text: #ff6b6b;
        --warning-bg: #3a2a1a;
        --warning-text: #ff9f0a;
        --info-bg: #1a2a3a;
        --info-text: #64d2ff;

        /* Skeleton Loading */
        --skeleton-base: #3a3a3c;
        --skeleton-shine: #48484a;

        /* Shadows */
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.5);

        /* Overlay */
        --overlay-bg: rgba(0, 0, 0, 0.85);
    }

    /* Dark mode: Brighter spinners */
    .loading-spinner {
        border-color: #48484a;
    }

    .auto-save-spinner {
        border-color: #48484a;
        border-top-color: var(--text-secondary);
    }

    .bulk-progress-spinner {
        border-color: #48484a;
    }

    /* Dark mode: Empty states need more definition */
    .empty-state,
    .empty-state-card {
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
    }

    .dashboard-empty-state,
    .zone-empty {
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
    }

    .empty-state-inline {
        background: var(--bg-secondary);
        border: 1px solid var(--border-primary);
        border-radius: 8px;
    }

    /* Dark mode: Toggle switch visibility */
    .toggle-switch {
        background: #48484a;
        border: 1px solid #636366;
    }

    .toggle-switch.active {
        background: #32d74b;
        border-color: #32d74b;
    }

    .toggle-switch::after {
        background: #ffffff;
    }

    /* Dark mode: Form help text */
    .form-help {
        color: #b8b8bd !important;
    }

    /* Dark mode: Info box */
    .info-box {
        background: #2c2c2e;
        border-left-color: #64d2ff;
    }

    .info-box-icon {
        color: #64d2ff;
    }

    .info-box-text {
        color: #f5f5f7;
    }
}

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

/* Smooth theme transitions */
*,
*::before,
*::after {
    transition: background-color 0.3s ease,
                color 0.2s ease,
                border-color 0.2s ease,
                box-shadow 0.2s ease;
}

/* Disable transitions for elements that shouldn't animate */
.no-transition,
.skeleton *,
[class*="skeleton"] {
    transition: none !important;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-page);
    color: var(--text-primary);
    line-height: 1.5;
}

/* Global form control colors */
input[type="radio"],
input[type="checkbox"] {
    accent-color: var(--accent-checkbox);
}

/* Layout */
.app-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.sidebar {
    width: 280px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-header {
    padding: 0;
    border-bottom: none;
}

.sidebar-header-brand {
    padding: 20px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header-toggle {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-header-toggle .sidebar-theme-toggle {
    display: inline-flex;
}

.sidebar-header-toggle .sidebar-demo-toggle {
}

.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.sidebar-logo-img {
    height: 48px;
    width: auto;
    object-fit: contain;
}

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

.user-avatar-mini {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.user-avatar-mini:hover {
    transform: scale(1.05);
    background: rgba(255, 255, 255, 0.35);
}

/* Demo Mode Toggle - Pill with solid gradient border via outline trick */
.sidebar-demo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: var(--bg-secondary);
    border: 2px solid #4db6a5;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--accent-teal);
    text-transform: uppercase;
    line-height: 1;
}

.sidebar-demo-toggle svg {
    width: 14px;
    height: 14px;
    stroke: var(--accent-teal);
    flex-shrink: 0;
}

.sidebar-demo-toggle .icon-demo-off {
    display: none;
}

.sidebar-demo-toggle .icon-demo-on {
    display: block;
}

/* Label shows TARGET state (where you'd go on click) */
.sidebar-demo-toggle .demo-label {
    display: none;
}

.sidebar-demo-toggle .live-label {
    display: inline;
}

/* Live mode state - uses brand color */
[data-demo-mode="false"] .sidebar-demo-toggle {
    border-color: #f5775e;
    color: var(--accent-primary);
}

[data-demo-mode="false"] .sidebar-demo-toggle svg {
    stroke: var(--accent-primary);
}

[data-demo-mode="false"] .sidebar-demo-toggle .icon-demo-on {
    display: none;
}

[data-demo-mode="false"] .sidebar-demo-toggle .icon-demo-off {
    display: block;
}

[data-demo-mode="false"] .sidebar-demo-toggle .demo-label {
    display: inline;
}

[data-demo-mode="false"] .sidebar-demo-toggle .live-label {
    display: none;
}

/* Dark mode */
[data-theme="dark"] .sidebar-demo-toggle {
    background: #2d2d2d;
    border-color: #66ccbe;
    color: #66ccbe;
}

[data-theme="dark"][data-demo-mode="false"] .sidebar-demo-toggle {
    border-color: #f5775e;
    color: #f5775e;
}

[data-theme="dark"][data-demo-mode="false"] .sidebar-demo-toggle svg {
    stroke: #f5775e;
}

[data-theme="dark"] .sidebar-demo-toggle svg {
    stroke: #66ccbe;
}

.sidebar-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    background-image: linear-gradient(#f5f5f7, #f5f5f7), linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-theme-toggle:hover {
    transform: scale(1.05);
}

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

.sidebar-theme-toggle .icon-sun {
    display: none;
}

.sidebar-theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .sidebar-theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .sidebar-theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .sidebar-theme-toggle {
    background: #2d2d2d;
    background-image: linear-gradient(#2d2d2d, #2d2d2d), linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.avatar-dropdown {
    position: absolute;
    top: 70px;
    left: 16px;
    right: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 200;
}

.avatar-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.avatar-dropdown-header {
    padding: 16px;
}

.avatar-dropdown-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
}

.avatar-dropdown-email {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 2px;
}

.avatar-dropdown-divider {
    height: 1px;
    background: var(--border-primary);
}

.avatar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.2s ease;
}

.avatar-dropdown-item:hover {
    background: var(--bg-secondary);
}

.avatar-dropdown-item:last-child {
    color: #ff3b30;
}

.avatar-dropdown-item svg {
    width: 18px;
    height: 18px;
}

.sidebar-section-divider {
    height: 1px;
    background: #d2d2d7;
    margin: 16px 16px;
    width: calc(100% - 32px);
}

.sidebar-section-title {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-settings-nav {
    padding: 0 16px 16px;
}

.sidebar-settings-nav .settings-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 2px;
}

.sidebar-settings-nav .settings-nav-item:hover {
    background: var(--bg-secondary);
}

.sidebar-settings-nav .settings-nav-item svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.settings-nav-item .pro-badge {
    margin-left: auto;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.sidebar-nav {
    flex-shrink: 0;
    padding: 16px;
}

.sidebar-bottom {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 16px;
    border-top: 1px solid var(--border-primary);
}

.nav-section {
    margin-bottom: 8px;
}

.nav-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    user-select: none;
    text-decoration: none;
}

.nav-item:hover {
    background: rgba(247, 74, 118, 0.12);
}

.nav-item.active {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
}

.nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.nav-item-text {
    flex: 1;
    white-space: nowrap;
}

.nav-item .pro-badge {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
    min-width: 32px;
    text-align: center;
}

.nav-item.active .pro-badge {
    background: rgba(255, 255, 255, 0.3);
}

.nav-item .nav-item-expand {
    margin-left: 8px;
}

.nav-item-badge {
    padding: 4px 10px;
    background: transparent;
    color: var(--success-text);
    border: 1.5px solid #2da84e;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    letter-spacing: 0.3px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.nav-item-badge.badge-soon {
    color: var(--text-secondary);
    border-color: var(--text-secondary);
}

.nav-item.active .nav-item-badge {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border-color: rgba(255, 255, 255, 0.4);
}

.nav-notification-dot {
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    flex-shrink: 0;
    display: none;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
}

/* ===== Lancer Messages sidebar badge + inbox + thread modal ===== */
.nav-messages-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    /* #1106: tokens, not #ef4444/#fff - brand attention colour, surface colour on top */
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.lancer-conversations-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.lancer-conversation-item {
    padding: 14px 16px;
    border: 1px solid var(--border-primary, #e5e5ea);
    border-radius: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--bg-primary, #ffffff);
}
.lancer-conversation-item:hover {
    border-color: var(--accent-teal, #4db3a5);
    background: var(--bg-hover, #f5f5f7);
}
.lancer-conversation-item.unread {
    background: rgba(77, 179, 165, 0.08);
    border-color: rgba(77, 179, 165, 0.3);
}
.lancer-conversation-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.lancer-conversation-left {
    flex: 1;
    min-width: 0;
}
.lancer-conversation-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}
.lancer-conversation-unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}
.lancer-conversation-sub {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}
.lancer-conversation-snippet {
    font-size: 13px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.lancer-conversation-item.unread .lancer-conversation-snippet {
    color: var(--text-primary);
    font-weight: 500;
}
.lancer-conversation-you-prefix {
    color: var(--text-tertiary);
    margin-right: 4px;
}
.lancer-conversation-time {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Thread modal */
.lancer-message-thread-body {
    padding: 20px 24px;
    max-height: 50vh;
    overflow-y: auto;
}
.lancer-message-thread-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lancer-message-item {
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.5;
}
.lancer-message-item.me {
    align-self: flex-end;
    background: var(--accent-teal, #4db3a5);
    color: #ffffff;
}
.lancer-message-item.them {
    align-self: flex-start;
    background: var(--bg-secondary, #2c2c2e);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}
.lancer-message-item.credit-note-request {
    align-self: stretch;
    max-width: 100%;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
}
.lancer-message-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: #f59e0b;
    color: #ffffff;
    margin-bottom: 6px;
}
.lancer-message-sender {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.85;
    margin-bottom: 2px;
}
.lancer-message-body {
    white-space: pre-wrap;
    word-break: break-word;
}
.lancer-message-time {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}
.lancer-message-thread-footer {
    padding: 12px 24px 16px !important;
    display: flex !important;
    gap: 12px !important;
    align-items: flex-end !important;
    border-top: 1px solid var(--border-primary);
}
.lancer-message-thread-input {
    flex: 1;
    resize: vertical;
    min-height: 40px;
    max-height: 160px;
    font-family: inherit;
}

/* Invoice reference card in the lancer thread header (mirror of portal .pd-chat-invoice-ref, teal accent) */
.lancer-message-thread-header-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.lancer-thread-invoice-ref {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--bg-secondary, #f5f5f7);
    border: 1px solid var(--border-primary, #e5e5ea);
    border-radius: 8px;
    align-self: flex-start;
}
.lancer-thread-invoice-ref-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background: var(--accent-teal, #4db3a5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lancer-thread-invoice-ref-number {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
}
.lancer-thread-invoice-ref-detail {
    font-size: 12px;
    color: var(--text-tertiary);
}

/* Lancer thread system card (credit note request marker) */
.lancer-thread-system-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary, #f5f5f7);
    border: 1px solid var(--border-primary, #e5e5ea);
    border-left: 3px solid var(--accent-teal, #4db3a5);
    border-radius: 8px;
    align-self: stretch;
    max-width: 100%;
}
.lancer-thread-system-card-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent-teal, #4db3a5);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.lancer-thread-system-card-body {
    flex: 1;
    min-width: 0;
}
.lancer-thread-system-card-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
}
.lancer-thread-system-card-detail {
    font-size: 12px;
    color: var(--text-tertiary);
}
.lancer-thread-system-card-time {
    font-size: 11px;
    color: var(--text-tertiary);
    flex-shrink: 0;
    margin-top: 2px;
}
.lancer-thread-system-card-arrow {
    flex-shrink: 0;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    margin-top: 2px;
}
.lancer-thread-system-card--link {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s, border-color 0.15s;
}
.lancer-thread-system-card--link:hover {
    background: rgba(77, 179, 165, 0.1);
    border-color: var(--accent-teal, #4db3a5);
}
.lancer-thread-system-card--link:hover .lancer-thread-system-card-arrow {
    color: var(--accent-teal, #4db3a5);
}

/* Chat card lifecycle variants: "issued" = green tint; "rejected" = amber.
   Mirrors the status-pill colours used elsewhere in the CN UI so the card
   is recognisable even without reading the title. */
.lancer-thread-system-card--issued {
    background: rgba(19, 122, 58, 0.06);
    border-color: rgba(19, 122, 58, 0.25);
}
.lancer-thread-system-card--issued:hover {
    background: rgba(19, 122, 58, 0.12);
    border-color: rgba(19, 122, 58, 0.4);
}
.lancer-thread-system-card--issued .lancer-thread-system-card-title {
    color: #137a3a;
}

.lancer-thread-system-card--rejected {
    background: rgba(199, 106, 0, 0.06);
    border-color: rgba(199, 106, 0, 0.25);
}
.lancer-thread-system-card--rejected:hover {
    background: rgba(199, 106, 0, 0.12);
    border-color: rgba(199, 106, 0, 0.4);
}
.lancer-thread-system-card--rejected .lancer-thread-system-card-title {
    color: #c76a00;
}

/* Invoice list row chat bubble */
.invoice-action-btn--msg {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0;
}
.invoice-action-btn--msg svg {
    width: 16px;
    height: 16px;
}
.invoice-action-btn--msg .msg-unread-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    display: none;
}
.invoice-action-btn--msg.has-unread .msg-unread-dot {
    display: block;
}

.nav-notification-dot.visible {
    display: block;
    animation: subtle-glow 1s ease-in-out 3;
}

.nav-subitem .nav-notification-dot {
    margin-left: auto;
}

.nav-item .nav-notification-dot {
    margin-left: 8px;
}

@keyframes subtle-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0); }
}

.nav-item-expand {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.nav-item.expanded .nav-item-expand {
    transform: rotate(90deg);
}

.nav-subitems {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    margin-left: 32px;
}

.nav-subitems.expanded {
    /* Fits all 5 Back Office items (Insights / Accounting / Recurring Costs /
       Reports & Exports / Banking) -- was 200px, which clipped Banking. */
    max-height: 340px;
}

.nav-subitem {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 4px;
    white-space: nowrap;
    text-decoration: none;
}

.nav-subitem .nav-item-badge {
    margin-left: auto;
}

.nav-subitem:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.nav-subitem.active {
    background: #ebe9f5;
    color: var(--accent-primary);
    font-weight: 500;
}

/* Main Content */
.main-content {
    margin-left: 280px;
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Page Header */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

.page-header > div:first-child {
    flex: 1;
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.page-subtitle {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Close/Back button for draft editor */
.btn-close-invoice {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close-invoice:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

/* Wizard Container */
.wizard-container {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.wizard-steps {
    display: flex;
    border-bottom: 1px solid #d2d2d7;
    padding: 0 32px;
    background: var(--bg-secondary);
}

.wizard-step {
    flex: 1;
    padding: 20px 0;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
}

.wizard-step:hover {
    background: var(--bg-secondary);
}

.wizard-step::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: background 0.3s ease;
}

.wizard-step.active::after {
    background: #eb0a44;
}

.wizard-step.completed::after {
    background: #34c759;
}

.wizard-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.wizard-step.active .wizard-step-number {
    background: var(--accent-primary);
    color: white;
}

.wizard-step.completed .wizard-step-number {
    background: var(--success-text);
    color: white;
}

.wizard-step.completed .wizard-step-number::before {
    content: '\2713';
}

.wizard-step-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.wizard-step.active .wizard-step-title {
    color: var(--text-primary);
    font-weight: 600;
}

.wizard-content {
    padding: 40px 32px;
}

.wizard-section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.wizard-section-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    margin-bottom: 32px;
    line-height: 1.6;
}

/* Step 3 Preview Magnifier Effect */
.step3-preview-hover {
    position: relative;
}
.step3-magnifier-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: 8px;
    pointer-events: none;
}
.step3-preview-hover:hover .step3-magnifier-overlay {
    opacity: 1;
}
.step3-preview-hover:hover {
    transform: scale(1.01);
}

/* Template Selection */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.template-category {
    margin-bottom: 48px;
}

.template-category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.template-category-header .template-category-title {
    margin-bottom: 0;
}


.template-category-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.template-horizontal-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding-bottom: 12px;
    scroll-behavior: smooth;
}

.template-horizontal-scroll::-webkit-scrollbar {
    height: 8px;
}

.template-horizontal-scroll::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.template-horizontal-scroll::-webkit-scrollbar-thumb {
    background: #d2d2d7;
    border-radius: 4px;
}

.template-horizontal-scroll::-webkit-scrollbar-thumb:hover {
    background: #b8b8bd;
}

.template-horizontal-scroll .template-card {
    min-width: 260px;
    max-width: 260px;
    flex-shrink: 0;
}

.template-horizontal-scroll .wf-card {
    flex-shrink: 0;
}

/* Scaled mini preview - uses actual template with transform scale */
.wf-mini-scaled {
    overflow: hidden;
    padding: 0;
    background: transparent;
}

.wf-scale-wrapper {
    transform: scale(0.44);
    transform-origin: top left;
    width: 595px;
    height: 842px;
    position: relative;
    left: 50%;
    margin-left: -130.9px; /* Half of scaled width: (595 * 0.44) / 2 */
}

.wf-mini-scaled .invoice {
    box-shadow: none !important;
}

.template-card {
    border: 2px solid #d2d2d7;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: var(--bg-primary);
    height: 400px;
    display: flex;
    flex-direction: column;
}

.template-card .template-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.template-card .template-description {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 0;
    line-height: 1.4;
    flex-shrink: 0;
}

.template-card .template-preview {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(235, 10, 68, 0.15);
}

.template-card.selected {
    border-color: var(--accent-primary);
    background: #f9f9f9;
    box-shadow: 0 4px 12px rgba(235, 10, 68, 0.2);
}

.template-card-checkmark {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    background: #eb0a44;
    color: white;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: all 0.2s ease;
    z-index: 100;
    pointer-events: auto;
}

.template-card.selected .template-card-checkmark {
    display: flex;
}

.template-card-checkmark:hover {
    background: #d10940;
    transform: scale(1.15);
}

.template-card-checkmark:active {
    transform: scale(0.95);
}


/* Webflow Template Card - NEW (literal JSX translation) */
/* Line 196-203: Card container */
.wf-card {
    width: 288px;
    background: #2c2c2e;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}
.wf-card:hover {
    transform: translateY(-4px);
}
.wf-card.selected {
    box-shadow: 0 0 0 3px #66ccbe;
}
.wf-selected-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #66ccbe;
    color: #1c1c1e;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    z-index: 10;
}

/* Line 217-221: Paper wrapper */
.wf-paper {
    margin: 12px;
    position: relative;
    overflow: hidden;
}

/* Thumbnail iframe container — renders actual template scaled down */
.wf-thumbnail-container {
    width: 264px;
    height: 374px;
    overflow: hidden;
    position: relative;
}

.wf-thumbnail-iframe {
    width: 595px;
    height: 842px;
    border: none;
    transform: scale(0.4437);
    transform-origin: top left;
    pointer-events: none;
}

/* Line 223-234: Hover overlay */
.wf-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
}
.wf-card:hover .wf-overlay {
    opacity: 1;
}

/* Line 236-243: View details button */
.wf-overlay span {
    background: #ffffff;
    color: #1d1d1f;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

/* Line 9-18: Mini preview (A4 paper) */
.wf-mini-preview {
    width: 100%;
    aspect-ratio: 210 / 297;
    background: #ffffff;
    padding: 16px;
    font-size: 7px;
    color: #1d1d1f;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    position: relative;
}

/* Line 21: Header row */
.wf-mini-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Line 23: Company name */
.wf-mini-company {
    font-weight: 600;
    font-size: 8px;
    margin-bottom: 2px;
}

/* Line 24-27: Company address */
.wf-mini-address {
    color: #6e6e73;
    font-size: 5px;
    line-height: 1.4;
}

/* Line 30: Invoice title */
.wf-mini-invoice-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-align: right;
}

/* Line 31: Invoice number */
.wf-mini-invoice-num {
    color: #6e6e73;
    font-size: 5px;
    margin-top: 2px;
    text-align: right;
}

/* Line 36: Divider */
.wf-mini-divider {
    height: 1px;
    background: #1d1d1f;
    margin-bottom: 8px;
}

/* Line 39: Bill To section */
.wf-mini-billto {
    margin-bottom: 8px;
}
.wf-mini-billto-label {
    font-size: 5px;
    color: #6e6e73;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.wf-mini-billto-name {
    font-weight: 500;
    font-size: 6px;
}

/* Line 45: Line items container */
.wf-mini-items {
    flex: 1;
}

/* Line 46-53: Line item row */
.wf-mini-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #e5e5e7;
    font-size: 6px;
}

/* Gallery card pay buttons per Classic template variant */
/* Classic: full-width solid red, matching the bold INVOICE header */
.wf-card[data-template="basic"] .wf-mini-pay-btn {
    display: block;
    text-align: center;
    background: #eb0a44;
    color: #ffffff;
    padding: 4px 0;
    border-radius: 4px;
    font-size: 5px;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.3px;
}
/* Simple: outlined dark button, matching the minimal black-and-white aesthetic */
.wf-card[data-template="basic-simple"] .wf-mini-pay-btn {
    display: block;
    text-align: center;
    background: transparent;
    color: #1d1d1f;
    border: 1px solid #1d1d1f;
    padding: 3px 0;
    border-radius: 3px;
    font-size: 5px;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.3px;
}
/* Two-Column: teal filled button, adding a subtle colour accent to the structured layout */
.wf-card[data-template="basic-twocol"] .wf-mini-pay-btn {
    display: block;
    text-align: center;
    background: #34c48a;
    color: #ffffff;
    padding: 4px 0;
    border-radius: 3px;
    font-size: 5px;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.3px;
}
/* Compact: dark solid button, matching the grey header/table style */
.wf-card[data-template="basic-compact"] .wf-mini-pay-btn {
    display: block;
    text-align: center;
    background: #1d1d1f;
    color: #ffffff;
    padding: 3px 0;
    border-radius: 2px;
    font-size: 5px;
    font-weight: 600;
    margin-top: 6px;
    letter-spacing: 0.3px;
}
.wf-mini-preview .wf-mini-sb-id {
    font-size: 3.5px;
    color: #8e8e93;
    margin-top: 4px;
    text-align: left;
}
.wf-mini-preview .wf-mini-qr {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border: 0.5px solid #d2d2d7;
    border-radius: 1px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    gap: 0.5px;
    padding: 1.5px;
}
.wf-mini-preview .wf-mini-qr span {
    background: #1d1d1f;
    border-radius: 0.3px;
}
.wf-mini-preview .wf-mini-qr span:nth-child(even) {
    background: transparent;
}

/* Line 57-64: Total row */
.wf-mini-total {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 2px solid #1d1d1f;
    font-weight: 700;
    font-size: 8px;
}

/* Line 250-255: Footer */
.wf-footer {
    padding: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Line 256: Template name */
.wf-footer-name {
    color: #f5f5f7;
    font-size: 14px;
    font-weight: 600;
}


/* Webflow Modal - NEW (literal JSX translation) */
/* Line 271-277: Modal container */
.wf-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 30, 0.98);
    z-index: 10000;
}
.wf-modal.active {
    display: flex;
}

/* Line 279: Main content area */
.wf-modal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Line 281-288: Preview area */
.wf-modal-preview-area {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 48px;
    padding-top: 90px; /* Space for stacked header */
    padding-bottom: 32px;
    padding-left: 148px; /* 48 + 100 to shift center 50px right */
    padding-right: 348px; /* Shifts center left by 150px: (348-48)/2 = 150 */
    overflow-y: auto;
}

.wf-modal-preview-area::-webkit-scrollbar {
    width: 8px;
}

.wf-modal-preview-area::-webkit-scrollbar-track {
    background: transparent;
}

.wf-modal-preview-area::-webkit-scrollbar-thumb {
    background: #636366;
    border-radius: 4px;
}

.wf-modal-preview-area::-webkit-scrollbar-thumb:hover {
    background: #8e8e93;
}

/* Template preview iframe container (server-rendered modal on /templates page) */
#wfFullPreview {
    width: 595px;
    height: 842px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

#wfFullPreview iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
}

/* Line 73-84: Full preview (A4 paper) */
.wf-full-preview {
    width: 595px;
    height: 842px;
    background: #ffffff;
    padding: 48px;
    font-size: 14px;
    color: #1d1d1f;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Full preview header */
.wf-full-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
}
.wf-full-company {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}
.wf-full-address {
    margin: 0;
    color: #6e6e73;
    font-size: 13px;
    line-height: 1.6;
}
.wf-full-invoice-title {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 16px;
    text-align: right;
}
.wf-full-meta {
    font-size: 13px;
    color: #6e6e73;
    text-align: right;
}

/* Full preview divider */
.wf-full-divider {
    height: 2px;
    background: #1d1d1f;
    margin-bottom: 24px;
}

/* Full preview bill to */
.wf-full-billto {
    margin-bottom: 24px;
}
.wf-full-billto-label {
    font-size: 11px;
    color: #6e6e73;
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
}
.wf-full-billto-info {
    font-size: 14px;
}

/* Full preview table */
.wf-full-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}
.wf-full-table thead tr {
    border-bottom: 2px solid #1d1d1f;
}
.wf-full-table th {
    text-align: left;
    padding: 12px 0;
    font-size: 12px;
    font-weight: 600;
}
.wf-full-table th.right {
    text-align: right;
}
.wf-full-table tbody tr {
    border-bottom: 1px solid #e5e5e7;
}
.wf-full-table td {
    padding: 12px 0;
}
.wf-full-table td.right {
    text-align: right;
}
.wf-full-table .desc-sub {
    color: #6e6e73;
    font-size: 12px;
    margin-top: 4px;
}

/* Full preview totals */
.wf-full-totals {
    margin-top: auto;
}
.wf-full-totals-rows {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}
.wf-full-totals-row {
    display: flex;
    justify-content: space-between;
    width: 200px;
}
.wf-full-totals-row.final {
    padding-top: 8px;
    border-top: 2px solid #1d1d1f;
    font-weight: 700;
    font-size: 16px;
}
.wf-full-footer {
    margin-top: 32px;
    font-size: 12px;
    color: #6e6e73;
    text-align: center;
}
.wf-full-footer a {
    color: #0077cc;
}

/* Line 293-303: Bottom bar - DEPRECATED, keeping for fallback */
.wf-modal-bottom {
    display: none;
}

/* ===== NEW MODAL LAYOUT ===== */

/* Top Header Bar */
.wf-modal-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 300px; /* Leave space for sidebar */
    padding: 16px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    z-index: 5;
}

.wf-modal-title {
    color: #f5f5f7;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Toggle buttons */
.wf-modal-toggles-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.wf-modal-toggle {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 4px;
}
.wf-modal-toggle button {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.6);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.wf-modal-toggle button:hover {
    color: rgba(255,255,255,0.8);
}
.wf-modal-toggle button.active {
    background: var(--accent-teal);
    color: var(--on-accent-teal);
}
.wf-toggle-tip {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    padding-left: 8px;
}

/* ===== CUSTOMISATION SIDEBAR ===== */
.wf-customise-sidebar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    background: #2c2c2e;
    border-left: 1px solid #3a3a3c;
    display: flex;
    flex-direction: column;
    z-index: 5;
}

.wf-customise-header {
    padding: 20px;
    border-bottom: 1px solid #3a3a3c;
}

.wf-customise-title {
    font-size: 13px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wf-customise-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.wf-customise-content::-webkit-scrollbar {
    width: 8px;
}

.wf-customise-content::-webkit-scrollbar-track {
    background: #2c2c2e;
}

.wf-customise-content::-webkit-scrollbar-thumb {
    background: #636366;
    border-radius: 4px;
}

.wf-customise-content::-webkit-scrollbar-thumb:hover {
    background: #8e8e93;
}

.wf-customise-section {
    margin-bottom: 24px;
}

.wf-customise-section:last-child {
    margin-bottom: 0;
}

.wf-customise-label {
    font-size: 11px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: block;
}

/* Estimate disclaimer editor */
.wf-customise-hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: -4px 0 10px;
}

.wf-disclaimer-textarea {
    width: 100%;
    min-height: 132px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.55;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    resize: vertical;
}

.wf-disclaimer-textarea:focus {
    outline: none;
    border-color: var(--border-secondary);
}

/* Logo Upload Area */
.wf-logo-upload {
    border: 2px dashed #48484a;
    border-radius: 8px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

#wfLogoPlaceholder {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wf-logo-upload:hover {
    border-color: #66ccbe;
    background: rgba(102, 204, 190, 0.05);
}

.wf-logo-upload.has-logo {
    border-style: solid;
    border-color: #48484a;
    padding: 12px;
}

.wf-logo-upload-icon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    color: #6e6e73;
}

.wf-logo-upload-text {
    font-size: 13px;
    color: #f5f5f7;
    margin-bottom: 4px;
}

.wf-logo-upload-hint {
    font-size: 11px;
    color: #6e6e73;
}

.wf-logo-preview {
    max-width: 100%;
    max-height: 60px;
    border-radius: 4px;
}

/* Checkered background for transparent images (after upload) */
.wf-logo-upload.has-logo,
.wf-wordmark-upload.has-wordmark {
    background-image: 
        linear-gradient(45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(-45deg, #e0e0e0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e0e0e0 75%),
        linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
    background-size: 12px 12px;
    background-position: 0 0, 0 6px, 6px -6px, -6px 0px;
    background-color: #ffffff;
}

/* Smart Tips for colored header templates */
.wf-smart-tip {
    display: none;
    padding: 10px 12px;
    margin-top: 8px;
    background: rgba(102, 204, 190, 0.15);
    border-left: 3px solid #66ccbe;
    border-radius: 0 6px 6px 0;
    font-size: 11px;
    line-height: 1.4;
    color: #e5e5ea;
}

.wf-smart-tip.visible {
    display: block;
}

.wf-smart-tip-icon {
    margin-right: 4px;
}

.wf-logo-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.wf-logo-action-btn {
    font-size: 12px;
    color: #66ccbe;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.wf-logo-action-btn:hover {
    text-decoration: underline;
}

.wf-logo-action-btn.remove {
    color: #ff6b6b;
}

/* Colour Pickers */
.wf-colour-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.wf-colour-row:last-child {
    margin-bottom: 0;
}

.wf-colour-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid #48484a;
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}

.wf-colour-swatch::-webkit-color-swatch-wrapper {
    padding: 0;
}

.wf-colour-swatch::-webkit-color-swatch {
    border: none;
    border-radius: 4px;
}

.wf-colour-swatch::-moz-color-swatch {
    border: none;
    border-radius: 4px;
}

.wf-colour-name {
    font-size: 13px;
    color: #f5f5f7;
    flex: 1;
}

.wf-colour-hex {
    font-size: 12px;
    font-family: 'SF Mono', Monaco, monospace;
    color: #8e8e93;
    background: #1c1c1e;
    border: 1px solid #3a3a3c;
    border-radius: 4px;
    padding: 4px 8px;
    width: 80px;
    text-transform: uppercase;
}

.wf-colour-hex:focus {
    outline: none;
    border-color: #66ccbe;
}

/* Font Dropdown - Using custom dropdown */
.wf-font-dropdown-container {
    width: 100%;
}

.wf-font-dropdown-container .custom-dropdown {
    width: 100%;
}

.wf-font-dropdown-container .custom-dropdown-trigger {
    width: 100%;
    padding: 10px 12px;
    background: #1c1c1e;
    border: 1px solid #3a3a3c;
    border-radius: 6px;
    color: #f5f5f7;
    font-size: 14px;
}

.wf-font-dropdown-container .custom-dropdown-trigger:hover {
    border-color: #48484a;
}

.wf-font-dropdown-container .custom-dropdown.open .custom-dropdown-trigger {
    border-color: #66ccbe;
}

.wf-font-dropdown-container .custom-dropdown-menu {
    background: #1c1c1e;
    border: 1px solid #3a3a3c;
    border-radius: 6px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
}

.wf-font-dropdown-container .custom-dropdown-option {
    padding: 10px 12px;
    color: #f5f5f7;
    font-size: 14px;
}

.wf-font-dropdown-container .custom-dropdown-option:hover {
    background: #2c2c2e;
}

.wf-font-dropdown-container .custom-dropdown-option.selected {
    background: #3a3a3c;
}

.wf-font-dropdown-container .dropdown-chevron svg {
    stroke: #8e8e93;
}

/* No Logo Toggle */
.wf-no-logo-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #3a3a3c;
}

.wf-no-logo-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.wf-no-logo-checkbox input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
}

.wf-no-logo-checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    background: #1c1c1e;
    border: 1px solid #48484a;
    border-radius: 4px;
    pointer-events: none;
}

.wf-no-logo-checkbox input:checked + .wf-no-logo-checkmark {
    background: #66ccbe;
    border-color: #66ccbe;
}

.wf-no-logo-checkmark::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.wf-no-logo-checkbox input:checked + .wf-no-logo-checkmark::after {
    display: block;
}

.wf-no-logo-label {
    font-size: 13px;
    color: #f5f5f7;
    cursor: pointer;
}

/* Brand Wordmark Upload */
.wf-wordmark-upload {
    border: 2px dashed #48484a;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wf-wordmark-upload:hover {
    border-color: #66ccbe;
    background: rgba(102, 204, 190, 0.05);
}

.wf-wordmark-upload.has-wordmark {
    border-style: solid;
    border-color: #48484a;
    padding: 12px;
}

.wf-wordmark-upload-icon {
    width: 24px;
    height: 24px;
    margin: 0 auto 6px;
    color: #6e6e73;
}

.wf-wordmark-upload-text {
    font-size: 12px;
    color: #f5f5f7;
    margin-bottom: 2px;
}

.wf-wordmark-upload-hint {
    font-size: 10px;
    color: #6e6e73;
}

.wf-wordmark-preview {
    max-width: 100%;
    max-height: 50px;
    border-radius: 4px;
}

.wf-wordmark-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.wf-wordmark-action-btn {
    font-size: 11px;
    color: #66ccbe;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.wf-wordmark-action-btn:hover {
    text-decoration: underline;
}

.wf-wordmark-action-btn.remove {
    color: #ff6b6b;
}

/* Wordmark Warning Modal */
.wf-wordmark-warning {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.wf-wordmark-warning-content {
    background: #2c2c2e;
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    text-align: center;
}

.wf-wordmark-warning-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    color: #f5a623;
}

.wf-wordmark-warning-title {
    font-size: 16px;
    font-weight: 600;
    color: #f5f5f7;
    margin-bottom: 8px;
}

.wf-wordmark-warning-text {
    font-size: 13px;
    color: #8e8e93;
    line-height: 1.5;
    margin-bottom: 16px;
}

.wf-wordmark-warning-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
}

.wf-wordmark-warning-checkbox label {
    font-size: 12px;
    color: #8e8e93;
    cursor: pointer;
}

.wf-wordmark-warning-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.wf-wordmark-warning-btn {
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}

.wf-wordmark-warning-btn.cancel {
    background: #3a3a3c;
    color: #f5f5f7;
}

.wf-wordmark-warning-btn.continue {
    background: #66ccbe;
    color: #fff;
}

/* Pay Now Button Radio Group */
.wf-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wf-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.wf-radio-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.wf-radio-checkmark {
    width: 18px;
    height: 18px;
    border: 1px solid #48484a;
    border-radius: 50%;
    background: #1c1c1e;
    position: relative;
    flex-shrink: 0;
}

.wf-radio-option input:checked + .wf-radio-checkmark {
    border-color: #66ccbe;
}

.wf-radio-option input:checked + .wf-radio-checkmark::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: #66ccbe;
    border-radius: 50%;
}

.wf-radio-label {
    font-size: 13px;
    color: #f5f5f7;
}

/* Bookkeeper delivery-mode option cards (E0-3) — token-based custom radio,
   correct in BOTH light and dark (the .wf-radio variant above is dark-only). */
.bk-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bk-radio-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color 0.15s ease;
}
.bk-radio-option:hover {
    border-color: var(--accent-teal);
}
.bk-radio-option:has(input:checked) {
    border-color: var(--accent-teal);
}
.bk-radio-option input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.bk-radio-checkmark {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    border: 1px solid var(--border-primary);
    border-radius: 50%;
    background: var(--bg-primary);
    position: relative;
}
.bk-radio-option input:checked + .bk-radio-checkmark {
    border-color: var(--accent-teal);
}
.bk-radio-option input:checked + .bk-radio-checkmark::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: var(--accent-teal);
    border-radius: 50%;
}
.bk-radio-title {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}
.bk-radio-desc {
    display: block;
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-top: 2px;
}
/* Custom checkbox matching .bk-radio (token-based, correct in light AND dark —
   never a native/system checkbox). Square with a teal tick when checked. */
.bk-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
}
.bk-checkbox input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.bk-checkbox-mark {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    flex-shrink: 0;
    border: 1px solid var(--border-primary);
    border-radius: 5px;
    background: var(--bg-primary);
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.bk-checkbox:hover .bk-checkbox-mark {
    border-color: var(--accent-teal);
}
.bk-checkbox input:checked + .bk-checkbox-mark {
    border-color: var(--accent-teal);
    background: var(--accent-teal);
}
.bk-checkbox input:checked + .bk-checkbox-mark::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bk-checkbox input:focus-visible + .bk-checkbox-mark {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

/* The same mark, driven by state instead of a native input (#1177). The
   disconnect window's box is a button with role="checkbox", so there is no
   native control to style off -- and no new native control in the codebase. */
.bk-checkbox-mark--on {
    border-color: var(--accent-teal);
    background: var(--accent-teal);
}
.bk-checkbox-mark--on::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.bk-checkbox-button {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 14px;
    font: inherit;
    cursor: pointer;
}
.bk-checkbox-button:hover .bk-checkbox-mark {
    border-color: var(--accent-teal);
}
.bk-checkbox-button:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

/* The plain-words explainer dot (#1177). Same affordance as the expenses
   submit-bar's, in the shared bk- family so other surfaces can use it:
   accounting words never appear in copy without one of these beside them. */
.bk-info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-left: 4px;
    vertical-align: 1px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    font-weight: 600;
    cursor: help;
}

/* Bank picker option row (#872). Selectable list row inside the connect-bank
   modal. Token-based (light + dark); hover reveals the teal affordance like
   every other selectable row (.send-invoice-option / .bk-radio-option). */
.bk-bank-option {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.bk-bank-option:hover {
    border-color: var(--accent-teal);
    background: var(--bg-tertiary);
}
.bk-bank-option:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}
.bk-bank-option img {
    border-radius: 6px;
    flex-shrink: 0;
}

.bk-bank-option .bk-bank-logo {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Per-line VAT-rate selector (NL Compliance Phase 1, #799). Compact custom
   segmented control — three pills (21% / 9% / 0%), NEVER a native <select>.
   Token-based so it is correct in both light and dark. The active pill uses a
   SOLID teal fill (the app's affirmative accent), matching how the primary
   controls signal "selected" — not a semi-transparent tint. */
.vat-segment {
    display: inline-flex;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary);
    vertical-align: middle;
}
.vat-segment-btn {
    appearance: none;
    -webkit-appearance: none;
    border: none;
    border-left: 1px solid var(--border-primary);
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    padding: 7px 8px;
    min-width: 34px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.vat-segment-btn:first-child {
    border-left: none;
}
.vat-segment-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}
.vat-segment-btn.active {
    background: var(--accent-teal);
    color: var(--on-accent-teal);
}
.vat-segment-btn:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: -2px;
}
/* NL Compliance Phase 2 (KOR): a KOR (small-business-scheme) company charges no
   VAT, so the per-line 21/9/0 control is replaced by a single locked "Exempt"
   badge — neutral, non-interactive (not the teal "active" chip that reads as
   clickable). */
.vat-segment--kor .vat-segment-btn,
.vat-segment--kor .vat-segment-btn.active,
.vat-segment--kor .vat-segment-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: default;
    min-width: 62px;
}

/* Rates page view-switch (Default / Custom) — now a class instead of inline styles, on the
   canonical teal-fill toggle (was inline teal fill + unreadable white text). */
.rates-tab {
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 8px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.rates-tab:hover:not(.active) { color: var(--text-primary); }
.rates-tab.active { background: var(--accent-teal); color: var(--on-accent-teal); }

/* Bookkeeper software picker (E0-3) — a proper scrollable dropdown (scales to
   any number of tools; the pill grid was wrong for this). */
.bk-select {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}
.bk-select.placeholder {
    color: var(--text-muted);
}
.bk-select svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.bk-select-menu {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px;
}
.bk-select-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 12px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    border-radius: 6px;
}
.bk-select-option:hover {
    background: var(--bg-secondary);
}
.bk-select-option.selected {
    background: var(--accent-teal);
    color: #ffffff;
}
.bk-select-search {
    display: block;
    margin: 2px 2px 6px;
    padding: 8px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-primary);
    outline: none;
    min-height: 18px;
}
.bk-select-search:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
}
/* "Did you mean" suggestion chips in the Other-software free-text flow. */
.bk-suggest {
    background: transparent;
    color: var(--accent-teal);
    border: 1px solid var(--accent-teal);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.bk-suggest:hover {
    background: var(--accent-teal);
    color: #ffffff;
}

/* Apply Brand Colours Toggle */
.wf-apply-colours-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #3a3a3c;
}

.wf-apply-colours-label {
    font-size: 13px;
    color: #f5f5f7;
}

.wf-toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.wf-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.wf-toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #48484a;
    border-radius: 24px;
    transition: 0.2s;
}

.wf-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.2s;
}

.wf-toggle-switch input:checked + .wf-toggle-slider {
    background: #66ccbe;
}

.wf-toggle-switch input:checked + .wf-toggle-slider::before {
    transform: translateX(20px);
}

/* Use Default button (font) */
.wf-use-default-btn {
    background: none;
    border: none;
    color: #8e8e93;
    font-size: 12px;
    cursor: pointer;
    padding: 8px 0 0 0;
    text-align: left;
}

.wf-use-default-btn:hover {
    color: #66ccbe;
    text-decoration: underline;
}

/* Contact Information section in customisation sidebar */
.wf-contact-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.wf-contact-toggle-label {
    font-size: 13px;
    color: #e5e5e7;
}

.wf-contact-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0 6px 28px;
    margin-bottom: 4px;
}

.wf-contact-value {
    font-size: 12px;
    color: #66ccbe;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wf-contact-edit-btn {
    background: none;
    border: 1px solid #48484a;
    color: #8e8e93;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
}

.wf-contact-edit-btn:hover {
    color: #66ccbe;
    border-color: #66ccbe;
}

.wf-contact-input {
    flex: 1;
    background: #2c2c2e;
    border: 1px solid #66ccbe;
    color: #e5e5e7;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 4px;
    outline: none;
}

.wf-contact-input:empty::before {
    content: attr(data-placeholder);
    color: #636366;
    pointer-events: none;
}

/* Keep input styling for contenteditable div */
.wf-contact-input:focus {
    outline: none;
    border-color: #66ccbe;
}

/* Phone input with country code dropdown — generic classes for PhoneInput hook */
.phone-dropdown-hidden {
    display: none !important;
}

.phone-input-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.phone-country-select {
    position: relative;
    flex-shrink: 0;
}

.phone-country-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--text-primary, #1d1d1f);
    font-size: 12px;
    cursor: pointer;
    height: 100%;
    white-space: nowrap;
}

.phone-country-btn:hover {
    border-color: var(--accent-teal, #66ccbe);
}

.phone-flag {
    font-size: 16px;
    line-height: 1;
}

.phone-dial-code {
    font-size: 11px;
    color: var(--text-secondary, #6e6e73);
}

.phone-arrow {
    font-size: 10px;
    color: var(--text-tertiary, #8e8e93);
    margin-left: 2px;
}

.phone-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 8px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.phone-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-primary, #1d1d1f);
}

.phone-dropdown-item:hover {
    background: var(--bg-secondary, #f5f5f5);
}

.phone-dropdown-flag {
    font-size: 16px;
    line-height: 1;
}

.phone-dropdown-name {
    flex: 1;
}

.phone-dropdown-code {
    color: var(--text-secondary, #6e6e73);
    font-size: 11px;
}

.phone-number-input {
    flex: 1;
    background: var(--bg-primary, #ffffff);
    border: 1px solid var(--border-color, #d1d5db);
    border-radius: 6px;
    padding: 6px 10px;
    color: var(--text-primary, #1d1d1f);
    font-size: 13px;
    font-family: inherit;
    min-height: 32px;
    line-height: 1.4;
}

.phone-number-input:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary, #8e8e93);
    pointer-events: none;
}

.phone-number-input:focus {
    outline: none;
    border-color: var(--accent-teal, #66ccbe);
}

/* Phone input with country code dropdown — wf- prefixed for template sidebar */
.wf-phone-input-row {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.wf-phone-country-select {
    position: relative;
    flex-shrink: 0;
}

.wf-phone-country-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #2c2c2e;
    border: 1px solid #48484a;
    border-radius: 6px;
    padding: 6px 8px;
    color: #e5e5e7;
    font-size: 12px;
    cursor: pointer;
    height: 100%;
    white-space: nowrap;
}

.wf-phone-country-btn:hover {
    border-color: #66ccbe;
}

.wf-phone-flag {
    font-size: 16px;
    line-height: 1;
}

.wf-phone-dial-code {
    font-size: 11px;
    color: #8e8e93;
}

.wf-phone-arrow {
    font-size: 10px;
    color: #636366;
    margin-left: 2px;
}

.wf-phone-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: #2c2c2e;
    border: 1px solid #48484a;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 240px;
    overflow-y: auto;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.wf-phone-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: #e5e5e7;
}

.wf-phone-dropdown-item:hover {
    background: #3a3a3c;
}

.wf-phone-dropdown-flag {
    font-size: 16px;
    line-height: 1;
}

.wf-phone-dropdown-name {
    flex: 1;
}

.wf-phone-dropdown-code {
    color: #8e8e93;
    font-size: 11px;
}

.wf-phone-number-input {
    flex: 1;
    background: #2c2c2e;
    border: 1px solid #48484a;
    border-radius: 6px;
    padding: 6px 10px;
    color: #e5e5e7;
    font-size: 13px;
    font-family: inherit;
    min-height: 32px;
    line-height: 1.4;
}

.wf-phone-number-input:empty::before {
    content: attr(data-placeholder);
    color: #636366;
    pointer-events: none;
}

.wf-phone-number-input:focus {
    outline: none;
    border-color: #66ccbe;
}

/* Revert All Changes button */
.wf-revert-all-btn {
    background: none;
    border: 1px solid #48484a;
    color: #8e8e93;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.wf-revert-all-btn:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

.wf-save-changes-btn {
    background: #66ccbe;
    border: none;
    color: #1c1c1e;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.wf-save-changes-btn:hover {
    background: #5bb8ab;
}

/* Sidebar Footer with CTA */
.wf-customise-footer {
    padding: 20px;
    border-top: 1px solid #3a3a3c;
}

/* Disabled customization section */
.wf-customise-section.disabled {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

/* Pro/Trial banner in sidebar */
.wf-pro-banner {
    background: linear-gradient(135deg, #2c2c2e 0%, #1c1c1e 100%);
    border: 1px solid #3a3a3c;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 20px;
}

.wf-pro-banner-title {
    font-size: 13px;
    font-weight: 600;
    color: #f5f5f7;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-pro-banner-title svg {
    width: 16px;
    height: 16px;
    color: #66ccbe;
}

.wf-pro-banner-text {
    font-size: 12px;
    color: #8e8e93;
    line-height: 1.5;
    margin-bottom: 12px;
}

.wf-pro-banner-trial {
    font-size: 11px;
    color: #66ccbe;
    font-weight: 500;
    margin-bottom: 12px;
}

.wf-pro-banner-btn {
    width: 100%;
    background: #66ccbe;
    color: #1c1c1e;
    border: none;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.wf-pro-banner-btn:hover {
    opacity: 0.9;
}

.wf-pro-banner-btn.secondary {
    background: transparent;
    border: 1px solid #66ccbe;
    color: #66ccbe;
    margin-top: 8px;
}

.wf-pro-banner-btn.secondary:hover {
    background: rgba(102, 204, 190, 0.1);
}

/* Highlighted logo section for Two-Column template */
.wf-customise-section.logo-highlight .wf-logo-upload {
    border-color: #66ccbe;
    background: rgba(102, 204, 190, 0.05);
}

.wf-logo-highlight-text {
    color: #66ccbe;
    font-size: 11px;
    font-weight: 500;
    margin-top: 8px;
    text-align: center;
}

/* Hidden sidebar for classic templates */
.wf-customise-sidebar.hidden-for-classic {
    display: none;
}

/* Classic templates: no sidebar, preview takes full width */
.wf-modal-preview-area.wf-preview-full {
    flex: 1;
}

/* Classic CTA: same horizontal position as close button, at the bottom */
button.wf-classic-cta {
    position: absolute;
    bottom: 80px;
    left: calc(50% - 100px + 595px/2 + 20px);
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    background: var(--accent-teal, #4db3a5);
    color: #ffffff;
    cursor: pointer;
    width: auto;
    min-width: 0;
}

/* Minimal sidebar for Two-Column (logo only) */
.wf-customise-sidebar.logo-only-mode .wf-customise-content > *:not(#wfSectionLogo):not(#wfProBanner) {
    display: none;
}

/* Trial remaining badge */
.wf-trial-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(102, 204, 190, 0.15);
    color: #66ccbe;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 16px;
}

.wf-trial-badge svg {
    width: 14px;
    height: 14px;
}

.wf-modal-cta {
    width: 100%;
    background: var(--accent-teal, #4db3a5);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease;
}

.wf-modal-cta:hover {
    background: #d4093d;
}

/* Adjust preview area to account for sidebar */
.wf-modal.active .wf-modal-preview-area {
    padding-right: 348px; /* 300px sidebar + 48px gap */
    padding-top: 80px; /* Space for header */
}

/* Line 366-374: Sidebar */
/* Webflow-style floating navigation icons */
.wf-modal-close,
.wf-modal-nav {
    position: absolute;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    z-index: 10;
    transition: all 0.15s ease;
}
.wf-modal-close:hover,
.wf-modal-nav:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-teal);
}

.wf-modal-close {
    top: 80px; /* Aligned with top of template */
    left: calc(50% - 100px + 595px/2 + 20px); /* 100px offset, next to template right */
}

.wf-modal-nav {
    top: 50%;
    transform: translateY(-50%);
}
.wf-modal-nav.prev {
    left: calc(50% - 100px - 595px/2 - 70px); /* 100px offset, next to template left */
}
.wf-modal-nav.next {
    left: calc(50% - 100px + 595px/2 + 20px); /* 100px offset, next to template right */
}

/* Custom tooltips - positioned BELOW buttons */
.wf-modal-close::before,
.wf-modal-nav::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2e;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    pointer-events: none;
    z-index: 100;
}
.wf-modal-close:hover::before,
.wf-modal-nav:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Force hide tooltips when modal is not active */
.wf-modal:not(.active) .wf-modal-close::before,
.wf-modal:not(.active) .wf-modal-nav::before {
    display: none !important;
}

/* Pro Features Section */
.pro-features-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 28px;
}

.pro-features-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pro-features-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.pro-badge-inline {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pro-compare-link {
    font-size: 14px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s;
}

.pro-compare-link:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.pro-compare-link svg {
    width: 16px;
    height: 16px;
}

.pro-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.pro-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border-primary);
}

.pro-feature-icon {
    width: 40px;
    height: 40px;
    background: #66ccbe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pro-feature-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.pro-feature-text h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pro-feature-text p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.pro-features-cta {
    text-align: center;
}

@media (max-width: 600px) {
    .pro-features-grid {
        grid-template-columns: 1fr;
    }
}

/* Plan Comparison Modal */
.plan-comparison-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.plan-comparison-modal.active {
    display: flex;
}

.plan-comparison-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.plan-comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-primary);
}

.plan-comparison-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.plan-comparison-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.plan-comparison-close:hover {
    color: var(--text-primary);
}

.plan-comparison-body {
    padding: 28px;
}

.plan-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.plan-card {
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.plan-card.pro-plan {
    border: 2px solid var(--text-primary);
}

.plan-card-header {
    margin-bottom: 20px;
}

.plan-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.plan-badge.basic {
    background: #34c759;
    color: white;
}

.plan-badge.pro {
    background: #1d1d1f;
    color: white;
}

[data-theme="dark"] .plan-badge.pro {
    background: #f5f5f7;
    color: #1d1d1f;
}

.plan-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.plan-card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-secondary);
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.plan-features li svg.check-icon {
    color: #34c759;
}

.plan-features li svg.cross-icon {
    color: var(--border-primary);
}

.plan-features li.disabled {
    color: var(--text-muted);
}

.plan-card .btn {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .plan-cards {
        grid-template-columns: 1fr;
    }
}

/* Pro Trial Counter */
.pro-trial-counter {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.pro-trial-counter.warning {
    color: var(--warning-text);
}

.pro-trial-counter.exhausted {
    color: var(--error-text);
}

.pro-features-cta .pro-trial-counter {
    text-align: center;
}

/* Upgrade Modal */
.upgrade-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.upgrade-modal.active {
    display: flex;
}

.upgrade-modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    overflow: hidden;
}

.upgrade-modal-header {
    padding: 32px 32px 0;
}

.upgrade-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #66ccbe 0%, #4db3a5 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.upgrade-icon svg {
    width: 32px;
    height: 32px;
    color: white;
}

.upgrade-modal-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upgrade-modal-header p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.upgrade-modal-body {
    padding: 28px 32px;
}

.upgrade-pricing {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.upgrade-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.upgrade-price span {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
}

.upgrade-price-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.upgrade-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.upgrade-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-primary);
}

.upgrade-features li svg {
    width: 18px;
    height: 18px;
    color: #34c759;
    flex-shrink: 0;
}

.upgrade-modal-footer {
    padding: 0 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upgrade-modal-footer .btn {
    width: 100%;
    justify-content: center;
}

.upgrade-modal-footer .btn-secondary {
    background: transparent;
    border: none;
    color: var(--text-secondary);
}

.upgrade-modal-footer .btn-secondary:hover {
    color: var(--text-primary);
}

/* Pro Customisation Modal */
.pro-customisation-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pro-customisation-modal.active {
    display: flex;
}

.pro-customisation-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pro-customisation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-primary);
}

.pro-customisation-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pro-customisation-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.pro-customisation-close:hover {
    color: var(--text-primary);
}

.pro-customisation-body {
    padding: 28px;
}

.pro-section {
    margin-bottom: 28px;
}

.pro-section:last-child {
    margin-bottom: 0;
}

.pro-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-section-title svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

/* Logo Upload */
.logo-upload-area {
    border: 2px dashed var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.logo-upload-area:hover {
    border-color: var(--accent-primary);
    background: rgba(235, 10, 68, 0.02);
}

.logo-upload-area.has-logo {
    border-style: solid;
    padding: 16px;
}

.logo-upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.logo-upload-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.logo-upload-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.logo-preview {
    max-width: 200px;
    max-height: 80px;
    margin: 0 auto;
    display: block;
}

.logo-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Extracted Colors Notice */
.extracted-colors-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e8f5e9;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    color: #2e7d32;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.extracted-colors-notice.hidden {
    display: none;
}

.extracted-colors-notice.show {
    opacity: 1;
    transform: translateY(0);
}

.extracted-colors-notice svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #34c759;
}

[data-theme="dark"] .extracted-colors-notice {
    background: #1a3a2a;
    color: #4ade80;
}

/* Brand Colors */
.color-pickers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.color-picker-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.color-picker-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.color-picker-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

.color-picker-wrapper input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.color-picker-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-picker-wrapper input[type="color"]::-webkit-color-swatch {
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 4px;
}

.color-hex-input {
    flex: 1;
    border: none;
    background: none;
    font-size: 13px;
    font-family: monospace;
    color: var(--text-primary);
    text-transform: uppercase;
}

.color-hex-input:focus {
    outline: none;
}

/* Font Preview */
.font-preview {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 18px;
    color: var(--text-primary);
}

/* Currency Conversion */
.currency-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
}

.currency-select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-primary);
}

.currency-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 44px;
    color: var(--text-muted);
}

.currency-rate-info {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.currency-rate-info svg {
    width: 16px;
    height: 16px;
    color: var(--info-text);
}

/* Pro Modal Footer */
.pro-customisation-footer {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 20px 28px;
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    border-radius: 0 0 16px 16px;
}

.template-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.template-description {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.template-preview {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e5ea;
    height: 220px;
    overflow: hidden;
}

.template-preview-img {
    width: 100%;
    height: 120px;
    background: linear-gradient(135deg, #f5f5f7 0%, #e5e5ea 100%);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 12px;
}

/* Invoice Preview Mini - Option 1 Style */
.invoice-preview-mini {
    width: 100%;
    height: 220px;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    padding: 12px;
    font-size: 9px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.invoice-preview-mini:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

/* Modern 1 Mini Preview - Pink Punch Diagonal */
.invoice-preview-modern1 {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invoice-preview-modern1:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern1 .mini-diagonal {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 55px;
    background: linear-gradient(135deg, #fa8eaa 0%, #f74a76 40%, #eb0a44 100%);
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

.invoice-preview-modern1 .mini-content {
    position: relative;
    padding: 10px;
    font-size: 7px;
    color: #1d1d1f;
}

.invoice-preview-modern1 .mini-logo {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #f86c90 0%, #f5275c 100%);
    border-radius: 3px;
    margin-bottom: 4px;
    box-shadow: 0 2px 4px rgba(235, 10, 68, 0.2);
}

.invoice-preview-modern1 .mini-title {
    font-size: 10px;
    font-weight: 900;
    color: white;
    position: absolute;
    top: 10px;
    right: 10px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.15);
}

.invoice-preview-modern1 .mini-box {
    background: linear-gradient(135deg, #cd083b 0%, #880527 100%);
    color: white;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 5px;
    margin-top: 24px;
    display: inline-block;
    position: absolute;
    top: 22px;
    right: 10px;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(235, 10, 68, 0.25);
}

.invoice-preview-modern1 .mini-client {
    background: linear-gradient(90deg, rgba(250, 142, 170, 0.1) 0%, #f5f5f7 100%);
    padding: 5px 7px;
    border-radius: 4px;
    border-left: 2px solid #eb0a44;
    margin-top: 46px;
    font-size: 6px;
    color: #1d1d1f;
}

.invoice-preview-modern1 .mini-table {
    margin-top: 8px;
    font-size: 6px;
    color: #1d1d1f;
}

.invoice-preview-modern1 .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3px;
    padding: 2px 0;
    border-bottom: 1px solid #e5e5ea;
}

/* Modern 1B Mini Preview - Pink Punch #2 Accent Strip */
/* Systematically converted from React artifact */
.invoice-preview-modern1b {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.invoice-preview-modern1b:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern1b .mini-top-strip {
    height: 4px;
    background: linear-gradient(90deg, #fa8eaa 0%, #f74a76 30%, #eb0a44 70%, #cd083b 100%);
}

.invoice-preview-modern1b .mini-content {
    padding: 10px;
    font-size: 7px;
    color: #1d1d1f;
}

.invoice-preview-modern1b .mini-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.invoice-preview-modern1b .mini-logo-border {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border: 2px solid #f74a76;
    border-radius: 4px;
}

.invoice-preview-modern1b .mini-invoice-gradient {
    font-size: 11px;
    font-weight: 900;
    background: linear-gradient(135deg, #eb0a44 0%, #cd083b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.invoice-preview-modern1b .mini-details-box {
    background: #f5f5f7;
    padding: 4px 6px;
    border-radius: 3px;
    font-size: 5px;
    border-right: 2px solid #eb0a44;
    display: inline-block;
    margin-bottom: 6px;
    color: #1d1d1f;
    position: absolute;
    top: 32px;
    right: 10px;
}

.invoice-preview-modern1b .mini-client-line {
    padding: 5px 0;
    border-top: 1px solid #e5e5ea;
    border-bottom: 1px solid #e5e5ea;
    margin-top: 30px;
    margin-bottom: 6px;
    font-size: 6px;
    color: #1d1d1f;
    display: flex;
    align-items: center;
    gap: 4px;
}

.invoice-preview-modern1b .mini-client-line::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #eb0a44;
    border-radius: 50%;
}

.invoice-preview-modern1b .mini-table {
    font-size: 6px;
    color: #1d1d1f;
}

.invoice-preview-modern1b .mini-table-header {
    background: linear-gradient(90deg, rgba(250, 142, 170, 0.15) 0%, transparent 100%);
    padding: 2px 4px;
    color: #cd083b;
    font-weight: 700;
    font-size: 5px;
    margin-bottom: 2px;
}

.invoice-preview-modern1b .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 2px 0;
    border-bottom: 1px solid #e5e5ea;
}

.invoice-preview-modern1b .mini-total-highlight {
    background: linear-gradient(90deg, #fa8eaa 0%, transparent 100%);
    padding: 4px 6px;
    border-radius: 4px;
    margin-top: 6px;
    font-size: 7px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    color: #1d1d1f;
}

.invoice-preview-modern1b .mini-total-highlight .mini-amount {
    color: #eb0a44;
}

/* Modern 2 Mini Preview - Deep Purple with Color Bar */
/* Modern 2 Mini Preview - Deep Purple #1 Gold Accent */
.invoice-preview-modern2 {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invoice-preview-modern2:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern2 .mini-gold-strip {
    height: 4px;
    background: #E3B34C;
}

.invoice-preview-modern2 .mini-content {
    padding: 10px;
    font-size: 7px;
    color: #1d1d1f;
}

.invoice-preview-modern2 .mini-header-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.invoice-preview-modern2 .mini-purple-card {
    background: linear-gradient(135deg, #4A154B 0%, #300d33 100%);
    padding: 6px;
    border-radius: 4px;
    color: #ffffff;
    font-size: 5px;
    min-width: 60px;
}

.invoice-preview-modern2 .mini-purple-card .mini-logo {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    margin-bottom: 3px;
}

.invoice-preview-modern2 .mini-invoice-meta {
    text-align: right;
    font-size: 5px;
}

.invoice-preview-modern2 .mini-invoice-label {
    color: #4A154B;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 5px;
    letter-spacing: 0.5px;
}

.invoice-preview-modern2 .mini-invoice-number {
    color: #CE375C;
    font-weight: 900;
    font-size: 8px;
    margin: 2px 0;
}

.invoice-preview-modern2 .mini-client-section {
    background: linear-gradient(90deg, #f0e6f1 0%, #f5f5f7 100%);
    padding: 5px 7px;
    border-radius: 4px;
    border-left: 2px solid #4A154B;
    margin-bottom: 6px;
    font-size: 6px;
}

.invoice-preview-modern2 .mini-table {
    font-size: 6px;
    color: #1d1d1f;
}

.invoice-preview-modern2 .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 2px 0;
    border-bottom: 1px solid #e5e5ea;
}

.invoice-preview-modern2 .mini-total-purple {
    background: linear-gradient(135deg, #4A154B 0%, #300d33 100%);
    padding: 4px 6px;
    border-radius: 4px;
    margin-top: 6px;
    font-size: 7px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
}

/* Modern 2B Mini Preview - Deep Purple #2 Sidebar */
.invoice-preview-modern2b {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
}

.invoice-preview-modern2b:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern2b .mini-sidebar {
    width: 16px;
    background: linear-gradient(180deg, #976199 0%, #4A154B 30%, #300d33 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
}

.invoice-preview-modern2b .mini-sidebar-logo {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin-bottom: 4px;
}

.invoice-preview-modern2b .mini-dots {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invoice-preview-modern2b .mini-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

.invoice-preview-modern2b .mini-dot-red { background: #eb0a44; }
.invoice-preview-modern2b .mini-dot-orange { background: #f2643d; }
.invoice-preview-modern2b .mini-dot-yellow { background: #f2a73d; }
.invoice-preview-modern2b .mini-dot-green { background: #a0e8b7; }

.invoice-preview-modern2b .mini-content {
    flex: 1;
    padding: 8px;
    font-size: 6px;
    color: #1d1d1f;
}

.invoice-preview-modern2b .mini-header-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.invoice-preview-modern2b .mini-company-name {
    font-size: 7px;
    font-weight: 700;
    color: #1d1d1f;
}

.invoice-preview-modern2b .mini-invoice-number {
    font-size: 9px;
    font-weight: 900;
    background: linear-gradient(135deg, #4A154B 0%, #3d1140 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.invoice-preview-modern2b .mini-date-box {
    display: inline-flex;
    gap: 6px;
    background: #f5f5f7;
    padding: 3px 6px;
    border-radius: 3px;
    font-size: 5px;
    color: #6e6e73;
}

.invoice-preview-modern2b .mini-client-section {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 6px;
    padding: 5px 0;
    border-top: 1px solid #e5e5ea;
    border-bottom: 1px solid #e5e5ea;
}

.invoice-preview-modern2b .mini-accent-bar {
    width: 2px;
    height: 20px;
    background: linear-gradient(180deg, #976199 0%, #3d1140 100%);
    border-radius: 1px;
}

.invoice-preview-modern2b .mini-table {
    font-size: 6px;
    color: #1d1d1f;
}

.invoice-preview-modern2b .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 2px 0;
    border-bottom: 1px solid #e5e5ea;
}

.invoice-preview-modern2b .mini-total-fade {
    background: linear-gradient(90deg, #f0e6f1 0%, transparent 100%);
    padding: 4px 6px;
    border-radius: 3px;
    margin-top: 6px;
    font-size: 7px;
    font-weight: 700;
    color: #1d1d1f;
    display: flex;
    justify-content: space-between;
}

.invoice-preview-modern2b .mini-total-fade .mini-amount {
    color: #4A154B;
}

/* Modern 3 Mini Preview - Coral Wave #1 (Glass Morphism) */
.invoice-preview-modern3 {
    width: 100%;
    height: 220px;
    background: linear-gradient(180deg, rgba(247, 167, 145, 0.13) 0%, #ffffff 40%);
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.invoice-preview-modern3:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern3 .mini-blur-circle {
    position: absolute;
    top: 30px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: #f3714e;
    border-radius: 50%;
    filter: blur(20px);
    opacity: 0.2;
}

.invoice-preview-modern3 .mini-header {
    position: relative;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.invoice-preview-modern3 .mini-logo-section {
    display: flex;
    gap: 6px;
    align-items: center;
}

.invoice-preview-modern3 .mini-logo {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #f0562c, #c8350d);
    border-radius: 3px;
}

.invoice-preview-modern3 .mini-company {
    font-size: 7px;
    font-weight: 600;
    color: #ea3e0f;
}

.invoice-preview-modern3 .mini-invoice-box {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.8);
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 5px;
    text-align: right;
}

.invoice-preview-modern3 .mini-invoice-label {
    color: #ea3e0f;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
}

.invoice-preview-modern3 .mini-invoice-number {
    font-size: 7px;
    font-weight: 700;
    color: #1d1d1f;
}

.invoice-preview-modern3 .mini-info-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4px;
    padding: 0 10px;
    margin-bottom: 8px;
}

.invoice-preview-modern3 .mini-glass-card {
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.95);
    border-radius: 4px;
    padding: 4px;
}

.invoice-preview-modern3 .mini-card-label {
    font-size: 5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #c8350d;
    margin-bottom: 2px;
}

.invoice-preview-modern3 .mini-card-value {
    font-size: 6px;
    color: #1d1d1f;
    font-weight: 500;
}

.invoice-preview-modern3 .mini-dates-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoice-preview-modern3 .mini-date-card {
    background: rgba(247, 167, 145, 0.20);
    border: 1px solid rgba(245, 140, 111, 0.30);
    border-radius: 4px;
    padding: 4px;
}

.invoice-preview-modern3 .mini-date-card-due {
    background: rgba(234, 62, 15, 0.12);
    border: 1px solid rgba(234, 62, 15, 0.25);
}

.invoice-preview-modern3 .mini-date-card .mini-card-label {
    color: #852308;
}

.invoice-preview-modern3 .mini-date-card-due .mini-card-value {
    color: #852308;
    font-weight: 600;
}

.invoice-preview-modern3 .mini-content {
    padding: 0 10px 10px 10px;
    font-size: 6px;
}

.invoice-preview-modern3 .mini-table-container {
    background: rgba(255,255,255,0.5);
    border-radius: 4px;
    padding: 4px;
    margin-bottom: 6px;
}

.invoice-preview-modern3 .mini-table {
    font-size: 6px;
}

.invoice-preview-modern3 .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: #1d1d1f;
}

.invoice-preview-modern3 .mini-total-box {
    background: linear-gradient(135deg, #ea3e0f, #f0562c);
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-weight: 600;
    font-size: 6px;
}

/* Modern 3B Mini Preview - Coral Wave #2 (Warm Gradient Header) */
.invoice-preview-modern3b {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invoice-preview-modern3b:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern3b .mini-gradient-header {
    background: linear-gradient(135deg, #ea3e0f 0%, #f0562c 50%, #f09f2c 100%);
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.invoice-preview-modern3b .mini-header-shine {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
}

.invoice-preview-modern3b .mini-logo-section {
    display: flex;
    gap: 6px;
    align-items: center;
    position: relative;
}

.invoice-preview-modern3b .mini-logo {
    width: 14px;
    height: 14px;
    background: rgba(255,255,255,0.95);
    border-radius: 3px;
}

.invoice-preview-modern3b .mini-company {
    font-size: 7px;
    font-weight: 600;
    color: #ffffff;
}

.invoice-preview-modern3b .mini-invoice-info {
    text-align: right;
    position: relative;
}

.invoice-preview-modern3b .mini-invoice-label {
    font-size: 5px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.7);
}

.invoice-preview-modern3b .mini-invoice-number {
    font-size: 9px;
    font-weight: 800;
    color: #ffffff;
}

.invoice-preview-modern3b .mini-body {
    padding: 10px;
}

.invoice-preview-modern3b .mini-info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
}

.invoice-preview-modern3b .mini-info-card {
    padding: 4px;
    background: #fafafa;
    border-radius: 3px;
}

.invoice-preview-modern3b .mini-info-card-bill {
    border-left: 2px solid #f0562c;
}

.invoice-preview-modern3b .mini-card-label {
    font-size: 5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #c8350d;
    margin-bottom: 2px;
}

.invoice-preview-modern3b .mini-card-label-gray {
    color: #6e6e73;
}

.invoice-preview-modern3b .mini-card-value {
    font-size: 6px;
    color: #1d1d1f;
}

.invoice-preview-modern3b .mini-info-card-due {
    background: linear-gradient(135deg, rgba(247, 205, 145, 0.37), rgba(247, 167, 145, 0.25));
}

.invoice-preview-modern3b .mini-card-label-due {
    color: #a72c0b;
}

.invoice-preview-modern3b .mini-card-value-due {
    font-weight: 600;
    color: #c8350d;
}

.invoice-preview-modern3b .mini-table {
    font-size: 6px;
    margin-bottom: 6px;
}

.invoice-preview-modern3b .mini-table-header {
    display: flex;
    justify-content: space-between;
    font-size: 5px;
    font-weight: 600;
    color: #c8350d;
    padding-bottom: 3px;
    border-bottom: 1px solid #f3714e;
    margin-bottom: 3px;
}

.invoice-preview-modern3b .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: #1d1d1f;
}

.invoice-preview-modern3b .mini-totals {
    text-align: right;
}

.invoice-preview-modern3b .mini-total-row {
    font-size: 5px;
    color: #6e6e73;
    margin-bottom: 2px;
}

.invoice-preview-modern3b .mini-total-final {
    font-size: 8px;
    font-weight: 800;
    color: #ea3e0f;
}

.invoice-preview-modern3b .mini-pay-button {
    width: 100%;
    margin-top: 4px;
    padding: 4px;
    background: linear-gradient(135deg, #ea3e0f, #f09f2c);
    border: none;
    border-radius: 3px;
    font-size: 5px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

/* Modern 4 Mini Preview - Mint Fresh #1 (Mint + Peach) */
.invoice-preview-modern4 {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.invoice-preview-modern4:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern4 .mini-header {
    background: linear-gradient(135deg, #6fbfb3 0%, #9fd5c8 100%);
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-preview-modern4 .mini-logo-section {
    display: flex;
    gap: 6px;
    align-items: center;
}

.invoice-preview-modern4 .mini-logo {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 3px;
}

.invoice-preview-modern4 .mini-company {
    font-size: 7px;
    font-weight: 600;
    color: #ffffff;
}

.invoice-preview-modern4 .mini-invoice-info {
    text-align: right;
}

.invoice-preview-modern4 .mini-invoice-label {
    font-size: 5px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}

.invoice-preview-modern4 .mini-invoice-number {
    font-size: 8px;
    font-weight: 700;
    color: #ffffff;
}

.invoice-preview-modern4 .mini-body {
    padding: 8px 10px;
}

.invoice-preview-modern4 .mini-info-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 4px;
    margin-bottom: 6px;
}

.invoice-preview-modern4 .mini-info-card {
    padding: 4px;
    background: #fde8dc;
    border-radius: 3px;
}

.invoice-preview-modern4 .mini-info-card-bill {
    background: #d5f0ea;
    border-left: 2px solid #6fbfb3;
}

.invoice-preview-modern4 .mini-card-label {
    font-size: 5px;
    font-weight: 600;
    color: #2d6a6a;
    margin-bottom: 2px;
}

.invoice-preview-modern4 .mini-card-label-peach {
    color: #b87a4a;
}

.invoice-preview-modern4 .mini-card-value {
    font-size: 6px;
    color: #1d1d1f;
    font-weight: 500;
}

.invoice-preview-modern4 .mini-info-card-due {
    background: #f8d4b0;
}

.invoice-preview-modern4 .mini-card-value-due {
    color: #9a5c2e;
    font-weight: 600;
}

.invoice-preview-modern4 .mini-table {
    font-size: 6px;
    margin-bottom: 6px;
}

.invoice-preview-modern4 .mini-table-header {
    display: flex;
    justify-content: space-between;
    font-size: 5px;
    font-weight: 600;
    color: #2d6a6a;
    padding-bottom: 3px;
    border-bottom: 1px solid #6fbfb3;
    margin-bottom: 3px;
}

.invoice-preview-modern4 .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: #1d1d1f;
}

.invoice-preview-modern4 .mini-total-box {
    background: linear-gradient(135deg, #6fbfb3, #9fd5c8);
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-weight: 600;
    font-size: 6px;
}

.invoice-preview-modern4 .mini-pay-btn {
    width: 100%;
    margin-top: 4px;
    padding: 3px;
    background: #f8d4b0;
    border: none;
    border-radius: 3px;
    font-size: 5px;
    font-weight: 600;
    color: #9a5c2e;
    text-align: center;
}

/* Modern 4B Mini Preview - Mint Fresh #2 (Mint + Purple) */
.invoice-preview-modern4b {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.invoice-preview-modern4b:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern4b .mini-side-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #9fd5c8 0%, #6fbfb3 50%, #3d2852 100%);
}

.invoice-preview-modern4b .mini-content {
    padding: 10px 10px 10px 14px;
}

.invoice-preview-modern4b .mini-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.invoice-preview-modern4b .mini-logo-section {
    display: flex;
    gap: 6px;
    align-items: center;
}

.invoice-preview-modern4b .mini-logo {
    width: 14px;
    height: 14px;
    background: #3d2852;
    border-radius: 3px;
}

.invoice-preview-modern4b .mini-company {
    font-size: 7px;
    font-weight: 600;
    color: #3d2852;
}

.invoice-preview-modern4b .mini-invoice-info {
    text-align: right;
}

.invoice-preview-modern4b .mini-invoice-label {
    font-size: 5px;
    font-weight: 600;
    color: #6fbfb3;
}

.invoice-preview-modern4b .mini-invoice-number {
    font-size: 8px;
    font-weight: 700;
    color: #3d2852;
}

.invoice-preview-modern4b .mini-client-box {
    background: #d5f0ea;
    padding: 4px;
    border-radius: 3px;
    margin-bottom: 6px;
}

.invoice-preview-modern4b .mini-client-label {
    font-size: 5px;
    font-weight: 600;
    color: #2d6a6a;
    margin-bottom: 2px;
}

.invoice-preview-modern4b .mini-client-name {
    font-size: 6px;
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-preview-modern4b .mini-table {
    font-size: 6px;
    margin-bottom: 6px;
}

.invoice-preview-modern4b .mini-table-header {
    display: flex;
    justify-content: space-between;
    font-size: 5px;
    font-weight: 600;
    color: #3d2852;
    padding-bottom: 3px;
    border-bottom: 1px solid #3d2852;
    margin-bottom: 3px;
}

.invoice-preview-modern4b .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: #1d1d1f;
}

.invoice-preview-modern4b .mini-total-box {
    background: #3d2852;
    border-radius: 4px;
    padding: 4px 6px;
    display: flex;
    justify-content: space-between;
    color: #ffffff;
    font-weight: 600;
    font-size: 6px;
}

.invoice-preview-modern4b .mini-total-value {
    color: #9fd5c8;
}

.invoice-preview-modern4b .mini-pay-btn {
    width: 100%;
    margin-top: 4px;
    padding: 3px;
    background: linear-gradient(135deg, #6fbfb3, #9fd5c8);
    border: none;
    border-radius: 3px;
    font-size: 5px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
}

/* Modern 4C Mini Preview - Mint Fresh #3 (Mint + Pink) */
.invoice-preview-modern4c {
    width: 100%;
    height: 220px;
    background: #ffffff;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.invoice-preview-modern4c:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.invoice-preview-modern4c .mini-corner {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #f8d0d5 0%, #fde8dc 100%);
    border-radius: 50%;
    opacity: 0.6;
}

.invoice-preview-modern4c .mini-content {
    position: relative;
    padding: 10px;
}

.invoice-preview-modern4c .mini-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #d5f0ea;
}

.invoice-preview-modern4c .mini-logo-section {
    display: flex;
    gap: 6px;
    align-items: center;
}

.invoice-preview-modern4c .mini-logo {
    width: 14px;
    height: 14px;
    background: linear-gradient(135deg, #9fd5c8, #6fbfb3);
    border-radius: 3px;
}

.invoice-preview-modern4c .mini-company {
    font-size: 7px;
    font-weight: 600;
    color: #2d6a6a;
}

.invoice-preview-modern4c .mini-invoice-box {
    background: #d5f0ea;
    border-radius: 4px;
    padding: 4px 6px;
    text-align: center;
}

.invoice-preview-modern4c .mini-invoice-label {
    font-size: 5px;
    font-weight: 600;
    color: #6fbfb3;
}

.invoice-preview-modern4c .mini-invoice-number {
    font-size: 7px;
    font-weight: 700;
    color: #2d6a6a;
}

.invoice-preview-modern4c .mini-info-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 4px;
    margin-bottom: 6px;
}

.invoice-preview-modern4c .mini-info-card {
    padding: 4px;
    background: #fde8dc;
    border-radius: 3px;
}

.invoice-preview-modern4c .mini-card-label {
    font-size: 5px;
    font-weight: 600;
    color: #2d6a6a;
    margin-bottom: 2px;
}

.invoice-preview-modern4c .mini-card-value {
    font-size: 6px;
    color: #1d1d1f;
    font-weight: 500;
}

.invoice-preview-modern4c .mini-dates-column {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.invoice-preview-modern4c .mini-date-card {
    padding: 4px;
    background: #b8e8dc;
    border-radius: 3px;
}

.invoice-preview-modern4c .mini-date-card-due {
    background: #f8d0d5;
}

.invoice-preview-modern4c .mini-date-label {
    font-size: 5px;
    font-weight: 600;
    color: #2d6a6a;
    margin-bottom: 1px;
}

.invoice-preview-modern4c .mini-date-label-pink {
    color: #9a5a6a;
}

.invoice-preview-modern4c .mini-date-value {
    font-size: 6px;
    color: #1d1d1f;
    font-weight: 500;
}

.invoice-preview-modern4c .mini-date-value-due {
    color: #9a5a6a;
    font-weight: 600;
}

.invoice-preview-modern4c .mini-table {
    font-size: 6px;
    margin-bottom: 4px;
}

.invoice-preview-modern4c .mini-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    color: #1d1d1f;
}

.invoice-preview-modern4c .mini-total-row {
    display: flex;
    justify-content: space-between;
    padding-top: 4px;
    border-top: 1px solid #2d6a6a;
    font-size: 7px;
}

.invoice-preview-modern4c .mini-total-label {
    font-weight: 600;
    color: #1d1d1f;
}

.invoice-preview-modern4c .mini-total-value {
    font-weight: 700;
    color: #6fbfb3;
}

/* Minimal and Corporate Preview Classes */
.invoice-preview-stark,
.invoice-preview-mono,
.invoice-preview-edge,
.invoice-preview-float,
.invoice-preview-split,
.invoice-preview-wire,
.invoice-preview-type,
.invoice-preview-corporate1,
.invoice-preview-corporate2,
.invoice-preview-corporate3,
.invoice-preview-corporate4,
.invoice-preview-basic2,
.invoice-preview-basic3,
.invoice-preview-basic4 {
    width: 100%;
    height: 100%;
    min-height: 220px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* Scaled A4 mini preview container */
.a4-mini-preview {
    width: 160px;
    height: 226px;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    border: 1px solid #e5e5e7;
    background: #ffffff;
}

.a4-mini-preview .a4-scaled {
    width: 595px;
    height: 842px;
    transform: scale(0.269);
    transform-origin: top left;
    pointer-events: none;
}

.invoice-preview-basic2:hover,
.invoice-preview-basic3:hover,
.invoice-preview-basic4:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.preview-company {
    font-weight: 600;
    font-size: 10px;
}

.preview-invoice {
    font-weight: 700;
    font-size: 11px;
}

.preview-divider {
    height: 1px;
    background: #1d1d1f;
    margin-bottom: 8px;
}

.preview-client {
    font-size: 8px;
    margin-bottom: 8px;
    color: var(--text-secondary);
}

.preview-table {
    margin-bottom: 8px;
}

.preview-row {
    display: flex;
    justify-content: space-between;
    padding: 3px 0;
    border-bottom: 1px solid #f5f5f7;
}

.preview-desc {
    font-size: 8px;
}

.preview-amount {
    font-size: 8px;
    font-weight: 500;
}

.preview-total {
    display: flex;
    justify-content: space-between;
    padding-top: 6px;
    border-top: 1px solid #1d1d1f;
    font-weight: 600;
    font-size: 9px;
}

.preview-footer {
    text-align: center;
    font-size: 7px;
    color: var(--text-secondary);
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #f5f5f7;
}

.preview-footer a {
    color: #0077cc;
    text-decoration: none;
}

.preview-footer a:hover {
    text-decoration: underline;
}

.invoice-preview-mini {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.invoice-preview-mini:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Invoice previews should always look like white paper, even in dark mode */
[data-theme="dark"] .invoice-preview-mini,
[data-theme="dark"] .invoice-preview-modern1,
[data-theme="dark"] .invoice-preview-modern2,
[data-theme="dark"] .invoice-preview-modern3,
[data-theme="dark"] .invoice-preview-modern4,
[data-theme="dark"] .invoice-preview-stark,
[data-theme="dark"] .invoice-preview-mono,
[data-theme="dark"] .invoice-preview-edge,
[data-theme="dark"] .invoice-preview-float,
[data-theme="dark"] .invoice-preview-split,
[data-theme="dark"] .invoice-preview-wire,
[data-theme="dark"] .invoice-preview-type,
[data-theme="dark"] .invoice-preview-corporate1,
[data-theme="dark"] .invoice-preview-corporate2,
[data-theme="dark"] .invoice-preview-corporate3,
[data-theme="dark"] .invoice-preview-corporate4,
[data-theme="dark"] .invoice-preview-basic2,
[data-theme="dark"] .invoice-preview-basic3,
[data-theme="dark"] .invoice-preview-basic4 {
    background: #ffffff !important;
    color: #1d1d1f !important;
    border-color: #e5e5e7 !important;
}

[data-theme="dark"] .invoice-preview-mini .preview-company,
[data-theme="dark"] .invoice-preview-mini .preview-invoice,
[data-theme="dark"] .invoice-preview-mini .preview-desc,
[data-theme="dark"] .invoice-preview-mini .preview-amount,
[data-theme="dark"] .invoice-preview-mini .preview-total {
    color: #1d1d1f;
}

[data-theme="dark"] .invoice-preview-mini .preview-client,
[data-theme="dark"] .invoice-preview-mini .preview-footer {
    color: #6e6e73;
}

[data-theme="dark"] .invoice-preview-modern1 .mini-content,
[data-theme="dark"] .invoice-preview-modern2 .mini-content,
[data-theme="dark"] .invoice-preview-modern3 .mini-content,
[data-theme="dark"] .invoice-preview-modern4 .mini-content {
    color: #1d1d1f;
}

[data-theme="dark"] .invoice-preview-modern1 .mini-logo,
[data-theme="dark"] .invoice-preview-modern2 .mini-logo,
[data-theme="dark"] .invoice-preview-modern3 .mini-logo,
[data-theme="dark"] .invoice-preview-modern4 .mini-logo {
    background: #f5f5f7;
}

[data-theme="dark"] .invoice-preview-modern2 .mini-client-box {
    background: #f5f5f7;
    color: #1d1d1f;
}

/* Template Preview Modal */
.template-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    padding: 40px 80px;
    overflow-y: auto;
}

[data-theme="dark"] .template-modal {
    background: rgba(0, 0, 0, 0.85);
}

.template-modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center all template modals when shown (JS sets display:flex directly) */
.template-modal {
    align-items: center;
    justify-content: center;
}

.template-modal-content {
    background: var(--bg-primary);
    border-radius: 12px;
    max-width: 900px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Message panels (Messages inbox + per-invoice thread) as right-docked slide-in
   drawers -- mirrors the client portal's .portal-ticket-drawer. Scoped to the two
   message overlays via .lancer-msg-drawer so every OTHER .template-modal stays a
   centered modal. Scrimless: drops the .template-modal rgba(0,0,0,.6/.85) backdrop
   (dark-mode "solid backgrounds only" rule) so the dashboard stays visible; the
   drawer's border-left + edge shadow do the separating. */
@keyframes lancerMsgDrawerSlideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.template-modal.lancer-msg-drawer {
    background: transparent;
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
}
[data-theme="dark"] .template-modal.lancer-msg-drawer {
    background: transparent;
}
.template-modal.lancer-msg-drawer .template-modal-content {
    width: 420px;
    max-width: 92vw;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    border-left: 1px solid var(--border-secondary);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
    animation: lancerMsgDrawerSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.template-modal-header {
    padding: 24px 24px 20px;
    border-bottom: 1px solid var(--border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-primary);
    flex-shrink: 0;
}

.template-modal-header-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-description-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 4px;
}

.template-description-toggle button {
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-description-toggle button.active {
    background: var(--accent-teal);
    color: var(--on-accent-teal);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.template-description-toggle button:hover:not(.active) {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* Try Your Logo Button */
.try-logo-wrapper {
    position: relative;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    padding: 4px;
}

.try-logo-placeholder {
    width: 64px;
    height: 64px;
    background: #f5f5f7;
    border: 2px dashed #d2d2d7;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.try-logo-placeholder:hover {
    border-color: #66ccbe;
    background: #f0faf9;
}

.try-logo-placeholder svg.logo-icon {
    width: 24px;
    height: 24px;
    color: #8e8e93;
    transition: all 0.3s ease;
}

.try-logo-placeholder:hover svg.logo-icon {
    color: #66ccbe;
}

.try-logo-text {
    font-size: 9px;
    color: #66ccbe;
    font-weight: 600;
    margin-top: 4px;
    text-align: center;
    line-height: 1.2;
    animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.try-logo-placeholder.has-logo {
    border-style: solid;
    border-color: #d2d2d7;
    padding: 4px;
    overflow: hidden;
}

.try-logo-placeholder.has-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    cursor: pointer;
}

.try-logo-placeholder.has-logo .try-logo-text,
.try-logo-placeholder.has-logo svg.logo-icon {
    display: none;
}

.logo-remove-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: #ff3b30;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.2s ease;
    padding: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.logo-remove-btn:hover {
    background: #d63029;
    transform: scale(1.1);
}

.logo-remove-btn svg {
    width: 10px;
    height: 10px;
    color: #ffffff;
}

.template-modal-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.template-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.template-modal-close:hover {
    background: #e5e5ea;
    color: var(--text-primary);
}

.template-modal-body {
    padding: 40px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background: #f5f5f7;
}

[data-theme="dark"] .template-modal-body {
    background: #2c2c2e;
}

/* A4 paper effect for ALL template categories */
.template-modal-body .invoice-full-preview,
.template-modal-body .modern-1,
.template-modal-body .modern-1b,
.template-modal-body .modern-2,
.template-modal-body .modern-2b,
.template-modal-body .modern-3,
.template-modal-body .modern-4,
.template-modal-body .modern-4b,
.template-modal-body .modern-4c,
.template-modal-body .invoice-template-stark,
.template-modal-body .invoice-template-mono,
.template-modal-body .invoice-template-edge,
.template-modal-body .invoice-template-float,
.template-modal-body .invoice-template-split,
.template-modal-body .invoice-template-wire,
.template-modal-body .invoice-template-type,
.template-modal-body .corporate-1,
.template-modal-body .corporate-2,
.template-modal-body .corporate-3,
.template-modal-body .corporate-4 {
    flex-shrink: 0;
    border: 1px solid #d1d1d6;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    background: #ffffff;
}

.template-modal-footer {
    padding: 20px 40px;
    border-top: 1px solid var(--border-secondary);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background: var(--bg-primary);
    flex-shrink: 0;
}

/* Support Success Modal - Save Ticket Button */
.support-save-ticket-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.support-save-ticket-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-teal);
}

/* ============================================================================
   SUPPORT / ERROR RECOVERY SYSTEM
   Error modal, retry buttons, ticket tracking panel, sidebar dots
   ============================================================================ */

/* -- Support Send Button (teal, not red) -- */
.support-send-btn {
    background: var(--accent-teal);
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.support-send-btn:hover {
    background: #3da08e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(77, 179, 165, 0.3);
}

.support-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* -- Support Done Button (teal) -- */
.support-done-btn {
    background: var(--accent-teal);
    color: white;
    border: none;
    padding: 10px 32px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.support-done-btn:hover {
    background: #3da08e;
    transform: translateY(-1px);
}

/* -- New Ticket Button (outline) -- */
.support-new-ticket-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.support-new-ticket-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

/* -- Locked subject field (read-only, from error context) -- */
.support-subject-locked {
    background: var(--bg-tertiary) !important;
    color: var(--text-secondary) !important;
    cursor: default;
    border-color: var(--border-secondary) !important;
}

/* -- Error Modal Solutions List -- */
.error-modal-solutions li {
    position: relative;
    padding: 6px 0 6px 20px;
    font-size: 13px;
    color: var(--accent-teal);
    line-height: 1.5;
}

.error-modal-solutions li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 6px;
    height: 6px;
    background: #6e6e73;
    border-radius: 1px;
}

/* -- Error Modal Retry Button -- */
.error-modal-retry-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.error-modal-retry-btn:hover:not(:disabled) {
    background: var(--bg-secondary);
    border-color: var(--accent-teal);
}

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

/* -- Error Modal Contact Support Button -- */
.error-modal-support-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    background: var(--accent-teal);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.error-modal-support-btn:hover {
    background: #3da08e;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(77, 179, 165, 0.3);
}

/* -- Support Notification Dot (sidebar) -- */
.support-notification-dot {
    display: none;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 18px;
    padding: 0 5px;
    margin-left: auto;
    flex-shrink: 0;
}

.support-notification-dot.visible {
    display: inline-block;
}

.support-dot-open {
    background: #ef4444;
    animation: subtle-glow 1s ease-in-out 3;
}

.support-dot-fixed {
    background: #2da84e;
}

/* -- Ticket List -- */
.ticket-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ticket-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
}

.ticket-empty svg {
    margin-bottom: 12px;
}

.ticket-empty p {
    font-size: 14px;
    margin: 0;
}

.ticket-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 16px;
    transition: border-color 0.2s ease;
}

.ticket-item:hover {
    border-color: var(--border-secondary);
}

.ticket-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ticket-item-id {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 12px;
    color: var(--text-tertiary);
}

.ticket-status {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ticket-status-open {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

.ticket-status-fixed {
    background: rgba(45, 168, 78, 0.12);
    color: #2da84e;
}

.ticket-item-subject {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.ticket-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ticket-item-date {
    font-size: 12px;
    color: var(--text-tertiary);
}

.ticket-archive-btn {
    font-size: 12px;
    font-weight: 500;
    color: var(--accent-teal);
    background: none;
    border: 1px solid var(--accent-teal);
    border-radius: 6px;
    padding: 4px 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ticket-archive-btn:hover {
    background: var(--accent-teal);
    color: white;
}

/* -- Clickable Ticket Items -- */
.ticket-item-clickable {
    cursor: pointer;
}

.ticket-item-clickable:hover {
    border-color: var(--accent-teal);
}

/* -- Ticket Detail View -- */
.ticket-detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-teal);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
}

.ticket-detail-back:hover {
    text-decoration: underline;
}

.ticket-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.ticket-detail-subject {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.ticket-detail-date {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 20px;
}

/* -- Response Time Info Box -- */
.ticket-response-info {
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ticket-response-info svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.ticket-response-info-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.ticket-response-info-label {
    font-weight: 600;
    color: var(--text-primary);
    display: block;
    margin-bottom: 2px;
}

.ticket-response-urgent .ticket-response-info-label {
    color: #f57c00;
}

/* -- Notes Timeline -- */
.ticket-notes-section {
    margin-bottom: 24px;
}

.ticket-notes-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.ticket-note-item {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 8px;
}

.ticket-note-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.ticket-note-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.ticket-notes-empty {
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 8px 0;
}

/* -- Add Note Section -- */
.ticket-add-note {
    margin-bottom: 24px;
}

.ticket-add-note textarea {
    width: 100%;
    min-height: 80px;
    resize: vertical;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.ticket-add-note-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ticket-note-char-count {
    font-size: 11px;
    color: var(--text-tertiary);
}

.ticket-add-note-btn {
    font-size: 13px;
    font-weight: 500;
    color: white;
    background: var(--accent-teal);
    border: none;
    border-radius: 6px;
    padding: 6px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.ticket-add-note-btn:hover {
    background: #3da08e;
}

.ticket-add-note-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Success state shown briefly after a note is successfully added */
.ticket-add-note-btn--success {
    background: #30c961 !important;
    opacity: 1 !important;
}

/* "Just added" marker on the freshly-appended note in the timeline */
.ticket-note-item--just-added {
    background: rgba(48, 201, 97, 0.06);
    border-left: 3px solid #30c961;
    padding-left: 12px;
    border-radius: 4px;
    animation: ticket-note-fade-in 0.3s ease-out;
}
.ticket-note-just-added-check {
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
}
@keyframes ticket-note-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -- Attachments Coming Soon -- */
.ticket-attachments-section {
    margin-bottom: 24px;
}

.ticket-attachment-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.ticket-attachment-thumb {
    max-width: 160px;
    max-height: 160px;
    border-radius: 8px;
    border: 1px solid var(--border-secondary);
    object-fit: cover;
    background: var(--bg-tertiary);
}

/* -- Cancel Ticket Button -- */
.ticket-cancel-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #ef4444;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
}

.ticket-cancel-btn:hover {
    text-decoration: underline;
}

/* Carousel Navigation Arrows */
.template-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10001;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.template-nav-arrow:hover {
    background: var(--bg-secondary);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.template-nav-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.template-nav-arrow.prev {
    left: 20px;
}

.template-nav-arrow.next {
    right: 20px;
}

.template-nav-arrow svg {
    width: 24px;
    height: 24px;
}

.btn-select-template {
    background: #eb0a44;
    color: white;
    border: none;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-select-template:hover {
    background: #d10940;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(235, 10, 68, 0.3);
}

/* Classic template CSS moved to assets/css/templates/basic.css */
/* Modern template CSS moved to assets/css/templates/modern*.css */
/* Minimal template CSS moved to assets/css/templates/*.css */

/* Papertrail template CSS moved to assets/css/templates/papertrail1-8.css */

/* ========== MINI PREVIEW CARDS ========== */
/* (Mini preview CSS remains in app.css — not part of template rendering) */

/* ========== MINI PREVIEW CARDS ========== */
.invoice-preview-stark,
.invoice-preview-mono,
.invoice-preview-edge,
.invoice-preview-float,
.invoice-preview-split,
.invoice-preview-wire,
.invoice-preview-type {
    background: #ffffff;
    border: 1px solid #f5f5f7;
    border-radius: 4px;
    font-size: 7px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 16px;
    color: #1d1d1f;
}

/* Stark mini preview */
.invoice-preview-stark .mini-topline {
    height: 2px;
    background: #26251c;
    margin-bottom: 12px;
}

.invoice-preview-stark .mini-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

.invoice-preview-stark .mini-title {
    font-size: 12px;
    font-weight: 200;
    color: #26251c;
}

/* Edge mini preview */
.invoice-preview-edge {
    display: flex;
    padding: 0;
}

.invoice-preview-edge .mini-sidebar {
    width: 20px;
    border-right: 2px solid #3d2852;
    padding: 12px 4px;
}

.invoice-preview-edge .mini-main {
    flex: 1;
    padding: 12px;
}

/* Float mini preview */
.invoice-preview-float {
    background: #f8fafa;
}

.invoice-preview-float .mini-card {
    background: #ffffff;
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.invoice-preview-float .mini-invoice-badge {
    background: #2d6a6a;
    color: #ffffff;
    padding: 6px 8px;
    border-radius: 4px;
    font-weight: 700;
}

/* Split mini preview */
.invoice-preview-split {
    display: flex;
    padding: 0;
}

.invoice-preview-split .mini-sidebar {
    width: 35%;
    background: #aeac92;
    padding: 12px;
    color: #ffffff;
}

.invoice-preview-split .mini-main {
    flex: 1;
    padding: 12px;
}

/* Wire mini preview */
.invoice-preview-wire .mini-frame {
    border: 1px solid #c97100;
    padding: 12px;
}

/* Type mini preview */
.invoice-preview-type .mini-number {
    font-size: 14px;
    font-weight: 800;
    color: #66ccbe;
    letter-spacing: -1px;
}

.invoice-preview-type .mini-meta {
    font-size: 6px;
    color: #6e6e73;
    letter-spacing: 1px;
    margin-top: 4px;
}

/* Papertrail template CSS moved to assets/css/templates/papertrail1-8.css */

/* Form Styles */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

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

.form-group {
    display: flex;
    flex-direction: column;
}

/* Password show/hide toggle — used in both lancer + client portal settings */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 48px;
}

.pw-error-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #fff2f2;
    border: 1px solid #ffcdd2;
    border-radius: 8px;
    color: #c62828;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.pw-error-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #e53935;
}

.portal-btn-success {
    background: #34c759 !important;
    color: #ffffff !important;
    border-color: #34c759 !important;
    cursor: default;
    transition: all 0.3s ease;
}

.form-label-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.form-label-row .form-label {
    margin-bottom: 0;
}

/* Reset password page — clean gradient background + centered white card */
.reset-pw-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.reset-pw-page--portal {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 30%, #5b8db8 60%, #8bb8e8 100%);
}

.reset-pw-page--lancer {
    background: linear-gradient(135deg, #eb0a44 0%, #f5775e 50%, #ff8cd0 100%);
}

.reset-pw-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 40px;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.reset-pw-title {
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.reset-pw-subtitle {
    color: #6e6e73;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
}

.reset-pw-submit {
    width: 100%;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: block;
}

.reset-pw-page--portal .reset-pw-submit {
    background: #1e3a5f;
    color: #ffffff;
}

.reset-pw-page--portal .reset-pw-submit:hover {
    background: #2d5a8e;
}

.reset-pw-page--lancer .reset-pw-submit {
    background: linear-gradient(135deg, #eb0a44 0%, #ff8cd0 100%);
    color: #ffffff;
}

.reset-pw-page--lancer .reset-pw-submit:hover {
    opacity: 0.9;
}

.reset-pw-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.reset-pw-back {
    margin-top: 24px;
    text-align: center;
}

.reset-pw-back a {
    color: var(--accent-teal, #4db3a5);
    font-size: 14px;
    text-decoration: none;
}

.reset-pw-back a:hover {
    text-decoration: underline;
}

/* LA-12: icon circles extracted from inline styles in reset_password_confirm.ex */
.reset-pw-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.reset-pw-icon--success {
    background: var(--success-bg, #e8f5e9);
    color: #30c961;
}

.reset-pw-icon--error {
    background: #fff5f5;
    color: #ff453a;
}

/* LA-12: confirm_email.ex state-card colours extracted from inline styles */
.confirm-email-state-icon--sent {
    color: var(--accent-teal, #4db3a5);
}

.confirm-email-state-icon--success {
    color: #30c961;
}

.confirm-email-state-icon--error {
    color: var(--error-text, #d32f2f);
}

.confirm-email-title {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    margin: 0 0 12px;
}

.confirm-email-text {
    color: var(--text-secondary, #6e6e73);
    font-size: 15px;
}

.confirm-email-hint {
    color: var(--text-tertiary, #8e8e93);
    font-size: 13px;
}

.confirm-email-back {
    display: block;
    text-align: center;
    color: var(--text-secondary, #6e6e73);
    font-size: 14px;
    text-decoration: none;
}

.reset-pw-help {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.reset-pw-help-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 8px;
}

.reset-pw-help-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: #6e6e73;
    line-height: 1.8;
}

.reset-pw-support {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e5ea;
    text-align: center;
    font-size: 13px;
    color: #6e6e73;
}

.reset-pw-support a {
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
    font-weight: 500;
}

.reset-pw-support a:hover {
    text-decoration: underline;
}

.support-subject-editable:empty::before {
    content: attr(data-placeholder);
    color: #8e8e93;
    pointer-events: none;
}

.email-change-sent-msg {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: #f0faf5;
    border: 1px solid #c8e6c9;
    border-radius: 10px;
    margin-bottom: 16px;
    line-height: 1.5;
}

.email-change-sent-msg svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.email-change-sent-msg strong {
    font-size: 14px;
    color: #1d1d1f;
}

.forgot-password-link {
    font-size: 13px;
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
    font-weight: 500;
}

.forgot-password-link:hover {
    text-decoration: underline;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s ease;
}

.password-toggle-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary, rgba(0,0,0,0.05));
}

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

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

.form-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.required {
    color: #ff3b30;
    margin-left: 4px;
}

.optional-label {
    font-weight: 400;
    color: var(--text-secondary);
    font-size: 0.85em;
    margin-left: 4px;
}

.form-input {
    padding: 12px 16px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 15px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-input:focus {
    outline: none;
    border-color: #66ccbe;
    box-shadow: 0 0 0 3px rgba(102, 204, 190, 0.25);
}

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

/* Chrome/Safari autofill would otherwise paint a white/pale-yellow background that
   breaks the dark theme (e.g. the postcode/address fields). The 1000px inset shadow
   overpaints that background with the input's own colour; text-fill keeps text legible. */
.form-input:-webkit-autofill,
.form-input:-webkit-autofill:hover,
.form-input:-webkit-autofill:focus,
.form-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--text-primary);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-primary) inset;
    box-shadow: 0 0 0 1000px var(--bg-primary) inset;
    caret-color: var(--text-primary);
    transition: background-color 100000s ease-in-out 0s;
}

.form-help {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
    line-height: 1.5;
}

.form-help svg {
    width: 14px;
    height: 14px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

/* Form Validation Errors — use the design-system error tokens, not a hardcoded red */
.form-input.error {
    border-color: var(--error-border);
}

.form-input.error:focus {
    border-color: var(--error-border);
    box-shadow: 0 0 0 4px rgba(211, 50, 47, 0.12);
}

.form-input.success {
    border-color: var(--success-text);
}

.form-input.success:focus {
    border-color: var(--success-text);
    box-shadow: 0 0 0 4px rgba(45, 168, 78, 0.1);
}

.form-error {
    display: none;
    color: var(--error-text);
    font-size: 13px;
    margin-top: 6px;
}

.form-error.show {
    display: block;
}

.form-group.has-error .form-label {
    color: var(--error-text);
}

.form-error.visible {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-error svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* In-field validation status adornment: spinner / check / cross on the input's right edge */
.field-input-wrap {
    position: relative;
}

.field-input-wrap .form-input {
    padding-right: 42px; /* reserve room so text never runs under the status icon */
}

.field-status-adornment {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.field-status-adornment svg {
    width: 18px;
    height: 18px;
    display: block;
}

.field-status-adornment--ok {
    color: var(--success-text);
}

.field-status-adornment--error {
    color: var(--error-text);
}

.field-status-adornment--checking {
    color: var(--text-secondary);
}

.field-spinner {
    animation: field-spinner-spin 0.6s linear infinite;
    transform-origin: 50% 50%;
}

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

/* One line below the field: the field's hint, OR a status message — never both stacked */
.field-hint {
    font-size: 13px;
    margin-top: 6px;
    color: var(--text-secondary);
}

/* The hint <p> is always rendered (stable id for aria-describedby); collapse it when
   it has nothing to show so it takes no space. A visually-hidden sr-only announcement
   still counts as content, so a valid field's "Looks good." announcement is unaffected. */
.field-hint:empty {
    display: none;
    margin: 0;
}

.field-hint--error {
    color: var(--error-text);
    font-weight: 500;
}

.field-hint--ok {
    color: var(--success-text);
    font-weight: 600;
}

.form-group.has-error .form-error {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Line Item Inline Errors */
.line-item-error {
    font-size: 11px;
    color: var(--error-text);
    margin-top: 4px;
    min-height: 0;
}

.line-item-error.show {
    display: block;
}

/* Dropdown error state */
.custom-dropdown.error .custom-dropdown-trigger {
    border-color: var(--error-text);
}
}

.form-group.has-success .form-input {
    border-color: var(--success-text);
}

/* Rate amount inputs - no spinner arrows */
.rate-amount-input::-webkit-outer-spin-button,
.rate-amount-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rate-amount-input {
    -moz-appearance: textfield;
}

/* Service autocomplete dropdown */
.service-autocomplete-wrapper {
    position: relative;
    flex: 2;
}
.service-autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    display: none;
}
.service-autocomplete-dropdown.open {
    display: block;
}
.service-autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-primary);
    transition: background 0.15s ease;
}
.service-autocomplete-item:hover {
    background: var(--bg-secondary);
}
.service-autocomplete-item .service-name {
    font-weight: 500;
}
.service-autocomplete-item .service-rate {
    color: var(--text-secondary);
    font-size: 13px;
}
.service-autocomplete-empty {
    padding: 12px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
}

/* Custom rate row delete button - solid background */
.custom-rate-delete-btn {
    padding: 8px 12px;
    font-size: 16px;
    font-weight: 600;
    background: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    line-height: 1;
}
.custom-rate-delete-btn:hover {
    background: var(--error-border);
    color: white;
}

.form-success-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--success-text);
    width: 18px;
    height: 18px;
    display: none;
}

.form-group.has-success .form-success-icon {
    display: block;
}

.form-input-wrapper {
    position: relative;
}

.form-input-wrapper .form-input {
    width: 100%;
    padding-right: 40px;
}

/* Info Box */
.info-box {
    padding: 16px;
    background: #e8f4f8;
    border-left: 4px solid #0077cc;
    border-radius: 8px;
    margin-bottom: 24px;
}

.info-box-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.info-box-icon {
    width: 20px;
    height: 20px;
    color: #0077cc;
    flex-shrink: 0;
    margin-top: 2px;
}

.info-box-text {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
}

[data-theme="dark"] .info-box {
    background: #2c2c2e;
    border-left-color: #64d2ff;
}

[data-theme="dark"] .info-box-icon {
    color: #64d2ff;
}

[data-theme="dark"] .info-box-text {
    color: #f5f5f7;
}

/* IBAN Input - Chunked Segments */
.iban-input-wrapper {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    align-self: flex-start;
}

.iban-input-wrapper .form-input,
.bic-input-wrapper .form-input {
    width: auto !important;
    flex: 0 0 auto !important;
}

.bic-input-wrapper {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    align-self: flex-start;
}

.iban-segment {
    text-align: center;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 10px 6px;
}

/* 2 characters */
.iban-country {
    width: 44px !important;
}

/* 2 characters */
.iban-check {
    width: 44px !important;
}

/* 4 characters */
.iban-bank {
    width: 64px !important;
}

/* 10 characters */
.iban-account {
    width: 130px !important;
}

.bic-segment {
    text-align: center;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 15px;
    letter-spacing: 1px;
    padding: 10px 6px;
}

/* 4 characters */
.bic-bank {
    width: 64px !important;
}

/* 2 characters */
.bic-country {
    width: 44px !important;
}

/* 2 characters */
.bic-location {
    width: 44px !important;
}

/* 3 characters */
.bic-branch {
    width: 52px !important;
}

/* Invoice Number Format Builder */
.format-builder {
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.format-preview {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 20px;
}

.format-preview-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.format-preview-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Monaco', 'Courier New', monospace;
}

.format-field-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.format-field {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

.format-field-drag {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    cursor: move;
}

.format-field-input {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.format-field-remove {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 6px;
    color: #ff3b30;
    cursor: pointer;
    transition: all 0.2s ease;
}

.format-field-remove:hover {
    background: var(--error-bg);
}

/* Buttons */
.btn-group {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid #d2d2d7;
    margin-top: 32px;
}

.btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    font-family: inherit;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

/* Button Hierarchy:
 * .btn-critical: Full gradient - highest priority actions (e.g., "Create Your First Invoice")
 * .btn-primary: Solid brand color - primary actions (e.g., "Save", "Send Invoice")
 * .btn-secondary: Outlined - secondary actions (e.g., "Cancel", "Back")
 * All hovers use consistent transform: translateY(-1px) with appropriate shadows
 */

.btn-critical {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
}

.btn-critical:hover {
    box-shadow: 0 4px 12px rgba(235, 10, 68, 0.3);
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.btn-primary {
    background: #e6356a;
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: #e63965;
    box-shadow: 0 4px 12px rgba(247, 74, 118, 0.2);
    transform: translateY(-1px);
}

.btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-secondary {
    background: #ffffff;
    color: #e6356a;
    border: 2px solid #e6356a;
}

.btn-secondary:hover {
    background: #fff0f3;
    box-shadow: 0 2px 8px rgba(247, 74, 118, 0.1);
    transform: translateY(-1px);
}

.btn-success {
    background: #0d7d6c;
    color: #ffffff;
    border: none;
}

.btn-success:hover:not(:disabled) {
    background: #0a6b5c;
    box-shadow: 0 2px 8px rgba(13, 125, 108, 0.3);
    transform: translateY(-1px);
}

[data-theme="light"] .btn-success {
    background: #0d7d6c;
    color: #ffffff;
}

[data-theme="light"] .btn-success:hover:not(:disabled) {
    background: #0a6b5c;
}

.btn-outline {
    background: #ffffff;
    color: var(--text-secondary);
    border: 1px solid #d1d5db;
}

.btn-outline:hover {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
    color: #374151;
}

.btn-link {
    background: transparent;
    color: #e6356a;
    padding: 12px 16px;
.btn-small {
    padding: 8px 16px;
    font-size: 14px;
}

/* Service Packages Styles */
.package-card {
    transition: all 0.2s ease;
}

.package-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.package-line-item {
    transition: background 0.2s ease;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 150px;
    z-index: 1000;
    margin-top: 4px;
}

.dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s ease;
}

.dropdown-menu a:hover {
    background: var(--bg-secondary);
}

.dropdown-menu a:first-child {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.dropdown-menu a:last-child {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

}

.btn-link:hover {
    background: rgba(247, 74, 118, 0.05);
    transform: translateY(-1px);
}

/* Add Item Button - Teal circle with plus icon */
.btn-add-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: transparent;
    border: 2px dashed var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-item:hover {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
    background: var(--accent-teal-light);
}

.btn-add-item-icon {
    width: 28px;
    height: 28px;
    background: var(--accent-teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s ease;
}

.btn-add-item:hover .btn-add-item-icon {
    transform: scale(1.1);
}

[data-theme="dark"] .btn-add-item {
    border-color: var(--border-secondary);
}

[data-theme="dark"] .btn-add-item:hover {
    border-color: var(--accent-teal);
    background: #1f3533;
}

/* Line item animations */
.line-item-row {
    animation: lineItemFadeIn 0.3s ease;
}

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

.line-item-row.removing {
    animation: lineItemFadeOut 0.25s ease forwards;
}

@keyframes lineItemFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

/* Drag handle for line items */
.line-item-drag-handle {
    cursor: grab;
    color: var(--text-muted);
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.line-item-drag-handle:hover {
    opacity: 1;
}

.line-item-drag-handle:active {
    cursor: grabbing;
}

/* Line item description input */
.line-item-description {
    width: 100%;
}

.line-item-description::placeholder {
    font-style: italic;
    color: var(--text-placeholder);
}

/* #1097: when the line-item table is narrower than ~740px (phones,
   upright tablets, browser windows up to about 1150px wide) the 7-column
   table squeezed the service/description column to 0-30px and pushed VAT
   and delete off-screen. Each row (and the header, so the column titles stay above
   their fields) becomes a small grid: service + description full width
   with drag/remove beside it, then hours | rate, then VAT | subtotal.
   Switches on the table's own width (container query); browsers without
   container queries fall back to the viewport (<=820px). Layout only; the
   cells, inputs and JS are unchanged. The !important overrides the inline
   widths/paddings the JS writes on each cell, scoped to this container. */
#lineItemsContainer {
    container-type: inline-size;
}

/* KEEP IN SYNC: the rules in this @container block and in the
   @supports-not fallback below are the same list (CSS can't share them).
   Change both together. */
@container (max-width: 740px) {
    #lineItemsContainer > table,
    #lineItemsContainer > table > thead,
    #lineItemsContainer > table > tbody {
        display: block;
        width: 100%;
    }

    #lineItemsContainer > table > thead > tr,
    #lineItemsContainer > table > tbody > tr {
        display: grid;
        grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) 32px;
        grid-template-areas:
            "drag svc  svc  del"
            "hrs  hrs  rate rate"
            "vat  vat  sub  sub";
        column-gap: 8px;
        align-items: start;
    }

    #lineItemsContainer > table > tbody > tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--border-secondary);
    }

    #lineItemsContainer > table > thead > tr > th,
    #lineItemsContainer > table > tbody > tr > td {
        display: block;
        width: auto !important;
        min-width: 0;
        padding: 4px 0 !important;
    }

    #lineItemsContainer tr > :nth-child(1) { grid-area: drag; }
    #lineItemsContainer tr > :nth-child(2) { grid-area: svc; }
    #lineItemsContainer tr > :nth-child(3) { grid-area: hrs; }
    #lineItemsContainer tr > :nth-child(4) { grid-area: rate; }
    #lineItemsContainer tr > :nth-child(5) { grid-area: vat; }
    #lineItemsContainer tr > :nth-child(6) { grid-area: sub; }
    #lineItemsContainer tr > :nth-child(7) { grid-area: del; }

    #lineItemsContainer > table > thead > tr > th:nth-child(1),
    #lineItemsContainer > table > thead > tr > th:nth-child(7) {
        display: none;
    }

    #lineItemsContainer .vat-segment {
        max-width: 100%;
    }

    /* The closed service picker's menu (280px min-width) is laid out even
       while hidden and pushed 360px phones 8px sideways. */
    #lineItemsContainer .custom-dropdown:not(.open) .custom-dropdown-menu {
        display: none;
    }
}

/* KEEP IN SYNC with the @container (max-width: 740px) block above. */
@supports not (container-type: inline-size) {
    @media (max-width: 820px) {
        #lineItemsContainer > table,
        #lineItemsContainer > table > thead,
        #lineItemsContainer > table > tbody {
            display: block;
            width: 100%;
        }

        #lineItemsContainer > table > thead > tr,
        #lineItemsContainer > table > tbody > tr {
            display: grid;
            grid-template-columns: 20px minmax(0, 1fr) minmax(0, 1fr) 32px;
            grid-template-areas:
                "drag svc  svc  del"
                "hrs  hrs  rate rate"
                "vat  vat  sub  sub";
            column-gap: 8px;
            align-items: start;
        }

        #lineItemsContainer > table > tbody > tr {
            padding: 8px 0;
            border-bottom: 1px solid var(--border-secondary);
        }

        #lineItemsContainer > table > thead > tr > th,
        #lineItemsContainer > table > tbody > tr > td {
            display: block;
            width: auto !important;
            min-width: 0;
            padding: 4px 0 !important;
        }

        #lineItemsContainer tr > :nth-child(1) { grid-area: drag; }
        #lineItemsContainer tr > :nth-child(2) { grid-area: svc; }
        #lineItemsContainer tr > :nth-child(3) { grid-area: hrs; }
        #lineItemsContainer tr > :nth-child(4) { grid-area: rate; }
        #lineItemsContainer tr > :nth-child(5) { grid-area: vat; }
        #lineItemsContainer tr > :nth-child(6) { grid-area: sub; }
        #lineItemsContainer tr > :nth-child(7) { grid-area: del; }

        #lineItemsContainer > table > thead > tr > th:nth-child(1),
        #lineItemsContainer > table > thead > tr > th:nth-child(7) {
            display: none;
        }

        #lineItemsContainer .vat-segment {
            max-width: 100%;
        }

        /* The closed service picker's menu (280px min-width) is laid out even
           while hidden and pushed 360px phones 8px sideways. */
        #lineItemsContainer .custom-dropdown:not(.open) .custom-dropdown-menu {
            display: none;
        }
    }
}

/* Button Loading States */
.btn-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
}

.btn.loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn.loading .btn-text {
    opacity: 0;
}

.btn.loading .btn-spinner {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Button success state */
.btn.success {
    background: var(--success-text, #34c759) !important;
    border-color: var(--success-text, #34c759) !important;
}

/* PDF download spinner */
.pdf-spinner {
    animation: spin 1s linear infinite;
}

.btn-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

@keyframes btn-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Loading Overlay */
.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    opacity: 0.9;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border-radius: inherit;
}

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

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

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

.loading-message {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Auto-Save Indicator */
.auto-save-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auto-save-indicator.saving {
    color: var(--text-secondary);
}

.auto-save-indicator.saved {
    color: var(--success-text);
}

.auto-save-indicator svg {
    width: 14px;
    height: 14px;
}

.auto-save-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid #d1d5db;
    border-top-color: var(--text-secondary);
    border-radius: 50%;
    animation: auto-save-spin 0.8s linear infinite;
}

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

/* Resume Draft Modal */
.resume-draft-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.resume-draft-modal.show {
    opacity: 1;
    visibility: visible;
}

.resume-draft-content {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 32px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

.resume-draft-modal.show .resume-draft-content {
    transform: scale(1);
}

.resume-draft-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(255, 140, 208, 0.15) 0%, rgba(235, 10, 68, 0.15) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: #e6356a;
}

.resume-draft-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.resume-draft-message {
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.resume-draft-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.resume-draft-actions .btn {
    min-width: 120px;
}

/* Success State */
.success-container {
    text-align: center;
    padding: 60px 40px;
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    color: var(--success-text);
}

.success-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.success-message {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

.success-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Hidden State */
.hidden {
    display: none !important;
}

/* Rate Cards */
.rate-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.2s ease;
}

.rate-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-teal);
}

.rate-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.rate-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.rate-card-amount {
    font-size: 24px;
    font-weight: 700;
    color: var(--accent-teal);
    white-space: nowrap;
    margin-left: 16px;
}

.rate-card-description {
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 16px;
}

.rate-card-actions {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.rate-card-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.rate-card-btn:hover {
    background: var(--bg-secondary);
}

.rate-card-btn.delete:hover {
    background: #ff3b30;
    color: white;
    border-color: #ff3b30;
}

/* Developer Sidebar */
.dev-sidebar {
    width: 320px;
    background: #1d1d1f;
    border-left: 1px solid #3a3a3c;
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 20px;
    z-index: 100;
}

.dev-search {
    position: relative;
    margin-bottom: 16px;
}

.dev-search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    background: #2c2c2e;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    color: #f5f5f7;
    font-size: 14px;
    outline: none;
}

.dev-search-input:focus {
    border-color: #48484a;
    background: #3a3a3c;
}

.dev-search-input::placeholder {
    color: #86868b;
}

.dev-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #86868b;
    pointer-events: none;
}

.dev-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #86868b;
    cursor: pointer;
    padding: 4px;
    display: none;
}

.dev-search-clear:hover {
    color: #f5f5f7;
}

.dev-search-input:not(:placeholder-shown) + .dev-search-icon + .dev-search-clear {
    display: block;
}

.dev-button.hidden,
.dev-section.hidden {
    display: none;
}

.dev-no-results {
    color: #86868b;
    font-size: 13px;
    text-align: center;
    padding: 20px;
    display: none;
}

.dev-no-results.visible {
    display: block;
}

.dev-section {
    margin-bottom: 24px;
}

.dev-section-title {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.dev-button {
    width: 100%;
    padding: 12px 16px;
    background: #2c2c2e;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    color: #f5f5f7;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    margin-bottom: 8px;
}

.dev-button:hover {
    background: #3a3a3c;
    border-color: #48484a;
}

.dev-button.active {
    background: #eb0a44;
    border-color: var(--accent-primary);
}

.dev-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #2c2c2e;
    border: 1px solid #3a3a3c;
    border-radius: 8px;
    color: #f5f5f7;
    font-size: 14px;
    cursor: pointer;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.dev-checkbox-label:hover {
    background: #3a3a3c;
    border-color: #48484a;
}

.dev-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #c97100;
    cursor: pointer;
}

.main-content.with-dev-sidebar {
    margin-right: 320px;
}

/* Dev Sidebar Collapsed State */
.dev-sidebar.collapsed {
    width: 48px;
    padding: 12px 8px;
}

.dev-sidebar.collapsed .dev-section,
.dev-sidebar.collapsed .dev-section-title,
.dev-sidebar.collapsed .dev-button,
.dev-sidebar.collapsed .dev-checkbox-label,
.dev-sidebar.collapsed .dev-search,
.dev-sidebar.collapsed .dev-no-results {
    display: none;
}

.dev-sidebar.collapsed .dev-toggle-btn {
    transform: rotate(180deg);
}

.main-content.dev-sidebar-collapsed {
    margin-right: 48px;
}

.dev-toggle-btn {
    position: sticky;
    top: 0;
    width: 100%;
    height: 32px;
    background: #2c2c2e;
    border: 1px solid #3a3a3c;
    border-radius: 6px;
    color: #f5f5f7;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.dev-toggle-btn:hover {
    background: #3a3a3c;
    border-color: #48484a;
}

.dev-toggle-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.dev-sidebar-shortcut {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 8px;
}

.dev-sidebar.collapsed .dev-sidebar-shortcut {
    display: none;
}

/* ===== MOBILE NAVIGATION ===== */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-secondary);
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
}

.hamburger-btn {
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: 8px;
    transition: background 0.2s;
}

.hamburger-btn:hover {
    background: var(--bg-secondary);
}

.hamburger-btn:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

.hamburger-line {
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Animated hamburger to X */
.hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #f74a76 0%, #f5775e 50%, #eb0a44 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 18px;
}

.mobile-logo-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

/* #992: the phone header shows the same Tibby mascot as the sidebar header */
.mobile-logo-img {
    display: block;
    height: 36px;
    width: auto;
}

.mobile-header-spacer {
    width: 40px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Solid page colour, not a see-through dimmer: the owner's design rule treats
       a translucent scrim as a "transparency". Same layer as .mobile-header but
       later in the DOM, so it covers the header too; the drawer (.sidebar, 101)
       sits above it. */
    background: var(--bg-page);
    z-index: 100;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-header {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 101;
    }

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

    .main-content {
        margin-left: 0;
        padding-top: 56px;
    }

    .dev-sidebar {
        display: none;
    }

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

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

    .wizard-steps {
        padding: 0 16px;
    }

    .wizard-step-title {
        font-size: 11px;
    }

    /* Sticky header adjustments for mobile */
    .sticky-header {
        left: 0;
        width: 100%;
    }

    .page-content {
        padding: 16px;
    }

    /* Modal adjustments */
    .template-modal-content {
        width: 95%;
        margin: 16px;
        max-height: calc(100vh - 32px);
    }

    /* Mobile: Touch-friendly tap targets (44px minimum) */
    .btn {
        min-height: 44px;
        padding: 12px 20px;
    }

    .btn-link {
        min-height: 44px;
        padding: 12px 16px;
    }

    .nav-item {
        min-height: 44px;
    }

    .settings-nav-item {
        min-height: 44px;
    }

    .filter-select {
        min-height: 44px;
    }

    .form-input,
    .form-select,
    .form-textarea {
        min-height: 44px;
    }

    /* Mobile: Sticky header adjustments */
    .page-header-sticky {
        margin-left: -16px;
        margin-right: -16px;
        padding: 16px 16px 12px;
    }

    .page-title {
        font-size: 24px;
    }

    .page-subtitle {
        font-size: 14px;
    }

    /* Mobile: Page header stacking */
    .page-header {
        flex-direction: column;
        gap: 16px;
    }

    .page-header .btn {
        width: 100%;
    }

    /* Mobile: Toast adjustments */
    .toast-container {
        left: 16px;
        right: 16px;
        top: 72px;
    }

    .toast {
        min-width: auto;
        max-width: none;
    }
}
/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast {
    background: var(--bg-primary);
    padding: 16px 48px 16px 16px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 300px;
    max-width: 400px;
    pointer-events: auto;
    position: relative;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast.hiding {
    opacity: 0;
    transform: translateX(100%);
}

.toast-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    margin-top: 2px;
}

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

.toast-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.toast-message {
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-message a {
    color: inherit;
    text-decoration: underline;
    font-weight: 500;
}

.toast-message a:hover {
    opacity: 0.8;
}

.toast-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.toast-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.toast-success {
    border-left: 4px solid #2da84e;
}

.toast-success .toast-icon {
    color: var(--success-text);
}

.toast-error {
    border-left: 4px solid #ff3b30;
}

.toast-error .toast-icon {
    color: #ff3b30;
}

.toast-warning {
    border-left: 4px solid #ff9500;
}

.toast-warning .toast-icon {
    color: #ff9500;
}

.toast-info {
    border-left: 4px solid #007aff;
}

.toast-info .toast-icon {
    color: #007aff;
}

/* Undo Toast */
.toast-undo {
    border-left: 4px solid #6e6e73;
    padding-bottom: 20px;
}

.toast-undo .toast-icon {
    color: var(--text-secondary);
}

.toast-undo-btn {
    background: none;
    border: none;
    color: #e6356a;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
    font-size: 14px;
}

.toast-undo-btn:hover {
    text-decoration: underline;
}

.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: #e6356a;
    border-radius: 0 0 0 4px;
    animation: toast-progress-shrink 5s linear forwards;
}

@keyframes toast-progress-shrink {
    from { width: 100%; }
    to { width: 0%; }
}

/* Bulk Operation Progress Indicator */
.bulk-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulk-progress-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 32px;
    min-width: 320px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.bulk-progress-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #e5e5ea;
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
}

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

.bulk-progress-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.bulk-progress-status {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.bulk-progress-bar-container {
    background: #e5e5ea;
    border-radius: 4px;
    height: 8px;
    overflow: hidden;
}

.bulk-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.bulk-progress-cancel {
    margin-top: 16px;
    padding: 8px 20px;
    background: transparent;
    border: 1px solid var(--border-secondary);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-progress-cancel:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

/* Tooltips */
.tooltip {
    position: fixed;
    background: #1d1d1f;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    max-width: 250px;
}

.tooltip.show {
    opacity: 1;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
}

/* ===== CELEBRATION MODAL ===== */
.celebration-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.celebration-modal.show {
    display: flex;
}

.celebration-content {
    background: var(--bg-primary);
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 500px;
    text-align: center;
    animation: slideUp 0.4s ease;
}

.celebration-icon {
    font-size: 80px;
    margin-bottom: 24px;
    animation: bounce 0.6s ease;
}

@keyframes bounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

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

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.celebration-title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.celebration-message {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

.celebration-stats {
    display: flex;
    gap: 32px;
    justify-content: center;
    margin-bottom: 32px;
}

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

.stat-number {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Help Icon Button */
.help-icon-btn {
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-icon-btn:hover {
    background: #fff0f3;
    transform: scale(1.1);
}

[data-theme="dark"] .help-icon-btn:hover {
    background: #3a2a2e;
}

/* Confetti Animation */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10002;
    overflow: hidden;
}

.confetti {
    position: absolute;
    width: 10px;
    height: 10px;
    opacity: 0;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

.confetti--circle {
    border-radius: 50%;
}

.confetti--square {
    border-radius: 2px;
}

.confetti--strip {
    width: 4px;
    height: 16px;
    border-radius: 2px;
}

@keyframes confetti-fall {
    0% {
        opacity: 1;
        transform: translateY(-100px) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(25vh) translateX(20px) rotate(180deg) scale(0.9);
    }
    50% {
        opacity: 1;
        transform: translateY(50vh) translateX(-10px) rotate(360deg) scale(0.8);
    }
    75% {
        transform: translateY(75vh) translateX(15px) rotate(540deg) scale(0.6);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) translateX(0) rotate(720deg) scale(0.4);
    }
}

@keyframes confetti-fall-2 {
    0% {
        opacity: 1;
        transform: translateY(-100px) translateX(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(25vh) translateX(-25px) rotate(-90deg) scale(0.95);
    }
    50% {
        opacity: 1;
        transform: translateY(50vh) translateX(15px) rotate(-180deg) scale(0.85);
    }
    75% {
        transform: translateY(75vh) translateX(-20px) rotate(-270deg) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) translateX(5px) rotate(-360deg) scale(0.5);
    }
}

@keyframes confetti-fall-3 {
    0% {
        opacity: 1;
        transform: translateY(-100px) translateX(0) rotate(45deg) scale(1);
    }
    33% {
        transform: translateY(33vh) translateX(30px) rotate(165deg) scale(0.9);
    }
    66% {
        opacity: 1;
        transform: translateY(66vh) translateX(-20px) rotate(285deg) scale(0.7);
    }
    100% {
        opacity: 0;
        transform: translateY(100vh) translateX(10px) rotate(405deg) scale(0.4);
    }
}

/* Keyboard Shortcuts Modal */
.shortcuts-grid {
    display: grid;
    gap: 24px;
}

.shortcut-category h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 12px 0;
    letter-spacing: 0.5px;
}

.shortcut-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.shortcut-item span {
    color: var(--text-primary);
    font-size: 15px;
}

kbd {
    display: inline-block;
    padding: 4px 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    font-weight: 500;
}

/* Quick Actions Modal */
.quick-actions-overlay {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.quick-actions-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 600px;
    max-width: 90vw;
    margin: 100px auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.quick-actions-search {
    width: 100%;
    padding: 20px 24px;
    border: none;
    border-bottom: 1px solid var(--border-secondary);
    font-size: 18px;
    outline: none;
}

.quick-actions-list {
    max-height: 400px;
    overflow-y: auto;
}

.quick-action-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.quick-action-item:hover {
    background: var(--bg-secondary);
}

.quick-action-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.quick-action-item:hover .quick-action-icon {
    background: var(--bg-primary);
}

.quick-action-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.quick-action-shortcut {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Help Modal */
.help-modal-content {
    max-height: 70vh;
    overflow-y: auto;
}

.help-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-secondary);
}

.help-modal-header h2 {
    margin: 0;
    font-size: 24px;
}

.help-modal-body h3 {
    font-size: 18px;
    margin: 24px 0 12px 0;
    color: var(--text-primary);
}

.help-modal-body h4 {
    font-size: 16px;
    margin: 16px 0 8px 0;
    color: var(--text-primary);
}

.help-modal-body p {
    margin: 8px 0;
    line-height: 1.6;
    color: var(--text-secondary);
}

.help-modal-body ul {
    margin: 8px 0;
    padding-left: 24px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.help-modal-body li {
    margin: 4px 0;
}

.help-modal-body strong {
    color: var(--text-primary);
}

.help-modal-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid #e5e5ea;
    text-align: center;
}

.help-modal-footer p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
}

.help-modal-footer a {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.help-modal-footer a:hover {
    text-decoration: underline;
}

/* Setup Banner */
.setup-banner {
    margin-bottom: 32px;
}

.setup-banner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.setup-banner-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.setup-banner-header .btn-secondary {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    border: none;
}

.setup-banner-header .btn-secondary:hover {
    opacity: 0.9;
}

.setup-card {
    background: var(--bg-primary);
    border: 2px solid var(--accent-primary);
    border-radius: 12px;
    padding: 32px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
}

.setup-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(235, 10, 68, 0.15);
    border-color: #f5775e;
}

.setup-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
}

.setup-card.completed {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    border-color: var(--accent-primary);
    color: white;
    cursor: default;
}

.setup-card.completed:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(235, 10, 68, 0.2);
}

.setup-card.completed::before {
    display: none;
}

.setup-card.completed .setup-card-progress {
    color: rgba(255, 255, 255, 0.9);
}

.setup-card.completed .setup-card-content h4 {
    color: white;
}

.setup-card.completed .setup-card-content p {
    color: rgba(255, 255, 255, 0.9);
}

.setup-card-progress {
    font-size: 13px;
    color: var(--accent-primary);
    font-weight: 600;
    margin-bottom: 24px;
    text-align: center;
}

.setup-card-content {
    text-align: center;
}

.setup-card-content h4 {
    margin: 0 0 12px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.setup-card-content p {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.setup-card-emoji {
    font-size: 48px;
    margin-bottom: 16px;
}

/* Draft Saved Indicator */
#draftSavedIndicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 12px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 100;
}

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Autosave Status Indicator */
.autosave-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.autosave-status.status-saving {
    color: var(--text-secondary);
}

.autosave-status.status-saved {
    color: var(--success-text);
}

.autosave-status.status-unsaved {
    color: var(--warning-text);
    background: var(--warning-bg);
}

.autosave-status.fade-out {
    opacity: 0;
}

.autosave-status .status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.autosave-status .status-icon svg {
    width: 14px;
    height: 14px;
}

.autosave-status.status-saving .status-icon svg {
    animation: spin 1s linear infinite;
}

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

[data-theme="dark"] .autosave-status {
    color: #a1a1a6;
}

[data-theme="dark"] .autosave-status.status-saved {
    color: #32d74b;
}

[data-theme="dark"] .autosave-status.status-unsaved {
    color: #ff9f0a;
    background: #3a2a1a;
}

/* Skip Link for Keyboard Navigation */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #1d1d1f;
    color: white;
    padding: 8px 16px;
    z-index: 10001;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid #eb0a44;
    outline-offset: 2px;
}

/* Global Focus Visible Styles for Keyboard Navigation */
:focus-visible {
    outline: 2px solid #66ccbe;
    outline-offset: 2px;
}

/* Enhanced focus for interactive elements */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
.nav-item:focus-visible,
.invoice-tab:focus-visible,
.card:focus-visible,
.stat-card:focus-visible,
.client-item:focus-visible,
.invoice-item:focus-visible {
    outline: 2px solid #66ccbe;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 204, 190, 0.25);
}

/* Dark mode focus - brighter glow */
[data-theme="dark"] :focus-visible {
    outline-color: #66ccbe;
}

[data-theme="dark"] button:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] [role="button"]:focus-visible,
[data-theme="dark"] .nav-item:focus-visible,
[data-theme="dark"] .invoice-tab:focus-visible,
[data-theme="dark"] .card:focus-visible,
[data-theme="dark"] .stat-card:focus-visible,
[data-theme="dark"] .client-item:focus-visible,
[data-theme="dark"] .invoice-item:focus-visible {
    outline: 2px solid #66ccbe;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(102, 204, 190, 0.3);
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
    outline: none;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.empty-state svg {
    margin-bottom: 24px;
}

.empty-state h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.empty-state p {
    font-size: 17px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* ===== DRAFT CLOSE MODAL ===== */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-backdrop.active {
    display: flex;
    opacity: 1;
}

/* New invoice indicator star */
@keyframes starPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
}

.new-invoice-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    color: var(--accent-teal);
    cursor: pointer;
    animation: starPulse 1.5s ease-in-out infinite;
    transition: transform 0.2s ease;
}

.new-invoice-star:hover {
    animation: none;
    transform: scale(1.3);
}

/* ===== SETTINGS MODAL ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10010;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

/* Send Invoice Modal Options */
.send-invoice-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    cursor: pointer;
    background: var(--bg-secondary);
    transition: all 0.15s ease;
}
.send-invoice-option:hover {
    border-color: var(--accent-teal);
    background: var(--bg-tertiary);
}
.send-invoice-option.disabled {
    cursor: default;
    opacity: 0.7;
}
.send-invoice-option.disabled:hover {
    border-color: var(--border-primary);
    background: var(--bg-secondary);
}
.send-invoice-option-content {
    flex: 1;
}
.send-invoice-option-title {
    font-weight: 600;
    margin-bottom: 2px;
}
.send-invoice-option-email {
    font-size: 14px;
    color: var(--text-secondary);
}

.modal {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: relative;
}

.modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    background: #e8e8ea;
    transform: scale(1.1);
}

.modal-close-btn svg {
    width: 18px;
    height: 18px;
    color: var(--text-primary);
}

/* Lancer Settings floating modal overlay */
.lancer-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.lancer-settings-modal {
    display: flex;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    background: var(--bg-primary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
}

.lancer-settings-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 24px;
    z-index: 10;
    padding: 4px 8px;
    line-height: 1;
    transition: color 0.2s;
}
.lancer-settings-close:hover {
    color: var(--text-primary);
}

.lancer-settings-modal .settings-container {
    height: 85vh;
    width: 100%;
    flex-direction: row;
}

.lancer-settings-modal .modal-settings-sidebar {
    width: 240px;
    min-width: 240px;
    flex-shrink: 0;
    display: block;
    border-right: 1px solid var(--border-secondary);
    border-bottom: none;
    overflow-x: visible;
    overflow-y: auto;
    padding: 24px 0;
}

.lancer-settings-modal .modal-settings-content {
    flex: 1;
    overflow-y: auto;
    max-height: 85vh;
}

/* Settings container - flex layout for sidebar + content */
.settings-container {
    display: flex;
    height: calc(100vh - 80px);
    background: var(--bg-primary);
    border-radius: 16px;
    overflow: hidden;
}

.modal-settings-sidebar {
    width: 240px;
    background: var(--bg-secondary);
    border-right: 1px solid #e5e5ea;
    padding: 24px 0;
    overflow-y: auto;
}

.modal-settings-nav-item {
    padding: 12px 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-settings-nav-item:hover {
    background: #fff0f3;
}

[data-theme="dark"] .modal-settings-nav-item:hover {
    background: #3a2a2e;
}

.modal-settings-nav-item.active {
    background: var(--bg-primary);
    color: var(--accent-primary);
    font-weight: 600;
    border-left: 3px solid #eb0a44;
    padding-left: 21px;
}

.modal-settings-nav-item svg {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

.modal-settings-nav-item.active svg {
    opacity: 1;
}

.modal-settings-content {
    flex: 1;
    padding: 32px 40px;
    overflow-y: auto;
}

.settings-header {
    margin-bottom: 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-secondary);
}

.settings-title {
    font-size: 28px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.settings-subtitle {
    color: var(--text-secondary);
    font-size: 15px;
}

.settings-panel {
    display: block;
}

.settings-panel.hidden {
    display: none;
}

.settings-section {
    margin-bottom: 32px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

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

/* Form labels - block by default, flex when containing tooltips (set inline) */
.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-label .required {
    color: #ff3b30;
}

.form-label .optional {
    color: var(--text-secondary);
    font-weight: 400;
    font-size: 13px;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 15px;
    transition: all 0.2s ease;
    font-family: inherit;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.form-input:focus {
    outline: none;
    border-color: #66ccbe;
    box-shadow: 0 0 0 3px rgba(102, 204, 190, 0.25);
}

.form-help {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* Override for IBAN/BIC chunked inputs - must come after .form-input width: 100% */
.iban-input-wrapper .form-input,
.bic-input-wrapper .form-input {
    width: auto !important;
    flex: none !important;
}
.iban-country { width: 44px !important; }
.iban-check { width: 44px !important; }
.iban-bank { width: 64px !important; }
.iban-account { width: 130px !important; }
.bic-bank { width: 64px !important; }
.bic-country { width: 44px !important; }
.bic-location { width: 44px !important; }
.bic-branch { width: 52px !important; }

.btn-group {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.modal .badge-pro {
    margin-left: auto;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Desktop Only - hide on touch devices */
@media (hover: none) and (pointer: coarse) {
    .desktop-only {
        display: none !important;
    }
}

/* Keyboard Shortcuts Panel Styles */
.shortcuts-section {
    margin-bottom: 24px;
}

.shortcuts-category {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-secondary);
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.shortcut-description {
    font-size: 14px;
    color: var(--text-primary);
}

.shortcut-keys {
    display: flex;
    align-items: center;
    gap: 4px;
}

.shortcut-keys kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    box-shadow: 0 1px 0 #d2d2d7;
}

[data-theme="dark"] .shortcuts-category {
    color: #a1a1a6;
    border-bottom-color: #3a3a3c;
}

[data-theme="dark"] .shortcut-description {
    color: #f5f5f7;
}

[data-theme="dark"] .shortcut-keys kbd {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #f5f5f7;
    box-shadow: 0 1px 0 #3a3a3c;
}

.shortcuts-kbd {
    display: inline-block;
    padding: 2px 6px;
    background: #e5e5ea;
    border-radius: 4px;
    font-size: 12px;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    color: #1d1d1f;
}

[data-theme="dark"] .shortcuts-kbd {
    background: #3a3a3c;
    color: #f5f5f7;
}

[data-theme="dark"] .shortcuts-tip strong {
    color: #f5f5f7;
}

/* Dashboard Customization Styles */
.dashboard-widgets-list {
    border: 1px solid var(--border-secondary);
    border-radius: 12px;
    overflow: hidden;
}

.settings-widget-section {
    margin-bottom: 20px;
}

.settings-widget-section:last-child {
    margin-bottom: 0;
}

.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.settings-section-header:hover {
    background: var(--bg-tertiary);
}

.settings-section-header svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.settings-section-header.collapsed svg {
    transform: rotate(-90deg);
}

.settings-section-content {
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.settings-section-content.collapsed {
    max-height: 0;
}

.dashboard-widget-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-secondary);
    transition: background 0.15s, transform 0.15s;
}

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

.dashboard-widget-item.dragging {
    opacity: 0.5;
    transform: scale(1.02);
}

.dashboard-widget-item.drag-over {
    background: var(--bg-secondary);
    border-top: 2px solid #eb0a44;
}

.widget-drag-handle {
    color: #d2d2d7;
    cursor: grab;
    padding-right: 16px;
    font-size: 16px;
    user-select: none;
}

.widget-drag-handle:active {
    cursor: grabbing;
}

.widget-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.toggle {
    position: relative;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d2d2d7;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle .toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle input:checked + .toggle-slider {
    background-color: var(--accent-primary);
}

.toggle input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

[data-theme="dark"] .dashboard-widgets-list {
    border-color: var(--border-primary);
}

[data-theme="dark"] .dashboard-widget-item {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

[data-theme="dark"] .dashboard-widget-item.drag-over {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .widget-name {
    color: var(--text-primary);
}

[data-theme="dark"] .widget-drag-handle {
    color: #636366;
}

[data-theme="dark"] .toggle .toggle-slider {
    background-color: #48484a;
}

.toggle-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-secondary);
}

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

.toggle-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.toggle-status {
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.toggle-status.off {
    color: var(--text-secondary);
}

.toggle-status.on {
    color: var(--success-text, #34c759);
}

.toggle-status svg {
    width: 12px;
    height: 12px;
}

.toggle-switch {
    width: 50px;
    height: 28px;
    background: #e5e5ea;
    border: 1px solid #d2d2d7;
    border-radius: 14px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.toggle-switch.active {
    background: #34c759;
    border-color: #34c759;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch.active::after {
    transform: translateX(22px);
}

@media (max-width: 768px) {
    .modal {
        flex-direction: column;
        max-height: 95vh;
    }

    .modal-settings-sidebar {
        width: 100%;
        padding: 16px;
        border-right: none;
        border-bottom: 1px solid var(--border-secondary);
        display: flex;
        overflow-x: auto;
        gap: 8px;
    }

    .modal-settings-nav-item {
        padding: 8px 16px;
        white-space: nowrap;
        border-radius: 20px;
    }

    .modal-settings-nav-item.active {
        border-left: none;
        padding-left: 16px;
    }

    .modal-settings-content {
        padding: 24px;
    }

    /* Freelancer Settings popup (#993): the `.lancer-settings-modal ...` rules
       above are more specific than this phone block, so on phones they kept the
       240px side menu and squeezed the settings into a thin strip. Stack the menu
       (the scrollable row of pills above) over the content instead. */
    .lancer-settings-overlay {
        padding: 12px;
    }

    .lancer-settings-modal {
        width: 100%;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    .lancer-settings-modal .settings-container {
        flex-direction: column;
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
    }

    .lancer-settings-modal .modal-settings-sidebar {
        width: 100%;
        min-width: 0;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        border-right: none;
        border-bottom: 1px solid var(--border-secondary);
        /* room on the right for the close button */
        padding: 12px 56px 12px 16px;
    }

    .lancer-settings-modal .modal-settings-content {
        flex: 1;
        min-height: 0;
        max-height: none;
    }

    /* The close button caps the end of the pill row, so pills scroll under it
       instead of overlapping its x. */
    .lancer-settings-close {
        top: 0;
        right: 0;
        width: 48px;
        height: 61px;
        padding: 0;
        background: var(--bg-secondary);
    }
}

/* ===== FAQs MODAL ===== */
.faqs-modal {
    max-width: 860px;
    width: 92%;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 88vh;
}

.faqs-modal-header {
    padding: 24px 24px 0;
    flex-shrink: 0;
}

.faqs-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

/* Search Bar */
.faqs-search-container {
    position: relative;
    margin-bottom: 16px;
}

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

.faqs-search-input {
    width: 100%;
    padding: 12px 40px 12px 44px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.faqs-search-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.1);
}

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

.faqs-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: 4px;
    transition: color 0.15s ease;
}

.faqs-search-clear:hover {
    color: var(--text-primary);
}

/* Tabs */
.faqs-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-secondary);
}

.faqs-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

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

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

.faqs-tab svg {
    opacity: 0.7;
}

.faqs-tab.active svg {
    opacity: 1;
}

/* Tab Content */
.faqs-tab-content {
    display: none;
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.faqs-tab-content.active {
    display: block;
}

/* Search Results */
.faqs-search-results {
    padding: 16px 24px;
    overflow-y: auto;
    flex: 1;
}

.faqs-search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-secondary);
}

.faqs-search-results-header span {
    font-size: 13px;
    color: var(--text-secondary);
}

.faqs-search-results-clear {
    background: none;
    border: none;
    font-size: 13px;
    color: var(--accent-primary);
    cursor: pointer;
}

.faqs-search-results-clear:hover {
    text-decoration: underline;
}

.faqs-search-result-item {
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.faqs-search-result-item:hover {
    background: var(--bg-tertiary);
}

.faqs-search-result-type {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent-primary);
    margin-bottom: 4px;
}

.faqs-search-result-title {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.faqs-search-result-preview {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.faqs-search-no-results {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}

.faqs-search-no-results svg {
    margin-bottom: 12px;
    opacity: 0.5;
}

/* FAQ Items */
.faq-item {
    border-bottom: 1px solid var(--border-secondary);
}

/* Brief highlight when a "More info" deep link lands the user on a specific FAQ
   (dark-appropriate: teal left-accent + subtle fill, never a white flash). */
.faq-item.faq-highlight {
    background: var(--bg-secondary);
    box-shadow: inset 3px 0 0 var(--accent-teal);
    border-radius: 8px;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    transition: color 0.2s ease;
}

.faq-question:hover {
    color: var(--accent-primary);
}

.faq-question svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.faq-item.expanded .faq-question svg {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-item.expanded .faq-answer {
    max-height: 640px;
}

.faq-answer-content {
    padding: 0 0 18px 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
}

.faq-answer-content p {
    margin: 0 0 12px 0;
}

.faq-answer-content p:last-child {
    margin-bottom: 0;
}

.faq-answer-content ul {
    margin: 8px 0 12px 0;
    padding-left: 20px;
}

.faq-answer-content li {
    margin-bottom: 4px;
}

.faq-answer-content strong {
    color: var(--text-primary);
}

/* ===== GLOSSARY TAB ===== */
.glossary-intro {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-secondary);
}

.glossary-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.glossary-term {
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    transition: background 0.15s ease;
}

.glossary-term:hover {
    background: var(--bg-tertiary);
}

.glossary-term-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.glossary-term-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.glossary-term-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.glossary-term-badge.draft {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.glossary-term-badge.outstanding {
    background: var(--info-bg);
    color: var(--info-text);
}

.glossary-term-badge.overdue {
    background: var(--error-bg);
    color: var(--error-text);
}

.glossary-term-badge.paid {
    background: var(--success-bg);
    color: var(--success-text);
}

.glossary-term-badge.partial {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.glossary-term-badge.void {
    background: var(--status-void-bg);
    color: var(--status-void-text);
}

.glossary-term-def {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* ===== TUTORIALS TAB ===== */
.tutorials-intro {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-secondary);
}

.tutorial-item {
    background: var(--bg-secondary);
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.tutorial-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tutorial-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.tutorial-header:hover {
    background: var(--bg-tertiary);
}

.tutorial-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--bg-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.tutorial-title-group {
    flex: 1;
    min-width: 0;
}

.tutorial-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.tutorial-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.tutorial-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.tutorial-item.expanded .tutorial-chevron {
    transform: rotate(180deg);
}

.tutorial-content {
    display: none;
    padding: 0 18px 20px;
    border-top: 1px solid var(--border-secondary);
}

.tutorial-item.expanded .tutorial-content {
    display: block;
}

.tutorial-step {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-secondary);
}

.tutorial-step:last-of-type {
    border-bottom: none;
}

.tutorial-step-number {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    background: var(--accent-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
}

.tutorial-step-content {
    flex: 1;
    min-width: 0;
}

.tutorial-step-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tutorial-step-content p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

.tutorial-step-content kbd {
    display: inline-block;
    padding: 2px 6px;
    font-size: 11px;
    font-family: inherit;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-primary);
}

.tutorial-tip {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--info-bg);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tutorial-tip strong {
    color: var(--text-primary);
}

[data-theme="dark"] .tutorial-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ===== DELETE CONFIRMATION ===== */
.btn-danger {
    background: #ff3b30;
    color: white;
}
.btn-danger:hover:not(:disabled) {
    background: #e6251a;
}
.btn-ghost {
    background: transparent;
    border: none;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--bg-secondary);
}
.btn-danger-text {
    color: var(--error-text);
}
.btn-danger-text:hover:not(:disabled) {
    background: #4a2020;
}
[data-theme="dark"] .btn-danger-text:hover:not(:disabled) {
    background: #5c2626;
}
.delete-warning {
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    margin-bottom: 20px;
}
.delete-warning-title {
    font-weight: 600;
    color: #856404;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.delete-warning-text {
    font-size: 14px;
    color: #856404;
    line-height: 1.5;
}

/* ===== LOADING SPINNER ===== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== MISSION CONTROL: LAYOUT OVERRIDES ===== */
html.mission-control-page, html.mission-control-page body {
    height: 100%;
    overflow: hidden;
}

.mission-control-page .main-content {
    padding: 0 32px 32px;
    height: 100vh;
    overflow-y: auto;
}

.mission-control-page .content-container {
    max-width: 1400px;
}

/* ===== MISSION CONTROL: PAGE HEADER (Sticky) ===== */

/* Remove top padding on pages with sticky header so top:0 sticks flush */
.main-content:has(.page-header-sticky) {
    padding-top: 0;
}

.page-header-sticky {
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 50;
    margin-left: -32px;
    margin-right: -32px;
    padding: 32px 32px 16px;
    transition: box-shadow 0.2s, border-color 0.2s;
    border-bottom: 1px solid transparent;
}

.page-header-sticky.stuck {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-bottom-color: var(--border-primary);
}

.page-header-sticky .page-header {
    margin-bottom: 20px;
}

.page-header-sticky .page-title {
    margin-bottom: 4px;
}

.page-header-sticky .page-subtitle {
    font-size: 15px;
}

/* ===== MISSION CONTROL: SEARCH BAR ===== */
.mc-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-tertiary);
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.mc-search-bar:hover {
    border-color: var(--accent-teal);
}

.mc-search-bar svg {
    width: 16px;
    height: 16px;
}

.mc-search-key {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-quaternary);
    margin-left: 24px;
}

/* ===== MISSION CONTROL: WELCOME BANNER ===== */
.mc-welcome-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.mc-welcome-greeting {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.mc-welcome-sub {
    font-size: 14px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* ===== MISSION CONTROL: FILTER BAR ===== */
.filter-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.filter-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 16px;
}

.filter-row:last-child {
    margin-bottom: 0;
}

.filter-row-secondary {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}

.filter-bar {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sort Container - Separate from filters */
.sort-container {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sort-container .filter-label {
    margin: 0;
    padding-bottom: 0;
}

.filter-select {
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-primary);
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 170px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.filter-select:hover {
    border-color: var(--accent-primary);
}

.filter-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(235, 10, 68, 0.15);
}

.btn-reset-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-reset-filters:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-secondary);
}

.btn-reset-filters:active {
    transform: scale(0.98);
}

.btn-reset-filters svg {
    flex-shrink: 0;
}

.btn-save-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.btn-save-search:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

.btn-save-search svg {
    flex-shrink: 0;
}

.filter-group-right {
    margin-left: auto;
    align-self: flex-end;
    display: flex;
    gap: 8px;
}

/* Custom Date Range Picker - Always visible */
.date-range-picker {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.date-range-picker.hidden {
    display: none;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.date-input {
    padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-primary);
    font-size: 14px;
    color: var(--text-primary);
    width: 140px;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.date-input:hover {
    border-color: var(--accent-teal);
}

.date-input:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.15);
}

/* Dark mode calendar icon */
[data-theme="dark"] .date-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.date-separator {
    color: var(--text-muted);
    font-size: 14px;
    padding-bottom: 8px;
}

.btn-apply-dates {
    padding: 10px 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: not-allowed;
    transition: all 0.2s;
}

.btn-apply-dates.active {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: white;
    cursor: pointer;
    animation: applyPulse 0.4s ease-out;
}

@keyframes applyPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(102, 204, 190, 0.5); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(102, 204, 190, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(102, 204, 190, 0); }
}

.btn-apply-dates.active:hover {
    background: var(--accent-teal-hover);
}

.filter-date-error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    font-size: 12px;
    color: #ff6b6b;
    white-space: nowrap;
}

.filter-group:has(.filter-date-error:not(:empty)) {
    position: relative;
}

.btn-clear-dates {
    padding: 8px 12px;
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-clear-dates:hover {
    border-color: #ff3b30;
    color: #ff3b30;
}

/* ===== ACTIVE FILTER CHIPS ===== */
.active-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    margin-top: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    align-items: center;
}

.active-filters-bar:empty,
.active-filters-bar:not(.visible) {
    display: none;
}

.filter-chips-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.filter-results-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-left: 16px;
    border-left: 1px solid var(--border-primary);
    font-size: 13px;
    color: var(--text-secondary);
}

.filter-results-summary.no-results {
    color: var(--warning-text);
}

.filter-results-count {
    font-weight: 600;
    color: var(--text-primary);
}

.filter-results-summary.no-results .filter-results-count {
    color: var(--warning-text);
}

.filter-results-breakdown {
    display: flex;
    gap: 12px;
    font-size: 12px;
}

.filter-results-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.filter-results-item:hover {
    background: var(--bg-tertiary);
}

.filter-results-item-count {
    font-weight: 600;
    color: var(--accent-teal);
}

.filter-results-item-label {
    color: var(--text-secondary);
}

.filter-results-item:hover .filter-results-item-label {
    color: var(--text-primary);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    font-size: 12px;
    color: var(--text-primary);
    animation: chipFadeIn 0.15s ease-out;
}

@keyframes chipFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.filter-chip-label {
    color: var(--text-muted);
    font-weight: 500;
}

.filter-chip-value {
    color: var(--text-primary);
}

.filter-chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-chip-remove:hover {
    background: var(--accent-primary);
    color: white;
}

.filter-chip-remove svg {
    width: 10px;
    height: 10px;
}

/* ===== MISSION CONTROL: EDIT MODE ===== */
.edit-layout-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-primary);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.edit-layout-btn:hover {
    background: var(--bg-secondary);
}

.edit-layout-btn.active {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    border-color: transparent;
}

.edit-layout-btn svg {
    width: 16px;
    height: 16px;
}

.add-widget-btn {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 2px dashed var(--accent-teal);
    border-radius: 8px;
    background: var(--accent-teal-light);
    font-size: 13px;
    font-weight: 500;
    color: var(--accent-teal);
    cursor: pointer;
    transition: all 0.2s;
}

.add-widget-btn:hover {
    background: #b2e5df;
}

[data-theme="dark"] .add-widget-btn:hover {
    background: #2a4a48;
}

.add-widget-btn.visible {
    display: flex;
}

.add-widget-btn svg {
    width: 16px;
    height: 16px;
}

/* Widget remove button (iOS style) */
.widget-remove-btn {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 26px;
    height: 26px;
    background: #ff3b30;
    border: 3px solid var(--bg-primary);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    z-index: 10;
    transition: transform 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.widget-remove-btn:hover {
    transform: scale(1.1);
}

.widget-remove-btn:active {
    transform: scale(0.95);
}

/* Edit mode active */
.dashboard-edit-mode .widget-remove-btn {
    display: flex;
}

.dashboard-edit-mode .stat-card,
.dashboard-edit-mode .card {
    cursor: grab;
    border: 2px dashed transparent;
}

.dashboard-edit-mode .stat-card:hover,
.dashboard-edit-mode .card:hover {
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 4px rgba(102, 204, 190, 0.15);
}

.dashboard-edit-mode .stat-card.dragging,
.dashboard-edit-mode .card.dragging {
    opacity: 0.5;
    cursor: grabbing;
    transform: scale(1.02);
}

.dashboard-edit-mode .stat-card.drag-over,
.dashboard-edit-mode .card.drag-over {
    border-color: var(--accent-primary);
    background: var(--accent-light);
}

/* Jiggle animation like iOS */
@keyframes widgetJiggle {
    0%, 100% { transform: rotate(-0.3deg); }
    50% { transform: rotate(0.3deg); }
}

.dashboard-edit-mode .stat-card,
.dashboard-edit-mode .card {
    animation: widgetJiggle 0.15s infinite;
    opacity: 1 !important; /* Override base opacity:0 since fadeInUp is replaced */
}

.dashboard-edit-mode .stat-card:nth-child(2),
.dashboard-edit-mode .card:nth-child(2) {
    animation-delay: 0.05s;
}

.dashboard-edit-mode .stat-card:nth-child(3),
.dashboard-edit-mode .card:nth-child(3) {
    animation-delay: 0.1s;
}

.dashboard-edit-mode .stat-card:nth-child(4) {
    animation-delay: 0.15s;
}

.dashboard-edit-mode .stat-card:hover,
.dashboard-edit-mode .card:hover,
.dashboard-edit-mode .stat-card.dragging,
.dashboard-edit-mode .card.dragging {
    animation: none;
}

/* Widget removing animation */
.widget-removing {
    animation: widgetRemove 0.3s ease forwards;
}

@keyframes widgetRemove {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* Widget adding animation */
.widget-adding {
    animation: widgetAdd 0.3s ease forwards;
}

@keyframes widgetAdd {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

/* Hidden widgets panel */
.hidden-widgets-panel {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    box-shadow: var(--shadow-lg);
    z-index: 10001;
    min-width: 320px;
    max-width: 90vw;
}

.hidden-widgets-panel.visible {
    display: block;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.hidden-widgets-panel h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.panel-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin: 16px 0 8px;
}

.panel-section-label:first-child {
    margin-top: 0;
}

.hidden-widget-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.hidden-widget-item:hover {
    background: var(--bg-tertiary);
}

.hidden-widget-item:last-child {
    margin-bottom: 0;
}

.hidden-widget-item span {
    font-size: 15px;
    color: var(--text-primary);
}

.hidden-widget-item svg {
    width: 20px;
    height: 20px;
    color: var(--accent-teal);
}

.hidden-widgets-panel .panel-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hidden-widgets-panel .panel-close-btn:hover {
    background: var(--bg-tertiary);
}

.hidden-widgets-panel .panel-close-btn svg {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

.hidden-widgets-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    z-index: 10000;
}

.hidden-widgets-overlay.visible {
    display: block;
}

/* Empty dashboard state */
.dashboard-empty-state {
    display: none;
    text-align: center;
    padding: 60px 24px;
    color: var(--text-secondary);
    grid-column: 1 / -1;
}

.dashboard-empty-state.visible {
    display: block;
}

.dashboard-empty-state svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
    color: var(--text-muted);
}

.dashboard-empty-state p {
    font-size: 16px;
    margin-bottom: 16px;
}

/* ===== MISSION CONTROL: PER-SECTION EDIT CONTROLS (FA-41) ===== */
/* One "Edit Layout" toggles the whole dashboard; each section then gets its own
   "Restore defaults" + "add back" chips for its hidden widgets. Shown only in
   edit mode. */
.dashboard-zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dashboard-zone-header .dashboard-zone-label {
    margin-bottom: 0;
}

.zone-restore-btn {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--accent-teal);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.zone-restore-btn svg {
    width: 14px;
    height: 14px;
}

.zone-restore-btn:hover {
    background: var(--bg-secondary);
    color: var(--accent-teal-hover);
}

.dashboard-edit-mode .zone-restore-btn {
    display: inline-flex;
}

.widget-addback-tray {
    display: none;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    padding-left: 4px;
}

.dashboard-edit-mode .widget-addback-tray:not(:empty) {
    display: flex;
}

.widget-addback-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px dashed var(--accent-teal);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--accent-teal);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.widget-addback-chip:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-teal-hover);
    color: var(--accent-teal-hover);
}

/* ===== MISSION CONTROL: ZONE LABELS ===== */
.dashboard-zone-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    padding-left: 4px;
}

/* ===== MISSION CONTROL: STATS CARDS ===== */
.stats-zone {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

/* Adaptive columns for stats zone */
.stats-zone.cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.stats-zone.cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.stats-zone.cols-1 {
    grid-template-columns: 1fr;
    max-width: 320px;
}

/* Zone empty state */
.zone-empty {
    display: none;
    text-align: center;
    padding: 40px 24px;
    color: var(--text-secondary);
    border: 2px dashed var(--border-primary);
    border-radius: 12px;
    margin-bottom: 24px;
}

.zone-empty.visible {
    display: block;
}

.zone-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
    color: var(--text-muted);
}

.zone-empty p {
    font-size: 14px;
    margin: 0;
}

.stat-card {
    background: #FAFAFA;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--border-secondary);
    transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
    position: relative;
}

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

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

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

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

.stat-card:hover {
    border-color: var(--accent-teal);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-label.label-paid {
    color: #30c961;
}

.stat-label.label-outstanding {
    color: #c97100;
}

.stat-label.label-overdue {
    color: #ef0a45;
}

/* Help/Info Tooltips */
.info-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    position: relative;
    margin-left: 4px;
    width: 12px;
    height: 12px;
    vertical-align: middle;
    color: var(--text-muted);
    transition: color 0.15s ease;
}

.info-trigger:hover {
    color: var(--accent-teal);
}

.info-trigger svg {
    width: 12px;
    height: 12px;
}

.info-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1d1d1f;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    width: 260px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1d1d1f;
}

.info-trigger:hover .info-tooltip {
    /* Disabled - JS tooltip-overlay handles this */
}

/* Tooltip Overlay - Fixed layer above everything */
.tooltip-overlay {
    position: fixed;
    background: #1d1d1f;
    color: white;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 10000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: translate(-50%, -100%);
    pointer-events: none;
}

.tooltip-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.tooltip-overlay::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #1d1d1f;
}

.tooltip-glossary-link {
    color: var(--accent-teal);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.tooltip-glossary-link:hover {
    text-decoration: underline;
}

/* Glossary Modal Content */
.glossary-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-primary);
}

.glossary-content p {
    margin: 0 0 16px 0;
}

.glossary-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 20px 0 10px 0;
}

.glossary-content h4:first-child {
    margin-top: 0;
}

.glossary-content ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.glossary-content li {
    margin-bottom: 8px;
}

.glossary-content ul ul {
    margin-top: 8px;
    margin-bottom: 0;
}

.glossary-content code {
    background: var(--bg-tertiary);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 13px;
}

.glossary-content strong {
    color: var(--text-primary);
}

/* Info tooltips - handled by JS tooltip-overlay */
.info-trigger:hover .info-tooltip {
    /* Disabled - JS tooltip-overlay handles this */
}

/* Help Link in Page Header */
.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s;
}

.help-link:hover {
    color: var(--accent-primary);
    background: #fff0f3;
}

[data-theme="dark"] .help-link:hover {
    background: #3a2a2e;
}

.help-link svg {
    width: 16px;
    height: 16px;
}

.stat-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition: background-position 0.6s ease;
}

.stat-hint {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: -8px;
    margin-bottom: 12px;
}

.stat-card:hover .stat-value {
    background-position: 100% 50%;
}

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

    .stat-card {
        animation: none !important;
        opacity: 1 !important;
    }

    .stat-value {
        transition: none !important;
    }

    .toast {
        transform: none !important;
    }

    .sidebar {
        transition: none !important;
    }

    .btn:hover {
        transform: none !important;
    }
}

.stat-breakdown {
    display: flex;
    gap: 16px;
    font-size: 13px;
    padding-top: 12px;
    border-top: 1px solid var(--border-secondary);
    flex-wrap: wrap;
}

.stat-breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-breakdown-label {
    color: var(--text-secondary);
    font-size: 11px;
}

.stat-breakdown-value {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-gross { background: #34c759; }
.dot-vat { background: #ff9500; }
.dot-net { background: #c97100; }
.dot-pending { background: #c97100; }
.dot-overdue { background: #ff3b30; }
.dot-active { background: #34c759; }
.dot-new { background: #eb0a44; }

/* ===== BACK OFFICE INSIGHTS SECTION ===== */
.insights-section {
    margin-bottom: 40px;
}

.insights-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.insights-section-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 20px 0;
}

.insights-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .insights-layout {
        grid-template-columns: 1fr;
    }
}

.insights-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.insights-cards .stat-card {
    flex: 1;
}

.insights-card {
    animation: none;
    opacity: 1;
}

.insights-metric {
    padding: 16px 0;
}

.insights-metric:first-of-type {
    padding-top: 12px;
}

.insights-metric-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.insights-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.insights-metric-header .insights-metric-label {
    margin-bottom: 0;
}

.burnie-target-dropdown {
    min-width: 100px;
}

.burnie-target-dropdown .custom-dropdown-trigger {
    padding: 4px 8px;
    font-size: 11px;
    min-height: 24px;
    background: transparent;
    border: 1px solid var(--border-primary);
}

.burnie-target-dropdown .custom-dropdown-trigger:hover {
    background: var(--bg-tertiary);
}

.burnie-target-dropdown .dropdown-text {
    font-size: 11px;
}

.insights-sublabel {
    font-weight: 400;
    text-transform: none;
    color: var(--text-muted);
}

.insights-metric-value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.insights-projected {
    background: linear-gradient(135deg, #66ccbe 0%, #4db6a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.insights-metric-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insights-breakdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.insights-breakdown-label {
    color: var(--text-secondary);
    flex: 1;
}

.insights-breakdown-value {
    color: var(--text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.insights-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-teal { background: #66ccbe; }
.dot-teal-dark { background: #3d8a7d; }
.dot-red { background: #ff453a; }
.dot-orange { background: #ff9f0a; }
.dot-yellow { background: #ffd60a; }

.insights-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 0;
}

/* Burnie Gauge */
.burnie-gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
}

.burnie-gauge {
    width: 200px;
    height: 110px;
}

.burnie-arc-bg {
    stroke: var(--bg-tertiary);
}

.burnie-needle {
    stroke: var(--text-primary);
    transform-origin: 100px 100px;
    transition: transform 0.6s ease-out;
}

.burnie-center {
    fill: var(--text-primary);
}

.burnie-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 8px;
}

.burnie-value span:first-child {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.burnie-unit {
    font-size: 14px;
    color: var(--text-secondary);
}

.burnie-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Burnie Tabs */
.burnie-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
    margin: 12px 0;
}

.burnie-tab {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.burnie-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Current Balance Input */
.burnie-balance-input {
    margin-bottom: 16px;
}

.burnie-balance-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.burnie-balance-input .form-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.burnie-balance-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}

.burnie-balance-hint.hidden {
    display: none;
}

/* Burnie Details */
.burnie-details {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}

.burnie-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.burnie-detail-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.burnie-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #ff453a;
    font-variant-numeric: tabular-nums;
}

.burnie-detail-value.burnie-income {
    color: #66ccbe;
}

.burnie-positive-flow {
    color: #66ccbe !important;
}

/* Insights Chart */
.insights-chart-container {
    display: flex;
    flex-direction: column;
}

.insights-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.insights-chart-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
}

.insights-tab {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.insights-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.insights-chart-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    animation: none;
    opacity: 1;
}

.insights-chart-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 20px;
}

.insights-chart {
    flex: 1;
    min-height: 400px;
    padding: 20px 0;
}

.insights-area-chart {
    width: 100%;
    height: 380px;
}

.insights-chart-grid-line {
    stroke: var(--border-primary);
    stroke-dasharray: 4, 4;
    opacity: 0.5;
}

.insights-chart-y-label {
    fill: var(--text-muted);
    font-size: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.insights-chart-area-paid {
    fill: #66ccbe;
}

.insights-chart-area-outstanding {
    fill: #3d8a7d;
}

.insights-chart-line-expenses {
    fill: none;
    stroke: #ff453a;
    stroke-width: 2.5;
}

.insights-chart-dot {
    transition: r 0.2s;
}

.insights-chart-dot:hover {
    r: 6;
}

.insights-chart-month-label {
    fill: var(--text-secondary);
    font-size: 11px;
    text-anchor: middle;
}

.insights-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    margin-top: auto;
}

.insights-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.insights-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.expenses-pie-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
}

@media (max-width: 600px) {
    .expenses-pie-container {
        flex-direction: column;
    }
}

.expenses-pie-chart {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.expenses-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.expenses-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.expenses-legend-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.expenses-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.expenses-legend-value {
    font-weight: 600;
    color: var(--text-primary);
}

.insights-expenses-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    margin-top: 16px;
}

.insights-expenses-actions .btn {
    flex: 1;
}

/* Expenses Screen */
.expenses-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 768px) {
    .expenses-summary-cards {
        grid-template-columns: 1fr;
    }
}

.expenses-table-header {
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--border-primary);
    margin-bottom: 0;
}

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

.expenses-table th {
    text-align: left;
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-primary);
}

.expenses-table td {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
}

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

.expenses-table tr:hover {
    background: var(--bg-secondary);
}

.expense-name {
    font-weight: 500;
}

.expense-category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.expense-amount {
    font-weight: 600;
    color: #ff453a;
    font-variant-numeric: tabular-nums;
}

.expense-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.expense-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.expense-action-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.expense-action-btn.delete:hover {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}

.expenses-empty-state {
    text-align: center;
    padding: 60px 20px;
}

/* Expenses Toolbar */
.expenses-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 0;
}

.expenses-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    flex: 1;
    max-width: 320px;
}

.expenses-search svg {
    color: var(--text-muted);
    flex-shrink: 0;
}

.expenses-search input {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    width: 100%;
    outline: none;
}

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

.expenses-sort {
    display: flex;
    align-items: center;
}

.expenses-sort select {
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

/* Category Tabs */
.expenses-tabs {
    display: flex;
    gap: 0;
    margin-top: 16px;
    border-bottom: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-bottom: none;
    border-radius: 12px 12px 0 0;
    padding: 4px;
    overflow-x: auto;
}

.expenses-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.expenses-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.expenses-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Bulk Actions Bar */
.expenses-bulk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-left: 1px solid var(--border-primary);
    border-right: 1px solid var(--border-primary);
}

.bulk-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bulk-bar-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.bulk-bar-actions {
    display: flex;
    gap: 8px;
}

.bulk-bar-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bulk-bar-btn:hover {
    background: var(--bg-primary);
    border-color: var(--text-muted);
}

.bulk-bar-btn-danger {
    color: #ff453a;
}

.bulk-bar-btn-danger:hover {
    background: rgba(255, 69, 58, 0.1);
    border-color: #ff453a;
}

.bulk-bar-btn-text {
    background: none;
    border: none;
    color: var(--accent-teal);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.bulk-bar-btn-text:hover {
    background: var(--bg-secondary);
}

/* Bulk Actions */
.bulk-actions-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 6px;
    min-width: 180px;
    display: none;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.bulk-actions-menu.show {
    display: block;
}

.bulk-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.bulk-action-item:hover {
    background: var(--bg-tertiary);
}

.bulk-action-item.delete {
    color: #ff453a;
}

.bulk-action-item.delete:hover {
    background: rgba(255, 69, 58, 0.15);
}

#bulkActionsBtn {
    position: relative;
}

/* Frequency badge */
.expense-frequency {
    display: inline-flex;
    padding: 3px 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-muted);
}

.insights-expenses-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}

.insights-expenses-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

.insights-expenses-empty {
    text-align: center;
    padding: 40px 20px;
}

.insights-expenses-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insights-expenses-empty-icon svg {
    width: 28px;
    height: 28px;
    color: var(--text-muted);
}

.insights-expenses-empty p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.insights-expenses-empty-hint {
    color: var(--text-muted) !important;
    font-size: 13px !important;
    margin-top: 4px !important;
}

.insights-expenses-summary {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
    border: 1px solid var(--border-primary);
}

.insights-expenses-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.insights-expenses-summary-row:first-child {
    padding-top: 0;
}

.insights-expenses-summary-row:last-child {
    padding-bottom: 0;
}

.insights-expenses-summary-row + .insights-expenses-summary-row {
    border-top: 1px solid var(--border-primary);
}

.insights-expenses-summary-label {
    font-size: 14px;
    color: var(--text-secondary);
}

.insights-expenses-summary-value {
    font-size: 20px;
    font-weight: 600;
    color: #ff453a;
    font-variant-numeric: tabular-nums;
}

.insights-expenses-summary-count {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.insights-expenses-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.insights-expenses-actions .btn {
    flex: 1;
    justify-content: center;
}

/* Manage Expenses Modal */
.manage-expense-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 28px;
    border-bottom: 1px solid var(--border-primary);
}

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

.manage-expense-row:hover {
    background: var(--bg-secondary);
}

.manage-expense-info {
    min-width: 0;
}

.manage-expense-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manage-expense-category {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.manage-expense-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.manage-expense-actions {
    display: flex;
    gap: 4px;
}

.manage-expense-btn {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.manage-expense-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.manage-expense-btn.delete:hover {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}

.insights-expenses-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insights-expense-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

.insights-expense-item:hover {
    border-color: var(--accent-teal);
}

.insights-expense-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.insights-expense-category {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

.insights-expense-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.insights-expense-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.insights-expense-item:hover .insights-expense-actions {
    opacity: 1;
}

.insights-expense-btn {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 4px;
    transition: all 0.2s;
}

.insights-expense-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.insights-expense-btn.delete:hover {
    color: #ff453a;
}

.insights-expenses-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    margin-top: 12px;
    border-top: 1px solid var(--border-primary);
    font-weight: 600;
}

.insights-expenses-total span:first-child {
    color: var(--text-secondary);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.insights-expenses-total span:last-child {
    font-size: 18px;
    color: #ff453a;
}

/* Dark mode specific */
[data-theme="dark"] .insights-expense-item {
    background: var(--bg-secondary);
}

/* ===== MISSION CONTROL: TWO COLUMN LAYOUT ===== */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    position: relative;
    z-index: 1;
}

/* Calendar on left, Invoices+Clients column on right */
.content-grid #calendarCard {
    order: 1;
}

.content-grid .content-column {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-grid #invoicesCard {
    order: 2;
}

.content-grid #recentClientsCard {
    order: 2;
}

/* Client list styles */
.client-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-item {
    display: grid;
    grid-template-columns: 40px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #f5f5f7;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.client-item:hover {
    border-color: var(--border-focus);
    background: var(--bg-secondary);
}

/* Client search contenteditable field (wizard step 1) */
.client-search-editable {
    min-height: 20px;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
}
.client-search-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary, #6b7280);
    pointer-events: none;
}
.client-search-editable:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.15);
}

/* Shared contenteditable search field styles (all search/filter inputs use
   contenteditable divs instead of <input> to prevent Chrome password autofill).
   Each field adds the .search-editable class alongside .form-input. */
.search-editable {
    min-height: 20px;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
}
.search-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--text-tertiary, #6b7280);
    pointer-events: none;
}
.search-editable:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.15);
}

/* Command palette contenteditable search field */
.command-palette-editable {
    min-height: 20px;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    /* Override .form-input defaults that clash with command palette layout */
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.command-palette-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--text-placeholder);
    pointer-events: none;
}
.command-palette-editable:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Invoice list search contenteditable field */
.invoice-search-editable {
    min-height: 20px;
    cursor: text;
    white-space: nowrap;
    overflow: hidden;
    /* Override .form-input defaults that clash with invoice search box layout */
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    font-size: 14px;
}
.invoice-search-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--text-placeholder);
    pointer-events: none;
}
.invoice-search-editable:focus {
    outline: none;
    border: none;
    box-shadow: none;
}

/* Client search result hover (wizard step 1) */
.client-search-result:hover {
    background: var(--bg-secondary);
}

.client-item-delete {
    opacity: 0;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
}

.client-item:hover .client-item-delete {
    opacity: 1;
}

.client-item-delete:hover {
    color: var(--error-text);
    background: #f5d5d5;
}

[data-theme="dark"] .client-item-delete:hover {
    background: #5c2626;
}

.client-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
}

.client-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.client-name {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
}

.client-meta {
    color: var(--text-secondary);
    font-size: 13px;
}

.client-revenue {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    text-align: right;
}

/* Clients List Card (full page view) */
.clients-list-card {
    max-width: 600px;
    margin: 40px auto;
}

.clients-list-card .client-list {
    max-height: 70vh;
    overflow-y: auto;
}

/* Close button for clients list */
.clients-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.clients-close-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Client Detail View */
.client-detail-view {
    position: relative;
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
}

.client-detail-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
    z-index: 10;
}

.client-detail-close-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.client-detail-header {
    margin-bottom: 24px;
}

.client-detail-header .btn-link {
    padding: 0;
    margin-bottom: 16px;
}

.client-detail-title-row {
    display: flex;
    justify-content: space-between;
    align-items: start;
    padding-right: 50px;
}

.client-detail-actions {
    display: flex;
    gap: 12px;
}

.client-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.client-detail-card {
    background: var(--bg-primary);
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.client-detail-card-wide {
    /* Already in grid, no special width needed */
}

.client-detail-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text-primary);
}

.client-detail-info-grid {
    display: grid;
    gap: 16px;
}

.client-detail-stats-grid {
    display: grid;
    gap: 16px;
}

.client-detail-info-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.client-detail-info-value {
    font-weight: 500;
    color: var(--text-primary);
}

.client-detail-stat-box {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.client-detail-stat-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.client-detail-stat-value {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Back to dashboard button */
.back-to-dashboard {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #66ccbe 0%, #4db8a8 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.back-to-dashboard:hover {
    background: linear-gradient(135deg, #5bbdaf 0%, #3fa899 100%);
    transform: translateX(-2px);
}

.back-to-dashboard svg {
    width: 16px;
    height: 16px;
}

.card {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--border-secondary);
    position: relative;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

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

.view-all {
    font-size: 14px;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.view-all:hover {
    text-decoration: underline;
}

/* Recent Items Widget Styles */
.recent-items-widget {
    margin-top: 20px;
}

.recent-items-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.recent-items-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.recent-item-card {
    display: flex;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.recent-item-card:hover {
    background: var(--bg-secondary);
}

.recent-item-delete {
    opacity: 0;
    background: none;
    border: none;
    padding: 6px;
    margin-left: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: 6px;
    transition: opacity 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.recent-item-card:hover .recent-item-delete {
    opacity: 1;
}

.recent-item-delete:hover {
    color: var(--error-text);
    background: #f5d5d5;
}

[data-theme="dark"] .recent-item-delete:hover {
    background: #5c2626;
}

.recent-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    margin-right: 12px;
    flex-shrink: 0;
}

.recent-item-avatar.invoice {
    background: var(--info-bg);
    color: var(--info-text);
}

.recent-item-avatar.draft {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.recent-item-avatar.client {
    background: var(--success-bg);
    color: var(--success-text);
}

.recent-item-content {
    flex: 1;
    min-width: 0;
}

.recent-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 8px;
}

.client-email-link {
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.recent-item-card:hover .client-email-link {
    opacity: 1;
}

.client-email-link:hover {
    color: var(--accent-teal);
}

.recent-item-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-item-meta {
    text-align: right;
    flex-shrink: 0;
    margin-left: 12px;
}

.recent-item-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.recent-item-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.show-more-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-top: 12px;
    padding: 6px 0;
    cursor: pointer;
}

.show-more-link:hover {
    color: var(--accent-primary);
}

.recent-items-list {
    border-top: 1px solid #e5e5ea;
}

.recent-items-list .recent-item-card {
    border-bottom: 1px solid #f0f0f0;
}

.recent-items-list .recent-item-card:last-child {
    border-bottom: none;
}

[data-theme="dark"] .recent-item-card:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .recent-item-title {
    color: var(--text-primary);
}

[data-theme="dark"] .recent-item-amount {
    color: var(--text-primary);
}

[data-theme="dark"] .recent-items-list {
    border-top-color: var(--border-primary);
}

[data-theme="dark"] .recent-items-list .recent-item-card {
    border-bottom-color: var(--border-primary);
}

.view-all:hover {
    color: #f5775e;
}

/* ===== MISSION CONTROL: INVOICE LIST ===== */
.invoice-list {
    display: flex;
    flex-direction: column;
    padding: 0 16px 16px;
    gap: 8px;
}

.invoice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.invoice-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-secondary);
}

.invoice-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.invoice-client {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.invoice-number {
    color: var(--text-secondary);
    font-size: 12px;
}

.invoice-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.invoice-amount {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
    text-align: right;
    min-width: 80px;;
    text-align: right;
}

.invoice-item .badge {
    justify-self: end;
}

/* Status Badges */
.badge {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.badge-draft {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.badge-sent {
    background: var(--info-bg);
    color: var(--info-text);
}

.badge-paid {
    background: var(--success-bg);
    color: var(--success-text);
}

.badge-overdue {
    background: var(--error-bg);
    color: var(--error-text);
}

/* Status Dots (compact status indicators) */
.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: relative;
    cursor: help;
    flex-shrink: 0;
}

.status-dot::after {
    content: attr(data-status);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 10;
}

.status-dot:hover::after {
    opacity: 1;
    visibility: visible;
}

.status-dot.paid {
    background: #2da84e;
}

.status-dot.sent {
    background: #1976d2;
}

.status-dot.overdue {
    background: #d32f2f;
}

.status-dot.draft {
    background: #6e6e73;
}

.status-dot.archived {
    background: #2da84e;
}

.status-dot.outstanding {
    background: #1976d2;
}

[data-theme="dark"] .status-dot.paid,
[data-theme="dark"] .status-dot.archived {
    background: #32d74b;
}

[data-theme="dark"] .status-dot.sent,
[data-theme="dark"] .status-dot.outstanding {
    background: #64d2ff;
}

[data-theme="dark"] .status-dot.overdue {
    background: #ff6b6b;
}

[data-theme="dark"] .status-dot.draft {
    background: #a1a1a6;
}

/* Pagination Mini */
.pagination-mini {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-mini button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.pagination-mini button:hover:not(:disabled) {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

.pagination-mini button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-mini svg {
    width: 14px;
    height: 14px;
}

.pagination-mini .page-indicator {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 40px;
    text-align: center;
}

/* ===== MISSION CONTROL: CALENDAR ===== */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calendar-nav-btn {
    background: none;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s;
    font-size: 13px;
}

.calendar-nav-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* Calendar View Toggle */
.calendar-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calendar-view-toggle {
    display: flex;
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 2px;
}

.calendar-view-btn {
    padding: 6px 12px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.calendar-view-btn:hover {
    color: var(--text-primary);
}

.calendar-view-btn.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Calendar Legend */
.calendar-legend {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 12px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-dot.today {
    background: transparent;
    border: 2px solid var(--border-focus);
}

.legend-dot.expected {
    background: var(--success-bg);
    border: 1px solid #2da84e;
}

.legend-dot.overdue {
    background: var(--error-bg);
    border: 1px solid #ff3b30;
}

.legend-dot.mixed {
    background: var(--success-bg);
    border: 1px solid #2da84e;
    position: relative;
}

.legend-dot.mixed::after {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    background: #ff3b30;
    border-radius: 50%;
}

/* List View Styles */
.calendar-list-view {
    display: none;
}

.calendar-list-view.active {
    display: block;
}

.calendar-grid-view.hidden {
    display: none;
}

.calendar-list-item {
    display: grid;
    grid-template-columns: 80px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #f5f5f7;
    cursor: pointer;
    transition: background 0.2s;
}

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

.calendar-list-item:hover {
    background: var(--bg-secondary);
}

.calendar-list-item.overdue {
    background: #fff5f5;
}

.calendar-list-item.overdue:hover {
    background: #ffe8e8;
}

.calendar-list-date {
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-list-item.overdue .calendar-list-date {
    color: #c62828;
}

.calendar-list-client {
    color: var(--text-primary);
}

.calendar-list-amount {
    font-weight: 600;
    color: var(--success-text);
}

.calendar-list-item.overdue .calendar-list-amount {
    color: #c62828;
}

.calendar-month {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day-header {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    padding: 8px 4px;
    text-transform: uppercase;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    gap: 2px;
}

.calendar-day:hover {
    background: var(--bg-secondary);
}

.calendar-day.other-month {
    color: #c7c7cc;
}

.calendar-day.today {
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    border: 2px solid var(--border-focus);
    position: relative;
}

.calendar-day.today::before {
    content: 'Today';
    position: absolute;
    top: 4px;
    font-size: 8px;
    font-weight: 600;
    color: var(--accent-teal);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.calendar-day.today:hover {
    background: #e0f2f1;
}

[data-theme="dark"] .calendar-day.today:hover {
    background: #1a3a38;
}

.calendar-day.has-payment {
    background: var(--success-bg);
    color: #1a5c1f;
    font-weight: 600;
}

.calendar-day.has-payment:hover {
    background: #c8e6c9;
}

/* Overdue states */
.calendar-day.has-overdue {
    background: var(--error-bg);
    color: #991b1b;
    font-weight: 600;
}

.calendar-day.has-overdue:hover {
    background: #ffcdd2;
}

.calendar-day.has-overdue .payment-dot {
    background: #991b1b;
}

/* Mixed state: some paid, some overdue */
.calendar-day.has-mixed {
    background: var(--success-bg);
    color: #1a5c1f;
    font-weight: 600;
}

.calendar-day.has-mixed:hover {
    background: #c8e6c9;
}

.calendar-day.has-mixed::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background: #ff3b30;
    border-radius: 50%;
    border: 1.5px solid white;
}

.payment-dot {
    width: 6px;
    height: 6px;
    background: #34c759;
    border-radius: 50%;
    position: absolute;
    bottom: 4px;
}

.calendar-day.today .payment-dot {
    background: var(--bg-primary);
}

/* ===== MISSION CONTROL: UPCOMING PAYMENTS ===== */
.upcoming-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f5f5f7;
}

.upcoming-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.upcoming-item {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.upcoming-item:hover {
    background: var(--bg-secondary);
}

.upcoming-item.overdue {
    background: #fff5f5;
    border-left: 3px solid #ff3b30;
}

.upcoming-item.overdue:hover {
    background: #ffe8e8;
}

.upcoming-date {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.upcoming-item.overdue .upcoming-date {
    color: #c62828;
}

.upcoming-client {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upcoming-item.overdue .upcoming-client {
    color: #c62828;
}

.upcoming-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.upcoming-amount.overdue {
    color: #c62828;
}

/* ===== MISSION CONTROL: PAYMENT MODAL ===== */
/* Single Payment View */
.payment-single {
    padding: 24px;
}

.payment-client-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.payment-invoice-link {
    color: var(--accent-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.payment-invoice-link:hover {
    text-decoration: underline;
}

.payment-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #f5f5f7;
}

.payment-detail-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.payment-detail-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payment-detail-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-detail-value.amount {
    font-size: 20px;
    color: var(--success-text);
}

/* Multiple Payments View */
.payment-list {
    padding: 0;
}

.payment-list-item {
    padding: 20px 24px;
    border-bottom: 1px solid #f5f5f7;
    transition: background 0.2s;
}

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

.payment-list-item:hover {
    background: var(--bg-secondary);
}

.payment-list-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.payment-list-client {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-list-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--success-text);
}

.payment-list-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payment-list-invoice {
    color: var(--accent-primary);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.payment-list-invoice:hover {
    text-decoration: underline;
}

/* Payment list item buttons */
.payment-list-item .btn-view-invoice {
    margin-top: 12px;
}

.btn-view-invoice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #eb0a44;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
}

.btn-view-invoice:hover {
    background: #5a6fd6;
}

.btn-view-invoice.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.btn-view-invoice.secondary:hover {
    background: #e5e5ea;
}

/* Overdue payment row in modal */
.payment-list-item.overdue {
    background: #fff5f5;
    border-left: 3px solid #ff3b30;
}

.payment-list-item.overdue .payment-list-client {
    color: #c62828;
}

.payment-list-item.overdue .payment-list-amount {
    color: #c62828;
}

/* Single payment overdue state */
.payment-single.overdue .payment-client-name {
    color: #c62828;
}

.payment-single.overdue .payment-detail-value.amount {
    color: #c62828;
}

.btn-large {
    padding: 14px 32px;
    font-size: 16px;
    border-radius: 10px;
}

/* ===== MISSION CONTROL: SKELETON LOADERS ===== */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--skeleton-base, #e5e5ea) 0%,
        var(--skeleton-shine, #f5f5f7) 50%,
        var(--skeleton-base, #e5e5ea) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}

.skeleton-shimmer {
    background: linear-gradient(
        90deg,
        var(--skeleton-base, #e5e5ea) 0%,
        var(--skeleton-shine, #f5f5f7) 50%,
        var(--skeleton-base, #e5e5ea) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
}

.skeleton-text.sm {
    height: 11px;
    width: 60%;
}

.skeleton-text.lg {
    height: 28px;
    width: 70%;
}

.skeleton-text.xl {
    height: 32px;
    width: 50%;
}

/* Skeleton Stats Card */
.stat-card.loading .stat-label,
.stat-card.loading .stat-value,
.stat-card.loading .stat-breakdown {
    display: none;
}

.skeleton-stat-label {
    height: 12px;
    width: 80px;
    margin-bottom: 12px;
}

.skeleton-stat-value {
    height: 28px;
    width: 120px;
    margin-bottom: 16px;
}

.skeleton-stat-breakdown {
    display: flex;
    gap: 16px;
    padding-top: 12px;
    border-top: 1px solid #f5f5f7;
}

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

.skeleton-breakdown-label {
    height: 11px;
    width: 40px;
}

.skeleton-breakdown-value {
    height: 14px;
    width: 70px;
}

/* Skeleton Invoice Item */
.skeleton-invoice-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid #f5f5f7;
    border-radius: 8px;
}

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

.skeleton-invoice-number {
    height: 14px;
    width: 100px;
}

.skeleton-invoice-client {
    height: 13px;
    width: 140px;
}

.skeleton-invoice-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.skeleton-invoice-amount {
    height: 14px;
    width: 70px;
}

.skeleton-invoice-badge {
    height: 22px;
    width: 56px;
    border-radius: 6px;
}

/* Skeleton Calendar */
.skeleton-calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.skeleton-calendar-btn {
    height: 32px;
    width: 60px;
    border-radius: 6px;
}

.skeleton-calendar-month {
    height: 20px;
    width: 140px;
}

.skeleton-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.skeleton-calendar-header {
    height: 11px;
    width: 24px;
    margin: 8px auto;
}

.skeleton-calendar-day {
    aspect-ratio: 1;
    border-radius: 8px;
}

/* Skeleton Upcoming */
.skeleton-upcoming-title {
    height: 13px;
    width: 80px;
    margin-bottom: 12px;
}

.skeleton-upcoming-item {
    display: grid;
    grid-template-columns: 70px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.skeleton-upcoming-date {
    height: 13px;
    width: 50px;
}

.skeleton-upcoming-client {
    height: 14px;
    width: 100px;
}

.skeleton-upcoming-amount {
    height: 14px;
    width: 70px;
}

/* ===== INVOICE LIST: SKELETON LOADERS ===== */
.invoice-list-skeleton {
    display: none;
}

.invoice-list-skeleton.loading {
    display: block;
}

.skeleton-section {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow: hidden;
}

.skeleton-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
}

.skeleton-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.skeleton-section-title {
    height: 16px;
    width: 100px;
}

.skeleton-section-count {
    height: 20px;
    width: 28px;
    border-radius: 10px;
    margin-left: auto;
}

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

.skeleton-table-header {
    display: grid;
    grid-template-columns: 40px 1fr 1.2fr 0.8fr 0.8fr 100px;
    gap: 16px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

.skeleton-th {
    height: 12px;
    border-radius: 3px;
}

.skeleton-th:first-child {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.skeleton-table-row {
    display: grid;
    grid-template-columns: 40px 1fr 1.2fr 0.8fr 0.8fr 100px;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
    align-items: center;
}

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

.skeleton-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
}

.skeleton-invoice-num {
    height: 14px;
    width: 90px;
}

.skeleton-client-name {
    height: 14px;
    width: 140px;
}

.skeleton-amount {
    height: 14px;
    width: 80px;
}

.skeleton-date {
    height: 14px;
    width: 85px;
}

.skeleton-actions {
    display: flex;
    gap: 8px;
}

.skeleton-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
}

/* Tabs skeleton */
.skeleton-tabs-bar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
}

.skeleton-tabs-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.skeleton-tab {
    height: 36px;
    width: 90px;
    border-radius: 8px;
}

.skeleton-tab:first-child {
    width: 60px;
}

.skeleton-tab:nth-child(2) {
    width: 80px;
}

.skeleton-tab:nth-child(3) {
    width: 110px;
}

.skeleton-search-box {
    height: 40px;
    width: 200px;
    border-radius: 8px;
    margin-left: auto;
}

.skeleton-filters-row {
    display: flex;
    gap: 16px;
}

.skeleton-filter {
    height: 36px;
    width: 140px;
    border-radius: 8px;
}

/* Dark mode adjustments for skeleton borders */
[data-theme="dark"] .skeleton-section {
    border-color: var(--border-primary);
}

[data-theme="dark"] .skeleton-table-header {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .skeleton-tabs-bar {
    border-color: var(--border-primary);
}

/* ===== CALENDAR SKELETON ===== */
.calendar-skeleton {
    display: none;
    padding: 16px;
}

.calendar-skeleton.loading {
    display: block;
}

.calendar-skeleton-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.calendar-skeleton-nav {
    width: 60px;
    height: 28px;
    border-radius: 6px;
}

.calendar-skeleton-month {
    width: 140px;
    height: 20px;
    border-radius: 4px;
}

.calendar-skeleton-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-skeleton-weekday {
    height: 16px;
    border-radius: 3px;
}

.calendar-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-skeleton-day {
    aspect-ratio: 1;
    border-radius: 8px;
    min-height: 36px;
}

.calendar-skeleton-legend {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    justify-content: center;
}

.calendar-skeleton-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-skeleton-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.calendar-skeleton-legend-text {
    width: 60px;
    height: 12px;
    border-radius: 3px;
}

/* Hide calendar content when skeleton is loading */
#calendarCard.calendar-loading .calendar-header-row,
#calendarCard.calendar-loading .calendar-legend,
#calendarCard.calendar-loading .calendar-nav,
#calendarCard.calendar-loading .calendar-grid,
#calendarCard.calendar-loading .calendar-list-view,
#calendarCard.calendar-loading .empty-state-inline {
    display: none;
}

/* Loading mode: hide real content, show skeletons */
.loading-mode .stat-card .stat-label,
.loading-mode .stat-card .stat-value,
.loading-mode .stat-card .stat-breakdown,
.loading-mode .card > .invoice-list,
.loading-mode .calendar-nav,
.loading-mode .calendar-grid,
.loading-mode .card > .upcoming-section,
.loading-mode .view-all {
    display: none;
}

.loading-mode .skeleton-content {
    display: block;
}

.loading-mode .skeleton-content .invoice-list {
    display: flex;
    gap: 8px;
}

.loading-mode .skeleton-content .upcoming-section {
    display: block;
}

.skeleton-content {
    display: none;
}

/* ===== MISSION CONTROL: EMPTY STATES ===== */

/* New User Preview Mode */
.preview-mode .stats-zone,
.preview-mode .content-grid {
    opacity: 0.4;
    pointer-events: none;
    user-select: none;
}

.preview-mode .filter-bar {
    opacity: 0.4;
    pointer-events: none;
}

.preview-banner {
    display: none;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 16px;
    text-align: center;
}

.preview-mode .preview-banner {
    display: block;
}

/* Empty State Overlay */
@keyframes bannerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.empty-state-overlay {
    display: none;
    position: relative;
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: 0 4px 24px rgba(102, 204, 190, 0.25);
    border: 2px solid var(--border-focus);
    animation: bannerSlideIn 0.6s ease-out 0.3s both;
}

.preview-mode .empty-state-overlay {
    display: block;
}

.empty-state-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px;
    padding: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-close-btn:hover {
    background: #e8e8ea;
    color: var(--text-primary);
}

[data-theme="dark"] .empty-state-close-btn:hover {
    background: #48484a;
}

.empty-state-close-btn svg {
    width: 20px;
    height: 20px;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.empty-state-icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.empty-state-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.empty-state-description {
    font-size: 15px;
    color: var(--text-secondary);
    max-width: 480px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

.empty-state-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Inline Empty States (for cards) */
.empty-state-inline {
    display: none;
    padding: 40px 24px;
    text-align: center;
}

.empty-state-inline.active {
    display: block;
}

.empty-state-inline-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(255, 140, 208, 0.15) 0%, rgba(235, 10, 68, 0.15) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.empty-state-inline-icon svg {
    width: 28px;
    height: 28px;
    color: #e6356a;
}

.empty-state-inline-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state-inline-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Unified Empty State Card */
.empty-state-card {
    text-align: center;
    padding: 80px 40px;
    background: var(--bg-primary);
    border-radius: 12px;
}

.empty-state-card .empty-state-icon-wrapper {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 140, 208, 0.15) 0%, rgba(235, 10, 68, 0.15) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-state-card .empty-state-icon-wrapper svg {
    width: 40px;
    height: 40px;
    color: #e6356a;
}

.empty-state-card .empty-state-heading {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.empty-state-card .empty-state-text {
    font-size: 17px;
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto 32px;
    line-height: 1.6;
}

.empty-state-card .empty-state-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Hide content when showing inline empty state */
.card.empty-invoices .invoice-list,
.card.empty-calendar .calendar-nav,
.card.empty-calendar .calendar-grid,
.card.empty-calendar .upcoming-section {
    display: none;
}

/* ===== MISSION CONTROL: RESPONSIVE ===== */
@media (max-width: 1200px) {
    .stats-zone {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

    /* Tablet: Narrower persistent sidebar */
    .sidebar {
        width: 200px;
    }

    .main-content {
        margin-left: 200px;
    }

    .sidebar-header {
        padding: 16px;
    }

    .sidebar-logo-img {
        height: 43px;
    }

    .user-avatar-mini {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .sidebar-nav {
        padding: 12px;
    }

    .nav-item {
        padding: 10px 12px;
        font-size: 14px;
        gap: 10px;
    }

    .nav-item svg {
        width: 18px;
        height: 18px;
    }

    .nav-subitem {
        padding: 8px 12px;
        font-size: 13px;
    }

    .nav-subitems {
        margin-left: 28px;
    }

    .sidebar-section-title {
        padding: 6px 12px;
        font-size: 10px;
    }

    .sidebar-settings-nav {
        padding: 0 12px 12px;
    }

    .sidebar-settings-nav .settings-nav-item {
        padding: 8px 10px;
        font-size: 13px;
        gap: 10px;
    }

    .sidebar-settings-nav .settings-nav-item svg {
        width: 16px;
        height: 16px;
    }

    .avatar-dropdown {
        left: 12px;
        right: 12px;
    }

    /* Tablet: Tighter main content padding */
    .main-content {
        padding: 24px;
    }

    .page-title {
        font-size: 28px;
    }

    .page-subtitle {
        font-size: 15px;
    }

    /* Tablet: Sticky header adjustments */
    .page-header-sticky {
        margin-left: -24px;
        margin-right: -24px;
        padding: 24px 24px 12px;
    }

    /* Tablet: Card padding */
    .card {
        padding: 20px;
    }
}

@media (max-width: 768px) {
    /* Phone: restore the phone layout (#991). The tablet block above comes later
       than the phone block next to .mobile-header, so on phones it was re-applying
       the persistent-sidebar width, the 200px content offset and the tablet sizes,
       even though the sidebar is an off-canvas drawer here. */
    .sidebar {
        width: 280px;
    }

    /* Start below the fixed 56px phone header (#992) rather than padding under
       it, so the sticky page headers stick just below it instead of behind it. */
    .main-content {
        margin-left: 0;
        margin-top: 56px;
        padding: 16px;
    }

    .mission-control-page .main-content {
        padding: 0 16px 24px;
        height: calc(100vh - 56px);
        height: calc(100dvh - 56px);
    }

    .page-header-sticky {
        margin-left: -16px;
        margin-right: -16px;
        padding: 16px 16px 12px;
    }

    .page-title {
        font-size: 24px;
    }

    .page-subtitle {
        font-size: 14px;
    }

    /* Mission Control: the header actions (search, Edit Layout) drop below the
       title instead of running off the edge, and the single column can't grow
       wider than the phone. */
    .page-header-row {
        flex-wrap: wrap;
        gap: 12px;
    }

    .content-grid {
        grid-template-columns: minmax(0, 1fr);
    }

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

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-select {
        width: 100%;
    }

    .recent-items-grid {
        grid-template-columns: 1fr;
    }

    /* Mobile: Card padding */
    .card {
        padding: 16px;
    }

    .card-header {
        margin-bottom: 16px;
    }
}

/* ===== #1106 APP BARS (phone + upright tablet) =====
   Phones (<=768px) and upright tablets up to the 13" iPad Pro (portrait, <=1032px)
   get a top bar (page title + the page's own action + bell + Messages) and a bottom
   bar (Home / Invoices / + / Clients-or-Shoebox / More). Sideways tablets and
   computers keep the side menu exactly as before.
   - Single instances: the bell, Messages (+ badge), DEMO/LIVE, theme toggle and
     avatar are NOT copied. aside#appSidebar stays in the DOM; here it shrinks to a
     transparent strip pinned to the top bar's right edge, showing only the bell and
     Messages; its other children are hidden. DEMO/LIVE and the theme toggle are
     reached from More, whose rows click the one real toggle.
   - Bar heights are a contract (#1104 reads them): --app-top-bar-h and
     --app-bottom-bar-h include the safe-area insets (viewport-fit=cover is set on
     these pages). The page scroller (.main-content) is shrunk by both, so content
     and sticky bars never sit under a bar.
   - Tokens only. Text on the pink + uses --bg-primary on --accent-primary. */
:root {
    --app-top-bar-h: 0px;
    --app-bottom-bar-h: 0px;
}

.app-bottom-bar,
.computer-notice {
    display: none;
}

/* Landscape tablets / iPhones keep the side menu; edge-to-edge drawing
   (viewport-fit=cover) must not slide it under a notch. env() is 0 elsewhere. */
.sidebar {
    padding-left: env(safe-area-inset-left);
}

.main-content {
    margin-right: env(safe-area-inset-right);
}

@media (max-width: 768px), (orientation: portrait) and (max-width: 1032px) {
    :root {
        --app-top-bar-h: calc(56px + env(safe-area-inset-top));
        --app-bottom-bar-h: calc(64px + env(safe-area-inset-bottom));
    }

    /* Task screens (new/edit forms) and an open on-screen keyboard: no bottom bar. */
    .app-container--task,
    html.app-kb-open {
        --app-bottom-bar-h: 0px;
    }

    .app-container {
        height: 100vh;
        height: 100dvh;
    }

    /* ---- top bar (the #992 phone header, repurposed) ---- */
    .mobile-header.app-top-bar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
        height: var(--app-top-bar-h);
        /* the right side is kept free for the bell + Messages (2 x 44px + gaps) */
        padding: env(safe-area-inset-top) calc(108px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
        background: var(--bg-primary);
        border-bottom: 1px solid var(--border-secondary);
        z-index: 100;
    }

    .app-top-bar[data-task] {
        padding-left: calc(4px + env(safe-area-inset-left));
    }

    .app-top-bar__title {
        flex: 1;
        min-width: 0;
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.2;
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .app-top-bar__icon-btn {
        flex: none;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-primary);
        cursor: pointer;
        text-decoration: none;
    }

    .app-top-bar__icon-btn:hover {
        background: var(--bg-secondary);
    }

    .app-top-bar__icon-btn:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: 2px;
    }

    .app-bar-icon {
        width: 22px;
        height: 22px;
        flex: none;
    }

    /* ---- the side menu becomes the top bar's bell + Messages strip ----
       (id + class so the dark-theme .sidebar background can't paint over the
       top bar's border) */
    #appSidebar.sidebar {
        position: fixed;
        top: env(safe-area-inset-top);
        right: env(safe-area-inset-right);
        left: auto;
        bottom: auto;
        width: auto;
        height: 56px;
        padding: 0 8px 0 0;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        background: transparent;
        border: none;
        overflow: visible;
        transform: none;
        transition: none;
        z-index: 101;
    }

    .sidebar-header,
    .sidebar-header-toggle,
    .sidebar-nav {
        display: contents;
    }

    .sidebar-header-brand,
    .sidebar-bottom,
    .sidebar .avatar-dropdown,
    .sidebar .avatar-dropdown.active,
    .sidebar #themeToggle,
    .sidebar #demoToggle,
    .sidebar-nav > .nav-section:not(.nav-section--messages) {
        display: none;
    }

    /* Visual order = DOM order (bell, then Messages), so focus order matches what
       is seen (WCAG 2.4.3). No `order` swap. */
    .nav-section--messages {
        margin: 0;
    }

    .sidebar .notif-bell {
        margin: 0;
    }

    .nav-section--messages .nav-item,
    .sidebar .notif-bell__btn {
        position: relative;
        width: 44px;
        height: 44px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: transparent;
        color: var(--text-primary);
    }

    .nav-section--messages .nav-item:hover,
    .sidebar .notif-bell__btn:hover,
    .sidebar .notif-bell__btn[aria-expanded="true"] {
        background: var(--bg-secondary);
        color: var(--text-primary);
        transform: none;
    }

    .nav-section--messages .nav-item svg,
    .sidebar .notif-bell__btn svg {
        width: 22px;
        height: 22px;
    }

    .nav-section--messages .nav-item-text {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .nav-section--messages .nav-messages-badge,
    .sidebar .notif-bell__badge {
        top: 2px;
        right: 0;
        transform: none;
    }

    .notif-bell__panel {
        max-height: calc(100vh - var(--app-top-bar-h) - var(--app-bottom-bar-h) - 24px);
        max-height: calc(100dvh - var(--app-top-bar-h) - var(--app-bottom-bar-h) - 24px);
    }

    /* ---- the page scroller sits between the two bars ---- */
    .main-content {
        margin-left: 0;
        margin-top: var(--app-top-bar-h);
        margin-bottom: var(--app-bottom-bar-h);
    }

    .mission-control-page .main-content {
        height: auto;
    }

    /* ---- bottom bar ---- */
    .app-bottom-bar {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--app-bottom-bar-h);
        padding: 4px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        background: var(--bg-primary);
        border-top: 1px solid var(--border-primary);
        z-index: 100;
    }

    .app-container--task .app-bottom-bar,
    html.app-kb-open .app-bottom-bar {
        display: none;
    }

    .app-bottom-bar__tab,
    .app-bottom-bar__create {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        min-height: 44px;
        text-decoration: none;
        color: var(--text-primary);
    }

    .app-bottom-bar__tab .app-bar-icon {
        color: var(--text-secondary);
    }

    .app-bottom-bar__label {
        max-width: 100%;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Current tab: brand-coloured icon + a bar on top; the label stays
       --text-primary so it keeps the AAA contrast of body text. */
    .app-bottom-bar__tab[aria-current] .app-bar-icon {
        color: var(--accent-primary);
    }

    .app-bottom-bar__tab[aria-current] .app-bottom-bar__label {
        font-weight: 700;
    }

    .app-bottom-bar__tab[aria-current]::before {
        content: "";
        position: absolute;
        top: -4px;
        left: 50%;
        width: 28px;
        height: 3px;
        margin-left: -14px;
        border-radius: 0 0 3px 3px;
        background: var(--accent-primary);
    }

    .app-bottom-bar__tab:focus-visible,
    .app-bottom-bar__create:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: -2px;
        border-radius: 10px;
    }

    .app-bottom-bar__plus {
        width: 52px;
        height: 52px;
        margin-top: -12px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 4px solid var(--bg-primary);
        background: var(--accent-primary);
        color: var(--bg-primary);
    }

    .app-bottom-bar__plus .app-bar-icon {
        width: 24px;
        height: 24px;
    }

    .app-bottom-bar__badge {
        position: absolute;
        top: 2px;
        left: calc(50% + 4px);
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--accent-primary);
        color: var(--bg-primary);
        font-size: 11px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }

    .app-bottom-bar .app-dot-mirror {
        position: absolute;
        top: 4px;
        left: calc(50% + 8px);
    }

    /* ---- "works best on a computer" (a notice, never a block) ---- */
    .computer-notice {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        margin: 0 0 16px;
        padding: 14px 16px;
        background: var(--bg-primary);
        border: 1px solid var(--border-primary);
        border-radius: 12px;
        color: var(--text-primary);
    }

    .computer-notice__icon {
        display: inline-flex;
        color: var(--text-secondary);
    }

    .computer-notice__text {
        flex: 1 1 200px;
        min-width: 0;
    }

    .computer-notice__title {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 700;
    }

    .computer-notice__body {
        margin: 0;
        font-size: 14px;
        line-height: 1.45;
        color: var(--text-primary);
    }

    .computer-notice__continue {
        min-height: 44px;
        padding: 0 16px;
        border: 1px solid var(--border-primary);
        border-radius: 10px;
        background: var(--bg-secondary);
        color: var(--text-primary);
        font: inherit;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
    }

    .computer-notice__continue:focus-visible {
        outline: 2px solid var(--border-focus);
        outline-offset: 2px;
    }

    .more-page__title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

/* ---- dot mirrors (sidebar dots shown on the bars / More) ---- */
.app-dot-mirror {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-primary);
    flex: none;
}

.app-dot-mirror[hidden] {
    display: none;
}

.app-dot-mirror--ok {
    background: var(--success-text);
}

/* ---- More page (/more) ---- */
.more-page {
    max-width: 640px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.more-page__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.more-account {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
}

.more-account__avatar {
    width: 44px;
    height: 44px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-size: 17px;
    font-weight: 700;
}

.more-account__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.more-account__text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.more-account__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more-account__link {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-size: 14px;
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.more-group {
    display: grid;
    gap: 8px;
}

.more-group__title {
    margin: 0 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.more-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    overflow: hidden;
}

.more-row-item + .more-row-item {
    border-top: 1px solid var(--border-secondary);
}

.more-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 0 16px;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 16px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.more-row:hover {
    background: var(--bg-secondary);
}

.more-row:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

.more-row--static,
.more-row--static:hover {
    cursor: default;
    background: transparent;
}

.more-row .app-bar-icon {
    width: 22px;
    height: 22px;
    flex: none;
}

.more-row__label {
    flex: 1;
    min-width: 0;
}

.more-row__value {
    font-size: 14px;
    color: var(--text-primary);
}

.more-row__laptop,
.more-row__chevron {
    display: inline-flex;
    color: var(--text-secondary);
}

.more-row__laptop .app-bar-icon,
.more-row__chevron .app-bar-icon {
    width: 18px;
    height: 18px;
}

.more-value-dark,
.more-value-demo-on {
    display: none;
}

html[data-theme="dark"] .more-value-dark,
html[data-demo-mode="true"] .more-value-demo-on {
    display: inline;
}

html[data-theme="dark"] .more-value-light,
html[data-demo-mode="true"] .more-value-demo-off {
    display: none;
}

.more-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 14px 52px;
}

.more-flag {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    background: var(--bg-secondary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.more-flag.active {
    border: 2px solid var(--text-primary);
    background: var(--bg-primary);
}

.more-flag:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* ===== INVOICE SECTIONS: MOBILE ===== */
@media (max-width: 768px) {
    /* Table scroll wrapper */
    .invoice-section-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .invoice-section-table {
        min-width: 600px;
    }

    .invoice-section-table th,
    .invoice-section-table td {
        padding: 10px 12px;
        font-size: 13px;
    }

    /* Bulk action bar */
    .bulk-action-bar {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }

    .bulk-action-bar .selection-count {
        font-size: 13px;
        width: 100%;
        margin-bottom: 4px;
    }

    .bulk-action-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .bulk-action-btn svg {
        width: 12px;
        height: 12px;
    }

    .bulk-deselect-link {
        font-size: 12px;
    }

    /* Row actions */
    .invoice-actions {
        flex-direction: column;
        gap: 4px;
    }

    .invoice-action-btn {
        padding: 5px 10px;
        font-size: 12px;
    }

    /* Archive toolbar */
    .archive-toolbar {
        padding: 12px;
        gap: 8px;
    }

    .archive-search {
        min-width: 100%;
        order: -1;
    }

    .archive-filter {
        flex: 1;
        min-width: calc(50% - 4px);
    }

    .archive-filter-btn {
        flex: 1;
        min-width: calc(50% - 4px);
        justify-content: center;
    }

    /* Section header */
    .invoice-section-header {
        padding: 12px;
    }

    .invoice-section-title {
        font-size: 14px;
    }

    .invoice-section-icon {
        width: 28px;
        height: 28px;
    }

    .invoice-section-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* ===== INVOICE SECTIONS: SMALL MOBILE ===== */
@media (max-width: 480px) {
    .bulk-action-btn span {
        display: none;
    }

    .bulk-action-btn {
        padding: 8px;
    }

    .bulk-action-btn svg {
        width: 16px;
        height: 16px;
    }

    .archive-filter,
    .archive-filter-btn {
        min-width: 100%;
    }

    .date-range-inputs {
        flex-direction: column;
        align-items: stretch;
    }

    .date-input-group {
        width: 100%;
    }

    .date-input-group .date-selects {
        flex-wrap: wrap;
    }
}

/* ===== MISSION CONTROL: DEV PANEL ===== */
.dev-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1d1d1f;
    color: white;
    padding: 16px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    z-index: 10000;
    max-width: 280px;
    font-size: 12px;
}

.dev-panel h3 {
    font-size: 13px;
    margin-bottom: 12px;
    color: var(--accent-primary);
}

.dev-panel label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    cursor: pointer;
}

.dev-panel input[type="checkbox"] {
    accent-color: #c97100;
}

/* ===== MISSION CONTROL: ENGINE BUTTON ANIMATION ===== */
@keyframes engine-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(247, 74, 118, 0.4),
            0 0 20px rgba(235, 10, 68, 0.3);
    }
    50% {
        box-shadow:
            0 0 0 12px rgba(247, 74, 118, 0),
            0 0 30px rgba(245, 119, 94, 0.5);
    }
}

@keyframes engine-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}

.empty-state-icon.engine-ready {
    animation: engine-pulse 2s ease-in-out infinite, engine-glow 2s ease-in-out infinite;
}

/* Walk me through link */
.tour-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 0;
    font-size: 14px;
    color: var(--accent-teal);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.2s;
}

.tour-trigger:hover {
    color: var(--accent-teal-hover);
}

.tour-trigger:focus {
    outline: none;
    text-decoration: underline;
}

.tour-trigger svg {
    width: 16px;
    height: 16px;
}

/* ===== MISSION CONTROL: TOUR OVERLAY SYSTEM ===== */
.tour-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 5000;
    overflow: visible;
}

.tour-overlay.active {
    display: block;
}

/* Elevated highlight - element pulled above overlay */
.tour-elevated {
    position: relative !important;
    z-index: 5001 !important;
    box-shadow:
        0 0 0 3px #66ccbe,
        0 0 0 6px rgba(102, 204, 190, 0.3),
        0 0 30px rgba(102, 204, 190, 0.4) !important;
    border-radius: 12px !important;
    transition: box-shadow 0.3s ease !important;
    background: white !important;
}

/* Stats zone needs page background */
.stats-zone.tour-elevated {
    background: #f5f5f7 !important;
    padding: 16px !important;
}

/* Cards already have white background */
.card.tour-elevated {
    background: white !important;
}

/* Sidebar is fixed positioned, needs special z-index handling */
.sidebar.tour-elevated {
    z-index: 5001 !important;
    background: white !important;
}

.tour-tooltip {
    display: none;
    position: fixed;
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 20px 24px;
    width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    animation: tooltipFadeIn 0.3s ease;
}

.tour-tooltip.active {
    display: block;
}

.tour-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px;
    padding: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tour-close-btn:hover {
    background: #e8e8ea;
    color: var(--text-primary);
}

.tour-close-btn svg {
    width: 18px;
    height: 18px;
}

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

.tour-tooltip-arrow {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--bg-primary);
    transform: rotate(45deg);
}

.tour-tooltip-arrow.top {
    bottom: -6px;
    left: 50%;
    margin-left: -6px;
}

.tour-tooltip-arrow.bottom {
    top: -6px;
    left: 50%;
    margin-left: -6px;
}

.tour-tooltip-arrow.left {
    right: -6px;
    top: 50%;
    margin-top: -6px;
}

.tour-tooltip-arrow.right {
    left: -6px;
    top: 50%;
    margin-top: -6px;
}

.tour-step-indicator {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.tour-tooltip-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.tour-tooltip-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.tour-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.tour-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.tour-btn-skip {
    background: none;
    border: none;
    color: var(--text-secondary);
}

.tour-btn-skip:hover {
    color: var(--text-primary);
}

.tour-btn-next {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    border: none;
    color: white;
}

.tour-btn-next:hover {
    filter: brightness(1.1);
}

.tour-btn-prev {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.tour-btn-prev:hover {
    background: #e5e5ea;
}

.tour-btn:focus {
    outline: 2px solid #eb0a44;
    outline-offset: 2px;
}

/* ===== MISSION CONTROL: SIDEBAR FOOTER ===== */
.sidebar-footer {
    padding: 16px;
    border-top: 1px solid #e5e5ea;
}

.sidebar-footer .nav-item {
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.sidebar-footer .nav-item:hover {
    color: var(--text-primary);
}

/* ===== INVOICE LIST: TABS + FILTERS BAR ===== */
.tabs-filters-bar {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid var(--border-secondary);
}

.tabs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-secondary);
    /* #1097: let the tab strip shrink to the card so it scrolls inside
       itself instead of pushing the whole page sideways. */
    min-width: 0;
}

.tabs-row.no-filters {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.invoice-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-secondary);
    padding: 4px;
    border-radius: 10px;
    /* #1097: the full tab set (~1250px) is wider than most screens. The
       strip scrolls within itself; when it fits, nothing changes. */
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) transparent;
}

/* #1097: touch screens swipe the strip; no scrollbar needed there. */
@media (hover: none) {
    .invoice-tabs {
        scrollbar-width: none;
    }
}

.invoice-tab {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.invoice-tab:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.invoice-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.invoice-tab svg {
    width: 16px;
    height: 16px;
}

/* Category-specific icon colors for tabs */
.invoice-tab[data-section="all"] svg {
    color: var(--accent-teal);
}

.invoice-tab[data-section="drafts"] svg {
    color: #f59e0b;
}

.invoice-tab[data-section="outstanding"] svg {
    color: #2196f3;
}

.invoice-tab[data-section="overdue"] svg {
    color: #ff3b30;
}

.invoice-tab[data-section="paid"] svg {
    color: #4caf50;
}

.invoice-tab[data-section="voided"] svg {
    color: #e57373;
}

.invoice-tab[data-section="creditNotes"] svg {
    color: #26a69a;
}

.invoice-tab[data-section="recurring"] svg {
    color: #9c27b0;
}

.invoice-tab[data-section="archive"] svg {
    color: #6b7280;
}

/* #1097: the closed client picker's 280px menu (searchable min-width) is
   laid out even while hidden; where the client filter ends a row it pushed
   the page 5-37px sideways (measured between 320 and 1190px). Take it out
   of layout until opened, below 1280px only, so desktop keeps the menu's
   open/close fade. */
@media (max-width: 1279px) {
    #invoiceListFilterBar .custom-dropdown.searchable:not(.open) .custom-dropdown-menu {
        display: none;
    }
}

/* #1097: the in-place .info-tooltip spans on the invoice pages are never
   shown (their hover rule is disabled), but at 220-300px wide they still
   count as overflow near the right edge and pan the page on phones.
   REVISIT with the B2 tap/focus-bubble work (#1107): if these spans are
   ever shown again (tap or focus), this display:none must be replaced by
   a positioning fix, or the bubbles will never appear on these pages. */
#invoicesListSection .info-tooltip,
#newInvoiceSection .info-tooltip,
#editInvoiceSection .info-tooltip {
    display: none;
}

@media (max-width: 1399px) {
    /* #1097: the phone block's `overflow-x: auto` on .invoice-section-content
       (INVOICE SECTIONS: MOBILE) is beaten by the later base rule
       `overflow: hidden`, so rows wider than their card were clipped and
       the row actions cut off: Resume/Continue + Delete (drafts), Mark Paid
       / View / Correct (card rows), Pause / Edit / Stop (recurring),
       Restore (archive). Restore the sideways scroll inside the card for
       every expanded section up to 1399px (where the compact card-row grid
       without the Sent column applies); a row that fits looks exactly as
       before. */
    .invoice-section:not(.collapsed) > .invoice-section-content {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* The selection bar sits above the table inside the same scroller;
       keep it in place while the rows are swiped sideways. */
    .invoice-section:not(.collapsed) > .invoice-section-content > .bulk-action-bar {
        position: sticky;
        left: 0;
    }
}

@media (max-width: 768px) {
    /* #1097: search box + inline status line wrap instead of widening
       the page header past the screen. */
    #invoicesListSection .page-header-actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
    }
}

.tab-count {
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Category-specific tab count colors when active */
.invoice-tab.active .tab-count.tab-count--all {
    background: var(--accent-teal);
    color: white;
}

.invoice-tab.active .tab-count.tab-count--drafts {
    background: #f59e0b;
    color: white;
}

.invoice-tab.active .tab-count.tab-count--outstanding {
    background: #2196f3;
    color: white;
}

.invoice-tab.active .tab-count.tab-count--overdue {
    background: #ff3b30;
    color: white;
}

.invoice-tab.active .tab-count.tab-count--paid {
    background: #4caf50;
    color: white;
}

.invoice-tab.active .tab-count.tab-count--voided {
    background: #e57373;
    color: white;
}

.invoice-tab.active .tab-count.tab-count--creditNotes {
    background: #26a69a;
    color: white;
}

.invoice-tab.active .tab-count.tab-count--recurring {
    background: #9c27b0;
    color: white;
}

.invoice-tab.active .tab-count.tab-count--archive {
    background: #6b7280;
    color: white;
}

.invoice-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-primary);
    border-radius: 10px;
    border: 1px solid var(--border-primary);
    width: 280px;
    transition: all 0.15s ease;
}

.invoice-search-box:focus-within {
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.15);
}

.invoice-search-box svg {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.invoice-search-box input,
.invoice-search-box .invoice-search-editable {
    border: none;
    background: transparent;
    font-size: 14px;
    color: var(--text-primary);
    width: 100%;
    outline: none;
}

.invoice-search-box input::placeholder {
    color: var(--text-placeholder);
}

/* Search wrapper for dropdown positioning */
.invoice-search-wrapper {
    position: relative;
}

/* Keyboard hint in search box */
.keyboard-hint {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    font-size: 11px;
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--text-muted);
    margin-left: 8px;
    flex-shrink: 0;
}

.invoice-search-box:focus-within .keyboard-hint {
    display: none;
}

/* Search dropdown */
.invoice-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 320px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.invoice-search-dropdown.hidden {
    display: none;
}

.search-dropdown-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-dropdown-header-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
}

.search-dropdown-header-text {
    font-size: 13px;
    color: var(--text-secondary);
}

.search-dropdown-header-text strong {
    color: var(--text-primary);
}

.search-dropdown-group {
    padding: 8px 0;
    border-bottom: 1px solid var(--border-primary);
}

.search-dropdown-group:last-child {
    border-bottom: none;
}

.search-dropdown-group-header {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-dropdown-group-header svg {
    width: 14px;
    height: 14px;
}

.search-dropdown-client-header {
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 6px;
    margin: 4px 8px;
    padding: 8px 12px;
}

.search-dropdown-client-header:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.search-dropdown-item {
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease;
}

.search-dropdown-item:hover {
    background: var(--bg-secondary);
}

.search-dropdown-item-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-dropdown-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.search-dropdown-item-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
}

.search-dropdown-item-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 10px;
}

.search-dropdown-footer {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    border-radius: 0 0 12px 12px;
}

.search-dropdown-footer kbd {
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    border: 1px solid var(--border-primary);
}

.search-dropdown-advanced {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--accent-teal);
    font-weight: 500;
    transition: all 0.15s ease;
}

.search-dropdown-advanced:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.search-dropdown-advanced svg {
    opacity: 0.7;
}

.search-dropdown-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.search-dropdown-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-dropdown-header-back {
    cursor: pointer;
    transition: background 0.15s ease;
}

.search-dropdown-header-back:hover {
    background: var(--bg-secondary);
}

.search-dropdown-invoice-row {
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.search-dropdown-invoice-row:hover {
    border-left-color: var(--accent-teal);
}

.search-dropdown-item-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.search-invoice-status {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.search-status-draft {
    background: #3a3a3c;
    color: #c7c7cc;
}

.search-status-outstanding {
    background: #1a3a52;
    color: #7cc4fa;
}

.search-status-overdue {
    background: #4a1f1f;
    color: #ff6b6b;
}

.search-status-paid {
    background: #1a3a1f;
    color: #98d89c;
}

.search-status-voided {
    background: #3a3a3c;
    color: #c7c7cc;
}

.search-status-archived {
    background: #3d322c;
    color: #d4b8a8;
}

/* Light mode status labels */
[data-theme="light"] .search-status-draft {
    background: #e8e8ed;
    color: #636366;
}

[data-theme="light"] .search-status-outstanding {
    background: #e3f2fd;
    color: #1976d2;
}

[data-theme="light"] .search-status-overdue {
    background: #ffebee;
    color: #c62828;
}

[data-theme="light"] .search-status-paid {
    background: #e8f5e9;
    color: #2e7d32;
}

[data-theme="light"] .search-status-voided {
    background: #f5f5f5;
    color: #757575;
}

[data-theme="light"] .search-status-archived {
    background: #efebe9;
    color: #5d4037;
}

/* Dark mode adjustments */
[data-theme="dark"] .invoice-search-dropdown {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Advanced Search Modal */
.advanced-search-modal {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.advanced-search-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.advanced-search-modal .modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.advanced-search-modal .modal-body {
    flex: 1;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.advanced-search-filters {
    padding: 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    overflow: visible;
    position: relative;
    z-index: 10;
}

.advanced-search-results {
    flex: 1;
    overflow-y: auto;
    max-height: 400px;
}

.advanced-search-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.advanced-search-row:last-child {
    margin-bottom: 0;
}

.advanced-search-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
    flex: 1;
}

.advanced-search-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Hide number input spinners */
.advanced-search-field input[type="number"]::-webkit-outer-spin-button,
.advanced-search-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.advanced-search-field input[type="number"] {
    -moz-appearance: textfield;
}

/* Advanced Search Validation Errors */
.adv-search-error {
    font-size: 11px;
    color: var(--accent-primary);
    margin-top: 4px;
    min-height: 14px;
}

.adv-search-error:empty {
    display: none;
}

.advanced-search-field.has-error input,
.advanced-search-field.has-error .calendar-trigger {
    border-color: var(--accent-primary);
}

/* Calendar Picker Component */
.calendar-picker {
    position: relative;
    display: inline-block;
}

.calendar-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 180px;
}

.calendar-trigger:hover {
    border-color: var(--accent-teal);
}

.calendar-trigger.active {
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.15);
}

.calendar-trigger-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.calendar-trigger-text {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.calendar-trigger-text.placeholder {
    color: var(--text-muted);
}

.calendar-trigger-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.calendar-trigger.active .calendar-trigger-chevron {
    transform: rotate(180deg);
}

.calendar-picker .calendar-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 1000;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 16px;
    width: 300px;
    display: none;
}

.calendar-picker .calendar-dropdown.open {
    display: block;
}

.calendar-picker .calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.calendar-picker .calendar-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.calendar-picker .calendar-nav-btn:hover {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

.calendar-picker .calendar-nav-btn svg {
    width: 16px;
    height: 16px;
}

.calendar-picker .calendar-month-year {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.calendar-picker .calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.calendar-picker .calendar-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 0;
}

.calendar-picker .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-picker .calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--text-primary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    position: relative;
}

/* Override the existing calendar's today::before */
.calendar-picker .calendar-day.today::before {
    content: none !important;
    display: none !important;
}

[data-theme="dark"] .calendar-picker .calendar-day.today::before {
    content: none !important;
    display: none !important;
}

.calendar-picker .calendar-day:hover {
    background: var(--bg-tertiary);
}

.calendar-picker .calendar-day.other-month {
    color: var(--text-muted);
}

.calendar-picker .calendar-day.today {
    background: var(--bg-tertiary);
    font-weight: 600;
    border: 2px solid var(--accent-teal);
}

.calendar-picker .calendar-day.selected {
    background: var(--accent-teal);
    color: #000;
    font-weight: 600;
    border: none;
}

.calendar-picker .calendar-day.selected:hover {
    background: var(--accent-teal);
}

.calendar-picker .calendar-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-picker .calendar-quick-btns {
    display: flex;
    gap: 8px;
}

.calendar-picker .calendar-quick-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.calendar-picker .calendar-quick-btn:hover {
    border-color: var(--accent-teal);
    color: var(--accent-teal);
}

.calendar-picker .calendar-clear-btn {
    padding: 6px 12px;
    font-size: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.15s ease;
}

.calendar-picker .calendar-clear-btn:hover {
    color: var(--accent-primary);
}

/* Compact calendar picker variant for filter bars */
.calendar-picker--compact .calendar-trigger {
    min-width: 130px;
    padding: 8px 10px;
    gap: 6px;
}

.calendar-picker--compact .calendar-trigger-icon {
    width: 14px;
    height: 14px;
}

.calendar-picker--compact .calendar-trigger-text {
    font-size: 13px;
}

.calendar-picker--compact .calendar-trigger-chevron {
    width: 14px;
    height: 14px;
}

.calendar-picker.has-error .calendar-trigger {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 1px #ff6b6b;
}

.advanced-search-results {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.advanced-search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-primary);
}

.advanced-search-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
}

.advanced-search-select-all label {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.advanced-search-results-count {
    font-size: 13px;
    color: var(--text-muted);
}

.advanced-search-results-list {
    flex: 1;
    overflow-y: auto;
    padding: 0;
    max-height: 400px;
}

.advanced-search-item {
    display: grid;
    grid-template-columns: 32px 140px 1fr 110px 100px 100px 40px;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-primary);
    transition: background 0.15s ease;
}

.advanced-search-item:hover {
    background: var(--bg-secondary);
}

.adv-search-item-number {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
}

.adv-search-item-client {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.adv-search-item-date {
    color: var(--text-muted);
    font-size: 12px;
}

.adv-search-item-amount {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    text-align: right;
}

.adv-search-item-actions {
    display: flex;
    justify-content: flex-end;
}

.advanced-search-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--text-muted);
    font-size: 14px;
}

.advanced-search-bulk-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-primary);
}

.advanced-search-bulk-bar.hidden {
    display: none;
}

.bulk-selected-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.bulk-actions {
    display: flex;
    gap: 8px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.btn-sm svg {
    margin-right: 4px;
}

.btn-danger-text {
    color: var(--error-color);
}

.btn-danger-text:hover {
    background: rgba(244, 67, 54, 0.1);
}

.btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.btn-icon:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Search highlight */
.search-highlight {
    background: rgba(77, 179, 165, 0.25);
    color: inherit;
    padding: 1px 2px;
    border-radius: 2px;
}

[data-theme="dark"] .search-highlight {
    background: rgba(102, 204, 190, 0.3);
}

/* ===== INVOICE LIST SECTIONS ===== */
.invoice-sections-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.invoice-section {
    background: var(--bg-primary);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-secondary);
}

.invoice-section-header {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

.invoice-section-header:hover {
    background: var(--bg-secondary);
}

.invoice-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.invoice-section-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.invoice-section-count {
    font-size: 13px;
    color: var(--text-secondary);
    margin-right: 12px;
    padding: 2px 10px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.invoice-section-chevron {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

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

.invoice-section-content {
    border-top: 1px solid #e5e5ea;
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 1;
}

.invoice-section.collapsed .invoice-section-content {
    max-height: 0;
    opacity: 0;
    border-top: none;
}

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

.invoice-section-table th {
    text-align: left;
    padding: 12px 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
}

.invoice-section-table th:last-child {
    text-align: right;
}

.invoice-section-table td {
    padding: 14px 20px;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid #f5f5f7;
}

.invoice-section-table td:last-child {
    text-align: right;
}

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

.invoice-section-table tr:hover {
    background: var(--bg-secondary);
}

.invoice-section-table tr:focus {
    outline: 2px solid var(--accent-teal);
    outline-offset: -2px;
}

.invoice-section-table tr:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: -2px;
}

[data-theme="dark"] .invoice-section-table tr:focus,
[data-theme="dark"] .invoice-section-table tr:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: -2px;
}

.invoice-section-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Filtered empty state */
.empty-state-filtered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px;
}

.empty-state-filtered-icon {
    color: var(--text-muted);
    opacity: 0.5;
}

.empty-state-filtered-text {
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

.empty-state-filtered-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 4px;
}

.empty-filter-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.empty-state-filtered-reset {
    margin-top: 8px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    color: var(--accent-teal);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.empty-state-filtered-reset:hover {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: white;
}

/* Section variants */
.invoice-section--drafts .invoice-section-icon {
    background: transparent;
    border: 2px solid #f59e0b;
    color: #f59e0b;
}

.invoice-section--outstanding .invoice-section-icon {
    background: transparent;
    border: 2px solid #2196f3;
    color: #2196f3;
}

.invoice-section--overdue .invoice-section-icon {
    background: transparent;
    border: 2px solid #ff3b30;
    color: #ff3b30;
}

.invoice-section--overdue .invoice-section-header {
    background: var(--bg-primary);
}

.invoice-section--overdue .invoice-section-count {
    background: #ff3b30;
    color: #ffffff;
    font-weight: 600;
}

.invoice-section--paid .invoice-section-icon {
    background: transparent;
    border: 2px solid #4caf50;
    color: #4caf50;
}

.invoice-section--voided .invoice-section-icon {
    background: transparent;
    border: 2px solid #e57373;
    color: #e57373;
}

.invoice-section--voided .invoice-section-count {
    background: #e57373;
    color: #ffffff;
    font-weight: 600;
}

.invoice-section--creditNotes .invoice-section-icon {
    background: transparent;
    border: 2px solid #26a69a;
    color: #26a69a;
}

.invoice-section--creditNotes .invoice-section-count {
    background: #26a69a;
    color: #ffffff;
    font-weight: 600;
}

.credit-notes-subsection {
    padding: 0;
}

.credit-notes-subsection-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
}

.credit-notes-subsection-header h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.credit-notes-subsection-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.credit-note-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.credit-note-status--pending {
    background: #fff3e0;
    color: #e65100;
}

.credit-note-status--processed {
    background: #e8f5e9;
    color: #2e7d32;
}

/* Voided Invoice Cards */
/* Voided Table Styles */
.voided-badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--status-void-bg);
    color: var(--status-void-text);
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}

.voided-notified-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--success-bg);
    color: var(--success-text);
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
}

/* =====================================================
   VOIDED INVOICE ROW STYLES
   -----------------------------------------------------
   Visual cues: dashed left border, reduced opacity,
   enhanced hover state with animation
   ===================================================== */
.invoice-section--voided .invoice-section-table tr:not(:first-child) {
    opacity: 0.7;
    border-left: 3px dashed var(--status-void-text);
    transition: all 0.2s ease;
}

.invoice-section--voided .invoice-section-table tr:hover {
    opacity: 1;
    background: var(--status-void-bg);
    transform: translateX(4px);
}

.invoice-section--voided .invoice-section-table tr:focus,
.invoice-section--voided .invoice-section-table tr:focus-visible {
    opacity: 1;
    background: var(--status-void-bg);
}

/* Void reason text with truncation and tooltip */
.void-reason-cell {
    max-width: 200px;
}

.void-reason-truncate {
    display: block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
    position: relative;
}

.void-reason-truncate:hover::after {
    content: attr(data-full-reason);
    position: absolute;
    left: 0;
    top: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    white-space: normal;
    max-width: 280px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    color: var(--text-primary);
}

[data-theme="dark"] .void-reason-truncate:hover::after {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Partial Payment Badge */
.partial-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: #fff3e0;
    color: #e65100;
    margin-left: 8px;
}

[data-theme="dark"] .partial-badge {
    background: #3d2a1a;
    color: #ffb74d;
}

/* Partially Paid Status Badge */
.partially-paid-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    background: #fff3e0;
    color: #e65100;
}

[data-theme="dark"] .partially-paid-badge {
    background: #3d2a1a;
    color: #ffb74d;
}

/* Paused Badge */
.paused-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: #fff3e0;
    color: #e65100;
}

[data-theme="dark"] .paused-badge {
    background: #3d2a1a;
    color: #ffb74d;
}

/* Active Badge */
.active-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: #e8f5e9;
    color: #2e7d32;
}

[data-theme="dark"] .active-badge {
    background: #1a3a1a;
    color: #81c784;
}

/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.status-badge--draft {
    background: #fff9e6;
    color: #f59e0b;
}

[data-theme="dark"] .status-badge--draft {
    background: #3d3a1a;
    color: #ffd54f;
}

.status-badge--sent,
.status-badge--outstanding {
    background: var(--info-bg);
    color: #1976d2;
}

[data-theme="dark"] .status-badge--sent,
[data-theme="dark"] .status-badge--outstanding {
    background: #1a2a3a;
    color: #64d2ff;
}

.status-badge--paid,
.status-badge--archived {
    background: var(--success-bg);
    color: #388e3c;
}

[data-theme="dark"] .status-badge--paid,
[data-theme="dark"] .status-badge--archived {
    background: #1a3a1a;
    color: #81c784;
}

.status-badge--overdue {
    background: var(--error-bg);
    color: #d32f2f;
}

[data-theme="dark"] .status-badge--overdue {
    background: #3a1a1a;
    color: #ff8a80;
}

.status-badge--void {
    background: var(--status-void-bg);
    color: var(--status-void-text);
}

[data-theme="dark"] .status-badge--void {
    background: #3a2a2a;
    color: #ff8a65;
}

.invoice-section--archive .invoice-section-icon {
    background: transparent;
    border: 2px solid #6b7280;
    color: #6b7280;
}

.invoice-section--recurring .invoice-section-icon {
    background: transparent;
    border: 2px solid #9c27b0;
    color: #9c27b0;
}

.invoice-section--recurring .invoice-section-count {
    background: #9c27b0;
    color: #ffffff;
}

.invoice-section--estimates .invoice-section-icon {
    background: transparent;
    border: 2px solid #66ccbe;
    color: #66ccbe;
}

.invoice-section--estimates .invoice-section-count {
    background: #66ccbe;
    color: #1c1c1e;
}

/* Recurring badge */
.recurring-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: #f3e5f5;
    color: #7b1fa2;
}

.recurring-badge svg {
    width: 12px;
    height: 12px;
}

/* Recurring frequency display */
.recurring-frequency {
    font-size: 12px;
    color: var(--text-secondary);
}

/* =====================================================
   DUE DATE AUTO-CALCULATED DISPLAY
   -----------------------------------------------------
   Phoenix: Create as a LiveComponent with:
   - assigns: calculated_date, payment_terms, is_custom
   - handle_event for edit/reset actions
   ===================================================== */
.due-date-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}

.due-date-value {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

#dueDateFormatted {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.due-date-terms {
    font-size: 13px;
    color: var(--text-secondary);
}

.due-date-edit-btn {
    background: none;
    border: none;
    color: var(--accent-teal);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.due-date-edit-btn:hover {
    background: #e0f2f1;
}

[data-theme="dark"] .due-date-edit-btn:hover {
    background: #1a3a38;
}

/* Custom date picker */
.due-date-custom {
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}

.due-date-dropdowns {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.due-date-dropdown-group {
    flex: 1;
}

.due-date-dropdown-group:first-child {
    flex: 0.7;
}

.due-date-dropdown-group:last-child {
    flex: 0.8;
}

.due-date-dropdown-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* Style custom dropdowns within due date picker */
.due-date-dropdown-group .custom-dropdown-trigger {
    padding: 10px 12px;
    font-size: 14px;
}

.due-date-dropdown-group .custom-dropdown-menu {
    max-height: 200px;
}

.due-date-reset-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 0;
    transition: color 0.15s ease;
}

.due-date-reset-btn:hover {
    color: var(--accent-teal);
}

/* Recurring toggle in invoice form */
.recurring-toggle-container {
    margin-top: 24px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-secondary);
}

.recurring-toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.recurring-toggle-label {
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.recurring-toggle-label svg {
    width: 18px;
    height: 18px;
    color: #7b1fa2;
}

[data-theme="dark"] .recurring-toggle-label svg {
    color: #ce93d8;
}

.recurring-toggle-desc {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Recurring toggle switch */
.recurring-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.recurring-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.recurring-toggle-track {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d2d2d7;
    transition: 0.3s;
    border-radius: 28px;
}

.recurring-toggle-thumb {
    position: absolute;
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.recurring-toggle-switch input:checked + .recurring-toggle-track {
    background: linear-gradient(135deg, #9c27b0 0%, #7b1fa2 100%);
}

.recurring-toggle-switch input:checked ~ .recurring-toggle-thumb {
    transform: translateX(22px);
}

[data-theme="dark"] .recurring-toggle-track {
    background-color: #48484a;
}

[data-theme="dark"] .recurring-toggle-switch input:checked + .recurring-toggle-track {
    background: linear-gradient(135deg, #ba68c8 0%, #9c27b0 100%);
}

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

.recurring-options .form-group {
    margin-bottom: 0;
}

/* Stacked layout for recurring options */
.recurring-options-stacked {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.recurring-options-stacked .form-group {
    margin-bottom: 0;
}

/* End date toggle checkbox */
.recurring-end-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px 0;
}

.recurring-end-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.recurring-end-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-primary);
    border-radius: 4px;
    background: var(--bg-primary);
    position: relative;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.recurring-end-toggle:hover .recurring-end-checkbox {
    border-color: var(--accent-teal);
}

.recurring-end-toggle input:checked + .recurring-end-checkbox {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
}

.recurring-end-toggle input:checked + .recurring-end-checkbox::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.recurring-end-toggle input:focus-visible + .recurring-end-checkbox {
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.2);
}

.recurring-end-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* End date picker panel */
.recurring-end-picker {
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}

.recurring-end-picker .due-date-dropdowns {
    margin-bottom: 0;
}

/* Recurring preview box */
.recurring-preview-box {
    padding: 14px 16px;
    background: #f3e5f5;
    border-radius: 8px;
    font-size: 14px;
    color: #7b1fa2;
}

[data-theme="dark"] .recurring-preview-box {
    background: #4a2559;
    color: #ce93d8;
}

/* Recurring end date display - legacy, keeping for reference */
.recurring-end-date-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
}

.recurring-end-date-text {
    font-size: 14px;
    color: var(--text-secondary);
}

.recurring-end-date-text.has-date {
    color: var(--text-primary);
    font-weight: 500;
}

/* ========== DOCUMENT TYPE SELECTOR (Step 1) ========== */
.document-type-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.document-type-card {
    flex: 1;
    min-width: 160px;
    max-width: 220px;
    padding: 16px;
    border-radius: 12px;
    border: 2px solid var(--border-primary);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

.document-type-card:hover {
    border-color: var(--accent-teal);
    background: var(--bg-tertiary);
}

.document-type-card.active {
    border-color: var(--accent-teal);
    background: rgba(102, 204, 190, 0.1);
}

.document-type-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.document-type-card-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    transition: all 0.15s ease;
}

.document-type-card.active .document-type-card-icon {
    background: var(--accent-teal);
    color: #1c1c1e;
}

.document-type-card-icon svg {
    width: 18px;
    height: 18px;
}

.document-type-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.document-type-card-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
}

.document-type-card .info-trigger {
    position: absolute;
    top: 12px;
    right: 12px;
}

/* ========== APPROVAL BUTTONS (Preview) ========== */
.preview-approval-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5ea;
}

.preview-approval-btn {
    padding: 12px 32px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-approval-btn--approve {
    background: #34c759;
    border: none;
    color: white;
}

.preview-approval-btn--approve:hover {
    background: #2db550;
}

.preview-approval-btn--approve-pay {
    background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
    border: none;
    color: white;
}

.preview-approval-btn--approve-pay:hover {
    background: linear-gradient(135deg, #2db550 0%, #28c74f 100%);
}

.preview-approval-btn--decline {
    background: transparent;
    border: 2px solid #ff3b30;
    color: #ff3b30;
}

.preview-approval-btn--decline:hover {
    background: rgba(255, 59, 48, 0.1);
}

.preview-approval-btn svg {
    width: 16px;
    height: 16px;
}

/* ========== ESTIMATE TYPE RADIO (Step 2) - DEPRECATED ========== */
.estimate-type-container {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 12px;
}

.estimate-type-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.estimate-type-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.estimate-type-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: transparent;
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.estimate-type-option:hover {
    border-color: var(--accent-teal);
}

.estimate-type-option.selected {
    background: var(--bg-tertiary);
    border-color: var(--accent-teal);
}

.estimate-type-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.15s ease;
}

.estimate-type-option.selected .estimate-type-radio {
    border-color: var(--accent-teal);
}

.estimate-type-radio-inner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-teal);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.estimate-type-option.selected .estimate-type-radio-inner {
    opacity: 1;
}

.estimate-type-content {
    flex: 1;
}

.estimate-type-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.estimate-type-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Estimate mode info bar */
.estimate-mode-info {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(102, 204, 190, 0.1);
    border-radius: 8px;
    border-left: 3px solid var(--accent-teal);
    font-size: 13px;
    color: var(--text-secondary);
}

.estimate-mode-info strong {
    color: var(--accent-teal);
}

/* ========== ESTIMATES TAB (Invoice List) ========== */
.invoice-tab[data-section="estimates"] svg {
    color: #66ccbe;
}

.tab-count--estimates {
    background: rgba(102, 204, 190, 0.15);
    color: #66ccbe;
}

/* Estimate status badges */
.invoice-status-badge--estimate-draft {
    background: #e0f2f1;
    color: #00897b;
}

.invoice-status-badge--estimate-sent {
    background: #e3f2fd;
    color: #1976d2;
}

.invoice-status-badge--estimate-approved {
    background: var(--success-bg);
    color: var(--success-text);
}

.invoice-status-badge--estimate-declined {
    background: var(--error-bg);
    color: var(--error-text);
}

.invoice-status-badge--estimate-expired {
    background: #f5f5f5;
    color: #9e9e9e;
}

[data-theme="dark"] .invoice-status-badge--estimate-draft {
    background: #1a3a38;
    color: #66ccbe;
}

[data-theme="dark"] .invoice-status-badge--estimate-sent {
    background: #1a2a3a;
    color: #64d2ff;
}

[data-theme="dark"] .invoice-status-badge--estimate-expired {
    background: #2c2c2e;
    color: #8e8e93;
}

/* Invoice row status badges */
.invoice-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
}

.invoice-status-badge--draft {
    background: #f0f0f5;
    color: var(--text-secondary);
}

.invoice-status-badge--outstanding {
    background: var(--info-bg);
    color: var(--info-text);
}

.invoice-status-badge--overdue {
    background: var(--error-bg);
    color: var(--error-text);
}

.invoice-status-badge--paid {
    background: var(--success-bg);
    color: #388e3c;
}

.invoice-status-badge--void {
    background: var(--status-void-bg);
    color: var(--status-void-text);
}

/* Reminder status */
.reminder-status {
    font-size: 12px;
    color: var(--text-secondary);
}

.reminder-status--warning {
    color: var(--warning-text);
}

/* Durable "Last reminded {date}" proof on invoice rows */
.reminder-status.reminded {
    color: var(--accent-teal, #66ccbe);
}

/* Reminder inline feedback: a non-success notice (e.g. nothing sent because the
   clients have no email) shows in amber, no check -- never dressed up as success. */
.settings-save-feedback.reminder-feedback-warning {
    color: var(--accent-amber, #b88300);
}

/* "Email me a copy of this reminder" toggle in the reminder preview modal */
.reminder-copy-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
}

.reminder-copy-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-teal, #66ccbe);
}

/* Days overdue highlight */
.days-overdue {
    color: var(--error-text);
    font-weight: 600;
}

/* =====================================================================
   Shared chat safety warning + Read more / Dismiss modals
   Used by lancer message thread + portal chat modal
   ===================================================================== */

.chat-warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    margin: 0 0 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
}
.chat-warning--teal {
    background: rgba(77, 179, 165, 0.08);
    border: 1px solid rgba(77, 179, 165, 0.35);
    color: var(--text-primary);
}
.chat-warning--teal .chat-warning-icon { color: var(--accent-teal); }
.chat-warning--teal .chat-warning-readmore { color: var(--accent-teal); }
.chat-warning--blue {
    background: #e8f0fe;
    border: 1px solid #9ec1e8;
    color: #1e3a5f;
}
.chat-warning--blue .chat-warning-icon { color: #1e3a5f; }
.chat-warning--blue .chat-warning-readmore { color: #1e3a5f; }

.chat-warning-icon {
    flex-shrink: 0;
    margin-top: 1px;
}
.chat-warning-body {
    flex: 1;
    min-width: 0;
}
.chat-warning-body strong {
    font-weight: 600;
}
.chat-warning-readmore {
    text-decoration: underline;
    font-weight: 600;
    margin-left: 4px;
    cursor: pointer;
}
.chat-warning-readmore:hover {
    text-decoration: none;
}
.chat-warning-close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.chat-warning-close:hover { opacity: 1; }

/* Read more + Dismiss confirmation modals */
.chat-warning-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.chat-warning-modal {
    background: #ffffff;
    color: #1d1d1f;
    border-radius: 14px;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}
.chat-warning-modal--sm {
    max-width: 440px;
}
.chat-warning-modal-header {
    padding: 22px 24px 16px;
    border-bottom: 1px solid #e5e5ea;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.chat-warning-modal-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #1d1d1f;
}
.chat-warning-modal-close {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #6e6e73;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.chat-warning-modal-close:hover { background: #f5f5f7; color: #1d1d1f; }
.chat-warning-modal-body {
    padding: 20px 24px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
    color: #1d1d1f;
}
.chat-warning-modal-body section {
    margin-bottom: 18px;
}
.chat-warning-modal-body section:last-of-type {
    margin-bottom: 0;
}
.chat-warning-modal-body h3 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px;
    color: #1d1d1f;
    letter-spacing: 0.2px;
}
.chat-warning-modal-body p {
    margin: 0 0 4px;
    color: #3c3c43;
}
.chat-warning-modal-body ul {
    margin: 6px 0 0;
    padding-left: 20px;
    color: #3c3c43;
}
.chat-warning-modal-body li {
    margin: 3px 0;
}
.chat-warning-modal-body a {
    color: #1e3a5f;
    text-decoration: underline;
}
.chat-warning-modal-footnote {
    margin-top: 18px !important;
    padding-top: 14px;
    border-top: 1px solid #f0f0f2;
    font-size: 12px;
    color: #6e6e73;
}
.chat-warning-modal-footer {
    padding: 14px 24px 20px;
    border-top: 1px solid #e5e5ea;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.chat-warning-btn {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #d1d1d6;
    background: #ffffff;
    color: #1d1d1f;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.chat-warning-btn:hover { background: #f5f5f7; }
.chat-warning-btn--primary {
    background: #1e3a5f;
    color: #ffffff;
    border-color: #1e3a5f;
}
.chat-warning-btn--primary:hover {
    filter: brightness(1.08);
    background: #1e3a5f;
}

/* =====================================================================
   Lancer invoice list — unified card-style rows (matches client portal
   visual language, adapted to teal lancer theme). Rendered inside
   <tr><td colspan="N"> so existing table DOM + bulk select selectors
   keep working. Column headers (<thead>) are hidden via the
   .invoice-section--card modifier.
   ===================================================================== */

.invoice-section--card .invoice-section-table thead { display: none; }
.invoice-section--card .invoice-section-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}
.invoice-section--card .invoice-section-table tbody tr[data-id] {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-primary);
    cursor: default;
    transition: background 0.15s;
}
.invoice-section--card .invoice-section-table tbody tr[data-id]:last-child {
    border-bottom: none;
}
.invoice-section--card .invoice-section-table tbody tr[data-id]:hover .lancer-inv-row {
    background: var(--bg-hover);
}
.invoice-section--card .invoice-section-table tbody tr[data-id].selected .lancer-inv-row {
    background: rgba(77, 179, 165, 0.08);
}
.invoice-section--card .invoice-section-table tbody td.lancer-inv-cell {
    padding: 0;
    border: none;
}

.lancer-inv-row {
    display: grid;
    grid-template-columns: 32px 1fr 120px 140px 110px 96px auto;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    font-size: 14px;
    transition: background 0.15s;
}

.lancer-inv-row .bulk-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-teal);
}

.lancer-inv-main { min-width: 0; }
.lancer-inv-main .num {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lancer-inv-main .desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.lancer-inv-main .partial-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 1px 6px;
    margin-left: 8px;
    border-radius: 4px;
    background: rgba(245, 158, 11, 0.18);
    color: #f59e0b;
    vertical-align: middle;
    text-transform: uppercase;
}
.lancer-inv-main .days-overdue {
    color: #ef4444;
    font-weight: 600;
    margin-left: 8px;
    font-size: 12px;
}

.lancer-inv-date {
    color: var(--text-tertiary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* #1097: overdue card rows: "Due 14-09-2026 (45d)" is wider than the due
   track (112px at <=1200, 140px above) and was cut off with an ellipsis
   ("(4..."). At every width the days count goes on its own line below the
   (one-line) date. */
.lancer-inv-row .lancer-inv-date .days-overdue {
    display: block;
}

/* #1097: dd-mm-yyyy dates in the list's table rows (Drafts last edited,
   Voided, Recurring next invoice, Archive paid/archived) could break at the
   hyphen ("01-12-" / "2025") in narrow columns. Keep each date on one line;
   the card-row dates above are already nowrap. */
.invoice-section-table td.inv-list-date {
    white-space: nowrap;
}
.lancer-inv-amount {
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
}
.lancer-inv-amount .strikethrough {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 400;
    display: block;
}

.lancer-inv-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
    display: inline-block;
    justify-self: start;
}
.lancer-inv-badge.outstanding { background: rgba(77, 179, 165, 0.18); color: var(--accent-teal); }
.lancer-inv-badge.paid { background: rgba(45, 168, 78, 0.18); color: #2da84e; }
.lancer-inv-badge.overdue { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
.lancer-inv-badge.estimate { background: rgba(77, 179, 165, 0.18); color: var(--accent-teal); }
.lancer-inv-badge.approval { background: rgba(139, 92, 246, 0.18); color: #8b5cf6; }
.lancer-inv-badge.approved { background: rgba(45, 168, 78, 0.18); color: #2da84e; }
.lancer-inv-badge.declined { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
.lancer-inv-badge.draft { background: var(--bg-tertiary); color: var(--text-secondary); }
.lancer-inv-badge.voided { background: var(--bg-tertiary); color: var(--text-muted); text-decoration: line-through; }
.lancer-inv-badge.archived { background: var(--bg-tertiary); color: var(--text-muted); }
.lancer-inv-badge.sent { background: rgba(77, 179, 165, 0.18); color: var(--accent-teal); }

.lancer-inv-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.lancer-inv-icon-btn {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.lancer-inv-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.lancer-inv-icon-btn svg {
    width: 18px;
    height: 18px;
}
.lancer-inv-icon-btn.has-unread::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid var(--bg-primary);
}

.lancer-inv-action-btn {
    padding: 6px 14px;
    border: 1px solid var(--accent-teal);
    background: transparent;
    color: var(--accent-teal);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.lancer-inv-action-btn:hover {
    background: var(--accent-teal);
    color: #fff;
}
.lancer-inv-action-btn.primary {
    background: var(--accent-teal);
    color: #fff;
}
.lancer-inv-action-btn.primary:hover {
    filter: brightness(1.05);
}
.lancer-inv-action-btn.danger {
    border-color: #ef4444;
    color: #ef4444;
}
.lancer-inv-action-btn.danger:hover {
    background: #ef4444;
    color: #fff;
}
.lancer-inv-action-btn.warning {
    border-color: #f59e0b;
    color: #f59e0b;
}
.lancer-inv-action-btn.warning:hover {
    background: #f59e0b;
    color: #fff;
}
.lancer-inv-action-btn.credit {
    border-color: #8b5cf6;
    color: #8b5cf6;
}
.lancer-inv-action-btn.credit:hover {
    background: #8b5cf6;
    color: #fff;
}

/* Responsive: collapse secondary columns on narrow viewports */
@media (max-width: 1399px) {
    /* #1097: hiding the Sent/Reminder dates leaves SIX visible cells
       (checkbox, main, due, amount, badge, actions) but this grid only had
       five tracks, so the actions wrapped onto a second line into the 32px
       checkbox track and Correct / Mark Paid / View ended up off the card's
       left edge. One track per visible cell keeps the actions on the row.
       Owner feedback: tighter here (10px gaps, due-date track sized for
       "Due dd-mm-yyyy") so the whole row fits on one line wherever it can
       (e.g. 1180px), and the action buttons never stack (Mark Paid / View
       side by side). The main column keeps a readable 140px minimum; where
       the row is still wider than the card (phones, tablets, ~1025-1150px
       windows) the card scrolls sideways (see "INVOICE LIST: TABS +
       FILTERS BAR", #1097).
       Owner-approved desktop fix: this compact layout (Sent column hidden)
       now runs up to 1399px. With the old wide grid, Overdue/Paid rows
       (Remind / Credit Note make the buttons ~310px) squeezed the invoice
       number column to 0px and clipped View by ~24px at 1280px. */
    .lancer-inv-row {
        grid-template-columns: 32px minmax(140px, 1fr) 112px 104px 96px auto;
        gap: 10px;
    }

    .lancer-inv-row .lancer-inv-actions {
        flex-wrap: nowrap;
    }

    .lancer-inv-row .lancer-inv-date.sent-date,
    .lancer-inv-row .lancer-inv-date.reminder-col { display: none; }
}

@media (min-width: 1400px) {
    /* #1097: wide screens keep the Sent column, on the same compact tracks
       (10px gaps, 112px "Sent/Due dd-mm-yyyy" dates, 104px amount), so the
       invoice number keeps >=140px and the widest button set fits. */
    .lancer-inv-row {
        grid-template-columns: 32px minmax(140px, 1fr) 112px 112px 104px 96px auto;
        gap: 10px;
    }
}

/* Invoice action buttons */
.invoice-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.invoice-action-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.invoice-action-btn:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

/* Primary action - same as base, teal hover */
.invoice-action-btn--primary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.invoice-action-btn--primary:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

/* Danger action - same base, red hover */
.invoice-action-btn--danger {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.invoice-action-btn--danger:hover {
    background: var(--error-text);
    color: white;
    border-color: var(--error-text);
}

/* Warning action - same base, teal hover */
.invoice-action-btn--warning {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.invoice-action-btn--warning:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

/* Void action - same base, red hover */
.invoice-action-btn--void {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.invoice-action-btn--void:hover {
    background: var(--error-text);
    color: white;
    border-color: var(--error-text);
}

.invoice-action-btn--draft {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
    display: inline-flex;
    align-items: center;
}

.invoice-action-btn--draft:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

[data-theme="dark"] .invoice-action-btn--draft {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-action-btn--draft:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

.invoice-action-btn--draft svg {
    flex-shrink: 0;
}

/* Credit action - same base, teal hover */
.invoice-action-btn--credit {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

.invoice-action-btn--credit:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

/* Pro badge for accountant feature */
.pro-badge {
    display: inline-block;
    padding: 2px 6px;
    background: linear-gradient(135deg, #ff8cd0 0%, #eb0a44 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* Archive search/filter bar */
.archive-toolbar {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
    flex-wrap: wrap;
}

.archive-search {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.archive-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    pointer-events: none;
}

.archive-search input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
}

.archive-search input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(235, 10, 68, 0.1);
}

.archive-filter {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-primary);
    cursor: pointer;
}

.archive-filter:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.archive-filter-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.archive-filter-btn:hover {
    background: var(--bg-secondary);
    border-color: #c2c2c7;
}

.archive-filter-btn:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.archive-filter-btn.active {
    background: #fff0f3;
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.archive-date-range-picker {
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
}

.archive-date-range-picker.hidden {
    display: none;
}

.date-range-inputs {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-input-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.date-input-group input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
}

.date-input-group input[type="date"]:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.btn-sm {
    padding: 8px 12px;
    font-size: 13px;
}

/* Client Filter Modal */
.client-filter-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.client-filter-modal.active {
    opacity: 1;
    visibility: visible;
}

.client-filter-content {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.client-filter-modal.active .client-filter-content {
    transform: scale(1);
}

.client-filter-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.client-filter-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.client-filter-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
}

.client-filter-close:hover {
    color: var(--text-primary);
}

.client-filter-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.client-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.client-filter-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.client-filter-item:hover {
    background: var(--bg-secondary);
}

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

.client-filter-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
}

.client-filter-footer {
    padding: 16px 20px;
    border-top: 1px solid #e5e5ea;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ===== BULK SELECTION ===== */
.bulk-checkbox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.bulk-checkbox:hover {
    border-color: var(--accent-teal);
}

.bulk-checkbox:checked {
    background: var(--bg-tertiary);
    border-color: var(--accent-teal);
}

.bulk-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid var(--accent-teal);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bulk-checkbox:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: 2px;
}

.invoice-section-table th:first-child,
.invoice-section-table td:first-child {
    width: 44px;
    text-align: center;
}

.invoice-section-table tr.selected {
    outline: 2px solid var(--accent-teal);
    outline-offset: -2px;
}

.invoice-section-table tr.selected:hover {
    background: var(--bg-tertiary);
}

/* Bulk Action Bar - Always visible */
.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
}

.bulk-action-bar .selection-count {
    font-size: 14px;
    color: var(--text-secondary);
    margin-right: auto;
}

.bulk-action-bar .selection-count strong {
    color: var(--text-primary);
    font-weight: 600;
}

.bulk-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    cursor: not-allowed;
    background: transparent;
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.bulk-action-btn.enabled {
    cursor: pointer;
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.bulk-action-btn.enabled:hover {
    background: var(--accent-teal);
    color: white;
}

.bulk-action-btn--danger.enabled:hover {
    background: var(--accent-primary);
    color: white;
}

.bulk-deselect-link {
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    cursor: not-allowed;
    margin-left: 8px;
    padding: 8px 0;
    transition: all 0.15s ease;
}

.bulk-deselect-link.enabled {
    cursor: pointer;
    color: var(--text-secondary);
}

.bulk-deselect-link.enabled:hover {
    color: var(--text-primary);
    text-decoration: underline;
}

/* Confirmation Modal with "Don't show today" */
.confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.confirm-modal.active {
    opacity: 1;
    visibility: visible;
}

.confirm-modal-content {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 400px;
    padding: 24px;
    text-align: center;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.confirm-modal.active .confirm-modal-content {
    transform: scale(1);
}

.confirm-modal-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.confirm-modal-icon--warning {
    background: var(--error-bg);
}

.confirm-modal-icon--warning svg {
    color: var(--error-text);
}

.confirm-modal h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.confirm-modal p {
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.confirm-modal-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary);
}

.confirm-modal-checkbox input {
    accent-color: var(--accent-primary);
}

.confirm-modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* ===== PAYMENT MODAL STYLES ===== */
.payment-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.payment-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Cascade overlay - transparent background for stacked modals */
.payment-modal-overlay.cascade-overlay {
    background: transparent;
    pointer-events: none;
}

.payment-modal-overlay.cascade-overlay .payment-modal {
    pointer-events: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.payment-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    border: 1px solid var(--border-secondary);
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s ease;
}

.payment-modal-overlay.active .payment-modal {
    transform: scale(1) translateY(0);
}

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

.payment-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.payment-modal-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] .payment-modal-close {
    border: 1px solid #636366;
}

.payment-modal-body {
    padding: 24px;
    overflow-y: auto;
    max-height: calc(90vh - 140px);
}

.payment-modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-secondary);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.payment-invoice-summary {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.payment-invoice-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.payment-invoice-client {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.payment-invoice-amounts {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.payment-amount-item {
    text-align: center;
}

.payment-amount-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.payment-amount-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-amount-value.remaining {
    color: var(--warning-text);
}

.payment-amount-value.paid {
    color: var(--success-text);
}

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

.payment-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.payment-form-group input,
.payment-form-group select,
.payment-form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 15px;
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.payment-form-group input:focus,
.payment-form-group select:focus,
.payment-form-group textarea:focus {
    outline: none;
    border-color: #66ccbe;
    box-shadow: 0 0 0 3px rgba(102, 204, 190, 0.25);
}

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

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

.payment-quick-amounts {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.payment-quick-amount {
    padding: 6px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-quick-amount:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.payment-quick-amount.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

.payment-remaining-notice {
    background: var(--warning-bg);
    color: var(--warning-text);
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 12px;
    display: none;
}

.payment-remaining-notice.visible {
    display: block;
}

/* Payment History Styles */
.payment-history {
    margin-top: 20px;
    border-top: 1px solid var(--border-secondary);
    padding-top: 20px;
}

.payment-history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.payment-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payment-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.payment-history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.payment-history-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.payment-history-method {
    font-size: 12px;
    color: var(--text-secondary);
}

.payment-history-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--success-text);
}

/* Credit Notes Section in Invoice Detail */
.credit-notes-history {
    margin-top: 20px;
    border-top: 1px solid var(--border-secondary);
    padding-top: 20px;
}

.credit-notes-history-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.credit-notes-history-title svg {
    width: 16px;
    height: 16px;
    color: var(--warning-text);
}

.credit-notes-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.credit-note-history-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--warning-bg);
    border-radius: 8px;
    border: 1px solid var(--warning-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.credit-note-history-item:hover {
    background: var(--bg-tertiary);
}

.credit-note-history-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.credit-note-history-number {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.credit-note-history-meta {
    font-size: 12px;
    color: var(--text-secondary);
}

.credit-note-history-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--warning-text);
}

/* Credited badge for invoice list */
.status-badge.credited-badge {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.status-badge.partially-credited-badge {
    background: var(--warning-bg);
    color: var(--warning-text);
}

/* Invoice Detail Modal Styles */
.invoice-detail-modal {
    max-width: 640px;
}

.invoice-detail-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
}

.invoice-detail-title-group h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.invoice-detail-client {
    font-size: 15px;
    color: var(--text-secondary);
}

.invoice-detail-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.invoice-detail-status.draft {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.invoice-detail-status.outstanding {
    background: var(--info-bg);
    color: var(--info-text);
}

.invoice-detail-status.overdue {
    background: var(--error-bg);
    color: var(--error-text);
}

.invoice-detail-status.paid {
    background: var(--success-bg);
    color: var(--success-text);
}

/* Approval Gates Phase 3: approved estimate ("Accepted") / approved bill ("Approved").
   A positive milestone; the label text distinguishes it from "Paid". */
.invoice-detail-status.approved {
    background: var(--success-bg);
    color: var(--success-text);
}

.invoice-detail-status.void {
    background: var(--status-void-bg);
    color: var(--status-void-text);
}

/* Voided Invoice Detail Styling */
.voided-invoice-detail {
    border: 2px dashed var(--status-void-text);
}

.invoice-detail-void-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--status-void-bg);
    color: var(--status-void-text);
    font-weight: 500;
    font-size: 14px;
}

.invoice-detail-void-info {
    background: var(--status-void-bg);
    border: 1px solid var(--status-void-text);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.invoice-detail-void-reason {
    margin-bottom: 12px;
}

.void-reason-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--status-void-text);
    margin-bottom: 4px;
}

.void-reason-text {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

.invoice-detail-void-meta {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
}

.voided-amount {
    text-decoration: line-through;
    opacity: 0.6;
}

.invoice-detail-status.partial {
    background: var(--warning-bg);
    color: var(--warning-text);
}

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

.invoice-detail-item {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 10px;
}

.invoice-detail-label {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.invoice-detail-value {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
}

.invoice-detail-value.large {
    font-size: 24px;
    font-weight: 600;
}

.invoice-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--border-secondary);
}

.invoice-detail-action {
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.invoice-detail-action.primary {
    background: var(--accent-primary);
    color: white;
}

.invoice-detail-action.primary:hover {
    opacity: 0.9;
}

.invoice-detail-action.secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

.invoice-detail-action.secondary:hover {
    background: var(--bg-tertiary);
}

.invoice-detail-action svg {
    width: 16px;
    height: 16px;
}

.invoice-detail-action.void-action {
    color: var(--status-void-text);
}

.invoice-detail-action.void-action:hover {
    background: var(--status-void-bg);
}

.invoice-detail-action.draft-action {
    color: var(--accent-primary);
    background: var(--accent-secondary);
}

.invoice-detail-action.draft-action:hover {
    background: var(--accent-primary);
    color: white;
}

[data-theme="dark"] .invoice-detail-action.draft-action {
    color: #4dd0c4;
    background: #1a3a38;
}

[data-theme="dark"] .invoice-detail-action.draft-action:hover {
    background: #26a69a;
    color: white;
}

/* ===== INVOICE HISTORY MODAL ===== */
.history-invoice-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-primary);
}

.history-invoice-number {
    font-weight: 600;
    color: var(--text-primary);
}

.history-invoice-client {
    color: var(--text-secondary);
}

.history-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.history-entry {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-primary);
}

.history-entry:last-child {
    border-bottom: none;
}

.history-entry--latest {
    background: var(--bg-secondary);
    margin: 0 -20px;
    padding: 12px 20px;
    border-radius: 8px;
    border-bottom: none;
}

.history-entry-icon {
    width: 32px;
    height: 32px;
    min-width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 8px;
    color: var(--text-muted);
}

.history-entry-icon svg {
    width: 16px;
    height: 16px;
}

.history-entry--latest .history-entry-icon {
    background: var(--accent-teal);
    color: white;
}

.history-entry-content {
    flex: 1;
}

.history-entry-action {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.history-entry-meta {
    font-size: 12px;
    color: var(--text-muted);
}

.history-entry-detail {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text-secondary);
}

.history-empty {
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
}

/* ===== INVOICE SHOW PAGE LAYOUT ===== */
/* Source: new layout styles for /invoices/:id full page view */

.invoice-show-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 12px;
    transition: color 0.2s ease;
}

.invoice-show-back:hover {
    color: var(--accent-teal);
}

.invoice-show-back svg {
    width: 16px;
    height: 16px;
}

.invoice-show-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.invoice-show-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    margin-top: 24px;
}

.invoice-show-preview {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.invoice-show-iframe {
    width: 100%;
    min-height: 900px;
    max-width: 800px;
    background: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.invoice-show-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.invoice-show-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-primary);
}

/* Responsive: stack at 1024px */
@media (max-width: 1024px) {
    .invoice-show-layout {
        grid-template-columns: 1fr;
    }

    .invoice-show-iframe {
        min-height: 700px;
    }

    .invoice-show-sidebar {
        order: -1;
    }
}

/* ===== VOID INVOICE MODAL STYLES ===== */
.void-modal {
    max-width: 520px;
}

.void-modal-step {
    display: none;
}

.void-modal-step.active {
    display: block;
}

/* Void Title with Help Tooltip */
.void-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.void-help-tooltip {
    position: relative;
    cursor: help;
    color: var(--text-muted);
    display: flex;
    align-items: center;
}

.void-help-tooltip:hover,
.void-help-tooltip:focus {
    color: var(--text-secondary);
}

.void-help-tooltip-content {
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%);
    width: 280px;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    z-index: 100;
}

.void-help-tooltip-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.void-help-tooltip:hover .void-help-tooltip-content,
.void-help-tooltip:focus .void-help-tooltip-content {
    opacity: 1;
    visibility: visible;
}

.void-help-tooltip-content a {
    display: inline-block;
    margin-top: 4px;
}

.void-help-tooltip-content a:hover {
    opacity: 0.8;
}

[data-theme="dark"] .void-help-tooltip-content a {
    color: var(--accent-teal) !important;
}

.section-help-tooltip {
    cursor: pointer;
}

.section-help-tooltip .void-help-tooltip-content em {
    color: var(--accent-primary);
    font-style: normal;
    font-size: 11px;
}

[data-theme="dark"] .section-help-tooltip .void-help-tooltip-content em {
    color: var(--accent-teal);
}

/* Void Subtitle */
.void-subtitle {
    padding: 0 24px 16px;
    font-size: 13px;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: 0;
}

/* First-time Explainer */
.void-first-time-explainer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--info-bg);
    border: 1px solid var(--info-text);
    border-radius: 8px;
    margin-bottom: 20px;
}

.void-explainer-icon {
    flex-shrink: 0;
    color: var(--info-text);
}

.void-explainer-content {
    flex: 1;
}

.void-explainer-content strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.void-explainer-content p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.void-explainer-dismiss {
    flex-shrink: 0;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--info-text);
    border-radius: 4px;
    color: var(--info-text);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.void-explainer-dismiss:hover {
    background: var(--info-text);
    color: white;
}

/* Learn More Collapsible */
.void-learn-more {
    margin-bottom: 20px;
}

.void-learn-more-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 8px 0;
    color: var(--accent-primary);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.15s ease;
}

.void-learn-more-toggle:hover {
    color: var(--accent-secondary);
}

.void-learn-more-icon {
    transition: transform 0.2s ease;
}

.void-learn-more.expanded .void-learn-more-icon {
    transform: rotate(90deg);
}

.void-learn-more-content {
    display: none;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-top: 8px;
}

.void-learn-more.expanded .void-learn-more-content {
    display: block;
}

.void-learn-more-section {
    margin-bottom: 12px;
}

.void-learn-more-section:last-child {
    margin-bottom: 0;
}

.void-learn-more-section strong {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.void-learn-more-section ul {
    margin: 0;
    padding-left: 18px;
}

.void-learn-more-section li {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.void-learn-more-section li:last-child {
    margin-bottom: 0;
}

.void-modal-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 24px 20px;
}

.void-modal-progress-step {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    transition: all 0.25s ease;
}

.void-modal-progress-step.active {
    width: 24px;
    border-radius: 4px;
    background: var(--accent-primary);
}

.void-modal-progress-step.completed {
    background: var(--accent-primary);
}

.void-modal-progress-step.clickable {
    cursor: pointer;
}

.void-modal-progress-step.clickable:hover {
    opacity: 0.8;
}

/* ===== CUSTOM DROPDOWN COMPONENT (Style B - With Icons) ===== */
/*
 * USAGE GUIDE FOR FUTURE DROPDOWNS:
 * 1. Use createCustomDropdown() utility function
 * 2. For dropdowns with semantic options (void reasons, status), include icons
 * 3. For data-driven dropdowns (months, clients), icons are optional
 * 4. Always test in both light and dark modes
 * 5. Ensure contrast ratio meets WCAG AA (3:1 for UI, 4.5:1 for text)
 */

.custom-dropdown {
    position: relative;
    width: 100%;
}

.custom-dropdown-trigger {
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.custom-dropdown-trigger:hover {
    border-color: #26a69a;
}

.custom-dropdown-trigger:focus {
    outline: none;
    border-color: #26a69a;
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.15);
}

[data-theme="dark"] .custom-dropdown-trigger:hover {
    border-color: #4dd0c4;
}

[data-theme="dark"] .custom-dropdown-trigger:focus {
    border-color: #4dd0c4;
    box-shadow: 0 0 0 3px rgba(77, 208, 196, 0.2);
}

.custom-dropdown-trigger .dropdown-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.custom-dropdown-trigger .dropdown-icon.has-value {
    color: var(--accent-primary);
}

.custom-dropdown-trigger .dropdown-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-dropdown-trigger .dropdown-text.placeholder {
    color: var(--text-muted);
}

.custom-dropdown-trigger .dropdown-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.custom-dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
}

.custom-dropdown.open .custom-dropdown-trigger {
    border-color: #26a69a;
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.15);
}

[data-theme="dark"] .custom-dropdown.open .custom-dropdown-trigger {
    border-color: #4dd0c4;
    box-shadow: 0 0 0 3px rgba(77, 208, 196, 0.2);
}

/* Rate dropdown in line items needs higher z-index */
.rate-dropdown-container .custom-dropdown-menu {
    z-index: 9999;
}

/* Line item row styling */
.line-item-row {
    border-bottom: 1px solid var(--border-secondary);
}

.line-item-row:hover {
    background: var(--bg-secondary);
}

/* Remove spinner arrows from number inputs for money */
.rate-input::-webkit-outer-spin-button,
.rate-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.rate-input[type=number] {
    -moz-appearance: textfield;
}

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 1000;
    padding: 6px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    max-height: 280px;
    overflow-y: auto;
}

/* Searchable dropdowns need more width */
.custom-dropdown.searchable .custom-dropdown-menu {
    min-width: 280px;
    right: auto;
}

.custom-dropdown.open .custom-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-dropdown-option {
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.1s;
}

.custom-dropdown-option .option-icon {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.custom-dropdown-option .option-text {
    flex: 1;
}

.custom-dropdown-option .option-check {
    width: 16px;
    height: 16px;
    color: var(--accent-primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s;
}

.custom-dropdown-option:hover {
    background: var(--bg-secondary);
}

/* Keyboard highlight (arrow-key navigation) — mirror the hover affordance with a ring */
.custom-dropdown-option.active {
    background: var(--bg-secondary);
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

.custom-dropdown-option.selected {
    background: var(--bg-secondary);
}

.custom-dropdown-option.selected .option-icon {
    color: var(--accent-primary);
}

.custom-dropdown-option.selected .option-check {
    opacity: 1;
}

.custom-dropdown-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.custom-dropdown-option.disabled:hover {
    background: transparent;
}

/* Dropdown divider */
.custom-dropdown-divider {
    height: 1px;
    background: var(--border-secondary);
    margin: 6px 0;
}

/* =====================================================
   DROPDOWN OPTGROUP STYLES
   -----------------------------------------------------
   Phoenix/LiveView: These styles apply to group headers
   in dropdowns. In LiveView, render as:
   <div class="custom-dropdown-group"><%= group.label %></div>
   ===================================================== */
.custom-dropdown-group {
    padding: 10px 12px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
    user-select: none;
}

.custom-dropdown-group:not(:first-child) {
    margin-top: 6px;
    border-top: 1px solid var(--border-primary);
    padding-top: 12px;
}

/* Dropdown with search */
.custom-dropdown-search {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-secondary);
    margin-bottom: 6px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-dropdown-search input {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
}

.custom-dropdown-search input:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 2px rgba(77, 179, 165, 0.15);
}

[data-theme="dark"] .custom-dropdown-search input:focus {
    box-shadow: 0 0 0 2px rgba(102, 204, 190, 0.2);
}

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

.custom-dropdown-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.custom-dropdown-search-clear:hover {
    background: var(--accent-primary);
    color: white;
}

.custom-dropdown-search-clear svg {
    width: 12px;
    height: 12px;
}

/* Empty state */
.custom-dropdown-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
}

/* Legacy support - hide native selects when custom dropdown is used */
.void-reason-select {
    display: none;
}

.void-reason-other {
    display: none;
    margin-bottom: 16px;
}

.void-reason-other.visible {
    display: block;
}

.void-reason-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    min-height: 80px;
    resize: vertical;
    font-family: inherit;
}

.void-reason-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}

.void-char-count {
    font-size: 12px;
    color: var(--text-muted);
    text-align: right;
    margin-top: 4px;
}

.void-notify-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.void-notify-option input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
}

.void-notify-label {
    flex: 1;
}

.void-notify-label strong {
    display: block;
    margin-bottom: 4px;
    color: var(--text-primary);
}

.void-notify-label span {
    font-size: 13px;
    color: var(--text-secondary);
}

.void-paid-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--warning-bg);
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 3px solid var(--warning-text);
}

.void-paid-warning svg {
    flex-shrink: 0;
    color: var(--warning-text);
}

.void-paid-warning-text {
    flex: 1;
}

.void-paid-warning-text strong {
    display: block;
    color: var(--warning-text);
    margin-bottom: 4px;
}

.void-paid-warning-text span {
    font-size: 13px;
    color: var(--text-secondary);
}

.void-credit-note-option {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.void-credit-note-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.void-credit-note-option label {
    font-size: 14px;
    color: var(--text-primary);
}

/* Credit Note Inline Tooltip */
.cn-tooltip-trigger {
    position: relative;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
    cursor: help;
    color: inherit;
}

.cn-tooltip-content {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: 260px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    z-index: 100;
    text-decoration: none;
}

.cn-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--border-primary);
}

.cn-tooltip-trigger:hover .cn-tooltip-content,
.cn-tooltip-trigger:focus .cn-tooltip-content {
    opacity: 1;
    visibility: visible;
}

[data-theme="dark"] .cn-tooltip-content {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.void-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
}

.void-error-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-top: 16px;
    background: var(--error-bg);
    border: 1px solid var(--error-border);
    border-radius: 8px;
}

.void-error-icon {
    flex-shrink: 0;
    color: var(--error-text);
}

.void-error-content {
    flex: 1;
}

.void-error-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--error-text);
    margin-bottom: 4px;
}

.void-error-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.void-error-retry {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    font-size: 13px !important;
}

/* Email Bounce Warning */
.void-email-bounce-warning {
    display: flex;
    gap: 12px;
    padding: 16px;
    margin: 16px 0;
    background: var(--warning-bg);
    border: 1px solid var(--warning-text);
    border-radius: 8px;
    text-align: left;
}

.void-bounce-icon {
    flex-shrink: 0;
    color: var(--warning-text);
}

.void-bounce-content {
    flex: 1;
}

.void-bounce-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.void-bounce-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 8px;
}

.void-bounce-link {
    font-size: 13px;
    color: var(--accent-primary);
    text-decoration: underline;
}

.void-bounce-link:hover {
    text-decoration: none;
}

/* Draft Restore Prompt */
.draft-restore-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--info-bg, #e3f2fd);
    border: 1px solid var(--info-border, #64b5f6);
    border-radius: 8px;
    font-size: 13px;
}

[data-theme="dark"] .draft-restore-prompt,
.dark-mode .draft-restore-prompt {
    background: #1a2a3a;
    border-color: #4a9eff;
}

.draft-restore-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
}

.draft-restore-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.draft-restore-text {
    color: var(--text-secondary);
}

.draft-restore-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.draft-restore-btn,
.draft-discard-btn {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background 0.15s ease;
}

.draft-restore-btn {
    background: var(--accent-primary);
    color: white;
}

.draft-restore-btn:hover {
    filter: brightness(1.1);
}

.draft-discard-btn {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-primary);
}

.draft-discard-btn:hover {
    background: var(--bg-secondary);
}

/* Unsaved Changes Warning */
.unsaved-changes-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10004;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.unsaved-changes-overlay.active {
    opacity: 1;
}

.unsaved-changes-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.unsaved-changes-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--warning-bg);
    color: var(--warning-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.unsaved-changes-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.unsaved-changes-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.unsaved-changes-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.unsaved-changes-actions .btn {
    padding: 10px 16px;
    font-size: 13px;
}

/* Email Autocomplete */
.void-email-autocomplete {
    position: absolute;
    top: 100%;
    left: 60px;
    right: 30px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 150px;
    overflow-y: auto;
    z-index: 100;
}

.void-email-autocomplete-item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-secondary);
}

.void-email-autocomplete-item:last-child {
    border-bottom: none;
}

.void-email-autocomplete-item:hover,
.void-email-autocomplete-item.selected {
    background: var(--bg-secondary);
}

.void-email-autocomplete-name {
    font-weight: 500;
}

.void-email-autocomplete-email {
    color: var(--text-muted);
    margin-left: 8px;
}

.void-modal-actions .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.1s ease, background 0.1s ease;
    transform: scale(1);
}

.void-modal-actions .btn:hover {
    transform: scale(1.02);
}

.void-modal-actions .btn:active {
    transform: scale(0.96);
}

.void-modal-actions .btn-cancel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.void-modal-actions .btn-cancel:hover {
    background: var(--bg-tertiary);
}

.void-modal-actions .btn-cancel:active {
    background: var(--bg-tertiary);
}

.void-modal-actions .btn-void {
    background: #26a69a;
    border: none;
    color: white;
}

[data-theme="dark"] .void-modal-actions .btn-void {
    background: #4db6ac;
}

.void-modal-actions .btn-void:hover {
    filter: brightness(1.1);
}

.void-modal-actions .btn-void:active {
    filter: brightness(0.95);
}

.void-modal-actions .btn-void.loading {
    pointer-events: none;
    opacity: 0.8;
}

.void-modal-actions .btn-void .btn-spinner {
    animation: btn-spin 0.8s linear infinite;
}

@keyframes btn-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.void-modal-actions .btn-primary {
    background: var(--accent-primary);
    border: none;
    color: white;
}

.void-modal-actions .btn-primary:hover {
    filter: brightness(1.1);
}

.void-modal-actions .btn-primary:active {
    filter: brightness(0.95);
}

/* Email Preview Step */
.void-email-preview {
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bg-primary);
}

.void-email-header {
    padding: 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
}

.void-email-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
}

.void-email-row:last-child {
    margin-bottom: 0;
}

.void-email-label {
    color: var(--text-muted);
    min-width: 60px;
}

.void-email-value {
    color: var(--text-primary);
    font-weight: 500;
}

.void-email-body {
    padding: 24px;
    background: #ffffff;
    color: #1d1d1f;
}

.void-email-badge {
    display: inline-block;
    padding: 4px 12px;
    background: #fbe9e7;
    color: #e57373;
    font-weight: 600;
    font-size: 12px;
    border-radius: 4px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.void-email-amount {
    font-size: 24px;
    font-weight: 600;
    color: #86868b;
    text-decoration: line-through;
    margin-bottom: 16px;
}

.void-email-message {
    font-size: 14px;
    color: #48484a;
    line-height: 1.6;
    margin-bottom: 16px;
}

.void-email-reason {
    padding: 12px;
    background: #f5f5f7;
    border-radius: 6px;
    margin-bottom: 16px;
}

.void-email-reason-label {
    font-size: 12px;
    color: #86868b;
    margin-bottom: 4px;
}

.void-email-reason-text {
    font-size: 14px;
    color: #1d1d1f;
}

.void-email-support {
    font-size: 13px;
    color: #48484a;
}

.void-email-support a {
    color: #26a69a;
    text-decoration: none;
}

.void-email-support a:hover {
    text-decoration: underline;
}

.void-email-body[contenteditable="true"] {
    background: #ffffff;
    color: #1d1d1f;
    outline: none;
    cursor: text;
    transition: box-shadow 0.15s ease;
}

.void-email-body[contenteditable="true"]:focus {
    box-shadow: inset 0 0 0 2px var(--accent-primary);
}

.void-email-logo {
    margin-bottom: 24px;
}

.void-email-invoice-box {
    background: #f5f5f7;
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.void-email-invoice-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #e8e8ed;
    font-size: 14px;
}

.void-email-invoice-row:last-child {
    border-bottom: none;
}

.void-email-invoice-label {
    color: #86868b;
}

.void-email-invoice-value {
    color: #1d1d1f;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.void-email-inline-badge {
    display: inline-block;
    padding: 2px 6px;
    background: #fbe9e7;
    color: #e57373;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    text-transform: uppercase;
}

.void-email-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e8e8ed;
    text-align: center;
}

/* Save Template Toast - positioned near message */
.save-template-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    background: #1d1d1f;
    color: #ffffff;
    padding: 20px 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    font-size: 15px;
    font-weight: 500;
    z-index: 10001;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.save-template-toast.show {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.save-template-toast-actions {
    display: flex;
    gap: 12px;
}

.save-template-toast-btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.save-template-toast-btn:hover {
    background: rgba(255, 255, 255, 0.25);
}

.save-template-toast-btn:active {
    transform: scale(0.96);
}

.save-template-toast-btn--primary {
    background: #26a69a;
    color: #ffffff;
}

.save-template-toast-btn--primary:hover {
    background: #2bbbad;
}

/* Void Email Template Dropdown */
.void-email-template-select select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.void-email-template-select select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.void-email-template-select select option {
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 8px;
}

/* Credit Note Request Button */
.credit-note-request-btn:hover {
    transform: scale(1.02);
    filter: brightness(1.1);
}

.credit-note-request-btn:active {
    transform: scale(0.96);
    filter: brightness(0.95);
}

/* Credit Note Confirmation Modal */
.cn-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.cn-confirm-overlay.active {
    opacity: 1;
}

.cn-confirm-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.cn-confirm-overlay.active .cn-confirm-modal {
    transform: scale(1);
}

.cn-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.cn-confirm-message {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.cn-confirm-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 20px;
    cursor: pointer;
}

.cn-confirm-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-primary);
}

.cn-confirm-checkbox label {
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.cn-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.cn-confirm-actions .btn {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.1s ease, filter 0.1s ease, background 0.1s ease;
    transform: scale(1);
}

.cn-confirm-actions .btn:hover {
    transform: scale(1.02);
}

.cn-confirm-actions .btn:active {
    transform: scale(0.96);
}

.cn-confirm-actions .btn-cancel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.cn-confirm-actions .btn-cancel:hover {
    background: var(--bg-tertiary);
}

.cn-confirm-actions .btn-confirm {
    background: #26a69a;
    border: none;
    color: white;
}

[data-theme="dark"] .cn-confirm-actions .btn-confirm {
    background: #4db6ac;
}

.cn-confirm-actions .btn-confirm:hover {
    filter: brightness(1.1);
}

.cn-confirm-actions .btn-confirm:active {
    filter: brightness(0.95);
}

/* Success Step */
.void-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: var(--success-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.void-success-icon svg {
    width: 32px;
    height: 32px;
    color: var(--success-text);
}

.void-success-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.void-success-message {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.void-success-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.void-success-actions .btn {
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s ease, filter 0.1s ease, background 0.1s ease;
    transform: scale(1);
}

.void-success-actions .btn:hover {
    transform: scale(1.02);
}

.void-success-actions .btn:active {
    transform: scale(0.96);
}

.void-success-actions .btn svg {
    width: 16px;
    height: 16px;
}

.void-success-actions .btn-primary {
    background: var(--accent-primary);
    border: none;
    color: white;
}

.void-success-actions .btn-primary:hover {
    filter: brightness(1.1);
}

.void-success-actions .btn-primary:active {
    filter: brightness(0.95);
}

.void-success-actions .btn-secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.void-success-actions .btn-secondary:hover {
    background: var(--bg-tertiary);
}

.void-success-actions .btn-secondary:active {
    background: var(--bg-tertiary);
}

.void-success-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.void-success-close:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.void-success-close svg {
    width: 20px;
    height: 20px;
}

/* Void Undo Section */
.void-undo-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-text);
    border-radius: 8px;
    margin-bottom: 20px;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.void-undo-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--warning-text);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.void-undo-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
}

.void-undo-btn:active {
    transform: scale(0.98);
}

.void-undo-timer {
    font-size: 13px;
    color: var(--warning-text);
    font-weight: 500;
}

.void-undo-timer span {
    font-family: monospace;
    font-size: 14px;
}

/* Made a Mistake Section */
.void-mistake-section {
    text-align: center;
    margin-bottom: 20px;
}

.void-mistake-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 13px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.void-mistake-toggle:hover {
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.void-mistake-content {
    display: none;
    text-align: left;
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.void-mistake-content.visible {
    display: block;
}

.void-mistake-content p {
    margin: 0 0 10px 0;
}

.void-mistake-content ul {
    margin: 0;
    padding-left: 20px;
}

.void-mistake-content li {
    margin-bottom: 6px;
}

.void-mistake-content li:last-child {
    margin-bottom: 0;
}

.void-mistake-content strong {
    color: var(--text-primary);
}

/* Void Close Warning Modal */
.void-close-warning-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10003;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.void-close-warning-overlay.active {
    opacity: 1;
}

.void-close-warning-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.void-close-warning-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--warning-bg);
    color: var(--warning-text);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.void-close-warning-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.void-close-warning-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.5;
}

.void-close-warning-actions {
    display: flex;
    gap: 12px;
}

.void-close-warning-actions .btn {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.void-close-warning-actions .btn-secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.void-close-warning-actions .btn-secondary:hover {
    background: var(--bg-tertiary);
}

.void-close-warning-actions .btn-danger {
    background: var(--error-text);
    border: none;
    color: white;
}

.void-close-warning-actions .btn-danger:hover {
    filter: brightness(1.1);
}

/* ===== CREDIT NOTE REQUESTS MODAL STYLES ===== */
.cn-requests-modal {
    max-width: 700px;
}

.cn-requests-modal .payment-modal-body {
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.cn-requests-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-secondary);
    padding: 0 24px;
    gap: 4px;
}

.cn-requests-tab {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

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

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

.cn-requests-tab-count {
    background: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.cn-requests-tab-content {
    display: none;
}

.cn-requests-tab-content.active {
    display: block;
}

.cn-request-item--dismissed {
    background: var(--bg-tertiary);
    border-style: dashed;
}

.cn-request-item--dismissed:hover {
    border-color: var(--border-secondary);
    transform: translateY(-1px);
}

[data-theme="dark"] .cn-request-item--dismissed {
    background: #333335;
}

.cn-request-item--dismissed .cn-request-invoice {
    color: var(--text-secondary);
}

.cn-request-item--dismissed .cn-request-amount {
    color: var(--text-secondary);
}

.cn-request-item--dismissed .cn-request-actions {
    flex-wrap: wrap;
}

/* Archived cards: white background + subtle left accent stripe instead of
   the old grey-on-grey slab. Matches the invoice list row aesthetic and
   reads cleanly in both light + dark modes. The :--approved variant
   (green left border) still wins for "issued" archives; this is the
   default for rejected-then-archived. */
.cn-request-item--archived {
    background: var(--bg-primary);
    border-color: var(--border-primary);
    border-left: 3px solid var(--border-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .cn-request-item--archived {
    background: var(--bg-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.cn-request-item--archived:hover {
    transform: translateY(-1px);
}

[data-theme="dark"] .cn-request-item--archived {
    background: #2a2a2c;
}

.cn-request-item--archived .cn-request-invoice {
    color: var(--text-muted);
}

.cn-request-item--archived .cn-request-amount {
    color: var(--text-muted);
}

.cn-request-item--archived .cn-request-actions {
    flex-wrap: wrap;
}

.btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

.btn-danger {
    background: #ff3b30;
    color: white;
    border: none;
}

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

[data-theme="dark"] .btn-danger {
    background: #ff3b30;
    color: white;
}

[data-theme="dark"] .btn-danger:hover {
    background: #ff5147;
}

.cn-requests-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.cn-requests-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
    color: var(--accent-teal);
}

.cn-requests-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.cn-requests-empty p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 280px;
    margin: 0 auto;
}

/* Credit Note Request Item - Card Style */
.cn-request-item {
    margin: 16px 24px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    scroll-margin-top: 80px;
}

/* Deep-link highlight: when the URL hash targets a specific row, pulse a
   teal ring to draw the eye to it. Fades out after the animation.
   `:target` handles the native anchor-scroll case; the `--deep-link-hit`
   class handles the deferred case (row added to DOM after the demo sync
   merge, via the LancerCnrSync hook). */
.cn-request-item:target,
.cn-request-item--deep-link-hit {
    animation: cn-request-target-pulse 2.4s ease-out 1;
    border-color: var(--accent-teal);
}
@keyframes cn-request-target-pulse {
    0% { box-shadow: 0 0 0 4px rgba(77, 179, 165, 0.45); }
    60% { box-shadow: 0 0 0 8px rgba(77, 179, 165, 0); }
    100% { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); }
}

/* "Invoice reference unavailable" placeholder for legacy demo data that was
   submitted before the invoice-metadata embedding landed. */
.cn-request-invoice-missing {
    color: var(--text-tertiary);
    font-style: italic;
    font-weight: 400;
    font-size: 14px;
}

/* Client's free-text note \u2014 shown under the reason, distinguished with a
   subtle left accent so it stands apart from the canned Void Reason list. */
.cn-request-note {
    white-space: pre-wrap;
    font-style: italic;
    color: var(--text-primary);
    padding-left: 12px;
    border-left: 3px solid var(--accent-teal);
}

/* "View invoice" link styled as a tertiary action (sits next to Issue /
   Dismiss / Resend / Restore / Archive in the actions row). */
.cn-request-view-invoice {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cn-request-item:first-child {
    margin-top: 20px;
}

.cn-request-item:last-child {
    margin-bottom: 20px;
}

.cn-request-item:hover {
    border-color: var(--accent-teal);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

[data-theme="dark"] .cn-request-item {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .cn-request-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cn-request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-secondary);
}

.cn-request-invoice {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.cn-request-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary);
}

.cn-request-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    font-size: 13px;
    margin-bottom: 16px;
}

.cn-request-detail {
    display: flex;
    gap: 8px;
}

.cn-request-detail-label {
    color: var(--text-secondary);
    min-width: 80px;
}

.cn-request-detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

.cn-request-reason {
    font-size: 13px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 3px solid var(--warning-text);
}

.cn-request-reason-label {
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.cn-request-reason-text {
    color: var(--text-primary);
    line-height: 1.4;
}

/* Enhanced Action Buttons */
.cn-request-actions {
    display: flex;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--border-secondary);
    align-items: center;
}

.cn-request-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.cn-request-actions .btn-tertiary {
    background: transparent;
    color: #e6356a;
    border: none;
    padding: 0 12px;
}

.cn-request-actions .btn-tertiary:hover {
    background: #fff0f3;
    transform: translateY(-1px);
}

[data-theme="dark"] .cn-request-actions .btn-tertiary {
    color: #ff6b8e;
}

[data-theme="dark"] .cn-request-actions .btn-tertiary:hover {
    background: rgba(255, 107, 142, 0.12);
}

.cn-request-actions .btn:hover {
    transform: translateY(-1px);
}

.cn-request-actions .btn:active {
    transform: translateY(0);
}

.cn-request-actions .btn-issue {
    background: linear-gradient(135deg, var(--accent-teal) 0%, #3a9d8f 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(77, 179, 165, 0.3);
}

.cn-request-actions .btn-issue:hover {
    box-shadow: 0 4px 12px rgba(77, 179, 165, 0.4);
}

.cn-request-actions .btn-issue::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3C/svg%3E");
    background-size: contain;
}

.cn-request-actions .btn-dismiss {
    background: #ff3b30;
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
    transition: all 0.2s ease;
}

.cn-request-actions .btn-dismiss:hover {
    background: #e6251a;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
    transform: translateY(-1px);
}

.cn-request-actions .btn-dismiss::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-size: contain;
}

[data-theme="dark"] .cn-request-actions .btn-dismiss {
    background: #ff3b30;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

[data-theme="dark"] .cn-request-actions .btn-dismiss:hover {
    background: #ff5147;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
}

/* Dismiss Request Confirmation Modal */
.dismiss-request-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Credit Note Issued success modal.
   Rendered after the freelancer clicks "Issue Credit Note" on a pending
   request \u2014 confirms the credit note number + core metadata so the action
   is visibly successful (vs. the old "row silently disappears" UX). */
.credit-note-issued-modal {
    background: var(--bg-primary);
    border-radius: 14px;
    max-width: 480px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
    padding: 32px 28px 24px;
    position: relative;
    text-align: center;
}

.credit-note-issued-modal .payment-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: inline-flex;
}
.credit-note-issued-modal .payment-modal-close:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.credit-note-issued-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--accent-teal);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(77, 179, 165, 0.4);
}

.credit-note-issued-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
}

.credit-note-issued-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 auto 20px;
    max-width: 340px;
    line-height: 1.5;
}

.credit-note-issued-details {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    padding: 14px 18px;
    margin: 0 0 16px;
    text-align: left;
}

.credit-note-issued-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border-primary);
}
.credit-note-issued-row:last-child { border-bottom: none; }

.credit-note-issued-label {
    color: var(--text-tertiary);
    font-weight: 500;
}

.credit-note-issued-number {
    font-family: "SF Mono", Menlo, monospace;
    font-size: 15px;
    color: var(--accent-teal);
    letter-spacing: 0.5px;
}

.credit-note-issued-note {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 18px;
    line-height: 1.5;
}

.credit-note-issued-modal .cn-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.credit-note-issued-archived-cta {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: #ffffff;
}
.credit-note-issued-archived-cta:hover {
    background: #3da292;
    border-color: #3da292;
}

/* Origin pill shown in the Archived tab: distinguishes "Issued" (approved
   credit note) from "Dismissed" (rejected request) at a glance so the
   freelancer doesn't have to read the whole card to tell them apart. */
.cn-origin-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-left: 10px;
    vertical-align: middle;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.cn-origin-pill--issued {
    background: #e6f6ef;
    color: #137a3a;
}
.cn-origin-pill--dismissed {
    background: #fef3e6;
    color: #c76a00;
}
/* Client cancelled their own request \u2014 distinct grey-blue so it reads
   as "withdrawn" rather than "rejected by freelancer". */
.cn-origin-pill--cancelled {
    background: #e8eef5;
    color: #4a5a7a;
}

/* Emphasise the archived-but-issued card border so "issued" reads as a
   positive outcome. Subtle teal accent on the left edge. */
.cn-request-item--approved {
    border-left: 3px solid var(--accent-teal);
}
/* Client-cancelled items get a grey-blue left border to match the pill. */
.cn-request-item--client-cancelled {
    border-left: 3px solid #8a9bb5;
}

/* ===================================================================
   Credit Note INDEX page (/credit-notes)
   List of all CNs for the current company with status-tab filters.
   =================================================================== */
.credit-note-index-page {
    padding: 32px 24px;
    max-width: 1200px;
    margin: 0 auto;
}
.credit-note-index-container {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.credit-note-index-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-primary);
}
.credit-note-index-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.credit-note-index-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
}
.credit-note-index-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}
.cn-index-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 28px 0;
    border-bottom: 1px solid var(--border-primary);
}
.cn-index-tab {
    background: none;
    border: none;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s ease, border-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.cn-index-tab:hover {
    color: var(--text-primary);
}
.cn-index-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-teal);
}
.cn-index-tab-count {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
}
.cn-index-content {
    padding: 0;
}
.cn-index-table {
    display: flex;
    flex-direction: column;
}
.cn-index-table-head,
.cn-index-row {
    display: grid;
    grid-template-columns: 32px 1fr 140px 120px 110px 100px;
    gap: 16px;
    align-items: center;
    padding: 14px 28px;
    font-size: 14px;
}
.cn-index-table-head {
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    padding-top: 12px;
    padding-bottom: 12px;
}
.cn-index-table-head [role="columnheader"] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-index-row {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-primary);
    transition: background 0.15s ease;
}
.cn-index-row:last-child {
    border-bottom: none;
}
.cn-index-row:hover {
    background: var(--bg-hover);
}
.cn-index-row.selected {
    background: rgba(77, 179, 165, 0.08);
}
.cn-index-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-teal);
    margin: 0;
    justify-self: center;
}
.cn-index-row-main {
    min-width: 0;
}
.cn-index-row-num {
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: "SF Mono", Menlo, monospace;
    font-size: 13px;
}
.cn-index-row-num a {
    color: inherit;
    text-decoration: none;
}
.cn-index-row-num a:hover {
    color: var(--accent-teal);
}
.cn-index-row-desc {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-index-row-cell {
    color: var(--text-tertiary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cn-index-row-amount {
    font-weight: 700;
    text-align: right;
    color: var(--text-primary);
    font-size: 14px;
    white-space: nowrap;
}
.cn-index-cell-mono {
    font-family: "SF Mono", Menlo, monospace;
}
.cn-index-cell-right {
    text-align: right;
    font-weight: 500;
}
.cn-index-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    white-space: nowrap;
    justify-self: start;
}
.cn-index-status--draft {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}
.cn-index-status--issued {
    background: rgba(45, 168, 78, 0.18);
    color: #2da84e;
}
.cn-index-status--applied {
    background: rgba(77, 179, 165, 0.18);
    color: var(--accent-teal);
}
.cn-index-status--void {
    background: rgba(239, 68, 68, 0.18);
    color: #ef4444;
}

/* ===================================================================
   Credit Note EDIT page (/credit-notes/:id/edit)
   Only reachable for draft CNs. Form to adjust reason/amounts/notes
   before issuing.
   =================================================================== */
.credit-note-edit-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
}
.credit-note-edit-form {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 28px;
    margin-top: 20px;
}
.credit-note-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}
.credit-note-edit-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.credit-note-edit-field--full {
    grid-column: 1 / -1;
}
.credit-note-edit-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.credit-note-edit-field input,
.credit-note-edit-field select,
.credit-note-edit-field textarea {
    padding: 10px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    transition: border-color 0.15s ease;
}
.credit-note-edit-field input:focus,
.credit-note-edit-field select:focus,
.credit-note-edit-field textarea:focus {
    outline: none;
    border-color: var(--accent-teal);
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.15);
}
.credit-note-edit-field textarea {
    resize: vertical;
    min-height: 72px;
}
.credit-note-edit-errors {
    margin-top: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fef0f0;
    color: #7a1010;
    border-left: 3px solid #c02020;
    font-size: 13px;
}
.credit-note-edit-errors ul {
    margin: 8px 0 0;
    padding-left: 20px;
}
.credit-note-edit-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-primary);
}

/* Show-page meta refinements for void / refund extras */
.cn-meta-row--stacked {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 4px;
}
.cn-meta-void-note {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    padding: 8px 10px;
    background: #fef0f0;
    border-radius: 6px;
    border-left: 2px solid #c02020;
    width: 100%;
}
.cn-meta-status--void {
    background: #fef0f0;
    color: #c02020;
}
.cn-meta-status--applied {
    background: #e8f0fe;
    color: #1e3a5f;
}
.cn-meta-status--draft {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Outline-style danger button used by Void on the Show page.
   Visually distinct from destructive-solid (btn-dismiss) so Void
   reads as "potentially destructive, extra confirmation" rather than
   the primary action. */
.btn-danger-outline {
    background: #ffffff;
    color: #c02020;
    border: 1px solid #c02020;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-danger-outline:hover {
    background: #fef0f0;
}

/* Show / Edit page loading state in demo mode \u2014 the LancerCnSync hook
   fires on connect, so this flashes for ~1 frame in practice, then is
   replaced by the real detail view. */
.credit-note-show-loading {
    padding: 64px 24px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}
.credit-note-show-no-preview {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 13px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

/* ========= CNR existing-link (replaces the Request button) ========= */
/* Shown inside the invoice card when the invoice already has a CNR.
   Status-specific hue makes it clear whether the request is pending,
   issued, or declined. Clicking navigates to Credit Notes view + briefly
   highlights the matching row. */
.pd-cnr-existing-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.pd-cnr-existing-link:hover {
    text-decoration: underline;
}
.pd-cnr-existing-link--pending {
    background: #fff4e6;
    border-color: #f3d7a7;
    color: #8a5a00;
}
.pd-cnr-existing-link--approved {
    background: #e6f6ef;
    border-color: #a7ddbf;
    color: #137a3a;
}
.pd-cnr-existing-link--rejected {
    background: #fef0f0;
    border-color: #f3b9b9;
    color: #7a1010;
}
.pd-cnr-existing-link-text {
    font-variant-numeric: tabular-nums;
}

/* ========= Invoice row pill (CN status badge on invoice list) ========= */
.pd-invoice-cnr-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-decoration: none;
    margin-top: 4px;
    transition: opacity 0.15s ease;
}
.pd-invoice-cnr-pill:hover {
    opacity: 0.8;
}
.pd-invoice-cnr-pill--pending {
    background: #fff4e6;
    color: #8a5a00;
}
.pd-invoice-cnr-pill--approved {
    background: #e6f6ef;
    color: #137a3a;
}
.pd-invoice-cnr-pill--rejected {
    background: #fef0f0;
    color: #7a1010;
}

/* ========= Credit Notes row temporary highlight ========= */
/* Triggered by navigate_to_cnr from invoice card/row. 2.5s yellow glow
   so the user sees exactly which CNR was being referenced. */
@keyframes pd-cn-row-highlight-fade {
    0%   { box-shadow: 0 0 0 3px #fde68a, 0 0 16px 4px #fcd34d; background: #fffbeb; }
    60%  { box-shadow: 0 0 0 2px #fde68a, 0 0 8px 2px rgba(253, 224, 71, 0.4); background: #fffbeb; }
    100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0); background: transparent; }
}
.pd-cn-row--highlight {
    animation: pd-cn-row-highlight-fade 2.8s ease-out 1;
    scroll-margin-top: 80px;
}

/* Inline Reply button on rejected CNRs in the client portal.
   Distinct from the other row-action icons \u2014 has text so the affordance
   is clear even though the rest of the row is read-only. */
.pd-cn-row-reply-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid #1e3a5f;
    background: #ffffff;
    color: #1e3a5f;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.pd-cn-row-reply-btn:hover {
    background: #e8f0fe;
}

/* Credit note number displayed inline in the archived row details list. */
.cn-request-cn-number {
    font-family: "SF Mono", Menlo, monospace;
    color: var(--accent-teal);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Full notifications page */
.notif-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px 32px;
}
.notif-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.notif-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}
.notif-page-mark-all {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
}
.notif-page-mark-all:hover {
    background: var(--bg-secondary);
}

.notif-page-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}
.notif-filter-chip {
    background: transparent;
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.notif-filter-chip.active {
    background: var(--accent-teal, #4db3a5);
    border-color: var(--accent-teal, #4db3a5);
    color: #ffffff;
}

.notif-page-list {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
}

.notif-page-empty {
    text-align: center;
    padding: 60px 24px;
}
.notif-page-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: var(--text-tertiary);
}
.notif-page-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}
.notif-page-empty-sub {
    font-size: 13px;
    color: var(--text-tertiary);
}

.notif-page-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-primary);
}
.notif-page-item:last-child { border-bottom: none; }
.notif-page-item--unread {
    background: rgba(77, 179, 165, 0.04);
}
.notif-page-item-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
}
.notif-page-item-icon svg { width: 24px; height: 24px; }
.notif-page-item-body {
    flex: 1;
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
}
.notif-page-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.notif-page-item-sub {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    line-height: 1.5;
}
.notif-page-item-time {
    font-size: 12px;
    color: var(--text-tertiary);
}
.notif-page-item-dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
}
.notif-page-item-dismiss:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Two per-row actions: Archive + Delete (#686). */
.notif-page-item-actions {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}
.notif-page-item-dismiss--danger:hover {
    background: var(--bg-secondary);
    color: var(--error-text);
}

/* History row action cluster (View PDF + Send to accountant). */
.pd-cn-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.pd-cn-row-actions {
  display: flex;
  gap: 4px;
}
.pd-cn-row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all 0.12s;
}
.pd-cn-row-action-btn:hover {
  background: #e8f0fe;
  color: #1e3a5f;
  border-color: #1e3a5f;
}
.pd-cn-row-cn-inline {
  font-family: "SF Mono", Menlo, monospace;
  color: #137a3a;
  font-weight: 600;
  font-size: 11px;
}

/* Client portal: "Response" line under rejected CNRs + Download link. */
.pd-cn-row-rejection {
    background: #fef3e6;
    border-left: 3px solid #c76a00;
    padding: 6px 10px;
    border-radius: 4px;
    margin-top: 6px;
    color: #6e3f00;
}
.pd-cn-row-cn-link {
    margin-top: 6px;
}
.pd-cn-pdf-link {
    color: #1e3a5f;
    text-decoration: none;
    font-weight: 500;
}
.pd-cn-pdf-link:hover {
    text-decoration: underline;
}

/* Client portal: Cancel button on pending CNR rows. Secondary styling
   (red outline on hover) so it doesn't compete with primary Resend. */
.pd-cn-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #6e6e73;
    border: 1px solid #d1d1d6;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: 6px;
}
.pd-cn-cancel-btn:hover {
    background: #fff5f5;
    color: #d63031;
    border-color: #d63031;
}

/* ==========================================================================
   CreditNoteLive.Show (freelancer-only CN detail page)
   ========================================================================== */

.credit-note-show-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 32px;
    max-width: 1400px;
    margin: 0 auto;
    min-height: 100vh;
    background: var(--bg-page);
}

.credit-note-show-header {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.credit-note-show-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.15s;
}
.credit-note-show-back:hover {
    background: var(--bg-secondary);
}

.credit-note-show-title-block {
    flex: 1;
}

.credit-note-show-badge {
    display: inline-block;
    background: #e6f6ef;
    color: #137a3a;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.credit-note-show-title {
    font-family: "SF Mono", Menlo, monospace;
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
}

.credit-note-show-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}
.credit-note-show-subtitle strong {
    color: var(--text-primary);
}

.credit-note-show-actions {
    flex-shrink: 0;
}

.credit-note-show-body {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    align-items: flex-start;
}

.credit-note-show-meta {
    position: sticky;
    top: 24px;
}

.cn-meta-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cn-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 10px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--border-primary);
}
.cn-meta-row:last-child { border-bottom: none; }
.cn-meta-row--total {
    padding-top: 16px;
    margin-top: 4px;
    border-top: 2px solid var(--border-secondary);
    border-bottom: none;
    font-size: 15px;
    font-weight: 700;
}

.cn-meta-label {
    color: var(--text-tertiary);
    font-weight: 500;
}
.cn-meta-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: right;
}
.cn-meta-value--small {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
}

.cn-meta-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 8px 0;
}

.cn-meta-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cn-meta-status--draft { background: var(--bg-tertiary); color: var(--text-secondary); }
.cn-meta-status--issued { background: #e6f6ef; color: #137a3a; }
.cn-meta-status--applied { background: #e6efff; color: #1e3a5f; }
.cn-meta-status--void { background: #fef0f0; color: #b02020; }

.credit-note-show-preview {
    background: #f5f5f7;
    border-radius: 12px;
    padding: 16px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
    min-height: 800px;
}

.credit-note-show-iframe {
    width: 100%;
    height: 900px;
    border: none;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

@media (max-width: 900px) {
    .credit-note-show-body {
        grid-template-columns: 1fr;
    }
    .credit-note-show-meta {
        position: static;
    }
}

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

.dismiss-request-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.dismiss-request-body {
    padding: 20px 24px;
}

.dismiss-request-summary {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.dismiss-request-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.dismiss-request-summary-row:first-child {
    padding-top: 0;
}

.dismiss-request-summary-row:last-child {
    padding-bottom: 0;
}

.dismiss-request-summary-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.dismiss-request-summary-value {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.dismiss-request-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.dismiss-request-label .required {
    color: var(--error-text);
}

.dismiss-request-select {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    margin-bottom: 12px;
}

.dismiss-request-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.1);
}

.dismiss-request-other {
    display: none;
    margin-bottom: 12px;
}

.dismiss-request-other.visible {
    display: block;
}

.dismiss-request-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-primary);
    color: var(--text-primary);
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.dismiss-request-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(38, 166, 154, 0.1);
}

.dismiss-request-notify {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-top: 16px;
}

.dismiss-request-notify input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.dismiss-request-notify-label {
    flex: 1;
}

.dismiss-request-notify-label strong {
    display: block;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.dismiss-request-notify-label span {
    font-size: 13px;
    color: var(--text-secondary);
}

.dismiss-request-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
}

.dismiss-request-footer .btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.dismiss-request-footer .btn-secondary {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
}

.dismiss-request-footer .btn-secondary:hover:not(:disabled) {
    background: var(--bg-tertiary);
}

.dismiss-request-footer .btn-danger {
    background: var(--error-text);
    border: none;
    color: white;
}

.dismiss-request-footer .btn-danger:hover:not(:disabled) {
    filter: brightness(1.1);
}

/* ===== NEW CREDIT NOTE MODAL STYLES ===== */
.cn-eligible-modal {
    max-width: 500px;
}

.cn-eligible-subtitle {
    padding: 0 24px 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.cn-eligible-section {
    margin-bottom: 16px;
}

.cn-eligible-section:last-child {
    margin-bottom: 0;
}

.cn-eligible-section-title {
    padding: 8px 24px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.cn-eligible-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-secondary);
}

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

.cn-eligible-item:hover {
    background: var(--bg-secondary);
}

.cn-eligible-item:active {
    background: var(--bg-tertiary);
}

.cn-eligible-item-main {
    flex: 1;
    min-width: 0;
}

.cn-eligible-item-number {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.cn-eligible-item-client {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-eligible-item-right {
    text-align: right;
    flex-shrink: 0;
}

.cn-eligible-item-amount {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.cn-eligible-item-date {
    font-size: 12px;
    color: var(--text-muted);
}

.cn-eligible-item-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

.cn-eligible-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
    text-align: center;
}

.cn-eligible-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s ease;
}

.cn-eligible-view-all:hover {
    color: var(--accent-primary);
}

/* ===== PDF PREVIEW MODAL STYLES ===== */
.pdf-preview-modal {
    max-width: 900px;
    max-height: 95vh;
}

.pdf-preview-container {
    background: #525659;
    padding: 20px;
    border-radius: 8px;
    max-height: 60vh;
    overflow-y: auto;
}

.pdf-preview-page {
    background: #ffffff;
    width: 100%;
    max-width: 595px;
    margin: 0 auto;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    color: #1d1d1f;
}

.pdf-preview-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #eb0a44;
}

.pdf-preview-company {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
}

.pdf-preview-invoice-title {
    font-size: 24px;
    font-weight: 700;
    color: #eb0a44;
    text-align: right;
}

.pdf-preview-invoice-number {
    font-size: 14px;
    color: #6e6e73;
    text-align: right;
}

.pdf-preview-addresses {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}

.pdf-preview-address {
    font-size: 13px;
    line-height: 1.5;
}

.pdf-preview-address-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #6e6e73;
    margin-bottom: 8px;
}

.pdf-preview-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
}

.pdf-preview-table th {
    background: #f5f5f7;
    padding: 10px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid #d2d2d7;
    color: #1d1d1f;
}

.pdf-preview-table td {
    padding: 12px 10px;
    font-size: 13px;
    border-bottom: 1px solid #e5e5ea;
    color: #1d1d1f;
}

.pdf-preview-table .amount {
    text-align: right;
}

.pdf-preview-totals {
    margin-left: auto;
    width: 250px;
}

.pdf-preview-total-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.pdf-preview-total-row.grand-total {
    border-top: 2px solid #1d1d1f;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: 16px;
}

.pdf-preview-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e5ea;
    font-size: 12px;
    color: #6e6e73;
}

.pdf-preview-bank-details {
    margin-top: 20px;
    background: #f5f5f7;
    padding: 16px;
    border-radius: 8px;
}

.pdf-preview-bank-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #1d1d1f;
}

/* ===== REMINDER PREVIEW MODAL STYLES ===== */
.reminder-preview-modal {
    max-width: 600px;
}

.reminder-email-preview {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    overflow: hidden;
}

.reminder-email-header {
    padding: 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
}

.reminder-email-field {
    display: flex;
    margin-bottom: 8px;
    font-size: 13px;
}

.reminder-email-field:last-child {
    margin-bottom: 0;
}

.reminder-email-label {
    width: 60px;
    color: var(--text-muted);
    font-weight: 500;
}

.reminder-email-value {
    color: var(--text-primary);
}

.reminder-email-body {
    padding: 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
}

.reminder-email-body p {
    margin-bottom: 16px;
}

.reminder-email-body .invoice-box {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
}

.reminder-email-body .invoice-box-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.reminder-email-body .invoice-box-row:last-child {
    margin-bottom: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-secondary);
    font-weight: 600;
}

/* ===== DARK MODE OVERRIDES ===== */
[data-theme="dark"] body,
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body {
        background: var(--bg-page);
        color: var(--text-primary);
    }
}

[data-theme="dark"] .sidebar,
[data-theme="dark"] .mobile-header {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .sidebar-header {
    border-color: var(--border-primary);
}

/* Dark mode sidebar nav - inactive state */
[data-theme="dark"] .nav-item,
[data-theme="dark"] .nav-subitem {
    color: #D1D6E0;
}

/* Active sub-item in dark mode -- the base rule's light lavender (#ebe9f5) reads as a
   jarring pale box on the dark sidebar. Solid dark surface + teal accent instead. */
[data-theme="dark"] .nav-subitem.active {
    background: var(--bg-tertiary);
    color: var(--accent-teal);
    font-weight: 500;
}

[data-theme="dark"] .nav-item svg {
    color: #D1D6E0;
}

/* Dark mode sidebar nav - hover state */
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-subitem:hover {
    background: var(--bg-secondary);
    color: #E0E4EB;
}

[data-theme="dark"] .nav-item:hover svg {
    color: #E0E4EB;
}

/* Dark mode sidebar nav - active state (expanded section) */
[data-theme="dark"] .nav-item.active {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: #F0F1F5;
}

[data-theme="dark"] .nav-item.active svg {
    color: #F0F1F5;
}

/* Dark mode Pro badge - add subtle glow for visibility */
[data-theme="dark"] .nav-item .pro-badge {
    box-shadow: 0 0 8px rgba(255, 140, 208, 0.4);
}

[data-theme="dark"] .nav-item.active .pro-badge {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Dark mode sidebar nav - selected sub-item */
[data-theme="dark"] .nav-subitem.active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Dark mode nav-item-badge (Start here) */
[data-theme="dark"] .nav-item-badge {
    color: var(--accent-teal);
    border-color: var(--border-focus);
}

/* Dark mode sidebar settings nav - inactive state */
[data-theme="dark"] .settings-nav-item {
    color: #D1D6E0;
}

[data-theme="dark"] .settings-nav-item svg {
    color: #D1D6E0;
}

/* Dark mode sidebar settings nav - hover state */
[data-theme="dark"] .settings-nav-item:hover {
    background: var(--bg-secondary);
    color: #E0E4EB;
}

[data-theme="dark"] .settings-nav-item:hover svg {
    color: #E0E4EB;
}

/* Dark mode sidebar settings nav - active/selected state */
[data-theme="dark"] .settings-nav-item.active {
    background: #F0F1F5;
    color: #0A0E15;
}

[data-theme="dark"] .settings-nav-item.active svg {
    color: #0A0E15;
}

/* Dark mode sidebar section title */
[data-theme="dark"] .sidebar-section-title {
    color: #D1D6E0;
}

/* Dark mode sidebar section divider */
[data-theme="dark"] .sidebar-section-divider {
    background: #48484a;
}

/* Dark mode sidebar-bottom border */
[data-theme="dark"] .sidebar-bottom {
    border-top-color: #48484a;
}

[data-theme="dark"] .main-content {
    background: var(--bg-page);
}

[data-theme="dark"] .page-content,
[data-theme="dark"] .wizard-container,
[data-theme="dark"] .card,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .empty-state,
[data-theme="dark"] .settings-panel {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

/* Mission Control new user card dark mode */
[data-theme="dark"] .empty-state-overlay {
    background: #000000;
    border-color: var(--border-focus);
    box-shadow: 0 0 35px rgba(102, 204, 190, 0.4);
    animation: bannerSlideIn 0.6s ease-out 0.3s both;
}

[data-theme="dark"] .empty-state-title {
    color: #F0F1F5;
}

[data-theme="dark"] .empty-state-description {
    color: #D1D6E0;
}

[data-theme="dark"] .empty-state-inline-icon {
    background: linear-gradient(135deg, #3d2a35 0%, #3a2230 100%);
}

[data-theme="dark"] .empty-state-inline-icon svg {
    color: #ff6b8a;
}

[data-theme="dark"] .empty-state-close-btn {
    color: #D1D6E0;
}

[data-theme="dark"] .empty-state-close-btn:hover {
    background: #3a3a3c;
    color: #F0F1F5;
}

/* Tour wizard dark mode */
[data-theme="dark"] .tour-elevated {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .stats-zone.tour-elevated {
    background: var(--bg-page) !important;
}

[data-theme="dark"] .card.tour-elevated {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .sidebar.tour-elevated {
    background: var(--bg-primary) !important;
}

[data-theme="dark"] .tour-tooltip {
    background: #1c1c1e;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .tour-tooltip-arrow {
    background: #1c1c1e;
}

[data-theme="dark"] .tour-step-indicator {
    color: #D1D6E0;
}

[data-theme="dark"] .tour-tooltip-title {
    color: #F0F1F5;
}

[data-theme="dark"] .tour-tooltip-description {
    color: #D1D6E0;
}

[data-theme="dark"] .tour-close-btn {
    color: #D1D6E0;
}

[data-theme="dark"] .tour-close-btn:hover {
    background: #3a3a3c;
    color: #F0F1F5;
}

[data-theme="dark"] .tour-btn-skip {
    color: #D1D6E0;
}

[data-theme="dark"] .tour-btn-skip:hover {
    color: #F0F1F5;
}

[data-theme="dark"] .page-title,
[data-theme="dark"] .wizard-section-title,
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .page-subtitle {
    color: #b8b8bd;
}

[data-theme="dark"] .wizard-section-subtitle,
[data-theme="dark"] .form-help {
    color: #b8b8bd !important;
}

/* Invoice List Tabs Dark Mode */
[data-theme="dark"] .tabs-filters-bar {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .tabs-row {
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-tabs {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .invoice-tab {
    color: var(--text-primary);
}

[data-theme="dark"] .invoice-tab:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .invoice-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

[data-theme="dark"] .tab-count {
    background: #48484a;
    color: #e5e5ea;
}

/* Dark mode category-specific icon colors for tabs */
[data-theme="dark"] .invoice-tab[data-section="all"] svg {
    color: var(--accent-teal);
}

[data-theme="dark"] .invoice-tab[data-section="drafts"] svg {
    color: #fbbf24;
}

[data-theme="dark"] .invoice-tab[data-section="outstanding"] svg {
    color: #60a5fa;
}

[data-theme="dark"] .invoice-tab[data-section="overdue"] svg {
    color: #ff6b6b;
}

[data-theme="dark"] .invoice-tab[data-section="paid"] svg {
    color: #4ade80;
}

[data-theme="dark"] .invoice-tab[data-section="voided"] svg {
    color: #ff8a65;
}

[data-theme="dark"] .invoice-tab.active .tab-count.tab-count--voided {
    background: #ff8a65;
}

[data-theme="dark"] .invoice-tab[data-section="creditNotes"] svg {
    color: #4db6ac;
}

[data-theme="dark"] .invoice-tab.active .tab-count.tab-count--creditNotes {
    background: #4db6ac;
}

[data-theme="dark"] .invoice-tab[data-section="recurring"] svg {
    color: #ce93d8;
}

[data-theme="dark"] .invoice-tab[data-section="archive"] svg {
    color: #9ca3af;
}

[data-theme="dark"] .invoice-search-box {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-search-box:focus-within {
    border-color: #4dd0c4;
    box-shadow: 0 0 0 3px rgba(77, 208, 196, 0.2);
}

[data-theme="dark"] .invoice-search-box input,
[data-theme="dark"] .invoice-search-box .invoice-search-editable {
    color: var(--text-primary);
}

[data-theme="dark"] .invoice-search-box input::placeholder {
    color: var(--text-placeholder);
}

[data-theme="dark"] .invoice-search-box svg {
    color: var(--text-muted);
}

/* Invoice Sections Dark Mode */
[data-theme="dark"] .invoice-section {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-section-header:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .invoice-section-title {
    color: var(--text-primary);
}

[data-theme="dark"] .invoice-section-count {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

[data-theme="dark"] .invoice-section-table th {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .invoice-section-table td {
    color: var(--text-primary);
    border-color: var(--border-light);
}

[data-theme="dark"] .invoice-section-table tr:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .invoice-section-table tr:focus,
[data-theme="dark"] .invoice-section-table tr:focus-visible {
    outline: 2px solid var(--accent-teal);
    outline-offset: -2px;
}

[data-theme="dark"] .invoice-section-table tr.selected {
    outline: 2px solid var(--accent-teal);
    outline-offset: -2px;
}

[data-theme="dark"] .invoice-section-table tr.selected:hover {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .invoice-section--recurring .invoice-section-icon {
    background: transparent;
    border: 2px solid #ce93d8;
    color: #ce93d8;
}

[data-theme="dark"] .invoice-section--recurring .invoice-section-count {
    background: #9c27b0;
    color: #ffffff;
}

[data-theme="dark"] .invoice-section--overdue .invoice-section-header {
    background: var(--bg-primary);
}

[data-theme="dark"] .invoice-section--overdue .invoice-section-icon {
    background: transparent;
    border: 2px solid #ff6b6b;
    color: #ff6b6b;
}

[data-theme="dark"] .invoice-section--overdue .invoice-section-count {
    background: #ff3b30;
    color: #ffffff;
}

[data-theme="dark"] .invoice-section--drafts .invoice-section-icon {
    background: transparent;
    border: 2px solid #fbbf24;
    color: #fbbf24;
}

[data-theme="dark"] .invoice-section--outstanding .invoice-section-icon {
    background: transparent;
    border: 2px solid #60a5fa;
    color: #60a5fa;
}

[data-theme="dark"] .invoice-section--paid .invoice-section-icon {
    background: transparent;
    border: 2px solid #4ade80;
    color: #4ade80;
}

[data-theme="dark"] .invoice-section--voided .invoice-section-icon {
    background: transparent;
    border: 2px solid #ff8a65;
    color: #ff8a65;
}

[data-theme="dark"] .invoice-section--voided .invoice-section-count {
    background: #ff8a65;
    color: #1c1c1e;
}

[data-theme="dark"] .invoice-section--creditNotes .invoice-section-icon {
    background: transparent;
    border: 2px solid #4db6ac;
    color: #4db6ac;
}

[data-theme="dark"] .invoice-section--creditNotes .invoice-section-count {
    background: #4db6ac;
    color: #1c1c1e;
}

[data-theme="dark"] .credit-notes-subsection-header {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .credit-note-status--pending {
    background: #3d2a1a;
    color: #ffb74d;
    border: 1px solid #ffb74d;
}

[data-theme="dark"] .credit-note-status--processed {
    background: #1b3d1f;
    color: #81c784;
    border: 1px solid #81c784;
}

[data-theme="dark"] .voided-badge {
    background: #3a2a2a;
    color: #ff8a65;
    border: 1px solid #ff8a65;
}

[data-theme="dark"] .voided-notified-badge {
    background: #1a3a2a;
    color: #81c784;
    border: 1px solid #81c784;
}

/* Dark mode voided row hover */
[data-theme="dark"] .invoice-section--voided .invoice-section-table tr:hover {
    background: var(--status-void-bg);
}

[data-theme="dark"] .invoice-section--archive .invoice-section-icon {
    background: transparent;
    border: 2px solid #9ca3af;
    color: #9ca3af;
}

[data-theme="dark"] .recurring-badge {
    background: #4a2559;
    color: #ce93d8;
}

[data-theme="dark"] .recurring-toggle-container {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .bulk-action-bar {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .bulk-action-bar .selection-count {
    color: var(--text-secondary);
}

[data-theme="dark"] .bulk-action-bar .selection-count strong {
    color: var(--text-primary);
}

[data-theme="dark"] .bulk-action-btn {
    color: var(--text-secondary);
}

[data-theme="dark"] .bulk-action-btn.enabled:hover {
    color: var(--text-primary);
}

/* Archive Toolbar Dark Mode */
[data-theme="dark"] .archive-toolbar {
    background: var(--bg-secondary);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .archive-search input,
[data-theme="dark"] .archive-filter {
    background: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .archive-filter-btn {
    background: var(--bg-primary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .archive-filter-btn:hover {
    background: var(--bg-tertiary);
}

/* Filter bar dark mode */
[data-theme="dark"] .filter-bar {
    background: transparent;
}

[data-theme="dark"] .filter-label {
    color: var(--text-secondary);
}

[data-theme="dark"] .filter-select {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

[data-theme="dark"] .filter-select:hover {
    border-color: var(--border-focus);
}

[data-theme="dark"] .filter-select:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(102, 204, 190, 0.2);
}

[data-theme="dark"] .date-input {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .date-input:hover {
    border-color: var(--border-focus);
}

[data-theme="dark"] .date-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(102, 204, 190, 0.2);
}

[data-theme="dark"] .date-separator {
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-apply-dates {
    background: var(--accent-teal);
}

[data-theme="dark"] .btn-apply-dates:hover {
    background: var(--accent-teal-hover);
}

[data-theme="dark"] .btn-clear-dates {
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

[data-theme="dark"] .btn-clear-dates:hover {
    border-color: #ff6b6b;
    color: #ff6b6b;
}

/* Stat card breakdown dark mode */
[data-theme="dark"] .stat-breakdown {
    border-top-color: var(--border-secondary);
}

[data-theme="dark"] .stat-breakdown-label {
    color: #D1D6E0;
}

[data-theme="dark"] .stat-breakdown-value {
    color: #F0F1F5;
}

/* Invoice items dark mode */
[data-theme="dark"] .invoice-client {
    color: #F0F1F5;
}

[data-theme="dark"] .invoice-number {
    color: #a1a1a6;
}

[data-theme="dark"] .invoice-amount {
    color: #F0F1F5;
}

[data-theme="dark"] .invoice-item {
    border-color: var(--border-primary);
    background: var(--bg-primary);
}

[data-theme="dark"] .invoice-item:hover {
    border-color: var(--border-focus);
    background: #2a2a2c;
    box-shadow: 0 0 12px rgba(102, 204, 190, 0.15);
}

/* Client list dark mode */
[data-theme="dark"] .client-item {
    border-color: var(--border-primary);
    background: var(--bg-primary);
}

[data-theme="dark"] .client-item:hover {
    border-color: var(--border-focus);
    background: #2a2a2c;
    box-shadow: 0 0 12px rgba(102, 204, 190, 0.15);
}

[data-theme="dark"] .client-name {
    color: #F0F1F5;
}

[data-theme="dark"] .client-meta {
    color: #D1D6E0;
}

[data-theme="dark"] .client-revenue {
    color: #F0F1F5;
}

/* Clients list card dark mode */
[data-theme="dark"] .clients-list-card {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .clients-close-btn {
    color: #D1D6E0;
}

[data-theme="dark"] .clients-close-btn:hover {
    background: var(--bg-secondary);
    color: #F0F1F5;
}

/* Clients section dark mode - empty states */
[data-theme="dark"] #clientsSection .empty-state-inline {
    color: #D1D6E0;
}

[data-theme="dark"] #clientsSection .empty-state-inline-icon {
    color: var(--accent-teal);
}

[data-theme="dark"] #clientsSection .empty-state-inline-title {
    color: #F0F1F5;
}

[data-theme="dark"] #clientsSection .empty-state-inline-text {
    color: #D1D6E0;
}

/* Client Detail View dark mode */
[data-theme="dark"] .client-detail-close-btn {
    background: var(--bg-secondary);
    color: #D1D6E0;
}

[data-theme="dark"] .client-detail-close-btn:hover {
    background: var(--bg-tertiary);
    color: #F0F1F5;
}

[data-theme="dark"] .client-detail-card {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .client-detail-card-title {
    color: #F0F1F5;
}

[data-theme="dark"] .client-detail-stat-box {
    background: var(--bg-secondary);
}

[data-theme="dark"] .btn-link {
    color: var(--accent-teal);
}

[data-theme="dark"] .btn-link:hover {
    color: var(--accent-teal);
}

[data-theme="dark"] .btn-link.danger {
    color: #ff6b6b;
}

/* View All link dark mode */
[data-theme="dark"] .view-all {
    color: var(--accent-teal);
}

/* Stat card labels dark mode */
[data-theme="dark"] .stat-label {
    color: #D1D6E0;
}

[data-theme="dark"] .stat-label.label-paid {
    color: var(--accent-teal);
}

[data-theme="dark"] .stat-label.label-outstanding {
    color: #ffb84d;
}

/* Stat value (big numbers) dark mode - same gradient as light mode */
[data-theme="dark"] .stat-value {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Calendar dark mode */
[data-theme="dark"] .calendar-view-toggle {
    background: var(--bg-secondary);
}

[data-theme="dark"] .calendar-view-btn {
    color: #D1D6E0;
}

[data-theme="dark"] .calendar-view-btn:hover {
    color: #F0F1F5;
}

[data-theme="dark"] .calendar-view-btn.active {
    background: var(--bg-tertiary);
    color: #F0F1F5;
    box-shadow: none;
}

[data-theme="dark"] .calendar-legend {
    background: var(--bg-secondary);
}

[data-theme="dark"] .legend-item {
    color: #D1D6E0;
}

[data-theme="dark"] .calendar-nav-btn {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: #D1D6E0;
}

[data-theme="dark"] .calendar-nav-btn:hover {
    background: var(--bg-tertiary);
    color: #F0F1F5;
}

[data-theme="dark"] .calendar-month {
    color: #F0F1F5;
}

[data-theme="dark"] .calendar-day-header {
    color: #D1D6E0;
}

[data-theme="dark"] .calendar-day {
    color: #F0F1F5;
}

[data-theme="dark"] .calendar-day:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .calendar-day.other-month {
    color: var(--text-secondary);
}

[data-theme="dark"] .calendar-day.today {
    background: transparent;
    color: #F0F1F5;
    border-color: var(--border-focus);
}

[data-theme="dark"] .calendar-day.today::before {
    color: var(--accent-teal);
}

[data-theme="dark"] .calendar-day.today:hover {
    background: #1f3533;
}

/* Calendar day payment states dark mode - solid colors with dark text */
[data-theme="dark"] .calendar-day.has-payment {
    background: #66ccbe;
    color: #1a1a1a;
}

[data-theme="dark"] .calendar-day.has-payment:hover {
    background: #5bbdaf;
}

[data-theme="dark"] .calendar-day.has-overdue {
    background: #ff6b6b;
    color: #1a1a1a;
}

[data-theme="dark"] .calendar-day.has-overdue:hover {
    background: #ff5252;
}

[data-theme="dark"] .calendar-day.has-mixed {
    background: #66ccbe;
    color: #1a1a1a;
}

[data-theme="dark"] .calendar-day.has-mixed:hover {
    background: #5bbdaf;
}

[data-theme="dark"] .calendar-day.has-payment .payment-dot,
[data-theme="dark"] .calendar-day.has-mixed .payment-dot {
    background: #1a1a1a;
}

[data-theme="dark"] .calendar-day.has-overdue .payment-dot {
    background: #1a1a1a;
}

/* Calendar list view dark mode */
[data-theme="dark"] .calendar-list-item {
    border-color: var(--border-primary);
}

[data-theme="dark"] .calendar-list-item:hover {
    background: var(--bg-secondary);
}

[data-theme="dark"] .calendar-list-date {
    color: #D1D6E0;
}

[data-theme="dark"] .calendar-list-client {
    color: #F0F1F5;
}

[data-theme="dark"] .calendar-list-amount {
    color: var(--accent-teal);
}

[data-theme="dark"] .calendar-list-item.overdue .calendar-list-date,
[data-theme="dark"] .calendar-list-item.overdue .calendar-list-amount {
    color: #ff6b6b;
}

/* Forms Dark Mode */
[data-theme="dark"] .form-label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .form-input::placeholder {
    color: var(--text-placeholder);
}

[data-theme="dark"] .form-input:focus {
    border-color: #66ccbe;
    box-shadow: 0 0 0 3px rgba(102, 204, 190, 0.2);
}

/* Buttons Dark Mode */
[data-theme="dark"] .btn-secondary {
    background: #3a3a3c;
    color: var(--text-primary);
    border: 1px solid #636366;
}

[data-theme="dark"] .btn-secondary:hover {
    background: #48484a;
    border-color: #7c7c80;
}

[data-theme="dark"] .btn-outline {
    background: #2c2c2e;
    color: #D1D6E0;
    border: 1px solid #636366;
}

[data-theme="dark"] .btn-outline:hover {
    background: var(--bg-secondary);
    border-color: var(--border-focus);
    color: #F0F1F5;
}

[data-theme="dark"] .invoice-action-btn {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-action-btn:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

[data-theme="dark"] .invoice-action-btn--primary {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-action-btn--primary:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

[data-theme="dark"] .invoice-action-btn--danger {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-action-btn--danger:hover {
    background: var(--error-text);
    color: white;
    border-color: var(--error-text);
}

[data-theme="dark"] .invoice-action-btn--warning {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .invoice-action-btn--warning:hover {
    background: var(--accent-teal);
    color: white;
    border-color: var(--accent-teal);
}

/* Modals Dark Mode */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .confirm-modal-content {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

[data-theme="dark"] .modal-header {
    border-color: var(--border-secondary);
}

[data-theme="dark"] .modal-title {
    color: var(--text-primary);
}

/* Settings Modal Dark Mode */
[data-theme="dark"] .modal-settings-sidebar {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

/* Settings modal nav - inactive */
[data-theme="dark"] .modal-settings-nav-item {
    color: #D1D6E0;
}

[data-theme="dark"] .modal-settings-nav-item svg {
    color: #D1D6E0;
    opacity: 1;
}

/* Settings modal nav - hover */
[data-theme="dark"] .modal-settings-nav-item:hover {
    background: var(--bg-tertiary);
    color: #E0E4EB;
}

[data-theme="dark"] .modal-settings-nav-item:hover svg {
    color: #E0E4EB;
}

/* Settings modal nav - active/selected */
[data-theme="dark"] .modal-settings-nav-item.active {
    background: #F0F1F5;
    color: #0A0E15;
    border-left-color: var(--accent-primary);
}

[data-theme="dark"] .modal-settings-nav-item.active svg {
    color: #0A0E15;
}

/* Settings content area */
[data-theme="dark"] .modal-settings-content {
    background: var(--bg-primary);
}

[data-theme="dark"] .settings-header {
    border-color: var(--border-primary);
}

[data-theme="dark"] .settings-title {
    color: #F0F1F5;
}

[data-theme="dark"] .settings-subtitle {
    color: #D1D6E0;
}

[data-theme="dark"] .section-title {
    color: #F0F1F5;
}

/* Toggle switches in settings */
[data-theme="dark"] .toggle-container {
    border-color: var(--border-primary);
}

[data-theme="dark"] .toggle-label {
    color: #F0F1F5;
}

[data-theme="dark"] .toggle-description {
    color: #D1D6E0;
}

[data-theme="dark"] .toggle-switch {
    background: #48484a;
    border: 1px solid #636366;
}

[data-theme="dark"] .toggle-switch.active {
    background: #32d74b;
    border-color: #32d74b;
}

[data-theme="dark"] .toggle-switch::after {
    background: #ffffff;
}

/* Pro badge in settings modal */
[data-theme="dark"] .modal-settings-nav-item .badge-pro {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
}

[data-theme="dark"] .modal-settings-nav-item.active .badge-pro {
    background: var(--accent-primary);
}

/* Modal close button */
[data-theme="dark"] .modal-close-btn {
    color: #D1D6E0;
    border: 1px solid #636366;
}

[data-theme="dark"] .modal-close-btn:hover {
    color: #F0F1F5;
    background: var(--bg-secondary);
}

/* Toast Dark Mode */
[data-theme="dark"] .toast {
    background: #2c2c2e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .toast-title {
    color: #F0F1F5;
}

[data-theme="dark"] .toast-message {
    color: #D1D6E0;
}

[data-theme="dark"] .toast-close {
    color: #a1a1a6;
}

[data-theme="dark"] .toast-close:hover {
    background: var(--bg-tertiary);
    color: #F0F1F5;
}

[data-theme="dark"] .toast-success {
    background: #2c2c2e;
    border-left-color: #32d74b;
}

[data-theme="dark"] .toast-success .toast-icon {
    color: #32d74b;
}

[data-theme="dark"] .toast-error {
    background: #2c2c2e;
    border-left-color: #ff453a;
}

[data-theme="dark"] .toast-error .toast-icon {
    color: #ff453a;
}

[data-theme="dark"] .toast-error .toast-title {
    color: #f5f5f7;
}

[data-theme="dark"] .toast-error .toast-message {
    color: #aeaeb2;
}

[data-theme="dark"] .toast-warning {
    background: #2c2c2e;
    border-left-color: #ff9f0a;
}

[data-theme="dark"] .toast-warning .toast-icon {
    color: #ff9f0a;
}

[data-theme="dark"] .toast-info {
    background: #2c2c2e;
    border-left-color: #64d2ff;
}

[data-theme="dark"] .toast-info .toast-icon {
    color: #64d2ff;
}

[data-theme="dark"] .toast-undo {
    background: #2c2c2e;
    border-left-color: #ff453a;
}

[data-theme="dark"] .toast-undo .toast-icon {
    color: #ff453a;
}

[data-theme="dark"] .toast-undo .toast-title,
[data-theme="dark"] .toast-undo .toast-message {
    color: #F0F1F5;
}

[data-theme="dark"] .toast-undo-btn {
    color: #ff6b8a;
}

[data-theme="dark"] .toast-progress {
    background: #3a3a3c;
}

[data-theme="dark"] .toast-progress-bar {
    background: #5c5c5e;
}

/* Dev Panel Dark Mode */
[data-theme="dark"] .dev-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

/* Theme Toggle Button */
/* Scrollbar Dark Mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* ===== COMMAND PALETTE (Global Search) ===== */
.command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.command-palette-overlay.active {
    display: flex;
    opacity: 1;
}

.command-palette {
    width: 100%;
    max-width: 580px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.15s ease;
}

.command-palette-overlay.active .command-palette {
    transform: scale(1);
}

.command-palette-input-wrapper {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-secondary);
}

.command-palette-icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    margin-right: 12px;
    flex-shrink: 0;
}

.command-palette-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text-primary);
    background: transparent;
}

.command-palette-input::placeholder {
    color: var(--text-placeholder);
}

.command-palette-shortcut {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
}

.command-palette-shortcut kbd {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-secondary);
}

.command-palette-results {
    max-height: 400px;
    overflow-y: auto;
}

.command-palette-section {
    padding: 8px 0;
}

.command-palette-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.command-palette-clear-recent {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.command-palette-clear-recent:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.command-palette-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.1s;
}

.command-palette-item:hover,
.command-palette-item.selected {
    background: var(--bg-secondary);
}

.command-palette-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    flex-shrink: 0;
}

.command-palette-item-icon.nav {
    background: var(--info-bg);
    color: var(--info-text);
}

.command-palette-item-icon.invoice {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.command-palette-item-icon.client {
    background: var(--success-bg);
    color: var(--success-text);
}

.command-palette-item-icon.action {
    background: #fce4ec;
    color: var(--accent-primary);
}

.command-palette-item-content {
    flex: 1;
    min-width: 0;
}

.command-palette-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item-shortcut {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 12px;
}

.command-palette-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.command-palette-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.command-palette-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid #e5e5ea;
    font-size: 12px;
    color: var(--text-secondary);
}

.command-palette-footer-hint {
    display: flex;
    align-items: center;
    gap: 16px;
}

.command-palette-footer-hint span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.command-palette-footer-hint kbd {
    font-size: 10px;
    padding: 2px 5px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
}

/* Command Palette Dark Mode */
[data-theme="dark"] .command-palette-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .command-palette {
    background: #1c1c1e;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .command-palette-input-wrapper {
    border-bottom-color: #3a3a3c;
}

[data-theme="dark"] .command-palette-input {
    color: #f5f5f7;
}

[data-theme="dark"] .command-palette-shortcut kbd {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #a1a1a6;
}

[data-theme="dark"] .command-palette-item:hover,
[data-theme="dark"] .command-palette-item.selected {
    background: #2c2c2e;
}

[data-theme="dark"] .command-palette-item-title {
    color: #f5f5f7;
}

[data-theme="dark"] .command-palette-footer {
    background: #2c2c2e;
    border-top-color: #3a3a3c;
}

[data-theme="dark"] .command-palette-footer-hint kbd {
    background: #3a3a3c;
    border-color: #48484a;
}

/* Dark theme: Brighter spinners */
[data-theme="dark"] .loading-spinner {
    border-color: #48484a;
}

[data-theme="dark"] .auto-save-spinner {
    border-color: #48484a;
    border-top-color: var(--text-secondary);
}

[data-theme="dark"] .bulk-progress-spinner {
    border-color: #48484a;
}

/* Dark theme: Empty states need more definition */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-state-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .dashboard-empty-state,
[data-theme="dark"] .zone-empty {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
}

[data-theme="dark"] .empty-state-inline {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
}

/* ===== COMMAND PALETTE (Global Search) ===== */
/* Source: prototype lines 27575-27851 */

.command-palette-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.command-palette-overlay.active {
    display: flex;
    opacity: 1;
}

.command-palette {
    width: 100%;
    max-width: 580px;
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.15s ease;
}

.command-palette-overlay.active .command-palette {
    transform: scale(1);
}

.command-palette-input-wrapper {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-secondary);
}

.command-palette-icon {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
    margin-right: 12px;
    flex-shrink: 0;
}

.command-palette-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: var(--text-primary);
    background: transparent;
}

.command-palette-input::placeholder {
    color: var(--text-placeholder);
}

.command-palette-shortcut {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 12px;
}

.command-palette-shortcut kbd {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 4px;
    color: var(--text-secondary);
}

.command-palette-results {
    max-height: 400px;
    overflow-y: auto;
}

.command-palette-section {
    padding: 8px 0;
}

.command-palette-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.command-palette-clear-recent {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.command-palette-clear-recent:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.command-palette-item {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    cursor: pointer;
    transition: background 0.1s;
}

.command-palette-item:hover,
.command-palette-item.selected {
    background: var(--bg-secondary);
}

.command-palette-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    flex-shrink: 0;
}

.command-palette-item-icon.nav {
    background: var(--info-bg);
    color: var(--info-text);
}

.command-palette-item-icon.invoice {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.command-palette-item-icon.client {
    background: var(--success-bg);
    color: var(--success-text);
}

.command-palette-item-icon.action {
    background: #fce4ec;
    color: var(--accent-primary);
}

.command-palette-item-content {
    flex: 1;
    min-width: 0;
}

.command-palette-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item-subtitle {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.command-palette-item-shortcut {
    font-size: 11px;
    color: var(--text-secondary);
    margin-left: 12px;
}

.command-palette-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-secondary);
}

.command-palette-empty-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.command-palette-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid #e5e5ea;
    font-size: 12px;
    color: var(--text-secondary);
}

.command-palette-footer-hint {
    display: flex;
    align-items: center;
    gap: 16px;
}

.command-palette-footer-hint span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.command-palette-footer-hint kbd {
    font-size: 10px;
    padding: 2px 5px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 3px;
}

/* Command Palette Dark Mode */
/* Source: prototype lines 27811-27851 */
[data-theme="dark"] .command-palette-overlay {
    background: rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .command-palette {
    background: #1c1c1e;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .command-palette-input-wrapper {
    border-bottom-color: #3a3a3c;
}

[data-theme="dark"] .command-palette-input {
    color: #f5f5f7;
}

[data-theme="dark"] .command-palette-shortcut kbd {
    background: #2c2c2e;
    border-color: #3a3a3c;
    color: #a1a1a6;
}

[data-theme="dark"] .command-palette-item:hover,
[data-theme="dark"] .command-palette-item.selected {
    background: #2c2c2e;
}

[data-theme="dark"] .command-palette-item-title {
    color: #f5f5f7;
}

[data-theme="dark"] .command-palette-footer {
    background: #2c2c2e;
    border-top-color: #3a3a3c;
}

[data-theme="dark"] .command-palette-footer-hint kbd {
    background: #3a3a3c;
    border-color: #48484a;
}

/* ===== INSIGHTS & BURNIE (Source: prototype lines 16215-16894) ===== */

.insights-section {
    margin-bottom: 40px;
}

.insights-section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.insights-section-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0 0 20px 0;
}

.insights-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    margin-bottom: 24px;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .insights-layout {
        grid-template-columns: 1fr;
    }
}

.insights-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.insights-cards .stat-card {
    flex: 1;
}

.insights-card {
    animation: none;
    opacity: 1;
}

.insights-metric {
    padding: 16px 0;
}

.insights-metric:first-of-type {
    padding-top: 12px;
}

.insights-metric-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.insights-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.insights-metric-header .insights-metric-label {
    margin-bottom: 0;
}

.burnie-target-dropdown {
    min-width: 100px;
}

.burnie-target-dropdown .custom-dropdown-trigger {
    padding: 4px 8px;
    font-size: 11px;
    min-height: 24px;
    background: transparent;
    border: 1px solid var(--border-primary);
}

.burnie-target-dropdown .custom-dropdown-trigger:hover {
    background: var(--bg-tertiary);
}

.burnie-target-dropdown .dropdown-text {
    font-size: 11px;
}

.insights-sublabel {
    font-weight: 400;
    text-transform: none;
    color: var(--text-muted);
}

.insights-metric-value {
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
}

.insights-projected {
    background: linear-gradient(135deg, #66ccbe 0%, #4db6a6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.insights-metric-breakdown {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insights-breakdown-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.insights-breakdown-label {
    color: var(--text-secondary);
    flex: 1;
}

.insights-breakdown-value {
    color: var(--text-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.insights-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-teal { background: #66ccbe; }
.dot-teal-dark { background: #3d8a7d; }
.dot-red { background: #ff453a; }
.dot-orange { background: #ff9f0a; }
.dot-yellow { background: #ffd60a; }

.insights-divider {
    height: 1px;
    background: var(--border-primary);
    margin: 0;
}

/* Burnie Gauge - Source: prototype lines 16376-16525 */
.burnie-gauge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
}

.burnie-gauge {
    width: 200px;
    height: 110px;
}

.burnie-arc-bg {
    stroke: var(--bg-tertiary);
}

.burnie-needle {
    stroke: var(--text-primary);
    transform-origin: 100px 100px;
    transition: transform 0.6s ease-out;
}

.burnie-center {
    fill: var(--text-primary);
}

.burnie-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 8px;
}

.burnie-value span:first-child {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.burnie-unit {
    font-size: 14px;
    color: var(--text-secondary);
}

.burnie-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
}

/* Burnie Tabs */
.burnie-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
    margin: 12px 0;
}

.burnie-tab {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.burnie-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Current Balance Input */
.burnie-balance-input {
    margin-bottom: 16px;
}

.burnie-balance-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.burnie-balance-input .form-input {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.burnie-balance-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
    font-style: italic;
}

.burnie-balance-hint.hidden {
    display: none;
}

/* Burnie Details */
.burnie-details {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary);
}

.burnie-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.burnie-detail-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.burnie-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: #ff453a;
    font-variant-numeric: tabular-nums;
}

.burnie-detail-value.burnie-income {
    color: #66ccbe;
}

.burnie-positive-flow {
    color: #66ccbe !important;
}

/* Insights Chart - Source: prototype lines 16526-16657 */
.insights-chart-container {
    display: flex;
    flex-direction: column;
}

.insights-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.insights-chart-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    padding: 3px;
}

.insights-tab {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

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

.insights-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.insights-chart-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    animation: none;
    opacity: 1;
}

.insights-chart-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 20px;
}

.insights-chart {
    flex: 1;
    min-height: 400px;
    padding: 20px 0;
}

.insights-area-chart {
    width: 100%;
    height: 380px;
}

.insights-chart-grid-line {
    stroke: var(--border-primary);
    stroke-dasharray: 4, 4;
    opacity: 0.5;
}

.insights-chart-y-label {
    fill: var(--text-muted);
    font-size: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.insights-chart-area-paid {
    fill: #66ccbe;
}

.insights-chart-area-outstanding {
    fill: #3d8a7d;
}

.insights-chart-line-expenses {
    fill: none;
    stroke: #ff453a;
    stroke-width: 2.5;
}

.insights-chart-dot {
    transition: r 0.2s;
}

.insights-chart-dot:hover {
    r: 6;
}

.insights-chart-month-label {
    fill: var(--text-secondary);
    font-size: 11px;
    text-anchor: middle;
}

.insights-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    margin-top: auto;
}

.insights-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.insights-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* Expenses Pie Chart - Source: prototype lines 16658-16722 */
.expenses-pie-container {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 0;
}

@media (max-width: 600px) {
    .expenses-pie-container {
        flex-direction: column;
    }
}

.expenses-pie-chart {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.expenses-pie-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.expenses-legend-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}

.expenses-legend-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.expenses-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.expenses-legend-value {
    font-weight: 600;
    color: var(--text-primary);
}

.insights-expenses-actions {
    display: flex;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    margin-top: 16px;
}

.insights-expenses-actions .btn {
    flex: 1;
}

.insights-expenses-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
    margin-bottom: 0;
}

/* ===== PRO FEATURES & TRIAL SYSTEM (Source: prototype lines 2506-3180) ===== */

/* Pro Features Section - Source: prototype lines 2507-2622 */
.pro-features-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 28px;
}

.pro-features-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.pro-features-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.pro-badge-inline {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pro-compare-link {
    font-size: 14px;
    color: var(--text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s;
}

.pro-compare-link:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

.pro-compare-link svg {
    width: 16px;
    height: 16px;
}

.pro-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.pro-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: var(--bg-tertiary);
    border-radius: 10px;
    border: 1px solid var(--border-primary);
}

.pro-feature-icon {
    width: 40px;
    height: 40px;
    background: #66ccbe;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pro-feature-icon svg {
    width: 20px;
    height: 20px;
    color: white;
}

.pro-feature-text h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.pro-feature-text p {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    margin: 0;
}

.pro-features-cta {
    text-align: center;
}

@media (max-width: 600px) {
    .pro-features-grid {
        grid-template-columns: 1fr;
    }
}

/* Plan Comparison Modal - Source: prototype lines 2625-2792 */
.plan-comparison-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.plan-comparison-modal.active {
    display: flex;
}

.plan-comparison-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.plan-comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-primary);
}

.plan-comparison-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.plan-comparison-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.plan-comparison-close:hover {
    color: var(--text-primary);
}

.plan-comparison-body {
    padding: 28px;
}

.plan-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.plan-card {
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.plan-card.pro-plan {
    border: 2px solid var(--text-primary);
}

.plan-card-header {
    margin-bottom: 20px;
}

.plan-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.plan-badge.basic {
    background: #34c759;
    color: white;
}

.plan-badge.pro {
    background: #1d1d1f;
    color: white;
}

[data-theme="dark"] .plan-badge.pro {
    background: #f5f5f7;
    color: #1d1d1f;
}

.plan-card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.plan-card-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.plan-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-secondary);
}

.plan-features li:last-child {
    border-bottom: none;
}

.plan-features li svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.plan-features li svg.check-icon {
    color: #34c759;
}

.plan-features li svg.cross-icon {
    color: var(--border-primary);
}

.plan-features li.disabled {
    color: var(--text-muted);
}

.plan-card .btn {
    width: 100%;
    justify-content: center;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .plan-cards {
        grid-template-columns: 1fr;
    }
}

/* Pro Trial Counter - Source: prototype lines 2794-2812 */
.pro-trial-counter {
    display: block;
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.pro-trial-counter.warning {
    color: var(--warning-text);
}

.pro-trial-counter.exhausted {
    color: var(--error-text);
}

.pro-features-cta .pro-trial-counter {
    text-align: center;
}

/* Upgrade Modal - Source: prototype lines 2815-2950 */
.upgrade-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10002;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.upgrade-modal.active {
    display: flex;
}

.upgrade-modal-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    overflow: hidden;
}

.upgrade-modal-header {
    padding: 32px 32px 0;
}

.upgrade-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #66ccbe 0%, #4db3a5 100%);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.upgrade-icon svg {
    width: 32px;
    height: 32px;
    color: white;
}

.upgrade-modal-header h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upgrade-modal-header p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.upgrade-modal-body {
    padding: 28px 32px;
}

.upgrade-pricing {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.upgrade-price {
    font-size: 36px;
    font-weight: 700;
    color: var(--text-primary);
}

.upgrade-price span {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-secondary);
}

.upgrade-price-note {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 4px;
}

.upgrade-features {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.upgrade-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--text-primary);
}

.upgrade-features li svg {
    width: 18px;
    height: 18px;
    color: #34c759;
    flex-shrink: 0;
}

.upgrade-modal-footer {
    padding: 0 32px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.upgrade-modal-footer .btn {
    width: 100%;
    justify-content: center;
}

.upgrade-modal-footer .btn-secondary {
    background: transparent;
    border: none;
    color: var(--text-secondary);
}

.upgrade-modal-footer .btn-secondary:hover {
    color: var(--text-primary);
}

/* Pro Customisation Modal - Source: prototype lines 2953-3180 */
.pro-customisation-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.pro-customisation-modal.active {
    display: flex;
}

.pro-customisation-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.pro-customisation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-primary);
}

.pro-customisation-header h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pro-customisation-close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color 0.2s;
}

.pro-customisation-close:hover {
    color: var(--text-primary);
}

.pro-customisation-body {
    padding: 28px;
}

.pro-section {
    margin-bottom: 28px;
}

.pro-section:last-child {
    margin-bottom: 0;
}

.pro-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pro-section-title svg {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.pro-customisation-footer {
    padding: 0 28px 28px;
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Logo Upload - Source: prototype lines 3042-3091 */
.logo-upload-area {
    border: 2px dashed var(--border-primary);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.logo-upload-area:hover {
    border-color: var(--accent-primary);
    background: rgba(235, 10, 68, 0.02);
}

.logo-upload-area.has-logo {
    border-style: solid;
    padding: 16px;
}

.logo-upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.logo-upload-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.logo-upload-hint {
    font-size: 12px;
    color: var(--text-muted);
}

.logo-preview {
    max-width: 200px;
    max-height: 80px;
    margin: 0 auto;
    display: block;
}

.logo-actions {
    margin-top: 12px;
    display: flex;
    gap: 8px;
    justify-content: center;
}

/* Brand Color Inputs - Source: prototype lines 3130-3180 */
.color-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.color-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.color-input-group label {
    font-size: 13px;
    color: var(--text-secondary);
}

.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

.color-input-wrapper input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    background: none;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch {
    border: 2px solid rgba(0,0,0,0.1);
    border-radius: 4px;
}

.color-hex-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 13px;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
    color: var(--text-primary);
    text-transform: uppercase;
}

.color-hex-input:focus {
    outline: none;
}

@media (max-width: 600px) {
    .color-inputs {
        grid-template-columns: 1fr;
    }
}

/* ===== ACCOUNTING SECTION ===== */
/* Source: SendBillie_Complete_Porting_Plan.md Phase 4 - Accounting */

.accounting-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.accounting-section .section-header {
    margin-bottom: 32px;
}

.accounting-section .section-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.accounting-section .section-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
}

.accounting-panel {
    background: var(--bg-primary);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    border: 1px solid var(--border-primary);
}

.accounting-panel .panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.accounting-panel .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.accounting-panel .panel-link {
    font-size: 13px;
    color: var(--accent-primary);
    text-decoration: none;
}

.accounting-panel .panel-link:hover {
    text-decoration: underline;
}

/* Export Type Grid */
.export-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.export-type-card {
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 16px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
}

.export-type-card:hover {
    background: var(--bg-tertiary);
}

.export-type-card.selected {
    border-color: var(--accent-primary);
    background: var(--bg-primary);
}

.export-type-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.export-type-desc {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Format Selection */
.format-section {
    margin-bottom: 24px;
}

.format-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Help affordance next to the Export Format picker heading */
.format-tooltip.format-title-help {
    align-items: center;
}

.format-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.format-card {
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.format-card:hover {
    background: var(--bg-tertiary);
}

.format-card.selected {
    border-color: var(--accent-teal);
    background: var(--bg-primary);
}

.format-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.format-ext {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.format-desc {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.format-tooltip {
    position: relative;
    display: inline-flex;
}

.format-tooltip .info-icon {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
    cursor: help;
}

.format-tooltip .tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-tooltip);
    color: var(--text-tooltip);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    width: 260px;
    text-align: left;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.format-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* Date Filter */
.date-filter-section {
    margin-bottom: 24px;
}

.date-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.date-filter-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.date-filter-toggle .filter-icon {
    width: 16px;
    height: 16px;
}

.date-filter-inputs {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.date-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.date-input-group label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Export Button */
.export-action {
    display: flex;
    justify-content: flex-end;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
}

.btn-export .export-icon {
    width: 18px;
    height: 18px;
}

.btn-export[disabled],
.btn-export.phx-submit-loading {
    opacity: 0.7;
    cursor: wait;
}

.btn-export[disabled] .export-icon {
    animation: spin 1s linear infinite;
}

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

/* BTW Summary */
.btw-panel {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}

.btw-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.btw-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 20px;
    position: relative;
}

.btw-card.highlight {
    border-color: var(--accent-teal);
    background: linear-gradient(135deg, var(--bg-primary) 0%, rgba(102, 204, 190, 0.05) 100%);
}

.btw-label {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

/* NL Compliance Phase 4: non-official-filing disclaimer under the BTW cards.
   Solid neutral fill + teal accent border/icon (no tint fills). */
.btw-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-left: 3px solid var(--accent-teal);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.btw-disclaimer-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--accent-teal);
}

.btw-value {
    font-size: 28px;
    font-weight: 700;
    font-family: 'SF Mono', Monaco, Consolas, monospace;
}

.btw-value.positive {
    color: var(--accent-green);
}

.btw-value.negative {
    color: var(--accent-red);
}

.btw-tooltip {
    position: absolute;
    top: 12px;
    right: 12px;
}

.btw-tooltip .info-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    cursor: help;
}

.btw-tooltip .tooltip-text {
    visibility: hidden;
    position: absolute;
    bottom: 100%;
    right: 0;
    background: var(--bg-tooltip);
    color: var(--text-tooltip);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    width: 220px;
    text-align: left;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    opacity: 0;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.btw-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

/* BTW Breakdown Table */
.btw-breakdown {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-primary);
}

.breakdown-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

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

.btw-table th,
.btw-table td {
    padding: 12px 16px;
    text-align: right;
    font-size: 13px;
}

.btw-table th:first-child,
.btw-table td:first-child {
    text-align: left;
}

.btw-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-primary);
}

.btw-table td {
    border-bottom: 1px solid var(--border-secondary);
    color: var(--text-primary);
}

.btw-table tbody tr:hover {
    background: var(--bg-secondary);
}

.btw-export {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
/* The BTW + ICP export buttons are .btn-secondary, so their .export-icon never picked up
   the .btn-export size rule and the SVG (no width/height) ballooned to the default. Size
   it here so they render as normal buttons. */
.btw-export .export-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Help Panel */
.help-panel {
    background: var(--bg-secondary);
}

.format-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
}

.format-help-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 16px;
}

.format-help-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.format-help-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.format-help-ext {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.format-help-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Accounting Empty State */
.accounting-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 60px 40px;
    min-height: 300px;
}

.accounting-empty-state .empty-state-icon {
    width: 80px;
    height: 80px;
    margin-bottom: 24px;
    color: var(--accent-teal);
    opacity: 0.6;
}

.accounting-empty-state .empty-state-icon svg {
    width: 100%;
    height: 100%;
}

.accounting-empty-state .empty-state-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px 0;
}

.accounting-empty-state .empty-state-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 0 24px 0;
    max-width: 400px;
    line-height: 1.6;
}

.accounting-empty-state .empty-state-actions {
    display: flex;
    gap: 12px;
}

/* Tooltip Variables */
:root {
    --bg-tooltip: #1d1d1f;
    --text-tooltip: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-tooltip: #ffffff;
        --text-tooltip: #1d1d1f;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .btw-summary-grid {
        grid-template-columns: 1fr;
    }

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

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

    .date-filter-inputs {
        flex-direction: column;
    }
}

/* ===== CREDIT NOTES STYLES ===== */
/* Source: prototype lines 25485-25832, 26026-26136 */

/* Credit Note Page Layout */
.credit-note-page,
.credit-note-requests-page {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.credit-note-container,
.credit-note-requests-container {
    background: var(--bg-primary);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
    overflow: hidden;
}

.credit-note-header,
.credit-note-requests-header {
    padding: 24px;
    border-bottom: 1px solid var(--border-secondary);
}

.credit-note-title,
.credit-note-requests-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px 0;
}

.credit-note-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.credit-note-content {
    max-height: 60vh;
    overflow-y: auto;
}

/* Credit Note Requests Modal Styles */
/* Source: prototype lines 25485-25651 */
.cn-requests-modal {
    max-width: 700px;
}

.cn-requests-modal .payment-modal-body {
    padding: 0;
    max-height: 60vh;
    overflow-y: auto;
}

.cn-requests-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-secondary);
    padding: 0 24px;
    gap: 4px;
}

.cn-requests-tab {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color 0.15s ease, border-color 0.15s ease;
}

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

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

.cn-requests-tab-count {
    background: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.cn-requests-content {
    min-height: 200px;
}

.cn-requests-tab-content {
    display: none;
}

.cn-requests-tab-content.active {
    display: block;
}

/* Credit Note Request Item Card */
/* Source: prototype lines 25652-25831 */
.cn-request-item {
    margin: 16px 24px;
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.cn-request-item:first-child {
    margin-top: 20px;
}

.cn-request-item:last-child {
    margin-bottom: 20px;
}

.cn-request-item:hover {
    border-color: var(--accent-teal);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

[data-theme="dark"] .cn-request-item {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .cn-request-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.cn-request-item--dismissed {
    background: var(--bg-tertiary);
    border-style: dashed;
}

.cn-request-item--dismissed:hover {
    border-color: var(--border-secondary);
    transform: translateY(-1px);
}

[data-theme="dark"] .cn-request-item--dismissed {
    background: #333335;
}

.cn-request-item--dismissed .cn-request-invoice,
.cn-request-item--dismissed .cn-request-amount {
    color: var(--text-secondary);
}

/* Archived cards: white background + subtle left accent stripe instead of
   the old grey-on-grey slab. Matches the invoice list row aesthetic and
   reads cleanly in both light + dark modes. The :--approved variant
   (green left border) still wins for "issued" archives; this is the
   default for rejected-then-archived. */
.cn-request-item--archived {
    background: var(--bg-primary);
    border-color: var(--border-primary);
    border-left: 3px solid var(--border-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}
[data-theme="dark"] .cn-request-item--archived {
    background: var(--bg-secondary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.cn-request-item--archived:hover {
    transform: translateY(-1px);
}

[data-theme="dark"] .cn-request-item--archived {
    background: #2a2a2c;
}

.cn-request-item--archived .cn-request-invoice,
.cn-request-item--archived .cn-request-amount {
    color: var(--text-muted);
}

.cn-request-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-secondary);
}

.cn-request-invoice {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.cn-request-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary);
}

.cn-request-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
    font-size: 13px;
    margin-bottom: 16px;
}

.cn-request-detail {
    display: flex;
    gap: 8px;
}

.cn-request-detail-label {
    color: var(--text-secondary);
    min-width: 80px;
}

.cn-request-detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

.cn-request-reason {
    font-size: 13px;
    padding: 12px 14px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 16px;
    border-left: 3px solid var(--warning-text);
}

.cn-request-reason-label {
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.cn-request-reason-text {
    color: var(--text-primary);
    line-height: 1.4;
}

/* Enhanced Action Buttons */
.cn-request-actions {
    display: flex;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-secondary);
    flex-wrap: wrap;
}

.cn-request-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cn-request-actions .btn:hover {
    transform: translateY(-1px);
}

.cn-request-actions .btn:active {
    transform: translateY(0);
}

.cn-request-actions .btn-issue {
    background: linear-gradient(135deg, var(--accent-teal) 0%, #3a9d8f 100%);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(77, 179, 165, 0.3);
}

.cn-request-actions .btn-issue:hover {
    box-shadow: 0 4px 12px rgba(77, 179, 165, 0.4);
}

.cn-request-actions .btn-dismiss {
    background: #ff3b30;
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
    transition: all 0.2s ease;
}

.cn-request-actions .btn-dismiss:hover {
    background: #e6251a;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
    transform: translateY(-1px);
}

[data-theme="dark"] .cn-request-actions .btn-dismiss {
    background: #ff3b30;
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.3);
}

[data-theme="dark"] .cn-request-actions .btn-dismiss:hover {
    background: #ff5147;
    box-shadow: 0 4px 12px rgba(255, 59, 48, 0.4);
}

.btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
}

.btn-danger {
    background: #ff3b30;
    color: white;
    border: none;
}

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

[data-theme="dark"] .btn-danger {
    background: #ff3b30;
    color: white;
}

[data-theme="dark"] .btn-danger:hover {
    background: #ff5147;
}

/* Empty State */
.cn-requests-empty {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
}

.cn-requests-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    opacity: 0.5;
    color: var(--accent-teal);
}

.cn-requests-empty-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.cn-requests-empty p {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 280px;
    margin: 0 auto;
}

/* New Credit Note Modal Styles */
/* Source: prototype lines 26026-26136 */
.cn-eligible-modal {
    max-width: 500px;
}

.cn-eligible-subtitle {
    padding: 0 24px 16px;
    font-size: 14px;
    color: var(--text-secondary);
}

.cn-eligible-section {
    margin-bottom: 16px;
}

.cn-eligible-section:last-child {
    margin-bottom: 0;
}

.cn-eligible-section-title {
    padding: 8px 24px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
}

.cn-eligible-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--border-secondary);
}

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

.cn-eligible-item:hover {
    background: var(--bg-secondary);
}

.cn-eligible-item:active {
    background: var(--bg-tertiary);
}

.cn-eligible-item-main {
    flex: 1;
    min-width: 0;
}

.cn-eligible-item-number {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.cn-eligible-item-client {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cn-eligible-item-right {
    text-align: right;
    flex-shrink: 0;
}

.cn-eligible-item-amount {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.cn-eligible-item-date {
    font-size: 12px;
    color: var(--text-muted);
}

.cn-eligible-item-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

.cn-eligible-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary);
    text-align: center;
}

.cn-eligible-view-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.15s ease;
}

.cn-eligible-view-all:hover {
    color: var(--accent-primary);
}

/* Credit Note Confirmation Overlay */
.cn-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cn-confirm-overlay.active {
    opacity: 1;
    visibility: visible;
}

.cn-confirm-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.cn-confirm-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.cn-confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
}

.cn-confirm-actions .btn-cancel {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
}

.cn-confirm-actions .btn-confirm {
    background: var(--accent-teal);
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

/* Dismiss Request Modal */
/* Source: prototype lines 25833-25996 */
.dismiss-request-modal {
    background: var(--bg-primary);
    border-radius: 12px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

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

.dismiss-request-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.dismiss-request-body {
    padding: 20px 24px;
}

.dismiss-request-summary {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.dismiss-request-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.dismiss-request-summary-row:first-child {
    padding-top: 0;
}

.dismiss-request-summary-row:last-child {
    padding-bottom: 0;
}

/* ===== REDUCED MOTION ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Payments Panel (Settings > Mollie Connect) ===== */
/* Phase 3 - Mollie Payment Integration */

.mollie-connection-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    border-left: 4px solid var(--accent-teal);
}

.mollie-connection-card--connected {
    border-left-color: var(--accent-teal);
}

.mollie-connection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.mollie-logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mollie-logo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--accent-teal);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.mollie-connection-name {
    font-weight: 600;
    font-size: 16px;
    color: var(--text-primary);
}

.mollie-connection-org {
    font-size: 13px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.mollie-status-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mollie-status-badge--active {
    background: rgba(77, 182, 165, 0.15);
    color: #4db6a5;
}

.mollie-connection-details {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-primary);
    margin-bottom: 20px;
}

.mollie-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mollie-detail-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.mollie-detail-value {
    font-size: 13px;
    color: var(--text-primary);
}

.mollie-mode-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mollie-mode-badge--test {
    background: rgba(255, 193, 7, 0.15);
    color: #ffc107;
}

.mollie-mode-badge--live {
    background: rgba(77, 182, 165, 0.15);
    color: #4db6a5;
}

.mollie-connection-actions {
    display: flex;
    gap: 12px;
}

/* Not connected state */
.mollie-connect-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mollie-connect-card {
    background: var(--bg-secondary);
    border-radius: 16px;
    padding: 40px 32px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mollie-connect-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(77, 182, 165, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.mollie-connect-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.mollie-connect-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 400px;
    margin-bottom: 24px;
}

.mollie-connect-btn {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    padding: 12px 28px;
}

/* How it works steps */
.mollie-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 4px;
}

.mollie-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.mollie-step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-teal);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mollie-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
}

.mollie-step-text strong {
    font-size: 14px;
    color: var(--text-primary);
}

.mollie-step-text span {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Info box */
.mollie-info-box {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    align-items: flex-start;
}

.mollie-info-icon {
    flex-shrink: 0;
    color: var(--accent-teal);
    margin-top: 1px;
}

/* Mollie fee details (collapsible) */
.mollie-fee-details {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-secondary);
}

.mollie-fee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-bottom: 10px;
}

.mollie-fee-table th {
    text-align: left;
    color: var(--text-secondary);
    font-weight: 500;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-secondary);
}

.mollie-fee-table td {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-secondary);
    color: var(--text-primary);
}

.mollie-fee-table td:last-child,
.mollie-fee-table th:last-child {
    text-align: right;
}

.mollie-fee-table tbody tr:last-child td {
    border-bottom: none;
}

.mollie-fee-source {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
}

.mollie-fee-link {
    color: var(--accent-teal);
    text-decoration: none;
}

.mollie-fee-link:hover {
    text-decoration: underline;
}

.mollie-fee-note {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.5;
}

.mollie-fee-table-sendbillie {
    border-top: 2px solid var(--accent-teal);
}

.mollie-fee-table-sendbillie td {
    color: var(--accent-teal);
}

/* Light mode overrides */
[data-theme="light"] .mollie-connection-card {
    background: #f8f9fa;
}

[data-theme="light"] .mollie-connect-card {
    background: #f8f9fa;
}

[data-theme="light"] .mollie-info-box {
    background: #f8f9fa;
}

[data-theme="light"] .mollie-connect-icon {
    background: rgba(77, 182, 165, 0.08);
}

/* Responsive */
@media (max-width: 768px) {
    .mollie-connect-card {
        padding: 32px 20px;
    }

    .mollie-connection-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .mollie-detail-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ===== Connected Banks Panel (Settings) ===== */
/* Phase 3 - TrueLayer Banking Integration */

.banking-empty-state {
    text-align: center;
    padding: 48px 24px;
}

.banking-empty-icon {
    margin-bottom: 20px;
}

.banking-empty-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.banking-empty-description {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto 24px;
}

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

.bank-connection-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    border-left: 3px solid var(--accent-teal);
}

.bank-connection-card--error {
    border-left-color: #eb0a44;
}

.bank-connection-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.bank-logo-placeholder {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 8px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bank-connection-details {
    min-width: 0;
}

.bank-connection-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bank-connection-iban {
    font-size: 13px;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.bank-connection-status {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.bank-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bank-status-badge--active {
    background: var(--bg-tertiary);
    color: #34d399;
}

.bank-status-badge--expired {
    background: var(--bg-tertiary);
    color: #fbbf24;
}

.bank-status-badge--error,
.bank-status-badge--revoked {
    background: var(--bg-tertiary);
    color: #f87171;
}

.bank-last-synced {
    font-size: 11px;
    color: var(--text-muted);
}

.bank-error-message {
    font-size: 11px;
    color: #f87171;
    max-width: 200px;
    text-align: right;
}

.bank-connection-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bank-connection-actions .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
}

.banking-info-box {
    margin-top: 24px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
}

.banking-info-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.banking-info-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Light mode overrides for bank status badges */
[data-theme="light"] .bank-status-badge--active {
    background: #e8e8ed;
    color: #065f46;
}

[data-theme="light"] .bank-status-badge--expired {
    background: #e8e8ed;
    color: #92400e;
}

[data-theme="light"] .bank-status-badge--error,
[data-theme="light"] .bank-status-badge--revoked {
    background: #e8e8ed;
    color: #991b1b;
}

[data-theme="light"] .bank-error-message {
    color: #dc2626;
}

/* Responsive: stack card layout on mobile and upright tablets (#1098: was 768px; at
   820 the side menu left the name ~150px, and stacked, the details block must span
   the card so a long account name wraps inside it instead of spilling out). */
@media (max-width: 900px) {
    .bank-connection-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bank-connection-info {
        width: 100%;
    }

    .bank-connection-name {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .bank-connection-status {
        align-items: flex-start;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .bank-connection-actions {
        width: 100%;
    }

    .bank-connection-actions .btn-sm {
        flex: 1;
    }

    .bank-error-message {
        max-width: none;
        text-align: left;
    }
}

/* ============================================================================
   Banking Page - Transaction Status Badges, Confidence Badges, Modal
   NEW: Phase 3 - Unified Banking Screen (Back Office > Banking)
   Design: Follows Expenses page pattern (stat cards, toolbar, table)
   ============================================================================ */

/* Transaction Status Badges */
.txn-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}


.txn-status--matched {
    background: var(--bg-tertiary);
    color: #4db6a5;
}

.txn-status--unmatched {
    background: var(--bg-tertiary);
    color: #eb0a44;
}

[data-theme="light"] .txn-status--matched {
    background: #e8e8ed;
    color: #0d7a6a;
}

[data-theme="light"] .txn-status--unmatched {
    background: #e8e8ed;
    color: #c62828;
}

/* Transaction Status - Suggested (needs review; amber) */
.txn-status--suggested {
    background: var(--bg-tertiary);
    color: #f5a623;
}

[data-theme="light"] .txn-status--suggested {
    background: #e8e8ed;
    color: #b8770a;
}

/* ============================================================================
   Banking feedback v2 — persistent inline status regions (no toasts/fades)
   ============================================================================ */
.banking-inline-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-secondary);
}

.banking-inline-status-text {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.4;
}

.banking-inline-sep {
    color: var(--text-muted);
}

.banking-inline-status--info {
    color: var(--text-primary);
}

.banking-inline-status--info svg {
    color: var(--accent-teal);
}

.banking-inline-status--note {
    color: var(--text-secondary);
}

.banking-inline-status--note svg {
    color: var(--text-muted);
}

.banking-inline-status--error {
    background: var(--bg-secondary);
    border-color: #eb0a44;
    color: #eb0a44;
}

.banking-inline-status--error svg {
    color: #eb0a44;
}

[data-theme="light"] .banking-inline-status--error {
    color: #c62828;
    border-color: #c62828;
}

[data-theme="light"] .banking-inline-status--error svg {
    color: #c62828;
}

.banking-inline-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: var(--accent-teal);
    cursor: pointer;
    text-decoration: underline;
}

.banking-inline-link:hover {
    opacity: 0.85;
}

/* ----------------------------------------------------------------------------
   Why a bank stopped (#1201). One block under the connection card, built from
   stored state so it survives a reload. It holds a title, one of her four
   explanations, the date it started and Reconnect -- so it is taller and
   stacked, where .banking-inline-status is a single centred line.

   Tokens only: the surrounding --error rule still carries literal hex, which is
   pre-existing and belongs to its own tidy, not to this feature.
   ------------------------------------------------------------------------- */
.bank-feed-problem {
    align-items: flex-start;
}

.bank-feed-problem__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    /* Nudged to sit on the title's cap height rather than the block's middle,
       which drifts as the body wraps to two or three lines. */
    margin-top: 2px;
}

.bank-feed-problem__text {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    /* Take the row and shrink inside it. Without the 0 basis the text keeps its
       min-content width, which on a phone is wider than what is left beside the
       icon -- so the whole text block wrapped under the icon and the warning
       triangle sat alone on a line of its own. */
    flex: 1 1 0;
    min-width: 0;
}

.bank-feed-problem__title {
    font-weight: 600;
    /* NOT the status colour. Inheriting it put the title on the --error red,
       about 3.6:1 on the dark card against a 7:1 rule. The status is carried by
       the icon and the border, which are decoration beside readable text rather
       than the text itself. Scoped to this block: the surrounding
       .banking-inline-status rule is untouched. */
    color: var(--text-primary);
}

.bank-feed-problem__body {
    font-size: 13px;
    line-height: 1.5;
    /* Her explanations are two or three sentences, so the body is the reading
       text and takes the neutral colour, not the status colour. */
    color: var(--text-secondary);
}

.bank-feed-problem__since {
    font-size: 12px;
    color: var(--text-muted);
}

.bank-feed-problem__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .bank-feed-problem {
        flex-wrap: wrap;
    }

    .bank-feed-problem__actions {
        /* Under the text, not squeezed beside it: at phone width there is no
           room for three sentences and a button on one row. */
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
    }

    .bank-feed-problem__actions .btn-sm {
        flex: 1;
    }
}

/* Confidence Badges (reused from previous) */
.confidence-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.confidence-badge--high {
    background: var(--bg-tertiary);
    color: #4db6a5;
}

.confidence-badge--medium {
    background: var(--bg-tertiary);
    color: #f5a623;
}

.confidence-badge--low {
    background: var(--bg-tertiary);
    color: #eb0a44;
}

[data-theme="light"] .confidence-badge--high {
    background: #e8e8ed;
    color: #0d7a6a;
}

[data-theme="light"] .confidence-badge--medium {
    background: #e8e8ed;
    color: #b87a00;
}

[data-theme="light"] .confidence-badge--low {
    background: #e8e8ed;
    color: #c62828;
}

/* Banking summary + highlight grids (#1098). Desktop is exactly the old inline
   3-column grid; the narrow-screen behaviour is in the media query below. */
.banking-stat-grid,
.banking-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Banking on phones + upright tablets (#1098). Nothing may push the page wider than
   the screen, and every Accept stays reachable:
     - summary cards wrap onto a new line when they no longer fit side by side;
     - the three latest-transaction (suggested match) cards stack, two across when
       there is room, one across on a phone; long names wrap inside the card;
     - the Older Transactions table turns each row into a stacked card (name +
       amount, date + status, description, then the actions on their own line in
       the same order: Accept, Match manually). The column headings hide; the
       select-all checkbox stays. The `!important`s only override the table's
       inline cell styles, and only below 900px. */
@media (max-width: 900px) {
    .banking-stat-grid { display: flex; flex-wrap: wrap; }
    .banking-stat-grid > .stat-card { flex: 1 1 0; }

    .banking-highlight-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
    .banking-highlight-grid > .txn-highlight-card { min-width: 0; }
    /* Card head: the amount never breaks mid-number; when amount + status badge don't
       fit side by side the badge drops under the amount. Only the counterparty name may
       break anywhere (the description already ends in an ellipsis). */
    .banking-card-head { flex-wrap: wrap; column-gap: 8px; row-gap: 6px; }
    .banking-card-amount { white-space: nowrap; }
    .banking-card-name { overflow-wrap: anywhere; }

    .banking-txn-table,
    .banking-txn-table thead,
    .banking-txn-table tbody { display: block; width: 100%; }
    .banking-txn-table thead tr { display: flex; }
    .banking-txn-table thead th:not(:first-child) { display: none; }
    .banking-txn-table tbody tr {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check name   amount"
            "check date   status"
            "check desc   desc"
            "check action action";
        column-gap: 12px;
        row-gap: 4px;
        padding: 14px 16px;
    }
    .banking-txn-table tbody td { display: block; min-width: 0; padding: 0 !important; text-align: left !important; max-width: none !important; }
    .banking-txn-table tbody td:nth-child(1) { grid-area: check; }
    .banking-txn-table tbody td:nth-child(2) { grid-area: date; }
    .banking-txn-table tbody td:nth-child(3) { grid-area: name; overflow-wrap: anywhere; }
    .banking-txn-table tbody td:nth-child(4) { grid-area: desc; }
    .banking-txn-table tbody td:nth-child(5) { grid-area: amount; text-align: right !important; }
    .banking-txn-table tbody td:nth-child(6) { grid-area: status; text-align: right !important; }
    .banking-txn-table tbody td:nth-child(7) { grid-area: action; }
    .banking-txn-table tbody td:nth-child(7) > * { margin-top: 6px; }
    .banking-txn-table tbody td:nth-child(7) > div { flex-wrap: wrap; justify-content: flex-start !important; }
    .banking-txn-table tbody td:nth-child(7) > div > span { flex-basis: 100%; }

    /* Ticking a row shows the bulk bar; its buttons wrap instead of pushing the page
       sideways (scoped to Banking: .bulk-action-bar is shared with Invoices). */
    .banking-bulk-bar { flex-wrap: wrap; }
}

/* Between 900px and 1180px (small laptops, 12.9" tablets held upright) the three
   latest-transaction cards could not shrink below their content, so the page panned
   sideways (19px at 1024). Letting them shrink fixes it, with the same card-head wrap
   as on phones (badge under the amount, amount never split, long names wrap), and the
   same wrapping bulk bar when a row is ticked (it pushed the page 59-109px); from
   1180px they already fit, and these rules do not apply there, so 1180+ is unchanged. */
@media (min-width: 900.02px) and (max-width: 1179.98px) {
    .banking-highlight-grid > .txn-highlight-card { min-width: 0; }
    .banking-card-head { flex-wrap: wrap; column-gap: 8px; row-gap: 6px; }
    .banking-card-amount { white-space: nowrap; }
    .banking-card-name { overflow-wrap: anywhere; }
    .banking-bulk-bar { flex-wrap: wrap; }
}

/* Transaction Highlight Card hover effect */
.txn-highlight-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.txn-highlight-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Manual Match Modal */
.manual-match-modal {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    max-width: 520px;
    width: 90vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.manual-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 24px 16px 24px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-primary);
}

.manual-match-body {
    overflow-y: auto;
    padding: 24px;
    flex: 1;
}

.manual-match-summary {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.manual-match-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-secondary);
}

/* Invoice Search (inside modal) */
.invoice-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Invoice Results (inside modal) */
.invoice-results {
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--border-secondary);
    border-radius: 8px;
}

.invoice-option {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-secondary);
    transition: background 0.1s;
}

.invoice-option:last-child {
    border-bottom: none;
}

.invoice-option:hover {
    background: var(--bg-secondary);
}

.invoice-option--selected {
    background: var(--bg-tertiary);
    border-left: 3px solid var(--accent-teal);
}

/* An invoice already settled by another payment: shown, never pickable, with
   the reason beside it instead of in a dialog afterwards (#1172, 0b item 4).
   Neutral background and muted text -- no colour tint fill. */
.invoice-option--unavailable {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    cursor: default;
    background: var(--bg-secondary);
}

.invoice-option--unavailable:hover {
    background: var(--bg-secondary);
}

.invoice-option--unavailable .invoice-option-number,
.invoice-option--unavailable .invoice-option-client,
.invoice-option--unavailable .invoice-option-amount {
    color: var(--text-muted);
}

.invoice-option-reason {
    font-size: 12px;
    color: var(--text-secondary);
}

/* "Create a new invoice for this payment" sits under the list, before the
   confirm row: a way out when the invoice simply does not exist yet. */
.invoice-create-row {
    padding: 10px 0 2px;
}

.invoice-option-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 12px;
}

.invoice-option-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.invoice-option-number {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.invoice-option-client {
    font-size: 13px;
    color: var(--text-muted);
}

.invoice-option-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.invoice-option-amount {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.invoice-option-status {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 8px;
    text-transform: capitalize;
}

.invoice-option-status--sent {
    background: var(--bg-tertiary);
    color: #4db6a5;
}

.invoice-option-status--overdue {
    background: var(--bg-tertiary);
    color: #eb0a44;
}

[data-theme="light"] .invoice-option-status--sent {
    background: #e8e8ed;
    color: #0d7a6a;
}

[data-theme="light"] .invoice-option-status--overdue {
    background: #e8e8ed;
    color: #c62828;
}

[data-theme="light"] .manual-match-modal {
    background: #ffffff;
    border-color: #e0e0e0;
}

[data-theme="light"] .manual-match-header {
    border-bottom-color: #e0e0e0;
}

/* Smart Match Analysis Cards */
.match-analysis-card {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border-left: 3px solid var(--text-muted);
}

.match-analysis-card--exact {
    border-left-color: var(--accent-teal);
}

.match-analysis-card--possible {
    border-left-color: #f5a623;
}

.match-analysis-card--none {
    border-left-color: var(--text-muted);
}

.match-analysis-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.match-analysis-content {
    flex: 1;
    min-width: 0;
}

.match-analysis-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.match-analysis-message {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.match-analysis-message strong {
    color: var(--text-primary);
    font-weight: 600;
}

.match-analysis-actions {
    margin-top: 12px;
}

/* Transaction Status - Categorized */
.txn-status--categorized {
    background: var(--bg-tertiary);
    color: #8e8ea0;
}

[data-theme="light"] .txn-status--categorized {
    background: #e8e8ed;
    color: #6c6c7e;
}

/* Not-Invoice Section (inside modal) — prominent card design */
.not-invoice-section {
    border-top: 1px solid var(--border-secondary);
    padding-top: 16px;
    margin-top: 8px;
}

.not-invoice-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.not-invoice-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f5a62320;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5a623;
}

/* Dark mode: solid background for icon */
.not-invoice-icon {
    background: #3a3220;
}

[data-theme="light"] .not-invoice-icon {
    background: #fef3e0;
}

.not-invoice-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.not-invoice-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
}

.not-invoice-content {
    padding: 0;
}

[data-theme="light"] .match-analysis-card {
    background: #f5f5f7;
}

/* Responsive: Banking page mobile adjustments */
@media (max-width: 768px) {
    .manual-match-modal {
        max-width: none;
        max-height: 90vh;
        border-radius: 12px;
    }

    .match-analysis-card {
        flex-direction: column;
        gap: 8px;
    }
}

/* ================================================================
   AUTH PAGES - Login / Register Split Layout
   ================================================================ */

/* Layout 3: Full Gradient + Floating White Card */
.auth-container {
    display: flex;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(45deg, #eb0a44 0%, #f5775e 50%, #ff8cd0 100%);
    align-items: center;
    justify-content: center;
    padding: 24px 80px;
    gap: 80px;
    position: relative;
}

/* Left Content - Brand Welcome (on gradient) */
.auth-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    max-width: 540px;
}

.auth-welcome-brand {
    display: flex;
    flex-direction: column;
    max-width: 500px;
}

/* Tagline below the hero logo — Halyard Display Medium, spans logo width */
.auth-welcome-subtitle {
    font-family: 'halyard-display-variable', 'halyard-display', serif;
    font-size: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 12px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

/* Descriptor under the tagline — reads as one unit with it, so the tagline
   keeps only a small gap above and the descriptor now owns the 48px gap
   down to the features list. */
.auth-welcome-descriptor {
    font-family: 'halyard-display-variable', 'halyard-display', serif;
    font-size: 18px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 48px;
    line-height: 1.5;
    max-width: 420px;
}

/* Bullet features — Halyard Display Book, generous spacing */
.auth-welcome-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.auth-welcome-features li {
    font-family: 'halyard-display-variable', 'halyard-display', serif;
    font-size: 20px;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.5;
    padding-left: 24px;
    position: relative;
}

.auth-welcome-features li::before {
    content: '\25AA';
    position: absolute;
    left: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12px;
    top: 8px;
}

.auth-welcome-footer {
    position: absolute;
    bottom: 40px;
    left: 80px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
}

/* ===== Welcome Back Screen ===== */

.wb-icon {
    margin-bottom: 16px;
}

.wb-email {
    font-size: 15px;
    color: #6e6e73;
    margin-bottom: 4px;
}

.wb-company {
    font-size: 14px;
    color: var(--accent-teal, #4db3a5);
    font-weight: 500;
    margin-bottom: 4px;
}

.wb-last-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #8e8e93;
    margin-top: 12px;
}

.wb-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.wb-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 8px;
    background: #f5f5f7;
    border-radius: 12px;
}

.wb-stat-value {
    font-size: 22px;
    font-weight: 600;
    color: #1d1d1f;
    font-family: 'halyard-display-variable', 'halyard-display', serif;
}

.wb-stat-label {
    font-size: 11px;
    color: #8e8e93;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wb-setup-prompt {
    padding: 24px;
    background: #f5f5f7;
    border-radius: 12px;
}

.wb-secondary-btn {
    display: inline-block;
    padding: 10px 24px;
    border: 1.5px solid var(--accent-teal, #4db3a5);
    border-radius: 8px;
    color: var(--accent-teal, #4db3a5);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.wb-secondary-btn:hover {
    background: var(--accent-teal, #4db3a5);
    color: #fff;
}

/* Right Panel - Floating White Card */
.auth-form-panel {
    flex: 0 0 460px;
    min-height: 680px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 48px;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.08);
}

.auth-form-container {
    width: 100%;
    max-width: 360px;
}

/* Tab Toggle */
.auth-tabs {
    display: flex;
    background: var(--bg-tertiary);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 40px;
}

.auth-tab {
    flex: 1;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    background: linear-gradient(135deg, rgba(255,140,208,0.15) 0%, rgba(245,119,94,0.15) 50%, rgba(235,10,68,0.15) 100%);
    color: var(--text-secondary);
    text-align: center;
}

.auth-tab--active {
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(235, 10, 68, 0.25);
}

.auth-tab:hover {
    transform: scale(1.02);
}

.auth-tab:not(.auth-tab--active):hover {
    background: linear-gradient(135deg, rgba(255,140,208,0.25) 0%, rgba(245,119,94,0.25) 50%, rgba(235,10,68,0.25) 100%);
    color: var(--text-primary);
}

/* Form Styles */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-input-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.auth-input {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-primary);
    border-radius: 10px;
    font-size: 15px;
    color: var(--text-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}

.auth-input:focus {
    border-color: var(--accent-teal, #4db3a5);
    box-shadow: 0 0 0 3px rgba(77, 179, 165, 0.12);
}

.auth-input--valid {
    border-color: #30d158;
    box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.12);
}

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

.auth-input--error {
    border-color: #ff453a;
    box-shadow: 0 0 0 3px rgba(255, 69, 58, 0.12);
}

/* Password wrapper with eye toggle */
.auth-password-wrapper {
    position: relative;
}

.auth-password-wrapper .auth-input {
    padding-right: 48px;
}

.auth-password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.auth-password-toggle:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-radius: 6px;
}

/* Welcome panel hero logo (SVG with mascot + "Hello SendBillie!" text) */
.auth-welcome-logo-img {
    width: 100%;
    max-width: 440px;
    height: auto;
    object-fit: contain;
    object-position: left;
    margin-bottom: 36px;
}

/* Remember me hint text */
.auth-remember-hint {
    width: 100%;
    font-size: 12px;
    color: #8e8e93;
    font-style: italic;
}

/* Checkbox row */
.auth-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

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

.auth-checkbox-row label {
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
}

.auth-checkbox-row .auth-tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    cursor: help;
    position: relative;
}

/* Forgot password link */
.auth-forgot-link {
    display: block;
    text-align: right;
    font-size: 13px;
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
    font-weight: 500;
    margin-top: 6px;
    transition: opacity 0.2s ease;
}

.auth-forgot-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.auth-forgot-link:focus {
    outline: 2px solid var(--accent-teal, #4db3a5);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Submit button */
.auth-submit-btn {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff8cd0 0%, #f5775e 50%, #eb0a44 100%);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
    margin-top: 8px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
}

.auth-submit-btn:hover:not(:disabled) {
    transform: scale(1.03) translateY(-1px);
    box-shadow: 0 6px 20px rgba(235, 10, 68, 0.3);
    filter: brightness(1.05);
}

.auth-submit-btn:active:not(:disabled) {
    transform: scale(1) translateY(0);
    box-shadow: 0 2px 8px rgba(235, 10, 68, 0.2);
}

.auth-submit-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: none;
}

/* Error message */
.auth-error-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255, 69, 58, 0.08);
    border: 1px solid rgba(255, 69, 58, 0.2);
    border-radius: 10px;
    font-size: 14px;
    color: #ff453a;
    line-height: 1.4;
}

.auth-error-msg svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.auth-error-msg a {
    color: #ff453a;
    font-weight: 600;
    text-decoration: underline;
}

/* Warning banner (caps lock) */
.auth-warning-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 159, 10, 0.1);
    border: 1px solid rgba(255, 159, 10, 0.25);
    border-radius: 10px;
    font-size: 14px;
    color: #ff9f0a;
    font-weight: 500;
}

.auth-warning-msg svg {
    flex-shrink: 0;
}

/* Suggestion banner (typo detection) */
.auth-suggestion-msg {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(77, 179, 165, 0.1);
    border: 1px solid rgba(77, 179, 165, 0.25);
    border-radius: 10px;
    font-size: 14px;
    color: var(--accent-teal);
}

.auth-suggestion-msg button {
    background: none;
    border: none;
    color: var(--accent-teal);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    font-size: 14px;
    padding: 0;
    white-space: nowrap;
}

.auth-suggestion-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 2px;
    display: flex;
}

/* Lockout state */
.auth-lockout-card {
    text-align: center;
    padding: 32px 24px;
}

.auth-lockout-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(255, 69, 58, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff453a;
}

.auth-lockout-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.auth-lockout-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}

.auth-lockout-timer {
    font-size: 36px;
    font-weight: 700;
    color: #ff453a;
    font-variant-numeric: tabular-nums;
    margin-bottom: 24px;
}

.auth-lockout-link {
    font-size: 14px;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-lockout-link:hover {
    text-decoration: underline;
}

/* Loading overlay */
.auth-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: 10px;
    z-index: 10;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

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

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

.auth-loading-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
}

/* Registration placeholder */
.auth-register-placeholder {
    text-align: center;
    padding: 48px 24px;
}

.auth-register-placeholder-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: rgba(77, 179, 165, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal);
}

.auth-register-placeholder h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.auth-register-placeholder p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Options row (remember me + forgot password) */
.auth-options-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-checkbox-row span {
    font-size: 14px;
    color: var(--text-primary);
}

/* Lockout actions row */
.auth-lockout-actions {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.auth-lockout-divider {
    color: var(--text-muted);
}

.auth-lockout-card h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.auth-lockout-card p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 0;
}

/* Error warning variant (lockout approaching) */
.auth-error-msg--warning {
    background: rgba(255, 159, 10, 0.08);
    border-color: rgba(255, 159, 10, 0.2);
    color: #ff9f0a;
}

.auth-error-msg--warning a {
    color: #ff9f0a;
}

/* Success message */
.auth-success-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(48, 209, 88, 0.08);
    border: 1px solid rgba(48, 209, 88, 0.2);
    border-radius: 10px;
    font-size: 14px;
    color: #30d158;
    line-height: 1.4;
    margin-bottom: 24px;
}

.auth-success-msg svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Register placeholder adjustments */
.auth-register-placeholder h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.auth-register-placeholder p {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin-bottom: 32px;
}

/* Suggestion msg button styles */
.auth-suggestion-accept {
    text-decoration: underline !important;
}

.auth-suggestion-dismiss {
    font-size: 18px !important;
    text-decoration: none !important;
    color: var(--text-muted) !important;
    opacity: 0.7;
}

.auth-suggestion-dismiss:hover {
    opacity: 1;
}

/* Light mode overrides */
[data-theme="light"] .auth-loading-overlay {
    background: rgba(255, 255, 255, 0.9);
}

/* Responsive: tablet */
@media (max-width: 1024px) {
    .auth-container {
        padding: 48px;
        gap: 48px;
    }

    .auth-form-panel {
        flex: 0 0 420px;
        padding: 36px;
    }

    .auth-welcome-logo-img {
        max-width: 320px;
        margin-bottom: 24px;
    }

    .auth-welcome-subtitle {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .auth-welcome-descriptor {
        font-size: 15px;
        margin-bottom: 32px;
    }

    .auth-welcome-features li {
        font-size: 14px;
    }

    .auth-welcome-footer {
        left: 48px;
        bottom: 24px;
    }
}

/* Responsive: mobile stacking */
@media (max-width: 768px) {
    .auth-container {
        flex-direction: column;
        padding: 0;
        gap: 0;
        align-items: stretch;
    }

    .auth-welcome {
        padding: 40px 28px 28px;
        min-height: auto;
    }

    .auth-welcome-logo-img {
        max-width: 240px;
        margin-bottom: 16px;
    }

    .auth-welcome-subtitle {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .auth-welcome-descriptor {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .auth-welcome-features {
        gap: 18px;
    }

    .auth-welcome-features li {
        font-size: 13px;
    }

    .auth-welcome-footer {
        display: none;
    }

    .auth-form-panel {
        flex: 1;
        border-radius: 24px 24px 0 0;
        max-height: none;
        padding: 36px 28px;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.1);
    }
}

/* ================================================================
   AUTH - NEW COMPONENTS (Registration, Password Requirements, etc.)
   ================================================================ */

/* Loading subtext */
.auth-loading-subtext {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: -8px;
}

/* Email availability status */
.auth-email-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-top: 4px;
    min-height: 20px;
    transition: opacity 0.2s ease;
}

.auth-email-status--hidden {
    opacity: 0;
    height: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
}

.auth-email-status--checking {
    color: var(--text-muted);
}

.auth-email-status--available {
    color: #30d158;
}

.auth-email-status--taken {
    color: #ff453a;
}

.auth-email-status--error {
    color: #ff453a;
}

.auth-email-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid var(--border-primary);
    border-top-color: var(--text-muted);
    border-radius: 50%;
    animation: auth-spin 0.8s linear infinite;
    flex-shrink: 0;
}

.auth-email-status a,
.auth-email-status button.auth-inline-link {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

/* Inline link buttons (look like links) */
.auth-inline-link {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
    font-weight: 600;
}

.auth-inline-link:hover {
    opacity: 0.8;
}

/* Password Requirements Box */
.auth-pw-requirements {
    background: var(--bg-secondary, #f5f5f7);
    border: 1px solid var(--border-secondary, #e5e5ea);
    border-radius: 10px;
    padding: 14px 16px;
    margin-top: 8px;
}

.auth-pw-req-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #6e6e73);
}

.auth-pw-strength-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.auth-pw-strength-badge--weak {
    background: rgba(255, 69, 58, 0.1);
    color: #ff453a;
}

.auth-pw-strength-badge--fair {
    background: rgba(255, 159, 10, 0.1);
    color: #ff9f0a;
}

.auth-pw-strength-badge--strong {
    background: rgba(48, 209, 88, 0.1);
    color: #30d158;
}

.auth-pw-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-pw-req-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted, #6e6e73);
    transition: color 0.2s ease;
}

.auth-pw-req-item svg {
    flex-shrink: 0;
}

.auth-pw-req-item--met {
    color: #30d158;
}

/* Login error banner */
.auth-error-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #fff2f2;
    border: 1px solid #ffcccc;
    border-radius: 10px;
    color: #cc3333;
    font-size: 14px;
    font-weight: 500;
}

.auth-error-banner svg {
    flex-shrink: 0;
    color: #ff453a;
}

.auth-success-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #f0faf7;
    border: 1px solid #b8e6d9;
    border-radius: 10px;
    font-size: 14px;
    color: #1d1d1f;
    line-height: 1.4;
}

.auth-success-banner svg {
    flex-shrink: 0;
    color: #30c961;
}

/* Field-level error */
.auth-field-error {
    font-size: 13px;
    color: #ff453a;
    margin-top: 4px;
}

/* Terms links */
.auth-terms-link {
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
    font-weight: 500;
}

.auth-terms-link:hover {
    text-decoration: underline;
}

/* Secondary link (below registration form) */
.auth-secondary-link {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary, #6e6e73);
    margin-top: 12px;
}

.auth-secondary-link .auth-inline-link {
    color: var(--accent-teal, #4db3a5);
}

/* Security badges footer */
.auth-footer-badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-secondary, #e5e5ea);
}

.auth-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted, #6e6e73);
}

.auth-badge svg {
    flex-shrink: 0;
    color: var(--text-muted, #6e6e73);
}

/* Help link */
.auth-help-link {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted, #6e6e73);
    margin-top: 12px;
}

.auth-help-link a {
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
    font-weight: 500;
}

.auth-help-link a:hover {
    text-decoration: underline;
}

/* Check Your Inbox Screen */
.auth-check-inbox {
    text-align: center;
    padding: 32px 0;
}

.auth-check-inbox-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: rgba(77, 179, 165, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-teal, #4db3a5);
}

.auth-check-inbox h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    margin-bottom: 8px;
}

.auth-check-inbox p {
    font-size: 14px;
    color: var(--text-secondary, #6e6e73);
    line-height: 1.5;
    margin-bottom: 4px;
}

.auth-check-inbox-hint {
    font-size: 13px !important;
    color: var(--text-muted, #6e6e73) !important;
    font-style: italic;
    margin-bottom: 24px !important;
}

.auth-resend-btn {
    display: inline-block;
    padding: 10px 24px;
    background: none;
    border: 2px solid var(--accent-teal, #4db3a5);
    border-radius: 10px;
    color: var(--accent-teal, #4db3a5);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    margin-bottom: 16px;
}

.auth-resend-btn:hover {
    background: var(--accent-teal, #4db3a5);
    color: #fff;
}

.auth-check-inbox-back {
    margin-top: 8px;
}

.auth-check-inbox-back .auth-inline-link {
    color: var(--accent-teal, #4db3a5);
    font-weight: 500;
    font-size: 14px;
}

/* Email Confirmation Success Screen */
.auth-confirmation-success {
    text-align: center;
    padding: 48px 0;
}

.auth-confirmation-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    background: rgba(48, 209, 88, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #30d158;
}

.auth-confirmation-icon--processing {
    background: rgba(77, 179, 165, 0.1);
    color: var(--accent-teal, #4db3a5);
}

.auth-confirmation-success h2 {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    margin-bottom: 8px;
}

.auth-confirmation-success p {
    font-size: 14px;
    color: var(--text-secondary, #6e6e73);
    line-height: 1.5;
    margin-bottom: 32px;
}

/* Recently Used Email Suggestion */
.auth-recent-email {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(77, 179, 165, 0.06);
    border: 1px solid rgba(77, 179, 165, 0.15);
    border-radius: 10px;
    margin-bottom: 16px;
}

.auth-recent-email-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary, #1d1d1f);
    padding: 0;
    flex: 1;
    text-align: left;
}

.auth-recent-email-btn:hover {
    color: var(--accent-teal, #4db3a5);
}

.auth-recent-email-btn svg {
    flex-shrink: 0;
    color: var(--accent-teal, #4db3a5);
}

.auth-recent-dismiss {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-muted, #6e6e73);
    cursor: pointer;
    padding: 2px 4px;
    opacity: 0.6;
    flex-shrink: 0;
}

.auth-recent-dismiss:hover {
    opacity: 1;
}

/* ===== LEGAL PAGES ===== */
/* Terms of Service, Privacy Policy, Cookie Policy */

.legal-page {
    min-height: 100vh;
    background: #fafafa;
    color: #1d1d1f;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
}

/* Header */
.legal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background: #ffffff;
    border-bottom: 1px solid #e5e5ea;
    position: sticky;
    top: 0;
    z-index: 10;
}

.legal-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.legal-logo {
    height: 32px;
    width: auto;
    color: var(--accent-primary);
}

.legal-nav {
    display: flex;
    gap: 24px;
}

.legal-nav-link {
    font-size: 14px;
    font-weight: 500;
    color: #6e6e73;
    text-decoration: none;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}

.legal-nav-link:hover {
    color: #1d1d1f;
}

.legal-nav-link--active {
    color: #1d1d1f;
    border-bottom-color: var(--accent-teal, #4db3a5);
}

/* Content */
.legal-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 48px 24px 80px;
}

.legal-title {
    font-size: 32px;
    font-weight: 700;
    color: #1d1d1f;
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.legal-updated {
    font-size: 14px;
    color: #8e8e93;
    margin: 0 0 40px 0;
}

/* Table of Contents */
.legal-toc {
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 48px;
}

.legal-toc-title {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 16px 0;
}

.legal-toc-list {
    margin: 0;
    padding-left: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-toc-list li {
    font-size: 14px;
    color: #6e6e73;
}

.legal-toc-list a {
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
}

.legal-toc-list a:hover {
    text-decoration: underline;
}

/* Sections */
.legal-section {
    margin-bottom: 48px;
    scroll-margin-top: 80px;
}

.legal-section h2 {
    font-size: 22px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 16px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e5e5ea;
}

.legal-section h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 24px 0 12px 0;
}

.legal-section h4 {
    font-size: 15px;
    font-weight: 600;
    color: #6e6e73;
    margin: 16px 0 8px 0;
}

.legal-section p {
    font-size: 15px;
    color: #3a3a3c;
    margin: 0 0 16px 0;
}

.legal-section ul,
.legal-section ol {
    font-size: 15px;
    color: #3a3a3c;
    margin: 0 0 16px 0;
    padding-left: 24px;
}

.legal-section li {
    margin-bottom: 8px;
}

.legal-section a {
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

.legal-section code {
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    font-size: 13px;
    background: #f0f0f5;
    padding: 2px 6px;
    border-radius: 4px;
    color: #1d1d1f;
}

/* Definition Lists */
.legal-definitions {
    margin: 0 0 16px 0;
}

.legal-definitions dt {
    font-size: 15px;
    font-weight: 600;
    color: #1d1d1f;
    margin-top: 16px;
}

.legal-definitions dd {
    font-size: 15px;
    color: #3a3a3c;
    margin: 4px 0 0 0;
    padding-left: 0;
}

/* Highlight Box */
.legal-highlight {
    background: linear-gradient(135deg, #f0faf8 0%, #e8f7f4 100%);
    border: 1px solid #b8e6dc;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 16px 0 24px 0;
}

.legal-highlight h3 {
    font-size: 16px;
    font-weight: 600;
    color: #2d8f7b;
    margin: 0 0 8px 0;
}

.legal-highlight p {
    color: #3a3a3c;
    margin: 0;
}

.legal-highlight p:last-child {
    margin-bottom: 0;
}

/* Example Box */
.legal-example {
    background: #f5f5f7;
    border-left: 3px solid var(--accent-teal, #4db3a5);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin: 16px 0 24px 0;
}

.legal-example h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-teal, #4db3a5);
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.legal-example p {
    font-size: 14px;
    color: #3a3a3c;
    margin: 0;
}

/* Tables */
.legal-table-wrapper {
    overflow-x: auto;
    margin: 16px 0 24px 0;
    border-radius: 10px;
    border: 1px solid #e5e5ea;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.legal-table thead {
    background: #f5f5f7;
}

.legal-table th {
    font-weight: 600;
    color: #1d1d1f;
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e5ea;
    white-space: nowrap;
}

.legal-table td {
    color: #3a3a3c;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f5;
    vertical-align: top;
}

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

.legal-table tbody tr:hover {
    background: #fafafa;
}

/* Footer */
.legal-footer {
    background: #ffffff;
    border-top: 1px solid #e5e5ea;
    padding: 24px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.legal-footer p {
    font-size: 13px;
    color: #8e8e93;
    margin: 0;
}

.legal-footer-links {
    display: flex;
    gap: 24px;
}

.legal-footer-links a {
    font-size: 13px;
    color: #6e6e73;
    text-decoration: none;
}

.legal-footer-links a:hover {
    color: var(--accent-teal, #4db3a5);
}

/* Cookie Settings control in the legal footers (#961). Art. 7(3) wants withdrawing
   consent to be as easy as giving it, and the Cookie Policy promised this control in
   the footer. It is a <button> because it opens the preference modal rather than
   navigating, but it must read as one of the sibling links. */
.legal-footer-links button.legal-footer-cookie-btn {
    font-family: inherit;
    font-size: 13px;
    color: #6e6e73;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}

.legal-footer-links button.legal-footer-cookie-btn:hover {
    color: var(--accent-teal, #4db3a5);
}

.legal-footer-links button.legal-footer-cookie-btn:focus-visible {
    outline: 2px solid var(--accent-teal, #4db3a5);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Back to Top Button */
.legal-back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    background: #ffffff;
    border: 1px solid #e5e5ea;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6e6e73;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    z-index: 5;
}

.legal-back-to-top:hover {
    background: #f5f5f7;
    color: #1d1d1f;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Print Styles */
@media print {
    .legal-header,
    .legal-back-to-top {
        display: none;
    }

    .legal-page {
        background: #ffffff;
    }

    .legal-content {
        max-width: 100%;
        padding: 0;
    }

    .legal-section {
        page-break-inside: avoid;
    }

    .legal-toc {
        page-break-after: always;
    }

    .legal-footer {
        border-top: 1px solid #ccc;
        padding: 12px 0;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .legal-header {
        flex-direction: column;
        gap: 16px;
        padding: 16px 20px;
    }

    .legal-nav {
        gap: 16px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .legal-nav-link {
        font-size: 13px;
    }

    .legal-content {
        padding: 32px 16px 60px;
    }

    .legal-title {
        font-size: 26px;
    }

    .legal-section h2 {
        font-size: 19px;
    }

    .legal-section h3 {
        font-size: 16px;
    }

    .legal-toc {
        padding: 16px 20px;
    }

    .legal-highlight {
        padding: 16px 18px;
    }

    .legal-footer {
        flex-direction: column;
        gap: 12px;
        padding: 20px 16px;
        text-align: center;
    }

    .legal-footer-links {
        gap: 16px;
    }

    .legal-table-wrapper {
        margin-left: -16px;
        margin-right: -16px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}

/* ===== COOKIE CONSENT BANNER ===== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bg-primary, #ffffff);
    border-top: 1px solid var(--border-primary, #e5e5ea);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    padding: 20px 24px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.cookie-banner--hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.cookie-banner-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 24px;
}

.cookie-banner-text {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.cookie-banner-icon {
    flex-shrink: 0;
    color: var(--accent-teal, #4db3a5);
    margin-top: 2px;
}

.cookie-banner-text p {
    font-size: 14px;
    color: var(--text-secondary, #6e6e73);
    line-height: 1.5;
    margin: 0;
}

.cookie-banner-link {
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
    font-weight: 500;
}

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

.cookie-banner-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Cookie Buttons */
.cookie-btn {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.cookie-btn--primary {
    background: var(--accent-teal, #4db3a5);
    color: #ffffff;
}

.cookie-btn--primary:hover {
    background: #5ab8ab;
}

.cookie-btn--secondary {
    background: var(--bg-secondary, #f5f5f7);
    color: var(--text-primary, #1d1d1f);
    border: 1px solid var(--border-primary, #e5e5ea);
}

.cookie-btn--secondary:hover {
    background: var(--bg-tertiary, #e5e5ea);
}

.cookie-btn--outline {
    background: transparent;
    color: var(--accent-teal, #4db3a5);
    border: 1px solid var(--accent-teal, #4db3a5);
}

.cookie-btn--outline:hover {
    background: rgba(77, 179, 165, 0.08);
}

/* ===== COOKIE PREFERENCES MODAL ===== */

.cookie-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    transition: opacity 0.2s ease;
}

.cookie-modal--hidden {
    opacity: 0;
    pointer-events: none;
}

.cookie-modal {
    background: var(--bg-primary, #ffffff);
    border-radius: 16px;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.cookie-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-primary, #e5e5ea);
    flex-shrink: 0;
}

.cookie-modal-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    margin: 0;
}

.cookie-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #8e8e93);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-modal-close:hover {
    background: var(--bg-secondary, #f5f5f7);
    color: var(--text-primary, #1d1d1f);
}

.cookie-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.cookie-modal-description {
    font-size: 14px;
    color: var(--text-secondary, #6e6e73);
    line-height: 1.5;
    margin: 0 0 24px 0;
}

/* Cookie Category */
.cookie-category {
    border: 1px solid var(--border-primary, #e5e5ea);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.cookie-category:last-of-type {
    margin-bottom: 0;
}

.cookie-category-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cookie-category-info {
    flex: 1;
}

.cookie-category-info h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1d1d1f);
    margin: 0 0 4px 0;
}

.cookie-category-info p {
    font-size: 13px;
    color: var(--text-secondary, #6e6e73);
    line-height: 1.4;
    margin: 0;
}

.cookie-toggle-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* iOS-style toggle */
.cookie-toggle {
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--bg-tertiary, #e5e5ea);
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
}

.cookie-toggle--on {
    background: var(--accent-teal, #4db3a5);
}

.cookie-toggle--locked {
    cursor: not-allowed;
    opacity: 0.7;
}

.cookie-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s;
}

.cookie-toggle--on .cookie-toggle-knob {
    transform: translateX(20px);
}

.cookie-toggle-label {
    font-size: 11px;
    color: var(--text-muted, #8e8e93);
    font-weight: 500;
}

/* Cookie category details chips */
.cookie-category-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-primary, #e5e5ea);
}

.cookie-detail-chip {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    background: var(--bg-secondary, #f5f5f7);
    color: var(--text-secondary, #6e6e73);
}

.cookie-detail-chip--note {
    background: transparent;
    color: var(--text-muted, #8e8e93);
    font-style: italic;
    padding-left: 0;
}

/* Modal Footer */
.cookie-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid var(--border-primary, #e5e5ea);
    flex-shrink: 0;
}

.cookie-modal-policy-link {
    font-size: 13px;
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
}

.cookie-modal-policy-link:hover {
    text-decoration: underline;
}

.cookie-modal-footer-actions {
    display: flex;
    gap: 8px;
}

/* Dark mode overrides for cookie UI */
[data-theme="dark"] .cookie-banner {
    background: var(--bg-primary);
    border-top-color: var(--border-primary);
}

[data-theme="dark"] .cookie-modal {
    background: var(--bg-primary);
}

/* Light mode on legal pages (cookie UI inherits light) */
.legal-page .cookie-banner,
.auth-container .cookie-banner {
    background: #ffffff;
    border-top-color: #e5e5ea;
}

/* Responsive */
@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        gap: 16px;
    }

    .cookie-banner-actions {
        width: 100%;
        flex-direction: column;
    }

    .cookie-btn {
        width: 100%;
        text-align: center;
        padding: 10px 16px;
    }

    .cookie-modal {
        max-height: 90vh;
    }

    .cookie-modal-footer {
        flex-direction: column;
        gap: 12px;
    }

    .cookie-modal-footer-actions {
        width: 100%;
    }

    .cookie-modal-footer-actions .cookie-btn {
        flex: 1;
    }
}

/* ===== CLIENT PORTAL AUTH - BLUE GRADIENT ===== */

/* Portal auth inherits .auth-container layout; this just overrides the gradient */
.portal-body {
  margin: 0;
  padding: 0;
  background: var(--portal-bg, #f8f9fa);
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  color: var(--portal-text, #1d1d1f);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.portal-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px 24px;
}

.portal-container {
  width: 100%;
  max-width: 520px;
}

.portal-container--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  max-width: 520px;
  width: 100%;
}

/* --- Header --- */

.portal-header {
  margin-bottom: 24px;
}

.portal-header-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-logo {
  height: 40px;
  width: auto;
  border-radius: 8px;
}

.portal-logo-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--portal-accent, #66ccbe);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}

.portal-company-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
}

/* --- Card --- */

.portal-card {
  background: var(--portal-card-bg, #ffffff);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--portal-border, #e5e5ea);
}

.portal-card--success {
  text-align: center;
}

.portal-card--pending {
  text-align: center;
}

.portal-card--error {
  text-align: center;
}

.portal-card--info {
  text-align: center;
  max-width: 520px;
  width: 100%;
}

/* --- Greeting --- */

.portal-greeting {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
  color: var(--portal-text, #1d1d1f);
}

/* --- Invoice Header --- */

.portal-invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
}

.portal-invoice-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--portal-text-muted, #8e8e93);
  margin-bottom: 2px;
}

.portal-invoice-number {
  font-size: 18px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

.portal-invoice-meta {
  text-align: right;
}

.portal-invoice-date {
  font-size: 14px;
  color: var(--portal-text-secondary, #6e6e73);
}

.portal-invoice-due {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  margin-top: 2px;
}

/* --- Line Items --- */

.portal-line-items {
  margin-bottom: 20px;
}

.portal-line-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
}

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

.portal-line-item-desc {
  font-size: 15px;
  font-weight: 500;
  color: var(--portal-text, #1d1d1f);
  margin-bottom: 4px;
}

.portal-line-item-detail {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--portal-text-secondary, #6e6e73);
}

.portal-line-item-amount {
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
}

/* --- Totals --- */

.portal-totals {
  padding: 16px 0;
  border-top: 1px solid var(--portal-border, #e5e5ea);
  margin-bottom: 24px;
}

.portal-total-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 14px;
  color: var(--portal-text-secondary, #6e6e73);
}

.portal-total-row--grand {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 2px solid var(--portal-text, #1d1d1f);
  font-size: 18px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

/* --- Pay Button --- */

.portal-pay-btn {
  display: block;
  width: 100%;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: var(--portal-accent, #66ccbe);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}

.portal-pay-btn:hover {
  background: var(--portal-accent-hover, #5ab8ab);
}

.portal-pay-btn:active {
  transform: scale(0.98);
}

/* --- Mollie payment failed: retry button + bank transfer fallback --- */

.portal-pay-btn--retry {
  /* Same primary styling as .portal-pay-btn (revenue-protective: keep
     visually prominent so users retry card payment before defaulting to
     bank transfer). */
}
.portal-pay-failed-note {
  font-size: 13px;
  color: #8e8e93;
  text-align: center;
  margin: 8px 0 0;
}

/* Spinner used in refresh-in-flight button state (both portals share the
   styling but use different class names — .portal-pay-spinner for guest,
   .client-guest-card-pay-spinner for the dashboard invoice card). */
.portal-pay-spinner,
.client-guest-card-pay-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: portal-pay-spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}
@keyframes portal-pay-spin {
  to { transform: rotate(360deg); }
}

.portal-bank-fallback {
  margin-top: 24px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e5e5ea;
}
.portal-bank-fallback-divider {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
}
.portal-bank-fallback-divider::before,
.portal-bank-fallback-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d1d1d6;
}
.portal-bank-fallback-divider span {
  padding: 0 12px;
  font-weight: 500;
}
.portal-bank-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 20px;
  font-size: 14px;
  margin: 0;
}
.portal-bank-details dt {
  color: #6e6e73;
  font-weight: 500;
}
.portal-bank-details dd {
  color: #1d1d1f;
  font-weight: 600;
  margin: 0;
  font-family: 'SF Mono', 'Roboto Mono', Menlo, monospace;
  word-break: break-all;
}
.portal-bank-hint {
  font-size: 12px;
  color: #6e6e73;
  margin: 14px 0 0;
  line-height: 1.4;
  text-align: center;
}

/* --- Trust Signals --- */

.portal-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  margin-bottom: 4px;
}

.portal-trust-icon {
  color: var(--portal-accent, #66ccbe);
}

.portal-methods {
  text-align: center;
  font-size: 12px;
  color: var(--portal-text-muted, #8e8e93);
  letter-spacing: 0.02em;
}

/* --- EPC QR Code (bank transfer) --- */

.portal-qr-section {
  margin: 24px 0 8px;
  text-align: center;
}

.portal-qr-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.portal-qr-divider-line {
  flex: 1;
  height: 1px;
  background-color: var(--portal-border, #e5e5ea);
}

.portal-qr-divider-text {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  white-space: nowrap;
  text-transform: lowercase;
}

.portal-qr-container {
  display: inline-block;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--portal-border, #e5e5ea);
}

.portal-qr-container svg {
  display: block;
  width: 160px;
  height: 160px;
}

.portal-qr-caption {
  font-size: 12px;
  color: var(--portal-text-muted, #8e8e93);
  margin-top: 8px;
}

@media (max-width: 560px) {
  .portal-qr-container svg {
    width: 140px;
    height: 140px;
  }

  .portal-qr-section {
    margin: 20px 0 8px;
  }
}

/* --- Portal Discovery Banner --- */

.portal-discovery-banner {
    max-width: 520px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #e8f4f8 0%, #dff0f4 100%);
    border: 1px solid #b8dce6;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.portal-discovery-banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.portal-discovery-banner-icon {
    color: #3a9ab5;
    flex-shrink: 0;
}

.portal-discovery-banner-text {
    font-size: 14px;
    color: #1a6b82;
    line-height: 1.4;
}

.portal-discovery-banner-link {
    font-size: 14px;
    font-weight: 600;
    color: #3a9ab5;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}

.portal-discovery-banner-link:hover {
    color: #2a7a95;
    text-decoration: underline;
}

@media (max-width: 560px) {
    .portal-discovery-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .portal-discovery-banner-link {
        align-self: flex-end;
    }
}

/* --- Portal Template Iframe --- */

.portal-template-iframe-container {
    max-width: 800px;
    margin: 0 auto 16px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.portal-template-iframe {
    width: 100%;
    min-height: 900px;
    border: none;
    display: block;
    background: #ffffff;
}

@media (max-width: 560px) {
    .portal-template-iframe-container {
        border-radius: 8px;
        margin: 0 auto 12px;
    }

    .portal-template-iframe {
        min-height: 700px;
    }
}

/* --- State Icons --- */

.portal-state-icon {
  margin-bottom: 16px;
}

.portal-state-icon--success {
  color: var(--portal-success, #30c961);
}

.portal-state-icon--error {
  color: var(--portal-error, #ff453a);
}

.portal-state-icon--warning {
  color: var(--portal-warning, #ff9f0a);
}

.portal-state-icon--pending {
  display: flex;
  justify-content: center;
}

.portal-state-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
  margin-bottom: 8px;
}

.portal-state-text {
  font-size: 15px;
  color: var(--portal-text-secondary, #6e6e73);
  margin-bottom: 8px;
  line-height: 1.5;
}

.portal-state-subtext {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
}

/* --- Retry Button --- */

.portal-retry-btn {
  display: inline-block;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--portal-accent, #66ccbe);
  border-radius: 10px;
  text-decoration: none;
  margin-top: 16px;
  transition: background 0.15s ease;
}

.portal-retry-btn:hover {
  background: var(--portal-accent-hover, #5ab8ab);
}

/* --- Spinner --- */

.portal-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--portal-border, #e5e5ea);
  border-top-color: var(--portal-accent, #66ccbe);
  border-radius: 50%;
  animation: portal-spin 0.8s linear infinite;
}

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

/* --- Footer --- */

.portal-footer {
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
}

.portal-footer-text {
  font-size: 12px;
  color: var(--portal-text-muted, #8e8e93);
}

/* --- Responsive --- */

@media (max-width: 560px) {
  .portal-page {
    padding: 24px 12px 16px;
  }

  .portal-card {
    padding: 24px 20px;
    border-radius: 12px;
  }

  .portal-greeting {
    font-size: 18px;
  }

  .portal-invoice-number {
    font-size: 16px;
  }

  .portal-pay-btn {
    font-size: 16px;
    padding: 14px 20px;
  }

  .portal-total-row--grand {
    font-size: 16px;
  }
}

/* --- Approval Flow (Phase 6) --- */
/* Source: prototype lines 22146-22201 */

.portal-approval-intro {
  font-size: 15px;
  color: var(--portal-text, #1d1d1f);
  line-height: 1.6;
  margin: 0 0 4px;
}

.portal-approval-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.portal-approve-btn {
  flex: 1;
  padding: 14px 24px;
  background-color: #30c961;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.portal-approve-btn:hover {
  background-color: #28b854;
}

.portal-decline-btn {
  flex: 1;
  padding: 14px 24px;
  background-color: transparent;
  color: #ff453a;
  border: 2px solid #ff453a;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.portal-decline-btn:hover {
  background-color: #ff453a;
  color: #ffffff;
}

.portal-decline-form {
  margin-top: 24px;
}

.portal-decline-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  margin-bottom: 8px;
}

.portal-decline-textarea {
  width: 100%;
  min-height: 80px;
  padding: 12px 14px;
  border: 1px solid var(--portal-border, #e5e5ea);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: var(--portal-text, #1d1d1f);
  background-color: var(--portal-card-bg, #ffffff);
  resize: vertical;
  box-sizing: border-box;
}

.portal-decline-textarea:focus {
  outline: none;
  border-color: var(--portal-accent, #66ccbe);
  box-shadow: 0 0 0 3px rgba(102, 204, 190, 0.15);
}

.portal-decline-textarea::placeholder {
  color: var(--portal-text-muted, #8e8e93);
}

.portal-decline-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.portal-decline-confirm-btn {
  flex: 1;
  padding: 12px 20px;
  background-color: #ff453a;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.portal-decline-confirm-btn:hover {
  background-color: #e03e34;
}

.portal-decline-cancel-btn {
  flex: 1;
  padding: 12px 20px;
  background-color: transparent;
  color: var(--portal-text, #1d1d1f);
  border: 1px solid var(--portal-border, #e5e5ea);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.portal-decline-cancel-btn:hover {
  background-color: var(--portal-bg, #f8f9fa);
}

.portal-decline-reason-display {
  margin-top: 16px;
  padding: 16px;
  background-color: #f5f5f7;
  border-radius: 10px;
}

.portal-decline-reason-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--portal-text-secondary, #6e6e73);
  margin-bottom: 6px;
}

.portal-decline-reason-text {
  font-size: 14px;
  color: var(--portal-text, #1d1d1f);
  line-height: 1.5;
  margin: 0;
  white-space: pre-wrap;
}

/* Approval responsive */
@media (max-width: 560px) {
  .portal-approval-actions {
    flex-direction: column;
  }

  .portal-decline-actions {
    flex-direction: column;
  }

  .portal-approve-btn,
  .portal-decline-btn {
    font-size: 15px;
    padding: 13px 20px;
  }
}

/* --- Portal Approval Badges (portal index) --- */

.portal-approval-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.portal-approval-badge--pending {
  background-color: #fff3e0;
  color: #e65100;
}

.portal-approval-badge--approved {
  background-color: #e8f5e9;
  color: #2e7d32;
}

.portal-approval-badge--declined {
  background-color: #fce4ec;
  color: #c62828;
}

.portal-approval-badge--small {
  font-size: 11px;
  padding: 3px 8px;
}

/* ============================================================
   PORTAL REDESIGN: Split Layout (Sidebar + Content)
   ============================================================ */

/* --- Split Layout --- */

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

/* --- Sidebar --- */

.portal-sidebar {
  width: 300px;
  min-width: 300px;
  background: linear-gradient(180deg, #1e3a5f 0%, #2d5a8e 40%, #4a7fc7 100%);
  color: #fff;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.portal-sidebar-inner {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.portal-sidebar-logo {
  margin-bottom: 32px;
}

.portal-sidebar-logo-img {
  height: 40px;
  width: auto;
}

/* Language toggle (flags) */
.portal-lang-toggle {
  display: flex;
  gap: 5px;
  margin: 12px 0 16px 0;
}

.portal-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0.55;
}

.portal-lang-btn svg {
  display: block;
  border-radius: 2px;
}

.portal-lang-btn:hover {
  opacity: 0.85;
  border-color: rgba(255, 255, 255, 0.5);
}

.portal-lang-btn--active {
  opacity: 1;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Phase 6.6 #5: cross-freelancer grouping in the guest portal cards list.
   Group header appears only when the user has invoices from more than one
   freelancer (the single-freelancer case keeps the flat layout). */
.freelancer-group {
  margin-bottom: 24px;
}
.freelancer-group-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 4px 12px;
  margin-bottom: 8px;
  border-bottom: 1px solid #e5e5ea;
}
.freelancer-group-name {
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
}
.freelancer-group-meta {
  font-size: 12px;
  color: #8e8e93;
  font-weight: 500;
}
.freelancer-group-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Phase 6.6 #8: cross-freelancer disclosure modal (GDPR Art. 13
   transparency surfaced in product). Inline at the top of the portal
   content area when other_invoices_count > 0 — not modal-blocking,
   just visible-and-dismissible. Dismissal persists via localStorage
   (see CfDisclosure hook in assets/js/hooks/index.js). */
.portal-cf-disclosure {
  margin: 16px 24px 0;
  background: #f0f6ff;
  border: 1px solid #c5d9f1;
  border-radius: 12px;
  padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.portal-cf-disclosure.is-dismissed {
  display: none;
}
.portal-cf-disclosure-inner {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
}
.portal-cf-disclosure-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1e3a5f;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.portal-cf-disclosure-body {
  flex: 1;
  min-width: 0;
  padding-right: 32px;
}
.portal-cf-disclosure-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e3a5f;
  margin: 0 0 6px;
}
.portal-cf-disclosure-text {
  font-size: 13px;
  line-height: 1.5;
  color: #3a3a3c;
  margin: 0 0 6px;
}
.portal-cf-disclosure-text--muted {
  color: #6e6e73;
  font-size: 12px;
}
.portal-cf-disclosure-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.portal-cf-disclosure-btn {
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.portal-cf-disclosure-btn--primary {
  background: #1e3a5f;
  color: #ffffff;
}
.portal-cf-disclosure-btn--primary:hover {
  background: #2d5a8e;
}
.portal-cf-disclosure-btn--link {
  background: transparent;
  color: #1e3a5f;
  padding: 8px 4px;
  font-weight: 500;
}
.portal-cf-disclosure-btn--link:hover {
  text-decoration: underline;
}
.portal-cf-disclosure-close {
  position: absolute;
  top: -8px;
  right: 0;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #8e8e93;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
}
.portal-cf-disclosure-close:hover {
  color: #1d1d1f;
  background: rgba(0, 0, 0, 0.04);
}

/* Phase 6.6 #6: batch-pay multi-select. Wrapper provides positioning
   context for the absolute checkbox; the card itself is untouched. */
.invoice-batch-wrap {
  position: relative;
}
.invoice-batch-checkbox {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 5;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.invoice-batch-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0;
}
.invoice-batch-checkbox-visual {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid #d1d1d6;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.invoice-batch-checkbox:hover .invoice-batch-checkbox-visual {
  border-color: var(--accent-teal, #4db3a5);
}
.invoice-batch-checkbox input:checked + .invoice-batch-checkbox-visual {
  background: var(--accent-teal, #4db3a5);
  border-color: var(--accent-teal, #4db3a5);
  box-shadow: 0 2px 6px rgba(77, 179, 165, 0.35);
}
.invoice-batch-checkbox input:checked + .invoice-batch-checkbox-visual::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 9px;
  width: 6px;
  height: 12px;
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

/* Per-group batch-pay footer. Sticky at the bottom of its group so the
   user can keep selecting checkboxes above without losing the action. */
.freelancer-group-batch-footer {
  position: sticky;
  bottom: 16px;
  z-index: 4;
  margin-top: 16px;
  padding: 14px 18px;
  background: #ffffff;
  border: 2px solid var(--accent-teal, #4db3a5);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.freelancer-group-batch-footer--inactive {
  border-color: #e5e5ea;
  box-shadow: none;
}
.freelancer-group-batch-summary {
  font-size: 13px;
  color: #1d1d1f;
  font-weight: 500;
}
.freelancer-group-batch-footer--inactive .freelancer-group-batch-summary {
  color: #8e8e93;
  font-weight: 400;
}
.freelancer-group-batch-btn {
  background: var(--accent-teal, #4db3a5);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.freelancer-group-batch-btn:hover:not(:disabled) {
  background: #3ea596;
}
.freelancer-group-batch-btn:disabled {
  background: #c7c7cc;
  cursor: not-allowed;
}

/* G-13: card-context variant — same JS hook + class system as the sidebar
   buttons, but legible borders/active state on a white card background
   (e.g. inside portal_error_state's portal-card--info). */
.portal-lang-toggle--card {
  justify-content: center;
}
.portal-card .portal-lang-btn {
  border-color: rgba(0, 0, 0, 0.15);
}
.portal-card .portal-lang-btn:hover {
  border-color: rgba(0, 0, 0, 0.4);
}
.portal-card .portal-lang-btn--active {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.55);
}

.portal-sidebar-tagline {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 8px 0;
  letter-spacing: -0.02em;
}

.portal-sidebar-trust {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 28px 0;
}

/* Payment method icons */

.portal-sidebar-methods {
  display: flex;
  gap: 10px;
  margin-bottom: 28px;
  justify-content: center;
}

.portal-method-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.9);
  transition: background 0.15s ease;
}

.portal-method-icon:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Value props */

.portal-sidebar-features {
  list-style: none;
  margin: 0 0 32px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.portal-sidebar-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

.portal-sidebar-feature svg {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.8);
}

/* More Info link */

.portal-sidebar-more-info,
.portal-sidebar-more-info-link {
  display: block;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  margin: -16px 0 28px 0;
  transition: color 0.15s ease;
}

.portal-sidebar-more-info:hover,
.portal-sidebar-more-info-link:hover {
  color: #fff;
  text-decoration: underline;
}

/* More Info modal */

.portal-more-info-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.portal-more-info-modal {
  background: #fff;
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.portal-more-info-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: #8e8e93;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
}

.portal-more-info-close:hover {
  background: #f2f2f7;
  color: #1d1d1f;
}

.portal-more-info-title {
  font-size: 22px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 6px 0;
}

.portal-more-info-subtitle {
  font-size: 14px;
  color: #6e6e73;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.portal-more-info-benefits {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 28px;
}

.portal-more-info-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.portal-more-info-benefit-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: #e8f8f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #66ccbe;
}

.portal-more-info-benefit-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-more-info-benefit-text strong {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
}

.portal-more-info-benefit-text span {
  font-size: 13px;
  color: #6e6e73;
  line-height: 1.4;
}

.portal-more-info-cta {
  margin-bottom: 16px;
}

.portal-more-info-cta-btn {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: #66ccbe;
  border: none;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.portal-more-info-cta-btn:hover {
  background: #5ab8ab;
}

.portal-more-info-dismiss {
  display: block;
  text-align: center;
  font-size: 14px;
  color: #8e8e93;
  text-decoration: none;
}

.portal-more-info-dismiss:hover {
  color: #6e6e73;
  text-decoration: underline;
}

@media (max-width: 560px) {
  .portal-more-info-modal {
    padding: 24px;
    border-radius: 12px;
  }

  .portal-more-info-title {
    font-size: 20px;
  }

  .portal-more-info-benefit-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }
}

/* ========== Portal Welcome/Landing Page ========== */

.portal-welcome-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 25%, #4a7fc7 50%, #6b9fd8 75%, #8bb8e8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.portal-welcome-container {
  max-width: 960px;
  width: 100%;
  text-align: center;
}

.portal-welcome-logo {
  margin-bottom: 40px;
}

.portal-welcome-logo-img {
  height: 40px;
  filter: brightness(0) invert(1);
}

.portal-welcome-headline {
  font-size: 36px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.portal-welcome-subheadline {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 48px 0;
  line-height: 1.5;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.portal-welcome-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

.portal-welcome-feature-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.portal-welcome-feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.portal-welcome-feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #e8f8f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #66ccbe;
  margin-bottom: 16px;
}

.portal-welcome-feature-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 6px 0;
}

.portal-welcome-feature-desc {
  font-size: 14px;
  color: #6e6e73;
  line-height: 1.5;
  margin: 0;
}

.portal-welcome-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}

.portal-welcome-trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

.portal-welcome-trust-badge svg {
  color: rgba(255, 255, 255, 0.8);
}

.portal-welcome-cta {
  margin-bottom: 40px;
}

.portal-welcome-cta-btn {
  display: inline-block;
  padding: 16px 40px;
  font-size: 16px;
  font-weight: 700;
  color: #eb0a44;
  background: #fff;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.portal-welcome-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.portal-welcome-footer {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 768px) {
  .portal-welcome-features {
    grid-template-columns: 1fr;
  }

  .portal-welcome-headline {
    font-size: 28px;
  }

  .portal-welcome-subheadline {
    font-size: 15px;
    margin-bottom: 36px;
  }

  .portal-welcome-trust {
    flex-direction: column;
    gap: 12px;
  }

  .portal-welcome-page {
    padding: 32px 16px;
  }
}

/* CTA */

.portal-sidebar-cta {
  margin-bottom: 32px;
}

.portal-sidebar-cta-btn {
  display: block;
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  background: #5b9bd5;
  border: 2px solid #ffffff;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
}

.portal-sidebar-cta-btn:hover:not(:disabled) {
  background: #4a8bc4;
  transform: translateY(-1px);
}

.portal-sidebar-cta-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.portal-sidebar-cta-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 8px 0 0 0;
  text-align: center;
}

/* Links */

.portal-sidebar-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  white-space: nowrap;
}

.portal-sidebar-link {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.15s ease;
}

.portal-sidebar-link:hover {
  color: #fff;
}

.portal-sidebar-link-sep {
  color: rgba(255, 255, 255, 0.4);
}

.portal-sidebar-copyright {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
  margin-top: 16px;
}

/* --- Content Area --- */

.portal-content {
  flex: 1;
  min-width: 0;
  padding: 0 40px 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Body region inside .portal-content, between the topbar and footer */

.portal-content-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 24px 24px;
}

/* Top bar */

.portal-content-topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--portal-bg, #f8f9fa);
}

.portal-content-topbar-left {
  margin-right: auto;
}

.portal-mobile-logo {
  display: none;
  align-items: center;
  gap: 8px;
}

.portal-mobile-mascot {
  height: 28px;
  width: auto;
}

.portal-mobile-logo-text {
  font-size: 16px;
  font-weight: 700;
  color: var(--portal-accent);
}

.portal-header-avatar {
  position: relative;
}

.portal-avatar-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.portal-avatar-circle--content {
  background: var(--portal-accent, #66ccbe);
  color: #fff;
  border: 2px solid var(--portal-border, #e5e5ea);
}

.portal-avatar-circle--content:hover {
  opacity: 0.9;
}

/* --- show.ex Header Compat (used by portal_live/show.ex) --- */

.portal-header-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.portal-header-brand {
  display: flex;
  align-items: center;
}

.portal-header-logo {
  height: 40px;
  width: auto;
}

/* --- Avatar Dropdown --- */

.portal-avatar-dropdown {
  position: absolute;
  top: 48px;
  right: 0;
  width: 260px;
  background: var(--portal-card-bg, #ffffff);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--portal-border, #e5e5ea);
  z-index: 100;
  overflow: hidden;
}

.portal-avatar-dropdown-header {
  padding: 16px;
}

.portal-avatar-dropdown-header strong {
  display: block;
  font-size: 15px;
  color: var(--portal-text, #1d1d1f);
}

.portal-avatar-dropdown-email {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
}

.portal-avatar-dropdown-divider {
  height: 1px;
  background: var(--portal-border, #e5e5ea);
}

.portal-avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  font-size: 14px;
  color: var(--portal-text, #1d1d1f);
  cursor: pointer;
  text-align: left;
}

.portal-avatar-dropdown-item:hover {
  background: #f5f5f7;
}

.portal-avatar-dropdown-item--disabled {
  opacity: 0.5;
  cursor: default;
}

.portal-avatar-dropdown-item--disabled:hover {
  background: none;
}

.portal-avatar-dropdown-item--danger {
  color: var(--portal-error, #ff453a);
}

.portal-coming-soon {
  font-size: 11px;
  color: var(--portal-text-muted, #8e8e93);
  background: #f0f0f2;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: auto;
}

/* --- Welcome + Content Title --- */

.portal-content-welcome {
  padding: 0 0 24px;
}

.portal-content-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.portal-content-subtitle {
  font-size: 15px;
  color: var(--portal-text-secondary, #6e6e73);
  margin: 0;
}

.portal-content-subtitle strong {
  color: var(--portal-text, #1d1d1f);
}

.portal-content-empty {
  text-align: center;
  padding: 48px 20px 40px;
  color: var(--portal-text-muted, #8e8e93);
}

.portal-content-empty p {
  font-size: 16px;
  margin-top: 16px;
}

/* --- Case A: Single Invoice Card --- */

.portal-case-a {
  display: flex;
  justify-content: center;
  padding: 8px 24px 24px;
}

.portal-case-a-card {
  background: var(--portal-card-bg, #ffffff);
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--portal-border, #e5e5ea);
  text-align: center;
}

.portal-case-a-from {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
}

.portal-group-avatar--small {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.portal-case-a-from-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--portal-text-secondary, #6e6e73);
}

.portal-case-a-amount {
  font-size: 36px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
  margin-bottom: 24px;
  letter-spacing: -0.5px;
}

.portal-case-a-details {
  border-top: 1px solid var(--portal-border, #e5e5ea);
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
  padding: 16px 0;
  margin-bottom: 24px;
}

.portal-case-a-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}

.portal-case-a-label {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
}

.portal-case-a-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--portal-text, #1d1d1f);
}

.portal-case-a-pay-btn {
  width: 100%;
  padding: 16px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 12px;
  margin-bottom: 12px;
}

.portal-case-a-methods {
  font-size: 12px;
  color: var(--portal-text-muted, #8e8e93);
  letter-spacing: 0.2px;
}

/* --- Outstanding Bulk Action Bar --- */

.portal-outstanding-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--portal-accent, #66ccbe);
  color: #fff;
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 14px;
  font-weight: 500;
}

.portal-outstanding-bulk-count {
  font-weight: 600;
}

.portal-outstanding-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-accent, #66ccbe);
  background: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.portal-outstanding-bulk-btn:hover {
  opacity: 0.9;
}

/* --- Freelancer Groups --- */

.portal-group {
  margin-bottom: 32px;
}

.portal-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
}

.portal-group-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.portal-group-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #eb0a44 0%, #f5775e 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.portal-group-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-group-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
}

.portal-group-meta {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
}

.portal-group-pay-all-btn {
  font-size: 13px;
  font-weight: 500;
  color: var(--portal-accent, #66ccbe);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.portal-group-pay-all-btn:hover {
  background: rgba(102, 204, 190, 0.08);
}

/* --- Invoice Card Grid --- */

.portal-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* --- Invoice Cards (Outstanding) --- */

.portal-inv-card {
  background: var(--portal-card-bg, #ffffff);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--portal-border, #e5e5ea);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  flex-direction: column;
}

.portal-inv-card:hover {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.portal-inv-card--selected {
  border-color: var(--portal-accent, #66ccbe);
  background: rgba(102, 204, 190, 0.03);
}

.portal-inv-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.portal-inv-card-checkbox {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.portal-inv-card-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--portal-accent, #66ccbe);
}

.portal-inv-card-amount {
  font-size: 20px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

.portal-inv-card-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  margin-bottom: 4px;
}

.portal-inv-card-desc {
  font-size: 13px;
  color: var(--portal-text-secondary, #6e6e73);
  margin-bottom: 8px;
  line-height: 1.4;
}

.portal-inv-card-due {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  margin-bottom: 16px;
}

.portal-overdue-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--portal-error, #ff453a);
  background: rgba(255, 69, 58, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  text-transform: uppercase;
}

.portal-inv-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.portal-inv-card-pay-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--portal-accent, #66ccbe);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.portal-inv-card-pay-btn:hover {
  background: var(--portal-accent-hover, #5ab8ab);
}

.portal-inv-card-details-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--portal-accent, #66ccbe);
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.portal-inv-card-details-link:hover {
  opacity: 0.8;
}

/* --- Payment History Section --- */

.portal-history-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--portal-border, #e5e5ea);
}

.portal-history-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  margin: 0 0 20px;
}

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

.portal-stat-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.portal-stat-card {
  background: var(--portal-card-bg, #ffffff);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid var(--portal-border, #e5e5ea);
}

.portal-stat-label {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  margin-bottom: 4px;
}

.portal-stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

.portal-paid-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--portal-success, #30c961);
  background: rgba(48, 201, 97, 0.1);
  padding: 2px 10px;
  border-radius: 4px;
}

/* --- History Toolbar --- */

.portal-history-toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
}

.portal-search-wrapper {
  flex: 1;
  position: relative;
}

.portal-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--portal-text-muted, #8e8e93);
}

.portal-search-input {
  width: 100%;
  padding: 10px 12px 10px 36px;
  font-size: 14px;
  border: 1px solid var(--portal-border, #e5e5ea);
  border-radius: 8px;
  background: var(--portal-card-bg, #ffffff);
  color: var(--portal-text, #1d1d1f);
  outline: none;
  transition: border-color 0.15s ease;
}

.portal-search-input:focus {
  border-color: var(--portal-accent, #66ccbe);
}

.portal-sort-select {
  padding: 10px 16px;
  font-size: 14px;
  border: 1px solid var(--portal-border, #e5e5ea);
  border-radius: 8px;
  background: var(--portal-card-bg, #ffffff);
  color: var(--portal-text, #1d1d1f);
  cursor: pointer;
  outline: none;
}

.portal-sort-select:focus {
  border-color: var(--portal-accent, #66ccbe);
}

/* --- Bulk Actions Bar (History) --- */

.portal-bulk-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--portal-accent, #66ccbe);
  color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 14px;
  font-weight: 500;
}

.portal-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--portal-accent, #66ccbe);
  background: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.portal-bulk-btn:hover {
  opacity: 0.9;
}

/* --- History List --- */

.portal-history-list {
  background: var(--portal-card-bg, #ffffff);
  border-radius: 12px;
  border: 1px solid var(--portal-border, #e5e5ea);
  overflow: hidden;
}

.portal-history-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
}

.portal-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.portal-history-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
  transition: background 0.1s ease;
}

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

.portal-history-row:hover {
  background: #f9f9fb;
}

.portal-history-row--selected {
  background: rgba(102, 204, 190, 0.06);
}

.portal-history-checkbox {
  flex-shrink: 0;
}

.portal-history-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  min-width: 120px;
}

.portal-history-from {
  font-size: 13px;
  color: var(--portal-text-secondary, #6e6e73);
  min-width: 120px;
}

.portal-history-date {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  min-width: 100px;
}

.portal-history-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  margin-left: auto;
  margin-right: 12px;
}

.portal-pdf-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--portal-accent, #66ccbe);
  background: rgba(102, 204, 190, 0.1);
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.portal-pdf-btn:hover {
  background: rgba(102, 204, 190, 0.2);
}

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

.portal-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--portal-text-muted, #8e8e93);
}

.portal-empty-state p {
  font-size: 15px;
  margin-top: 12px;
}

/* --- Modal --- */

.portal-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}

.portal-modal {
  background: var(--portal-card-bg, #ffffff);
  border-radius: 16px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  position: relative;
}

.portal-modal--wide {
  max-width: 520px;
}

.portal-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--portal-text-muted, #8e8e93);
  cursor: pointer;
  line-height: 1;
}

.portal-modal-close:hover {
  color: var(--portal-text, #1d1d1f);
}

.portal-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  margin: 0 0 12px;
}

.portal-modal-text {
  font-size: 15px;
  color: var(--portal-text-secondary, #6e6e73);
  line-height: 1.5;
  margin: 0 0 24px;
}

/* Modal: Invoice Summary */

.portal-modal-invoice-summary {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
}

.portal-modal-invoice-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  margin-bottom: 2px;
}

.portal-modal-invoice-from {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  margin-bottom: 8px;
}

.portal-modal-invoice-amount {
  font-size: 28px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

/* Modal: Trust Row */

.portal-modal-trust-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
  margin-bottom: 20px;
  padding: 10px 14px;
  background: #f9f9fb;
  border-radius: 8px;
}

/* Modal: Cancel Button */

.portal-modal-cancel-btn {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--portal-text-muted, #8e8e93);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}

.portal-modal-cancel-btn:hover {
  color: var(--portal-text, #1d1d1f);
}

.portal-modal-pay-btn {
  width: 100%;
  margin-bottom: 8px;
}

/* Modal: Bulk Payment List */

.portal-modal-bulk-list {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
  max-height: 240px;
  overflow-y: auto;
}

.portal-modal-bulk-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
}

.portal-modal-bulk-item:last-child {
  border-bottom: none;
}

.portal-modal-bulk-item-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-modal-bulk-item-number {
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
}

.portal-modal-bulk-item-from {
  font-size: 12px;
  color: var(--portal-text-muted, #8e8e93);
}

.portal-modal-bulk-item-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
}

.portal-modal-bulk-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  margin-bottom: 20px;
  border-top: 2px solid var(--portal-text, #1d1d1f);
  font-size: 16px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

/* --- Portal Main (layout wrapper) --- */

.portal-main {
  min-height: 100vh;
}

/* --- Portal Page (for show.ex) --- */

.portal-page {
  max-width: 960px;
  margin: 0 auto;
  padding: 16px 24px 32px;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
}

/* --- Footer (show.ex uses this) --- */

.portal-footer {
  margin-top: auto;
  padding-top: 40px;
  padding-bottom: 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.portal-footer-text {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
}

/* --- Content Footer (index.html.heex) --- */

.portal-content-footer {
  margin-top: auto;
  padding-top: 40px;
  padding-bottom: 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.portal-content-footer .portal-footer-text {
  font-size: 13px;
  color: var(--portal-text-muted, #8e8e93);
}

/* --- Invoice Detail Page --- */

.portal-detail-page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

.portal-detail-back {
  margin-bottom: 20px;
}

/* Canonical back-link, used everywhere in the product on light pages.
   Dark variant (.app-back-link--dark) targets gradient/dark headers. */
.app-back-link,
.portal-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--accent-teal, #4db3a5);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s ease;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.app-back-link:hover,
.portal-detail-back-link:hover {
  opacity: 0.8;
  text-decoration: none;
}

.app-back-link svg,
.portal-detail-back-link svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.app-back-link--dark {
  color: rgba(255, 255, 255, 0.8);
}

.app-back-link--dark:hover {
  color: #ffffff;
  opacity: 1;
}

/* Forward-link sibling of .app-back-link (arrow pointing right). */
.app-link-forward {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--accent-teal, #4db3a5);
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.15s ease;
}

.app-link-forward:hover {
  opacity: 0.8;
  text-decoration: none;
}

.app-link-forward svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.portal-detail-card {
  background: var(--portal-card-bg, #ffffff);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.portal-detail-company {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
  margin-bottom: 24px;
}

.portal-detail-company-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.portal-detail-company-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
}

.portal-detail-company-address {
  font-size: 13px;
  color: var(--portal-text-secondary, #6e6e73);
}

.portal-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.portal-detail-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--portal-text-muted, #8e8e93);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.portal-detail-number {
  font-size: 20px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

.portal-detail-meta {
  text-align: right;
}

.portal-detail-date,
.portal-detail-due {
  font-size: 13px;
  color: var(--portal-text-secondary, #6e6e73);
  line-height: 1.6;
}

.portal-detail-billto {
  padding: 20px 0;
  border-top: 1px solid var(--portal-border, #e5e5ea);
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
  margin-bottom: 24px;
}

.portal-detail-billto-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--portal-text, #1d1d1f);
  margin-bottom: 2px;
}

.portal-detail-billto-address,
.portal-detail-billto-email {
  font-size: 13px;
  color: var(--portal-text-secondary, #6e6e73);
  line-height: 1.5;
}

/* Line items table */

.portal-detail-items {
  margin-bottom: 24px;
}

.portal-detail-items-header {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 2px solid var(--portal-border, #e5e5ea);
  font-size: 11px;
  font-weight: 600;
  color: var(--portal-text-muted, #8e8e93);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.portal-detail-items-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--portal-border, #e5e5ea);
  font-size: 14px;
  color: var(--portal-text, #1d1d1f);
}

.portal-detail-items-col--desc {
  flex: 1;
  min-width: 0;
}

.portal-detail-items-col--qty {
  width: 50px;
  text-align: center;
}

.portal-detail-items-col--price {
  width: 90px;
  text-align: right;
}

.portal-detail-items-col--vat {
  width: 55px;
  text-align: center;
}

.portal-detail-items-col--amount {
  width: 100px;
  text-align: right;
  font-weight: 500;
}

/* Totals */

.portal-detail-totals {
  margin-bottom: 28px;
}

.portal-detail-total-row {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--portal-text-secondary, #6e6e73);
}

.portal-detail-total-row span:first-child {
  min-width: 100px;
  text-align: right;
}

.portal-detail-total-row span:last-child {
  min-width: 100px;
  text-align: right;
}

.portal-detail-total-row--grand {
  border-top: 2px solid var(--portal-text, #1d1d1f);
  margin-top: 8px;
  padding-top: 12px;
  font-size: 18px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
}

/* Pay button */

.portal-detail-pay-btn {
  width: 100%;
  margin-bottom: 16px;
}

/* Trust signals */

.portal-detail-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12px;
  color: var(--portal-text-muted, #8e8e93);
  flex-wrap: wrap;
}

.portal-detail-trust .portal-trust-icon {
  color: var(--portal-accent, #66ccbe);
}

.portal-detail-methods {
  color: var(--portal-text-muted, #8e8e93);
  opacity: 0.7;
}

/* Paid badge */

.portal-detail-paid-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  background: rgba(48, 201, 97, 0.08);
  border-radius: 12px;
  color: var(--portal-success, #30c961);
  font-size: 16px;
  font-weight: 600;
}

/* --- Payment State Overlay --- */

.portal-payment-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.portal-payment-modal {
  background: #ffffff;
  border-radius: 20px;
  padding: 48px 40px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  animation: portalModalIn 0.3s ease-out;
}

@keyframes portalModalIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.portal-payment-icon {
  margin-bottom: 20px;
}

.portal-payment-icon--success {
  color: #30c961;
}

.portal-payment-icon--pending {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.portal-payment-icon--failed {
  color: #ff453a;
}

.portal-payment-spinner {
  width: 56px;
  height: 56px;
  border: 4px solid #e5e5ea;
  border-top-color: #66ccbe;
  border-radius: 50%;
  animation: portalSpin 0.8s linear infinite;
}

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

.portal-payment-title {
  font-size: 24px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0 0 8px;
}

.portal-payment-amount {
  font-size: 36px;
  font-weight: 700;
  color: #30c961;
  margin: 4px 0 12px;
  letter-spacing: -0.5px;
}

.portal-payment-text {
  font-size: 15px;
  color: #6e6e73;
  margin: 0 0 6px;
  line-height: 1.5;
}

.portal-payment-subtext {
  font-size: 13px;
  color: #8e8e93;
  margin: 0 0 28px;
}

.portal-payment-btn {
  display: block;
  width: 100%;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #66ccbe;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s ease;
  margin-top: 8px;
}

.portal-payment-btn:hover {
  background: #5ab8ab;
}

.portal-payment-btn--secondary {
  background: transparent;
  color: #6e6e73;
  font-weight: 500;
  font-size: 14px;
}

.portal-payment-btn--secondary:hover {
  background: #f5f5f7;
  color: #1d1d1f;
}

.portal-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  background: #1d1d1f;
  color: #ffffff;
}

.portal-download-btn:hover {
  background: #2d2d2f;
  color: #ffffff;
}

.portal-download-btn svg {
  flex-shrink: 0;
}

.portal-detail-download {
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #e5e5ea;
  margin-top: 20px;
}

.portal-detail-download-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6e6e73;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 8px;
  transition: all 0.15s ease;
}

.portal-detail-download-link:hover {
  color: #1d1d1f;
  background: #f5f5f7;
}

.portal-detail-download-link svg {
  flex-shrink: 0;
}

/* --- Responsive: Portal Split Layout --- */

@media (max-width: 768px) {
  .portal-sidebar {
    display: none;
  }

  .portal-mobile-logo {
    display: flex;
  }

  .portal-content {
    padding: 0 20px 20px;
  }

  .portal-card-grid {
    grid-template-columns: 1fr;
  }

  .portal-history-number {
    min-width: unset;
  }

  .portal-history-from {
    min-width: unset;
  }

  .portal-history-date {
    min-width: unset;
  }

  .portal-history-amount {
    margin-left: 0;
  }

  .portal-group-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .portal-outstanding-bulk-bar {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .portal-case-a {
    padding: 8px 16px 24px;
  }

  .portal-case-a-card {
    padding: 24px;
  }

  .portal-case-a-amount {
    font-size: 30px;
  }

  .portal-detail-page {
    padding: 0 16px 32px;
  }

  .portal-detail-card {
    padding: 24px;
  }

  .portal-detail-header {
    flex-direction: column;
    gap: 12px;
  }

  .portal-detail-meta {
    text-align: left;
  }

  .portal-detail-items-col--vat {
    display: none;
  }

  .portal-detail-items-col--price {
    width: 80px;
  }

  .portal-detail-items-col--amount {
    width: 85px;
  }

  .portal-detail-total-row {
    gap: 24px;
  }

  .portal-detail-total-row--grand {
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .portal-content {
    padding: 0 16px 16px;
  }

  .portal-content-title {
    font-size: 22px;
  }

  .portal-avatar-circle {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }

  .portal-avatar-dropdown {
    width: 240px;
    right: -8px;
  }

  .portal-inv-card-actions {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .portal-inv-card-pay-btn {
    text-align: center;
    justify-content: center;
  }

  .portal-inv-card-details-link {
    text-align: center;
  }

  .portal-detail-card {
    padding: 20px;
    border-radius: 12px;
  }

  .portal-detail-number {
    font-size: 18px;
  }

  .portal-detail-items-col--qty {
    width: 40px;
  }

  .portal-detail-items-col--price {
    display: none;
  }

  .portal-detail-items-row {
    font-size: 13px;
  }

  .portal-payment-modal {
    padding: 36px 24px;
    border-radius: 16px;
  }

  .portal-payment-title {
    font-size: 20px;
  }

  .portal-payment-amount {
    font-size: 28px;
  }
}

@media (max-width: 375px) {
  .portal-page {
    padding: 12px 16px 24px;
  }

  .portal-inv-card {
    padding: 16px;
  }

  .portal-modal {
    padding: 24px;
  }

  .portal-modal-invoice-amount {
    font-size: 24px;
  }
}

/* ================================================================
   PORTAL AUTH - Blue Gradient Override
   ================================================================ */
.auth-container.portal-auth-container {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 25%, #4a7fc7 50%, #6b9fd8 75%, #8bb8e8 100%);
}

.portal-auth-container .auth-submit-btn {
    background: linear-gradient(135deg, #8bb8e8 0%, #4a7fc7 50%, #2d5a8e 100%);
}

.portal-auth-container .auth-submit-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(45, 90, 142, 0.35);
}

.portal-auth-container .auth-submit-btn:active:not(:disabled) {
    box-shadow: 0 2px 8px rgba(45, 90, 142, 0.25);
}

/* No filter — mascot renders in original colors on gradient backgrounds */

/* ===== AUTH PORTAL SWITCH ===== */
/* "Are you a client?" / "Are you a freelancer?" cross-link */

.auth-portal-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    padding: 12px 16px;
    margin-top: 12px;
    background: #f8f8fa;
    border: 1px solid #e8e8ed;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.auth-portal-switch:hover {
    background: #f0f0f5;
}

.auth-portal-switch-icon {
    flex-shrink: 0;
    color: #8e8e93;
}

.auth-portal-switch span {
    font-size: 13px;
    color: #6e6e73;
}

.auth-portal-switch-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-teal, #4db3a5);
    text-decoration: none;
    margin-left: 2px;
    white-space: nowrap;
}

.auth-portal-switch-link:hover {
    text-decoration: underline;
}

/* Compact hint text (used for magic link tip on portal login) */
.auth-hint-text {
    text-align: center;
    font-size: 13px;
    color: #8e8e93;
    margin: 16px 0 12px;
    line-height: 1.4;
}

/* ===== AUTH FREE BADGE ===== */
/* "Free forever" / "Always free for clients" badges */

.auth-free-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.auth-free-badge svg {
    color: #66ccbe;
    flex-shrink: 0;
}

.auth-free-badge span {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.01em;
}

/* ============================================================
   COMING SOON / LANDING PAGE
   ============================================================ */
.landing-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('/images/coming-soon-gradient-ae8b4ac9769b9268ab8e4af0877c5ab9.png?vsn=d') center / cover no-repeat;
    background-color: #b060d0;
    padding: 1rem;
}

.landing-svg-wrap {
    position: relative;
    width: 100%;
    max-width: 1200px;
}

.landing-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Real form overlay positioned on top of SVG's drawn form */
.landing-form-overlay {
    position: absolute;
    left: 31.3%;
    top: 81.5%;
    width: 34.1%;
    height: 5.7%;
    display: flex;
    align-items: stretch;
}

/* Turnstile widget: keep functional but hide visually (token still generated) */
.landing-form-overlay .cf-turnstile {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.landing-email-input {
    flex: 2.1;
    border: none;
    border-radius: 14px 0 0 14px;
    padding: 0 4%;
    font-size: 0.95rem;
    font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #333;
    background: #ffffff;
    outline: none;
}

.landing-email-input::placeholder {
    color: #acb4b5;
}

.landing-subscribe-btn {
    flex: 1;
    border: none;
    border-radius: 0 12px 12px 0;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    color: #e9eaf7;
    background: #0e162e;
    cursor: pointer;
    transition: background 0.2s;
}

.landing-subscribe-btn:hover {
    background: #1a2540;
}

/* Subscribed state — input becomes read-only, button swaps class via JS */
.landing-email-input.landing-email-subscribed {
    color: #86868b;
    background: #f0f0f0;
    cursor: default;
}

.landing-subscribed-btn {
    flex: 1;
    border: none;
    border-radius: 0 12px 12px 0;
    background: #0e162e;
    color: #5de8d4;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}

.landing-check {
    color: #5de8d4;
    font-size: 1.05em;
}

/* Inline subscribe error: appears below the SVG image on failure (LA-5).
   Hidden until the submit handler reveals it; cleared on retry. */
.landing-subscribe-error {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-top: 0.85rem;
    text-align: center;
    color: #ffffff;
    font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    display: none;
}

.landing-subscribe-error.is-visible {
    display: block;
}

/* Prevent white flash during form POST navigation */
body:has(.landing-page) {
    background-color: #b060d0;
}

/* Hide cookie banner on landing page */
body:has(.landing-page) #cookie-consent-banner,
body:has(.landing-page) #cookie-preferences-modal {
    display: none !important;
}

/* Clickable email link over SVG footer */
.landing-email-link {
    position: absolute;
    left: 44%;
    top: 88.5%;
    font-size: 0;
    width: 12%;
    height: 2%;
    z-index: 5;
    cursor: pointer;
}

/* ===== ADMIN PANEL ===== */

.admin-body {
    margin: 0;
    background: #f5f5f7;
    font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1d1d1f;
    -webkit-font-smoothing: antialiased;
}

/* --- Layout --- */
.admin-layout { min-height: 100vh; }

.admin-header {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 32px;
    height: 56px;
    background: #1d1d1f;
    color: #fff;
}

.admin-header-brand {
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.2px;
    margin-right: 16px;
}

.admin-nav { display: flex; gap: 4px; flex: 1; }

.admin-nav-link {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffffaa;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.admin-nav-link:hover { background: #ffffff15; color: #fff; }
.admin-nav-link.active { background: #ffffff20; color: #fff; }

.admin-header-user {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #ffffffaa;
}

.admin-logout-btn {
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #ff6b6b;
    text-decoration: none;
    background: transparent;
    border: 1px solid #ff6b6b44;
    cursor: pointer;
    transition: background 0.15s;
}

.admin-logout-btn:hover { background: #ff6b6b15; }

.admin-main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* --- Login --- */
.admin-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f7;
    padding: 24px;
}

.admin-login-card {
    background: #fff;
    border-radius: 16px;
    padding: 48px 40px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

.admin-login-title {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    margin: 0 0 28px;
    letter-spacing: -0.3px;
    color: #1d1d1f;
}

.admin-login-form { display: flex; flex-direction: column; gap: 16px; }

/* --- Forms --- */
.admin-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-label {
    font-size: 13px;
    font-weight: 600;
    color: #6e6e73;
}

.admin-input {
    padding: 10px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    font-size: 15px;
    font-family: inherit;
    color: #1d1d1f;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.admin-input:focus {
    border-color: var(--accent-teal, #4db3a5);
    box-shadow: 0 0 0 3px #4db3a520;
}

.admin-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.admin-password-wrap .admin-input {
    flex: 1;
    padding-right: 60px;
}

.admin-password-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--accent-teal, #4db3a5);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
}

.admin-password-toggle:hover {
    color: #3a8a7e;
}

.admin-textarea {
    padding: 10px 14px;
    border: 1px solid #d2d2d7;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1d1d1f;
    background: #fff;
    outline: none;
    resize: vertical;
    transition: border-color 0.15s;
}

.admin-textarea:focus {
    border-color: var(--accent-teal, #4db3a5);
    box-shadow: 0 0 0 3px #4db3a520;
}

/* --- Buttons --- */
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: background 0.15s, opacity 0.15s;
    text-decoration: none;
}

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

.admin-btn-primary {
    background: var(--accent-teal, #4db3a5);
    color: #fff;
}

.admin-btn-primary:hover:not(:disabled) { background: #3da396; }

.admin-btn-ghost {
    background: transparent;
    color: #6e6e73;
    border: 1px solid #d2d2d7;
}

.admin-btn-ghost:hover { background: #f5f5f7; }

.admin-btn-danger {
    background: #ff3b30;
    color: #fff;
}

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

.admin-btn-delete-row {
    background: none;
    border: none;
    color: #ff3b30;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-family: inherit;
}

.admin-btn-delete-row:hover {
    background: #fff0f0;
}

.admin-btn-full { width: 100%; }

.admin-btn-sm {
    padding: 5px 12px;
    font-size: 12px;
    border-radius: 8px;
}

/* --- Page headers --- */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.admin-page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0;
}

.admin-section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 32px 0 12px;
}

.admin-page-actions { display: flex; gap: 8px; }

/* --- Dashboard stats --- */
.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.admin-stat-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s;
}

.admin-stat-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }

.admin-stat-number {
    font-size: 36px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--accent-teal, #4db3a5);
}

.admin-stat-label {
    font-size: 14px;
    font-weight: 600;
    color: #6e6e73;
    margin-top: 4px;
}

.admin-stat-sub {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 4px;
}

/* --- Tables --- */
.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.admin-table th {
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
    background: #fafafa;
    border-bottom: 1px solid #e5e5ea;
}

.admin-table td {
    padding: 12px 16px;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f7;
}

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

.admin-tr-muted td { color: #8e8e93; }

.admin-th-check { width: 40px; }

.admin-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent-teal, #4db3a5);
    cursor: pointer;
}

.admin-td-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.admin-table-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.admin-table-count {
    font-size: 13px;
    color: #8e8e93;
    margin-left: auto;
}

/* --- Badges --- */
.admin-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-badge-active { background: #e8f5e9; color: #2e7d32; }
.admin-badge-inactive { background: #f5f5f5; color: #8e8e93; }

/* --- Compose --- */
.admin-compose {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.admin-compose-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
}

.admin-compose-subtitle {
    font-size: 13px;
    color: #8e8e93;
    margin: 0 0 20px;
}

.admin-compose-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.admin-compose-note {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 12px;
}

/* --- Form card --- */
.admin-form-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.admin-form-card h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
}

.admin-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

.admin-form-hint {
    font-size: 13px;
    color: #8e8e93;
    margin: 8px 0 0;
}

/* --- Password banner --- */
.admin-password-banner {
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
}

.admin-password-display {
    background: #1d1d1f;
    color: var(--accent-teal, #4db3a5);
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-family: "SF Mono", "Fira Code", monospace;
    letter-spacing: 0.5px;
    user-select: all;
}

/* --- Confirm delete --- */
.admin-confirm-delete {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #ff3b30;
    font-weight: 600;
}

/* --- Empty state --- */
.admin-empty {
    text-align: center;
    padding: 48px 24px;
    color: #8e8e93;
    font-size: 15px;
}

/* --- Flash override for admin ---
   The shared flash uses .toast, which stays invisible and off-screen without
   .show, so no admin page ever showed its messages (#1225). Show them in place. */
.admin-body .toast {
    opacity: 1;
    transform: none;
    transition: none;
    min-width: 0;
    max-width: none;
    margin-bottom: 16px;
    padding: 12px 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    box-shadow: none;
    cursor: pointer;
}

.admin-body #flash-error.toast {
    border-color: var(--error-border);
}

.admin-body .toast .alert {
    display: flex;
    flex: 1;
    align-items: flex-start;
    gap: 12px;
}

.admin-body .toast p {
    margin: 0;
}

.admin-body .toast button {
    margin-left: auto;
    padding: 0;
    color: var(--text-primary);
    background: none;
    border: 0;
    cursor: pointer;
}

.admin-body .toast button::before {
    content: "\00D7";
    font-size: 18px;
    line-height: 1;
}

/* ========================================================================
   PORTAL DASHBOARD (pd-) — Client portal for registered account holders
   Source: mockup-portal-dashboard.html (exact copy)
   ======================================================================== */

/* ========== THEME VARIABLES ========== */
/* Text colors lifted from freelancer portal (AAA-verified greys) */
.client-dashboard-body {
  /* Backgrounds — navy-tinted (portal identity) */
  --pd-bg-body: #0A0E15;
  --pd-bg-sidebar: #0f1319;
  --pd-bg-topbar: #0f1319;
  --pd-bg-card: #151a24;
  --pd-bg-input: #1a1f2b;
  --pd-bg-hover: #1a1f2b;
  --pd-bg-hover-alt: #212631;
  /* Borders — from freelancer dark mode */
  --pd-border: #3a3a3c;
  --pd-border-light: #48484a;
  --pd-border-hover: #636366;
  /* Text — from freelancer dark mode (AAA on bg-primary) */
  --pd-text-primary: #f5f5f7;
  --pd-text-secondary: #d1d1d6;
  --pd-text-tertiary: #c0c0c5;
  --pd-text-muted: #c0c0c5;
  --pd-text-faint: #a1a1a6;
  --pd-nav-text: #d1d1d6;
  --pd-nav-hover-bg: #141e2b;
  --pd-nav-hover-text: #f5f5f7;
  --pd-notif-dot-border: #1a1f2b;
  --pd-card-urgent-bg: linear-gradient(135deg, #151a24 0%, #1e1925 100%);
  --pd-card-next-bg: linear-gradient(135deg, #151a24 0%, #181d2c 100%);
  --pd-search-key-bg: #0A0E15;
  --pd-text-link: #6b9fe0;
  /* Status badges — opaque (from freelancer dark mode) */
  --pd-badge-pending-bg: #1a2a3a;
  --pd-badge-pending-text: #64d2ff;
  --pd-badge-overdue-bg: #3a1a1a;
  --pd-badge-overdue-text: #ff453a;
  --pd-badge-paid-bg: #1a3a1a;
  --pd-badge-paid-text: #32d74b;
  --pd-badge-approval-bg: #3a2a1a;
  --pd-badge-approval-text: #ff9f0a;
  --pd-transition: background 0.25s, color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.client-dashboard-body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--pd-bg-body);
  color: var(--pd-text-secondary);
  margin: 0;
  padding: 0;
  transition: var(--pd-transition);
}

/* Light mode variables */
html.client-dashboard-light .client-dashboard-body {
  --pd-bg-body: #f5f5f7;
  --pd-bg-sidebar: #ffffff;
  --pd-bg-topbar: #ffffff;
  --pd-bg-card: #ffffff;
  --pd-bg-input: #f5f5f7;
  --pd-bg-hover: #f5f5f7;
  --pd-bg-hover-alt: #e5e5ea;
  --pd-border: #d2d2d7;
  --pd-border-light: #e5e5ea;
  --pd-border-hover: #b0b0b5;
  --pd-text-primary: #1d1d1f;
  --pd-text-secondary: #3a3a3c;
  --pd-text-tertiary: #6e6e73;
  --pd-text-muted: #6e6e73;
  --pd-text-faint: #6e6e73;
  --pd-nav-text: #6e6e73;
  --pd-nav-hover-bg: #eef2f6;
  --pd-nav-hover-text: #1d1d1f;
  --pd-notif-dot-border: #ffffff;
  --pd-card-urgent-bg: linear-gradient(135deg, #ffffff 0%, #fef5f8 100%);
  --pd-card-next-bg: linear-gradient(135deg, #ffffff 0%, #f9f9fe 100%);
  --pd-search-key-bg: #e5e5ea;
  --pd-text-link: #2966a3;
  --pd-badge-pending-bg: #e3f2fd;
  --pd-badge-pending-text: #1976d2;
  --pd-badge-overdue-bg: #ffebee;
  --pd-badge-overdue-text: #d32f2f;
  --pd-badge-paid-bg: #e8f5e9;
  --pd-badge-paid-text: #2da84e;
  --pd-badge-approval-bg: #fff3e0;
  --pd-badge-approval-text: #e65100;
}

/* ========== LAYOUT ========== */
.pd-wrapper {
  display: flex;
  min-height: 100vh;
}

/* ========== SIDEBAR ========== */
.pd-sidebar {
  width: 260px;
  background: var(--pd-bg-sidebar);
  border-right: 1px solid var(--pd-border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  height: 100vh;
  position: sticky;
  top: 0;
}

.pd-sidebar-header {
  padding: 18px;
  background: linear-gradient(135deg, #1e3a5f 0%, #8bb8e8 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.pd-sidebar-mascot {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.pd-sidebar-mascot img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.pd-sidebar-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4a7fb8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.pd-sidebar-avatar:hover {
  transform: scale(1.05);
  background: #5a8fc8;
}

/* Avatar dropdown */
.pd-avatar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 12px;
  left: 12px;
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 200;
}

.pd-avatar-dropdown.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.pd-avatar-dropdown-header {
  padding: 16px;
}

.pd-avatar-dropdown-name {
  font-weight: 600;
  color: var(--pd-text-primary);
  font-size: 15px;
}

.pd-avatar-dropdown-divider {
  height: 1px;
  background: var(--pd-border);
  margin: 0;
}

.pd-avatar-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--pd-text-primary);
  text-decoration: none;
  font-family: inherit;
  transition: background 0.15s ease;
}

.pd-avatar-dropdown-item:hover {
  background: var(--pd-bg-hover);
}

.pd-avatar-dropdown-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--pd-text-muted);
}

.pd-avatar-dropdown-item.danger {
  color: #ff453a;
}

.pd-avatar-dropdown-item.danger svg {
  color: #ff453a;
}

html.client-dashboard-light .pd-avatar-dropdown-item.danger,
html.client-dashboard-light .pd-avatar-dropdown-item.danger svg {
  color: #d32f2f;
}

html.client-dashboard-light .pd-avatar-dropdown {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Sidebar language flags section (above Settings) */
.pd-sidebar-flags-section {
  border-top: 1px solid var(--pd-border);
  padding: 10px 12px;
}
.pd-sidebar-flags {
  display: flex;
  gap: 4px;
  justify-content: center;
}
/* Legacy dropdown flags */
.pd-avatar-dropdown-flags {
  display: flex;
  gap: 4px;
  padding: 8px 16px;
  justify-content: center;
}
.pd-flag-btn {
  font-size: 20px;
  background: none;
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 4px 6px;
  cursor: pointer;
  line-height: 1;
  transition: border-color 0.15s;
}
.pd-flag-btn:hover { border-color: rgba(255,255,255,0.3); }
.pd-flag-btn.active { border-color: #4a7fc7; background: rgba(74, 127, 199, 0.15); }
html.client-dashboard-light .pd-flag-btn:hover { border-color: rgba(0,0,0,0.2); }
html.client-dashboard-light .pd-flag-btn.active { border-color: #4a7fc7; background: rgba(74, 127, 199, 0.1); }

/* ===== PORTAL SETTINGS PAGE ===== */
.portal-settings-page {
  padding: 24px;
  max-width: 1000px;
  margin: 0 auto;
}
.portal-settings-page .settings-container {
  display: flex;
  gap: 32px;
  min-height: 600px;
}
.portal-settings-page .modal-settings-sidebar {
  min-width: 200px;
  max-width: 220px;
  flex-shrink: 0;
}
.portal-settings-page .modal-settings-content {
  flex: 1;
  min-width: 0;
}
.portal-settings-page .settings-header {
  margin-bottom: 24px;
}
.portal-settings-page .settings-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--pd-text, #e5e5ea);
  margin: 0 0 4px;
}
.portal-settings-page .settings-subtitle {
  font-size: 14px;
  color: var(--pd-text-secondary, #8e8e93);
  margin: 0;
}
.portal-settings-page .section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--pd-text, #e5e5ea);
  margin: 0 0 12px;
}
.portal-settings-page .form-group {
  margin-bottom: 16px;
}
.portal-settings-page .form-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-text-secondary, #8e8e93);
  margin-bottom: 6px;
}
.portal-settings-page .form-label .required { color: #e74c3c; }
.portal-settings-page .form-input {
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  border: 1px solid var(--pd-border, #38383a);
  border-radius: 8px;
  background: var(--pd-card, #1c1c1e);
  color: var(--pd-text, #e5e5ea);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s;
}
.portal-settings-page .form-input:focus {
  border-color: #4a7fc7;
}
.portal-settings-page .form-help {
  font-size: 12px;
  color: var(--pd-text-secondary, #8e8e93);
  margin-top: 4px;
}
.portal-settings-page .btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
}
.portal-settings-page .btn:hover { opacity: 0.85; }
.portal-settings-page .btn-primary {
  background: #4a7fc7;
  color: white;
}
.portal-settings-page .btn-secondary {
  background: var(--pd-card, #1c1c1e);
  color: var(--pd-text, #e5e5ea);
  border: 1px solid var(--pd-border, #38383a);
}
.portal-settings-page .btn-group {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.portal-settings-page .settings-error-msg {
  color: #e74c3c;
  font-size: 13px;
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 6px;
}
.portal-settings-page .settings-success-msg {
  color: #2a9d8f;
  font-size: 13px;
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(42, 157, 143, 0.1);
  border-radius: 6px;
}

/* Settings toggle rows (notifications) */
.settings-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--pd-border, #38383a);
}
.settings-toggle-row:last-child { border-bottom: none; }
.settings-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--pd-text, #e5e5ea);
}
.settings-toggle-desc {
  font-size: 12px;
  color: var(--pd-text-secondary, #8e8e93);
  margin-top: 2px;
}

/* About section */
.settings-about-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--pd-border, #38383a);
}
.settings-about-row:last-child { border-bottom: none; }
.settings-about-label {
  font-size: 14px;
  color: var(--pd-text-secondary, #8e8e93);
}
.settings-about-value {
  font-size: 14px;
  color: var(--pd-text, #e5e5ea);
}

/* Light mode overrides for portal settings */
html.client-dashboard-light .portal-settings-page .settings-title { color: #1d1d1f; }
html.client-dashboard-light .portal-settings-page .settings-subtitle { color: #6e6e73; }
html.client-dashboard-light .portal-settings-page .section-title { color: #1d1d1f; }
html.client-dashboard-light .portal-settings-page .form-label { color: #6e6e73; }
html.client-dashboard-light .portal-settings-page .form-input {
  background: #ffffff;
  border-color: #d1d1d6;
  color: #1d1d1f;
}
html.client-dashboard-light .portal-settings-page .btn-secondary {
  background: #ffffff;
  color: #1d1d1f;
  border-color: #d1d1d6;
}
html.client-dashboard-light .settings-toggle-label { color: #1d1d1f; }
html.client-dashboard-light .settings-toggle-desc { color: #6e6e73; }
html.client-dashboard-light .settings-about-label { color: #6e6e73; }
html.client-dashboard-light .settings-about-value { color: #1d1d1f; }
html.client-dashboard-light .settings-toggle-row { border-color: #e5e5ea; }
html.client-dashboard-light .settings-about-row { border-color: #e5e5ea; }

/* Portal Settings Modal (blue theme) */
/* Settings avatar upload section */
.settings-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e5ea;
}
.settings-avatar-circle {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: opacity 0.2s;
}
.settings-avatar-circle:hover {
  opacity: 0.85;
}
.settings-avatar-circle:hover .settings-avatar-overlay {
  opacity: 1;
}
.settings-avatar-initial {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
}
.settings-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.settings-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: 50%;
}
.settings-avatar-overlay svg {
  width: 28px;
  height: 28px;
  fill: #ffffff;
}
.settings-save-feedback {
  color: var(--accent-teal, #4db3a5);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
/* Global inline error line for the freelancer Settings page (the
   .portal-settings-page-scoped rule does not apply here). Red, persistent. */
.settings-error-msg {
  color: var(--error-text);
  font-size: 13px;
  font-weight: 500;
  margin: 6px 0 0;
}
.settings-current-value {
  font-size: 15px;
  color: #1d1d1f;
  padding: 10px 14px;
  background: #f5f5f7;
  border-radius: 8px;
  border: 1px solid #e5e5ea;
}
.portal-btn-secondary {
  background: #ffffff;
  color: #1e3a5f;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.portal-btn-secondary:hover {
  background: #f5f5f7;
  border-color: #1e3a5f;
}

.portal-settings-modal {
  display: flex;
  height: 85vh;
}
.portal-settings-modal .modal-settings-sidebar {
  width: 240px;
  padding: 24px 0;
  overflow-y: auto;
  flex-shrink: 0;
}
.portal-settings-modal .modal-settings-nav-item.portal-nav {
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  border-left: 3px solid transparent;
}
.portal-settings-modal .modal-settings-nav-item.portal-nav svg {
  width: 20px;
  height: 20px;
  fill: rgba(255, 255, 255, 0.7);
}
.portal-settings-modal .modal-settings-nav-item.portal-nav:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}
.portal-settings-modal .modal-settings-nav-item.portal-nav:hover svg {
  fill: #ffffff;
}
.portal-settings-modal .modal-settings-nav-item.portal-nav.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border-left-color: #8bb8e8;
}
.portal-settings-modal .modal-settings-nav-item.portal-nav.active svg {
  fill: #8bb8e8;
}
.portal-settings-modal .modal-settings-content {
  flex: 1;
  padding: 32px;
}
.portal-settings-modal .settings-title {
  color: #1d1d1f;
}
.portal-settings-modal .settings-subtitle {
  color: #6e6e73;
}
.portal-settings-modal .form-label {
  color: #6e6e73;
}
.portal-settings-modal .form-input {
  background: #ffffff;
  border: 1px solid #d1d1d6;
  color: #1d1d1f;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}
.portal-settings-modal .form-input:focus {
  border-color: #2d5a8e;
  outline: none;
  box-shadow: 0 0 0 3px rgba(45, 90, 142, 0.15);
}

/* #1096: client portal Account settings on phones. The `.portal-settings-modal ...`
   rules above beat the shared phone block (`.modal-settings-sidebar` in the
   max-width:768px block), so the 240px side menu stayed and the settings were
   squeezed to ~73px. Same fix as the freelancer Settings popup (#993): stack the
   menu (a scrollable row of pills) above the content. The overlay, modal, content
   and close button carry inline styles, hence the !important on those properties. */
@media (max-width: 768px) {
  /* Account settings only: the shared .portal-settings-overlay also holds the
     right-docked Messages/Support drawers (CP-96), which must stay flush. */
  .portal-settings-overlay--account {
    padding: 12px !important;
  }

  .portal-settings-modal {
    flex-direction: column;
    width: 100% !important;
    height: calc(100vh - 24px);
    height: calc(100dvh - 24px);
    max-height: calc(100vh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  .portal-settings-modal .modal-settings-sidebar {
    width: 100%;
    min-width: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    /* room on the right for the close button */
    padding: 12px 56px 12px 16px;
  }

  .portal-settings-modal .modal-settings-nav-item.portal-nav {
    flex-shrink: 0;
    padding: 8px 16px 5px;
    white-space: nowrap;
    border-left: none;
    border-bottom: 3px solid transparent;
    border-radius: 20px;
  }

  /* The desktop 3px left marker becomes a 3px bottom marker, so the current
     section stays visible without relying on the pill tint alone. Same token
     as the close cap's x: >=3:1 against the row in light and dark. */
  .portal-settings-modal .modal-settings-nav-item.portal-nav.active {
    border-bottom-color: var(--bg-primary);
  }

  .portal-settings-modal .modal-settings-content {
    flex: 1;
    min-height: 0;
    max-height: none !important;
    padding: 24px;
  }

  /* The close button caps the end of the pill row, so pills scroll under it
     instead of overlapping its x. Cap = the row's own colour (the sidebar's
     inline --info-text), as #993 uses the lancer row's --bg-secondary; the x
     takes --bg-primary so it stays readable on it. */
  .portal-settings-close {
    top: 0 !important;
    right: 0 !important;
    width: 48px;
    height: 61px;
    padding: 0 !important;
    background: var(--info-text) !important;
    color: var(--bg-primary) !important;
  }
}
.portal-btn-primary {
  background: var(--accent-primary);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.portal-btn-primary:hover {
  background: var(--accent-hover);
}

/* Portal Help Center FAQ items */
.portal-faq-item {
  border-bottom: 1px solid #e5e5ea;
  padding: 0;
}
.portal-faq-item summary {
  padding: 16px 0;
  font-weight: 600;
  font-size: 15px;
  color: #1d1d1f;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.portal-faq-item summary::after {
  content: "+";
  font-size: 20px;
  color: #6e6e73;
  transition: transform 0.2s;
}
.portal-faq-item[open] summary::after {
  content: "\2212";
}
.portal-faq-item summary::-webkit-details-marker {
  display: none;
}
.portal-faq-item p {
  padding: 0 0 16px;
  margin: 0;
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.6;
}

/* Portal Glossary items */
.portal-glossary-item {
  padding: 16px 0;
  border-bottom: 1px solid #e5e5ea;
}
.portal-glossary-item dt {
  font-weight: 700;
  font-size: 15px;
  color: #1d1d1f;
  margin-bottom: 4px;
}
.portal-glossary-item dd {
  margin: 0;
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.6;
}

/* CP-104: shared overlay positioning, previously repeated inline on every portal
   pop-up. Per-overlay z-index / alignment / background / padding stay inline. */
.portal-settings-overlay,
.pd-unsent-guard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

/* Portal Support Tickets Modal (centered) */
.portal-ticket-modal {
  width: 90%;
  max-width: 520px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* CP-96: right-docked slide-in drawer (Messages + Support panels). Overrides the
   centered .portal-ticket-modal box into a full-height panel flush to the right
   edge, sliding in from the right -- the pattern the docs describe. Scrimless
   (the overlay drops its solid backdrop so the dashboard stays in view; the
   dark-mode "no rgba backdrops" rule forbids a translucent scrim, so the panel's
   border-left + edge shadow do the separating instead). */
@keyframes portalDrawerSlideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.portal-ticket-drawer {
  width: 420px;
  max-width: 92vw;
  height: 100%;
  max-height: 100%;
  border-radius: 0;
  border-left: 1px solid var(--border-secondary);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  animation: portalDrawerSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.portal-ticket-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5ea;
}
.portal-ticket-panel-header h3 {
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}
.portal-ticket-panel-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6e6e73;
  cursor: pointer;
  padding: 4px 8px;
}

.portal-ticket-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

.portal-ticket-panel-footer {
  padding: 16px 24px;
  border-top: 1px solid #e5e5ea;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.portal-ticket-item {
  padding: 14px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: default;
  transition: border-color 0.15s;
}
.portal-ticket-item:hover {
  border-color: #2d5a8e;
}
.portal-ticket-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.portal-ticket-id {
  font-family: monospace;
  font-size: 12px;
  color: #6e6e73;
}
.portal-ticket-status {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.portal-ticket-status.ongoing {
  background: #fef2f2;
  color: #ef4444;
}
.portal-ticket-status.fixed {
  background: #f0fdf4;
  color: #22c55e;
}
.portal-ticket-subject {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
}
.portal-ticket-date {
  font-size: 12px;
  color: #8e8e93;
}

/* Portal Support notification dot */
.portal-support-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  padding: 0 5px;
  margin-left: 6px;
}
.portal-support-dot.red { background: #ef4444; }
.portal-support-dot.green { background: #22c55e; }

/* ===== Portal Support Tickets — clickable rows + empty state ===== */
.portal-ticket-item-clickable {
  cursor: pointer;
}
.portal-ticket-item-clickable:hover {
  border-color: #2d5a8e;
  background: #f8fafc;
}
.portal-ticket-item-clickable:focus-visible {
  outline: 2px solid #2d5a8e;
  outline-offset: 2px;
}

.portal-ticket-empty {
  text-align: center;
  padding: 56px 24px 40px;
  color: #6e6e73;
}
.portal-ticket-empty-icon {
  font-size: 36px;
  margin-bottom: 14px;
}
.portal-ticket-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.portal-ticket-empty-text {
  font-size: 13px;
  color: #6e6e73;
}

/* ===== Portal Messages — conversation inbox panel ===== */
.portal-conversations-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.portal-conversation-item {
  padding: 14px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: #ffffff;
}
.portal-conversation-item:hover {
  border-color: #2d5a8e;
  background: #f8fafc;
}
.portal-conversation-item:focus-visible {
  outline: 2px solid #2d5a8e;
  outline-offset: 2px;
}
.portal-conversation-item.unread {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.portal-conversation-item.unread:hover {
  background: #dbeafe;
}
.portal-conversation-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.portal-conversation-left {
  flex: 1;
  min-width: 0;
}
.portal-conversation-title {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1f;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.portal-conversation-unread-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
}
.portal-conversation-sub {
  font-size: 12px;
  color: #6e6e73;
  margin-bottom: 6px;
}
.portal-conversation-snippet {
  font-size: 13px;
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.portal-conversation-item.unread .portal-conversation-snippet {
  color: #1d1d1f;
  font-weight: 500;
}
.portal-conversation-you-prefix {
  color: #8e8e93;
  margin-right: 4px;
}
.portal-conversation-time {
  font-size: 12px;
  color: #8e8e93;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ===== Portal Support Tickets — Detail view ===== */
.portal-ticket-detail {
  padding: 4px 4px 12px;
}
.portal-ticket-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: #1e3a5f;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 0 14px;
}
.portal-ticket-detail-back:hover {
  text-decoration: underline;
}
.portal-ticket-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e5ea;
  margin-bottom: 16px;
}
.portal-ticket-detail-id {
  font-family: monospace;
  font-size: 12px;
  color: #6e6e73;
  margin-bottom: 4px;
}
.portal-ticket-detail-subject {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 4px;
}
.portal-ticket-detail-date {
  font-size: 12px;
  color: #8e8e93;
}

.portal-ticket-response-time {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eaf3fb;
  color: #1e3a5f;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 16px;
}
.portal-ticket-response-time svg {
  flex-shrink: 0;
}

.portal-ticket-section {
  margin-bottom: 18px;
}
.portal-ticket-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8e8e93;
  margin-bottom: 8px;
}
.portal-ticket-original-body {
  font-size: 14px;
  color: #1d1d1f;
  line-height: 1.5;
  white-space: pre-wrap;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 12px 14px;
}

.portal-ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.portal-ticket-thread-empty {
  font-size: 13px;
  color: #8e8e93;
  font-style: italic;
  padding: 8px 0;
}
.portal-ticket-thread-item {
  border-radius: 8px;
  padding: 10px 12px;
}
.portal-ticket-thread-user {
  background: #eaf3fb;
  border-left: 3px solid #1e3a5f;
}
.portal-ticket-thread-meta {
  font-size: 11px;
  font-weight: 600;
  color: #6e6e73;
  margin-bottom: 4px;
}
.portal-ticket-thread-body {
  font-size: 14px;
  color: #1d1d1f;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ===== Reply section ===== */
.portal-ticket-reply-section {
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid #e5e5ea;
}
.portal-ticket-reply-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8e8e93;
  margin-bottom: 6px;
}
.portal-ticket-reply-field {
  width: 100%;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1d1d1f;
  background: #ffffff;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
  min-height: 80px;
}
.portal-ticket-reply-field:focus {
  outline: none;
  border-color: #1e3a5f;
}
.portal-ticket-reply-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  gap: 12px;
  flex-wrap: wrap;
}
.portal-ticket-reply-count {
  font-size: 12px;
  color: #8e8e93;
}
.portal-ticket-send-btn {
  background: #1e3a5f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.portal-ticket-send-btn:hover {
  background: #2d5a8e;
}
.portal-ticket-send-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Close ticket section (separated from reply) ===== */
.portal-ticket-close-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f0f0f3;
  text-align: center;
}
.portal-ticket-close-link {
  background: none;
  border: none;
  cursor: pointer;
  color: #c62828;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
}
.portal-ticket-close-link:hover {
  text-decoration: underline;
}
.portal-ticket-close-hint {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 4px;
}

/* ===== Fixed-ticket actions ===== */
.portal-ticket-fixed-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #e5e5ea;
}
.portal-ticket-archive-btn {
  background: #1e3a5f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.portal-ticket-archive-btn:hover {
  background: #2d5a8e;
}

/* ===== Cancel sub-overlay ===== */
/* z-index 10500 ensures it appears in front of the lancer's .template-modal (10000)
   AND the client portal's .portal-settings-overlay (2000). Both portals share this. */
.portal-ticket-sub-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 10500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.portal-ticket-sub-modal {
  width: 90%;
  max-width: 460px;
  max-height: 85vh;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.portal-ticket-sub-header {
  padding: 20px 22px 8px;
}
.portal-ticket-sub-title {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 4px;
}
.portal-ticket-sub-subtitle {
  font-size: 13px;
  color: #6e6e73;
}
.portal-ticket-sub-body {
  padding: 8px 22px 16px;
  overflow-y: auto;
}

.portal-cancel-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.portal-cancel-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #1d1d1f;
  background: #ffffff;
  transition: border-color 0.15s, background 0.15s;
}
.portal-cancel-option:hover {
  background: #f8fafc;
  border-color: #2d5a8e;
}
.portal-cancel-option input[type="radio"] {
  accent-color: #1e3a5f;
  margin: 0;
}

.portal-cancel-feedback-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: #6e6e73;
  margin-bottom: 6px;
}
.portal-cancel-feedback {
  width: 100%;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
  color: #1d1d1f;
  background: #ffffff;
  resize: vertical;
  font-family: inherit;
  box-sizing: border-box;
}
.portal-cancel-feedback:focus {
  outline: none;
  border-color: #1e3a5f;
}

.portal-ticket-sub-footer {
  padding: 14px 22px;
  border-top: 1px solid #e5e5ea;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  background: #fafafa;
}
.portal-ticket-sub-back {
  background: #ffffff;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #1d1d1f;
  cursor: pointer;
}
.portal-ticket-sub-back:hover {
  background: #f5f5f7;
}
.portal-ticket-sub-confirm {
  background: #c62828;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.portal-ticket-sub-confirm:hover {
  background: #a91e1e;
}
.portal-ticket-sub-confirm:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ===== Close-ticket success overlay (JS-managed, after cancel) ===== */
/* z-index 10600 (above the cancel sub-overlay at 10500) ensures the success
   overlay appears in front of both the cancel modal AND the lancer's
   .template-modal (10000). */
.portal-ticket-close-success-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.portal-ticket-close-success-modal {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.portal-ticket-close-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #e8f5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.portal-ticket-close-success-title {
  font-size: 20px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 12px;
}
.portal-ticket-close-success-body {
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
}
.portal-ticket-close-success-id {
  color: #1e3a5f;
  font-family: monospace;
  font-weight: 700;
}
.portal-ticket-close-success-hint {
  color: #6e6e73;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 24px;
}
.portal-ticket-close-success-done {
  background: #1e3a5f;
  color: #ffffff;
  border: none;
  padding: 10px 32px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.portal-ticket-close-success-done:hover {
  background: #2d5a8e;
}

/* ===== Lancer-themed overrides for reused portal cancel/success overlays ===== */
/* Lancer uses teal accent vs. portal's blue. Applied via .lancer-themed class
   added to the overlay root. */
.portal-ticket-sub-overlay.lancer-themed .portal-cancel-option:hover {
  border-color: var(--accent-teal);
}
.portal-ticket-sub-overlay.lancer-themed .portal-cancel-option input[type="radio"] {
  accent-color: var(--accent-teal);
}
.portal-ticket-sub-overlay.lancer-themed .portal-cancel-feedback:focus {
  border-color: var(--accent-teal);
}

.portal-ticket-close-success-overlay.lancer-themed .portal-ticket-close-success-id {
  color: var(--accent-teal);
}
.portal-ticket-close-success-overlay.lancer-themed .portal-ticket-close-success-done {
  background: var(--accent-teal);
}
.portal-ticket-close-success-overlay.lancer-themed .portal-ticket-close-success-done:hover {
  background: #3da08e;
}

/* Theme toggle */
.pd-sidebar-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid var(--pd-border);
}

.pd-theme-toggle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1c1c1e;
  border: 2px solid transparent;
  background-image: linear-gradient(#1c1c1e, #1c1c1e), linear-gradient(135deg, #8bb8e8 0%, #4a7fc7 50%, #1e3a5f 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #ffffff;
  transition: all 0.2s ease;
}

.pd-theme-toggle:hover {
  transform: scale(1.05);
}

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

/* Dark mode: show sun icon (click to go light) */
.pd-theme-toggle .icon-sun { display: block; }
.pd-theme-toggle .icon-moon { display: none; }

/* Light mode: show moon icon (click to go dark) */
html.client-dashboard-light .pd-theme-toggle .icon-sun { display: none; }
html.client-dashboard-light .pd-theme-toggle .icon-moon { display: block; }
html.client-dashboard-light .pd-theme-toggle {
  background: #f5f5f7;
  background-image: linear-gradient(#f5f5f7, #f5f5f7), linear-gradient(135deg, #8bb8e8 0%, #4a7fc7 50%, #1e3a5f 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  color: #1c1c1e;
}

/* Navigation */
.pd-sidebar-nav {
  flex: 1;
  padding: 16px 12px;
  overflow-y: auto;
}

.pd-nav-section-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--pd-text-faint);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 8px 12px 6px;
  margin-top: 8px;
}

.pd-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--pd-nav-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  margin-bottom: 2px;
}

.pd-nav-item:hover {
  background: var(--pd-nav-hover-bg);
  color: var(--pd-nav-hover-text);
}

.pd-nav-item.active {
  background: linear-gradient(135deg, #1e3a5f, #8bb8e8);
  color: #ffffff;
  font-weight: 600;
}

.pd-nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.pd-nav-item-text {
  flex: 1;
}

.pd-nav-badge {
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
}

.pd-nav-badge.red {
  background: #eb0a44;
  color: #ffffff;
}
.pd-nav-badge.gold {
  background: #f59e0b;
  color: #ffffff;
}
.pd-nav-badge.purple {
  background: #7c3aed;
  color: #ffffff;
}
.pd-invoice-badge.estimate {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.pd-invoice-badge.approval {
  background: rgba(124, 58, 237, 0.15);
  color: #7c3aed;
}

/* CP-54: unsent-message drafts -- row pill + the restored-draft hint above
   the estimate composer. */
.pd-draft-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}
.estimate-modal-draft-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 6px;
  font-size: 12px;
}
.estimate-modal-draft-hint a {
  color: var(--text-secondary);
  text-decoration: underline;
  font-size: 12px;
}

/* CP-37: portal empty-state icon accents. One named definition per accent
   (mirroring the badge accents above) instead of 7 hand-copied inline styles.
   Same 0-2-0 specificity as the freelancer-pink base rule
   (.empty-state-card .empty-state-icon-wrapper) but later in source, so these
   override it exactly like the inline styles did. Blue = portal default;
   estimate/approval match their page badges. */
.empty-state-icon-wrapper.pd-accent {
  background: linear-gradient(135deg, rgba(30, 58, 95, 0.15) 0%, rgba(139, 184, 232, 0.15) 100%);
}
.empty-state-icon-wrapper.pd-accent-estimate {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(251, 191, 36, 0.15) 100%);
}
.empty-state-icon-wrapper.pd-accent-approval {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%);
}

.pd-nav-badge.orange {
  background: #f59e0b;
  color: #1d1d1f;
}

.pd-nav-divider {
  height: 1px;
  background: var(--pd-border);
  margin: 12px 12px;
}

.pd-sidebar-bottom {
  border-top: 1px solid var(--pd-border);
  padding: 12px;
}

.pd-settings-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--pd-text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 2px;
}

.pd-settings-nav-item:hover {
  background: var(--pd-nav-hover-bg);
  color: var(--pd-text-tertiary);
}

.pd-settings-nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

html.client-dashboard-light .pd-nav-item.active {
  color: #ffffff;
}

html.client-dashboard-light .pd-settings-nav-item:hover {
  color: var(--pd-text-secondary);
}

/* ========== MAIN CONTENT ========== */
.pd-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pd-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  border-bottom: 1px solid var(--pd-border);
  background: var(--pd-bg-topbar);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: var(--pd-transition);
}

.pd-topbar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--pd-text-primary);
}

.pd-topbar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--pd-bg-input);
  border: 1px solid var(--pd-border-light);
  border-radius: 8px;
  color: var(--pd-text-muted);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s;
}

.pd-topbar-search:hover {
  border-color: var(--pd-border-hover);
}

/* Search input (contenteditable div) */
.pd-search-input {
  flex: 1;
  outline: none;
  border: none;
  background: transparent;
  color: var(--pd-text-primary);
  font-size: 13px;
  font-family: inherit;
  min-width: 120px;
  white-space: nowrap;
  overflow: hidden;
}
.pd-search-input:empty::before {
  content: attr(data-placeholder);
  color: var(--pd-text-secondary);
  pointer-events: none;
}
.pd-topbar-search-active {
  cursor: text;
}
.pd-topbar-search-active:focus-within {
  border-color: #4a7fc7;
  box-shadow: 0 0 0 2px rgba(74, 127, 199, 0.15);
}

.pd-topbar-search svg {
  width: 16px;
  height: 16px;
}

.pd-topbar-search-key {
  font-size: 11px;
  padding: 2px 6px;
  background: var(--pd-search-key-bg);
  border: 1px solid var(--pd-border-light);
  border-radius: 4px;
  color: var(--pd-text-faint);
  margin-left: 24px;
}

/* Mission Control header (matching freelancer style) */
.pd-page-header-sticky {
  flex-direction: column;
  align-items: stretch;
}

.pd-page-header {
  margin-bottom: 0;
}

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

.pd-page-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--pd-text-primary);
  margin: 0 0 4px;
}

.pd-page-subtitle {
  font-size: 14px;
  color: var(--pd-text-muted);
  margin: 0;
}

.pd-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Content area */
.pd-content {
  padding: 28px 32px;
  flex: 1;
  overflow-y: auto;
}

.pd-content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.pd-content-greeting {
  font-size: 24px;
  font-weight: 700;
  color: var(--pd-text-primary);
}

.pd-content-greeting-sub {
  font-size: 14px;
  color: var(--pd-text-muted);
  margin-top: 4px;
}

.pd-content-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pd-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #1e3a5f, #8bb8e8);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}

.pd-btn-primary:hover { opacity: 0.9; }
.pd-btn-primary svg { width: 16px; height: 16px; }

.pd-invoice-checkbox-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 12px 14px 12px 6px;
  margin: -12px 0 -12px -6px;
}

.pd-invoice-checkbox {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid #8e8e93;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
  margin: 0;
  transition: background 0.15s, border-color 0.15s;
}
.pd-invoice-checkbox:checked {
  background: #4a7fc7;
  border-color: #4a7fc7;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L12 4l1 1-6.5 6.5z'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.pd-invoice-checkbox:hover { border-color: #4a7fc7; }

.pd-section-card-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.pd-btn-pay-selected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  background: #4a7fc7;
  color: #fff;
}
.pd-btn-pay-selected svg { width: 16px; height: 16px; }
.pd-btn-pay-selected:disabled {
  cursor: default;
  background: #2c2c2e;
  color: #aeaeb2;
}
.client-dashboard-light .pd-btn-pay-selected:disabled {
  background: #e5e5ea;
  color: #636366;
}
.pd-btn-pay-selected:not(:disabled):hover {
  background: #3a6fb7;
}

/* All Invoices Modal */
.pd-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-modal-panel {
  background: var(--pd-card-bg, #1c1c1e);
  border-radius: 16px;
  width: 90%;
  max-width: 720px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.client-dashboard-light .pd-modal-panel {
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.pd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--pd-border-light, #2c2c2e);
}
.client-dashboard-light .pd-modal-header {
  border-bottom-color: #e5e5ea;
}
.pd-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--pd-text-primary, #f5f5f7);
  margin: 0;
}
.client-dashboard-light .pd-modal-title {
  color: #1c1c1e;
}
.pd-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-modal-close {
  background: none;
  border: none;
  color: var(--pd-text-secondary, #8e8e93);
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}
.pd-modal-close:hover { color: var(--pd-text-primary, #f5f5f7); }
.client-dashboard-light .pd-modal-close:hover { color: #1c1c1e; }
.pd-modal-body {
  padding: 16px 24px 24px;
  overflow-y: auto;
  flex: 1;
}
.pd-modal-section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--pd-text-secondary, #8e8e93);
  padding: 12px 0 4px;
  margin-top: 4px;
}
.pd-modal-section-label.red { color: #ff453a; }
.pd-modal-section-label.teal { color: var(--accent-teal, #4db3a5); }
.client-dashboard-light .pd-modal-section-label { color: #636366; }
.client-dashboard-light .pd-modal-section-label.red { color: #ff3b30; }
.client-dashboard-light .pd-modal-section-label.teal { color: #34a853; }

/* Invoice row clickable */
.pd-clickable { cursor: pointer; }
.pd-clickable:hover { background: var(--pd-hover-bg, rgba(255,255,255,0.05)); }
.client-dashboard-light .pd-clickable:hover { background: rgba(0,0,0,0.03); }


.pd-section-card-link {
  background: none;
  border: none;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
}

.pd-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: transparent;
  color: var(--pd-text-tertiary);
  border: 1px solid var(--pd-border-light);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.pd-btn-outline:hover {
  border-color: var(--pd-border-hover);
  color: var(--pd-nav-hover-text);
}

.pd-btn-outline svg { width: 16px; height: 16px; }

/* ========== SUMMARY CARDS ========== */
.pd-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.pd-summary-card {
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.15s, background 0.25s;
}

.pd-summary-card:hover {
  border-color: var(--pd-border-light);
}

.pd-summary-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.pd-summary-card-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--pd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pd-summary-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-summary-card-icon svg { width: 16px; height: 16px; }
.pd-summary-card-icon.blue { background: #1a2739; color: #4a7fc7; }
.pd-summary-card-icon.teal { background: #20393e; color: var(--accent-teal, #4db3a5); }
.pd-summary-card-icon.red { background: #351829; color: #eb0a44; }
.pd-summary-card-icon.orange { background: #372e20; color: #f59e0b; }
.pd-summary-card-icon.purple { background: #212543; color: #8b5cf6; }

.pd-summary-card-value {
  font-size: 28px;
  font-weight: 800;
  color: var(--pd-text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}

.pd-summary-card-value.teal { color: var(--accent-teal, #4db3a5); }
.pd-summary-card-value.blue { color: #4a7fc7; }
.pd-summary-card-value.red { color: #eb0a44; }
.pd-summary-card-value.orange { color: #f59e0b; }

html.client-dashboard-light .pd-summary-card-value.teal { color: #1a7a6e; }
html.client-dashboard-light .pd-summary-card-value.blue { color: #2d5a8e; }
html.client-dashboard-light .pd-summary-card-value.red { color: #c41234; }
html.client-dashboard-light .pd-summary-card-value.orange { color: #b45309; }

.pd-summary-card-detail {
  font-size: 12px;
  color: var(--pd-text-muted);
}

.pd-summary-card.urgent {
  border-color: #55152e;
  background: var(--pd-card-urgent-bg);
}

.pd-summary-card.next-due {
  border-color: #292d57;
  background: var(--pd-card-next-bg);
}

/* ========== #713 OVERDUE "PAY NOW" BANNER ========== */
/* Active nudge shown on the client dashboard when any invoice is overdue.
   Solid urgent bg (no rgba, per the dark-mode rule); error tokens carry the
   theme (dark + light). The CTA reuses .pd-bulk-action-btn.primary so it stays
   the portal's proven, theme-safe primary button. */
.pd-overdue-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  margin-bottom: 20px;
  background: var(--pd-card-urgent-bg);
  border: 1px solid var(--error-border);
  border-left: 4px solid var(--error-border);
  border-radius: 12px;
}
.pd-overdue-banner-icon {
  flex-shrink: 0;
  display: flex;
  color: var(--error-text);
}
.pd-overdue-banner-icon svg {
  width: 26px;
  height: 26px;
}
.pd-overdue-banner-body {
  flex: 1;
  min-width: 0;
}
.pd-overdue-banner-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--error-text);
}
.pd-overdue-banner-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--text-secondary);
}
.pd-overdue-banner-btn {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 9px 16px;
  font-size: 13px;
}

/* ========== SECTIONS GRID ========== */
.pd-sections-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
}

.pd-right-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pd-section-card {
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--pd-transition);
}

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

.pd-section-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pd-text-primary);
}

.pd-section-card-link {
  font-size: 12px;
  color: var(--pd-text-link);
  text-decoration: none;
  font-weight: 600;
}

.pd-section-card-link:hover {
  opacity: 0.8;
}

/* Invoice rows */
.pd-invoice-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pd-bg-hover);
  transition: background 0.1s;
  cursor: pointer;
}

.pd-invoice-row:last-child { border-bottom: none; }
.pd-invoice-row:hover { background: var(--pd-bg-hover); }

.pd-invoice-sender-avatar {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #ffffff;
  flex-shrink: 0;
}

.pd-invoice-sender-avatar.purple { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.pd-invoice-sender-avatar.teal { background: linear-gradient(135deg, #4db3a5, #3d9e91); }
.pd-invoice-sender-avatar.orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.pd-invoice-sender-avatar.blue { background: linear-gradient(135deg, #2d5a8e, #4a7fc7); }

.pd-invoice-info { flex: 1; min-width: 0; }
.pd-invoice-number { font-size: 13px; font-weight: 600; color: var(--pd-text-secondary); }
.pd-invoice-sender { font-size: 12px; color: var(--pd-text-muted); margin-top: 1px; }
.pd-invoice-amount { font-size: 14px; font-weight: 700; color: var(--pd-text-primary); text-align: right; min-width: 90px; }
.pd-invoice-due { font-size: 11px; color: var(--pd-text-muted); text-align: right; margin-top: 2px; }
.pd-invoice-due.overdue { color: var(--pd-badge-overdue-text); font-weight: 600; }

.pd-invoice-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  min-width: 65px;
  text-align: center;
}

.pd-invoice-badge.pending { background: var(--pd-badge-pending-bg); color: var(--pd-badge-pending-text); }
.pd-invoice-badge.overdue { background: var(--pd-badge-overdue-bg); color: var(--pd-badge-overdue-text); }
.pd-invoice-badge.paid { background: var(--pd-badge-paid-bg); color: var(--pd-badge-paid-text); }
.pd-invoice-badge.approval { background: var(--pd-badge-approval-bg); color: var(--pd-badge-approval-text); }

/* Credited pill: green like "paid" to signal positive resolution, but
   distinct (slightly deeper tint). Partially credited leans amber. */
.pd-invoice-badge.credited { background: #e6f6ef; color: #0f6d34; }

/* Pending CNR pill — shown below the status badge when a credit note
   request is outstanding against this invoice. Amber so it reads as
   "something waiting". */
.pd-invoice-badge-col {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.pd-invoice-cnr-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  background: #fef3e6;
  color: #8a4a00;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.pd-invoice-badge.partially_credited { background: #fef3e6; color: #8a4a00; }

/* Amount strikethrough when the invoice has been fully credited. */
.pd-invoice-amount--credited {
  text-decoration: line-through;
  color: var(--pd-text-muted);
  font-weight: 500;
}

/* "credited by CN-2026-045" subtitle under the invoice number. */
.pd-invoice-credited-ref {
  color: #0f6d34;
  font-weight: 500;
  font-size: 11px;
  font-family: "SF Mono", Menlo, monospace;
}

/* ========== ACTIVITY FEED ========== */
.pd-activity-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pd-bg-hover);
}

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

.pd-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}

.pd-activity-dot.blue { background: #4a7fc7; }
.pd-activity-dot.teal { background: var(--accent-teal, #4db3a5); }
.pd-activity-dot.red { background: #eb0a44; }
.pd-activity-dot.orange { background: #f59e0b; }
.pd-activity-dot.purple { background: #8b5cf6; }

.pd-activity-text {
  font-size: 13px;
  color: var(--pd-text-tertiary);
  line-height: 1.45;
}

.pd-activity-text strong {
  color: var(--pd-text-secondary);
  font-weight: 600;
}

.pd-activity-time {
  font-size: 11px;
  color: var(--pd-text-faint);
  margin-top: 3px;
}

/* ========== QUICK ACTIONS ========== */
.pd-quick-actions {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pd-quick-action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--pd-bg-input);
  border: 1px solid var(--pd-border-light);
  border-radius: 8px;
  color: var(--pd-text-tertiary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.pd-quick-action-btn:hover {
  background: var(--pd-bg-hover-alt);
  border-color: var(--pd-border-hover);
  color: var(--pd-nav-hover-text);
}

.pd-quick-action-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Light mode icon backgrounds — solid on white */
html.client-dashboard-light .pd-summary-card-icon.blue { background: #eaeff4; }
html.client-dashboard-light .pd-summary-card-icon.teal { background: #e8f2f1; }
html.client-dashboard-light .pd-summary-card-icon.red { background: #faecef; }
html.client-dashboard-light .pd-summary-card-icon.orange { background: #f8eee6; }
html.client-dashboard-light .pd-summary-card-icon.purple { background: #f3f3fe; }

/* Light mode badges — darker text for 4.5:1+ on tinted backgrounds */
html.client-dashboard-light .pd-invoice-badge.pending { background: #e3f2fd; color: #0d47a1; }
html.client-dashboard-light .pd-invoice-badge.overdue { background: #ffebee; color: #b71c1c; }
html.client-dashboard-light .pd-invoice-badge.paid { background: #e8f5e9; color: #1b5e20; }
html.client-dashboard-light .pd-invoice-badge.approval { background: #fff3e0; color: #bf360c; }

/* Light mode card shadow */
html.client-dashboard-light .pd-summary-card,
html.client-dashboard-light .pd-section-card {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

html.client-dashboard-light .pd-content {
  background: var(--pd-bg-body);
}

/* ========== INVOICES FULL PAGE ========== */

/* Back button */
.pd-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--pd-border);
  background: var(--pd-bg-card);
  color: var(--pd-text-secondary, #8e8e93);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex-shrink: 0;
  position: relative;
}
.pd-back-btn:hover {
  border-color: var(--pd-border-hover);
  color: var(--pd-nav-hover-text);
}
.pd-back-btn svg { width: 18px; height: 18px; }
/* Custom tooltip (no native title attr) */
.pd-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--pd-bg-card, #151a24);
  color: var(--pd-text-primary, #f5f5f7);
  border: 1px solid var(--pd-border, #3a3a3c);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.pd-back-btn:hover .pd-tooltip { opacity: 1; }
html.client-dashboard-light .pd-tooltip {
  background: #1d1d1f;
  color: #fff;
  border-color: #1d1d1f;
}

/* Toolbar: filters + sort */
.pd-invoices-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.pd-invoices-filters {
  display: flex;
  gap: 8px;
}
.pd-filter-chip {
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--pd-bg-card);
  color: var(--pd-text-secondary, #8e8e93);
  border: 1px solid var(--pd-border);
  transition: all 0.15s;
}
.pd-filter-chip:hover {
  border-color: var(--pd-border-hover);
  color: var(--pd-nav-hover-text);
}
.pd-filter-chip.active {
  background: #4a7fc7;
  color: #fff;
  border-color: #4a7fc7;
}
html.client-dashboard-light .pd-filter-chip {
  background: #fff;
  color: #636366;
  border-color: #d1d1d6;
}
html.client-dashboard-light .pd-filter-chip:hover {
  border-color: #8e8e93;
  color: #1c1c1e;
}
html.client-dashboard-light .pd-filter-chip.active {
  background: #4a7fc7;
  color: #fff;
  border-color: #4a7fc7;
}

.pd-invoices-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Sort dropdown */
.pd-sort-dropdown { position: relative; }
.pd-sort-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--pd-bg-card);
  color: var(--pd-text-secondary, #8e8e93);
  border: 1px solid var(--pd-border);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}
.pd-sort-btn:hover { border-color: var(--pd-border-hover); }
.pd-sort-btn svg { width: 16px; height: 16px; }
.pd-sort-chevron { width: 14px !important; height: 14px !important; }
html.client-dashboard-light .pd-sort-btn {
  background: #fff;
  color: #636366;
  border-color: #d1d1d6;
}

.pd-sort-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: 8px;
  padding: 4px;
  min-width: 140px;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.pd-sort-menu.open { display: block; }
html.client-dashboard-light .pd-sort-menu {
  background: #fff;
  border-color: #d1d1d6;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.pd-sort-option {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--pd-text-secondary, #8e8e93);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.pd-sort-option:hover {
  background: var(--pd-bg-hover-alt);
  color: var(--pd-nav-hover-text);
}
.pd-sort-option.active {
  color: #4a7fc7;
  font-weight: 600;
}
html.client-dashboard-light .pd-sort-option { color: #636366; }
html.client-dashboard-light .pd-sort-option:hover { background: #f2f2f7; color: #1c1c1e; }
html.client-dashboard-light .pd-sort-option.active { color: #4a7fc7; }

/* Group toggle button */
.pd-group-toggle svg { width: 16px; height: 16px; }
.pd-group-toggle.active {
  background: #4a7fc7;
  color: #fff;
  border-color: #4a7fc7;
}

/* Bulk action toolbar */
.pd-bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #1e3a5f;
  border-radius: 10px;
  margin-bottom: 16px;
}
.pd-select-all-label {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-left: 6px;
  white-space: nowrap;
}
html.client-dashboard-light .pd-select-all-label { color: #1e3a5f; }
.pd-bulk-toolbar-spacer { flex: 1; }
.pd-bulk-action-btn:disabled {
  opacity: 0.5;
  cursor: default;
  pointer-events: none;
}
.pd-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-right: 4px;
}
/* #1010: inline PDF download failure in the client portal. Text stays on
   --text-primary (7:1); the error colour is carried by the border only. */
.pd-pdf-error {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--error-border);
    border-left-width: 4px;
    color: var(--text-primary);
    font-size: 13px;
}

.pd-bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pd-bulk-action-btn:hover { background: rgba(255,255,255,0.2); }
.pd-bulk-action-btn.primary {
  background: #4a7fc7;
  border-color: #4a7fc7;
}
.pd-bulk-action-btn.primary:hover { background: #5a8fd7; }
.pd-bulk-action-btn svg { width: 14px; height: 14px; }
.pd-bulk-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}
.pd-bulk-clear:hover { color: #fff; }

html.client-dashboard-light .pd-bulk-toolbar { background: #e3f2fd; }
html.client-dashboard-light .pd-bulk-count { color: #1e3a5f; }
html.client-dashboard-light .pd-bulk-action-btn {
  background: rgba(30,58,95,0.08);
  color: #1e3a5f;
  border-color: rgba(30,58,95,0.15);
}
html.client-dashboard-light .pd-bulk-action-btn:hover { background: rgba(30,58,95,0.15); }
html.client-dashboard-light .pd-bulk-action-btn.primary {
  background: #4a7fc7;
  color: #fff;
  border-color: #4a7fc7;
}
html.client-dashboard-light .pd-bulk-action-btn.primary:hover { background: #5a8fd7; }
html.client-dashboard-light .pd-bulk-clear { color: rgba(30,58,95,0.5); }
html.client-dashboard-light .pd-bulk-clear:hover { color: #1e3a5f; }

/* Freelancer groups */
.pd-freelancer-group {
  background: var(--pd-bg-card);
  border: 1px solid var(--pd-border);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.pd-freelancer-group:hover { border-color: var(--pd-border-light); }

html.client-dashboard-light .pd-freelancer-group {
  background: #fff;
  border-color: #d1d1d6;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.pd-freelancer-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.pd-freelancer-group-header:hover {
  background: var(--pd-bg-hover-alt);
}
html.client-dashboard-light .pd-freelancer-group-header:hover {
  background: #f8f8fa;
}
.pd-freelancer-group-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pd-freelancer-group-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--pd-text-primary, #f5f5f7);
}
html.client-dashboard-light .pd-freelancer-group-name { color: #1c1c1e; }

.pd-freelancer-group-meta {
  font-size: 12px;
  color: var(--pd-text-secondary, #8e8e93);
  margin-top: 2px;
}

.pd-group-chevron {
  width: 20px;
  height: 20px;
  color: var(--pd-text-secondary, #8e8e93);
  transition: transform 0.2s;
}
.pd-freelancer-group.collapsed .pd-group-chevron {
  transform: rotate(-90deg);
}
.pd-freelancer-group.collapsed .pd-freelancer-group-body {
  display: none;
}
/* Group select-all checkbox in header */
.pd-group-select-all-wrapper {
  margin-right: 4px;
  flex-shrink: 0;
}
/* Global select-all in bulk toolbar */
.pd-select-all-wrapper {
  flex-shrink: 0;
  margin-right: 2px;
}

.pd-freelancer-group-body {
  border-top: 1px solid var(--pd-border);
}
html.client-dashboard-light .pd-freelancer-group-body {
  border-top-color: #e5e5ea;
}

/* Page invoice rows (wider than widget rows) */
.pd-page-invoice-row {
  display: grid;
  grid-template-columns: 32px 1fr 100px 140px 110px 80px auto;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--pd-border);
  transition: background 0.1s;
}
.pd-page-invoice-row:last-child { border-bottom: none; }
.pd-page-invoice-row:hover { background: var(--pd-bg-hover-alt); }
html.client-dashboard-light .pd-page-invoice-row { border-bottom-color: #f2f2f7; }
html.client-dashboard-light .pd-page-invoice-row:hover { background: #f8f8fa; }

.pd-invoice-desc {
  font-size: 12px;
  color: var(--pd-text-secondary, #8e8e93);
  margin-top: 2px;
}

.pd-invoice-date {
  font-size: 12px;
  color: var(--pd-text-secondary, #8e8e93);
}
.pd-invoice-due-col {
  font-size: 12px;
  color: var(--pd-text-secondary, #8e8e93);
}
.pd-invoice-due-col.overdue {
  color: #ff453a;
  font-weight: 600;
}

/* Invoice row action buttons */
.pd-invoice-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.pd-invoice-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: none;
  background: none;
  color: var(--pd-text-secondary, #8e8e93);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.pd-invoice-action-btn:hover {
  background: var(--pd-bg-hover-alt);
  color: var(--pd-nav-hover-text);
}
.pd-invoice-action-btn svg { width: 16px; height: 16px; }
html.client-dashboard-light .pd-invoice-action-btn:hover {
  background: #f2f2f7;
  color: #1c1c1e;
}

/* Pay button per row */
.pd-invoice-pay-btn {
  padding: 5px 14px;
  background: #4a7fc7;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.pd-invoice-pay-btn:hover { background: #5a8fd7; }

/* View button per row */
.pd-invoice-view-btn {
  padding: 5px 14px;
  background: transparent;
  color: #4a7fc7;
  border: 1px solid #4a7fc7;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.pd-invoice-view-btn:hover { background: #4a7fc7; color: #fff; }

/* Message icon with unread dot */
.pd-msg-btn { position: relative; }
.pd-msg-btn.pd-msg-unread::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  background: #e53e3e;
  border-radius: 50%;
  border: 1.5px solid #fff;
}
.pd-msg-unread svg { color: #4a7fc7; }
html.client-dashboard-light .pd-msg-unread svg { color: #4a7fc7; }
.pd-msg-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 8px;
  height: 8px;
  background: #ff453a;
  border-radius: 50%;
  border: 2px solid var(--pd-bg-card);
}
html.client-dashboard-light .pd-msg-dot { border-color: #fff; }

/* ========== RESPONSIVE ========== */
@media (max-width: 1200px) {
  .pd-sections-grid {
    grid-template-columns: 1fr;
  }
  .pd-page-invoice-row {
    grid-template-columns: 32px 1fr 110px 80px auto;
  }
  .pd-invoice-date { display: none; }
  .pd-invoice-due-col { display: none; }
}

/* #996: phone menu (header + drawer + backdrop). Hidden above 768px. */
.pd-mobile-header,
.pd-sidebar-overlay {
  display: none;
}

.pd-mobile-menu-btn {
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: background 0.2s;
}

.pd-mobile-menu-btn:hover {
  background: var(--pd-bg-hover);
}

.pd-mobile-menu-btn:focus-visible {
  outline: 2px solid var(--pd-text-link);
  outline-offset: 2px;
}

.pd-mobile-menu-line {
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--pd-text-primary);
}

.pd-mobile-header-mascot {
  display: block;
  height: 36px;
  width: auto;
}

.pd-mobile-header-spacer {
  width: 40px;
}

@media (max-width: 768px) {
  /* #996: the sidebar was simply hidden on phones, with nothing replacing it.
     It is now an off-canvas drawer (same pattern as the freelancer app, #992):
     the phone header's menu button slides it in over a backdrop. Layering:
     header 20 < backdrop 140 < drawer 150 < bell panel (200) < modals (1000+). */
  .pd-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    height: 100%;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 150;
  }
  .pd-sidebar.open { transform: translateX(0); }
  .pd-sidebar-overlay.active {
    display: block;
    position: fixed;
    inset: 0;
    /* solid, not a see-through dimmer (owner rule: no "transparencies") */
    background: var(--pd-bg-body);
    z-index: 140;
  }
  .pd-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    height: 56px;
    padding: 0 16px;
    background: var(--pd-bg-topbar);
    border-bottom: 1px solid var(--pd-border);
  }
  /* each view's sticky header now sticks just below the phone header */
  .pd-topbar { top: 56px; }
  .pd-summary-grid { grid-template-columns: 1fr 1fr; }
  .pd-content { padding: 20px 16px; }
  .pd-topbar { padding: 12px 16px; }
  .pd-page-invoice-row {
    grid-template-columns: 32px 1fr 80px auto;
  }
  .pd-invoice-amount { font-size: 13px; }
  .pd-invoices-toolbar { flex-direction: column; align-items: stretch; }
  .pd-invoices-filters { overflow-x: auto; }
  /* #993: the header row (title + search + Export) couldn't wrap, which forced the
     page ~516px wide on a 390px phone. Put the actions on their own full-width row. */
  .pd-page-header-row { flex-wrap: wrap; gap: 12px; }
  .pd-header-actions { width: 100%; }
  .pd-header-actions .pd-topbar-search { flex: 1; min-width: 0; }
  .pd-header-actions .pd-search-input { min-width: 0; }
  .pd-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* #993: two summary cards side by side can't hold the large amounts on a phone
   (they were clipped at the right edge); one column, like the freelancer
   dashboard's stat cards on phones. */
@media (max-width: 480px) {
  .pd-summary-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .pd-sidebar { transition: none; }
}

/* ===== GUEST WELCOME (portal content area) ===== */

.client-guest-welcome {
  padding: 32px 0 16px;
  position: relative;
  z-index: 200;
}
.client-guest-welcome-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--portal-text, #1d1d1f);
  margin: 0 0 8px;
  font-family: acumin-pro, -apple-system, BlinkMacSystemFont, sans-serif;
}
.client-guest-welcome-count {
  font-size: 16px;
  color: var(--portal-text-secondary, #6e6e73);
  margin: 0;
}
.client-guest-welcome-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Sort dropdown (6+ invoices) — custom dropdown, not native select */
.portal-sort-dropdown {
  position: relative;
  display: inline-block;
}
.portal-sort-dropdown .custom-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #6e6e73;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
.portal-sort-dropdown .custom-dropdown-trigger:hover {
  border-color: var(--accent-teal, #4db3a5);
}
.portal-sort-dropdown .dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.client-guest-sort {
  position: relative;
  z-index: 200;
}
.portal-sort-dropdown .custom-dropdown-menu {
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 9999;
  padding: 4px 0;
  left: auto;
  right: 0;
}
.portal-sort-dropdown.open .custom-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.portal-sort-dropdown .custom-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 14px;
  font-size: 13px;
  color: #1d1d1f;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.portal-sort-dropdown .custom-dropdown-option:hover {
  background: #f5f5f7;
}
.portal-sort-dropdown .custom-dropdown-option.selected {
  color: var(--accent-teal, #4db3a5);
  font-weight: 600;
}
.portal-sort-dropdown .custom-dropdown-option .check-icon {
  width: 16px;
  height: 16px;
  color: var(--accent-teal, #4db3a5);
  display: none;
}
.portal-sort-dropdown .custom-dropdown-option.selected .check-icon {
  display: block;
}
/* Expand section (10+ invoices) */
.client-guest-expand-section {
  text-align: center;
  padding: 0 0 32px;
}
.client-guest-expand-prompt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #6e6e73;
  margin: 0 0 16px;
  padding: 10px 16px;
  background: #f5f5f7;
  border-radius: 10px;
}
.client-guest-expand-prompt svg {
  color: var(--accent-teal, #4db3a5);
  flex-shrink: 0;
}
.client-guest-expand-prompt-link {
  color: var(--accent-teal, #4db3a5);
  font-weight: 600;
  text-decoration: none;
  margin-left: 4px;
}
.client-guest-expand-prompt-link:hover {
  text-decoration: underline;
}
.client-guest-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: transparent;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent-teal, #4db3a5);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.client-guest-expand-btn:hover {
  background: #f0faf8;
  border-color: var(--accent-teal, #4db3a5);
}
.client-guest-expand-btn svg {
  color: var(--accent-teal, #4db3a5);
}

/* ===== GUEST INVOICE CARDS (approved Payment Modal design) ===== */

.client-guest-invoices {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 8px 0 32px;
}
.client-guest-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  text-align: center;
}
.client-guest-card-accent {
  height: 4px;
  background: linear-gradient(90deg, #4db3a5, #66ccbe);
}
.client-guest-card-body {
  padding: 32px 28px;
}
.client-guest-card-company {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  margin-bottom: 28px;
}
.client-guest-card-avatar {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #eb0a44, #ff6b8a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}
.client-guest-card-company-name {
  font-weight: 600;
  font-size: 15px;
  color: #1d1d1f;
}
.client-guest-card-label {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 1px;
}
.client-guest-card-amount {
  font-size: 42px;
  font-weight: 700;
  color: #1d1d1f;
  letter-spacing: -1px;
  line-height: 1.1;
}
.client-guest-card-amount-label {
  font-size: 13px;
  color: #8e8e93;
  margin-top: 6px;
  margin-bottom: 24px;
}
.client-guest-card-details {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}
.client-guest-card-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
}
.client-guest-card-row + .client-guest-card-row {
  border-top: 1px solid #e8eaed;
  margin-top: 6px;
  padding-top: 12px;
}
.client-guest-card-row-label {
  font-size: 13px;
  color: #8e8e93;
}
.client-guest-card-row-value {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
}
.client-guest-card-row-value--mono {
  font-family: 'SF Mono', SFMono-Regular, ui-monospace, monospace;
  font-size: 10px;
  color: #8e8e93;
  word-break: break-all;
  max-width: 180px;
  text-align: right;
}
.client-guest-card-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fef0f3;
  border-radius: 10px;
  margin-bottom: 24px;
  font-size: 13px;
  font-weight: 600;
  color: #e8395b;
}
.client-guest-card-countdown svg { color: #e8395b; }

/* Expired state: red warning bar */
.client-guest-card-countdown--expired {
  background: #fef2f2;
  color: #cc2936;
  font-weight: 600;
}
.client-guest-card-countdown--expired svg { color: #cc2936; }

/* Red activate payment button */
.client-guest-card-pay-btn--activate {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: #cc2936;
  color: #ffffff;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background 0.2s;
}
.client-guest-card-pay-btn--activate:hover { background: #b3232e; }

/* Legacy: keep for backwards compatibility */
.client-guest-card-pay-btn--expired-label {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: #f5f5f7;
  color: #8e8e93;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 16px;
  cursor: default;
}

/* QR code section */
.client-guest-card-qr {
  text-align: center;
  margin-bottom: 24px;
}
.client-guest-card-qr-box {
  display: inline-block;
  padding: 16px;
  background: #fff;
  border: 1px solid #e8eaed;
  border-radius: 12px;
}
.client-guest-card-qr-box svg {
  width: 140px;
  height: 140px;
}
.client-guest-card-qr-caption {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 10px;
}
/* Divider */
.client-guest-card-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.client-guest-card-divider-line {
  flex: 1;
  height: 1px;
  background: #e8eaed;
}
.client-guest-card-divider-text {
  font-size: 12px;
  color: #8e8e93;
  white-space: nowrap;
}
/* Pay button */
.client-guest-card-pay-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #4db3a5, #3d9e91);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.2px;
  text-align: center;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(77,179,165,0.3);
}
.client-guest-card-pay-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(77,179,165,0.4);
  color: #fff;
  text-decoration: none;
}
.client-guest-card-pay-btn--secondary {
  background: transparent;
  color: var(--accent-teal, #4db3a5);
  border: 2px solid var(--accent-teal, #4db3a5);
  box-shadow: none;
}
.client-guest-card-pay-btn--secondary:hover {
  background: #f0faf8;
  color: #3d9e91;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77,179,165,0.15);
}
.client-guest-card-pay-btn--disabled {
  background: #e5e5ea;
  color: #8e8e93;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
}

/* Mollie payment failed — retry button (revenue protection: visually
   primary, encourages user to retry card payment before falling back to
   bank transfer). Same teal as the primary Pay button but with a refresh
   icon to signal "try again". */
.client-guest-card-pay-btn--retry {
  background: var(--accent-teal, #4db3a5);
  color: white;
  border: 1px solid var(--accent-teal, #4db3a5);
}
.client-guest-card-pay-btn--retry:hover {
  background: #3d9e91;
  border-color: #3d9e91;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(77,179,165,0.15);
}
.client-guest-card-pay-failed-note {
  font-size: 12px;
  color: #8e8e93;
  text-align: center;
  margin: 8px 0 0;
}

/* Bank transfer fallback section (only visible after Mollie failure) */
.client-guest-card-bank-fallback {
  margin-top: 16px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e5e5ea;
}
.client-guest-card-bank-fallback-divider {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.client-guest-card-bank-fallback-divider::before,
.client-guest-card-bank-fallback-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #d1d1d6;
}
.client-guest-card-bank-fallback-divider span {
  padding: 0 12px;
  font-weight: 500;
}
.client-guest-card-bank-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  font-size: 13px;
  margin: 0;
}
.client-guest-card-bank-details dt {
  color: #6e6e73;
  font-weight: 500;
}
.client-guest-card-bank-details dd {
  color: #1d1d1f;
  font-weight: 600;
  margin: 0;
  font-family: 'SF Mono', 'Roboto Mono', Menlo, monospace;
  word-break: break-all;
}
.client-guest-card-bank-hint {
  font-size: 12px;
  color: #6e6e73;
  margin: 12px 0 0;
  line-height: 1.4;
}

/* Trust badge */
.client-guest-card-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 12px;
  color: #8e8e93;
}
.client-guest-card-trust svg { color: var(--accent-teal, #4db3a5); width: 14px; height: 14px; }
.client-guest-card-methods {
  text-align: center;
  font-size: 11px;
  color: #aeaeb2;
  margin-top: 6px;
}
/* View full invoice link */
.client-guest-card-view-invoice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e8eaed;
}
.client-guest-card-view-invoice a {
  font-size: 14px;
  font-weight: 600;
  color: #30c961;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.client-guest-card-view-invoice a svg { color: #30c961; }
.client-guest-card-view-invoice a:hover { color: #28b254; }
.client-guest-card-view-invoice a svg { width: 18px; height: 18px; }
.client-guest-card-view-invoice--disabled {
  font-size: 14px;
  color: #aeaeb2;
  display: flex;
  align-items: center;
  gap: 6px;
}
.client-guest-card-view-invoice--disabled svg { width: 18px; height: 18px; }
/* Card footer */
.client-guest-card-footer {
  padding: 14px 28px;
  background: #f8f9fa;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: #aeaeb2;
}
.client-guest-card-footer strong {
  font-weight: 700;
  color: #8e8e93;
}

@media (max-width: 720px) {
  .client-guest-invoices {
    flex-direction: column;
    align-items: center;
  }
  .client-guest-card {
    width: 100%;
    max-width: 360px;
  }
}

/* Invoice Modal (View full invoice — side-by-side: card left, invoice right) */
/* Card determines the modal height. Invoice scales to match. No scrolling. */
.client-guest-invoice-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.client-guest-invoice-modal {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  max-height: 90vh;
  overflow-y: auto;
  padding-bottom: 24px;
}
.client-guest-invoice-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #1d1d1f;
  color: #ffffff;
  font-size: 20px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  transition: background 0.15s;
  line-height: 1;
}
.client-guest-invoice-modal-close:hover {
  background: #333;
}
.client-guest-invoice-modal-split {
  display: flex;
  gap: 24px;
}
/* Left: card at natural height — this drives the modal height */
.client-guest-invoice-modal-left {
  width: 400px;
  min-width: 400px;
  background: #ffffff;
}
.client-guest-invoice-modal-left .client-guest-card {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}
/* Compact card sizing inside modal — tighter spacing to fit viewport */
.client-guest-invoice-modal-left .client-guest-card-body {
  padding: 20px 22px;
}
.client-guest-invoice-modal-left .client-guest-card-company {
  margin-bottom: 16px;
  gap: 10px;
}
.client-guest-invoice-modal-left .client-guest-card-avatar {
  width: 34px;
  height: 34px;
  font-size: 14px;
}
.client-guest-invoice-modal-left .client-guest-card-amount {
  font-size: 34px;
}
.client-guest-invoice-modal-left .client-guest-card-amount-label {
  margin-top: 4px;
  margin-bottom: 16px;
}
.client-guest-invoice-modal-left .client-guest-card-details {
  padding: 12px 14px;
  margin-bottom: 14px;
}
.client-guest-invoice-modal-left .client-guest-card-row {
  padding: 4px 0;
}
.client-guest-invoice-modal-left .client-guest-card-row + .client-guest-card-row {
  margin-top: 4px;
  padding-top: 8px;
}
.client-guest-invoice-modal-left .client-guest-card-countdown {
  padding: 8px 12px;
  margin-bottom: 14px;
}
.client-guest-invoice-modal-left .client-guest-card-qr {
  margin-bottom: 14px;
}
.client-guest-invoice-modal-left .client-guest-card-qr-box {
  padding: 10px;
}
.client-guest-invoice-modal-left .client-guest-card-qr-box svg {
  width: 110px;
  height: 110px;
}
.client-guest-invoice-modal-left .client-guest-card-qr-caption {
  margin-top: 6px;
  font-size: 11px;
}
.client-guest-invoice-modal-left .client-guest-card-divider {
  margin-bottom: 14px;
}
.client-guest-invoice-modal-left .client-guest-card-pay-btn {
  padding: 12px;
  font-size: 15px;
}
.client-guest-invoice-modal-left .client-guest-card-trust {
  margin-top: 8px;
}
.client-guest-invoice-modal-left .client-guest-card-view-invoice {
  margin-top: 12px;
  padding-top: 12px;
}
.client-guest-invoice-modal-left .client-guest-card-footer {
  padding: 10px 22px;
}
/* Right: JS hook sets exact height + width + scale to match left panel */
.client-guest-invoice-modal-right {
  background: #ffffff;
  border-left: 1px solid #e8eaed;
  overflow: hidden;
  position: relative;
}
.client-guest-invoice-modal-iframe {
  width: 794px;
  height: 1123px;
  border: none;
  transform-origin: top left;
  transform: scale(var(--iframe-scale, 0.6));
  pointer-events: none;
}
@media (max-width: 920px) {
  .client-guest-invoice-modal-overlay {
    padding: 8px;
  }
  .client-guest-invoice-modal-split {
    flex-direction: column;
  }
  .client-guest-invoice-modal-left {
    width: 100%;
    min-width: 100%;
  }
  .client-guest-invoice-modal-right {
    width: 100%;
    min-width: 100%;
    border-left: none;
    border-top: 1px solid #e8eaed;
  }
}

/* ===== ESTIMATE / APPROVAL MODAL ===== */

.estimate-modal {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3);
  max-height: 92vh;
  max-width: 1400px;
  width: 96%;
}
.estimate-modal-split {
  display: flex;
  gap: 0;
  height: 88vh;
  max-height: 88vh;
}
.estimate-modal-template {
  flex: 1 1 65%;
  min-width: 0;
  overflow: hidden;
  position: relative;
  background: #ffffff;
  border-right: 1px solid #e8eaed;
}
.estimate-modal-template .client-guest-invoice-modal-iframe {
  width: 794px;
  height: 1123px;
  border: none;
  transform-origin: top left;
  transform: scale(var(--iframe-scale, 0.85));
  pointer-events: none;
}
.estimate-modal-panel {
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  overflow-y: auto;
}
.estimate-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.estimate-modal-header-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1e3a5f, #2d5a8e);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
}
.estimate-modal-header-company {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
}
.estimate-modal-header-meta {
  font-size: 13px;
  color: #8e8e93;
  margin-top: 2px;
}
.estimate-modal-amount {
  font-size: 32px;
  font-weight: 800;
  color: #1d1d1f;
  margin: 16px 0 20px;
  letter-spacing: -0.02em;
}

/* Action buttons */
.estimate-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e8eaed;
  margin-bottom: 16px;
}
.estimate-modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
  text-align: center;
  border: none;
}
.estimate-modal-btn.primary {
  background: #1e3a5f;
  color: #ffffff;
}
.estimate-modal-btn.primary:hover {
  background: #163050;
}
.estimate-modal-btn.danger-outline {
  background: transparent;
  border: 1px solid #dc3545;
  color: #dc3545;
}
.estimate-modal-btn.danger-outline:hover {
  background: rgba(220, 53, 69, 0.06);
}
.estimate-modal-btn.outline {
  background: transparent;
  border: 1px solid #d1d5db;
  color: #6b7280;
}
.estimate-modal-btn.outline:hover {
  background: #f5f5f7;
}

/* Messages section */
.estimate-modal-messages-section {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.estimate-modal-messages-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.estimate-modal-messages-disclaimer {
  font-size: 11px;
  color: #8e8e93;
  line-height: 1.4;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #fef3c7;
  border-radius: 6px;
  border: 1px solid #fde68a;
}
.estimate-modal-messages-thread {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  min-height: 60px;
  max-height: 240px;
}
.estimate-modal-messages-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 16px;
  text-align: center;
  color: #8e8e93;
  font-size: 13px;
}
.estimate-modal-message {
  padding: 10px 14px;
  border-radius: 12px;
  max-width: 80%;
  font-size: 14px;
  line-height: 1.5;
}
.estimate-modal-message.client {
  background: #1e3a5f;
  color: #ffffff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.estimate-modal-message.freelancer {
  background: #f5f5f7;
  color: #1d1d1f;
  align-self: flex-start;
  border: 1px solid #e5e5ea;
  border-bottom-left-radius: 4px;
}
.estimate-modal-message-name {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 2px;
}
.estimate-modal-message.freelancer .estimate-modal-message-name {
  color: #6b7280;
  opacity: 1;
}
.estimate-modal-message-body {
  white-space: pre-wrap;
  word-break: break-word;
}
.estimate-modal-message-time {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 4px;
  text-align: right;
}
.estimate-modal-message.freelancer .estimate-modal-message-time {
  color: #8e8e93;
  opacity: 1;
}
.estimate-modal-message-form {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  align-items: flex-end;
}
.estimate-modal-message-input {
  flex: 1;
  resize: none;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.4;
  color: #1d1d1f;
  background: #ffffff;
  transition: border-color 0.15s;
}
.estimate-modal-message-input:focus {
  outline: none;
  border-color: #1e3a5f;
}
.estimate-modal-message-input::placeholder {
  color: #8e8e93;
}
.estimate-modal-message-send {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: #1e3a5f;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}
.estimate-modal-message-send:hover {
  background: #163050;
}

/* Credit Note Request button — blue override on secondary pay button style */
.pd-credit-note-request-btn {
  background: #e3f2fd;
  color: #1e3a5f;
  border-color: #1e3a5f;
}
.pd-credit-note-request-btn:hover {
  background: #bbdefb;
  color: #1e3a5f;
}

/* Credit Note Request message in thread (amber system message) */
.estimate-modal-message.credit-note-request {
  align-self: stretch;
  max-width: 100%;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
}
.estimate-modal-message.credit-note-request .cnr-badge {
  font-size: 11px;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.estimate-modal-message.credit-note-request .estimate-modal-message-body {
  color: #78350f;
}
.estimate-modal-message.credit-note-request .estimate-modal-message-time {
  color: #92400e;
  opacity: 0.7;
}

/* ===== Standalone Chat Modal (chat bubble on rows) ===== */
.pd-chat-modal {
  background: #ffffff;
  border-radius: 16px;
  max-width: 480px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.pd-chat-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pd-chat-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
}
.pd-chat-modal-subtitle {
  font-size: 13px;
  color: #6e6e73;
  margin-top: 2px;
}
.pd-chat-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #f5f5f7;
  color: #6e6e73;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  padding: 0;
  flex-shrink: 0;
}
.pd-chat-modal-close:hover {
  background: #e5e5ea;
  color: #1d1d1f;
}
.pd-chat-modal-close svg {
  width: 18px;
  height: 18px;
}
.pd-chat-modal-disclaimer {
  margin: 16px 24px 0;
  padding: 10px 12px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  font-size: 11px;
  color: #92400e;
  line-height: 1.4;
}
.pd-chat-modal-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  max-height: 400px;
}
.pd-chat-modal-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #8e8e93;
  font-size: 14px;
  padding: 40px 0;
}
.pd-chat-modal-form {
  display: flex;
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid #e5e5ea;
}
.pd-chat-modal-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  font-size: 14px;
  color: #1d1d1f;
  background: #f5f5f7;
  resize: none;
  font-family: inherit;
}
.pd-chat-modal-input:focus {
  outline: none;
  border-color: #1e3a5f;
  background: #ffffff;
}
.pd-chat-modal-send {
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: #1e3a5f;
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.15s, filter 0.15s;
}
.pd-chat-modal-send:hover {
  filter: brightness(1.08);
}

/* Invoice reference pill — sits in the chat modal header under the title */
.pd-chat-invoice-ref {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f5f5f7;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  align-self: flex-start;
}
.pd-chat-invoice-ref-icon {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: #1e3a5f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pd-chat-invoice-ref-icon svg { width: 12px !important; height: 12px !important; }
.pd-chat-invoice-ref-number {
  font-size: 12px;
  font-weight: 700;
  color: #1d1d1f;
}
.pd-chat-invoice-ref-detail {
  font-size: 12px;
  color: #6e6e73;
}

/* ===== Credit Note Request Modal ===== */
.pd-cnr-modal {
  background: #ffffff;
  border-radius: 16px;
  max-width: 500px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.pd-cnr-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e5ea;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pd-cnr-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
}
.pd-cnr-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  color: #6e6e73;
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
}
.pd-cnr-modal-close:hover {
  color: #1d1d1f;
}
.pd-cnr-modal-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.pd-cnr-invoice-ref {
  background: #f5f5f7;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.pd-cnr-invoice-ref-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #6e6e73;
}
.pd-cnr-invoice-ref-row + .pd-cnr-invoice-ref-row {
  margin-top: 6px;
}
.pd-cnr-invoice-ref-value {
  font-weight: 600;
  color: #1d1d1f;
}
.pd-cnr-form {
  margin-bottom: 20px;
}
.pd-cnr-label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.pd-cnr-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d1d6;
  border-radius: 10px;
  font-size: 14px;
  color: #1d1d1f;
  background: #ffffff;
  appearance: auto;
  margin-bottom: 16px;
}
.pd-cnr-submit {
  width: 100%;
  padding: 12px;
  background: #1e3a5f;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.pd-cnr-submit:hover {
  background: #163050;
}
.pd-cnr-submit[disabled] {
  opacity: 0.6;
  cursor: wait;
}
.pd-cnr-notes {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 72px;
  color: #1d1d1f;
  background: #ffffff;
  margin-bottom: 16px;
  transition: border-color 0.15s;
}
.pd-cnr-notes:focus {
  outline: none;
  border-color: #1e3a5f;
}
.pd-cnr-notes::placeholder {
  color: #8e8e93;
}

/* Credit note request success state */
.pd-cnr-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 8px 8px;
}
.pd-cnr-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e8f5e9;
  color: #2e7d32;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.pd-cnr-success-title {
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 8px;
}
.pd-cnr-success-body {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 24px;
  max-width: 340px;
}
.pd-cnr-success-actions {
  display: flex;
  gap: 10px;
  width: 100%;
}
.pd-cnr-success-btn-secondary,
.pd-cnr-success-btn-primary {
  flex: 1;
  padding: 11px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: background 0.15s, border-color 0.15s;
}
.pd-cnr-success-btn-secondary {
  background: #ffffff;
  color: #1d1d1f;
  border: 1px solid #d1d5db;
}
.pd-cnr-success-btn-secondary:hover {
  background: #f5f5f7;
}
.pd-cnr-success-btn-primary {
  background: #1e3a5f;
  color: #ffffff;
}
.pd-cnr-success-btn-primary:hover {
  background: #163050;
}

/* Client portal Credit Notes page — tabs + bulk actions */
.pd-cn-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e5ea;
  margin-top: 16px;
}
.pd-cn-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.pd-cn-tab:hover { color: #1e3a5f; }
.pd-cn-tab.active {
  color: #1e3a5f;
  border-bottom-color: #1e3a5f;
}
.pd-cn-tab-count {
  background: #1e3a5f;
  color: white;
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  min-width: 20px;
  text-align: center;
}

.pd-cn-bulk-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #eef3f9;
  border: 1px solid #cfd9e8;
  border-radius: 8px;
  margin-top: 16px;
}
.pd-cn-bulk-count {
  color: #1e3a5f;
  font-weight: 500;
}
.pd-cn-bulk-cancel {
  margin-left: auto;
  background: #d9534f;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.pd-cn-bulk-cancel:hover { background: #c9302c; }

.pd-cn-row-check {
  display: flex;
  align-items: center;
  padding: 0 12px 0 4px;
  cursor: pointer;
}
.pd-cn-row-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.pd-cn-row--selected { background: #f0f6fd; }

/* Client portal Credit Notes page list */
.pd-cn-section {
  background: #ffffff;
  border: 1px solid #e5e5ea;
  border-radius: 12px;
  overflow: hidden;
}
.pd-cn-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5ea;
}
.pd-cn-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1d1d1f;
  margin: 0;
}
.pd-cn-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #1e3a5f;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}
.pd-cn-list {
  display: flex;
  flex-direction: column;
}
.pd-cn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid #f5f5f7;
}
.pd-cn-row:last-child {
  border-bottom: none;
}
.pd-cn-row-main {
  flex: 1;
  min-width: 0;
}
.pd-cn-row-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
  margin-bottom: 4px;
}
.pd-cn-row-meta {
  font-size: 12px;
  color: #6e6e73;
}
.pd-cn-row-amount {
  font-size: 14px;
  font-weight: 700;
  color: #1d1d1f;
  flex-shrink: 0;
}

/* Right-hand column that groups amount + resend button vertically. */
.pd-cn-row-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* "Resent 2x \u00b7 last 5h ago" subtitle under the meta line. */
.pd-cn-row-resent {
  color: #1e3a5f;
  font-weight: 500;
  margin-top: 2px;
}

/* Resend button matches client portal blue theme; disabled state stays
   visible but dimmer so the user understands it's cooling down. */
.pd-cn-resend-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f0fe;
  color: #1e3a5f;
  border: 1px solid #1e3a5f;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.pd-cn-resend-btn:hover:not(:disabled) {
  background: #d4e4fc;
}
.pd-cn-resend-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Green flash shown for ~2.5s after a successful resend, giving the
   client confirmation without a toast. Full opacity so it reads as
   "done" rather than "disabled". */
.pd-cn-resend-btn--success,
.pd-cn-resend-btn--success:disabled {
  background: #e6f6ef;
  color: #137a3a;
  border-color: #137a3a;
  opacity: 1;
  cursor: default;
  animation: pd-cn-resend-sent-pulse 0.35s ease-out 1;
}

@keyframes pd-cn-resend-sent-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(19, 122, 58, 0.35); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(19, 122, 58, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(19, 122, 58, 0); }
}
.pd-cn-row-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #f5f5f7;
  color: #6e6e73;
}
.pd-cn-row-pill--pending {
  background: #fff7e6;
  color: #b45309;
}
.pd-cn-row-pill--issued {
  background: #e8f5e9;
  color: #2e7d32;
}
.pd-cn-row-pill--dismissed {
  background: #fdecea;
  color: #c62828;
}
.pd-cn-row-pill--archived {
  background: #eef2f6;
  color: #455a64;
}

/* Responsive */
@media (max-width: 920px) {
  .estimate-modal-split {
    flex-direction: column;
    height: auto;
    max-height: none;
  }
  .estimate-modal-template {
    height: 50vh;
    border-right: none;
    border-bottom: 1px solid #e8eaed;
  }
  .estimate-modal-panel {
    flex: none;
    max-height: 50vh;
  }
}

/* ===== GUEST INVOICES PAGE (Level 1) ===== */

.client-guest-page {
  min-height: 100vh;
  background: var(--bg-primary, #0d1117);
  color: var(--text-primary, #e6edf3);
  padding: 0;
}

.client-guest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.client-guest-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.client-guest-logo {
  width: 40px;
  height: 40px;
}
.client-guest-title {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--text-primary, #e6edf3);
}
.client-guest-subtitle {
  font-size: 13px;
  color: var(--text-secondary, #8b949e);
  margin: 2px 0 0 0;
}

.client-guest-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding: 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

/* Summary bar */
.client-guest-summary {
  display: flex;
  gap: 24px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  margin-bottom: 24px;
}
.client-guest-summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.client-guest-summary-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #8b949e);
}
.client-guest-summary-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
}
.client-guest-summary-value.red {
  color: #f85149;
}

/* Freelancer groups */
.client-guest-group {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  margin-bottom: 16px;
  overflow: hidden;
}
.client-guest-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.client-guest-group-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-guest-group-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
}
.client-guest-group-meta {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
  margin-top: 2px;
}

/* Invoice rows */
.client-guest-invoice-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.client-guest-invoice-row:last-child { border-bottom: none; }
.client-guest-invoice-row:hover { background: rgba(255,255,255,0.02); }

.client-guest-invoice-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
}
.client-guest-invoice-desc {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
  margin-top: 2px;
}
.client-guest-invoice-date {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
}
.client-guest-invoice-due {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
}
.client-guest-invoice-due.overdue {
  color: #f85149;
}
.client-guest-invoice-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #e6edf3);
  text-align: right;
}

/* Greyed checkbox (batch pay teaser) */
.client-guest-checkbox-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}
.client-guest-checkbox-disabled {
  width: 16px;
  height: 16px;
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}
.client-guest-checkbox-tooltip {
  display: none;
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  background: #1c2128;
  color: #8b949e;
  font-size: 11px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.client-guest-checkbox-wrapper:hover .client-guest-checkbox-tooltip {
  display: block;
}

/* Batch pay teaser */
.client-guest-batch-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
}
.client-guest-pay-selected-disabled {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  font-weight: 600;
  cursor: not-allowed;
}
.client-guest-pay-selected-disabled svg {
  width: 16px;
  height: 16px;
}
.client-guest-batch-hint {
  font-size: 12px;
  color: var(--text-secondary, #8b949e);
}

/* ===== GUEST SIDEBAR BANNER (blue gradient CTA) ===== */

.client-guest-sidebar {
  position: sticky;
  top: 24px;
}

.client-guest-banner {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 25%, #4a7fc7 50%, #6b9fd8 75%, #8bb8e8 100%);
  border-radius: 16px;
  padding: 28px 24px;
  color: #ffffff;
}
.client-guest-banner-title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px 0;
  line-height: 1.3;
}
.client-guest-banner-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
.client-guest-banner-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 0;
  color: rgba(255,255,255,0.95);
}
.client-guest-banner-list li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: rgba(255,255,255,0.8);
}
.client-guest-banner-cta {
  display: block;
  width: 100%;
  padding: 12px 0;
  text-align: center;
  background: #ffffff;
  color: #1e3a5f;
  font-size: 15px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}
.client-guest-banner-cta:hover {
  background: #f0f4f8;
  transform: translateY(-1px);
}
.client-guest-banner-more {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
}
.client-guest-banner-more:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Responsive: Guest invoices page */
@media (max-width: 960px) {
  .client-guest-layout {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .client-guest-sidebar {
    position: static;
  }
  .client-guest-invoice-row {
    grid-template-columns: 32px 1fr auto auto;
  }
  .client-guest-invoice-date { display: none; }
  .client-guest-invoice-due { display: none; }
}
@media (max-width: 560px) {
  .client-guest-header { padding: 16px; }
  .client-guest-summary { flex-direction: column; gap: 12px; }
  .client-guest-invoice-row {
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 12px 16px;
  }
  .client-guest-checkbox-wrapper { display: none; }
  .client-guest-invoice-actions { grid-column: 1 / -1; }
}

/* ========== MORE INFO PAGE ========== */
/* Source: mockup-more-info.html — scoped to .more-info-page to avoid conflicts */

.more-info-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0A0E15;
  color: #1d1d1f;
  overflow-x: hidden;
}

/* ========== HERO ========== */
.more-info-page .mi-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #8bb8e8 100%);
  padding: 72px 24px 96px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.more-info-page .mi-hero-deco { display: none; }

.more-info-page .mi-hero-logo {
  font-size: 15px;
  font-weight: 700;
  color: rgba(255,255,255,0.7);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.more-info-page .mi-hero h1 {
  font-size: 44px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.15;
  margin-bottom: 14px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.more-info-page .mi-hero p {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 28px;
  position: relative;
  z-index: 1;
}

.more-info-page .mi-hero-cta {
  display: inline-block;
  background: #ffffff;
  color: #1e3a5f;
  padding: 14px 36px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.15s, box-shadow 0.2s;
  cursor: pointer;
  border: none;
  position: relative;
  z-index: 1;
}

.more-info-page .mi-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.more-info-page .mi-hero-free {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.6);
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

/* ========== DASHBOARD MOCKUP ========== */
.more-info-page .mi-dashboard-section {
  max-width: 1140px;
  margin: -48px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

.more-info-page .mi-dashboard-section::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 120px;
  background: radial-gradient(ellipse at center, rgba(45,90,142,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.more-info-page .mi-dashboard-frame {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04);
  overflow: hidden;
}

.more-info-page .mi-frame-chrome {
  background: #f5f5f7;
  border-bottom: 1px solid #e5e5ea;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.more-info-page .mi-frame-dot { width: 12px; height: 12px; border-radius: 50%; }
.more-info-page .mi-frame-dot.red { background: #ff5f57; }
.more-info-page .mi-frame-dot.yellow { background: #ffbd2e; }
.more-info-page .mi-frame-dot.green { background: #28c840; }

.more-info-page .mi-frame-url {
  flex: 1;
  margin-left: 10px;
  background: #e8e8ed;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  color: #8e8e93;
  display: flex;
  align-items: center;
  gap: 6px;
}

.more-info-page .mi-frame-url svg { width: 12px; height: 12px; color: #8e8e93; flex-shrink: 0; }

.more-info-page .mi-dash { padding: 36px 40px 40px; }

.more-info-page .mi-dash-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.more-info-page .mi-dash-welcome { display: flex; align-items: center; gap: 14px; }

.more-info-page .mi-dash-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, #f0c27f, #fc5c7d);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700; color: #ffffff; flex-shrink: 0;
}

.more-info-page .mi-dash-greeting { font-size: 20px; font-weight: 700; color: #1d1d1f; }
.more-info-page .mi-dash-greeting-sub { font-size: 13px; color: #8e8e93; margin-top: 2px; }

.more-info-page .mi-dash-export-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 16px; background: #f5f5f7; border: 1px solid #e5e5ea;
  border-radius: 8px; font-size: 13px; font-weight: 600; color: #1d1d1f; cursor: pointer;
}
.more-info-page .mi-dash-export-btn svg { width: 16px; height: 16px; color: #6e6e73; }

.more-info-page .mi-dash-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; }

.more-info-page .mi-dash-card {
  background: #f8f9fa; border: 1px solid #e8eaed; border-radius: 12px; padding: 18px 20px;
}
.more-info-page .mi-dash-card-label { font-size: 12px; font-weight: 600; color: #8e8e93; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.more-info-page .mi-dash-card-value { font-size: 26px; font-weight: 800; color: #1d1d1f; line-height: 1.1; }
.more-info-page .mi-dash-card-value.teal { color: var(--accent-teal, #4db3a5); }
.more-info-page .mi-dash-card-value.blue { color: #2d5a8e; }
.more-info-page .mi-dash-card-detail { font-size: 12px; color: #8e8e93; margin-top: 6px; }

.more-info-page .mi-dash-section-title {
  font-size: 16px; font-weight: 700; color: #1d1d1f; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: space-between;
}

.more-info-page .mi-dash-pay-selected {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; background: linear-gradient(135deg, #4db3a5, #3d9e91);
  color: #ffffff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.more-info-page .mi-dash-pay-selected svg { width: 14px; height: 14px; }

.more-info-page .mi-dash-group {
  background: #ffffff; border: 1px solid #e8eaed; border-radius: 12px;
  margin-bottom: 16px; overflow: hidden;
}
.more-info-page .mi-dash-group-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; background: #fafbfc; border-bottom: 1px solid #f0f0f2;
}
.more-info-page .mi-dash-group-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #ffffff; flex-shrink: 0;
}
.more-info-page .mi-dash-group-avatar.purple { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.more-info-page .mi-dash-group-avatar.teal { background: linear-gradient(135deg, #4db3a5, #3d9e91); }
.more-info-page .mi-dash-group-avatar.orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.more-info-page .mi-dash-group-name { font-size: 14px; font-weight: 600; color: #1d1d1f; }
.more-info-page .mi-dash-group-detail { font-size: 12px; color: #8e8e93; }

.more-info-page .mi-dash-invoice {
  display: flex; align-items: center; padding: 12px 18px;
  border-bottom: 1px solid #f5f5f7; gap: 12px;
}
.more-info-page .mi-dash-invoice:last-child { border-bottom: none; }

.more-info-page .mi-dash-invoice-check {
  width: 18px; height: 18px; border-radius: 4px;
  border: 2px solid #d2d2d7; flex-shrink: 0; cursor: pointer;
}
.more-info-page .mi-dash-invoice-check.checked {
  background: var(--accent-teal, #4db3a5); border-color: var(--accent-teal, #4db3a5); position: relative;
}
.more-info-page .mi-dash-invoice-check.checked::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 6px; height: 10px; border: solid #ffffff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.more-info-page .mi-dash-invoice-info { flex: 1; min-width: 0; }
.more-info-page .mi-dash-invoice-number { font-size: 13px; font-weight: 600; color: #1d1d1f; }
.more-info-page .mi-dash-invoice-desc { font-size: 12px; color: #8e8e93; margin-top: 1px; }
.more-info-page .mi-dash-invoice-amount { font-size: 14px; font-weight: 700; color: #1d1d1f; text-align: right; min-width: 100px; }
.more-info-page .mi-dash-invoice-due { font-size: 11px; color: #8e8e93; text-align: right; margin-top: 2px; }
.more-info-page .mi-dash-invoice-due.overdue { color: #eb0a44; font-weight: 600; }

.more-info-page .mi-dash-badge {
  display: inline-block; padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px; min-width: 70px; text-align: center;
}
.more-info-page .mi-dash-badge.pending { background: #fff3e0; color: #e65100; }
.more-info-page .mi-dash-badge.overdue { background: #fde8ec; color: #eb0a44; }
.more-info-page .mi-dash-badge.paid { background: #e8f8f5; color: var(--accent-teal, #4db3a5); }

.more-info-page .mi-dash-history { margin-top: 28px; }
.more-info-page .mi-dash-history-title { font-size: 16px; font-weight: 700; color: #1d1d1f; margin-bottom: 14px; }
.more-info-page .mi-dash-history-table { width: 100%; border-collapse: collapse; }
.more-info-page .mi-dash-history-table th {
  text-align: left; font-size: 11px; font-weight: 600; color: #8e8e93;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 12px; border-bottom: 1px solid #e5e5ea;
}
.more-info-page .mi-dash-history-table td { padding: 10px 12px; font-size: 13px; color: #1d1d1f; border-bottom: 1px solid #f5f5f7; }
.more-info-page .mi-dash-history-table td.light { color: #8e8e93; }
.more-info-page .mi-dash-history-table .mi-receipt-link { color: var(--accent-teal, #4db3a5); text-decoration: none; font-weight: 600; font-size: 12px; }

/* ========== FEATURE SECTIONS ========== */
.more-info-page .mi-feat-section-bg {
  width: 100%;
  background: #0A0E15;
}
.more-info-page .mi-feat-section-bg.alt {
  background: #212631;
}
.more-info-page .mi-feat-section-bg.glow {
  background: #0A0E15 radial-gradient(ellipse at 20% 50%, rgba(22,143,255,0.04) 0%, transparent 60%);
}
.more-info-page .mi-feat-section-bg.alt.glow {
  background: #212631 radial-gradient(ellipse at 80% 50%, rgba(22,143,255,0.04) 0%, transparent 60%);
}

.more-info-page .mi-feat-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 32px;
  display: flex;
  align-items: center;
  gap: 80px;
}
.more-info-page .mi-feat-section.reverse { flex-direction: row-reverse; }

.more-info-page .mi-feat-text { flex: 1; }
.more-info-page .mi-feat-visual { flex: 1; max-width: 480px; position: relative; }

.more-info-page .mi-feat-icon {
  width: 56px; height: 56px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.more-info-page .mi-feat-icon svg { width: 24px; height: 24px; }
.more-info-page .mi-feat-icon.teal { background: linear-gradient(135deg, #4db3a5, #3d9e91); }
.more-info-page .mi-feat-icon.blue { background: linear-gradient(135deg, #2d5a8e, #4a7fc7); }
.more-info-page .mi-feat-icon.orange { background: linear-gradient(135deg, #f59e0b, #d97706); }
.more-info-page .mi-feat-icon.purple { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.more-info-page .mi-feat-icon.blue-teal { background: linear-gradient(135deg, #2d5a8e, #4db3a5); }

.more-info-page .mi-feat-label {
  font-size: 12px; font-weight: 700; color: var(--accent-teal, #4db3a5);
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.more-info-page .mi-feat-title { font-size: 32px; font-weight: 800; color: #ffffff; line-height: 1.2; margin-bottom: 14px; }
.more-info-page .mi-feat-desc { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 24px; }
.more-info-page .mi-feat-list { list-style: none; }
.more-info-page .mi-feat-list li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 0; font-size: 14px; color: rgba(255,255,255,0.85); line-height: 1.5;
}
.more-info-page .mi-feat-list li .check { color: var(--accent-teal, #4db3a5); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.more-info-page .mi-feat-list li strong { font-weight: 600; }

/* Mini-card base */
.more-info-page .mi-mini-card {
  background: #ffffff; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
  padding: 24px; box-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.06);
  position: relative; z-index: 1;
}
.more-info-page .mi-mini-card-title { font-size: 14px; font-weight: 700; color: #1d1d1f; margin-bottom: 16px; }
.more-info-page .mi-mini-card-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 0; border-bottom: 1px solid #f5f5f7;
}
.more-info-page .mi-mini-card-row:last-child { border-bottom: none; }

/* Stacked card decoration */
.more-info-page .mi-feat-visual-deco {
  position: absolute; top: 12px; left: 12px; right: -12px; bottom: -12px;
  border-radius: 14px; z-index: 0; transform: rotate(2deg);
}
.more-info-page .mi-feat-visual-deco.teal { background: rgba(77,179,165,0.15); border: 1px solid rgba(77,179,165,0.25); }
.more-info-page .mi-feat-visual-deco.purple { background: rgba(99,102,241,0.15); border: 1px solid rgba(99,102,241,0.25); }

/* Approve/reject mini buttons */
.more-info-page .mi-mini-btn {
  display: inline-block; padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; border: none; cursor: pointer;
}
.more-info-page .mi-mini-btn.approve { background: #e8f8f5; color: var(--accent-teal, #4db3a5); }
.more-info-page .mi-mini-btn.reject { background: #fde8ec; color: #eb0a44; }
.more-info-page .mi-mini-btn.note { background: #f5f5f7; color: #6e6e73; }

/* ========== CHAT BUBBLES ========== */
.more-info-page .mi-chat-container {
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 14px; border-top: 1px solid #f0f0f2;
}
.more-info-page .mi-chat-group { display: flex; flex-direction: column; gap: 4px; }
.more-info-page .mi-chat-group.outgoing { align-items: flex-start; }
.more-info-page .mi-chat-group.incoming { align-items: flex-end; }

.more-info-page .mi-chat-sender {
  font-size: 11px; font-weight: 600; margin-bottom: 2px; padding: 0 10px;
}
.more-info-page .mi-chat-sender.left { color: #2d5a8e; }
.more-info-page .mi-chat-sender.right { color: var(--accent-teal, #4db3a5); }

.more-info-page .mi-chat-bubble {
  padding: 10px 16px; font-size: 13px; color: #1d1d1f;
  line-height: 1.45; max-width: 85%; position: relative;
}
.more-info-page .mi-chat-bubble.outgoing {
  background: #e8f0fe;
  border-radius: 18px 18px 18px 4px;
}
.more-info-page .mi-chat-bubble.outgoing::after {
  content: ''; position: absolute; bottom: 0; left: -6px;
  width: 0; height: 0; border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent #e8f0fe transparent transparent;
}
.more-info-page .mi-chat-bubble.incoming {
  background: #e6f7f3;
  border-radius: 18px 18px 4px 18px;
}
.more-info-page .mi-chat-bubble.incoming::after {
  content: ''; position: absolute; bottom: 0; right: -6px;
  width: 0; height: 0; border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: #e6f7f3 transparent transparent transparent;
}

/* ========== REMINDER CARDS ========== */
.more-info-page .mi-mini-reminder {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; background: #fff8f0; border: 1px solid #fde6cc;
  border-radius: 10px; margin-bottom: 8px;
}
.more-info-page .mi-mini-reminder-icon {
  width: 28px; height: 28px; border-radius: 50%; background: #fff3e0;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.more-info-page .mi-mini-reminder-icon svg { width: 14px; height: 14px; color: #e65100; }
.more-info-page .mi-mini-reminder-text { font-size: 13px; color: #1d1d1f; }
.more-info-page .mi-mini-reminder-text strong { font-weight: 600; }

.more-info-page .mi-mini-reminder.alert {
  background: #fde8ec; border-color: #f5c6ce;
}
.more-info-page .mi-mini-reminder.alert .mi-mini-reminder-icon { background: #fde8ec; }
.more-info-page .mi-mini-reminder.alert .mi-mini-reminder-text { color: #eb0a44; }

@keyframes mi-pulse-alert {
  0%, 100% { box-shadow: 0 0 0 0 rgba(235,10,68,0); }
  50% { box-shadow: 0 0 0 6px rgba(235,10,68,0.08); }
}
.more-info-page .mi-mini-reminder.alert { animation: mi-pulse-alert 2.5s ease-in-out infinite; }

/* Activity feed */
.more-info-page .mi-activity-feed { margin-top: 14px; padding: 10px 0; border-top: 1px solid #f0f0f2; }
.more-info-page .mi-activity-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0; font-size: 12px; color: #8e8e93;
}
.more-info-page .mi-activity-item-left { display: flex; align-items: center; gap: 8px; }
.more-info-page .mi-activity-item-left svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ========== EXPORT CARD ========== */
.more-info-page .mi-mini-export-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid #f5f5f7;
  transition: background 0.15s; border-radius: 6px; margin: 0 -4px; padding-left: 4px; padding-right: 4px;
}
.more-info-page .mi-mini-export-row:last-child { border-bottom: none; }
.more-info-page .mi-mini-export-row:hover { background: #f8f9fa; }
.more-info-page .mi-mini-export-icon {
  width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: 11px; font-weight: 700;
}
.more-info-page .mi-mini-export-icon.csv { background: #e8f8f5; color: var(--accent-teal, #4db3a5); }
.more-info-page .mi-mini-export-icon.pdf { background: #fde8ec; color: #eb0a44; }
.more-info-page .mi-mini-export-icon.tax { background: #f0e8fb; color: #8b5cf6; }
.more-info-page .mi-mini-export-icon.zip { background: #fff3e0; color: #d97706; }
.more-info-page .mi-mini-export-name { font-size: 13px; font-weight: 600; color: #1d1d1f; }
.more-info-page .mi-mini-export-desc { font-size: 11px; color: #8e8e93; }

/* ========== TEAMS PILLS ========== */
.more-info-page .mi-teams-pills { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.more-info-page .mi-teams-pill {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: rgba(255,255,255,0.06); border-radius: 10px; border: 1px solid rgba(255,255,255,0.1);
}
.more-info-page .mi-teams-pill-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.more-info-page .mi-teams-pill-icon svg { width: 16px; height: 16px; color: #ffffff; }
.more-info-page .mi-teams-pill-icon.blue { background: linear-gradient(135deg, #2d5a8e, #4a7fc7); }
.more-info-page .mi-teams-pill-icon.teal { background: linear-gradient(135deg, #4db3a5, #3d9e91); }
.more-info-page .mi-teams-pill-icon.purple { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.more-info-page .mi-teams-pill-title { font-size: 13px; font-weight: 600; color: #ffffff; }
.more-info-page .mi-teams-pill-desc { font-size: 11px; color: rgba(255,255,255,0.5); }

/* Teams approval flow line */
.more-info-page .mi-teams-flow { position: relative; padding-left: 0; }
.more-info-page .mi-teams-flow-line {
  position: absolute; left: 15px; top: 44px; bottom: 20px;
  border-left: 2px dashed #e0e0e5; pointer-events: none;
}
.more-info-page .mi-teams-member {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  position: relative; z-index: 1;
}
.more-info-page .mi-teams-member + .mi-teams-member { border-top: 1px solid #e8eaed; }
.more-info-page .mi-teams-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.more-info-page .mi-teams-member-info { flex: 1; }
.more-info-page .mi-teams-member-name { font-size: 13px; font-weight: 600; color: #1d1d1f; }
.more-info-page .mi-teams-member-role { font-size: 11px; color: #8e8e93; }
.more-info-page .mi-teams-status { font-size: 11px; font-weight: 600; }
.more-info-page .mi-teams-status.approved { color: var(--accent-teal, #4db3a5); }
.more-info-page .mi-teams-status.pending { color: #e65100; }
.more-info-page .mi-teams-status.waiting { color: #aeaeb2; }

/* ========== BOTTOM CTA ========== */
.more-info-page .mi-bottom-cta {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #8bb8e8 100%);
  padding: 80px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.more-info-page .mi-bottom-cta h2 { font-size: 32px; font-weight: 800; color: #ffffff; margin-bottom: 8px; position: relative; z-index: 1; }
.more-info-page .mi-bottom-cta p { font-size: 15px; color: rgba(255,255,255,0.8); margin-bottom: 28px; position: relative; z-index: 1; }
.more-info-page .mi-bottom-cta-btn {
  display: inline-block; background: #ffffff; color: #1e3a5f;
  padding: 16px 40px; border-radius: 12px; text-decoration: none;
  font-weight: 700; font-size: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  cursor: pointer; border: none; transition: transform 0.15s;
  position: relative; z-index: 1;
}
.more-info-page .mi-bottom-cta-btn:hover { transform: translateY(-2px); }
.more-info-page .mi-bottom-cta-free { font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 12px; position: relative; z-index: 1; }

/* ========== FOOTER ========== */
.more-info-page .mi-page-footer {
  padding: 32px 24px; text-align: center;
  background: #0A0E15; border-top: 1px solid #373F4E;
}
.more-info-page .mi-footer-trust {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin-bottom: 16px;
}
.more-info-page .mi-footer-trust-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: rgba(255,255,255,0.5); font-weight: 500;
}
.more-info-page .mi-footer-trust-item svg { width: 18px; height: 18px; color: var(--accent-teal, #4db3a5); }
.more-info-page .mi-footer-powered { font-size: 12px; color: rgba(255,255,255,0.25); }
.more-info-page .mi-footer-powered strong { color: rgba(255,255,255,0.4); }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
  .more-info-page .mi-hero h1 { font-size: 30px; }
  .more-info-page .mi-hero { padding: 48px 20px 72px; }
  .more-info-page .mi-dash { padding: 20px 16px; }
  .more-info-page .mi-dash-summary { grid-template-columns: 1fr; }
  .more-info-page .mi-dash-card-value { font-size: 22px; }
  .more-info-page .mi-dash-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .more-info-page .mi-dash-invoice { flex-wrap: wrap; }
  .more-info-page .mi-feat-section, .more-info-page .mi-feat-section.reverse { flex-direction: column; gap: 40px; padding: 60px 20px; }
  .more-info-page .mi-feat-visual { max-width: 100%; }
  .more-info-page .mi-feat-icon { width: 48px; height: 48px; border-radius: 14px; }
  .more-info-page .mi-feat-icon svg { width: 20px; height: 20px; }
  .more-info-page .mi-feat-title { font-size: 26px; }
  .more-info-page .mi-teams-pills { gap: 6px; }
  .more-info-page .mi-footer-trust { flex-direction: column; gap: 8px; }
  .more-info-page .mi-bottom-cta { padding: 60px 20px; }
  .more-info-page .mi-bottom-cta h2 { font-size: 26px; }
}

/* ========================================================================
   FAQ PAGE — Client Portal (/portal/faq)
   Scoped to .faq-page to avoid conflicts with other portal styles.
   ======================================================================== */

.faq-page {
  min-height: 100vh;
  background: #f8f9fa;
  font-family: "aktiv-grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #1d1d1f;
}

/* Language bar */
.faq-lang-bar {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 16px 20px 0;
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 100%);
}

.faq-lang-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.faq-lang-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
}

.faq-lang-btn.active {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}

.faq-lang-flag {
  font-size: 14px;
  line-height: 1;
}

/* Blue header */
.faq-back-bar {
  padding: 12px 24px;
  background: #1e3a5f;
}

/* .faq-back-btn removed — use .app-back-link.app-back-link--dark */

.faq-header {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 25%, #4a7fc7 50%, #6b9fd8 75%, #8bb8e8 100%);
  padding: 40px 20px 56px;
  text-align: center;
}

.faq-header-logo {
  margin-bottom: 20px;
}

.faq-logo-img {
  height: 40px;
}

.faq-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

/* FAQ content area */
.faq-content {
  max-width: 720px;
  margin: -28px auto 0;
  padding: 0 20px 48px;
  position: relative;
  z-index: 1;
}

.faq-list {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

/* Individual FAQ item — scoped to the portal FAQ page (.faq-page) so these
   hardcoded-light rules never leak into the in-app Help Center modal, which
   reuses the same .faq-item / .faq-question / .faq-answer class names. */
.faq-page .faq-item {
  border-bottom: 1px solid #e5e5ea;
}

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

.faq-page .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: background-color 0.15s ease;
}

.faq-page .faq-question:hover {
  background: #f5f5f7;
}

.faq-page .faq-question-text {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.4;
  flex: 1;
}

.faq-page .faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #8e8e93;
  transition: transform 0.3s ease;
}

.faq-page .faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

/* Answer panel — collapsed by default */
.faq-page .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-page .faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-page .faq-answer p {
  padding: 0 24px 20px;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #6e6e73;
}

/* Footer */
.faq-footer {
  text-align: center;
  padding: 32px 20px 48px;
}

.faq-footer-text {
  font-size: 18px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 16px;
}

.faq-footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
}

.faq-footer-link {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.faq-footer-contact {
  color: #1e3a5f;
}

.faq-footer-contact:hover {
  color: #2d5a8e;
}

.faq-footer-back {
  color: #8e8e93;
}

.faq-footer-back:hover {
  color: #6e6e73;
}

/* Responsive */
@media (max-width: 600px) {
  .faq-header { padding: 32px 16px 48px; }
  .faq-title { font-size: 24px; }
  .faq-content { padding: 0 12px 40px; margin-top: -24px; }
  .faq-page .faq-question { padding: 16px 18px; }
  .faq-page .faq-question-text { font-size: 15px; }
  .faq-page .faq-answer p { padding: 0 18px 16px; font-size: 14px; }
  .faq-lang-bar { gap: 4px; padding: 12px 12px 0; flex-wrap: wrap; }
  .faq-lang-btn { padding: 5px 8px; font-size: 11px; }
}

/* ========== THANK YOU PAGE (paid state) ========== */
/* Source: mockup-thankyou-page.html */

.thankyou-wrapper {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #8bb8e8 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.thankyou-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255,255,255,0.1);
  width: 100%;
  max-width: 540px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.thankyou-accent {
  height: 4px;
  background: linear-gradient(90deg, #4db3a5, #66ccbe);
}

.thankyou-body {
  padding: 28px 32px;
}

.thankyou-success {
  text-align: center;
  margin-bottom: 20px;
}

.thankyou-checkmark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4db3a5, #66ccbe);
  margin-bottom: 14px;
  animation: thankyouScaleIn 0.4s ease-out;
}

@keyframes thankyouScaleIn {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

.thankyou-checkmark svg {
  width: 36px;
  height: 36px;
  color: #ffffff;
  animation: thankyouCheckDraw 0.3s ease-out 0.3s both;
}

@keyframes thankyouCheckDraw {
  0% { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}

.thankyou-title {
  font-size: 24px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 6px;
}

.thankyou-subtitle {
  font-size: 15px;
  color: #6e6e73;
}

/* Payment summary */
.thankyou-summary {
  background: #f5f5f7;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.thankyou-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.thankyou-summary-row + .thankyou-summary-row {
  border-top: 1px solid #e8eaed;
  margin-top: 4px;
  padding-top: 12px;
}

.thankyou-summary-label {
  font-size: 13px;
  color: #8e8e93;
}

.thankyou-summary-value {
  font-size: 14px;
  font-weight: 600;
  color: #1d1d1f;
}

.thankyou-summary-row.total {
  border-top: 2px solid #d2d2d7;
  margin-top: 8px;
  padding-top: 14px;
}

.thankyou-summary-row.total .thankyou-summary-label {
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1f;
}

.thankyou-summary-row.total .thankyou-summary-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-teal, #4db3a5);
}

/* Status badge */
.thankyou-badge {
  text-align: center;
  margin-bottom: 28px;
}

.thankyou-badge span {
  display: inline-block;
  background: #e8f8f5;
  color: var(--accent-teal, #4db3a5);
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* Download receipt button */
.thankyou-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: #ffffff;
  border: 2px solid #e5e5ea;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  margin-bottom: 16px;
}

.thankyou-download:hover {
  border-color: var(--accent-teal, #4db3a5);
  color: var(--accent-teal, #4db3a5);
  background: #f0faf8;
}

.thankyou-download svg {
  width: 20px;
  height: 20px;
}

/* CP-44: paid-modal accountant buttons -- one named class + a real :hover
   instead of per-button inline styles + onmouseover/onmouseout JS handlers.
   Declarations identical to the old inline set; hover = the old onmouseover
   background. --prompt = the CP-43 setup variant (dashed, secondary text). */
.pd-accountant-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pd-accountant-btn:hover {
  background: var(--bg-tertiary);
}
.pd-accountant-btn svg {
  width: 16px;
  height: 16px;
}
.pd-accountant-btn--prompt {
  border-style: dashed;
  color: var(--text-secondary);
}

/* Portal CTA section */
.thankyou-portal-cta {
  border-top: 1px solid #e5e5ea;
  padding-top: 20px;
  text-align: center;
}

.thankyou-portal-title {
  font-size: 18px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 10px;
}

.thankyou-portal-desc {
  font-size: 14px;
  color: #6e6e73;
  line-height: 1.6;
  margin-bottom: 20px;
}

.thankyou-portal-features {
  text-align: left;
  margin: 0 auto 24px;
  max-width: 340px;
}

.thankyou-portal-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
}

.thankyou-portal-feature svg {
  width: 16px;
  height: 16px;
  color: var(--accent-teal, #4db3a5);
  flex-shrink: 0;
  margin-top: 1px;
}

.thankyou-portal-feature-text {
  font-size: 13px;
  color: #1d1d1f;
  line-height: 1.4;
}

.thankyou-portal-feature-text strong {
  font-weight: 600;
}

.thankyou-portal-btn {
  display: inline-block;
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 25%, #4a7fc7 50%, #6b9fd8 75%, #8bb8e8 100%);
  color: #ffffff;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(30, 58, 95, 0.3);
}

.thankyou-portal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(30, 58, 95, 0.4);
  color: #ffffff;
}

/* Sign-off */
.thankyou-signoff {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid #e5e5ea;
}

.thankyou-signoff-mascot {
  width: 44px;
  height: 44px;
}

.thankyou-signoff-text {
  font-size: 16px;
  color: #1d1d1f;
  line-height: 1.4;
  margin: 0;
}

.thankyou-signoff-link {
  font-size: 13px;
  color: var(--accent-teal, #4db3a5);
  text-decoration: none;
}

.thankyou-signoff-link:hover {
  text-decoration: underline;
}

/* Footer */
.thankyou-footer {
  padding: 14px 36px;
  background: #f8f9fa;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.thankyou-footer-text {
  font-size: 11px;
  color: #aeaeb2;
}

.thankyou-footer-logo {
  font-size: 11px;
  font-weight: 700;
  color: #8e8e93;
}

/* Back to invoices button (top-left) */
.thankyou-back-bar {
  position: absolute;
  top: 20px;
  left: 24px;
  z-index: 10;
}

/* .thankyou-back-btn removed — use .app-back-link.app-back-link--dark */

/* Trust badges below card */
.thankyou-trust-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.thankyou-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}

.thankyou-trust-item svg {
  width: 14px;
  height: 14px;
}

/* Thank you page responsive */
@media (max-width: 560px) {
  .thankyou-body { padding: 28px 20px; }
  .thankyou-title { font-size: 20px; }
  .thankyou-portal-title { font-size: 16px; }
  .thankyou-portal-features { max-width: 100%; }
  .thankyou-footer { padding: 12px 20px; }
  .thankyou-trust-row { flex-direction: column; gap: 8px; }
}

/* ===== CNR Cancel Confirmation Modal (client portal) ===== */
/* Error-prevention pattern for withdrawing a credit note request.
   Shows per-target details + optional note so the freelancer gets
   context rather than a silent disappearance. Single + bulk share it. */
.pd-cnr-cancel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  z-index: 2200;
}
.pd-cnr-cancel-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 460px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.pd-cnr-cancel-header {
  display: grid;
  grid-template-columns: 40px 1fr 24px;
  align-items: start;
  gap: 14px;
}
.pd-cnr-cancel-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fef0f0;
  color: #c02020;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-cnr-cancel-title {
  font-size: 17px;
  font-weight: 600;
  color: #1d1d1f;
  margin: 0 0 4px;
  line-height: 1.3;
}
.pd-cnr-cancel-subtitle {
  font-size: 13px;
  color: #6e6e73;
  margin: 0;
  line-height: 1.5;
}
.pd-cnr-cancel-close {
  background: none;
  border: none;
  color: #8e8e93;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}
.pd-cnr-cancel-close:hover {
  color: #1d1d1f;
}
.pd-cnr-cancel-targets {
  background: #f5f5f7;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 200px;
  overflow-y: auto;
}
.pd-cnr-cancel-target-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #1d1d1f;
}
.pd-cnr-cancel-target-invoice {
  font-family: "SF Mono", Menlo, monospace;
  font-weight: 600;
}
.pd-cnr-cancel-target-amount {
  color: #6e6e73;
}
.pd-cnr-cancel-target-more {
  font-size: 12px;
  color: #8e8e93;
  font-style: italic;
  text-align: center;
  padding-top: 4px;
  border-top: 1px solid #e5e5ea;
}
.pd-cnr-cancel-note-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #1d1d1f;
  margin-bottom: 6px;
}
.pd-cnr-cancel-note-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d1d6;
  border-radius: 8px;
  font-size: 14px;
  color: #1d1d1f;
  background: #ffffff;
  resize: vertical;
  font-family: inherit;
  transition: border-color 0.2s ease;
}
.pd-cnr-cancel-note-input:focus {
  outline: none;
  border-color: #1e3a5f;
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.pd-cnr-cancel-note-hint {
  font-size: 11px;
  color: #8e8e93;
  margin-top: 4px;
}
.pd-cnr-cancel-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.pd-cnr-cancel-btn-secondary,
.pd-cnr-cancel-btn-primary {
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}
.pd-cnr-cancel-btn-secondary {
  background: #ffffff;
  color: #1d1d1f;
  border-color: #d1d1d6;
}
.pd-cnr-cancel-btn-secondary:hover {
  background: #f5f5f7;
}
.pd-cnr-cancel-btn-primary {
  background: #c02020;
  color: #ffffff;
}
.pd-cnr-cancel-btn-primary:hover {
  background: #a01818;
}

/* =====================================================================
 * CREDIT NOTES V2 — scoped classes (parallel to V1 .credit-note-* ones)
 * ===================================================================== */

/* V2 toggle banner on /portal/dashboard?v2=1 */
.cn-v2-banner {
  background: linear-gradient(90deg, #fef7e6 0%, #fdecc8 100%);
  color: #8a5a1a;
  padding: 10px 16px;
  border-bottom: 1px solid #e5b75a;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  gap: 10px;
  align-items: baseline;
}
.cn-v2-banner code {
  background: rgba(0,0,0,0.08);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: Menlo, Monaco, monospace;
  font-size: 12px;
}

/* V2 Index / Requests — extends V1 .credit-note-* classes where possible.
 * New: bulk-action bar, back link, eligible list, show grid, modal actions. */
.cn-bulk-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  background: #f5f5f7;
  border-radius: 6px;
  margin-bottom: 12px;
}
/* .cn-back-link removed — use .app-back-link */

/* Skeleton bars for CN V2 pages during the demo-mode "still loading"
   window (static render → WS connect → CnSyncV2 hook fires
   cn:state_loaded). Plain rectangular bars — the earlier multi-cell
   structure read as "two overlapping skeletons" per user feedback.
   Each bar is a single shimmering rectangle, unambiguously "loading
   placeholder" rather than mimicking any specific row layout. */
.cn-skeleton-loading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}
.cn-skeleton-bar {
  height: 56px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: cn-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.cn-skeleton-row {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: #fff;
}
.cn-skeleton-row--cnr {
  align-items: stretch;
}
.cn-skeleton-row--cnr .cn-skeleton-cell--main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  animation: none;
  height: auto;
}
.cn-skeleton-row--cnr .cn-skeleton-cell--main > .cn-skeleton-cell {
  width: auto;
  flex: 0 0 auto;
}
.cn-skeleton-cell {
  height: 14px;
  background: linear-gradient(90deg, #f0f0f0 0%, #e8e8e8 50%, #f0f0f0 100%);
  background-size: 200% 100%;
  animation: cn-skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  flex: 1;
}
.cn-skeleton-cell--check { flex: 0 0 16px; height: 16px; }
.cn-skeleton-cell--narrow { flex: 0 0 110px; }
.cn-skeleton-cell--actions { flex: 0 0 180px; height: 32px; }
@keyframes cn-skeleton-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Requests row (freelancer Requests page) */
.cn-requests-list { display: flex; flex-direction: column; gap: 12px; }
.cn-requests-list-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  margin-bottom: -4px;
  border-bottom: 1px solid #e5e5ea;
}
.cn-requests-list-header .cn-request-check {
  display: flex;
  align-items: center;
}
.cn-requests-list-header-label {
  font-size: 13px;
  color: #6e6e73;
  cursor: pointer;
  user-select: none;
}
.cn-request-row {
  display: flex;
  gap: 20px;
  padding: 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
@keyframes cn-request-row-glow {
  0%   { box-shadow: 0 0 0 0 rgba(229, 183, 90, 0.7); background-color: #fff8e6; }
  60%  { box-shadow: 0 0 0 8px rgba(229, 183, 90, 0);  background-color: #fff8e6; }
  100% { box-shadow: 0 0 0 0 rgba(229, 183, 90, 0);    background-color: #fff; }
}
.cn-request-row--highlight {
  animation: cn-request-row-glow 2.8s ease-out;
  border-color: #e5b75a;
}
.cn-request-main { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.cn-request-invoice { font-size: 14px; display: flex; gap: 10px; align-items: center; }
.cn-request-client { font-size: 12px; color: #6e6e73; }
.cn-request-reason { font-size: 12px; }
.cn-request-note { font-size: 12px; color: #3a3a3c; }
.cn-request-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
  width: 180px;
  flex-shrink: 0;
  padding-top: 0;
  border-top: none;
}

/* Invoice number as link (replaces the old "View invoice" button —
   the identifier itself is the natural affordance). Subtle visible
   underline so it reads as clickable without competing with status
   pills or content. */
/* Now rendered as a <button> (opens an in-page preview modal instead of
   navigating to /invoices/:id in a new tab). Strip native button styling
   so it reads like a clickable invoice number. */
.cn-request-invoice-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(230, 53, 106, 0.45);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.cn-request-invoice-link:hover {
  color: #e6356a;
  text-decoration-color: #e6356a;
}

.cn-request-invoice-link:focus-visible {
  outline: 2px solid #e6356a;
  outline-offset: 2px;
  border-radius: 2px;
}

.cn-request-invoice-link__icon {
  opacity: 0.6;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.cn-request-invoice-link:hover .cn-request-invoice-link__icon {
  opacity: 1;
  transform: translateX(2px);
}


[data-theme="dark"] .cn-request-invoice-link:hover {
  color: #ff6b8e;
  text-decoration-color: #ff6b8e;
}

/* Show page layout */
/* Show-page header layout: back link / badge / H1 / subtitle / status row,
   each on its own line. Action buttons live on the right. */
.cn-show-header {
  align-items: flex-start;
}
.cn-show-header-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.cn-show-header-main .app-back-link { margin-bottom: 4px; }
.cn-show-header-main .cn-show-badge { margin: 0; align-self: flex-start; }
.cn-show-header-main .credit-note-index-title { margin: 0; }
.cn-show-header-main .credit-note-index-subtitle { margin: 0; }
.cn-show-status-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.cn-show-status-label {
  font-size: 13px;
  color: var(--text-secondary);
}
.cn-show-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* All action-zone buttons share the same dimensions. The 2px borders
   on outlined variants (.btn-secondary / .btn-danger-outline) would
   otherwise make those buttons 4px taller than the borderless
   .btn-primary, so we lock the box with explicit min-height +
   box-sizing: border-box. Width is locked the same way via min-width. */
.cn-show-actions .btn,
.cn-show-actions a.btn {
  min-width: 180px;
  min-height: 46px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.cn-show-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; padding: 24px 28px; }
.cn-show-meta dl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-bottom: 20px; }
.cn-show-meta dt { font-size: 11px; color: #8e8e93; text-transform: uppercase; letter-spacing: 0.5px; }
.cn-show-meta dd { font-size: 13px; }
.cn-show-preview {
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  padding: 30px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.cn-preview-note { text-align: center; color: #6e6e73; font-size: 12px; }
.cn-preview-note .btn { margin-top: 12px; }

/* Modal actions shared between V2 modals */
.cn-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* Action confirmation modal layout (Void / Refund / Delete / Send to accountant).
   Same visual language as the Credit Note Issued success modal but
   reads as a form, not a celebration. */
.cn-action-modal {
  text-align: left;
  padding: 32px 28px 24px;
  align-items: stretch;
  background: var(--bg-primary) !important;
  max-width: 480px;
  width: 100%;
  margin: auto;
  border-radius: 12px;
  position: relative;
}
.cn-action-modal h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}
.cn-action-modal-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 0 20px;
}
.cn-action-modal--danger h2 {
  color: #b32d3a;
}
.cn-action-modal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cn-action-modal-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.cn-action-modal-label > span { font-weight: 600; }
.cn-action-modal-label select,
.cn-action-modal-label input[type="text"],
.cn-action-modal-label input[type="email"],
.cn-action-modal-label textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  box-sizing: border-box;
}
.cn-action-modal-label textarea {
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
}
.cn-action-modal-label select:focus,
.cn-action-modal-label input:focus,
.cn-action-modal-label textarea:focus {
  outline: 2px solid var(--accent-teal);
  outline-offset: -1px;
  border-color: var(--accent-teal);
}
.cn-action-modal-error {
  padding: 10px 14px;
  background: #fef0f1;
  border-left: 4px solid #b32d3a;
  border-radius: 4px;
  color: #b32d3a;
  font-size: 13px;
}

/* Outlined-red button — secondary destructive (Void in action zone).
   Explicitly resets padding/font-size/font-weight because there's an
   older `.btn-danger-outline` definition earlier in this file that
   sets smaller values; without overriding them here, Void renders
   shorter than its peers (.btn-primary, .btn-secondary). */
.btn-danger-outline {
  background: #ffffff;
  color: #b32d3a;
  border: 2px solid #b32d3a;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
}
.btn-danger-outline:hover:not(:disabled) {
  background: #fef0f1;
  box-shadow: 0 2px 8px rgba(179, 45, 58, 0.1);
  transform: translateY(-1px);
}

/* Accounting section in the show-page meta column (issued / applied). */
.cn-accounting-section {
  background: var(--bg-secondary);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 20px;
}
.cn-accounting-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.cn-accounting-block-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cn-accounting-block-desc {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0;
  line-height: 1.4;
}
.cn-accounting-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.cn-accounting-divider::before,
.cn-accounting-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-primary);
}
.cn-accounting-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.cn-accounting-platforms .btn-ghost {
  background: transparent;
  border: 1px solid var(--border-primary);
  color: var(--text-tertiary);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: not-allowed;
}
.cn-accounting-platforms .btn-ghost:disabled {
  opacity: 0.6;
}

/* Eligible invoices list on New page */
.cn-eligible-list { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.cn-eligible-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 6px;
  background: #fff;
  text-align: left;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.1s ease;
}
.cn-eligible-row:hover { background: #f5f5f7; }
.cn-eligible-client { color: #6e6e73; font-size: 12px; margin-left: 8px; }
.cn-eligible-amount { font-weight: 600; }

.cn-edit-note { padding: 20px; color: #6e6e73; font-size: 13px; }

/* V2 placeholder pages (Phase 1 scaffolding) */
.cn-v2-placeholder {
  padding: 30px 40px;
  color: var(--text-primary, #1d1d1f);
}
.cn-v2-debug {
  margin-top: 20px;
  padding: 12px 16px;
  background: #f5f5f7;
  border-radius: 6px;
  font-family: Menlo, Monaco, monospace;
  font-size: 12px;
}

/* =====================================================================
 * CREDIT NOTES V2 — UI polish (a11y, loading, chat cards)
 * ===================================================================== */

/* §25.5: prefers-reduced-motion — collapse highlight + modal transitions */
@media (prefers-reduced-motion: reduce) {
  .pd-cn-row--highlight {
    animation: none !important;
    background: #fff9c4 !important;
    outline: 2px solid #f7e79b !important;
  }
  .template-modal {
    transition: none !important;
  }
  .pd-cn-v2-inline-pill,
  .pd-cn-v2-request-btn,
  .portal-cn-v2-request-btn {
    transition: none !important;
  }
}

/* Highlight animation used on `navigate_to_cnr` to flash the target row. */
@keyframes cn-highlight-pulse {
  0%   { background: rgba(247, 230, 168, 0.8); outline: 2px solid #f4d16f; }
  100% { background: transparent; outline: 2px solid transparent; }
}
.pd-cn-row--highlight {
  animation: cn-highlight-pulse 2.8s ease-out forwards;
}

/* Help tooltip (freelancer Requests + New pages) */
.cn-help-tooltip {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #8e8e93;
  color: #fff;
  font-size: 11px;
  text-align: center;
  line-height: 18px;
  font-weight: 700;
  cursor: help;
  margin-left: 6px;
}

/* Draft badge on Edit page header */
.cn-draft-badge {
  display: inline-block;
  background: #e5e5ea;
  color: #3a3a3c;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Edit form (§5.5) */
.cn-edit-form { padding: 20px 0; }
.cn-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
.cn-edit-full { grid-column: 1 / -1; }
.cn-edit-field { display: flex; flex-direction: column; gap: 6px; }
/* #1257: the amount fields are read-only (they follow the lines); same tokens as
   the locked support-subject field (.support-subject-locked). */
.cn-edit-field input[readonly] {
  background: var(--bg-tertiary);
  color: var(--text-primary); /* AAA: 13.4:1 light, 10.4:1 dark on bg-tertiary */
  border-color: var(--border-secondary);
  cursor: default;
}
/* text-secondary is 4.0-5.1:1 in light mode (below AAA), so the hint uses text-primary. */
.cn-edit-amounts-hint { color: var(--text-primary); margin-top: -8px; }
.cn-edit-field--error input,
.cn-edit-field--error select,
.cn-edit-field--error textarea {
  border-color: #b32d3a;
  box-shadow: 0 0 0 2px rgba(179, 45, 58, 0.1);
}
.cn-edit-label {
  font-size: 12px;
  font-weight: 600;
  color: #3a3a3c;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cn-edit-field-error {
  color: #b32d3a;
  font-size: 11px;
  font-weight: 500;
  margin-top: 4px;
}
.cn-form-errors {
  background: #fef0f1;
  border-left: 4px solid #b32d3a;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 16px;
  color: #b32d3a;
  font-size: 13px;
}
.cn-form-errors ul {
  margin: 6px 0 0 16px;
  padding: 0;
}
.cn-edit-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #e5e5ea;
}

/* Line-item editor (§9.4) */
.cn-line-editor { margin: 16px 0; }
.cn-line-editor-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e5e5ea;
}
.cn-line-editor-tab {
  padding: 8px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 12px;
  font-weight: 600;
  color: #6e6e73;
  cursor: pointer;
}
.cn-line-editor-tab.active {
  color: #0a7a57;
  border-bottom-color: #0a7a57;
}
.cn-line-editor-hint {
  padding: 10px 14px;
  background: #fef7e6;
  border-left: 4px solid #e5b75a;
  border-radius: 4px;
  color: #8a5a1a;
  font-size: 12px;
  margin-bottom: 10px;
}
.cn-line-editor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.cn-line-editor-table th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 2px solid #d1d1d6;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8e8e93;
}
.cn-line-editor-table .cn-num { text-align: right; }
.cn-line-editor-table td { padding: 8px; border-bottom: 1px solid #e5e5ea; }
.cn-line-row--excluded { opacity: 0.4; }
.cn-line-editor-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #d1d1d6;
  border-radius: 3px;
  font-size: 12px;
  text-align: right;
}
.cn-line-editor-total-row td { border-bottom: none; padding-top: 4px; }
.cn-line-editor-grand td {
  border-top: 2px solid #1d1d1f;
  font-size: 14px;
  padding-top: 8px;
  color: #0a7a57;
}
.cn-line-editor-warning {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef7e6;
  border-left: 4px solid #e5b75a;
  border-radius: 4px;
  color: #8a5a1a;
  font-size: 12px;
}
.cn-line-editor-invalid {
  margin-top: 10px;
  padding: 10px 14px;
  background: #fef0f1;
  border-left: 4px solid #b32d3a;
  border-radius: 4px;
  color: #b32d3a;
  font-size: 12px;
}

/* Success / issued modal (§9.8) */
.cn-success-modal {
  text-align: center;
  padding: 40px 32px 32px;
  align-items: center;
  background: var(--bg-primary) !important;
  max-width: 480px;
  width: 100%;
  margin: auto;
  border-radius: 12px;
  position: relative;
}
.cn-success-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #e8f9ee;
  color: #0a7a57;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin: 0 auto 16px;
  align-self: center;
}
.cn-success-check--success {
  background: #e8f9ee;
  color: #0a7a57;
}
.cn-success-check--warning {
  background: #fef0f1;
  color: #b32d3a;
}
.cn-success-modal h2 {
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  width: 100%;
}
.cn-success-modal > p:not(.cn-success-follow) {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0 0 24px;
  line-height: 1.5;
  max-width: 360px;
}
.cn-success-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 24px;
  margin: 0 0 20px;
  text-align: left;
  background: var(--bg-secondary);
  padding: 16px 20px;
  border-radius: 8px;
  width: 100%;
  align-items: center;
}
.cn-success-meta dt {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin: 0;
}
.cn-success-meta dd {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  text-align: right;
  font-family: "SF Mono", Menlo, monospace;
}
.cn-success-follow {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 24px;
}
.cn-success-modal .cn-modal-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 0;
}

/* Issue-CN / dismiss modal shared */
.cn-issue-context {
  padding: 12px 16px;
  background: #f5f5f7;
  border-radius: 6px;
  margin: 12px 0;
  font-size: 12px;
  line-height: 1.6;
}
.cn-issue-context-note { font-size: 11px; color: #6e6e73; margin-top: 6px; }
.cn-modal-hint { font-size: 12px; color: #6e6e73; margin: 8px 0; }
.cn-checkbox-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; margin: 10px 0;
}

/* Template-modal close X */
.template-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  width: 28px; height: 28px;
  font-size: 20px;
  cursor: pointer;
  color: #8e8e93;
}
.template-modal-close:hover { color: #1d1d1f; }

/* Client portal V2 full CN view (§5.7) */
.pd-cn-v2-view { padding: 20px; max-width: 960px; margin: 0 auto; }
.pd-cn-v2-header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 20px; }
.pd-cn-v2-back {
  background: transparent;
  border: 1px solid #d1d1d6;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  color: #3a3a3c;
}
.pd-cn-v2-title { font-size: 22px; font-weight: 700; margin: 0; }
.pd-cn-v2-subtitle { font-size: 12px; color: #6e6e73; margin-top: 4px; }

.pd-cn-v2-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid #e5e5ea;
  margin-bottom: 16px;
}
.pd-cn-v2-tab {
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: #6e6e73;
  cursor: pointer;
}
.pd-cn-v2-tab.active { color: #1e3a5f; border-bottom-color: #1e3a5f; }
.pd-cn-v2-tab-count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #1e3a5f;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.pd-cn-v2-bulk-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: #e8f0fe;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #1e3a5f;
}

.pd-cn-v2-list { display: flex; flex-direction: column; gap: 10px; }
.pd-cn-v2-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: #fff;
}
.pd-cn-v2-row-main { display: flex; flex-direction: column; gap: 4px; }
.pd-cn-v2-row-header { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.pd-cn-v2-row-meta { font-size: 11px; color: #6e6e73; }
.pd-cn-v2-response { font-size: 12px; color: #3a3a3c; margin-top: 6px; }
.pd-cn-v2-response blockquote {
  border-left: 3px solid #e5b75a;
  padding-left: 10px;
  margin: 4px 0;
  color: #8a5a1a;
}
.pd-cn-v2-row-amount { font-weight: 600; }
.pd-cn-v2-row-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.pd-cn-v2-pill {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.pd-cn-v2-pill--pending { background: #fef7e6; color: #8a5a1a; }
.pd-cn-v2-pill--approved,
.pd-cn-v2-pill--issued { background: #e8f9ee; color: #0a7a57; }
.pd-cn-v2-pill--rejected { background: #fef0f1; color: #b32d3a; }
.pd-cn-v2-pill--cancelled { background: #e5e5ea; color: #6e6e73; }
.pd-cn-v2-pill--void { background: #fdecec; color: #8c1a24; border: 1px solid #b32d3a; }
.pd-cn-v2-resent { font-size: 10px; color: #6e6e73; }
.pd-cn-v2-empty { padding: 56px 40px; text-align: center; color: #6e6e73; }
.pd-cn-v2-empty-icon { display: flex; justify-content: center; margin-bottom: 16px; color: #c7c7cc; }
.pd-cn-v2-empty-icon svg { width: 56px; height: 56px; }
.pd-cn-v2-empty-title { font-size: 16px; font-weight: 600; color: #3a3a3c; margin-bottom: 8px; }
.pd-cn-v2-empty p { max-width: 420px; margin: 0 auto; line-height: 1.5; }

/* #1096: on a 390px phone the view was 461px wide. `margin: 0 auto` makes it
   shrink-to-fit, and the tab row (five tabs, ~420px) can't shrink, so the whole
   page slid sideways. Fill the screen and let the tab row scroll instead. */
@media (max-width: 768px) {
  .pd-cn-v2-view { width: 100%; }
  .pd-cn-v2-back { flex-shrink: 0; white-space: nowrap; }
  .pd-cn-v2-tabs { overflow-x: auto; }
  .pd-cn-v2-tab { flex-shrink: 0; white-space: nowrap; }

  /* Rows: the four-track grid (checkbox | details | amount | actions) needs
     ~415px. On phones the details get the full row and the amount and actions
     move to a second line under them. */
  .pd-cn-v2-row {
    grid-template-columns: 28px auto minmax(0, 1fr);
    grid-template-areas:
      "check main    main"
      ".     amount  actions";
    row-gap: 8px;
  }
  .pd-cn-v2-check { grid-area: check; }
  .pd-cn-v2-row-main { grid-area: main; min-width: 0; }
  .pd-cn-v2-row-header { flex-wrap: wrap; }
  .pd-cn-v2-row-amount { grid-area: amount; white-space: nowrap; }
  /* The amount keeps its natural width; the actions take what's left and wrap
     onto a further line rather than run into it (Pending/Rejected have two
     text buttons, longer in Dutch). */
  .pd-cn-v2-row-actions {
    grid-area: actions;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px 12px;
    min-width: 0;
  }

  /* Bulk bar: the count and up to three buttons don't fit one line; wrap them. */
  .pd-cn-v2-bulk-bar { flex-wrap: wrap; gap: 8px 12px; }
  .pd-cn-v2-bulk-bar .btn { white-space: nowrap; }
}

/* V2 inline pill on invoice rows */
.pd-invoice-number-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pd-cn-v2-inline-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: none;
  cursor: pointer;
}
.pd-cn-v2-inline-pill--pending { background: #fef7e6; color: #8a5a1a; }
.pd-cn-v2-inline-pill--approved { background: #e8f9ee; color: #0a7a57; }
.pd-cn-v2-inline-pill--rejected { background: #fef0f1; color: #b32d3a; }

/* Invoice card CN section */
.pd-cn-v2-invoice-card-section { padding-top: 8px; border-top: 1px solid #e5e5ea; margin-top: 10px; }
.pd-cn-v2-request-btn { width: 100%; }
.pd-cn-v2-status-link {
  display: block;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none;
}
.pd-cn-v2-status-link--pending { background: #fef7e6; color: #8a5a1a; }
.pd-cn-v2-status-link--approved { background: #e8f9ee; color: #0a7a57; }
.pd-cn-v2-status-link--rejected { background: #fef0f1; color: #b32d3a; }

/* Request modal success state */
.pd-cn-v2-success { text-align: center; padding: 14px; }
.pd-cn-v2-success-check {
  display: inline-block;
  width: 40px; height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: #e8f9ee;
  color: #0a7a57;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* Cancel modal targets */
.pd-cn-v2-cancel-targets {
  background: #f5f5f7;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  margin: 10px 0;
}
.pd-cn-v2-cancel-target {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  border-bottom: 1px solid #e5e5ea;
}
.pd-cn-v2-cancel-target:last-child { border-bottom: none; }
.pd-cn-v2-cancel-more { font-size: 11px; color: #6e6e73; padding-top: 6px; }

/* Chat system cards (§19) */
.cn-chat-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 8px 0;
  font-size: 12px;
}
.cn-chat-card--clickable {
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.cn-chat-card--clickable:hover {
  filter: brightness(0.96);
}
.cn-chat-card--clickable:active {
  transform: translateY(1px);
}
.cn-chat-card--requested { background: #fef7e6; border-left: 4px solid #e5b75a; color: #8a5a1a; }
.cn-chat-card--issued { background: #e8f9ee; border-left: 4px solid #0a7a57; color: #0a7a57; }
.cn-chat-card--rejected { background: #fef0f1; border-left: 4px solid #b32d3a; color: #b32d3a; }
.cn-chat-card--cancelled { background: #e5e5ea; border-left: 4px solid #8e8e93; color: #6e6e73; }
.cn-chat-card--voided { background: #fff; border: 2px dashed #b32d3a; color: #b32d3a; }
.cn-chat-card-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(0,0,0,0.08);
}
.cn-chat-card-body { line-height: 1.5; }
.cn-chat-card-meta { font-size: 11px; margin-top: 4px; }
.cn-chat-card-quote {
  border-left: 2px solid currentColor;
  padding-left: 8px;
  margin-top: 4px;
  font-style: italic;
  font-size: 11px;
}
.cn-chat-card-time { font-size: 10px; color: #6e6e73; white-space: nowrap; }

/* Old .cn-export-* classes removed — accounting now lives in the meta
   column via .cn-accounting-section. */

/* Guest portal V2 CN request */
.portal-cn-v2-guest {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #e5e5ea;
}
.portal-cn-v2-request-btn {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid #d1d1d6;
  border-radius: 6px;
  font-size: 13px;
  color: #1d1d1f;
  cursor: pointer;
}
.portal-cn-v2-request-btn:hover { background: #f5f5f7; }
.portal-cn-v2-status {
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.5;
}
.portal-cn-v2-status--pending { background: #fef7e6; color: #8a5a1a; }
.portal-cn-v2-status--approved { background: #e8f9ee; color: #0a7a57; }
.portal-cn-v2-status--rejected { background: #fef0f1; color: #b32d3a; }
.portal-cn-v2-status--cancelled { background: #e5e5ea; color: #6e6e73; }
.portal-cn-v2-guest-cancel { margin-top: 8px; }
.portal-cn-v2-guest-cancel textarea {
  width: 100%;
  padding: 6px;
  font-size: 12px;
  border: 1px solid #d1d1d6;
  border-radius: 4px;
  margin-bottom: 6px;
}
.portal-cn-v2-guest-cancel-btn {
  padding: 6px 12px;
  font-size: 11px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 4px;
  cursor: pointer;
}

/* Skeleton / loading states (§12) */
.cn-skeleton-row {
  height: 48px;
  background: linear-gradient(90deg, #f0f0f2 0%, #e5e5ea 50%, #f0f0f2 100%);
  background-size: 200% 100%;
  animation: cn-shimmer 1.2s infinite linear;
  border-radius: 6px;
  margin-bottom: 8px;
}
@keyframes cn-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cn-skeleton-row {
    animation: none;
    background: #f0f0f2;
  }
}

/* Eligible invoices date column */
.cn-eligible-date { color: #6e6e73; font-size: 11px; margin-left: 8px; }
.cn-eligible-section { margin-bottom: 24px; }
.cn-eligible-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #6e6e73;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.cn-eligible-footer { margin-top: 16px; text-align: center; font-size: 12px; }

/* Results modals */
.cn-results-warn {
  background: #fef7e6;
  border-left: 4px solid #e5b75a;
  padding: 10px 14px;
  color: #8a5a1a;
  font-size: 12px;
  border-radius: 4px;
  margin: 10px 0;
}

/* Sidebar red-dot for CN unread activity (§18.5) */
.pd-nav-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b32d3a;
  margin-left: 6px;
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .pd-nav-dot { box-shadow: none; }
}

/* Chevron indicator on eligible invoice rows (§5.2) */
.cn-eligible-chevron {
  display: inline-block;
  margin-left: 8px;
  color: #8e8e93;
  font-size: 18px;
  line-height: 1;
}

/* Sort button in table headers (§5.1) */
.cn-sort-btn {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
  text-transform: inherit;
  letter-spacing: inherit;
}
.cn-sort-btn:hover { color: #1d1d1f; }

/* Show page badge (§5.4) */
.cn-show-badge {
  display: inline-block;
  background: #e8f9ee;
  color: #0a7a57;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cn-show-preview { position: relative; }
.cn-show-preview-iframe {
  width: 100%;
  /* Tall enough to show ~one full A4 page; browser PDF viewer paginates
     the rest with native arrow controls. */
  min-height: 720px;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  background: #fafafa;
}
.cn-show-preview-pending {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  border: 1px solid #e5e5ea;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-tertiary);
  pointer-events: none;
}

/* Freelancer sidebar red-dot visibility (§18.5) */
.nav-notification-dot--visible {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b32d3a;
  margin-left: 6px;
  flex-shrink: 0;
}

/* V2 template-modals render conditionally via HEEx <%= if ... %>, so when
   they exist in the DOM they should already be visible. The base .template-modal
   rule sets display: none; this override brings them back to display: flex for
   every V2 modal id. Spec: §9. */
[id^="cn-v2-"].template-modal,
#cn-success-modal.template-modal {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* CP-90: the client-portal CN request + cancel modals use a SOLID overlay
   (var(--bg-page)) like every other portal popup (.portal-settings-overlay),
   not the shared .template-modal's rgba(0,0,0,.6) scrim -- dark-mode rule:
   solid backgrounds, no transparency. Scoped to the two portal ids so the
   freelancer-app template-modals are untouched. */
#cn-v2-request-modal.template-modal,
#cn-v2-cancel-modal.template-modal {
  background: var(--bg-page);
}

/* System error banner (§11.3) */
.cn-system-error-banner {
  padding: 12px 16px;
  margin: 16px auto;
  max-width: 1200px;
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  border-radius: 6px;
  color: #7f1d1d;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cn-system-error-banner button {
  background: transparent;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  padding: 0 6px;
}
.cn-system-error-banner button:focus {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Bulk progress bar (§12, §29) */
.cn-bulk-progress {
  padding: 12px 16px;
  margin: 12px 0;
  background: #f0f7ff;
  border-left: 3px solid #1e3a5f;
  border-radius: 4px;
}
.cn-bulk-progress p {
  margin: 0 0 6px 0;
  color: #1e3a5f;
  font-weight: 500;
}
.cn-bulk-progress-bar {
  height: 8px;
  background: #e5e5ea;
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0 0 0;
}
.cn-bulk-progress-fill {
  height: 100%;
  background: #0a7a57;
  transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cn-bulk-progress-fill { transition: none; }
}
.cn-results-warn {
  color: #a83218 !important;
  font-size: 0.9em;
  margin-top: 4px !important;
}

/* =====================================================================
   PHASE 6.6 #9: Portal landing page (PortalLive.Landing at /portal)
   Conversion-focused marketing landing for anonymous visitors.
   Authenticated portal accounts are redirected to /dashboard before
   ever seeing this stylesheet branch.
   ===================================================================== */

.portal-landing {
  min-height: 100vh;
  background: #ffffff;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Hero ---------------------------------------------------------------- */
.portal-landing-hero {
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 50%, #8bb8e8 100%);
  color: #ffffff;
  padding: 64px 24px 80px;
  text-align: center;
}
.portal-landing-hero-content {
  max-width: 720px;
  margin: 0 auto;
}
.portal-landing-logo {
  height: 38px;
  width: auto;
  margin-bottom: 32px;
  filter: brightness(0) invert(1);
}
.portal-landing-hero-title {
  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #ffffff;
}
.portal-landing-hero-subtitle {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 32px;
}
.portal-landing-signup-form {
  display: flex;
  gap: 8px;
  max-width: 480px;
  margin: 0 auto 12px;
  align-items: stretch;
}
.portal-landing-signup-input {
  flex: 1;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: #ffffff;
  color: #1d1d1f;
  outline: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.portal-landing-signup-input:focus {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 0 3px rgba(77, 179, 165, 0.5);
}
.portal-landing-signup-btn {
  padding: 14px 24px;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  background: var(--accent-teal, #4db3a5);
  color: #ffffff;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.portal-landing-signup-btn:hover {
  background: #3ea596;
}
.portal-landing-signup-error {
  font-size: 13px;
  color: #ffd6d6;
  background: rgba(220, 38, 38, 0.25);
  padding: 8px 14px;
  border-radius: 6px;
  display: inline-block;
  margin: 4px auto 8px;
  cursor: pointer;
}
.portal-landing-hero-secondary {
  margin-top: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.portal-landing-secondary-link {
  color: rgba(255, 255, 255, 0.95);
  text-decoration: underline;
}
.portal-landing-secondary-link:hover {
  color: #ffffff;
}
.portal-landing-secondary-sep {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.45);
}
.portal-landing-secondary-hint {
  color: rgba(255, 255, 255, 0.75);
}
.portal-landing-trust-strip {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.portal-landing-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}
.portal-landing-trust-item svg {
  fill: rgba(255, 255, 255, 0.85);
}

/* Shared section styles ----------------------------------------------- */
.portal-landing-section-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-align: center;
  margin: 0 0 40px;
  color: #1d1d1f;
}

/* How it works (3-col) ------------------------------------------------ */
.portal-landing-howit {
  max-width: 1040px;
  margin: 0 auto;
  padding: 72px 24px;
}
.portal-landing-howit-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.portal-landing-howit-col {
  text-align: center;
  padding: 8px;
}
.portal-landing-howit-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1e3a5f;
  font-size: 18px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.portal-landing-howit-step {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #1d1d1f;
}
.portal-landing-howit-text {
  font-size: 14px;
  line-height: 1.55;
  color: #6e6e73;
  margin: 0;
}

/* Feature grid (shared marketing features) ---------------------------- */
.portal-landing-features {
  background: #f5f7fa;
  padding: 72px 24px;
}
.portal-marketing-features {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.portal-marketing-feature {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.portal-marketing-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e3f2fd;
  color: #1e3a5f;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.portal-marketing-feature-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.portal-marketing-feature-text strong {
  font-size: 15px;
  font-weight: 600;
  color: #1d1d1f;
}
.portal-marketing-feature-text span {
  font-size: 13px;
  color: #6e6e73;
  line-height: 1.5;
}

/* Privacy block ------------------------------------------------------- */
.portal-landing-privacy {
  max-width: 720px;
  margin: 0 auto;
  padding: 72px 24px;
  text-align: center;
}
.portal-landing-privacy-icon {
  margin-bottom: 20px;
  color: var(--accent-teal, #4db3a5);
}
.portal-landing-privacy-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 16px;
  color: #1d1d1f;
}
.portal-landing-privacy-body {
  font-size: 15px;
  line-height: 1.6;
  color: #1d1d1f;
  margin: 0 auto 12px;
  max-width: 580px;
}
.portal-landing-privacy-body--muted {
  color: #6e6e73;
  font-size: 14px;
}
.portal-landing-privacy-links {
  margin-top: 20px;
  font-size: 13px;
  color: #6e6e73;
}
.portal-landing-privacy-links a {
  color: #1e3a5f;
  text-decoration: underline;
}
.portal-landing-privacy-links span {
  margin: 0 6px;
  color: #c7c7cc;
}

/* FAQ (accordion) ----------------------------------------------------- */
.portal-landing-faq {
  background: #f5f7fa;
  padding: 72px 24px;
}
.portal-landing-faq-list {
  max-width: 720px;
  margin: 0 auto;
}
.portal-landing-faq-item {
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.portal-landing-faq-item summary {
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #1d1d1f;
  list-style: none;
}
.portal-landing-faq-item summary::-webkit-details-marker {
  display: none;
}
.portal-landing-faq-item summary::after {
  content: "+";
  float: right;
  font-size: 20px;
  font-weight: 400;
  color: #8e8e93;
  line-height: 1;
}
.portal-landing-faq-item[open] summary::after {
  content: "−";
}
.portal-landing-faq-item p {
  padding: 0 20px 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6e6e73;
}
.portal-landing-faq-more {
  text-align: center;
  margin-top: 28px;
}
.portal-landing-faq-more-link {
  color: #1e3a5f;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.portal-landing-faq-more-link:hover {
  text-decoration: underline;
}

/* Footer CTA repeat --------------------------------------------------- */
.portal-landing-footer-cta {
  background: #1e3a5f;
  color: #ffffff;
  padding: 64px 24px;
  text-align: center;
}
.portal-landing-footer-cta-title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: #ffffff;
}
.portal-landing-footer-cta-subtitle {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 32px;
}
.portal-landing-footer-cta .portal-landing-signup-form {
  margin-bottom: 0;
}

/* Footer -------------------------------------------------------------- */
.portal-landing-footer {
  background: #0f1f3a;
  color: rgba(255, 255, 255, 0.65);
  padding: 32px 24px;
  text-align: center;
}
.portal-landing-footer-row a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.portal-landing-footer-row a:hover {
  color: #ffffff;
}
.portal-landing-footer-row span {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.3);
}
.portal-landing-footer-tagline {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

/* Responsive ---------------------------------------------------------- */
@media (max-width: 768px) {
  .portal-landing-hero {
    padding: 48px 20px 64px;
  }
  .portal-landing-hero-title {
    font-size: 28px;
  }
  .portal-landing-signup-form {
    flex-direction: column;
  }
  .portal-landing-howit-cols {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .portal-marketing-features {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   NOTIFICATION BELL - freelancer sidebar (#682)
   Rebuilds the CSS deleted by FA-7 (#588), after the owner reversed the
   delete decision to FINISH (#34, 2026-07-16).

   Design system compliance:
     - EXISTING role tokens only. Zero hardcoded hex, zero literal rgba(),
       zero opacity. (The deleted original shipped rgba unread rows + #eb0a44,
       and the sibling .nav-messages-badge still hardcodes #ef4444/#ffffff --
       its GEOMETRY is copied below, its colours deliberately are not.)
     - Solid backgrounds only: read row = --bg-primary, unread = --bg-secondary,
       hover = --bg-tertiary.
     - box-shadow references var(--shadow-lg); the rgba lives inside the token,
       not in this block.
   ========================================================================== */

/* Wrapper - 2nd child of .sidebar-header-toggle, which is
   `display:flex; justify-content:space-between` with 2 children today
   (theme left, demo right). A 3rd child would re-spread them and drift the
   demo toggle to the centre. margin-right:auto absorbs the free space before
   justify-content can, preserving the existing layout exactly:
   [theme][10px][bell] .......... [demo]. No edit to the shared rule needed. */
.notif-bell {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 10px;
    margin-right: auto;
}

/* 36x36 circle to match the sibling .sidebar-theme-toggle */
.notif-bell__btn {
    position: relative;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.notif-bell__btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.notif-bell__btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-primary);
    transform: scale(1.05);
}

.notif-bell__btn:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.notif-bell__btn[aria-expanded="true"] {
    background: var(--bg-tertiary);
    border-color: var(--border-secondary);
    color: var(--text-primary);
}

/* Badge. Geometry copied from .nav-messages-badge; colours migrated to tokens
   by ROLE: --accent-primary is the brand attention colour, and --bg-primary is
   the surface it sits against, so it is the correct auto-theming inverse
   foreground (white on #eb0a44 in light, near-black on #ff375f in dark).

   `display: inline-flex` IS the shown value: the server renders
   style="display: none;" inline and the hook SHOWS it by clearing the inline
   style (style.display = ""), exactly like messages.js. NEVER add a
   `display: none` rule for this class or the reveal silently breaks. */
.notif-bell__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--accent-primary);
    color: var(--bg-primary);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* Portal bell (#684): blue accent instead of the freelancer teal. Tokens only
   (--cat-blue is defined + auto-themed in :root light/dark). The badge keeps its
   --bg-primary inverse foreground, which stays legible on the blue. */
.notif-bell--portal .notif-bell__badge {
    background: var(--cat-blue);
}
.notif-bell__panel--portal .notif-bell__mark-all,
.notif-bell__panel--portal .notif-bell__view-all {
    color: var(--cat-blue);
}

/* Dropdown panel. position:fixed resolves against the viewport ONLY because the
   markup places this outside <aside class="sidebar"> -- the sidebar is
   transformed at <=768px, which would otherwise make it the containing block.
   top/left are set by the hook from getBoundingClientRect().
   z-index 200 matches .avatar-dropdown, which lives in the same sidebar and
   works today; modals (10000+) still cover it. */
.notif-bell__panel {
    position: fixed;
    width: 380px;
    max-height: 540px;
    flex-direction: column;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 200;
}

.notif-bell__header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-primary);
}

.notif-bell__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

/* --text-primary, not --text-link: the teal token is 2.53:1 on white and fails
   AA as text. */
.notif-bell__mark-all {
    border: none;
    background: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.notif-bell__mark-all:hover {
    background: var(--bg-secondary);
}

.notif-bell__mark-all:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

/* Scrollable list. Scrollbar mirrors .template-horizontal-scroll, whose
   hardcoded #d2d2d7 thumb IS --border-primary (light) -- exact by value AND role. */
.notif-bell__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) var(--bg-secondary);
}

.notif-bell__list::-webkit-scrollbar {
    width: 8px;
}

.notif-bell__list::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.notif-bell__list::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: 4px;
}

.notif-bell__list::-webkit-scrollbar-thumb:hover {
    background: var(--border-secondary);
}

.notif-bell__list-ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Rows. Read rows carry a transparent 3px left border so the unread bar causes
   no horizontal shift (13px padding + 3px border = 16px either way). */
.notif-bell__item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 12px 14px 12px 13px;
    background: var(--bg-primary);
    border-left: 3px solid transparent;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    transition: background 0.15s ease;
}

.notif-bell__item:last-child {
    border-bottom: none;
}

.notif-bell__item:hover {
    background: var(--bg-tertiary);
}

/* Unread is signalled three redundant ways -- solid background, left bar, and
   title weight. Never colour alone. */
.notif-bell__item.is-unread {
    background: var(--bg-secondary);
    border-left-color: var(--accent-primary);
}

.notif-bell__item.is-unread:hover {
    background: var(--bg-tertiary);
}

.notif-bell__item.is-unread .notif-bell__item-title {
    font-weight: 600;
}

/* Type icon. Decorative + redundant (aria-hidden; the title carries the
   meaning), so the tint pairs are exempt from the 3:1 non-text rule. */
.notif-bell__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

.notif-bell__icon svg {
    width: 15px;
    height: 15px;
}

.notif-bell__icon--success {
    background: var(--success-bg);
    color: var(--success-text);
}

.notif-bell__icon--error {
    background: var(--error-bg);
    color: var(--error-text);
}

.notif-bell__icon--warning {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.notif-bell__icon--info {
    background: var(--info-bg);
    color: var(--info-text);
}

.notif-bell__icon--neutral {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
}

/* Content. Hierarchy is weight/size, NOT colour: light-mode --text-secondary
   (#6e6e73) is 5.07:1 on --bg-primary and can never be AAA, so title + body use
   --text-primary (16.83:1 light / 15.63:1 dark). Only the timestamp uses
   --text-secondary, matching the rest of the app. */
.notif-bell__content {
    flex: 1 1 auto;
    min-width: 0;
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.notif-bell__content:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
    border-radius: 4px;
}

.notif-bell__item-title {
    display: block;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--text-primary);
}

.notif-bell__item-text {
    display: block;
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.notif-bell__item-time {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--text-secondary);
}

/* Per-item Dismiss. visibility (not opacity) to honour the no-opacity rule.
   focus-within keeps it keyboard-reachable. */
.notif-bell__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 2px;
    visibility: hidden;
}

.notif-bell__item:hover .notif-bell__actions,
.notif-bell__item:focus-within .notif-bell__actions {
    visibility: visible;
}

.notif-bell__action {
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.15s ease, color 0.15s ease;
}

.notif-bell__action svg {
    width: 14px;
    height: 14px;
}

.notif-bell__action:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}
/* Delete is the destructive action -- red on hover (#686). Archive stays neutral. */
.notif-bell__action--danger:hover {
    background: var(--error-bg);
    color: var(--error-text);
}

.notif-bell__action:focus-visible {
    visibility: visible;
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

/* Touch devices have no hover - keep the action permanently visible. */
@media (hover: none) {
    .notif-bell__actions {
        visibility: visible;
    }
}

/* Empty state - mirrors .empty-state, scaled to the panel */
.notif-bell__empty {
    padding: 44px 24px;
    text-align: center;
}

.notif-bell__empty-title {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.notif-bell__empty-text {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* Footer - "See all" links to /notifications */
.notif-bell__footer {
    flex-shrink: 0;
    padding: 8px;
    border-top: 1px solid var(--border-primary);
}

.notif-bell__view-all {
    display: block;
    width: 100%;
    padding: 9px;
    border: none;
    background: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
}

.notif-bell__view-all:hover {
    background: var(--bg-secondary);
}

.notif-bell__view-all:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: -2px;
}

/* ----- /notifications demo surface (HARD RULE 1: demo === live) -----
   The page LV reads the DB, which has no rows in demo mode. #notifPageDemo is
   rendered unconditionally (no `if demo_mode` in Elixir) and the JS hook fills
   it from the localStorage store in demo mode only. While it is non-empty the
   server-rendered list is hidden; in live mode it stays :empty and the server
   list shows. */
.notif-bell__panel-inline {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
}

.notif-page:has(#notifPageDemo:not(:empty)) .notif-page-list {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .notif-bell__btn,
    .notif-bell__item,
    .notif-bell__action,
    .notif-bell__view-all,
    .notif-bell__mark-all {
        transition: none;
    }

    .notif-bell__btn:hover {
        transform: none;
    }
}

@media (max-width: 420px) {
    .notif-bell__panel {
        width: calc(100vw - 24px);
        max-width: 380px;
    }
}

/* =========================================================================
   E1c — Expense Review Inbox (Back Office > Bookkeeping > Documents).
   Faithful port of Tibby_Expense_Review_Inbox_Mockup.html using the app's
   design TOKENS (never the mockup's literal hex). Backgrounds are solid
   neutral surfaces; colour lives in text / icon / border. Magenta (=
   --accent-primary) is the only CTA fill; teal is the single accent.
   Namespaced `.exp-` so nothing collides with the app's generic classes.
   ========================================================================= */
/* The Shoebox is a viewport-height workspace with a standard product page-header on top
   (exp-page-header). The page owns the fixed height; the workspace flexes to fill the
   space left under the header, so the two panes keep scrolling internally.
   #1099: heights read --exp-vh, which is 100dvh (the screen that is really visible on
   a phone, browser bars excluded) where supported and 100vh otherwise; it is set in an
   @supports block so older browsers keep a valid vh height (a dvh inside var() would
   leave them with none). App chrome that takes height away from the page is read from
   --app-top-bar-h / --app-bottom-bar-h, defaulting to today's values (no bars on desktop;
   the 56px mobile header below 768px), so a later bottom tab bar only has to set the
   variable. The 64px is main-content's own padding. */
.exp-page {
    display: flex;
    flex-direction: column;
    height: calc(var(--exp-vh, 100vh) - 64px - var(--app-top-bar-h, 0px) - var(--app-bottom-bar-h, 0px));
    min-height: 580px;
}
:root { --exp-vh: 100vh; }
@supports (height: 100dvh) {
    :root { --exp-vh: 100dvh; }
}
.exp-page-header {
    flex: 0 0 auto;
    margin-bottom: 12px;
}
.exp-inbox {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    overflow: hidden;
    font-size: 14px;
    color: var(--text-primary);
}

/* Tab shell */
.exp-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-primary);
    flex: 0 0 auto;
}
.exp-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
    padding: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: -1px;
}
.exp-tab:hover { color: var(--text-primary); }
.exp-tab--active { color: var(--text-primary); border-bottom-color: var(--accent-teal); }
.exp-tab--disabled { color: var(--text-muted); cursor: not-allowed; }
.exp-tab--disabled:hover { color: var(--text-muted); }
.exp-tab-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 1px 7px;
    min-width: 20px;
    text-align: center;
}
.exp-tab--active .exp-tab-count { background: var(--bg-tertiary); color: var(--accent-teal); }
/* Tab tooltips (owner IA 2026-08-27): a short hover DELAY so they never pop instantly, and a
   subtle divider setting "The Shoebox" (work) apart from the outcome piles. */
.exp-tab-wrap { position: relative; display: inline-flex; }
.exp-tab-div { width: 1px; height: 18px; background: var(--border-primary); margin: 0 9px; align-self: center; flex: 0 0 auto; }
.exp-tab-tip {
    position: absolute; top: calc(100% + 3px); left: 10px;
    width: 240px; background: var(--bg-tertiary); border: 1px solid var(--border-secondary);
    border-radius: 10px; padding: 10px 12px; font-size: 12px; font-weight: 400; line-height: 1.5;
    color: var(--text-secondary); box-shadow: 0 10px 30px rgba(0,0,0,0.45); z-index: 30;
    opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none;
    transition: opacity 0.14s ease 0.35s, visibility 0s linear 0.49s, transform 0.14s ease 0.35s;
}
.exp-tab-wrap:hover .exp-tab-tip {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.14s ease 0.35s, transform 0.14s ease 0.35s;
}
/* Rightmost tab: anchor its tooltip to the right so it never clips off the inbox edge. */
.exp-tab-tip--right { left: auto; right: 0; }

/* Two-pane body */
.exp-main { display: flex; flex: 1; min-height: 0; }

/* Left rail */
.exp-rail {
    flex: 0 0 360px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-primary);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.exp-rail-head { padding: 14px 16px 12px; border-bottom: 1px solid var(--border-primary); }
.exp-rail-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.exp-rail-title-wrap { min-width: 0; }
.exp-rail-title { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary); }
/* The Shoebox tagline (Chapter W) — Mission-Control-style line under the title. */
.exp-rail-tagline { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.4; }
/* E1a - the "+ Add receipt" capture door. Magenta CTA (--accent-primary), tokens only. */
.exp-add {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    padding: 8px 13px; border: none; border-radius: 8px;
    background: var(--accent-primary); color: #ffffff;
    font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.exp-add:hover { filter: brightness(1.08); }
.exp-add svg { width: 15px; height: 15px; }
.exp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-chip {
    font-size: 12px;
    font-family: inherit;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid transparent;
    cursor: pointer;
}
.exp-chip:hover { color: var(--text-primary); }
.exp-chip--active { color: var(--accent-teal); border-color: var(--accent-teal); }
.exp-chip--failed.exp-chip--active { color: var(--error-text); border-color: var(--error-text); }
.exp-chip-n { margin-left: 5px; font-weight: 600; }
.exp-chip--failed .exp-chip-n { color: var(--error-text); }

/* Missing receipts (Shoebox Phase 2 / E6) — the always-present amber-dot nudge chip. */
.exp-chip--missing { border-color: var(--warning-border); }
.exp-chip--missing.exp-chip--active { color: var(--warning-text); border-color: var(--warning-text); }
.exp-chip-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--warning-text); margin-right: 6px; vertical-align: middle; }
.exp-chip--missing .exp-chip-n { color: var(--warning-text); }
/* Missing-receipts list rows (bank lines with no receipt). */
.exp-missing-intro { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; padding: 8px 2px 14px; }
.exp-missing-row { display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 10px; }
.exp-missing-row + .exp-missing-row { border-top: 1px solid var(--border-secondary); }
.exp-missing-main { flex: 1; min-width: 0; }
.exp-missing-desc { font-size: 14px; font-weight: 600; }
.exp-missing-meta { font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }
.exp-missing-acts { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.exp-missing-add { border: 1px solid var(--border-primary); background: var(--bg-primary); color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.exp-missing-add:hover { background: var(--bg-secondary); }
.exp-missing-alt { border: 1px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; padding: 7px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.exp-missing-alt:hover, .exp-missing-alt:focus-visible { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-primary); outline: none; }
/* Tibby suggested action (Tier-1/2) — teal outline; you still tap to confirm. */
.exp-missing-alt--sug { border: 1px solid var(--accent-teal); color: var(--accent-teal); padding: 6px 8px; }
.exp-missing-alt--sug:hover { background: var(--bg-secondary); color: var(--accent-teal); }

/* Missing-receipts: one action + its conventional circled-ⓘ tooltip (hover the ⓘ, NOT the button). */
.exp-missing-act { position: relative; display: inline-block; }
/* Circled-ⓘ pinned to the TOP-RIGHT corner of its action word (not inline like a divider). */
.exp-info-wrap--corner { position: absolute; top: -7px; right: -5px; }
.exp-info-wrap { position: relative; display: inline-flex; }
/* The glyph is text, so it answers to the 7:1 standard: --text-muted measured
   4.66:1 on this surface in light mode and failed it. The ring is a non-text
   boundary at 3:1, and --border-primary measured 1.23:1 dark and 1.38:1 light
   -- all but invisible in both. Now --text-primary (12.8:1 dark, 15.46:1
   light) and --text-muted (7.69:1 dark, 4.66:1 light) respectively (#1212). */
.exp-info { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--text-muted); color: var(--text-primary); font-size: 10.5px; font-weight: 700; font-style: italic; font-family: Georgia, "Times New Roman", serif; display: inline-flex; align-items: center; justify-content: center; cursor: help; user-select: none; }
.exp-info:hover, .exp-info:focus-visible { border-color: var(--accent-teal); color: var(--accent-teal); outline: none; }
.exp-tip-pop { position: absolute; bottom: calc(100% + 9px); right: -6px; width: 260px; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); border-radius: 10px; padding: 11px 13px; font-size: 12px; font-weight: 400; line-height: 1.5; color: var(--text-secondary); text-align: left; white-space: normal; box-shadow: 0 10px 30px rgba(0,0,0,0.45); z-index: 20; opacity: 0; visibility: hidden; transition: opacity 0.12s ease; }
.exp-info-wrap:hover .exp-tip-pop, .exp-info:focus-visible + .exp-tip-pop { opacity: 1; visibility: visible; }
.exp-tip-pop::after { content: ""; position: absolute; top: 100%; right: 9px; border: 6px solid transparent; border-top-color: var(--bg-tertiary); }

/* Tibby suggestion chip on a missing charge (recognise-or-silent). */
.exp-missing-sug { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--accent-teal); }
.exp-missing-sug-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-teal); flex: 0 0 auto; }
.exp-missing-foot { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; padding: 14px 4px 4px; }
.exp-missing-foot-check { color: var(--success-text); font-weight: 700; flex: 0 0 auto; }
.exp-missing-foot-text { color: var(--text-secondary); }
.exp-missing-foot-text b { color: var(--text-primary); font-weight: 600; }

/* ── Missing-receipts full-screen SHEET + Unresolved tab (owner redesign 2026-08-26) ──
   The sheet opens from the "Missing receipts (N)" CTA (a bank charge has no document, so it
   can't live in the split rail). Solid opaque bg per the app's overlay convention; sits BELOW
   the nested Receipt-lost sub-modal (.exp-confirm, z 1200). */
.exp-msheet-scrim { position: fixed; inset: 0; background: var(--bg-page); display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; z-index: 1100; overflow-y: auto; }
.exp-msheet { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 16px; width: min(760px, 100%); display: flex; flex-direction: column; max-height: calc(100vh - 80px); overflow: hidden; }
.exp-msheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 24px 16px; border-bottom: 1px solid var(--border-primary); }
.exp-msheet-title { font-size: 19px; font-weight: 700; margin: 0; }
.exp-msheet-lead { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 6px 0 0; max-width: 62ch; }
/* Close = the house circular chip (matches .exp-sheet-x / .modal-close-btn), not a bare glyph. */
.exp-msheet-x { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-secondary); border: 1px solid var(--border-primary); color: var(--text-primary); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.12s ease; }
.exp-msheet-x:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.exp-msheet-body { padding: 8px 20px 18px; overflow-y: auto; }

/* A bank-charge row + its five actions — shared by the Missing sheet and the Unresolved tab. */
.exp-charge { display: flex; align-items: center; gap: 16px; padding: 16px 4px; }
.exp-charge + .exp-charge { border-top: 1px solid var(--border-secondary); }
.exp-charge-main { flex: 1; min-width: 0; }
.exp-charge-desc { font-size: 14px; font-weight: 600; }
.exp-charge-meta { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
/* #1212: "submitted without a VAT number" on a filed row, under the meta line
   with its Undo beside it. Wraps rather than squeezing the row on a phone. */
.exp-charge-vatnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.exp-charge-tag { display: inline-block; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 7px; margin-left: 6px; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); color: var(--text-secondary); }
.exp-charge-acts { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
/* Add receipt = the encouraged path, in the product's positive accent (teal on a neutral
   solid), not the off-brand inverted black/white pill. */
.exp-charge-add { border: 1px solid var(--accent-teal); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, border-color 0.12s ease; }
.exp-charge-add:hover { background: var(--bg-secondary); border-color: var(--accent-teal-hover); }
/* "Decide later" — a deliberate defer (teal dashed), never a shrug. */
/* Decide later keeps its provisional dashed look, toned to neutral so it doesn't compete
   with the teal "Add receipt". */
.exp-missing-alt--defer { border: 1px dashed var(--text-muted); color: var(--text-secondary); padding: 6px 10px; }
.exp-missing-alt--defer:hover { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--text-muted); }

/* ── Corner ⓘ badge + its rich tooltip (RichTip hook) ─────────────────────────
   The badge is pinned to a button's top-right corner and is the ONLY hover target, so the
   explanation never fires when the user reaches to click the button. The tooltip is a single
   fixed-layer node the hook appends to <body>, so it escapes the sheet's overflow clipping. */
.exp-act { position: relative; display: inline-flex; }
.exp-ibadge {
  position: absolute; top: -7px; right: -6px; z-index: 3;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-secondary); border: 1px solid var(--border-secondary);
  color: var(--text-muted); font: italic 700 10.5px/1 Georgia, "Times New Roman", serif;
  display: flex; align-items: center; justify-content: center; cursor: help; user-select: none;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.exp-ibadge:hover, .exp-ibadge:focus-visible { color: var(--accent-teal); border-color: var(--accent-teal); outline: none; }
.exp-rtip {
  /* z 1150: above the missing sheet (1100), below the receipt-lost / category sub-modals
     (1200) so a lingering tip can never paint over a sub-modal. Still fixed-layer on <body>,
     so it escapes the sheet's overflow clipping. */
  position: fixed; z-index: 1150; width: 264px; box-sizing: border-box;
  background: var(--bg-tertiary); border: 1px solid var(--border-secondary); border-radius: 10px;
  padding: 11px 13px; box-shadow: 0 12px 34px rgba(0,0,0,0.55);
  opacity: 0; visibility: hidden; pointer-events: none; text-align: left;
  transition: opacity 0.14s ease;
}
.exp-rtip.is-open { opacity: 1; visibility: visible; }
.exp-rtip strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 4px; }
.exp-rtip span { display: block; font-size: 12px; font-weight: 400; color: var(--text-secondary); line-height: 1.5; }

/* Receipt-lost sub-modal: Book as a normal cost (with tooltip) / Archive. */
.exp-rl-card { width: min(470px, 100%); }
.exp-rl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.exp-rl-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.exp-rl-choice { display: flex; align-items: flex-start; gap: 10px; }
/* Higher-contrast choice cards: a lifted surface, readable subtitle, teal on hover/focus. */
.exp-rl-btn { flex: 1; text-align: left; border: 1px solid var(--border-secondary); background: var(--bg-tertiary); border-radius: 10px; padding: 13px 15px; cursor: pointer; font: inherit; transition: border-color 0.12s ease, background 0.12s ease; }
.exp-rl-btn:hover, .exp-rl-btn:focus-visible { border-color: var(--accent-teal); background: var(--bg-secondary); outline: none; }
.exp-rl-btn b { display: block; font-size: 14.5px; color: var(--text-primary); }
.exp-rl-btn span { display: block; font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }

/* Unresolved tab body (the "Decide later" doubt pile). */
.exp-unresolved { padding: 14px 16px 24px; overflow-y: auto; flex: 1; }
/* Archive tab sort + filter bar. */
.exp-arch-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 4px 8px; }
.exp-arch-search { margin-top: 0; flex: 1 1 200px; min-width: 180px; }
.exp-arch-range { display: inline-flex; align-items: center; gap: 8px; }
.exp-arch-date { margin-top: 0; width: 118px; min-height: 32px; }
.exp-arch-dash { color: var(--text-tertiary); }
.exp-arch-cats { display: flex; gap: 6px; flex-wrap: wrap; padding: 2px 4px 12px; }

/* ── Submit flow (2026-08-31): first-run setup banner, confirm-modal destination + nudge +
   send-to-accountant, Archive restore. Links styled as buttons need block + no underline. ── */
a.exp-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* First-run SETUP GATE: a focused card on a dimmed screen (the thin banner was invisible on
   the busy inbox). Dismissible; returns until a destination is configured. */
.exp-setup-gate-scrim { position: fixed; inset: 0; z-index: 1090; background: var(--overlay-bg); display: flex; align-items: center; justify-content: center; padding: 24px; }
.exp-setup-gate { background: var(--bg-primary); border: 1px solid var(--border-secondary); border-radius: 16px; width: min(430px, 100%); padding: 30px 28px 26px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,0.6); }
.exp-setup-gate-ic { width: 56px; height: 56px; border-radius: 16px; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); color: var(--accent-teal); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.exp-setup-gate-ic svg { width: 28px; height: 28px; }
.exp-setup-gate-t { font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin: 0 0 9px; color: var(--text-primary); }
.exp-setup-gate-b { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 auto 22px; max-width: 34ch; }
.exp-setup-gate-btn { font-size: 14.5px; padding: 12px 22px; }
.exp-setup-gate-later { display: block; width: 100%; margin-top: 14px; background: none; border: none; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.exp-setup-gate-later:hover { color: var(--text-secondary); }
.exp-setup-gate-note { font-size: 11.5px; color: var(--text-muted); margin-top: 18px; line-height: 1.5; }

/* Confirm modal: left-aligned, no top icon */
.exp-submit-card { text-align: left; }
.exp-submit-card .exp-confirm-title { text-align: left; }
.exp-submit-dest { display: flex; gap: 11px; align-items: flex-start; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 11px; padding: 12px 13px; margin: 10px 0 14px; }
.exp-submit-dest-ic { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); color: var(--accent-teal); display: flex; align-items: center; justify-content: center; font-size: 15px; }
.exp-submit-dest-main { min-width: 0; }
.exp-submit-dest-t { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.exp-submit-dest-s { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.exp-submit-link { color: var(--accent-teal); text-decoration: underline; text-underline-offset: 2px; }
.exp-submit-link:hover { color: var(--accent-teal-hover); }
.exp-submit-nudge { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 14px; }
.exp-submit-nudge-i { flex: 0 0 auto; width: 17px; height: 17px; border-radius: 50%; border: 1px solid var(--border-secondary); color: var(--accent-teal); font: italic 700 10.5px/1 Georgia, "Times New Roman", serif; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.exp-submit-accng { margin: 0; }
.exp-submit-accng-lbl { font-size: 13px; color: var(--text-primary); line-height: 1.5; }
.exp-submit-accng-body { margin: 7px 0 14px; padding-left: 29px; }
.exp-submit-accng-email { font-size: 12px; color: var(--text-muted); }
.exp-submit-accng-input { width: 100%; box-sizing: border-box; background: var(--bg-secondary); border: 1px solid var(--border-secondary); border-radius: 8px; padding: 8px 11px; color: var(--text-primary); font: inherit; font-size: 13px; margin-top: 2px; }
.exp-submit-accng-input::placeholder { color: var(--text-placeholder); }
.exp-submit-accng-input:focus { outline: none; border-color: var(--border-focus); }

/* Archive row: read-only status + a Restore button */
.exp-arch-acts { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.exp-restore-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--bg-secondary); border: 1px solid var(--border-primary); color: var(--text-secondary); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.exp-restore-btn:hover, .exp-restore-btn:focus-visible { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-primary); outline: none; }
.exp-restore-btn svg { width: 13px; height: 13px; }
/* "Matched to your bank" reassurance line on the panel (Shoebox Phase 2 / E6). */
.exp-bank-match { display: flex; align-items: center; gap: 8px; margin: 14px 22px 4px; padding: 9px 12px; border-radius: 10px; background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); font-size: 13px; font-weight: 600; }
.exp-bank-match svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ── No bank match (reconciliation feedback) ──────────────────────────────────
   A receipt Tibby couldn't pair with a bank charge. Info-blue, never red — it's
   feedback, not an error; the receipt still submits fine. Neutral solid surfaces
   + --info-* accents (no colour-tint fills). Dormant unless a feed is connected. */
/* The "No bank match" filter chip (mirrors .exp-chip--missing's neutral-chip + accent-border) */
.exp-chip--nomatch { border-color: var(--info-border); }
.exp-chip--nomatch.exp-chip--active { color: var(--info-text); border-color: var(--info-text); }
.exp-chip--nomatch .exp-chip-n { color: var(--info-text); }
.exp-chip-lk { width: 13px; height: 13px; margin-right: 5px; color: var(--info-text); vertical-align: middle; }
/* The small row flag on a Ready receipt */
.exp-row-nbm { display: inline-flex; align-items: center; gap: 4px; color: var(--info-text); font-size: 11px; font-weight: 600; }
.exp-row-nbm svg { width: 12px; height: 12px; flex: 0 0 auto; }
/* The flat "No bank match" list's lead line */
.exp-nbm-lead { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; padding: 6px 12px 12px; }
/* The panel prompt card */
.exp-nbm { margin: 12px 22px 4px; padding: 14px 15px; border-radius: 12px; background: var(--bg-secondary); border: 1px solid var(--info-border); }
.exp-nbm-head { display: flex; align-items: flex-start; gap: 10px; }
.exp-nbm-ic { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); color: var(--info-text); display: flex; align-items: center; justify-content: center; }
.exp-nbm-ic svg { width: 16px; height: 16px; }
.exp-nbm-t { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.exp-nbm-s { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
.exp-nbm-opts { display: flex; gap: 9px; margin-top: 14px; flex-wrap: wrap; }
.exp-nbm-opt { flex: 1; min-width: 150px; text-align: left; background: var(--bg-tertiary); border: 1px solid var(--border-secondary); border-radius: 10px; padding: 11px 12px; cursor: pointer; font: inherit; display: block; transition: border-color 0.12s ease; }
.exp-nbm-opt:hover, .exp-nbm-opt:focus-visible { border-color: var(--info-border); outline: none; }
.exp-nbm-opt-t { display: block; font-size: 13px; font-weight: 700; color: var(--text-primary); }
.exp-nbm-opt-s { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 4px; line-height: 1.45; }
.exp-nbm-skip { margin-top: 12px; font-size: 11.5px; color: var(--text-muted); line-height: 1.5; }
/* "Waiting to match" (business answered, charge not landed yet) */
.exp-nbm--wait { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-secondary); }
.exp-nbm--wait b { color: var(--text-primary); }
.exp-nbm--wait svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--info-text); }
/* Private follow-up: recorded + accountant defer note + the two exits */
.exp-nbm--priv .exp-nbm-ic { color: var(--warning-text); }
.exp-nbm-note { margin-top: 12px; font-size: 11.5px; color: var(--text-secondary); background: var(--bg-tertiary); border-left: 3px solid var(--warning-border); border-radius: 8px; padding: 9px 11px; line-height: 1.5; }
.exp-nbm-actions { display: flex; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.exp-nbm-go { border: 1px solid var(--accent-teal); background: var(--bg-tertiary); color: var(--text-primary); font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: background 0.12s ease, border-color 0.12s ease; }
.exp-nbm-go:hover { background: var(--bg-secondary); border-color: var(--accent-teal-hover); }
.exp-nbm-hold { border: 1px solid transparent; background: transparent; color: var(--text-secondary); font: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 8px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; }
.exp-nbm-hold:hover, .exp-nbm-hold:focus-visible { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border-primary); outline: none; }
/* Unresolved category switch (Receipts / Bank charges) — the CANONICAL teal-fill toggle,
   matching the product's Rates switcher (teal-fill active + readable dark text). */
.exp-subtabs { display: inline-flex; gap: 4px; padding: 6px; margin: 4px 0 2px; background: var(--bg-primary); border-radius: 12px; }
.exp-subtab { font: inherit; font-size: 14px; font-weight: 600; color: var(--text-secondary); background: transparent; border: none; border-radius: 8px; padding: 10px 20px; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease; }
.exp-subtab:hover:not(.exp-subtab--on) { color: var(--text-primary); }
.exp-subtab--on { background: var(--accent-teal); color: var(--on-accent-teal); }
.exp-subtab-n { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-left: 6px; }
.exp-subtab--on .exp-subtab-n { color: var(--on-accent-teal); }
.exp-cat-why { font-size: 13px; font-weight: 500; color: var(--text-secondary); margin: 14px 2px 11px; }
.exp-cat-divider { height: 1px; background: var(--border-secondary); margin: 0 0 2px; }
.exp-sec-empty { padding: 8px 12px 18px; font-size: 12.5px; color: var(--text-muted); }
.exp-charge-tag--priv { border-color: var(--warning-border); color: var(--warning-text); }

/* Contenteditable search (never <input>) */
.exp-search {
    margin-top: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 8px 11px;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.4;
    min-height: 34px;
    outline: none;
}
.exp-search:focus { border-color: var(--accent-teal); }
.exp-search:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

/* List + rows */
.exp-list { overflow-y: auto; flex: 1; padding: 6px; }
.exp-row {
    width: 100%;
    display: flex;
    gap: 11px;
    padding: 11px 12px;
    border: none;
    background: none;
    border-radius: 8px;
    cursor: pointer;
    align-items: flex-start;
    text-align: left;
    font-family: inherit;
    color: var(--text-primary);
    position: relative;
}
.exp-row:hover { background: var(--bg-secondary); }
.exp-row--sel { background: var(--bg-secondary); box-shadow: inset 3px 0 0 var(--accent-teal); }
.exp-row--needs { box-shadow: inset 3px 0 0 var(--warning-text); }
.exp-row--needs.exp-row--sel { box-shadow: inset 3px 0 0 var(--warning-text); }
.exp-row--unread .exp-row-supplier::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 7px;
    border-radius: 50%;
    background: var(--accent-teal);
    vertical-align: middle;
}
.exp-thumb { flex: 0 0 38px; height: 46px; }
.exp-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; border: 1px solid var(--border-primary); }
.exp-thumb-svg { display: block; width: 100%; height: 100%; }
.exp-row-body { flex: 1; min-width: 0; display: block; }
.exp-row-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.exp-row-supplier {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-row-amt {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-primary);
    white-space: nowrap;
}
.exp-row-sub { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.exp-row-date { color: var(--text-muted); font-size: 11px; }

/* Status pill — neutral surface, dot + text carry severity */
.exp-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--bg-tertiary);
    white-space: nowrap;
}
.exp-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

/* Flag chips */
.exp-flags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.exp-flag {
    font-size: 11px;
    font-weight: 600;
    color: var(--warning-text);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 999px;
    padding: 2px 8px;
}

/* Empty states */
.exp-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; gap: 6px; }
.exp-empty--rail { padding: 32px 18px; }
.exp-empty-title { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.exp-empty-sub { font-size: 12px; color: var(--text-muted); line-height: 1.5; max-width: 32ch; }

/* ── Reassurance band (Shoebox rail): most of the pile is already filed ───── */
.exp-band { margin-top: 12px; padding: 11px 12px; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 10px; }
.exp-band-lead { font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.exp-band-lead b { color: var(--text-primary); font-weight: 700; }
.exp-bar { display: flex; height: 7px; border-radius: 999px; overflow: hidden; margin: 9px 0 8px; background: var(--bg-tertiary); }
.exp-bar-seg { height: 100%; }
.exp-bar-seg--filed { background: var(--success-text); }
.exp-bar-seg--quick { background: var(--accent-teal); }
.exp-bar-seg--need { background: var(--warning-text); }
.exp-legend { display: flex; gap: 14px; }
.exp-legend-k { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); }
.exp-legend-k b { color: var(--text-secondary); font-weight: 700; }
.exp-legend-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.exp-legend-dot--filed { background: var(--success-text); }
.exp-legend-dot--quick { background: var(--accent-teal); }
.exp-legend-dot--need { background: var(--warning-text); }

/* ── Rail section headers (Needs you / Quick confirm) ─────────────────────── */
.exp-sec { display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px; }
.exp-sec-mk { width: 3px; height: 13px; border-radius: 2px; flex: 0 0 auto; }
.exp-sec--need .exp-sec-mk { background: var(--warning-text); }
.exp-sec--quick .exp-sec-mk { background: var(--accent-teal); }
.exp-sec-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.exp-sec--need .exp-sec-t { color: var(--warning-text); }
.exp-sec--quick .exp-sec-t { color: var(--accent-teal); }
.exp-sec-n { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.exp-sec-why { font-size: 11px; color: var(--text-muted); margin-left: auto; }

/* ── Selection toolbar (tick receipts, then bulk-submit; no popup) ────────── */
.exp-selbar { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px; }
.exp-selall { display: inline-flex; align-items: center; gap: 8px; border: none; background: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-secondary); cursor: pointer; padding: 4px; }
.exp-selall:hover { color: var(--text-primary); }
.exp-selall .exp-check-box { width: 16px; height: 16px; }
.exp-selall--on .exp-check-box { border-color: var(--accent-teal); background: var(--accent-teal); }
.exp-selall--on .exp-check-box::after { content: ''; position: absolute; top: 1px; left: 5px; width: 4px; height: 8px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.exp-selbar-sp { flex: 1; }
.exp-sel-clear { border: none; background: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; padding: 4px 8px; }
.exp-sel-clear:hover { color: var(--text-secondary); }
.exp-submit-sel { display: inline-flex; align-items: center; gap: 6px; border: none; border-radius: 8px; background: var(--accent-primary); color: #ffffff; font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; padding: 8px 14px; }
.exp-submit-sel:hover { filter: brightness(1.08); }
.exp-submit-sel svg { width: 14px; height: 14px; }

/* ── Row wrapper + selection checkbox (sibling of the row, never nested) ──── */
.exp-row-wrap { display: flex; align-items: stretch; }
.exp-row-wrap > .exp-row { flex: 1; min-width: 0; }
.exp-row-wrap--on > .exp-row { background: var(--bg-secondary); }
.exp-check { flex: 0 0 auto; align-self: center; padding: 0 2px 0 8px; border: none; background: none; cursor: pointer; display: inline-flex; align-items: center; }
.exp-check-box { width: 18px; height: 18px; border: 1px solid var(--border-primary); border-radius: 5px; background: var(--bg-primary); position: relative; display: inline-block; transition: background 0.15s ease, border-color 0.15s ease; }
.exp-check:hover .exp-check-box { border-color: var(--accent-teal); }
.exp-check--on .exp-check-box { border-color: var(--accent-teal); background: var(--accent-teal); }
.exp-check--on .exp-check-box::after { content: ''; position: absolute; top: 2px; left: 6px; width: 4px; height: 9px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* ── Category on a Ready row (what Tibby filed it as — the "glance" info) ──── */
.exp-row-cat { font-size: 11px; font-weight: 600; color: var(--accent-teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Bulk confirmation line (inline, no toast) ───────────────────────────── */
.exp-bulk-status { display: flex; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 9px 12px; border-radius: 9px; background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); font-size: 12.5px; font-weight: 600; }
.exp-bulk-status svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ── Filed (collapsible "N filed automatically") ─────────────────────────── */
.exp-filed-head { display: flex; align-items: center; gap: 9px; margin: 12px 0 4px; padding: 10px 12px; border-radius: 9px; background: var(--bg-secondary); border: 1px solid var(--border-primary); cursor: pointer; }
.exp-filed-head:hover { border-color: var(--border-secondary); }
.exp-filed-ic { display: inline-flex; color: var(--success-text); flex: 0 0 auto; }
.exp-filed-ic svg { width: 16px; height: 16px; }
.exp-filed-lbl { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text-secondary); }
.exp-filed-lbl b { color: var(--text-primary); font-weight: 700; }
.exp-filed-chev { color: var(--text-muted); display: inline-flex; flex: 0 0 auto; transition: transform 0.15s ease; }
.exp-filed-chev svg { width: 16px; height: 16px; }
.exp-filed-head--open .exp-filed-chev { transform: rotate(180deg); }
.exp-filed-body { padding-top: 2px; }
.exp-filed-more { font-size: 11px; color: var(--text-muted); padding: 6px 12px 10px; }

/* ── Rail footer: where confirmed documents go ───────────────────────────── */
.exp-foot { border-top: 1px solid var(--border-primary); padding: 11px 14px; background: var(--bg-primary); flex: 0 0 auto; }
.exp-foot-line { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); }
.exp-foot-line b { color: var(--text-primary); font-weight: 700; }
.exp-foot-ic { color: var(--success-text); display: inline-flex; flex: 0 0 auto; margin-top: 1px; }
.exp-foot-ic svg { width: 15px; height: 15px; }
.exp-foot-acts { margin-top: 7px; }
.exp-foot-link { font-size: 12px; font-weight: 600; color: var(--accent-teal); background: none; border: none; padding: 0; cursor: pointer; text-decoration: none; }
.exp-foot-link:hover { text-decoration: underline; }

/* Right panel */
.exp-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-page); }
.exp-panel-head {
    padding: 11px 20px;
    border-bottom: 1px solid var(--border-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-primary);
    flex: 0 0 auto;
}
.exp-panel-title { font-size: 15px; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-doctype {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 9px;
    border-radius: 999px;
    flex: 0 0 auto;
}
.exp-del-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.exp-del-btn svg { width: 16px; height: 16px; }
.exp-del-btn:hover { background: var(--bg-tertiary); color: var(--error-text); border-color: var(--error-text); }

.exp-panel-body { flex: 1; display: flex; min-height: 0; }
.exp-receipt-col { flex: 0 0 36%; padding: 20px; overflow-y: auto; border-right: 1px solid var(--border-primary); position: relative; }
.exp-form-col { flex: 1; padding: 20px 22px; overflow-y: auto; }

/* Receipt facsimile (built from the read fields when there's no stored image) */
.exp-scan { max-width: 340px; margin: 0 auto; border: 1px solid var(--border-primary); border-radius: 10px; overflow: hidden; background: var(--bg-secondary); }
.exp-scan img { display: block; width: 100%; height: auto; }
/* A PDF receipt renders in a same-origin iframe (a browser can't show a PDF in an <img>). */
.exp-scan--pdf { max-width: 100%; }
.exp-pdf-frame { display: block; width: 100%; height: 460px; border: 0; background: var(--bg-primary); }
/* Demo-captured PDF: no persisted URL, so show a document glyph + note instead. */
.exp-scan--pdf-demo { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 0; }
.exp-scan--pdf-demo .exp-thumb-svg { width: 54px; height: auto; }
.exp-pdf-note { color: var(--text-muted); font-size: 12px; }
.exp-receipt {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-radius: 10px;
    padding: 18px 18px;
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 12px;
    line-height: 1.7;
    max-width: 320px;
    margin: 0 auto;
}
.exp-receipt-supplier { font-weight: 700; font-size: 14px; text-align: center; }
.exp-receipt-sub { text-align: center; color: var(--text-muted); font-size: 11px; }
.exp-receipt-rule { border-top: 1px dashed var(--border-secondary); margin: 8px 0; }
.exp-receipt-line { display: flex; justify-content: space-between; }
.exp-receipt-total b { color: var(--text-primary); }
.exp-receipt-date { text-align: center; color: var(--text-muted); margin-top: 4px; }
.exp-receipt-note { text-align: center; color: var(--text-muted); font-size: 11px; margin-top: 12px; line-height: 1.5; }

/* ---- Receipt inline preview + hover-magnifier ------------------------------ */
.exp-preview-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.exp-preview-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 8px;
    border: 1px solid var(--border-primary); background: var(--bg-secondary);
    color: var(--text-primary); font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.exp-preview-btn:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.exp-preview-btn svg { width: 15px; height: 15px; }

.exp-inline-stage {
    position: relative; overflow: auto; max-height: 62vh;
    border: 1px solid var(--border-primary); border-radius: 10px;
    background: var(--bg-secondary); cursor: crosshair;
}
.exp-mag-media { display: block; width: 100%; height: auto; }
.exp-mag-frame { display: block; width: 100%; height: 460px; border: 0; background: var(--bg-primary); }
.exp-inline-lens {
    display: none; position: absolute; width: 190px; height: 190px;
    border-radius: 50%; border: 2px solid var(--accent-teal);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5);
    pointer-events: none; background-repeat: no-repeat; z-index: 4;
}
.exp-inline-docph { padding: 44px 20px; text-align: center; color: var(--text-muted); font-size: 13px; }
.exp-inline-spinner { display: none; padding: 40px 0; text-align: center; color: var(--text-muted); font-size: 13px; }
.exp-inline--loading .exp-inline-spinner { display: block; }
.exp-inline-hint { text-align: center; color: var(--text-muted); font-size: 11px; margin-top: 8px; }
/* Caption + lens swap between the hover state and the pinned/frozen state. */
.exp-hint-pinned { display: none; }
.exp-inline--pinned .exp-hint-hover { display: none; }
.exp-inline--pinned .exp-hint-pinned { display: inline; color: var(--accent-teal); font-weight: 600; }
.exp-inline--pinned .exp-inline-lens { border-width: 3px; box-shadow: 0 0 0 3px var(--bg-secondary), 0 8px 28px rgba(0, 0, 0, 0.6); }

/* Fields */
.exp-field { margin-bottom: 16px; }
.exp-flabel {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.exp-flabel-hint { text-transform: none; letter-spacing: 0; color: var(--text-muted); font-weight: 400; }
.exp-cdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.exp-ctag { font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 4px; text-transform: none; letter-spacing: 0; background: var(--bg-tertiary); }
/* Clickable confidence tag. */
/* Clickable "Confirm" action: neutral bg + coloured text/border (amber = attention,
   red = low confidence) so it clearly reads as a button to press once checked. */
.exp-ctag--confirm {
    cursor: pointer; font-family: inherit;
    color: var(--warning-text); border: 1px solid var(--warning-text); background: var(--bg-tertiary);
}
.exp-ctag--confirm:hover { background: var(--bg-secondary); }
.exp-ctag--confirm:focus-visible { outline: 2px solid var(--accent-teal); outline-offset: 1px; }
.exp-ctag--confirm-low { color: var(--error-text); border-color: var(--error-text); }
/* Calmed state once the reviewer has confirmed the field. */
.exp-ctag--checked { color: var(--success-text); }
.exp-input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 9px 11px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}
.exp-input:focus { outline: none; border-color: var(--accent-teal); }
.exp-input--missing { border-color: var(--error-text); }
.exp-input--missing::placeholder { color: var(--error-text); }
/* A field the two reads disagreed on: amber border + a visible one-line hint below it
   telling the reviewer exactly what to check (never leave them to guess). */
.exp-input--check { border-color: var(--warning-text); }
.exp-fhint { margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--warning-text); }
.exp-row2 { display: flex; gap: 12px; }
.exp-row2 .exp-field { flex: 1; }

/* Segmented control (no native radios) */
.exp-seg { display: inline-flex; background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: 8px; padding: 3px; }
.exp-seg-btn {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
}
.exp-seg-on { background: var(--accent-teal); color: var(--on-accent-teal); }

/* Missing-VAT nudge (neutral surface, coloured border + icon; not an error) */
.exp-nudge {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--warning-border);
    border-radius: 8px;
    padding: 9px 11px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 7px;
    line-height: 1.5;
}
.exp-nudge-ic { width: 16px; height: 16px; color: var(--warning-text); flex: 0 0 auto; margin-top: 1px; }
/* #839 reclaim nudges — solid neutral bg (never a colour-tint fill); the border + icon
   carry the meaning. --warn = on hold, --ok = reclaimable small receipt, --muted = waived. */
.exp-nudge--ok { border-color: var(--success-border); }
.exp-nudge--ok .exp-nudge-ic { color: var(--success-text); }
.exp-nudge--muted { border-color: var(--border-primary); color: var(--text-muted); justify-content: space-between; align-items: center; }
.exp-nudge-body { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.exp-nudge-act {
    align-self: flex-start;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.exp-nudge-act:hover { border-color: var(--accent-teal); color: var(--accent-teal); }
.exp-nudge--muted .exp-nudge-act { padding: 2px 9px; }
/* "Needs attention" filter chip — warning accent when active (mirrors --failed). */
.exp-chip--attention.exp-chip--active { color: var(--warning-text); border-color: var(--warning-border); }
.exp-chip--attention .exp-chip-n { color: var(--warning-text); }

/* Per-rate VAT-line editor */
.exp-vat-head {
    display: flex;
    gap: 10px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted);
    padding: 0 4px 5px;
}
.exp-vat-col { flex: 1; text-align: right; }
.exp-vat-col-rate { flex: 0 0 62px; }
.exp-vat-col-rm { flex: 0 0 26px; }
.exp-vat-line { display: flex; gap: 10px; align-items: center; margin-bottom: 7px; }
.exp-vin {
    flex: 1;
    min-width: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 6px;
    padding: 7px 9px;
    color: var(--text-primary);
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 13px;
    text-align: right;
}
.exp-vin:focus { outline: none; border-color: var(--accent-teal); }
.exp-vin--rate { flex: 0 0 62px; }
.exp-vin--gross { background: transparent; border-color: transparent; color: var(--text-secondary); }
.exp-vat-remove {
    flex: 0 0 26px;
    height: 30px;
    border: 1px solid var(--border-primary);
    background: var(--bg-secondary);
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    font-family: inherit;
}
.exp-vat-remove:hover { border-color: var(--error-text); color: var(--error-text); }
.exp-vat-add {
    background: transparent;
    border: 1px dashed var(--border-secondary);
    color: var(--accent-teal);
    border-radius: 6px;
    padding: 6px 11px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin-top: 2px;
}
.exp-vat-add:hover { border-color: var(--accent-teal); }

/* Live arithmetic indicator (neutral surface, coloured left border + icon) */
.exp-arith {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    font-size: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    line-height: 1.5;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-left-width: 3px;
    color: var(--text-secondary);
}
.exp-arith-ic { flex: 0 0 auto; font-weight: 700; }
.exp-arith--ok { border-left-color: var(--success-border); }
.exp-arith--ok .exp-arith-ic { color: var(--success-text); }
/* Failing arithmetic is a BLOCKING state (it stops Confirm & post), so it reads RED
   (error role), not amber — amber is reserved for the non-blocking supplier-VAT nudge. */
.exp-arith--bad { border-left-color: var(--error-border); }
.exp-arith--bad .exp-arith-ic { color: var(--error-text); }

/* Category trigger */
.exp-cat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 8px 11px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
}
.exp-cat-btn:hover { border-color: var(--accent-teal); }
.exp-cat-lbl { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.exp-cat-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.exp-cat-lbl-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.exp-cat-chev { color: var(--text-muted); font-size: 12px; font-weight: 600; }

/* Custom select (never native <select>) */
.exp-select { position: relative; }
.exp-select-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 9px 11px;
    cursor: pointer;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    text-align: left;
}
.exp-select-btn:hover, .exp-select-btn--open { border-color: var(--accent-teal); }
.exp-select-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-select-chev { width: 15px; height: 15px; color: var(--text-secondary); flex: 0 0 auto; transition: transform .12s; }
.exp-select-btn--open .exp-select-chev { transform: rotate(180deg); }
.exp-select-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 30;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 4px;
    max-height: 240px;
    overflow-y: auto;
}
.exp-select-option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 9px 11px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    border-radius: 6px;
}
.exp-select-option:hover { background: var(--bg-secondary); }
.exp-select-option--selected { color: var(--accent-teal); font-weight: 600; }

/* Deductibility badge (read-only) */
.exp-deduct { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; padding: 4px 0; }
.exp-deduct-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.exp-deduct-note { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }

/* Pre-filled-from-rule hint */
.exp-prefill { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* Actions */
.exp-error { font-size: 13px; color: var(--error-text); font-weight: 600; margin-top: 14px; line-height: 1.5; }
.exp-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border-primary);
}
.exp-btn { border: none; border-radius: 8px; padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; }
.exp-btn--primary { background: var(--accent-primary); color: #ffffff; }
.exp-btn--primary:hover { filter: brightness(1.08); }
.exp-btn--ghost { background: var(--bg-secondary); color: var(--text-secondary); }
.exp-btn--ghost:hover { background: var(--bg-tertiary); }
.exp-btn--danger { background: var(--error-text); color: #ffffff; }
.exp-btn--danger:hover { filter: brightness(1.08); }
.exp-saved { color: var(--success-text); font-size: 13px; font-weight: 600; }
.exp-hint { margin-left: auto; color: var(--text-muted); font-size: 12px; }

/* Keyboard bar */
.exp-kbar {
    flex: 0 0 auto;
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 8px 20px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    font-size: 12px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.exp-kbar b { color: var(--text-secondary); font-weight: 500; }
.exp-kbar-tag { margin-left: auto; color: var(--accent-teal); }

/* Submit bar (Shoebox Phase 4): the workflow-endpoint strip that sits above the footer
   when documents are ready to submit. The button always names the destination. */
.exp-submitbar {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.exp-submitbar-tx b { color: var(--text-primary); font-weight: 600; }
.exp-submitbar-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    font-weight: 600;
    cursor: help;
}
.exp-submitbar-note { color: var(--success-text); font-size: 12px; }
.exp-submitbar-spacer { margin-left: auto; }
.exp-kbd {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 11px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: 5px;
    padding: 1px 6px;
    color: var(--text-secondary);
}

/* Category picker sheet + delete confirm — solid opaque overlays */
.exp-picker, .exp-confirm {
    position: fixed;
    inset: 0;
    background: var(--bg-page);
    display: flex;
    z-index: 1200;
}
.exp-picker { align-items: flex-start; justify-content: center; padding: 34px 20px 0; }
.exp-confirm { align-items: center; justify-content: center; padding: 24px; }
.exp-sheet {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    width: min(560px, 100%);
    max-height: calc(100vh - 34px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.exp-sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-primary); }
.exp-sheet-x {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-primary);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 17px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
}
.exp-sheet-x:hover { background: var(--bg-tertiary); }
.exp-sheet-title { font-size: 16px; font-weight: 700; flex: 1; text-align: center; margin-right: 34px; }
.exp-sheet-search {
    margin: 12px 18px 4px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 8px 11px;
    color: var(--text-primary);
    font-size: 13px;
    min-height: 34px;
    outline: none;
}
.exp-sheet-search:focus { border-color: var(--accent-teal); }
.exp-sheet-search:empty::before { content: attr(data-placeholder); color: var(--text-muted); pointer-events: none; }
.exp-sheet-scroll { overflow-y: auto; padding-bottom: 8px; }
.exp-cat-add {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    text-align: left;
    padding: 13px 18px;
    background: none;
    border: none;
    color: var(--accent-teal);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    font-family: inherit;
}
.exp-cat-add:hover { background: var(--bg-secondary); }
.exp-cat-add-plus {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent-teal);
    color: var(--bg-page);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex: 0 0 auto;
}
.exp-cat-row {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    text-align: left;
    padding: 11px 18px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: var(--text-primary);
}
.exp-cat-row:hover { background: var(--bg-secondary); }
.exp-cat-row + .exp-cat-row { border-top: 1px solid var(--border-primary); }
/* Saturated solid circle + WHITE icon (att1 pattern) — never a colour-tint fill. The
   category's own saturated colour is the circle background, set inline. */
.exp-cat-ic { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.exp-cat-ic svg { width: 20px; height: 20px; color: #ffffff; }
.exp-cat-nm { flex: 1; font-size: 15px; }
.exp-cat-check { color: var(--accent-teal); font-size: 16px; font-weight: 700; visibility: hidden; }
.exp-cat-row--on .exp-cat-check { visibility: visible; }

.exp-confirm-card { background: var(--bg-primary); border: 1px solid var(--border-primary); border-radius: 12px; width: min(440px, 100%); padding: 24px; }
.exp-confirm-ic { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-tertiary); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.exp-confirm-ic svg { width: 22px; height: 22px; }
.exp-confirm-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.exp-confirm-body { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.exp-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }

/* ── Inline destination picker (W.3.5) ─────────────────────────────────────── */
.exp-picker-card { width: min(520px, 100%); text-align: left; }
.exp-picker-sub { font-size: 12.5px; color: var(--text-muted); margin: 2px 0 16px; }
.exp-picker-opt { display: flex; gap: 11px; width: 100%; text-align: left; align-items: flex-start; padding: 13px 14px; border: 1px solid var(--border-primary); border-radius: 10px; background: var(--bg-primary); cursor: pointer; font-family: inherit; margin-bottom: 10px; }
.exp-picker-opt:hover { border-color: var(--border-secondary); }
.exp-picker-opt--on { border-color: var(--accent-teal); }
.exp-picker-radio { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-primary); margin-top: 1px; position: relative; }
.exp-picker-opt--on .exp-picker-radio { border-color: var(--accent-teal); }
.exp-picker-opt--on .exp-picker-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent-teal); }
.exp-picker-opt-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.exp-picker-opt-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.exp-picker-opt-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.exp-picker-softwrap { margin: -4px 0 12px; padding: 0 2px; }
.exp-picker-softlist { display: flex; flex-wrap: wrap; gap: 6px; }
.exp-picker-soft { font-size: 12.5px; font-weight: 600; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--border-primary); background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; font-family: inherit; }
.exp-picker-soft:hover { color: var(--text-primary); }
.exp-picker-soft--on { border-color: var(--accent-teal); color: var(--accent-teal); background: var(--bg-primary); }
.exp-picker-emailwrap { margin: -4px 0 12px; }
.exp-picker-email { width: 100%; padding: 9px 12px; border: 1px solid var(--border-primary); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 13px; font-family: inherit; }
.exp-picker-email:focus { outline: none; border-color: var(--accent-teal); }
.exp-picker-remember { margin: 6px 0 18px; padding: 12px; border-radius: 9px; background: var(--bg-secondary); }
.exp-picker-download { border: none; background: none; color: var(--text-secondary); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: underline; }
.exp-picker-download:hover { color: var(--text-primary); }

/* First-time VAT-rules modal (EU-27): the "Don't show this again" row sits between the
   body copy and the Got-it action. Slightly wider card for the explanatory copy. */
.exp-vatmodal { width: min(480px, 100%); }
.exp-vatmodal-note { font-size: 12px; color: var(--text-tertiary); line-height: 1.55; margin: 0 0 18px; }
.exp-vatmodal-check { margin: -6px 0 18px; }

/* Responsive: phones + upright tablets (#1099). ONE upright layout: the stacked,
   one-receipt-at-a-time layout, used up to 900px wide and on any tablet held upright up
   to 1032px (13" iPad portrait; the coming bottom-bar breakpoint). Sideways tablets and
   computers keep the desktop workspace. In it the desktop viewport-height lock is
   released, so the PAGE scrolls (main-content is the scroller) and nothing is clipped:
   the panes drop their inner scrollers and the inbox clips with `overflow: clip` (not
   `hidden`, which would trap position:sticky).
   - The scroller itself is sized with dvh (Mission Control pattern, #992/#997), so its
     bottom edge - and the sticky bar on it - is the visible bottom of the screen, above
     a phone browser's toolbar (checked on the iOS 26 Safari simulator, whose floating
     toolbar sits below 100dvh).
   - The error line + action row (Confirm & post / Save draft / Save changes) sit in one
     wrapper, .exp-actionbar, sticky to the bottom of the screen while the form is in
     view: Confirm is always reachable and its error shows right above it. A sticky box
     stops at the scroller's padding, so the scroller's bottom padding is fixed at 16px
     here and the bar sits at bottom: -16px: flush with the screen edge, no strip of
     form showing under it. It also pads by env(safe-area-inset-bottom), which is 0
     today and becomes the home-indicator inset once the layout opts into
     viewport-fit=cover (#1106).
   - scroll-padding-bottom keeps a keyboard-focused field clear of that bar, sized for
     its tallest form (a two-line error above the buttons) (WCAG 2.4.11).
   - Stacked: list on top in a bounded, scrollable window, the receipt and its fields
     below, wrapping tabs. Paired fields stack on a phone and sit side by side again
     once the inbox is >= 480px wide (container query; without container-query
     support they simply stay stacked).
   - On phones and upright tablets nothing SUBMITS; Confirm is the only action (Back
     Office Supervisor, #1099 A4 condition 3 + decisions a/b). The submit bar, the rail's
     selection controls (Select all, the per-row ticks, Clear, Submit N selected), the
     per-receipt "Tag & submit" and the held-charge Submit are hidden, and so are the
     copy leads that talk about ticking / submitting / filing. CSS only: handlers and
     copy are unchanged, and the computer keeps all of them. On touch screens the
     keyboard-only "Cmd+Enter to file" hint is hidden too.
   No row heights are fixed, so taller rows (e.g. future suggestion rows) just fit.
   Contract for a later bottom tab bar (#1106): set --app-bottom-bar-h; if that bar
   overlays the scroller instead of shrinking it, the bar's sticky `bottom` must add it. */
@media (max-width: 900px), (orientation: portrait) and (max-width: 1032px) {
    .main-content:has(.exp-page) {
        height: calc(var(--exp-vh, 100vh) - var(--app-top-bar-h, 0px) - var(--app-bottom-bar-h, 0px));
        padding-bottom: 16px;
        scroll-padding-bottom: 200px;
    }
    /* The height the page scroller really has: the screen minus the app's own bars. */
    .exp-page {
        --exp-view-h: calc(var(--exp-vh, 100vh) - var(--app-top-bar-h, 0px) - var(--app-bottom-bar-h, 0px));
        height: auto;
        min-height: 0;
        container: exp-shoebox / inline-size;
    }
    .exp-inbox { flex: 0 0 auto; height: auto; min-height: 0; overflow: clip; }
    .exp-tabs { flex-wrap: wrap; }
    .exp-main { flex: 0 0 auto; flex-direction: column; }
    .exp-rail { flex: 0 0 auto; min-height: 0; border-right: none; border-bottom: 1px solid var(--border-primary); }
    .exp-list { flex: 0 1 auto; max-height: calc(var(--exp-view-h) / 2); }
    .exp-panel { min-height: 0; }
    .exp-panel-body { flex: 0 0 auto; flex-direction: column; }
    .exp-receipt-col { flex: 0 0 auto; overflow: visible; border-right: none; border-bottom: 1px solid var(--border-primary); }
    .exp-form-col { flex: 0 0 auto; overflow: visible; }
    .exp-row2 { flex-direction: column; gap: 0; }
    .exp-row2 .exp-field { min-width: 0; }
    .exp-actionbar {
        position: sticky;
        bottom: -16px;
        z-index: 2;
        margin: 0 -22px;
        padding: 0 22px calc(14px + env(safe-area-inset-bottom, 0px));
        background: var(--bg-page);
    }
    .exp-actions { flex-wrap: wrap; }
    /* Nothing submits here (see above). */
    .exp-submitbar,
    .exp-selbar,
    .exp-check,
    .exp-nbm-go,
    button[phx-click="submit_held"],
    .exp-band-lead,
    .exp-sec--quick .exp-sec-why,
    .exp-setup-gate-b,
    .exp-tab-tip--right,
    .exp-arch-bar ~ .exp-missing-intro { display: none; }
    @media (pointer: coarse) {
        .exp-actions .exp-hint:has(.exp-kbd) { display: none; }
    }
}
@media (max-width: 768px) {
    /* Below 768px the scroller starts under the fixed 56px phone header. */
    .main-content:has(.exp-page) {
        height: calc(var(--exp-vh, 100vh) - var(--app-top-bar-h, 56px) - var(--app-bottom-bar-h, 0px));
    }
    .exp-page { --exp-view-h: calc(var(--exp-vh, 100vh) - var(--app-top-bar-h, 56px) - var(--app-bottom-bar-h, 0px)); }
}
@container exp-shoebox (min-width: 480px) {
    .exp-row2 { flex-direction: row; gap: 12px; }
}

/* E1a - Scan Receipt capture modal. The drop zone + camera affordance + the
   per-file preview list the ExpenseCapture hook appends. Tokens only (no hex);
   solid dark surfaces (never a colour-tint fill). */
.exp-capture { margin-top: 20px; }
.exp-capture-drop {
    border: 2px dashed var(--border-primary);
    border-radius: 12px;
    background: var(--bg-secondary);
    padding: 34px 20px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.exp-capture-drop:hover,
.exp-capture-drop:focus-visible {
    border-color: var(--accent-teal);
    outline: none;
}
.exp-capture-drop--over {
    border-color: var(--accent-teal);
    border-style: solid;
    background: var(--bg-tertiary);
}
.exp-capture-drop-ic { width: 40px; height: 40px; color: var(--accent-teal); margin: 0 auto 10px; display: block; }
.exp-capture-drop-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.exp-capture-drop-sub { font-size: 13px; color: var(--text-secondary); margin-top: 5px; }

.exp-capture-camera {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 9px 16px;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.exp-capture-camera:hover { border-color: var(--accent-teal); }
.exp-capture-camera svg { width: 18px; height: 18px; color: var(--accent-teal); }
/* "Take a photo" opens the device camera -- only meaningful on phones/tablets. Hide it
   on a mouse-driven desktop/laptop (fine pointer + hover), show it on touch devices. */
@media (hover: hover) and (pointer: fine) {
    .exp-capture-camera { display: none; }
}

/* Running "N receipts added to your inbox" tally (A' upload flow). */
.exp-capture-count { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--success-text); }
.exp-capture-count:empty { display: none; }

.exp-capture-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.exp-capture-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-secondary);
    border-radius: 10px;
    background: var(--bg-secondary);
}
.exp-capture-thumb {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 6px;
    background-color: var(--bg-tertiary);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
/* A document glyph for PDFs / pre-load (drawn with a token-coloured mark, no image). */
.exp-capture-thumb--doc::after {
    content: "";
    position: absolute;
    inset: 11px 13px;
    border: 2px solid var(--text-muted);
    border-radius: 2px;
    border-top-width: 6px;
}
.exp-capture-meta { flex: 1; min-width: 0; }
.exp-capture-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.exp-capture-status { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.exp-capture-item--done .exp-capture-status { color: var(--success-text); }
.exp-capture-item--error { border-color: var(--error-text); }
.exp-capture-item--error .exp-capture-status { color: var(--error-text); }

/* ==============================================================

   #1150 PHONE SCREENS: F1 Home, F2 invoices as cards, F3 invoice detail
   ---------------------------------------------------------------------
   Phone-only (<=768px). The Home also shows on upright tablets up to
   1032px (T1), as two CSS-grid columns over the same DOM. Everything is
   display:none on the computer, so desktop renders exactly as before.
   Today's tokens only (no new tokens, no hex, no tint fills): neutral
   solid backgrounds, colour carried by text + borders. Pink actions use
   var(--bg-primary) text on var(--accent-primary), per the design verdict.
   Room for the #1106 bottom bar via --app-bottom-bar-h (0 until it ships).
   All selectors are .ph-* / #phone* and do not touch the computer's
   classes (the draft #1097 tab-row CSS stays separate).
   ===================================================================== */
.ph-home,
.ph-detail,
.ph-inv {
    display: none;
}

/* ---- shared phone primitives ---- */
.ph-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 16px;
    padding: 16px;
    min-width: 0;
}

.ph-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.ph-eyebrow--section {
    margin: 4px 2px 8px;
}

.ph-money {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    margin: 6px 0 4px;
    overflow-wrap: anywhere;
}

.ph-money--xl {
    font-size: 36px;
}

.ph-sub,
.ph-row-sub {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
}

.ph-row-sub {
    display: block;
    font-size: 13px;
}

.ph-row-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.ph-num {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ph-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ph-grow {
    flex: 1;
    min-width: 0;
}

/* Status / timing chips: neutral background, coloured text + border. */
.ph-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.ph-chip--late {
    color: var(--error-text);
    border-color: var(--error-border);
}

.ph-chip--soon {
    color: var(--warning-text);
    border-color: var(--warning-border);
}

.ph-chip--ok {
    color: var(--success-text);
    border-color: var(--success-border);
}

/* Buttons: full width, 48px targets. */
.ph-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.ph-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ph-btn--primary,
.ph-home .btn.btn-critical.ph-btn {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.ph-btn--secondary,
.ph-home .btn.btn-secondary.ph-btn {
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

.ph-btn:disabled {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-color: var(--border-primary);
    cursor: not-allowed;
}

.ph-btn:focus-visible,
.ph-row:focus-visible,
.ph-act:focus-visible,
.ph-icon-btn:focus-visible,
.ph-menu-item:focus-visible,
.ph-back:focus-visible,
.ph-switch:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.ph-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.ph-icon-btn svg {
    width: 22px;
    height: 22px;
}

/* List rows (Home "Needs you" / "Expected next"). */
.ph-list {
    padding: 4px 16px;
}

.ph-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 0;
    color: inherit;
    text-decoration: none;
}

.ph-row + .ph-row {
    border-top: 1px solid var(--border-secondary);
}

.ph-row-end {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.ph-av,
.ph-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 700;
}

.ph-ico svg {
    width: 18px;
    height: 18px;
}

.ph-chev {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-secondary);
}

/* Inline results (no toasts). */
.ph-result {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
}

.ph-result--ok {
    color: var(--success-text);
}

.ph-result--skip {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Confirm sheets (reminders). Solid backdrop (no translucent scrim). */
.ph-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: var(--bg-page);
    z-index: 1200;
}

.ph-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1201;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    max-height: 92dvh;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-bottom: none;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}

.ph-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.ph-sheet-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.ph-sheet-note {
    margin: 4px 0 12px;
}

.ph-sheet-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex: 1;
    min-height: 0;
}

.ph-sheet-item {
    padding: 12px 0;
    border-top: 1px solid var(--border-secondary);
}

.ph-sheet-item-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.ph-sheet-actions {
    flex-shrink: 0;
    padding-top: 4px;
}

/* =========================== F1 HOME =========================== */
.ph-home-greet {
    display: flex;
    flex-direction: column;
    margin: 4px 2px 16px;
}

.ph-home-greet-small {
    font-size: 14px;
    color: var(--text-secondary);
}

.ph-home-greet-name {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
}

.ph-home-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

.ph-home-empty-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

/* The computer's Mission Control, the phone's Home. */
@media (max-width: 768px), (max-width: 1032px) and (orientation: portrait) {
    #missionControlSection > .ph-home {
        display: block;
        padding: 16px 0 calc(24px + var(--app-bottom-bar-h, 0px));
    }

    #missionControlSection > :not(.ph-home):not([phx-hook]):not([hidden]) {
        display: none !important;
    }
}

/* T1: upright tablet -- same DOM, two columns. */
@media (min-width: 769px) and (max-width: 1032px) and (orientation: portrait) {
    .ph-home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }
}

/* ========================= F3 DETAIL ========================== */
@media (max-width: 768px) {
    .content-container > .ph-detail {
        display: grid;
        gap: 16px;
        padding: 8px 0 calc(24px + var(--app-bottom-bar-h, 0px));
    }

    /* The computer's header + the two sidebar cards the phone section replaces.
       The preview, payments and client cards stay below. */
    .content-container > .ph-detail ~ .page-header,
    .invoice-show-sidebar > .invoice-show-card--details,
    .invoice-show-sidebar > .invoice-show-card--activity {
        display: none;
    }
}

.ph-detail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ph-back {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding-right: 8px;
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
}

.ph-back svg {
    width: 20px;
    height: 20px;
}

.ph-menu-wrap {
    position: relative;
}

.ph-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 50;
    min-width: 220px;
    max-width: calc(100vw - 32px);
    padding: 6px;
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
}

.ph-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.ph-menu-item:hover {
    background: var(--bg-secondary);
}

.ph-menu-item--danger {
    color: var(--error-text);
}

.ph-detail-head {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.ph-detail-actions .ph-btn:first-child {
    margin-top: 0;
}

.ph-acts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.ph-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 64px;
    padding: 10px 8px;
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ph-act svg {
    width: 20px;
    height: 20px;
}

.ph-switch {
    min-width: 64px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-secondary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.ph-switch--on {
    background: var(--accent-teal);
    border-color: var(--accent-teal);
    color: var(--on-accent-teal);
}

.ph-link-btn {
    min-height: 44px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-link);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.ph-auto .ph-row-sub {
    margin-top: 4px;
}

.ph-timeline {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    gap: 12px;
}

.ph-tl-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.ph-tl-dot {
    width: 10px;
    height: 10px;
    margin-top: 6px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 2px solid var(--text-secondary);
    background: var(--bg-primary);
}

.ph-tl-dot--ok {
    border-color: var(--success-text);
    background: var(--success-text);
}

.ph-tl-dot--late {
    border-color: var(--error-text);
    background: var(--error-text);
}

/* ===================== F2 INVOICES AS CARDS ===================== */
@media (max-width: 768px) {
    #invoicesListContainer > .ph-inv {
        display: block;
        padding-bottom: calc(24px + var(--app-bottom-bar-h, 0px));
    }

    /* The computer's sort box + sections; the phone shows cards instead. */
    #invoicesListContainer > :not(.ph-inv) {
        display: none !important;
    }

    /* The 9-tab row + filter panel; the phone has the chip row instead. Bulk
       actions and CSV export stay on the computer. */
    #invoicesListSection #invoiceTabsFiltersBar,
    #invoicesListSection #paidBulkHint {
        display: none !important;
    }

    /* The search field (contenteditable, Chrome-autofill rule) + the inline
       status lines wrap under the title instead of widening the page. */
    #invoicesListSection > .page-header {
        flex-wrap: wrap;
        min-width: 0;
    }

    #invoicesListSection > .page-header .page-header-actions {
        flex-wrap: wrap;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    #invoicesListSection > .page-header .invoice-search-box {
        flex: 1 1 100%;
        min-width: 0;
    }
}

/* Filter chips: one scrollable row (#993 pattern), 44px targets. */
.ph-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -16px 16px;
    padding: 2px 16px;
}

.ph-chips::-webkit-scrollbar {
    display: none;
}

.ph-fchip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.ph-fchip-n {
    color: var(--text-secondary);
    font-weight: 600;
}

.ph-fchip--on {
    background: var(--text-primary);
    border-color: var(--text-primary);
    color: var(--bg-primary);
}

.ph-fchip--on .ph-fchip-n {
    color: var(--bg-primary);
}

.ph-fchip:focus-visible,
.ph-inv-open:focus-visible,
.ph-inv-more:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.ph-inv-section + .ph-inv-section {
    margin-top: 20px;
}

.ph-inv-cards {
    list-style: none;
    margin: 0;
    padding: 4px 4px 4px 16px;
}

.ph-inv-card {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ph-inv-card + .ph-inv-card {
    border-top: 1px solid var(--border-secondary);
}

.ph-inv-open {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 10px 0;
    border: none;
    background: var(--bg-primary);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ph-inv-more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 12px;
    background: var(--bg-primary);
    color: var(--text-secondary);
    cursor: pointer;
}

.ph-inv-more svg {
    width: 20px;
    height: 20px;
}

.ph-inv-empty {
    margin: 8px 2px;
    color: var(--text-secondary);
}

.ph-inv-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 2px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.ph-inv-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

#phoneInvoiceSheet .ph-sheet-list {
    display: grid;
    gap: 2px;
    padding-top: 8px;
}

/* #1150/#1155: the invoice detail's Mark paid + Void confirm modals on a phone:
   the desktop 40px/80px padding left a ~200px-wide card at 360px. */
@media (max-width: 768px) {
    #markPaidConfirmModal,
    #voidInvoiceConfirmModal {
        padding: 16px;
    }
}

/* #1150: a dd-mm-yyyy date stays on one line (never breaks at its hyphens). */
.ph-nowrap {
    white-space: nowrap;
}
/* #1128: replaces Pay when nothing is owed. Paid: "Paid"; settled by credit
   notes: "Nothing left to pay". Reuses the paid check mark, small. */
.client-guest-card-settled {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 0;
  color: var(--success-text);
  font-weight: 600;
}

.thankyou-checkmark.thankyou-checkmark--sm {
  width: 28px;
  height: 28px;
  margin-bottom: 0;
}

.thankyou-checkmark.thankyou-checkmark--sm svg {
  width: 16px;
  height: 16px;
}