/* Fortune 500 Corporate Theme - Global Styles */

:root {
    --topbar-h: 3.5rem; /* Define top bar height globally */
    /* --- Corporate Color Palette --- */
    --primary-blue: #005fcc;
    --primary-blue-rgb: 0, 95, 204;
    --light-blue: #e6f0fa;
    --text-dark: #222222;
    --text-light: #666666;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --border-color: #dee2e6;
    --header-bg: #f1f3f5; /* New color for table headers */
    --gold-glow: #FACC15;
    /* --- Theme Variables --- */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow-soft: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-medium: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    /* Transitions */
    --transition-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --glow-rgb: 250, 204, 21;  /* gold hover glow */
    --accent-red: 255, 40, 40; /* vivid red rim on highlight */
}

html, body {
    font-family: var(--font-primary);
    background-color: var(--bg-light);
    color: var(--text-dark);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text-dark);
}

a {
    color: var(--primary-blue);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* --- UPDATED: Global Panel Style --- */
/* Increased specificity to override potential conflicts */
div.panel, header.panel, section.panel, aside.panel {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}

/* --- REVISED: Global Table Styles --- */
/* This container will hold the border and rounded corners */
.schedule-table-container {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
}

.styled-table {
    width: 100%;
    border-collapse: collapse; /* Changed to collapse for cleaner lines */
    border-spacing: 0;
    /* The border is now on the container, so it's removed from the table */
}

.styled-table thead th {
    background-color: var(--header-bg) !important;
    color: var(--text-light);
    padding: 0.8rem 0.5rem;
    text-align: center;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
}
    
.styled-table thead th:last-child {
    border-right: none;
}

.styled-table tbody td {
    border-bottom: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    padding: 6px;
    vertical-align: middle;
    background-color: var(--bg-white);
}

.styled-table tbody td:last-child {
    border-right: none;
}

.styled-table tbody tr:last-child td {
    border-bottom: none;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxwYXRoIGQ9TTI2LjE0NCA0OC45OTJMLTI1LjgzIDQ5LjMzNFYyOC4xODJMLTI1LjgzIDQ5LjMzNEw1MS4xNjggNDkuMDIzTDI2LjE0NCA0OC45OTJaTTI2LjE0NCA0OC45OTIiIGlkPSJzdmdfMSIvPjwvZGVmcz48Zz48dXNlIHhsaW5rOmhyZWY9IiNzdmdfMSIgb3BhY2l0eT0iMC4yIiBmaWxsPSIjZmZmMmIzIiBmaWxsLW9wYWNpdHk9IjEiLz48dXNlIHhsaW5rOmhyZWY9IiNzdmdfMSIgb3BhY2l0eT0iMC4yIiBmaWxsPSIjZmZmMmIzIiBmaWxsLW9wYWNpdHk9IjEiLz48dXNlIHhsaW5rOmhyZWY9IiNzdmdfMSIgb3BhY2l0eT0iMC4yIiBmaWxsPSIjZmZmMmIzIiBmaWxsLW9wYWNpdHk9IjEiLz48dXNlIHhsaW5rOmhyZWY9IiNzdmdfMSIgb3BhY2l0eT0iMC4yIiBmaWxsPSIjZmZmMmIzIiBmaWxsLW9wYWNpdHk9IjEiLz48L2c+PC9zdmc+) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.status-bar-safe-area {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: block;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
    }
}

/* --- Layout: Side Panel + Main Content (REVISED) --- */
#app-layout {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    padding-top: var(--topbar-h); /* Add padding to offset for fixed nav */
}

.top-nav-bar {
    position: fixed; /* Ensure this is fixed to the top */
    top: 0;
    left: 0;
    right: 0;
    height: var(--topbar-h);
    z-index: 20;
}

/* When panel is open: 2-column grid (panel + content) */
#app-layout.sp-open .main-container {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    column-gap: 1rem;
    align-items: start;
    width: 100%;
    padding: 0 1rem 2rem;
    box-sizing: border-box;
}

/* When panel collapsed: single column */
#app-layout:not(.sp-open) .main-container {
    display: block;
    width: 100%;
    padding: 0 1rem 2rem;
    box-sizing: border-box;
}

/* Side panel (grid col 1) */
.side-panel {
    grid-column: 1;
    width: 260px;
    max-width: 260px;
    height: calc(100dvh - 56px);
    overflow-y: auto;
    scrollbar-gutter: stable;
    transition: transform var(--transition-base);
    background: var(--bg-white);
    position: relative;
    z-index: 10;
}

/* All non-panel content occupies column 2 when open */
#app-layout.sp-open .main-container > :not(.side-panel):not(.show-panel-btn) {
    grid-column: 2;
    min-width: 0;
}

/* Main content flex growth inside its grid cell */
.schedule-page,
.main-content {
    min-width: 0;
}

/* Collapsed state: slide panel off-canvas (overlay style) */
#app-layout:not(.sp-open) .side-panel {
    position: absolute;
    top: var(--topbar-h); /* Use variable for positioning */
    left: 0;
    height: calc(100dvh - var(--topbar-h)); /* Use variable for height */
    transform: translateX(-110%);
    box-shadow: var(--shadow-medium);
    border-right: 1px solid var(--border-color);
    border-radius: 0 12px 12px 0;
}

/* Show when toggled open in collapsed mode */
#app-layout:not(.sp-open) .side-panel.is-temp-open,
#app-layout:not(.sp-open).sp-force-open .side-panel {
    transform: translateX(0);
}

/* Toggle button */
.show-panel-btn {
    position: fixed;
    top: 70px;
    left: 8px;
    z-index: 30;
}

/* Desktop: Panel visible when sp-open class is present */
@media (min-width: 901px) {
    #app-layout.sp-open .main-container {
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr);
        column-gap: 1rem;
        align-items: start;
        width: 100%;
        padding: 0 1rem 2rem;
        box-sizing: border-box;
    }

    #app-layout.sp-open .side-panel {
        grid-column: 1;
        width: 260px;
        max-width: 260px;
        height: calc(100dvh - var(--topbar-h));
        overflow-y: auto;
        transform: translateX(0);
        position: relative;
    }

    #app-layout.sp-open .main-container > :not(.side-panel) {
        grid-column: 2;
        min-width: 0;
    }

    /* Hidden state on desktop */
    #app-layout:not(.sp-open) .side-panel {
        transform: translateX(-100%);
    }
}

/* Mobile: Always hide panel */
@media (max-width: 900px) {
    #app-layout .main-container {
        display: block !important;
        padding: 0 1rem 2rem;
    }

    #app-layout .side-panel {
        position: fixed !important;
        top: var(--topbar-h);
        left: 0;
        bottom: 0;
        height: auto;
        max-height: calc(100dvh - var(--topbar-h));
        transform: translateX(-100%) !important;
        box-shadow: var(--shadow-medium);
        border-radius: 0 12px 12px 0;
        z-index: 10;
    }

    .schedule-page,
    .main-content {
        width: 100% !important;
        min-width: 0;
    }
}

/* Ensure table container still responsive inside new layout */
.schedule-table-container {
    max-width: 100%;
    overflow-x: auto;
}

/* --- Matchup card: bright red trim + size pulse --- */
/* Prepare card for effects */
.schedule-page .matchup-card,
.mobile-schedule-list .matchup-card {
    position: relative;
    will-change: transform, box-shadow;
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
    z-index: 1;
}

/* Strong red trim + glow */
.schedule-page .matchup-card:hover,
.schedule-page .matchup-card.is-live,
.schedule-page .matchup-card.is-featured,
.schedule-page .matchup-card.pulse,
.mobile-schedule-list .matchup-card:hover,
.mobile-schedule-list .matchup-card.is-live,
.mobile-schedule-list .matchup-card.is-featured,
.mobile-schedule-list .matchup-card.pulse {
    /* vivid red rim and glow */
    box-shadow:
        0 0 0 3px rgba(var(--accent-red), 0.98),
        0 10px 22px rgba(0, 0, 0, 0.12),
        0 18px 48px rgba(var(--accent-red), 0.50) !important;
}

/* Red pulse ring outside the card */
.schedule-page .matchup-card:hover::after,
.schedule-page .matchup-card.is-live::after,
.schedule-page .matchup-card.is-featured::after,
.schedule-page .matchup-card.pulse::after,
.mobile-schedule-list .matchup-card:hover::after,
.mobile-schedule-list .matchup-card.is-live::after,
.mobile-schedule-list .matchup-card.is-featured::after,
.mobile-schedule-list .matchup-card.pulse::after {
    content: "";
    position: absolute;
    inset: -10px;              /* ring just outside the card */
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;                /* behind card content */
    box-shadow: 0 0 0 0 rgba(var(--accent-red), 0.65);
    animation: redPulseRing 1.25s ease-out infinite;
}

/* Size pulse (gentle scale in/out) */
.schedule-page .matchup-card:hover,
.schedule-page .matchup-card.is-live,
.schedule-page .matchup-card.is-featured,
.schedule-page .matchup-card.pulse,
.mobile-schedule-list .matchup-card:hover,
.mobile-schedule-list .matchup-card.is-live,
.mobile-schedule-list .matchup-card.is-featured,
.mobile-schedule-list .matchup-card.pulse {
    animation: scalePulse 1.25s ease-in-out infinite;
}

/* --- Matchup card effects: hover vs click-highlight (no conflicts) --- */
/* Base */
.schedule-page .matchup-card,
.mobile-schedule-list .matchup-card {
    position: relative;
    will-change: transform, box-shadow;
    transition: box-shadow var(--transition-base), transform var(--transition-fast);
    z-index: 1;
}

/* Hover: breathing size pulse + subtle gold glow (NO red rim) */
.schedule-page .matchup-card:hover,
.mobile-schedule-list .matchup-card:hover {
    animation: scalePulse 1.1s ease-in-out infinite;
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.12),
        0 14px 36px rgba(var(--glow-rgb), 0.22) !important;
}
.schedule-page .matchup-card:hover::after,
.mobile-schedule-list .matchup-card:hover::after {
    content: none !important; /* ensure no red ring on hover */
}

/* Click-highlight: add .is-highlighted to card(s) after team click */
.schedule-page .matchup-card.is-highlighted,
.mobile-schedule-list .matchup-card.is-highlighted {
    animation: scalePulse 1.25s ease-in-out infinite;
    box-shadow:
        0 0 0 3px rgba(var(--accent-red), 0.98),
        0 10px 22px rgba(0, 0, 0, 0.12),
        0 18px 48px rgba(var(--accent-red), 0.50) !important;
}
.schedule-page .matchup-card.is-highlighted::after,
.mobile-schedule-list .matchup-card.is-highlighted::after {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 16px;
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 0 0 0 rgba(var(--accent-red), 0.65);
    animation: redPulseRing 1.25s ease-out infinite;
}

/* Compose: when both classes exist, run scale + gold glow + red rim */
.schedule-page .matchup-card.is-highlighted.anchor-highlight,
.mobile-schedule-list .matchup-card.is-highlighted.anchor-highlight {
    /* scale breathing + gold glow + red border color pulse (3 cycles) */
    animation:
        scalePulse 1200ms ease-in-out 3,
        anchor-glow 1200ms ease-in-out 3,
        anchor-rim 1200ms ease-in-out 3 !important;
}

/* Keyframes */
@keyframes scalePulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(.98); }
}
@keyframes redPulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(var(--accent-red), 0.60); opacity: 1; }
    55%  { box-shadow: 0 0 26px 22px rgba(var(--accent-red), 0.00); opacity: 0.55; }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-red), 0.00); opacity: 0; }
}

/* Base: make sure cards can show a rim/glow cleanly */
.game-card, .mobile-game-card, .matchup-card {
  border: 2px solid transparent;
  border-radius: 0.5rem;
  will-change: transform, box-shadow, border-color;
}

/* Golden glow + red rim + gentle breathing */
@keyframes anchor-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
@keyframes anchor-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,0); }
  50% { box-shadow: 0 0 30px 8px rgba(255,215,0,0.75); }
}
@keyframes anchor-rim {
  0%, 100% { border-color: #c1121f; }
  50% { border-color: #ff3b3b; }
}

.anchor-highlight {
  animation:
    anchor-breath 1200ms ease-in-out 3,
    anchor-glow 1200ms ease-in-out 3,
    anchor-rim 1200ms ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
  .anchor-highlight {
    animation: none;
    border-color: #c1121f;
    box-shadow: 0 0 12px 4px rgba(255,215,0,0.6);
  }
}

.content-area.no-side-panel {
    width: 100%;
    padding-left: 1rem; /* Adjust as needed for consistent padding */
}

}