/* Theme Variables */
:root {
    /* Base colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #ffffff;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-tertiary: #212529;
    --text-muted: #6c757d;
    --border-color: #dee2e6;
    
    /* Component colors */
    --navbar-bg: #353535;
    --navbar-text: #ffffff;
    --navbar-hover: #ffdd00;
    --card-bg: #f0f2f4;
    --card-border: #dee2e6;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --input-text: #212529;
    --table-bg: #ffffff;
    --table-border: #dee2e6;
    --table-stripe: #f8f9fa;
    --dropdown-bg: #ffffff;
    --dropdown-border: #dee2e6;
    --dropdown-text: #212529;
    --alert-bg: #f8f9fa;
    --alert-border: #dee2e6;
    --alert-text: #212529;
    --toast-bg: #ffffff;
    --toast-border: #dee2e6;
    --toast-text: #212529;
    --modal-bg: #ffffff;
    --modal-border: #dee2e6;
    --modal-text: #212529;
    --tooltip-bg: #212529;
    --tooltip-text: #ffffff;
    /* Table highlight colors for conditional formatting */
    --table-row-red: #ff9999;
    --table-row-blue: #b3d1ff;
    --table-row-green: #d4edda;
    --table-row-yellow: #fff9c4;
    --table-row-pink: #f8d7da;
    --table-row-prediction-green: #80cfa9;
    --table-row-prediction-red: #f5a6a6;
    --table-row-prediction-lowneutral: #ffa366;
    --table-row-prediction-highneutral: #ffd966;
    --table-row-prediction-lightgreen: #8fd4a8; 
    --table-row-prediction-lightergreen: #b6dfc1;
    --table-row-prediction-lightestgreen: #c9e8d0;
    --table-row-prediction-darkgreen: #68c990;
    --table-row-prediction-deepgreen: #41be77;
    --table-row-prediction-lightred: #eaa7aa;
    --table-row-prediction-lighterred: #f1bfc2;
    --table-row-prediction-lightestred: #f7d4d7;
    --table-row-prediction-darkred: #e39091;
    --table-row-prediction-deepred: #dc7878;
}

[data-theme="dark"] {
    /* Base colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #212529;
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --text-tertiary: #212529;
    --text-muted: #6c757d;
    --border-color: #495057;
    
    /* Component colors */
    --navbar-bg: #121212;
    --navbar-text: #ffffff;
    --navbar-hover: #ffdd00;
    --card-bg: #2d2d2d;
    --card-border: #495057;
    --input-bg: #2d2d2d;
    --input-border: #495057;
    --input-text: #e9ecef;
    --table-bg: #2d2d2d;
    --table-border: #495057;
    --table-stripe: #3d3d3d;
    --dropdown-bg: #2d2d2d;
    --dropdown-border: #495057;
    --dropdown-text: #e9ecef;
    --alert-bg: #2d2d2d;
    --alert-border: #495057;
    --alert-text: #e9ecef;
    --toast-bg: #2d2d2d;
    --toast-border: #495057;
    --toast-text: #e9ecef;
    --modal-bg: #2d2d2d;
    --modal-border: #495057;
    --modal-text: #e9ecef;
    --tooltip-bg: #e9ecef;
    --tooltip-text: #212529;
    --table-row-red: #77222299;
    --table-row-blue: #30466999;
    --table-row-green: #234d3690;
    --table-row-yellow: #4d4a2390;
    --table-row-pink: #4d232f90;
    --table-row-prediction-green: #245c3a;
    --table-row-prediction-red: #5c1f1f90;
    --table-row-prediction-lowneutral: #99660099;
    --table-row-prediction-highneutral: #cc990099;
  
    --table-row-prediction-lightgreen: #2b624499; 
    --table-row-prediction-lightergreen: #2e6f4b99;
    --table-row-prediction-lightestgreen: #3c866099;
    --table-row-prediction-darkgreen: #1f4c3499;
    --table-row-prediction-deepgreen: #18583e99;
  
    --table-row-prediction-lightred: #9a282899;
    --table-row-prediction-lighterred: #b62f2f99;
    --table-row-prediction-lightestred: #d0494999;
    --table-row-prediction-darkred: #7a1f1f99;
    --table-row-prediction-deepred: #51151599;
}

/* Global styles */
html, body {
    height: 100%; /* Ensure html and body take full height */
    margin: 0; /* Remove default body margin */
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex; /* Enable flexbox */
    flex-direction: column; /* Stack children vertically */
}

#page-content {
    flex-grow: 1; /* Allow the main content area to take up available space */
}

/* Typography */
h1, h2, h3, h4, h5, h6, p, span, div {
    color: var(--text-primary);
}

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

/* Navbar */
.navbar {
    background-color: var(--navbar-bg) !important;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    padding: 10px;
}

/* Navbar links: white by default, yellow on hover */
.custom-navlink {
    color: var(--navbar-text) !important;
    background-color: transparent;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}

.custom-navlink:hover, .custom-navlink:focus {
    color: var(--navbar-hover) !important;
    text-decoration: none;
}

/* Active navigation link styling */
.nav-active {
    color: var(--navbar-hover) !important;
    font-weight: bold;
}

.nav-active:hover, .nav-active:focus {
    color: var(--navbar-hover) !important;
}

/* Resource links in navbar: white by default, yellow on hover */
.custom-resource-link, .custom-resource-link:visited, .custom-resource-link:active {
    color: var(--navbar-text) !important;
    background-color: transparent;
    text-decoration: none;
    transition: color 0.2s, background-color 0.2s;
}

.custom-resource-link:hover, .custom-resource-link:focus, .custom-resource-link:active {
    color: var(--navbar-hover) !important;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

.card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--card-border);
    color: var(--text-primary);
}

/* Forms */
.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-control:focus {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.form-label {
    color: var(--text-primary);
}

/* Tables */
.table {
    color: var(--text-primary);
    background-color: var(--table-bg);
    border-color: var(--table-border);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
    color: var(--dropdown-text);
}

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

.dropdown-item:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Style for links within dropdown menu items */
.dropdown-menu .dropdown-item > a,
.dropdown-menu .dropdown-item > a:visited,
.dropdown-menu .dropdown-item > a:active,
.dropdown-menu .dropdown-item > a:hover {
    color: var(--text-primary) !important; /* Ensure links match dropdown text color */
    text-decoration: none; /* Remove underline */
    background-color: transparent !important; /* Prevent background color on hover from link */
}

/* Style for nested dropdown toggle within a dropdown menu using custom class */
.dropdown-menu .nested-dropdown-toggle {
    background-color: transparent !important; /* Remove button background */
    border: none !important; /* Remove button border */
    box-shadow: none !important; /* Remove button shadow */
    color: var(--dropdown-text) !important; /* Match parent dropdown text color */
    padding: .25rem 1rem !important; /* Match dropdown item padding */
    width: 100%; /* Ensure it takes full width like other items */
    text-align: inherit; /* Align text like other items */
}

.dropdown-menu .nested-dropdown-toggle:hover {
     background-color: var(--bg-tertiary) !important; /* Match dropdown item hover background */
     color: var(--text-primary) !important; /* Match dropdown item hover text color */
}

/* Specific styles for dcc.Dropdown (react-select based) */
.Select-control,
.Select-control:hover,
.Select-control.is-focused,
.Select-control.is-open {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--input-text) !important;
}

.Select-value,
.Select-value-label,
.Select-placeholder,
.Select-arrow {
    color: var(--input-text) !important;
}

.Select-menu-outer {
    background-color: var(--dropdown-bg) !important;
    border-color: var(--dropdown-border) !important;
    color: var(--dropdown-text) !important;
}

.Select-option {
    background-color: var(--dropdown-bg) !important;
    color: var(--dropdown-text) !important;
    /* Ensure text does not overlap in options */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 10px; /* Add some padding to prevent text touching the edge */
}

.Select-option:hover,
.Select-option.is-focused {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

.Select-option.is-selected {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* Ensure all dropdowns in dark mode have proper colors */
[data-theme="dark"] .Select-control,
[data-theme="dark"] .Select-value,
[data-theme="dark"] .Select-value-label,
[data-theme="dark"] .Select-placeholder,
[data-theme="dark"] .Select-arrow,
[data-theme="dark"] .Select-menu-outer,
[data-theme="dark"] .Select-option {
    background-color: var(--input-bg) !important;
    color: var(--input-text) !important;
    border-color: var(--input-border) !important;
}

/* Force black text on dropdown options in light mode */
[data-theme="light"] .Select-option,
[data-theme="light"] .Select-value-label,
[data-theme="light"] .Select-placeholder,
[data-theme="light"] .Select-arrow {
    color: #212529 !important;
}

/* Alerts */
.alert {
    background-color: var(--alert-bg);
    border-color: var(--alert-border);
    color: var(--alert-text);
}

/* Toasts */
.toast {
    background-color: var(--toast-bg);
    border-color: var(--toast-border);
    color: var(--toast-text);
}

/* Default (Light Mode) Close Button */
.toast .btn-close {
    color: var(--text-primary) !important; /* Should be black in light mode */
    opacity: 1;
    filter: none !important; /* Ensure no conflicting filters */
}

/* Dark Mode Close Button */
[data-theme="dark"] .toast .btn-close {
    color: var(--text-primary) !important; /* Should be white in dark mode */
    filter: invert(1) grayscale(100%) brightness(200%) !important; /* Explicitly make it white */
}

/* Modals */
.modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
    color: var(--modal-text);
}

.modal-header {
    border-bottom-color: var(--modal-border);
}

.modal-footer {
    border-top-color: var(--modal-border);
}

/* Tooltips */
.tooltip {
    --bs-tooltip-bg: var(--tooltip-bg);
    --bs-tooltip-color: var(--tooltip-text);
}

/* Lists */
.list-group-item {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    color: var(--text-primary);
}

/* Badges */
.badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Links */
a, a:active {
    color: #007bff;
    text-decoration: underline;
    transition: color 0.2s;
}

a:hover, a:focus {
    color: #339cff;
    text-decoration: underline;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Keep existing styles below */
html {
    scroll-behavior: smooth;
}

img:hover {
    transform: scale(1.01);
    transition: transform 0.3s ease;
}

/* Desktop-Specific Styles */
@media (min-width: 768px) {
    .navbar-nav {
        margin: 0 auto;
    }

    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #mobile-search-input,
    #mobile-search-button {
        display: none;
    }
}

/* Mobile-Specific Styles */
@media (max-width: 768px) {
    .navbar-collapse {
        flex-direction: column;
        text-align: center;
    }

    .navbar-toggler {
        margin-left: auto;
        margin-right: 10px;
    }

    .navbar-brand-custom {
        margin-right: auto;
    }

    .ms-auto {
        margin-left: auto !important;
    }

    .desktop-search {
        display: none;
    }

    .container-fluid {
        padding: 15px;
    }

    .desktop-left-section,
    .desktop-right-section {
        width: 100%;
    }

    .logo-search-container {
        text-align: center;
        margin-bottom: 20px;
    }

    .home-image {
        margin-top: 20px;
    }

    .body {
        font-size: 14px;
    }
    
    /* Make mobile search input stretch to fill available space */
    .mobile-search-group {
        flex-grow: 1;
        min-width: 0;
    }
}

/* Input box theming */
.custom-input-box,
.custom-input-box:focus {
    color: var(--text-primary) !important;
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    box-shadow: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

.custom-input-box::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1;
}

/* Button theming */
.custom-btn {
    color: var(--text-primary) !important;
    background-color: var(--navbar-hover) !important;
    border: 2px solid #555 !important;
    font-weight: bold;
    transition: background-color 0.2s, color 0.2s;
}

.custom-btn:hover, .custom-btn:focus {
    background-color: #ffe066 !important;
    color: #222 !important;
    border-color: #222 !important;
}

.custom-view-btn {
    color: var(--text-primary) !important;
    border: 2px solid #777 !important;
    border-radius: 9999px !important;
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    background-color: transparent !important;
    transition: all 0.2s ease-in-out !important;
}

.custom-view-btn:hover {
    background-color: #ffdd00 !important;
    color: black !important;
}

/* Bootstrap Form Components Theming */
/* General labels */
label {
    color: black;
}

/* Radio buttons and Checkboxes */
.form-check-label {
    color: var(--text-primary);
}

.form-check-input {
    border-color: var(--input-border);
    /* Add themed background for checked state if needed */
}

/* Add theming for dbc.RadioItems labels */
.form-check-inline .form-check-label {
    color: var(--text-primary);
}

/* Search Preview Link Colors */
/* Removed rules as color is now controlled by team_link_with_avatar */

/* Search Preview Highlighted Link Color - Force black on yellow */
#desktop-search-preview .dbc-row[style*="background-color: #ffdd00"] a,
#mobile-search-preview .dbc-row[style*="background-color: #ffdd00"] a {
    color: black !important; /* Force black text on yellow highlight */
}

/* Search Preview Non-Highlighted Link Color (targeting A and Span) - Ensure text follows theme */
#desktop-search-preview .dbc-row:not([style*="background-color: #ffdd00"]) a,
#desktop-search-preview .dbc-row:not([style*="background-color: #ffdd00"]) a span,
#mobile-search-preview .dbc-row:not([style*="background-color: #ffdd00"]) a,
#mobile-search-preview .dbc-row:not([style*="background-color: #ffdd00"]) a span {
    color: var(--text-primary) !important; /* Ensure both link and span inherit theme text color */
}

/* Search Preview Non-Highlighted Text Color - Ensure span text follows theme */
#desktop-search-preview .dbc-row:not([style*="background-color: #ffdd00"]) a span,
#mobile-search-preview .dbc-row:not([style*="background-color: #ffdd00"]) a span {
    color: var(--text-primary) !important; /* Span text should inherit theme text color */
}

.compare-team-link:hover {
    text-decoration: underline !important;
}
.rank-card-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 16px;
    overflow-x: auto;
    padding: 0 8px;
  }
  
  .rank-card {
    flex-grow: 2;
    flex-shrink: 0;
    flex-basis: 0;
    max-width: 100%;         /* allows full use of container space */
    min-width: 371px;        /* wide enough for 'Louisiana' */
  }

  /* Override on small screens */
@media (max-width: 600px) {
    .rank-card {
      min-width: 115px;  /* Smaller for mobile */
    }
  }
  
  .rank-card .card-body {
    text-align: center;
    padding: 10px 12px;
    background-color: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
  }
  
  .rank-card-label {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 4px;
    line-height: 1.2;
  }
  
  .rank-card-value {
    font-size: clamp(1.1rem, 2.5vw, 1.6rem); /* scales with screen */
    font-weight: bold;
    color: #007BFF;
    text-decoration: underline;
    white-space: nowrap;
  }

  .navbar-toggler-custom {
    padding: 0px 4px;
    border: none;
    background: none;
    outline: none;
    box-shadow: none;
    font-size: 1.2rem;
    line-height: 1;
    color: white; /* or use var(--bs-navbar-color) */
  }

  /* Prevent navbar items from wrapping */
.mobile-navbar-row {
    flex-wrap: nowrap !important;
    width: 100%;
    overflow: hidden;
}

/* Let columns shrink properly */
.mobile-navbar-col {
    min-width: 0;
    flex-shrink: 1;
}

/* Logo and toggler stay auto-width, search takes up rest */
.mobile-search-group {
    flex-grow: 0;
    min-width: 0;
}

/* Team Tabs Styling */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.375rem 0.375rem 0 0;
    padding: 0.5rem 1rem;
    margin-right: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.nav-tabs .nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color) var(--border-color) transparent;
}

.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background-color: var(--card-bg);
    border-color: var(--border-color) var(--border-color) var(--card-bg);
}

.nav-tabs .nav-link:focus {
    color: var(--text-primary);
    background-color: var(--bg-secondary);
    border-color: var(--border-color) var(--border-color) transparent;
}

/* Tab content spacing */
.tab-content {
    padding: 20px 0;
}

/* Similar teams cards spacing */
.similar-teams-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 15px;
}

/* Performance trends chart container */
.trends-chart-container {
    margin: 20px 0;
    padding: 20px;
    background-color: var(--card-bg);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}

/* Page Transition Animations */
.fade-page {
    opacity: 0; /* Start with opacity 0 to prevent flash */
    transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
    will-change: opacity;
    animation: fadeIn 0.4s ease-in-out forwards; /* Fade in on initial load */
}

.fade-page.fade-out {
    opacity: 0;
    pointer-events: none;
    animation: none; /* Disable initial animation when fading out */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-view-btn-large {
    font-size: 1.0rem !important;
    padding: 1.0rem 2.0rem !important;
}

.gradient-hover {
  color: var(--text-primary);
  transition: background 0.5s, color 0.5s;
  cursor: pointer;
}
.gradient-hover:hover {
  background: linear-gradient(90deg, #ffdd00, #ff4e50, #1e90ff, #ffdd00 80%);
  background-size: 200% auto;
  background-position: 100% 50%;
  color: inherit;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.frc-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.3s, color 0.3s;
}
.frc-link:hover {
  color: #ffdd00;
  text-decoration-color: #ffdd00;
}

/* Export buttons styling */
.export-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.export-buttons .btn {
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.export-buttons .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Table pagination styling */
.dash-spreadsheet-pagination {
    background-color: var(--card-bg) !important;
    color: var(--text) !important;
    border-top: 1px solid var(--input-border) !important;
    padding: 10px !important;
}

.dash-spreadsheet-pagination .Select-control {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
}

.dash-spreadsheet-pagination .Select-value-label {
    color: var(--text) !important;
}

/* Column selector styling */
.dash-spreadsheet-menu {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--input-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.dash-spreadsheet-menu .dash-spreadsheet-menu-item {
    color: var(--text) !important;
    padding: 8px 12px !important;
}

.dash-spreadsheet-menu .dash-spreadsheet-menu-item:hover {
    background-color: var(--primary-color) !important;
    color: #000 !important;
}

/* Only apply row hover/selected background if the cell does NOT have an inline background color */
.dash-spreadsheet-inner .dash-spreadsheet-row:hover .dash-cell:not([style*="background-color"]) {
    background-color: rgba(255, 221, 0, 0.1) !important;
}
.dash-spreadsheet-inner .dash-spreadsheet-row.selected .dash-cell:not([style*="background-color"]) {
    background-color: rgba(255, 221, 0, 0.3) !important;
}

/* Responsive table improvements */
@media (max-width: 768px) {
    .dash-table-container {
        font-size: 12px;
    }
    
    .dash-spreadsheet-inner .dash-spreadsheet-cell {
        padding: 4px 6px !important;
        min-width: 60px !important;
        max-width: 100px !important;
    }
    
    .export-buttons {
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .export-buttons .btn {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* Dash DataTable sort arrow color override */
.dash-table-container .dash-header .column-header--sort {
    color: var(--navbar-text) !important; /* Default arrow color */
    transition: color 0.2s;
}
.dash-table-container .dash-header .column-header--sort:hover,
.dash-table-container .dash-header .column-header--sort:focus {
    color: #FFDD00 !important; /* Highlight yellow on hover/focus */
}
.dash-table-container .dash-header .column-header--sort.is-active {
    color: #FFDD00 !important; /* Highlight yellow when sorted */
}

.dash-table-container .dash-filter .dash-filter-icon:hover {
    color: #FFDD00 !important;
    fill: #FFDD00 !important;
    opacity: 0.8;
}

/* Dash DataTable filter styling */
.dash-table-container .dash-filter input {
    color: #FFDD00 !important;
}

.dash-table-container .dash-filter input::placeholder {
    color: var(--text-primary) !important;
    opacity: 0.1 !important; /* Very low opacity by default */
    transition: opacity 0.2s ease;
}

.dash-table-container .dash-filter input:hover::placeholder,
.dash-table-container .dash-filter input:focus::placeholder {
    opacity: 0.7 !important; /* Higher opacity on hover/focus */
}

/* Filter icon (Aa) styling */
.dash-table-container .dash-filter .dash-filter-icon {
    color: #FFDD00 !important; /* Yellow color for filter icon */
    fill: #FFDD00 !important;
}

.dash-table-container .dash-filter .dash-filter-icon:hover {
    color: #FFDD00 !important;
    fill: #FFDD00 !important;
    opacity: 0.8;
}

/* Search toggle button hover effects */
#search-toggle:hover {
    background-color: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    transform: scale(1.05);
}

#search-toggle:active {
    transform: scale(0.95);
}

.alliance-bracket-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 600px) {
  .alliance-bracket-grid {
    grid-template-columns: 1fr !important;
    gap: 10px 6px !important;
    padding: 0 2px;
  }
  .alliance-card {
    padding: 6px 4px !important;
    margin-bottom: 8px !important;
    border-radius: 8px !important;
  }
  .alliance-card > div:first-child {
    font-size: 1em !important;
    margin-bottom: 2px !important;
  }
  .alliance-badge {
    padding: 2px 8px !important;
    font-size: 0.92em !important;
    min-width: 36px !important;
    margin-right: 4px !important;
    border-radius: 6px !important;
  }
  .alliance-team-box {
    padding: 2px 4px !important;
    min-width: 28px !important;
    font-size: 0.92em !important;
    margin: 1px !important;
    border-radius: 4px !important;
  }
  .alliance-card .markdown-text, .alliance-card .markdown-text * {
    font-size: 0.95em !important;
  }
}

@media (max-width: 767px) {
    .insights-responsive-row > .col-md-6 {
        border-right: none !important;
        margin-bottom: 2rem !important;
    }
    .insights-number {
        font-size: 1.3rem !important;
    }
    .insights-label {
        font-size: 0.95rem !important;
        white-space: nowrap;
    }
    .insights-metric {
        padding: 0.5rem 0.2rem !important;
    }
    .insights-summary {
        font-size: 0.95rem !important;
    }
}
.insights-number {
    font-size: 1.6rem;
    font-weight: bold;
    white-space: nowrap;
}
.insights-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.insights-metric {
    text-align: center;
    padding: 10px;
}
.insights-summary {
    font-size: 0.95rem;
    color: var(--text-secondary);
}