/* ==========================================================================
   World Cup 2026 League Stylesheet — League-specific overrides only
   ==========================================================================
   Shared palette, navbar, sidebar, footer, and utility classes live in:
     vinosports-core → static/vinosports/css/design-system.css
   This file contains only World Cup-specific rules.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. LEAGUE TOKEN — emerald green
   -------------------------------------------------------------------------- */

:root {
    --color-accent: 22 101 52;         /* #166534 — deep emerald */
    --color-accent-light: 240 253 244; /* #f0fdf4 — emerald-50 */
    --color-worldcup: 22 101 52;
}


/* --------------------------------------------------------------------------
   2. SIDEBAR CTA BUTTON
   -------------------------------------------------------------------------- */

.sidebar-link--cta {
    background-color: rgb(var(--color-primary));
    color: #fff !important;
    border-radius: 0.5rem;
    font-weight: 700;
    justify-content: center;
    transition: background-color 0.15s ease;
}

.sidebar-link--cta:hover {
    background-color: rgb(var(--color-primary) / 0.85);
}


/* --------------------------------------------------------------------------
   3. HTMX LOADING INDICATOR
   -------------------------------------------------------------------------- */

.htmx-indicator {
    opacity: 0;
    transition: opacity 0.15s ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}


/* --------------------------------------------------------------------------
   4. LIVE MATCH CARD (pulsing green glow)
   -------------------------------------------------------------------------- */

.live-match-card {
    border-color: rgb(var(--color-accent)) !important;
    box-shadow: 0 0 0 1px rgb(var(--color-accent)),
                0 0 12px rgb(var(--color-accent) / 0.15);
    animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgb(var(--color-accent)), 0 0 12px rgb(var(--color-accent) / 0.15); }
    50%       { box-shadow: 0 0 0 1px rgb(var(--color-accent)), 0 0 20px rgb(var(--color-accent) / 0.30); }
}


/* --------------------------------------------------------------------------
   5. BRACKET
   -------------------------------------------------------------------------- */

.bracket-match-card {
    border-left: 3px solid transparent;
    transition: border-left-color 0.15s, box-shadow 0.15s;
}
.bracket-match-card:hover {
    border-left-color: rgb(var(--color-accent));
}
.bracket-match-card--live {
    border-left-color: rgb(var(--color-accent)) !important;
    animation: live-pulse 2s ease-in-out infinite;
}
.bracket-match-card--finished {
    opacity: 0.85;
}

.bracket-stage-connector {
    display: none;
}
@media (min-width: 768px) {
    .bracket-stage-connector {
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgb(var(--color-border));
        font-size: 1.25rem;
    }
}


/* --------------------------------------------------------------------------
   6. GROUP TABLES
   -------------------------------------------------------------------------- */

.group-table thead th {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--color-muted));
    padding: 0.5rem 0.625rem;
}

.group-table tbody tr {
    border-top: 1px solid rgb(var(--color-border));
    transition: background-color 0.1s;
}
.group-table tbody tr:hover {
    background-color: rgb(var(--color-accent) / 0.04);
}
.group-table tbody td {
    padding: 0.5rem 0.625rem;
    font-size: 0.8125rem;
}

/* Qualification line — separates advancing teams from eliminated */
.group-table tr.qualify-border td {
    border-top: 2px solid rgb(var(--color-accent)) !important;
}


/* --------------------------------------------------------------------------
   7. TOAST NOTIFICATIONS
   -------------------------------------------------------------------------- */

.toast-shell {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
    max-width: 100%;
}

.toast-message {
    font-size: 0.875rem;
    color: rgb(var(--color-text));
    flex: 1;
    min-width: 0;
}

.toast-dismiss {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0.25rem;
    color: rgb(var(--color-muted));
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}
.toast-dismiss:hover {
    color: rgb(var(--color-text));
    background-color: rgb(var(--color-accent-light));
}


/* --------------------------------------------------------------------------
   8. ACTIVITY TOASTS
   -------------------------------------------------------------------------- */

.activity-toast {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background-color: rgb(var(--color-surface));
    border: 1px solid rgb(var(--color-border));
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    font-size: 0.8125rem;
    text-decoration: none;
    color: rgb(var(--color-text));
    transition: border-color 0.15s, box-shadow 0.15s;
}
a.activity-toast:hover {
    border-color: rgb(var(--color-accent));
    box-shadow: 0 2px 8px rgb(var(--color-accent) / 0.1);
}

.activity-toast-icon {
    font-size: 1rem;
    color: rgb(var(--color-accent));
    flex-shrink: 0;
}

.activity-toast-message {
    font-size: 0.8125rem;
    color: rgb(var(--color-text));
    line-height: 1.4;
}


/* --------------------------------------------------------------------------
   9. FUTURES BET BUTTON
   -------------------------------------------------------------------------- */

.futures-bet-btn {
    display: inline-block;
    border: 2px solid rgb(var(--color-accent));
    color: rgb(var(--color-accent));
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    font-style: italic;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
    cursor: pointer;
}
.futures-bet-btn:hover {
    background-color: rgb(var(--color-accent));
    color: #fff;
}
.futures-bet-btn:active {
    transform: scale(0.95);
}
.futures-bet-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* --------------------------------------------------------------------------
   10. SLIDE ANIMATIONS
   -------------------------------------------------------------------------- */

@keyframes slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slide-out-right {
    from { transform: translateX(0);    opacity: 1; }
    to   { transform: translateX(100%); opacity: 0; }
}

.animate-slide-in  { animation: slide-in-right 0.3s ease-out forwards; }
.animate-slide-out { animation: slide-out-right 0.25s ease-in forwards; }


/* --------------------------------------------------------------------------
   11. CONFEDERATION BADGES
   -------------------------------------------------------------------------- */

.confed-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.confed-badge--UEFA     { background: #e0e7ff; color: #3730a3; }
.confed-badge--CONMEBOL { background: #fef9c3; color: #854d0e; }
.confed-badge--CONCACAF { background: #fce7f3; color: #9d174d; }
.confed-badge--AFC      { background: #dcfce7; color: #166534; }
.confed-badge--CAF      { background: #ffedd5; color: #c2410c; }
.confed-badge--OFC      { background: #f0f9ff; color: #0c4a6e; }