/* ================================================
   Tourneys Application Styles

   Clean slate implementation with Bootstrap 5
   ================================================ */

/* Import CSS Variables */
@import url('css/variables.css');

/* Import Fonts */
@import url('fonts.css');

/* Import Bootstrap */
@import url('lib/bootstrap/css/bootstrap.min.css');

/* Import Bootstrap Icons */
@import url('lib/bootstrap-icons/font/bootstrap-icons.min.css');

/* ================================================
   Blazor FocusOnNavigate Outline Removal
   ================================================ */

/* Remove focus outline from headings when programmatically focused by Blazor's FocusOnNavigate.
   This matches Blazor's default behavior and prevents unwanted visual focus indicators
   while maintaining proper accessibility for screen readers. */
h1:focus,
h2:focus,
h3:focus,
h4:focus,
h5:focus,
h6:focus,
[role="heading"]:focus {
    outline: 0;
}


/* ================================================
   Bootstrap Container Overrides - Modern Responsive Breakpoints
   ================================================ */

/* Custom responsive gutters - 16px xs/sm, 40px md+ */
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    --bs-gutter-x: 2rem;  /* 32px total (16px each side) for xs/sm */
}

@media (min-width: 768px) {
    .container,
    .container-fluid,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        --bs-gutter-x: 5rem;  /* 80px total (40px each side) for md+ */
    }
}

/* Update container max-widths for wider layouts on larger screens */
@media (min-width: 768px) {
    .container {
        max-width: 100%;  /* Full width (minus gutters) for md range */
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 1140px;  /* Bootstrap default */
    }
}

@media (min-width: 1200px) {
    .container {
        max-width: 1260px;  /* Slightly wider than Bootstrap */
    }
}

@media (min-width: 1296px) {
    .container {
        max-width: 1296px;  /* NFL.com style cap */
    }
}

/* ================================================
   Custom Spacing Variables
   ================================================ */
:root {
    /* Row Gap Variables - Consistent vertical spacing between rows */
    --row-gap-mobile: 1.5rem;      /* 24px row gap on mobile */
    --row-gap-desktop: 2rem;       /* 32px row gap on desktop */
}

/* ================================================
   Bootstrap Color Variables
   ================================================ */
:root {
    /* Bootstrap Gray Scale */
    --bs-gray-50: #f8f9fa;
    --bs-gray-100: #f1f3f5;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-black: #000000;
    --bs-white: #ffffff;
}

/* ================================================
   Panel Component Theme Variables
   ================================================ */
:root {
    --panel-header-bg: var(--bs-gray-100);
    --panel-header-border: var(--bs-border-color);
    --panel-pattern-bg: var(--bs-primary-bg-subtle, #e8f5e9);
    --panel-pattern-color: rgba(0, 136, 206, 0.08);
    --panel-footer-border: var(--bs-gray-800);
    --panel-footer-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    --panel-close-btn-bg: rgba(255, 255, 255, 0.95);
    --panel-close-btn-color: rgba(0, 0, 0, 0.5);
    --panel-close-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    --panel-close-btn-hover-bg: rgba(255, 255, 255, 1);
    --panel-close-btn-hover-color: rgba(0, 0, 0, 0.8);
    --panel-image-placeholder: var(--bs-gray-200);
}

[data-theme="dark"] {
    --panel-header-bg: rgba(255, 255, 255, 0.03);
    --panel-header-border: var(--bs-gray-800);
    --panel-pattern-bg: rgba(25, 135, 84, 0.05);
    --panel-pattern-color: rgba(25, 135, 84, 0.12);
    --panel-footer-border: var(--bs-gray-800);
    --panel-footer-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    --panel-close-btn-bg: rgba(48, 48, 48, 0.9);
    --panel-close-btn-color: rgba(255, 255, 255, 0.6);
    --panel-close-btn-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    --panel-close-btn-hover-bg: rgba(64, 64, 64, 0.95);
    --panel-close-btn-hover-color: rgba(255, 255, 255, 0.9);
    --panel-image-placeholder: var(--bs-gray-800);
    --bs-offcanvas-bg: var(--bs-dark);
    --bs-offcanvas-color: var(--bs-light);
    --bs-offcanvas-border-color: var(--bs-gray-800);
}

/* ================================================
   Rating Component Theme Variables
   ================================================ */
:root {
    /* Rating component title colors */
    --rating-title-color: var(--bs-secondary);

    /* Rating button states */
    --rating-button-bg: var(--bs-body-bg);
    --rating-button-text: var(--bs-body-color);
    --rating-button-border: var(--bs-border-color);
    --rating-button-hover-bg: var(--bs-primary-bg-subtle);
    --rating-button-hover-border: var(--bs-primary-border-subtle);
    --rating-button-selected-bg: var(--bs-primary-bg-subtle);
    --rating-button-selected-border: var(--bs-primary);
    --rating-button-selected-text: var(--bs-primary);
    --rating-button-selected-shadow: 0 0 0 0.125rem rgba(13, 110, 253, 0.25);
    --rating-button-selected-hover-bg: var(--bs-primary-bg-subtle);
    --rating-button-selected-hover-shadow: 0 0 0 0.125rem rgba(13, 110, 253, 0.35);

    /* Any button special styling */
    --rating-any-button-bg: var(--bs-secondary-bg-subtle);
    --rating-any-button-border: var(--bs-secondary-border-subtle);
    --rating-any-button-hover-bg: var(--bs-secondary-bg-subtle);
    --rating-any-button-hover-border: var(--bs-secondary);
    --rating-any-button-selected-bg: var(--bs-secondary-bg-subtle);
    --rating-any-button-selected-border: var(--bs-secondary);
    --rating-any-button-selected-text: var(--bs-secondary);
    --rating-any-button-selected-hover-bg: var(--bs-secondary-bg-subtle);

    /* Checkmark and separator colors */
    --rating-checkmark-color: var(--bs-primary);
    --rating-separator-color: var(--bs-border-color-translucent);

    /* Action buttons */
    --rating-actions-border: var(--bs-border-color);
    --rating-clear-button-bg: var(--bs-body-bg);
    --rating-clear-button-text: var(--bs-secondary);
    --rating-clear-button-border: var(--bs-secondary-border-subtle);
    --rating-clear-button-hover-bg: var(--bs-secondary-bg-subtle);
    --rating-clear-button-hover-border: var(--bs-secondary);
    --rating-clear-button-hover-text: var(--bs-secondary);
    --rating-apply-button-bg: var(--bs-primary);
    --rating-apply-button-text: var(--bs-white);
    --rating-apply-button-border: var(--bs-primary);
    --rating-apply-button-hover-bg: var(--bs-primary-hover, #0056b3);
    --rating-apply-button-hover-border: var(--bs-primary-hover, #0056b3);
    --rating-apply-button-hover-shadow: 0 0.25rem 0.75rem rgba(13, 110, 253, 0.25);
}

[data-theme="dark"] {
    /* Dark mode overrides for rating components */
    --rating-title-color: var(--bs-secondary-color);
    --rating-button-bg: rgba(255, 255, 255, 0.02);
    --rating-button-text: var(--bs-body-color);
    --rating-button-border: var(--bs-gray-700);
    --rating-button-hover-bg: rgba(13, 110, 253, 0.1);
    --rating-button-hover-border: var(--bs-primary);
    --rating-button-selected-bg: rgba(13, 110, 253, 0.15);
    --rating-button-selected-border: var(--bs-primary);
    --rating-button-selected-text: var(--bs-primary);
    --rating-button-selected-shadow: 0 0 0 0.125rem rgba(13, 110, 253, 0.4);
    --rating-button-selected-hover-bg: rgba(13, 110, 253, 0.2);
    --rating-button-selected-hover-shadow: 0 0 0 0.125rem rgba(13, 110, 253, 0.5);

    /* Any button dark mode */
    --rating-any-button-bg: rgba(108, 117, 125, 0.1);
    --rating-any-button-border: var(--bs-gray-600);
    --rating-any-button-hover-bg: rgba(108, 117, 125, 0.15);
    --rating-any-button-hover-border: var(--bs-secondary);
    --rating-any-button-selected-bg: rgba(108, 117, 125, 0.2);
    --rating-any-button-selected-border: var(--bs-secondary);
    --rating-any-button-selected-text: var(--bs-secondary);
    --rating-any-button-selected-hover-bg: rgba(108, 117, 125, 0.25);

    /* Dark mode separators and checkmarks */
    --rating-checkmark-color: var(--bs-primary);
    --rating-separator-color: rgba(255, 255, 255, 0.1);

    /* Dark mode action buttons */
    --rating-actions-border: var(--bs-gray-700);
    --rating-clear-button-bg: rgba(255, 255, 255, 0.02);
    --rating-clear-button-text: var(--bs-secondary);
    --rating-clear-button-border: var(--bs-gray-600);
    --rating-clear-button-hover-bg: rgba(108, 117, 125, 0.15);
    --rating-clear-button-hover-border: var(--bs-secondary);
    --rating-clear-button-hover-text: var(--bs-secondary);
    --rating-apply-button-hover-shadow: 0 0.25rem 0.75rem rgba(13, 110, 253, 0.4);
}

/* ================================================
   Rating Selection Component Styles (Global)
   ================================================ */
/* These styles MUST be global due to CSS isolation issues when RatingSelectionCore
   is used inside DropdownContent (which uses portal pattern to document.body).
   CSS isolation attributes don't work across portaled content boundaries. */

.rating-selection-container {
    padding: 0.5rem 0.75rem 0.75rem; /* Reduced top padding */
    min-width: 280px;
    box-sizing: border-box;
}

/* Removed hacky overflow fixes - root cause was negative margins on header */

.rating-columns {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.rating-column {
    flex: 1;
    min-width: 110px;
}

.rating-system-title {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rating-title-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.rating-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.375rem;
    border: 2px solid var(--rating-button-border);
    background: var(--rating-button-bg);
    color: var(--rating-button-text);
    border-radius: var(--bs-border-radius-lg);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
    position: relative;
    min-height: 36px;
    box-sizing: border-box;
}

.rating-button:hover {
    background-color: var(--rating-button-hover-bg);
    border-color: var(--rating-button-hover-border);
    transform: translateY(-1px);
    box-shadow: var(--bs-box-shadow-sm);
}

.rating-button.selected {
    background-color: var(--rating-button-selected-bg);
    border-color: var(--rating-button-selected-border);
    color: var(--rating-button-selected-text);
    font-weight: 600;
    box-shadow: var(--rating-button-selected-shadow);
}

.rating-button.selected:hover {
    background-color: var(--rating-button-selected-hover-bg);
    transform: translateY(-1px);
    box-shadow: var(--rating-button-selected-hover-shadow);
}

/* Bootstrap Icons styling */
.rating-button .bi-check-lg {
    font-size: 1rem;
    color: var(--rating-checkmark-color);
    flex-shrink: 0;
}

.any-button {
    margin-bottom: 0.5rem;
    font-style: italic;
    background-color: var(--rating-any-button-bg);
    border-color: var(--rating-any-button-border);
    position: relative;
}

.any-button:hover {
    background-color: var(--rating-any-button-hover-bg);
    border-color: var(--rating-any-button-hover-border);
}

.any-button.selected {
    background-color: var(--rating-any-button-selected-bg);
    border-color: var(--rating-any-button-selected-border);
    color: var(--rating-any-button-selected-text);
    font-weight: 600;
    font-style: normal;
}

.any-button.selected:hover {
    background-color: var(--rating-any-button-selected-hover-bg);
}

/* Visual separator after any button */
.any-button::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 20%;
    right: 20%;
    height: 1px;
    background: linear-gradient(to right,
        transparent,
        var(--rating-separator-color) 20%,
        var(--rating-separator-color) 80%,
        transparent);
}

.rating-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding-top: 1rem;
    border-top: 1px solid var(--rating-actions-border);
}

.action-button {
    padding: 0.375rem 0.75rem;
    border: 1px solid;
    border-radius: var(--bs-border-radius);
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 70px;
    text-align: center;
    line-height: 1.5;
}

.clear-button {
    background: var(--rating-clear-button-bg);
    color: var(--rating-clear-button-text);
    border-color: var(--rating-clear-button-border);
}

.clear-button:hover {
    background: var(--rating-clear-button-hover-bg);
    border-color: var(--rating-clear-button-hover-border);
    color: var(--rating-clear-button-hover-text);
    transform: translateY(-1px);
}

.apply-button {
    background: var(--bs-btn-bg);
    color: var(--bs-btn-color);
    border-color: var(--bs-btn-border-color);
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-white);
}

.apply-button:hover {
    background-color: var(--bs-primary-hover, #0056b3);
    border-color: var(--bs-primary-hover, #0056b3);
    transform: translateY(-1px);
    box-shadow: 0 0.125rem 0.25rem rgba(13, 110, 253, 0.15);
}

/* Mobile responsive adjustments for rating components */
@media (max-width: 480px) {
    .rating-selection-container {
        padding: 1rem 0.75rem;
    }

    .rating-columns {
        gap: 1rem;
    }

    .rating-button {
        padding: 1rem;
        font-size: 1rem;
        min-height: 48px;
    }

    .action-button {
        padding: 0.5rem 1rem;
        font-size: 0.9375rem;
        min-height: 44px;
    }

    .rating-actions {
        gap: 0.5rem;
    }
}

/* Very small screens - stack action buttons */
@media (max-width: 360px) {
    .rating-actions {
        flex-direction: column;
    }

    .action-button {
        width: 100%;
    }
}

/* Source toggle functionality */
.rating-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.rating-column-header h4 {
    margin: 0;
}

.source-toggle-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: all 0.2s;
    cursor: pointer;
    color: var(--bs-primary);
    line-height: 1;
}

.source-toggle-btn:hover {
    background-color: var(--bs-gray-200);
}

.source-toggle-btn.disabled {
    color: var(--bs-danger);
}

/* Disabled column styling */
.rating-column.source-disabled {
    position: relative;
    opacity: 0.5;
}

.rating-column.source-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    border-radius: 0.25rem;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .rating-column.source-disabled::after {
    background: rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .source-toggle-btn:hover {
    background-color: var(--bs-gray-800);
}

/* WTN placeholder styling */
.wtn-placeholder {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--bs-secondary);
}

.wtn-placeholder p {
    margin: 0;
    font-size: 0.875rem;
}

/* ================================================
   Global Styles
   ================================================ */

/* Prize Money Badge - Must be global for Bootstrap badge */
.badge-prize-money {
    background: linear-gradient(135deg,
        rgba(25, 135, 84, 0.1) 0%,
        rgba(13, 202, 240, 0.1) 100%);
    border: 1px solid var(--bs-success);
    color: var(--bs-success-text-emphasis);
    font-size: 0.8125rem;
    padding: 0.375rem 0.75rem;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.badge-prize-money::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--bs-success) 0%, var(--bs-info) 100%);
}

/* Tournament Detail Panel - Button Layout */
.quick-actions-mobile {
    margin-bottom: 1.5rem;
}

.action-button-primary {
    min-height: 3rem;
    margin-bottom: 0.75rem;
    padding: 0.75rem 1.5rem !important; /* Larger padding for main CTA */
}

.action-buttons-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.action-buttons-row .dropdown {
    display: contents; /* Allow dropdown to participate in grid */
}

.icon-button {
    min-height: 2.75rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

/* Ensure dropdown toggle fills grid cell */
.action-buttons-row .dropdown-toggle {
    width: 100%;
}

/* Hide button text on mobile */
@media (max-width: 767px) {
    .button-text-mobile {
        display: none;
    }
}

/* Desktop view adjustments */
@media (min-width: 768px) {
    .icon-button {
        padding: 0.5rem 1rem;
    }
}

/* Custom Button Styling - Less "Bootstrappy" */
.btn {
    border-radius: 6px; /* Minimal radius like NFL */
    font-weight: 600;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy transition like MobileFilter */
    font-family: var(--bs-font-family-sport), var(--bs-font-sans-serif);
    letter-spacing: 0.01em;
    text-transform: uppercase;
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}

/* Alternative: Base Font Style (like MobileFilterOverlay) */
.btn-base-font {
    font-family: var(--bs-font-family-base) !important;
    text-transform: none !important;
    font-size: 1rem !important;
    letter-spacing: normal !important;
    font-weight: 600 !important;
}

/* Utility class to add tilt only where appropriate */
.btn-tilt {
    transform: rotate(-1deg) !important;
}

.btn-tilt:hover {
    transform: rotate(-1deg) scale(1.05) !important;
}

.btn-tilt:active {
    transform: rotate(-1deg) scale(0.96) !important;
}

/* Flat variation - no shadows or gradients */
.btn-flat {
    box-shadow: none !important;
}

.btn-flat::before {
    display: none !important;
}

.btn-flat:hover {
    box-shadow: none !important;
}

.btn-flat:active {
    box-shadow: none !important;
}

.btn-primary.btn-flat {
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
}

.btn-primary.btn-flat:hover {
    background: #FFD700;
    border-color: #FFD700;
}

/* Option 3B: Championship Gold WITHOUT TILT (recommended default) */
.btn-primary {
    background: var(--color-accent);
    border: 2px solid transparent;
    color: var(--color-text-primary);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    position: relative;
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
    pointer-events: none;
    border-radius: 6px;
}

.btn-primary:hover {
    background: #FFC107;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}

.btn-primary:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

/* Mobile Hero Button Variant - Large touch-friendly buttons for mobile selection panels */
.btn-mobile-hero {
    /* Base styling */
    font-family: var(--font-stack-sport);
    font-size: 1.125rem;
    font-weight: 600;
    padding: 1rem 1.5rem;
    border-radius: 20px;
    border: 2px solid var(--bs-border-color);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    /* Faster, more specific transitions for better performance */
    transition: transform 0.12s ease-out,
                background-color 0.12s ease-out,
                border-color 0.12s ease-out,
                box-shadow 0.12s ease-out;
    position: relative;
    overflow: hidden;
    text-transform: none; /* Override default btn uppercase */
    letter-spacing: normal; /* Override default btn letter-spacing */
    /* Performance hint for smoother animations */
    will-change: transform;
    /* Disable tap highlight for custom feedback */
    -webkit-tap-highlight-color: transparent;
}

.btn-mobile-hero:hover {
    transform: scale(1.015); /* Subtler scale for faster feel */
    background-color: var(--bs-gray-100);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

/* Instant feedback on touch/click */
.btn-mobile-hero:active {
    transform: scale(0.97);
    transition: transform 0.05s ease-out; /* Nearly instant */
}

/* Selected state with signature tilt */
.btn-mobile-hero.selected {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
    transform: rotate(-1deg);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.btn-mobile-hero.selected:hover {
    transform: rotate(-1deg) scale(1.015);
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
}

.btn-mobile-hero.selected:active {
    transform: rotate(-1deg) scale(0.97);
    transition: transform 0.05s ease-out;
}

/* Mobile hero button content structure */
.btn-mobile-hero .option-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.btn-mobile-hero .option-label {
    font-weight: inherit;
    line-height: 1.2;
}

.btn-mobile-hero .option-description {
    font-size: 0.875rem;
    opacity: 0.7;
    font-weight: 400;
    line-height: 1.3;
}

/* Icon styling within mobile hero buttons */
.btn-mobile-hero i {
    font-size: 1.25rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.btn-mobile-hero.selected i {
    opacity: 1;
}

/* Check icon for selected state */
.btn-mobile-hero .bi-check-lg {
    font-size: 1.5rem;
    opacity: 1;
    color: var(--color-text-on-accent);
    margin-left: auto;
    flex-shrink: 0;
}

/* Dark mode adjustments for mobile hero buttons */
[data-theme="dark"] .btn-mobile-hero {
    border-color: var(--bs-gray-700);
    background-color: var(--bs-gray-900);
}

[data-theme="dark"] .btn-mobile-hero:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--bs-gray-700);
}

[data-theme="dark"] .btn-mobile-hero.selected {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
}

/* Dark Athletic Button - Complements gold selection states */
.btn-dark-athletic {
    background-color: #1a1a1a;
    border: 2px solid #1a1a1a;
    color: #ffffff;
    font-family: var(--font-stack-sport);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.5rem;
    transition: transform 0.12s ease-out,
                background-color 0.12s ease-out,
                border-color 0.12s ease-out,
                box-shadow 0.12s ease-out;
    position: relative;
    overflow: hidden;
    will-change: transform;
}

.btn-dark-athletic:hover {
    background-color: #2a2a2a;
    border-color: #2a2a2a;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-dark-athletic:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: transform 0.05s ease-out;
}

.btn-dark-athletic:focus {
    box-shadow: 0 0 0 0.25rem rgba(26, 26, 26, 0.25);
}

/* Dark mode adjustments */
[data-theme="dark"] .btn-dark-athletic {
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    color: #1a1a1a;
}

[data-theme="dark"] .btn-dark-athletic:hover {
    background-color: #e9ecef;
    border-color: #e9ecef;
    color: #1a1a1a;
}

/* Option 3A: Championship Gold with MORE TILT (use btn-tilt class instead)
.btn-primary {
    background: var(--color-accent);
    border: 2px solid transparent;
    color: var(--color-text-primary);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    transform: rotate(-2.5deg);
}

.btn-primary:hover {
    background: #FFC107;
    border-color: transparent;
    transform: rotate(-2.5deg) scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}

.btn-primary:active {
    transform: rotate(-2.5deg) scale(0.96);
    transition-duration: 0.05s;
}
*/

/* Option 1: Athletic Teal - Tennis Court Green
.btn-primary {
    background: linear-gradient(180deg, #00BFA5 0%, #00A693 100%);
    border: 1px solid #009982;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: white;
}

.btn-primary:hover {
    background: linear-gradient(180deg, #00A693 0%, #009982 100%);
    border-color: #008771;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
*/

/* Option 2: Dark Navy with Accent Border
.btn-primary {
    background-color: #0A1628;
    border: 2px solid var(--color-accent);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover {
    background-color: #0F1F35;
    border-color: #FFE033;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
}
*/

.btn-outline-secondary {
    border-width: 2px;
    background-color: rgba(255, 255, 255, 0.9);
    text-transform: none; /* Keep normal case for secondary */
    font-weight: 500;
}

.btn-outline-secondary:hover {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Large button adjustments */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

/* Small button adjustments */
.btn-sm {
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
}

/* Dark mode button adjustments */
[data-theme="dark"] .btn-primary {
    /* Keep the same yellow in dark mode - it pops nicely */
    background: var(--color-accent);
    border-color: transparent;
    color: var(--color-text-primary); /* Dark text on yellow */
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

[data-theme="dark"] .btn-primary:hover {
    background: #FFC107;
    border-color: transparent;
    color: var(--color-text-primary);
    transform: rotate(-1deg) scale(1.05);
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.4);
}

[data-theme="dark"] .btn-outline-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--bs-gray-600);
    color: var(--bs-gray-300);
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--bs-gray-500);
    color: var(--bs-white);
}

/* Dark mode disabled button styling */
[data-theme="dark"] .btn:disabled,
[data-theme="dark"] .btn.disabled {
    opacity: 0.4;
    background-color: rgba(255, 255, 255, 0.02);
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-600);
    cursor: not-allowed;
}

[data-theme="dark"] .btn-outline-secondary:disabled,
[data-theme="dark"] .btn-outline-secondary.disabled {
    background-color: transparent;
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-600);
}

/* Dropdown menu styling */
.dropdown-menu {
    border-radius: 6px; /* Match button radius */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--bs-border-color);
    padding: 0.5rem;
}

.dropdown-item {
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.75rem;
    margin: 0.125rem 0;
    transition: background-color 0.15s ease;
}

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

[data-theme="dark"] .dropdown-menu {
    background-color: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

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

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bs-gray-700);
    color: var(--bs-white);
}

/* Custom Card Styling - NFL.com Inspired */
.card {
    border: none;
    border-radius: 8px; /* Minimal border radius */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    background-color: var(--bs-white);
    overflow: hidden;
}

.card-body {
    padding: 1rem; /* Minimal padding */
}

.card-title {
    font-weight: 500; /* Medium weight, not bold */
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: var(--color-text-primary);
    font-family: var(--bs-font-family-base), var(--bs-font-sans-serif); /* Source Sans font */
    line-height: 1.2;
}

/* Dark mode card styling */
[data-theme="dark"] .card {
    background-color: var(--color-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .card-title {
    color: var(--color-text-primary);
}

/* Card image styling */
.card-img-top {
    border-radius: 8px 8px 0 0; /* Match minimal radius */
    object-fit: cover;
    aspect-ratio: 16/9;
}

/* Compact card variant */
.card-compact .card-body {
    padding: 0.75rem;
}

/* Additional typography for card content */
.card h3,
.card h4,
.card h5,
.card h6 {
    font-family: var(--bs-font-family-base), var(--bs-font-sans-serif);
    font-weight: 500;
    color: var(--color-text-primary);
}

.card p {
    margin-bottom: 0.5rem;
    line-height: 1.5;
    color: var(--color-text-primary);
}

/* Ensure all card text uses proper colors in dark mode */
[data-theme="dark"] .card {
    color: var(--color-text-primary);
}

[data-theme="dark"] .card .text-secondary {
    color: var(--color-text-secondary) !important;
}

/* Interactive card with pseudo-element border for proper layering */
.card-interactive {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;  /* Prevents 300ms tap delay on mobile */
    transition: background-color var(--card-transition-duration) ease;
}

/* Create border using pseudo-element that sits above all content */
.card-interactive::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: inherit;  /* Match parent's border radius */
    border: var(--card-outline-width) solid transparent;
    transition: var(--card-transition);
    pointer-events: none;  /* Allow clicks to pass through */
    z-index: 10;  /* Ensure it sits above child content */
}

/* Hover state - only for devices with hover capability */
@media (hover: hover) and (pointer: fine) {
    .card-interactive:hover::after {
        border-color: var(--card-outline-hover);
    }
}

/* Active/pressed state for all devices - adds background tint */
.card-interactive:active,
.card-interactive.pressed {
    background-color: var(--card-active-bg) !important;
}

.card-interactive:active::after,
.card-interactive.pressed::after {
    border-color: var(--card-outline-active);
}

/* Focus state for keyboard navigation */
.card-interactive:focus-visible {
    outline: 2px solid var(--card-outline-active);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .card-interactive::after {
        transition-duration: 0.01s;
    }
}

/* Card grid layout helper */
.card-grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

@media (max-width: 767px) {
    .card-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .card-body {
        padding: 0.875rem; /* Even less padding on mobile */
    }

    .card-title {
        font-size: 1.125rem;
    }
}

/* Tournament Card Specific Styles - NFL.com Inspired */
.tournament-card {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tournament-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

/* Tournament card image container */
.tournament-card .card-img-container {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--bs-gray-100) 0%, var(--bs-gray-200) 100%);
}

.tournament-card .card-img-top {
    transition: transform 0.3s ease;
}

.tournament-card:hover .card-img-top {
    transform: scale(1.05);
}

/* Badge styles within cards */
.card .badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Dark mode tournament card adjustments */
[data-theme="dark"] .tournament-card .card-img-container {
    background: linear-gradient(135deg, var(--bs-gray-800) 0%, var(--bs-gray-900) 100%);
}

[data-theme="dark"] .tournament-card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
}

/* Card content specific styles */
.card .location-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.card .location-text {
    flex: 1;
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Icon adjustments in card titles */
.card-title i {
    font-size: 1.125rem;
    opacity: 0.8;
}

/* ================================================
   Tournament Detail Card Variations
   ================================================ */

/* Tournament Detail Card - Uses Winner font with toned-down styling */
.card-tourney-detail .card-title {
    font-family: var(--bs-font-family-winner), var(--bs-font-sans-serif) !important;
    font-weight: 400; /* Lighter weight instead of bold */
    text-transform: capitalize; /* Sentence case instead of all caps */
    letter-spacing: -0.01em; /* Tighten spacing */
}

/* Tournament Detail Card - Location/Timeline specific */
.card-tourney-location .card-title,
.card-tourney-timeline .card-title {
    font-family: var(--bs-font-family-winner), var(--bs-font-sans-serif) !important;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: -0.01em;
}

/* Tournament Detail Card - Compact variation */
.card-tourney-compact {
    border-radius: 4px; /* Even more minimal */
}

.card-tourney-compact .card-body {
    padding: 0.875rem; /* Slightly more padding than regular compact */
}

.card-tourney-compact .card-title {
    font-family: var(--bs-font-family-winner), var(--bs-font-sans-serif) !important;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: -0.01em;
    font-size: 1.125rem; /* Smaller title */
    margin-bottom: 0.5rem;
}

/* Show button text on desktop */
@media (min-width: 768px) {
    .button-text-mobile {
        display: inline;
    }
}

/* Apply custom fonts and base styles */
body {
  font-family: var(--bs-font-family-base);
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Apply font smoothing to all elements for crisp text */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dark mode support */
[data-theme="dark"] body {
  background-color: var(--color-background);
  color: var(--color-text-primary);
}

/* Ensure navbar respects theme */
.navbar {
  background-color: var(--navbar-bg) !important;
}

[data-theme="dark"] .navbar {
  background-color: var(--navbar-bg) !important;
}

/* ================================================
   Bootstrap Customizations
   ================================================ */

/* Override Bootstrap CSS variables with our design tokens */
:root {
  /* Bootstrap Primary Color */
  --bs-primary: var(--color-primary);
  --bs-primary-rgb: var(--color-primary-rgb);

  /* Bootstrap Body Colors */
  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--color-text-primary);

  /* Bootstrap Border Radius */
  --bs-border-radius: var(--radius-medium);
  --bs-border-radius-sm: var(--radius-small);
  --bs-border-radius-lg: var(--radius-large);
  --bs-border-radius-xl: var(--radius-xl);
  --bs-border-radius-pill: var(--radius-pill);
}

/* Dark mode Bootstrap overrides */
[data-theme="dark"] {
  --bs-body-bg: var(--color-background);
  --bs-body-color: var(--color-text-primary);
  --bs-border-color: var(--card-border);
  --bs-card-bg: var(--color-surface);
}

/* Ensure proper minimum height */
.min-vh-100 {
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport height for mobile */
}

/* ================================================
   Component Styles
   ================================================ */

/* Component-specific styles will be added here or in separate files */

/* ================================================
   Light Mode Enhancement Overrides
   ================================================ */

/* Enhanced navbar for light mode */
:root:not([data-theme="dark"]) .navbar {
    background: linear-gradient(135deg,
        #0088CE 0%,
        #0096DC 50%,
        #00A0E8 100%) !important;
}

/* Add subtle shine effect to navbar logo on hover */
:root:not([data-theme="dark"]) .navbar-logo:hover {
    filter: brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.4));
}

/* Enhanced Natural Filter Bar for light mode */
:root:not([data-theme="dark"]) .filter-card {
    background: linear-gradient(135deg,
        rgba(0, 136, 206, 0.06) 0%,
        rgba(0, 191, 165, 0.03) 25%,
        rgba(255, 255, 255, 0.98) 50%,
        rgba(248, 250, 252, 0.95) 100%);
    box-shadow: 0 6px 24px rgba(0, 136, 206, 0.12),
                0 2px 8px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Enhance filter button hover in light mode */
:root:not([data-theme="dark"]) .filter-button {
    background: white;
    box-shadow: 0 2px 8px rgba(0, 136, 206, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@media (hover: hover) and (pointer: fine) {
    :root:not([data-theme="dark"]) .filter-button:hover {
        background: var(--color-primary) !important;
        background-color: var(--color-primary) !important;
        color: white;
        transform: rotate(-2deg) scale(1.05);
        box-shadow: 0 4px 16px rgba(0, 136, 206, 0.25);
        border-color: var(--color-primary);
    }
}


/* Mobile adjustments for light mode enhancements */
@media (max-width: 768px) {
    /* Slightly reduce gradients on mobile for performance */
    :root:not([data-theme="dark"]) .navbar {
        background: linear-gradient(135deg,
            #0088CE 0%,
            #0096DC 100%) !important;
    }

    /* Simplify filter card gradient on mobile */
    :root:not([data-theme="dark"]) .filter-card {
        background: linear-gradient(135deg,
            rgba(0, 136, 206, 0.05) 0%,
            rgba(255, 255, 255, 0.98) 100%);
        /* Edge-to-edge shadow on mobile */
        box-shadow: 0 1px 0 rgba(0, 136, 206, 0.15),
                    inset 0 -1px 0 rgba(0, 136, 206, 0.08);
    }
}

/* ================================================
   FluentUI Overrides
   ================================================ */

/* Theme Switcher styles - must be global for FluentUI */
.theme-switcher {
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  color: #FFF;
}

@media (max-width: 768px) {
  .theme-switcher {
    width: 36px;
    height: 36px;
  }
}

.theme-switcher:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.theme-switcher:active {
  transform: scale(0.95);
}

/* Ripple effect on click */
.theme-switcher::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}

.theme-switcher:active::after {
  transform: scale(2);
  opacity: 0;
  transition: transform 0s, opacity 0.5s;
}

/* Theme icon rotation animation */
.theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.theme-icon.light {
  transform: rotate(0deg);
}

.theme-icon.dark {
  transform: rotate(360deg);
}

/* Dark mode specific styles */
[data-theme="dark"] .theme-switcher {
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .theme-switcher:hover {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.05);
}

/* ================================================
   Utility Classes
   ================================================ */

/* Custom icon component (for reusing FluentUI SVG icons) */
.custom-icon {
  display: inline-flex;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* Global utility for filter section titles */
.section-title-uppercase {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary);
  margin-bottom: 1rem;
}

/* Custom Row Gap Utilities - Bootstrap pattern for consistent vertical spacing */
.mb-row-gap {
    margin-bottom: var(--row-gap-mobile) !important;
}

@media (min-width: 768px) {
    .mb-row-gap {
        margin-bottom: var(--row-gap-desktop) !important;
    }
}

/* Remove bottom spacing from last child in homepage left column */
.col-lg-8 > :last-child.mb-row-gap {
    margin-bottom: 0 !important;
}

/* Gap utility for flexbox/grid containers */
.gap-row-gap {
    gap: var(--row-gap-mobile) !important;
}

@media (min-width: 768px) {
    .gap-row-gap {
        gap: var(--row-gap-desktop) !important;
    }
}

/* Result count text styling - used in panel footers, but needs to be defined
   here due to Blazor CSS Isolation (e.g. defining it in the AdvancedFiltersPanel
   doesn't work since the child Panel component encapsulates styles). Consider
   refactoring as part of the Panel or finding another approach. */
.result-text {
  line-height: 1.2;
  font-size: 0.9rem;
}

/* ================================================
   Blazor Error UI
   ================================================ */

#blazor-error-ui {
  display: none;
}

/* ================================================
   Footer Dark Mode Overrides
   ================================================ */

[data-theme="dark"] .footer {
  background: linear-gradient(135deg, #1A2332 0%, #0F1923 100%) !important;
  border-top-color: var(--card-border) !important;
}

[data-theme="dark"] .footer .link-secondary {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .footer .link-secondary:hover {
  color: var(--color-primary) !important;
}

[data-theme="dark"] .footer .link-primary {
  color: var(--color-primary) !important;
}

/* ================================================
   Modal Component Theme Variables
   ================================================ */
:root {
    --modal-header-bg: var(--bs-gray-100);
    --modal-header-border: var(--bs-border-color);
    --modal-footer-border: var(--bs-border-color);
}

[data-theme="dark"] {
    --modal-header-bg: rgba(255, 255, 255, 0.03);
    --modal-header-border: var(--bs-gray-800);
    --modal-footer-border: var(--bs-gray-800);
}

/* Bootstrap Modal Dark Mode Support */
[data-theme="dark"] .modal-content {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

[data-theme="dark"] .modal-header {
    background-color: var(--modal-header-bg);
    border-bottom-color: var(--modal-header-border);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--modal-footer-border);
}

[data-theme="dark"] .modal-backdrop {
    background-color: #000;
}

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

/* Modal Header Custom Styling */
.modal-header {
    background-color: var(--modal-header-bg);
    border-bottom: 1px solid var(--modal-header-border);
}

.modal-title {
    font-family: var(--font-family-sport);
    font-weight: 600;
    color: var(--bs-body-color);
}

[data-theme="dark"] .footer .text-muted {
  color: var(--color-text-secondary) !important;
}

/* ================================================
   Sandbox Navigation Styles (Global Required)

   These styles MUST be global because:
   1. Sticky positioning needs to work across component boundaries
   2. Complex selectors (:first-child, ::after) don't work with CSS isolation
   3. Pseudo-elements and attribute selectors require global scope
   ================================================ */

.sticky-breadcrumb {
    position: sticky;
    top: 84px;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.65) 10%,
        rgba(255, 255, 255, 0.75) 50%,
        rgba(255, 255, 255, 0.65) 90%,
        rgba(255, 255, 255, 0) 100%
    );
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
    padding: 1rem 0.25rem 0.75rem 0.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    margin-bottom: 0 !important;
    padding-top: 10px !important;
}

.sticky-breadcrumb + * {
    margin-top: 2rem;
}

.sticky-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background: none;
    padding: 0;
    font-size: 0.9rem;
    font-weight: 500;
    align-items: center;
}

.sticky-breadcrumb .breadcrumb-item {
    color: var(--bs-gray-600);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
}

.sticky-breadcrumb .breadcrumb-item.active {
    color: var(--bs-gray-800);
    font-weight: 600;
}

.sticky-breadcrumb .breadcrumb-item a {
    color: var(--bs-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    margin: -0.25rem -0.5rem;
}

.sticky-breadcrumb .breadcrumb-item a:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    transform: translateY(-1px);
}

.sticky-breadcrumb .breadcrumb-item i {
    margin-right: 0.375rem;
    font-size: 1rem;
    line-height: 1;
    vertical-align: baseline;
    display: inline-flex;
    align-items: center;
}

.sticky-breadcrumb .breadcrumb-item:first-child {
    align-items: center;
}

.sticky-breadcrumb .breadcrumb-item:first-child a {
    display: flex;
    align-items: center;
}

/* Dark mode sandbox navigation styles */
[data-theme="dark"] .sticky-breadcrumb {
    background: linear-gradient(
        90deg,
        rgba(26, 35, 50, 0) 0%,
        rgba(26, 35, 50, 0.65) 10%,
        rgba(26, 35, 50, 0.75) 50%,
        rgba(26, 35, 50, 0.65) 90%,
        rgba(26, 35, 50, 0) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .sticky-breadcrumb .breadcrumb-item {
    color: var(--bs-gray-400);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .sticky-breadcrumb .breadcrumb-item.active {
    color: var(--bs-gray-200);
}

[data-theme="dark"] .sticky-breadcrumb .breadcrumb-item a {
    color: var(--bs-primary);
}

[data-theme="dark"] .sticky-breadcrumb .breadcrumb-item a:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.2);
}

/* ================================================
   Filter Button Styles (NaturalFilterBar)
   ================================================ */
.filter-button {
    background: white;
    color: var(--color-primary);
    font-weight: 600;
    font-size: inherit;
    font-family: inherit;
    transition: all 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: pointer;
    border: 2px solid var(--color-primary);
    padding: 6px 20px;
    border-radius: var(--radius-pill);
    box-shadow: 0 2px 8px rgba(0, 136, 206, 0.1);
    position: relative;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* Optimize for touch interactions */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}

/* Only apply hover effects on non-touch devices */
@media (hover: hover) and (pointer: fine) {
    .filter-button:hover {
        background: var(--color-primary);
        color: white;
        transform: rotate(-2deg) scale(1.05);
        box-shadow: 0 4px 12px rgba(0, 136, 206, 0.25);
        border-color: var(--color-primary);
    }
}

/* Immediate feedback for touch/click */
.filter-button:active {
    transform: scale(0.98);
    transition-duration: 0.05s;
}

.filter-button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Rating button needs special handling for longer text */
.filter-button.rating {
    max-width: 400px;
}

/* When many ratings are selected, use smaller font */
.filter-button.rating.many-selections {
    font-size: 16px;
    padding: 10px 20px;
    min-height: 44px;
}

/* Mobile responsive button styles */
@media (max-width: 768px) {
    .filter-button {
        padding: 5px 14px;
        font-size: 13px;
        border-radius: var(--radius-pill);
    }

    .filter-button.rating.many-selections {
        font-size: 14px;
        padding: 8px 14px;
        min-height: 40px;
    }
}

/* Dark mode filter button styles */
[data-theme="dark"] .filter-button {
    background: var(--dark-surface-1);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    box-shadow: 0 2px 8px var(--primary-opacity-20);
}

/* Dark mode hover effects */
@media (hover: hover) and (pointer: fine) {
    [data-theme="dark"] .filter-button:hover {
        background: var(--color-primary);
        color: #0A1628;
        transform: rotate(-2deg) scale(1.05);
        box-shadow: 0 4px 12px var(--primary-opacity-40);
        border-color: var(--color-primary);
    }
}

/* Dark mode focus state */
[data-theme="dark"] .filter-button:focus-visible {
    box-shadow: 0 0 0 3px var(--primary-opacity-30);
}

/* ================================================
   Custom Dropdown Component Styles
   ================================================ */

/* Dropdown content container - Enhanced snappy animations */
.dropdown-content {
    --dropdown-bg: white;
    --dropdown-border: var(--bs-border-color);
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
    --dropdown-radius: var(--bs-border-radius-lg);
    --item-hover-bg: var(--bs-gray-100);
    --item-selected-bg: rgba(0, 136, 206, 0.08);
    --open-duration: 150ms;
    --close-duration: 200ms;

    position: fixed;
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    box-shadow: var(--dropdown-shadow);
    border-radius: var(--dropdown-radius);
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: scale(0.92) translateY(-8px);
    transition: opacity var(--close-duration) cubic-bezier(0.4, 0, 1, 1),
                transform var(--close-duration) cubic-bezier(0.4, 0, 1, 1),
                box-shadow var(--close-duration) ease;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: 0.5rem 0;
    min-width: 180px;
    box-sizing: border-box;
    will-change: transform, opacity; /* Optimize for animations */
}

/* Dark mode dropdown styling */
[data-theme="dark"] .dropdown-content {
    --dropdown-bg: var(--bs-dark);
    --dropdown-border: var(--bs-gray-700);
    --dropdown-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --item-hover-bg: rgba(255, 255, 255, 0.08);
    --item-selected-bg: rgba(0, 136, 206, 0.2);
}

/* Dark mode item text colors */
[data-theme="dark"] .dropdown-item {
    color: var(--bs-gray-200);
}

[data-theme="dark"] .dropdown-item:hover:not(.disabled) {
    color: var(--bs-white);
}

/* Open state - Snappy and bouncy */
.dropdown-content.open {
    opacity: 1;
    transform: scale(1) translateY(0);
    transition: opacity var(--open-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform var(--open-duration) cubic-bezier(0.175, 0.885, 0.32, 1.275),
                box-shadow var(--open-duration) ease;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Centered dropdown animation */
.dropdown-content.centered {
    transform: translate(-50%, -50%) scale(0.7);
}

.dropdown-content.centered.open {
    transform: translate(-50%, -50%) scale(1);
}

/* Bootstrap-style scrollbar */
.dropdown-content::-webkit-scrollbar {
    width: 8px;
}

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

.dropdown-content::-webkit-scrollbar-thumb {
    background-color: var(--bs-gray-400);
    border-radius: var(--bs-border-radius-sm);
    border: 2px solid transparent;
    background-clip: padding-box;
}

.dropdown-content::-webkit-scrollbar-thumb:hover {
    background-color: var(--bs-gray-500);
}

/* Dropdown items - Enhanced with staggered animations */
.dropdown-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--bs-body-color);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    border-radius: 0;
    margin: 0;
    min-height: 44px;
    box-sizing: border-box;
}

/* Initial state for staggered animation - only for custom dropdown component */
.dropdown-content .dropdown-item {
    opacity: 0;
    transform: translateY(8px);
    animation: none;
}

/* Staggered fade-in animation for dropdown items */
.dropdown-content.open .dropdown-item {
    animation: dropdownItemFadeIn 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.dropdown-content.open .dropdown-item:nth-child(1) { animation-delay: 0ms; }
.dropdown-content.open .dropdown-item:nth-child(2) { animation-delay: 20ms; }
.dropdown-content.open .dropdown-item:nth-child(3) { animation-delay: 40ms; }
.dropdown-content.open .dropdown-item:nth-child(4) { animation-delay: 60ms; }
.dropdown-content.open .dropdown-item:nth-child(5) { animation-delay: 80ms; }
.dropdown-content.open .dropdown-item:nth-child(6) { animation-delay: 100ms; }
.dropdown-content.open .dropdown-item:nth-child(7) { animation-delay: 120ms; }
.dropdown-content.open .dropdown-item:nth-child(8) { animation-delay: 140ms; }
.dropdown-content.open .dropdown-item:nth-child(9) { animation-delay: 160ms; }
.dropdown-content.open .dropdown-item:nth-child(10) { animation-delay: 180ms; }

@keyframes dropdownItemFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dropdown-item:hover:not(.disabled) {
    background-color: var(--item-hover-bg);
    color: var(--bs-body-color);
    transform: scale(1.02); /* Subtle scale for feedback */
}

.dropdown-item:active:not(.disabled) {
    transform: scale(0.98); /* Satisfying press feedback */
    transition-duration: 0.1s;
}

.dropdown-item.selected {
    background-color: var(--item-selected-bg);
    color: var(--color-primary);
    font-weight: 500;
    box-shadow: inset 3px 0 0 var(--color-primary);
    padding-right: 2.5rem;
    animation: selectedBounce 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes selectedBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* Selected item checkmark using Bootstrap icon - Enhanced with entrance animation */
.dropdown-item.selected::after {
    content: '\F26E'; /* Bootstrap Icons check */
    font-family: 'bootstrap-icons';
    position: absolute;
    right: 1rem;
    font-size: 1rem;
    color: var(--color-primary);
    font-weight: bold;
    opacity: 1;
    transform: scale(1);
    animation: checkmarkPop 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.1s both;
}

@keyframes checkmarkPop {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(-120deg);
    }
    50% {
        transform: scale(1.2) rotate(-10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Ensure checkmarks don't cause overflow - already handled in main .dropdown-item.selected rule */

/* Focus state for accessibility */
.dropdown-item:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
    background-color: var(--item-hover-bg);
}

/* ================================================
   Filter Button & Chevron Animations (Global)
   ================================================ */
/* These must be global due to CSS isolation issues */

/* Chevron icon styling with snappy rotations */
.filter-chevron {
    margin-left: 4px;
    font-size: 0.875em;
    opacity: 0.7;
    transition: opacity 0.15s ease,
                transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
}

/* Hover state for chevron */
.filter-button:hover .filter-chevron,
.btn-mobile-hero:hover .filter-chevron {
    opacity: 1;
    transform: scale(1.1); /* Subtle scale on hover */
}

/* ================================================
   Alert Component Styles
   Championship Gold Theme Integration
   ================================================ */
/* Alert type colors must be global due to CSS isolation limitations */

.alert-success {
    background-color: rgba(0, 191, 165, 0.1);
    border-color: rgba(0, 191, 165, 0.3);
    color: var(--color-success);
}

.alert-danger {
    background-color: rgba(255, 107, 107, 0.1);
    border-color: rgba(255, 107, 107, 0.3);
    color: var(--color-error);
}

.alert-warning {
    background-color: rgba(255, 215, 0, 0.15);
    border-color: rgba(255, 215, 0, 0.4);
    color: #996C00;
    /* Championship Gold theme - special handling */
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.alert-info {
    background-color: rgba(0, 136, 206, 0.1);
    border-color: rgba(0, 136, 206, 0.3);
    color: var(--color-info);
}

.alert-primary {
    background-color: rgba(0, 136, 206, 0.1);
    border-color: rgba(0, 136, 206, 0.3);
    color: var(--color-primary);
}

.alert-secondary {
    background-color: rgba(102, 102, 102, 0.1);
    border-color: rgba(102, 102, 102, 0.3);
    color: var(--color-text-secondary);
}

/* Dark mode alert enhancements */
[data-theme="dark"] .alert-success {
    background-color: rgba(0, 191, 165, 0.15);
    border-color: rgba(0, 191, 165, 0.4);
    color: var(--color-success);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 138, 128, 0.15);
    border-color: rgba(255, 138, 128, 0.4);
    color: var(--color-error);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.5);
    color: #FFDA6A;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.3);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(0, 168, 240, 0.15);
    border-color: rgba(0, 168, 240, 0.4);
    color: var(--color-info);
}

[data-theme="dark"] .alert-primary {
    background-color: rgba(0, 168, 240, 0.15);
    border-color: rgba(0, 168, 240, 0.4);
    color: var(--color-primary);
}

[data-theme="dark"] .alert-secondary {
    background-color: rgba(168, 178, 193, 0.15);
    border-color: rgba(168, 178, 193, 0.4);
    color: var(--color-text-secondary);
}

/* Flat style alerts for use within cards - no shadow/reduced padding */
.alert-flat {
    box-shadow: none !important;
    border-radius: var(--radius-small, 4px);
    padding: 0.75rem 1rem;
}

.alert-flat.alert-compact {
    padding: 0.5rem 0.75rem;
}

/* Subtle variant - even less prominent for inline use */
.alert-subtle {
    box-shadow: none !important;
    border-width: 0;
    background-color: rgba(var(--bs-secondary-rgb), 0.1);
}

.alert-subtle.alert-warning {
    background-color: rgba(255, 215, 0, 0.08);
    color: #996C00;
}

[data-theme="dark"] .alert-subtle {
    background-color: rgba(var(--bs-secondary-rgb), 0.15);
}

[data-theme="dark"] .alert-subtle.alert-warning {
    background-color: rgba(255, 193, 7, 0.12);
}

/* Active/pressed state for immediate feedback */
.filter-button:active .filter-chevron,
.btn-mobile-hero:active .filter-chevron {
    transform: scale(0.9);
    transition-duration: 0.05s; /* Even faster for instant feedback */
}

/* Expanded state - smooth rotation */
.filter-button[aria-expanded="true"] .filter-chevron,
.btn-mobile-hero[aria-expanded="true"] .filter-chevron {
    transform: rotate(180deg) scale(1.05);
    opacity: 1;
}

/* Label styling and button press feedback */
.filter-label {
    display: inline-flex;
    align-items: center;
    transition: transform 0.08s ease-out; /* Faster response */
}

.filter-button:active .filter-label,
.btn-mobile-hero:active .filter-label {
    transform: scale(0.98);
    transition-duration: 0.04s; /* Near instant */
}

/* Disabled state overrides */
.filter-button:disabled .filter-chevron,
.btn-mobile-hero:disabled .filter-chevron {
    transform: none !important;
    opacity: 0.4;
}

.dropdown-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Remove the spacing rule that was causing alignment issues */

/* Dropdown divider - Bootstrap style */
.dropdown-divider {
    height: 0;
    margin: var(--bs-dropdown-divider-margin-y) 0;
    overflow: hidden;
    border-top: 1px solid var(--bs-dropdown-divider-bg);
}

/* Toast Container and Positioning */
.toast-container {
    pointer-events: none;
    z-index: 1050;
}

.toast-container .toast {
    pointer-events: auto;
    margin-bottom: 0.75rem;
}

.toast-container .toast:last-child {
    margin-bottom: 0;
}


/* Toast Dark Mode Support */
[data-theme="dark"] .toast {
    --bs-toast-bg: rgba(var(--bs-dark-rgb), 0.95);
    --bs-toast-border-color: rgba(255, 255, 255, 0.1);
    --bs-toast-header-bg: rgba(var(--bs-dark-rgb), 0.95);
    --bs-toast-header-border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .text-bg-success {
    background-color: rgba(25, 135, 84, 0.95) !important;
}

[data-theme="dark"] .text-bg-danger {
    background-color: rgba(220, 53, 69, 0.95) !important;
}

[data-theme="dark"] .text-bg-warning {
    background-color: rgba(255, 193, 7, 0.95) !important;
}

[data-theme="dark"] .text-bg-info {
    background-color: rgba(13, 202, 240, 0.95) !important;
}

/* Tournament Footer Actions - iOS Style */
.tournament-footer-actions {
    width: 100%;
}

.tournament-footer-actions .btn-primary {
    min-height: 3rem !important;
    font-weight: 600;
    font-size: 1rem;
}

.ios-action-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.ios-circle-button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.ios-circle-button:hover {
    background: var(--bs-gray-100);
    transform: scale(1.05);
    text-decoration: none;
    color: inherit;
}

.ios-circle-button:active {
    transform: scale(0.95);
}

.ios-circle-button i {
    font-size: 1.25rem;
    color: var(--bs-body-color);
}

.ios-button-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bs-body-color);
    text-align: center;
    line-height: 1.2;
    opacity: 0.85;
}

/* Smaller calendar icon to account for dropdown arrow */
.calendar-icon-small {
    font-size: 1.125rem !important;
}

/* Close button with distinctive styling */
.ios-close-button {
    width: 46px;
    height: 46px;
    border-radius: 12px; /* Rounded square instead of circle */
    border: 1px solid rgba(var(--bs-primary-rgb), 0.2);
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.1) 0%, rgba(var(--bs-primary-rgb), 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.ios-close-button:hover {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15) 0%, rgba(var(--bs-primary-rgb), 0.08) 100%);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    transform: scale(1.05);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.ios-close-button:active {
    transform: scale(0.95);
}

.ios-close-button i {
    font-size: 1rem;
    color: rgba(var(--bs-primary-rgb), 0.8);
    font-weight: 700;
}

/* Dark mode adjustments for iOS buttons */
[data-bs-theme="dark"] .ios-circle-button {
    background: var(--bs-dark);
    border-color: var(--bs-gray-700);
}

[data-bs-theme="dark"] .ios-circle-button:hover {
    background: var(--bs-gray-800);
}

[data-bs-theme="dark"] .ios-button-label {
    color: var(--bs-gray-300);
}

/* Dark mode for close button */
[data-bs-theme="dark"] .ios-close-button {
    border-color: rgba(var(--bs-primary-rgb), 0.3);
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.15) 0%, rgba(var(--bs-primary-rgb), 0.08) 100%);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .ios-close-button:hover {
    background: linear-gradient(135deg, rgba(var(--bs-primary-rgb), 0.2) 0%, rgba(var(--bs-primary-rgb), 0.12) 100%);
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .ios-close-button i {
    color: rgba(var(--bs-primary-rgb), 0.9);
}

/* Dropdown toggle arrow color fix for iOS buttons */
.ios-circle-button.dropdown-toggle::after {
    color: var(--bs-body-color);
    opacity: 0.8;
}

[data-bs-theme="dark"] .ios-circle-button.dropdown-toggle::after {
    color: var(--bs-gray-300);
}

/* ================================================
   Form Check Dark Mode Fixes
   ================================================ */
/* Override forms.css emphasis color issue in dark mode */
[data-theme="dark"] .form-check-input:checked ~ .form-check-label {
    color: var(--bs-body-color);
}

/* Ensure filter option headers use proper colors in dark mode */
[data-theme="dark"] .filter-option-header {
    color: var(--bs-body-color);
}

[data-theme="dark"] .form-check-label strong {
    color: var(--bs-body-color);
}

/* ================================================
   Inner Page Standardized Styles
   ================================================ */
/* Page header container */
.inner-page-header {
    margin-bottom: 2rem;
    padding-top: 1.5rem; /* Add top spacing from navbar */
}

/* Page title */
.inner-page-header h1 {
    font-size: 1.75rem; /* Reduced from 2rem for better proportion */
    font-weight: 600;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

/* Page description/subtitle */
.inner-page-header p {
    color: var(--bs-secondary-color);
    margin-bottom: 0;
    font-size: 0.95rem;
}

/* For pages without description */
.inner-page-header.no-description h1 {
    margin-bottom: 0;
}

/* Consistent card styling for inner pages */
.inner-page-card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-body-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Loading states */
.inner-page-loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Consistent section spacing */
.inner-page-section {
    margin-bottom: 2rem;
}

/* Tab content specific styling */
.inner-page-tabs .tab-content {
    padding-top: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .inner-page-header {
        padding-top: 1rem;
        margin-bottom: 1.5rem;
    }

    .inner-page-header h1 {
        font-size: 1.5rem;
    }
}



/* DataGrid with horizontal scrolling - no responsive column hiding */
.data-browser-container .fluent-data-grid {
    /* Add margin bottom to prevent footer overlap */
    margin-bottom: 1rem;
    /* Enable horizontal scrolling when content overflows */
    overflow-x: auto;
    /* Ensure scrollbar is always visible on smaller screens */
    scrollbar-width: thin;
}

/* Ensure the DataGrid maintains minimum width to show all columns */
.data-browser-container .fluent-data-grid {
    min-width: 1470px; /* Reduced Surface column width */
}



/* Striped table rows */
.data-browser-container .fluent-data-grid tbody tr:nth-child(even) td {
    background-color: var(--bs-gray-100);
}

.data-browser-container .fluent-data-grid tbody tr:hover td {
    background-color: var(--bs-primary-bg-subtle);
}

/* ================================================
   Onboarding Components - Shared Step Styles
   ================================================ */

/* Common step container layout */
.step-container {
    min-height: 400px;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Standardized step title */
.step-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    text-align: center;
}

/* Standardized step question/subtitle */
.step-question {
    font-size: 1rem;
    color: var(--bs-gray-700);
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Common option buttons grid */
.option-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

/* Mobile responsive adjustments */
@media (max-width: 767px) {
    .step-container {
        padding: 0.75rem;
        min-height: 350px;
    }
    
    .step-title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }
    
    .step-question {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }
    
    .option-buttons {
        gap: 0.5rem;
    }
}

/* ================================================
   Onboarding Components - Junior Badge Support
   ================================================ */

/* Junior badge for AgeStep - needs global scope due to CSS isolation */
.junior-icon {
    position: relative;
}

.junior-badge {
    position: absolute;
    bottom: -4px;
    right: -8px;
    background: var(--bs-warning);
    color: var(--bs-dark);
    font-size: 0.5rem;
    font-weight: 700;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    line-height: 1;
}

.big-option-button.selected .junior-badge {
    background: white;
    color: var(--bs-primary);
}