/* CSS Variables for design system tokens */
:root {
    --bg-dark: #0b0e14;
    --bg-card: rgba(18, 24, 38, 0.75);
    --bg-card-hover: rgba(26, 34, 52, 0.85);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-active: rgba(212, 175, 55, 0.4);
    
    /* Brand Colors */
    --color-gold: #ffc83b;
    --color-gold-hover: #ffd970;
    --color-gold-glow: rgba(255, 200, 59, 0.25);
    
    --color-blue: #00d2ff;
    --color-blue-glow: rgba(0, 210, 255, 0.2);
    
    --color-red: #ff3860;
    --color-red-glow: rgba(255, 56, 96, 0.2);

    --color-success: #23d160;
    --color-success-bg: rgba(35, 209, 96, 0.15);
    --color-danger: #ff3860;
    --color-danger-bg: rgba(255, 56, 96, 0.15);

    /* Text Colors */
    --text-main: #f5f6f8;
    --text-muted: #8b949e;
    --text-dark: #121824;

    /* Spacing */
    --sidebar-width: 260px;
    --header-height: 80px;
}

/* Base resets & layouts */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Prompt', 'Inter', -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    overflow: hidden;
    height: 100vh;
}

/* Utility styles */
.hidden {
    display: none !important;
}

.text-muted { color: var(--text-muted); }
.text-accent-gold { color: var(--color-gold); text-shadow: 0 0 10px var(--color-gold-glow); }
.text-blue { color: var(--color-blue); text-shadow: 0 0 10px var(--color-blue-glow); }
.text-red { color: var(--color-red); text-shadow: 0 0 10px var(--color-red-glow); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.small { font-size: 0.85rem; }
.text-small { font-size: 0.8rem; }
.font-mono { font-family: 'Courier New', Courier, monospace; }

.d-block { display: block; }
.flex { display: flex; }
.flex-column { display: flex; direction: column; flex-direction: column; }
.flex-wrap { display: flex; flex-wrap: wrap; }
.flex-1 { flex: 1; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-end { display: flex; justify-content: flex-end; align-items: center; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 1rem; }
.gap-4 { gap: 1.5rem; }

.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.p-0 { padding: 0 !important; }
.pb-1 { padding-bottom: 0.25rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pt-3 { padding-top: 1rem; }
.w-100 { width: 100%; }

.border-bottom { border-bottom: 1px solid var(--border-color); }
.border-top { border-top: 1px solid var(--border-color); }
.border-dark { border-color: rgba(255,255,255,0.05); }

/* Scrollbar customization */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* App layout structures */
.app-container {
    display: flex;
    height: 100vh;
    width: 100vw;
    position: relative;
    background: radial-gradient(circle at 70% 20%, #151e30 0%, #0b0e14 100%);
}

/* Sidebar Styling */
.sidebar {
    width: var(--sidebar-width);
    background-color: rgba(12, 17, 26, 0.85);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 10;
    backdrop-filter: blur(15px);
}

.brand {
    height: var(--header-height);
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.brand-logo {
    color: var(--color-gold);
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 0 8px var(--color-gold-glow));
}

.brand-text h1 {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-main);
}

.brand-text span {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.nav-menu {
    padding: 1.5rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    transition: all 0.25s ease;
    font-size: 0.95rem;
    font-weight: 500;
}

.nav-item .icon {
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
}

.nav-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-main);
}

.nav-item:hover .icon {
    transform: translateX(2px);
}

.nav-item.active {
    background: linear-gradient(90deg, rgba(255, 200, 59, 0.12) 0%, rgba(255, 200, 59, 0.02) 100%);
    color: var(--color-gold);
    border-left: 3px solid var(--color-gold);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.status-indicator-online {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.status-indicator-online::before {
    content: '';
    width: 6px;
    height: 6px;
    background-color: var(--color-success);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--color-success);
}

/* Main Content Area */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    min-width: 0; /* allow flex child to shrink below content width so tables can scroll */
}

/* Hamburger button: hidden on desktop, shown on tablet/mobile to open the sidebar drawer */
.hamburger-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
    cursor: pointer;
    flex-shrink: 0;
    margin-right: 1rem;
}
.hamburger-btn svg {
    width: 20px;
    height: 20px;
}
.hamburger-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Sidebar mobile toolbar: empty on desktop, populated + shown only under the
   mobile media query below (see setupMobileHeaderRelocation in app.js). */
.sidebar-mobile-toolbar {
    display: none;
}

/* Backdrop behind the sidebar drawer on mobile/tablet - click to close */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 19;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sidebar-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

/* ===================================================================
   RESPONSIVE: TABLET (<=1024px) - sidebar becomes an off-canvas drawer
   MOBILE (<=768px) - header stacks, touch targets grow
   SMALL PHONES (<=420px) - extra tightening
   (moved to the end of this file so they load after - and correctly
   override - the base/unconditional rules for these same selectors)
   =================================================================== */

.top-header {
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2rem;
    border-bottom: 1px solid var(--border-color);
    background-color: rgba(11, 14, 20, 0.4);
    backdrop-filter: blur(10px);
    z-index: 5;
}

.header-title h2 {
    font-size: 1.4rem;
    font-weight: 600;
}

.header-title p {
    font-size: 0.85rem;
    margin-top: 0.15rem;
}

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

/* Content wrapper */
.content-view {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
}

.tab-pane {
    display: none;
    animation: fadeIn 0.4s ease forwards;
}

.tab-pane.active {
    display: block;
}

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

/* Cards & Containers */
.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
}

.card:hover {
    border-color: rgba(255, 255, 255, 0.12);
}

.card-header {
    margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 0.75rem;
}

.card-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Stats Cards Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1-fraction));
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background: linear-gradient(135deg, rgba(20, 28, 44, 0.7) 0%, rgba(13, 18, 29, 0.9) 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

.stat-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.stat-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-icon-wrapper {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon-wrapper svg {
    width: 18px;
    height: 18px;
}

.stat-icon-wrapper.matches {
    background-color: rgba(255,255,255,0.05);
    color: var(--text-main);
}

.stat-icon-wrapper.winrate {
    background-color: var(--color-gold-glow);
    color: var(--color-gold);
}

.stat-icon-wrapper.side-blue {
    background-color: var(--color-blue-glow);
    color: var(--color-blue);
}

.stat-icon-wrapper.side-red {
    background-color: var(--color-red-glow);
    color: var(--color-red);
}

.stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.stat-subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.stat-progress-bar {
    height: 4px;
    background-color: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.stat-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold) 0%, #ff8c00 100%);
    border-radius: 2px;
    transition: width 1s ease-in-out;
}

/* Dashboard layouts charts columns */
.dashboard-layout-row {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

@media (max-width: 1024px) {
    .dashboard-layout-row {
        flex-direction: column;
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* MVP progress distribution elements */
.mvp-item {
    margin-bottom: 1rem;
}

.mvp-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

.mvp-bar {
    height: 12px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.02);
}

.mvp-fill {
    height: 100%;
    background: linear-gradient(90deg, #b8860b 0%, var(--color-gold) 100%);
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(255, 200, 59, 0.3);
    transition: width 1s ease-in-out;
}

/* Top Played Heroes elements */
.top-hero-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.03);
}

.top-hero-item:last-child {
    border-bottom: none;
}

.hero-meta-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-rank {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
    width: 18px;
}

.top-hero-item:nth-child(1) .hero-rank { color: var(--color-gold); }
.top-hero-item:nth-child(2) .hero-rank { color: #c0c0c0; }
.top-hero-item:nth-child(3) .hero-rank { color: #cd7f32; }

.hero-avatar-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-gold);
}

.hero-name-label {
    font-weight: 500;
    font-size: 0.9rem;
}

.hero-stats-right {
    text-align: right;
}

.hero-games-count {
    font-size: 0.85rem;
    font-weight: 600;
}

.hero-winrate-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
}

/* Button Component styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-icon {
    width: 16px;
    height: 16px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--color-gold) 0%, #e0a300 100%);
    color: var(--text-dark);
    box-shadow: 0 4px 12px var(--color-gold-glow);
    font-weight: 600;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-gold-hover) 0%, var(--color-gold) 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 200, 59, 0.4);
}

.btn-secondary {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-main);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-success {
    background-color: var(--color-success);
    color: white;
    font-weight: 600;
}
.btn-success:hover {
    background-color: #20bc56;
    transform: translateY(-1px);
}

.btn-danger {
    background-color: var(--color-danger);
    color: white;
    font-weight: 600;
}
.btn-danger:hover {
    background-color: #e02f52;
}

.btn-danger-outline {
    background: none;
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
}
.btn-danger-outline:hover {
    background-color: var(--color-danger-bg);
}

.btn-small {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
    border-radius: 6px;
}

.btn-text {
    background: none;
    color: var(--color-gold);
    border: none;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}
.btn-text:hover {
    color: var(--color-gold-hover);
    text-shadow: 0 0 6px var(--color-gold-glow);
}

/* Forms & inputs */
.form-control {
    background-color: rgba(10, 15, 24, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    color: var(--text-main);
    width: 100%;
    transition: border-color 0.2s ease;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 6px var(--color-gold-glow);
}

.form-control-small {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.form-row {
    display: flex;
    gap: 1rem;
}

@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
        gap: 0.5rem;
    }
}

/* Filter bar components */
.filter-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filter-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.filter-group select {
    min-width: 150px;
}

/* Search Box style */
.search-box {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.search-box input {
    width: 100%;
    padding-left: 2.25rem;
    background-color: rgba(10, 15, 24, 0.8);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    color: var(--text-main);
}

.search-box input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}

/* Role tab buttons */
.role-tabs {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.role-tab {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.role-tab:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
}

.role-tab.active {
    background-color: var(--color-gold-glow);
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* Table general styles */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* soft edge fade hints that there's more content to scroll horizontally */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.table th, .table td {
    padding: 0.9rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background-color: rgba(255, 255, 255, 0.02);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02);
}

.table-small th, .table-small td {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
}

/* Wide Spreadsheet Table Styles */
#team-matches-table th {
    white-space: nowrap;
    padding: 0.75rem 0.8rem;
}

.match-spreadsheet-row td {
    white-space: nowrap;
    font-size: 0.85rem;
    padding: 0.6rem 0.8rem;
    border-right: 1px solid rgba(255, 255, 255, 0.03);
}

.match-spreadsheet-row td:last-child {
    border-right: none;
}

.match-spreadsheet-row:hover td {
    background-color: rgba(255, 255, 255, 0.01);
}

/* Sortable table headers */
.sortable-header {
    cursor: pointer;
    position: relative;
    user-select: none;
}
.sortable-header:hover {
    color: var(--text-main);
    background-color: rgba(255,255,255,0.04);
}
.sortable-header::after {
    content: ' ↕';
    opacity: 0.3;
}
.sortable-header.sorted-asc::after {
    content: ' ↑';
    opacity: 1;
    color: var(--color-gold);
}
.sortable-header.sorted-desc::after {
    content: ' ↓';
    opacity: 1;
    color: var(--color-gold);
}

/* Win Rate progress in table */
.winrate-progress-table {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.winrate-progress-table span {
    font-weight: 600;
    width: 45px;
}

.winrate-progress-bar-table {
    flex: 1;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.04);
    border-radius: 4px;
    overflow: hidden;
}

.winrate-progress-fill-table {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

/* Match Expandable Row Details (The Draft View) */
.match-detail-row {
    background-color: rgba(10, 14, 22, 0.9) !important;
}

.match-detail-content {
    padding: 1.5rem;
    border-left: 3px solid var(--color-gold);
    animation: slideDown 0.25s ease-out forwards;
}

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

.draft-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

@media (max-width: 768px) {
    .draft-board {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.draft-team-panel {
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.draft-team-panel.our-team {
    background: linear-gradient(180deg, rgba(0, 210, 255, 0.04) 0%, rgba(0, 0, 0, 0) 100%);
    border-top: 3px solid var(--color-blue);
}

.draft-team-panel.opp-team {
    background: linear-gradient(180deg, rgba(255, 56, 96, 0.04) 0%, rgba(0, 0, 0, 0) 100%);
    border-top: 3px solid var(--color-red);
}

.draft-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ban-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    align-items: center;
}

.ban-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.ban-badge {
    background-color: rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.03);
    text-decoration: line-through;
}

.draft-slots {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.draft-slot {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    gap: 1rem;
}

.draft-slot.mvp-slot {
    border-color: rgba(255, 200, 59, 0.3);
    background-color: rgba(255, 200, 59, 0.03);
}

.slot-role-badge {
    width: 45px;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    padding: 0.15rem 0;
    border-radius: 4px;
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}

.slot-hero-name {
    font-weight: 500;
    font-size: 0.9rem;
    flex: 1;
}

.slot-mvp-badge {
    background: linear-gradient(135deg, var(--color-gold) 0%, #e0a300 100%);
    color: var(--text-dark);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    box-shadow: 0 0 6px var(--color-gold);
}

/* Team Summary Banner (Scrim Header) */
.team-summary-banner {
    background: linear-gradient(90deg, #141c2c 0%, #0d121c 100%);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

@media (max-width: 768px) {
    .team-summary-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding: 1.25rem 1.5rem;
    }
    .team-metrics {
        width: 100%;
        justify-content: space-between;
    }
}

.team-metrics {
    display: flex;
    gap: 2.5rem;
}

.team-metrics .metric {
    display: flex;
    flex-direction: column;
}

.team-metrics .metric .label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.team-metrics .metric .value {
    font-size: 1.6rem;
    font-weight: 700;
}

/* Opponent analysis cards grid */
.opponents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.opponent-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.3s ease;
}

.opponent-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* ---------------------------------------------------------------------
   REPLAY TAB - YouTube video library, grouped by date
   --------------------------------------------------------------------- */
.video-date-group {
    margin-bottom: 1.75rem;
}

.video-date-heading {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.video-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.video-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease;
}

.video-row:hover {
    border-color: rgba(255, 255, 255, 0.15);
}

.video-row-teams {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.video-score-input {
    width: 34px;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-main);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.25rem 0;
}

.video-score-input:focus {
    outline: none;
    border-color: var(--color-gold);
}

.video-score-input:disabled {
    opacity: 0.5;
}

.video-score-sep {
    color: var(--text-muted);
}

.video-play-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: rgba(255, 56, 96, 0.12);
    color: var(--color-red);
    transition: all 0.2s ease;
}

.video-play-icon svg {
    width: 16px;
    height: 16px;
}

.video-play-icon:hover {
    background-color: var(--color-red);
    color: #fff;
    transform: scale(1.08);
}

.opponent-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.opponent-name {
    font-size: 1.15rem;
    font-weight: 700;
}

.opponent-winrate-pill {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
}

.opponent-stats-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.75rem;
}

.opponent-stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.opponent-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
}

.opponent-stat-value {
    font-size: 1.05rem;
    font-weight: 600;
}

.opponent-recent-games {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.recent-games-title {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.recent-badge {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 800;
}

.recent-badge.w {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid rgba(35, 209, 96, 0.3);
}

.recent-badge.l {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid rgba(255, 56, 96, 0.3);
}

/* Data Management layouts */
.manage-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 1024px) {
    .manage-layout {
        grid-template-columns: 1fr;
    }
}

.manage-column {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Drag-Drop Zone */
.upload-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    cursor: pointer;
    background-color: rgba(255,255,255,0.01);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.upload-dropzone:hover, .upload-dropzone.dragover {
    border-color: var(--color-gold);
    background-color: rgba(255, 200, 59, 0.03);
}

.upload-icon {
    width: 48px;
    height: 48px;
    color: var(--text-muted);
    margin-bottom: 1rem;
    transition: color 0.3s ease;
}

.upload-dropzone:hover .upload-icon {
    color: var(--color-gold);
}

.upload-text {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.upload-subtext {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* OCR scanning animation elements */
.ocr-scanning-container {
    background-color: rgba(0,0,0,0.4);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
}

.ocr-image-wrapper {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    background-color: #05070a;
}

.ocr-mock-screenshot {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(45deg, #131b26 25%, #182230 25%, #182230 50%, #131b26 50%, #131b26 75%, #182230 75%, #182230 100%);
    background-size: 40px 40px;
    position: relative;
}

.ocr-mock-screenshot::before {
    content: 'ROV SCREENSHOT PREVIEW';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255,255,255,0.15);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
}

#scanning-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scanning-laser {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--color-blue);
    box-shadow: 0 0 12px 2px var(--color-blue);
    animation: laserScan 2s linear infinite;
    top: 0;
}

@keyframes laserScan {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.05);
    border-top: 3px solid var(--color-gold);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.blink {
    animation: blinkText 1.5s ease infinite;
}

@keyframes blinkText {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* OCR wizard columns layout */
.wizard-grid {
    animation: fadeIn 0.4s ease forwards;
}

.section-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-gold);
}

.draft-inputs-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .draft-inputs-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Excel preview styles */
.excel-preview-section {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 1rem;
    animation: slideDown 0.3s ease-out forwards;
}

.preview-table-container {
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background-color: rgba(0,0,0,0.2);
}

/* Modals layout styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(4, 6, 10, 0.85);
    backdrop-filter: blur(8px);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.25s ease-out;
}

/* =====================================================
   LOGIN GATE + ROLE-BASED UI GATING
===================================================== */
.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #05070c;
    background-image: radial-gradient(circle at 30% 20%, rgba(255,200,59,0.06), transparent 55%);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    width: 92%;
    max-width: 380px;
    background-color: #0f1420;
    border: 1px solid var(--border-color);
    border-top: 4px solid var(--color-gold);
    border-radius: 12px;
    padding: 2rem 1.75rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.login-brand {
    justify-content: center;
    margin-bottom: 1.5rem;
}
.login-title {
    text-align: center;
    margin-bottom: 1.25rem;
    color: var(--text-main);
}
.login-error {
    color: #ff5c7a;
    font-size: 0.82rem;
    margin-top: 0.6rem;
    text-align: center;
}
/* User badge + logout, top-right of the header */
.user-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.03);
    border: 1px solid var(--border-color);
}
.user-badge-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-main);
}
.user-badge-role {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    background-color: rgba(255,200,59,0.12);
    color: var(--color-gold);
}
.user-badge-role.role-viewer {
    background-color: rgba(255,255,255,0.06);
    color: var(--text-muted);
}

/* User management list rows */
.user-mgmt-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.user-mgmt-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    background-color: rgba(255,255,255,0.02);
    border: 1px solid var(--border-color);
}
.user-mgmt-row .um-name {
    font-weight: 600;
    color: var(--text-main);
    font-size: 0.85rem;
}

/* Hide everything marked admin-only whenever a Viewer account is signed in */
body.viewer-mode .admin-only {
    display: none !important;
}

.modal-card {
    background-color: #0f1420;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    width: 90%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    border-top: 4px solid var(--color-gold);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3 {
    font-size: 1.15rem;
    font-weight: 600;
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
}
.modal-close:hover {
    color: var(--text-main);
}
.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: 1.5rem;
}

.quick-add-mode-switch {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem;
    background-color: rgba(0,0,0,0.2);
    border-radius: 10px;
    border: 1px solid var(--border-color);
}
.mode-tab-btn {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: none;
    border-radius: 8px;
    background-color: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.mode-tab-btn:hover {
    color: var(--text-main);
    background-color: rgba(255,255,255,0.04);
}
.mode-tab-btn.active {
    background-color: var(--color-gold);
    color: var(--text-dark);
}


.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background-color: rgba(0,0,0,0.1);
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

.alert-info {
    background-color: rgba(0, 210, 255, 0.08);
    color: var(--color-blue);
    border: 1px solid rgba(0, 210, 255, 0.2);
}

/* Custom alignment components */
.badge-side {
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-side.blue {
    background-color: var(--color-blue-glow);
    color: var(--color-blue);
    border: 1px solid rgba(0, 210, 255, 0.25);
}

.badge-side.red {
    background-color: var(--color-red-glow);
    color: var(--color-red);
    border: 1px solid rgba(255, 56, 96, 0.25);
}

.badge-result {
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.badge-result.win {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid rgba(35, 209, 96, 0.2);
}

.badge-result.loss {
    background-color: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid rgba(255, 56, 96, 0.2);
}

.badge-type {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.03);
    color: var(--text-muted);
}

.hero-excel-import-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}
.hero-excel-upload-label {
    cursor: pointer;
}

/* =====================================================
   NEW: Multi-Team Switcher (Header)
===================================================== */
.team-switcher {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}
.team-switcher label {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.team-switcher select {
    min-width: 140px;
}

/* =====================================================
   NEW: Team Management (Manage tab)
===================================================== */
.team-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.team-mgmt-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    border-radius: 20px;
    background-color: var(--bg-card-hover);
    border: 1px solid var(--border-color);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.team-mgmt-chip:hover {
    border-color: var(--border-active);
}
.team-mgmt-chip.active {
    border-color: var(--color-gold);
    background-color: rgba(255, 200, 59, 0.08);
    color: var(--color-gold);
}
.team-mgmt-chip .remove-team-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
}
.team-mgmt-chip .remove-team-btn:hover {
    background-color: var(--color-danger);
    color: white;
}
.team-mgmt-chip .edit-team-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
    cursor: pointer;
}
.team-mgmt-chip .edit-team-btn:hover {
    background-color: var(--color-gold);
    color: var(--text-dark);
}
.team-color-picker {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 5px;
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.team-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.team-color-picker::-webkit-color-swatch { border: none; border-radius: 4px; }
.team-color-picker::-moz-color-swatch { border: none; border-radius: 4px; }

/* Per-row edit / duplicate / delete icon buttons in the match history tables */
.row-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-color: rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 3px;
    transition: all 0.15s ease;
}
.row-action-btn:hover {
    background-color: var(--color-gold);
    color: var(--text-dark);
}
.row-action-btn.danger:hover {
    background-color: var(--color-danger);
    color: white;
}

/* Small colored badge shown next to a team's name to indicate its assigned team color
   (e.g. dark navy blue for the main tracked team). Used beside team dropdowns and chips. */
.team-color-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    min-width: 11px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    flex-shrink: 0;
}
.team-mgmt-chip .team-color-dot {
    margin-right: -0.15rem;
}

/* =====================================================
   NEW: Advanced Explorer / Query Builder Tab
===================================================== */
.explorer-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 1.25rem;
    align-items: start;
}
.explorer-filters {
    position: sticky;
    top: 0;
}
.explorer-filters-body {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    max-height: calc(100vh - 260px);
    overflow-y: auto;
}
.filter-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.filter-block-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.chip-toggle-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.chip-toggle {
    padding: 0.3rem 0.7rem;
    border-radius: 20px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-card-hover);
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.chip-toggle:hover {
    border-color: var(--border-active);
    color: var(--text-main);
}
.chip-toggle.selected {
    background-color: rgba(255, 200, 59, 0.12);
    border-color: var(--color-gold);
    color: var(--color-gold);
    font-weight: 600;
}
.chip-toggle.chip-blue.selected {
    background-color: rgba(0, 210, 255, 0.12);
    border-color: var(--color-blue);
    color: var(--color-blue);
}
.chip-toggle.chip-red.selected {
    background-color: rgba(255, 56, 96, 0.12);
    border-color: var(--color-red);
    color: var(--color-red);
}
.chip-toggle.chip-win.selected {
    background-color: var(--color-success-bg);
    border-color: var(--color-success);
    color: var(--color-success);
}
.chip-toggle.chip-lose.selected {
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger);
    color: var(--color-danger);
}
.checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.checkbox-list label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    cursor: pointer;
    color: var(--text-muted);
}
.checkbox-list label:hover {
    color: var(--text-main);
}
.checkbox-list input[type="checkbox"] {
    accent-color: var(--color-gold);
}
.explorer-hero-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem;
}
.explorer-results {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.explorer-summary-banner {
    display: flex;
    gap: 2.5rem;
    background: linear-gradient(135deg, rgba(255,200,59,0.06), rgba(0,210,255,0.03));
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
}
.explorer-summary-banner .metric {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.explorer-summary-banner .metric .label {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.explorer-summary-banner .metric .value {
    font-size: 1.6rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}
.explorer-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 1200px) {
    .explorer-layout { grid-template-columns: 1fr; }
    .explorer-two-col { grid-template-columns: 1fr; }
}

/* =====================================================
   NEW: Real OCR Hero Detection Pool
===================================================== */
.ocr-preview-img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 8px;
    background-color: #000;
    display: block;
}

.ocr-reference-image-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    background-color: rgba(0,0,0,0.15);
    text-align: center;
}
.ocr-wizard-reference-img {
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    border-radius: 6px;
    background-color: #000;
    display: block;
    margin-bottom: 0.4rem;
}
.detected-hero-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.75rem;
    background-color: var(--bg-card-hover);
    border: 1px dashed var(--border-active);
    border-radius: 10px;
    margin-bottom: 1rem;
    min-height: 46px;
}
.detected-hero-pool:empty::before {
    content: "ยังไม่พบชื่อฮีโร่จากภาพ ลองอัปโหลดรูปที่คมชัดกว่านี้ หรือกรอกด้วยตนเองด้านล่าง";
    color: var(--text-muted);
    font-size: 0.8rem;
}
.hero-chip {
    padding: 0.35rem 0.75rem;
    border-radius: 20px;
    background-color: rgba(255, 200, 59, 0.1);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}
.hero-chip:hover {
    background-color: var(--color-gold);
    color: var(--text-dark);
}
.hero-chip.used {
    opacity: 0.35;
    text-decoration: line-through;
    cursor: default;
    pointer-events: none;
}
.hero-chip.hero-chip-default {
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    cursor: default;
}
.hero-chip.hero-chip-default:hover {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
}
.hero-chip .remove-x {
    font-weight: 800;
    margin-left: 2px;
}
.wiz-field-focused {
    border-color: var(--color-gold) !important;
    box-shadow: 0 0 0 2px var(--color-gold-glow) !important;
}

/* =====================================================
   NEW: Per-column quick search row (Teams tab match table)
===================================================== */
.table-column-filter-row th {
    padding: 0.4rem 0.5rem;
    border-bottom: 2px solid var(--border-active);
}
.table-column-filter-row .team-col-filter-input {
    width: 100%;
    min-width: 80px;
    padding: 0.3rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: none;
}
.table-column-filter-row .team-col-filter-input::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

/* =====================================================================
   MOBILE / TABLET RESPONSIVE OVERRIDES
   Deliberately placed at the end of the file: several base rules above
   (.top-header, .header-actions, .sidebar, .main-content, etc.) are
   unconditional and would otherwise win the CSS cascade over an
   earlier media query of equal specificity. Keeping all responsive
   overrides here guarantees they apply on top of the desktop styles.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TABLET (<=1024px) - sidebar becomes an off-canvas drawer
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .app-container {
        height: 100dvh;
    }
    .hamburger-btn {
        display: flex;
    }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100dvh;
        padding-top: env(safe-area-inset-top, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        z-index: 20;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    }
    .sidebar.sidebar-open {
        transform: translateX(0);
    }
    .sidebar-backdrop {
        display: block;
    }
    .main-content {
        width: 100%;
    }
}

/* ---------------------------------------------------------------------
   MOBILE (<=768px) - header collapses to a single compact row; the user
   badge / team switcher / export buttons live in the sidebar drawer
   instead (moved there by JS - see setupMobileHeaderRelocation), and the
   "add match" button becomes a floating action button.
   --------------------------------------------------------------------- */
@media (max-width: 768px) {
    :root {
        --header-height: 60px;
    }
    .top-header {
        height: auto;
        min-height: var(--header-height);
        align-items: center;
        padding: calc(0.6rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.6rem calc(1rem + env(safe-area-inset-left, 0px));
        gap: 0.75rem;
    }
    .hamburger-btn {
        width: 40px;
        height: 40px;
    }
    .header-title {
        flex: 1 1 auto;
        min-width: 0;
    }
    .header-title p {
        display: none; /* descriptive subtitle is redundant on mobile - reclaim vertical space */
    }
    .header-title h2 {
        font-size: 1.05rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Everything inside .header-actions gets relocated into the sidebar on mobile
       (see setupMobileHeaderRelocation in app.js), except the add-match button,
       which becomes a floating action button below - so this container ends up
       empty and shouldn't reserve any header space. */
    .header-actions {
        width: auto;
        gap: 0;
    }

    /* Floating action button: the primary "add match" action, always reachable
       with a thumb regardless of scroll position. */
    #btn-add-quick-match {
        position: fixed;
        right: calc(1.25rem + env(safe-area-inset-right, 0px));
        bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
        width: 58px;
        height: 58px;
        padding: 0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 15;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    #btn-add-quick-match .btn-icon {
        width: 24px;
        height: 24px;
        margin: 0;
    }
    /* Hide its text label - the sidebar's "แดชบอร์ดภาพรวม" etc already give context,
       and a lone + icon is a universally understood "add" affordance */
    #btn-add-quick-match {
        font-size: 0;
    }

    /* Sidebar mobile toolbar: holds the user badge / team switcher / export
       buttons once JS moves them out of the header. Stacked, full width, with
       breathing room from the nav links below. */
    .sidebar-mobile-toolbar {
        display: flex;
        flex-direction: column;
        gap: 0.6rem;
        padding: 1rem 1.25rem;
        border-bottom: 1px solid var(--border-color);
    }
    .sidebar-mobile-toolbar:empty {
        display: none;
    }
    .sidebar-mobile-toolbar .user-badge {
        width: 100%;
        justify-content: space-between;
    }
    .sidebar-mobile-toolbar .team-switcher {
        width: 100%;
        flex-wrap: wrap;
    }
    .sidebar-mobile-toolbar .team-switcher select {
        flex: 1;
        min-width: 0;
    }
    .sidebar-mobile-toolbar .btn {
        width: 100%;
        justify-content: center;
    }

    .main-content {
        height: 100dvh;
    }
    .content-view {
        padding: 1rem;
        -webkit-overflow-scrolling: touch;
    }
    /* Bigger touch targets across the app */
    .btn, .nav-item, button {
        min-height: 40px;
    }
    input, select, textarea {
        font-size: 16px; /* prevents iOS Safari auto-zoom on focus */
    }
    .modal-card {
        width: 96%;
        max-height: 94dvh;
    }
    .modal-body {
        padding: 1rem;
    }
    .modal-header {
        padding: 1rem;
    }
    .card, .filter-bar {
        padding: 1rem;
    }
    .header-actions .btn {
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------
   SMALL PHONES (<=420px) - extra tightening
   --------------------------------------------------------------------- */
@media (max-width: 420px) {
    .login-card {
        padding: 1.5rem 1.25rem;
    }
    .top-header {
        padding: calc(0.6rem + env(safe-area-inset-top, 0px)) calc(0.75rem + env(safe-area-inset-right, 0px)) 0.6rem calc(0.75rem + env(safe-area-inset-left, 0px));
    }
    .content-view {
        padding: 0.75rem;
    }
    .team-summary-banner {
        padding: 1rem;
    }
}