/*
 * Retro Wrestling Empire - Desktop Layout Stylesheet
 * Created: October 2025
 */

:root {
    color-scheme: dark;
    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --sidebar-width: clamp(260px, 18vw, 320px);
    --topbar-height: 68px;
    --surface: #0f172a;
    --surface-alt: #111c34;
    --surface-elevated: #17233f;
    --surface-highlight: #1f2d52;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5f5;
    --text-muted: #94a3bd;
    --accent: #4f9dff;
    --accent-strong: #7dd3fc;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --border: rgba(148, 163, 189, 0.24);
    /* Subtle border used in some panels */
    --border-subtle: rgba(148, 163, 189, 0.18);
    --shadow-soft: 0 16px 40px rgba(8, 11, 26, 0.35);
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --glass: rgba(15, 23, 42, 0.55);
    --glass-border: rgba(255, 255, 255, 0.05);

    /* Aliases for legacy variable names used across modules */
    --accent-primary: var(--accent);
    --accent-hover: #3b82f6; /* slightly stronger than --accent */
    --accent-success: #22c55e; /* matches success family */
    --accent-gold: #f59e0b; /* golden accent for highlights */

    /* Background aliases used by booking components */
    --bg-secondary: #1e1e1e;
    --bg-elevated: #2a2a2a;

    /* Radius/shadow aliases expected by some components */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    --shadow-md: 0 8px 20px rgba(8, 11, 26, 0.28);
    --shadow-lg: 0 18px 40px rgba(8, 11, 26, 0.38);
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    background: radial-gradient(circle at 20% 20%, rgba(79, 157, 255, 0.08), transparent 55%),
                radial-gradient(circle at 80% 0%, rgba(79, 157, 255, 0.12), transparent 60%),
                linear-gradient(135deg, #0b1221 0%, #05070f 100%);
    color: var(--text-primary);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    font-size: 15px;
    line-height: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: linear-gradient(135deg, rgba(79, 157, 255, 0.12), rgba(79, 157, 255, 0.05));
    color: var(--text-primary);
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}

button:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(79, 157, 255, 0.18);
}

button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

button.primary {
    background: linear-gradient(135deg, var(--accent), #2563eb);
    border-color: rgba(79, 157, 255, 0.52);
    color: #0b1221;
    font-weight: 600;
}

button.ghost {
    background: transparent;
    border-color: rgba(148, 163, 189, 0.28);
    color: var(--text-secondary);
}

.topbar-button {
    padding: var(--space-3) var(--space-5);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.topbar-button.ghost {
    background: transparent;
    border-color: rgba(79, 157, 255, 0.18);
    color: var(--text-secondary);
}

.topbar-button.ghost:hover:not(:disabled) {
    border-color: rgba(79, 157, 255, 0.35);
    color: var(--text-primary);
}

.topbar-button.primary.disabled {
    opacity: 0.35;
}

.desktop-warning {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    align-items: center;
    justify-content: center;
    background: rgba(5, 8, 16, 0.92);
    text-align: center;
    padding: var(--space-6);
}

.desktop-warning__content {
    max-width: 520px;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, rgba(17, 24, 39, 0.85), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(79, 157, 255, 0.22);
    box-shadow: var(--shadow-soft);
}

@media (max-width: 1023px) {
    .desktop-warning {
        display: flex;
    }
    .app-shell {
        display: none;
    }
}

.loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: none;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.18), rgba(8, 11, 26, 0.95));
    backdrop-filter: blur(8px);
    border: none;
    box-shadow: none;
    padding: 0;
}

.loading-overlay.active {
    display: flex;
}

.loading-content {
    width: clamp(320px, 32vw, 480px);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(79, 157, 255, 0.18);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.92), rgba(15, 25, 48, 0.98));
    box-shadow: var(--shadow-soft);
    text-align: center;
}

/* Negotiation panel specific tweaks inside modal */
#contract-negotiation-panel.wrestler-modal-card {
    margin: 0 auto;
    padding: var(--space-5);
    border-radius: var(--radius-md);
    /* Solid, opaque background: match elevated surfaces */
    background: linear-gradient(160deg, var(--surface-elevated), var(--surface-highlight));
    border: 1px solid rgba(79, 157, 255, 0.12);
}

#contract-negotiation-panel .wm-header h2 {
    font-size: clamp(20px, 2.4vw, 28px);
}

#contract-negotiation-panel .modal-buttons .primary-button,
#contract-negotiation-panel .modal-buttons .secondary-button,
#contract-negotiation-panel .modal-buttons .success-button,
#contract-negotiation-panel .modal-buttons .cancel-button {
    min-width: 140px;
}

/* ==========================================
   Global Modal Styles (app-wide)
   ========================================== */
.modal.hidden { display: none !important; }

.modal {
    position: fixed;
    inset: 0;
    z-index: 950;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: radial-gradient(circle at top, rgba(37, 99, 235, 0.10), rgba(8, 11, 26, 0.86));
    backdrop-filter: blur(10px);
}

.modal .modal-content {
    position: relative;
    width: min(760px, 100%);
    max-height: 82vh;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--glass-border);
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(21, 30, 55, 0.98));
    box-shadow: var(--shadow-lg);
    padding: var(--space-6);
}

.modal .modal-swipe-handle {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 4px;
    border-radius: 999px;
    background: rgba(148, 163, 189, 0.28);
}

.modal .close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(79, 157, 255, 0.25);
    background: linear-gradient(135deg, rgba(79, 157, 255, 0.14), rgba(79, 157, 255, 0.06));
    color: var(--text-primary);
}

#modal-body,
#save-load-modal-body {
    overflow-y: auto;
    max-height: calc(82vh - 80px);
}

/* When showing an inner-only card, hide outer chrome and close button */
.modal.inner-only {
    background: transparent;
    backdrop-filter: none;
}
.modal.inner-only .close,
.modal.inner-only .modal-swipe-handle {
    display: none !important;
}
.modal.inner-only .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.loading-logo h1 {
    font-size: clamp(36px, 4vw, 48px);
    margin: 0;
    letter-spacing: 0.12em;
}

.loading-tagline {
    margin: var(--space-2) 0 var(--space-5);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3em;
}

.loading-progress-container {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.loading-progress-bar {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(148, 163, 189, 0.18);
    overflow: hidden;
}

.loading-progress-fill {
    position: absolute;
    inset: 0;
    width: 0%;
    background: linear-gradient(135deg, var(--accent), var(--accent-strong));
    border-radius: inherit;
    transition: width 160ms ease-out;
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    min-height: 100dvh;
}

.app-sidebar {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) var(--space-5);
    background: linear-gradient(160deg, rgba(11, 17, 31, 0.95), rgba(8, 12, 21, 0.87));
    border-right: 1px solid rgba(79, 157, 255, 0.12);
}

.sidebar-branding {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.sidebar-logo {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(79, 157, 255, 0.28), rgba(37, 99, 235, 0.08));
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.sidebar-meta {
    display: grid;
    gap: var(--space-1);
}

.sidebar-app-name {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-muted);
}

.sidebar-company {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(23, 35, 65, 0.7), rgba(17, 24, 46, 0.4));
    border: 1px solid rgba(79, 157, 255, 0.15);
}

.summary-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
}

/* Removed labels; date value stands on its own */
.summary-label { display: none; }

.summary-value { font-size: 16px; font-weight: 600; }
.summary-item--date .summary-value { white-space: nowrap; }

/* Sidebar Advance Day button style within summary */
#advance-day-sidebar {
    padding: 6px 10px;
    line-height: 1;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #2563eb);
    border-color: rgba(79, 157, 255, 0.52);
    color: #0b1221;
    font-weight: 700;
}

/* Date becomes a button for navigation */
.summary-date-button {
    background: transparent;
    border: 1px solid rgba(79,157,255,0.25);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 6px 10px;
}
.summary-date-button:hover { border-color: rgba(79,157,255,0.4); }

/* Small link under date */
.summary-link {
    justify-self: start;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0;
    margin: 0 0 2px 0;
}
.summary-link:hover { color: var(--text-secondary); text-decoration: underline; }

/* Television split pages */
.tv-minimal-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.tv-minimal-controls select,
.tv-minimal-controls input[type="text"] {
    background: rgba(79,157,255,0.08);
    border: 1px solid rgba(79,157,255,0.22);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 6px 8px;
}

/* Make Roster and Free Agents controls match TV controls */
#roster select,
#roster input[type="text"],
#free-agents select,
#free-agents input[type="text"] {
    background: rgba(79,157,255,0.08);
    border: 1px solid rgba(79,157,255,0.22);
    color: var(--text-primary);
    border-radius: 8px;
    padding: 6px 8px;
}

/* Tighten spacing for controls rows on Roster/FA to match minimal look */
#roster .roster-controls-row,
#free-agents .roster-controls-row,
#free-agents .analytics-controls-row,
#roster .analytics-controls-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.tv-minimal-panel .summary-cards-grid,
.tv-minimal-panel .tv-shows-grid,
.tier-container {
    gap: 10px !important;
}
.tier-heading {
    margin: 8px 0;
    font-size: 14px;
    color: var(--text-secondary);
}

    /* ==========================================
       Booking Screen: Core Styles (harmonized)
       ========================================== */
    /* Accordion for booking */
    button.accordion,
    .accordion {
        background: linear-gradient(135deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
        color: var(--text-primary);
        cursor: pointer;
        padding: var(--space-4);
        width: 100%;
        border: 1px solid var(--border-subtle);
        text-align: left;
        outline: none;
        font-size: 15px;
        transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
        border-radius: var(--radius-sm);
        box-shadow: 0 6px 14px rgba(8, 11, 26, 0.22);
        background-image: none; /* neutralize base button gradient */
    }

    button.accordion:hover,
    .accordion:hover { 
        background: linear-gradient(135deg, rgba(79, 157, 255, 0.08), rgba(79, 157, 255, 0.04));
        border-color: rgba(79,157,255,0.28);
        transform: translateY(-1px);
    }

    /* Make the last accordion (Main Event) subtly stand out */
    button.accordion:last-of-type,
    .accordion:last-of-type {
        border-left: 4px solid var(--accent);
        background: linear-gradient(135deg, rgba(79,157,255,0.06), rgba(79,157,255,0.03));
    }

    .panel {
        padding: 0 var(--space-4);
        background: rgba(15, 23, 42, 0.5);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
        border-radius: 0 0 var(--radius-sm) var(--radius-sm);
        border: 1px solid var(--glass-border);
        border-top: none;
    }

    /* Tabs for booking */
    .tab-nav { 
        display: flex; 
        border-bottom: 1px solid var(--border-subtle); 
        margin-bottom: var(--space-3);
        gap: var(--space-2);
    }
    .tab-nav .tab,
    button.tab {
        flex: 1;
        padding: var(--space-3);
        background: rgba(79, 157, 255, 0.06);
        color: var(--text-secondary);
        border: 1px solid var(--border-subtle);
        border-bottom: 2px solid transparent;
        cursor: pointer;
        text-align: center;
        font-size: 14px;
        transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
        border-radius: var(--radius-sm) var(--radius-sm) 0 0;
        background-image: none; /* neutralize base button gradient */
        box-shadow: none; /* neutralize base button shadow */
    }
    .tab-nav .tab:disabled,
    button.tab:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        filter: grayscale(0.2);
    }
    .tab-nav .tab:hover,
    button.tab:hover { 
        background: rgba(79, 157, 255, 0.12); 
        color: var(--text-primary);
        transform: translateY(-1px);
    }
    .tab-nav .tab.active,
    button.tab.active { 
        background: linear-gradient(135deg, var(--accent), #2563eb); 
        border-color: rgba(79,157,255,0.42);
        color: #0b1221; 
        font-weight: 700;
    }
    .tab-content { padding: var(--space-3); }

    /* Type selection buttons */
    .type-container { display: flex; gap: var(--space-2); }
    .type-button,
    button.type-button {
        flex: 1;
        padding: var(--space-3);
        background: rgba(255,255,255,0.02);
        color: var(--text-primary);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        cursor: pointer;
        font-size: 14px;
        transition: background var(--transition), transform var(--transition), border-color var(--transition), color var(--transition);
        background-image: none; /* neutralize base button gradient */
        box-shadow: none; /* neutralize base button shadow */
    }
    .type-button:hover,
    button.type-button:hover { background: rgba(79, 157, 255, 0.08); transform: translateY(-1px); border-color: rgba(79,157,255,0.32); }
    .type-button.active,
    button.type-button.active { background: linear-gradient(135deg, var(--accent), #2563eb); color: #0b1221; font-weight: 700; border-color: rgba(79,157,255,0.42); }

    /* Keyboard focus rings */
    .accordion:focus-visible, .tab:focus-visible, .type-button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    /* Active/open accordion state */
    button.accordion.active,
    .accordion.active {
        background: linear-gradient(135deg, rgba(79,157,255,0.12), rgba(79,157,255,0.06));
        border-color: rgba(79,157,255,0.42);
        box-shadow: 0 14px 32px rgba(8, 11, 26, 0.35);
    }

    /* Enhanced Match Booking System Styles */
    .match-booking-steps { margin-bottom: 20px; }
    .top-navigation {
        display: flex; justify-content: space-between; gap: var(--space-3);
        margin-top: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border-subtle);
    }
    .step-indicator {
        display: flex; justify-content: space-between; align-items: center;
        background: var(--surface-elevated); padding: var(--space-4) var(--space-5);
        border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); gap: var(--space-3);
        box-shadow: var(--shadow-soft);
    }
    .step {
        flex: 1; padding: var(--space-3) var(--space-2); text-align: center;
        background: rgba(79,157,255,0.06); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
        color: var(--text-muted); font-size: 12px; font-weight: 700; transition: all var(--transition);
    }
    .step.active { background: linear-gradient(135deg, var(--accent), #2563eb); color: #0b1221; border-color: rgba(79,157,255,0.42); }
    .step.completed { background: linear-gradient(135deg, var(--success), #16a34a); color: #031020; border-color: rgba(34,197,94,0.42); }
    .match-step-content {
        background: linear-gradient(160deg, rgba(16,25,46,0.35), rgba(12,19,36,0.25)); padding: var(--space-5);
        border-radius: var(--radius-sm); border: 1px solid var(--border-subtle);
        min-height: 400px; max-height: none !important; height: auto !important;
    }

    /* Match Type Selection */
    .match-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .match-type-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-4); cursor: pointer; transition: all var(--transition); }
    .match-type-card:hover { border-color: rgba(79,157,255,0.42); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .match-type-card.selected { border-color: rgba(79,157,255,0.52); background: linear-gradient(135deg, rgba(79,157,255,0.12), rgba(79,157,255,0.06)); }
    .match-type-card h4 { color: var(--text-primary); margin-bottom: var(--space-2); }
    .match-type-card p { color: var(--text-secondary); margin-bottom: var(--space-3); font-size: 14px; }
    .match-type-stats { display: flex; justify-content: space-between; gap: 10px; }
    .match-type-stats small { background: #1a1a1a; padding: 4px 8px; border-radius: 4px; color: #aaa; font-size: 11px; }

    /* Wrestler Assignment */
    .wrestler-assignment-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); }
    .side-container { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-4); }
    .side-container h4 { color: var(--text-primary); margin-bottom: var(--space-3); text-align: center; }
    .side-wrestlers { min-height: 60px; margin-bottom: var(--space-3); padding: var(--space-3); background: rgba(15,25,48,0.4); border-radius: var(--radius-sm); border: 1px dashed var(--border-subtle); }
    .wrestler-tag { display: inline-block; background: linear-gradient(135deg, var(--accent), #2563eb); color: #0b1221; padding: 4px 8px; border-radius: var(--radius-sm); margin: 2px; font-size: 12px; font-weight: 700; }
    .wrestler-tag button { background: none; border: none; color: #fff; margin-left: 5px; cursor: pointer; font-weight: bold; }

    /* Winner, Win Type, Interference, Post-Match, etc. */
    .winners-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .winner-selection-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-4); text-align: center; cursor: pointer; transition: all var(--transition); }
    .winner-selection-card:hover { border-color: rgba(79,157,255,0.42); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .winner-selection-card.selected { border-color: rgba(34,197,94,0.52); background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.06)); }
    .winner-selection-card img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 10px; }
    .winner-selection-card h4 { color: #fff; margin-bottom: 5px; }
    .winner-selection-card p { color: #aaa; font-size: 12px; }

    .win-types-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .win-type-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-5); text-align: center; cursor: pointer; transition: all var(--transition); }
    .win-type-card:hover { border-color: rgba(79,157,255,0.42); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .win-type-card.selected { border-color: rgba(34,197,94,0.52); background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.06)); }
    .win-type-card h4 { color: #fff; margin-bottom: 10px; }
    .win-type-card p { color: #ccc; font-size: 14px; }

    .interference-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .interference-card { background: var(--surface-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: var(--space-5); text-align: center; cursor: pointer; transition: all var(--transition); }
    .interference-card:hover { border-color: rgba(79,157,255,0.42); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
    .interference-card.selected { border-color: rgba(34,197,94,0.52); background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.06)); }
    .interference-card h4 { color: #fff; margin-bottom: 10px; }
    .interference-card p { color: #ccc; font-size: 14px; }
    .interferer-selection { margin-top: 20px; padding: 15px; background: #1a1a1a; border-radius: 6px; }
    .interferer-selection h4 { color: #fff; margin-bottom: 15px; }
    .interferer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 15px; }
    .interferer-card { background: #2a2a2a; border: 1px solid #444; border-radius: 6px; padding: 10px; text-align: center; cursor: pointer; transition: all 0.3s ease; }
    .interferer-card:hover { border-color: #4a90e2; }
    .interferer-card.selected { border-color: #4caf50; background: #2a2a2a; }
    .interferer-card img { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 5px; }

    /* ==========================================
       Booking Segments (moved from legacy styles)
       ========================================== */
    .event-segments {
        padding: var(--space-4);
        margin: var(--space-5) 0;
        background: linear-gradient(160deg, rgba(16,25,46,0.35), rgba(12,19,36,0.25));
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
    }

    .event-segment {
        background: rgba(15, 25, 48, 0.5);
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-sm);
        padding: var(--space-3);
        margin-bottom: var(--space-3);
    }
    .event-segment:last-child { margin-bottom: 0; }

    .segment-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-2);
    }

    .segment-rating-display { display: flex; align-items: center; gap: var(--space-2); }

    .segment-type {
        background: rgba(79,157,255,0.14);
        color: var(--text-primary);
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid rgba(79,157,255,0.28);
    }

    .segment-rating {
        padding: 4px 10px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid transparent;
        color: #0b1221;
    }
    .rating-high { background: linear-gradient(135deg, var(--success), #16a34a); border-color: rgba(34,197,94,0.4); }
    .rating-medium { background: linear-gradient(135deg, var(--warning), #f59e0b); border-color: rgba(245,158,11,0.4); }
    .rating-low { background: linear-gradient(135deg, var(--danger), #ef4444); border-color: rgba(248,113,113,0.4); }

    .no-segments {
        color: var(--text-muted);
        text-align: center;
        padding: var(--space-4);
        border: 1px dashed var(--border-subtle);
        border-radius: var(--radius-sm);
        background: rgba(15, 23, 42, 0.35);
    }
    .interferer-card h5 { color: #fff; font-size: 11px; }
    .target-selection { margin-top: 15px; }
    .target-selection h5 { color: #fff; margin-bottom: 10px; }
    .target-grid { display: flex; flex-wrap: wrap; gap: 10px; }
    .target-btn { background: var(--bg-secondary); color: var(--text-primary); border: 2px solid var(--border-subtle); padding: 12px 16px; border-radius: var(--border-radius-md); cursor: pointer; transition: all 0.3s ease; font-size: 14px; text-align: left; min-width: 200px; }
    .target-btn:hover { background: var(--bg-elevated); border-color: var(--accent-primary); transform: translateY(-2px); box-shadow: var(--shadow-md); }
    .target-btn.selected { background: var(--accent-success); color: #fff; border-color: var(--accent-success); }
    .target-side-label { font-weight: bold; font-size: 16px; margin-bottom: 4px; color: var(--accent-primary); }
    .target-btn.selected .target-side-label { color: #fff; }
    .target-wrestlers { font-size: 13px; color: var(--text-secondary); line-height: 1.3; }
    .target-btn.selected .target-wrestlers { color: rgba(255,255,255,0.9); }

    /* Post Match Events */
    .post-match-events { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .post-match-card { background: #2a2a2a; border: 1px solid #444; border-radius: 8px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s ease; }

    /* Available wrestlers pool (grid/list switches handled elsewhere) */
    .available-wrestlers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
    .wrestler-selection-card { background: #2a2a2a; border: 1px solid #444; border-radius: 8px; padding: 10px; text-align: center; cursor: pointer; transition: all 0.25s ease; }
    .wrestler-selection-card:hover { border-color: #4a90e2; transform: translateY(-2px); }
    .wrestler-selection-card img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; border: 2px solid rgba(79,157,255,0.28); }
    .wrestler-selection-card h5 { color: #fff; margin: 4px 0 2px; font-size: 14px; font-weight: 700; }
    .wrestler-selection-card p { color: #cbd5e1; font-size: 12px; margin: 0; }

    /* Assigned/selected wrestler chips inside sides */
    .selected-wrestler-card,
    .assigned-wrestler-card { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 8px; background: #1f2937; border: 1px solid #374151; margin-bottom: 8px; }
    .selected-wrestler-card .wrestler-card-header { background: transparent; padding: 0; grid-template-columns: 40px 1fr auto; }
    .selected-wrestler-card .wrestler-photo { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(79,157,255,0.28); }
    .selected-wrestler-card .overall-rating { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid rgba(255,255,255,0.85); }
    .assigned-wrestler-card span { color: #e5e7eb; font-weight: 600; }
    .remove-wrestler-btn { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(148,163,189,0.28); background: rgba(12,19,36,0.6); color: #e5e7eb; cursor: pointer; }
    .remove-wrestler-btn:hover { background: rgba(79,157,255,0.14); border-color: rgba(79,157,255,0.35); }
    .post-match-card:hover { border-color: #4a90e2; transform: translateY(-2px); }
    .post-match-card.selected { border-color: #4caf50; background: #2a2a2a; }
    .post-match-card h4 { color: #fff; margin-bottom: 10px; }
    .post-match-card p { color: #ccc; font-size: 14px; }

    /* Championship Cards */
    .championships-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; margin-bottom: 20px; }
    .championship-card { background: #2a2a2a; border: 1px solid #444; border-radius: 8px; padding: 20px; }
    .championship-card h4 { color: #ffd700; margin-bottom: 10px; }
    .championship-card p { color: #fff; margin-bottom: 15px; }
    .championship-card label { color: #fff; display: flex; align-items: center; gap: 8px; cursor: pointer; }
    .championship-card input[type="checkbox"] { width: 16px; height: 16px; }

    /* Step Navigation */
    .step-navigation { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 20px; border-top: 1px solid #333; }
    .step-btn { background: var(--accent-primary); color: #fff; border: none; padding: 12px 24px; border-radius: 6px; cursor: pointer; font-weight: bold; transition: all 0.3s ease; }
    .step-btn:hover { background: var(--accent-hover); transform: translateY(-1px); }
    .step-btn:disabled { background: #666; cursor: not-allowed; transform: none; }
    .step-btn.prev-btn { background: #666; }
    .step-btn.prev-btn:hover { background: #777; }
    .step-btn.next-btn { background: var(--accent-success); }
    .step-btn.next-btn:hover { background: #45a049; }

    /* Booking Complete */
    .booking-complete { text-align: center; padding: 40px 20px; }
    .booking-complete h3 { color: var(--accent-success); margin-bottom: 20px; font-size: 24px; }
    .completion-actions { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-subtle); }
    .confirm-booking-btn { background: var(--accent-success); color: #fff; border: none; padding: 12px 24px; border-radius: var(--border-radius-lg); font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-md); min-width: 180px; }
    .confirm-booking-btn:hover { background: #45a049; transform: translateY(-2px); box-shadow: var(--shadow-lg); }
    .confirm-booking-btn:active { transform: translateY(0); transition: all 0.1s ease; }
    .match-summary { background: #2a2a2a; border: 1px solid #333; border-radius: 8px; padding: 20px; text-align: left; max-width: 600px; margin: 0 auto; }
    .match-summary h4 { color: #4a90e2; margin-bottom: 15px; text-align: center; }
    .match-summary p { color: #fff; margin-bottom: 8px; }


.sidebar-nav {
    display: grid;
    gap: 0;
    overflow-y: auto;
    padding-right: var(--space-1);
}

.sidebar-group {
    display: grid;
    gap: 0;
}

.sidebar-group-label {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sidebar-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    line-height: 1.2;
    min-height: 32px;
    color: var(--text-muted);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--transition);
    line-height: 1;
    min-height: 0;
}

.sidebar-group-toggle:hover,
.sidebar-group-toggle:focus-visible {
    color: var(--text-secondary);
}

.sidebar-group-toggle-icon {
    transition: transform var(--transition);
}

.sidebar-group-items {
    display: grid;
    gap: 0;
}

.sidebar-group.collapsed .sidebar-group-items {
    display: none;
}

.sidebar-group.collapsed .sidebar-group-toggle-icon {
    transform: rotate(-90deg);
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px var(--space-3);
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    justify-content: space-between;
}

.sidebar-nav-item .sidebar-nav-text {
    flex: 1;
    text-align: left;
}

.sidebar-nav-item .sidebar-nav-icon {
    font-size: 18px;
}

.sidebar-nav-item .sidebar-nav-badge {
    min-width: 28px;
    padding: 4px 8px;
    border-radius: 16px;
    text-align: center;
    background: rgba(79, 157, 255, 0.18);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.sidebar-nav-item.active,
.sidebar-nav-item:hover {
    color: var(--text-primary);
    border-color: rgba(79, 157, 255, 0.35);
    background: linear-gradient(135deg, rgba(79, 157, 255, 0.28), rgba(79, 157, 255, 0.08));
}

.sidebar-group.collapsed + .sidebar-group {
    margin-top: 0;
}

.sidebar-footer {
    margin-top: auto;
    display: grid;
    gap: var(--space-3);
}

.sidebar-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.16);
    background: linear-gradient(145deg, rgba(23, 35, 65, 0.9), rgba(17, 25, 47, 0.75));
}

.sidebar-cta.is-on {
    border-color: rgba(52, 211, 153, 0.6);
    background: linear-gradient(145deg, rgba(17, 65, 52, 0.75), rgba(12, 48, 37, 0.95));
}

.sidebar-cta-status {
    font-weight: 700;
}

.sidebar-actions {
    display: grid;
    gap: var(--space-2);
}

.sidebar-action {
    width: 100%;
    background: rgba(79, 157, 255, 0.12);
    border-color: rgba(79, 157, 255, 0.25);
}

.sidebar-version {
    margin: 0;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.app-workspace {
    position: relative;
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(16, 23, 42, 0.92), rgba(6, 10, 18, 0.85));
}

/* Topbar removed */
.workspace-topbar { display: none; }

.workspace-context {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.workspace-breadcrumb {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.workspace-breadcrumb-label {
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.workspace-breadcrumb-value {
    font-size: 22px;
    font-weight: 600;
}

.workspace-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 180px;
    color: var(--text-muted);
}

.workspace-company {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.workspace-date {
    font-size: 13px;
}

.workspace-topbar-actions {
    display: flex;
    gap: var(--space-2);
}

body.workspace-header-collapsed .workspace-topbar {
    height: 44px;
    padding: 0 var(--space-5);
}

body.workspace-header-collapsed .workspace-context {
    display: none;
}

/* --- Compact Wrestler Modal (shared) --- */
.wrestler-modal-card {
    display: grid;
    gap: var(--space-4);
    max-width: 90vw;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.wm-header {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    align-items: center;
    gap: var(--space-4);
}

.wm-avatar {
    width: 72px;
    height: 72px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(148, 163, 189, 0.2);
}

.wm-title { display: grid; gap: 4px; }
.wm-name { font-size: 22px; font-weight: 700; }
.wm-sub { color: var(--text-muted); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; }
.wm-overall { font-weight: 800; font-size: 28px; color: var(--accent); }

.wm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.wm-badge { padding: 4px 8px; border-radius: 999px; background: rgba(79, 157, 255, 0.14); border: 1px solid rgba(79,157,255,0.22); font-size: 12px; }
.wm-badge--danger { background: rgba(248, 113, 113, 0.14); border-color: rgba(248,113,113,0.32); }

.wm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.wm-grid--financial { grid-template-columns: 1fr; }
.wm-section { display: grid; gap: var(--space-2); }
.wm-section-title { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.18em; }
.wm-rows { display: grid; gap: 4px; }
.wm-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-2); padding: 4px 0; border-bottom: 0; }
.wm-row:last-child { border-bottom: 0; }

.wm-actions { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* Table action buttons */
.table-action {
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;
    border-radius: 6px;
    background: rgba(79,157,255,0.16);
    border: 1px solid rgba(79,157,255,0.28);
    color: var(--text-primary);
}
.table-action:hover { background: rgba(79,157,255,0.26); }
.table-action.danger {
    background: rgba(248,113,113,0.16);
    border-color: rgba(248,113,113,0.32);
}
.table-action.danger:hover { background: rgba(248,113,113,0.26); }

body.workspace-header-collapsed .topbar-button.primary {
    padding: var(--space-3) var(--space-4);
}

body.workspace-header-collapsed .workspace-topbar-actions {
    margin-left: auto;
}

.screen-stack {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: grid;
    gap: var(--space-4);
}

.screen-stack.screen-stack-home {
    /* Reduce top padding to eliminate large gap above Home */
    padding-top: var(--space-3);
}

.screen-stack.screen-stack-calendar {
    /* Reduce top padding to eliminate large gap above Calendar */
    padding-top: var(--space-3);
}

.screen-stack.screen-stack-analytics {
    /* Reduce top padding on Analytics screens for consistent spacing */
    padding-top: var(--space-3);
}

.screen-stack.screen-stack-talent {
    /* Compact spacing for Talent screens (Roster, Tag Teams, Stables, Free Agents) */
    padding-top: var(--space-3);
}

.screen {
    display: block;
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    border-radius: var(--radius-lg);
    border: 1px solid rgba(79, 157, 255, 0.1);
    box-shadow: 0 40px 60px rgba(5, 7, 14, 0.35);
    padding: var(--space-6);
}

/* Home should be edge-to-edge without inner container chrome */
#home.screen {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* Analytics screens now use the default .screen container (Wrestlers, Financial, Booking, Storylines). */

/* Talent screens now use the default .screen container (Roster, Free Agents, Tag Teams, Stables). */

/* ======================
   Analytics: Wrestlers
   ====================== */
.analytics-section {
    margin-bottom: var(--space-5);
}

/* ======================
   Talent: Unified Row-Card List
   ====================== */
.wrestlers-list { display: grid; gap: 8px; }
.wrestlers-list .list-header {
    display: grid;
    grid-template-columns: 2.2fr 0.7fr 0.9fr 0.9fr 0.9fr 1fr 0.8fr;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(79,157,255,0.18);
    border-radius: var(--radius-sm);
    background: rgba(79,157,255,0.07);
    color: var(--text-secondary);
    font-weight: 700;
}
.wrestlers-list .wrestler-list-item {
    display: grid;
    grid-template-columns: 2.2fr 0.7fr 0.9fr 0.9fr 0.9fr 1fr 0.8fr;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(79,157,255,0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
}
.wrestlers-list .wrestler-list-item:hover { background: rgba(79,157,255,0.10); }
.wrestler-list-name { font-weight: 700; }
.list-col.na { color: var(--text-secondary); }

/* Row-card visuals */
.wrestlers-list .name-col {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 10px;
}
.wrestler-list-photo {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
}
.wrestler-badges {
    display: inline-flex;
    gap: 6px;
    margin-left: 8px;
}
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
}
.badge.champion { border-color: rgba(234,179,8,0.4); background: rgba(234,179,8,0.12); color: #fde68a; }
.badge.injured { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.14); color: #fecaca; }
.badge.affordable { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.14); color: #bbf7d0; }
.badge.expensive { border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.14); color: #fecaca; }
.badge.prospect { border-color: rgba(59,130,246,0.45); background: rgba(59,130,246,0.14); color: #bfdbfe; }

.pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 24px;
    padding: 0 8px;
    font-weight: 700;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.1);
    .accordion.active {
        background: linear-gradient(135deg, rgba(79,157,255,0.12), rgba(79,157,255,0.06));
        border-color: rgba(79,157,255,0.42);
        box-shadow: 0 14px 32px rgba(8, 11, 26, 0.35);
    }
    background: rgba(255,255,255,0.06);
}
.pill.positive { color: #86efac; border-color: rgba(22,163,74,0.45); background: rgba(22,163,74,0.14); }
.pill.negative { color: #fca5a5; border-color: rgba(220,38,38,0.45); background: rgba(220,38,38,0.14); }
.pill.na { color: var(--text-secondary); }

.mini-bar {
    position: relative;
    height: 8px;
    background: rgba(79,157,255,0.12);
    border-radius: 999px;
    overflow: hidden;
}
.mini-bar > .fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #1d4ed8);
}

/* ======================
   Talent: Shared Buttons
   ====================== */
.create-btn, .view-btn, .back-btn, .disband-btn, .add-btn, .remove-btn, .add-member-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(79, 157, 255, 0.24);
    background: rgba(79, 157, 255, 0.08);
    color: var(--text-primary);
}
.create-btn { background: rgba(52, 211, 153, 0.14); border-color: rgba(52, 211, 153, 0.35); }
.disband-btn { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.35); }
.back-btn { background: rgba(79, 157, 255, 0.1); }
.add-btn, .add-member-btn { background: rgba(79, 157, 255, 0.16); }
.remove-btn { background: rgba(239, 68, 68, 0.14); }
.create-btn:hover, .view-btn:hover, .back-btn:hover, .disband-btn:hover, .add-btn:hover, .remove-btn:hover, .add-member-btn:hover {
    filter: brightness(1.1);
}

/* ======================
   Talent: Tag Teams
   ====================== */
.tag-teams-header, .stables-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.tag-teams-stats, .stables-stats { color: var(--text-secondary); font-weight: 600; }

.tag-teams-list, .stables-list {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.tag-team-card, .stable-card, .stable-details, .create-tag-team-form, .create-stable-form {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}

.tag-team-header, .stable-header, .details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.tag-team-members, .stable-members { color: var(--text-secondary); margin-bottom: var(--space-3); }
.tag-team-members .member, .stable-members .member { font-weight: 600; }
.tag-team-members .plus { margin: 0 6px; color: var(--text-secondary); }

.tag-team-stats, .stable-stats, .stats-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tag-team-stats .stat, .stable-stats .stat { display: flex; align-items: center; gap: 8px; }
.tag-team-stats .stat label, .stable-stats .stat label { color: var(--text-secondary); }
.chemistry.excellent { color: #22c55e; }
.chemistry.good { color: #16a34a; }
.chemistry.average { color: #f59e0b; }
.chemistry.poor { color: #ef4444; }
.chemistry.terrible { color: #dc2626; }

/* Create forms */
.create-tag-team-form .form-group, .create-stable-form .form-group { display: grid; gap: 8px; margin-bottom: var(--space-3); }
.create-tag-team-form input, .create-stable-form input, .create-tag-team-form select, .create-stable-form select { max-width: 400px; }
.chemistry-preview { margin: var(--space-3) 0; }
.chemistry-bar-container { position: relative; height: 10px; background: rgba(79,157,255,0.12); border-radius: 6px; }
.chemistry-bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), #1d4ed8); }
.chemistry-bar-fill.excellent { background: linear-gradient(90deg, #10b981, #059669); }
.chemistry-bar-fill.good { background: linear-gradient(90deg, #34d399, #10b981); }
.chemistry-bar-fill.average { background: linear-gradient(90deg, #f59e0b, #d97706); }
.chemistry-bar-fill.poor { background: linear-gradient(90deg, #ef4444, #dc2626); }
.chemistry-bar-fill.terrible { background: linear-gradient(90deg, #b91c1c, #7f1d1d); }
.chemistry-value { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); font-size: 12px; font-weight: 700; }

/* Stable details layout */
.stable-info { display: grid; gap: var(--space-4); grid-template-columns: 2fr 1fr; }
.member-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.member-card { border: 1px solid rgba(79,157,255,0.14); border-radius: var(--radius-sm); padding: var(--space-3); background: rgba(79,157,255,0.06); }
.add-member-section { display: grid; gap: var(--space-2); }
.max-members { color: var(--text-secondary); }

/* Two-column selection for creating Stables */
.wrestler-selection { display: grid; gap: var(--space-4); grid-template-columns: 1fr 1fr; }
.wrestler-list { display: grid; gap: 8px; }
.wrestler-option { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid rgba(79,157,255,0.12); border-radius: var(--radius-sm); background: rgba(79,157,255,0.05); }
.wrestler-option.selected { background: rgba(79,157,255,0.1); }
.wrestler-name { font-weight: 600; }
.wrestler-skill { color: var(--text-secondary); }
.no-selection, .no-stables, .no-teams, .no-wrestlers { color: var(--text-secondary); }

/* Details actions */
.stable-actions { margin-top: var(--space-4); display: flex; justify-content: flex-end; }

.analytics-section > h3 {
    margin: 0 0 var(--space-3) 0;
}

/* Top performers grid */
.top-performers {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.performer-card {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.performer-card.top-performer {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.25) inset;
}

.performer-rank {
    font-weight: 800;
    color: var(--text-secondary);
}

.performer-name {
    font-size: 16px;
    font-weight: 700;
}

.performer-stats {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    color: var(--text-secondary);
}

.performer-trend { font-weight: 600; }
.trend-up { color: #22c55e; }
.trend-down { color: #ef4444; }
.trend-flat { color: #94a3b8; }

/* Also support trend names used by analytics engine */
.trend-rising, .positive { color: #22c55e; }
.trend-improving { color: #16a34a; }
.trend-falling, .negative { color: #ef4444; }
.trend-declining { color: #dc2626; }
.trend-stable { color: #94a3b8; }

/* Metrics grid */
.metrics-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.metrics-grid .metric-card,
.financial-overview .financial-card, /* reuse look */
.booking-patterns .pattern-card {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}

/* Wrestler details table */
.wrestler-details-table table {
    width: 100%;
    border-collapse: collapse;
}

.wrestler-details-table thead th {
    text-align: left;
    font-weight: 700;
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid rgba(79, 157, 255, 0.16);
    color: var(--text-secondary);
}

.wrestler-details-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid rgba(79, 157, 255, 0.08);
}

.wrestler-details-table tbody tr:hover {
    background: rgba(79, 157, 255, 0.06);
}

/* Shared analytics table styling */
.analytics-table {
    width: 100%;
    border-collapse: collapse;
}
.analytics-table thead th {
    text-align: left;
    font-weight: 700;
    padding: var(--space-3) var(--space-3);
    border-bottom: 1px solid rgba(79, 157, 255, 0.16);
    color: var(--text-secondary);
}
.analytics-table thead th.sortable {
    cursor: pointer;
    user-select: none;
}
.analytics-table thead th.sortable.active {
    color: var(--text-primary);
}
.analytics-table thead th .sort-indicator {
    margin-left: 6px;
    font-size: 12px;
    opacity: 0.9;
}
.analytics-table tbody td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid rgba(79, 157, 255, 0.08);
}
.analytics-table tbody tr:hover { background: rgba(79,157,255,0.06); }

/* Small enhancements for TV Shows/Networks tables */
.analytics-table td:nth-last-child(2) { /* status column if present */
    white-space: nowrap;
}
.analytics-table td:nth-last-child(3) { /* payment column often near end */
    font-variant-numeric: tabular-nums;
}
.table-action {
    background: transparent;
    border: 1px solid rgba(79,157,255,0.35);
    color: var(--text-primary);
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 12px;
}
.table-action[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Compact controls row above analytics tables */
.analytics-controls-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-3) 0;
    flex-wrap: wrap;
}
.analytics-controls-row .control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.analytics-controls-row label {
    color: var(--text-secondary);
    font-weight: 600;
}
.analytics-controls-row select,
.analytics-controls-row input[type="text"] {
    padding: 8px 10px;
}

/* Popularity bar in Wrestler Details */
.popularity-bar {
    display: inline-block;
    height: 8px;
    background: linear-gradient(90deg, var(--accent), #1d4ed8);
    border-radius: 999px;
    vertical-align: middle;
    margin-right: 8px;
    min-width: 6px; /* ensure small values are still visible */
}

/* ======================
   Analytics: Financial
   ====================== */
.financial-cards {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.financial-card {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}
.financial-card.primary {
    border-color: rgba(79, 157, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(79, 157, 255, 0.2) inset;
}
.financial-card .card-value {
    font-size: 20px;
    font-weight: 800;
}
.financial-card .card-label {
    color: var(--text-secondary);
}

.revenue-breakdown, .expense-breakdown { display: grid; gap: var(--space-3); }
.breakdown-note { color: var(--text-secondary); font-size: 13px; }
.revenue-streams, .expense-streams { display: grid; gap: 10px; }
.stream-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); }
.stream-label { color: var(--text-secondary); }

/* ======================
   Finances unified layout
   ====================== */
.finances-unified {
    display: grid;
    gap: var(--space-6);
}

.fin-section {
    display: grid;
    gap: var(--space-4);
}

.financial-overview .financial-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-3);
}

.financial-overview .summary-card {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}
.financial-overview .summary-card .amount {
    font-size: 22px;
    font-weight: 800;
}
.financial-overview .summary-card .subtitle { color: var(--text-secondary); }
.financial-overview .summary-card .trend { font-weight: 700; }
.financial-overview .summary-card .trend.positive { color: var(--success); }
.financial-overview .summary-card .trend.negative { color: var(--danger); }

.financial-charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-4);
}

.financial-charts-row .chart-container {
    border: 1px solid rgba(148,163,189,0.18);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82));
    padding: var(--space-4);
}

.pie-chart { display: grid; justify-items: center; gap: var(--space-3); }
.pie-svg { width: 220px; height: 220px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.legend-item { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); }
.legend-color { width: 12px; height: 12px; border-radius: 3px; }

.income-history, .expense-efficiency, .company-financial-info, .financial-trends, .trend-summary, .performance-metrics, .financial-insights {
    border: 1px solid rgba(148,163,189,0.18);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82));
    padding: var(--space-4);
}

.trend-chart, .performance-chart { width: 100%; }
.line-chart { width: 100%; height: 220px; }
.chart-labels { display: flex; justify-content: space-between; color: var(--text-secondary); margin-top: var(--space-2); }
.stream-bar { background: rgba(79,157,255,0.12); border-radius: 6px; overflow: hidden; height: 10px; }
.stream-bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), #1d4ed8); }
.stream-value { font-weight: 700; }

/* ======================
   Analytics: Booking
   ====================== */
.quality-metrics {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.quality-card {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}
.quality-value { font-size: 20px; font-weight: 800; }
.quality-label { color: var(--text-secondary); }

.booking-patterns-content {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.pattern-section h4 { margin: 0 0 var(--space-2) 0; }
.booking-list, .underutilized-list { display: grid; gap: 8px; }
.booking-item, .underutilized-item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(79, 157, 255, 0.12);
    border-radius: var(--radius-sm);
    background: rgba(79, 157, 255, 0.05);
}
.booking-item .match-count, .underutilized-item .match-count, .underutilized-item .popularity { color: var(--text-secondary); }

/* ======================
   Analytics: Storylines
   ====================== */
.feud-stats-grid, .storyline-stats-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.feud-stat, .storyline-stat {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}
.stat-label { color: var(--text-secondary); }
.stat-value { font-size: 18px; font-weight: 800; }

.hottest-feud, .recent-activity, .creative-recommendations {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}
.feud-details { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.feud-participants { font-weight: 700; }
.feud-heat { color: #f59e0b; }
.feud-types .type-breakdown { display: flex; flex-wrap: wrap; gap: 8px; }
.type-badge { border: 1px solid rgba(79, 157, 255, 0.16); border-radius: 999px; padding: 4px 8px; background: rgba(79,157,255,0.08); }

.recommendation-section h4 { margin: 0 0 var(--space-2) 0; }
.recommendations-list, .suggestions-list { margin: 0; padding-left: 16px; display: grid; gap: 6px; }
.placeholder, .no-feuds { color: var(--text-secondary); }

/* ======================
   Champions & Championships pages
   ====================== */
.summary-cards-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.summary-card {
    border: 1px solid rgba(79, 157, 255, 0.16);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    padding: var(--space-4);
}
.summary-card .amount {
    font-size: 22px;
    font-weight: 800;
}
.summary-card .subtitle { color: var(--text-secondary); }

.championships-grid {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.championship-accordion {
    border: 1px solid rgba(148,163,189,0.18);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82));
    overflow: hidden;
}

.championship-header {
    width: 100%;
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}
.championship-header .championship-header-content {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
}
.championship-info { display: grid; gap: 6px; }
.championship-name { margin: 0; font-size: 18px; font-weight: 800; }
.current-champion { margin: 0; color: var(--text-secondary); }

.championship-images { display: flex; gap: var(--space-3); align-items: center; }
.championship-belt-img { width: 96px; height: 40px; object-fit: contain; border-radius: 6px; background: rgba(148,163,189,0.1); }
.champion-face-img { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; border: 1px solid rgba(148,163,189,0.25); }

.accordion-arrow { font-weight: 800; color: var(--text-secondary); transition: transform var(--transition); }
.championship-header.active .accordion-arrow { transform: rotate(180deg); }

.championship-panel { display: none; padding: var(--space-4); border-top: 1px solid rgba(148,163,189,0.18); }
.championship-panel.show { display: block; }

.championship-history { display: grid; gap: var(--space-3); }
.history-list { display: grid; gap: var(--space-2); }
.history-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(148,163,189,0.18);
    background: rgba(15,25,48,0.6);
}
.history-item.current-reign { border-left: 4px solid var(--accent); }
.reign-number { font-weight: 800; color: var(--accent); width: 28px; text-align: center; }
.history-wrestler-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(148,163,189,0.25); }
.wrestler-info { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
.wrestler-details { display: grid; gap: 4px; }
.wrestler-name { font-weight: 800; }
.reign-date, .reign-details { color: var(--text-secondary); font-size: 13px; }
.current-badge { padding: 4px 8px; border-radius: 999px; background: rgba(79,157,255,0.16); border: 1px solid rgba(79,157,255,0.28); font-size: 12px; font-weight: 800; }

.panel-empty-state {
    padding: var(--space-6);
    border-radius: var(--radius-md);
    border: 1px solid rgba(148,163,189,0.18);
    background: linear-gradient(160deg, rgba(16,25,46,0.6), rgba(12,19,36,0.82));
    text-align: center;
}
.panel-empty-state h3 { margin-top: 0; }
.help-actions { margin-top: var(--space-3); }
.help-button { background: rgba(79,157,255,0.16); border: 1px solid rgba(79,157,255,0.35); }

/* Analytics: Championships */
.title-statistics { display: grid; gap: var(--space-4); }
.statistics-summary { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.stats-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.stat-card { border: 1px solid rgba(79, 157, 255, 0.16); border-radius: var(--radius-md); background: rgba(15,25,48,0.6); padding: var(--space-4); }
.stat-card h4 { margin: 0 0 6px 0; }
.stat-card .stat-value { font-size: 20px; font-weight: 800; }
.stat-card .stat-label { color: var(--text-secondary); }
.detailed-stats { border: 1px solid rgba(148,163,189,0.18); border-radius: var(--radius-md); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); padding: var(--space-4); }
.championship-stats-list { display: grid; gap: var(--space-2); }
.championship-stat-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.championship-stat-name { font-weight: 800; }
.championship-stat-details { display: flex; gap: var(--space-3); color: var(--text-secondary); font-size: 13px; flex-wrap: wrap; }

/* Calendar should also be edge-to-edge */
#calendar.screen {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

.screen.hidden {
    display: none !important;
}

.screen > h1:first-child {
    margin-top: 0;
    font-size: clamp(30px, 2.4vw, 40px);
}

.dashboard-header-mount {
    margin-bottom: var(--space-5);
}

.dashboard-section {
    display: grid;
    gap: var(--space-5);
}

.dashboard-tabs {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(15, 27, 48, 0.7);
    border-radius: var(--radius-md);
    padding: var(--space-2);
    border: 1px solid rgba(79, 157, 255, 0.22);
}

.page-nav-tab {
    background: transparent;
    border: none;
    padding: var(--space-3) var(--space-4);
    color: var(--text-secondary);
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.page-nav-tab.active {
    background: linear-gradient(135deg, rgba(79, 157, 255, 0.3), rgba(79, 157, 255, 0.12));
    color: var(--text-primary);
}

.nav-content {
    display: grid;
    gap: var(--space-5);
}

.nav-section {
    display: none;
    gap: var(--space-4);
}

.nav-section.active {
    display: block;
}

.grid-auto {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.grid-two {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.action-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.18);
    background: linear-gradient(160deg, rgba(20, 31, 54, 0.85), rgba(10, 16, 30, 0.9));
    color: var(--text-primary);
    text-align: left;
}

.action-card.primary {
    border-color: rgba(79, 157, 255, 0.35);
    background: linear-gradient(160deg, rgba(47, 97, 221, 0.48), rgba(14, 26, 56, 0.92));
}

.action-card.is-on {
    border-color: rgba(52, 211, 153, 0.4);
    background: linear-gradient(160deg, rgba(17, 122, 101, 0.5), rgba(7, 40, 35, 0.9));
}

.card-title {
    font-size: 18px;
    font-weight: 600;
}

.card-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--text-secondary);
}

.card-metric.success {
    color: var(--success);
}

.metric-value {
    font-size: 28px;
    font-weight: 700;
}

.metric-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.section-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.section-grid.two-cards {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.clean-card {
    background: linear-gradient(160deg, rgba(13, 21, 38, 0.82), rgba(10, 16, 30, 0.86));
    border: 1px solid rgba(79, 157, 255, 0.16);
}

.clean-card.primary {
    border-color: rgba(79, 157, 255, 0.3);
    background: linear-gradient(160deg, rgba(47, 97, 221, 0.35), rgba(13, 21, 43, 0.85));
}

.screen-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.screen-header h1 {
    margin: 0 auto; /* center title even if buttons exist */
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px; /* uniform normal size */
    text-align: center;
}

.nav-back-button {
    background: transparent;
    border: 1px solid rgba(79, 157, 255, 0.18);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary);
}

.nav-back-button:hover {
    color: var(--text-primary);
    border-color: rgba(79, 157, 255, 0.35);
}

.analytics-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.18);
    background: linear-gradient(135deg, rgba(21, 31, 55, 0.72), rgba(12, 19, 36, 0.88));
}

/* Small mode indicator badge shown on the right side of headers */
.mode-indicator {
    display: inline-block;
    font-size: 12px;
    line-height: 1;
    color: #bbb;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 6px 8px;
    border-radius: 6px;
    margin-left: 8px;
    white-space: nowrap;
}

.header-compact .mode-indicator {
    font-size: 11px;
    padding: 4px 6px;
}

.header-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.analytics-controls {
    display: flex;
    gap: var(--space-2);
}

.refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: rgba(79, 157, 255, 0.16);
    border-color: rgba(79, 157, 255, 0.3);
}

.refresh-text {
    font-weight: 600;
}

.dashboard-header {
    align-items: center;
}

.dashboard-left-controls {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.auto-booking-btn {
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.35);
    color: var(--text-primary);
}

.auto-booking-btn.auto-booking-off {
    background: rgba(79, 157, 255, 0.12);
    border-color: rgba(79, 157, 255, 0.28);
}

.advance-day-btn {
    background: linear-gradient(135deg, var(--accent), #1d4ed8);
    border-color: rgba(79, 157, 255, 0.4);
    color: #0b1221;
    font-weight: 700;
}

.dashboard-header .current-date {
    color: var(--text-secondary);
    font-weight: 600;
}

select,
input,
textarea {
    font-family: inherit;
    font-size: 15px;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(148, 163, 189, 0.3);
    background: rgba(13, 20, 38, 0.9);
    color: var(--text-primary);
}

/* Competition: Overview subpage styles */
.competition-notifications-banner {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(79,157,255,0.18);
    background: linear-gradient(160deg, rgba(18,28,52,0.7), rgba(13,20,38,0.7));
}
.competition-notifications-banner .notifications-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.competition-notifications-banner .notifications-title {
    font-weight: 700;
}
.competition-notifications-banner .notifications-icon {
    margin-right: var(--space-2);
}
.competition-notifications-banner .notifications-toggle {
    background: rgba(79,157,255,0.14);
    border: 1px solid rgba(79,157,255,0.28);
    color: var(--text-primary);
}
.competition-notifications-banner .notifications-content {
    display: grid;
    gap: var(--space-2);
}
.competition-notifications-banner .notification-item {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, rgba(20,31,54,0.6), rgba(10,16,30,0.65));
    border: 1px solid rgba(148,163,189,0.18);
}
.competition-notifications-banner .notification-item.low { border-left: 4px solid var(--text-muted); }
.competition-notifications-banner .notification-item.medium { border-left: 4px solid var(--warning); }
.competition-notifications-banner .notification-item.high { border-left: 4px solid var(--danger); }
.competition-notifications-banner .notification-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.competition-notifications-banner .notification-title { font-weight: 600; }
.competition-notifications-banner .notification-date { color: var(--text-muted); font-size: 12px; }
.competition-notifications-banner .notification-more { color: var(--text-muted); font-size: 12px; }

.competition-overview {
    display: grid;
    gap: var(--space-4);
}
.market-share-section {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(148,163,189,0.18);
    background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.8));
}
.position-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}
.position-card {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(148,163,189,0.18);
    background: linear-gradient(160deg, rgba(20,31,54,0.7), rgba(10,16,30,0.7));
    transition: transform var(--transition), box-shadow var(--transition);
}
.position-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.position-card.player-company { border-color: rgba(79,157,255,0.35); box-shadow: 0 0 0 1px rgba(79,157,255,0.25), var(--shadow-soft); }
.company-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.market-share { color: var(--accent-strong); font-weight: 800; }
.momentum-bar { display: grid; gap: var(--space-2); }
.momentum-indicator { position: relative; height: 14px; border-radius: 999px; background: rgba(148,163,189,0.18); overflow: hidden; }
.momentum-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success), #22c55e); }
.momentum-text { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.company-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.stat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: 13px; }
.stat .label { color: var(--text-muted); }
.stat .value.positive { color: var(--success); font-weight: 700; }
.stat .value.negative { color: var(--danger); font-weight: 700; }
.stat .value.emergency { color: var(--warning); font-weight: 700; }
.stat .value.normal { color: var(--success); font-weight: 700; }

.competition-alerts {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(148,163,189,0.18);
    background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82));
}
.alerts-list { display: grid; gap: var(--space-2); max-height: 340px; overflow: auto; padding-right: 4px; }
.competition-alert { padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.competition-alert.major { border-left: 4px solid var(--danger); }
.competition-alert.moderate { border-left: 4px solid var(--warning); }
.competition-alert.minor { border-left: 4px solid var(--success); }
.alert-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.alert-title { font-weight: 700; }
.alert-week { color: var(--text-muted); font-size: 12px; }
.alert-message { color: var(--text-secondary); font-size: 13px; }

.trending-storylines { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.storylines-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.storyline-card { padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.storyline-heat { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.heat-label { color: var(--text-muted); min-width: 44px; font-size: 12px; }
.heat-bar { position: relative; height: 10px; border-radius: 999px; background: rgba(148,163,189,0.18); overflow: hidden; flex: 1; }
.heat-fill { height: 100%; background: linear-gradient(90deg, var(--accent-gold), #f97316); }
.heat-value { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 11px; color: #fff; }
.storyline-description { color: var(--text-secondary); font-size: 13px; }

/* Market share pie visual */
.market-share-pie { position: relative; width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; background: conic-gradient(from 0deg); box-shadow: inset 0 0 0 6px rgba(15,23,42,0.9); }
.pie-center { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; display: grid; place-items: center; background: rgba(12,19,36,0.92); border: 1px solid rgba(148,163,189,0.18); }
.market-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-color { width: 16px; height: 16px; border-radius: 4px; }
.legend-label { color: var(--text-secondary); font-size: 13px; }
.legend-value { color: var(--accent-strong); font-weight: 700; font-size: 13px; }

/* Competition: Ratings War subpage styles */
.ratings-war-panel { display: grid; gap: var(--space-4); }
.ratings-war-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.competition-level { color: var(--text-muted); font-weight: 600; }
.level-indicator { display: inline-block; padding: 6px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.level-indicator.intense { background: rgba(248,113,113,0.2); color: #fecaca; border: 1px solid rgba(248,113,113,0.35); }
.level-indicator.competitive { background: rgba(251,191,36,0.2); color: #fde68a; border: 1px solid rgba(251,191,36,0.35); }
.level-indicator.moderate { background: rgba(52,211,153,0.2); color: #bbf7d0; border: 1px solid rgba(52,211,153,0.35); }

/* Battle results */
.last-battle { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.battle-result { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.battle-result.major { border-left: 4px solid var(--danger); }
.battle-result.moderate { border-left: 4px solid var(--warning); }
.battle-result.minor { border-left: 4px solid var(--success); }
.battle-companies { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4); }
.winner-side,.loser-side { text-align: center; }
.company-name { font-weight: 800; font-size: 18px; }
.company-name.winner { text-shadow: 0 0 10px currentColor; }
.rating-display { display: inline-block; margin-top: 6px; padding: 10px 16px; border-radius: var(--radius-sm); background: rgba(148,163,189,0.12); border: 1px solid rgba(148,163,189,0.2); font-weight: 800; font-size: 22px; }
.rating-display.winner { background: linear-gradient(135deg, rgba(34,197,94,0.8), rgba(16,185,129,0.8)); border-color: rgba(34,197,94,0.55); color: #062814; box-shadow: 0 10px 24px rgba(16,185,129,0.2); }
.rating-display.loser { background: rgba(148,163,189,0.08); color: var(--text-muted); }
.vs-indicator { padding: 6px 10px; border-radius: 999px; background: rgba(79,157,255,0.16); border: 1px solid rgba(79,157,255,0.28); color: var(--text-primary); font-weight: 800; }
.victory-margin { text-align: center; color: var(--text-secondary); font-weight: 600; margin-top: var(--space-2); }
.battle-significance { text-align: center; color: var(--text-muted); font-size: 12px; }
.battle-significance span.major { color: var(--danger); font-weight: 800; }
.battle-significance span.moderate { color: var(--warning); font-weight: 800; }
.battle-significance span.minor { color: var(--success); font-weight: 800; }

/* Ratings chart */
.ratings-chart-container { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.chart-container { position: relative; height: 320px; margin-top: var(--space-3); }
.line-chart { position: relative; width: 100%; height: 100%; }
.chart-grid { position: absolute; inset: 0; }
.grid-line { position: absolute; left: 0; right: 0; border-bottom: 1px dashed rgba(148,163,189,0.22); color: var(--text-muted); font-size: 12px; padding-left: 6px; }
.chart-lines { position: relative; width: 100%; height: 100%; }
.chart-line { position: absolute; inset: 0; pointer-events: none; }
.data-points { position: absolute; inset: 0; }
.data-point { position: absolute; width: 8px; height: 8px; border-radius: 999px; transform: translate(-50%, 50%); box-shadow: 0 2px 6px rgba(0,0,0,0.4); transition: transform var(--transition); }
.data-point:hover { transform: translate(-50%, 50%) scale(1.4); }
.chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-3); }
.legend-line { width: 28px; height: 3px; border-radius: 2px; background: currentColor; }

/* Current week breakdown */
.ratings-breakdown { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.week-breakdown { display: grid; gap: var(--space-2); }
.show-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.show-result.winner { border-left: 4px solid var(--accent-gold); box-shadow: 0 10px 24px rgba(234,179,8,0.1); }
.position-number { font-size: 18px; font-weight: 800; color: var(--accent); width: 36px; text-align: center; }
.show-info { display: grid; gap: 6px; }
.show-header { display: flex; gap: 10px; align-items: center; }
.company-name { font-weight: 800; }
.show-name { color: var(--text-muted); font-style: italic; }
.show-stats { display: flex; gap: var(--space-4); color: var(--text-secondary); font-size: 13px; flex-wrap: wrap; }
.winner-badge { font-size: 22px; }

/* Competition: Talent Movement subpage styles */
.talent-movement-panel { display: grid; gap: var(--space-4); }
.talent-war-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.fa-count { color: var(--accent-strong); font-weight: 800; }
.top-free-agents { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.free-agents-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }
.free-agent-card { border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); overflow: hidden; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.free-agent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: rgba(79,157,255,0.35); }
.wrestler-image { height: 120px; overflow: hidden; background: rgba(148,163,189,0.08); }
.wrestler-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wrestler-info { padding: var(--space-3); display: grid; gap: 8px; }
.wrestler-name { font-weight: 800; color: var(--text-primary); }
.wrestler-stats { display: flex; gap: var(--space-3); color: var(--text-muted); font-size: 13px; }
.wrestler-value { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.salary-demand { color: var(--success); font-weight: 800; }
.contract-length { color: var(--text-muted); }
.ai-interest { padding: var(--space-3); border-top: 1px solid rgba(148,163,189,0.18); background: rgba(13,20,38,0.6); }
.interest-level { color: var(--text-muted); font-size: 12px; }
.interest-meter { position: relative; height: 12px; border-radius: 999px; background: rgba(148,163,189,0.18); overflow: hidden; margin-top: 6px; }
.interest-fill { height: 100%; background: linear-gradient(90deg, #22c55e, #f59e0b, #ef4444); }
.interest-label { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }

.talent-movement-history { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.movement-timeline { display: grid; gap: var(--space-2); max-height: 340px; overflow: auto; padding-right: 4px; }
.movement-item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: center; padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); border-left: 4px solid var(--accent); }
.move-date { font-weight: 800; color: var(--accent); font-size: 13px; }
.move-details { color: var(--text-secondary); font-size: 13px; }
.no-movement { text-align: center; color: var(--text-muted); font-style: italic; padding: var(--space-4); }

.poaching-alerts { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.risk-analysis { margin-top: var(--space-3); }
.no-risk { text-align: center; color: var(--success); font-style: italic; padding: var(--space-4); }
.risk-wrestlers h5 { color: var(--accent-strong); margin: 0 0 var(--space-3) 0; }
.risk-wrestler { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.risk-wrestler.high { border-left: 4px solid var(--danger); }
.risk-wrestler.medium { border-left: 4px solid var(--warning); }
.risk-wrestler.low { border-left: 4px solid var(--success); }
.risk-wrestler .wrestler-info { display: flex; align-items: center; gap: var(--space-3); }
.small-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(148,163,189,0.2); }
.wrestler-details .wrestler-name { margin: 0; }
.contract-info { font-size: 12px; color: var(--text-muted); }
.risk-indicator { text-align: right; }
.risk-level { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 999px; margin-bottom: 4px; }
.risk-level.high { background: rgba(248,113,113,0.2); color: #fecaca; border: 1px solid rgba(248,113,113,0.35); }
.risk-level.medium { background: rgba(251,191,36,0.2); color: #fde68a; border: 1px solid rgba(251,191,36,0.35); }
.risk-level.low { background: rgba(52,211,153,0.2); color: #bbf7d0; border: 1px solid rgba(52,211,153,0.35); }
.ai-interest-mini { font-size: 11px; color: var(--text-muted); }

/* Competition: Business Warfare subpage styles */
.business-warfare-panel { display: grid; gap: var(--space-4); }
.business-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.warfare-intensity { color: var(--text-muted); font-weight: 600; }
.business-modifiers { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.modifier-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.modifier-card { padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.modifier-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modifier-header h5 { margin: 0; }
.modifier-value { font-weight: 800; }
.modifier-value.positive { color: var(--success); }
.modifier-value.negative { color: var(--danger); }
.modifier-description { color: var(--text-secondary); font-size: 13px; }

.competitor-analysis { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.competitor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-3); }
.competitor-card { padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.competitor-header { display: flex; align-items: center; justify-content: space-between; padding-left: var(--space-2); margin-bottom: var(--space-3); }
.financial-health { font-size: 12px; font-weight: 700; }
.financial-health.strong { color: var(--success); }
.financial-health.moderate { color: var(--warning); }
.financial-health.weak { color: var(--danger); }
.competitor-stats { display: grid; gap: 6px; }
.stat-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.stat-label { color: var(--text-muted); }
.stat-value { color: var(--text-secondary); font-weight: 700; }
.stat-value.positive { color: var(--success); }
.stat-value.negative { color: var(--danger); }
.stat-value.emergency { color: var(--warning); font-weight: 800; }
.stat-value.normal { color: var(--success); }

.market-outlook { padding: var(--space-4); border-radius: var(--radius-md); border: 1px solid rgba(148,163,189,0.18); background: linear-gradient(160deg, rgba(16,25,46,0.7), rgba(12,19,36,0.82)); }
.outlook-analysis { margin-top: var(--space-3); }
.market-predictions { display: grid; gap: var(--space-2); }
.prediction { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(148,163,189,0.18); background: rgba(15,25,48,0.6); }
.prediction.positive { border-left: 4px solid var(--success); }
.prediction.negative { border-left: 4px solid var(--danger); }
.prediction.warning { border-left: 4px solid var(--warning); }
.prediction.info { border-left: 4px solid var(--accent); }
.prediction-icon { font-size: 18px; line-height: 1; }
.prediction-text { color: var(--text-secondary); }
input::placeholder {
    color: rgba(148, 163, 189, 0.5);
}

.stats-grid,
.training-grid,
.roster-dev-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.booking-actions {
    margin-top: var(--space-5);
}

.card-header h3 {
    margin: 0;
}

.card-badge {
    display: inline-flex;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(79, 157, 255, 0.28);
    font-weight: 700;
}

.show-info {
    color: var(--text-secondary);
}

.tv-negotiations-controls {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: var(--space-5);
}

.tv-button-row {
    display: flex;
    gap: var(--space-2);
}

.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(3, 6, 13, 0.75);
    backdrop-filter: blur(12px);
    z-index: 950;
}

.modal:not(.hidden) {
    display: flex;
}

.modal-content {
    width: auto;
    max-width: 90vw;
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.modal-swipe-handle { display: none; }

/* Inline booking side-selection modal overlay (ensure this CSS is present in desktop build) */
.side-selection-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000; /* above app shell and other overlays */
}

.side-selection-modal .modal-content {
    background: #2a2a2a;
    color: #fff;
    border-radius: 10px;
    padding: 16px;
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.side-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
}

/* =========================
   TOAST NOTIFICATION SYSTEM (desktop overlay)
   ========================= */

/* Toast Container */
.toast-container {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001; /* above app overlays */
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    width: calc(100% - 40px);
    max-width: 400px;
}

/* Individual Toast */
.toast {
    background: var(--bg-elevated);
    color: var(--text-primary);
    padding: 16px 20px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--accent-primary);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    backdrop-filter: blur(20px);
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    /* Initial state */
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Toast visible state */
.toast.toast-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Toast exit state */
.toast.toast-exit {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Toast Types */
.toast.success {
    border-left-color: var(--success);
    background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(76, 175, 80, 0.1) 100%);
}

.toast.error {
    border-left-color: var(--danger);
    background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(244, 67, 54, 0.1) 100%);
}

.toast.warning {
    border-left-color: var(--warning);
    background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(255, 152, 0, 0.1) 100%);
}

.toast.info {
    border-left-color: var(--accent);
    background: linear-gradient(135deg, var(--surface-elevated) 0%, rgba(33, 150, 243, 0.1) 100%);
}

/* Toast Icon */
.toast-icon {
    font-size: 18px;
    flex-shrink: 0;
    opacity: 0.9;
}

.toast.success .toast-icon::before { content: '✅'; }
.toast.error .toast-icon::before { content: '❌'; }
.toast.warning .toast-icon::before { content: '⚠️'; }
.toast.info .toast-icon::before { content: 'ℹ️'; }

/* Toast Message */
.toast-message {
    flex: 1;
    word-wrap: break-word;
}

/* Toast Progress Bar */
.toast-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: currentColor;
    opacity: 0.3;
    transform-origin: left;
    animation: toast-progress linear forwards;
}

@keyframes toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* Toast Hover Effects */
.toast:hover {
    transform: translateY(0) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.toast:active {
    transform: translateY(0) scale(0.98);
}

/* Mobile Adjustments for Toast */
@media (max-width: 768px) {
    .toast-container { width: calc(100% - 20px); }
    .toast { padding: 12px 16px; font-size: 14px; }
    .toast-icon { font-size: 16px; }
}

.side-buttons button {
    background: #4a90e2;
    color: #fff;
    border: none;
    padding: 10px 12px;
    border-radius: 6px;
    cursor: pointer;
}

.side-buttons button:disabled {
    background: #666;
    cursor: not-allowed;
}

.close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: transparent;
    border: none;
    font-size: 32px;
    color: var(--text-secondary);
    padding: 0;
}

.start-screen-content {
    display: grid;
    gap: var(--space-4);
    text-align: center;
}

.companies-grid {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

#companies-container button {
    width: 100%;
}

/* Company selection cards */
.flip-card.company-card {
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.16);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform var(--transition);
    min-height: 300px;
}

@media (hover: hover) and (pointer: fine) {
    .flip-card.company-card:hover .flip-card-inner {
        transform: rotateY(180deg);
    }
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: grid;
    grid-auto-rows: min-content;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.company-card-header {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid rgba(79, 157, 255, 0.12);
}

.company-logo {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(79, 157, 255, 0.18);
}

.company-basic-info {
    display: grid;
    gap: 4px;
}

.company-name {
    margin: 0;
    font-size: 18px;
}

.company-owner {
    font-size: 13px;
    color: var(--text-muted);
}

.company-rating .overall-rating {
    min-width: 44px;
    padding: 6px 10px;
    border-radius: 999px;
    text-align: center;
    font-weight: 700;
}

.overall-rating.excellent { background: rgba(34,197,94,0.18); color: #86efac; border: 1px solid rgba(34,197,94,0.35); }
.overall-rating.great     { background: rgba(59,130,246,0.18); color: #93c5fd; border: 1px solid rgba(59,130,246,0.35); }
.overall-rating.good      { background: rgba(234,179,8,0.18);  color: #fde68a; border: 1px solid rgba(234,179,8,0.35); }
.overall-rating.average   { background: rgba(148,163,184,0.18); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.35); }
.overall-rating.poor      { background: rgba(248,113,113,0.18); color: #fecaca; border: 1px solid rgba(248,113,113,0.35); }

.company-stats {
    padding: var(--space-4);
}

/* Home screen */
.home-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr;
    gap: var(--space-4);
}

.home-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(79, 157, 255, 0.16);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    min-height: 220px;
}

/* ======================
   Calendar (Month View)
   ====================== */
.calendar {
    display: grid;
    gap: var(--space-4);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.16);
    background: linear-gradient(150deg, rgba(15, 23, 42, 0.75), rgba(12, 19, 36, 0.85));
}

.calendar-header h3 {
    margin: 0;
}

.calendar-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--space-2);
}

.calendar-day-header {
    text-align: center;
    font-weight: 700;
    color: var(--text-secondary);
}

.calendar-day {
    min-height: 120px;
    border: 1px solid rgba(79, 157, 255, 0.12);
    border-radius: var(--radius-sm);
    padding: var(--space-2);
    background: linear-gradient(160deg, rgba(16, 26, 48, 0.55), rgba(10, 17, 32, 0.6));
    display: grid;
    grid-template-rows: auto 1fr;
    position: relative;
}

.day-number {
    font-size: 12px;
    color: var(--text-secondary);
}

.calendar-day.current-day {
    border-color: rgba(52, 211, 153, 0.6);
    box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.35);
}

.calendar-day.past-day {
    opacity: 0.7;
}

.shows-container {
    display: grid;
    gap: 6px;
    margin-top: var(--space-2);
}

.show-item {
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    font-size: 12px;
    color: #0b1221;
    background: rgba(79, 157, 255, 0.25);
    border: 1px solid rgba(255,255,255,0.08);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.ppv-event {
    color: #160b21;
    border: 1px solid rgba(255, 215, 0, 0.45);
}

.calendar-legend {
    display: grid;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.16);
    background: linear-gradient(150deg, rgba(15, 23, 42, 0.75), rgba(12, 19, 36, 0.85));
    padding: var(--space-4);
}

.calendar-legend h4 {
    margin: 0;
}

.legend-items {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.home-card-header {
    padding: var(--space-4);
    border-bottom: 1px solid rgba(79, 157, 255, 0.12);
    font-weight: 700;
    font-size: 16px;
}

.home-list {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-4);
    display: grid;
    gap: var(--space-2);
}

.home-list li {
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    border: 1px solid rgba(79, 157, 255, 0.12);
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, rgba(20, 30, 55, 0.6), rgba(12, 20, 38, 0.7));
}

.home-list li .list-primary {
    font-weight: 600;
}

.home-list li .list-secondary {
    color: var(--text-secondary);
    font-size: 12px;
}

.home-list li.empty {
    text-align: center;
    color: var(--text-muted);
    border-style: dashed;
}

.stats-container { display: grid; }
.primary-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.stat-group { display: grid; gap: 4px; }
.stat-value { font-size: 16px; font-weight: 700; }
.stat-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; }

.flip-card-back .card-back-content { padding: var(--space-4); display: grid; gap: var(--space-3); }
.back-company-name { margin: 0 0 var(--space-2); font-size: 18px; }
.back-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.back-section { display: grid; gap: 6px; }
.back-section h4 { margin: 0; font-size: 14px; color: var(--text-secondary); }
.back-detail { font-size: 13px; color: var(--text-primary); opacity: 0.9; }

.flip-card.company-card:hover {
    border-color: rgba(79, 157, 255, 0.35);
    box-shadow: 0 24px 48px rgba(79, 157, 255, 0.16);
}

.table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.14);
}

table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(12, 19, 36, 0.85);
}

table th,
table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid rgba(79, 157, 255, 0.1);
    text-align: left;
}

table th {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 12px;
    color: var(--text-muted);
}

table tr:hover {
    background: rgba(37, 99, 235, 0.08);
}

.spinner {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid rgba(79, 157, 255, 0.12);
    border-top-color: var(--accent);
    animation: spin 1s linear infinite;
    margin: var(--space-4) auto 0;
}

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

::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(79, 157, 255, 0.25);
    border-radius: 999px;
}

@media (min-width: 1440px) {
    .screen-stack {
        /* Keep top padding aligned with sidebar; only expand side/bottom spacing */
        padding: var(--space-4) var(--space-7) var(--space-7);
        gap: var(--space-7);
    }

    .grid-auto {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .sidebar-nav {
        gap: 0;
    }
}

@media (min-width: 1920px) {
    :root {
        --sidebar-width: clamp(280px, 16vw, 360px);
    }

    .workspace-breadcrumb-value {
        font-size: 26px;
    }
}
.wrestlers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-3);
}

/* Flip container (generic) */
.flip-card {
    position: relative;
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.16);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    perspective: 1000px;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    cursor: pointer;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Wrestler card (regular, non-flip) */
.wrestler-card {
    border-radius: var(--radius-md);
    border: 1px solid rgba(79, 157, 255, 0.16);
    background: linear-gradient(160deg, rgba(15, 23, 42, 0.82), rgba(10, 16, 30, 0.88));
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    cursor: pointer;
}

.wrestler-card:hover,
.flip-card:hover {
    transform: translateY(-2px);
    border-color: rgba(79, 157, 255, 0.35);
    box-shadow: 0 18px 40px rgba(79, 157, 255, 0.16);
}

.wrestler-card.injured,
.flip-card.injured {
    border-left: 4px solid var(--danger);
}

.wrestler-card.external,
.flip-card.external {
    opacity: 0.88;
}

.wrestler-card.selected-wrestler,
.flip-card.selected-wrestler {
    border-color: rgba(34,197,94,0.55);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.45), 0 18px 40px rgba(34,197,94,0.12);
}

/* Header */
.wrestler-card-header {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: rgba(79, 157, 255, 0.06);
    border-bottom: 1px solid rgba(79,157,255,0.12);
    min-height: 80px;
}

.wrestler-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(79,157,255,0.28);
}

.wrestler-basic-info { display: grid; gap: 4px; min-width: 0; }
.wrestler-name { margin: 0; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.wrestler-promotion { color: var(--text-muted); font-size: 12px; }

.wrestler-rating { text-align: center; min-width: 56px; }
.wrestler-card .overall-rating,
.flip-card-front .overall-rating {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    font-weight: 900;
    border: 2px solid rgba(255,255,255,0.9);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* Stats and details blocks */
.wrestler-stats { padding: var(--space-3); background: rgba(12,19,36,0.55); border-bottom: 1px solid rgba(79,157,255,0.12); }
.wrestler-details { padding: var(--space-3); background: rgba(10,16,30,0.55); border-bottom: 1px solid rgba(79,157,255,0.12); }

/* Status badges */
.wrestler-status {
    padding: var(--space-2) var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    background: rgba(10,16,30,0.6);
    border-bottom: 1px solid rgba(79,157,255,0.12);
}

.status-badge {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.status-badge.injured { background: rgba(248,113,113,0.2); color: #fecaca; border-color: rgba(248,113,113,0.35); }
.status-badge.championship { background: rgba(234,179,8,0.9); color: #0b0b0b; border-color: rgba(234,179,8,0.75); }
.status-badge.affordable { background: rgba(52,211,153,0.28); color: #bbf7d0; border-color: rgba(52,211,153,0.45); }
.status-badge.expensive { background: rgba(249,115,22,0.28); color: #fed7aa; border-color: rgba(249,115,22,0.45); }
.status-badge.selected { background: rgba(34,197,94,0.28); color: #bbf7d0; border-color: rgba(34,197,94,0.45); }

.card-footer { padding: var(--space-2) var(--space-3); background: rgba(9,14,26,0.7); text-align: center; }
.flip-hint { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* Stat bars used inside wrestler cards */
.stat-item { margin-bottom: var(--space-2); }
.stat-label-row { display: flex; justify-content: center; margin-bottom: 6px; font-size: 13px; }
.stat-bar { height: 18px; background: rgba(148,163,189,0.14); border-radius: 6px; overflow: hidden; border: 1px solid rgba(148,163,189,0.2); }
.stat-bar.excellent .stat-progress { background: #22c55e; }
.stat-bar.good .stat-progress { background: #3b82f6; }
.stat-bar.average .stat-progress { background: #eab308; }
.stat-bar.poor .stat-progress { background: #ef4444; }
.stat-progress { height: 100%; border-radius: 6px; transition: width 0.3s ease; position: relative; }
.stat-progress[data-value]::after { content: attr(data-value); position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.7); }
.visual-stats { padding: var(--space-2); }
.non-visual-stats { margin-top: var(--space-2); }
.stat-info-row { display: flex; justify-content: space-between; margin-bottom: 4px; font-size: 12px; }
.stat-info-label { color: var(--text-muted); }
.stat-info-value { color: var(--text-primary); font-weight: 700; }
.stat-info-value.positive { color: #22c55e; }
.stat-info-value.negative { color: #ef4444; }

/* Free agent specific badge shown on front */
.expensive-badge { display: inline-block; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 800; background: rgba(249,115,22,0.28); color: #fed7aa; border: 1px solid rgba(249,115,22,0.45); }

/* Disposition variants for status-badge */
.status-badge.disposition { background: rgba(148,163,189,0.18); color: #cbd5e1; border-color: rgba(148,163,189,0.35); }
.status-badge.disposition.face { background: rgba(59,130,246,0.2); color: #93c5fd; border-color: rgba(59,130,246,0.35); }
.status-badge.disposition.heel { background: rgba(248,113,113,0.2); color: #fecaca; border-color: rgba(248,113,113,0.35); }