/* =========================================================
   HAMEEDIANS QATAR — GLOBAL THEME SYSTEM V1.0
   Themes:
   maroon_gold, navy_gold, teal_white, slate_orange
========================================================= */

:root{
    --hq-primary:#760d12;
    --hq-primary-2:#97151a;
    --hq-accent:#f5b91e;
    --hq-accent-2:#d69d11;
    --hq-bg:#f7f4ef;
    --hq-card:#ffffff;
    --hq-text:#241817;
    --hq-muted:#7f716d;
    --hq-border:#e7ddd2;
    --hq-soft:#fff4df;
    --hq-sidebar:#760d12;
    --hq-sidebar-2:#4e070a;
    --hq-on-primary:#ffffff;
    --hq-on-accent:#5b080b;

    /* Map legacy variables used throughout existing pages. */
    --maroon:var(--hq-primary) !important;
    --gold:var(--hq-accent) !important;
    --gold-soft:var(--hq-soft) !important;
    --green:var(--hq-primary) !important;
    --green2:var(--hq-primary-2) !important;
    --green-2:var(--hq-primary-2) !important;
    --green-light:var(--hq-primary-2) !important;
    --green-soft:var(--hq-soft) !important;
    --bg:var(--hq-bg) !important;
    --text:var(--hq-text) !important;
    --muted:var(--hq-muted) !important;
    --border:var(--hq-border) !important;
}

/* MAROON & GOLD */
html[data-hahc-theme="maroon_gold"]{
    --hq-primary:#760d12;
    --hq-primary-2:#97151a;
    --hq-accent:#f5b91e;
    --hq-accent-2:#d69d11;
    --hq-bg:#f7f4ef;
    --hq-card:#ffffff;
    --hq-text:#241817;
    --hq-muted:#7f716d;
    --hq-border:#e7ddd2;
    --hq-soft:#fff4df;
    --hq-sidebar:#760d12;
    --hq-sidebar-2:#4e070a;
    --hq-on-primary:#ffffff;
    --hq-on-accent:#5b080b;
}

/* DEEP NAVY & GOLD */
html[data-hahc-theme="navy_gold"]{
    --hq-primary:#071f4d;
    --hq-primary-2:#0b3476;
    --hq-accent:#f8c654;
    --hq-accent-2:#d89a19;
    --hq-bg:#f4f6fa;
    --hq-card:#ffffff;
    --hq-text:#111d33;
    --hq-muted:#68738a;
    --hq-border:#dfe4ee;
    --hq-soft:#fff7df;
    --hq-sidebar:#061d46;
    --hq-sidebar-2:#04142f;
    --hq-on-primary:#ffffff;
    --hq-on-accent:#112348;
}

/* TEAL & WHITE */
html[data-hahc-theme="teal_white"]{
    --hq-primary:#087f7f;
    --hq-primary-2:#0aa1a1;
    --hq-accent:#f2c94c;
    --hq-accent-2:#d9aa23;
    --hq-bg:#f2f8f8;
    --hq-card:#ffffff;
    --hq-text:#143535;
    --hq-muted:#688080;
    --hq-border:#d8e7e7;
    --hq-soft:#e8f8f7;
    --hq-sidebar:#087879;
    --hq-sidebar-2:#07585a;
    --hq-on-primary:#ffffff;
    --hq-on-accent:#164445;
}

/* SLATE GRAY & ORANGE */
html[data-hahc-theme="slate_orange"]{
    --hq-primary:#27333d;
    --hq-primary-2:#34444f;
    --hq-accent:#ff5a0a;
    --hq-accent-2:#dc4200;
    --hq-bg:#f3f5f6;
    --hq-card:#ffffff;
    --hq-text:#1d272d;
    --hq-muted:#68757c;
    --hq-border:#dce2e5;
    --hq-soft:#fff0e8;
    --hq-sidebar:#27333d;
    --hq-sidebar-2:#1b252c;
    --hq-on-primary:#ffffff;
    --hq-on-accent:#ffffff;
}

/* =========================================================
   GLOBAL APPLICATION OVERRIDES
========================================================= */
body{
    background:var(--hq-bg) !important;
    color:var(--hq-text) !important;
}

.main,
.page,
.content-area{
    background:var(--hq-bg) !important;
}

.topbar{
    background:#fff !important;
    border-bottom-color:var(--hq-border) !important;
}

.topbar h1,
.page-title h1,
.page-header h1,
.content h1,
.title h1{
    color:var(--hq-primary) !important;
}

/* Sidebar */
.sidebar{
    background:linear-gradient(180deg,var(--hq-sidebar) 0%,var(--hq-sidebar-2) 100%) !important;
    color:#fff !important;
}

.sidebar-brand{
    border-bottom-color:rgba(255,255,255,.10) !important;
}

.brand-name strong{color:#fff !important}
.brand-name span{color:var(--hq-accent) !important}

.brand-colors .maroon,
.brand-colors .c1{background:#861515 !important}
.brand-colors .gold,
.brand-colors .c2{background:#f5b91e !important}
.brand-colors .green,
.brand-colors .c3{background:#0b8164 !important}

.nav-section-title,
.nav-title{color:rgba(255,255,255,.45) !important}

.sidebar .nav-item{
    color:rgba(255,255,255,.83) !important;
}

.sidebar .nav-item:hover{
    background:rgba(255,255,255,.08) !important;
    color:#fff !important;
}

.sidebar .nav-item.active{
    background:var(--hq-accent) !important;
    color:var(--hq-on-accent) !important;
    box-shadow:0 7px 18px rgba(0,0,0,.15) !important;
}

.sidebar .nav-item.active::before{
    background:#fff !important;
}

.sidebar .nav-item.active svg{
    color:var(--hq-on-accent) !important;
    stroke:var(--hq-on-accent) !important;
}

.sidebar-footer{border-top-color:rgba(255,255,255,.10) !important}
.sidebar .logout{color:rgba(255,255,255,.86) !important}

.sidebar .nav-item svg,
.sidebar .logout svg,
.sidebar svg{
    width:20px !important;
    height:20px !important;
    min-width:20px !important;
    min-height:20px !important;
    max-width:20px !important;
    max-height:20px !important;
    flex:0 0 20px !important;
}

/* Back button */
.hahc-page-back{
    background:#fff !important;
    color:var(--hq-primary) !important;
    border-color:var(--hq-border) !important;
}
.hahc-page-back:hover{
    background:var(--hq-accent) !important;
    color:var(--hq-on-accent) !important;
}

/* =========================================================
   HERO / HEADER PANELS
   This intentionally overrides hard-coded green dashboard
   and fixture hero panels.
========================================================= */
.hero,
.hero-card,
.page-hero,
.dashboard-hero,
.tournament-hero,
.setup-hero,
.fixture-hero,
[class*="hero"]{
    background:
        radial-gradient(circle at 88% 18%,color-mix(in srgb,var(--hq-accent) 18%,transparent),transparent 24%),
        linear-gradient(118deg,var(--hq-primary) 0%,var(--hq-primary-2) 100%) !important;
    color:var(--hq-on-primary) !important;
    border-color:color-mix(in srgb,var(--hq-primary) 72%,black) !important;
}

.hero small,
.hero-eyebrow,
.eyebrow,
.kicker{
    color:var(--hq-accent) !important;
}

.hero h1,.hero h2,.hero h3,.hero p,
.hero-card h1,.hero-card h2,.hero-card h3,.hero-card p,
.page-hero h1,.page-hero h2,.page-hero p{
    color:var(--hq-on-primary) !important;
}

.hero-badge,
.hero-stat,
.hero-summary{
    background:linear-gradient(135deg,color-mix(in srgb,var(--hq-accent) 82%,white),var(--hq-accent)) !important;
    color:var(--hq-on-accent) !important;
    border-color:rgba(255,255,255,.28) !important;
}

/* Catch known fixed-green panels in Dashboard / Fixtures / Setup */
.content > section[style*="#004"],
.content > div[style*="#004"],
section[style*="background:#004"],
div[style*="background:#004"],
section[style*="background: #004"],
div[style*="background: #004"]{
    background:linear-gradient(118deg,var(--hq-primary),var(--hq-primary-2)) !important;
}

/* Cards */
.card,
.metric,
.kpi-card,
.summary-card,
.fixture-card,
.match-card,
.panel,
.modal-card,
.innings-card{
    background:var(--hq-card) !important;
    border-color:var(--hq-border) !important;
}

.metric strong,
.kpi-card strong,
.card h2,
.card h3,
.card-title h3,
.section-title,
.innings-head h2{
    color:var(--hq-primary) !important;
}

.step,
.step-number{
    background:linear-gradient(135deg,var(--hq-primary),var(--hq-primary-2)) !important;
    color:var(--hq-accent) !important;
}

/* Buttons */
.btn.primary,
.primary-button,
.save-button,
.spin-button,
button.primary,
button.save,
.button-primary,
.start-button,
.start-scoring{
    background:var(--hq-primary) !important;
    color:var(--hq-on-primary) !important;
    border-color:var(--hq-primary) !important;
    box-shadow:inset 0 -3px var(--hq-accent) !important;
}

.btn.primary:hover,
.primary-button:hover,
.save-button:hover,
.spin-button:hover{
    background:var(--hq-primary-2) !important;
}

.btn.green,
.btn-success,
.button-green,
.draw-primary-action{
    background:var(--hq-primary) !important;
    color:var(--hq-on-primary) !important;
    border-color:var(--hq-primary) !important;
}

.btn.soft,
.secondary-button,
.button-secondary{
    background:var(--hq-soft) !important;
    color:var(--hq-primary) !important;
    border-color:color-mix(in srgb,var(--hq-accent) 45%,var(--hq-border)) !important;
}

/* Inputs / controls */
input:focus,
select:focus,
textarea:focus{
    border-color:var(--hq-accent-2) !important;
    box-shadow:0 0 0 3px color-mix(in srgb,var(--hq-accent) 18%,transparent) !important;
    outline:none !important;
}
input[type="checkbox"],
input[type="radio"]{accent-color:var(--hq-primary) !important}

/* Draw & Groups */
.group-header,
.group-card-header{
    background:var(--hq-primary) !important;
    color:#fff !important;
}

.slot-badge,
.group-slot,
.fixture-code,
.code{
    background:color-mix(in srgb,var(--hq-accent) 20%,white) !important;
    color:color-mix(in srgb,var(--hq-primary) 78%,black) !important;
}

/* Fixture cards: make group-stage accents follow active theme */
.fixture-card .vs,
.vs{
    background:var(--hq-primary) !important;
    color:var(--hq-accent) !important;
}

.fixture-card .team-side strong,
.fixture-card .fixture-tournament,
.fixture-tournament,
.team-side strong{
    color:var(--hq-primary) !important;
}

.status-scheduled,
.status.setup,
.status.ready{
    background:color-mix(in srgb,var(--hq-primary) 9%,white) !important;
    color:var(--hq-primary) !important;
}

/* Knockout stages remain distinct but harmonised to theme */
.fixture-card.stage-quarter-final{
    border-color:var(--hq-accent-2) !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--hq-accent) 18%,white) 0%,#fff 44%) !important;
}
.fixture-card.stage-semi-final{
    border-color:color-mix(in srgb,var(--hq-primary) 55%,var(--hq-accent)) !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--hq-primary) 8%,white) 0%,#fff 44%) !important;
}
.fixture-card.stage-third-place{
    border-color:color-mix(in srgb,var(--hq-primary) 45%,#8aa1ad) !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--hq-primary) 6%,white) 0%,#fff 44%) !important;
}
.fixture-card.stage-final{
    border-color:var(--hq-primary) !important;
    background:linear-gradient(180deg,color-mix(in srgb,var(--hq-primary) 12%,white) 0%,#fff 44%) !important;
    box-shadow:0 12px 28px color-mix(in srgb,var(--hq-primary) 14%,transparent) !important;
}

/* Tables */
thead th,
.table thead th{
    background:var(--hq-primary) !important;
    color:#fff !important;
}
tbody tr:hover{
    background:color-mix(in srgb,var(--hq-accent) 7%,white) !important;
}

/* Modals */
.modal-header{
    background:linear-gradient(118deg,var(--hq-primary),var(--hq-primary-2)) !important;
    color:#fff !important;
}
.modal-header h2,.modal-header h3,.modal-header p{color:#fff !important}

/* Setup badges */
.status.complete,
.status.completed{
    background:color-mix(in srgb,var(--hq-accent) 18%,white) !important;
    color:var(--hq-primary) !important;
}
.status.pending,
.status.required{
    background:color-mix(in srgb,var(--hq-accent) 28%,white) !important;
    color:color-mix(in srgb,var(--hq-primary) 80%,black) !important;
}


/* =========================================================
   V2.1 — PERSISTENT THEME + FLOATING SWITCHER
========================================================= */

/* Dashboard welcome/header must follow the selected theme.
   This removes the old fixed green panel. */
.welcome{
    background:
        radial-gradient(
            circle at 88% 18%,
            color-mix(in srgb,var(--hq-accent) 18%,transparent),
            transparent 24%
        ),
        linear-gradient(
            115deg,
            var(--hq-primary) 0%,
            var(--hq-primary-2) 100%
        ) !important;
    box-shadow:
        0 15px 35px
        color-mix(in srgb,var(--hq-primary) 14%,transparent)
        !important;
}

.welcome::before,
.welcome::after{
    border-color:
        color-mix(in srgb,var(--hq-accent) 22%,transparent)
        !important;
}

.welcome-label{
    color:var(--hq-accent) !important;
}

.welcome h1,
.welcome p{
    color:var(--hq-on-primary) !important;
}

/* Keep the Hameedians identity stripe exactly:
   MAROON | GOLD | GREEN in every theme. */
.brand-colors .maroon,
.brand-colors .c1{
    background:#861515 !important;
}
.brand-colors .gold,
.brand-colors .c2{
    background:#f5b91e !important;
}
.brand-colors .green,
.brand-colors .c3{
    background:#0b8164 !important;
}

/* Floating theme control */
.hahc-theme-fab{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:99999;
    font-family:inherit;
}

.hahc-theme-fab-button{
    width:54px;
    height:54px;
    border:2px solid rgba(255,255,255,.78);
    border-radius:50%;
    display:grid;
    grid-template-columns:repeat(2,10px);
    grid-template-rows:repeat(2,10px);
    align-content:center;
    justify-content:center;
    gap:3px;
    cursor:pointer;
    background:var(--hq-primary);
    box-shadow:
        0 12px 30px rgba(0,0,0,.20),
        inset 0 -3px var(--hq-accent);
    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.hahc-theme-fab-button:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:
        0 16px 34px rgba(0,0,0,.24),
        inset 0 -3px var(--hq-accent);
}

.hahc-palette-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    display:block;
}

.hahc-palette-dot.d1{background:#861515}
.hahc-palette-dot.d2{background:#f5b91e}
.hahc-palette-dot.d3{background:#0b8164}
.hahc-palette-dot.d4{background:#ffffff}

.hahc-theme-fab-panel{
    position:absolute;
    right:0;
    bottom:66px;
    width:230px;
    padding:10px;
    border:1px solid var(--hq-border);
    border-radius:14px;
    background:#fff;
    box-shadow:0 18px 45px rgba(0,0,0,.18);
    opacity:0;
    visibility:hidden;
    transform:translateY(8px) scale(.98);
    transform-origin:bottom right;
    transition:.18s ease;
}

.hahc-theme-fab.open .hahc-theme-fab-panel{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}

.hahc-theme-fab-title{
    padding:6px 8px 9px;
    color:var(--hq-primary);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.8px;
}

.hahc-theme-fab-panel button{
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    margin:2px 0;
    border:1px solid transparent;
    border-radius:9px;
    background:#fff;
    color:#283033;
    cursor:pointer;
    text-align:left;
    font:inherit;
    font-size:11px;
    font-weight:800;
}

.hahc-theme-fab-panel button:hover{
    background:#f6f6f6;
}

.hahc-theme-fab-panel button.active{
    border-color:var(--hq-accent);
    background:var(--hq-soft);
    color:var(--hq-primary);
}

.hahc-theme-swatch{
    width:25px;
    height:25px;
    flex:0 0 25px;
    border-radius:7px;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.22);
}

.swatch-maroon{
    background:linear-gradient(135deg,#760d12 0 62%,#f5b91e 62%);
}
.swatch-navy{
    background:linear-gradient(135deg,#071f4d 0 62%,#f8c654 62%);
}
.swatch-teal{
    background:linear-gradient(135deg,#087f7f 0 62%,#ffffff 62%);
}
.swatch-slate{
    background:linear-gradient(135deg,#27333d 0 62%,#ff5a0a 62%);
}

@media(max-width:700px){
    .hahc-theme-fab{
        right:14px;
        bottom:14px;
    }

    .hahc-theme-fab-button{
        width:48px;
        height:48px;
    }

    .hahc-theme-fab-panel{
        bottom:58px;
        width:215px;
    }
}
.sa-logo {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2px;
}

.sa-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}