/* ================================================
   BLAZOR CSS ISOLATION OVERRIDE HACKS
   ================================================

   This file contains CSS that should ideally be scoped to components
   but must be global due to Blazor CSS isolation limitations.

   Each section should be heavily commented explaining:
   1. WHY it needs to be global
   2. WHAT component it affects
   3. WHAT the proper fix would be

   TODO: Work through each hack to find proper solutions:
   - Component refactoring
   - CSS architecture improvements
   - Alternative styling approaches
   ================================================ */

/* ================================================
   Rating Selection Component - Portal Pattern Issues
   ================================================ */
/* 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.

   COMPONENT: RatingSelectionCore
   FIX STRATEGY: Consider moving portal logic or using CSS-in-JS */

.rating-selection-container {
    padding: 0.75rem 1rem 1rem; /* Increased padding for better spacing */
    min-width: 320px; /* Increased from 280px to accommodate wider content */
    box-sizing: border-box;
}

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

.rating-columns {
    display: flex;
    gap: 1rem; /* Increased gap for better column separation */
    margin-bottom: 1rem; /* Increased margin for better spacing before actions */
}

.rating-column {
    flex: 1;
}

.rating-column-header {
    color: var(--rating-title-color);
    font-size: 0.8125rem; /* 13px */
    font-weight: 600;
    margin-bottom: var(--spacing-component-sm); /* 12px - semantic spacing */
    text-align: center;
    text-transform: uppercase;
    letter-spacing: var(--metadata-letter-spacing); /* 0.05em - semantic spacing */
    line-height: var(--metadata-line-height); /* 1.25 */
}

.rating-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.375rem; /* Slightly increased gap for better visual separation */
}

.rating-button {
    background: var(--rating-button-bg);
    border: 1px solid transparent;
    color: var(--rating-button-text);
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-family: var(--bs-font-family-sport), var(--bs-font-sans-serif); /* Oswald for athletic consistency */
    font-size: 0.875rem; /* 14px - readable but clearly smaller than headers */
    font-weight: 500; /* Medium weight - better presence while maintaining hierarchy */
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch-target-min); /* 44px - WCAG AA compliant */
    position: relative;
    width: 100%;
}

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

.rating-button.selected {
    background: 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: var(--rating-button-selected-hover-bg);
    transform: none;
}

.rating-apply-section {
    border-top: 1px solid var(--rating-border-color);
    margin: 1rem -1rem -1rem; /* Updated to match new container padding */
    padding: 0.875rem 1rem; /* Slightly increased padding for better proportion */
    background: var(--rating-footer-bg);
}

.rating-apply-button {
    background: var(--rating-apply-button-bg);
    border: 1px solid var(--rating-apply-button-border);
    color: var(--rating-apply-button-text);
    border-radius: 4px;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

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

.rating-apply-button:active {
    transform: translateY(0);
    box-shadow: none;
}

/* ================================================
   Result Count Text - Panel Footer Isolation Issue
   ================================================ */
/* 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).

   COMPONENT: AdvancedFiltersPanel, other panels
   FIX STRATEGY: Consider refactoring Panel component or using CSS custom properties */
.result-text {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    font-weight: 500;
    text-align: center;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--bs-border-color-translucent);
    background: var(--bs-secondary-bg);
}

[data-theme="dark"] .result-text {
    color: var(--bs-secondary-color);
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.08);
}

/* ================================================
   Sticky Panel Headers - Component Boundary Issues
   ================================================ */
/* 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

   COMPONENT: Panel components with sticky headers
   FIX STRATEGY: Refactor panel architecture or move to CSS-in-JS */

.panel-sticky-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bs-body-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.panel-sticky-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--bs-border-color);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.panel-sticky-header.scrolled::after {
    opacity: 1;
}

/* ================================================
   Filter Button Chevron - CSS Isolation Issues
   ================================================ */
/* These must be global due to CSS isolation issues

   COMPONENT: Filter buttons across multiple components
   FIX STRATEGY: Create reusable filter button component or use CSS custom properties */

.filter-chevron {
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    transform-origin: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-mobile-hero[aria-expanded="true"] .filter-chevron {
    transform: rotate(180deg);
}

.btn-mobile-hero.closing .filter-chevron {
    transition-duration: 0.04s; /* Near instant */
}

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

/* ================================================
   Alert Component - CSS Isolation Color Issues
   ================================================ */
/* Alert type colors must be global due to CSS isolation limitations

   COMPONENT: Alert components
   FIX STRATEGY: Move to CSS custom properties passed through parameters */

.alert-success {
    background-color: rgba(0, 191, 165, 0.1);
    border-color: rgba(0, 191, 165, 0.2);
    color: rgb(0, 133, 119);
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
    color: rgb(217, 119, 6);
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    color: rgb(29, 78, 216);
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: rgb(185, 28, 28);
}

[data-theme="dark"] .alert-success {
    background-color: rgba(0, 191, 165, 0.15);
    border-color: rgba(0, 191, 165, 0.3);
    color: rgb(45, 212, 191);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: rgb(251, 191, 36);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: rgb(96, 165, 250);
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.3);
    color: rgb(248, 113, 113);
}

/* ================================================
   Form Check Dark Mode - CSS Isolation Override
   ================================================ */
/* Override forms.css emphasis color issue in dark mode

   COMPONENT: Form checkboxes and radios
   FIX STRATEGY: Fix root cause in forms.css or component-level styling */
[data-theme="dark"] .form-check-input:checked ~ .form-check-label {
    color: var(--bs-body-color);
}

/* ================================================
   Tournament Panel Title - Typography Override
   ================================================ */
/* Tournament Panel Title - Use base font for tournament name consistency

   COMPONENT: Tournament detail panels
   FIX STRATEGY: Use proper typography classes or component refactoring */
.offcanvas-title.tournament-title {
    font-family: var(--bs-font-family-base), var(--bs-font-sans-serif) !important;
    text-transform: none !important;
    font-size: var(--text-lg); /* Base size: 18px */
    font-weight: 600;
    letter-spacing: normal !important;
}

/* ================================================
   Dropdown Selected Item - Specificity Issues
   ================================================ */
/* Dropdown item selection styling that needs higher specificity

   COMPONENT: Dropdown components
   FIX STRATEGY: Refactor dropdown component architecture */
.dropdown-item.selected {
    background-color: rgba(var(--color-primary-rgb), 0.08);
    /* Color handled by global typography defaults with primary override */
    color: var(--color-primary);
    font-weight: 600;
    padding-right: 2.5rem;
    position: relative;
}

.dropdown-item.selected::after {
    content: "✓";
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 700;
    color: var(--color-primary);
}

.age-step-adult-icon i, .age-step-both-icon i {
    font-size:2rem;
}
/* ================================================
   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);
}


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

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

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

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

/* Removed - Combined with dropdown item rule above */

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

.dropdown-item:active:not(.disabled) {
    transition-duration: 0.1s;
}

.dropdown-item.selected {
    background-color: rgba(var(--color-primary-rgb), 0.08);
    /* Color handled by global typography defaults with primary override */
    color: var(--color-primary);
    font-weight: 600;
    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);
}

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

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

/* ================================================
   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 */
.btn-mobile-hero:hover .filter-chevron {
    opacity: 1;
    transform: scale(1.1); /* Subtle scale on hover */
}

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

/* Expanded state - smooth rotation */
.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 */
}

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

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

/* ================================================
   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: var(--metadata-line-height); /* 1.25 - semantic variable */
  font-size: 0.9rem;
}

/* ================================================
   FluentUI DataGrid - Striped Table Rows - can't be in DataBrowser.razor
   since the table is rendered from FluentUI
   ================================================ */
.data-browser-body .fluent-data-grid tbody tr:nth-child(even) td {
    background-color: var(--color-primary-altbg);
}

.data-browser-body .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: var(--spacing-text-md); /* 12px - semantic spacing */
    text-align: center;
    line-height: var(--heading-line-height); /* 1.15 - semantic variable */
}

/* Standardized step question/subtitle */
.step-question {
    font-size: 1rem;
    color: var(--bs-gray-700);
    margin-bottom: var(--spacing-component-lg); /* 24px - semantic spacing */
    text-align: center;
    line-height: var(--body-line-height); /* 1.5 - semantic variable */
}

/* Similar to .step-question but shows beneath the question on Rating step */
.step-description {
    font-size: 0.875rem;
    color: var(--bs-gray-700);
    margin-bottom: var(--spacing-component-lg); /* 24px - semantic spacing */
    text-align: center;
    line-height: var(--body-line-height); /* 1.5 - semantic variable */
}

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

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

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

/* ================================================
   Rating Picker - global due to CSS isolation
   issues when used inside DropdownContent.
   ================================================ */
/* Source toggle functionality - grouped layout */
.rating-column-header {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the grouped content */
    margin-bottom: 0.75rem;
    gap: 0.5rem; /* Space between title and icon */
}

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

/* Rating system title typography - establish clear hierarchy */
.rating-system-title {
    font-family: var(--bs-font-family-sport), var(--bs-font-sans-serif);
    font-size: 0.8125rem; /* 13px - clearly smaller than main heading for hierarchy */
    font-weight: 500; /* Medium weight - lighter than main heading but stronger than buttons */
    text-transform: uppercase;
    letter-spacing: var(--metadata-letter-spacing); /* 0.05em */
    line-height: var(--subheading-line-height); /* 1.25 */
    color: var(--bs-secondary-color); /* Slightly muted color for secondary hierarchy */
    white-space: nowrap; /* Prevent wrapping for better layout control */
    text-align: center; /* Now this will work with the new flex layout */
}

.source-toggle-btn {
    background: none;
    border: none;
    font-size: 1.125rem; /* Slightly smaller to better integrate with text */
    padding: 0.125rem; /* Reduced padding for tighter grouping */
    border-radius: 0.25rem;
    transition: all 0.2s;
    cursor: pointer;
    color: var(--bs-primary);
    line-height: 1;
    /* Remove absolute positioning - now flows naturally after text */
    transform: translateY(2px); /* Move down slightly to align with text baseline */
}

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

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

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

/* ================================================
   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(--bs-font-family-sport);
    font-weight: 600;
    color: var(--bs-body-color);
}


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