/* ═══ ITERORA THEME SYSTEM ═══ */

/* ── Dark (default) ── Spotify-inspired deep black */
[data-theme="dark"], :root {
    --color-base:         #121212;
    --color-surface:      #181818;
    --color-elevated:     #282828;
    --color-highlight:    #333333;
    --color-subdued:      #a7a7a7;
    --color-text:         #ffffff;
    --color-text-secondary: #b3b3b3;
    --color-accent:       #1ed760;
    --color-accent-rgb:   30 215 96;   /* same colour as numbers, so Tailwind can fade it (bg-accent/15) */
    --color-accent-hover: #1fdf64;
    --color-accent-press: #169c46;
    --color-border:       rgba(255,255,255,0.06);
    --color-overlay:      rgba(0,0,0,0.7);
    --scrollbar-thumb:    hsla(0,0%,100%,.3);
    --scrollbar-hover:    hsla(0,0%,100%,.5);
    --input-bg:           rgba(255,255,255,0.06);
    --input-border:       rgba(255,255,255,0.1);
    --card-hover:         rgba(255,255,255,0.1);
    --stat-bg:            rgba(255,255,255,0.04);
    --stat-border:        rgba(255,255,255,0.06);
}

/* ── Light ── Clean, airy, high-contrast */
[data-theme="light"] {
    --color-base:         #f0f0f0;
    --color-surface:      #ffffff;
    --color-elevated:     #e8e8e8;
    --color-highlight:    #d4d4d4;
    --color-subdued:      #6b6b6b;
    --color-text:         #121212;
    --color-text-secondary: #555555;
    --color-accent:       #1db954;
    --color-accent-rgb:   29 185 84;
    --color-accent-hover: #1aa34a;
    --color-accent-press: #148f3e;
    --color-border:       rgba(0,0,0,0.08);
    --color-overlay:      rgba(255,255,255,0.8);
    --scrollbar-thumb:    hsla(0,0%,0%,.2);
    --scrollbar-hover:    hsla(0,0%,0%,.4);
    --input-bg:           rgba(0,0,0,0.07);
    --input-border:       rgba(0,0,0,0.18);
    --card-hover:         rgba(0,0,0,0.05);
    --stat-bg:            rgba(0,0,0,0.03);
    --stat-border:        rgba(0,0,0,0.06);
}

/* ── Midnight ── Deep navy, stargazer feel */
[data-theme="midnight"] {
    --color-base:         #0a0e1a;
    --color-surface:      #111827;
    --color-elevated:     #1e293b;
    --color-highlight:    #334155;
    --color-subdued:      #94a3b8;
    --color-text:         #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-accent:       #38bdf8;
    --color-accent-hover: #7dd3fc;
    --color-accent-press: #0ea5e9;
    --color-border:       rgba(148,163,184,0.1);
    --color-overlay:      rgba(10,14,26,0.8);
    --scrollbar-thumb:    hsla(215,20%,60%,.3);
    --scrollbar-hover:    hsla(215,20%,60%,.5);
    --input-bg:           rgba(148,163,184,0.08);
    --input-border:       rgba(148,163,184,0.15);
    --card-hover:         rgba(148,163,184,0.08);
    --stat-bg:            rgba(148,163,184,0.05);
    --stat-border:        rgba(148,163,184,0.08);
}

/* ── Warm ── Heritage, earthy, golden accent */
[data-theme="warm"] {
    --color-base:         #1a1410;
    --color-surface:      #211c16;
    --color-elevated:     #2e2620;
    --color-highlight:    #3d3429;
    --color-subdued:      #b8a896;
    --color-text:         #f5efe6;
    --color-text-secondary: #d4c8b8;
    --color-accent:       #e8a010;
    --color-accent-hover: #f0b030;
    --color-accent-press: #c88a0a;
    --color-border:       rgba(184,168,150,0.1);
    --color-overlay:      rgba(26,20,16,0.8);
    --scrollbar-thumb:    hsla(30,20%,60%,.3);
    --scrollbar-hover:    hsla(30,20%,60%,.5);
    --input-bg:           rgba(184,168,150,0.08);
    --input-border:       rgba(184,168,150,0.15);
    --card-hover:         rgba(184,168,150,0.08);
    --stat-bg:            rgba(184,168,150,0.05);
    --stat-border:        rgba(184,168,150,0.08);
}

/* ── Forest ── Deep evergreen, mossy & grounded */
[data-theme="forest"] {
    --color-base:         #0c1a0f;
    --color-surface:      #122117;
    --color-elevated:     #1a3324;
    --color-highlight:    #254432;
    --color-subdued:      #8aab96;
    --color-text:         #e8f5ec;
    --color-text-secondary: #b8d4c2;
    --color-accent:       #4ade80;
    --color-accent-hover: #6ee7a0;
    --color-accent-press: #22c55e;
    --color-border:       rgba(138,171,150,0.1);
    --color-overlay:      rgba(12,26,15,0.8);
    --scrollbar-thumb:    hsla(140,20%,50%,.3);
    --scrollbar-hover:    hsla(140,20%,50%,.5);
    --input-bg:           rgba(138,171,150,0.08);
    --input-border:       rgba(138,171,150,0.15);
    --card-hover:         rgba(138,171,150,0.08);
    --stat-bg:            rgba(138,171,150,0.05);
    --stat-border:        rgba(138,171,150,0.08);
}

/* ── Sunset ── Dusky purple-orange, twilight vibes */
[data-theme="sunset"] {
    --color-base:         #1a0f1e;
    --color-surface:      #221428;
    --color-elevated:     #331e3d;
    --color-highlight:    #462a54;
    --color-subdued:      #b89ac4;
    --color-text:         #f5ecf8;
    --color-text-secondary: #dcc8e4;
    --color-accent:       #f97316;
    --color-accent-hover: #fb923c;
    --color-accent-press: #ea580c;
    --color-border:       rgba(184,154,196,0.1);
    --color-overlay:      rgba(26,15,30,0.8);
    --scrollbar-thumb:    hsla(280,20%,55%,.3);
    --scrollbar-hover:    hsla(280,20%,55%,.5);
    --input-bg:           rgba(184,154,196,0.08);
    --input-border:       rgba(184,154,196,0.15);
    --card-hover:         rgba(184,154,196,0.08);
    --stat-bg:            rgba(184,154,196,0.05);
    --stat-border:        rgba(184,154,196,0.08);
}

/* ── Ocean ── Deep sea blue, calm & immersive */
[data-theme="ocean"] {
    --color-base:         #061520;
    --color-surface:      #0a1e2e;
    --color-elevated:     #122d42;
    --color-highlight:    #1c3f58;
    --color-subdued:      #7fa8c4;
    --color-text:         #e4f0f8;
    --color-text-secondary: #a8cbdf;
    --color-accent:       #06b6d4;
    --color-accent-hover: #22d3ee;
    --color-accent-press: #0891b2;
    --color-border:       rgba(127,168,196,0.1);
    --color-overlay:      rgba(6,21,32,0.8);
    --scrollbar-thumb:    hsla(200,30%,50%,.3);
    --scrollbar-hover:    hsla(200,30%,50%,.5);
    --input-bg:           rgba(127,168,196,0.08);
    --input-border:       rgba(127,168,196,0.15);
    --card-hover:         rgba(127,168,196,0.08);
    --stat-bg:            rgba(127,168,196,0.05);
    --stat-border:        rgba(127,168,196,0.08);
}

/* ── Rose ── Soft blush pink, elegant & modern */
[data-theme="rose"] {
    --color-base:         #1a0f14;
    --color-surface:      #22141a;
    --color-elevated:     #351e28;
    --color-highlight:    #482a38;
    --color-subdued:      #c49aab;
    --color-text:         #f8ecf0;
    --color-text-secondary: #e4c8d4;
    --color-accent:       #f43f5e;
    --color-accent-hover: #fb7185;
    --color-accent-press: #e11d48;
    --color-border:       rgba(196,154,171,0.1);
    --color-overlay:      rgba(26,15,20,0.8);
    --scrollbar-thumb:    hsla(340,25%,55%,.3);
    --scrollbar-hover:    hsla(340,25%,55%,.5);
    --input-bg:           rgba(196,154,171,0.08);
    --input-border:       rgba(196,154,171,0.15);
    --card-hover:         rgba(196,154,171,0.08);
    --stat-bg:            rgba(196,154,171,0.05);
    --stat-border:        rgba(196,154,171,0.08);
}

/* ── Slate ── Cool grey, minimal & professional */
[data-theme="slate"] {
    --color-base:         #0f1215;
    --color-surface:      #161a1e;
    --color-elevated:     #1e2328;
    --color-highlight:    #2a3038;
    --color-subdued:      #8892a0;
    --color-text:         #ebeef2;
    --color-text-secondary: #b4bcc8;
    --color-accent:       #6366f1;
    --color-accent-hover: #818cf8;
    --color-accent-press: #4f46e5;
    --color-border:       rgba(136,146,160,0.1);
    --color-overlay:      rgba(15,18,21,0.8);
    --scrollbar-thumb:    hsla(215,12%,50%,.3);
    --scrollbar-hover:    hsla(215,12%,50%,.5);
    --input-bg:           rgba(136,146,160,0.08);
    --input-border:       rgba(136,146,160,0.15);
    --card-hover:         rgba(136,146,160,0.08);
    --stat-bg:            rgba(136,146,160,0.05);
    --stat-border:        rgba(136,146,160,0.08);
}

/* ═══ ITERORA GLOBAL STYLES ═══ */

body {
    font-family: 'Nunito Sans', sans-serif;
    margin: 0;
    color: var(--color-text);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Zilla Slab', serif;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

.sidebar-scroll::-webkit-scrollbar-thumb { background: transparent; }
.sidebar-scroll:hover::-webkit-scrollbar-thumb { background: hsla(0,0%,100%,.3); }

/* Sidebar collapse */
#sidebar.sidebar-collapsed {
    width: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
}

/* Auto-hide sidebar on mobile */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 50;
        width: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        opacity: 0;
        transition: width 0.3s, opacity 0.3s, padding 0.3s;
    }
    #sidebar.sidebar-mobile-open {
        width: 300px !important;
        padding: 8px !important;
        overflow-y: auto;
        opacity: 1;
        box-shadow: 4px 0 24px rgba(0,0,0,0.5);
        background: var(--color-base);
    }
    #sidebar-overlay {
        display: none;
    }
    #sidebar-overlay.active {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 49;
        background: rgba(0,0,0,0.6);
    }
}

/* Tour card hover */
.tour-card { transition: background 0.3s, transform 0.2s; cursor: pointer; }
.tour-card:hover { background: var(--card-hover); transform: translateY(-2px); }
.tour-card:hover .tour-play-btn { opacity: 1; transform: translateY(0); }
.tour-play-btn { opacity: 0; transform: translateY(8px); transition: all 0.3s ease; }

/* Star ratings */
.star-filled { color: #1ed760; }
.star-empty { color: #333; }

/* GPS pulse */
@keyframes gps-pulse {
    0% { box-shadow: 0 0 0 0 rgba(30,215,96,0.5); }
    70% { box-shadow: 0 0 0 10px rgba(30,215,96,0); }
    100% { box-shadow: 0 0 0 0 rgba(30,215,96,0); }
}
.gps-pulse { animation: gps-pulse 2s infinite; }

/* Category card */
.category-card { transition: transform 0.2s; cursor: pointer; }
.category-card:hover { transform: scale(1.03); }

/* Activity card */
.activity-card { transition: background 0.2s; }
.activity-card:hover { background: rgba(255,255,255,0.04); }

/* Review card */
.review-card { transition: background 0.2s; }
.review-card:hover { background: rgba(255,255,255,0.05); }

/* Tour detail tabs */
.tour-tab { position: relative; padding-bottom: 12px; cursor: pointer; color: #a7a7a7; font-weight: 700; }
.tour-tab:hover { color: #fff; }
.tour-tab.active { color: #fff; }
.tour-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 2px;
    background: #1ed760;
    border-radius: 1px;
}

/* Stat card */
.stat-card {
    background: var(--stat-bg);
    border: 1px solid var(--stat-border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s;
}
.stat-card:hover { background: var(--card-hover); border-color: var(--input-border); }

/* Stat trend colors */
.stat-trend-up { color: #1ed760; }
.stat-trend-down { color: #ef4444; }

/* Creator feature cards */
.creator-feature-card {
    background: var(--stat-bg);
    border: 1px solid var(--stat-border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
    cursor: pointer;
}
.creator-feature-card:hover {
    background: var(--card-hover);
    border-color: var(--input-border);
}

/* Beacon card */
.beacon-card {
    background: var(--stat-bg);
    border: 1px solid var(--stat-border);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}
.beacon-card:hover {
    background: var(--card-hover);
    border-color: var(--input-border);
}

/* Builder form inputs */
.builder-input {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--color-text);
    font-size: 14px;
    transition: all 0.2s;
}
.builder-input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: var(--card-hover);
}
.builder-input::placeholder {
    color: var(--color-subdued);
    opacity: 0.6;
}

/* Builder select dropdown */
.builder-select {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--color-text);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23a7a7a7' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.builder-select:focus {
    outline: none;
    border-color: var(--color-accent);
}
.builder-select option {
    background: var(--color-elevated);
    color: var(--color-text);
}

/* Leaflet theme overrides */
.leaflet-container { background: var(--color-surface); }
.leaflet-popup-content-wrapper { background: var(--color-elevated); color: var(--color-text); border-radius: 8px; }
.leaflet-popup-tip { background: var(--color-elevated); }
.leaflet-popup-close-button { color: var(--color-subdued) !important; }

/* Constrain Leaflet z-indexes so they don't break fullscreen overlays */
.leaflet-pane { z-index: 1 !important; }
.leaflet-tile-pane { z-index: 1 !important; }
.leaflet-overlay-pane { z-index: 2 !important; }
.leaflet-shadow-pane { z-index: 3 !important; }
.leaflet-marker-pane { z-index: 4 !important; }
.leaflet-tooltip-pane { z-index: 5 !important; }
.leaflet-popup-pane { z-index: 6 !important; }
.leaflet-control { z-index: 10 !important; }

/* Map credits — styled to sit quietly on the dark tiles */
.leaflet-container .leaflet-control-attribution {
    background: rgba(0, 0, 0, 0.55);
    color: rgba(255, 255, 255, 0.6);
    font-size: 10px;
}
.leaflet-container .leaflet-control-attribution a { color: rgba(255, 255, 255, 0.8); }

/* Pin drop animation */
@keyframes pin-drop {
    0% { transform: translateY(-20px); opacity: 0; }
    60% { transform: translateY(2px); opacity: 1; }
    100% { transform: translateY(0); opacity: 1; }
}
.pin-drop { animation: pin-drop 0.4s ease-out forwards; }

/* ═══ TOUR PLAYER ═══ */

/* Ensure player fullscreen is above everything including Leaflet */
.tour-player-container .fixed.z-\[100\] {
    isolation: isolate;
}

/* Fullscreen player enter animation */
.player-fullscreen-enter {
    animation: player-slide-up 0.3s ease-out forwards;
}

@keyframes player-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0.5;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* QR scanner scanning line */
@keyframes scan-line {
    0%, 100% { top: 0; }
    50% { top: calc(100% - 2px); }
}

.animate-scan-line {
    animation: scan-line 2s ease-in-out infinite;
}

/* Progress bar hover effects */
.progress-track {
    transition: height 0.15s ease;
}

.progress-track:hover {
    height: 8px;
}

/* Stop list item transitions */
.stop-item {
    transition: background-color 0.2s, transform 0.15s;
}

.stop-item:active {
    transform: scale(0.98);
}

/* Floor plan beacon pulse */
@keyframes beacon-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.beacon-active {
    animation: beacon-pulse 1.5s ease-in-out infinite;
}

/* ═══ PREMIUM PLAYER ANIMATIONS ═══ */

/* Slow pulse for ambient background glow */
@keyframes pulse-slow {
    0%, 100% { opacity: 0.2; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(1.05); }
}

.animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
}

/* Sound bar equalizer animation */
@keyframes sound-bar {
    0%, 100% { transform: scaleY(0.3); }
    50% { transform: scaleY(1); }
}

.animate-sound-bar {
    animation: sound-bar 0.8s ease-in-out infinite;
    transform-origin: bottom;
}

/* Animation delay utilities */
.animation-delay-150 {
    animation-delay: 150ms;
}

.animation-delay-300 {
    animation-delay: 300ms;
}

/* Slide up animation for expanded player */
@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.animation-delay-1000 {
    animation-delay: 1000ms;
}

/* Swipe down gesture hint animation */
@keyframes swipe-hint {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(4px); opacity: 0.8; }
}

.animate-swipe-hint {
    animation: swipe-hint 2s ease-in-out infinite;
}

/* Premium button glow pulse */
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(255,255,255,0.3), 0 0 40px rgba(255,255,255,0.1); }
    50% { box-shadow: 0 0 30px rgba(255,255,255,0.5), 0 0 60px rgba(255,255,255,0.2); }
}

.animate-glow-pulse {
    animation: glow-pulse 2s ease-in-out infinite;
}

/* Fade in up animation for list items */
@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 0.3s ease-out forwards;
}

/* Shimmer effect for cards */
@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.animate-shimmer {
    animation: shimmer 3s ease-in-out infinite;
}

/* Player slide down (exit) */
@keyframes player-slide-down {
    from {
        transform: translateY(0);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.player-fullscreen-exit {
    animation: player-slide-down 0.25s ease-in forwards;
}

/* Blazor error UI */
.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    background: #331111;
    color: #ff6666;
    padding: 0.5rem 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: none;
}

/* ── Daily bar chart (admin) ──
   Columns <= 24px, 4px rounded tops, square at the baseline, 2px surface gap; hairline grid. */
.daily-chart { display: flex; gap: 6px; height: 140px; margin-top: 12px; }
.daily-chart-axis { display: flex; flex-direction: column; justify-content: space-between; width: 26px; text-align: right; font-variant-numeric: tabular-nums; }
.daily-chart-plot { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--color-border); }
.daily-chart-grid { position: absolute; left: 0; right: 0; top: 0; border-top: 1px solid var(--color-border); pointer-events: none; }
.daily-chart-slot { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; cursor: default; }
.daily-chart-bar { width: 100%; max-width: 24px; min-height: 2px; background: var(--color-accent-press); border-radius: 4px 4px 0 0; }
.daily-chart-slot:hover .daily-chart-bar, .daily-chart-slot:focus-visible .daily-chart-bar { filter: brightness(1.25); }
.daily-chart-slot:focus-visible { box-shadow: inset 0 0 0 1px var(--color-text-secondary); border-radius: 4px; }
.daily-chart-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 20;
    white-space: nowrap; padding: 6px 8px; border-radius: 6px; font-size: 11px; line-height: 1.35;
    background: var(--color-elevated, #282828); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: 0 4px 12px rgb(0 0 0 / 0.3); }
.daily-chart-tip span { color: var(--color-text-secondary); }
.daily-chart-slot:hover .daily-chart-tip, .daily-chart-slot:focus-visible .daily-chart-tip { display: block; }
.daily-chart-slot:first-child .daily-chart-tip { left: 0; transform: none; }
.daily-chart-slot:last-child .daily-chart-tip { left: auto; right: 0; transform: none; }