/* Force override theme.css dark variables */:root, :root[data-theme="dark"], :root[data-theme="light"], [data-theme="dark"], html, body {    --bg: #f8fafc !important;    --bg2: #f0f4f8 !important;    --surface: #ffffff !important;    --surface2: #f0f4f8 !important;    --card: #ffffff !important;    --border: #e2e8f0 !important;    --border2: #cbd5e1 !important;    --text: #0f172a !important;    --text2: #1e293b !important;    --muted: #64748b !important;    --th-muted: #94a3b8 !important;    --input-bg: #ffffff !important;    --shadow: rgba(0,0,0,.08) !important;    --overlay: rgba(0,0,0,.3) !important;}html, body {    background: #f8fafc !important;    background-image: radial-gradient(circle at top left, #eaf1ff 0%, transparent 40%), radial-gradient(circle at bottom right, #fdecec 0%, transparent 35%) !important;    color: #0f172a !important;}
/* ═══════════════════════════════════════════════
   DESIGN TOKENS — Admin Layout (LIGHT THEME — Portal Style)
   Visual do portal.logflow.log.br aplicado ao admin/superadmin/representante
═══════════════════════════════════════════════ */
:root {
    --blue:         #146bf7;
    --blue-soft:    #5b9cff;
    --blue-glow:    rgba(20,107,247,.3);
    --blue-light:   rgba(20,107,247,.1);
    --red:          #f70c28;
    --red-light:    rgba(247,12,40,.1);
    --gold:         #D3AF37;
    --gold-soft:    #F2D86A;
    --gold-deep:    #8A6F1A;
    --bronze:       #B45309;
    --bronze-soft:  #D97706;
    --green:        #22c55e;
    --purple:       #7c3aed;
    --bg:           #f8fafc;
    --bg-gradient:  linear-gradient(135deg, #f8fafc 0%, #eaf1ff 100%);
    --card:         #ffffff;
    --card-hover:   #f0f5ff;
    --border:       #e2e8f0;
    --border-light: #cbd5e1;
    --radius-lg:    20px;
    --radius-md:    14px;
    --radius-sm:    10px;
    --font:         'Inter', sans-serif;
    --shadow:       0 4px 16px rgba(0,0,0,.08);
    --shadow-hover: 0 10px 30px rgba(20,107,247,.15);

    /* aliases legado (mapeados para light) */
    --color-primary:       #146bf7;
    --color-primary-light: #5b9cff;
    --color-primary-dark:  #0f4fd8;
    --color-accent:        #f70c28;
    --color-bg:            #f8fafc;
    --color-bg-light:      #ffffff;
    --font-main:           'Inter', sans-serif;
    --th-bg:        #f8fafc;
    --th-surface:   #ffffff;
    --th-surface2:  #f0f4f8;
    --th-surface3:  #e8edf4;
    --th-border:    #e2e8f0;
    --th-border2:   #cbd5e1;
    --th-text:      #0f172a;
    --th-text2:     #1e293b;
    --th-muted:     #64748b;
    --th-muted2:    #94a3b8;
    --th-muted3:    #475569;
    --th-input-bg:  #ffffff;
    --th-hover:     rgba(20,107,247,.05);
    --th-hover2:    rgba(20,107,247,.03);
    --th-shadow:    rgba(0,0,0,.08);
    --gradient-bg:  linear-gradient(135deg, #f8fafc 0%, #eaf1ff 100%);

    /* sidebar light */
    --sb-w:           260px;
    --sb-bg:          linear-gradient(180deg, #ffffff, #f3f6ff);
    --sb-border:      #e2e8f0;
    --sb-item-h:      42px;
    --sb-active-bg:   linear-gradient(135deg, #146bf7, #7c3aed);
    --sb-active-bd:   #146bf7;
    --sb-hover-bg:    rgba(20,107,247,.06);
    --topbar-h:       58px;
}

/* ═══ BODY & LAYOUT ═══ */
body {
    background: var(--bg) !important;
    background-image: radial-gradient(circle at top left, #eaf1ff 0%, transparent 40%),
                      radial-gradient(circle at bottom right, #fdecec 0%, transparent 35%) !important;
    color: var(--th-text) !important;
}

.admin-layout {
    background: transparent !important;
}

/* ═══ SIDEBAR ═══ */
.sidebar {
    background: var(--sb-bg) !important;
    border-right: 1px solid var(--sb-border) !important;
}

.sb-logo img {
    border-radius: 12px;
}

.sb-logo-name {
    color: var(--th-text) !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, var(--blue), var(--purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sb-close {
    color: var(--th-muted) !important;
}

.sb-nav .sb-item {
    color: var(--th-muted) !important;
    border-radius: var(--radius-sm) !important;
    transition: all .25s !important;
}

.sb-nav .sb-item:hover {
    color: var(--blue) !important;
    background: var(--sb-hover-bg) !important;
}

.sb-nav .sb-item.active {
    color: #fff !important;
    background: linear-gradient(135deg, var(--blue), var(--purple)) !important;
    box-shadow: 0 4px 12px rgba(20,107,247,.3) !important;
}

.sb-nav .sb-item.active::before {
    display: none !important;
}

.sb-section-label {
    color: var(--th-muted2) !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

.sb-divider {
    border-color: var(--border) !important;
    background: var(--border) !important;
}

.sb-footer, .sb-user {
    border-top-color: var(--border) !important;
}

.sb-user-name {
    color: var(--th-text) !important;
}

.sb-user-role, .sb-user-email {
    color: var(--th-muted) !important;
}

.sb-avatar {
    box-shadow: 0 2px 8px rgba(20,107,247,.2) !important;
}

.sb-logout {
    color: var(--th-muted) !important;
    border-color: var(--border) !important;
    background: var(--th-surface2) !important;
}

.sb-logout:hover {
    color: var(--blue) !important;
    border-color: var(--blue) !important;
    background: var(--blue-light) !important;
}

/* ═══ TOPBAR ═══ */
.topbar {
    background: #ffffff !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
}

.topbar-title, .topbar h1 {
    color: var(--th-text) !important;
}

.topbar-sub {
    color: var(--th-muted) !important;
}

.topbar-btn, .tb-btn {
    background: var(--th-surface2) !important;
    border-color: var(--border) !important;
    color: var(--th-muted) !important;
}

.topbar-btn:hover, .tb-btn:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
    background: var(--blue-light) !important;
}

/* ═══ MAIN CONTENT ═══ */
.main-wrap, .content-area, .main {
    background: transparent !important;
}

/* ═══ CARDS ═══ */
.card, .stat-card, .cj-card, .admin-stat, .act-card, .rep-card, .camp-card, .picker-item {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow) !important;
    color: var(--th-text) !important;
}

.card:hover, .act-card:hover, .camp-card:hover {
    box-shadow: var(--shadow-hover) !important;
    border-color: var(--blue) !important;
    transform: translateY(-2px);
}

.act-card i {
    color: var(--blue) !important;
}

.act-card span {
    color: var(--th-text2) !important;
}

.act-card.accent i {
    color: var(--gold) !important;
}

/* ═══ STAT CARDS / KPIs ═══ */
.admin-stat {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
}

.admin-stat strong, .stat-value {
    color: var(--th-text) !important;
}

.admin-stat span, .stat-label {
    color: var(--th-muted) !important;
}

.admin-stat.live strong {
    color: var(--red) !important;
}

.admin-stat.warn strong {
    color: var(--gold) !important;
}

/* ═══ SECTION LABELS ═══ */
.section-label, .act-label {
    color: var(--th-muted) !important;
}

/* ═══ TABLES ═══ */
table, .table {
    color: var(--th-text) !important;
}

table th, .table th {
    background: var(--th-surface2) !important;
    color: var(--th-muted) !important;
    border-bottom: 2px solid var(--blue) !important;
}

table td, .table td {
    color: var(--th-text2) !important;
    border-color: var(--border) !important;
}

table tr:hover, .table tr:hover {
    background: var(--th-hover) !important;
}

/* ═══ FORMS / INPUTS ═══ */
input, select, textarea, .form-control, .form-select,
.cj-input, .ct-field input, .ct-field select {
    background: #ffffff !important;
    border: 2px solid var(--border) !important;
    color: var(--th-text) !important;
    border-radius: var(--radius-sm) !important;
}

input:focus, select:focus, textarea:focus,
.form-control:focus, .cj-input:focus {
    border-color: var(--blue) !important;
    box-shadow: 0 0 0 4px rgba(20,107,247,.08) !important;
    outline: none !important;
}

label, .form-label, .cj-label {
    color: var(--th-muted3) !important;
    font-weight: 600 !important;
}

/* ═══ BUTTONS ═══ */
.btn-primary, .cj-btn-primary, .ct-submit {
    background: linear-gradient(135deg, var(--blue), var(--purple)) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: 0 4px 12px rgba(20,107,247,.3) !important;
}

.btn-primary:hover, .cj-btn-primary:hover {
    box-shadow: 0 8px 20px rgba(20,107,247,.4) !important;
    transform: translateY(-1px);
}

.btn-danger, .cj-btn-danger {
    background: var(--red) !important;
    color: #fff !important;
}

.btn-ghost, .cj-btn-ghost {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--th-muted) !important;
}

.btn-ghost:hover, .cj-btn-ghost:hover {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

/* ═══ ALERTS / FLASH ═══ */
.alert, .flash {
    border-radius: var(--radius-sm) !important;
}

.alert-success, .flash {
    background: rgba(34,197,94,.08) !important;
    color: var(--green) !important;
    border: 1px solid rgba(34,197,94,.2) !important;
}

.alert-danger {
    background: rgba(247,12,40,.08) !important;
    color: var(--red) !important;
    border: 1px solid rgba(247,12,40,.2) !important;
}

/* ═══ LIVE CARDS ═══ */
.admin-live-row, .live-card {
    background: #ffffff !important;
    border: 1px solid rgba(247,12,40,.15) !important;
}

.live-card-badge {
    background: rgba(247,12,40,.1) !important;
    color: var(--red) !important;
}

/* ═══ NEXT GAME ROW ═══ */
.next-row {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm) !important;
}

/* ═══ PICKER MODAL ═══ */
.picker-overlay {
    background: rgba(0,0,0,.4) !important;
}

.picker-box {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 25px 60px rgba(0,0,0,.15) !important;
}

.picker-title {
    color: var(--th-text) !important;
}

.picker-sub {
    color: var(--th-muted) !important;
}

.picker-item {
    border: 1px solid var(--border) !important;
}

.picker-item:hover {
    border-color: var(--blue) !important;
    background: var(--blue-light) !important;
}

.picker-item-name {
    color: var(--th-text) !important;
}

.picker-item-meta {
    color: var(--th-muted) !important;
}

/* ═══ REPRESENTANTE ═══ */
.rep-title {
    color: var(--th-text) !important;
}

.rep-sub {
    color: var(--th-muted) !important;
}

.rep-tab {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
    color: var(--th-muted) !important;
}

.rep-tab:hover, .rep-tab.active {
    background: linear-gradient(135deg, var(--blue), var(--purple)) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(20,107,247,.3) !important;
}

/* ═══ SCROLLBAR ═══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--th-surface2); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }

/* ═══ DARK TEXT OVERRIDES (elementos inline) ═══ */
[style*="color:#F1F5F9"], [style*="color:#E2E8F0"], [style*="color:#CBD5E1"],
[style*="color:var(--text)"], [style*="color:#fff"], [style*="color:white"] {
    color: var(--th-text) !important;
}

[style*="color:#94A3B8"], [style*="color:var(--muted)"], [style*="color:#64748B"] {
    color: var(--th-muted) !important;
}

/* Backgrounds inline dark → light */
[style*="background:#1E293B"], [style*="background:var(--surface)"],
[style*="background:#0F172A"], [style*="background:var(--card)"] {
    background: #ffffff !important;
    border: 1px solid var(--border) !important;
}

[style*="background:rgba(255,255,255,0.06)"], [style*="background:rgba(255,255,255,0.04)"],
[style*="background:rgba(255,255,255,.06)"], [style*="background:rgba(255,255,255,.04)"] {
    background: var(--th-surface2) !important;
}

/* ═══ MOBILE ═══ */
@media (max-width: 768px) {
    .sidebar {
        box-shadow: 10px 0 30px rgba(0,0,0,.1) !important;
    }
}