/* ============================================
   FGBStudio - Consolidated Stylesheet
   ============================================
   
   Design system adapted from LineupIQ patterns
   for consistent, polished UI across FGB apps.
   
   Table of Contents:
   ------------------
   1. CSS Custom Properties (Theme Variables)
   2. Theme Transitions
   3. Base Container
   4. Event Tabs (Top Bar)
   5. Model Tabs (Second Row)
   6. Main Content Area
   7. Empty States
   8. Split Panel Workspace
   9. Panel Headers & Toolbars
   10. Grid Search Toolbar
   11. Event Selection Modal
   12. Dataset Selection Modal
   13. Context Menus
   14. Flatpickr Customization
   15. AG Grid Theme Overrides
   16. AG Grid Row States
   17. AG Grid Cell Patterns
   18. Editable Cell Pattern
   19. Player Cell Components
   20. Config Panel
   21. Weights System
   22. Loading States
   23. Buttons & Interactions
   24. Filter Components
   25. Dropdown Menus
   26. Form Inputs
   27. Confirmation Modal
   28. Tooltips
   29. Status Badges
   30. Utility Classes
   31. Animations
   32. Mobile Responsive
   
   ============================================ */

/* ============================================
   1. CSS Custom Properties (Theme Variables)
   ============================================ */
:root {
    /* Background Colors */
    --fgb-bg-primary: #F3F4F6;
    --fgb-bg-secondary: #FFFFFF;
    --fgb-bg-tertiary: #E5E7EB;
    --fgb-bg-hover: rgba(0, 0, 0, 0.04);
    /* Text Colors */
    --fgb-text-primary: #111827;
    --fgb-text-secondary: #4B5563;
    --fgb-text-muted: #9CA3AF;
    /* Border Colors */
    --fgb-border-color: #D1D5DB;
    /* Accent Colors */
    --fgb-accent-green: #10b981;
    --fgb-accent-green-hover: rgba(16, 185, 129, 0.1);
    --fgb-accent-green-active: rgba(16, 185, 129, 0.15);
    --fgb-accent-blue: #3b82f6;
    --fgb-accent-yellow: #ffc107;
    --fgb-accent-red: #ef4444;
    /* Shadows */
    --fgb-shadow: rgba(0, 0, 0, 0.12);
    --fgb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --fgb-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --fgb-shadow-lg: 0 4px 24px rgba(0, 0, 0, 0.15);
    /* Modal */
    --fgb-modal-backdrop: rgba(0, 0, 0, 0.5);
}

/* Dark Theme */
[data-bs-theme="dark"] {
    --fgb-bg-primary: #1a1d29;
    --fgb-bg-secondary: #252834;
    --fgb-bg-tertiary: #2d3142;
    --fgb-bg-hover: rgba(255, 255, 255, 0.05);
    --fgb-text-primary: #ffffff;
    --fgb-text-secondary: #b0b3c1;
    --fgb-text-muted: #6b7280;
    --fgb-border-color: #3d4152;
    --fgb-accent-green: #10b981;
    --fgb-accent-green-hover: rgba(16, 185, 129, 0.08);
    --fgb-accent-green-active: rgba(16, 185, 129, 0.15);
    --fgb-shadow: rgba(0, 0, 0, 0.3);
    --fgb-modal-backdrop: rgba(0, 0, 0, 0.85);
}

/* ============================================
   2. Theme Transitions
   ============================================ */
.fgbstudio-container,
.fgbstudio-container .event-tabs-container,
.fgbstudio-container .event-tab,
.fgbstudio-container .model-tabs-section,
.fgbstudio-container .model-tab,
.fgbstudio-container .event-modal-content,
.fgbstudio-container .date-picker-section,
.fgbstudio-container .date-nav-btn,
.fgbstudio-container .date-display,
.fgbstudio-container .date-display-small,
.fgbstudio-container .events-table th,
.fgbstudio-container .events-table td,
.fgbstudio-container .model-context-menu,
.fgbstudio-container .model-context-menu-item,
.fgbstudio-container .empty-state,
.fgbstudio-container .panel-header,
.fgbstudio-container .panel-content,
.fgbstudio-container .grid-search-toolbar,
.fgbstudio-container .grid-subheader,
.dataset-modal-content,
.dataset-card {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   3. Base Container
   ============================================ */
.fgbstudio-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 56px);
    background: var(--fgb-bg-primary);
    color: var(--fgb-text-primary);
    overflow: hidden;
}

/* ============================================
   4. Event Tabs (Top Bar)
   ============================================ */

.fgbstudio-brand {
    align-items: center;
    padding: 0 1rem;
    flex-shrink: 0;
}

    .fgbstudio-brand .flagship-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin: 0;
        color: var(--fgb-text-primary);
    }

    .fgbstudio-brand .text-accent {
        color: var(--fgb-accent-green);
    }

.event-tabs-container {
    background: var(--fgb-bg-secondary);
    border-bottom: 1px solid var(--fgb-border-color);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.event-date-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.75rem;
    padding-right: 0.75rem;
    border-right: 1px solid var(--fgb-border-color);
    flex-shrink: 0;
}

.date-nav-btn {
    background: transparent;
    border: 1px solid var(--fgb-border-color);
    color: var(--fgb-text-primary);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

    .date-nav-btn:hover {
        background: var(--fgb-bg-primary);
        border-color: var(--fgb-accent-green);
    }

.date-display-small {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--fgb-bg-primary);
    border-radius: 5px;
    border: 1px solid var(--fgb-border-color);
    font-size: 0.8rem;
    white-space: nowrap;
    color: var(--fgb-text-primary);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .date-display-small:hover {
        border-color: var(--fgb-accent-green);
    }

    .date-display-small i {
        color: var(--fgb-accent-green);
    }

/* Scrollable tabs wrapper */
.event-tabs-scroll-wrapper {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    position: relative;
}

.event-tabs-inner {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 0.25rem 0;
    flex: 1;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

    .event-tabs-inner::-webkit-scrollbar {
        display: none;
    }

/* Scroll fade indicators */
.event-tabs-scroll-wrapper::before,
.event-tabs-scroll-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.event-tabs-scroll-wrapper::before {
    left: 0;
    background: linear-gradient(to right, var(--fgb-bg-secondary), transparent);
}

.event-tabs-scroll-wrapper::after {
    right: 0;
    background: linear-gradient(to left, var(--fgb-bg-secondary), transparent);
}

.event-tabs-scroll-wrapper.can-scroll-left::before,
.event-tabs-scroll-wrapper.can-scroll-right::after {
    opacity: 1;
}

/* Event tab items */
.event-tab {
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: none;
    color: var(--fgb-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

    .event-tab:hover {
        color: var(--fgb-text-primary);
        background: var(--fgb-bg-hover);
    }

    .event-tab.active {
        color: var(--fgb-accent-green);
        border-bottom-color: var(--fgb-accent-green);
    }

    .event-tab .event-tab-close {
        margin-left: 0.5rem;
        opacity: 0.6;
        font-size: 0.7rem;
        padding: 0.125rem;
        border-radius: 3px;
        transition: background 0.15s ease, opacity 0.15s ease;
    }

        .event-tab .event-tab-close:hover {
            opacity: 1;
            background: var(--fgb-bg-tertiary);
        }

    .event-tab:hover .event-tab-close {
        opacity: 0.8;
    }

/* Add Event Button */
.add-event-btn {
    padding: 0.4rem 0.75rem;
    background: transparent;
    border: 1px dashed var(--fgb-border-color);
    color: var(--fgb-text-secondary);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.2s;
    font-size: 0.8rem;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

    .add-event-btn:hover {
        border-color: var(--fgb-accent-green);
        color: var(--fgb-accent-green);
        border-style: solid;
    }

/* Settings dropdown */
/* Settings dropdown - fix for overflow clipping */
.event-tabs-settings {
    position: relative;
    z-index: 100;
    margin-left: 0.5rem;
}

    .event-tabs-settings .dropdown-menu {
        position: fixed !important;
        z-index: 1051;
        top: auto !important;
        right: 12px !important;
        left: auto !important;
        transform: none !important;
    }

    .event-tabs-settings .btn-icon {
        color: var(--fgb-text-muted);
        padding: 0.375rem 0.5rem;
        border-radius: 6px;
        transition: all 0.15s ease;
        background: transparent;
        border: none;
    }

        .event-tabs-settings .btn-icon:hover {
            color: var(--fgb-text-primary);
            background: var(--fgb-bg-tertiary);
        }

/* ============================================
   5. Model Tabs (Second Row)
   ============================================ */
.model-tabs-section {
    background: var(--fgb-bg-tertiary);
    border-bottom: 1px solid var(--fgb-border-color);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 60px;
    flex-shrink: 0;
}

.model-tabs-container {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    align-items: center;
}

.model-tab {
    padding: 0.5rem 1rem;
    background: var(--fgb-bg-secondary);
    border: 1px solid var(--fgb-border-color);
    border-radius: 6px;
    color: var(--fgb-text-primary);
    opacity: 0.75;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    font-size: 0.9rem;
    position: relative;
    transition: all 0.15s ease;
}

    .model-tab:hover {
        border-color: var(--fgb-accent-green);
        color: var(--fgb-text-primary);
        opacity: 1;
    }

    .model-tab.active {
        background: var(--fgb-accent-green);
        border-color: var(--fgb-accent-green);
        color: white;
        opacity: 1;
    }

    /* Regular Model Tab Styling (Green Gradient) */
    .model-tab:not(.summary-tab) {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%);
        border-color: rgba(16, 185, 129, 0.25);
    }

        .model-tab:not(.summary-tab):hover {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, transparent 100%);
            border-color: rgba(16, 185, 129, 0.4);
        }

        .model-tab:not(.summary-tab).active {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(16, 185, 129, 0.05) 100%);
            border-color: var(--fgb-accent-green);
            color: var(--fgb-text-primary);
        }

        .model-tab:not(.summary-tab) i.bi-grid-3x3-gap {
            color: var(--fgb-accent-green);
        }

    /* Summary Tab Styling (Blue) */
    .model-tab.summary-tab {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, transparent 100%);
        border-color: rgba(59, 130, 246, 0.3);
    }

        .model-tab.summary-tab:hover {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, transparent 100%);
            border-color: rgba(59, 130, 246, 0.5);
        }

        .model-tab.summary-tab.active {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(59, 130, 246, 0.05) 100%);
            border-color: #3b82f6;
            color: var(--fgb-text-primary);
        }

        .model-tab.summary-tab i.bi-collection {
            color: #3b82f6;
        }

.model-tab-close {
    margin-left: 0.5rem;
    opacity: 0.6;
    font-size: 0.85rem;
}

    .model-tab-close:hover {
        opacity: 1;
        color: inherit;
    }

/* Model Tab Loading State */
.model-tab.loading::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--fgb-accent-green), transparent);
    animation: loading-slide 1.5s infinite;
}

/* Model Count Badge */
.model-count-badge {
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    border-radius: 10px;
    margin-left: 0.25rem;
    font-weight: 600;
}

    .model-count-badge:empty {
        display: none;
    }

/* Add Model Button */
.add-model-btn {
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px dashed var(--fgb-border-color);
    color: var(--fgb-text-secondary);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    flex-shrink: 0;
    white-space: nowrap;
}

    .add-model-btn:hover {
        border-color: var(--fgb-accent-green);
        color: var(--fgb-accent-green);
        border-style: solid;
    }

/* ============================================
   6. Main Content Area
   ============================================ */
#mainContentArea {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
}

/* ============================================
   7. Empty States
   ============================================ */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--fgb-text-secondary);
}

    .empty-state h3 {
        color: var(--fgb-text-primary);
        margin: 0 0 0.5rem;
    }

    .empty-state p {
        margin: 0;
    }

/* Welcome Empty State (No Event Selected) */
.empty-state-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 2rem;
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--fgb-accent-green), #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
}

    .empty-state-icon i {
        font-size: 2.25rem;
        color: white;
    }

.empty-state-welcome h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--fgb-text-primary);
    margin: 0 0 0.5rem;
}

.empty-state-subtitle {
    font-size: 1rem;
    color: var(--fgb-text-secondary);
    margin: 0 0 2rem !important;
    max-width: 400px;
}

.empty-state-cta {
    padding: 0.75rem 2rem;
    font-weight: 500;
    border-radius: 8px;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--fgb-accent-green), #10b981);
    border: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .empty-state-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
        background: linear-gradient(135deg, var(--fgb-accent-green), #10b981);
    }

.empty-state-features {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--fgb-text-muted);
    font-size: 0.875rem;
}

    .feature-item i {
        font-size: 1.5rem;
        color: var(--fgb-text-secondary);
    }

/* Grid Empty State (No Results) */
.grid-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    padding: 2rem;
    text-align: center;
}

    .grid-empty-state i {
        font-size: 2.5rem;
        color: var(--fgb-text-muted);
        margin-bottom: 1rem;
        opacity: 0.5;
    }

    .grid-empty-state h5 {
        color: var(--fgb-text-primary);
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .grid-empty-state p {
        color: var(--fgb-text-secondary);
        font-size: 0.875rem;
        margin: 0;
    }

/* ============================================
   8. Split Panel Workspace
   ============================================ */
.model-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.workspace-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 300px;
    min-height: 0;
}

.panel-left {
    flex: 1 1 30%;
    container-type: inline-size;
    container-name: config-panel;
}

.panel-right {
    flex: 1 1 70%;
    container-type: inline-size;
    container-name: player-panel;
}

/* Panel Divider */
.panel-divider {
    width: 8px;
    background: var(--fgb-bg-tertiary);
    cursor: col-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    position: relative;
    flex-shrink: 0;
    user-select: none;
}

    .panel-divider:hover,
    .panel-divider.dragging {
        background: var(--fgb-accent-green);
    }

    .panel-divider::before {
        content: '';
        width: 2px;
        height: 40px;
        background: var(--fgb-border-color);
        border-radius: 2px;
        transition: background 0.2s;
    }

    .panel-divider:hover::before,
    .panel-divider.dragging::before {
        background: white;
    }

/* Prevent text selection while dragging */
body.panel-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

    body.panel-resizing * {
        cursor: col-resize !important;
    }

/* ============================================
   9. Panel Headers & Toolbars
   ============================================ */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--fgb-bg-secondary);
    border-bottom: 1px solid var(--fgb-border-color);
    flex-shrink: 0;
    min-height: 48px;
    height: 48px;
}

.panel-header-left,
.panel-header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.panel-title {
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fgb-text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .panel-title i {
        color: var(--fgb-accent-green);
    }

.panel-badge {
    background: transparent;
    border: 1px solid var(--fgb-border-color);
    color: var(--fgb-text-secondary);
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}

/* Panel Content */
.panel-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    min-height: 0;
}

    /* Custom scrollbar for panel content */
    .panel-content::-webkit-scrollbar {
        width: 6px;
    }

    .panel-content::-webkit-scrollbar-track {
        background: transparent;
    }

    .panel-content::-webkit-scrollbar-thumb {
        background: var(--fgb-border-color);
        border-radius: 3px;
    }

        .panel-content::-webkit-scrollbar-thumb:hover {
            background: var(--fgb-text-muted);
        }

/* ============================================
   10. Grid Search Toolbar
   ============================================ */
.grid-search-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--fgb-bg-secondary);
    border-bottom: 1px solid var(--fgb-border-color);
    height: 44px;
    gap: 1rem;
    flex-shrink: 0;
}

.search-input-wrapper {
    position: relative;
    flex: 1;
    max-width: 300px;
}

    .search-input-wrapper .search-icon {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--fgb-text-muted);
        font-size: 0.875rem;
        pointer-events: none;
    }

    .search-input-wrapper input {
        padding-left: 32px;
        padding-right: 32px;
        background: var(--fgb-bg-tertiary);
        border: 1px solid var(--fgb-border-color);
        color: var(--fgb-text-primary);
        font-size: 0.875rem;
        height: 32px;
    }

        .search-input-wrapper input::placeholder {
            color: var(--fgb-text-muted);
        }

        .search-input-wrapper input:focus {
            border-color: var(--fgb-accent-green);
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
            outline: none;
        }

.btn-search-clear {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--fgb-text-muted);
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    transition: color 0.15s ease;
}

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

/* Toolbar Settings (right side) */
.toolbar-settings {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Grid Subheader (Second Toolbar Row) */
.grid-subheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--fgb-bg-tertiary);
    border-bottom: 1px solid var(--fgb-border-color);
    gap: 0.75rem;
    flex-shrink: 0;
    height: 44px;
}

.grid-subheader-left,
.grid-subheader-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Display Mode Toggle Buttons */
.display-mode-toggle {
    display: flex;
    background: var(--fgb-bg-tertiary);
    border: 1px solid var(--fgb-border-color);
    border-radius: 6px;
    padding: 2px;
}

.display-mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--fgb-text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .display-mode-btn:hover {
        color: var(--fgb-text-primary);
        background: var(--fgb-bg-secondary);
    }

    .display-mode-btn.active {
        background: var(--fgb-accent-green);
        color: white;
    }

    .display-mode-btn i {
        font-size: 0.875rem;
    }

/* ============================================
   11. Event Selection Modal
   ============================================ */
.event-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fgb-modal-backdrop);
    z-index: 9999;
}

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

.event-modal-content {
    background: var(--fgb-bg-secondary);
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    height: 70vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 24px var(--fgb-shadow);
}

.event-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--fgb-border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

    .event-modal-header h2 {
        margin: 0;
        color: var(--fgb-text-primary);
    }

.event-modal-close {
    background: transparent;
    border: none;
    color: var(--fgb-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.2s;
}

    .event-modal-close:hover {
        color: var(--fgb-accent-red);
    }

.event-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

/* Date Picker Section in Modal */
.date-picker-section {
    padding: 1rem 1.5rem;
    background: var(--fgb-bg-tertiary);
    border-bottom: 1px solid var(--fgb-border-color);
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.date-display {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--fgb-bg-primary);
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid var(--fgb-border-color);
    min-width: 200px;
    justify-content: center;
    transition: all 0.2s;
    color: var(--fgb-text-primary);
}

    .date-display:hover {
        border-color: var(--fgb-accent-green);
    }

    .date-display i {
        color: var(--fgb-accent-green);
    }

/* Events Table */
.events-table-container {
    min-width: 600px;
    padding: 1rem;
}

.events-table {
    width: 100%;
    border-collapse: collapse;
    border: none;
}

    .events-table thead {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--fgb-bg-tertiary);
    }

    .events-table th {
        text-align: left;
        padding: 0.75rem;
        background: var(--fgb-bg-tertiary);
        color: var(--fgb-text-secondary);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        border: none;
        border-bottom: 1px solid var(--fgb-border-color);
    }

    .events-table td {
        text-align: left;
        padding: 0.75rem;
        color: var(--fgb-text-primary);
        border: none;
        border-bottom: 1px solid rgba(128, 128, 128, 0.08);
    }

    .events-table tbody tr {
        cursor: pointer;
        transition: background 0.15s ease;
    }

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

        .events-table tbody tr:hover {
            background: var(--fgb-accent-green-hover);
        }

        .events-table tbody tr.event-selected {
            background: var(--fgb-accent-green-active);
            border-left: 3px solid var(--fgb-accent-green);
        }

/* ============================================
   12. Dataset Selection Modal
   ============================================ */
.dataset-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--fgb-modal-backdrop);
    z-index: 9999;
}

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

.dataset-modal-content {
    background: var(--fgb-bg-primary);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dataset-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--fgb-border-color);
    flex-shrink: 0;
}

    .dataset-modal-header h2 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--fgb-text-primary);
        display: flex;
        align-items: center;
    }

.dataset-modal-close {
    background: none;
    border: none;
    color: var(--fgb-text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s ease;
}

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

.dataset-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.dataset-modal-subtitle {
    color: var(--fgb-text-secondary);
    margin: 0 0 1.5rem;
    font-size: 0.9375rem;
}

.dataset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.dataset-card {
    position: relative;
    background: var(--fgb-bg-secondary);
    border: 2px solid var(--fgb-border-color);
    border-radius: 10px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

    .dataset-card:hover:not(.disabled) {
        border-color: var(--fgb-accent-green);
        background: var(--fgb-bg-tertiary);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    }

    .dataset-card.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

.dataset-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--fgb-accent-green), #10b981);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .dataset-card-icon i {
        font-size: 1.5rem;
        color: white;
    }

.dataset-card.disabled .dataset-card-icon {
    background: var(--fgb-bg-tertiary);
}

    .dataset-card.disabled .dataset-card-icon i {
        color: var(--fgb-text-muted);
    }

.dataset-card-content {
    flex: 1;
    min-width: 0;
}

    .dataset-card-content h3 {
        margin: 0 0 0.375rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--fgb-text-primary);
    }

    .dataset-card-content p {
        margin: 0 0 0.5rem;
        font-size: 0.8125rem;
        color: var(--fgb-text-secondary);
        line-height: 1.4;
    }

.dataset-category {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--fgb-bg-tertiary);
    color: var(--fgb-text-muted);
}

.coming-soon-badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--fgb-bg-tertiary);
    color: var(--fgb-text-muted);
}

/* ============================================
   13. Context Menus
   ============================================ */
.model-context-menu {
    position: fixed;
    background: var(--fgb-bg-secondary);
    border: 1px solid var(--fgb-border-color);
    border-radius: 6px;
    box-shadow: 0 4px 12px var(--fgb-shadow);
    z-index: 10000;
    min-width: 180px;
    display: none;
}

    .model-context-menu.show {
        display: block;
    }

.model-context-menu-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--fgb-text-primary);
    border-bottom: 1px solid var(--fgb-border-color);
}

    .model-context-menu-item:last-child {
        border-bottom: none;
    }

    .model-context-menu-item:hover {
        background: rgba(59, 130, 246, 0.1);
    }

    .model-context-menu-item.danger:hover {
        background: rgba(220, 53, 69, 0.1);
        color: #dc3545;
    }

/* ============================================
   14. Flatpickr Customization
   ============================================ */
.flatpickr-calendar {
    background: var(--fgb-bg-primary) !important;
    border: 1px solid var(--fgb-border-color) !important;
    border-radius: 8px;
    box-shadow: 0 4px 24px var(--fgb-shadow);
    overflow: hidden;
}

.flatpickr-months {
    padding: 0.5rem;
}

    .flatpickr-months .flatpickr-month {
        background: var(--fgb-bg-primary) !important;
        color: var(--fgb-text-primary) !important;
    }

.flatpickr-current-month {
    font-weight: 600;
    color: var(--fgb-text-primary) !important;
}

    .flatpickr-current-month .flatpickr-monthDropdown-months {
        background: var(--fgb-bg-primary) !important;
        color: var(--fgb-text-primary) !important;
    }

        .flatpickr-current-month .flatpickr-monthDropdown-months option {
            background: var(--fgb-bg-primary) !important;
            color: var(--fgb-text-primary) !important;
        }

    .flatpickr-current-month input.cur-year {
        color: var(--fgb-text-primary) !important;
    }

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--fgb-text-primary) !important;
}

    .flatpickr-months .flatpickr-prev-month:hover,
    .flatpickr-months .flatpickr-next-month:hover {
        fill: var(--fgb-accent-green) !important;
    }

    .flatpickr-months .flatpickr-prev-month svg,
    .flatpickr-months .flatpickr-next-month svg {
        fill: inherit !important;
    }

.flatpickr-weekdays {
    background: var(--fgb-bg-primary) !important;
}

span.flatpickr-weekday {
    background: var(--fgb-bg-primary) !important;
    color: var(--fgb-text-secondary) !important;
    font-weight: 600;
}

.flatpickr-days {
    background: var(--fgb-bg-primary) !important;
}

.flatpickr-day {
    color: var(--fgb-text-primary) !important;
    border-color: transparent !important;
    border-radius: 6px;
    position: relative;
}

    .flatpickr-day:hover {
        background: var(--fgb-bg-tertiary) !important;
        border-color: var(--fgb-border-color) !important;
    }

    .flatpickr-day.today {
        border-color: var(--fgb-accent-green) !important;
    }

    .flatpickr-day.selected,
    .flatpickr-day.selected:hover {
        background: var(--fgb-accent-green) !important;
        border-color: var(--fgb-accent-green) !important;
        color: #fff !important;
    }

    .flatpickr-day.prevMonthDay,
    .flatpickr-day.nextMonthDay {
        color: var(--fgb-text-secondary) !important;
        opacity: 0.4;
    }

    .flatpickr-day.flatpickr-disabled {
        color: var(--fgb-text-secondary) !important;
        opacity: 0.25;
    }

.flatpickr-innerContainer,
.flatpickr-rContainer {
    background: var(--fgb-bg-primary) !important;
}

/* Flatpickr Dot Indicators */
.flatpickr-day.has-event::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: var(--fgb-accent-green);
    border-radius: 50%;
}

.flatpickr-day.selected.has-event::after,
.flatpickr-day.selected:hover.has-event::after {
    background: #fff;
}

/* Add Event Button in Flatpickr */
.flatpickr-add-event-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    margin: 0;
    background: var(--fgb-accent-green);
    color: #fff;
    border: none;
    border-top: 1px solid var(--fgb-border-color);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-radius: 0 0 4px 4px;
}

    .flatpickr-add-event-btn:hover {
        background: #0ea472;
    }

    .flatpickr-add-event-btn i {
        font-size: 0.9rem;
    }

/* ============================================
   15. AG Grid Theme Overrides
   ============================================ */
#playersGrid {
    height: 100%;
    width: 100%;
}

.ag-theme-quartz,
.ag-theme-quartz-dark {
    --ag-background-color: var(--fgb-bg-secondary);
    --ag-header-background-color: var(--fgb-bg-tertiary);
    --ag-odd-row-background-color: var(--fgb-bg-secondary);
    --ag-even-row-background-color: var(--fgb-bg-secondary);
    --ag-row-hover-color: var(--fgb-bg-hover);
    --ag-selected-row-background-color: transparent;
    --ag-border-color: var(--fgb-border-color);
    --ag-header-foreground-color: var(--fgb-text-secondary);
    --ag-foreground-color: var(--fgb-text-primary);
    --ag-secondary-foreground-color: var(--fgb-text-secondary);
    --ag-row-border-color: var(--fgb-border-color);
    --ag-cell-horizontal-border: solid var(--fgb-border-color);
    --ag-header-column-separator-color: var(--fgb-border-color);
    --ag-header-column-separator-display: block;
    --ag-input-focus-border-color: var(--fgb-accent-green);
    --ag-range-selection-border-color: transparent;
    --ag-range-selection-background-color: transparent;
    --ag-checkbox-checked-color: var(--fgb-accent-green);
    --ag-font-family: inherit;
    --ag-font-size: 14px;
    --ag-grid-size: 6px;
    --ag-list-item-height: 32px;
    --ag-row-height: 42px;
    --ag-header-height: 48px;
    --ag-border-radius: 0;
}

    .ag-theme-quartz .ag-root-wrapper,
    .ag-theme-quartz-dark .ag-root-wrapper {
        border: none;
        border-radius: 0;
    }

    .ag-theme-quartz .ag-center-header .ag-header-cell-label,
    .ag-theme-quartz-dark .ag-center-header .ag-header-cell-label {
        justify-content: center;
    }

    .ag-theme-quartz .ag-header-cell-text,
    .ag-theme-quartz-dark .ag-header-cell-text {
        font-weight: 600;
        text-transform: uppercase;
        font-size: 0.8rem;
        letter-spacing: 0.02em;
    }

    .ag-theme-quartz .ag-pinned-left-header,
    .ag-theme-quartz .ag-pinned-left-cols-container,
    .ag-theme-quartz-dark .ag-pinned-left-header,
    .ag-theme-quartz-dark .ag-pinned-left-cols-container {
        box-shadow: 2px 0 4px var(--fgb-shadow);
    }

    /* Cell focus - preserve right border */
    .ag-theme-quartz .ag-cell-focus,
    .ag-theme-quartz .ag-cell-focus:focus-within,
    .ag-theme-quartz-dark .ag-cell-focus,
    .ag-theme-quartz-dark .ag-cell-focus:focus-within {
        outline: none !important;
        box-shadow: none !important;
        border: 1px solid transparent !important;
        border-right: 1px solid var(--fgb-border-color) !important;
    }

    /* Checkbox header centering */
    .ag-theme-quartz .checkbox-header .ag-header-cell-comp-wrapper,
    .ag-theme-quartz-dark .checkbox-header .ag-header-cell-comp-wrapper {
        justify-content: center;
    }

    /* Checkbox focus removal */
    .ag-theme-quartz .ag-checkbox-input-wrapper:focus-within,
    .ag-theme-quartz .ag-checkbox-input-wrapper:focus,
    .ag-theme-quartz-dark .ag-checkbox-input-wrapper:focus-within,
    .ag-theme-quartz-dark .ag-checkbox-input-wrapper:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    .ag-theme-quartz .ag-checkbox-input:focus,
    .ag-theme-quartz-dark .ag-checkbox-input:focus {
        outline: none !important;
        box-shadow: none !important;
    }

.ag-header-cell-resize {
    opacity: 0;
    transition: opacity 0.2s;
}

.ag-header-cell:hover .ag-header-cell-resize {
    opacity: 1;
}

/* AG Grid Cell Wrapper Fixes */
.ag-theme-quartz .ag-cell-wrapper,
.ag-theme-quartz-dark .ag-cell-wrapper {
    height: 100%;
    width: 100%;
}

/* Center-aligned columns cell value fix */
.ag-theme-quartz .ag-center-aligned-cell .ag-cell-value,
.ag-theme-quartz-dark .ag-center-aligned-cell .ag-cell-value {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 2px;
}

/* ============================================
   16. AG Grid Row States (FGBStudio Style)
   - Unselected rows: Full opacity, normal appearance
   - Selected/Favorited rows: Green left border + green tint
   ============================================ */

/* All rows start with full opacity and normal background */
.ag-theme-quartz .ag-row,
.ag-theme-quartz-dark .ag-row {
    opacity: 1;
    background-color: var(--fgb-bg-secondary);
    transition: background-color 0.15s ease;
}

/* Selected/Favorited rows: Green tint background */
.ag-theme-quartz .ag-row-selected,
.ag-theme-quartz-dark .ag-row-selected {
    background-color: var(--fgb-accent-green-active) !important;
}

    /* Green left border ONLY on the first pinned cell */
    .ag-theme-quartz .ag-row-selected .ag-cell-first-left-pinned,
    .ag-theme-quartz-dark .ag-row-selected .ag-cell-first-left-pinned {
        border-left: 3px solid var(--fgb-accent-green) !important;
    }

    /* Selected row hover: Slightly more intense tint */
    .ag-theme-quartz .ag-row-selected.ag-row-hover,
    .ag-theme-quartz-dark .ag-row-selected.ag-row-hover {
        background-color: rgba(16, 185, 129, 0.18) !important;
    }

/* Unselected row hover */
.ag-theme-quartz .ag-row:not(.ag-row-selected).ag-row-hover,
.ag-theme-quartz-dark .ag-row:not(.ag-row-selected).ag-row-hover {
    background-color: var(--fgb-bg-hover) !important;
}

/* Ensure checkbox column shows green when selected */
.ag-theme-quartz .ag-row-selected .ag-checkbox-input-wrapper,
.ag-theme-quartz-dark .ag-row-selected .ag-checkbox-input-wrapper {
    --ag-checkbox-checked-color: var(--fgb-accent-green);
}

/* Pinned columns inherit selected row background */
.ag-theme-quartz .ag-row-selected .ag-cell,
.ag-theme-quartz-dark .ag-row-selected .ag-cell {
    background-color: transparent;
}

/* ============================================
   17. AG Grid Cell Patterns
   ============================================ */

/* Stat value coloring */
.stat-positive {
    color: var(--fgb-accent-green) !important;
    font-weight: 500;
}

.stat-negative {
    color: #ef4444 !important;
    font-weight: 500;
}

/* Rank cell */
.rank-cell {
    font-weight: 600;
    color: var(--fgb-accent-blue) !important;
}

.rank-display {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

/* Score cell - base styling (no forced color) */
.score-cell {
    font-weight: 600;
    text-align: center;
}

    /* Incomplete data - slightly dimmed */
    .score-cell.score-incomplete {
        opacity: 0.8;
    }

    /* High scores (>=70) - Green */
    .score-cell.stat-positive {
        color: var(--fgb-accent-green) !important;
    }

    /* Low scores (<=30) - Red */
    .score-cell.stat-negative {
        color: #ef4444 !important;
    }

    /* Neutral scores (between 30-70) - inherit text color */
    .score-cell:not(.stat-positive):not(.stat-negative):not(.score-incomplete) {
        color: var(--fgb-text-primary);
    }

    /* Incomplete but high score */
    .score-cell.score-incomplete.stat-positive {
        color: var(--fgb-accent-green) !important;
    }

    /* Incomplete but low score */
    .score-cell.score-incomplete.stat-negative {
        color: #ef4444 !important;
    }

    /* Incomplete neutral */
    .score-cell.score-incomplete:not(.stat-positive):not(.stat-negative) {
        color: var(--fgb-text-secondary);
    }

.completeness-indicator {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--fgb-text-muted);
    opacity: 0.8;
}

/* Salary cell */
.salary-cell {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.salary-cell-empty {
    color: var(--fgb-text-muted);
}

/* Percentile coloring classes */
.percentile-excellent {
    color: #10b981 !important;
    font-weight: 600;
}

.percentile-good {
    color: #22c55e !important;
    font-weight: 500;
}

.percentile-average {
    color: var(--fgb-text-primary);
}

.percentile-below {
    color: #f59e0b !important;
    font-weight: 500;
}

.percentile-poor {
    color: #ef4444 !important;
    font-weight: 600;
}

/* Highlight classes for editable columns */
.ag-theme-quartz .highlight-editable.ag-cell {
    background: rgba(0, 0, 0, 0.03);
}

.ag-theme-quartz-dark .highlight-editable.ag-cell {
    background: rgba(0, 0, 0, 0.25);
}

.ag-theme-quartz .highlight-score.ag-cell,
.ag-theme-quartz-dark .highlight-score.ag-cell {
    background: rgba(16, 185, 129, 0.05);
}

/* ============================================
   18. Editable Cell Pattern
   ============================================ */
.editable-cell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 6px;
}

.editable-input {
    width: 100%;
    height: 28px;
    border: 1px solid var(--fgb-border-color);
    border-radius: 4px;
    text-align: center;
    font-size: 13px;
    background: var(--fgb-bg-secondary);
    color: var(--fgb-text-primary);
    margin: 0;
    padding: 0;
    line-height: 26px;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

    .editable-input:hover {
        border-color: var(--fgb-text-muted);
    }

    .editable-input:focus {
        outline: none;
        border-color: var(--fgb-accent-green);
    }

    .editable-input.modified {
        border-color: var(--fgb-accent-green);
        background: rgba(16, 185, 129, 0.05);
    }

.editable-reset {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: var(--fgb-text-muted);
    border-radius: 50%;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
    background: transparent;
    border: none;
    padding: 0;
}

.editable-cell:hover .editable-reset:not(.hidden) {
    opacity: 1;
}

.editable-reset:hover {
    color: var(--fgb-accent-red);
    background: rgba(239, 68, 68, 0.1);
}

.editable-reset.hidden {
    display: none;
}

/* Hide spinner buttons on number inputs */
.editable-input::-webkit-outer-spin-button,
.editable-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.editable-input[type=number] {
    -moz-appearance: textfield;
}

/* ============================================
   19. Player Cell Components
   ============================================ */
.player-cell {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
}

.player-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.player-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--fgb-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fgb-text-muted);
    flex-shrink: 0;
}

.player-name {
    font-weight: 500;
    color: var(--fgb-text-primary);
}

.player-link {
    position: relative;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    color: inherit;
    text-decoration: none;
}

    .player-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 1px;
        bottom: 0;
        left: 50%;
        background-color: currentColor;
        transition: all 0.2s ease;
    }

    .player-link:hover::after {
        width: calc(100% - 8px);
        left: 4px;
    }

    .player-link:hover {
        color: var(--fgb-accent-green) !important;
    }

.player-flag {
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    display: block;
}

.favorite-toggle {
    transition: transform 0.15s ease, color 0.15s ease;
    cursor: pointer;
}

    .favorite-toggle:hover {
        transform: scale(1.2);
    }

    .favorite-toggle.active {
        color: var(--fgb-accent-yellow);
    }

/* ============================================
   20. Config Panel
   ============================================ */
.config-section {
    padding: 1rem;
}

.config-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--fgb-border-color);
}

    .config-header i {
        font-size: 1.25rem;
        color: var(--fgb-accent-green);
    }

        .config-header i.bi-collection {
            color: var(--fgb-accent-blue);
        }

    .config-header h3 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--fgb-text-primary);
    }

.config-body {
    color: var(--fgb-text-secondary);
}

.config-hint {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.btn-add-first-model {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--fgb-accent-green);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .btn-add-first-model:hover {
        background: #0ea472;
    }

/* Config Badge (Dataset Type) */
.config-badge {
    margin-left: auto;
    padding: 0.25rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--fgb-bg-tertiary);
    color: var(--fgb-text-secondary);
    border-radius: 10px;
}

/* Config Field (dropdowns, inputs) */
.config-field {
    margin-bottom: 1rem;
}

    .config-field label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--fgb-text-muted);
        margin-bottom: 0.375rem;
        letter-spacing: 0.025em;
    }

    .config-field .form-select {
        background-color: var(--fgb-bg-tertiary);
        border-color: var(--fgb-border-color);
        color: var(--fgb-text-primary);
        font-size: 0.875rem;
    }

        .config-field .form-select:focus {
            border-color: var(--fgb-accent-green);
            box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
        }

/* Config Toggle (Settings/Weights tabs) */
.config-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    background: var(--fgb-bg-tertiary);
    border-radius: 6px;
    padding: 3px;
}

.config-toggle-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fgb-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .config-toggle-btn:hover {
        color: var(--fgb-text-primary);
    }

    .config-toggle-btn.active {
        background: var(--fgb-bg-secondary);
        color: var(--fgb-accent-green);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .config-toggle-btn i {
        font-size: 0.875rem;
    }

/* Shot Location Toggle Buttons (ApproachIQ) */
.shot-location-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.shot-loc-btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 4px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

    .shot-loc-btn.active {
        background-color: var(--fgb-accent-green);
        border-color: var(--fgb-accent-green);
        color: white;
    }

    .shot-loc-btn:not(.active):hover {
        background-color: var(--fgb-bg-tertiary);
    }

/* ApproachIQ Stat Matrix Selector */
.stat-matrix {
    margin-top: 0.5rem;
    overflow-x: auto;
}

.stat-matrix-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

    .stat-matrix-table th,
    .stat-matrix-table td {
        padding: 0.375rem 0.25rem;
        text-align: center;
        border: 1px solid var(--fgb-border-color);
    }

    .stat-matrix-table th {
        background: var(--fgb-bg-tertiary);
        color: var(--fgb-text-secondary);
        font-weight: 600;
        font-size: 0.65rem;
        text-transform: uppercase;
    }

        .stat-matrix-table th:first-child {
            width: 70px;
        }

    .stat-matrix-table .bucket-label {
        text-align: left;
        font-weight: 500;
        color: var(--fgb-text-primary);
        background: var(--fgb-bg-secondary);
        white-space: nowrap;
        padding-left: 0.5rem;
    }

    .stat-matrix-table td:not(.bucket-label) {
        background: var(--fgb-bg-primary);
    }

.stat-matrix-cb {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--fgb-accent-green);
}

/* Matrix Quick Select Buttons */
.matrix-quick-select {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem !important;
}

    .matrix-quick-select .btn-xs {
        padding: 0.2rem 0.4rem;
        font-size: 0.65rem;
        line-height: 1.2;
    }

/* ============================================
   21. Weights System - Premium Redesign
   ============================================ */

/* Header Apply Button - Always Visible */
.panel-header-apply {
    display: none;
    align-items: center;
    gap: 0.5rem;
}

    .panel-header-apply.has-changes {
        display: flex;
    }

.header-apply-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: var(--fgb-accent-green);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

    .header-apply-btn:hover {
        background: var(--fgb-accent-green-hover);
        transform: translateY(-1px);
    }

    .header-apply-btn:active {
        transform: translateY(0);
    }

/* Pulse animation for header apply button */
.header-apply-btn {
    animation: header-apply-pulse 2s ease-in-out infinite;
}

@keyframes header-apply-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
}

/* ============================================
   Weights Panel - Improved Readability
   ============================================ */

/* Weights list container */
.weights-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    /* Compact mode - still readable */
    .weights-list.compact {
        gap: 8px;
    }

/* Individual weight item - larger for better interaction */
.weight-item {
    background: var(--fgb-bg-secondary, #f8f9fa);
    border-radius: 8px;
    padding: 12px 14px;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

    .weight-item:hover {
        background: var(--fgb-bg-tertiary, #f0f0f0);
        border-color: var(--fgb-border-color, #e0e0e0);
    }

    /* Dimmed when weight is 0 */
    .weight-item[data-weight="0"] {
        opacity: 0.5;
    }

        .weight-item[data-weight="0"]:hover {
            opacity: 0.75;
        }

/* Weight header row */
.weight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* Stat label - prominent and readable */
.weight-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--fgb-text-primary, #333);
    line-height: 1.3;
}

.weight-values {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

/* Effective percentage - the primary value users see */
.weight-effective {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fgb-accent-green, #00b67a);
    min-width: 40px;
    text-align: right;
}

/* Raw value - secondary info */
.weight-value {
    font-size: 0.75rem;
    color: var(--fgb-text-muted, #999);
    min-width: 50px;
    text-align: right;
}

    .weight-value::before {
        content: 'raw: ';
    }

/* Slider wrapper - more height for easier interaction */
.weight-slider-wrapper {
    position: relative;
    height: 20px;
    display: flex;
    align-items: center;
}

/* Custom range slider - taller track */
.weight-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient( to right, var(--fgb-accent-green, #00b67a) 0%, var(--fgb-accent-green, #00b67a) var(--slider-fill, 0%), var(--fgb-bg-tertiary, #e0e0e0) var(--slider-fill, 0%), var(--fgb-bg-tertiary, #e0e0e0) 100% );
    outline: none;
    cursor: pointer;
    margin: 0;
}

    /* Larger thumb for easier grabbing */
    .weight-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--fgb-accent-green, #00b67a);
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

        .weight-slider::-webkit-slider-thumb:hover {
            transform: scale(1.1);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
        }

        .weight-slider::-webkit-slider-thumb:active {
            transform: scale(1.15);
        }

    .weight-slider::-moz-range-thumb {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: var(--fgb-accent-green, #00b67a);
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    /* Disabled state */
    .weight-slider:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

        .weight-slider:disabled::-webkit-slider-thumb {
            background: var(--fgb-text-muted, #999);
            cursor: not-allowed;
        }

/* No data indicator */
.weight-item.no-data .weight-label {
    color: var(--fgb-text-muted, #888);
}

/* Weights actions (Reset button) */
.weights-actions {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .weight-item {
    background: var(--fgb-bg-tertiary, #2a2a2a);
}

    [data-bs-theme="dark"] .weight-item:hover {
        background: var(--fgb-bg-secondary, #333);
        border-color: var(--fgb-border-color, #444);
    }

[data-bs-theme="dark"] .weight-label {
    color: var(--fgb-text-primary, #fff);
}

[data-bs-theme="dark"] .weight-slider {
    background: linear-gradient( to right, var(--fgb-accent-green, #00b67a) 0%, var(--fgb-accent-green, #00b67a) var(--slider-fill, 0%), var(--fgb-bg-secondary, #444) var(--slider-fill, 0%), var(--fgb-bg-secondary, #444) 100% );
}

    [data-bs-theme="dark"] .weight-slider::-webkit-slider-thumb {
        border-color: #222;
    }

[data-bs-theme="dark"] .weights-actions {
    border-top-color: var(--fgb-border-color, #444);
}

/* ============================================
   Compact Mode (more than 8 stats)
   Still readable, just tighter spacing
   ============================================ */

.weights-list.compact .weight-item {
    padding: 10px 12px;
}

.weights-list.compact .weight-header {
    margin-bottom: 6px;
}

.weights-list.compact .weight-label {
    font-size: 0.8rem;
}

.weights-list.compact .weight-effective {
    font-size: 0.875rem;
}

.weights-list.compact .weight-value {
    font-size: 0.7rem;
}

.weights-list.compact .weight-slider-wrapper {
    height: 18px;
}

.weights-list.compact .weight-slider {
    height: 6px;
}

    .weights-list.compact .weight-slider::-webkit-slider-thumb {
        width: 16px;
        height: 16px;
    }

    .weights-list.compact .weight-slider::-moz-range-thumb {
        width: 16px;
        height: 16px;
    }

/* ============================================
   22. Loading States
   ============================================ */

/* Workspace Loading Overlay */
.workspace-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    backdrop-filter: blur(2px);
}

.workspace-loading-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--fgb-bg-secondary);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--fgb-shadow);
}

.workspace-loading-text {
    font-size: 0.9rem;
    color: var(--fgb-text-primary);
}

/* Grid Loading Overlay */
.grid-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--fgb-bg-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 50;
    gap: 1rem;
}

    .grid-loading-overlay i {
        font-size: 2rem;
        color: var(--fgb-accent-green);
        animation: pulse 1.5s ease-in-out infinite;
    }

    .grid-loading-overlay span {
        color: var(--fgb-text-secondary);
        font-size: 0.875rem;
    }

/* Model Loading State */
.model-loading {
    display: flex;
    align-items: center;
    padding: 1rem;
    color: var(--fgb-text-secondary);
    font-size: 0.875rem;
}

/* ============================================
   23. Buttons & Interactions
   ============================================ */

/* Toolbar button states */
.panel-header .btn-outline-secondary,
.grid-search-toolbar .btn-outline-secondary,
.grid-subheader .btn-outline-secondary {
    border-color: var(--fgb-border-color);
    color: var(--fgb-text-primary);
    background-color: transparent;
}

    .panel-header .btn-outline-secondary:hover,
    .grid-search-toolbar .btn-outline-secondary:hover,
    .grid-subheader .btn-outline-secondary:hover {
        background-color: transparent !important;
        border-color: var(--fgb-accent-green) !important;
        color: var(--fgb-text-primary) !important;
    }

    /* Dropdown open states */
    .panel-header .btn-group.show > .btn-outline-secondary,
    .panel-header .dropdown.show > .btn-outline-secondary,
    .panel-header .btn-outline-secondary[aria-expanded="true"],
    .grid-search-toolbar .btn-group.show > .btn-outline-secondary,
    .grid-search-toolbar .dropdown.show > .btn-outline-secondary,
    .grid-search-toolbar .btn-outline-secondary[aria-expanded="true"] {
        background-color: transparent !important;
        border-color: var(--fgb-accent-green) !important;
        color: var(--fgb-text-primary) !important;
        box-shadow: none !important;
    }

    /* Button active states */
    .panel-header .btn-outline-secondary:active,
    .grid-search-toolbar .btn-outline-secondary:active,
    .grid-subheader .btn-outline-secondary:active {
        background-color: var(--fgb-accent-green-active) !important;
        border-color: var(--fgb-accent-green) !important;
        color: var(--fgb-text-primary) !important;
    }

/* Input group focus enhancement */
.grid-search-toolbar .input-group:focus-within .form-control,
.grid-search-toolbar .input-group:focus-within .input-group-text {
    border-color: var(--fgb-accent-green);
}

/* ============================================
   24. Filter Components
   ============================================ */

/* Filter Button Group */
.filter-btn-group {
    display: flex;
    background: var(--fgb-bg-tertiary);
    border: 1px solid var(--fgb-border-color);
    border-radius: 6px;
    padding: 2px;
    gap: 2px;
}

    .filter-btn-group .btn {
        padding: 0.25rem 0.6rem;
        font-size: 0.8rem;
        border: none;
        background: transparent;
        color: var(--fgb-text-secondary);
        border-radius: 4px;
        transition: all 0.15s ease;
    }

        .filter-btn-group .btn:hover {
            color: var(--fgb-text-primary);
            background: var(--fgb-bg-secondary);
        }

        .filter-btn-group .btn.active {
            background: var(--fgb-accent-green) !important;
            border-color: var(--fgb-accent-green) !important;
            color: white !important;
        }

/* Quick Filter Pills */
.quick-filter-pills {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}

.quick-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    background: var(--fgb-bg-tertiary);
    border: 1px solid var(--fgb-border-color);
    border-radius: 12px;
    font-size: 0.75rem;
    color: var(--fgb-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .quick-filter-pill:hover {
        border-color: var(--fgb-accent-green);
        color: var(--fgb-text-primary);
    }

    .quick-filter-pill.active {
        background: rgba(16, 185, 129, 0.15);
        border-color: var(--fgb-accent-green);
        color: var(--fgb-accent-green);
    }

    .quick-filter-pill .pill-count {
        background: var(--fgb-bg-secondary);
        padding: 0 0.25rem;
        border-radius: 8px;
        font-size: 0.65rem;
        font-weight: 600;
    }

    .quick-filter-pill.active .pill-count {
        background: var(--fgb-accent-green);
        color: white;
    }

/* ============================================
   25. Dropdown Menus
   ============================================ */
.dropdown-menu {
    background: var(--fgb-bg-secondary);
    border: 1px solid var(--fgb-border-color);
    border-radius: 8px;
    box-shadow: 0 12px 32px var(--fgb-shadow), 0 4px 12px rgba(0, 0, 0, 0.15);
}

[data-bs-theme="dark"] .dropdown-menu {
    background: var(--fgb-bg-secondary);
    border-color: var(--fgb-border-color);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--fgb-text-primary);
}

    [data-bs-theme="dark"] .dropdown-item:hover {
        background: var(--fgb-bg-hover);
    }

/* ============================================
   26. Form Inputs
   ============================================ */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .input-group-text {
    background: var(--fgb-bg-primary);
    border-color: var(--fgb-border-color);
    color: var(--fgb-text-primary);
}

.form-control:focus,
.form-select:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--fgb-accent-green);
}

/* ============================================
   27. Confirmation Modal
   ============================================ */
#confirmationModal .modal-content {
    background: var(--fgb-bg-secondary);
    border: 1px solid var(--fgb-border-color);
    border-radius: 10px;
}

#confirmationModal .modal-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--fgb-border-color);
    background: var(--fgb-bg-tertiary);
    border-radius: 10px 10px 0 0;
}

#confirmationModal .modal-header-icon {
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
}

    #confirmationModal .modal-header-icon.text-warning {
        color: var(--fgb-accent-yellow) !important;
    }

    #confirmationModal .modal-header-icon.text-danger {
        color: var(--fgb-accent-red) !important;
    }

    #confirmationModal .modal-header-icon.text-success {
        color: var(--fgb-accent-green) !important;
    }

    #confirmationModal .modal-header-icon.text-info {
        color: var(--fgb-accent-blue) !important;
    }

#confirmationModal .modal-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--fgb-text-primary);
}

#confirmationModal .btn-close {
    margin-left: auto;
    margin-right: 0;
}

[data-bs-theme="dark"] #confirmationModal .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

#confirmationModal .modal-body {
    padding: 1.25rem 1.5rem;
    color: var(--fgb-text-primary);
    font-size: 0.95rem;
    line-height: 1.6;
}

#confirmationModal .modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--fgb-border-color);
    background: var(--fgb-bg-tertiary);
    gap: 0.5rem;
    border-radius: 0 0 10px 10px;
}

/* ============================================
   28. Tooltips
   ============================================ */
.tooltip {
    font-size: 0.75rem;
}

.tooltip-inner {
    background-color: var(--fgb-bg-tertiary);
    color: var(--fgb-text-primary);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--fgb-border-color);
    box-shadow: 0 2px 8px var(--fgb-shadow);
    max-width: 180px;
}

.tooltip.bs-tooltip-top .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--fgb-border-color);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--fgb-border-color);
}

/* ============================================
   29. Status Badges
   ============================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

    .status-badge.complete {
        background: var(--fgb-bg-tertiary);
        color: var(--fgb-text-secondary);
    }

    .status-badge.active {
        background: rgba(16, 185, 129, 0.15);
        color: var(--fgb-accent-green);
    }

/* Day labels for lookahead */
.day-label {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 10px;
    font-size: 0.6875rem;
    font-weight: 600;
    margin-left: 0.5rem;
    text-transform: uppercase;
}

    .day-label.today {
        background: rgba(16, 185, 129, 0.15);
        color: var(--fgb-accent-green);
    }

    .day-label.tomorrow {
        background: rgba(59, 130, 246, 0.15);
        color: var(--fgb-accent-blue);
    }

    .day-label.upcoming {
        background: var(--fgb-bg-tertiary);
        color: var(--fgb-text-secondary);
    }

/* ============================================
   30. Utility Classes
   ============================================ */
.text-green {
    color: var(--fgb-accent-green) !important;
}

.text-warning {
    color: var(--fgb-accent-yellow) !important;
}

.text-muted {
    color: var(--fgb-text-muted) !important;
}

.bg-green-subtle {
    background: rgba(16, 185, 129, 0.1) !important;
}

/* ============================================
   31. Animations
   ============================================ */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes loading-slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.spin-animation {
    animation: spin 1s linear infinite;
}

/* ============================================
   32. Enhanced Loading States
   ============================================ */

/* Model Loading State (Players Panel) */
.model-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    gap: 1.25rem;
    padding: 2rem;
}

/* Custom Spinner - Branded Green */
.model-loading-spinner {
    position: relative;
    width: 48px;
    height: 48px;
}

    .model-loading-spinner::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid var(--fgb-border-color);
        border-radius: 50%;
    }

    .model-loading-spinner::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 3px solid transparent;
        border-top-color: var(--fgb-accent-green);
        border-radius: 50%;
        animation: spinner-rotate 0.8s linear infinite;
    }

@keyframes spinner-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* Loading Text */
.model-loading-text {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--fgb-text-secondary);
    text-align: center;
}

.model-loading-subtext {
    font-size: 0.8rem;
    color: var(--fgb-text-muted);
    margin-top: 0.25rem;
}

/* Skeleton Grid Loader */
.skeleton-grid {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.skeleton-header {
    display: flex;
    gap: 1px;
    background: var(--fgb-border-color);
    border-bottom: 1px solid var(--fgb-border-color);
}

.skeleton-header-cell {
    flex: 1;
    height: 40px;
    background: var(--fgb-bg-tertiary);
    min-width: 60px;
}

    .skeleton-header-cell:first-child {
        flex: 0 0 48px;
        min-width: 48px;
    }

    .skeleton-header-cell:nth-child(2) {
        flex: 0 0 50px;
        min-width: 50px;
    }

    .skeleton-header-cell:nth-child(3) {
        flex: 2;
        min-width: 120px;
    }

.skeleton-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.skeleton-row {
    display: flex;
    gap: 1px;
    background: var(--fgb-border-color);
    border-bottom: 1px solid var(--fgb-bg-tertiary);
}

.skeleton-cell {
    flex: 1;
    height: 42px;
    background: var(--fgb-bg-secondary);
    display: flex;
    align-items: center;
    padding: 0 12px;
    min-width: 60px;
}

    .skeleton-cell:first-child {
        flex: 0 0 48px;
        min-width: 48px;
        justify-content: center;
        padding: 0;
    }

    .skeleton-cell:nth-child(2) {
        flex: 0 0 50px;
        min-width: 50px;
        justify-content: center;
        padding: 0;
    }

    .skeleton-cell:nth-child(3) {
        flex: 2;
        min-width: 120px;
    }

/* Skeleton Shapes */
.skeleton-checkbox {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: var(--fgb-bg-tertiary);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-flag {
    width: 24px;
    height: 18px;
    border-radius: 2px;
    background: var(--fgb-bg-tertiary);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    animation-delay: 0.1s;
}

.skeleton-text {
    height: 14px;
    border-radius: 4px;
    background: var(--fgb-bg-tertiary);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-text-long {
    width: 70%;
}

.skeleton-text-medium {
    width: 50%;
}

.skeleton-text-short {
    width: 40%;
}

/* Stagger animation delays */
.skeleton-row:nth-child(1) .skeleton-text {
    animation-delay: 0s;
}

.skeleton-row:nth-child(2) .skeleton-text {
    animation-delay: 0.1s;
}

.skeleton-row:nth-child(3) .skeleton-text {
    animation-delay: 0.2s;
}

.skeleton-row:nth-child(4) .skeleton-text {
    animation-delay: 0.3s;
}

.skeleton-row:nth-child(5) .skeleton-text {
    animation-delay: 0.4s;
}

.skeleton-row:nth-child(6) .skeleton-text {
    animation-delay: 0.5s;
}

.skeleton-row:nth-child(7) .skeleton-text {
    animation-delay: 0.6s;
}

.skeleton-row:nth-child(8) .skeleton-text {
    animation-delay: 0.7s;
}

@keyframes skeleton-pulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* Combined Loading State with Skeleton */
.model-loading-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.model-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
}

[data-bs-theme="dark"] .model-loading-overlay {
    background: rgba(36, 36, 36, 0.85);
}

/* Progress Bar Variant */
.model-loading-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    gap: 1rem;
    padding: 2rem;
}

.loading-progress-bar {
    width: 200px;
    height: 4px;
    background: var(--fgb-bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.loading-progress-fill {
    height: 100%;
    background: var(--fgb-accent-green);
    border-radius: 2px;
    animation: progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes progress-indeterminate {
    0% {
        width: 0%;
        margin-left: 0%;
    }

    50% {
        width: 40%;
        margin-left: 30%;
    }

    100% {
        width: 0%;
        margin-left: 100%;
    }
}

/* Dots Loader Variant */
.loading-dots {
    display: flex;
    gap: 6px;
}

    .loading-dots span {
        width: 8px;
        height: 8px;
        background: var(--fgb-accent-green);
        border-radius: 50%;
        animation: dots-bounce 1.4s ease-in-out infinite both;
    }

        .loading-dots span:nth-child(1) {
            animation-delay: -0.32s;
        }

        .loading-dots span:nth-child(2) {
            animation-delay: -0.16s;
        }

        .loading-dots span:nth-child(3) {
            animation-delay: 0s;
        }

@keyframes dots-bounce {
    0%, 80%, 100% {
        transform: scale(0.6);
        opacity: 0.5;
    }

    40% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Config Panel Loading (Smaller) */
.config-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--fgb-text-secondary);
}

.config-loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--fgb-border-color);
    border-top-color: var(--fgb-accent-green);
    border-radius: 50%;
    animation: spinner-rotate 0.8s linear infinite;
}

/* Model Tab Loading State */
.model-tab.loading {
    position: relative;
    pointer-events: none;
}

    .model-tab.loading::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--fgb-accent-green), transparent );
        animation: tab-loading-slide 1s ease-in-out infinite;
    }

@keyframes tab-loading-slide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* Button Loading State */
.btn-loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

    .btn-loading::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 16px;
        height: 16px;
        margin: -8px 0 0 -8px;
        border: 2px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spinner-rotate 0.8s linear infinite;
        opacity: 0.8;
    }

/* ============================================
   33. Mobile Responsive
   ============================================ */

/* Mobile Panel Tabs (hidden on desktop) */
.mobile-panel-tabs {
    display: none;
}

@media (max-width: 768px) {
    /* Base container */
    .fgbstudio-container {
        min-width: 0 !important;
        width: 100%;
    }

    /* Mobile Panel Tabs */
    .mobile-panel-tabs {
        display: flex;
        background: var(--fgb-bg-secondary);
        border-bottom: 1px solid var(--fgb-border-color);
        padding: 0.5rem;
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .mobile-panel-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 1rem;
        border: 1px solid var(--fgb-border-color);
        border-radius: 8px;
        background: var(--fgb-bg-primary);
        color: var(--fgb-text-secondary);
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }

        .mobile-panel-tab.active {
            background: var(--fgb-accent-green);
            border-color: var(--fgb-accent-green);
            color: white;
        }

        .mobile-panel-tab:not(.active):hover {
            background: var(--fgb-bg-tertiary);
        }

    .mobile-tab-badge {
        background: rgba(255, 255, 255, 0.2);
        padding: 0.125rem 0.5rem;
        border-radius: 10px;
        font-size: 0.75rem;
        min-width: 1.5rem;
        text-align: center;
    }

    .mobile-panel-tab:not(.active) .mobile-tab-badge {
        background: var(--fgb-accent-green);
        color: white;
    }

    .mobile-tab-badge:empty {
        display: none;
    }

    /* Main content area flex layout for mobile */
    #mainContentArea {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    /* Workspace Layout */
    .model-workspace {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-height: 0;
    }

    .workspace-panel {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 !important;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

        /* Hide inactive panel */
        .workspace-panel.panel-left {
            display: flex;
        }

        .workspace-panel.panel-right {
            display: none;
        }

    .model-workspace.show-players .workspace-panel.panel-left {
        display: none;
    }

    .model-workspace.show-players .workspace-panel.panel-right {
        display: flex;
    }

    /* Hide the divider on mobile */
    .panel-divider {
        display: none;
    }

    /* Event tabs scroll together */
    .event-tabs-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 0.5rem;
    }

        .event-tabs-container::-webkit-scrollbar {
            display: none;
        }

    .event-date-filter {
        border-right: none;
        margin-right: 0.5rem;
        padding-right: 0;
    }

    .event-tabs-scroll-wrapper {
        flex: none;
        overflow: visible;
    }

    .event-tabs-inner {
        overflow: visible;
        flex: none;
    }

    .event-tabs-scroll-wrapper::before,
    .event-tabs-scroll-wrapper::after {
        display: none;
    }

    .event-tabs-settings {
        margin-left: 0.5rem;
    }

    /* Add buttons hide text */
    .add-event-btn span {
        display: none;
    }

    .add-model-btn span {
        display: none;
    }

    /* Model tabs */
    .model-tabs-section {
        padding: 0.5rem 1rem;
    }

    /* Modal responsive */
    .event-modal-content {
        width: 95%;
        height: 85vh;
        max-width: none;
    }

    /* Empty state responsive */
    .empty-state-welcome {
        padding: 1.5rem;
    }

        .empty-state-welcome h2 {
            font-size: 1.5rem;
        }

    .empty-state-features {
        gap: 1.5rem;
    }

    .feature-item {
        font-size: 0.75rem;
    }

        .feature-item i {
            font-size: 1.25rem;
        }

    /* Dataset modal responsive */
    .dataset-modal-content {
        width: 95%;
        max-height: 90vh;
    }

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

    .dataset-card {
        padding: 1rem;
    }

    .dataset-card-icon {
        width: 40px;
        height: 40px;
    }

        .dataset-card-icon i {
            font-size: 1.25rem;
        }
}

/* Container Query Responsive Patterns */
@container player-panel (max-width: 500px) {
    .grid-search-toolbar .btn-text {
        display: none;
    }

    .grid-search-toolbar .btn i {
        margin: 0 !important;
    }

    .search-input-wrapper {
        max-width: 180px;
    }
}

@container player-panel (max-width: 400px) {
    .search-input-wrapper {
        max-width: 140px;
    }

    .display-mode-toggle {
        display: none;
    }
}

@container config-panel (max-width: 320px) {
    .config-toggle-btn span {
        display: none;
    }

    .weight-effective {
        display: none;
    }
}

/* Body modal open state */
body.modal-open {
    overflow: hidden;
}
/* ============================================
   Custom Stats Modal
   ============================================ */

.custom-stats-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

    .custom-stats-modal.show {
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 1;
    }

.custom-stats-modal-content {
    background: var(--fgb-bg-primary, #fff);
    border-radius: 12px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.custom-stats-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--fgb-border-color, #e0e0e0);
}

    .custom-stats-modal-header h2 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--fgb-text-primary, #1a1a1a);
    }

.custom-stats-modal-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--fgb-text-secondary, #666);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

    .custom-stats-modal-close:hover {
        background: var(--fgb-bg-secondary, #f5f5f5);
    }

.custom-stats-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.custom-stats-subtitle {
    margin: 0 0 16px 0;
    color: var(--fgb-text-secondary, #666);
    font-size: 0.875rem;
}

.stat-categories-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Category Sections */
.stat-category {
    border: 1px solid var(--fgb-border-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

.stat-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: var(--fgb-bg-secondary, #f8f9fa);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
}

    .stat-category-header:hover {
        background: var(--fgb-bg-tertiary, #eef0f2);
    }

.stat-category-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--fgb-text-primary, #1a1a1a);
}

.category-chevron {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.stat-category.collapsed .category-chevron {
    transform: rotate(-90deg);
}

.category-selected-badge {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fgb-text-secondary, #666);
    background: var(--fgb-bg-primary, #fff);
    padding: 2px 8px;
    border-radius: 10px;
}

.stat-category-actions {
    display: flex;
    gap: 4px;
}

.btn-category-action {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--fgb-border-color, #ddd);
    background: var(--fgb-bg-primary, #fff);
    color: var(--fgb-text-secondary, #666);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .btn-category-action:hover {
        border-color: var(--fgb-accent-green, #00b67a);
        color: var(--fgb-accent-green, #00b67a);
    }

/* Category Body */
.stat-category-body {
    padding: 12px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

.stat-category.collapsed .stat-category-body {
    display: none;
}

.stat-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.stat-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .stat-checkbox-label:hover {
        background: var(--fgb-bg-secondary, #f5f5f5);
    }

.stat-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--fgb-accent-green, #00b67a);
    cursor: pointer;
}

.stat-checkbox-text {
    font-size: 0.875rem;
    color: var(--fgb-text-primary, #1a1a1a);
}

/* Modal Footer */
.custom-stats-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
    background: var(--fgb-bg-secondary, #f8f9fa);
    border-radius: 0 0 12px 12px;
}

.selected-stats-count {
    font-size: 0.875rem;
    color: var(--fgb-text-secondary, #666);
}

    .selected-stats-count span {
        font-weight: 600;
        color: var(--fgb-accent-green, #00b67a);
    }

.custom-stats-actions {
    display: flex;
    gap: 8px;
}

    .custom-stats-actions .btn {
        padding: 8px 16px;
        font-size: 0.875rem;
    }

    .custom-stats-actions .btn-primary {
        background: var(--fgb-accent-green, #00b67a);
        border-color: var(--fgb-accent-green, #00b67a);
    }

        .custom-stats-actions .btn-primary:hover {
            background: var(--fgb-accent-green-hover, #009966);
            border-color: var(--fgb-accent-green-hover, #009966);
        }

        .custom-stats-actions .btn-primary:disabled {
            background: var(--fgb-bg-tertiary, #ccc);
            border-color: var(--fgb-bg-tertiary, #ccc);
            cursor: not-allowed;
        }

/* Stats Selector Row (dropdown + gear button) */
.stats-selector-row {
    display: flex;
    gap: 8px;
}

    .stats-selector-row .form-select {
        flex: 1;
    }

    .stats-selector-row .btn {
        padding: 4px 10px;
    }

/* Dark mode adjustments */
[data-bs-theme="dark"] .custom-stats-modal-content {
    background: var(--fgb-bg-primary, #1e1e1e);
}

[data-bs-theme="dark"] .stat-category-header {
    background: var(--fgb-bg-secondary, #2a2a2a);
}

    [data-bs-theme="dark"] .stat-category-header:hover {
        background: var(--fgb-bg-tertiary, #333);
    }

[data-bs-theme="dark"] .category-selected-badge {
    background: var(--fgb-bg-tertiary, #333);
}

[data-bs-theme="dark"] .btn-category-action {
    background: var(--fgb-bg-tertiary, #333);
    border-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .custom-stats-modal-footer {
    background: var(--fgb-bg-secondary, #2a2a2a);
}

/* Responsive */
@media (max-width: 576px) {
    .custom-stats-modal-content {
        width: 95%;
        max-height: 90vh;
    }

    .stat-checkboxes {
        grid-template-columns: 1fr;
    }

    .custom-stats-modal-footer {
        flex-direction: column;
        gap: 12px;
    }

    .custom-stats-actions {
        width: 100%;
    }

        .custom-stats-actions .btn {
            flex: 1;
        }
}

/* Salary Site Toggle */
.salary-site-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: 12px;
}

.salary-site-option {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--fgb-text-secondary);
}

    .salary-site-option input[type="radio"] {
        accent-color: var(--fgb-accent-green);
        margin: 0;
    }

    .salary-site-option:has(input:checked) span {
        color: var(--fgb-text-primary);
        font-weight: 500;
    }

/* ============================================
   First Model Empty State
   ============================================ */

.first-model-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 400px;
    padding: 40px 20px;
}

.empty-state-content {
    text-align: center;
    max-width: 480px;
}

/* Icon */
.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--fgb-accent-green, #00b67a) 0%, #00d68f 100%);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 182, 122, 0.25);
}

    .empty-state-icon i {
        font-size: 2.5rem;
        color: white;
    }

/* Title */
.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--fgb-text-primary, #1a1a1a);
    margin: 0 0 12px 0;
}

/* Description */
.empty-state-description {
    font-size: 1rem;
    color: var(--fgb-text-secondary, #666);
    line-height: 1.6;
    margin: 0 0 28px 0;
}

    .empty-state-description strong {
        color: var(--fgb-text-primary, #1a1a1a);
    }

/* Feature highlights */
.empty-state-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: var(--fgb-text-secondary, #666);
}

    .feature-item i {
        font-size: 1rem;
        color: var(--fgb-accent-green, #00b67a);
    }

/* CTA Button */
.empty-state-cta {
    background: linear-gradient(135deg, var(--fgb-accent-green, #00b67a) 0%, #00d68f 100%);
    border: none;
    padding: 14px 32px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 182, 122, 0.35);
    transition: all 0.2s ease;
}

    .empty-state-cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 182, 122, 0.45);
        background: linear-gradient(135deg, #00c985 0%, #00e09d 100%);
    }

    .empty-state-cta:active {
        transform: translateY(0);
    }

/* Hint text */
.empty-state-hint {
    margin-top: 24px;
    font-size: 0.8rem;
    color: var(--fgb-text-muted, #999);
}

    .empty-state-hint i {
        color: var(--fgb-accent-yellow, #ffc107);
    }

/* Dark mode */
[data-bs-theme="dark"] .empty-state-title {
    color: var(--fgb-text-primary, #fff);
}

[data-bs-theme="dark"] .empty-state-description strong {
    color: var(--fgb-text-primary, #fff);
}

[data-bs-theme="dark"] .empty-state-icon {
    box-shadow: 0 8px 24px rgba(0, 182, 122, 0.15);
}

[data-bs-theme="dark"] .empty-state-cta {
    box-shadow: 0 4px 14px rgba(0, 182, 122, 0.2);
}

/* Responsive */
@media (max-width: 576px) {
    .first-model-empty-state {
        padding: 24px 16px;
    }

    .empty-state-icon {
        width: 64px;
        height: 64px;
        border-radius: 16px;
    }

        .empty-state-icon i {
            font-size: 2rem;
        }

    .empty-state-title {
        font-size: 1.25rem;
    }

    .empty-state-description {
        font-size: 0.9rem;
    }

    .empty-state-features {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .empty-state-cta {
        width: 100%;
        padding: 12px 24px;
    }
}

/* ============================================
   Data Filters Section
   ============================================ */

.data-filters-section {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

.data-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
}

.data-filters-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fgb-text-muted, #999);
}

/* Sample size indicator (icon next to title) */
.sample-size-indicator {
    display: flex;
    align-items: center;
    cursor: help;
    margin-right: auto;
    margin-left: 6px;
}

    .sample-size-indicator.critical i {
        color: var(--fgb-error, #dc3545);
    }

    .sample-size-indicator.warning i {
        color: var(--fgb-warning, #ffc107);
    }

    .sample-size-indicator.caution i {
        color: var(--fgb-text-muted, #999);
    }

    .sample-size-indicator.good i {
        color: var(--fgb-accent-green, #00b67a);
    }

/* Sample size warning banner */
.sample-size-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

    .sample-size-warning i {
        flex-shrink: 0;
        font-size: 0.875rem;
        margin-top: 1px;
    }

    .sample-size-warning.critical {
        background: rgba(220, 53, 69, 0.1);
        border: 1px solid rgba(220, 53, 69, 0.2);
        color: var(--fgb-error, #dc3545);
    }

    .sample-size-warning.warning {
        background: rgba(255, 193, 7, 0.1);
        border: 1px solid rgba(255, 193, 7, 0.25);
        color: var(--fgb-warning-dark, #997404);
    }

[data-bs-theme="dark"] .sample-size-warning.warning {
    color: var(--fgb-warning, #ffc107);
}

.btn-clear-filters {
    background: none;
    border: none;
    padding: 4px;
    color: var(--fgb-text-muted, #999);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
}

    .btn-clear-filters:hover {
        color: var(--fgb-error, #dc3545);
        background: rgba(220, 53, 69, 0.1);
    }

/* Individual filter field */
.filter-field {
    margin-bottom: 12px;
}

    .filter-field:last-child {
        margin-bottom: 0;
    }

    .filter-field label {
        display: block;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--fgb-text-secondary, #666);
        margin-bottom: 4px;
    }

/* Filter dropdown wrapper */
.filter-dropdown-wrapper {
    position: relative;
}

/* Filter dropdown trigger button */
.filter-dropdown-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 7px 10px;
    font-size: 0.8rem;
    background: var(--fgb-bg-primary, #fff);
    border: 1px solid var(--fgb-border-color, #ddd);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

    .filter-dropdown-trigger:hover {
        border-color: var(--fgb-border-hover, #bbb);
    }

    .filter-dropdown-trigger:focus {
        outline: none;
        border-color: var(--fgb-accent-green, #00b67a);
        box-shadow: 0 0 0 3px rgba(0, 182, 122, 0.12);
    }

    .filter-dropdown-trigger.open {
        border-color: var(--fgb-accent-green, #00b67a);
    }

    .filter-dropdown-trigger i {
        font-size: 0.7rem;
        color: var(--fgb-text-muted, #999);
        transition: transform 0.15s ease;
    }

    .filter-dropdown-trigger.open i {
        transform: rotate(180deg);
    }

.filter-dropdown-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fgb-text-primary, #333);
}

/* Filter dropdown menu */
.filter-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--fgb-bg-primary, #fff);
    border: 1px solid var(--fgb-border-color, #ddd);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
    max-height: 200px;
    overflow-y: auto;
}

    .filter-dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Custom scrollbar for filter dropdown */
    .filter-dropdown-menu::-webkit-scrollbar {
        width: 6px;
    }

    .filter-dropdown-menu::-webkit-scrollbar-track {
        background: transparent;
        margin: 4px 0;
    }

    .filter-dropdown-menu::-webkit-scrollbar-thumb {
        background: var(--fgb-border-color, #ccc);
        border-radius: 3px;
    }

        .filter-dropdown-menu::-webkit-scrollbar-thumb:hover {
            background: var(--fgb-text-muted, #999);
        }

/* Filter dropdown options */
.filter-dropdown-options {
    padding: 6px 0;
}

/* Individual checkbox option - force flex display */
.filter-checkbox-option {
    display: flex !important; /* Override Bootstrap's label { display: inline-block } */
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin: 0;
}

    .filter-checkbox-option:hover {
        background: var(--fgb-bg-secondary, #f5f5f5);
    }

    .filter-checkbox-option input[type="checkbox"] {
        width: 18px;
        height: 18px;
        min-width: 18px;
        flex-shrink: 0;
        margin: 0;
        padding: 0;
        cursor: pointer;
        accent-color: var(--fgb-accent-green, #00b67a);
    }

.filter-checkbox-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--fgb-text-primary, #333);
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

/* Dark mode */
[data-bs-theme="dark"] .filter-checkbox-option:hover {
    background: var(--fgb-bg-tertiary, #333);
}

[data-bs-theme="dark"] .filter-checkbox-label {
    color: var(--fgb-text-primary, #fff);
}

/* Filter chips container */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    min-height: 0;
}

    .filter-chips:empty {
        display: none;
    }

/* Individual filter chip */
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 8px;
    background: var(--fgb-accent-green, #00b67a);
    color: white;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

.chip-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    transition: background 0.15s ease;
}

    .chip-remove:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    .chip-remove i {
        font-size: 0.6rem;
    }

/* Dark mode */
[data-bs-theme="dark"] .data-filters-section {
    border-top-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .filter-dropdown-trigger {
    background: var(--fgb-bg-secondary, #2a2a2a);
    border-color: var(--fgb-border-color, #444);
}

    [data-bs-theme="dark"] .filter-dropdown-trigger:hover {
        border-color: var(--fgb-border-hover, #555);
    }

[data-bs-theme="dark"] .filter-dropdown-text {
    color: var(--fgb-text-primary, #fff);
}

[data-bs-theme="dark"] .filter-dropdown-menu {
    background: var(--fgb-bg-secondary, #2a2a2a);
    border-color: var(--fgb-border-color, #444);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .filter-checkbox-option:hover {
    background: var(--fgb-bg-tertiary, #333);
}

[data-bs-theme="dark"] .filter-checkbox-label {
    color: var(--fgb-text-primary, #fff);
}

/* Apply Filters sticky footer */
.filter-apply-sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
    background: var(--fgb-bg-primary, #fff);
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
    margin: 16px -16px -16px -16px;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
    z-index: 10;
}

    .filter-apply-sticky .btn-primary {
        background: var(--fgb-accent-green, #00b67a);
        border-color: var(--fgb-accent-green, #00b67a);
        font-weight: 500;
    }

        .filter-apply-sticky .btn-primary:hover {
            background: var(--fgb-accent-green-hover, #009966);
            border-color: var(--fgb-accent-green-hover, #009966);
        }

[data-bs-theme="dark"] .filter-apply-sticky {
    background: var(--fgb-bg-secondary, #1e1e1e);
    border-top-color: var(--fgb-border-color, #444);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

/* 
 * NOTE: For sticky footer to work, the parent settings panel needs:
 * overflow-y: auto (or scroll)
 * max-height set (or height constraint)
 * 
 * Example CSS to add to your settings panel:
 * .settings-panel-content {
 *     overflow-y: auto;
 *     max-height: calc(100vh - 200px);
 * }
 */

/* Responsive */
@media (max-width: 576px) {
    .filter-dropdown-menu {
        max-height: 180px;
    }
}

/* ============================================
   Toolbar Options Dropdown
   ============================================ */

.toolbar-options-dropdown {
    position: relative;
}

.btn-toolbar-options {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: var(--fgb-bg-secondary, #f5f5f5);
    border: 1px solid var(--fgb-border-color, #ddd);
    border-radius: 6px;
    color: var(--fgb-text-secondary, #666);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .btn-toolbar-options:hover {
        background: var(--fgb-bg-tertiary, #eee);
        color: var(--fgb-text-primary, #333);
    }

    .btn-toolbar-options i {
        font-size: 0.9rem;
    }

.toolbar-options-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 220px;
    background: var(--fgb-bg-primary, #fff);
    border: 1px solid var(--fgb-border-color, #ddd);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.15s ease;
}

    .toolbar-options-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.toolbar-options-header {
    padding: 10px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fgb-text-muted, #999);
    border-bottom: 1px solid var(--fgb-border-color, #eee);
}

.toolbar-option-group {
    padding: 12px;
}

.toolbar-option-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fgb-text-secondary, #666);
    margin-bottom: 6px;
}

.toolbar-option-group .form-select {
    font-size: 0.8rem;
}

/* Rounds cell warning colors */
.rounds-critical {
    color: var(--fgb-error, #dc3545) !important;
    font-weight: 600;
}

.rounds-warning {
    color: var(--fgb-warning-dark, #997404) !important;
}

/* Dark mode */
[data-bs-theme="dark"] .btn-toolbar-options {
    background: var(--fgb-bg-secondary, #2a2a2a);
    border-color: var(--fgb-border-color, #444);
    color: var(--fgb-text-secondary, #aaa);
}

    [data-bs-theme="dark"] .btn-toolbar-options:hover {
        background: var(--fgb-bg-tertiary, #333);
        color: var(--fgb-text-primary, #fff);
    }

[data-bs-theme="dark"] .toolbar-options-menu {
    background: var(--fgb-bg-secondary, #2a2a2a);
    border-color: var(--fgb-border-color, #444);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

[data-bs-theme="dark"] .toolbar-options-header {
    border-bottom-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .toolbar-option-group .form-select {
    background: var(--fgb-bg-tertiary, #333);
    border-color: var(--fgb-border-color, #444);
    color: var(--fgb-text-primary, #fff);
}

[data-bs-theme="dark"] .rounds-warning {
    color: var(--fgb-warning, #ffc107) !important;
}

/* ============================================
   Weights Panel - Compact Design
   ============================================ */

/* Weights list container */
.weights-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* Even more compact when many stats */
    .weights-list.compact {
        gap: 6px;
    }

/* Individual weight item */
.weight-item {
    background: var(--fgb-bg-secondary, #f8f9fa);
    border-radius: 8px;
    padding: 10px 12px;
    transition: all 0.15s ease;
}

    .weight-item:hover {
        background: var(--fgb-bg-tertiary, #f0f0f0);
    }

    /* Dimmed when weight is 0 */
    .weight-item[data-weight="0"] {
        opacity: 0.5;
    }

        .weight-item[data-weight="0"]:hover {
            opacity: 0.8;
        }

/* Weight header row */
.weight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.weight-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--fgb-text-primary, #333);
}

.weight-values {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.weight-effective {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--fgb-accent-green, #00b67a);
}

.weight-value {
    font-size: 0.7rem;
    color: var(--fgb-text-muted, #999);
}

    .weight-value::before {
        content: 'raw: ';
    }

/* Slider wrapper */
.weight-slider-wrapper {
    position: relative;
    height: 6px;
}

/* Custom range slider */
.weight-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient( to right, var(--fgb-accent-green, #00b67a) 0%, var(--fgb-accent-green, #00b67a) var(--slider-fill, 0%), var(--fgb-bg-tertiary, #e0e0e0) var(--slider-fill, 0%), var(--fgb-bg-tertiary, #e0e0e0) 100% );
    outline: none;
    cursor: pointer;
    margin: 0;
}

    .weight-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--fgb-accent-green, #00b67a);
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
        transition: transform 0.1s ease;
    }

        .weight-slider::-webkit-slider-thumb:hover {
            transform: scale(1.15);
        }

    .weight-slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--fgb-accent-green, #00b67a);
        cursor: pointer;
        border: 2px solid #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .weight-slider:disabled {
        opacity: 0.4;
        cursor: not-allowed;
    }

        .weight-slider:disabled::-webkit-slider-thumb {
            background: var(--fgb-text-muted, #999);
        }

/* Weights actions (Reset button) */
.weights-actions {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .weight-item {
    background: var(--fgb-bg-tertiary, #2a2a2a);
}

    [data-bs-theme="dark"] .weight-item:hover {
        background: var(--fgb-bg-secondary, #333);
    }

[data-bs-theme="dark"] .weight-label {
    color: var(--fgb-text-primary, #fff);
}

[data-bs-theme="dark"] .weight-slider {
    background: linear-gradient( to right, var(--fgb-accent-green, #00b67a) 0%, var(--fgb-accent-green, #00b67a) var(--slider-fill, 0%), var(--fgb-bg-secondary, #444) var(--slider-fill, 0%), var(--fgb-bg-secondary, #444) 100% );
}

[data-bs-theme="dark"] .weights-actions {
    border-top-color: var(--fgb-border-color, #444);
}

/* ============================================
   Compact Mode (more than 8 stats)
   ============================================ */

.weights-list.compact .weight-item {
    padding: 8px 10px;
}

.weights-list.compact .weight-header {
    margin-bottom: 4px;
}

.weights-list.compact .weight-label {
    font-size: 0.75rem;
}

.weights-list.compact .weight-effective {
    font-size: 0.8rem;
}

.weights-list.compact .weight-value {
    font-size: 0.65rem;
}

/* ============================================
   ApproachIQ Stats Matrix Selector
   ============================================ */

.approachiq-stats-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

.approachiq-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 8px;
    flex-wrap: wrap;
}

.approachiq-stats-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fgb-text-muted, #999);
}

.approachiq-quick-select {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

    .approachiq-quick-select .btn-xs {
        padding: 3px 8px;
        font-size: 0.65rem;
        font-weight: 500;
        border-radius: 4px;
    }

/* Matrix Container */
.approachiq-matrix-container {
    overflow-x: auto;
    margin-bottom: 8px;
    border: 1px solid var(--fgb-border-color, #e0e0e0);
    border-radius: 6px;
}

/* Matrix Table */
.approachiq-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
    min-width: 320px;
}

    .approachiq-matrix th,
    .approachiq-matrix td {
        padding: 8px 6px;
        text-align: center;
        border-bottom: 1px solid var(--fgb-border-color, #e0e0e0);
    }

    .approachiq-matrix th {
        background: var(--fgb-bg-tertiary, #f5f5f5);
        color: var(--fgb-text-secondary, #666);
        font-weight: 600;
        font-size: 0.65rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

        .approachiq-matrix th.distance-header {
            text-align: left;
            padding-left: 10px;
            min-width: 70px;
        }

    .approachiq-matrix tbody tr:last-child td {
        border-bottom: none;
    }

    .approachiq-matrix tbody tr:hover {
        background: var(--fgb-bg-hover, rgba(0, 0, 0, 0.02));
    }

    .approachiq-matrix .bucket-label {
        text-align: left;
        padding-left: 10px;
        font-weight: 500;
        color: var(--fgb-text-primary, #333);
        white-space: nowrap;
    }

    /* Checkboxes */
    .approachiq-matrix input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--fgb-accent-green, #00b67a);
    }

    /* Shots column - slightly different styling */
    .approachiq-matrix .shots-cell {
        background: var(--fgb-bg-secondary, #fafafa);
    }

        .approachiq-matrix .shots-cell input[type="checkbox"] {
            accent-color: var(--fgb-text-muted, #999);
        }

/* Selected count */
.approachiq-selected-count {
    font-size: 0.75rem;
    color: var(--fgb-text-secondary, #666);
    text-align: right;
    padding: 4px 0;
}

    .approachiq-selected-count span {
        font-weight: 600;
        color: var(--fgb-accent-green, #00b67a);
    }

/* Row highlight when stat selected */
.approachiq-matrix tbody tr.has-selection {
    background: rgba(0, 182, 122, 0.03);
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .approachiq-stats-section {
    border-top-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .approachiq-matrix-container {
    border-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .approachiq-matrix th {
    background: var(--fgb-bg-tertiary, #2a2a2a);
    color: var(--fgb-text-secondary, #aaa);
}

[data-bs-theme="dark"] .approachiq-matrix td {
    border-bottom-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .approachiq-matrix .bucket-label {
    color: var(--fgb-text-primary, #fff);
}

[data-bs-theme="dark"] .approachiq-matrix tbody tr:hover {
    background: var(--fgb-bg-hover, rgba(255, 255, 255, 0.03));
}

[data-bs-theme="dark"] .approachiq-matrix .shots-cell {
    background: var(--fgb-bg-tertiary, #252525);
}

[data-bs-theme="dark"] .approachiq-matrix tbody tr.has-selection {
    background: rgba(0, 182, 122, 0.08);
}

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 400px) {
    .approachiq-quick-select {
        width: 100%;
        justify-content: flex-start;
    }

    .approachiq-matrix th,
    .approachiq-matrix td {
        padding: 6px 4px;
    }

    .approachiq-matrix th {
        font-size: 0.6rem;
    }
}

/* ============================================
   Shot Location Multi-Select Chips
   ============================================ */

.shot-location-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.shot-loc-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 20px;
    border: 1px solid var(--fgb-border-color, #ddd);
    background: var(--fgb-bg-secondary, #f8f9fa);
    color: var(--fgb-text-primary, #333);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

    .shot-loc-chip:hover {
        border-color: var(--fgb-accent-green, #00b67a);
        background: rgba(0, 182, 122, 0.08);
    }

    .shot-loc-chip.active {
        background: var(--fgb-accent-green, #00b67a);
        border-color: var(--fgb-accent-green, #00b67a);
        color: #fff;
    }

        .shot-loc-chip.active:hover {
            background: #00a06a;
            border-color: #00a06a;
        }

    /* "All Shots" chip - slightly different style */
    .shot-loc-chip.shot-loc-all {
        font-weight: 600;
    }

        .shot-loc-chip.shot-loc-all.active {
            background: var(--fgb-text-secondary, #666);
            border-color: var(--fgb-text-secondary, #666);
        }

/* Label hint for multi-select */
.label-hint {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--fgb-text-muted, #888);
    margin-left: 4px;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .shot-loc-chip {
    background: var(--fgb-bg-tertiary, #2a2a2a);
    border-color: var(--fgb-border-color, #444);
    color: var(--fgb-text-primary, #eee);
}

    [data-bs-theme="dark"] .shot-loc-chip:hover {
        background: rgba(0, 182, 122, 0.15);
    }

    [data-bs-theme="dark"] .shot-loc-chip.active {
        background: var(--fgb-accent-green, #00b67a);
        border-color: var(--fgb-accent-green, #00b67a);
        color: #fff;
    }

    [data-bs-theme="dark"] .shot-loc-chip.shot-loc-all.active {
        background: var(--fgb-text-secondary, #888);
        border-color: var(--fgb-text-secondary, #888);
    }

/* ============================================
   ApproachIQ Grid Column Grouping Styles
   ============================================ */

/* Group Headers - Distance bucket labels */
.aiq-group-header {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--fgb-border-color, #ddd) !important;
}

    /* Alternating group header colors */
    .aiq-group-0 .ag-header-cell-label,
    .aiq-group-header.aiq-group-0 {
        background: rgba(59, 130, 246, 0.08) !important; /* Blue tint */
    }

    .aiq-group-1 .ag-header-cell-label,
    .aiq-group-header.aiq-group-1 {
        background: rgba(16, 185, 129, 0.08) !important; /* Green tint */
    }

    .aiq-group-2 .ag-header-cell-label,
    .aiq-group-header.aiq-group-2 {
        background: rgba(245, 158, 11, 0.08) !important; /* Amber tint */
    }

    .aiq-group-3 .ag-header-cell-label,
    .aiq-group-header.aiq-group-3 {
        background: rgba(239, 68, 68, 0.08) !important; /* Red tint */
    }

    .aiq-group-4 .ag-header-cell-label,
    .aiq-group-header.aiq-group-4 {
        background: rgba(139, 92, 246, 0.08) !important; /* Purple tint */
    }

    .aiq-group-5 .ag-header-cell-label,
    .aiq-group-header.aiq-group-5 {
        background: rgba(236, 72, 153, 0.08) !important; /* Pink tint */
    }

/* Stat column headers within groups */
.aiq-stat-header {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
}

/* Shots header - slightly muted */
.aiq-shots-header {
    color: var(--fgb-text-muted, #888) !important;
}

/* Cell styles */
.aiq-stat-cell {
    font-size: 0.8rem;
    text-align: center;
}

/* Shots cell - muted styling */
.aiq-shots-cell {
    background: rgba(0, 0, 0, 0.02);
    font-size: 0.75rem;
}

/* First column in each group - heavier left border */
.aiq-group-first {
    border-left: 2px solid var(--fgb-border-color, #ccc) !important;
}

/* Alternating group cell backgrounds */
.ag-row .aiq-group-0 {
    background: rgba(59, 130, 246, 0.02);
}

.ag-row .aiq-group-1 {
    background: rgba(16, 185, 129, 0.02);
}

.ag-row .aiq-group-2 {
    background: rgba(245, 158, 11, 0.02);
}

.ag-row .aiq-group-3 {
    background: rgba(239, 68, 68, 0.02);
}

.ag-row .aiq-group-4 {
    background: rgba(139, 92, 246, 0.02);
}

.ag-row .aiq-group-5 {
    background: rgba(236, 72, 153, 0.02);
}

/* Hover - enhance group background */
.ag-row-hover .aiq-group-0 {
    background: rgba(59, 130, 246, 0.06) !important;
}

.ag-row-hover .aiq-group-1 {
    background: rgba(16, 185, 129, 0.06) !important;
}

.ag-row-hover .aiq-group-2 {
    background: rgba(245, 158, 11, 0.06) !important;
}

.ag-row-hover .aiq-group-3 {
    background: rgba(239, 68, 68, 0.06) !important;
}

.ag-row-hover .aiq-group-4 {
    background: rgba(139, 92, 246, 0.06) !important;
}

.ag-row-hover .aiq-group-5 {
    background: rgba(236, 72, 153, 0.06) !important;
}

/* Selected row */
.ag-row-selected .aiq-stat-cell {
    background: rgba(0, 182, 122, 0.1) !important;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .aiq-group-header {
    border-bottom-color: var(--fgb-border-color, #444) !important;
}

    [data-bs-theme="dark"] .aiq-group-0 .ag-header-cell-label,
    [data-bs-theme="dark"] .aiq-group-header.aiq-group-0 {
        background: rgba(59, 130, 246, 0.15) !important;
    }

    [data-bs-theme="dark"] .aiq-group-1 .ag-header-cell-label,
    [data-bs-theme="dark"] .aiq-group-header.aiq-group-1 {
        background: rgba(16, 185, 129, 0.15) !important;
    }

    [data-bs-theme="dark"] .aiq-group-2 .ag-header-cell-label,
    [data-bs-theme="dark"] .aiq-group-header.aiq-group-2 {
        background: rgba(245, 158, 11, 0.15) !important;
    }

    [data-bs-theme="dark"] .aiq-group-3 .ag-header-cell-label,
    [data-bs-theme="dark"] .aiq-group-header.aiq-group-3 {
        background: rgba(239, 68, 68, 0.15) !important;
    }

    [data-bs-theme="dark"] .aiq-group-4 .ag-header-cell-label,
    [data-bs-theme="dark"] .aiq-group-header.aiq-group-4 {
        background: rgba(139, 92, 246, 0.15) !important;
    }

    [data-bs-theme="dark"] .aiq-group-5 .ag-header-cell-label,
    [data-bs-theme="dark"] .aiq-group-header.aiq-group-5 {
        background: rgba(236, 72, 153, 0.15) !important;
    }

[data-bs-theme="dark"] .aiq-shots-cell {
    background: rgba(255, 255, 255, 0.02);
}

[data-bs-theme="dark"] .aiq-group-first {
    border-left-color: var(--fgb-border-color, #555) !important;
}

[data-bs-theme="dark"] .ag-row .aiq-group-0 {
    background: rgba(59, 130, 246, 0.05);
}

[data-bs-theme="dark"] .ag-row .aiq-group-1 {
    background: rgba(16, 185, 129, 0.05);
}

[data-bs-theme="dark"] .ag-row .aiq-group-2 {
    background: rgba(245, 158, 11, 0.05);
}

[data-bs-theme="dark"] .ag-row .aiq-group-3 {
    background: rgba(239, 68, 68, 0.05);
}

[data-bs-theme="dark"] .ag-row .aiq-group-4 {
    background: rgba(139, 92, 246, 0.05);
}

[data-bs-theme="dark"] .ag-row .aiq-group-5 {
    background: rgba(236, 72, 153, 0.05);
}

[data-bs-theme="dark"] .ag-row-hover .aiq-group-0,
[data-bs-theme="dark"] .ag-row-hover .aiq-group-1,
[data-bs-theme="dark"] .ag-row-hover .aiq-group-2,
[data-bs-theme="dark"] .ag-row-hover .aiq-group-3,
[data-bs-theme="dark"] .ag-row-hover .aiq-group-4,
[data-bs-theme="dark"] .ag-row-hover .aiq-group-5 {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ============================================
   AG Grid Group Header Specific Fixes
   ============================================ */

/* Ensure group headers span properly */
.ag-header-group-cell {
    font-weight: 600;
}

.ag-header-group-cell-label {
    justify-content: center;
}

/* Child header cells */
.ag-header-cell.aiq-stat-header {
    padding: 0 4px;
}

/* Compact the child headers a bit */
.ag-header-group-cell + .ag-header-row .ag-header-cell {
    padding: 0 6px;
}

/* ============================================
   Player Filters Section
   ============================================ */

.player-filters-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

.player-filters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.player-filters-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fgb-text-secondary, #666);
}

.player-filters-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.player-filter-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

    .player-filter-item label:not(.filter-toggle) {
        font-size: 0.8rem;
        color: var(--fgb-text-secondary, #666);
        min-width: 80px;
    }

    .player-filter-item input[type="number"] {
        width: 80px;
        font-size: 0.85rem;
    }

/* Toggle Switch Style */
.filter-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

    .filter-toggle input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--fgb-accent-green, #00b67a);
        cursor: pointer;
    }

.filter-toggle-label {
    font-size: 0.85rem;
    color: var(--fgb-text-primary, #333);
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .player-filters-section {
    border-top-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .player-filters-title {
    color: var(--fgb-text-secondary, #aaa);
}

[data-bs-theme="dark"] .player-filter-item label:not(.filter-toggle) {
    color: var(--fgb-text-secondary, #aaa);
}

[data-bs-theme="dark"] .filter-toggle-label {
    color: var(--fgb-text-primary, #eee);
}

[data-bs-theme="dark"] .player-filter-item input[type="number"] {
    background: var(--fgb-bg-tertiary, #2a2a2a);
    border-color: var(--fgb-border-color, #444);
    color: var(--fgb-text-primary, #eee);
}

/* ============================================
   Score Completeness Icon
   ============================================ */

.score-value {
    font-variant-numeric: tabular-nums;
}

.completeness-icon {
    font-size: 0.75rem;
    margin-left: 4px;
    vertical-align: middle;
    cursor: help;
    opacity: 0.8;
}

    /* Severity colors */
    .completeness-icon.completeness-caution {
        color: var(--fgb-yellow, #f0ad4e);
    }

    .completeness-icon.completeness-warning {
        color: var(--fgb-orange, #fd7e14);
    }

    .completeness-icon.completeness-critical {
        color: var(--fgb-red, #dc3545);
    }

    /* Hover effect */
    .completeness-icon:hover {
        opacity: 1;
    }

/* Score cell with incomplete data - slightly muted */
.score-cell.score-incomplete .score-value {
    opacity: 0.85;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .completeness-icon.completeness-caution {
    color: #ffc107;
}

[data-bs-theme="dark"] .completeness-icon.completeness-warning {
    color: #fd7e14;
}

[data-bs-theme="dark"] .completeness-icon.completeness-critical {
    color: #f87171;
}

/* ============================================
   DrivingIQ Matrix Settings
   ============================================ */

.drivingiq-stats-section {
    margin-top: 16px;
}

.drivingiq-stats-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.drivingiq-stats-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fgb-text-secondary, #666);
}

.drivingiq-quick-select {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

    .drivingiq-quick-select .btn-xs {
        padding: 2px 8px;
        font-size: 0.7rem;
    }

.drivingiq-matrix-wrapper {
    overflow-x: auto;
    margin-bottom: 12px;
}

.drivingiq-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

    .drivingiq-matrix th,
    .drivingiq-matrix td {
        padding: 8px 6px;
        text-align: center;
        border: 1px solid var(--fgb-border-color, #ddd);
    }

    .drivingiq-matrix th {
        background: var(--fgb-bg-secondary, #f5f5f5);
        font-weight: 600;
        font-size: 0.75rem;
    }

    .drivingiq-matrix .bucket-header {
        text-align: left;
        min-width: 80px;
    }

    .drivingiq-matrix .bucket-label {
        font-weight: 500;
        text-align: left;
        background: var(--fgb-bg-secondary, #f8f9fa);
    }

    .drivingiq-matrix .stat-header,
    .drivingiq-matrix .holes-header {
        min-width: 50px;
    }

    .drivingiq-matrix .holes-header {
        color: var(--fgb-text-muted, #888);
    }

    .drivingiq-matrix .holes-cell {
        background: var(--fgb-bg-tertiary, #f0f0f0);
    }

    .drivingiq-matrix input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
        accent-color: var(--fgb-accent-green, #00b67a);
    }

    /* Row highlighting when has selection */
    .drivingiq-matrix tr.has-selection .bucket-label {
        background: rgba(0, 182, 122, 0.1);
        font-weight: 600;
    }

.drivingiq-selected-count {
    font-size: 0.8rem;
    color: var(--fgb-text-secondary, #666);
    margin-top: 8px;
}

    .drivingiq-selected-count span {
        font-weight: 600;
        color: var(--fgb-accent-green, #00b67a);
    }

/* ============================================
   DrivingIQ Grid Column Groups
   ============================================ */

.diq-group-header {
    background: var(--fgb-bg-secondary, #f5f5f5) !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* Alternating group colors */
.diq-group-0 {
    background: rgba(59, 130, 246, 0.05);
}

.diq-group-1 {
    background: rgba(16, 185, 129, 0.05);
}

.diq-group-2 {
    background: rgba(245, 158, 11, 0.05);
}

.diq-group-3 {
    background: rgba(239, 68, 68, 0.05);
}

.diq-group-4 {
    background: rgba(139, 92, 246, 0.05);
}

.diq-group-header.diq-group-0 {
    background: rgba(59, 130, 246, 0.15) !important;
}

.diq-group-header.diq-group-1 {
    background: rgba(16, 185, 129, 0.15) !important;
}

.diq-group-header.diq-group-2 {
    background: rgba(245, 158, 11, 0.15) !important;
}

.diq-group-header.diq-group-3 {
    background: rgba(239, 68, 68, 0.15) !important;
}

.diq-group-header.diq-group-4 {
    background: rgba(139, 92, 246, 0.15) !important;
}

.diq-stat-cell {
    text-align: center !important;
}

.diq-holes-cell {
    color: var(--fgb-text-muted, #888) !important;
}

.diq-group-first {
    border-left: 2px solid var(--fgb-border-color, #ccc) !important;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .drivingiq-matrix th {
    background: var(--fgb-bg-tertiary, #2a2a2a);
}

[data-bs-theme="dark"] .drivingiq-matrix td {
    border-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .drivingiq-matrix .bucket-label {
    background: var(--fgb-bg-tertiary, #2a2a2a);
}

[data-bs-theme="dark"] .drivingiq-matrix .holes-cell {
    background: var(--fgb-bg-secondary, #333);
}

[data-bs-theme="dark"] .drivingiq-matrix tr.has-selection .bucket-label {
    background: rgba(0, 182, 122, 0.15);
}

[data-bs-theme="dark"] .diq-group-0 {
    background: rgba(59, 130, 246, 0.1);
}

[data-bs-theme="dark"] .diq-group-1 {
    background: rgba(16, 185, 129, 0.1);
}

[data-bs-theme="dark"] .diq-group-2 {
    background: rgba(245, 158, 11, 0.1);
}

[data-bs-theme="dark"] .diq-group-3 {
    background: rgba(239, 68, 68, 0.1);
}

[data-bs-theme="dark"] .diq-group-4 {
    background: rgba(139, 92, 246, 0.1);
}

[data-bs-theme="dark"] .diq-group-header.diq-group-0 {
    background: rgba(59, 130, 246, 0.25) !important;
}

[data-bs-theme="dark"] .diq-group-header.diq-group-1 {
    background: rgba(16, 185, 129, 0.25) !important;
}

[data-bs-theme="dark"] .diq-group-header.diq-group-2 {
    background: rgba(245, 158, 11, 0.25) !important;
}

[data-bs-theme="dark"] .diq-group-header.diq-group-3 {
    background: rgba(239, 68, 68, 0.25) !important;
}

[data-bs-theme="dark"] .diq-group-header.diq-group-4 {
    background: rgba(139, 92, 246, 0.25) !important;
}

/* ============================================
   SpikeIQ Settings Styles
   ============================================ */

.spikeiq-thresholds-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

.spikeiq-thresholds-header {
    margin-bottom: 12px;
}

.spikeiq-thresholds-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fgb-text-secondary, #666);
}

.spikeiq-thresholds-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spikeiq-threshold-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 70px;
    height: 38px;
    background: var(--fgb-bg-secondary, #f8f9fa);
    border: 1px solid var(--fgb-border-color, #e0e0e0);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
}

    .spikeiq-threshold-item:hover {
        border-color: var(--fgb-accent-green, #00b67a);
        background: rgba(0, 182, 122, 0.05);
    }

    .spikeiq-threshold-item:has(input:checked) {
        border-color: var(--fgb-accent-green, #00b67a);
        background: rgba(0, 182, 122, 0.1);
    }

    .spikeiq-threshold-item input[type="checkbox"] {
        width: 14px;
        height: 14px;
        accent-color: var(--fgb-accent-green, #00b67a);
        margin: 0;
        flex-shrink: 0;
    }

.threshold-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--fgb-text-primary, #333);
    white-space: nowrap;
}

.threshold-info {
    font-size: 0.7rem;
    color: var(--fgb-text-muted, #999);
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.spikeiq-threshold-item:hover .threshold-info {
    opacity: 1;
    color: var(--fgb-accent-green, #00b67a);
}

/* Native tooltip styling via title attribute */
.spikeiq-threshold-item[title] {
    cursor: pointer;
}

/* SpikeIQ Grid Column Styling */
.spike-stat-cell {
    text-align: center !important;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .spikeiq-thresholds-section {
    border-top-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .spikeiq-thresholds-title {
    color: var(--fgb-text-secondary, #aaa);
}

[data-bs-theme="dark"] .spikeiq-threshold-item {
    background: var(--fgb-bg-tertiary, #2a2a2a);
    border-color: var(--fgb-border-color, #444);
}

    [data-bs-theme="dark"] .spikeiq-threshold-item:hover {
        background: rgba(0, 182, 122, 0.1);
    }

    [data-bs-theme="dark"] .spikeiq-threshold-item:has(input:checked) {
        background: rgba(0, 182, 122, 0.15);
    }

[data-bs-theme="dark"] .threshold-label {
    color: var(--fgb-text-primary, #eee);
}

[data-bs-theme="dark"] .threshold-info {
    color: var(--fgb-text-muted, #777);
}

/* ============================================
   Export Button Styles
   ============================================ */

.btn-toolbar-export {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--fgb-border-color, #dee2e6);
    border-radius: 6px;
    background: var(--fgb-bg-primary, #fff);
    color: var(--fgb-text-secondary, #6c757d);
    cursor: pointer;
    transition: all 0.15s ease;
}

    .btn-toolbar-export:hover {
        background: var(--fgb-accent-green, #00b67a);
        border-color: var(--fgb-accent-green, #00b67a);
        color: #fff;
    }

    .btn-toolbar-export:active {
        transform: scale(0.95);
    }

    .btn-toolbar-export i {
        font-size: 0.9rem;
    }

/* ============================================
   Dark Mode
   ============================================ */

[data-bs-theme="dark"] .btn-toolbar-export {
    background: var(--fgb-bg-secondary, #2d2d2d);
    border-color: var(--fgb-border-color, #444);
    color: var(--fgb-text-secondary, #aaa);
}

    [data-bs-theme="dark"] .btn-toolbar-export:hover {
        background: var(--fgb-accent-green, #00b67a);
        border-color: var(--fgb-accent-green, #00b67a);
        color: #fff;
    }

/* ============================================
   Button Outline Dark Mode Fix
   ============================================ */

/* Dark mode: invert outline-dark buttons to light */
[data-bs-theme="dark"] .btn-outline-dark {
    color: #f8f9fa;
    border-color: #6c757d;
}

    [data-bs-theme="dark"] .btn-outline-dark:hover {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

    [data-bs-theme="dark"] .btn-outline-dark:focus,
    [data-bs-theme="dark"] .btn-outline-dark:active {
        color: #212529;
        background-color: #f8f9fa;
        border-color: #f8f9fa;
    }

/* Small button size fixes for matrix quick select */
.btn-xs {
    padding: 0.2rem 0.5rem;
    font-size: 0.7rem;
    line-height: 1.3;
    border-radius: 4px;
}

/* ============================================
   Summary Player Filters Section
   ============================================ */

.player-filters-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

.player-filters-header {
    margin-bottom: 12px;
}

.player-filters-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fgb-text-secondary, #666);
}

.player-filter-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.player-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--fgb-text-primary, #333);
}

    .player-filter-toggle input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--fgb-accent-green, #00b67a);
        cursor: pointer;
    }

/* Dark Mode */
[data-bs-theme="dark"] .player-filters-section {
    border-top-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .player-filters-title {
    color: var(--fgb-text-secondary, #aaa);
}

[data-bs-theme="dark"] .player-filter-toggle {
    color: var(--fgb-text-primary, #eee);
}

/* ============================================
   Tee Time Column Styles
   ============================================ */

.tee-time-header {
    font-size: 0.75rem !important;
}

/* Tee time column group header */
.ag-header-cell[col-id^="TeeTimeLocal"] {
    background-color: rgba(59, 130, 246, 0.05);
}

[data-bs-theme="dark"] .ag-header-cell[col-id^="TeeTimeLocal"] {
    background-color: rgba(59, 130, 246, 0.1);
}

/* ============================================
   Tee Time Filters Section
   ============================================ */

.tee-time-filters-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--fgb-border-color, #e0e0e0);
}

.tee-time-filters-header {
    margin-bottom: 12px;
}

.tee-time-filters-title {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fgb-text-secondary, #666);
}

.tee-filter-group {
    margin-bottom: 12px;
}

.tee-filter-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--fgb-text-secondary, #888);
    margin-bottom: 6px;
}

.tee-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tee-filter-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tee-filter-round {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fgb-text-primary, #333);
    min-width: 22px;
}

.tee-wave-select {
    width: 65px;
    font-size: 0.75rem !important;
    padding: 2px 6px !important;
    height: auto !important;
}

.tee-stack-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.tee-stack-btn {
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
}

    .tee-stack-btn.active {
        background-color: var(--fgb-accent-green, #00b67a) !important;
        border-color: var(--fgb-accent-green, #00b67a) !important;
        color: white !important;
    }

/* Dark Mode */
[data-bs-theme="dark"] .tee-time-filters-section {
    border-top-color: var(--fgb-border-color, #444);
}

[data-bs-theme="dark"] .tee-time-filters-title {
    color: var(--fgb-text-secondary, #aaa);
}

[data-bs-theme="dark"] .tee-filter-label {
    color: var(--fgb-text-secondary, #999);
}

[data-bs-theme="dark"] .tee-filter-round {
    color: var(--fgb-text-primary, #eee);
}

[data-bs-theme="dark"] .tee-stack-btn:not(.active) {
    border-color: var(--fgb-border-color, #555) !important;
    color: var(--fgb-text-primary, #ddd) !important;
}

    [data-bs-theme="dark"] .tee-stack-btn:not(.active):hover {
        background-color: var(--fgb-bg-hover, #3a3a3a) !important;
    }

/* ============================================
   Apply Button - Sticky Footer (Enhanced)
   ============================================ */

.filter-apply-sticky {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 16px 12px 20px 12px;
    margin: 16px -12px -12px -12px;
    background: linear-gradient(to top, var(--fgb-bg-secondary, #f8f9fa) 0%, var(--fgb-bg-secondary, #f8f9fa) 70%, transparent 100%);
    z-index: 10;
}

    .filter-apply-sticky::before {
        content: '';
        position: absolute;
        top: 0;
        left: 12px;
        right: 12px;
        height: 1px;
        background: linear-gradient(to right, transparent, var(--fgb-border-color, #dee2e6) 20%, var(--fgb-border-color, #dee2e6) 80%, transparent);
    }

    .filter-apply-sticky .btn {
        padding: 12px 20px;
        font-size: 0.9rem;
        font-weight: 600;
        letter-spacing: 0.3px;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 182, 122, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
        background: linear-gradient(135deg, #00b67a 0%, #00a06a 100%);
        border: none;
        transition: all 0.2s ease;
    }

        .filter-apply-sticky .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 6px 16px rgba(0, 182, 122, 0.4), 0 3px 6px rgba(0, 0, 0, 0.15);
            background: linear-gradient(135deg, #00c985 0%, #00b67a 100%);
        }

        .filter-apply-sticky .btn:active {
            transform: translateY(0);
            box-shadow: 0 2px 8px rgba(0, 182, 122, 0.3);
        }

        .filter-apply-sticky .btn i {
            font-size: 1rem;
        }

/* Dark Mode */
[data-bs-theme="dark"] .filter-apply-sticky {
    background: linear-gradient(to top, var(--fgb-bg-secondary, #1a1a1a) 0%, var(--fgb-bg-secondary, #1a1a1a) 70%, transparent 100%);
}

    [data-bs-theme="dark"] .filter-apply-sticky::before {
        background: linear-gradient(to right, transparent, var(--fgb-border-color, #444) 20%, var(--fgb-border-color, #444) 80%, transparent);
    }

    [data-bs-theme="dark"] .filter-apply-sticky .btn {
        box-shadow: 0 4px 12px rgba(0, 182, 122, 0.25), 0 2px 4px rgba(0, 0, 0, 0.3);
    }

        [data-bs-theme="dark"] .filter-apply-sticky .btn:hover {
            box-shadow: 0 6px 16px rgba(0, 182, 122, 0.35), 0 3px 6px rgba(0, 0, 0, 0.4);
        }

/* Pulse animation on first appearance */
@keyframes applyButtonPulse {
    0% {
        box-shadow: 0 4px 12px rgba(0, 182, 122, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    50% {
        box-shadow: 0 4px 20px rgba(0, 182, 122, 0.5), 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    100% {
        box-shadow: 0 4px 12px rgba(0, 182, 122, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
    }
}

.filter-apply-sticky:not(.d-none) .btn {
    animation: applyButtonPulse 2s ease-in-out 1;
}