/*
 * CoC-Stats — "War Room" theme
 * Dark-gaming navy + Clash gold, SaaS sidebar + KPI cards, game-panel depth.
 * Theme switch: <html data-theme="night|day"> (boot script in index.html).
 * Token NAMES are a contract: tailwind.config (index.html), Chart.js
 * (js/charts.js) and this file all read them; day mode only re-values them.
 * Values are "R G B" triplets so Tailwind /opacity modifiers keep working.
 */

html[data-theme="night"] {
    --s-base: 13 18 28;
    --s-nav: 16 22 34;
    --s-panel: 19 26 40;
    --s-card: 25 34 52;
    --s-inset: 16 23 37;
    --s-hover: 33 45 68;
    --s-line: 56 74 106;
    --s-line-dim: 37 50 74;
    --gold: 245 185 66;
    --gold-bright: 255 210 120;
    --gold-deep: 214 145 30;
    --t-white: 255 255 255;
    --g300: 226 232 242;
    --g400: 186 198 216;
    --g500: 148 163 188;
    --g600: 122 138 168;
    --g700: 66 80 104;
    --g800: 40 52 74;
    --g900: 22 30 46;
    --ink: #e8edf6;
    --ink-soft: #cfd8e8;
    --muted: #93a2bd;
    --aura-1: radial-gradient(1100px 520px at 80% -10%, rgb(var(--gold) / 0.06), transparent 60%);
    --aura-2: radial-gradient(1000px 650px at 0% 110%, rgb(56 97 158 / 0.18), transparent 55%);
    --panel-edge: rgb(var(--gold) / 0.22);
    --chip-a: rgb(var(--gold) / 0.14);
    --chip-b: rgb(var(--gold) / 0.05);
    --sel-bg: rgb(var(--gold) / 0.25);
    --sel-fg: rgb(var(--gold-bright));
    --lift: rgb(0 0 0 / 0.45);
    --panel-tint: rgb(56 97 158 / 0.08);
    --accent-ink: #101623;
    color-scheme: dark;
    --bar3: 74 222 128;
    --bar2: 245 185 66;
    --bar1: 248 113 113;
    --bar0: 122 138 168;
}

/* Day: cool paper + navy ink; scales keep their SEMANTIC jobs (gray-800
   stays "border", gray-300 stays "primary text") so markup needs no dark:. */
html[data-theme="day"] {
    --s-base: 237 240 246;
    --s-nav: 243 245 250;
    --s-panel: 249 250 253;
    --s-card: 255 255 255;
    --s-inset: 242 245 250;
    --s-hover: 230 236 246;
    --s-line: 168 183 208;
    --s-line-dim: 214 222 235;
    --gold: 122 82 6;      /* 6.2:1 under #fffaf0 buttons */
    --gold-bright: 142 96 6;
    --gold-deep: 200 148 40;
    --t-white: 27 37 58;
    --g300: 30 41 59;
    --g400: 55 68 91;
    --g500: 88 101 124;
    --g600: 100 113 137;
    --g700: 150 162 183;
    --g800: 203 213 228;
    --g900: 226 232 242;
    --ink: #1b2537;
    --ink-soft: #33415a;
    --muted: #5b6b85;
    --aura-1: radial-gradient(1100px 520px at 80% -10%, rgb(var(--gold) / 0.08), transparent 60%);
    --aura-2: radial-gradient(1000px 650px at 0% 110%, rgb(56 97 158 / 0.08), transparent 55%);
    --panel-edge: rgb(var(--gold) / 0.45);
    --chip-a: rgb(var(--gold) / 0.12);
    --chip-b: rgb(var(--gold) / 0.05);
    --sel-bg: rgb(var(--gold) / 0.22);
    --sel-fg: #241d14;
    --lift: rgb(80 96 128 / 0.18);
    --panel-tint: rgb(56 97 158 / 0.05);
    --accent-ink: #fffaf0;
    color-scheme: light;
    --bar3: 34 160 91;
    --bar2: 176 122 12;
    --bar1: 198 60 52;
    --bar0: 100 113 137;
}

body {
    background: rgb(var(--s-base));
    background-image: var(--aura-1), var(--aura-2);
    background-attachment: fixed;
    color: var(--ink);
    font-family: 'Outfit', sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease;
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(var(--s-nav)); }
::-webkit-scrollbar-thumb {
    background: rgb(var(--s-line));
    border-radius: 8px; border: 2px solid rgb(var(--s-nav));
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--gold-deep)); }

/* ============ App shell: sidebar (lg) / top bar (mobile) ============ */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.sidebar {
    background: rgb(var(--s-nav));
    border-bottom: 1px solid rgb(var(--s-line-dim));
    padding: 12px;
    position: sticky; top: 0; z-index: 40;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 10px; position: relative; padding-right: 58px; /* clear of absolute toggle */ }
.brand-badge { width: 40px; height: 40px; filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.4)); }
.brand-title { font-size: 20px; line-height: 1.1; }
.brand-rule { display: none; }
.nav { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.nav::-webkit-scrollbar { display: none; }
.content { flex: 1; padding: 0 12px 40px; min-width: 0; }

/* Data-freshness indicator (spec §10). Mobile: inline chip in the top bar. */
.freshness {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px; margin-left: auto;
    background: rgb(var(--s-card)); border: 1px solid rgb(var(--s-line-dim));
    font-size: 10px; line-height: 1.3;
}
.fresh-dot {
    width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
    background: var(--muted); box-shadow: 0 0 0 3px rgb(var(--s-hover) / 0.5);
}
.freshness[data-state="live"] .fresh-dot { background: rgb(var(--bar3)); box-shadow: 0 0 8px rgb(var(--bar3) / 0.6); }
.freshness[data-state="stale"] .fresh-dot { background: rgb(var(--bar2)); box-shadow: 0 0 8px rgb(var(--bar2) / 0.6); }
.fresh-text { display: flex; flex-direction: column; }
.fresh-label { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.freshness[data-state="live"] .fresh-label { color: rgb(var(--bar3)); }
.freshness[data-state="stale"] .fresh-label { color: rgb(var(--bar2)); }
.fresh-sub { color: var(--muted); font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
    .app-shell { flex-direction: row; }
    .sidebar {
        width: 236px; flex-shrink: 0; height: 100vh;
        border-bottom: none; border-right: 1px solid rgb(var(--s-line-dim));
        padding: 20px 14px; display: flex; flex-direction: column;
    }
    .brand { padding: 4px 6px 0; flex-direction: column; text-align: center; gap: 8px; }
    .brand-badge { width: 56px; height: 56px; }
    .brand-title { font-size: 24px; }
    .brand-rule {
        display: block; height: 1px; margin: 10px 0 4px; width: 100%;
        background: linear-gradient(90deg, transparent, rgb(var(--gold-deep)) 30%, rgb(var(--gold)) 50%, rgb(var(--gold-deep)) 70%, transparent);
    }
    .nav { flex-direction: column; overflow: visible; margin-top: 10px; }
    .sidebar-note {
        display: block; margin-top: auto; padding: 10px 6px 0;
        font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--muted); text-align: center; line-height: 1.6;
    }
    /* Two stacked auto margins would fight, so the freshness chip gives up its
       own auto margin and the note below it owns the push-to-bottom instead. */
    .freshness { margin: 12px 0 0; }
    .content { padding: 24px 32px 56px; }
}

/* Sidebar credit line. The bot links live in the Overview card, not here —
   at 8px type in a 236px column they read as footer noise, and the point of
   them is to be noticed. */
.sidebar-credit {
    color: var(--muted); text-decoration: none; transition: color 0.18s;
}
.sidebar-credit:hover { color: rgb(var(--gold)); }

/* Clan tag copy button — one click instead of selecting 9 characters. */
.copy-tag {
    font-size: 8px; font-weight: 700; letter-spacing: 0.1em;
    padding: 2px 7px; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--muted);
    border: 1px solid rgb(var(--s-line-dim)); transition: all 0.18s;
}
.copy-tag:hover { color: rgb(var(--gold)); border-color: rgb(var(--gold-deep)); }
.copy-tag.done { color: #6ee7a0; border-color: #6ee7a0; }

/* Wide community card under the KPI strip. */
.bot-card { margin: 16px 0 4px; }
.bot-card-head {
    font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
}
.bot-card-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bot-card-link {
    display: flex; align-items: center; gap: 13px; min-width: 0;
    padding: 15px 17px; background: rgb(var(--s-card));
    border: 1px solid rgb(var(--s-line-dim)); border-radius: 12px;
    text-decoration: none; transition: all 0.18s;
}
.bot-card-link:hover { border-color: rgb(var(--gold-deep)); background: rgb(var(--s-inset)); }
.bot-card-ico { display: flex; flex-shrink: 0; color: rgb(var(--gold)); }
.bot-card-txt { display: flex; flex-direction: column; min-width: 0; }
.bot-card-txt b { font-size: 15px; color: var(--t-white); line-height: 1.25; }
.bot-card-txt em {
    font-style: normal; font-size: 10.5px; color: rgb(var(--gold));
    letter-spacing: 0.02em; line-height: 1.35; margin-top: 1px;
}
.bot-card-txt span {
    font-size: 10px; color: var(--muted); line-height: 1.45; margin-top: 4px;
}
@media (max-width: 640px) {
    .bot-card-row { grid-template-columns: 1fr; }
}

/* Theme toggle: only the actionable icon shows */
.theme-toggle {
    position: absolute; right: 4px; top: 4px;
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 10px; border-radius: 8px;
    background: rgb(var(--s-card)); border: 1px solid rgb(var(--s-line-dim));
    color: rgb(var(--gold)); cursor: pointer; transition: all 0.2s;
}
.theme-toggle:hover { border-color: rgb(var(--gold)); box-shadow: 0 0 12px rgb(var(--gold) / 0.25); }
html[data-theme="night"] .icon-sun { display: none; }
html[data-theme="day"] .icon-moon { display: none; }
/* Desktop override must come AFTER the absolute default (same specificity). */
@media (min-width: 1024px) {
    .theme-toggle { position: static; width: 100%; justify-content: center; margin-top: 12px; }
}

/* ============ Navigation items ============ */
.tab-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; font-size: 11px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
    color: var(--muted); border: 1px solid transparent; border-radius: 10px;
    background: transparent; cursor: pointer; transition: all 0.18s; flex: 1;
}
.tab-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.tab-btn:hover { color: var(--ink-soft); background: rgb(var(--s-card)); }
.tab-btn.active {
    color: var(--accent-ink);
    background: linear-gradient(135deg, rgb(var(--gold-bright)), rgb(var(--gold)));
    border-color: rgb(var(--gold-deep));
    box-shadow: 0 4px 14px -4px rgb(var(--gold) / 0.5), inset 0 1px 0 rgb(var(--t-white) / 0.25);
    text-shadow: none;
}
@media (min-width: 1024px) {
    .tab-btn { flex: none; padding: 11px 14px; font-size: 12px; }
    .tab-btn.active { box-shadow: 0 6px 18px -6px rgb(var(--gold) / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.3); }
}

/* Typography */.display { font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: 0.01em; }
/* legacy hook from render.js markup — now maps to the display face */
.medieval { font-family: 'Fredoka', sans-serif; letter-spacing: 0.02em; }

/* Section titles (used with .display) */
.content h2 { color: var(--ink); }

/* ============ Panels & cards — game depth: soft lift + inner rim ============ */
.panel {
    background: linear-gradient(180deg, var(--panel-tint), rgb(0 0 0 / 0) 14%), rgb(var(--s-panel));
    border: 1px solid rgb(var(--s-line-dim));
    border-top-color: var(--panel-edge);
    border-radius: 16px;
    box-shadow: 0 18px 40px -22px var(--lift), inset 0 1px 0 rgb(var(--t-white) / 0.04);
}

/* Town Hall icon scaling */
.th-icon { width: 36px; height: 36px; object-fit: contain; }
@media (min-width: 768px) { .th-icon { width: 44px; height: 44px; } }

/* Brushed-gold text for titles */
.gold {
    background: linear-gradient(105deg, rgb(var(--gold-bright)) 15%, rgb(var(--gold)) 45%, rgb(var(--gold-deep)) 85%);
    -webkit-background-clip: text; background-clip: text;
    color: rgb(var(--gold)); -webkit-text-fill-color: transparent;
}

.hairline-gold {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(var(--gold-deep)) 30%, rgb(var(--gold)) 50%, rgb(var(--gold-deep)) 70%, transparent);
    box-shadow: 0 0 12px rgb(var(--gold) / 0.3);
}

/* ============ KPI cards (Overview) ============ */
.kpi-grid {
    display: grid; gap: 10px; margin-bottom: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.kpi {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--chip-a), rgb(0 0 0 / 0) 55%), rgb(var(--s-card));
    border: 1px solid rgb(var(--s-line-dim)); border-radius: 14px;
    padding: 14px; display: flex; flex-direction: column; gap: 2px;
    box-shadow: 0 10px 24px -16px var(--lift), inset 0 1px 0 rgb(var(--t-white) / 0.05);
}
.kpi::after {
    content: ''; position: absolute; inset: 0 auto auto 0; height: 2px; width: 100%;
    background: linear-gradient(90deg, rgb(var(--gold) / 0.6), transparent 70%);
}
.kpi-ic {
    width: 30px; height: 30px; border-radius: 9px; margin-bottom: 8px;
    display: flex; align-items: center; justify-content: center;
    background: var(--chip-a); color: rgb(var(--gold));
    border: 1px solid rgb(var(--gold) / 0.25);
}
.kpi-ic svg { width: 15px; height: 15px; }
.kpi-value {
    font-family: 'Fredoka', sans-serif; font-weight: 600;
    font-size: 26px; line-height: 1.1; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.kpi-label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
/* TH spread mini-histogram: one <i> per town-hall tier, height = share */
.kpi-bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin: 4px 0 2px; }
.kpi-bars i { flex: 1; min-width: 6px; border-radius: 2px 2px 0 0; background: linear-gradient(180deg, rgb(var(--gold)), rgb(var(--gold-deep))); opacity: 0.9; }
.kpi-bars i:hover { opacity: 1; box-shadow: 0 0 8px rgb(var(--gold) / 0.5); }
.kpi-sub { font-size: 10px; color: rgb(var(--g500)); }
.kpi-sub .pos { color: rgb(var(--bar3)); font-weight: 700; }
.kpi-sub .neg { color: rgb(var(--bar1)); font-weight: 700; }

/* ============ Sub-navigation pills ============ */
.sub-tab-btn {
    padding: 8px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase; color: rgb(var(--g600)); border-radius: 8px;
    transition: 0.2s; cursor: pointer; border: 1px solid transparent; background: transparent;
}
.sub-tab-btn:hover { color: var(--ink-soft); }
.sub-tab-btn.active {
    color: var(--accent-ink);
    background: linear-gradient(135deg, rgb(var(--gold-bright)), rgb(var(--gold)));
    box-shadow: 0 4px 12px -4px rgb(var(--gold) / 0.45);
}

.hidden-section { display: none !important; }

/* ============ Controls ============ */
.control-base {
    background: rgb(var(--s-card)); border: 1px solid rgb(var(--s-line-dim));
    border-radius: 8px; padding: 6px 10px; font-size: 10px; font-weight: 600;
    color: var(--ink-soft); outline: none; transition: all 0.2s;
    height: 32px; display: flex; align-items: center;
}
.control-base:hover { border-color: rgb(var(--s-line)); }
.control-base:focus { border-color: rgb(var(--gold)); box-shadow: 0 0 0 3px var(--chip-a); }

.btn-role {
    font-size: 9px; font-weight: bold; border: 1px solid rgb(var(--s-line-dim));
    border-radius: 8px; padding: 0 10px; cursor: pointer; color: var(--muted);
    background: rgb(var(--s-panel)); height: 32px; transition: 0.2s; white-space: nowrap;
}
@media (min-width: 768px) { .btn-role { font-size: 10px; padding: 0 12px; } }
.btn-role.active {
    border-color: rgb(var(--gold)); color: var(--accent-ink);
    background: linear-gradient(135deg, rgb(var(--gold-bright)), rgb(var(--gold)));
}

/* Card labels/values */
.stat-label { font-size: 8px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700; }
.stat-value { font-size: 10px; font-weight: 600; color: var(--ink-soft); }

select.control-base {
    appearance: none; padding-right: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2398a6ba'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 12px;
}

/* ============ Tooltips ============ */
.info-tooltip {
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 180px; background: rgb(var(--s-card)); border: 1px solid rgb(var(--s-line));
    border-top-color: var(--panel-edge); padding: 8px 10px; border-radius: 10px;
    font-size: 9px; line-height: 1.4; color: var(--ink-soft);
    box-shadow: 0 12px 32px -8px var(--lift); z-index: 999;
    pointer-events: none; opacity: 0; transition: opacity 0.2s; display: none;
}
.info-tooltip.active { display: block; opacity: 1; pointer-events: auto; }
.info-tooltip::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border-width: 6px; border-style: solid;
    border-color: rgb(var(--s-card)) transparent transparent transparent;
}
.info-tooltip::before {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border-width: 7px; border-style: solid;
    border-color: rgb(var(--s-line)) transparent transparent transparent; margin-top: 1px;
}

/* ============ Sync button ============ */
.sync-btn { cursor: pointer; }
.sync-btn:hover { color: rgb(var(--gold)) !important; filter: drop-shadow(0 0 6px rgb(var(--gold) / 0.4)); }
.syncing svg { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ============ Reset buttons ============ */
.btn-reset {
    font-size: 10px; letter-spacing: 0.08em; font-weight: 700; color: var(--muted);
    text-transform: uppercase; padding: 2px 8px; border: 1px solid rgb(var(--s-line-dim));
    border-radius: 8px; background: transparent; transition: all 0.2s; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-reset:hover {
    color: var(--accent-ink); border-color: rgb(var(--gold));
    background: linear-gradient(135deg, rgb(var(--gold-bright)), rgb(var(--gold)));
}
.btn-reset:active { transform: scale(0.96); }

/* War card pinned/live edge */
.hover\:border-gold:hover, .border-gold { border-color: rgb(var(--gold)) !important; }

/* Prevent table text wrapping on mobile */
table th, table td { white-space: nowrap; }

/* ============ flatpickr follows tokens ============ */
.flatpickr-calendar { background: rgb(var(--s-panel)) !important; border: 1px solid rgb(var(--s-line-dim)) !important; box-shadow: 0 16px 40px -12px var(--lift) !important; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: rgb(var(--gold)) !important; border-color: rgb(var(--gold)) !important; color: rgb(var(--s-base)) !important; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year, .flatpickr-weekdays, span.flatpickr-weekday, .flatpickr-day, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--ink) !important; fill: var(--ink) !important; background: transparent !important; }
.flatpickr-day:hover { background: var(--chip-a) !important; }
.flatpickr-day.flatpickr-disabled { color: rgb(var(--g700)) !important; }
.numInputWrapper span svg path { fill: rgb(var(--g500)) !important; }
.flatpickr-hour, .flatpickr-minute { color: var(--ink) !important; }