/* ================================================================
   T7 "DARK & FIRE" RESTYLE — LIVE MAP PAGE CHROME
   ----------------------------------------------------------------
   Ported from T7Project/Map.php to match the restyled homepage
   (tokens live in t7-theme.css :root — --fire-red/orange/yellow,
   --gold-light/dark, --glass-bg, --glass-border, already globally
   loaded on every page). This file is loaded AFTER map.css via the
   map template's {% block extra_css %}, so equal-specificity class
   overrides win by cascade order.

   SCOPE: page chrome only (panels, pills, legend, sidebar, chat,
   controls, toggles, buttons). The Leaflet map, live data markers,
   and semantic data colours (player=green, boss=red, resource icons)
   are intentionally left untouched.

   All rules are namespaced under .map-page and reuse the shared fire
   tokens. CSS-only — live on browser refresh (no Flask restart). */

.map-page {
    /* Chrome glass tuned to sit legibly over Leaflet tiles — deeper /
       more opaque than the homepage's --glass-bg (which sits over the
       site background scrim), but the same red-black + gold language. */
    --t7-map-glass: rgba(14, 3, 2, 0.86);
    --t7-map-glass-strong: linear-gradient(135deg, rgba(30, 5, 0, 0.9), rgba(10, 0, 0, 0.94), rgba(40, 8, 0, 0.9));
    --t7-map-glass-hover: rgba(34, 8, 2, 0.94);
    --t7-map-border: rgba(255, 215, 0, 0.28);
    --t7-map-border-hover: rgba(255, 69, 0, 0.6);
    --t7-map-ink: #f4e9d6;
    --t7-map-ink-dim: rgba(244, 233, 214, 0.62);
    --t7-map-shadow: 0 8px 25px rgba(0, 0, 0, 0.8), inset 0 0 15px rgba(255, 69, 0, 0.12);
}

/* ── Map canvas background: warm the deep base to match the fire theme ── */
.map-page .leaflet-container,
.map-page #mapContainer {
    background: #0a0203;
}

/* ================================================================
   BACK / HOME BUTTON
   ================================================================ */
.map-back-btn {
    border: 1px solid var(--t7-map-border);
    background: var(--t7-map-glass);
    color: var(--fire-yellow);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 69, 0, 0.1);
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.25);
}
.map-back-btn:hover {
    background: var(--t7-map-glass-hover);
    border-color: var(--t7-map-border-hover);
    color: #fff;
}

/* ================================================================
   LEFT LEGEND / FILTER CONTROL
   ================================================================ */
.map-legend-toggle,
.map-legend-panel {
    border: 1px solid var(--t7-map-border);
    background: var(--t7-map-glass);
    box-shadow: var(--t7-map-shadow);
}
.map-legend-toggle {
    color: var(--fire-yellow);
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.25);
}
.map-legend-toggle i {
    color: var(--fire-orange);
}
.map-legend-toggle:hover {
    background: var(--t7-map-glass-hover);
    border-color: var(--t7-map-border-hover);
    color: #fff;
}
.map-legend-panel {
    background: var(--t7-map-glass-strong);
    background-size: 200% 200%;
    color: var(--t7-map-ink);
}
.map-legend-kicker {
    color: var(--fire-yellow);
    text-shadow: 0 0 8px var(--fire-orange);
}
.map-legend-section-title {
    color: rgba(255, 215, 0, 0.7);
    border-bottom: 1px solid rgba(255, 69, 0, 0.16);
    padding-bottom: 0.35rem;
}
.map-legend-item {
    color: var(--t7-map-ink);
}
.map-legend-item:hover {
    color: #fff;
}
.map-legend-item input {
    accent-color: var(--fire-orange);
}
.map-legend-subitem {
    color: rgba(255, 220, 180, 0.82);
}
.map-legend-subitem input {
    accent-color: var(--fire-yellow);
}
.map-legend-subgroup {
    border-left: 1px solid rgba(255, 69, 0, 0.2);
}
.map-legend-section-count {
    color: var(--fire-orange);
    background: rgba(255, 69, 0, 0.14);
    border: 1px solid rgba(255, 69, 0, 0.32);
}

/* Mobile panel close button (legend / sidebar headers) */
.map-mobile-panel-close {
    background: rgba(255, 69, 0, 0.12);
    color: var(--fire-yellow);
}
.map-mobile-panel-close:hover {
    background: rgba(255, 69, 0, 0.22);
    color: #fff;
}

/* ================================================================
   SERVER FILTER PILLS
   ================================================================ */
.map-server-picker {
    border-color: var(--t7-map-border);
    background: var(--t7-map-glass);
    box-shadow: var(--t7-map-shadow);
}
.map-server-picker:hover,
.map-server-picker:focus-within {
    background: var(--t7-map-glass-hover);
    border-color: var(--t7-map-border-hover);
}
.map-server-picker-icon,
.map-server-picker-chevron {
    color: var(--fire-orange);
}
.map-server-picker-label {
    color: rgba(255, 215, 0, 0.72);
}
.map-server-pill {
    border: 1px solid var(--t7-map-border);
    background: rgba(0, 0, 0, 0.62);
    color: #d9c9b0;
    letter-spacing: 0.05em;
    /* Bigger, easier-to-hit server tabs (2026-07 overhaul). Loaded after
       map.css so these size overrides win the cascade. */
    min-height: 46px;
    max-width: 190px;
    padding: 0.55rem 1.35rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 12px;
}
.map-server-pill:hover {
    background: rgba(30, 8, 0, 0.85);
    border-color: rgba(255, 69, 0, 0.4);
    color: #fff;
}
.map-server-pill.is-active {
    background: #2a0000;
    border-color: var(--fire-red);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.55), inset 0 0 6px rgba(255, 69, 0, 0.5);
    text-shadow: 0 0 6px rgba(255, 69, 0, 0.6);
}
/* Live online-player-count badge on each server pill — fire-theme tint to
   match the restyled tabs (structure/updates come from map.css + map.js). */
.map-server-pill-count {
    background: rgba(255, 69, 0, 0.16);
    border: 1px solid rgba(255, 69, 0, 0.3);
    color: var(--fire-yellow, #ffd700);
    text-shadow: none;
}
.map-server-pill.is-active .map-server-pill-count {
    background: rgba(255, 69, 0, 0.32);
    border-color: rgba(255, 215, 0, 0.5);
    color: #fff;
}
.map-server-pill-count.is-zero {
    opacity: 0.6;
}

/* Mobile: the unconditional "bigger tabs" sizing above (46px/190px/1rem)
   is oversized for small viewports and fights the autofit wrap/shrink
   rules in map.css. Mirror map.css's own mobile tuning here so the strip
   never needs a horizontal scrollbar on the T7 theme either. */
@media (max-width: 768px) {
    .map-server-pill {
        min-height: 40px;
        max-width: 140px;
        padding: 0.4rem 0.8rem;
        font-size: 0.82rem;
    }
}
@media (max-width: 380px) {
    .map-server-pill {
        min-height: 36px;
        max-width: 120px;
        padding: 0.32rem 0.6rem;
        font-size: 0.76rem;
    }
}

/* ================================================================
   NEXT BOSS + NEXT RESTART COUNTDOWN PANELS
   ================================================================ */
.map-next-boss-panel,
.map-restart-countdown-panel {
    background: var(--t7-map-glass-strong);
    background-size: 200% 200%;
    border: 1px solid var(--t7-map-border);
    box-shadow: var(--t7-map-shadow);
}
.map-next-boss-label,
.map-restart-countdown-label {
    color: rgba(255, 215, 0, 0.78);
}
.map-next-boss-label i {
    color: var(--fire-yellow);
}
.map-restart-countdown-label i {
    color: var(--fire-orange);
}
.map-next-boss-countdown,
.map-restart-countdown-time {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.35);
}
.map-next-boss-countdown.is-soon,
.map-restart-countdown-time.is-soon {
    color: var(--fire-yellow);
    text-shadow: 0 0 12px var(--fire-orange);
}
.map-next-boss-meta {
    color: var(--t7-map-ink-dim);
}
.map-restart-countdown-time.is-restarting {
    color: var(--fire-red);
    text-shadow: 0 0 12px var(--fire-red);
}

/* ================================================================
   RIGHT SIDEBAR (players / bosses / spawns)
   ================================================================ */
.map-sidebar {
    background: linear-gradient(180deg, rgba(16, 2, 1, 0.97), rgba(8, 0, 0, 0.98));
    border-left: 1px solid var(--t7-map-border);
    box-shadow: -8px 0 30px rgba(0, 0, 0, 0.6);
}
.map-sidebar-inner {
    scrollbar-color: rgba(255, 69, 0, 0.3) transparent;
}
.map-sidebar-inner::-webkit-scrollbar-thumb {
    background: rgba(255, 69, 0, 0.32);
}
.map-sidebar-section {
    border-bottom: 1px solid rgba(255, 69, 0, 0.1);
}
.map-sidebar-header {
    color: rgba(255, 215, 0, 0.82);
    background: rgba(255, 69, 0, 0.06);
    border-bottom: 1px solid rgba(255, 69, 0, 0.12);
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.2);
}
.map-count-badge {
    background: rgba(255, 69, 0, 0.2);
    color: var(--fire-orange);
    border: 1px solid rgba(255, 69, 0, 0.42);
}
.map-sidebar-empty {
    color: rgba(255, 220, 180, 0.4);
}

/* List hover states → warm the cool blue/red hovers into the fire palette.
   The player/boss status dots keep their semantic colours (green/red). */
.map-player-item:hover {
    background: rgba(255, 69, 0, 0.1);
}
.map-player-name {
    color: var(--t7-map-ink);
}
.map-player-level {
    color: var(--fire-yellow);
}
.map-boss-item:hover {
    background: rgba(255, 0, 0, 0.12);
}
.map-spawn-item:hover {
    background: rgba(255, 69, 0, 0.08);
}

/* Player lookup pill → gold/fire outline (was green) */
.map-player-lookup-btn {
    border: 1px solid rgba(255, 215, 0, 0.4);
    background: rgba(255, 69, 0, 0.12);
    color: var(--fire-yellow);
}
.map-player-lookup-btn:hover {
    background: rgba(255, 69, 0, 0.22);
    color: #fff;
}

/* ================================================================
   IN-GAME CHAT PANEL + PEEK BUBBLES
   ================================================================ */
.map-chat-panel {
    border: 1px solid var(--t7-map-border);
    background: var(--t7-map-glass);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.6), 0 0 16px rgba(255, 69, 0, 0.1);
}
.map-chat-panel-header {
    border-bottom: 1px solid rgba(255, 69, 0, 0.12);
}
.map-chat-panel-kicker {
    color: rgba(255, 215, 0, 0.82);
}
.map-chat-panel-title {
    color: #fff;
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.25);
}
.map-chat-panel-toggle {
    color: var(--fire-yellow);
}
.map-chat-panel-toggle:hover {
    background: rgba(255, 69, 0, 0.14);
    color: #fff;
}
.map-chat-peek {
    border: 1px solid var(--t7-map-border);
    background: rgba(14, 3, 2, 0.82);
}
.map-chat-peek-author {
    color: var(--fire-yellow);
}
.map-chat-peek-time {
    color: rgba(255, 215, 0, 0.7);
}

/* ================================================================
   FLOATING TOGGLES (mobile sidebar + admin boss controls)
   ================================================================ */
.map-sidebar-toggle {
    border: 1px solid var(--t7-map-border);
    background: var(--t7-map-glass);
    color: var(--fire-yellow);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), 0 0 12px rgba(255, 69, 0, 0.12);
}
.map-sidebar-toggle:hover {
    background: var(--t7-map-glass-hover);
    border-color: var(--t7-map-border-hover);
}
.map-sidebar-badge {
    background: var(--fire-orange);
    box-shadow: 0 0 8px rgba(255, 69, 0, 0.5);
}
.map-boss-control-toggle {
    border: 1px solid rgba(255, 69, 0, 0.4);
    background: var(--t7-map-glass);
    color: var(--fire-orange);
}
.map-boss-control-toggle:hover {
    background: var(--t7-map-glass-hover);
}
.map-boss-control-toggle.is-active {
    background: rgba(255, 69, 0, 0.2);
    border-color: var(--fire-red);
    box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);
}

/* ================================================================
   MAP COORDINATES HUD (admin) → fire/gold dark-glass
   Recolours the top-right coordinate readout to match the theme
   (was cool blue). Loaded after map.css so equal-specificity wins.
   ================================================================ */
.map-admin-hud {
    border: 1px solid var(--t7-map-border);
    background: var(--t7-map-glass-strong);
    background-size: 200% 200%;
    color: var(--t7-map-ink);
    box-shadow: var(--t7-map-shadow);
}
.map-admin-hud-title {
    color: rgba(255, 215, 0, 0.82);
    text-shadow: 0 0 8px rgba(255, 69, 0, 0.2);
}
.map-admin-hud-coords {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.35);
}
.map-admin-hud-help {
    color: var(--t7-map-ink-dim);
}
.map-admin-hud-mode {
    border: 1px solid var(--t7-map-border);
    background: rgba(0, 0, 0, 0.55);
    color: rgba(244, 233, 214, 0.84);
}
.map-admin-hud-mode:hover {
    background: var(--t7-map-glass-hover);
    color: #fff;
}
.map-admin-hud-mode.is-active {
    border-color: var(--fire-red);
    background: rgba(255, 69, 0, 0.22);
    color: #fff;
    box-shadow: inset 0 0 6px rgba(255, 69, 0, 0.4);
}

/* ================================================================
   POWERED-BY ATTRIBUTION (compact white-label credit)
   ================================================================ */
.powered-by-credit a {
    color: var(--fire-yellow);
}
.powered-by-credit a:hover {
    color: var(--fire-orange);
}