/*
 * 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;
    --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: 36px;
    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;
    background: #ef4444;
    color: #ffffff;
    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 {
    max-height: 200px;
}

.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: #66ccbe;
    color: #fff;
}
.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;
}

/* 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;
}

.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: #66ccbe;
    color: #ffffff;
    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);
}

.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 */
.form-input.error {
    border-color: #ff3b30;
}

.form-input.error:focus {
    border-color: #ff3b30;
    box-shadow: 0 0 0 4px rgba(255, 59, 48, 0.1);
}

.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: #ff3b30;
    font-size: 13px;
    margin-top: 6px;
}

.form-error.show {
    display: block;
}

.form-group.has-error .form-label {
    color: #ff3b30;
}

.form-error.visible {
    display: flex;
    align-items: center;
    gap: 6px;
}

.form-error svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.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(--accent-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);
}

/* 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: rgba(0, 0, 0, 0.05);
}

.hamburger-line {
    width: 22px;
    height: 2px;
    background: #1d1d1f;
    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);
}

.mobile-header-spacer {
    width: 40px;
}

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    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;
    }
}

/* ===== FAQs MODAL ===== */
.faqs-modal {
    max-width: 700px;
    padding: 0;
    display: flex;
    flex-direction: column;
    max-height: 85vh;
}

.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);
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    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: 300px;
}

.faq-answer-content {
    padding: 0 0 16px 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.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: 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;
}

/* Tooltip overdue styling */
.tooltip-row.overdue .tooltip-client,
.tooltip-row.overdue .tooltip-amount {
    color: #ff6b6b;
}

.tooltip-row.overdue .tooltip-client::before {
    content: '\26A0 ';
}

.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: CALENDAR TOOLTIP ===== */
.calendar-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1d1d1f;
    color: white;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.calendar-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--text-primary);
}

.calendar-day.has-payment:hover .calendar-tooltip,
.calendar-day.has-overdue:hover .calendar-tooltip,
.calendar-day.has-mixed:hover .calendar-tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 4px 0;
}

.tooltip-row:first-child {
    padding-top: 0;
}

.tooltip-client {
    color: #ffffff;
}

.tooltip-amount {
    color: var(--success-text);
    font-weight: 600;
}

.tooltip-divider {
    border-top: 1px solid #3d3d3f;
    margin: 8px 0;
}

.tooltip-total {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    font-weight: 600;
}

.tooltip-total-label {
    color: var(--text-secondary);
}

.tooltip-total-amount {
    color: var(--success-text);
}

/* ===== 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: 32px;
    }

    .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) {
    .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;
    }
}

/* ===== 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);
}

.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;
}

.invoice-tab {
    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;
}

.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;
}
.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: 1200px) {
    .lancer-inv-row {
        grid-template-columns: 32px 1fr 140px 110px auto;
    }
    .lancer-inv-row .lancer-inv-date.sent-date,
    .lancer-inv-row .lancer-inv-date.reminder-col { display: none; }
}

/* 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);
}

.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);
}

/* 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;
}

[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;
}

.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;
}

/* 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 */
@media (max-width: 768px) {
    .bank-connection-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .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;
}

/* 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;
}

/* 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);
}

.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;
}

/* Subtitle 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: 48px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

/* 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: 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: 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;
}

.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);
}

/* 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 --- */
.admin-body .flash-group {
    margin-bottom: 16px;
}

/* ========================================================================
   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);
}
.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;
}

/* 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;
}

.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);
}

/* ========== 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;
}
.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; }
}

@media (max-width: 768px) {
  .pd-sidebar { display: none; }
  .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; }
}

/* ===== 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;
}

/* Chat system card \u2014 used for non-message events (credit note requests, etc.)
   Distinct from bubbles: full-width row, muted background, icon + text only.
   Signals "this is a formal action, not a user message." */
.pd-chat-system-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: #f5f5f7;
  border: 1px solid #e5e5ea;
  border-left: 3px solid #1e3a5f;
  border-radius: 8px;
  align-self: stretch;
  max-width: 100%;
}
.pd-chat-system-card-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #1e3a5f;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.pd-chat-system-card-body {
  flex: 1;
  min-width: 0;
}
.pd-chat-system-card-title {
  font-size: 13px;
  font-weight: 700;
  color: #1d1d1f;
  margin-bottom: 2px;
}
.pd-chat-system-card-detail {
  font-size: 12px;
  color: #6b7280;
}
.pd-chat-system-card-time {
  font-size: 11px;
  color: #8e8e93;
  flex-shrink: 0;
  margin-top: 2px;
}
.pd-chat-system-card-arrow {
  flex-shrink: 0;
  color: #8e8e93;
  margin-top: 2px;
  display: flex;
  align-items: center;
}
.pd-chat-system-card--link {
  cursor: pointer;
  text-align: left;
  font: inherit;
  text-decoration: none;
  color: inherit;
  width: 100%;
  transition: background 0.15s, border-color 0.15s;
}
.pd-chat-system-card--link:hover {
  background: #e8f0fe;
  border-color: #1e3a5f;
}
.pd-chat-system-card--link:hover .pd-chat-system-card-arrow {
  color: #1e3a5f;
}

/* 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 */
.faq-item {
  border-bottom: 1px solid #e5e5ea;
}

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

.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-question:hover {
  background: #f5f5f7;
}

.faq-question-text {
  font-size: 16px;
  font-weight: 600;
  color: #1d1d1f;
  line-height: 1.4;
  flex: 1;
}

.faq-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #8e8e93;
  transition: transform 0.3s ease;
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

/* Answer panel — collapsed by default */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.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-question { padding: 16px 18px; }
  .faq-question-text { font-size: 15px; }
  .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; }
.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; }

/* 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;
}

/* 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;
  }
}