/* ============================================
   Tikable Design System
   Professional B2B SaaS Styling
   ============================================ */

/* ============================================
   WEB FONTS
   ============================================ */
@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces-v38-latin-300.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces-v38-latin-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Fraunces';
    src: url('fonts/fraunces-v38-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* Brand Colors */
    --color-primary: #667eea;
    --color-primary-hover: #5568d3;
    --color-primary-light: #f0f4ff;
    --color-primary-lighter: rgba(102, 126, 234, 0.08); /* Ultra-light brand tint for backgrounds/icons */
    --color-primary-dark: #4a5bc4;
    --color-primary-darker: #5B21B6;
    
    /* Semantic Colors */
    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-success-light: #e8f5e9;
    --color-success-lighter: #D1FAE5;
    --color-success-dark: #15803d;
    --color-success-text: #059669;
    
    --color-danger: #e74c3c;
    --color-danger-hover: #c0392b;
    --color-danger-light: #fee;
    --color-danger-lighter: #FEE2E2;
    --color-danger-text: #DC2626;
    --color-danger-dark: #991b1b;
    
    --color-warning: #f39c12;
    --color-warning-hover: #e67e22;
    --color-warning-light: #fff3e0;
    --color-warning-lighter: #FEF3C7;
    --color-warning-lightest: #FDE68A;
    --color-warning-text: #D97706;
    --color-warning-dark: #92400E;
    
    --color-info: #3498db;
    --color-info-hover: #2980b9;
    --color-info-light: #e3f2fd;
    --color-info-lighter: #DBEAFE;
    --color-info-lightest: #EFF6FF;
    --color-info-medium: #BFDBFE;
    --color-info-text: #1565c0;
    --color-info-dark: #1E40AF;
    --color-info-darker: #1E3A8A;
    
    /* Additional Semantic Colors */
    --color-purple: #8B5CF6;
    --color-purple-light: #DDD6FE;
    
    --color-orange: #F97316;
    --color-orange-light: #F59E0B;
    
    --color-blue: #3B82F6;
    
    --color-red-error: #EF4444;
    --color-red-dark: #c33;
    
    /* Special Colors */
    --color-gold: #ffd700;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Neutral Colors */
    --color-gray-50: #f8f9fa;
    --color-gray-75: #FAFAFA;
    --color-gray-100: #f0f0f0;
    --color-gray-150: #FAFBFC;
    --color-gray-200: #e4e4e7;
    --color-gray-250: #E5E7EB;
    --color-gray-300: #d4d4d8;
    --color-gray-350: #F3F4F6;
    --color-gray-400: #a1a1aa;
    --color-gray-500: #71717a;
    --color-gray-550: #6B7280;
    --color-gray-600: #52525b;
    --color-gray-650: #374151;
    --color-gray-700: #3f3f46;
    --color-gray-750: #27272a;
    --color-gray-800: #111827;
    --color-gray-900: #18181b;
    --color-gray-950: #666;
    
    /* Surface Colors */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: #f0f0f0;
    --color-bg-dark: #1a1a2e;      /* Dark navy — reserved for future dark surfaces (CTA, footer) */
    --color-border: #e4e4e7;
    --color-border-light: #f0f0f0;
    
    /* Text Colors */
    --color-text-primary: #18181b;
    --color-text-secondary: #52525b;
    --color-text-tertiary: #71717a;
    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: rgba(255, 255, 255, 0.6); /* Secondary text on solid brand/dark backgrounds */
    
    /* Spacing Scale */
    --spacing-2xs: 2px;
    --spacing-xs: 4px;
    --spacing-xs-plus: 6px;
    --spacing-sm: 8px;
    --spacing-sm-plus: 10px;
    --spacing-md: 12px;
    --spacing-md-plus: 14px;
    --spacing-lg-minus: 15px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-3xl-plus: 40px;
    --spacing-4xl: 48px;
    
    /* Typography */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --font-family-display: 'Fraunces', Georgia, serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Border Radius - Set to 0 for sharp corners, or use values below for rounded */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index Scale */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Layout */
    --mobile-header-height: 74px; /* logo 32px + tagline ~13px + margins 4px + padding 12px*2 + 1px border */
}

/* ============================================
   UTILITY CLASSES (replacing inline styles)
   ============================================ */

/* Display utilities */
.display-none { display: none; }
.display-block { display: block; }
.display-flex { display: flex; }

/* Flex utilities */
.flex-gap-md { gap: var(--spacing-md); }
.flex-gap-sm { gap: var(--spacing-sm); }
.flex-align-center { align-items: center; }
.flex-justify-end { justify-content: flex-end; }
.flex-justify-center { justify-content: center; }

/* Margin utilities */
.mt-lg { margin-top: var(--spacing-lg); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }
.m-0 { margin: 0; }

/* Padding utilities */
.pt-lg { padding-top: var(--spacing-lg); }

/* Text utilities */
.text-center { text-align: center; }
.text-italic { font-style: italic; }
.text-secondary-color { color: var(--color-text-secondary); }
.text-tertiary-color { color: var(--color-text-tertiary); }
.text-primary-color { color: var(--color-text-primary); }
.text-brand-color { color: var(--color-primary); }
.font-xs { font-size: var(--font-size-xs); }
.font-sm { font-size: var(--font-size-sm); }

/* Border utilities */
.border-top { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* Info/Warning box styles */
.info-box {
    background: var(--color-info-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-info);
}

.warning-box {
    background: var(--color-warning-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-warning);
}

/* Icon utilities */
.icon-clickable {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Disabled state */
.bg-disabled {
    background-color: var(--color-gray-50);
    cursor: not-allowed;
}

/* ============================================
   MODAL FORM SYSTEM
   ============================================ */

.modal-wide {
    max-width: 752px;
}

.modal-form-section {
    padding: var(--spacing-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

/* Form section that grows to push footer to bottom */
.modal-form-section.flex-grow {
    flex: 1;
    border-bottom: none;
}

.modal-form-section:last-child {
    border-bottom: none;
}

/* Settings tab - remove border when delete section follows */
#manage-tab-settings > .modal-form-section {
    border-bottom: none;
}

.modal-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xs) var(--spacing-md);
}

.form-field {
    margin-bottom: var(--spacing-xs);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    min-height: 80px;
    resize: vertical;
}

.form-input:disabled,
.form-select:disabled {
    background-color: var(--color-gray-50);
    cursor: not-allowed;
}

.form-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm) 0;
}

.form-checkbox-label span {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.form-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    display: block;
}

.modal-scrollable {
    display: block;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: var(--spacing-sm);
}

.range-slider {
    width: 100%;
    cursor: pointer;
}

.range-value {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

.modal-form-grid-3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.section-heading {
    display: block;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

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

.max-width-300 {
    max-width: 300px;
}


.modal-footer {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.text-danger {
    color: var(--color-danger);
}

.modal-medium {
    max-width: 650px;
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

/* KPI bar specific */
#kpi-bar-container,
#lists-kpi-bar-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-left: auto;
}

#kpi-bar-container.hidden,
#lists-kpi-bar-container.hidden {
    display: none;
}

#kpi-bar-content,
#lists-kpi-bar-content {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 0;
    text-align: right;
}

/* Tabs header row definition moved to line ~2193 with full layout controls */

/* KPI and Controls Row - appears below tabs */
.kpi-controls-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg); /* Increased gap for more breathing room */
    padding: var(--spacing-md) var(--spacing-xl); /* More horizontal padding */
    background: white;
    max-width: 100%;
    overflow: visible; /* Must be visible to allow column toggle dropdown to escape */
}

/* KPI Display Box - shows stats in bordered box */
.kpi-display-box {
    flex-shrink: 0;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-md);
    background: var(--color-primary-light);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    min-height: 36px;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Child text overrides for light purple background */
.kpi-display-box .kpi-bar-text {
    color: var(--color-text-secondary);
}

.kpi-display-box .kpi-num {
    color: var(--color-primary-dark);
}

.kpi-display-box .kpi-high-impact {
    color: #DC2626;
}

.kpi-display-box .kpi-pipe {
    color: var(--color-primary);
}

.kpi-display-box .kpi-filter-label {
    color: var(--color-primary-dark);
}

.kpi-display-box .kpi-all-label {
    color: var(--color-text-primary);
}

.kpi-display-box .kpi-limit-msg {
    color: var(--color-text-tertiary);
}

.kpi-display-box .kpi-warning {
    color: var(--color-warning-text);
}

.kpi-display-box .kpi-warning::before {
    color: var(--color-primary);
}

/* KPI Warning - shown when table is filtered or sorted */
.kpi-warning {
    font-size: var(--font-size-xs);
    color: var(--color-warning-text);
    font-weight: 600;
    font-style: italic;
}

.kpi-warning::before {
    content: '| ';
    color: var(--color-primary);
    font-weight: 300;
    margin-right: 4px;
}

/* ===================================
   KPI Bar Component Text Styles
   (Moved from kpi-bar-component.js)
   =================================== */

.kpi-bar-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.kpi-filter-label {
    font-weight: 700;
    color: var(--color-primary);
    margin-right: 4px;
}

.kpi-all-label {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-right: 4px;
}

.kpi-num {
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    margin-right: 3px;
}

.kpi-high-impact {
    font-weight: 700;
    color: #DC2626; /* Bold red for High Impact I≥8 */
}

.kpi-limit-msg {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-weight: 400;
    font-style: italic;
}

.kpi-pipe {
    color: var(--color-primary); /* Purple pipes */
    font-weight: 300;
    margin: 0 var(--spacing-xs);
}

/* KPI Bar - Responsive */
@media (max-width: 768px) {
    .kpi-bar-text {
        font-size: var(--font-size-xs);
        white-space: normal;
        word-wrap: break-word;
        display: block;
    }
}

@media (max-width: 480px) {
    .kpi-bar-text {
        white-space: normal;
        word-wrap: break-word;
    }
}

/* ===================================
   Lists KPI Bar Ownership Badges
   (Moved from lists-kpi-bar-component.js)
   =================================== */

.ownership-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--spacing-xs-plus) var(--spacing-md-plus);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.ownership-badge i,
.ownership-badge svg {
    width: 14px !important;
    height: 14px !important;
    flex-shrink: 0;
}

.ownership-badge.owned {
    background: linear-gradient(135deg, #6366F1, #4F46E5); /* Purple gradient - matches primary */
    color: white;
}

.ownership-badge.team {
    background: #0EA5E9; /* Sky blue */
    color: white;
}

/* Ensure ownership badges in KPI bar maintain fixed width */
.kpi-bar .ownership-badge {
    min-width: 95px;
    width: 95px;
    justify-content: center;
}

/* Status deleted badge style */
.status-deleted {
    background: var(--color-danger); /* Red */
    color: white;
}

/* Ownership Badges - Tablet responsive */
@media (max-width: 768px) {
    .kpi-bar .ownership-badge {
        min-width: 80px;
        width: 80px;
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm-plus);
    }
}

/* Ownership Badges - Mobile responsive */
@media (max-width: 480px) {
    .kpi-bar .ownership-badge {
        min-width: 70px;
        width: 70px;
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
}

/* Action Buttons Group - right side */
.kpi-action-buttons {
    flex-shrink: 0;
    display: flex;
    gap: var(--spacing-sm);
    margin-left: auto; /* Push to right */
    align-items: center; /* Ensure buttons align vertically */
    padding-right: var(--spacing-sm); /* Prevent touching right edge */
    min-width: fit-content; /* Prevent shrinking */
    justify-content: flex-end; /* Align buttons to right edge */
}

/* Ensure all buttons in KPI action area have consistent sizing */
.kpi-action-buttons button:not(.hidden),
.kpi-action-buttons .header-dropdown button:not(.hidden) {
    height: 36px;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    white-space: nowrap;
    flex: 0 0 auto;
    width: fit-content;
}

/* KPI search wrapper — transparent on desktop, toggle behaviour on mobile */
.kpi-search-wrapper {
    display: contents; /* Desktop: invisible wrapper, children behave as if unwrapped */
}

/* Mobile search toggle button — hidden on desktop */
.kpi-search-mobile-toggle,
.kpi-search-collapse-btn {
    display: none;
}

/* KPI search bar - now just the input wrapper */
.kpi-search-input-wrapper {
    position: relative;
    flex: 1 1 auto;
    min-width: 180px; /* Smaller minimum for tighter spaces */
    max-width: 280px; /* Conservative maximum */
    width: 250px; /* Preferred width */
    height: 36px;
}

/* Clear Filters Button - neutral outline style */
.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    height: 36px;
    flex-shrink: 0;
}

.clear-filters-btn:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

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

.clear-filters-btn i,
.clear-filters-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.kpi-search-input {
    width: 100%;
    height: 100%;
    padding: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}

.kpi-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.kpi-search-icon {
    position: absolute;
    right: var(--spacing-sm);
    top: 8px;
    color: var(--color-text-secondary);
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.kpi-clear-btn {
    position: absolute;
    right: var(--spacing-sm);
    top: 8px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: none;
    color: var(--color-text-secondary);
    z-index: 5;
    width: 20px;
    height: 20px;
    align-items: center;
    justify-content: center;
}

.kpi-clear-btn[style*="display: block"] {
    display: flex !important;
}

.kpi-clear-btn:hover {
    color: var(--color-text-primary);
}

.kpi-clear-btn i,
.kpi-clear-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* Status hold - alias for on_hold (database uses 'hold', CSS uses 'on_hold') */
.status-hold {
    background: #FEF3C7; /* Amber - same as on_hold */
    color: #92400E;
}

/* Responsive: Keep single row on mobile — stacking breaks sticky offset calculations */
@media (max-width: 768px) {
    .tabs-header-row {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        overflow: hidden;
        will-change: transform;
        transform: translateZ(0);
        /* No min-width — tabs-header-row is outside the scroll wrapper and must fit the viewport */
    }

    .tabs-header-row .tabs-nav {
        overflow-x: auto;
        overflow-y: hidden;
        flex-shrink: 1;
        min-width: 0;
        padding-bottom: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .tabs-header-row .tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .tabs-right-controls {
        flex-shrink: 0;
        padding-left: var(--spacing-sm);
    }

    .kpi-controls-row {
        will-change: transform;
        transform: translateZ(0);
        overflow-x: visible;
        min-width: 1778px; /* Match widest non-shared table (list/dashboard: 1778px) */
    }

    /* Shared table — wider due to extra org columns */
    #kpi-controls-row-shared {
        min-width: 1888px;
    }
    
    .tabs-header-row #kpi-bar-container {
        width: 100%;
        flex-direction: row; /* Keep horizontal on mobile */
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
        border-top: none; /* Remove border causing visual gap */
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }
    
    .tabs-header-row #kpi-bar-content {
        width: auto; /* Changed from 100% */
        text-align: left;
        flex: 1; /* Take available space */
    }
    
    /* Mobile search: collapsed by default — show icon button only */
    .kpi-search-wrapper {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .kpi-search-mobile-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
    }

    .kpi-search-mobile-toggle i,
    .kpi-search-mobile-toggle svg {
        width: 20px;
        height: 20px;
        color: var(--color-primary);
        stroke: var(--color-primary);
        transition: color var(--transition-fast), stroke var(--transition-fast);
    }

    .kpi-search-mobile-toggle:hover i,
    .kpi-search-mobile-toggle:hover svg {
        color: var(--color-primary-hover);
        stroke: var(--color-primary-hover);
    }

    /* Hide input wrapper until expanded */
    .kpi-search-wrapper .kpi-search-input-wrapper {
        display: none;
    }

    /* Expanded state: hide toggle, show input + collapse btn */
    .kpi-controls-row.search-expanded .kpi-search-mobile-toggle {
        display: none;
    }

    .kpi-controls-row.search-expanded .kpi-search-wrapper {
        flex: 1;
        min-width: 0;
    }

    /* When expanded, constrain the row to visible viewport — overrides the 1760px min-width */
    .kpi-controls-row.search-expanded {
        min-width: 0;
        width: 100vw;
        max-width: 100vw;
    }

    /* Override ID-level min-width for shared row when expanded */
    #kpi-controls-row-shared.search-expanded {
        min-width: 0;
    }

    .kpi-controls-row.search-expanded .kpi-search-wrapper .kpi-search-input-wrapper {
        display: flex;
        flex: 1;
        min-width: 0;
        max-width: none;
        width: auto;
    }

    .kpi-controls-row.search-expanded .kpi-search-collapse-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--color-text-secondary);
        flex-shrink: 0;
        padding: 0;
    }

    .kpi-controls-row.search-expanded .kpi-search-collapse-btn i,
    .kpi-controls-row.search-expanded .kpi-search-collapse-btn svg {
        width: 20px;
        height: 20px;
        color: var(--color-text-secondary);
        stroke: var(--color-text-secondary);
        transition: color var(--transition-fast), stroke var(--transition-fast);
    }

    .kpi-controls-row.search-expanded .kpi-search-collapse-btn:hover i,
    .kpi-controls-row.search-expanded .kpi-search-collapse-btn:hover svg {
        color: var(--color-text-primary);
        stroke: var(--color-text-primary);
    }

    /* Hide KPI text when search is expanded — frees full row width */
    .kpi-controls-row.search-expanded .kpi-display-box {
        display: none;
    }

    .kpi-search-wrapper input {
        flex: 1;
    }
    
    .clear-filters-btn {
        width: auto; /* Changed from 100% */
        min-width: auto; /* Changed from 100% */
        white-space: nowrap;
        padding: var(--spacing-xs) var(--spacing-sm);
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 480px) {
    .tabs-header-row #kpi-bar-container {
        padding: var(--spacing-sm);
    }
}

/* ============================================
   PAGINATION CONTROLS
   ============================================ */
.pagination-controls {
    display: none; /* Hidden by default, shown via JS */
    margin: var(--spacing-xl) 0;
    padding: var(--spacing-lg-minus);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-lg-minus);
}

.pagination-controls.show {
    display: flex;
}

.pagination-prev,
.pagination-next {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-gray-300);
    background: var(--color-bg-primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.pagination-prev:hover:not(:disabled),
.pagination-next:hover:not(:disabled) {
    background: var(--color-primary-light);
    border-color: var(--color-primary);
    color: var(--color-primary-dark); /* Ensure text stays dark and visible */
}

.pagination-prev:hover:not(:disabled) i,
.pagination-prev:hover:not(:disabled) svg,
.pagination-next:hover:not(:disabled) i,
.pagination-next:hover:not(:disabled) svg {
    color: var(--color-primary-dark); /* Ensure icons stay visible */
}

.pagination-prev:disabled,
.pagination-next:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-prev i,
.pagination-next i {
    width: 16px;
    height: 16px;
}

.pagination-info {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

/* ============================================
   RESET & BASE STYLES
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html, body {
    height: 100%;
    overflow: hidden;  /* Prevent ALL page scrolling */
    width: 100%;
    max-width: 100vw;  /* Never wider than viewport */
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text-primary);
    background: #fafafa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
}

/* Header Search Bar */

.list-view-wrapper {
    flex: 1;
    overflow-y: scroll;  /* Changed from 'auto' to 'scroll' - always show scrollbar */
    overflow-x: auto;
    width: 100%;
    min-width: 1100px;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
}

h1 { font-size: var(--font-size-3xl); margin-bottom: var(--spacing-lg); }
h2 { font-size: var(--font-size-2xl); margin-bottom: var(--spacing-md); }
h3 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-md); }
h4 { font-size: var(--font-size-lg); margin-bottom: var(--spacing-sm); }

p {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-md);
}

small {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

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

a:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */
/* .dashboard styles defined in LAYOUT section above */

.header {
    width: 100%;
    flex-shrink: 0;  /* Header stays fixed size */
    background: var(--color-bg-primary);
    padding: var(--spacing-lg) var(--spacing-3xl);
    margin-bottom: 0;
    box-shadow: var(--shadow-sm);
    border-radius: 0;
}

.header-content {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: var(--spacing-lg);
}

/* Push nav buttons to the right */
.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
}

.logo-headerbar {
    cursor: pointer;
    user-select: none;
}

.logo-headerbar h1 {
    font-size: var(--font-size-4xl);
    color: var(--color-primary);
    margin: 0;
    font-weight: var(--font-weight-bold);
}

.logo-headerbar small {
    display: block;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
}

/* Logo icon used inline with titles */
.header-logo {
    height: 1em;
    width: auto;
    vertical-align: middle;
    padding-bottom: 0.03125em;
}

/* Tikable wordmark logo in header */
.header-logo-img {
    height: 32px;
    width: auto;
    display: block;
}

/* header-right: always-visible group containing notification bell and mobile menu toggle */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

/* Mobile actions section — only shown inside hamburger menu on mobile */
.mobile-actions-section {
    display: none;
}

.content-card {
    flex: 1;
    overflow: hidden;
    background: var(--color-bg-primary);
    padding: 0; /* REMOVE horizontal padding */
    padding-bottom: var(--spacing-3xl); /* Keep bottom padding */
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

/* Search bar - always visible at top of content-card (NOT sticky) */


/* The scrollable container */
.index-scroll-wrapper {
    flex: 1;
    overflow-y: scroll;
    overflow-x: auto;
    position: relative;
    min-height: 0;
}

/* Tabs nav — inside tabs-header-row (not scroll wrapper) */
.tabs-header-row .tabs-nav {
    background: var(--color-bg-primary);
    padding: var(--spacing-md) var(--spacing-3xl) 0 var(--spacing-3xl); /* No bottom padding - moved to buttons */
    margin: 0;
}

/* Tab buttons in index context - extra bottom padding to reach the border */
.tabs-header-row .tabs-nav .tab-nav-button {
    padding-bottom: var(--spacing-sm-plus); /* 10px - same as base, let ::after handle the underline */
}

.index-scroll-wrapper .tab-panel {
    background: var(--color-bg-primary);
    padding: 0 var(--spacing-lg);
    padding-top: 0;
    margin-top: 0;
}

/* Tables must not have position set — any positioning creates a stacking context
   that can paint over sticky siblings (kpi-controls-row, tabs-header-row) */
.lists-table,
.items-table {
    /* No position property here */
}

/* Scrollbar styling for content-card */
.content-card::-webkit-scrollbar {
    width: 10px;
}

.content-card::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.content-card::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-md);
}

.content-card::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* ============================================
   BUTTONS
   ============================================ */
button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    white-space: nowrap;
    user-select: none;
}

.btn-primary,
button:not([class*="btn-"]):not(.settings-password-toggle):not(.col-group-toggle):not(.modal-close-x):not(.password-toggle-btn):not(.nav-btn):not(.kpi-search-mobile-toggle):not(.kpi-search-collapse-btn) {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-primary:hover,
button:not([class*="btn-"]):not(.settings-password-toggle):not(.col-group-toggle):not(.modal-close-x):not(.password-toggle-btn):not(.nav-btn):not(.kpi-search-mobile-toggle):not(.kpi-search-collapse-btn):hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active,
button:not([class*="btn-"]):not(.settings-password-toggle):not(.col-group-toggle):not(.modal-close-x):not(.password-toggle-btn):not(.nav-btn):active {
    transform: translateY(0);
}

.btn-success {
    background: var(--color-success);
    color: var(--color-text-inverse);
    height: 36px;
}

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

.btn-danger {
    background: var(--color-danger);
    color: var(--color-text-inverse);
    height: 36px;
}

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

.btn-secondary {
    background: var(--color-gray-500);
    color: var(--color-text-inverse);
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-secondary:hover {
    background: var(--color-gray-600);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Outline button - transparent with border (matches settings-btn-secondary) */
.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

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

.btn-info {
    background: var(--color-info);
    color: var(--color-text-inverse);
}

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

.btn-small {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    height: 36px; /* Match Clear Filters button height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-small:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.btn-small:active:not(:disabled) {
    transform: translateY(0);
}

/* Table context menu */
.table-context-menu {
    position: fixed;
    z-index: 9999;
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    min-width: 160px;
    padding: var(--spacing-xs) 0;
}

.table-context-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.table-context-menu-item {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
}

.table-context-menu-item:hover {
    background: var(--color-primary-lighter);
    color: var(--color-primary);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

button i[data-lucide] {
    width: 18px;
    height: 18px;
}

/* Header buttons - dark text, subtle hover */
.header-actions button,
.header-actions button:not([class*="btn-"]):not(.mobile-action-primary) {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    border: none;
    box-shadow: none;
    transform: none;
}

/* Specificity booster — ensures header nav buttons are never overridden by the
   catch-all primary button rule (which has high specificity from multiple :not() selectors) */
.header-actions button:not([class*="btn-"]):not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.mobile-action-primary) {
    background: transparent;
    color: var(--color-text-secondary);
    box-shadow: none;
    transform: none;
}

.header-actions button i,
.header-actions button svg {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary);
}

.nav-btn:not(.mobile-action-primary):hover {
    background: transparent;
    color: var(--color-primary);
    transform: none;
    box-shadow: none;
}

.nav-btn:hover i,
.nav-btn:hover svg {
    color: var(--color-primary);
}

.header-actions button.active {
    color: var(--color-primary);
    border-radius: var(--radius-md);
    position: relative;
}

.header-actions button.active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: var(--spacing-md);
    right: var(--spacing-md);
    height: 2px;
    background-color: var(--color-primary);
    border-radius: 1px;
}

.header-actions button.active i,
.header-actions button.active svg {
    color: var(--color-primary);
}

.header-actions button.btn-secondary {
    color: var(--color-gray-600);
}

.header-actions button.btn-secondary i,
.header-actions button.btn-secondary svg {
    color: var(--color-gray-600);
}

.header-actions button.btn-secondary:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-800);
}

/* Header dropdown (for Manage List) */
.header-dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: var(--spacing-xs);
    min-width: 200px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9999; /* Very high to ensure it appears above everything */
}

.dropdown-menu.show {
    display: block;
}

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Explicitly left-align */
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: background var(--transition-fast);
    text-align: left; /* Ensure text is left-aligned */
}

.dropdown-item i,
.dropdown-item svg {
    width: 16px;
    height: 16px;
    color: var(--color-text-secondary);
}

.dropdown-item:hover {
    background: var(--color-gray-50);
}

.dropdown-item-danger {
    color: var(--color-danger);
}

.dropdown-item-danger i,
.dropdown-item-danger svg {
    color: var(--color-danger);
}

.dropdown-item-danger:hover {
    background: var(--color-danger-light);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Validation error state */
input.input-error,
textarea.input-error,
select.input-error,
.modal-form-input.input-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px var(--color-danger-lighter) !important;
}

input.input-error:focus,
textarea.input-error:focus,
select.input-error:focus,
.modal-form-input.input-error:focus {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px var(--color-danger-lighter) !important;
}

select {
    cursor: pointer;
    accent-color: var(--color-primary);
}

select option {
    background-color: white;
    color: var(--color-text-primary);
}

select option:hover,
select option:focus,
select option:checked {
    background: var(--color-primary-light) !important;
    background-color: var(--color-primary-light) !important;
    color: var(--color-primary-dark) !important;
}

textarea {
    resize: vertical;
    min-height: 100px;
    line-height: var(--line-height-base);
}

/* ============================================
   SEARCH BAR
   ============================================ */
.search-container {
    display: flex;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0;
}

.search-input-wrapper {
    position: relative;
    max-width: 600px;
    margin-left: auto;
}

.search-input-field {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-3xl) var(--spacing-md) 45px;
    padding-left: 45px !important;  /* ADD THIS - ensures icon space */
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}

.search-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-gray-400);
    pointer-events: none;
}

.clear-search-btn {
    display: none;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-gray-500);
}

.clear-search-btn:hover {
    color: var(--color-gray-700); /* Darken on hover for better feedback */
    transform: translateY(-50%) !important; /* Maintain centering, prevent inherited transform */
    background: none !important; /* Ensure no background appears */
    box-shadow: none !important; /* Ensure no shadow appears */
}

/* ============================================
   TABLES
   ============================================ */
.lists-table,
.items-table {
    width: 100%;
    min-width: 1100px;  /* But never smaller than this */
    table-layout: fixed;  /* Prevent column left/right reflow on data updates */
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-bg-primary);
    margin-top: 0; /* No gap - KPI row and headers should be flush */
    -webkit-font-smoothing: antialiased;
}



.lists-table thead,
.items-table thead {
    background: var(--color-gray-50);
}

.lists-table th,
.items-table th {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-gray-50);
    box-shadow: none;
    /* Sticky positioning - CSS only, no JavaScript needed */
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 6;
}

.lists-table tbody tr,
.items-table tbody tr {
    transition: background-color var(--transition-fast);
    cursor: pointer;
}

.lists-table tbody tr:hover,
.items-table tbody tr:hover {
    background: var(--color-gray-50);
}

.lists-table tbody tr:last-child,
.items-table tbody tr:last-child {
    border-bottom: none;
}

.lists-table tbody tr:last-child td,
.items-table tbody tr:last-child td {
    border-bottom: none;
}

/* Vertical borders - REMOVE THIS BLOCK if not wanted */
.lists-table th,
.items-table th,
.lists-table td,
.items-table td {
    border-right: 1px solid var(--color-border);
}

.lists-table th:last-child,
.items-table th:last-child,
.lists-table td:last-child,
.items-table td:last-child {
    border-right: none;
}
/* END vertical borders block */

.lists-table td,
.items-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Allow styled tooltips to escape cell boundaries */
.items-table td:has(.has-tooltip),
.lists-table td:has(.has-tooltip) {
    overflow: visible;
}

.lists-table td strong,
.items-table td strong {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

.lists-table button,
.items-table button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Item number column - right-aligned with tabular numerals for clean display */
.items-table td[data-column="item_number"],
.items-table th[data-column="item_number"],
.items-table td[data-column-id="item_number"],
.items-table th[data-column-id="item_number"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Type column - allow badge to display without clipping */
.items-table td[data-column-id="type"],
.lists-table td[data-column-id="type"] {
    overflow: visible;
    text-overflow: clip;
    text-align: center;
}


/* ============================================
   Team Member List
   ============================================ */

/* Team members list - scrollable container */
.team-members-list-container {
    max-height: 300px;
    overflow-y: auto;
    padding-right: var(--spacing-xs);
}

/* Custom scrollbar styling */
.team-members-list-container::-webkit-scrollbar {
    width: 6px;
}

.team-members-list-container::-webkit-scrollbar-track {
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
}

.team-members-list-container::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-sm);
}

.team-members-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* ============================================
   DROPDOWNS
   ============================================ */
/* LIST column link styling - pill buttons with hover */
.list-link {
    text-decoration: none;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-primary);
    transition: all 0.2s ease;
    display: inline-block;
    cursor: pointer;
}

.list-link:hover {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

/* Cells containing wrap-text need auto height and normal white-space */
.items-table td:has(.wrap-text),
.lists-table td:has(.wrap-text) {
    height: auto;
    overflow: visible;
    white-space: normal;
    padding: var(--spacing-xs-plus) var(--spacing-sm);
}

/* Text wrapping for key columns - limited to 3 lines */
.items-table .wrap-text,
.lists-table .wrap-text,
.dashboard-table .wrap-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Latest Update column date styling - smaller font for date */
.items-table .update-date,
.lists-table .update-date,
.dashboard-table .update-date {
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
}

/* Latest Update cell with Quick Update button */
.latest-update-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.latest-update-cell .wrap-text {
    flex: 1;
    min-width: 0;
}

.latest-update-cell em {
    flex: 1;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* ============================================
   Column Group Toggle Button
   ============================================ */
.col-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    box-sizing: border-box;
}

.col-group-toggle i,
.col-group-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.col-group-toggle:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-text-primary);
}

/* ============================================
   End Column Group Toggle Button
   ============================================ */
/* List actions dropdown - improved styling to match purple theme */
.list-actions-dropdown {
    position: relative;
}

.list-actions-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
    z-index: var(--z-dropdown);
    min-width: 220px;
    overflow: hidden;
    padding: var(--spacing-xs) 0;
}

.list-actions-menu .sort-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-lg);
    background: none;
    border: none;
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.list-actions-menu .sort-dropdown-item:hover {
    background: var(--color-primary-light);
    border-left-color: var(--color-primary);
    padding-left: calc(var(--spacing-lg) + 2px);
}

.list-actions-menu .sort-dropdown-item i {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.list-actions-menu .sort-dropdown-item:hover i {
    color: var(--color-primary-dark);
}

/* Separator for danger actions */
.list-actions-menu .list-action-danger {
    color: var(--color-danger);
    margin-top: var(--spacing-xs);
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-sm);
}

.list-actions-menu .list-action-danger:hover {
    background: var(--color-danger-light);
    border-left-color: var(--color-danger);
}

.list-actions-menu .list-action-danger i {
    color: var(--color-danger);
}

.list-actions-menu .list-action-danger:hover i {
    color: var(--color-danger);
}


/* ============================================
   BADGES & STATUS INDICATORS
   ============================================ */

/* ============================================
   BASE BADGE SYSTEM
   Reusable foundation for all badge types
   ============================================ */

/* Base badge structure - shared by all badges */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.badge i,
.badge svg {
    flex-shrink: 0;
}

/* Badge size variants */
.badge-sm {
    padding: var(--spacing-2xs) var(--spacing-sm);
    font-size: var(--font-size-xs); /* 11px */
    border-radius: var(--radius-sm);
    gap: var(--spacing-xs);
}

.badge-sm i,
.badge-sm svg {
    width: 10px;
    height: 10px;
}

.badge-md {
    padding: var(--spacing-xs) var(--spacing-sm-plus);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-md);
    gap: var(--spacing-xs-plus);
}

.badge-md i,
.badge-md svg {
    width: 12px;
    height: 12px;
}

.badge-lg {
    padding: var(--spacing-xs-plus) var(--spacing-md-plus);
    font-size: var(--font-size-sm); /* 13px */
    border-radius: var(--radius-lg);
    gap: var(--spacing-xs-plus);
}

.badge-lg i,
.badge-lg svg {
    width: 14px;
    height: 14px;
}

/* Fixed-width variants for tables (prevent column jumping) */
.badge-fixed-sm { 
    min-width: 85px; 
    width: 85px; 
}

.badge-fixed-md { 
    min-width: 95px; 
    width: 95px; 
}

.badge-fixed-lg { 
    min-width: 100px; 
    width: 100px; 
}

/* Rounded pill variant */
.badge-pill {
    border-radius: var(--radius-full);
}

/* ============================================
   SPECIFIC BADGE TYPES
   Build on base system with color/style
   ============================================ */

/* Type Badges - Icon + Colored Text */
.type-badge {
    /* Base badge properties */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    white-space: nowrap;
    /* Size - matches badge-md */
    padding: var(--spacing-xs) var(--spacing-sm-plus);
    font-size: var(--font-size-xs);
    gap: var(--spacing-xs-plus);
    border-radius: var(--radius-full);
    /* Type-specific */
    min-width: 75px; /* Fits "Opportunity" or "Opp" + icon */
}

.type-badge i,
.type-badge svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.type-badge.opportunity {
    background: var(--color-success-lighter);
    color: var(--color-success-text);
}

.type-badge.type-opportunity {
    background: var(--color-success-lighter);
    color: var(--color-success-text);
}

.type-badge.issue {
    background: var(--color-danger-lighter);
    color: var(--color-danger-text);
}

.type-badge.type-issue {
    background: var(--color-danger-lighter);
    color: var(--color-danger-text);
}

.type-badge.risk {
    background: var(--color-warning-lighter);
    color: var(--color-warning-text);
}

.type-badge.type-risk {
    background: var(--color-warning-lighter);
    color: var(--color-warning-text);
}


/* Owner badge styling */
.owner-badge {
    /* Extends: .badge .badge-sm */
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: white;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: var(--spacing-xs);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.owner-badge i {
    color: var(--color-gold) !important; /* Gold crown */
}

/* Status Badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-medium);
    transition: all var(--transition-fast);
    white-space: nowrap;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    border-radius: var(--radius-full);
    text-transform: capitalize;
    min-width: 60px;
}

.status-open {
    background: var(--color-primary-light); /* Purple tint */
    color: var(--color-primary-dark);
}

.status-active {
    background: var(--color-success-lighter); /* Green */
    color: var(--color-success-text);
}

.status-in_progress {
    background: var(--color-success-lighter); /* Green - same as active */
    color: var(--color-success-text);
}

.status-closed {
    background: var(--color-gray-550); /* Mid grey — terminal state */
    color: white;
}

.status-archived {
    background: var(--color-gray-550); /* Mid grey — terminal state, same as closed */
    color: white;
}

.status-complete {
    background: var(--color-gray-200); /* Grey - same as closed */
    color: var(--color-text-secondary);
}

.status-on_hold {
    background: #FEF3C7; /* Amber - clearly distinct from closed */
    color: #92400E;
}

.status-hold {
    background: #FEF3C7; /* Amber - same as on_hold */
    color: #92400E;
}

/* User account status badges (Settings > User Management) */
.user-status-active {
    background: var(--color-success-lighter);
    color: var(--color-success-text);
}

.user-status-pending {
    background: #FEF3C7;
    color: #92400E;
}

/* Performance Badges - Bold style for KPI metrics */
.performance-badge {
    /* Extends: .badge .badge-lg */
    text-transform: capitalize;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    border-radius: var(--radius-sm); /* Override to sharp corners */
}

.performance-badge.perf-late {
    background: var(--color-danger-text); /* Bold red - matches target-red */
    color: white;
}

.performance-badge.perf-impact {
    background: var(--color-purple); /* Bold purple */
    color: white;
}

/* PI score circle */
.pi-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    flex-shrink: 0;
}

/* Sigma PI circle — auto width to accommodate values like 12k */
.pi-circle-sigma {
    width: auto;
    min-width: 28px;
    padding: 0 var(--spacing-xs);
}

/* Overdue count — same circle pattern as PI but red */
.overdue-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    flex-shrink: 0;
}

/* Target date badges */
.target-badge {
    border-radius: var(--radius-full);
}

.target-red {
    background: var(--color-danger-lighter);
    color: var(--color-danger-text);
}

.target-amber {
    background: var(--color-warning-lighter);
    color: var(--color-warning-text);
}

.target-green {
    background: var(--color-success-lighter);
    color: var(--color-success-text);
}

/* New badge — shown before item number for items created today, and before list name for lists created today */
.item-new-badge {
    display: inline-block;
    padding: 1px var(--spacing-xs);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    background: var(--color-primary-light);
    color: var(--color-primary);
    white-space: nowrap;
    line-height: 1.4;
}

/* List Health Dot */
.health-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
    cursor: default;
}

.health-dot-green {
    background: var(--color-success);
}

.health-dot-amber {
    background: var(--color-warning);
}

.health-dot-red {
    background: var(--color-danger);
}

.health-dot-closed {
    background: var(--color-gray-550);
}

/* Health tab content */
.health-tab-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.health-tab-status-text {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.health-tab-subtitle {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.health-tab-score {
    color: var(--color-text-secondary);
}

.health-tab-on-track {
    padding: var(--spacing-xl);
    margin: 0;
    font-size: var(--font-size-base);
    color: var(--color-success-text);
}

.health-tab-signals-heading {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-sm);
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.health-tab-signals-list {
    padding: 0 var(--spacing-xl) var(--spacing-lg);
}

.health-tab-signal {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.health-tab-signal:last-child {
    border-bottom: none;
}

.health-tab-signal-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.health-tab-signal-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Link rows — used in both item and list links tabs */
.link-row {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}

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

.link-row-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.link-row-label {
    font-size: var(--font-size-base);
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    word-break: break-all;
}

.link-row-label:hover {
    text-decoration: underline;
}

.link-row-url {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    word-break: break-all;
}

.link-row-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.link-row-added-by {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.btn-link-delete {
    background: none;
    border: none;
    color: var(--color-danger);
    font-size: var(--font-size-xs);
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

.btn-link-delete:hover {
    text-decoration: underline;
}

.links-empty-state {
    margin: 0;
    padding: var(--spacing-sm) 0;
}

/* Links tab layout — header + add form fixed, list scrolls */
.links-tab-header {
    flex-shrink: 0;
}

.links-scroll-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.links-scroll-section {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.links-scroll-section:last-child {
    border-bottom: none;
}

.link-item-group {
    margin-bottom: var(--spacing-lg);
}

.link-item-group:last-child {
    margin-bottom: 0;
}

.link-item-group-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

@media (max-width: 768px) {
    /* Links tab — remove internal scroll on mobile; tab panel scrolls as a whole */
    .links-scroll-list {
        flex: none;
        overflow-y: visible;
    }

    /* Add link form — stack inputs vertically on mobile */
    .modal-tab-section .modal-tab-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .modal-tab-section .modal-tab-form-row input,
    .modal-tab-section .modal-tab-form-row select {
        width: 100%;
        flex: none;
    }

    .modal-tab-section .modal-tab-form-row .btn {
        width: 100%;
    }
}

/* Dates Moved Badge */
.dates-moved-badge {
    display: inline-block;
    padding: 2px var(--spacing-sm);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    background: var(--color-warning-lighter);
    color: var(--color-warning-text);
    white-space: nowrap;
}

/* Visibility Badges - Bold style */
.visibility-badge {
    /* Extends: .badge .badge-lg */
    text-transform: capitalize;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-radius: var(--radius-sm); /* Override to sharp corners */
}

.visibility-badge.organization {
    background: var(--color-blue); /* Bold blue */
    color: white;
}

.visibility-badge.team {
    background: var(--color-purple); /* Bold purple */
    color: white;
}

.visibility-badge.personal {
    background: var(--color-gray-550); /* Bold gray */
    color: white;
}

/* External badge - Bold style */
.external-badge {
    /* Extends: .badge .badge-md (but with sharp corners) */
    background: #FEF3F2;
    color: #B42318;
    border: 1px solid #FEE4E2;
    border-radius: var(--radius-sm);
    margin-left: var(--spacing-xs);
}

/* Subscription Badge */
.subscription-badge {
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-gray-500);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.subscription-badge:hover {
    background: var(--color-gray-600);
}

.subscription-badge.paid {
    background: var(--color-success);
}

.subscription-badge.paid:hover {
    background: var(--color-success-hover);
}

/* Join Team Banner for Organization Lists */
/* Mobile responsiveness */
@media (max-width: 768px) {
    /* Limit text wrapping to 2 lines on mobile */
    .items-table .wrap-text,
    .dashboard-table .wrap-text {
        -webkit-line-clamp: 2;
    }
}

/* ============================================
   NOTIFICATIONS
   ============================================ */
.notification-bell {
    position: relative;
    cursor: pointer;
    width: 36px; /* Fixed width to prevent layout shift */
    height: 36px; /* Fixed height */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-bell svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    stroke: var(--color-primary);
    transition: color var(--transition-fast), stroke var(--transition-fast);
}

.notification-bell:hover svg {
    color: var(--color-primary-hover);
    stroke: var(--color-primary-hover);
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border-radius: var(--radius-full);
    width: 18px;
    height: 18px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.notifications-panel {
    position: fixed;
    top: var(--mobile-header-height);
    right: 20px;
    width: 400px;
    max-height: 500px;
    background: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-dropdown);
    overflow: hidden;
}

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

.notifications-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
}

.notifications-list {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border-light);
    cursor: default;
    transition: background var(--transition-fast);
}

.notification-item.clickable {
    cursor: pointer;
}

.notification-item.clickable:hover {
    background: var(--color-gray-50);
}

.notification-item.unread {
    background: var(--color-primary-light);
}

.notification-item-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: var(--spacing-xs);
}

.notification-title {
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
}

.notification-time {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.notification-message {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0;
}

/* Actionable notifications */
.notification-item.actionable {
    cursor: default;
}

.notification-item.actionable:hover {
    background: var(--color-bg-secondary);
}

.notification-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--color-border-light);
}

.notification-actions .btn-small {
    flex: 1;
    justify-content: center;
}

.notification-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.notification-status.accepted {
    color: var(--color-success);
}

.notification-status.declined {
    color: var(--color-text-tertiary);
}

.notification-status.withdrawn {
    color: var(--color-text-tertiary);
}

.notification-status i,
.notification-status svg {
    width: 14px;
    height: 14px;
}

.notification-view-prompt {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.notification-view-prompt svg {
    width: 12px;
    height: 12px;
}

/* ============================================
   SETTINGS PAGE SPECIFIC
   ============================================ */

.settings-scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Mobile settings nav — dropdown replaces tab bar on small screens */
.settings-mobile-nav {
    display: none;
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-primary);
}

.settings-mobile-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    appearance: auto;
    cursor: pointer;
}

.settings-mobile-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.settings-scroll-wrapper .dashboard-section {
    padding: 0;
}

.settings-scroll-wrapper .tab-content {
    padding: var(--spacing-xl) var(--spacing-3xl);
    overflow-x: auto;
}

/* ============================================
   MODAL TABS & CARDS
   ============================================ */

.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    animation: fadeIn var(--transition-base);
    overflow-y: auto;
    padding: var(--spacing-xl);
}

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

/* Compact modal variant - centered, no fixed height */
.modal-compact {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal);
    animation: fadeIn var(--transition-base);
    align-items: center;
    justify-content: center;
}

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

/* Confirmation and alert modals should appear above other modals */
#confirm-modal,
#alert-modal,
#close-list-modal,
#unsaved-changes-modal {
    z-index: var(--z-popover);
}

.modal-content {
    background: var(--color-bg-primary);
    max-width: 900px;
    height: 85vh;
    margin: var(--spacing-3xl-plus) auto;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Wide modal for plan selection */
.modal-content-wide {
    max-width: 900px;
    width: 90%;
    height: 85vh;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Compact modal content - no fixed height */
.modal-content-compact {
    background: var(--color-bg-primary);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    margin: 0;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    position: relative;
}

/* Medium modal - for forms like Create List */
.modal-content-medium {
    max-width: 752px;
    width: 90%;
    height: auto;
    max-height: 90vh;
    overflow: visible;
}

/* Header with bottom border */
.modal-header-bordered {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-md);
    margin-bottom: 0;
}

/* Status note above footer */
.modal-status-note {
    text-align: center;
    padding: var(--spacing-md) var(--spacing-xl);
    margin: 0;
}

/* Footer with metadata inline */
.modal-footer-metadata-inline {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    flex: 1;
}

/* Footer buttons group */
.settings-card-footer-buttons {
    display: flex;
    gap: var(--spacing-sm);
}

/* Delete/Restore section in Manage List modal */
.modal-content h2 {
    margin-bottom: var(--spacing-sm);
    flex-shrink: 0;
}

.modal label {
    display: block;
    margin: var(--spacing-sm) 0 var(--spacing-xs) 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
}

.modal button {
    margin-right: var(--spacing-md);
    margin-top: var(--spacing-md);
}

/* Modal close button in header */
.modal-close-btn {
    background: none;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-text-primary);
    transform: none;
    box-shadow: none;
}

.modal-close-btn i {
    width: 20px;
    height: 20px;
}

/* Modal close X button - positioned top right with red background */
.modal-close-x,
.modal-content .modal-close-x {
    background: var(--color-danger);
    border: none;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: white;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-close-x:hover,
.modal-content .modal-close-x:hover {
    background: var(--color-danger-hover);
    color: white;
    transform: none;
    box-shadow: none;
}

.modal-close-x i,
.modal-content .modal-close-x i {
    width: 14px;
    height: 14px;
}

/* Tabs Header Row - contains tabs on left, info and buttons on right */
.tabs-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid var(--color-border);
    padding-right: var(--spacing-3xl);
    max-width: 100%;
    overflow: visible;
}

/* Tabs nav container - let it flex but not overflow */
.tabs-header-row .tabs-nav {
    flex-shrink: 0;
    margin-bottom: 0;
    border-bottom: none; /* Border is on parent */
}

/* Right side controls (info + buttons) */
.tabs-right-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0; /* Don't shrink - keep buttons visible */
}

/* Action group: inline flex at wide viewports */
.tabs-action-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
}

/* ⋯ trigger button — hidden at wide viewports */
.tabs-overflow-btn {
    display: none;
    width: 36px;
    padding: 0;
    justify-content: center;
}

.tabs-overflow-btn i,
.tabs-overflow-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Action panel — inline at wide viewports */
.tabs-action-panel {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Dropdown card at narrow viewports */
.tabs-action-panel.is-dropdown {
    display: none;
    position: fixed;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    min-width: 200px;
    padding: var(--spacing-xs) 0;
}

.tabs-action-panel.is-dropdown.is-open {
    display: flex;
}

/* Dropdown item style inside panel */
.tabs-action-panel.is-dropdown .settings-btn {
    border-radius: 0;
    border: none;
    background: none;
    width: 100%;
    justify-content: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

/* Active scope button retains brand colour indicator in dropdown */
.tabs-action-panel.is-dropdown .settings-btn-brand {
    color: var(--color-primary);
    font-weight: 600;
}

.tabs-action-panel.is-dropdown .settings-btn:hover:not(:disabled) {
    background: var(--color-gray-100);
}

.tabs-action-panel.is-dropdown .settings-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 1200px) {
    .tabs-overflow-btn {
        display: inline-flex;
        align-items: center;
    }

    .tabs-action-panel {
        display: none; /* Hidden inline; shown as dropdown when open */
    }
}

/* ============================================
   COLUMN VISIBILITY TOGGLE POPOVER
   ============================================ */

.col-toggle-panel {
    display: none;
    position: fixed;
    z-index: var(--z-popover);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    max-width: 240px;
    padding: var(--spacing-xs) 0;
}

.col-toggle-panel.col-toggle-panel--open {
    display: block;
}

.col-toggle-list {
    padding: var(--spacing-xs) 0;
}

.col-toggle-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
}

.col-toggle-item:hover {
    background: var(--color-gray-100);
}

.col-toggle-checkbox {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.col-toggle-label {
    user-select: none;
}

.col-toggle-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

.col-toggle-footer .col-toggle-reset-btn {
    width: 100%;
    justify-content: center;
    font-size: var(--font-size-sm);
}
.data-scope-info-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-text-secondary); /* Changed from warning-text orange to neutral gray */
    font-size: var(--font-size-sm);
    font-weight: normal; /* Changed from medium to normal */
    font-style: normal; /* Changed from italic to normal */
    white-space: nowrap; /* Prevent text wrapping */
}

.data-scope-info-inline i,
.data-scope-info-inline svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.data-scope-info-inline svg.scope-warning-icon {
    stroke: var(--color-danger);
}



/* Scope radio buttons container */
.data-scope-buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Tabs */
.tabs-nav {
    display: flex;
    flex-shrink: 0;
    margin-top: 0;
    margin-bottom: var(--spacing-sm);
    background: white;
    border-bottom: 1px solid var(--color-border); /* Gray line */
    border-top: none;
    position: relative;
    z-index: 10;
}

/* Full-width gray line under tabs */


.tab-nav-button {
    padding: var(--spacing-sm-plus) var(--spacing-xl);
    background: none !important;
    border: none;
    border-radius: var(--radius-sm) !important;
    color: var(--color-gray-950) !important;
    font-weight: normal;
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: none !important;
    position: relative; /* For positioning the ::after pseudo-element */
}

.tab-nav-button:hover {
    background: none !important;
    transform: none !important;
    box-shadow: none !important;
    color: var(--color-text-primary) !important;
}

.tab-nav-button.active {
    font-weight: bold;
    color: var(--color-primary) !important;
}

/* Active tab indicator - purple bar that overlays the gray line */
.tab-nav-button.active::after {
    content: '';
    position: absolute;
    bottom: -1px; /* Align with border-bottom */
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-primary);
    z-index: 11; /* Above everything */
}

/* Tab divider - separates user tabs from admin tabs */
.tabs-divider {
    display: inline-block;
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 var(--spacing-md);
    vertical-align: middle;
}

/* Admin Only badge for tab titles */
.admin-only-badge {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-secondary);
    margin-left: var(--spacing-sm);
}

/* Tab with close button */
.tab-with-close {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.tab-close-btn {
    margin-left: var(--spacing-xs);
    padding: 0 var(--spacing-xs);
    line-height: 1;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.tab-close-btn i,
.tab-close-btn svg {
    width: 14px;  /* Same as font-size-sm for consistency with tab text */
    height: 14px;
}

.tab-close-btn:hover {
    opacity: 1;
}

/* Tab panels */
.modal-tab-panel {
    display: none;
}

.modal-tab-panel.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Modal footer buttons */
.modal-actions-footer {
    flex-shrink: 0;
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

/* Modal header with inline alert - used by complex modals */
.modal-header-with-alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.modal-header-with-alert h2 {
    margin: 0;
}

.modal-header-with-alert .message {
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    max-width: 60%;
}

/* Alias for backwards compatibility */
.manage-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
}

.manage-list-header h2 {
    margin: 0;
}

.manage-list-header .message {
    margin: 0;
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    flex-shrink: 0;
    max-width: 60%;
}

/* Modal footer with metadata row - used by complex modals */
.modal-footer-with-metadata {
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Alias for backwards compatibility */
.manage-list-footer,
.item-modal-footer {
    flex-direction: column;
    gap: var(--spacing-sm);
}

.modal-footer-buttons-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.modal-footer-metadata {
    text-align: center;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Manage list tabs border */
.manage-list-tabs {
    border-bottom: 1px solid var(--color-border);
}

/* Reduce textarea height in manage list modal */
#manage-list-modal .modal-form-textarea {
    min-height: 50px;
}

.modal-content button:not(.hidden):not(.settings-btn-secondary):not(.settings-btn-danger):not(.modal-close-x) {
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

/* Default button style in modals (primary) */
.modal-content button:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-outline):not(.modal-close-x):not(.tab-nav-button):not(.modal-tab-button):not(.settings-btn) {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.modal-content button:not(.btn-secondary):not(.btn-danger):not(.btn-success):not(.btn-outline):not(.modal-close-x):not(.tab-nav-button):not(.modal-tab-button):not(.settings-btn):hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Ensure btn-outline works in modals */
.modal-content button.btn-outline {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.modal-content button.btn-outline:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
    transform: none;
    box-shadow: none;
}

/* Ensure btn-secondary works in modals */
.modal-content button.btn-secondary {
    background: var(--color-gray-500);
    color: var(--color-text-inverse);
}

.modal-content button.btn-secondary:hover {
    background: var(--color-gray-600);
}

.modal-content button.btn-danger {
    background: var(--color-danger);
}

.modal-content button.btn-danger:hover {
    background: var(--color-danger-hover);
}

/* Modal close X button - specific rule for button.modal-close-x */
.modal-content button.modal-close-x,
.modal-content-compact button.modal-close-x,
.modal-content-wide button.modal-close-x {
    background: var(--color-danger);
    color: white;
    width: 28px;
    height: 28px;
    min-width: 28px;
    padding: 0;
    margin: 0;
    position: relative;
    top: auto;
    right: auto;
    border-radius: var(--radius-sm);
}

.modal-content button.modal-close-x:hover,
.modal-content-compact button.modal-close-x:hover,
.modal-content-wide button.modal-close-x:hover {
    background: var(--color-danger-hover);
    transform: none;
    box-shadow: none;
}

.modal-content button i {
    width: 14px;
    height: 14px;
}

/* Modal content sections */
#modal-item-info {
    display: block !important;
    grid-template-columns: none !important;
    width: 100%;
}

.watchers-section {
    padding: var(--spacing-md) 0;
}

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

.watcher-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

/* External owner select highlighting */
.select-external-owner {
    background: #FEF3F2 !important;
    border-color: #FEE4E2 !important;
}

.updates-scroll {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: var(--spacing-xl);
    padding-right: var(--spacing-sm);
}

/* Team member items */
.team-member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.team-member-pending {
    background: var(--color-warning-light);
    padding: var(--spacing-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-xs);
}

.pending-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-2xs) var(--spacing-sm);
    background: var(--color-warning);
    color: white;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    margin-left: var(--spacing-xs);
}

.pending-badge i {
    width: 12px;
    height: 12px;
}

/* Team members scroll section */
.team-members-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding-right: var(--spacing-sm);
}

.team-members-scroll::-webkit-scrollbar {
    width: 8px;
}

.team-members-scroll::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.team-members-scroll::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-md);
}

.team-members-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* Modal form fields styling */
.modal-tab-panel input[type="text"],
.modal-tab-panel input[type="email"],
.modal-tab-panel input[type="date"],
.modal-tab-panel textarea,
.modal-tab-panel select {
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.modal-tab-panel input[type="text"]:focus,
.modal-tab-panel input[type="email"]:focus,
.modal-tab-panel input[type="date"]:focus,
.modal-tab-panel textarea:focus,
.modal-tab-panel select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Range sliders - thin grey line with purple ball */
.modal-tab-panel input[type="range"],
.modal-content-compact input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    outline: none;
}

.modal-tab-panel input[type="range"]::-webkit-slider-thumb,
.modal-content-compact input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modal-tab-panel input[type="range"]::-webkit-slider-thumb:hover,
.modal-content-compact input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.modal-tab-panel input[type="range"]::-moz-range-track,
.modal-content-compact input[type="range"]::-moz-range-track {
    width: 100%;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
}

.modal-tab-panel input[type="range"]::-moz-range-thumb,
.modal-content-compact input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all var(--transition-fast);
}

.modal-tab-panel input[type="range"]::-moz-range-thumb:hover,
.modal-content-compact input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

/* Custom scrollbar for updates */
.updates-scroll::-webkit-scrollbar {
    width: 8px;
}

.updates-scroll::-webkit-scrollbar-track {
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
}

.updates-scroll::-webkit-scrollbar-thumb {
    background: var(--color-gray-300);
    border-radius: var(--radius-md);
}

.updates-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--color-gray-400);
}

/* ============================================
   MODAL - EXTRACTED INLINE STYLES
   ============================================ */

/* Modal header layouts */
.modal-header-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
    flex-shrink: 0;
}

/* Modal section containers */
.modal-section {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
}

/* Reduce top padding on main fields section for tighter spacing */
#main-fields-section {
    padding-top: var(--spacing-sm);
}

/* Modal form labels */
.modal-form-label {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Modal form inputs */
.modal-form-input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-secondary);
    font-size: var(--font-size-sm);
}

.modal-form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-bg-primary);
}

/* Input with inline button */
.input-with-button {
    display: flex;
    gap: var(--spacing-sm);
    align-items: stretch;
}

.input-with-button .modal-form-input {
    flex: 1;
}

.input-with-button button {
    white-space: nowrap;
}

.modal-form-input-disabled {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-secondary);
    cursor: not-allowed;
    font-size: var(--font-size-sm);
}

.modal-form-textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    resize: vertical;
}

.modal-form-textarea-large {
    width: 100%;
    min-height: 120px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    resize: vertical;
    margin-bottom: var(--spacing-lg);
}

.modal-form-range {
    width: 100%;
    cursor: pointer;
}

.modal-form-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

/* Modal grid layouts */
.modal-grid-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.modal-grid-4col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xs);
}

.modal-grid-4col-align-end {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--spacing-md);
    align-items: end;
}

/* Modal section headers */
.modal-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.modal-section-title {
    color: var(--color-text-primary);
}

/* Modal value displays (for range sliders) */
.modal-value-display {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}

/* Modal checkbox labels */
.modal-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    padding: var(--spacing-sm) 0;
}

.modal-checkbox-label-text {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* Modal info boxes */
.modal-info-box {
    background: var(--color-info-light);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* Modal warning boxes */
.modal-warning-box {
    margin-bottom: var(--spacing-lg);
}

/* Modal button groups */
.modal-button-group {
    display: flex;
    gap: var(--spacing-md);
    justify-content: flex-end;
}

/* Modal spacing utilities */
.modal-mt-md {
    margin-top: var(--spacing-md);
}

.modal-mb-md {
    margin-bottom: var(--spacing-md);
}

.modal-mb-lg {
    margin-bottom: var(--spacing-lg);
}

/* Specific modal content variations */
.modal-content-wide {
    max-width: 1200px;
    width: 90%;
    overflow-x: hidden;
}

/* Ensure modal grids don't cause horizontal scroll */
.modal-grid-4col,
.modal-grid-2col {
    width: 100%;
    min-width: 0; /* Allow grid items to shrink */
}

.modal-grid-4col > div,
.modal-grid-2col > div {
    min-width: 0; /* Prevent grid items from overflowing */
    display: block; /* Reset from body flex inheritance */
}

/* Modal heading variations */
.modal-heading-center {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

/* Modal price display */
.modal-price-display {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

.modal-price-period {
    font-size: var(--font-size-base);
    font-weight: normal;
    color: var(--color-text-secondary);
}

/* Modal footer sections */
.modal-footer-center {
    text-align: center;
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

/* Modal variants */
.modal-content-small {
    max-width: 400px;
    height: auto;
    min-height: auto;
    max-height: 90vh;
    overflow-y: auto;
}

/* ============================================
   TABS (General)
   ============================================ */

.tabs-header {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.tab-content {
    display: none;
}

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

/* ============================================
   INDEX PAGE SPECIFIC
   ============================================ */

/* Tab panels */
.tab-panel {
    display: none;
}

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

/* Search input narrower width for index page tabs (overrides 600px default) */
.search-input-wrapper {
    max-width: 400px;
}

/* ============================================
   LIST PAGE HEADER
   ============================================ */
/* List view wrapper - contains header and table, scrolls as one unit */

.items-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-xl);
    background: var(--color-bg-primary);
    padding: var(--spacing-md) var(--spacing-3xl) var(--spacing-lg) var(--spacing-3xl);
    margin-bottom: 0;
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 110;
}

#items-container {
    padding: 0;
}


.list-title {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.items-header .search-input-wrapper {
    position: relative;
    max-width: 600px;
    min-width: 300px;
    margin-left: 0;
}

/* ============================================
   SEARCH RESULTS
   ============================================ */
.search-results-section {
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-base);
    margin-bottom: var(--spacing-xl);
}

.search-results-section h3 {
    margin-bottom: var(--spacing-lg);
}

.search-results-section h4 {
    margin-top: var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

/* ============================================
   MESSAGES & ALERTS
   ============================================ */
.message {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--font-size-base);
}

.message.error {
    background: var(--color-danger-light);
    color: var(--color-red-dark);
    border: 1px solid var(--color-danger);
}

.message.success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success);
}

.message.info {
    background: var(--color-info-light);
    color: var(--color-info-text);
    border: 1px solid var(--color-info);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

button.hidden,
.hidden { 
    display: none; 
}
.block { display: block; }
.inline-block { display: inline-block; }

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }

.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* ============================================
   DATE PICKER STYLING
   ============================================ */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    filter: invert(37%) sepia(89%) saturate(1165%) hue-rotate(219deg) brightness(94%) contrast(90%);
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    filter: invert(30%) sepia(85%) saturate(1400%) hue-rotate(219deg) brightness(90%) contrast(95%);
}

input[type="date"] {
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    accent-color: var(--color-primary);
}

input[type="date"]::-webkit-datetime-edit-text {
    color: var(--color-text-secondary);
    padding: 0 2px;
}

input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--color-text-primary);
}

/* ============================================
   CHECKBOX STYLING
   ============================================ */
input[type="checkbox"] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

input[type="checkbox"]:focus {
    outline: 2px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* ============================================
   AUTH PAGES (Login, Signup, Password Reset)
   ============================================ */

/* Pending Approval Screen */
.pending-approval-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: var(--spacing-xl);
    background: var(--color-bg-secondary);
}

.pending-approval-box {
    background: var(--color-bg-primary);
    padding: var(--spacing-4xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.pending-approval-box .auth-logo {
    text-align: left;
    margin-bottom: var(--spacing-3xl);
}

.pending-approval-icon {
    width: 48px;
    height: 48px;
    background: var(--color-primary-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-xl);
    color: var(--color-primary);
}

.pending-approval-box h2 {
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    font-weight: 600;
    margin: 0 0 var(--spacing-md);
}

.pending-approval-box p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    margin: 0 0 var(--spacing-md);
    line-height: 1.6;
}
.auth-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    padding: var(--spacing-xl);
}

.auth-box {
    background: var(--color-bg-primary);
    padding: var(--spacing-4xl);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 450px;
}

.auth-logo {
    text-align: left;
    margin-bottom: var(--spacing-3xl);
}

.auth-logo-img {
    height: 32px;
    width: auto;
    display: block;
    margin-bottom: 4px;
}

.auth-logo p {
    color: var(--color-text-tertiary);
    font-size: 12px;
    font-family: var(--font-family-display);
    font-weight: 300;
    margin: 0;
    text-align: left;
}

.form-section {
    width: 100%;
}

.form-section[id]:not([style*="display: none"]),
.form-section[id]:not([style*="display:none"]) {
    display: flex;
    flex-direction: column;
}

#login-form,
#signup-form,
#forgot-password-form {
    display: flex;
    flex-direction: column;
}

[style*="display: none"],
[style*="display:none"] {
    display: none !important;
}

.form-section h2 {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-primary);
    font-weight: 600;
}

.form-section input[type="email"],
.form-section input[type="password"],
.form-section input[type="text"] {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.password-input-wrapper {
    position: relative;
    margin-bottom: var(--spacing-md);
}

.password-input-wrapper input {
    margin-bottom: 0;
    padding-right: 40px;
    width: 100%;
}

.password-toggle-btn {
    position: absolute;
    right: 1px;
    top: 1px;
    bottom: 1px;
    width: 36px;
    background: none;
    border: none;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    cursor: pointer;
    padding: 0;
    margin: 0;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    transform: none;
    box-shadow: none;
}

.password-toggle-btn:hover {
    opacity: 1;
}

.password-toggle-btn i {
    width: 16px;
    height: 16px;
    display: block;
}

.form-section input[readonly] {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.form-section button:not(.password-toggle-btn) {
    display: block;
    width: 100%;
    margin-bottom: var(--spacing-md);
}

.form-section p {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-md) 0;
}

.form-section p a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.form-section p a:hover {
    text-decoration: underline;
}

.auth-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.auth-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

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

.tc-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    width: 100%;
}

.tc-checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.tc-checkbox span {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.tc-checkbox a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.tc-checkbox a:hover {
    text-decoration: underline;
}

.terms-links {
    display: flex;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-sm);
}

.terms-links a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
}

.terms-links a:hover {
    text-decoration: underline;
}

.forgot-password-note {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-xl);
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-base);
}

/* ============================================
   DASHBOARD PAGE
   ============================================ */
.dashboard-stats {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
    flex-wrap: wrap;
}

.dashboard-stat-card {
    background: var(--color-bg-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-primary);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    white-space: nowrap;
}

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

.dashboard-stat-card.clickable {
    cursor: pointer;
}

.dashboard-stat-card h3 {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-stat-number {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
}

.dashboard-stat-hint {
    margin-left: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-style: italic;
}

.dashboard-filters {
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl);
}

#item-owner-filter {
    min-width: 200px;
    width: auto;
}

.filters-grid {
    display: flex;
    gap: var(--spacing-lg);
    align-items: end;
    flex-wrap: wrap;
}

.filter-group {
    min-width: 200px;
    max-width: 250px;
}

.filter-group label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
}

.filter-group select {
    width: 100%;
}

.dashboard-section {
    background: var(--color-bg-primary);
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--spacing-xl);
}

.dashboard-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
}

.dashboard-section-header h2 {
    margin: 0;
    font-size: var(--font-size-xl);
}

.dashboard-section-header select {
    width: auto;
    min-width: 180px;
}

.dashboard-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-bg-primary);
}

.dashboard-table thead {
    background: var(--color-gray-50);
}

.dashboard-table th {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.dashboard-table th.text-center {
    text-align: center;
}

.dashboard-table tbody tr {
    transition: background-color var(--transition-fast);
}

.dashboard-table tbody tr:hover {
    background: var(--color-gray-50);
}

.dashboard-table tbody tr:last-child {
    border-bottom: none;
}

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

.dashboard-table td {
    padding: var(--spacing-md) var(--spacing-lg);
    color: var(--color-text-primary);
    font-size: var(--font-size-base);
    border-bottom: 1px solid var(--color-border);
}

/* ============================================
   LEGAL PAGES (Terms, Privacy)
   ============================================ */
body.legal-page {
    background: var(--color-bg-secondary);
    padding: 0;
    overflow-y: auto;
    height: auto;
    min-height: 100vh;
}

html.legal-html {
    overflow-y: auto;
    height: auto;
}

.legal-nav {
    max-width: 900px;
    margin: 0 auto var(--spacing-md);
}

.legal-nav a {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.legal-nav a:hover {
    color: var(--color-primary-hover);
}

.legal-effective-date {
    color: var(--color-text-tertiary);
    font-style: italic;
    margin-bottom: var(--spacing-2xl);
    font-size: var(--font-size-sm);
}

.legal-language-disclaimer {
    background: var(--color-bg-tertiary);
    border-left: 3px solid var(--color-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
}

.legal-footer {
    margin-top: var(--spacing-3xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    text-align: center;
}

/* Standalone legal pages (terms.html, privacy.html) */
.legal-standalone-header {
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--spacing-2xl);
    position: sticky;
    top: 0;
    z-index: 100;
}

.legal-standalone-header-inner {
    max-width: 900px;
    margin: 0 auto;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-xl);
}

.legal-standalone-logo {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    text-decoration: none;
    flex-shrink: 0;
}

.legal-standalone-logo img {
    height: 32px;
    width: auto;
}

.legal-standalone-tagline {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    font-weight: var(--font-weight-normal);
    letter-spacing: 0.08em;
    text-transform: lowercase;
}

.legal-standalone-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.legal-standalone-nav a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    transition: color 0.15s;
    white-space: nowrap;
}

.legal-standalone-nav a:hover {
    color: var(--color-primary-hover);
}

.legal-standalone-nav a.active {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

/* Improved legal content typography */
.legal-container {
    max-width: 900px;
    margin: var(--spacing-2xl) auto;
    background: var(--color-bg-primary);
    padding: var(--spacing-4xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.legal-container h1 {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: 1.3;
}

.legal-container h2 {
    color: var(--color-text-primary);
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-xl);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
}

.legal-container h3 {
    color: var(--color-text-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-md);
}

.legal-container p {
    font-size: var(--font-size-md);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

.legal-container ul {
    margin: var(--spacing-md) 0 var(--spacing-lg) var(--spacing-xl);
    line-height: 1.7;
}

.legal-container ul li {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.legal-container a {
    color: var(--color-primary);
    text-decoration: none;
}

.legal-container a:hover {
    text-decoration: underline;
}

.legal-standalone-footer {
    max-width: 900px;
    margin: var(--spacing-xl) auto var(--spacing-3xl);
    padding: var(--spacing-lg) 0;
    text-align: center;
    font-size: var(--font-size-sm);
    color: #9ca3af;
    line-height: 1.6;
}

/* Legal pages — app mode vs standalone mode, determined before paint via html.app-mode */
html.app-mode .legal-standalone-header  { display: none; }
html.app-mode .legal-standalone-footer  { display: none; }
html:not(.app-mode) .legal-app-shell    { display: none; }

/* In-app legal layout */
html.app-mode body.legal-page {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

html.app-mode .legal-app-shell .header {
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
}

html.app-mode .legal-app-shell {
    flex-shrink: 0;
}

html.app-mode .legal-content-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: var(--spacing-xl) var(--spacing-3xl);
    background: var(--color-bg-primary);
}

html.app-mode .legal-container {
    max-width: 720px;
    margin: 0 auto var(--spacing-2xl);
    background: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* In-app legal page cards */
.legal-doc-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-xl);
}

.legal-doc-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    text-decoration: none;
    display: block;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.legal-doc-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.legal-doc-card-icon {
    width: 40px;
    height: 40px;
    background: var(--color-primary-light);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-md);
    color: var(--color-primary);
}

.legal-doc-card h3 {
    color: var(--color-text-primary);
    font-size: var(--font-size-lg);
    margin: 0 0 var(--spacing-sm) 0;
}

.legal-doc-card p {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

.legal-doc-card-link {
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

@media (max-width: 600px) {
    .legal-doc-cards {
        grid-template-columns: 1fr;
    }
    .legal-standalone-header-inner {
        height: auto;
        padding: var(--spacing-md) 0;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    .legal-standalone-tagline {
        display: none;
    }
    .legal-container {
        padding: var(--spacing-xl);
        margin: var(--spacing-md) auto;
    }
}

/* ============================================
   HELP PAGE
   ============================================ */

.help-container {
    width: 100%;
    background: var(--color-bg-primary);
    padding: var(--spacing-xl) var(--spacing-3xl);
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Reset z-index for all help content to ensure it stays below */
.help-container > *:not(.tabs-nav) {
    position: relative;
    z-index: 1;
}

.help-container h2 {
    position: relative;
    z-index: 1;
    color: var(--color-text-primary);
    margin-top: var(--spacing-3xl);
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-sm);
    font-size: var(--font-size-xl);
}

.help-container h2:first-of-type {
    margin-top: 0;
}

.help-container h3 {
    color: var(--color-text-primary);
    margin-top: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md);
}

.help-container p {
    font-size: var(--font-size-md);
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
    color: var(--color-text-secondary);
}

.help-container ul {
    margin: var(--spacing-md) 0 var(--spacing-lg) var(--spacing-xl);
    line-height: 1.7;
}

.help-container ul li {
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
}

.faq-item {
    margin-bottom: var(--spacing-2xl);
}

.contact-box {
    background: var(--color-gray-50);
    padding: var(--spacing-xl);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-3xl);
    border-left: 4px solid var(--color-primary);
}

.contact-box h3 {
    margin-top: 0;
}

.help-container code {
    background: var(--color-gray-100);
    padding: var(--spacing-2xs) var(--spacing-xs-plus);
    border-radius: var(--radius-sm);
    font-family: monospace;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}


/* Mobile responsive for help page */
@media (max-width: 768px) {
    .help-container {
        padding: var(--spacing-lg);
    }
}

/* ============================================
   BUSINESS FUNCTIONS PAGE
   ============================================ */

.business-functions-scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

.business-functions-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-3xl);
}

.page-title {
    margin-bottom: var(--spacing-xl);
    color: var(--color-text-primary);
}

.section-description {
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-lg);
}

.items-list {
    margin-bottom: var(--spacing-xl);
}

.item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
    transition: background-color var(--transition-fast);
}

.item-row:hover {
    background: var(--color-gray-50);
}

.add-item-form {
    display: flex;
    gap: var(--spacing-md);
    max-width: 600px;
    margin-bottom: var(--spacing-md);
}

.add-item-input {
    flex: 1;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .business-functions-content {
        padding: var(--spacing-lg);
    }
    
    .add-item-form {
        flex-direction: column;
        max-width: 100%;
    }
    
    .add-item-input {
        width: 100%;
    }
    
    .item-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .item-row button {
        width: 100%;
    }
}


/* ============================================
   UPGRADE MODAL
   ============================================ */
/* Narrow modal for seat selection */
.modal-content-narrow {
    max-width: 480px;
    width: 90%;
    height: auto;
    max-height: 90vh;
    overflow-y: auto;
}

/* Seat selector */
.seat-selector {
    padding: var(--spacing-md) 0;
}

.seat-selector-info p {
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-base);
}

.seat-current-info {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
}

.seat-selector-control {
    margin: var(--spacing-lg) 0;
}

.seat-selector-control label {
    display: block;
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.seat-stepper {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    max-width: 180px;
}

.seat-stepper-btn {
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.seat-stepper-btn:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: var(--color-primary);
}

.seat-stepper-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.seat-stepper input[type="number"] {
    width: 70px;
    height: 40px;
    text-align: center;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    -moz-appearance: textfield;
}

.seat-stepper input[type="number"]::-webkit-inner-spin-button,
.seat-stepper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.seat-min-note {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.seat-cost-summary {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-sm);
}

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

.seat-cost-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.seat-cost-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    width: 100%;
}

/* ============================================
   HIGH ZOOM / NARROW VIEWPORT (triggers mobile menu)
   ============================================ */
@media (max-width: 1100px) {
    /* Show hamburger menu */
    .mobile-menu-toggle {
        display: inline-flex !important;
    }
    
    /* Hide regular menu, show when toggled */
    .header-actions {
        display: none !important;
    }
    
    /* header-right must push itself right when header-actions is hidden */
    .header-right {
        margin-left: auto;
    }
    
    .header-actions.mobile-menu-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: var(--mobile-header-height);
        left: 0;
        right: 0;
        background: var(--color-bg-primary);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-fixed);
    }
    
    .header-actions.mobile-menu-open button {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: var(--spacing-sm);
    }
    
    .list-view-wrapper {
        min-width: 900px;  /* Reduce wrapper too! */
    }


}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 768px) {
    /* Mobile menu toggle */
    .mobile-menu-toggle {
        display: inline-flex !important;
        align-self: center;
        background: transparent;
        border: none;
        padding: var(--spacing-sm);
        cursor: pointer;
        width: auto;
        min-width: auto;
    }
    
    .mobile-menu-toggle i {
        width: 24px;
        height: 24px;
        color: var(--color-primary);
    }
    
    /* Hide menu by default - MUST come BEFORE .mobile-menu-open */
    .header-actions {
        display: none !important;
    }
    
    .header-actions.mobile-menu-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: var(--mobile-header-height);
        left: 0;
        right: 0;
        background: var(--color-bg-primary);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        z-index: var(--z-fixed);
    }
    
    .header-actions.mobile-menu-open button {
        width: 100%;
        justify-content: flex-start;
        margin-bottom: var(--spacing-sm);
    }

    .header-actions.mobile-menu-open .list-actions-dropdown {
        width: 100%;
    }
    
    .header-actions.mobile-menu-open .list-actions-dropdown button {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }
    
    /* Layout */
    .dashboard {
        padding: 0; /* Match desktop — no gap around app shell */
        height: 100dvh; /* Use dynamic viewport height on mobile — avoids browser chrome overlap */
    }

    html, body {
        height: 100dvh; /* Match dashboard — 100vh includes browser chrome on mobile */
    }

    .index-scroll-wrapper {
        -webkit-overflow-scrolling: touch; /* iOS Safari: enables momentum scrolling and proper sticky context */
    }

    .header {
        padding: var(--spacing-md);
    }
    
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .content-card {
        padding: 0; /* Remove padding — index-scroll-wrapper handles scroll, not content-card */
    }

     
.items-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }

    #items-container {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Tables - horizontal scroll */
    .items-table,
    .lists-table {
        min-width: 1100px; /* Base value — actual width determined by columns */
    }

    /* Stack search and filter vertically */
    .items-header > div {
        flex-direction: column !important;
        gap: var(--spacing-sm) !important;
    }
    
    .items-header .search-input-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .list-title {
        font-size: var(--font-size-xl);
    }
    
    .modal-content {
        margin: var(--spacing-sm-plus);
        padding: var(--spacing-lg);
        width: calc(100% - 20px);  /* ADD THIS */
        max-width: calc(100% - 20px);  /* ADD THIS */
        height: auto;  /* ADD THIS */
        max-height: calc(100vh - 40px);  /* ADD THIS */
        overflow-y: auto;  /* ADD THIS */
    }

    /* Item details modal overlay — no padding so content fills full screen */
    #item-details-modal.modal {
        padding: 0;
    }

    /* Item details modal — full screen on mobile, internal scroll */
    .modal-content-wide {
        width: 100%;
        max-width: 100%;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
        overflow: hidden; /* modal-form-card handles scroll internally */
    }

    /* modal-form-card — flex column so header/footer stay fixed, body scrolls */
    #item-details-modal .modal-form-card {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
        border: none;
        border-radius: 0;
    }

    /* Tab panel scrolls within the fixed modal height */
    #item-details-modal .modal-tab-panel {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    /* Header — relative so X can be positioned absolute top-right */
    #item-details-modal .modal-card-header {
        position: relative;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: var(--spacing-xs);
        padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) var(--spacing-md);
        padding-right: 48px; /* Reserve space for absolute X button */
    }

    /* X button — fixed top-right of header */
    #item-details-modal #modal-close-btn {
        position: absolute;
        top: var(--spacing-md);
        right: var(--spacing-md);
    }

    /* Title block — full width */
    #item-details-modal .modal-header-left {
        width: 100%;
    }

    /* Title — stack List and Item onto separate rows */
    #item-details-modal .modal-title-inline {
        flex-direction: column;
        gap: var(--spacing-xs);
        align-items: flex-start;
    }

    #item-details-modal .modal-list-name-wrapper {
        white-space: normal;
        max-width: 100%;
        overflow: visible;
        text-overflow: unset;
    }

    #item-details-modal #modal-item-number-wrapper {
        white-space: nowrap;
    }

    /* Right side — full width row, status badges + permissions stacked, X is absolute */
    #item-details-modal .modal-header-right {
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }

    /* Status badges row */
    #item-details-modal #modal-status-badge {
        order: 1;
    }

    /* Permissions below badges */
    #item-details-modal #modal-permissions-display {
        order: 2;
        white-space: normal;
        flex-wrap: wrap;
    }

    /* External warning below permissions */
    #item-details-modal #external-warning {
        order: 3;
    }

    /* Tab panel scrolls within the fixed modal height — defined above with modal-form-card */

    /* Footer — metadata full width on top row, buttons below */
    #item-details-modal .settings-card-footer {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
        flex-shrink: unset;
    }

    /* Metadata (created by) — full width, top of footer */
    #item-details-modal #item-metadata {
        width: 100%;
        text-align: left;
        order: 1;
        flex: none;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: var(--spacing-sm);
        margin-bottom: var(--spacing-xs);
    }

    /* Left buttons (Delete/Restore/Follow) — row below metadata */
    #item-details-modal .modal-footer-left {
        order: 2;
        flex: 1;
    }

    /* Cancel/Save buttons — right side of same row */
    #item-details-modal .settings-card-footer-buttons {
        order: 3;
        flex: 0 0 auto;
    }

    /* Hide Cancel on mobile — X button serves this purpose */
    #item-details-modal #modal-cancel-btn {
        display: none;
    }

    /* Hide original tabs action buttons on mobile — moved to hamburger menu */
    .tabs-overflow-btn,
    #context-action-btn-items,
    #context-action-btn-lists,
    #columns-btn {
        display: none !important;
    }

    /* Mobile actions section — separator + action mirrors, only in open menu */
    .mobile-actions-section {
        width: 100%;
        border-top: 1px solid var(--color-border);
        margin-top: var(--spacing-sm);
        padding-top: var(--spacing-sm);
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mobile-actions-section .nav-btn {
        width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .mobile-actions-section .nav-btn.hidden {
        display: none !important;
    }

    /* Primary action button (Add Item / Add List) — green, white text, top margin separator */
    .mobile-actions-section .mobile-action-primary {
        background: var(--color-success);
        color: var(--color-text-inverse);
        margin-top: var(--spacing-sm);
        border-radius: var(--radius-md);
        font-weight: var(--font-weight-medium);
    }

    .mobile-actions-section .mobile-action-primary:hover {
        background: var(--color-success-hover);
        color: var(--color-text-inverse);
    }

    /* Scope active indicator — filled dot before the button text */
    .mobile-actions-section .mobile-scope-active::before {
        content: '●';
        color: var(--color-primary);
        font-size: 8px;
        margin-right: var(--spacing-sm);
        line-height: 1;
        flex-shrink: 0;
    }

    /* Add Update modal — constrain to viewport, body scrolls internally */
    #add-update-modal .modal-content-compact {
        max-height: 90dvh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        margin: 0 var(--spacing-md);
        padding: 0;
        width: calc(100% - var(--spacing-3xl));
    }

    /* Override modal-content-medium's overflow:visible which breaks mobile containment */
    #add-update-modal .modal-content-medium {
        overflow: hidden;
    }

    #add-update-modal .modal-form-card {
        display: flex;
        flex-direction: column;
        max-height: 90dvh;
        overflow: hidden;
    }

    #add-update-modal .settings-card-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Stack label above input on mobile — prevents overflow from 200px+320px min-width */
    #add-update-modal .settings-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    #add-update-modal .settings-form-label {
        flex: none;
        width: 100%;
    }

    #add-update-modal .settings-form-input {
        width: 100%;
        max-width: 100%;
    }

    /* Slider — full width, taller touch target */
    #add-update-modal .range-with-value {
        width: 100%;
    }

    #add-update-modal .range-with-value input[type="range"] {
        height: 36px;
        width: 100%;
    }

    /* Put on Hold hint text — wrap within container */
    #add-update-modal .checkbox-label-inline {
        align-items: flex-start;
        width: 100%;
    }

    #add-update-modal .checkbox-label-inline span {
        white-space: normal;
        word-wrap: break-word;
        flex: 1;
    }
    
    .modal-content h2 {
        font-size: var(--font-size-xl);  /* ADD THIS - smaller title on mobile */
        word-wrap: break-word;  /* ADD THIS - wrap long titles */
    }
    
    .notifications-panel {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
    }
    
    .search-container {
        flex-direction: column;
    }
    
    .search-input-wrapper {
        max-width: 100%;
        margin-left: 0;
    }

    #item-owner-filter {
        width: 100%;
        min-width: 100%;
    }
}



/* ============================================
   ACCESSIBILITY
   ============================================ */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes btn-throb {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(102, 126, 234, 0.35);
    }
}

.btn-throb {
    animation: btn-throb 1.8s ease-in-out infinite;
}

@media (max-width: 768px) {
    .btn-throb {
        animation: none;
    }
}

.empty-message-heading {
    display: block;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.empty-message-subtext {
    display: block;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}



/* Hamburger menu (hidden by default) */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    padding: var(--spacing-sm);
    cursor: pointer;
    width: auto;  /* ADD THIS */
    min-width: auto;  /* ADD THIS */
}

.mobile-menu-toggle i {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.mobile-menu-dropdown {
    display: none;
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background: var(--color-bg-primary);
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    padding: var(--spacing-lg);
}

.mobile-menu-dropdown.show {
    display: block;
}

.mobile-menu-dropdown button {
    width: 100%;
    justify-content: flex-start;
    margin-bottom: var(--spacing-sm);
}

/* ============================================
   ORG DASHBOARD SPECIFIC
   ============================================ */

/* Dashboard header area */
.dashboard-header-wrapper {
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}

.dashboard-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.dashboard-title-stats {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.dashboard-inline-stats {
    display: flex;
    gap: var(--spacing-lg);
    align-items: center;
    flex-wrap: wrap;
}

.dashboard-stat-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.dashboard-stat-inline .label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

.dashboard-stat-inline .value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.dashboard-view-filter {
    min-width: 200px;
    max-width: 250px;
}

/* Tab content header (h3 + filter) */
.tab-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);
    gap: var(--spacing-md);
}

.tab-content-header h3 {
    margin: 0;
}

.tab-content-header select {
    width: auto;
    max-width: 250px;
}

/* Scroll wrapper for dashboard */
.dashboard-scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .dashboard-title-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    .dashboard-inline-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
    
    .dashboard-view-filter {
        width: 100%;
        max-width: 100%;
    }
    
    /* Stack h3 and dropdown vertically */
    .tab-content-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .tab-content-header select {
        width: 100%;
        max-width: 100%;
    }
}
/* ============================================
   EXCEL-LIKE MODAL ENHANCEMENTS
   ============================================ */

/* Title and Target Date row */
.title-target-grid {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* Description and Action Required side-by-side */
.description-action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

/* Latest Updates section header */
.section-header-with-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.section-header-with-button strong {
    color: var(--color-text-primary);
}

/* Updates list container - clean, no background */
.updates-container {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

/* Individual update item */
.update-item {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.update-item p {
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm) 0;
    line-height: 1.5;
}

.update-item small {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

/* Update & History modal — history section */
.update-history-section {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    background: var(--color-bg-secondary);
    width: 100%;
    box-sizing: border-box;
}

.update-history-loading {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) 0;
}

.update-history-entry {
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.update-history-entry:last-child {
    border-bottom: none;
}

.update-history-text {
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.5;
    font-size: var(--font-size-sm);
}

.update-history-meta {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
}

.update-history-empty {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    font-style: italic;
    margin: 0;
    padding: var(--spacing-sm) 0;
}

/* Main fields grid - 4 columns */
.main-fields-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

/* PI index grid - 4 columns */
.pi-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--spacing-md);
    align-items: end;
}

/* Read-only form fields */
.form-field-readonly {
    background-color: var(--color-gray-100);
    cursor: not-allowed;
}

/* Wide modal for Excel-like view */
/* Modal-content-wide styles defined in MODALS section above */

/* Modal-section styles defined in MODALS section above */


/* ============================================
   UNIFIED FILTER SYSTEM STYLES
   Add this to your styles.css file
   ============================================ */

.filters-container {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
    flex-wrap: nowrap; /* Keep on same line */
}

.filters-container select {
    min-width: 110px; /* Narrower than before */
    max-width: 160px;
    padding: var(--spacing-md); /* Match search input vertical padding */
    border: 1px solid var(--color-border); /* Match search input border thickness */
    border-radius: var(--radius-md); /* Match search input border-radius */
    background: white;
    font-size: var(--font-size-base); /* Match search input font-size */
    cursor: pointer;
    transition: border-color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filters-container select:hover {
    border-color: var(--color-primary);
}

.filters-container select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .filters-container {
        gap: var(--spacing-xs);
        flex-wrap: wrap; /* Allow wrapping on mobile */
    }
    
    .filters-container select {
        min-width: 100px;
        font-size: var(--font-size-sm);
        padding: var(--spacing-xs-plus) var(--spacing-sm);
    }
}
/* ============================================
   INDEX.HTML MOBILE RESPONSIVE FIXES
   Add this to your styles.css file
   ============================================ */

/* Search and filters wrapper - desktop */
.search-and-filters-wrapper {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

/* Search bar on index.html - desktop */
.search-and-filters-wrapper .search-input-wrapper {
    flex: 1;
    max-width: 400px;
}

/* Ensure search input has proper padding for icon */
.search-and-filters-wrapper .search-input-field {
    padding-left: 45px;
}

/* Mobile styles for search bar and filters */
@media (max-width: 768px) {
    /* Stack search and filters vertically on mobile */
    .search-and-filters-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
    }
    
    /* Search bar takes full width on mobile */
    .search-and-filters-wrapper .search-input-wrapper {
        flex: 1;
        max-width: 100%;
        width: 100%;
    }
    
    /* Filters container on mobile */
    .search-and-filters-wrapper .filters-container {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    
    /* Filter dropdowns on mobile */
    .search-and-filters-wrapper .filters-container select {
        min-width: 110px;
        flex: 1;
    }
}
/* ============================================
   BOLD BADGE ENHANCEMENTS
   ============================================ */

/* Status Hold badge - Grey (consistent with other hold states) */
/* ============================================
   KPI BAR ENHANCEMENTS - Clarity & Context
   ============================================ */

/* KPI section wrapper with label */
.kpi-section {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: nowrap;
}

/* Context label for KPI groups */
.kpi-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* KPI badges container */
.kpi-badges {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    align-items: center;
}

/* Make KPI badges obviously clickable */
.kpi-item {
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Enhance clickability cue with pointer cursor on all KPI badges */
.kpi-bar .status-badge,
.kpi-bar .type-badge,
.kpi-bar .performance-badge {
    cursor: pointer;
    user-select: none;
}

/* Responsive: Hide labels on mobile, stack KPIs */
@media (max-width: 768px) {
    .kpi-label {
        display: none;
    }
    
    .kpi-badges {
        gap: var(--spacing-xs);
    }
}

/* KPI Bar hover effects - Enhanced for bold badges */
.kpi-bar .kpi-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    filter: brightness(1.1);
}

/* KPI selected state - Bold ring */
.kpi-bar .kpi-item.kpi-selected {
    box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-primary) !important;
    transform: scale(1.05) !important;
}

/* Owner badge - Keep gradient but ensure bold */
/* Fixed-width KPI badges to prevent width jumping when counts change */
/* CRITICAL: Hide toggle button on desktop by default - media query will override for mobile */
.kpi-toggle-btn {
    display: none !important;
}

.kpi-bar .kpi-item {
    min-width: 95px; /* Fixed width to accommodate all badge types: "Closed: 999" or "Active: 999" */
    width: 95px;
    justify-content: center;
    text-align: center;
}

/* Ensure all badge types in KPI bar maintain fixed width */
.kpi-bar .status-badge,
.kpi-bar .type-badge,
.kpi-bar .performance-badge {
    min-width: 95px;
    width: 95px;
    justify-content: center;
}

/* Responsive: Reduce badge width on tablets */
@media (max-width: 768px) {
    .kpi-bar .kpi-item,
    .kpi-bar .status-badge,
    .kpi-bar .type-badge,
    .kpi-bar .performance-badge {
        min-width: 80px;
        width: 80px;
        font-size: var(--font-size-xs);
        padding: 5px var(--spacing-sm-plus);
    }
    
    /* Reduce selection ring to prevent overlap */
    .kpi-bar .kpi-item.kpi-selected {
        box-shadow: 0 0 0 1px white, 0 0 0 2px var(--color-primary) !important;
    }
}

/* Responsive: Further reduce on mobile phones with better spacing */
@media (max-width: 480px) {
    /* KPI Bar container with toggle button */
    #kpi-bar-container {
        position: relative;
    }
    
    /* Toggle button for mobile KPI bar - ONLY VISIBLE ON MOBILE */
    .kpi-toggle-btn {
        display: flex !important; /* Override any display:none */
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-md);
        width: auto; /* Auto width - only as wide as needed */
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-primary);
        color: white;
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        margin-bottom: var(--spacing-sm);
    }
    
    .kpi-toggle-btn i,
    .kpi-toggle-btn svg {
        width: 16px;
        height: 16px;
        transition: transform var(--transition-base);
    }
    
    .kpi-toggle-btn.expanded i,
    .kpi-toggle-btn.expanded svg {
        transform: rotate(180deg);
    }
    
    /* Hide KPI bar by default on mobile */
    .kpi-bar {
        display: none !important; /* Force hide by default */
        flex-wrap: wrap;
        gap: var(--spacing-sm); /* More gap to prevent border overlap */
        margin-top: var(--spacing-sm);
    }
    
    /* Show when expanded */
    .kpi-bar.mobile-expanded {
        display: flex !important;
    }
    
    .kpi-bar .kpi-item,
    .kpi-bar .status-badge,
    .kpi-bar .type-badge,
    .kpi-bar .performance-badge {
        min-width: 70px;
        width: 70px;
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }
    
    /* Thinner selection ring on mobile to prevent overlap */
    .kpi-bar .kpi-item.kpi-selected {
        box-shadow: 0 0 0 2px var(--color-primary) !important;
        transform: scale(1.02) !important; /* Less scaling to prevent overlap */
    }
    
    .kpi-bar .kpi-item i,
    .kpi-bar .kpi-item svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* Type and Status badge styles defined in BADGES section above */



/* ============================================
   USAGE WIDGET STYLES
   Add these styles to your existing styles.css
   ============================================ */

/* Usage Widget Container */
.usage-widget-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-md);
}

/* Usage Widget */
.usage-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs, 8px);
}

.usage-widget-header h3 {
  margin: 0;
  font-size: var(--font-size-lg, 20px);
  color: var(--color-text-primary, #111827);
  font-weight: 600;
}

/* Tier Badges */
.tier-badge {
  /* Extends: .badge .badge-sm (but pill-shaped) */
  border-radius: var(--radius-full); /* Pill shape */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  padding: var(--spacing-xs) var(--spacing-md);
}

.tier-paid {
  background: var(--color-success-lighter, #dcfce7);
  color: var(--color-success-dark, #166534);
}

.tier-cancelled {
  background: var(--color-warning-light);
  color: var(--color-warning-dark, #92400e);
}

.tier-free {
  background: var(--color-info-lighter);
  color: var(--color-info-dark);
}

/* Usage Widget Body */
.usage-widget-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg, 24px);
}

/* Usage Widget Plan Message */
.usage-widget-plan-message {
  padding: var(--spacing-sm) var(--spacing-md);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  border-left: 3px solid var(--color-primary);
  background: var(--color-bg-light, #f8f9fa);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Usage Item */
.usage-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs, 6px);
}

.usage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs, 6px);
}

.usage-label {
  font-weight: 500;
  color: var(--color-text-primary, #111827);
  font-size: var(--font-size-base, 14px);
}

.usage-count {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary, #6B7280);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 6px);
  font-weight: 500;
}

/* Unlimited Badge */
.unlimited-badge {
  background: var(--gradient-primary);
  color: white;
  padding: var(--spacing-2xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Usage Bar */
.usage-bar-container {
  height: 8px;
  background: var(--color-bg-secondary, #F3F4F6);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.usage-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.3s ease, background-color 0.3s ease;
}

.usage-percentage {
  font-size: var(--font-size-xs, 12px);
  font-weight: 600;
  text-align: right;
  margin-top: 4px;
}

/* Usage Info */
.usage-info {
  font-size: var(--font-size-sm, 13px);
  color: var(--color-text-secondary, #6B7280);
  padding: var(--spacing-xs, 6px) var(--spacing-sm, 12px);
  background: var(--color-bg-secondary, #F3F4F6);
  border-radius: var(--border-radius, 8px);
}

/* Usage Tip */
.usage-tip {
  margin-top: var(--spacing-md, 16px);
  padding: var(--spacing-sm, 12px);
  background: var(--color-info-lightest);
  border: 1px solid var(--color-info-medium);
  border-radius: var(--border-radius, 8px);
  color: var(--color-info-dark);
  font-size: var(--font-size-sm, 13px);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 6px);
}

.usage-tip-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-info-dark);
}

.usage-tip strong {
  color: var(--color-info-darker);
}

/* Widget Footer */
.usage-widget-footer {
  margin-top: var(--spacing-md, 16px);
  padding: var(--spacing-md, 16px) var(--spacing-lg, 24px);
  margin-left: calc(-1 * var(--spacing-lg, 24px));
  margin-right: calc(-1 * var(--spacing-lg, 24px));
  margin-bottom: calc(-1 * var(--spacing-lg, 24px));
  border-top: 1px solid var(--color-border, #E5E7EB);
  border-radius: 0 0 var(--border-radius, 8px) var(--border-radius, 8px);
  background: var(--color-gray-50);
  display: flex;
  gap: var(--spacing-sm, 8px);
  justify-content: flex-end;
}

/* Usage Warning */
.usage-warning {
  margin-top: var(--spacing-md, 16px);
  padding: var(--spacing-sm, 12px);
  background: var(--color-warning-lighter);
  border: 1px solid var(--color-orange-light);
  border-radius: var(--border-radius, 8px);
  color: var(--color-warning-dark);
  font-size: var(--font-size-sm, 13px);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs, 6px);
}

/* Loading and Error States */
.loading-spinner {
  text-align: center;
  padding: var(--spacing-lg, 24px);
  color: var(--color-text-secondary, #6B7280);
  font-size: var(--font-size-sm, 13px);
}

.error-message {
  text-align: center;
  padding: var(--spacing-lg, 24px);
  color: var(--color-red-error);
  font-size: var(--font-size-sm, 13px);
}

/* Responsive Design */
@media (max-width: 768px) {
  .usage-widget {
    padding: var(--spacing-md, 16px);
    margin: var(--spacing-sm, 8px) 0;
  }
  
  .usage-widget-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs, 6px);
  }
  
  .usage-widget-header h3 {
    font-size: var(--font-size-md, 16px);
  }
  
  .tier-badge {
    align-self: flex-start;
  }
  
  .usage-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .usage-count {
    font-size: var(--font-size-xs, 12px);
  }
  
  .usage-percentage {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .usage-widget-container {
    padding: var(--spacing-sm, 8px);
  }
  
  .usage-widget-body {
    gap: var(--spacing-md, 16px);
  }
}

/* Animation for when usage updates */
@keyframes usage-update {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

.usage-widget.updating {
  animation: usage-update 0.3s ease;
}

/* Spinner Animation */
.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: var(--color-text-inverse);
  animation: spin 0.6s linear infinite;
}

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

/* Info Banner */
.info-banner {
  background: var(--color-info-light);
  border: 1px solid var(--color-info);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-text-primary);
}

.info-banner i {
  flex-shrink: 0;
  color: var(--color-info);
  width: 20px;
  height: 20px;
}

/* External Warning Banner */
.external-warning-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: #B42318;
}

.external-warning-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.external-warning-content span {
  font-size: var(--font-size-sm);
}

/* Permission/Info Banner (similar to external warning but blue) */
.info-banner-content {
  background: var(--color-info-light);
  border: 2px solid var(--color-info);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.info-banner-content i {
  width: 24px;
  height: 24px;
  color: var(--color-info);
  flex-shrink: 0;
}

.info-banner-content span {
  color: var(--color-info-dark);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

/* External Badge styles defined in BADGE section above */

.external-badge i {
  width: 14px;
  height: 14px;
}

/* Watcher Item styles defined in MODAL CONTENT section above */

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Alignment */
.text-center {
  text-align: center;
}

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

/* Margin Utilities */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mb-0 {
  margin-bottom: 0;
}

.mb-xs {
  margin-bottom: var(--spacing-xs);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

.mb-xl {
  margin-bottom: var(--spacing-xl);
}

.mb-2xl {
  margin-bottom: var(--spacing-2xl);
}

.my-xs {
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}

.my-sm {
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

/* Padding Utilities */
.p-0 {
  padding: 0;
}

.p-sm {
  padding: var(--spacing-sm);
}

.p-md {
  padding: var(--spacing-md);
}

.p-lg {
  padding: var(--spacing-lg);
}

.pt-lg {
  padding-top: var(--spacing-lg);
}

/* Width Utilities */
.w-40 {
  width: 40px;
}

.w-full {
  width: 100%;
}

.min-w-150 {
  min-width: 150px;
}

.min-w-250 {
  min-width: 250px;
}

.max-w-600 {
  max-width: 600px;
}

.max-w-800 {
  max-width: 800px;
}

/* Flex Utilities */
.flex-1 {
  flex: 1;
}

.flex {
  display: flex;
}

.flex-gap-sm {
  display: flex;
  gap: var(--spacing-sm);
}

.flex-gap-xs {
  display: flex;
  gap: var(--spacing-xs);
}

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

.justify-flex-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.ml-auto {
  margin-left: auto;
}

/* Icon Utilities */
.icon-inline {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* Display Utilities */
button.hidden,
.hidden {
  display: none;
}

.font-italic {
  font-style: italic;
}

.input-disabled,
input.input-disabled,
input[type="text"].input-disabled,
input[type="email"].input-disabled,
input[type="password"].input-disabled,
input[type="number"].input-disabled,
textarea.input-disabled,
select.input-disabled {
  background: var(--color-gray-100);
  cursor: not-allowed;
  color: var(--color-text-secondary);
}

/* ============================================
   PASSWORD CHANGE FORM STYLES
   ============================================ */

.password-change-form {
    max-width: 400px;
}

.password-change-form .form-field {
    margin-bottom: var(--spacing-md);
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input {
    flex: 1;
    padding-right: 44px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle-btn:hover {
    color: var(--color-text-primary);
}

.password-toggle-btn i {
    width: 18px;
    height: 18px;
}

.password-strength {
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.password-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.password-strength-fill {
    height: 100%;
    transition: width 0.3s ease, background-color 0.3s ease;
    border-radius: 2px;
}

.strength-weak {
    background: var(--color-danger);
    width: 25%;
}

.strength-fair {
    background: var(--color-warning);
    width: 50%;
}

.strength-good {
    background: var(--color-info);
    width: 75%;
}

.strength-strong {
    background: var(--color-success);
    width: 100%;
}

.password-strength-text {
    font-size: var(--font-size-xs);
    white-space: nowrap;
    min-width: 50px;
}

.password-match-message {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
}

/* Button Color Utilities */
.btn-success-solid {
  background: var(--color-success);
  color: white;
}

.btn-success-solid:hover:not(:disabled) {
  background: var(--color-success-hover);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
}

.btn-info-solid {
  background: var(--color-info);
  color: white;
}

.btn-info-solid:hover:not(:disabled) {
  background: var(--color-info-hover);
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

.btn-warning-solid {
  background: var(--color-warning);
  color: white;
}

.btn-warning-solid:hover:not(:disabled) {
  background: var(--color-warning-hover);
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
}

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

.btn-danger-solid:hover:not(:disabled) {
  background: var(--color-danger-hover);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

/* ============================================
   SETTINGS PAGE COMPONENTS
   ============================================ */

/* Single Row Controls Layout */
.user-controls-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
}

.filter-field-inline {
  flex: 1;
  min-width: 250px;
}

.filter-select-inline {
  min-width: 150px;
}

.filter-select-inline select {
  width: 100%;
}

/* Bulk Actions Inline */
.bulk-actions-inline {
  display: flex;
  gap: var(--spacing-xs);
  margin-left: auto;
}

.bulk-actions-inline button.bulk-btn-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: auto;
}

/* Settings Header */
.settings-header {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.settings-header h2 {
  margin: 0;
}

/* Settings Sections */
.settings-section {
  margin-bottom: var(--spacing-xl);
}

.settings-section-title {
  margin-bottom: var(--spacing-lg);
}

.settings-subsection {
  margin: var(--spacing-sm) 0;
  font-weight: 600;
}

.settings-note {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* Auto-approve Section */
.auto-approve-section {
  background: var(--color-gray-50);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-xl);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
  margin-bottom: var(--spacing-sm);
}

.checkbox-label input[type="checkbox"] {
  flex-shrink: 0;
}

.checkbox-title {
  font-weight: var(--font-weight-semibold);
}

.checkbox-description {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
}

/* User Filter Section */
.user-filter-section {
  background: var(--color-gray-50);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-lg);
}

.filter-controls {
  display: flex;
  gap: var(--spacing-md);
  align-items: end;
}

.filter-field {
  width: 300px;
}

.filter-field label,
.filter-select-wrapper label {
  display: block;
  margin-bottom: var(--spacing-xs);
}

.filter-select-wrapper {
  width: 180px;
}

.filter-button-wrapper {
  align-self: flex-end;
}

/* Bulk Toolbar */
.bulk-toolbar {
  display: none !important;
}

.bulk-toolbar.active {
  display: flex !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-primary);
  color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--spacing-md);
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.bulk-toolbar-label {
  font-weight: var(--font-weight-semibold);
}

.bulk-toolbar-actions {
  display: flex;
  gap: var(--spacing-sm);
  margin-left: auto;
}

/* Pagination Info */
.pagination-info {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.pagination-controls {
  margin-top: var(--spacing-lg);
  text-align: center;
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   SETTINGS FORM - SUPABASE STYLE
   Clean, boxed sections with horizontal form layout
   ============================================ */

/* Settings page container - centered content */
.settings-page-content {
    max-width: 720px;
    margin: 0 auto;
}

/* Boxed section with border */
.settings-card {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    overflow: hidden;
}

.settings-card-header {
    padding: var(--spacing-sm) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.settings-card-header h3 {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.settings-card-header p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.settings-card-body {
    padding: 0;
}

/* Modal form card - bordered container wrapping header, body, footer in modals */
.modal-form-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-primary);
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* Wide variant for Item Details modal */
.modal-form-card-wide {
    max-width: none;
}

/* Scrollable content area within modal-form-card */
.modal-form-card > .settings-card-body,
.modal-form-card > .modal-tab-panel {
    flex: 1;
    min-height: 0;
}

/* Most modals: tab panel scrolls as a whole */
.modal-form-card > .modal-tab-panel.active {
    overflow-y: auto;
}

/* Item details modal: tab panel clips — scroll handled by updates box internally */
#item-details-modal > .modal-form-card > .modal-tab-panel.active {
    overflow: hidden;
}

/* Card body with padding - for modals with free-text content (not form rows) */
.settings-card-body-padded {
    padding: var(--spacing-lg) var(--spacing-xl);
}

/* Form group within padded modal body - stacked label + input */
.modal-form-group {
    margin-top: var(--spacing-md);
}

.modal-form-group .settings-form-label {
    flex: none;
    display: block;
    margin-bottom: var(--spacing-sm);
}

.modal-form-group .modal-form-input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Footer stays at bottom, never scrolls */
.modal-form-card > .settings-card-footer {
    flex-shrink: 0;
}

/* Modal card header - flex layout with close X */
.modal-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-card-header .modal-header-left {
    flex: 1;
}

.modal-card-header .modal-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal-card-header h3 {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

/* Prevent text selection while dragging a modal */
.modal-card-header.dragging,
#item-details-modal .modal-card-header,
#add-update-modal .modal-card-header {
    user-select: none;
}

/* Note section between body and footer */
.settings-card-note {
    padding: var(--spacing-md) var(--spacing-xl);
    text-align: center;
    border-top: 1px solid var(--color-border);
}

.settings-card-note p {
    margin: 0;
}

.settings-info-list {
    margin: 0;
    padding-left: var(--spacing-lg);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.settings-info-list li {
    margin-bottom: var(--spacing-xs);
}

/* Tabs inside modal-form-card */
.modal-tabs {
    padding: 0 var(--spacing-lg);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

/* Tabs with checkbox on right */
.modal-tabs-with-checkbox {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-tabs-with-checkbox .modal-tabs-left {
    display: flex;
}

/* Opportunity checkbox in tab row */
.opportunity-checkbox-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    padding-right: var(--spacing-md);
}

.opportunity-checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

/* Remove border from header when followed by tabs */
.settings-card-header + .modal-tabs {
    margin-top: 0;
}

.modal-card-header {
    border-bottom: none;
}

/* Modal tab content - no horizontal padding, sections handle their own */
.modal-tab-content {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* Modal tab sections */
.modal-tab-section {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.modal-tab-section:last-child {
    border-bottom: none;
}

.modal-tab-section-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-md) 0;
}

/* Section header with title and button inline */
.modal-tab-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.modal-tab-section-header .modal-tab-section-title {
    margin-bottom: 0;
}

/* Inline form row for tabs (label + input + button on same line) */
.modal-tab-form-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.modal-tab-form-row label {
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.modal-tab-form-row input,
.modal-tab-form-row select {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.modal-tab-form-row input:focus,
.modal-tab-form-row select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

.modal-tab-form-row .settings-btn {
    flex-shrink: 0;
}

/* Domain indicator for invite email field */
.domain-indicator {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.domain-indicator svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.domain-indicator.domain-internal {
    color: var(--color-success);
}

.domain-indicator.domain-external {
    color: var(--color-warning);
}

/* Invite input row - remove old styles */
.invite-input-row {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
}

.invite-input-row input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.invite-input-row input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

/* Horizontal form row - label left, input right */
.settings-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    gap: var(--spacing-xl);
}

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

.settings-form-row.no-border {
    border-bottom: none;
}

.settings-form-label {
    flex: 0 0 200px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

.settings-form-label-group {
    flex: 0 0 200px;
}

.settings-form-label-group .settings-form-label {
    flex: none;
    margin-bottom: var(--spacing-xs);
}

.settings-form-label-group .settings-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0;
}

.settings-form-input {
    flex: 1;
    max-width: 320px;
}

/* Wider input for modals where more space is needed */
.settings-form-input-wide {
    max-width: none;
}

#share-member-modal .settings-form-input {
    max-width: none;
}

#share-member-modal .settings-form-label {
    flex: 0 0 120px;
}

.settings-form-input input,
.settings-form-input select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.settings-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: color var(--transition-fast);
}

.settings-link:hover {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.settings-form-input input:focus,
.settings-form-input select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

.settings-form-input input:disabled,
.settings-form-input select:disabled {
    background: var(--color-gray-100);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

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

/* Stacked form row - label above, full-width input below (for textareas) */
.settings-form-row-stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
}

.settings-form-row-stacked .settings-form-label {
    flex: none;
}

/* Full-width input container for textareas */
.settings-form-input-full {
    width: 100%;
}

.settings-form-input-full textarea {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
    resize: vertical;
    font-family: inherit;
}

.settings-form-input-full textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

.settings-form-input-full textarea::placeholder {
    color: var(--color-text-tertiary);
}

.settings-form-input-full select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.settings-form-input-full select:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

/* Range input with inline value display */
.range-with-value {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.range-with-value input[type="range"] {
    flex: 1;
}

.range-value-display {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    min-width: 30px;
}

/* Full-width hint text spanning both columns */
.settings-form-hint-full {
    width: 100%;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Base settings-form-hint */
.settings-form-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Warning text - bold, coloured */
.text-warning-strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-warning);
    margin-bottom: var(--spacing-sm);
}

/* Modal body text */
.modal-body-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* Modal body text section - for dynamically populated content blocks */
.modal-body-text-section {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

/* Card footer with buttons - 3 column layout */
.settings-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    background: var(--color-gray-50);
    flex-shrink: 0;
}

/* Footer left side - action buttons (Delete/Restore) */
.settings-card-footer .modal-footer-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

/* Footer centre - metadata */
.settings-card-footer .modal-footer-metadata-inline {
    flex: 2;
    text-align: center;
}

/* Footer right side - Cancel/Save buttons */
.settings-card-footer .settings-card-footer-buttons {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* When no left section, still keep space-between */
.settings-card-footer:has(.modal-footer-metadata-inline):not(:has(.modal-footer-left)) {
    justify-content: space-between;
}

/* Settings buttons - smaller, cleaner */
button.settings-btn,
.settings-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px solid transparent;
}

button.settings-btn-primary,
.settings-btn-primary {
    background: var(--color-success);
    color: white;
    border: 1px solid var(--color-success);
}

button.settings-btn-primary:hover:not(:disabled),
.settings-btn-primary:hover:not(:disabled) {
    background: var(--color-success-hover);
    border-color: var(--color-success-hover);
}

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

button.settings-btn-secondary,
.settings-btn-secondary {
    background: transparent;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.settings-btn-secondary:hover:not(:disabled) {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

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

button.settings-btn-brand,
.settings-btn-brand {
    background: var(--color-primary);
    color: white;
    border: 1px solid var(--color-primary);
}

button.settings-btn-brand:hover:not(:disabled),
.settings-btn-brand:hover:not(:disabled) {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

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

.settings-btn-danger,
.modal-form-card .settings-btn-danger {
    background: var(--color-danger);
    color: white;
    border: 1px solid var(--color-danger);
}

.settings-btn-danger:hover:not(:disabled),
.modal-form-card .settings-btn-danger:hover:not(:disabled) {
    background: var(--color-danger-hover, #c0392b);
    border-color: var(--color-danger-hover, #c0392b);
}

/* Solid red danger button (alias for consistency) */
.settings-btn-danger-solid {
    background: var(--color-danger);
    color: white;
    border: 1px solid var(--color-danger);
}

.settings-btn-danger-solid:hover:not(:disabled) {
    background: var(--color-danger-hover, #c0392b);
    border-color: var(--color-danger-hover, #c0392b);
}

/* Password input with toggle */
.settings-password-wrapper {
    position: relative;
    width: 100%;
}

.settings-password-wrapper input {
    width: 100%;
    padding-right: 40px;
}

.settings-password-toggle {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-password-toggle:hover {
    color: var(--color-text-primary);
}

/* Password strength indicator */
.settings-password-strength {
    margin-top: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.settings-password-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
    overflow: hidden;
}

.settings-password-strength-fill {
    height: 100%;
    transition: width var(--transition-fast), background var(--transition-fast);
}

.settings-password-strength-text {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

/* Form hint text below input */
.settings-input-hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-xs);
}

/* Message area within card */
.settings-message {
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-sm);
}

/* Danger section styling */
.settings-card.settings-card-danger {
    border-color: var(--color-danger-lighter);
}

.settings-card.settings-card-danger .settings-card-header {
    border-bottom-color: var(--color-danger-lighter);
}

.settings-card.settings-card-danger .settings-card-header h3 {
    color: var(--color-danger);
}

/* Settings Items List (Business Functions/Areas) */
.settings-items-list {
    max-height: 300px;
    overflow-y: auto;
}

/* Empty state for item lists */
.settings-items-empty {
    padding: var(--spacing-md) var(--spacing-xl);
}

/* Scrollable container for item lists (Functions, Areas) */
.functions-table-scroll {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin: 0 var(--spacing-xl) var(--spacing-md);
    overflow: hidden;
}

.functions-table-scroll .settings-items-list {
    max-height: 250px;
}

/* Edit hint text below industry dropdown */
.functions-edit-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    padding: var(--spacing-md) var(--spacing-xl) 0;
    line-height: 1.5;
}

/* Areas explanation with bullet points */
.areas-explanation-container {
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.areas-explain-intro {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

.areas-examples-list {
    margin: 0 0 var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    list-style: disc;
}

.areas-examples-list li {
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    padding: var(--spacing-xs) 0;
    line-height: 1.5;
}

.areas-explain-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    font-style: italic;
}

/* Wide page content for tables */
.settings-page-content.settings-page-wide {
    max-width: 1100px;
}

/* Toggle switch */
.settings-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.settings-toggle input {
    display: none;
}

.settings-toggle-slider {
    width: 44px;
    height: 24px;
    background: var(--color-gray-300);
    border-radius: 12px;
    position: relative;
    transition: background var(--transition-fast);
}

.settings-toggle-slider::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform var(--transition-fast);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.settings-toggle input:checked + .settings-toggle-slider {
    background: var(--color-success);
}

.settings-toggle input:checked + .settings-toggle-slider::after {
    transform: translateX(20px);
}

.settings-toggle-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Card body full width (no padding for tables) */
.settings-card-body-full {
    padding: 0;
}

/* Users search row */
.settings-users-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-gray-50);
    align-items: center;
}

.settings-search-wrapper {
    position: relative;
    width: 280px;
}

.settings-search-wrapper input {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-right: 32px;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
}

.settings-search-wrapper input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.settings-search-clear {
    position: absolute;
    right: var(--spacing-xs);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
}

.settings-search-clear:hover {
    color: var(--color-text-primary);
    background: none;
    transform: translateY(-50%);
    box-shadow: none;
}

.settings-filters-group {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.settings-filter-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.settings-filters-group select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    min-width: 100px;
}

/* Users actions row (above table) */
.settings-users-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
}

.settings-actions-group {
    display: flex;
    gap: var(--spacing-xs);
}

.settings-actions-group .settings-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

.settings-actions-group .bulk-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Bulk Invite styles */
.settings-bulk-invite-note {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-gray-50);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.settings-bulk-invite-textarea {
    width: calc(100% - var(--spacing-xl) * 2);
    margin: var(--spacing-xl);
    margin-bottom: var(--spacing-md);
    min-height: 150px;
    padding: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-family-mono, monospace);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    resize: vertical;
    line-height: 1.6;
    box-sizing: border-box;
}

.settings-bulk-invite-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.settings-bulk-invite-results {
    margin: 0 var(--spacing-xl) var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.settings-bulk-invite-results:empty {
    display: none;
}

/* Priority Indicator styles */
.settings-pi-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-border);
    align-items: center;
    justify-content: space-between;
}

.settings-pi-template {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.settings-pi-template label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-secondary);
}

.settings-pi-template select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-primary);
    min-width: 180px;
}

.settings-pi-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.settings-pi-source,
.settings-pi-updated,
.settings-pi-status {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.settings-pi-table-container {
    overflow-x: auto;
}

.settings-pi-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-bg-primary);
}

.settings-pi-table th,
.settings-pi-table td {
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    border: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

.settings-pi-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    color: var(--color-text-secondary);
}

.settings-pi-score-col {
    width: 60px;
    text-align: center;
}

.settings-pi-table td:first-child {
    text-align: center;
    font-weight: 600;
    background: var(--color-gray-50);
}

.settings-pi-table input[type="text"] {
    width: 100%;
    padding: var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    border: none;
    background: transparent;
    color: var(--color-text-primary);
}

.settings-pi-table input[type="text"]:focus {
    outline: none;
    background: var(--color-primary-lightest);
}

.settings-pi-table input[type="text"]::placeholder {
    color: var(--color-text-tertiary);
}

.settings-pi-info-row {
    padding: var(--spacing-sm) var(--spacing-xl);
    background: var(--color-bg-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.settings-pi-explanation-list {
    margin: var(--spacing-sm) 0;
    padding-left: var(--spacing-xl);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.settings-pi-explanation-list li {
    margin-bottom: var(--spacing-xs);
}

.settings-pi-note-row {
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--color-bg-primary);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-top: 1px solid var(--color-border);
}

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

.settings-bulk-invite-count--warning {
    color: var(--color-danger);
    font-weight: var(--font-weight-medium);
}

/* Subscription content */
.settings-subscription-content {
    padding: var(--spacing-md);
}

.settings-subscription-content:empty::before {
    content: '';
}

/* Pagination in settings */
.settings-pagination-info {
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border);
}

.settings-pagination-info:empty {
    display: none;
}

.settings-users-table-container {
    overflow-x: auto;
}

.settings-users-table-container .dashboard-table {
    margin: 0;
    border-collapse: collapse;
}

.settings-users-table-container .dashboard-table th,
.settings-users-table-container .dashboard-table td {
    border: 1px solid var(--color-border);
}

.settings-pagination-controls {
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    border-top: 1px solid var(--color-border);
}

.settings-pagination-controls:empty {
    display: none;
}

.settings-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
}

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

.settings-item-row:hover {
    background: var(--color-gray-50);
}

.settings-item-name {
    color: var(--color-text-primary);
}

.settings-item-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.settings-item-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.settings-item-btn:hover {
    background: var(--color-gray-100);
    color: var(--color-text-primary);
    transform: none;
    box-shadow: none;
}

.settings-item-btn.settings-item-btn-danger:hover {
    background: var(--color-danger-lighter);
    border-color: var(--color-danger);
    color: var(--color-danger);
}

/* Inline edit input for business functions / areas */
.settings-item-edit-input {
    flex: 1;
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
    outline: none;
    min-width: 0;
}

/* Footer with input form */
.settings-card-footer-input {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-sm);
    background: var(--color-bg-primary);
}

.settings-add-item-form {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

.settings-add-item-form input {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.settings-add-item-form input:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Modal Variations */
.modal-title-center {
  text-align: center;
  margin-bottom: var(--spacing-xl);
}

.modal-footer-center {
  text-align: center;
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.modal-footer-flex {
  display: flex;
  gap: var(--spacing-md);
  justify-content: flex-end;
}

/* API Key Display */
.api-key-display {
  width: 100%;
  min-height: 120px;
  font-family: 'Courier New', monospace;
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

/* Subscription Info Cards */
.subscription-info-card {
  margin-bottom: var(--spacing-lg);
  padding: var(--spacing-md);
}

.subscription-card-title {
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.subscription-note {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
}

.subscription-status {
  color: var(--color-text-secondary);
  margin: var(--spacing-md) 0;
}

.subscription-limits-box {
  background: var(--color-gray-50);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  margin: var(--spacing-xl) 0;
}

.subscription-contact-box {
  background: var(--color-info-light);
  padding: var(--spacing-lg);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-info);
}

/* ============================================
   PI DEFINITIONS TABLE (Settings)
   ============================================ */
/* Table Utilities */
.table-full-width {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-lg);
}

.table-header-row {
  border-bottom: 2px solid var(--color-border);
}

.table-body-row {
  border-bottom: 1px solid var(--color-border);
}

.table-cell-center {
  text-align: center;
  padding: var(--spacing-sm);
}

.table-cell-left {
  text-align: left;
  padding: var(--spacing-sm);
}

/* List Utilities */
.list-ml-lg {
  margin-left: var(--spacing-lg);
}

.list-mt-sm {
  margin-top: var(--spacing-sm);
}

/* ============================================
   MOBILE RESPONSIVENESS
   ============================================ */

/* Settings Page Mobile */
@media (max-width: 768px) {
  /* Show dropdown, hide tab bar on mobile */
  .settings-mobile-nav {
    display: block;
  }

  .settings-scroll-wrapper .tabs-header-row {
    display: none;
  }

  /* Tab Navigation */
  .settings-scroll-wrapper .tabs-nav {
    padding: var(--spacing-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  
  .settings-scroll-wrapper .tabs-nav::-webkit-scrollbar {
    display: none;
  }
  
  /* Tab Content */
  .settings-scroll-wrapper .tab-content {
    padding: var(--spacing-md);
  }
  
  /* Form elements in settings */
  .max-w-600 {
    max-width: 100%;
    padding: 0 var(--spacing-sm);
  }
  
  /* Auto-approve section */
  .auto-approve-section {
    padding: var(--spacing-md);
  }
  
  .checkbox-description {
    font-size: var(--font-size-sm);
  }
  
  /* User Controls Row - Stack on mobile */
  .user-controls-row {
    gap: var(--spacing-xs);
  }
  
  .filter-field-inline {
    flex: 1 1 100%; /* Full width on mobile */
    min-width: unset;
  }
  
  .filter-select-inline {
    min-width: 120px;
    flex: 1;
  }
  
  /* Bulk Actions - 2x2 grid on mobile */
  .bulk-actions-inline {
    width: 100%;
    margin-left: 0;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns */
    gap: var(--spacing-xs);
  }
  
  .bulk-actions-inline button {
    flex: none; /* Remove flex */
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm);
  }
  
  /* Notification Panel */
  .notifications-panel {
    width: 100vw;
    left: 0;
    right: 0;
    max-width: 100%;
  }
  
  .notification-item {
    padding: var(--spacing-sm);
  }
  
  .notification-title {
    font-size: var(--font-size-sm);
  }
  
  .notification-time {
    font-size: var(--font-size-xs);
  }
  
  /* Pagination on mobile */
  .pagination-controls {
    flex-direction: row; /* Keep horizontal */
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    justify-content: space-between;
  }
  
  .pagination-prev,
  .pagination-next {
    width: auto; /* Not full width */
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
  }
  
  .pagination-info {
    flex: 1 1 100%; /* Full width, moves to own row */
    text-align: center;
    font-size: var(--font-size-sm);
    order: -1; /* Move to top */
    margin-bottom: var(--spacing-xs);
  }
  
  /* Dashboard tables - horizontal scroll */
  .dashboard-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .dashboard-table {
    min-width: 800px; /* Ensure table doesn't squish */
  }
  
  /* Global notification message */
  #admin-message {
    margin: var(--spacing-sm);
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm);
  }

  /* Profile form — stack label above input on mobile */
  .settings-scroll-wrapper .settings-form-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
  }

  .settings-scroll-wrapper .settings-form-label,
  .settings-scroll-wrapper .settings-form-label-group {
    flex: none;
    width: 100%;
  }

  .settings-scroll-wrapper .settings-form-input {
    width: 100%;
    max-width: 100%;
  }

  /* PI table — keep natural width so it scrolls rather than squishes */
  .settings-pi-table {
    min-width: 560px;
  }
}

/* Small Mobile (480px and below) */
@media (max-width: 480px) {
  .tab-nav-button {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  .bulk-actions-inline {
    flex-wrap: wrap;
  }
  
  .bulk-actions-inline button {
    flex: 1 1 calc(50% - var(--spacing-xs)/2); /* 2 buttons per row */
  }
  
  .pagination-prev,
  .pagination-next {
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-md);
  }
}

/* Print Styles */
@media print {
  .usage-widget-footer {
    display: none;
  }
  
  .settings-card-footer {
    display: none;
  }
}
/* ===================================
   Column Filter Dropdown Component
   (Moved from column-filter-dropdown.js)
   =================================== */

.column-filter-dropdown {
    position: fixed;
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    max-width: 280px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.column-filter-dropdown.visible {
    opacity: 1;
    transform: translateY(0);
}

.column-filter-dropdown .dropdown-section {
    padding: var(--spacing-sm) 0;
}

.column-filter-dropdown .dropdown-section-title {
    font-size: var(--font-size-xs, 12px);
    font-weight: 600;
    color: var(--color-text-secondary, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) var(--spacing-md);
    margin: 0;
}

.column-filter-dropdown .dropdown-divider {
    height: 1px;
    background: var(--color-border-light);
    margin: 0;
}

.column-filter-dropdown .dropdown-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color 150ms ease;
    position: relative;
}

.column-filter-dropdown .dropdown-option:hover {
    background: var(--color-gray-50);
}

.column-filter-dropdown .dropdown-option.active {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.column-filter-dropdown .dropdown-option i:first-child {
    width: 16px;
    height: 16px;
    color: var(--color-gray-500);
}

.column-filter-dropdown .dropdown-option.active i:first-child {
    color: var(--color-primary);
}

.column-filter-dropdown .dropdown-option .check-icon {
    margin-left: auto;
    color: var(--color-primary);
}

.column-filter-dropdown .dropdown-option span {
    flex: 1;
}

.column-filter-dropdown .filter-checkbox {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    transition: background-color 150ms ease;
}

.column-filter-dropdown .filter-checkbox:hover {
    background: var(--color-gray-50);
}

.column-filter-dropdown .filter-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
}

.column-filter-dropdown .filter-checkbox.filter-locked {
    cursor: default;
    opacity: 0.8;
}

.column-filter-dropdown .filter-checkbox.filter-locked input[type="checkbox"] {
    cursor: default;
}

.column-filter-dropdown .filter-checkbox.filter-locked:hover {
    background: transparent;
}

.column-filter-dropdown .checkbox-label {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    user-select: none;
}

.column-filter-dropdown .filter-separator {
    height: 1px;
    background-color: var(--color-border);
    margin: var(--spacing-sm) var(--spacing-md);
}

.column-filter-dropdown .clear-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: calc(100% - var(--spacing-lg) * 2);
    margin: var(--spacing-sm) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-gray-100);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 150ms ease;
}

.column-filter-dropdown .clear-filters-btn:hover {
    background: var(--color-gray-200);
    border-color: var(--color-gray-400);
}

.column-filter-dropdown .clear-filters-btn i {
    width: 14px;
    height: 14px;
}

/* Column Filter Dropdown - Mobile */
@media (max-width: 480px) {
    .column-filter-dropdown {
        max-width: calc(100vw - 16px);
        max-height: 60vh;
    }
}

/* ===================================
   Item Modal Redesign - Compact & Intuitive
   =================================== */

/* Compact Sections - Minimal Padding */
.modal-compact-section {
    margin-bottom: var(--spacing-xs);
}

.modal-compact-section:first-child {
    margin-top: 0;
}

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

/* Tight modal sections */
.modal-section-tight {
    margin-bottom: 4px; /* Reduced from var(--spacing-xs) to minimize gap before footer */
}

/* Horizontal divider above a section — desktop */
.modal-section-divider-top {
    border-top: 1px solid var(--color-border);
    padding-top: var(--spacing-sm);
    margin-top: var(--spacing-xs);
}

/* Horizontal divider above a section — mobile only */
.modal-section-divider-top-mobile {
    /* no border on desktop */
}

@media (max-width: 768px) {
    .modal-section-divider-top-mobile {
        border-top: 1px solid var(--color-border);
        padding-top: var(--spacing-sm);
        margin-top: var(--spacing-xs);
        width: 100%;
    }
}

/* ============================================
   ITEM DETAILS TWO-COLUMN LAYOUT
   ============================================ */

.item-details-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg) var(--spacing-xl);
    min-height: 0;
}

/* Upper section fills available tab panel space */
.item-details-two-col-upper {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    align-items: stretch;
}

.item-details-left,
.item-details-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 0;
}

/* Left column scrolls if content overflows — right column clips so updates scroll internally */
.item-details-left {
    overflow-y: auto;
    overflow-x: hidden;
}

.item-details-right {
    overflow: hidden;
}

/* Matched-height upper sections — same min-height both columns so dividers align */
.item-upper-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 210px;
}

/* Make form fields with textareas fill reasonably but not force column growth */
.item-details-left .form-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

.item-details-left .form-field .modal-form-textarea-compact {
    min-height: 80px;
}

/* First field (Short Description) doesn't need to grow */
.item-details-left .form-field-inline {
    flex: 0 0 auto;
}

.item-details-right .form-field {
    margin-bottom: 0;
}

/* Inline label + input (label on left, input on right) */
.form-field-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: 0;
}

.field-label-inline-left {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    white-space: nowrap;
    min-width: 120px;
    flex-shrink: 0;
}

.form-field-inline .modal-form-input,
.form-field-inline .modal-form-input-disabled,
.form-field-inline select {
    flex: 1;
    min-width: 0;
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

.form-field-inline .modal-form-input:focus,
.form-field-inline select:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-bg-primary);
}

.item-details-right .updates-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.item-details-right .updates-section .section-header-row {
    flex-shrink: 0;
}

/* Desktop: fixed height so updates scroll internally, modal stays fixed */
@media (min-width: 769px) {
    .item-details-right .updates-container-tall {
        flex: none;
        height: 220px;
        overflow-y: auto;
    }
}

/* Add Update button inside updates section - right aligned with controlled spacing */
.item-details-right .updates-section > button {
    align-self: flex-end;
    margin-top: var(--spacing-xs);
}

/* Probability row disabled state (Issue type — P is always 10) */
.form-field-inline.field-disabled label {
    opacity: 0.5;
}

.form-field-inline.field-disabled select {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Item type selector — Risk / Issue / Opportunity */
.item-type-selector {
    display: flex;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.item-type-selector input[type="radio"] {
    display: none;
}

.item-type-selector label {
    flex: 1;
    text-align: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-secondary);
    transition: background-color 0.15s, color 0.15s;
    user-select: none;
    white-space: nowrap;
}


#item-type-risk:checked + label {
    background-color: var(--color-warning-lighter);
    color: var(--color-warning-text);
}

#item-type-issue:checked + label {
    background-color: var(--color-danger-lighter);
    color: var(--color-danger-text);
}

#item-type-opportunity:checked + label {
    background-color: var(--color-success-lighter);
    color: var(--color-success-text);
}

.item-type-selector label[for="item-type-risk"]:hover {
    color: var(--color-warning-text);
    background-color: var(--color-warning-lighter);
}

.item-type-selector label[for="item-type-issue"]:hover {
    color: var(--color-danger-text);
    background-color: var(--color-danger-lighter);
}

.item-type-selector label[for="item-type-opportunity"]:hover {
    color: var(--color-success-text);
    background-color: var(--color-success-lighter);
}

.item-type-selector.disabled label {
    cursor: default;
    opacity: 0.6;
    pointer-events: none;
}

/* Full-width divider between upper and lower sections */
.item-details-divider {
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-sm) 0;
    flex-shrink: 0;
}

.opportunity-field {
    margin-bottom: 0;
}

.opportunity-label-inline {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.opportunity-label-inline .opportunity-text {
    flex: 1;
    line-height: 1.4;
    padding-top: 2px;
}

.opportunity-label-inline .opportunity-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 0;
}

/* Mobile: stack columns */
@media (max-width: 768px) {
    .item-details-two-col {
        grid-template-columns: 1fr;
    }

    /* Remove height constraint on mobile — tab panel scrolls as a whole */
    .item-details-two-col-upper {
        flex: none;
        overflow: visible;
    }

    .item-details-left,
    .item-details-right {
        overflow: visible;
    }
    
    .form-field-inline {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .field-label-inline-left {
        min-width: auto;
    }
    
    .form-field-inline .modal-form-input,
    .form-field-inline .modal-form-input-disabled,
    .form-field-inline select {
        width: 100%;
    }
}

/* Compact field labels */
.field-label-compact {
    display: block;
    margin: 0 0 2px 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.btn-compact {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Checkbox inline label */
.checkbox-label-inline {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs-plus);
    margin: 0;
}

.checkbox-label-inline span {
    font-size: var(--font-size-sm);
}

/* Tabs navigation compact */
.tabs-nav-compact {
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

/* Inline label (label next to input, not above) */

/* Unified Header Row: Item | Title | Target Date | Badges */
.modal-header-unified {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--spacing-md);
    align-items: center;
    margin-bottom: var(--spacing-xs);
    padding-bottom: var(--spacing-xs);
}

.modal-header-unified h2 {
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.modal-title-input-container {
    flex: 1;
    display: flex;
    align-items: center;
}

.modal-title-input-container input {
    width: 100%;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    margin: 0;
}

.modal-target-date-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    white-space: nowrap;
}

.modal-form-label-inline {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
}

.modal-target-date-container input {
    width: 160px;
    margin: 0;
}

/* Modal actions footer with warnings on left */
.modal-actions-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    margin-top: var(--spacing-md);
    gap: var(--spacing-md);
    position: relative;
}

/* Messages container - horizontal layout for save message and warning */
.modal-footer-left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.item-metadata {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    pointer-events: none;
}

.modal-footer-messages {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Save message - inline, not absolute */
#item-save-message {
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
    /* Hidden by default */
    display: none;
}

#item-save-message.success {
    display: block;
    background: var(--color-success-light);
    color: var(--color-success-dark);
    border: 1px solid var(--color-success);
}

#item-save-message.error {
    display: block;
    background: var(--color-danger-light);
    color: var(--color-red-dark);
    border: 1px solid var(--color-danger);
}

.modal-footer-buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* Warning Banner - Footer Version (compact, side-by-side with save message) */
.modal-warning-banner-footer {
    padding: var(--spacing-xs) var(--spacing-sm);
    background: #FEF3F2;
    border: 1px solid #FEE4E2;
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: #B42318;
    white-space: nowrap;
}

.modal-warning-banner-footer:empty {
    display: none;
}

/* Warning Banner - Top Version (removed, keeping for compatibility) */

.modal-target-date-container input {
    width: 160px;
}

/* Warning Banner - Thin & Minimal */
.modal-warning-banner {
    padding: var(--spacing-sm) var(--spacing-md);
    background: #FEF3F2;
    border: 1px solid #FEE4E2;
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.modal-warning-banner:empty {
    display: none;
}

.external-warning-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: #B42318;
}

.external-warning-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Updates Container - Compact */
.updates-container-compact {
    max-height: 110px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    background: var(--color-bg-secondary);
}

/* Compact textarea for Description/Action */
.modal-form-textarea-compact {
    width: 100%;
    min-height: 150px;
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    resize: vertical;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    background-color: var(--color-bg-secondary);
}

.modal-form-textarea-compact:focus {
    outline: none;
    border-color: var(--color-primary);
    background-color: var(--color-bg-primary);
}

/* Collapsible Additional Fields */
.collapsible-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}

.collapsible-header:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-primary-light);
}

.collapsible-content {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

/* Adjust Section Header Button Size */
.section-header-with-button button {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

/* Override spacing - make it tighter */
.modal-compact-section {
    margin-bottom: var(--spacing-md) !important;
}

/* Collapsible button - not full width purple */
.collapsible-header {
    background: #F9FAFB !important;
    color: #374151 !important;
    font-weight: 500 !important;
}

.collapsible-header:hover {
    background: #F3F4F6 !important;
}

/* Updates container styling */
.updates-container-compact {
    background: #F9FAFB !important;
}

/* Medium modal for Add Update */
.modal-content-medium {
    width: 600px;
    max-width: 90vw;
}

/* Description textarea - fills its container */
#edit-description {
    flex: 1;
    min-height: 60px;
    resize: none;
}

/* Action Required textarea - fills its container */
#edit-action {
    flex: 1;
    min-height: 60px;
    resize: none;
}

/* Taller updates container for side-by-side layout */
.updates-container-tall {
    flex: 1;
    min-height: 0; /* Allow proper flex sizing */
    overflow-y: auto;
    overflow-x: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-xs);
    background: var(--color-bg-secondary);
    word-break: break-word;
}

/* Responsive: stack on smaller screens */
@media (max-width: 768px) {
    .updates-container-tall {
        min-height: 120px;
        max-height: 150px;
    }
}

/* Modal header left side with permission warning */
.modal-header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.modal-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

#modal-status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* Warning badge in header (next to status badges) */
.modal-warning-badge-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm-plus);
    background: #FEF3F2;
    border: 1px solid #FEE4E2;
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    gap: var(--spacing-xs-plus);
    color: #B42318;
    white-space: nowrap;
}

.modal-warning-badge-header i,
.modal-warning-badge-header svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.modal-warning-badge-header:empty {
    display: none;
}

/* Inline permission warning in header */
.permission-warning-inline {
    font-size: var(--font-size-sm);
    color: var(--color-info);
    font-weight: 500;
}

.permission-warning-inline:empty {
    display: none;
}

/* Permissions display - in header (right aligned) */
.modal-permissions-display {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    display: flex;
    gap: var(--spacing-sm);
    white-space: nowrap;
}

.modal-permissions-display:empty {
    display: none;
}

/* Modal title with inline items */
.modal-title-inline {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-lg);
    margin: 0;
}

/* Purple labels for List: and Item: in modal title */
.modal-label-purple {
    color: var(--color-primary);
}

/* Percent complete in header */
.modal-percent-complete {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: normal;
    margin-left: var(--spacing-xs);
}

/* Item number wrapper */
#modal-item-number-wrapper {
    white-space: nowrap;
}

/* List name wrapper in modal header */
.modal-list-name-wrapper {
    white-space: nowrap;
    max-width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modal-list-name-wrapper:has(#modal-list-name:empty) {
    display: none;
}

/* External share info line */
.permission-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

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

.permission-value-yes {
    color: var(--color-success);
    font-weight: 600;
}

.permission-value-no {
    color: var(--color-danger);
    font-weight: 600;
}

/* Sharing Info Panel */
.sharing-info-panel {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.sharing-info-panel:empty {
    display: none;
}

.sharing-info-row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.sharing-info-row:last-child {
    margin-bottom: 0;
}

.sharing-info-row i {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    color: var(--color-info);
}

.sharing-info-row.warning i {
    color: var(--color-warning);
}

.sharing-info-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Team member item in sharing tab */
.team-member-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.team-member-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.team-member-role {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    background-color: var(--color-bg-tertiary);
    padding: var(--spacing-2xs) var(--spacing-xs-plus);
    border-radius: var(--border-radius-sm);
}

/* Team Section Cards - used in Manage Team tab */
.team-section-card {
    background-color: var(--color-gray-50);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

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

.team-section-title {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

/* External Team Table */
/* External Team Table & Manage Team Table */
.external-team-table,
.manage-team-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.external-team-table th,
.external-team-table td,
.manage-team-table th,
.manage-team-table td {
    padding: var(--spacing-sm) var(--spacing-xs);
    text-align: left;
    border-bottom: 1px solid var(--color-border-light);
}

.external-team-table th,
.manage-team-table th {
    font-weight: 600;
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

.external-team-table tbody tr:last-child td,
.manage-team-table tbody tr:last-child td {
    border-bottom: none;
}

.external-team-table .lead-cell {
    text-align: center;
    width: 50px;
}

.external-team-table .action-cell,
.manage-team-table .action-cell {
    text-align: right;
    width: 100px;
    white-space: nowrap;
}

.manage-team-table .action-cell button {
    margin: 0 2px;
    min-width: 110px;
    justify-content: center;
}

/* Consistent width for type badges in manage-team-table */
.manage-team-table .internal-badge,
.manage-team-table .external-badge {
    display: inline-block;
    min-width: 70px;
    text-align: center;
}

.external-team-table input[type="radio"] {
    cursor: pointer;
}

.external-team-table .lead-indicator {
    width: 16px;
    height: 16px;
    color: var(--color-success);
}

/* Internal Badge (complement to external-badge) */
.internal-badge {
    background-color: var(--color-gray-100);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-2xs) var(--spacing-xs-plus);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

/* Owner text in team members table */
.owner-text {
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    display: block;
    text-align: center;
}

/* Role badges for Shared tab */
.role-badge {
    display: inline-block;
    papadding: var(--spacing-2xs) var(--spacing-sm);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.role-leading {
    background-color: var(--color-success-light);
    color: var(--color-success-dark);
}

.role-supporting {
    background-color: var(--color-info-light);
    color: var(--color-info-dark);
}

.role-following {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* External Accountability Section */
.external-accountability-section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light);
}

.external-accountability-section .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
}

.external-accountability-section .checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    cursor: pointer;
}

.external-accountability-section .text-small {
    margin-top: var(--spacing-xs);
    margin-left: 22px;
}

/* Utility Classes */
.text-muted {
    color: var(--color-text-secondary);
    font-style: italic;
}

.btn-disabled,
button.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* =============================================================================
   ONBOARDING WIZARD STYLES
   ============================================================================= */

/* Wizard page — full-width column, #fafafa body matching app */
.wizard-page {
    background: var(--color-bg-primary);
    height: 100vh;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
}

/* ── Wizard header bar ───────────────────────────────────────────────────────
   Sits flush at the top, full viewport width.
   Identical tokens to .header in the main app — white, shadow-sm, left-aligned.
   The header is a direct child of .wizard-page (NOT inside .wizard-container)
   so it is never constrained by the 720px content max-width.
   ─────────────────────────────────────────────────────────────────────────── */
.wizard-header {
    width: 100%;
    flex-shrink: 0;
    background: var(--color-bg-primary);
    padding: var(--spacing-lg) var(--spacing-3xl);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
}

.wizard-header img {
    height: 32px;
    width: auto;
    display: block;
}

/* Tagline — mirrors .logo-headerbar small */
.wizard-header .logo-headerbar small {
    display: block;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-xs);
    font-weight: 400;
}

/* Estimated time — pushed to the right */
.estimated-time {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-left: auto;
}

.estimated-time svg {
    width: 14px;
    height: 14px;
}

/* ── Wizard stepper (tab-style) ──────────────────────────────────────────────
   Sits directly below the header bar, full-width, white background.
   Mirrors .tabs-nav / .tab-nav-button from the settings page.
   ─────────────────────────────────────────────────────────────────────────── */
.wizard-progress {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
    padding: 0 var(--spacing-3xl);
    margin: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.wizard-progress::-webkit-scrollbar {
    display: none;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm-plus) var(--spacing-xl);
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    cursor: default;
    position: relative;
    flex-direction: row;
}

/* Active step — primary colour + bold + underline bar (mirrors .tab-nav-button.active) */
.progress-step.active {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.progress-step.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
    z-index: 11;
}

/* Completed step — secondary text, tick prefix via .step-number */
.progress-step.completed {
    color: var(--color-text-secondary);
}

/* Step number — hidden on active/incomplete, shown as tick on completed */
.step-number {
    display: none;
}

.progress-step.completed .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    font-size: 0;
}

.progress-step.completed .step-number::after {
    content: '';
    display: block;
    width: 6px;
    height: 4px;
    border-left: 1.5px solid white;
    border-bottom: 1.5px solid white;
    transform: rotate(-45deg) translateY(-1px);
}

.step-label {
    font-size: var(--font-size-sm);
}

/* ── Wizard container ────────────────────────────────────────────────────────
   Constrains the content card width and centres it, matching
   .settings-page-content (max-width: 720px, margin: 0 auto).
   ─────────────────────────────────────────────────────────────────────────── */
.wizard-container {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: var(--spacing-xl) var(--spacing-3xl);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Wizard content card ─────────────────────────────────────────────────────
   White card with border — matches .settings-card.
   ─────────────────────────────────────────────────────────────────────────── */
.wizard-content {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Step 1 has no card — remove border and radius from the content wrapper */
.wizard-content:has(.wizard-step-name.active) {
    border: none;
    border-radius: 0;
}

.wizard-step {
    display: none;
}

.wizard-step.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Step body area */
.wizard-step-body {
    flex: 1;
    padding: var(--spacing-lg) var(--spacing-xl);
}

.step-title {
    font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-text-primary);
}

.step-description {
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-lg) 0;
}

.step-explanation {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--spacing-md) 0;
    line-height: 1.5;
}

.step-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    margin: var(--spacing-sm) 0 var(--spacing-md) 0;
}

/* Settings card body within wizard — scrollable content area */
.wizard-step .modal-form-card > .settings-card-body {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Wizard: keep bottom border on last form row */
.wizard-step .settings-form-row:last-child {
    border-bottom: 1px solid var(--color-border);
}

/* Wizard Form Elements */
.wizard-form-group {
    padding: var(--spacing-md) var(--spacing-lg);
}

.settings-card-body .wizard-form-group {
    border-bottom: 1px solid var(--color-border);
}

.settings-card-body .wizard-form-group:last-child {
    border-bottom: none;
}

.wizard-form-group label {
    display: block;
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spacing-sm);
    color: var(--color-text-primary);
}

.wizard-form-group select,
.wizard-form-group input[type="text"],
.wizard-form-group input[type="email"] {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.wizard-form-group select:focus,
.wizard-form-group input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

.wizard-form-group input::placeholder {
    color: var(--color-text-tertiary);
}

/* Required asterisk */
.required-asterisk {
    color: var(--color-danger);
}

/* PI Preview Table */
.pi-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-md);
}

.pi-preview-table th,
.pi-preview-table td {
    padding: var(--spacing-sm);
    border: 1px solid var(--color-border);
    text-align: left;
}

.pi-preview-table th {
    background: var(--color-gray-100);
    font-weight: var(--font-weight-semibold);
}

.pi-preview-table td:first-child {
    width: 40px;
    text-align: center;
    font-weight: var(--font-weight-semibold);
}

.pi-table-scroll {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* Invite Section */
.invite-input-area {
    margin-bottom: var(--spacing-lg);
}

.invite-input-area textarea {
    width: 100%;
    height: 120px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    resize: vertical;
}

.invite-preview {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-top: var(--spacing-md);
}

.invite-count {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.plan-info-box {
    background: var(--color-info-light);
    border-left: 3px solid var(--color-info);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.plan-limits-list {
    display: flex;
    gap: var(--spacing-lg);
    list-style: none;
    padding: 0;
    margin: var(--spacing-sm) 0;
}

.plan-limits-list li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.plan-limits-list li span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.plan-info-box.warning {
    background: var(--color-warning-light);
    border-left-color: var(--color-warning);
}

.plan-subscribe-note {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.invite-invalid-count {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
}

/* Welcome step header */
.welcome-header {
    text-align: center;
}

.welcome-header h3 {
    font-size: var(--font-size-xl);
}

.welcome-icon {
    display: none;
}

.setup-checklist {
    text-align: left;
    width: 100%;
    background: var(--color-gray-50);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
}

.setup-checklist h4 {
    margin: 0 0 var(--spacing-md) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    color: var(--color-text-primary);
}

.checklist-item svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

/* Ready Step */
.ready-content {
    text-align: center;
    padding: var(--spacing-md) var(--spacing-xl);
    width: 100%;
}

.ready-icon {
    width: 56px;
    height: 56px;
    background: var(--color-success-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
}

.ready-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-success);
}

.ready-summary {
    text-align: left;
    margin: var(--spacing-md) auto;
    background: var(--color-gray-50);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.summary-item {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

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

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

.summary-value {
    font-weight: var(--font-weight-medium);
}

/* Wizard Message */
.wizard-message {
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    display: none;
}

.wizard-message.error {
    background: var(--color-danger-light);
    color: var(--color-danger-dark);
    display: block;
}

.wizard-message.success {
    background: var(--color-success-light);
    color: var(--color-success-dark);
    display: block;
}

/* Wizard language selector row */
.wizard-language-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
    margin: var(--spacing-lg) 0;
}

.wizard-language-row label {
    margin: 0;
    white-space: nowrap;
}

.wizard-language-select {
    width: auto;
}

.wizard-language-hint {
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
}

/* Wizard info note */
.wizard-info-note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.wizard-info-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Wizard textarea */
.wizard-textarea {
    width: 100%;
    height: 120px;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    resize: vertical;
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: all var(--transition-fast);
}

.wizard-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

.wizard-textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* Wizard form hint */
.wizard-form-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

/* Auto-approve section within Team step */
.wizard-auto-approve-section {
    border-top: 1px solid var(--color-border);
    padding-bottom: var(--spacing-md);
}

.wizard-auto-approve-section .wizard-form-hint {
    padding: 0 var(--spacing-xl);
    margin-top: 0;
}

/* Ready step subtitle */
.ready-subtitle {
    color: var(--color-text-secondary);
}

/* Ready step headline uses display font */
.wizard-step h2 {
    font-family: var(--font-family-display);
    font-weight: 400;
}

/* Ready step — things to note */
.ready-notes {
    text-align: left;
    margin-top: var(--spacing-md);
    background: var(--color-gray-50);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.ready-notes h4 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.ready-notes-list {
    margin: 0;
    padding: 0 0 0 var(--spacing-lg);
    list-style: disc;
}

.ready-notes-list li {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--spacing-xs);
}

.ready-notes-list li:last-child {
    margin-bottom: 0;
}

/* PI tables in wizard */
.pie-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 350px;
    margin: var(--spacing-md) 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.pie-preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.pie-preview-table th,
.pie-preview-table td {
    border: 1px solid var(--color-border);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
}

.pie-preview-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.pie-preview-table th {
    background: var(--color-gray-50);
    font-weight: var(--font-weight-semibold);
}

.pie-preview-table td:first-child,
.pie-preview-table th:first-child {
    width: 50px;
    text-align: center;
}

/* ── Wizard Phase 2: Step 1 — typewriter greeting + terminal input ──────────
   Step 1 has no card border. Content is centred vertically in the remaining
   viewport below the header. The greeting types out dramatically, then the
   terminal input fades in.
   ─────────────────────────────────────────────────────────────────────────── */

/* Step 1 overrides the default .wizard-step layout — no card, just a stage */
.wizard-step-name.active {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-name-stage {
    width: 100%;
    max-width: 480px;
    padding: var(--spacing-xl) var(--spacing-3xl);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xl);
}

/* List-stage variant — wider max-width for steps with lists, forms, summaries */
.wizard-list-stage {
    max-width: 640px;
    flex: 1;
    min-height: 0;
}

/* List input wrap — fills remaining height so footer stays at bottom */
.wizard-list-input-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    width: 100%;
}

/* Scrollable list area — grows to fill available space */
.wizard-list-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Add-row sits below the list, above the footer */
.wizard-list-add-row {
    flex-shrink: 0;
}

/* Footer — Back on left, Skip+Continue on right */
.wizard-list-footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.wizard-list-footer-right {
    display: flex;
    gap: var(--spacing-sm);
}

/* Back button placed below the terminal select on steps 5 & 6 */
.wizard-step5-back {
    margin-top: var(--spacing-lg);
}

/* ── Wizard selectable list rows ────────────────────────────────────────────*/
.wizard-selectable-row {
    cursor: pointer;
    transition: background var(--transition-fast);
}

.wizard-selectable-row:hover {
    background: var(--color-bg-secondary);
}

.wizard-row-selected {
    background: var(--color-primary-light, #eef0fd);
    border-left: 3px solid var(--color-primary);
}

.wizard-row-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0;
}

.wizard-selected-badge {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    background: transparent;
    white-space: nowrap;
}

/* Hint line above the list — "Click the function you're in..." */
.wizard-list-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
    flex-shrink: 0;
}

/* Footnote below the add-row */
.wizard-list-footnote {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: var(--spacing-xs) 0 0 0;
}

/* Conversational plan note on invite step */
.wizard-plan-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    flex-shrink: 0;
}

/* Auto-approve question above the toggle */
.wizard-auto-approve-question {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-sm) 0;
}

/* Example sentence on areas step */
.areas-example-sentence {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-style: italic;
    margin: var(--spacing-xs) 0 0 0;
}

/* Make wizard-enter-hint usable as a button */
button.wizard-enter-hint {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: block;
    width: 100%;
    text-align: right;
}

/* Greeting lines — each line types into its own div */
.wizard-greeting {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-height: 5em; /* Reserve space so layout doesn't jump */
    margin-bottom: var(--spacing-xl);
}

.wizard-greeting-line {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.25;
    min-height: 1.25em; /* Prevent layout shift as text types */
}

/* All greeting lines use standard UI font */

/* Input wrapper — hidden until greeting completes */
.wizard-name-input-wrap {
    width: 100%;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 400ms ease, transform 400ms ease;
    pointer-events: none;
    position: relative;
}

.wizard-name-input-wrap.wizard-name-input-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Terminal-style display — cursor + typed text + underline */
.wizard-terminal-input {
    display: flex;
    align-items: baseline;
    gap: 0;
    padding-bottom: var(--spacing-xs);
    border-bottom: 2px solid var(--color-primary);
    width: 100%;
    min-height: 2em;
    cursor: text;
}

/* Throbbing cursor */
.wizard-terminal-cursor {
    font-size: var(--font-size-2xl);
    font-weight: 300;
    color: var(--color-primary);
    line-height: 1;
    animation: wizard-cursor-throb 900ms step-start infinite;
    flex-shrink: 0;
}

@keyframes wizard-cursor-throb {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Typed text */
.wizard-terminal-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    line-height: 1;
    letter-spacing: 0.01em;
}

/* Underline extension — fills remaining width */
.wizard-terminal-line {
    flex: 1;
    border-bottom: none; /* Line is on the parent */
}

/* Hidden real input — invisible but focusable, positioned over terminal */
.wizard-name-hidden-input {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* "Press Enter ↵" hint */
.wizard-enter-hint {
    margin-top: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    opacity: 0;
    transition: opacity 300ms ease;
    text-align: right;
}

.wizard-enter-hint.wizard-enter-hint-visible {
    opacity: 1;
}

/* ── Wizard Phase 2: Step 2+ conversational layout ──────────────────────────
   Shared borderless centred layout for all conversational steps.
   ─────────────────────────────────────────────────────────────────────────── */
.wizard-step-conversational.active {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove card border when a conversational step is active */
.wizard-content:has(.wizard-step-conversational.active) {
    border: none;
    border-radius: 0;
}

/* Terminal-style select — two thirds width, centred, brand blue bottom border */
.wizard-terminal-select-wrap {
    width: 66%;
    margin: 0 auto;
}

.wizard-terminal-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-xs);
    font-size: var(--font-size-xl);
    border: none;
    border-bottom: 2px solid var(--color-primary);
    border-radius: 0;
    background: transparent;
    color: var(--color-text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23667eea' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-sm) center;
    padding-right: var(--spacing-xl);
}

.wizard-terminal-select:focus {
    outline: none;
    border-bottom-color: var(--color-primary-dark);
}

.wizard-terminal-select option {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background: var(--color-bg-primary);
}

/* ── Wizard Phase 2: language selector in header ────────────────────────────*/
.wizard-header-lang {
    margin-left: auto;
}

.wizard-lang-select {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    cursor: pointer;
}

.wizard-lang-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ── Wizard Phase 2: transition placeholder (Ellie hook) ────────────────────*/
.wizard-transition {
    display: none;
}

/* ── Wizard Phase 2: single-question step layout ────────────────────────────
   Each step has one focused question in the header and one input in the body.
   The question header uses larger typography to give it conversational weight.
   ─────────────────────────────────────────────────────────────────────────── */
.wizard-question-header h3 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs) 0;
    line-height: 1.4;
}

.wizard-step-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--spacing-xs) 0 0 0;
}

/* Single primary input — text field or select — fills full width with generous padding */
.wizard-single-input {
    width: 100%;
    padding: var(--spacing-md);
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.wizard-single-input:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-bg-primary);
}

.wizard-single-input::placeholder {
    color: var(--color-text-tertiary);
}

/* ── Wizard Responsive ───────────────────────────────────────────────────────*/
@media (max-width: 600px) {

    /* Reduce header padding to match mobile app header */
    .wizard-header {
        padding: var(--spacing-md) var(--spacing-lg);
    }

    /* Shrink logo to match mobile app */
    .wizard-header img {
        height: 28px;
    }

    /* Hide tagline on mobile — logo + lang selector only */
    .wizard-header .logo-headerbar small {
        display: none;
    }

    /* Shrink language selector on mobile */
    .wizard-lang-select {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }

    /* Single-question input — full size on mobile */
    .wizard-single-input {
        font-size: var(--font-size-sm);
    }

    /* Step 1 — scale down greeting on small screens */
    .wizard-greeting-line {
        font-size: var(--font-size-3xl);
    }

    .wizard-terminal-value,
    .wizard-terminal-cursor {
        font-size: var(--font-size-xl);
    }

    .wizard-name-stage {
        padding: var(--spacing-xl) var(--spacing-lg);
    }

    /* Step 2 — full width select on mobile */
    .wizard-terminal-select-wrap {
        width: 100%;
    }

    .wizard-terminal-select {
        font-size: var(--font-size-lg);
    }

    /* Stepper — tighter padding, still scrollable */
    .wizard-progress {
        padding: 0 var(--spacing-md);
    }

    .progress-step {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    /* Container — reduce side padding on mobile */
    .wizard-container {
        padding: var(--spacing-md);
    }

    /* Scrollable body within the card */
    .wizard-step .modal-form-card > .settings-card-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wizard-step-body {
        padding: var(--spacing-md);
    }

    /* Stack form rows — label above input */
    .wizard-step .settings-form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
        padding: var(--spacing-md) var(--spacing-md);
    }

    .wizard-step .settings-form-label {
        flex: none;
        width: 100%;
    }

    .wizard-step .settings-form-input {
        width: 100%;
        max-width: 100%;
    }

    /* Footer buttons */
    .wizard-step .settings-card-footer {
        padding: var(--spacing-sm) var(--spacing-md);
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .wizard-step .settings-card-footer-buttons {
        gap: var(--spacing-xs);
    }

    .wizard-step .settings-btn {
        white-space: nowrap;
    }
}

/* ============================================
   CUSTOM TOOLTIPS
   ============================================ */

.has-tooltip {
    position: relative;
    cursor: help;
}

/* Health dots get a default cursor even when they have a tooltip */
.health-dot.has-tooltip {
    cursor: default;
}

/* Health dot tooltips — appear to the right of the dot, no wrap */
.health-dot.has-tooltip::after {
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%) scale(0.95);
    white-space: nowrap;
    max-width: none;
    text-align: left;
}

.health-dot.has-tooltip::before {
    top: 50%;
    left: calc(100% + 2px);
    transform: translateY(-50%) scale(0.95);
    border: 5px solid transparent;
    border-right-color: #2d3561;
    border-bottom-color: transparent;
}

.health-dot.has-tooltip:hover::after,
.health-dot.has-tooltip:hover::before {
    transform: translateY(-50%) scale(1);
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    padding: var(--spacing-sm) var(--spacing-md);
    background: #2d3561;
    color: #ffffff;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: normal;
    max-width: 280px;
    text-align: center;
    line-height: 1.4;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease 0.3s, visibility 0.15s ease 0.3s, transform 0.15s ease 0.3s;
    z-index: var(--z-tooltip);
    pointer-events: none;
}

.has-tooltip::before {
    content: "";
    position: absolute;
    top: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    border: 5px solid transparent;
    border-bottom-color: #2d3561;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease 0.3s, visibility 0.15s ease 0.3s, transform 0.15s ease 0.3s;
    z-index: var(--z-tooltip);
}

.has-tooltip:hover::after,
.has-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}


/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.toast-container {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--spacing-sm);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    font-weight: 500;
    pointer-events: auto;
    animation: toast-slide-in 0.3s ease-out;
    max-width: 400px;
}

.toast.toast-hiding {
    animation: toast-slide-out 0.3s ease-in forwards;
}

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

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

.toast-info {
    background-color: var(--color-primary);
    color: white;
}

.toast-warning {
    background-color: var(--color-warning);
    color: var(--color-text);
}

.toast i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@keyframes toast-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Mobile: bottom center */
@media (max-width: 768px) {
    .toast-container {
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        left: var(--spacing-md);
    }
    
    .toast {
        max-width: 100%;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION OVERLAY
   Shown on small screens in landscape — prompts user to rotate
   ============================================ */
.landscape-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    inset: 0;
    background: var(--color-bg-primary);
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
}

.landscape-overlay-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-3xl);
    text-align: center;
    max-width: 320px;
}

.landscape-overlay-content svg {
    color: var(--color-primary);
    stroke: var(--color-primary);
    animation: rotate-hint 2s ease-in-out infinite;
}

.landscape-overlay-content h2 {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin: 0;
}

.landscape-overlay-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

@keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    40%       { transform: rotate(90deg); }
    60%       { transform: rotate(90deg); }
}

/* Show overlay on small screens in landscape only */
@media (max-height: 500px) and (orientation: landscape) {
    .landscape-overlay {
        display: flex;
    }
}