/**
 * ╔═══════════════════════════════════════════════════════════════════╗
 * ║              XPAND PREMIUM DARK THEME v2.1                        ║
 * ║      Sidebar Collapsible · Glassmorphism · SaaS Modern            ║
 * ╚═══════════════════════════════════════════════════════════════════╝
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    --sidebar-width: 240px;
    --topbar-height: 64px;
    --bg-primary: #0a0e17;
    --bg-secondary: #0d1321;
    --bg-tertiary: #151d2e;
    --bg-card: #121a2a;
    --bg-sidebar: rgba(13, 19, 33, 0.95);
    --text-primary: #f0f4f8;
    --text-secondary: #7b8ca8;
    --text-muted: #4a5568;
    --accent-color: #6366f1;
    --accent-hover: #818cf8;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --blue: #3b82f6;
    --purple: #8b5cf6;
    --border-color: rgba(99, 102, 241, 0.15);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --glass-bg: rgba(13, 19, 33, 0.85);
    --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-card: linear-gradient(145deg, rgba(21, 29, 46, 0.9), rgba(18, 26, 42, 0.95));
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 30px rgba(99, 102, 241, 0.15);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
}

/* ============================================
   BODY
   ============================================ */
body {
    background: var(--bg-primary);
    background-image: 
        radial-gradient(ellipse at 20% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* ============================================
   SIDEBAR
   ============================================ */
.tabs {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    flex-direction: column !important;
    background: var(--bg-sidebar) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--border-subtle) !important;
    border-bottom: none !important;
    padding: 1rem 0.75rem !important;
    padding-top: 80px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 100 !important;
    display: flex !important;
    gap: 4px !important;
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.3) !important;
}

.tabs::-webkit-scrollbar { width: 4px; }
.tabs::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 4px; }

/* ============================================
   LOGO PREMIUM EN SIDEBAR
   ============================================ */
.tabs::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--border-subtle);
    background: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 36'%3E%3Cdefs%3E%3ClinearGradient id='xg' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%233b82f6'/%3E%3Cstop offset='50%25' style='stop-color:%238b5cf6'/%3E%3Cstop offset='100%25' style='stop-color:%23ec4899'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4 4 L28 32 M28 4 L4 32' stroke='url(%23xg)' stroke-width='6' stroke-linecap='round' fill='none'/%3E%3Ctext x='40' y='26' font-family='-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif' font-size='22' font-weight='600' fill='%23ffffff'%3EXpand%3C/text%3E%3C/svg%3E") no-repeat;
    background-position: 20px center;
    background-size: 110px auto;
}

/* ============================================
   TABS - Items del sidebar
   ============================================ */
.tab {
    width: 100% !important;
    padding: 0.75rem 1rem !important;
    border-radius: 10px !important;
    border: none !important;
    border-bottom: none !important;
    text-align: left !important;
    justify-content: flex-start !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: var(--text-secondary) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    margin: 0 !important;
    position: relative !important;
}

.tab:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-primary) !important;
    transform: translateX(4px);
}

.tab.active {
    background: var(--gradient-primary) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
    transform: none !important;
}

.tab-badge {
    margin-left: auto !important;
    background: rgba(99, 102, 241, 0.3) !important;
    font-size: 0.65rem !important;
    padding: 2px 6px !important;
    border-radius: 10px !important;
}

.tab.active .tab-badge { background: rgba(255, 255, 255, 0.25) !important; }
.tab-badge.green { background: rgba(16, 185, 129, 0.3) !important; }

/* ============================================
   BOTÓN ADD + EN LISTINGS
   ============================================ */
.tab-add-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(99, 102, 241, 0.3) !important;
    color: white !important;
    padding: 2px 8px !important;
    border-radius: 6px !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.tab-add-btn:hover {
    background: var(--gradient-primary) !important;
    transform: translateY(-50%) scale(1.05) !important;
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.4) !important;
}

.tab.active .tab-add-btn { background: rgba(255, 255, 255, 0.25) !important; }
.tab[data-nav="listings"] { padding-right: 70px !important; }

/* ============================================
   ORDEN DE TABS
   ============================================ */
.tab[data-group="primary"] { order: 1 !important; }
.tab-extras-toggle { order: 5 !important; }
.tab[data-group="extras"] { order: 6 !important; }
.tab[data-group="bottom"] { order: 10 !important; }
.tab[data-nav="settings"] { margin-top: auto !important; }

/* ============================================
   TOGGLE EXTRAS - Colapsable
   ============================================ */
.tab-extras-toggle {
    width: 100% !important;
    padding: 0.6rem 1rem !important;
    border-radius: 8px !important;
    border: none !important;
    text-align: left !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--text-muted) !important;
    background: rgba(99, 102, 241, 0.05) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: 1rem !important;
    margin-bottom: 0.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.tab-extras-toggle:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: var(--text-secondary) !important;
    transform: none !important;
}

.extras-chevron {
    font-size: 1rem !important;
    transition: transform 0.3s ease !important;
    font-weight: 400 !important;
}

/* Chevron rotado cuando está abierto */
.tabs.extras-open .extras-chevron {
    transform: rotate(90deg) !important;
}

/* Ocultar extras por defecto */
.tabs:not(.extras-open) .tab[data-group="extras"] {
    display: none !important;
}

/* Mostrar extras cuando está abierto */
.tabs.extras-open .tab[data-group="extras"] {
    display: flex !important;
    animation: slideDown 0.2s ease-out !important;
}

/* Indentación de items extras */
.tab[data-group="extras"] {
    padding-left: 1.5rem !important;
    font-size: 0.85rem !important;
}

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

/* ============================================
   TOPBAR
   ============================================ */
.header {
    position: fixed !important;
    top: 0 !important;
    left: var(--sidebar-width) !important;
    right: 0 !important;
    height: var(--topbar-height) !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2) !important;
    padding: 0 1.5rem !important;
    z-index: 99 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

.header .logo { display: none !important; }

.header .header-buttons,
.header > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
}

/* ============================================
   CONTENIDO
   ============================================ */
.tab-content {
    margin-left: var(--sidebar-width) !important;
    margin-top: var(--topbar-height) !important;
    padding: 1.5rem 2rem !important;
    min-height: calc(100vh - var(--topbar-height)) !important;
    background: transparent !important;
}

/* ============================================
   AUTH LOADING
   ============================================ */
#authLoading {
    background: radial-gradient(ellipse at center, #0d1321 0%, #0a0e17 100%) !important;
    z-index: 9999 !important;
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background: var(--gradient-card) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-card) !important;
    padding: 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.card:hover {
    border-color: rgba(99, 102, 241, 0.2) !important;
    box-shadow: var(--shadow-card), var(--shadow-glow) !important;
}

.card-title { color: var(--text-primary) !important; font-weight: 600 !important; }

/* ============================================
   STAT CARDS
   ============================================ */
.stat-card {
    background: var(--gradient-card) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-card) !important;
    padding: 1.25rem !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover { transform: translateY(-4px) !important; box-shadow: var(--shadow-lg) !important; }
.stat-card::before { height: 4px !important; border-radius: 16px 16px 0 0 !important; }
.stat-card.cyan::before { background: linear-gradient(90deg, #06b6d4, #3b82f6) !important; }
.stat-card.green::before { background: linear-gradient(90deg, #10b981, #059669) !important; }
.stat-card.orange::before { background: linear-gradient(90deg, #f59e0b, #d97706) !important; }
.stat-card.purple::before { background: var(--gradient-primary) !important; }
.stat-icon { border-radius: 12px !important; width: 48px !important; height: 48px !important; }
.stat-card.cyan .stat-icon { background: linear-gradient(135deg, rgba(6, 182, 212, 0.2), rgba(59, 130, 246, 0.15)) !important; }
.stat-card.green .stat-icon { background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.15)) !important; }
.stat-card.orange .stat-icon { background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(217, 119, 6, 0.15)) !important; }
.stat-card.purple .stat-icon { background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.15)) !important; }
.stat-value { font-weight: 800 !important; letter-spacing: -0.5px !important; }
.stat-card.cyan .stat-value { color: #06b6d4 !important; }
.stat-card.green .stat-value { color: #10b981 !important; }
.stat-card.orange .stat-value { color: #f59e0b !important; }
.stat-card.purple .stat-value { color: #8b5cf6 !important; }

/* ============================================
   BUTTONS
   ============================================ */
.btn { border-radius: 10px !important; font-weight: 600 !important; padding: 0.6rem 1.2rem !important; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; border: none !important; }
.btn-primary { background: var(--gradient-primary) !important; color: white !important; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important; }
.btn-primary:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4) !important; }
.btn-secondary { background: rgba(99, 102, 241, 0.1) !important; border: 1px solid rgba(99, 102, 241, 0.2) !important; color: var(--text-primary) !important; }
.btn-secondary:hover { background: rgba(99, 102, 241, 0.2) !important; border-color: rgba(99, 102, 241, 0.3) !important; }
.btn-success { background: var(--gradient-success) !important; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important; }
.btn-success:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important; }
.btn-danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important; }
.btn-sm { padding: 0.4rem 0.75rem !important; border-radius: 8px !important; font-size: 0.8rem !important; }

/* ============================================
   INPUTS
   ============================================ */
input, select, textarea {
    background: rgba(21, 29, 46, 0.8) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    color: var(--text-primary) !important;
    padding: 0.65rem 1rem !important;
    transition: all 0.25s ease !important;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
    background: rgba(21, 29, 46, 1) !important;
}

input::placeholder { color: var(--text-secondary) !important; opacity: 0.7 !important; }

/* ============================================
   TABLES
   ============================================ */
table.dataTable thead th { background: var(--bg-tertiary) !important; border-bottom: 2px solid var(--border-subtle) !important; padding: 1rem !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; font-size: 0.7rem !important; color: var(--text-secondary) !important; }
table.dataTable tbody tr:hover { background: rgba(99, 102, 241, 0.05) !important; }
table.dataTable tbody td { padding: 0.9rem 1rem !important; border-bottom: 1px solid var(--border-subtle) !important; }
.simple-table th { background: var(--bg-tertiary) !important; padding: 0.75rem !important; border-bottom: 2px solid var(--border-subtle) !important; }
.simple-table tr:hover { background: rgba(99, 102, 241, 0.05) !important; }

/* ============================================
   BADGES
   ============================================ */
.badge { border-radius: 8px !important; font-weight: 600 !important; padding: 0.3rem 0.75rem !important; }
.badge-live { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; border: 1px solid rgba(16, 185, 129, 0.2) !important; }
.badge-off { background: rgba(99, 102, 241, 0.15) !important; color: var(--accent-color) !important; border: 1px solid rgba(99, 102, 241, 0.2) !important; }
.badge-pending { background: rgba(245, 158, 11, 0.15) !important; color: #f59e0b !important; border: 1px solid rgba(245, 158, 11, 0.2) !important; }
.platform-badge { border-radius: 6px !important; padding: 3px 8px !important; font-weight: 700 !important; font-size: 0.7rem !important; transition: all 0.2s ease !important; }
.platform-badge:hover { transform: scale(1.1) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important; }
.vs-badge { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3) !important; }
.gb-badge { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important; }
.sh-badge { background: rgba(139, 92, 246, 0.2) !important; color: #a78bfa !important; }

/* ============================================
   MODALS
   ============================================ */
.modal-overlay { background: rgba(0, 0, 0, 0.75) !important; backdrop-filter: blur(8px) !important; z-index: 1000 !important; }
.modal { background: var(--gradient-card) !important; backdrop-filter: blur(20px) !important; border: 1px solid var(--border-subtle) !important; border-radius: 20px !important; box-shadow: var(--shadow-lg), 0 0 60px rgba(99, 102, 241, 0.1) !important; padding: 1.75rem !important; }
.modal-header { border-bottom: 1px solid var(--border-subtle) !important; padding-bottom: 1.25rem !important; }
.modal-title { font-size: 1.15rem !important; font-weight: 700 !important; color: var(--text-primary) !important; }
.modal-close { background: rgba(99, 102, 241, 0.1) !important; border-radius: 10px !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s !important; }
.modal-close:hover { background: rgba(239, 68, 68, 0.2) !important; color: #ef4444 !important; }

/* ============================================
   STATUS BAR
   ============================================ */
#statusBar { border-radius: 12px !important; box-shadow: var(--shadow-lg) !important; backdrop-filter: blur(10px) !important; padding: 1rem 1.5rem !important; font-weight: 500 !important; z-index: 9999 !important; }
#statusBar.success { background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95)) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }
#statusBar.error { background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95)) !important; border: 1px solid rgba(239, 68, 68, 0.3) !important; }
#statusBar.loading { background: linear-gradient(135deg, rgba(99, 102, 241, 0.95), rgba(139, 92, 246, 0.95)) !important; border: 1px solid rgba(99, 102, 241, 0.3) !important; }

/* ============================================
   VARIOS COMPONENTES
   ============================================ */
.monitor-item { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 14px !important; transition: all 0.3s ease !important; }
.monitor-item:hover { border-color: rgba(99, 102, 241, 0.2) !important; box-shadow: var(--shadow-md) !important; }
.monitor-item.available { border-left: 4px solid #10b981 !important; }
.monitor-item.soldout { border-left: 4px solid #6366f1 !important; }
.monitor-toggle label { background: var(--bg-tertiary) !important; border: 1px solid var(--border-subtle) !important; }
.monitor-toggle input:checked + label { background: var(--gradient-success) !important; border-color: transparent !important; }

.url-item { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; transition: all 0.2s ease !important; }
.url-item:hover { border-color: rgba(99, 102, 241, 0.2) !important; }
.url-status.available { background: #10b981 !important; box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important; }

.artist-folder { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; transition: all 0.2s ease !important; }
.artist-folder:hover { border-color: rgba(99, 102, 241, 0.2) !important; }
.artist-folder.active { border-color: var(--accent-color) !important; background: rgba(99, 102, 241, 0.1) !important; box-shadow: 0 0 20px rgba(99, 102, 241, 0.1) !important; }

.country-map-item { background: var(--gradient-card) !important; border: 2px solid var(--border-subtle) !important; border-radius: 12px !important; transition: all 0.3s ease !important; }
.country-map-item:hover { border-color: var(--accent-color) !important; transform: translateY(-3px) !important; box-shadow: var(--shadow-md) !important; }
.country-map-item.has-events { border-color: #10b981 !important; }
.country-map-item.has-presale { border-color: #f59e0b !important; box-shadow: 0 0 15px rgba(245, 158, 11, 0.2) !important; }
.country-map-item.active { border-color: var(--accent-color) !important; background: rgba(99, 102, 241, 0.15) !important; box-shadow: 0 0 20px rgba(99, 102, 241, 0.2) !important; }
.country-btn { border-radius: 25px !important; transition: all 0.25s ease !important; }
.country-btn:hover { border-color: var(--accent-color) !important; background: rgba(99, 102, 241, 0.1) !important; }
.country-btn.active { background: var(--gradient-primary) !important; border-color: transparent !important; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important; }

.event-group { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; overflow: hidden !important; }
.event-group-header:hover { background: rgba(99, 102, 241, 0.05) !important; }

.profit-card { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 16px !important; transition: all 0.3s ease !important; }
.profit-card:hover { transform: translateY(-4px) !important; border-color: var(--accent-color) !important; box-shadow: var(--shadow-lg) !important; }
.profit-card.profit { border-left: 4px solid #10b981 !important; }
.profit-card.loss { border-left: 4px solid #6366f1 !important; }
.profit-badge.win { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; }
.profit-badge.lose { background: rgba(99, 102, 241, 0.15) !important; color: var(--accent-color) !important; }
.profit-value.pos { color: #10b981 !important; }
.profit-value.neg { color: var(--accent-color) !important; }

.needed-header { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; transition: all 0.2s ease !important; }
.needed-header:hover { background: rgba(99, 102, 241, 0.05) !important; }
.needed-icon { background: var(--gradient-primary) !important; border-radius: 10px !important; box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important; }
.needed-body { border-color: var(--border-subtle) !important; background: var(--bg-tertiary) !important; }
.needed-qty { color: var(--accent-color) !important; }
.buy-btn.ok { background: var(--gradient-success) !important; }

.football-team-card { background: var(--gradient-card) !important; border: 2px solid var(--border-subtle) !important; border-radius: 16px !important; transition: all 0.3s ease !important; }
.football-team-card:hover { border-color: var(--accent-color) !important; transform: translateY(-4px) !important; box-shadow: var(--shadow-md) !important; }
.football-team-card.selected { border-color: #10b981 !important; background: rgba(16, 185, 129, 0.1) !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.15) !important; }
.football-match-row:hover { background: rgba(99, 102, 241, 0.05) !important; }
.football-match-row.header { background: var(--bg-tertiary) !important; }
.football-summary-box { background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.08)) !important; border: 1px solid rgba(99, 102, 241, 0.2) !important; border-radius: 14px !important; }
.football-summary-item { background: var(--gradient-card) !important; border-radius: 10px !important; }
.category-qty-item { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; transition: all 0.2s ease !important; }
.category-qty-item:hover { border-color: var(--accent-color) !important; }
.price-per-game-row.header { background: var(--bg-tertiary) !important; }
.price-per-game-row:hover { background: rgba(99, 102, 241, 0.05) !important; }

.sale-item { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; transition: all 0.2s ease !important; }
.sale-item:hover { border-color: rgba(16, 185, 129, 0.3) !important; }
.sale-amount { color: #10b981 !important; }

.news-item { border-bottom: 1px solid var(--border-subtle) !important; transition: background 0.2s !important; }
.news-item:hover { background: rgba(99, 102, 241, 0.05) !important; }
.news-title a:hover { color: var(--accent-color) !important; }

.ht-order-alert { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)) !important; border: 2px solid var(--accent-color) !important; }
.ht-listing-card { background: var(--gradient-card) !important; border-left: 3px solid var(--accent-color) !important; border-radius: 10px !important; }
.ht-badge { background: var(--gradient-primary) !important; }

.form-group label { color: var(--text-secondary) !important; font-weight: 500 !important; margin-bottom: 0.5rem !important; }

.match-toast { background: var(--gradient-card) !important; border: 2px solid #10b981 !important; border-radius: 16px !important; box-shadow: var(--shadow-lg) !important; }
.match-toast h4 { color: #10b981 !important; }

.section-chip { background: var(--bg-tertiary) !important; border-radius: 6px !important; }
.section-chip.available { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; }

.status-badge { border-radius: 8px !important; }
.status-badge.available { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; }
.status-badge.soldout { background: rgba(99, 102, 241, 0.15) !important; color: var(--accent-color) !important; }
.status-badge.error { background: rgba(245, 158, 11, 0.15) !important; color: #f59e0b !important; }

.purchase-header { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 14px !important; }
.purchase-stat-value { color: var(--accent-color) !important; }

/* Leaflet */
.leaflet-popup-content-wrapper { background: var(--gradient-card) !important; border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; box-shadow: var(--shadow-md) !important; }
.leaflet-popup-tip { background: var(--bg-card) !important; }
.leaflet-container { background: var(--bg-tertiary) !important; border-radius: 12px !important; }
#eventsMap { border: 1px solid var(--border-subtle) !important; border-radius: 12px !important; }

/* DataTables */
.dataTables_wrapper .dataTables_filter input { background: var(--bg-tertiary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 10px !important; padding: 0.5rem 1rem !important; }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--accent-color) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important; }
.dataTables_wrapper .dataTables_length select { background: var(--bg-tertiary) !important; border: 1px solid var(--border-subtle) !important; border-radius: 8px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 8px !important; margin: 0 2px !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: rgba(99, 102, 241, 0.2) !important; border-color: transparent !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--gradient-primary) !important; border-color: transparent !important; color: white !important; }

/* Seatpick */
.seatpick-price-row { background: var(--gradient-card) !important; border-radius: 8px !important; }
.seatpick-price-row:hover { background: rgba(99, 102, 241, 0.1) !important; }
.seatpick-price { color: var(--accent-color) !important; }
.seatpick-suggestion { background: rgba(16, 185, 129, 0.15) !important; color: #10b981 !important; }
.seatpick-global-min { background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1)) !important; border-radius: 10px !important; }
.seatpick-global-min .price { color: var(--accent-color) !important; }

.urgent-tag.red { background: rgba(99, 102, 241, 0.2) !important; color: var(--accent-color) !important; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); border-radius: 4px; }
::-webkit-scrollbar-thumb { background: rgba(99, 102, 241, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99, 102, 241, 0.5); }

::selection { background: rgba(99, 102, 241, 0.3); color: white; }
*:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    :root { --sidebar-width: 200px; }
}

@media (max-width: 768px) {
    :root { --sidebar-width: 0px; --topbar-height: 60px; }
    
    .tabs {
        position: fixed !important;
        top: var(--topbar-height) !important;
        left: 0 !important;
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 0.5rem !important;
        border-right: none !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        z-index: 98 !important;
    }
    
    .tabs::before { display: none !important; }
    .tab { flex-shrink: 0 !important; width: auto !important; padding: 0.5rem 1rem !important; }
    .tab[data-nav="listings"] { padding-right: 1rem !important; }
    .tab-add-btn { display: none !important; }
    .tab-extras-toggle { display: none !important; }
    .tab[data-group="extras"] { display: flex !important; }
    .header { left: 0 !important; }
    .header .logo { display: flex !important; }
    .tab-content { margin-left: 0 !important; margin-top: calc(var(--topbar-height) + 60px) !important; padding: 1rem !important; }
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.card, .stat-card, .profit-card { animation: fadeIn 0.4s ease-out; }

/* ============================================
   LISTINGS SECTION - Premium Stats Grid
   ============================================ */
.listings-stats {
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
}

.listings-stats .stat-card {
    padding: 1rem 1.1rem !important;
    min-width: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Reducir protagonismo de platform cards */
.listings-stats .stat-card.vivid,
.listings-stats .stat-card.gigsberg,
.listings-stats .stat-card.stubhub,
.listings-stats .stat-card.fanpass {
    box-shadow: none !important;
}

.listings-stats .stat-card.vivid:hover,
.listings-stats .stat-card.gigsberg:hover,
.listings-stats .stat-card.stubhub:hover,
.listings-stats .stat-card.fanpass:hover {
    transform: none !important;
    box-shadow: var(--shadow-sm) !important;
}

.listings-stats .stat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
}

.listings-stats .stat-label {
    font-size: 0.65rem !important;
    letter-spacing: 0.5px !important;
}

.listings-stats .stat-value {
    font-size: 1.4rem !important;
}

/* Platform-specific stat cards */
.stat-card.vivid {
    background: linear-gradient(145deg, rgba(233, 30, 140, 0.1), rgba(233, 30, 140, 0.04)) !important;
    border: 1px solid rgba(233, 30, 140, 0.15) !important;
}
.stat-card.vivid::before { background: linear-gradient(90deg, #E91E8C, #c41874) !important; }
.stat-card.vivid .stat-value { color: #E91E8C !important; }
.stat-card.vivid .stat-icon { background: rgba(233, 30, 140, 0.12) !important; }

.stat-card.gigsberg {
    background: linear-gradient(145deg, rgba(0, 200, 83, 0.1), rgba(0, 200, 83, 0.04)) !important;
    border: 1px solid rgba(0, 200, 83, 0.15) !important;
}
.stat-card.gigsberg::before { background: linear-gradient(90deg, #00c853, #00a844) !important; }
.stat-card.gigsberg .stat-value { color: #00c853 !important; }
.stat-card.gigsberg .stat-icon { background: rgba(0, 200, 83, 0.12) !important; }

.stat-card.stubhub {
    background: linear-gradient(145deg, rgba(155, 89, 182, 0.1), rgba(155, 89, 182, 0.04)) !important;
    border: 1px solid rgba(155, 89, 182, 0.15) !important;
}
.stat-card.stubhub::before { background: linear-gradient(90deg, #9b59b6, #8e44ad) !important; }
.stat-card.stubhub .stat-value { color: #9b59b6 !important; }
.stat-card.stubhub .stat-icon { background: rgba(155, 89, 182, 0.12) !important; }

.stat-card.fanpass {
    background: linear-gradient(145deg, rgba(255, 107, 107, 0.1), rgba(255, 107, 107, 0.04)) !important;
    border: 1px solid rgba(255, 107, 107, 0.15) !important;
}
.stat-card.fanpass::before { background: linear-gradient(90deg, #FF6B6B, #ee5a5a) !important; }
.stat-card.fanpass .stat-value { color: #FF6B6B !important; }
.stat-card.fanpass .stat-icon { background: rgba(255, 107, 107, 0.12) !important; }

/* ============================================
   PLATFORM FILTER BAR
   ============================================ */
.platform-filter-bar {
    background: var(--gradient-card) !important;
    padding: 1rem !important;
    border-radius: 14px !important;
    border: 1px solid var(--border-subtle) !important;
    margin-bottom: 1.25rem !important;
}

.platform-pill {
    border-radius: 25px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 500 !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
}

.platform-pill:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.platform-pill.active,
.platform-pill[style*="background:var(--primary-color)"] {
    background: var(--gradient-primary) !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.3) !important;
}

/* Platform Logo Improvements */
.platform-logo {
    flex-shrink: 0 !important;
}

.platform-logo-lg {
    width: 28px !important;
    height: 28px !important;
}

/* ============================================
   INVENTORY TABLE IMPROVEMENTS
   ============================================ */
#inventoryContainer {
    margin-top: 1rem !important;
}

/* Event group - Premium style */
.event-group {
    margin-bottom: 0.5rem !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--gradient-card) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: all 0.15s ease !important;
}

.event-group:hover {
    border-color: rgba(99, 102, 241, 0.25) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.event-group-header {
    background: transparent !important;
    padding: 1rem 1.25rem !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.event-group-header:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

/* Event title - jerarquía clara */
.event-group-title {
    font-weight: 600 !important;
    font-size: 1.05rem !important;
    color: var(--text-primary) !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.3 !important;
}

.event-group-info {
    font-size: 0.8rem !important;
    color: var(--text-secondary) !important;
    opacity: 0.85 !important;
}

/* Platform badges en event rows - alineados a derecha */
.event-group-header > div:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
}

/* Platform badges - tamaño unificado 14-16px */
.platform-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 22px !important;
    padding: 0 6px !important;
    border-radius: 5px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    transition: all 0.15s ease !important;
}

.platform-badge.badge-dimmed,
.platform-badge[style*="color:#666"] {
    opacity: 0.4 !important;
}

.gb-badge-inactive {
    background: rgba(0, 200, 83, 0.1) !important;
    color: #666 !important;
    opacity: 0.4 !important;
}

/* Event group content (tabla) */
.event-group-content {
    display: none;
    border-top: 1px solid var(--border-subtle) !important;
    background: rgba(0, 0, 0, 0.15) !important;
}

.event-group.open .event-group-content {
    display: block;
}

.event-group-content .simple-table {
    margin: 0 !important;
}

.event-group-content .simple-table th {
    background: rgba(0, 0, 0, 0.2) !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.7rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-secondary) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

.event-group-content .simple-table td {
    padding: 0.65rem 0.75rem !important;
    font-size: 0.85rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.event-group-content .simple-table tr:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

.event-group-content .simple-table tr:last-child td {
    border-bottom: none !important;
}

/* Platform badges in rows */
.listing-platform-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

.listing-platform-badge.vivid {
    background: rgba(233, 30, 140, 0.15) !important;
    color: #E91E8C !important;
}

.listing-platform-badge.gigsberg {
    background: rgba(0, 200, 83, 0.15) !important;
    color: #00c853 !important;
}

.listing-platform-badge.stubhub {
    background: rgba(155, 89, 182, 0.15) !important;
    color: #9b59b6 !important;
}

.listing-platform-badge.hellotickets {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #2196f3 !important;
}

.listing-platform-badge.fanpass {
    background: rgba(255, 107, 107, 0.15) !important;
    color: #FF6B6B !important;
}

/* Inventory Card Header */
#listings .card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 1px solid var(--border-subtle) !important;
    margin-bottom: 1rem !important;
}

#listings .card-header .card-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Search and filter controls */
#inventorySearch {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 0.6rem 1rem !important;
}

#inventorySearch:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15) !important;
}

#inventoryGroup {
    background: var(--bg-tertiary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 10px !important;
    padding: 0.6rem 1rem !important;
}