/* =========================
   STATHUT GLOBAL THEME
========================= */

:root {
    color-scheme: light;

    --sh-page-bg-start: #dbeafe;
    --sh-page-bg-end: #eef2ff;

    --sh-surface: #ffffff;
    --sh-surface-soft: #f8fbff;
    --sh-surface-muted: #f1f5f9;

    --sh-text-primary: #1f3c88;
    --sh-text-normal: #111827;
    --sh-text-secondary: #6b7280;

    --sh-border: #e7ebf5;

    --sh-nav-bg: rgba(255, 255, 255, 0.82);
    --sh-nav-border: rgba(255, 255, 255, 0.70);

    --sh-shadow-card:
        0 10px 28px rgba(0, 0, 0, 0.08);

    --sh-shadow-large:
        0 20px 45px rgba(0, 0, 0, 0.10);
}

/* =========================
   DARK THEME PALETTE
========================= */

html[data-theme="dark"] {
    color-scheme: dark;

    --sh-page-bg-start: #0f172a;
    --sh-page-bg-end: #111827;

    --sh-surface: #182235;
    --sh-surface-soft: #202c40;
    --sh-surface-muted: #263449;

    --sh-text-primary: #93c5fd;
    --sh-text-normal: #f8fafc;
    --sh-text-secondary: #cbd5e1;

    --sh-border: #334155;

    --sh-nav-bg: rgba(24, 34, 53, 0.88);
    --sh-nav-border: rgba(148, 163, 184, 0.18);

    --sh-shadow-card:
        0 10px 28px rgba(0, 0, 0, 0.28);

    --sh-shadow-large:
        0 20px 45px rgba(0, 0, 0, 0.38);
}

/* =========================
   SHARED THEME TOGGLE
========================= */

.stathut-theme-toggle {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid var(--sh-border);
    border-radius: 50%;

    background: var(--sh-surface);
    color: var(--sh-text-normal);

    font-size: 20px;
    cursor: pointer;

    box-shadow: var(--sh-shadow-card);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.stathut-theme-toggle:hover {
    transform: translateY(-2px) rotate(8deg);
}

.stathut-theme-toggle:active {
    transform: scale(0.94);
}

/* =========================================
   PLAYER SEARCH PAGE - GLOBAL THEME WIRING
========================================= */

/* Page */
html[data-theme="dark"] body {
    background: linear-gradient(
        135deg,
        var(--sh-page-bg-start),
        var(--sh-page-bg-end)
    );
    color: var(--sh-text-normal);
}

/* Main title */
html[data-theme="dark"] body h1 {
    color: var(--sh-text-primary);
}

/* Search input */
html[data-theme="dark"] .search-box input {
    background: var(--sh-surface);
    color: var(--sh-text-normal);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .search-box input::placeholder {
    color: var(--sh-text-secondary);
}

/* Main dashboard */
html[data-theme="dark"] .player-card {
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-large);
}

/* Overview stats */
html[data-theme="dark"] .top-stat,
html[data-theme="dark"] .overview-card {
    background: var(--sh-surface-soft);
}

html[data-theme="dark"] .top-stat h3,
html[data-theme="dark"] .overview-card h4 {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .top-stat small {
    color: var(--sh-text-secondary);
}

html[data-theme="dark"] .overview-card p {
    color: var(--sh-text-normal);
}

/* Section titles */
html[data-theme="dark"] .heroes-section h2,
html[data-theme="dark"] .section-title {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .section-line {
    background: var(--sh-border);
}

/* Heroes and Pets */
html[data-theme="dark"] .hero-card {
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .hero-card h3,
html[data-theme="dark"] .hero-title h3 {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .hero-card p,
html[data-theme="dark"] .hero-level {
    color: var(--sh-text-secondary);
}

html[data-theme="dark"] .equipment-pill {
    background: var(--sh-surface-muted);
    color: var(--sh-text-normal);
}

html[data-theme="dark"] .hero-bar {
    background: var(--sh-border);
}

/* Military */
html[data-theme="dark"] .military-tab {
    background: var(--sh-surface-muted);
    color: var(--sh-text-normal);
}

html[data-theme="dark"] .military-tab.active {
    background: #2563eb;
    color: #ffffff;
}

html[data-theme="dark"] .military-card {
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .military-card h4 {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .military-card small {
    color: var(--sh-text-secondary);
}

/* Spells */
html[data-theme="dark"] .spell-card {
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .spell-name {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .spell-level {
    color: var(--sh-text-secondary);
}

html[data-theme="dark"] .spell-progress {
    background: var(--sh-border);
}

/* Player Stats */
html[data-theme="dark"] .stat-card {
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .stat-card h3 {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .stat-card p {
    color: var(--sh-text-secondary);
}

/* Builder Base */
html[data-theme="dark"] .builder-stat-card,
html[data-theme="dark"] .builder-hero-card {
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .builder-stat-card h3,
html[data-theme="dark"] .builder-hero-title h3 {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .builder-stat-card p,
html[data-theme="dark"] .builder-hero-level {
    color: var(--sh-text-secondary);
}

/* War Profile */
html[data-theme="dark"] .war-profile-card {
    background: var(--sh-surface);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .war-profile-card h3 {
    color: var(--sh-text-primary);
}

html[data-theme="dark"] .war-profile-card p {
    color: var(--sh-text-secondary);
}

/* Dashboard navigation */
html[data-theme="dark"] .dashboard-nav {
    background: var(--sh-nav-bg);
    border-color: var(--sh-nav-border);
    box-shadow: var(--sh-shadow-card);
}

html[data-theme="dark"] .dashboard-nav-btn {
    color: var(--sh-text-secondary);
}

html[data-theme="dark"] .dashboard-nav-btn:hover {
    color: var(--sh-text-primary);
    background: var(--sh-surface-muted);
}

html[data-theme="dark"] .dashboard-nav-btn.active {
    color: #ffffff;
    background: #2563eb;
}

/* =========================================
   FWA HOME PAGE
========================================= */

html[data-theme="dark"] body {
    background: linear-gradient(
        120deg,
        #08111f,
        #101b31,
        #172554,
        #0f172a
    );
}

html[data-theme="dark"] .card {

    background: linear-gradient(
        145deg,
        #1b2739,
        #233247
    );

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.03);

}

html[data-theme="dark"] .stathut-title{
    color:#93c5fd;
}

html[data-theme="dark"] .subtitle{
    color:#cbd5e1;
}

html[data-theme="dark"] .card p{
    color:#e5e7eb;
}

html[data-theme="dark"] .card a{
    color:#93c5fd;
}

html[data-theme="dark"] .fwa-nav a{

    color:#d1d5db;

}

html[data-theme="dark"] .fwa-nav a:hover{

    background:rgba(197,106,0,.18);

    color:#ffb44c;

}

html[data-theme="dark"] .fwa-nav a.active{

    background:rgba(197,106,0,.25);

    color:#ffb44c;

}

/* =========================================
   FWA CLANS PAGE
========================================= */

html[data-theme="dark"] .section-title{
    color:#93c5fd;
}

html[data-theme="dark"] .section-desc{
    color:#cbd5e1;
}

html[data-theme="dark"] .clan-card{

    background:#1f2937;

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);

}

html[data-theme="dark"] .clan-card h3{
    color:#93c5fd;
}

html[data-theme="dark"] .clan-card p{
    color:#d1d5db;
}

html[data-theme="dark"] .th-btn{

    background:#2b3443;

    color:#d1d5db;

}

html[data-theme="dark"] .th-btn:hover{

    background:#374151;

}

html[data-theme="dark"] .th-btn.active{

    background:rgba(197,106,0,.28);

    color:#ffb44c;

}

html[data-theme="dark"] .back-link{

    color:#93c5fd;

}

html[data-theme="dark"] .discord-cta{

    background:
        linear-gradient(
            135deg,
            #3849c7,
            #4958d8
        );

}

/* =========================================
   FWA RULES PAGE
========================================= */

html[data-theme="dark"] .header .logo{
    color:#67e8f9;
}

html[data-theme="dark"] .header .logo span{
    color:#94a3b8;
}

html[data-theme="dark"] .subtitle{
    color:#cbd5e1;
}

html[data-theme="dark"] .page-header h1{
    color:#93c5fd;
}

html[data-theme="dark"] .page-header p{
    color:#cbd5e1;
}

html[data-theme="dark"] .nav a{
    color:#d1d5db;
}

html[data-theme="dark"] .nav a:hover,
html[data-theme="dark"] .nav a.active{

    background:#2b3443;

}

html[data-theme="dark"] .section{

    background:#1f2937;

    box-shadow:
        0 10px 28px rgba(0,0,0,.25);

}

html[data-theme="dark"] .section h2{
    color:#93c5fd;
}

html[data-theme="dark"] .section li{
    color:#e5e7eb;
}

html[data-theme="dark"] .footer{

    color:#cbd5e1;

}

html[data-theme="dark"] .card > p a{

    color:#93c5fd;

}

/* =========================================
   FWA BASE GUIDE PAGE
========================================= */

html[data-theme="dark"] body {
    background: #0f172a;
}

html[data-theme="dark"] .card{
    background:#1e293b;
    box-shadow:0 20px 45px rgba(0,0,0,.35);
}

html[data-theme="dark"] h1{
    color:#93c5fd;
}

html[data-theme="dark"] h2{
    color:#93c5fd;
}

html[data-theme="dark"] p{
    color:#d1d5db;
}

html[data-theme="dark"] .alert{

    background:#4a2d12;
    border-left-color:#fb923c;
    color:#fde68a;

}

html[data-theme="dark"] .warning{

    background:#4a1717;
    border-left-color:#ef4444;
    color:#fecaca;

}

html[data-theme="dark"] .th-box{

    background:#334155;

}

html[data-theme="dark"] .th-box a{

    color:#f8fafc;

}

html[data-theme="dark"] .links li{

    color:#d1d5db;

}

html[data-theme="dark"] .links a{

    color:#93c5fd;

}

/* =========================================
   FAMILY DASHBOARD
========================================= */

html[data-theme="dark"] .section-title{
    color:#93c5fd;
}

html[data-theme="dark"] .section-desc{
    color:#cbd5e1;
}

html[data-theme="dark"] .clan-card{

    background:#1f2937;

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);

}

html[data-theme="dark"] .clan-card h3{
    color:#93c5fd;
}

html[data-theme="dark"] .clan-card p{
    color:#d1d5db;
}

html[data-theme="dark"] .badge.recruiting{

    background:#1b4332;

    color:#6ee7b7;

}

html[data-theme="dark"] .badge.almost-full{

    background:#5b4300;

    color:#fde68a;

}

html[data-theme="dark"] .badge.full{

    background:#4c1d1d;

    color:#fecaca;

}

html[data-theme="dark"] .discord-cta{

    background:
        linear-gradient(
            135deg,
            #3849c7,
            #4958d8
        );

}

html[data-theme="dark"] .back-link{

    color:#93c5fd;

}

/* =========================================
   FWA GUIDE PAGE
========================================= */

html[data-theme="dark"] body {
    background: #0f172a;
    color: #e5e7eb;
}

html[data-theme="dark"] header {
    background: #182235;
    border-bottom-color: #334155;
}

html[data-theme="dark"] .logo {
    color: #67e8f9;
}

html[data-theme="dark"] .logo span {
    color: #94a3b8;
}

html[data-theme="dark"] nav a {
    color: #d1d5db;
}

html[data-theme="dark"] nav a.active {
    color: #93c5fd;
}

html[data-theme="dark"] .page-header h1,
html[data-theme="dark"] .section h2 {
    color: #93c5fd;
}

html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .section p,
html[data-theme="dark"] .section li {
    color: #d1d5db;
}

html[data-theme="dark"] .note {
    background: #1f2937;
    border-left-color: #06b6d4;
    color: #e5e7eb;
}

html[data-theme="dark"] footer {
    border-top-color: #334155;
    color: #94a3b8;
}

html[data-theme="dark"] a {
    color: #93c5fd;
}

/* =========================================
   JOIN PAGE
========================================= */

html[data-theme="dark"] body{
    background:#0f172a;
    color:#e5e7eb;
}

html[data-theme="dark"] header{
    background:#182235;
    border-bottom-color:#334155;
}

html[data-theme="dark"] .logo{
    color:#67e8f9;
}

html[data-theme="dark"] .logo span{
    color:#94a3b8;
}

html[data-theme="dark"] nav a{
    color:#d1d5db;
}

html[data-theme="dark"] nav a.active{
    color:#93c5fd;
}

html[data-theme="dark"] .page-header h2{
    color:#93c5fd;
}

html[data-theme="dark"] .page-header p{
    color:#cbd5e1;
}

html[data-theme="dark"] label{
    color:#e5e7eb;
}

html[data-theme="dark"] select{

    background:#1f2937;
    color:#f8fafc;
    border:1px solid #475569;

}

html[data-theme="dark"] .recommendation{

    background:#1f2937;
    border-left-color:#06b6d4;
    color:#e5e7eb;

}

html[data-theme="dark"] .recommendation li{

    color:#e5e7eb;

}

html[data-theme="dark"] .btn{

    border-color:#67e8f9;
    color:#67e8f9;

}

html[data-theme="dark"] .btn:hover{

    background:#06b6d4;
    color:#ffffff;

}

html[data-theme="dark"] footer{

    border-top-color:#334155;
    color:#94a3b8;

}

/* =========================================
   WAR STATUS PAGE
========================================= */

html[data-theme="dark"] .section-title{
    color:#93c5fd;
}

html[data-theme="dark"] .section-desc{
    color:#cbd5e1;
}

html[data-theme="dark"] .clan-card{

    background:#1f2937;

    box-shadow:
        0 12px 28px rgba(0,0,0,.35);

}

html[data-theme="dark"] .clan-card h3{
    color:#93c5fd;
}

html[data-theme="dark"] .clan-card p{
    color:#d1d5db;
}

html[data-theme="dark"] .badge{

    background:#1b4332;

    color:#6ee7b7;

}

html[data-theme="dark"] .discord-cta{

    background:
        linear-gradient(
            135deg,
            #3849c7,
            #4958d8
        );

}

html[data-theme="dark"] .back-link{

    color:#93c5fd;

}

/* =========================================
   MAIN STATHUT HOME
========================================= */

html[data-theme="dark"] body{

    background:linear-gradient(
        120deg,
        #08111f,
        #101b31,
        #172554,
        #0f172a
    );

}

html[data-theme="dark"] .card{

    background:
        linear-gradient(
            145deg,
            #1b2739,
            #233247
        );

    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.03);

}

html[data-theme="dark"] .stathut-title{

    color:#93c5fd;

}

html[data-theme="dark"] .subtitle{

    color:#cbd5e1;

}