/* ==============================================
   SOIKEOPRO - DESIGN SYSTEM V1.0
   Foundation for consistent UI/UX across all pages
   ============================================== */

:root {
    /* ========================================
       BRAND COLORS
       ======================================== */
    --color-brand-primary: #34d399;      /* Emerald 400 - Main brand */
    --color-brand-hover: #10b981;        /* Emerald 500 - Hover state */
    --color-brand-light: #6ee7b7;        /* Emerald 300 - Light accent */
    --color-brand-dark: #059669;         /* Emerald 600 - Dark accent */

    /* ========================================
       SEMANTIC COLORS
       ======================================== */
    /* Success */
    --color-success: #10b981;
    --color-success-light: #d1fae5;
    --color-success-dark: #065f46;

    /* Warning */
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-warning-dark: #92400e;

    /* Error */
    --color-error: #ef4444;
    --color-error-light: #fee2e2;
    --color-error-dark: #991b1b;

    /* Info */
    --color-info: #3b82f6;
    --color-info-light: #dbeafe;
    --color-info-dark: #1e40af;

    /* ========================================
       NEUTRAL COLORS (Light Mode)
       ======================================== */
    --color-bg-primary: #ffffff;
    --color-bg-secondary: #f8fafc;       /* Slate 50 */
    --color-bg-tertiary: #f1f5f9;        /* Slate 100 */

    --color-text-primary: #0f172a;       /* Slate 900 */
    --color-text-secondary: #475569;     /* Slate 600 */
    --color-text-tertiary: #94a3b8;      /* Slate 400 */

    --color-border-primary: #e2e8f0;     /* Slate 200 */
    --color-border-secondary: #cbd5e1;   /* Slate 300 */

    /* ========================================
       MATCH STATUS COLORS
       ======================================== */
    --color-live: #ef4444;               /* Red 500 - LIVE */
    --color-live-bg: #fef2f2;            /* Red 50 */

    --color-not-started: #64748b;        /* Slate 500 - NS */
    --color-finished: #22c55e;           /* Green 500 - FT */
    --color-halftime: #f59e0b;           /* Amber 500 - HT */

    /* ========================================
       SPACING SCALE
       ======================================== */
    --space-2xs: 0.125rem;  /* 2px */
    --space-xs: 0.25rem;    /* 4px */
    --space-sm: 0.5rem;     /* 8px */
    --space-md: 0.75rem;    /* 12px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* ========================================
       SEMANTIC SPACING (For consistent UX)
       ======================================== */
    /* Section spacing - khoảng cách giữa các section lớn */
    --section-spacing: 0.75rem;             /* 12px - Spacing compact giữa các khối ⭐ */
    
    /* Card spacing - khoảng cách bên trong card */
    --card-padding: var(--space-md);         /* 12px on mobile */
    --card-padding-lg: 1.25rem;              /* 20px on desktop - cân đối hơn ⭐ */
    
    /* Gap spacing - đồng nhất với section spacing */
    --gap-main: 0.75rem;                     /* 12px - Đồng nhất với space-y-3 ⭐ */

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    /* Font Families */
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-full: 9999px;  /* Fully rounded */

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 200ms ease-in-out;
    --transition-slow: 300ms ease-in-out;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ========================================
   DARK MODE COLORS
   ======================================== */
@media (prefers-color-scheme: dark) {
    :root {
        /* Background */
        --color-bg-primary: #0f172a;        /* Slate 900 */
        --color-bg-secondary: #1e293b;      /* Slate 800 */
        --color-bg-tertiary: #334155;       /* Slate 700 */

        /* Text */
        --color-text-primary: #f8fafc;      /* Slate 50 */
        --color-text-secondary: #cbd5e1;    /* Slate 300 */
        --color-text-tertiary: #64748b;     /* Slate 500 */

        /* Border */
        --color-border-primary: #334155;    /* Slate 700 */
        --color-border-secondary: #475569;  /* Slate 600 */

        /* Status backgrounds (darker in dark mode) */
        --color-live-bg: #450a0a;           /* Red 950 */
    }
}

/* Dark mode class override (for manual toggle) */
.dark {
    --color-bg-primary: #0f172a;
    --color-bg-secondary: #1e293b;
    --color-bg-tertiary: #334155;

    --color-text-primary: #f8fafc;
    --color-text-secondary: #cbd5e1;
    --color-text-tertiary: #64748b;

    --color-border-primary: #334155;
    --color-border-secondary: #475569;

    --color-live-bg: #450a0a;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Brand Colors */
.text-brand { color: var(--color-brand-primary); }
.bg-brand { background-color: var(--color-brand-primary); }
.border-brand { border-color: var(--color-brand-primary); }

/* Hover States */
.hover-bg-brand {
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.hover-bg-brand:hover { background-color: var(--color-brand-hover); }

.hover-text-brand {
    transition: color var(--transition-fast), opacity var(--transition-fast);
}
.hover-text-brand:hover { color: var(--color-brand-hover); }

/* Status Colors */
.status-live { color: var(--color-live); }
.status-ns { color: var(--color-not-started); }
.status-ft { color: var(--color-finished); }
.status-ht { color: var(--color-halftime); }

/* Transitions - FIXED: Specific properties only, NO 'all' */
.transition-fast { 
    transition: background-color var(--transition-fast), 
                color var(--transition-fast), 
                border-color var(--transition-fast),
                opacity var(--transition-fast);
}
.transition-base { 
    transition: background-color var(--transition-base), 
                color var(--transition-base), 
                border-color var(--transition-base),
                opacity var(--transition-base);
}
.transition-slow { 
    transition: background-color var(--transition-slow), 
                color var(--transition-slow), 
                border-color var(--transition-slow),
                opacity var(--transition-slow);
}

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ========================================
   SPACING UTILITIES
   ======================================== */

/* Section Spacing - Dùng cho khoảng cách giữa các section/khối lớn */
.section-spacing { 
    margin-bottom: var(--section-spacing); 
}

.section-spacing-y > * + * {
    margin-top: var(--section-spacing);
}

/* Đồng nhất với Tailwind's space-y */
.space-section > * + * {
    margin-top: var(--section-spacing);
}

/* Card Padding - Padding bên trong card */
.card-padding {
    padding: var(--card-padding);
}

@media (min-width: 768px) {
    .card-padding {
        padding: var(--card-padding-lg); /* 20px desktop */
    }
}

/* Element Spacing */
.element-spacing {
    gap: var(--element-spacing);
}

.element-spacing-sm {
    gap: var(--element-spacing-sm);
}

/* ==============================================
   MOBILE RESPONSIVE SPACING
   ============================================== */
@media (max-width: 768px) {
    /* Remove gap from grid on mobile */
    .grid {
        gap: 0 !important;
    }

    /* Add small vertical spacing between grid items */
    .grid > * {
        margin-bottom: 0.5rem;
    }

    /* Space-y containers - reduce spacing */
    .space-y-3,
    .space-y-4 {
        gap: 0.5rem !important;
    }
}
/* ==============================================
   SOIKEOPRO - COMPONENTS V1.0
   Reusable UI components with consistent styling
   ============================================== */

/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-brand-primary);
    color: var(--color-text-primary);
}

.btn-primary:hover {
    background-color: var(--color-brand-hover);
    /* ❌ REMOVED: transform: translateY(-1px); - causes jank */
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background-color: var(--color-border-secondary);
}

.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--text-lg);
}

/* ========================================
   TAB FILTERS - FIXED VERSION
   ======================================== */
.tab-container {
    display: flex;
    align-items: center;
    background-color: var(--color-bg-tertiary);
    border-radius: var(--radius-lg);
    padding: var(--space-xs);
    gap: var(--space-xs);
    /* Always scroll horizontally instead of wrapping */
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar but keep functionality */
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}

/* Webkit scrollbar styling for desktop */
.tab-container::-webkit-scrollbar {
    height: 6px;
}

.tab-container::-webkit-scrollbar-track {
    background: transparent;
}

.tab-container::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.3);
    border-radius: 3px;
}

.tab-container::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.5);
}

.tab-button {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0; /* Prevent tabs from shrinking */
}

.tab-button:hover:not(.active) {
    background-color: rgba(148, 163, 184, 0.1);
    color: var(--color-text-primary);
}

.tab-button.active {
    background-color: var(--color-brand-primary) !important;
    color: #0f172a !important; /* Force dark text on brand background */
}

/* ========================================
   CARDS
   ======================================== */
.card {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    padding: var(--card-padding); /* Sử dụng CSS variable ⭐ */
    box-shadow: var(--shadow-lg);
    /* No margins - let parent container (space-y-4) handle spacing */
}

/* Responsive card padding */
@media (min-width: 768px) {
    .card {
        padding: var(--card-padding-lg); /* 20px desktop */
    }
}

.card-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.card-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

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

/* ========================================
   BADGES
   ======================================== */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-md);
    white-space: nowrap;
}

.badge-live {
    background-color: var(--color-live);
    color: white;
    animation: pulse-live 2s ease-in-out infinite;
}

.badge-finished {
    background-color: var(--color-finished);
    color: white;
}

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

@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* ========================================
   TABLES
   ======================================== */
.table {
    width: 100%;
    text-align: center;
    table-layout: fixed;
}

.table thead {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    background-color: var(--color-bg-tertiary);
    position: relative;
    z-index: var(--z-sticky);
}

.table thead th {
    padding: var(--space-sm);
    font-weight: var(--font-semibold);
}

.table tbody tr {
    border-bottom: 1px solid var(--color-border-primary);
    transition: background-color var(--transition-fast);
}

.table tbody tr:hover {
    background-color: var(--color-bg-secondary);
}

.table tbody td {
    padding: var(--space-sm);
    font-size: var(--text-xs);
}

/* ========================================
   MATCH CARDS (Mobile)
   ======================================== */
.match-card {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-fast);
}

.match-card:hover {
    box-shadow: var(--shadow-md);
    /* ❌ REMOVED: transform: translateY(-2px); - causes jank */
}

.match-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.match-card-teams {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.match-card-team {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.match-card-team-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.match-card-team-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
}

.match-card-score {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    text-align: center;
    margin: var(--space-sm) 0;
}

/* ========================================
   LOADING STATES
   ======================================== */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--color-border-primary);
    border-top-color: var(--color-brand-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary) 25%,
        var(--color-border-primary) 50%,
        var(--color-bg-tertiary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ========================================
   MODALS
   ======================================== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: var(--z-modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
}

.modal {
    background-color: var(--color-bg-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: var(--z-modal);
}

.modal-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-primary);
}

.modal-body {
    padding: var(--space-lg);
}

.modal-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border-primary);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border-left: 4px solid;
    margin-bottom: var(--space-md);
}

.alert-success {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
    color: var(--color-success-dark);
}

.alert-warning {
    background-color: var(--color-warning-light);
    border-color: var(--color-warning);
    color: var(--color-warning-dark);
}

.alert-error {
    background-color: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error-dark);
}

.alert-info {
    background-color: var(--color-info-light);
    border-color: var(--color-info);
    color: var(--color-info-dark);
}

/* ========================================
   TOOLTIPS
   ======================================== */
.tooltip {
    position: relative;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    padding: var(--space-xs) var(--space-sm);
    background-color: var(--color-text-primary);
    color: var(--color-bg-primary);
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast);
    z-index: var(--z-tooltip);
}

.tooltip:hover::after {
    opacity: 1;
}

/* ========================================
   SIDEBAR BANNERS
   ======================================== */
.sidebar-sticky-banner {
    position: relative;
    z-index: 1;
    /* No margins - let parent container (space-y-3) handle spacing */
}

/* Sidebar content */
.sidebar-sticky-banner ~ * {
    position: relative;
    z-index: 10;
    background: var(--color-bg-primary);
}

/* Card components */
.card {
    position: relative;
    z-index: 10;
    background: white;
}

.dark .card {
    background: var(--color-bg-secondary);
}

/* ========================================
   SPACING CONSISTENCY FIX
   Trust Tailwind's space-y-3 to handle ALL vertical spacing
   ======================================== */

/*
   Strategy: Remove ALL custom margins and let space-y-3 work naturally
   space-y-3 adds 0.75rem (12px) margin-top to all children except first
   This ensures consistent spacing across all elements
*/
/* ==============================================
   FILTERS COMPONENTS
   Date pickers, league selectors, search bars
   ============================================== */

/* ========================================
   DATE FILTER BUTTONS
   ======================================== */
.date-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.date-filter-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: var(--radius-lg);
    transition: background-color var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
    border: none;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.date-filter-btn:hover:not(.active) {
    background-color: var(--color-border-secondary);
    /* ❌ REMOVED: transform: translateY(-1px); - causes jank */
}

.date-filter-btn.active {
    background-color: var(--color-brand-primary);
    color: #0f172a;
    box-shadow: var(--shadow-sm);
}

/* ========================================
   LEAGUE SELECTOR
   ======================================== */
.league-selector {
    position: relative;
}

.league-selector-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 200px;
}

.league-selector-trigger:hover {
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-sm);
}

.league-selector-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-xs);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--z-dropdown);
    display: none;
}

.league-selector-dropdown.open {
    display: block;
}

.league-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.league-option:hover {
    background-color: var(--color-bg-secondary);
}

.league-option.selected {
    background-color: var(--color-brand-primary);
    color: #0f172a;
    font-weight: var(--font-semibold);
}

.league-option-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* ========================================
   SEARCH BAR
   ======================================== */
.search-bar {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    padding-left: var(--space-2xl);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1);
}

.search-icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-tertiary);
    pointer-events: none;
}

/* ========================================
   FILTER GROUP (General)
   ======================================== */
.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.filter-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
}

.filter-label i {
    width: 16px;
    height: 16px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 640px) {
    .date-filter-container {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--space-xs);
    }

    .date-filter-btn {
        flex-shrink: 0;
    }

    .league-selector-trigger {
        min-width: unset;
        width: 100%;
    }
}
/* ==============================================
   SOIKEOPRO - TOUCH TARGETS FIX
   Week 2 - Task 6: Mobile UX Improvements
   WCAG 2.1 AA Compliant - Minimum 44x44px touch targets
   ============================================== */

/* ========================================
   WCAG STANDARDS
   ========================================

   Success Criterion 2.5.5 Target Size (Level AAA):
   - Minimum 44x44 CSS pixels
   - Applies to all interactive elements
   - Exception: Inline links in text

   Benefits:
   - Easier tapping on mobile
   - Reduced misclicks
   - Better accessibility
   - Improved user satisfaction
   ======================================== */

/* ========================================
   BUTTON IMPROVEMENTS
   ======================================== */

/* Base button - ensure minimum height */
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 20px; /* Increased from 8px 16px */
}

/* Small buttons - still meet 44px minimum */
.btn-sm {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px; /* Increased from 4px 8px */
}

/* Large buttons - already sufficient */
.btn-lg {
    min-height: 48px;
    padding: 14px 32px; /* Increased from 16px 32px */
}

/* Icon-only buttons */
.btn-icon {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   TAB BUTTONS IMPROVEMENTS
   ======================================== */

.tab-button {
    min-height: 44px;
    padding: 12px 20px; /* Increased from 4px 16px */
    touch-action: manipulation; /* Disable double-tap zoom */
}

/* Filter buttons */
.filter-button,
.league-filter-button {
    min-height: 44px;
    padding: 12px 20px;
    touch-action: manipulation;
}

/* ========================================
   FORM INPUTS IMPROVEMENTS
   ======================================== */

/* Text inputs, selects, textareas */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
select,
textarea {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px; /* Prevents iOS zoom on focus */
    touch-action: manipulation;
}

/* Checkbox and radio - increase clickable area */
input[type="checkbox"],
input[type="radio"] {
    min-width: 24px;
    min-height: 24px;
    cursor: pointer;
}

/* Checkbox/radio labels - increase clickable area */
input[type="checkbox"] + label,
input[type="radio"] + label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    user-select: none;
}

/* ========================================
   LINK IMPROVEMENTS
   ======================================== */

/* Standalone links (not inline in text) */
a.nav-link,
a.menu-link,
a.card-link {
    min-height: 44px;
    padding: 12px 16px;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
}

/* Navigation links */
nav a,
.navigation a,
.menu a {
    min-height: 44px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    touch-action: manipulation;
}

/* ========================================
   MATCH CARDS IMPROVEMENTS
   ======================================== */

/* Match action buttons */
.match-card .favorite-button,
.match-card .predict-button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    touch-action: manipulation;
}

/* League selector items */
.league-item,
.league-option {
    min-height: 44px;
    padding: 12px 16px;
    touch-action: manipulation;
}

/* ========================================
   DROPDOWN & SELECT IMPROVEMENTS
   ======================================== */

/* Dropdown items */
.dropdown-item,
.select-option,
.menu-item {
    min-height: 44px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    touch-action: manipulation;
}

/* Custom select trigger */
.custom-select-trigger {
    min-height: 44px;
    padding: 12px 16px;
    touch-action: manipulation;
}

/* ========================================
   PAGINATION IMPROVEMENTS
   ======================================== */

.pagination a,
.pagination button,
.pagination span {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* ========================================
   ICON BUTTONS IMPROVEMENTS
   ======================================== */

/* Close buttons */
.close-button,
.dismiss-button,
[aria-label*="close"],
[aria-label*="Close"] {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* Favorite/heart buttons */
.favorite-icon,
.heart-button,
.bookmark-button {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

/* ========================================
   MODAL & DIALOG IMPROVEMENTS
   ======================================== */

.modal-button,
.dialog-button {
    min-height: 44px;
    padding: 12px 20px;
    touch-action: manipulation;
}

/* ========================================
   ACCORDION & COLLAPSIBLE IMPROVEMENTS
   ======================================== */

.accordion-trigger,
.collapsible-header {
    min-height: 44px;
    padding: 12px 16px;
    touch-action: manipulation;
}

/* ========================================
   BREADCRUMB IMPROVEMENTS
   ======================================== */

.breadcrumb-item a,
.breadcrumb-link {
    min-height: 44px;
    padding: 10px 12px;
    display: inline-flex;
    align-items: center;
    touch-action: manipulation;
}

/* ========================================
   SEARCH BAR IMPROVEMENTS
   ======================================== */

.search-input {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 16px; /* Prevents iOS zoom */
    touch-action: manipulation;
}

.search-button,
.search-submit {
    min-height: 44px;
    min-width: 44px;
    padding: 10px;
    touch-action: manipulation;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Force 44px minimum on any element */
.touch-target {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
}

/* Large touch target (48px) */
.touch-target-lg {
    min-height: 48px;
    min-width: 48px;
    touch-action: manipulation;
}

/* Extra large touch target (56px) */
.touch-target-xl {
    min-height: 56px;
    min-width: 56px;
    touch-action: manipulation;
}

/* Clickable area padding (for small visual elements) */
.clickable-padding {
    padding: 10px;
    margin: -10px;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

/* On desktop, can use slightly smaller targets */
@media (min-width: 1024px) {
    .btn-sm {
        min-height: 36px;
        padding: 8px 14px;
    }

    .tab-button {
        min-height: 36px;
        padding: 8px 16px;
    }
}

/* On mobile, ensure even better spacing */
@media (max-width: 640px) {
    /* Increase spacing between interactive elements */
    .btn + .btn,
    .tab-button + .tab-button,
    a + a {
        margin-left: 8px;
    }

    /* Ensure form inputs are thumb-friendly */
    input,
    select,
    textarea,
    button {
        font-size: 16px !important; /* Prevent zoom on iOS */
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Remove default focus outline only if :focus-visible is supported */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
    outline: none;
}

/* Active state feedback for touch - DISABLED to prevent menu jank
   Using opacity instead of transform for smoother experience */
button:active,
a:active,
.btn:active,
.tab-button:active {
    /* ❌ REMOVED: transform: scale(0.97); - causes jank and layout shift */
    /* ✅ Use opacity for feedback instead */
    opacity: 0.85;
    transition: opacity 0.1s ease;
}

/* EXCEPTION: Navigation elements should not have active feedback at all */
.nav-link:active,
.desktop-nav a:active,
.mobile-menu-item:active,
header nav a:active,
nav.main-navigation a:active,
[class*="menu"] a:active,
[class*="nav"] a:active {
    opacity: 1 !important;
    transform: translateZ(0) !important;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Disable system font scaling override on mobile */
@media (max-width: 640px) {
    button,
    a,
    input,
    select {
        text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
    }
}

/* Optimize touch response */
button,
a,
.btn,
.tab-button {
    -webkit-tap-highlight-color: rgba(52, 211, 153, 0.2);
    tap-highlight-color: rgba(52, 211, 153, 0.2);
}

/* ========================================
   DARK MODE ADJUSTMENTS
   ======================================== */

.dark button:focus-visible,
.dark a:focus-visible,
.dark input:focus-visible {
    outline-color: var(--color-brand-light);
}

.dark button,
.dark a,
.dark .btn,
.dark .tab-button {
    -webkit-tap-highlight-color: rgba(110, 231, 183, 0.2);
    tap-highlight-color: rgba(110, 231, 183, 0.2);
}

/* ========================================
   NOTES FOR DEVELOPERS
   ======================================== */

/*
IMPLEMENTATION CHECKLIST:
✅ 1. All buttons have min 44x44px
✅ 2. All form inputs have min 44px height
✅ 3. All navigation links have min 44px height
✅ 4. Icon-only buttons are 44x44px
✅ 5. touch-action: manipulation prevents double-tap zoom
✅ 6. font-size: 16px prevents iOS zoom on input focus
✅ 7. Focus states for accessibility
✅ 8. Active states for touch feedback
✅ 9. Responsive adjustments for desktop
✅ 10. Dark mode support

TESTING:
- Test on real mobile devices (iOS & Android)
- Use Chrome DevTools mobile emulator
- Test with different screen sizes
- Test with thick fingers simulation
- Verify WCAG 2.1 compliance

WCAG COMPLIANCE:
✅ 2.5.5 Target Size (Level AAA) - 44x44px minimum
✅ 2.5.8 Target Size (Level AA) - 24x24px minimum (Enhanced)
✅ 2.1.1 Keyboard (Level A) - Focus visible
✅ 2.4.7 Focus Visible (Level AA) - Clear focus states

BROWSER SUPPORT:
✅ iOS Safari 12+
✅ Chrome Mobile 80+
✅ Firefox Mobile 85+
✅ Samsung Internet 12+
*/
/* ==============================================
   SOIKEOPRO - MOBILE HAMBURGER MENU
   Week 2 - Task 7: Mobile Navigation
   Responsive hamburger menu for mobile devices
   ============================================== */

/* ========================================
   HAMBURGER BUTTON
   ======================================== */

.mobile-menu-button {
    display: none; /* Hidden on desktop */
    position: relative;
    z-index: 1250; /* Above navigation and overlay */
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    touch-action: manipulation;
}

/* Hamburger icon lines */
.hamburger-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 24px;
    height: 18px;
}

.hamburger-line {
    width: 100%;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

/* Animated hamburger -> X transformation */
.mobile-menu-button.active .hamburger-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.mobile-menu-button.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.mobile-menu-button.active .hamburger-line:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* ========================================
   MOBILE MENU OVERLAY
   ======================================== */

.mobile-menu-overlay {
    display: none; /* Hidden on desktop */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 1210; /* Above navigation (1200) */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ========================================
   MOBILE MENU CONTAINER
   ======================================== */

.mobile-menu {
    display: none; /* Hidden on desktop */
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    background-color: var(--color-bg-primary);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    z-index: 1240; /* Above overlay (1210), below button (1250) */
    overflow-y: auto;
    transition: transform 0.3s ease;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%) !important;
    will-change: transform;
}

.mobile-menu.active {
    transform: translateX(0) !important;
}

/* Dark mode adjustments */
.dark .mobile-menu {
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.4);
}

/* ========================================
   MOBILE MENU HEADER
   ======================================== */

.mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border-primary);
    position: relative;
    background-color: var(--color-bg-primary);
    z-index: 10;
}

.mobile-menu-logo {
    /* Logo image styling - replaced text with image */
    max-height: 40px;
    height: auto;
    width: auto;
    object-fit: contain;
}

.mobile-menu-close {
    width: 44px;
    height: 44px;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
}

.mobile-menu-close:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.mobile-menu-close:active {
    /* ❌ REMOVED: transform: scale(0.95); - causes jank */
    opacity: 0.8;
}

/* ========================================
   MOBILE MENU CONTENT
   ======================================== */

.mobile-menu-content {
    padding: var(--space-lg);
}

/* User info section (if logged in) */
.mobile-menu-user {
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
    background: linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
    border-radius: var(--radius-lg);
    color: var(--color-text-primary);
}

.mobile-menu-user-name {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-xs);
}

.mobile-menu-user-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.mobile-menu-user-button {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

.mobile-menu-user-button:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Menu sections */
.mobile-menu-section {
    margin-bottom: var(--space-2xl);
}

.mobile-menu-section-title {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-sm);
    padding: 0 var(--space-sm);
}

/* Menu items */
.mobile-menu-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.mobile-menu-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    min-height: 44px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-medium);
    transition: background-color 0.15s ease, color 0.15s ease;
    touch-action: manipulation;
}

.mobile-menu-item:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-brand-primary);
}

.mobile-menu-item:active {
    /* ❌ REMOVED: transform: scale(0.98); - causes jank */
    opacity: 0.8;
}

/* Active menu item */
.mobile-menu-item.active {
    background-color: var(--color-bg-secondary);
    color: var(--color-brand-primary);
    font-weight: var(--font-semibold);
}

.mobile-menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background-color: var(--color-brand-primary);
    border-radius: 0 2px 2px 0;
}

/* Menu item icon */
.mobile-menu-item-icon {
    flex-shrink: 0;
    color: var(--color-text-secondary);
}

.mobile-menu-item:hover .mobile-menu-item-icon,
.mobile-menu-item.active .mobile-menu-item-icon {
    color: var(--color-brand-primary);
}

/* Menu item badge (for notifications, new, etc.) */
.mobile-menu-item-badge {
    margin-left: auto;
    padding: 2px 8px;
    background-color: var(--color-error);
    color: white;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    border-radius: var(--radius-full);
}

/* ========================================
   MOBILE MENU FOOTER
   ======================================== */

.mobile-menu-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border-primary);
    background-color: var(--color-bg-secondary);
}

.mobile-menu-footer-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.mobile-menu-footer-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
}

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

/* Social links */
.mobile-menu-social {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-primary);
}

.mobile-menu-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    border-radius: var(--radius-md);
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.mobile-menu-social-link:hover {
    background-color: var(--color-brand-primary);
    color: var(--color-text-primary);
    /* ❌ REMOVED: transform: translateY(-2px); - causes jank */
}

/* ========================================
   DESKTOP NAVIGATION (HIDE HAMBURGER)
   ======================================== */

/* Desktop navigation links - prevent text wrapping */
.desktop-nav {
    position: relative; /* For absolute pseudo-element */
    overflow-x: auto; /* Allow horizontal scroll if needed */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; /* Firefox - thin scrollbar */
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Firefox - thumb and track color */
    padding-bottom: 4px; /* Space for scrollbar */

    /* Performance optimization */
    contain: layout style;
}

/* Hide scrollbar by default, show on hover */
.desktop-nav::-webkit-scrollbar {
    height: 4px; /* Thin scrollbar */
}

.desktop-nav::-webkit-scrollbar-track {
    background: transparent;
}

.desktop-nav::-webkit-scrollbar-thumb {
    background: transparent; /* Hidden by default */
    border-radius: 2px;
    transition: background 0.3s ease;
}

/* Show scrollbar when hovering over the nav */
.desktop-nav:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3); /* White with 30% opacity */
}

.desktop-nav:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5); /* Brighter on direct hover */
}

/* Fade in effect for Firefox */
.desktop-nav:hover {
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.desktop-nav a {
    white-space: nowrap;
    flex-shrink: 0; /* Prevent shrinking */
    font-size: 0.9375rem !important; /* 15px - readable size */
    padding: 0.5rem 0; /* Vertical padding for better click area */

    /* CRITICAL: No transform on hover - handled by nav-optimized.css */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Slightly larger on very wide screens */
@media (min-width: 1536px) {
    .desktop-nav a {
        font-size: 1rem !important; /* 16px for 2xl screens */
    }
}

/* Gradient fade effect at the end to indicate more content */
.desktop-nav::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 4px; /* Above scrollbar */
    width: 60px;
    background: linear-gradient(to left, #34d399 0%, rgba(52, 211, 153, 0) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Dark mode gradient */
.dark .desktop-nav::after {
    background: linear-gradient(to left, #172554 0%, rgba(23, 37, 84, 0) 100%);
}

/* Show fade effect when nav is scrollable and not at the end */
.desktop-nav.has-overflow::after {
    opacity: 1;
}

/* Hide fade when scrolled to the end */
.desktop-nav.scrolled-to-end::after {
    opacity: 0;
}

/* Show hamburger button only on mobile */
@media (max-width: 1023px) {
    .mobile-menu-button {
        display: block;
    }

    .mobile-menu,
    .mobile-menu-overlay {
        display: block;
        visibility: hidden;
    }

    .mobile-menu.active,
    .mobile-menu-overlay.active {
        visibility: visible;
    }

    /* Hide desktop navigation */
    .desktop-nav {
        display: none !important;
    }
}

/* Hide hamburger on desktop */
@media (min-width: 1024px) {
    .mobile-menu-button,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ========================================
   BODY SCROLL LOCK (when menu open)
   ======================================== */

body.mobile-menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes slideInRight {
    from {
        right: -100%;
    }
    to {
        right: 0;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Focus states for keyboard navigation */
.mobile-menu-button:focus-visible,
.mobile-menu-close:focus-visible,
.mobile-menu-item:focus-visible,
.mobile-menu-user-button:focus-visible {
    outline: 3px solid var(--color-brand-primary);
    outline-offset: 2px;
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* GPU acceleration for smooth animations */
.mobile-menu,
.mobile-menu-overlay,
.hamburger-line {
    will-change: transform, opacity;
}

/* Prevent layout shift */
.mobile-menu-button,
.mobile-menu-item {
    -webkit-tap-highlight-color: rgba(52, 211, 153, 0.2);
}

/* ========================================
   DARK MODE
   ======================================== */

.dark .mobile-menu-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.dark .mobile-menu-item:hover {
    background-color: rgba(52, 211, 153, 0.1);
}

.dark .mobile-menu-footer {
    background-color: rgba(0, 0, 0, 0.2);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Extra small mobile (< 375px) */
@media (max-width: 374px) {
    .mobile-menu {
        width: 90%;
        max-width: none;
    }

    .mobile-menu-header,
    .mobile-menu-content {
        padding: var(--space-md);
    }
}

/* Large mobile (> 640px but < 1024px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .mobile-menu {
        max-width: 360px;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .mobile-menu-button,
    .mobile-menu,
    .mobile-menu-overlay {
        display: none !important;
    }
}
/* ==============================================
   SOIKEOPRO - MAIN STYLESHEET
   Optimized for performance and maintainability
   ============================================== */

/* ==============================================
   CRITICAL: MOBILE VIEWPORT CONSTRAINTS
   Must be at the top to override everything
   ============================================== */

/* CRITICAL: Force viewport constraints on ALL elements */
html {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    /* Always show vertical scrollbar to prevent horizontal shift */
    overflow-y: scroll;
}

body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
}

/* Force ALL elements to respect viewport on mobile */
@media (max-width: 768px) {
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Critical: Override any min-width that could cause overflow */
    *[style*="min-width"] {
        min-width: auto !important;
    }
    
    /* Force containers to respect viewport */
    .container, .mx-auto, div, section, main, header, nav, footer {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* EXCEPTION: Only allow dropdown parent containers to overflow */
    .dropdown-container,
    .user-menu {
        overflow: visible !important;
    }
}

/* ==============================================
   FIX: Prevent horizontal layout shift
   ============================================== */

/* Always show vertical scrollbar to prevent horizontal shift */
html {
    overflow-y: scroll;
}

/* CRITICAL FIX: Hide horizontal scrollbar from overflow-x containers
   This prevents the "flash" of scrollbar during page load that causes horizontal shift */
.overflow-x-auto {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.overflow-x-auto::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* Also apply to common scrollable containers */
.tab-container,
.hide-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.tab-container::-webkit-scrollbar,
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* --- CORE VARIABLES --- */
:root {
    --brand-color: #34d399;
    --brand-hover: #10b981;
    --dark-bg: #0f172a;
    --dark-card: #1e293b;
    --transition-speed: 0.2s;
}

/* --- BRAND UTILITIES --- */
.text-brand { color: var(--brand-color); }
.border-brand { border-color: var(--brand-color); }
.bg-brand { background-color: var(--brand-color); }
.hover-bg-brand:hover { background-color: var(--brand-hover); }

/* --- SMOOTH SCROLLING --- */
/* ❌ DISABLED: Causes shake on navigation click */
/* html {
    scroll-behavior: smooth;
} */

/* ✅ Only enable for scroll-to-top button and specific use cases */
html.enable-smooth-scroll {
    scroll-behavior: smooth;
}

/* --- BODY TRANSITIONS --- */
body {
    transition: opacity 0.15s ease-in-out;
}

/* --- NPROGRESS CUSTOMIZATION --- */
#nprogress .bar {
    background: var(--brand-color) !important;
    height: 3px !important;
}

#nprogress .peg {
    box-shadow: 0 0 10px var(--brand-color), 0 0 5px var(--brand-color) !important;
}

#nprogress .spinner-icon {
    border-top-color: var(--brand-color) !important;
    border-left-color: var(--brand-color) !important;
}

/* --- TABLE UTILITIES --- */
.table-fixed {
    table-layout: fixed;
}

/* --- TAB FILTERS FIX --- */
.tab-button {
    /* ❌ REMOVED: transition: all 0.2s ease; - causes transform animations */
    /* ✅ Only transition specific properties */
    transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.tab-button:not(.active) {
    background-color: transparent !important;
    color: #64748b !important; /* slate-500 */
}

.tab-button:not(.active):hover {
    background-color: rgba(148, 163, 184, 0.1) !important;
}

.tab-button.active {
    background-color: var(--brand-color) !important;
    color: #0f172a !important; /* slate-900 */
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    .tab-button:not(.active) {
        color: #cbd5e1 !important; /* slate-300 */
    }

    .tab-button.active {
        color: #0f172a !important;
    }
}

/* --- ACTIVE STATES --- */
.tab-button.active,
.standings-view-button.active {
    background-color: var(--brand-color);
    color: #1e293b;
}

.tab-button,
.standings-view-button,
.time-tab-button,
.league-tab-button {
    transition: all var(--transition-speed) ease-in-out;
}

.time-tab-button.active,
.league-tab-button.active {
    border-color: var(--brand-color);
    color: var(--brand-color);
    font-weight: 600;
}

/* --- CUSTOM SCROLLBAR --- */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(203 213 225) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgb(203 213 225);
    border-radius: 20px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgb(148 163 184);
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
    .scrollbar-thin {
        scrollbar-color: rgb(71 85 105) transparent;
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgb(71 85 105);
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
        background-color: rgb(100 116 139);
    }
}

/* Hide scrollbar completely */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* --- HTMX LOADING STATES --- */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: flex;
}

.htmx-request.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

/* --- SMOOTH TRANSITIONS --- */
.transition-opacity {
    transition-property: opacity;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- TABLE HEADER --- */
.sticky {
    position: relative;
}

/* --- SCORE SELECTION --- */
.score-option {
    transition: all var(--transition-speed) ease-in-out;
    cursor: pointer;
}

.score-option:hover {
    /* ❌ REMOVED: transform: translateY(-2px); - causes jank */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.score-option.selected {
    background-color: var(--brand-color) !important;
    color: #1f2937 !important;
    font-weight: 700;
    /* ❌ REMOVED: transform: scale(1.05); - causes jank */
    box-shadow: 0 0 0 2px var(--brand-hover);
}

/* --- FAVORITE STAR --- */
.favorite-star {
    transition: all var(--transition-speed) ease-in-out;
}

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

.favorite-star.favorited {
    fill: #facc15;
    color: #facc15;
    animation: starPulse 0.3s ease-in-out;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

/* --- MODAL ANIMATIONS --- */
#prediction-modal {
    animation: fadeIn 0.2s ease-in-out;
}

#modal-content {
    animation: slideUp 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* --- CONTENT FADE IN --- */
.fade-in {
    animation: contentFadeIn 0.5s ease-in;
}

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

/* --- ALERT STYLES --- */
.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border-width: 1px;
    font-weight: 500;
}

.alert-success {
    background-color: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

.alert-error {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #991b1b;
}

.alert-info {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1e40af;
}

/* --- FOCUS STATES --- */
button:focus-visible,
a:focus-visible,
input:focus-visible {
    outline: 2px solid var(--brand-color);
    outline-offset: 2px;
}

/* ============================================
   HTMX BOOST - SMOOTH PAGE TRANSITIONS
   ============================================ */

/* Keep navigation sticky during transitions */
nav[class*="sticky"] {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Smooth page transition */
body.htmx-swapping {
    opacity: 0.9;
    transition: opacity 0.1s ease-in-out;
}

/* Loading indicator */
#page-loading-indicator {
    display: none;
}

#page-loading-indicator.htmx-request {
    display: block;
    animation: pageLoadFadeIn 0.2s ease-in;
}

@keyframes pageLoadFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Prevent layout shift */
html {
    scroll-padding-top: 64px;
}

/* NProgress positioning */
#nprogress .bar {
    position: fixed !important;
    z-index: 99999 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* HTMX indicators */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: block;
}
/* ==============================================
   FAVORITE STAR ANIMATION
   ============================================== */
.favorite-star {
    transition: fill 0.2s ease-in-out, color 0.2s ease-in-out;
}

.favorite-star.favorited {
    fill: #facc15;
    color: #facc15;
    /* ❌ REMOVED: transform: scale(1.1); - causes jank */
}

.favorite-star:hover {
    /* ❌ REMOVED: transform: scale(1.2); - causes jank */
    opacity: 0.8;
}

/* ==============================================
   TAB BUTTONS
   ============================================== */
.tab-button {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.tab-button.active {
    background-color: #34d399;
    color: #1f2937;
}

.tab-button:hover:not(.active) {
    background-color: rgba(52, 211, 153, 0.1);
}

/* ==============================================
   STANDINGS VIEW BUTTONS
   ============================================== */
.standings-view-button {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.standings-view-button.active {
    background-color: #34d399;
    color: #1f2937;
}

/* ==============================================
   MATCH ROW TRANSITIONS
   ============================================== */
.match-row {
    transition: background-color 0.15s ease-in-out;
}

/* ==============================================
   EXPAND/COLLAPSE BUTTON ANIMATIONS
   ============================================== */
#expand-matches-btn,
#collapse-matches-btn {
    transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

#expand-matches-btn:hover,
#collapse-matches-btn:hover {
    /* ❌ REMOVED: transform: translateY(-2px); - causes jank */
    box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3);
}

/* ==============================================
   PULSE ANIMATION FOR LIVE MATCHES
   ============================================== */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ==============================================
   LOADING STATE
   ============================================== */
.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-indicator {
    display: none;
}

/* ==============================================
   RESPONSIVE IMPROVEMENTS
   ============================================== */
@media (max-width: 768px) {
    .match-row td {
        padding: 0.5rem 0.25rem;
    }
    
    .tab-button {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}
/* League Filter Buttons */
.league-filter-btn {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.league-filter-btn:hover {
    /* ❌ REMOVED: transform: translateY(-1px); - causes jank */
    opacity: 0.9;
}

/* Prevent HTMX from showing page reload */
.htmx-swapping {
    opacity: 0;
    transition: opacity 200ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 200ms ease-in;
}
/* ==============================================
   VIEW MODE TOGGLE BUTTONS
   ============================================== */
.view-mode-btn {
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.view-mode-btn:hover {
    /* ❌ REMOVED: transform: translateY(-1px); - causes jank */
    opacity: 0.9;
}

.view-mode-btn.active {
    background-color: #34d399 !important;
    color: #1f2937 !important;
}

/* ==============================================
   LEAGUE TAB BUTTONS
   ============================================== */
.league-tab-btn {
    transition: border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.league-tab-btn.active {
    border-color: #34d399 !important;
    color: #34d399 !important;
}

/* ==============================================
   FAVORITE STAR (Duplicate - Already defined above)
   ============================================== */
/* REMOVED DUPLICATE CODE */

/* ==============================================
   TAB BUTTONS (Duplicate - Already defined above)
   ============================================== */
/* REMOVED DUPLICATE CODE */

/* ==============================================
   HTMX TRANSITIONS
   ============================================== */
.htmx-swapping {
    opacity: 0.5;
    transition: opacity 100ms ease-out;
}

.htmx-settling {
    opacity: 1;
    transition: opacity 100ms ease-in;
}

/* ==============================================
   MATCH ROW HOVER
   ============================================== */
.match-row {
    transition: background-color 0.15s ease-in-out;
}

/* ==============================================
   RESPONSIVE
   ============================================== */
@media (max-width: 768px) {
    .view-mode-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
    
    .league-tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }
}
/* ==============================================
   GOAL NOTIFICATION ANIMATION
   ============================================== */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ==============================================
   PULSE ANIMATION cho live matches
   ============================================== */
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ==============================================
   ⚽ GOAL FLASH ANIMATION - Hiệu ứng bàn thắng
   ============================================== */

/* Flash ô tỷ số */
.goal-flash {
    animation: goalFlash 0.5s ease-in-out 6;
    /* 6 lần flash = 3 giây */
}

@keyframes goalFlash {
    0%, 100% {
        background-color: transparent;
        transform: scale(1);
    }
    50% {
        background-color: #fbbf24; /* Vàng óng */
        transform: scale(1.2);
        box-shadow: 0 0 20px rgba(251, 191, 36, 0.8);
    }
}

/* Highlight cả hàng */
.goal-highlight {
    background-color: rgba(251, 191, 36, 0.1) !important;
    animation: rowGlow 3s ease-out;
}

@keyframes rowGlow {
    0% {
        box-shadow: 0 0 0 rgba(251, 191, 36, 0);
    }
    50% {
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.5);
    }
    100% {
        box-shadow: 0 0 0 rgba(251, 191, 36, 0);
    }
}

/* Bóng đá bay */
.goal-ball {
    position: absolute;
    top: -10px;
    left: 50%;
    font-size: 24px;
    animation: ballFly 2s ease-out forwards;
    pointer-events: none;
    z-index: 1000;
}

@keyframes ballFly {
    0% {
        transform: translate(-50%, 0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -100px) rotate(720deg);
        opacity: 0;
    }
}

/* --- TOOLTIP FOR "ĐÃ ĐOÁN" BUTTON --- */
.group:hover .tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* --- SIDEBAR BANNERS OPTIMIZATION --- */
/* Ensure sidebar banners don't overflow viewport */
aside .sticky {
    max-height: calc(100vh - 1rem);
    overflow: hidden;
    position: relative !important;
    z-index: 40;
}

/* Compact banner spacing for sidebar - 120x230px */
aside .sticky img {
    display: block;
    width: 120px;
    height: 230px;
    object-fit: cover;
    object-position: center;
}

/* Tighter spacing between sidebar banners */
aside .sticky a + a {
    margin-top: 6px; /* space-y-1.5 = 6px */
}

/* Event Banner Slider - Full width responsive */
.banner-item {
    transition: opacity 0.2s ease;
}

.banner-item:hover {
    opacity: 0.95;
}

/* Event slider banners - responsive */
.banner-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- BLOG/NEWS CONTENT TYPOGRAPHY --- */
/* Enhanced typography for blog posts and news articles */
.post-content {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

.post-content h1 { font-size: 2.25rem; }
.post-content h2 { font-size: 1.875rem; }
.post-content h3 { font-size: 1.5rem; }
.post-content h4 { font-size: 1.25rem; }

.post-content p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.post-content a {
    color: var(--brand-color);
    text-decoration: underline;
    transition: opacity 0.2s ease;
}

.post-content a:hover {
    opacity: 0.8;
}

.post-content ul,
.post-content ol {
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.post-content li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

.post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

.post-content blockquote {
    border-left: 4px solid var(--brand-color);
    padding-left: 1.5rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

.post-content code {
    background-color: var(--color-bg-secondary);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-family: 'Monaco', 'Courier New', monospace;
    font-size: 0.875rem;
}

.post-content pre {
    background-color: var(--color-bg-secondary);
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 1.5rem 0;
}

.post-content pre code {
    background-color: transparent;
    padding: 0;
}

.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
}

.post-content th,
.post-content td {
    padding: 0.75rem;
    border: 1px solid var(--color-border-primary);
    text-align: left;
}

.post-content th {
    background-color: var(--color-bg-secondary);
    font-weight: 600;
}

/* Line clamp utilities */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hover effects for cards */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* ==============================================
   MOBILE UI FIXES - Week 2024-11  
   TARGETED: Fix specific overflow sources without breaking layout
   ============================================== */

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
    /* Core viewport constraints */
    body, html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative;
    }
    
    /* CRITICAL: Fix odds tables that cause horizontal overflow */
    .odds-table-container {
        max-width: calc(100vw - 16px) !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .odds-table-container .odds-table-header,
    .odds-table-container .odds-table-row {
        min-width: auto !important;
        max-width: 100% !important;
        grid-template-columns: 40px 110px repeat(3, 1fr) !important;
    }
    
    /* Fix tab containers with horizontal scroll */
    .tab-container {
        max-width: calc(100vw - 32px) !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }
    
    .tab-container::-webkit-scrollbar {
        display: none !important;
    }
    
    /* Container width constraints - not all elements */
    .container, .mx-auto {
        max-width: calc(100vw - 16px) !important;
        box-sizing: border-box !important;
    }
    
    /* CRITICAL: Mobile banner container constraints */
    .banner-mobile-container {
        max-width: calc(100vw - 32px) !important;
        width: 100% !important;
        overflow: hidden !important;
    }
    
    .banner-mobile-container img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* Fix banner width on mobile - legacy support */
    .banner-container {
        max-width: calc(100vw - 32px) !important;
        overflow: hidden !important;
        width: 100% !important;
    }
    
    .banner-container img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* Fix table overflow */
    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: calc(100vw - 16px) !important;
    }
    
    /* Prevent text from causing horizontal scroll */
    .match-card .team-name {
        word-break: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
    
    /* CRITICAL: Fix grid layouts on mobile that cause overflow */
    .grid-cols-5, .grid-cols-3, .grid-cols-4, .grid {
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .grid-cols-5 > *, .grid-cols-3 > *, .grid-cols-4 > *, .grid > * {
        min-width: 0 !important;
        word-wrap: break-word;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Force any flex containers to respect viewport */
    .flex {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* EXCEPTION: Only dropdown parent containers can overflow */
    .dropdown-container,
    .user-menu {
        overflow: visible !important;
    }

    /* Fix main container */
    .mx-auto {
        max-width: calc(100vw - 32px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* CRITICAL: Fix header and nav that can overflow */
    header, nav {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }
    
    /* Fix any element with explicit width */
    [style*="width:"] {
        max-width: 100% !important;
    }
}

/* Desktop banner tightening */
@media (min-width: 1024px) {
    /* Make desktop banner more compact */
    .desktop-banner-container {
        margin-left: auto;
        display: flex;
        align-items: center;
        max-width: 468px;
        overflow: hidden;
    }
    
    .desktop-banner-container .banner-container {
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        max-width: 100%;
    }
    
    .desktop-banner-container img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
    }
    
    /* Ensure mobile banner is hidden on desktop */
    .lg\\:hidden {
        display: none !important;
    }
}

/* Mobile banner and logo improvements */
@media (max-width: 1023px) {
    /* Ensure desktop banner is hidden on mobile */
    .hidden.lg\\:block {
        display: none !important;
    }
    
    /* Mobile banner styling - prevent overflow */
    .mobile-banner-section {
        background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
        border-top: 1px solid #e2e8f0;
        padding: 12px 16px;
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }
    
    .dark .mobile-banner-section {
        background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
        border-color: #475569;
    }
    
    .banner-mobile-container {
        max-width: calc(100vw - 32px) !important;
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: white;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .dark .banner-mobile-container {
        background: var(--color-bg-secondary);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    
    /* Mobile banner images - force proper sizing */
    .banner-mobile-container img,
    .banner-mobile-container a,
    .banner-mobile-container .banner-item {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        display: block !important;
        border-radius: 6px;
    }
    
    /* Mobile logo in nav improvements */
    .mobile-nav-logo {
        padding: 8px 0;
    }
    
    .mobile-nav-logo img {
        filter: brightness(1.1);
        transition: transform 0.2s ease;
        max-width: 100%;
        height: auto;
    }
    
    .mobile-nav-logo:hover img {
        transform: scale(1.05);
    }
    
    /* Critical: Prevent any mobile banner overflow */
    .lg\\:hidden {
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    .lg\\:hidden * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ==============================================
   FIX: Prevent layout shift from Lucide icons
   ============================================== */

/* Ensure lucide icons have minimum dimensions before createIcons() runs */
i[data-lucide] {
    display: inline-block;
    min-width: 1em;
    min-height: 1em;
    vertical-align: middle;
}

/* Prevent lucide icons from collapsing */
i[data-lucide]:empty {
    min-width: inherit;
    min-height: inherit;
}
/* ==============================================
   NAVIGATION PERFORMANCE OPTIMIZATION
   Tối ưu thanh menu để loại bỏ jank/shake
   ============================================== */

/* ==============================================
   STICKY NAVIGATION - Fixed to top on scroll
   Menu luôn cố định ở đầu trang khi cuộn (PC & Mobile)
   ============================================== */

nav.main-navigation {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important;
    width: 100%;
    left: 0 !important;
    right: 0 !important;
}

/* Đảm bảo navigation sticky trên mobile */
@media (max-width: 768px) {
    nav.main-navigation {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1200 !important;
        width: 100%;
    }
}






/* ==============================================
   CRITICAL OVERRIDE: Block Tailwind transition-all
   Phải đặt TRƯỚC tất cả rules khác
   ============================================== */

/* Override Tailwind's transition-all for ALL navigation elements */
header nav a.transition-all,
header a.transition-all.nav-link,
nav.main-navigation a.transition-all,
.desktop-nav a.transition-all,
.mobile-menu a.transition-all,
.submenu a.transition-all,
.btn.transition-all,
.tab-button.transition-all,
[class*="menu"] a.transition-all,
[class*="nav"] a.transition-all {
    /* Override Tailwind's transition-all */
    transition: color 200ms ease-in-out,
                background-color 200ms ease-in-out,
                opacity 200ms ease-in-out !important;
}

/* ========================================
   DESKTOP NAVIGATION - Clean & Simple
   ======================================== */

/* High specificity to override Tailwind */
.desktop-nav .nav-link,
a.nav-link {
    /* Typography */
    font-weight: var(--font-semibold);
    white-space: nowrap;
    position: relative;
    display: inline-block;

    /* Performance: GPU acceleration - ONLY for static positioning */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Smooth transitions - ONLY color & opacity */
    transition: color 200ms ease-in-out, opacity 200ms ease-in-out !important;

    /* CRITICAL: No transform animations */
    will-change: color, opacity !important;
}

.desktop-nav .nav-link:hover,
.desktop-nav .nav-link:active,
.desktop-nav .nav-link:focus,
a.nav-link:hover,
a.nav-link:active,
a.nav-link:focus {
    /* FORCE: No transform - prevents layout shift */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;

    /* No scale or translate */
    scale: 1 !important;
    -webkit-scale: 1 !important;
    translate: 0 0 !important;
    -webkit-translate: 0 0 !important;
}

/* Navigation underline indicator */
.nav-underline {
    position: absolute;
    bottom: -0.25rem;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-brand);
    
    /* Only transition opacity */
    transition: opacity 200ms ease-in-out !important;
    will-change: opacity !important;
    
    /* No transform */
    transform: none !important;
}

/* ========================================
   HTMX PAGE TRANSITIONS
   Note: More comprehensive rules at bottom of file
   ======================================== */

/* ========================================
   GENERAL PERFORMANCE RULES
   ======================================== */

/* Hardware acceleration for interactive elements */
.desktop-nav a,
.mobile-menu-item,
.tab-button,
.btn,
.hover-text-brand {
    transform: translateZ(0) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
}

/* Remove ALL transform animations from interactive elements */
.desktop-nav a,
.mobile-menu-item,
.tab-button,
.btn {
    /* Override any transform animations */
    transform: translateZ(0) !important;
}

.desktop-nav a:hover,
.mobile-menu-item:hover,
.tab-button:hover,
.btn:hover {
    /* FORCE: Keep GPU acceleration, no scale/translateY */
    transform: translateZ(0) !important;
    scale: 1 !important;
}

/* Override Tailwind hover utilities - CRITICAL for preventing jank */
.desktop-nav a.hover\:scale-105:hover,
.desktop-nav a.hover\:-translate-y-1:hover,
.desktop-nav a.hover\:scale-110:hover,
a.nav-link.hover\:scale-105:hover,
a.nav-link.hover\:-translate-y-1:hover,
a.nav-link.hover\:scale-110:hover,
.main-navigation a.hover\:scale-105:hover,
.main-navigation a.hover\:-translate-y-1:hover,
nav a.hover\:scale-105:hover,
nav a.hover\:-translate-y-1:hover {
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
    -webkit-transform: translateZ(0) !important;
    -webkit-scale: 1 !important;
    -webkit-translate: 0 0 !important;
}

/* ========================================
   SUBMENU BAR (from submenu_bar.html)
   ======================================== */

/* Target submenu buttons - prevent transform animations */
.btn.btn-primary,
.btn.btn-secondary {
    transform: translateZ(0) !important;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out, opacity 150ms ease-in-out !important;
    will-change: background-color, color !important;
}

.btn.btn-primary:hover,
.btn.btn-secondary:hover,
.btn.btn-primary:active,
.btn.btn-secondary:active,
.btn.btn-primary:focus,
.btn.btn-secondary:focus {
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
}

/* ========================================
   MOBILE MENU
   ======================================== */

.mobile-menu-item {
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out !important;
    transform: translateZ(0) !important;
}

.mobile-menu-item:hover {
    transform: translateZ(0) !important;
    scale: 1 !important;
}

.mobile-menu-item:active {
    /* Use opacity for tap feedback instead of scale */
    opacity: 0.8;
    transform: translateZ(0) !important;
    scale: 1 !important;
}

/* ========================================
   BUTTONS & TABS
   ======================================== */

.tab-button,
.btn {
    transition: background-color 150ms ease-in-out,
                color 150ms ease-in-out,
                border-color 150ms ease-in-out,
                opacity 150ms ease-in-out !important;
    transform: translateZ(0) !important;
}

.tab-button:hover,
.btn:hover {
    transform: translateZ(0) !important;
    scale: 1 !important;
}

/* ========================================
   HOVER UTILITIES
   ======================================== */

.hover-text-brand {
    transition: color 150ms ease-in-out !important;
}

.hover-text-brand:hover {
    color: var(--color-brand);
    transform: translateZ(0) !important;
}

/* ==============================================
   USER DROPDOWN MENU STYLES
   ============================================== */

.user-menu {
    position: relative;
}

#user-menu-button {
    cursor: pointer;
    border: none;
    background: transparent;
}

#user-dropdown {
    min-width: 14rem;
    animation: slideDown 200ms ease-out;
}

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

#user-dropdown a,
#user-dropdown button {
    cursor: pointer;
    border: none;
    background: transparent;
    white-space: nowrap;
}

#user-dropdown .hidden {
    display: none !important;
}

/* Prevent transform on user dropdown items */
#user-dropdown a:hover,
#user-dropdown button:hover,
#user-dropdown a:active,
#user-dropdown button:active {
    transform: none !important;
    scale: 1 !important;
}

/* ==============================================
   GLOBAL MENU CONSISTENCY RULES
   Đảm bảo tất cả menu hoạt động đồng nhất
   ============================================== */

/* All navigation elements should not scale/translate on hover */
header nav a,
header a.nav-link,
nav.main-navigation a,
.desktop-nav a,
.mobile-menu a,
.submenu a,
.tab-button,
[class*="menu"] a,
[class*="nav"] a {
    /* Only transition colors and opacity */
    transition: color 200ms ease-in-out,
                background-color 200ms ease-in-out,
                opacity 200ms ease-in-out !important;
}

/* Force no transform on all interactive states */
header nav a:hover,
header nav a:active,
header nav a:focus,
header a.nav-link:hover,
header a.nav-link:active,
header a.nav-link:focus,
nav.main-navigation a:hover,
nav.main-navigation a:active,
nav.main-navigation a:focus,
.desktop-nav a:hover,
.desktop-nav a:active,
.desktop-nav a:focus,
.mobile-menu a:hover,
.mobile-menu a:active,
.submenu a:hover,
.submenu a:active,
.tab-button:hover,
.tab-button:active,
[class*="menu"] a:hover,
[class*="menu"] a:active,
[class*="nav"] a:hover,
[class*="nav"] a:active {
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
    -webkit-transform: translateZ(0) !important;
}

/* ==============================================
   PERFORMANCE & CONSISTENCY
   ============================================== */

/* Use containment for better rendering performance */

nav.main-navigation,
nav.main-navigation.scrolled,
.main-navigation,
.main-navigation.scrolled {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important; /* Above header (1001) and below modals */
    width: 100%;
    left: 0 !important;
    right: 0 !important;
    transform: translateZ(0) !important;
    will-change: auto !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Reduce layout shifts */
.nav-link,
.mobile-menu-item,
.btn {
    box-sizing: border-box;
}

/* Prevent text selection on navigation items */
.nav-link,
.mobile-menu-item,
.tab-button,
.btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* ==============================================
   CRITICAL FIX: Active State Override
   Loại bỏ HOÀN TOÀN transform trên :active
   ============================================== */

/* Override touch-targets.css và mọi active state animations */
.nav-link:active,
.desktop-nav a:active,
.desktop-nav .nav-link:active,
.mobile-menu a:active,
.mobile-menu-item:active,
header nav a:active,
header a.nav-link:active,
nav.main-navigation a:active,
nav a:active,
.submenu a:active,
.btn.btn-primary:active,
.btn.btn-secondary:active,
[class*="menu"] a:active,
[class*="nav"] a:active {
    /* FORCE: No transform, no scale, no translate */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    scale: 1 !important;
    -webkit-scale: 1 !important;
    translate: 0 0 !important;
    -webkit-translate: 0 0 !important;

    /* No opacity change for navigation */
    opacity: 1 !important;

    /* Prevent any transition on active */
    transition: none !important;
}

/* ==============================================
   HTMX PAGE TRANSITION FIX
   Đảm bảo không có animation trong quá trình navigate
   ============================================== */

/* Prevent ALL animations during HTMX transitions */
body.htmx-swapping .nav-link,
body.htmx-settling .nav-link,
body.htmx-swapping .desktop-nav .nav-link,
body.htmx-settling .desktop-nav .nav-link,
body.htmx-swapping nav a,
body.htmx-settling nav a,
body.htmx-swapping .btn,
body.htmx-settling .btn {
    transition: none !important;
    transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
    opacity: 1 !important;
}

/* ==============================================
   NUCLEAR OPTION: Final Safety Net
   Override MỌI trường hợp có thể xảy ra
   ============================================== */

/* Block ALL transform/scale/translate on navigation - Nuclear override */
header nav *,
nav.main-navigation *,
.desktop-nav *,
.mobile-menu *,
.submenu *,
.main-navigation * {
    /* Prevent ANY transform that might come from anywhere */
    -webkit-transform: translateZ(0) !important;
    -moz-transform: translateZ(0) !important;
    -ms-transform: translateZ(0) !important;
    -o-transform: translateZ(0) !important;
}

/* Specifically for links and buttons inside navigation */
header nav a,
header nav button,
nav.main-navigation a,
nav.main-navigation button,
.desktop-nav a,
.desktop-nav button,
.mobile-menu a,
.mobile-menu button,
.submenu a,
.submenu button {
    /* Force no transform on ANY state */
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Override for pseudo-states */
header nav a:hover, header nav a:active, header nav a:focus,
nav.main-navigation a:hover, nav.main-navigation a:active, nav.main-navigation a:focus,
.desktop-nav a:hover, .desktop-nav a:active, .desktop-nav a:focus,
.mobile-menu a:hover, .mobile-menu a:active, .mobile-menu a:focus,
.submenu a:hover, .submenu a:active, .submenu a:focus {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    scale: 1 !important;
    translate: 0 0 !important;
}

/* ==============================================
   CRITICAL: Prevent Scroll Jump on Click
   Loại bỏ smooth scroll khi click navigation
   ============================================== */

/* Disable scroll-behavior for navigation containers */
header nav,
nav.main-navigation,
.desktop-nav,
.mobile-menu,
.submenu {
    scroll-behavior: auto !important;
}

/* Disable smooth scrolling during navigation */
html.navigating,
body.navigating {
    scroll-behavior: auto !important;
}

/* Prevent scroll restoration on page load */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: auto !important;
    }
}

/* ==============================================
   FINAL OVERRIDES - Highest Priority
   Merged from nav-final-fix.css for consolidation
   ============================================== */

/* Force translateZ(0) for ALL navigation elements */
html,
body {
    scroll-behavior: auto !important;
}

/* During navigation */
html.navigating,
body.navigating {
    scroll-behavior: auto !important;
}

/* Remove ALL feedback on active state for navigation */
header nav a:active,
nav.main-navigation a:active,
.desktop-nav a:active,
.mobile-menu a:active,
.nav-link:active {
    opacity: 1 !important;
    transform: translateZ(0) !important;
    transition: none !important;
}

/* No animations during HTMX transitions */
body.htmx-swapping header nav a,
body.htmx-swapping nav.main-navigation a,
body.htmx-swapping .desktop-nav a,
body.htmx-settling header nav a,
body.htmx-settling nav.main-navigation a,
body.htmx-settling .desktop-nav a {
    transition: none !important;
    transform: translateZ(0) !important;
    opacity: 1 !important;
}
/* ==============================================
   USER DROPDOWN MENU - Optimized Styles
   ============================================== */

/* Container */
.user-menu {
    position: relative;
    display: inline-block;
}

/* Menu Button */
#user-menu-button {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Dropdown Panel - Fixed positioning to escape header stacking context */
#user-dropdown {
    position: fixed !important;
    /* Position will be set by JavaScript */
    width: 14rem;
    z-index: 9999 !important; /* Maximum z-index - above all elements */
    transform-origin: top right;
}

/* Show/Hide Animation */
#user-dropdown:not(.hidden) {
    animation: dropdownSlideIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Menu Items */
#user-dropdown a,
#user-dropdown button {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Icon Colors */
#user-dropdown i {
    flex-shrink: 0;
}

/* Prevent text overflow */
#user-dropdown span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Focus styles for accessibility */
#user-dropdown a:focus,
#user-dropdown button:focus {
    outline: 2px solid rgba(59, 130, 246, 0.5);
    outline-offset: -2px;
}

/* Active state */
#user-dropdown a:active,
#user-dropdown button:active {
    transform: scale(0.98);
}

/* Mobile optimizations */
@media (max-width: 768px) {
    #user-dropdown {
        width: 13rem;
        font-size: 0.875rem;
    }
    
    #user-menu-button span {
        display: none;
    }
}

/* Prevent layout shift */
#user-menu-button,
#user-dropdown {
    will-change: auto;
    contain: layout style;
}
/* ==========================================
   NOTIFICATION DROPDOWN
   Hộp thông báo với giao diện đẹp và mượt mà
   ========================================== */

/* Notification Bell Button */
.notification-bell-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--color-text-tertiary);
}

.notification-bell-btn:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

/* Badge số lượng thông báo chưa đọc */
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Dropdown container - Fixed positioning for consistency */
.notification-dropdown {
    position: fixed !important;
    right: 1rem;
    /* top will be set by JavaScript based on notification bell position */
    width: 380px;
    max-width: calc(100vw - 2rem);
    max-height: min(500px, calc(100vh - 100px)); /* Prevent overflow on short screens */
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e7eb;
    overflow: hidden;
    z-index: 9999 !important; /* Maximum z-index - above all elements */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    display: flex;
    flex-direction: column;
}

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

:is(.dark) .notification-dropdown {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Header */
.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

:is(.dark) .notification-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border-color: #334155;
}

.notification-header h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

:is(.dark) .notification-header h3 {
    color: #f1f5f9;
}

.notification-header-actions {
    display: flex;
    gap: 0.5rem;
}

.mark-all-read-btn {
    font-size: 0.75rem;
    color: #3b82f6;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
    font-weight: 600;
}

.mark-all-read-btn:hover {
    background: rgba(59, 130, 246, 0.1);
}

:is(.dark) .mark-all-read-btn {
    color: #60a5fa;
}

/* Body - List of notifications */
.notification-body {
    flex: 1;
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.notification-body::-webkit-scrollbar {
    width: 6px;
}

.notification-body::-webkit-scrollbar-track {
    background: transparent;
}

.notification-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

:is(.dark) .notification-body {
    scrollbar-color: #475569 transparent;
}

:is(.dark) .notification-body::-webkit-scrollbar-thumb {
    background: #475569;
}

/* Individual notification item */
.notification-item {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    opacity: 1;
    transform: translateX(0);
}

.notification-item:hover {
    background: #fafbfc;
}

.notification-item.unread {
    background: linear-gradient(90deg, #eff6ff 0%, #f0f9ff 100%);
}

.notification-item.unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 0 2px 2px 0;
}

:is(.dark) .notification-item {
    border-color: #334155;
}

:is(.dark) .notification-item:hover {
    background: #1e293b;
}

:is(.dark) .notification-item.unread {
    background: linear-gradient(90deg, #1e3a8a 0%, #1e40af 100%);
}

/* Notification content */
.notification-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.notification-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.notification-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.4;
    flex: 1;
}

:is(.dark) .notification-title {
    color: #f1f5f9;
}

.notification-type-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.notification-type-badge.info {
    background: #dbeafe;
    color: #1e40af;
}

.notification-type-badge.success {
    background: #d1fae5;
    color: #065f46;
}

.notification-type-badge.warning {
    background: #fef3c7;
    color: #92400e;
}

.notification-type-badge.error {
    background: #fee2e2;
    color: #991b1b;
}

:is(.dark) .notification-type-badge.info {
    background: #1e3a8a;
    color: #bfdbfe;
}

:is(.dark) .notification-type-badge.success {
    background: #065f46;
    color: #a7f3d0;
}

:is(.dark) .notification-type-badge.warning {
    background: #78350f;
    color: #fde68a;
}

:is(.dark) .notification-type-badge.error {
    background: #7f1d1d;
    color: #fecaca;
}

.notification-message {
    font-size: 0.8125rem;
    color: #475569;
    line-height: 1.5;
}

:is(.dark) .notification-message {
    color: #cbd5e1;
}

.notification-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
}

.notification-time {
    font-size: 0.75rem;
    color: #94a3b8;
}

:is(.dark) .notification-time {
    color: #64748b;
}

.notification-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.notification-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 600;
    white-space: nowrap;
}

.notification-action-btn:active {
    transform: translateY(1px);
}

/* Compact action buttons - Icon only, smaller size */
.notification-action-btn-compact {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
}

.notification-action-btn-compact:hover {
    transform: translateY(-2px);
}

.notification-action-btn-compact:active {
    transform: translateY(0);
}

.notification-link-btn {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #15803d;
    border-color: #86efac;
    /* Đảm bảo touch hoạt động */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(34, 197, 94, 0.2);
    user-select: none;
    -webkit-user-select: none;
}

.notification-link-btn * {
    pointer-events: none;
}

.notification-link-btn:hover {
    background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
    border-color: #4ade80;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.notification-link-btn:active {
    transform: scale(0.95);
}

.notification-reply-btn {
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: #93c5fd;
    /* Đảm bảo touch hoạt động */
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    user-select: none;
    -webkit-user-select: none;
}

.notification-reply-btn * {
    pointer-events: none;
}

.notification-reply-btn:hover {
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
    border-color: #60a5fa;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.notification-reply-btn:active {
    transform: scale(0.95);
}

.notification-delete-btn {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border-color: #fca5a5;
}

.notification-delete-btn:hover {
    background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
    border-color: #f87171;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

:is(.dark) .notification-link-btn {
    background: linear-gradient(135deg, #14532d 0%, #166534 100%);
    color: #bbf7d0;
    border-color: #166534;
}

:is(.dark) .notification-link-btn:hover {
    background: linear-gradient(135deg, #166534 0%, #15803d 100%);
    border-color: #22c55e;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

:is(.dark) .notification-reply-btn {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
    color: #bfdbfe;
    border-color: #1e40af;
}

:is(.dark) .notification-reply-btn:hover {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

:is(.dark) .notification-delete-btn {
    background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
    color: #fecaca;
    border-color: #991b1b;
}

:is(.dark) .notification-delete-btn:hover {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}

/* Confirm Delete Modal */
.notification-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 95; /* Managed by z-index-system.css - below notification dropdown */
    animation: fadeIn 0.2s ease;
}

.notification-confirm-modal.show {
    display: flex;
}

.notification-confirm-content {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    animation: slideUp 0.3s ease;
}

:is(.dark) .notification-confirm-content {
    background: #1e293b;
    color: #f1f5f9;
}

.notification-confirm-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.notification-confirm-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d97706;
    flex-shrink: 0;
}

:is(.dark) .notification-confirm-icon {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    color: #fde68a;
}

.notification-confirm-title {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

:is(.dark) .notification-confirm-title {
    color: #f1f5f9;
}

.notification-confirm-message {
    color: #64748b;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

:is(.dark) .notification-confirm-message {
    color: #94a3b8;
}

.notification-confirm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.notification-confirm-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.notification-confirm-btn:active {
    transform: translateY(1px);
}

.notification-confirm-cancel {
    background: #f1f5f9;
    color: #475569;
}

.notification-confirm-cancel:hover {
    background: #e2e8f0;
}

:is(.dark) .notification-confirm-cancel {
    background: #334155;
    color: #cbd5e1;
}

:is(.dark) .notification-confirm-cancel:hover {
    background: #475569;
}

.notification-confirm-delete {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.notification-confirm-delete:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Empty state */
.notification-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: #94a3b8;
}

.notification-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    opacity: 0.5;
}

.notification-empty p {
    font-size: 0.875rem;
    margin: 0;
}

:is(.dark) .notification-empty {
    color: #64748b;
}

/* Loading state */
.notification-loading {
    padding: 2rem;
    text-align: center;
    color: #94a3b8;
}

.notification-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1rem;
}

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

/* Reply Modal - Must be above everything */
.notification-reply-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999999 !important; /* Highest z-index - above all elements */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
}

.notification-reply-modal.show {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.notification-reply-content {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    z-index: 1; /* Above backdrop */
    position: relative;
    transform: translateY(0);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

:is(.dark) .notification-reply-content {
    background: #1e293b;
}

.notification-reply-header {
    margin-bottom: 1rem;
}

.notification-reply-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.5rem 0;
}

:is(.dark) .notification-reply-header h3 {
    color: #f1f5f9;
}

.notification-reply-textarea {
    width: 100%;
    min-height: 120px;
    padding: 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    resize: vertical;
    transition: all 0.2s;
}

.notification-reply-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

:is(.dark) .notification-reply-textarea {
    background: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.notification-reply-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.notification-reply-submit,
.notification-reply-cancel {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.notification-reply-submit {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

.notification-reply-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.notification-reply-cancel {
    background: #f1f5f9;
    color: #475569;
}

.notification-reply-cancel:hover {
    background: #e2e8f0;
}

:is(.dark) .notification-reply-cancel {
    background: #334155;
    color: #cbd5e1;
}

:is(.dark) .notification-reply-cancel:hover {
    background: #475569;
}

/* Responsive */
@media (max-width: 640px) {
    .notification-dropdown {
        width: calc(100vw - 2rem);
        max-height: calc(100vh - 120px); /* Chiều cao viewport trừ header */
        /* top and right dynamically set by JavaScript */
        left: auto;
    }

    .notification-body {
        max-height: calc(100vh - 250px); /* Trừ header + notification header */
    }

    .notification-reply-modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .notification-reply-modal.show {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .notification-reply-modal.show .notification-reply-content {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .notification-reply-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 1rem 1rem 0 0 !important;
        padding: 1.25rem !important;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
        background: #ffffff !important;
        position: relative !important;
        z-index: 10 !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
        animation: none !important;
    }

    .notification-reply-header h3 {
        color: #0f172a !important;
        font-size: 1rem !important;
    }

    .notification-reply-textarea {
        min-height: 100px;
        font-size: 16px !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        border: 1px solid #e2e8f0 !important;
    }

    .notification-reply-footer {
        flex-direction: row;
        gap: 0.75rem;
    }

    .notification-reply-submit,
    .notification-reply-cancel {
        flex: 1;
        padding: 0.75rem 1rem;
    }

    .notification-reply-submit {
        background: #3b82f6 !important;
        color: white !important;
    }

    .notification-reply-cancel {
        background: #f1f5f9 !important;
        color: #475569 !important;
    }
}

/* ==========================================
   TOAST NOTIFICATIONS (Real-time)
   ========================================== */

.notification-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99999999 !important; /* Highest - above everything including modals */
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.notification-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 320px;
    max-width: 420px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #3b82f6;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(400px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.notification-toast.show {
    opacity: 1;
    transform: translateX(0);
}

:is(.dark) .notification-toast {
    background: #1e293b;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Toast types */
.notification-toast-info {
    border-left-color: #3b82f6;
}

.notification-toast-success {
    border-left-color: #10b981;
}

.notification-toast-warning {
    border-left-color: #f59e0b;
}

.notification-toast-error {
    border-left-color: #ef4444;
}

/* Toast icon */
.notification-toast-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eff6ff;
    color: #3b82f6;
}

.notification-toast-info .notification-toast-icon {
    background: #eff6ff;
    color: #3b82f6;
}

.notification-toast-success .notification-toast-icon {
    background: #d1fae5;
    color: #10b981;
}

.notification-toast-warning .notification-toast-icon {
    background: #fef3c7;
    color: #f59e0b;
}

.notification-toast-error .notification-toast-icon {
    background: #fee2e2;
    color: #ef4444;
}

:is(.dark) .notification-toast-info .notification-toast-icon {
    background: #1e3a8a;
    color: #93c5fd;
}

:is(.dark) .notification-toast-success .notification-toast-icon {
    background: #065f46;
    color: #6ee7b7;
}

:is(.dark) .notification-toast-warning .notification-toast-icon {
    background: #78350f;
    color: #fcd34d;
}

:is(.dark) .notification-toast-error .notification-toast-icon {
    background: #7f1d1d;
    color: #fca5a5;
}

/* Toast content */
.notification-toast-content {
    flex: 1;
    min-width: 0;
}

.notification-toast-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.4;
}

:is(.dark) .notification-toast-title {
    color: #f1f5f9;
}

.notification-toast-message {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:is(.dark) .notification-toast-message {
    color: #94a3b8;
}

/* Toast close button */
.notification-toast-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.notification-toast-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

:is(.dark) .notification-toast-close:hover {
    background: #334155;
    color: #f1f5f9;
}

/* Bell Ring Animation */
@keyframes bell-ring {
    0%, 100% {
        transform: rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: rotate(-15deg);
    }
    20%, 40%, 60%, 80% {
        transform: rotate(15deg);
    }
}

.notification-bell-ring {
    animation: bell-ring 0.8s ease-in-out;
}

/* Mobile responsive */
@media (max-width: 640px) {
    .notification-toast-container {
        top: 60px;
        right: 12px;
        left: 12px;
    }

    .notification-toast {
        min-width: auto;
        max-width: none;
        width: 100%;
    }

    /* Tăng kích thước touch target cho mobile - tối thiểu 44x44px theo Apple HIG */
    .notification-action-btn-compact {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        /* Đảm bảo touch events được xử lý */
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    .notification-action-btn-compact i,
    .notification-action-btn-compact svg {
        width: 20px !important;
        height: 20px !important;
        pointer-events: none;
    }

    .notification-actions {
        gap: 0.5rem;
    }

    /* Đảm bảo notification item có đủ padding cho touch */
    .notification-item {
        padding: 1rem;
    }

    .notification-footer {
        margin-top: 0.75rem;
    }
}
/**
 * WebSocket Live Score Animations
 * ================================
 * CSS animations for real-time score updates
 *
 * File: static/css/websocket_animations.css
 */

/* ==========================================
   WEBSOCKET STATUS INDICATOR
   ========================================== */

#ws-status-indicator {
    position: fixed;
    top: 70px;
    right: 20px;
    z-index: 9999;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.ws-status-connecting {
    background: #fbbf24;
    color: #78350f;
}

.ws-status-connected {
    background: #34d399;
    color: #065f46;
}

.ws-status-disconnected {
    background: #f87171;
    color: #7f1d1d;
}

.ws-status-error {
    background: #f59e0b;
    color: #78350f;
}

.ws-status-failed {
    background: #dc2626;
    color: #ffffff;
}

/* ==========================================
   LIVE MATCH INDICATORS
   ========================================== */

.live-match {
    position: relative;
    border-left: 3px solid #ef4444 !important;
}

.live-match::before {
    content: "🔴";
    position: absolute;
    top: 10px;
    left: -12px;
    font-size: 10px;
    animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* ==========================================
   SCORE CHANGE ANIMATIONS
   ========================================== */

.score-flash {
    animation: flash-score 1s ease;
}

@keyframes flash-score {
    0%, 100% {
        background-color: transparent;
        transform: scale(1);
    }
    25%, 75% {
        background-color: #34d399;
        color: #ffffff;
        transform: scale(1.1);
    }
    50% {
        background-color: #10b981;
        color: #ffffff;
        transform: scale(1.15);
    }
}

/* ==========================================
   GOAL CELEBRATION ANIMATION
   ========================================== */

.goal-celebration {
    animation: celebrate-goal 2s ease;
}

@keyframes celebrate-goal {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(52, 211, 153, 0);
    }
    10% {
        transform: scale(1.03);
    }
    20% {
        transform: scale(0.97);
    }
    30% {
        transform: scale(1.02);
    }
    40% {
        transform: scale(0.98);
    }
    50% {
        transform: scale(1.01);
        box-shadow: 0 0 40px rgba(52, 211, 153, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(52, 211, 153, 0);
    }
}

/* ==========================================
   LIVE PULSE EFFECT
   ========================================== */

.live-pulse {
    animation: pulse-match 3s ease-in-out infinite;
}

@keyframes pulse-match {
    0%, 100% {
        box-shadow: 0 0 0 rgba(239, 68, 68, 0);
    }
    50% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
    }
}

/* ==========================================
   CARDS INDICATORS
   ========================================== */

.yellow-card {
    background: #fbbf24;
    color: #78350f;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
    margin-right: 4px;
}

.red-card {
    background: #ef4444;
    color: #ffffff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: bold;
}

/* ==========================================
   UPDATE SHIMMER EFFECT
   ========================================== */

.ws-updating {
    position: relative;
    overflow: hidden;
}

.ws-updating::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
    #ws-status-indicator {
        top: 60px;
        right: 10px;
        font-size: 11px;
        padding: 6px 12px;
    }
}
/* ================================================
   UNIFIED LAYOUT SYSTEM - Banner + Mobile + Navigation
   ================================================ */

/* Banner Section Consistency */
.banner-section {
    position: relative;
    z-index: 10;
    min-height: 80px;
    display: flex;
    align-items: center;
}

/* Banner Container Improvements - Clean simple design */
.banner-responsive-container {
    display: flex;
    align-items: center;
    position: relative;
}

.dark .banner-responsive-container {
    /* No dark mode styling */
}

.banner-responsive-container:hover {
    /* No hover effects */
}

.dark .banner-responsive-container:hover {
    /* No dark mode hover effects */
}

/* Header container - basic positioning */
header {
    position: relative !important;
    z-index: 30 !important; /* Managed by z-index-system.css */
    /* Visual effects */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Only transition visual properties */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}

/* Navigation visual changes on scroll */
.main-navigation.scrolled {
    background: rgba(37, 99, 235, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
}

/* Banner Image Improvements - Simple clean design */
.banner-responsive-container .banner-image {
    max-height: 80px;
    width: 100%;
    object-fit: cover;
    display: block;
}

/* Header banner images - smaller and more compact */
.hidden.md\\:block .banner-responsive-container .banner-image {
    max-height: 50px;
    object-fit: contain;
}

/* Banner Close Button - Simple design */
.banner-responsive-container .banner-close-btn {
    background: rgba(0, 0, 0, 0.5) !important;
    color: white !important;
    font-size: 14px !important;
    font-weight: bold !important;
}

.banner-responsive-container .banner-close-btn:hover {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Mobile-Banner-Wrapper Full Width Implementation */
@media (max-width: 768px) {
    /* Force container overflow for full width banner */
    .main-content {
        overflow-x: visible !important;
    }
    
    .mobile-banner-wrapper {
        width: 100vw !important;
        max-width: none !important;
        margin-left: calc(-50vw + 50%) !important;
        margin-right: calc(-50vw + 50%) !important;
        padding: 0 !important;
        position: relative;
        overflow: hidden;
        box-sizing: border-box;
        left: 0;
        right: 0;
    }
    
    .mobile-banner-wrapper .banner-responsive-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        position: relative;
        box-sizing: border-box;
    }
    
    .mobile-banner-wrapper .banner-image {
        width: 100% !important;
        height: auto !important;
        max-height: 80px !important;
        object-fit: cover !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box;
    }
    
    /* Ensure parent containers don't restrict width */
    .mobile-banner-wrapper * {
        box-sizing: border-box;
    }
}

/* Mobile Viewport Fixes - Updated for mobile-banner-wrapper */
@media (max-width: 768px) {
    .banner-section {
        padding: 0;
        min-height: auto;
    }
    
    /* Fix mobile overflow issues */
    body {
        overflow-x: hidden !important;
    }
    
    .container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* Mobile table fixes */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: calc(100vw - 2rem);
    }
    
    /* Mobile navigation - also sticky */
    .main-navigation {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1200 !important;
    }
}

/* Desktop Optimizations */
@media (min-width: 1024px) {
    .banner-responsive-container {
        max-width: 100%;
        border-radius: 0.75rem;
    }
    
    .banner-responsive-container .banner-image {
        max-height: 120px;
        border-radius: 0.75rem;
    }
}

/* Stable banner container - no animation to prevent flicker */
.banner-responsive-container {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease;
}

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

/* Ensure banner doesn't break layout */
.banner-responsive-container * {
    max-width: 100% !important;
    box-sizing: border-box;
}

.banner-responsive-container img {
    height: auto !important;
    width: auto !important;
    object-fit: contain !important;
}

/* Desktop banner sizing - full 728x90 */
.desktop-banner-size .banner-responsive-container {
    width: 728px !important;
    max-width: 728px !important;
    height: 90px !important;
    max-height: 90px !important;
}

.desktop-banner-size .banner-responsive-container img {
    width: 728px !important;
    height: 90px !important;
    max-width: 728px !important;
    max-height: 90px !important;
    object-fit: cover !important;
}

/* Mobile banner sizing - responsive */
.mobile-banner-size .banner-responsive-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mobile-banner-size .banner-responsive-container img {
    width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
    min-height: 50px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Mobile banner full width wrapper */
@media (max-width: 768px) {
    .mobile-banner-wrapper {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
        margin-top: 0 !important;
        margin-bottom: 1rem !important;
        padding: 0 !important;
    }

    .mobile-banner-wrapper .banner-responsive-container {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .mobile-banner-wrapper .banner-responsive-container img {
        width: 100% !important;
        height: auto !important;
        max-height: 60px !important;
        min-height: 50px !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 0 !important;
    }

    .mobile-banner-wrapper .banner-container {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .mobile-banner-wrapper .banner-wrapper {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
}

/* Remove any container constraints on desktop */
@media (min-width: 768px) {
    .desktop-banner-size {
        flex: none !important;
        width: 728px !important;
        max-width: 728px !important;
    }
}

/* Remove conflicting banner styles from old system only */
.desktop-banner-container,
.mobile-banner-container,
.banner-mobile-container {
    display: none !important;
}

/* Exception: Show our unified banner containers */
.banner-responsive-container {
    display: block !important;
}

.banner-responsive-container .banner-container {
    display: block !important;
}

/* Sidebar banner consistency */
.sidebar .banner-container {
    display: block !important;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Layout consistency improvements */
.main-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Fix any layout shifts */
.content-wrapper {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Navigation sticky positioning */
.main-navigation {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1200; /* Managed by z-index-system.css - above header (1001) */
}/* ================================================
   Z-INDEX SYSTEM - Unified Layer Management
   Giải quyết xung đột z-index và tạo hệ thống phân lớp rõ ràng
   ================================================ */

/* ================================================
   Z-INDEX SCALE ĐỊNH NGHĨA
   ================================================

   Hệ thống z-index chuẩn hóa:

   0-9     : Default layers (normal content)
   10-19   : Sidebar, banner, content overlays
   20-29   : Dropdown menus, tooltips
   30-39   : Sticky elements (navigation, header)
   40-49   : Fixed bottom elements (sticky banners)
   50-59   : Scroll to top, utility buttons
   60-69   : Mobile menu button
   70-79   : Mobile menu overlay
   80-89   : Mobile menu
   90-99   : Modals, dialogs
   100-109 : Prediction modal, important modals
   110-119 : Notification system (dropdown, toasts)
   120+    : Emergency/critical overlays

   ================================================ */

/* ================================================
   1. BASE LAYERS (0-9)
   ================================================ */

/* Content mặc định - không cần z-index */

/* ================================================
   2. SIDEBAR & BANNER LAYERS (10-19)
   ================================================ */

/* Header container */
header {
    position: relative !important;
    z-index: 30 !important; /* Below navigation (1200) and dropdowns */
}

/* Sidebar banners */
.sidebar,
.sidebar-left,
.sidebar-right {
    position: relative;
    z-index: 10;
}

.banner-section,
.banner-responsive-container {
    position: relative;
    z-index: 10;
}

/* ================================================
   3. DROPDOWN LAYERS (20-29)
   ================================================ */

/* User dropdown menu - Must be above navigation */
#user-dropdown,
.user-menu .dropdown-menu {
    position: fixed !important; /* Changed from absolute to fixed */
    z-index: 9999 !important; /* Maximum z-index - above all elements */
}

.dropdown-container {
    position: relative;
    z-index: 20;
}

/* Notification dropdown */
.notification-dropdown {
    position: fixed !important;
    z-index: 9999 !important; /* Maximum z-index - above all elements */
}

/* ================================================
   4. STICKY NAVIGATION (30-39)
   ================================================ */

/* Main navigation - sticky */
nav.main-navigation,
.main-navigation {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1200 !important; /* Higher than header (1001) and dropdowns */
}

/* ================================================
   5. FIXED BOTTOM ELEMENTS (40-49)
   ================================================ */

/* Mobile sticky banner */
.mobile-sticky-banner,
div[class*="mobile-sticky"] {
    position: fixed;
    bottom: 0;
    z-index: 40 !important;
}

/* Footer sticky banner */
.footer-sticky-banner,
div[class*="footer-sticky"] {
    position: fixed;
    bottom: 0;
    z-index: 42 !important; /* Higher than mobile sticky */
}

/* ================================================
   6. UTILITY BUTTONS (50-59)
   ================================================ */

/* Scroll to top button */
#scroll-top-btn,
.scroll-to-top {
    position: fixed;
    bottom: 8px;
    right: 8px;
    z-index: 50 !important;
}

/* ================================================
   7. MOBILE MENU BUTTON (60-69)
   ================================================ */

.mobile-menu-button {
    position: relative;
    z-index: 1250 !important; /* Must be above navigation and overlay */
}

/* ================================================
   8. MOBILE MENU OVERLAY (70-79)
   ================================================ */

.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1210 !important; /* Above navigation (1200) */
}

/* ================================================
   9. MOBILE MENU (80-89)
   ================================================ */

.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1240 !important; /* Above overlay, below button */
}

/* ================================================
   10. MODALS & DIALOGS (90-99)
   ================================================ */

/* Quick search modal */
#quick-search-modal,
.search-modal {
    position: fixed;
    z-index: 1300 !important; /* Above navigation (1200) */
}

/* Confirm modals */
.notification-confirm-modal {
    position: fixed;
    z-index: 95 !important;
}

/* Reply modal */
.notification-reply-modal {
    position: fixed;
    z-index: 95 !important;
}

/* ================================================
   11. PREDICTION MODAL (100-109)
   ================================================ */

#prediction-modal,
.prediction-modal {
    position: fixed;
    z-index: 100 !important;
}

/* ================================================
   12. NOTIFICATION SYSTEM (110-119)
   ================================================ */

/* Notification bell button - relative to header */
.notification-bell-btn {
    position: relative;
    z-index: 1; /* Local stacking within header */
}

/* Notification dropdown - FIXED positioning */
.notification-dropdown {
    position: fixed !important;
    z-index: 110 !important; /* Highest - always visible */
}

/* Toast notifications */
.notification-toast-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 115 !important; /* Above dropdown */
}

.notification-toast {
    position: relative;
    z-index: 1;
}

/* ================================================
   13. LOADING INDICATORS (110-119)
   ================================================ */

.page-loading-indicator,
#page-loading {
    position: fixed;
    z-index: 112 !important; /* Between notification dropdown and toasts */
}

/* WebSocket connection status */
.websocket-status,
.connection-status {
    position: fixed;
    z-index: 112 !important;
}

/* ================================================
   14. EMERGENCY LAYERS (120+)
   ================================================ */

/* Critical error overlays, system messages */
.critical-overlay,
.system-message {
    position: fixed;
    z-index: 120 !important;
}

/* ================================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ================================================ */

@media (max-width: 768px) {
    /* Ensure mobile menu system works correctly */
    .mobile-menu-button {
        z-index: 1250 !important;
    }

    .mobile-menu-overlay {
        z-index: 1210 !important;
    }

    .mobile-menu {
        z-index: 1240 !important;
    }

    /* Mobile sticky banners */
    .mobile-sticky-banner {
        z-index: 40 !important;
    }

    /* Notification dropdown on mobile */
    .notification-dropdown {
        z-index: 110 !important;
        max-height: calc(100vh - 120px);
    }
}

/* ================================================
   CONFLICT PREVENTION
   ================================================ */

/* Ensure no elements accidentally override these values */
body * {
    /* Remove any accidentally high z-index values */
}

/* Remove old conflicting z-index values */
.notification-dropdown:not([style*="z-index"]) {
    z-index: 110 !important;
}

/* ================================================
   DEBUG MODE (Development only)
   ================================================ */

/* Uncomment to visualize z-index layers in development */
/*
header::after {
    content: 'Z:30';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(255,0,0,0.7);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}

.main-navigation::after {
    content: 'Z:35';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,255,0,0.7);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}

.notification-dropdown::after {
    content: 'Z:110';
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0,0,255,0.7);
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
}
*/
/* ================================================
   BANNER STYLES - Unified Banner System
   Tối ưu accessibility và styling cho banner
   ================================================ */

/* ================================================
   BANNER CLOSE BUTTONS - Minimal & Clean
   Chỉ hiện khi hover vào góc phải trên
   ================================================ */

/* Vùng trigger ở góc phải trên - vô hình nhưng có thể hover */
.banner-close-trigger {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    z-index: 10;
    pointer-events: auto;
}

/* Nút close - MẶC ĐỊNH HOÀN TOÀN VÔ HÌNH */
.banner-close-btn,
.banner-close-btn-sticky {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    color: transparent; /* Ẩn mọi text content */
    font-size: 0; /* Không render text */
    line-height: 1;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 11;

    /* MẶC ĐỊNH: HOÀN TOÀN VÔ HÌNH */
    opacity: 0;
    pointer-events: none;
}

/* KHI HOVER vào vùng góc phải trên (60x60px) → hiện nút */
.banner-wrapper:hover .banner-close-btn,
.banner-container:hover .banner-close-btn,
.banner-responsive-container:hover .banner-close-btn-sticky,
div.relative:hover .banner-close-btn-sticky {
    opacity: 0.6;
    pointer-events: auto;
}

/* KHI HOVER trực tiếp vào nút → rõ hơn */
.banner-close-btn:hover,
.banner-close-btn-sticky:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.1);
}

/* Click feedback */
.banner-close-btn:active,
.banner-close-btn-sticky:active {
    transform: scale(0.95);
}

/* Mobile: luôn hiện mờ để dễ thấy */
@media (max-width: 768px) {
    .banner-close-btn,
    .banner-close-btn-sticky {
        opacity: 0.4;
        pointer-events: auto;
    }

    .banner-close-btn:hover,
    .banner-close-btn-sticky:hover {
        opacity: 1 !important;
    }
}

/* Focus state cho accessibility */
.banner-close-btn:focus-visible,
.banner-close-btn-sticky:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.8);
    outline-offset: 2px;
    opacity: 1 !important;
    pointer-events: auto;
}

/* Icon × - CHỈ render qua ::before */
.banner-close-btn::before,
.banner-close-btn-sticky::before {
    content: '×';
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-size: 16px; /* Kích thước cố định cho ::before */
    font-weight: 200;
    line-height: 1;
    color: white; /* Màu của ::before */
}

/* ================================================
   BANNER CONTAINER STYLES
   ================================================ */

.banner-container {
    position: relative;
    min-height: auto;
    display: flex;
    align-items: center;
}

.banner-wrapper {
    position: relative;
}

/* Desktop banner - full 728x90 size */
.desktop-banner-size .banner-container {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.desktop-banner-size .banner-image {
    width: 728px !important;
    height: 90px !important;
    max-width: 728px !important;
    max-height: 90px !important;
    object-fit: cover !important;
    display: block;
}

/* Mobile banner - responsive size */
.mobile-banner-size .banner-container {
    min-height: auto;
    display: flex;
    align-items: center;
}

.mobile-banner-size .banner-image {
    width: 100% !important;
    max-height: 50px !important;
    object-fit: contain !important;
    display: block;
}

/* ================================================
   STICKY BANNER POSITIONING
   ================================================ */

/* Fixed sticky banners use z-index from z-index-system.css */
.banner-sticky-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* z-index managed by z-index-system.css */
}

/* ================================================
   BANNER ANIMATIONS
   ================================================ */

/* Smooth fade in for banners */
.banner-wrapper,
.banner-container {
    animation: bannerFadeIn 0.3s ease-out;
}

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

/* ================================================
   ACCESSIBILITY IMPROVEMENTS
   ================================================ */

/* Screen reader text */
.banner-close-btn .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus states for keyboard navigation */
.banner-item:focus-visible {
    outline: 3px solid var(--color-brand-primary, #34d399);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* ================================================
   RESPONSIVE ADJUSTMENTS
   ================================================ */

@media (max-width: 768px) {
    /* Ensure close buttons are touch-friendly */
    .banner-close-btn,
    .banner-close-btn-sticky {
        min-width: 44px;
        min-height: 44px;
    }

    /* Mobile banner full width */
    .mobile-banner-wrapper .banner-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ================================================
   EVENT SLIDER BANNER - Full width within container
   ================================================ */

/* Banner container should match the width of other cards */
.banner-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

/* Banner wrapper should have consistent styling with other cards */
.banner-wrapper {
    width: 100%;
    border-radius: 0.75rem;
    overflow: hidden;
}

/* Banner image should be full width and maintain aspect ratio */
.banner-wrapper .banner-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ================================================
   DARK MODE SUPPORT
   ================================================ */

.dark .banner-close-btn,
.dark .banner-close-btn-sticky {
    background: rgba(0, 0, 0, 0.8);
}

.dark .banner-close-btn:hover,
.dark .banner-close-btn-sticky:hover {
    background: rgba(0, 0, 0, 0.95);
}
/* ================================================
   DJANGO MESSAGES - Toast Notifications
   Hiển thị thông báo từ Django messages framework
   ================================================ */

/* ================================================
   MESSAGE CONTAINER
   ================================================ */

.messages-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 99999999 !important; /* Highest - above everything including banners, modals */
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
    max-width: 420px;
}

/* ================================================
   MESSAGE ITEM (TOAST STYLE)
   ================================================ */

.alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 320px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #3b82f6;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(400px);
    animation: slideInMessage 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    position: relative;
}

@keyframes slideInMessage {
    from {
        opacity: 0;
        transform: translateX(400px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Dark mode */
:is(.dark) .alert {
    background: #1e293b;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* ================================================
   MESSAGE TYPES - Colors & Icons
   ================================================ */

/* Debug - Gray */
.alert-debug {
    border-left-color: #6b7280;
}

.alert-debug .message-icon {
    background: #f3f4f6;
    color: #6b7280;
}

:is(.dark) .alert-debug .message-icon {
    background: #374151;
    color: #9ca3af;
}

/* Info - Blue */
.alert-info {
    border-left-color: #3b82f6;
}

.alert-info .message-icon {
    background: #eff6ff;
    color: #3b82f6;
}

:is(.dark) .alert-info .message-icon {
    background: #1e3a8a;
    color: #93c5fd;
}

/* Success - Green */
.alert-success {
    border-left-color: #10b981;
}

.alert-success .message-icon {
    background: #d1fae5;
    color: #10b981;
}

:is(.dark) .alert-success .message-icon {
    background: #065f46;
    color: #6ee7b7;
}

/* Warning - Yellow */
.alert-warning {
    border-left-color: #f59e0b;
}

.alert-warning .message-icon {
    background: #fef3c7;
    color: #f59e0b;
}

:is(.dark) .alert-warning .message-icon {
    background: #78350f;
    color: #fcd34d;
}

/* Error/Danger - Red */
.alert-error,
.alert-danger {
    border-left-color: #ef4444;
}

.alert-error .message-icon,
.alert-danger .message-icon {
    background: #fee2e2;
    color: #ef4444;
}

:is(.dark) .alert-error .message-icon,
:is(.dark) .alert-danger .message-icon {
    background: #7f1d1d;
    color: #fca5a5;
}

/* ================================================
   MESSAGE ICON
   ================================================ */

.message-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.25rem;
}

/* Icon variants based on message type */
.alert-debug .message-icon::before {
    content: "🐛";
}

.alert-info .message-icon::before {
    content: "ℹ️";
}

.alert-success .message-icon::before {
    content: "✓";
    font-weight: bold;
    font-size: 1.5rem;
}

.alert-warning .message-icon::before {
    content: "⚠️";
}

.alert-error .message-icon::before,
.alert-danger .message-icon::before {
    content: "✕";
    font-weight: bold;
    font-size: 1.25rem;
}

/* ================================================
   MESSAGE CONTENT
   ================================================ */

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

.message-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4px;
    line-height: 1.4;
}

:is(.dark) .message-title {
    color: #f1f5f9;
}

.message-text {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

:is(.dark) .message-text {
    color: #94a3b8;
}

/* ================================================
   CLOSE BUTTON
   ================================================ */

.message-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #94a3b8;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
}

.message-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

:is(.dark) .message-close:hover {
    background: #334155;
    color: #f1f5f9;
}

.message-close:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ================================================
   AUTO-DISMISS ANIMATION
   ================================================ */

.alert.dismissing {
    animation: slideOutMessage 0.3s ease-out forwards;
}

@keyframes slideOutMessage {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(400px);
    }
}

/* ================================================
   MOBILE RESPONSIVE
   ================================================ */

@media (max-width: 640px) {
    .messages-container {
        top: 60px;
        right: 12px;
        left: 12px;
        max-width: none;
    }

    .alert {
        min-width: auto;
        max-width: none;
        width: 100%;
    }

    .message-icon {
        width: 36px;
        height: 36px;
    }

    .message-title {
        font-size: 0.875rem;
    }

    .message-text {
        font-size: 0.75rem;
    }
}

/* ================================================
   ACCESSIBILITY
   ================================================ */

/* Screen reader only text */
.alert .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus trap for keyboard navigation */
.alert:focus-within {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* ================================================
   PROGRESS BAR (Auto-dismiss indicator)
   ================================================ */

.alert-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg,
        rgba(59, 130, 246, 0.3) 0%,
        rgba(59, 130, 246, 0.8) 100%);
    border-radius: 0 0 12px 12px;
    transform-origin: left;
    animation: progress 5s linear forwards;
}

@keyframes progress {
    from {
        width: 100%;
    }
    to {
        width: 0%;
    }
}

.alert-success .alert-progress {
    background: linear-gradient(90deg,
        rgba(16, 185, 129, 0.3) 0%,
        rgba(16, 185, 129, 0.8) 100%);
}

.alert-warning .alert-progress {
    background: linear-gradient(90deg,
        rgba(245, 158, 11, 0.3) 0%,
        rgba(245, 158, 11, 0.8) 100%);
}

.alert-error .alert-progress,
.alert-danger .alert-progress {
    background: linear-gradient(90deg,
        rgba(239, 68, 68, 0.3) 0%,
        rgba(239, 68, 68, 0.8) 100%);
}
/* ================================================
   LEADERBOARD TABLE - RESPONSIVE DESIGN
   Bảng xếp hạng Top Dự Đoán responsive cho mobile
   ================================================ */

/* ================================================
   DESKTOP - Default styles (no changes)
   ================================================ */

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

.table thead {
    background-color: var(--color-bg-secondary);
}

.table th {
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--text-xs);
}

.table td {
    font-size: var(--text-sm);
}

/* ================================================
   MOBILE RESPONSIVE - Tablets and below
   ================================================ */

@media (max-width: 1024px) {
    /* Tablet: Hiển thị các cột chính */
    .table thead th {
        font-size: 10px;
        padding: 8px 4px !important;
    }

    .table tbody td {
        padding: 8px 4px !important;
        font-size: 12px;
    }
}

/* ================================================
   MOBILE RESPONSIVE - Mobile phones
   ================================================ */

@media (max-width: 768px) {
    /* Remove fixed table layout on mobile for better flexibility */
    .table-fixed {
        table-layout: auto !important;
    }

    /* Adjust overflow container */
    .overflow-x-auto {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Add scroll indicator shadow */
        background: linear-gradient(to right, white 30%, rgba(255,255,255,0)),
                    linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
                    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)),
                    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-color: white;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .dark .overflow-x-auto {
        background: linear-gradient(to right, rgb(30 41 59) 30%, rgba(30,41,59,0)),
                    linear-gradient(to right, rgba(30,41,59,0), rgb(30 41 59) 70%) 0 100%,
                    radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.3), rgba(0,0,0,0)),
                    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.3), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-color: rgb(30 41 59);
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Make table scrollable but keep header aligned */
    .table {
        min-width: 100%;
        width: max-content;
    }

    /* Optimize column widths for mobile */
    .table thead th:nth-child(1) { /* Hạng */
        width: 50px !important;
        min-width: 50px;
    }

    .table thead th:nth-child(2) { /* Thành viên */
        width: 140px !important;
        min-width: 140px;
    }

    .table thead th:nth-child(6) { /* Tỷ lệ % */
        width: 70px !important;
        min-width: 70px;
    }

    .table thead th:nth-child(7) { /* Điểm */
        width: 60px !important;
        min-width: 60px;
    }

    .table thead th:nth-child(10) { /* Share */
        width: 45px !important;
        min-width: 45px;
    }

    /* Compact header text */
    .table thead th {
        font-size: 9px !important;
        padding: 6px 3px !important;
        line-height: 1.2;
    }

    /* Compact body cells */
    .table tbody td {
        padding: 6px 3px !important;
        font-size: 11px !important;
    }

    /* Adjust rank column */
    .table tbody td:nth-child(1) {
        text-align: center;
    }

    /* Compact user cell */
    .table tbody td:nth-child(2) a {
        gap: 4px !important;
    }

    .table tbody td:nth-child(2) img,
    .table tbody td:nth-child(2) div {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }

    .table tbody td:nth-child(2) span {
        font-size: 11px !important;
        max-width: 90px;
    }

    /* Adjust win rate display */
    .table tbody td:nth-child(6) .font-bold {
        font-size: 12px !important;
    }

    .table tbody td:nth-child(6) .text-\[10px\] {
        font-size: 9px !important;
    }

    /* Adjust points display */
    .table tbody td:nth-child(7) .font-bold {
        font-size: 12px !important;
    }

    /* Compact icons */
    .table tbody td i,
    .table tbody td svg {
        width: 14px !important;
        height: 14px !important;
    }

    .table tbody td button {
        padding: 4px !important;
    }
}

/* ================================================
   EXTRA SMALL MOBILE - Very small screens
   ================================================ */

@media (max-width: 380px) {
    /* Even more compact for very small screens */
    .table thead th {
        font-size: 8px !important;
        padding: 4px 2px !important;
    }

    .table tbody td {
        padding: 4px 2px !important;
        font-size: 10px !important;
    }

    .table thead th:nth-child(2) { /* Thành viên */
        width: 110px !important;
        min-width: 110px;
    }

    .table tbody td:nth-child(2) img,
    .table tbody td:nth-child(2) div {
        width: 24px !important;
        height: 24px !important;
        font-size: 10px !important;
    }

    .table tbody td:nth-child(2) span {
        font-size: 10px !important;
        max-width: 70px;
    }

    /* Smaller emojis for ranks */
    .table tbody td:nth-child(1) span {
        font-size: 18px !important;
    }
}

/* ================================================
   SCROLL INDICATOR - Show user they can scroll
   ================================================ */

@media (max-width: 768px) {
    .overflow-x-auto::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 30px;
        background: linear-gradient(to left, rgba(0,0,0,0.05), transparent);
        pointer-events: none;
        transition: opacity 0.3s ease;
    }

    .dark .overflow-x-auto::after {
        background: linear-gradient(to left, rgba(0,0,0,0.2), transparent);
    }

    /* Hide scroll indicator when scrolled to the end */
    .overflow-x-auto.scrolled-end::after {
        opacity: 0;
    }
}

/* ================================================
   PAGINATION RESPONSIVE
   ================================================ */

@media (max-width: 640px) {
    /* Stack pagination on mobile */
    .flex.flex-col.sm\:flex-row {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Smaller pagination buttons */
    nav.flex.items-center.gap-2 button {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
    }

    nav.flex.items-center.gap-2 i,
    nav.flex.items-center.gap-2 svg {
        width: 14px !important;
        height: 14px !important;
    }
}

/* ================================================
   LOADING & EMPTY STATES
   ================================================ */

@media (max-width: 768px) {
    /* Smaller loading spinner on mobile */
    #leaderboard-loading .w-8 {
        width: 24px !important;
        height: 24px !important;
    }

    /* Compact empty state */
    .table tbody td[colspan] i,
    .table tbody td[colspan] svg {
        width: 48px !important;
        height: 48px !important;
    }

    .table tbody td[colspan] p {
        font-size: 12px !important;
    }
}

/* ================================================
   TOUCH TARGETS - Ensure buttons are tappable
   ================================================ */

@media (max-width: 768px) {
    /* Minimum 44x44 touch targets for mobile */
    .table .follow-user-btn,
    .table .share-user-btn {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================ */

/* Enable GPU acceleration for smooth scrolling */
.overflow-x-auto {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* Smooth scrolling */
.overflow-x-auto {
    scroll-behavior: smooth;
}

/* Hide scrollbar on mobile for cleaner look (optional) */
@media (max-width: 768px) {
    .overflow-x-auto::-webkit-scrollbar {
        height: 4px;
    }

    .overflow-x-auto::-webkit-scrollbar-track {
        background: var(--color-bg-tertiary);
    }

    .overflow-x-auto::-webkit-scrollbar-thumb {
        background: var(--color-text-tertiary);
        border-radius: 2px;
    }
}

/* ================================================
   ACCESSIBILITY - Focus states
   ================================================ */

.table a:focus-visible,
.table button:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: var(--radius-md);
}

/* ================================================
   PRINT STYLES
   ================================================ */

@media print {
    .overflow-x-auto {
        overflow: visible !important;
    }

    .table {
        width: 100% !important;
        table-layout: auto !important;
    }

    /* Show all columns when printing */
    .hidden.md\:table-cell,
    .hidden.lg\:table-cell,
    .hidden.xl\:table-cell {
        display: table-cell !important;
    }
}
/* ================================================
   Z-INDEX FINAL FIX - NUCLEAR OVERRIDE
   File này phải được load CUỐI CÙNG để override mọi z-index khác
   ================================================ */

/* User Dropdown - MUST be above everything */
#user-dropdown,
#user-dropdown.hidden,
#user-dropdown:not(.hidden),
.user-menu .dropdown-menu,
div#user-dropdown {
    position: fixed !important;
    z-index: 999999 !important; /* Ultra maximum - nothing can be higher */
}

/* Notification Dropdown - MUST be above everything */
.notification-dropdown,
#notification-dropdown,
.notification-dropdown.show {
    position: fixed !important;
    z-index: 999999 !important; /* Ultra maximum - nothing can be higher */
}

/* Notification Reply Modal - MUST be the HIGHEST */
.notification-reply-modal,
.notification-reply-modal.show {
    position: fixed !important;
    z-index: 9999999 !important; /* Absolute maximum - above all elements including dropdowns */
}

/* Toast Notifications - ABSOLUTE HIGHEST - above everything */
.notification-toast-container,
#notification-toast-container {
    position: fixed !important;
    z-index: 99999999 !important; /* Ultra maximum - above modals, dropdowns, everything */
}

.notification-toast {
    z-index: 99999999 !important;
}

/* Prediction Toast - ABSOLUTE HIGHEST */
#toast {
    z-index: 99999999 !important;
}

/* Django Messages Container - ABSOLUTE HIGHEST */
.messages-container {
    z-index: 99999999 !important;
}

.alert {
    z-index: 99999999 !important;
}

/* Ensure navigation stays below dropdowns */
nav.main-navigation,
.main-navigation,
nav.main-navigation.scrolled,
.main-navigation.scrolled {
    z-index: 1200 !important; /* Keep navigation at 1200 */
}

/* Debug helper - uncomment to see z-index values */
/*
#user-dropdown::before {
    content: 'Dropdown z-index: 999999';
    position: absolute;
    top: -20px;
    left: 0;
    background: red;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    z-index: 9999999;
}

nav.main-navigation::before {
    content: 'Nav z-index: 1200';
    position: absolute;
    top: 0;
    right: 0;
    background: blue;
    color: white;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    z-index: 9999;
}
*/