/* ===== CoachTool — Dual Theme System ===== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ========== Theme Variables ========== */

/* --- Dark theme (default) --- */
:root {
    --bg-primary: #0a0f1a;
    --bg-secondary: #0d1321;
    --bg-card: rgba(15, 23, 42, 0.5);
    --bg-card-hover: rgba(30, 41, 59, 0.6);
    --bg-card-solid: #0f172a;
    --bg-input: rgba(15, 23, 42, 0.8);
    --bg-surface: rgba(15, 23, 42, 0.4);
    --bg-glass: rgba(15, 23, 42, 0.75);
    --bg-glass-light: rgba(30, 41, 59, 0.5);
    --bg-modal: rgba(15, 23, 42, 0.95);
    --bg-overlay: rgba(0, 0, 0, 0.6);
    --bg-tag-group: rgba(255, 255, 255, 0.02);
    --bg-badge: rgba(59, 130, 246, 0.1);
    --bg-btn-secondary: #1e293b;
    --bg-btn-secondary-hover: #334155;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-heading: #ffffff;
    --text-badge: #60a5fa;
    --text-link: #94a3b8;
    --text-link-hover: #ffffff;

    --border-primary: rgba(255, 255, 255, 0.06);
    --border-secondary: rgba(255, 255, 255, 0.04);
    --border-input: rgba(51, 65, 85, 0.5);
    --border-hover: rgba(59, 130, 246, 0.2);
    --border-btn-secondary: rgba(51, 65, 85, 0.5);

    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.1);
    --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.5);
    --shadow-nav: 0 4px 20px rgba(0, 0, 0, 0.3);

    --login-bg: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(16, 185, 129, 0.05) 0%, transparent 50%),
                #0a0f1a;
    --login-card-bg: rgba(15, 23, 42, 0.6);
    --login-card-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 120px rgba(59, 130, 246, 0.03);

    --scrollbar-thumb: rgba(100, 116, 139, 0.3);
    --scrollbar-thumb-hover: rgba(100, 116, 139, 0.5);

    --separator: rgba(255, 255, 255, 0.04);
    --gradient-overlay-end: rgba(10, 15, 26, 0.5);

    --ws-header-bg: rgba(10, 15, 26, 0.85);
    --analysis-header-start: rgba(10, 15, 26, 0.95);
    --analysis-header-end: rgba(10, 15, 26, 0.85);

    --tag-tile-shine: rgba(255, 255, 255, 0.05);
    --tag-tile-kbd-bg: rgba(0, 0, 0, 0.3);
    --tag-item-hover: rgba(255, 255, 255, 0.04);
    --tag-item-active-bg: rgba(255, 255, 255, 0.02);

    --state-idle-bg: rgba(30, 41, 59, 0.8);
    --anno-row-border: rgba(255, 255, 255, 0.02);
    --anno-playhead: rgba(255, 255, 255, 0.8);
    --anno-playhead-shadow: rgba(255, 255, 255, 0.2);

    --checkbox-bg: #1e293b;
    --checkbox-border: #475569;
    --placeholder: #4b5563;

    --theme-toggle-bg: rgba(255, 255, 255, 0.06);
    --theme-toggle-hover: rgba(255, 255, 255, 0.12);
    --theme-toggle-icon: #94a3b8;
}

/* --- Light theme --- */
[data-theme="light"] {
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: rgba(255, 255, 255, 0.85);
    --bg-card-hover: rgba(255, 255, 255, 0.95);
    --bg-card-solid: #ffffff;
    --bg-input: #f1f5f9;
    --bg-surface: rgba(255, 255, 255, 0.7);
    --bg-glass: rgba(255, 255, 255, 0.82);
    --bg-glass-light: rgba(241, 245, 249, 0.7);
    --bg-modal: rgba(255, 255, 255, 0.97);
    --bg-overlay: rgba(15, 23, 42, 0.3);
    --bg-tag-group: rgba(0, 0, 0, 0.02);
    --bg-badge: rgba(59, 130, 246, 0.08);
    --bg-btn-secondary: #e2e8f0;
    --bg-btn-secondary-hover: #cbd5e1;

    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-heading: #0f172a;
    --text-badge: #2563eb;
    --text-link: #64748b;
    --text-link-hover: #0f172a;

    --border-primary: rgba(0, 0, 0, 0.08);
    --border-secondary: rgba(0, 0, 0, 0.05);
    --border-input: #cbd5e1;
    --border-hover: rgba(59, 130, 246, 0.3);
    --border-btn-secondary: #cbd5e1;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(59, 130, 246, 0.12);
    --shadow-modal: 0 25px 60px rgba(0, 0, 0, 0.15);
    --shadow-nav: 0 1px 3px rgba(0, 0, 0, 0.06);

    --login-bg: radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(16, 185, 129, 0.04) 0%, transparent 50%),
                #f8fafc;
    --login-card-bg: rgba(255, 255, 255, 0.85);
    --login-card-shadow: 0 25px 60px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);

    --scrollbar-thumb: rgba(100, 116, 139, 0.2);
    --scrollbar-thumb-hover: rgba(100, 116, 139, 0.4);

    --separator: rgba(0, 0, 0, 0.06);
    --gradient-overlay-end: rgba(248, 250, 252, 0.5);

    --ws-header-bg: rgba(255, 255, 255, 0.9);
    --analysis-header-start: rgba(255, 255, 255, 0.97);
    --analysis-header-end: rgba(248, 250, 252, 0.9);

    --tag-tile-shine: rgba(255, 255, 255, 0.4);
    --tag-tile-kbd-bg: rgba(0, 0, 0, 0.06);
    --tag-item-hover: rgba(0, 0, 0, 0.04);
    --tag-item-active-bg: rgba(0, 0, 0, 0.02);

    --state-idle-bg: rgba(241, 245, 249, 0.8);
    --anno-row-border: rgba(0, 0, 0, 0.04);
    --anno-playhead: rgba(15, 23, 42, 0.8);
    --anno-playhead-shadow: rgba(15, 23, 42, 0.2);

    --checkbox-bg: #f1f5f9;
    --checkbox-border: #cbd5e1;
    --placeholder: #94a3b8;

    --theme-toggle-bg: rgba(0, 0, 0, 0.05);
    --theme-toggle-hover: rgba(0, 0, 0, 0.1);
    --theme-toggle-icon: #64748b;
}

/* ========== Smooth theme transition ========== */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, background 0.3s ease !important;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* ---------- Glass morphism ---------- */
.glass {
    background: var(--bg-glass);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-nav);
}
.glass-light {
    background: var(--bg-glass-light);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-secondary);
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }

/* ---------- Inputs ---------- */
input, select, textarea {
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}
input::placeholder, textarea::placeholder {
    color: var(--placeholder);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ---------- Buttons ---------- */
button { font-family: inherit; }
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    border: none;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}
.btn-primary:hover {
    background: linear-gradient(135deg, #60a5fa, #3b82f6);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
    transform: translateY(-1px);
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--theme-toggle-bg);
    border: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.2s;
    color: var(--theme-toggle-icon);
    padding: 0;
}
.theme-toggle:hover {
    background: var(--theme-toggle-hover);
    transform: scale(1.05);
}
.theme-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}
.theme-toggle:hover svg {
    transform: rotate(15deg);
}
/* Show/hide the right icon */
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* ===== LOGIN PAGE ===== */
.login-bg {
    background: var(--login-bg);
}
.login-card {
    background: var(--login-card-bg);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-primary);
    box-shadow: var(--login-card-shadow);
}
.login-logo {
    background: linear-gradient(135deg, #60a5fa, #34d399);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Brand gradient — preserved across both themes */
.brand-gradient, .login-logo {
    background: linear-gradient(135deg, #60a5fa, #34d399) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ===== DASHBOARD ===== */
.match-card {
    background: var(--bg-card);
    border: 1px solid var(--border-secondary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.match-card:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-hover);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}
.club-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-secondary);
    transition: all 0.2s;
}
.club-card:hover {
    border-color: var(--border-primary);
    background: var(--bg-card-hover);
}
.stat-badge {
    background: var(--bg-badge);
    color: var(--text-badge);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
}

/* ===== WORKSTATION ===== */

/* -- Header bar -- */
.ws-header {
    background: var(--ws-header-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-secondary);
    box-shadow: var(--shadow-nav);
}
.ws-match-time {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}
[data-theme="light"] .ws-match-time {
    text-shadow: none;
}

/* -- Tag tiles -- */
.tag-tile {
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.tag-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--tag-tile-shine), transparent);
    opacity: 0;
    transition: opacity 0.15s;
}
.tag-tile:hover::before { opacity: 1; }
.tag-tile:hover {
    transform: translateY(-1px);
    filter: brightness(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
[data-theme="light"] .tag-tile:hover {
    filter: brightness(0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.tag-tile.active {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 4px 16px rgba(0, 0, 0, 0.4);
    transform: scale(1.05);
}
[data-theme="light"] .tag-tile.active {
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.15);
}
.tag-tile.recording {
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.8), 0 4px 16px rgba(239, 68, 68, 0.3);
    transform: scale(1.05);
    animation: tile-recording 1s ease-in-out infinite;
}
@keyframes tile-recording {
    0%, 100% { box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.8), 0 4px 16px rgba(239, 68, 68, 0.3); }
    50% { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5), 0 4px 24px rgba(239, 68, 68, 0.15); }
}
/* Period tag range in annotation bar */
.anno-range {
    position: absolute;
    height: calc(100% - 4px);
    top: 2px;
    opacity: 0.3;
    border-radius: 2px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.anno-range:hover {
    opacity: 0.5;
}
.tag-tile kbd {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 9px;
    background: var(--tag-tile-kbd-bg);
    padding: 1px 5px;
    border-radius: 3px;
    opacity: 0.5;
}

/* -- Pitch -- */
#pitch-svg { cursor: crosshair; }
#pitch-container.awaiting-click {
    animation: pulse-border 1.5s ease-in-out infinite;
}
@keyframes pulse-border {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(59, 130, 246, 0.3); }
    50% { box-shadow: inset 0 0 0 3px rgba(59, 130, 246, 0.15); }
}
.pitch-dot { cursor: pointer; transition: all 0.15s; }
.pitch-dot:hover { r: 8; filter: brightness(1.3); }

/* -- Tag list -- */
.tag-item {
    transition: all 0.12s;
    cursor: pointer;
    border-left: 3px solid transparent;
    border-radius: 6px;
    padding: 6px 8px;
}
.tag-item:hover {
    background: var(--tag-item-hover);
}
.tag-item.selected {
    background: rgba(59, 130, 246, 0.12);
    border-left-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.tag-item.tag-active {
    background: var(--tag-item-active-bg);
    border-left-color: currentColor;
}

/* -- Clip button in tag list -- */
.tag-clip-btn {
    transition: all 0.2s ease;
    border-radius: 6px;
    padding: 4px;
}
.tag-clip-btn:hover {
    transform: scale(1.6);
    background: rgba(59, 130, 246, 0.15);
}

/* -- Filter chips -- */
.filter-chip {
    transition: all 0.15s;
    cursor: pointer;
    user-select: none;
}
.filter-chip.active { opacity: 1; }
.filter-chip.inactive { opacity: 0.2; filter: grayscale(0.5); }

/* -- Annotation bar -- */
.anno-marker {
    position: absolute;
    top: 4px;
    bottom: 4px;
    width: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    opacity: 0.85;
}
.anno-marker:hover {
    opacity: 1;
    width: 14px;
    z-index: 5;
    transform: scaleY(1.3);
    filter: brightness(1.3);
    box-shadow: 0 0 8px currentColor;
}
.anno-marker.key-moment {
    box-shadow: 0 0 8px rgba(234, 179, 8, 0.6);
}
.anno-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--anno-playhead);
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 8px var(--anno-playhead-shadow);
}
.anno-row {
    position: relative;
    height: 22px;
    border-bottom: 1px solid var(--anno-row-border);
}
.anno-row-label {
    position: absolute;
    left: 6px;
    top: 3px;
    font-size: 10px;
    opacity: 0.5;
    font-weight: 500;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

/* -- Group headers -- */
.tag-group-header {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    margin-top: 4px;
    border-radius: 4px;
    background: var(--bg-tag-group);
    border-left: 3px solid;
    letter-spacing: 0.02em;
}

/* -- Details panel -- */
.detail-label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

/* -- Modals -- */
.modal-overlay {
    background: var(--bg-overlay);
    backdrop-filter: blur(8px);
}
.modal-card {
    background: var(--bg-modal);
    backdrop-filter: blur(24px);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-modal);
}

/* -- State indicator -- */
.state-idle { background: var(--state-idle-bg); color: var(--text-muted); }
.state-awaiting { background: rgba(59, 130, 246, 0.15); color: #60a5fa; animation: state-pulse 2s ease-in-out infinite; }
.state-selected { background: rgba(234, 179, 8, 0.15); color: #fbbf24; }
.state-recording { background: rgba(239, 68, 68, 0.2); color: #f87171; animation: state-recording-pulse 1s ease-in-out infinite; }
@keyframes state-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes state-recording-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* -- Separator lines -- */
.separator { border-color: var(--separator); }

/* -- Subtle gradients -- */
.gradient-overlay {
    background: linear-gradient(180deg, transparent 0%, var(--gradient-overlay-end) 100%);
}

/* ========== Light theme overrides for Tailwind utility classes ========== */
/* These adapt inline Tailwind classes that reference dark palette colors */

[data-theme="light"] .bg-dark-600,
[data-theme="light"] .bg-dark-500 {
    background-color: var(--bg-primary) !important;
}
[data-theme="light"] .bg-dark-400,
[data-theme="light"] .bg-dark-300 {
    background-color: var(--bg-secondary) !important;
}
[data-theme="light"] .bg-dark-200,
[data-theme="light"] .bg-dark-100 {
    background-color: var(--bg-card-solid) !important;
}

[data-theme="light"] .text-gray-100,
[data-theme="light"] .text-white {
    color: var(--text-heading) !important;
}
[data-theme="light"] .text-gray-200 {
    color: var(--text-primary) !important;
}
[data-theme="light"] .text-gray-300 {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .text-gray-400 {
    color: var(--text-secondary) !important;
}
[data-theme="light"] .text-gray-500 {
    color: var(--text-muted) !important;
}
[data-theme="light"] .text-gray-600 {
    color: var(--text-muted) !important;
}
[data-theme="light"] .text-gray-700 {
    color: #cbd5e1 !important;
}

[data-theme="light"] .bg-slate-800 {
    background-color: var(--bg-btn-secondary) !important;
}
[data-theme="light"] .hover\:bg-slate-700:hover {
    background-color: var(--bg-btn-secondary-hover) !important;
}
[data-theme="light"] .border-slate-700\/50,
[data-theme="light"] .border-slate-700 {
    border-color: var(--border-input) !important;
}
[data-theme="light"] .hover\:border-slate-600:hover,
[data-theme="light"] .hover\:border-slate-600\/50:hover {
    border-color: #94a3b8 !important;
}
[data-theme="light"] .bg-slate-900\/80,
[data-theme="light"] .bg-slate-900\/60 {
    background-color: var(--bg-input) !important;
}

/* Form inputs in light theme */
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
    background: var(--bg-input);
    border-color: var(--border-input);
    color: var(--text-primary);
}

/* Checkboxes */
[data-theme="light"] input[type="checkbox"] {
    background-color: var(--checkbox-bg) !important;
    border-color: var(--checkbox-border) !important;
}

/* Analysis / Club header overrides */
[data-theme="light"] .analysis-header,
[data-theme="light"] .club-header {
    background: linear-gradient(180deg, var(--analysis-header-start) 0%, var(--analysis-header-end) 100%) !important;
    border-bottom-color: var(--border-primary) !important;
}

/* Chart container in light theme */
[data-theme="light"] .chart-container {
    background: var(--bg-surface) !important;
    border-color: var(--border-secondary) !important;
}

/* Stat card in light theme */
[data-theme="light"] .stat-card {
    background: var(--bg-card) !important;
    border-color: var(--border-secondary) !important;
}
[data-theme="light"] .stat-card:hover {
    border-color: var(--border-hover) !important;
    box-shadow: var(--shadow-card-hover) !important;
}

/* KPI card */
[data-theme="light"] .kpi-card {
    background: var(--bg-card) !important;
    border-color: var(--border-secondary) !important;
}

/* Login grid pattern */
[data-theme="light"] .login-bg .fixed {
    opacity: 0.03 !important;
}

/* ===== LIGHT THEME — Workstation Overrides ===== */

/* Background colors for workstation panels */
[data-theme="light"] .ws-header {
    background: rgba(255, 255, 255, 0.92) !important;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .ws-pitch-col {
    border-right-color: rgba(0, 0, 0, 0.08) !important;
}

/* Pitch — lighter field in light mode */
[data-theme="light"] #pitch-svg rect:first-child {
    fill: #2d7a45 !important;
}
[data-theme="light"] #pitch-svg line,
[data-theme="light"] #pitch-svg path,
[data-theme="light"] #pitch-svg rect:not(:first-child) {
    stroke: #3d9455 !important;
}
/* Only stroke circles (not fill) — center circle must stay transparent */
[data-theme="light"] #pitch-svg > circle {
    stroke: #3d9455 !important;
}
/* Only fill the small dot circles (r=3), not the large center circle */
[data-theme="light"] #pitch-svg > circle[r="3"] {
    fill: #3d9455 !important;
}

/* Annotation bar & timeline in light mode */
[data-theme="light"] #annotation-bar > div {
    background: rgba(241, 245, 249, 0.95) !important;
}
[data-theme="light"] #timeline {
    background: rgba(241, 245, 249, 0.95) !important;
}
[data-theme="light"] .anno-playhead {
    background: rgba(15, 23, 42, 0.7) !important;
}

/* Tag tiles area */
[data-theme="light"] #tag-tiles {
    background: rgba(241, 245, 249, 0.6) !important;
}
[data-theme="light"] .tag-tile {
    border-width: 1.5px !important;
}

/* Filter area */
[data-theme="light"] #tag-filters {
    background: rgba(248, 250, 252, 0.8) !important;
}
[data-theme="light"] #tag-filters select,
[data-theme="light"] #tag-filters input {
    background: white !important;
    border-color: #e2e8f0 !important;
}
[data-theme="light"] .group-btn {
    background: #e2e8f0 !important;
    color: #475569 !important;
}
[data-theme="light"] .group-btn[style*="background: rgba(55"] {
    background: #3b82f6 !important;
    color: white !important;
}

/* Tag list */
[data-theme="light"] #tag-list-scroll {
    background: white !important;
}
[data-theme="light"] .tag-item {
    border-left-width: 3px;
}
[data-theme="light"] .tag-item:hover {
    background: rgba(59, 130, 246, 0.06) !important;
}
[data-theme="light"] .tag-item.selected {
    background: rgba(59, 130, 246, 0.1) !important;
}

/* Details panel */
[data-theme="light"] #details-panel {
    background: rgba(248, 250, 252, 0.9) !important;
    border-top-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] #details-panel select,
[data-theme="light"] #details-panel textarea {
    background: white !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
[data-theme="light"] #btn-key-moment {
    background: rgba(234, 179, 8, 0.1) !important;
    border-color: rgba(234, 179, 8, 0.25) !important;
    color: #b45309 !important;
}
[data-theme="light"] #btn-create-clip {
    background: rgba(59, 130, 246, 0.1) !important;
    border-color: rgba(59, 130, 246, 0.25) !important;
    color: #2563eb !important;
}
[data-theme="light"] #btn-delete-tag {
    background: rgba(239, 68, 68, 0.08) !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
    color: #dc2626 !important;
}

/* Attack direction bar */
[data-theme="light"] #attack-direction-bar {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* State indicator */
[data-theme="light"] .state-idle {
    background: rgba(241, 245, 249, 0.9) !important;
    color: #64748b !important;
}
[data-theme="light"] .state-awaiting {
    background: rgba(59, 130, 246, 0.12) !important;
    color: #2563eb !important;
}
[data-theme="light"] .state-selected {
    background: rgba(234, 179, 8, 0.12) !important;
    color: #b45309 !important;
}
[data-theme="light"] .state-recording {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #dc2626 !important;
}

/* Modals in light mode */
[data-theme="light"] .modal-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}
[data-theme="light"] .modal-card input,
[data-theme="light"] .modal-card select,
[data-theme="light"] .modal-card textarea {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
[data-theme="light"] .modal-card h3 {
    color: #0f172a !important;
}

/* Dashboard cards in light mode — better contrast */
[data-theme="light"] .match-card {
    background: white !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .match-card:hover {
    background: rgba(248, 250, 252, 1) !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .club-card {
    background: white !important;
    border-color: rgba(0, 0, 0, 0.06) !important;
}
[data-theme="light"] .club-card:hover {
    background: rgba(248, 250, 252, 1) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

/* Body and main background in light mode */
[data-theme="light"] body {
    background: #f8fafc !important;
}

/* Stat badge */
[data-theme="light"] .stat-badge {
    background: rgba(59, 130, 246, 0.08) !important;
    color: #2563eb !important;
}

/* Buttons in light mode */
[data-theme="light"] .bg-slate-800\/50 {
    background: rgba(241, 245, 249, 0.8) !important;
}
[data-theme="light"] .bg-slate-800\/30 {
    background: rgba(241, 245, 249, 0.6) !important;
}

/* Navigation buttons */
[data-theme="light"] .ws-header .hover\:bg-slate-700:hover {
    background: #e2e8f0 !important;
}

/* Half markers button */
[data-theme="light"] #btn-half-markers {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

/* Emerald analysis button */
[data-theme="light"] a[class*="bg-emerald"] {
    background: rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    color: #059669 !important;
}