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

/* ============================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ============================================ */
:root {
    /* Brand Colors */
    --color-primary: #667eea;
    --color-primary-hover: #5568d3;
    --color-primary-light: #f0f4ff;
    --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;
    
    /* Sticky Header Offsets - CORRECT measurements, no margin gap */
    --sticky-tabs-height: 59px;  /* Exact measured height of tabs-header-row */
    --sticky-kpi-height: 76px;   /* Exact measured height of kpi-controls-row (including padding) */
    --sticky-header-total: 135px;  /* 59px + 76px (no margin gap) */
    
    /* 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-border: #e4e4e7;
    --color-border-light: #f0f0f0;
    
    /* Text Colors */
    --color-text-primary: #18181b;
    --color-text-secondary: #52525b;
    --color-text-tertiary: #71717a;
    --color-text-inverse: #ffffff;
    
    /* 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-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;
}

/* ============================================
   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-x: hidden; /* Prevent horizontal overflow */
    position: sticky;
    top: var(--sticky-tabs-height);
    z-index: 8; /* Above table headers (5) but below tabs (10) */
    height: var(--sticky-kpi-height); /* Fixed height to match sticky positioning calculations */
}

/* KPI Display Box - shows stats in bordered box */
.kpi-display-box {
    flex-shrink: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    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);
}

/* 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);
    line-height: 1.5;
    white-space: nowrap;
    display: inline-block;
}

.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;
    min-width: 5ch; /* Fixed 5-character width for up to 99999 */
    display: inline-block;
    text-align: right;
}

.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 archived badge style */
.status-archived {
    background: #6B7280; /* Gray */
    color: white;
}

/* 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;
    min-width: 110px;
    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; /* Don't grow, don't shrink, size based on content */
    width: fit-content; /* Size exactly to content */
}

/* 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 - Purple style matching modals, fixed width */
.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    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-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    height: 36px; /* Match other KPI action buttons */
    flex-shrink: 0;
}

.clear-filters-btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
}

.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: var(--color-gray-350); /* Grey */
    color: var(--color-gray-550);
}

/* Responsive: Stack on mobile */
@media (max-width: 768px) {
    .tabs-header-row {
        flex-direction: column;
        align-items: stretch; /* Changed from flex-start */
        gap: 0; /* Remove gap */
    }
    
    .tabs-header-row .tabs-nav {
        padding-bottom: var(--spacing-sm); /* Reduce gap below tabs */
    }
    
    .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 */
    }
    
    .kpi-search-wrapper {
        width: auto; /* Changed from 100% */
        flex-direction: row; /* Keep search and button horizontal */
        height: auto;
        gap: var(--spacing-xs);
        flex: 1;
        min-width: 200px;
    }
    
    .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: var(--color-bg-secondary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.dashboard {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100%;
    max-width: 100vw;  /* never wider than viewport */
    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: 1200px;
}

/* ============================================
   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: space-between;
    align-items: center;
    gap: var(--spacing-lg);
}

.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-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-right: var(--spacing-lg);  /* ADD THIS - pulls items away from edge */
}

.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; /* Changed from 'auto' to 'scroll' - always show scrollbar */
    overflow-x: auto;
    position: relative;
    min-height: 0;
}

/* Tabs wrapper - NOT sticky, just container */
.index-scroll-wrapper .tabs-wrapper {
    position: relative;
    background: var(--color-bg-primary);
    margin: 0;
    padding: 0;
}

/* Tabs nav - THIS is what's sticky */
.index-scroll-wrapper .tabs-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    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 */
.index-scroll-wrapper .tabs-nav .tab-nav-button {
    padding-bottom: calc(var(--spacing-sm-plus) + var(--spacing-md)); /* 10px + 12px = 22px */
}

.index-scroll-wrapper .tab-panel {
    background: var(--color-bg-primary);
    padding: 0 var(--spacing-lg);  /* Reduced from 3xl to lg */
    padding-top: 0;
    margin-top: 0;
}

/* Ensure tables have proper z-index context */
.lists-table,
/* Ensure tables have proper positioning context */
.items-table,
.lists-table {
    position: relative;
    z-index: 1; /* Lower than headers */
}

/* 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) {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.btn-primary:hover,
button:not([class*="btn-"]):not(.settings-password-toggle):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):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);
}

/* Quick Update button for table rows */
.btn-quick-update {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* Override table button padding */
.items-table .btn-quick-update {
    padding: 0;
    min-width: 28px;
    min-height: 28px;
}

.btn-quick-update:hover {
    color: white;
}

.btn-quick-update:active {
    transform: scale(0.95);
}

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

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

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

/* Header buttons - purple text/icon only */
.header-actions button,
.header-actions button:not([class*="btn-"]) {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    background: transparent;
    color: var(--color-primary);
    border-radius: var(--radius-md);
}

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

.header-actions button:hover,
.header-actions button:not([class*="btn-"]):hover {
    background: var(--color-primary-light);
    transform: none;
    box-shadow: none;
}

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

.header-actions button.active {
    border-bottom: 1px solid var(--color-primary);
    border-radius: 0;
    font-weight: var(--font-weight-semibold);
}

.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%;  /* Fill available space */
    min-width: 1200px;  /* But never smaller than this */ 
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-top: 0; /* No gap - KPI row and headers should be flush */
}


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

.lists-table th,
.items-table th {
    padding: var(--spacing-sm-plus) var(--spacing-md);
    text-align: left;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-xs);
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-gray-250);
    background: var(--color-gray-75);
    box-shadow: none;
    /* Sticky positioning - CSS only, no JavaScript needed */
    position: -webkit-sticky;
    position: sticky;
    top: var(--sticky-header-total);
    z-index: 5; /* Above table content, below KPI row */
}

.lists-table tbody tr,
.items-table tbody tr {
    border-bottom: 1px solid var(--color-gray-350) !important;
    transition: background-color 0.15s ease;
    cursor: pointer;
}

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

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

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

.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-md) var(--spacing-md);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    border-bottom: 1px solid var(--color-gray-350) !important;
}

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


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

/* Text wrapping for key columns - limited to 2 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;
    max-width: 240px;  /* Match Action column width */
}

/* 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-secondary);
    display: block;
    margin-top: 2px;
}

/* Latest Update cell with Quick Update button */
.latest-update-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    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;
}

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

/* Compact type badge - single letter R/I/O for table rows */
.type-badge-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    min-width: unset;
}

/* 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 - Bold with shadows */
.status-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);
    /* Status-specific */
    text-transform: capitalize;
    min-width: 85px; /* Fits "Active" and "Closed" + icon */
}

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

.status-open {
    background: var(--color-danger-lighter); /* Red */
    color: var(--color-danger-text);
}

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

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

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

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

.status-on_hold {
    background: var(--color-gray-350); /* Grey */
    color: var(--color-gray-550);
}

.status-hold {
    background: var(--color-gray-350); /* Grey - same as on_hold */
    color: var(--color-gray-550);
}

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

/* Target date badges - Modern soft style */
.target-badge {
    /* Extends: .badge .badge-md */
}

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

/* 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 */
.join-team-banner {
    background: var(--color-info-light);
    padding: var(--spacing-lg);
    border-radius: var(--radius-md);
    margin: var(--spacing-lg) 0;
    border: 1px solid var(--color-info);
    display: none; /* Hidden by default */
}

.join-team-banner.active {
    display: flex;
}

.join-team-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    width: 100%;
}

.join-team-text {
    flex: 1; /* Take up remaining space */
}

.join-team-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-shrink: 0; /* Don't shrink buttons */
}

/* Mobile responsiveness */
/* Mobile responsiveness */
@media (max-width: 768px) {
    .join-team-banner {
        position: relative;
        padding-top: var(--spacing-xl); /* Extra space for X button */
    }
    
    .join-team-content {
        flex-direction: column;
        align-items: stretch;
    }
    
    .join-team-actions {
        flex-direction: column;
        align-items: stretch;
        margin-top: var(--spacing-md);
    }
    
    .join-team-banner-close {
        position: absolute;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        margin: 0;
    }
    
    /* Limit text wrapping to 2 lines on mobile */
    .items-table .wrap-text,
    .dashboard-table .wrap-text {
        -webkit-line-clamp: 2;
    }
}

.join-team-text h3 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--color-text-primary);
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-md);
}

.join-team-text p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
}

.join-team-icon {
    width: 20px;
    height: 20px;
    color: var(--color-info);
    vertical-align: middle;
}

/* Close button for join-team banner */
.join-team-banner-close {
    background: none;
    border: none;
    padding: var(--spacing-xs);
    cursor: pointer;
    color: var(--color-text-secondary);
    opacity: 0.6;
    transition: opacity 0.2s ease;
    margin-left: auto;
    flex-shrink: 0;
}

.join-team-banner-close:hover {
    opacity: 1;
    color: var(--color-text-primary);
}

.join-team-banner-close i {
    width: 20px;
    height: 20px;
}

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

.settings-scroll-wrapper .tabs-header-row {
    padding-left: var(--spacing-3xl);
    padding-right: var(--spacing-3xl);
}

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

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

/* ============================================
   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;
    overflow-y: auto;
}

/* 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-lg); /* Padding on right to keep content from edge */
    max-width: 100%; /* Prevent overflow */
    overflow: visible; /* Allow dropdowns to show */
}

/* 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-lg);
    flex-shrink: 0; /* Don't shrink - keep buttons visible */
}

/* Inline info message */
.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);
}

/* Filter/Sort warning message (in KPI bar) */
.filter-sort-warning {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.filter-sort-warning svg.scope-warning-icon {
    width: 12px;
    height: 12px;
    stroke: var(--color-danger);
    flex-shrink: 0;
}

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

/* Radio button style - circular indicator with label */
.scope-button {
    display: flex !important;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md) !important;
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary) !important;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: none !important;
    transform: none !important;
}

/* Radio button circle indicator */
.scope-button::before {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background: white;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

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

.scope-button:hover::before {
    border-color: var(--color-primary);
}

/* Active state - filled circle with theme purple #667eea */
.scope-button.active {
    color: var(--color-primary) !important;
    font-weight: var(--font-weight-semibold);
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

.scope-button.active::before {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: inset 0 0 0 3px white; /* Inner white circle */
}

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


/* Tabs wrapper */
.tabs-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%; /* Changed from max-content to prevent overflow */
    max-width: 100%; /* Ensure it doesn't exceed viewport */
}

.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;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: var(--spacing-xs);
    min-height: 0; /* Required for flex child to scroll properly */
}

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

/* 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;
    padding-top: var(--spacing-md);
    padding-bottom: var(--spacing-md);
}

/* 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)
   ============================================ */
.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: center;
    margin-bottom: var(--spacing-3xl);
}

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

.auth-logo p {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin: 0;
}

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

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

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

.form-section button {
    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);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--color-border);
}

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

.dashboard-table tbody tr {
    border-bottom: 1px solid var(--color-border) !important;
    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 !important;
}

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

/* ============================================
   LEGAL PAGES (Terms, Privacy)
   ============================================ */
body.legal-page {
    background: var(--color-bg-secondary);
    padding: var(--spacing-xl);
    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-container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-bg-primary);
    padding: var(--spacing-4xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.legal-container h1 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

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

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

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

.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-container ul {
    margin: var(--spacing-md) 0 var(--spacing-lg) var(--spacing-xl);
    line-height: var(--line-height-relaxed);
}

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

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

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

.help-scroll-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.help-scroll-wrapper .tabs-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-bg-primary);
    padding: var(--spacing-md) var(--spacing-lg);
    flex-shrink: 0;
    display: flex;  
    gap: var(--spacing-md); 
    justify-content: flex-start;   
}

.help-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--spacing-3xl);
    padding-top: var(--spacing-sm);
    overflow-y: auto;
    flex: 1;
}

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

.help-container h2:first-of-type {
    margin-top: 0; /* No gap for the first heading */
}

.help-container h1 {
    color: var(--color-primary);
    margin-bottom: var(--spacing-sm);
}

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

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

.help-container p {
    line-height: var(--line-height-relaxed);
    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: var(--line-height-relaxed);
}

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

.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-scroll-wrapper .tabs-nav {
        padding: var(--spacing-md);
        overflow-x: auto;
        justify-content: flex-start;  /* Left-align on mobile instead of center */
    }
    
    .help-scroll-wrapper .tab-nav-button {
        flex-shrink: 0;
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm) var(--spacing-md);
    }
    
    .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-actions.mobile-menu-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 120px;
        left: 0;
        right: 0;
        background: var(--color-bg-primary);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        z-index: 1001;
    }
    
    .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: 120px;
        left: 0;
        right: 0;
        background: var(--color-bg-primary);
        padding: var(--spacing-lg);
        box-shadow: var(--shadow-xl);
        z-index: 1001;
    }
    
    .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: var(--spacing-md);
    }
    
    .header {
        padding: var(--spacing-md);
    }
    
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .content-card {
        padding: 0 var(--spacing-md) var(--spacing-md) var(--spacing-md);
        max-height: calc(100vh - 180px);
        overflow-y: auto;
        overflow-x: auto;
    }

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

    #items-container {
        padding-left: 0;
        padding-right: 0;
    }
    
    .items-table,
    .lists-table {
        width: 800px;
    }

    /* 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);
    }
    
    /* Tables - horizontal scroll */
    .items-table,
    .lists-table {
        min-width: 800px;
    }
    
    .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 */
    }
    
    .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;
    }
}

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

/* 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-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
}

.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;
    overflow-y: auto;
    min-height: 0;
}

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

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

/* Tabs inside modal-form-card */
.modal-tabs {
    padding: 0 var(--spacing-lg);
    background: var(--color-bg-primary);
    border-bottom: 1px solid var(--color-border);
}

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

/* 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-lg) var(--spacing-xl);
    border-top: 1px solid var(--color-border);
    background: var(--color-gray-50);
}

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

.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);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

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

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

/* 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) {
  /* Tab Navigation */
  .settings-scroll-wrapper .tabs-nav {
    padding: var(--spacing-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE */
  }
  
  .settings-scroll-wrapper .tabs-nav::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Chrome/Safari */
  }
  
  /* 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);
  }
}

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

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

.item-details-left,
.item-details-right {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Make form fields with textareas grow to fill available space */
.item-details-left .form-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-bottom: 0;
}

.item-details-left .form-field .modal-form-textarea-compact {
    flex: 1;
    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;
}

.item-details-right .updates-container-tall {
    flex: 1;
    min-height: 230px;
    max-height: 280px;
    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);
}

/* Full-width divider between upper and lower sections */
.item-details-divider {
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-sm) 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;
    }
    
    .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);
    text-transform: uppercase;
}

.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 Body - overrides default body styles on wizard page */
.wizard-page {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    height: 100vh;
    margin: 0;
    padding: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-container {
    max-width: 800px;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.wizard-header {
    text-align: center;
    color: white;
    margin-bottom: var(--spacing-xl);
}

.wizard-header h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: white;
    margin: 0 0 var(--spacing-xs) 0;
}

.wizard-header p {
    color: white;
    margin: 0;
}

/* Progress Stepper */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--spacing-xl);
    padding: 0 var(--spacing-md);
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: rgba(255,255,255,0.3);
}

.progress-step.completed:not(:last-child)::after {
    background: rgba(255,255,255,0.8);
}

.step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-xs);
    position: relative;
    z-index: 1;
}

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

.progress-step.completed .step-number {
    background: rgba(255,255,255,0.8);
    color: var(--color-primary);
}

.step-label {
    font-size: var(--font-size-xs);
    color: rgba(255,255,255,0.7);
    text-align: center;
    max-width: 80px;
}

.progress-step.active .step-label,
.progress-step.completed .step-label {
    color: white;
}

/* Wizard Content Card */
.wizard-content {
    background: var(--color-bg-primary);
    max-width: 752px;
    width: 100%;
    flex: 1;
    min-height: 0;
    max-height: 70vh;
    margin: 0 auto;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    position: relative;
}

.wizard-step {
    display: none;
}

.wizard-step.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
}

/* Step body area - padded content above the footer */
.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 (global :last-child removes it, but wizard steps need the visual separator) */
.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);
}

/* Border between form groups inside settings-card-body */
.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 modifier for centred greeting */
.welcome-header {
    text-align: center;
}

.welcome-header h3 {
    font-size: var(--font-size-xl);
}

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

.welcome-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}

.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 - kept for backwards compat but prefer toasts */
.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 (PI step) */
.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);
}

/* Ready step subtitle */
.ready-subtitle {
    color: var(--color-text-secondary);
}

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

/* Estimated time */
.estimated-time {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.8);
    margin-top: var(--spacing-sm);
}

.estimated-time svg {
    width: 14px;
    height: 14px;
}

/* PI Preview Table 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 Responsive */
@media (max-width: 600px) {
    .wizard-progress {
        padding: 0;
    }
    
    .step-label {
        display: none;
    }
    
    .wizard-step-body {
        padding: var(--spacing-lg);
    }
}


/* ============================================
   CUSTOM TOOLTIPS
   ============================================ */

.has-tooltip {
    position: relative;
    cursor: help;
    border-bottom: 1px dotted var(--color-text-secondary);
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: 400;
    white-space: nowrap;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: var(--z-tooltip);
    pointer-events: none;
}

.has-tooltip::before {
    content: "";
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--color-border);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: var(--z-tooltip);
}

.has-tooltip:hover::after,
.has-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}


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