/* ═══════════════════════════════════════════════════════
   Stage Empire — Theme System
   Each theme sets CSS custom properties that override
   Bootstrap defaults and style the app shell.
   ═══════════════════════════════════════════════════════ */

:root {
    --se-sidebar-start: rgb(5, 39, 103);
    --se-sidebar-end: #3a0647;
    --se-sidebar-text: #d7d7d7;
    --se-sidebar-active: rgba(255,255,255,0.37);
    --se-sidebar-hover: rgba(255,255,255,0.1);
    --se-accent: #258cfb;
    --se-accent-2: #6c63ff;
    --se-topbar-bg: var(--bs-tertiary-bg);
    --se-card-border: var(--bs-border-color);
    --se-badge-glow: none;
    --se-font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --se-font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ─── Classic Dark (default) ───────────────────────── */
[data-theme="classic-dark"] {
    --se-sidebar-start: rgb(5, 39, 103);
    --se-sidebar-end: #3a0647;
    --se-accent: #258cfb;
    --se-accent-2: #6c63ff;
}

/* ─── Classic Light ────────────────────────────────── */
[data-theme="classic-light"] {
    --se-sidebar-start: #2c3e50;
    --se-sidebar-end: #4a235a;
    --se-accent: #2980b9;
    --se-accent-2: #8e44ad;
}

/* ─── Neon Backstage ───────────────────────────────── */
[data-theme="neon-backstage"] {
    --bs-body-bg: #0a0a0f;
    --bs-tertiary-bg: #12121a;
    --bs-body-color: #e0e0e8;
    --bs-border-color: #2a1a3a;
    --bs-secondary-bg: #16101e;
    --bs-emphasis-color: #f0e6ff;
    --se-sidebar-start: #1a0a2e;
    --se-sidebar-end: #0d0d1a;
    --se-sidebar-text: #c8a0ff;
    --se-sidebar-active: rgba(190, 0, 255, 0.3);
    --se-sidebar-hover: rgba(190, 0, 255, 0.15);
    --se-accent: #be00ff;
    --se-accent-2: #00e5ff;
    --se-topbar-bg: #12101a;
    --se-badge-glow: 0 0 8px rgba(190, 0, 255, 0.4);
    --bs-link-color: #be00ff;
    --bs-link-hover-color: #d94dff;
    --bs-card-bg: #14101e;
    --bs-card-border-color: #2a1a3a;
}

[data-theme="neon-backstage"] .badge.bg-success {
    background-color: #00e5ff !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

[data-theme="neon-backstage"] .badge.bg-primary {
    background-color: #be00ff !important;
    box-shadow: 0 0 8px rgba(190, 0, 255, 0.4);
}

[data-theme="neon-backstage"] .badge.bg-info {
    background-color: #ff006a !important;
    box-shadow: 0 0 8px rgba(255, 0, 106, 0.4);
}

[data-theme="neon-backstage"] .btn-primary {
    background-color: #be00ff;
    border-color: #be00ff;
}

[data-theme="neon-backstage"] .btn-primary:hover {
    background-color: #d94dff;
    border-color: #d94dff;
}

[data-theme="neon-backstage"] .btn-outline-primary {
    color: #be00ff;
    border-color: #be00ff;
}

[data-theme="neon-backstage"] .btn-outline-primary:hover {
    background-color: #be00ff;
    color: #fff;
}

[data-theme="neon-backstage"] .card {
    background-color: #14101e;
    border-color: #2a1a3a;
}

[data-theme="neon-backstage"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(190, 0, 255, 0.05);
}

/* ─── Vinyl & Gold ─────────────────────────────────── */
[data-theme="vinyl-gold"] {
    --bs-body-bg: #1a1814;
    --bs-tertiary-bg: #211f1a;
    --bs-body-color: #e8e0d0;
    --bs-border-color: #3a3428;
    --bs-secondary-bg: #1e1c17;
    --bs-emphasis-color: #fff5e0;
    --se-sidebar-start: #1a1508;
    --se-sidebar-end: #0e0c06;
    --se-sidebar-text: #c9a84c;
    --se-sidebar-active: rgba(201, 168, 76, 0.3);
    --se-sidebar-hover: rgba(201, 168, 76, 0.15);
    --se-accent: #c9a84c;
    --se-accent-2: #d4a853;
    --se-topbar-bg: #211f1a;
    --bs-link-color: #c9a84c;
    --bs-link-hover-color: #e0c06a;
    --bs-card-bg: #1e1b15;
    --bs-card-border-color: #3a3428;
}

[data-theme="vinyl-gold"] .badge.bg-success {
    background-color: #c9a84c !important;
    color: #1a1508 !important;
}

[data-theme="vinyl-gold"] .badge.bg-primary {
    background-color: #8b7335 !important;
}

[data-theme="vinyl-gold"] .badge.bg-info {
    background-color: #d4a853 !important;
    color: #1a1508 !important;
}

[data-theme="vinyl-gold"] .btn-primary {
    background-color: #c9a84c;
    border-color: #c9a84c;
    color: #1a1508;
}

[data-theme="vinyl-gold"] .btn-primary:hover {
    background-color: #e0c06a;
    border-color: #e0c06a;
    color: #1a1508;
}

[data-theme="vinyl-gold"] .card {
    background-color: #1e1b15;
    border-color: #3a3428;
}

[data-theme="vinyl-gold"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(201, 168, 76, 0.05);
}

/* ─── Punk Zine ────────────────────────────────────── */
[data-theme="punk-zine"] {
    --bs-body-bg: #f5f0e8;
    --bs-tertiary-bg: #ebe5d8;
    --bs-body-color: #1a1a1a;
    --bs-border-color: #1a1a1a;
    --bs-secondary-bg: #e8e2d5;
    --bs-emphasis-color: #000;
    --se-sidebar-start: #1a1a1a;
    --se-sidebar-end: #0a0a0a;
    --se-sidebar-text: #ff3333;
    --se-sidebar-active: rgba(255, 51, 51, 0.3);
    --se-sidebar-hover: rgba(255, 51, 51, 0.15);
    --se-accent: #ff3333;
    --se-accent-2: #ffcc00;
    --se-topbar-bg: #ebe5d8;
    --bs-link-color: #cc0000;
    --bs-link-hover-color: #ff3333;
    --bs-card-bg: #ebe5d8;
    --bs-card-border-color: #1a1a1a;
}

[data-theme="punk-zine"] .badge.bg-success {
    background-color: #ff3333 !important;
}

[data-theme="punk-zine"] .badge.bg-primary {
    background-color: #1a1a1a !important;
}

[data-theme="punk-zine"] .badge.bg-warning {
    background-color: #ffcc00 !important;
    color: #000 !important;
}

[data-theme="punk-zine"] .btn-primary {
    background-color: #ff3333;
    border-color: #ff3333;
}

[data-theme="punk-zine"] .btn-primary:hover {
    background-color: #cc0000;
    border-color: #cc0000;
}

[data-theme="punk-zine"] .card {
    background-color: #ebe5d8;
    border: 2px solid #1a1a1a;
}

[data-theme="punk-zine"] .table {
    --bs-table-bg: transparent;
}

/* ─── Studio Console ───────────────────────────────── */
[data-theme="studio-console"] {
    --bs-body-bg: #1a1c1a;
    --bs-tertiary-bg: #222422;
    --bs-body-color: #b8c4a8;
    --bs-border-color: #2e352e;
    --bs-secondary-bg: #1e201e;
    --bs-emphasis-color: #d0e0c0;
    --se-sidebar-start: #141614;
    --se-sidebar-end: #0c0e0c;
    --se-sidebar-text: #6aaa5a;
    --se-sidebar-active: rgba(106, 170, 90, 0.3);
    --se-sidebar-hover: rgba(106, 170, 90, 0.15);
    --se-accent: #6aaa5a;
    --se-accent-2: #d4a020;
    --se-topbar-bg: #222422;
    --bs-link-color: #6aaa5a;
    --bs-link-hover-color: #8acc7a;
    --bs-card-bg: #1e201e;
    --bs-card-border-color: #2e352e;
}

[data-theme="studio-console"] .badge.bg-success {
    background-color: #6aaa5a !important;
    color: #0c0e0c !important;
}

[data-theme="studio-console"] .badge.bg-primary {
    background-color: #d4a020 !important;
    color: #0c0e0c !important;
}

[data-theme="studio-console"] .badge.bg-danger {
    background-color: #cc3333 !important;
}

[data-theme="studio-console"] .btn-primary {
    background-color: #6aaa5a;
    border-color: #6aaa5a;
    color: #0c0e0c;
}

[data-theme="studio-console"] .btn-primary:hover {
    background-color: #8acc7a;
    border-color: #8acc7a;
    color: #0c0e0c;
}

[data-theme="studio-console"] .card {
    background-color: #1e201e;
    border-color: #2e352e;
}

[data-theme="studio-console"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(106, 170, 90, 0.05);
}

/* ─── Festival Poster ──────────────────────────────── */
[data-theme="festival-poster"] {
    --bs-body-bg: #fef8f0;
    --bs-tertiary-bg: #fff0e0;
    --bs-body-color: #2a2a2a;
    --bs-border-color: #e07020;
    --bs-secondary-bg: #fef0e0;
    --bs-emphasis-color: #1a1a1a;
    --se-sidebar-start: #e07020;
    --se-sidebar-end: #c0305a;
    --se-sidebar-text: #fff;
    --se-sidebar-active: rgba(255, 255, 255, 0.35);
    --se-sidebar-hover: rgba(255, 255, 255, 0.15);
    --se-accent: #e07020;
    --se-accent-2: #0a9396;
    --se-topbar-bg: #fff0e0;
    --bs-link-color: #c0305a;
    --bs-link-hover-color: #e05070;
    --bs-card-bg: #fff5eb;
    --bs-card-border-color: #e07020;
}

[data-theme="festival-poster"] .badge.bg-success {
    background-color: #0a9396 !important;
}

[data-theme="festival-poster"] .badge.bg-primary {
    background-color: #e07020 !important;
}

[data-theme="festival-poster"] .badge.bg-info {
    background-color: #c0305a !important;
}

[data-theme="festival-poster"] .btn-primary {
    background-color: #e07020;
    border-color: #e07020;
}

[data-theme="festival-poster"] .btn-primary:hover {
    background-color: #c05810;
    border-color: #c05810;
}

[data-theme="festival-poster"] .card {
    background-color: #fff5eb;
    border-color: #e07020;
}

[data-theme="festival-poster"] .table {
    --bs-table-bg: transparent;
}

/* ─── Lo-Fi Chill ──────────────────────────────────── */
[data-theme="lofi-chill"] {
    --bs-body-bg: #f8f0f5;
    --bs-tertiary-bg: #f0e5ee;
    --bs-body-color: #4a3a4a;
    --bs-border-color: #d8c8d8;
    --bs-secondary-bg: #efe4ed;
    --bs-emphasis-color: #2a1a2a;
    --se-sidebar-start: #b8a0c8;
    --se-sidebar-end: #d4a0b8;
    --se-sidebar-text: #fff;
    --se-sidebar-active: rgba(255, 255, 255, 0.4);
    --se-sidebar-hover: rgba(255, 255, 255, 0.2);
    --se-accent: #b87db8;
    --se-accent-2: #e8a0b0;
    --se-topbar-bg: #f0e5ee;
    --bs-link-color: #9060a0;
    --bs-link-hover-color: #b87db8;
    --bs-card-bg: #f3eaf0;
    --bs-card-border-color: #d8c8d8;
}

[data-theme="lofi-chill"] .badge.bg-success {
    background-color: #b87db8 !important;
}

[data-theme="lofi-chill"] .badge.bg-primary {
    background-color: #e8a0b0 !important;
    color: #2a1a2a !important;
}

[data-theme="lofi-chill"] .badge.bg-info {
    background-color: #9cc0d0 !important;
    color: #2a1a2a !important;
}

[data-theme="lofi-chill"] .btn-primary {
    background-color: #b87db8;
    border-color: #b87db8;
}

[data-theme="lofi-chill"] .btn-primary:hover {
    background-color: #9060a0;
    border-color: #9060a0;
}

[data-theme="lofi-chill"] .card {
    background-color: #f3eaf0;
    border-color: #d8c8d8;
    border-radius: 12px;
}

[data-theme="lofi-chill"] .table {
    --bs-table-bg: transparent;
}

/* ─── Synthwave Retro ──────────────────────────────── */
[data-theme="synthwave-retro"] {
    --bs-body-bg: #0c0628;
    --bs-tertiary-bg: #140a35;
    --bs-body-color: #e0d0f0;
    --bs-border-color: #2a1450;
    --bs-secondary-bg: #100830;
    --bs-emphasis-color: #f0e8ff;
    --se-sidebar-start: #1a0845;
    --se-sidebar-end: #0a0420;
    --se-sidebar-text: #ff2d95;
    --se-sidebar-active: rgba(255, 45, 149, 0.3);
    --se-sidebar-hover: rgba(255, 45, 149, 0.15);
    --se-accent: #ff2d95;
    --se-accent-2: #00d4ff;
    --se-topbar-bg: #140a35;
    --se-badge-glow: 0 0 8px rgba(255, 45, 149, 0.4);
    --bs-link-color: #ff2d95;
    --bs-link-hover-color: #ff70b8;
    --bs-card-bg: #100830;
    --bs-card-border-color: #2a1450;
}

[data-theme="synthwave-retro"] .badge.bg-success {
    background-color: #00d4ff !important;
    color: #000 !important;
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
}

[data-theme="synthwave-retro"] .badge.bg-primary {
    background-color: #ff2d95 !important;
    box-shadow: 0 0 8px rgba(255, 45, 149, 0.4);
}

[data-theme="synthwave-retro"] .badge.bg-info {
    background-color: #c850c0 !important;
    box-shadow: 0 0 8px rgba(200, 80, 192, 0.4);
}

[data-theme="synthwave-retro"] .btn-primary {
    background-color: #ff2d95;
    border-color: #ff2d95;
}

[data-theme="synthwave-retro"] .btn-primary:hover {
    background-color: #ff70b8;
    border-color: #ff70b8;
}

[data-theme="synthwave-retro"] .card {
    background-color: #100830;
    border-color: #2a1450;
}

[data-theme="synthwave-retro"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255, 45, 149, 0.05);
}

/* ─── Grunge Garage ────────────────────────────────── */
[data-theme="grunge-garage"] {
    --bs-body-bg: #1c1a16;
    --bs-tertiary-bg: #24221c;
    --bs-body-color: #c8c0a8;
    --bs-border-color: #3a3628;
    --bs-secondary-bg: #201e18;
    --bs-emphasis-color: #e0d8c0;
    --se-sidebar-start: #2a2618;
    --se-sidebar-end: #141210;
    --se-sidebar-text: #b8885a;
    --se-sidebar-active: rgba(184, 136, 90, 0.3);
    --se-sidebar-hover: rgba(184, 136, 90, 0.15);
    --se-accent: #b8885a;
    --se-accent-2: #7a8a50;
    --se-topbar-bg: #24221c;
    --bs-link-color: #b8885a;
    --bs-link-hover-color: #d4a870;
    --bs-card-bg: #201e18;
    --bs-card-border-color: #3a3628;
}

[data-theme="grunge-garage"] .badge.bg-success {
    background-color: #7a8a50 !important;
}

[data-theme="grunge-garage"] .badge.bg-primary {
    background-color: #b8885a !important;
    color: #141210 !important;
}

[data-theme="grunge-garage"] .badge.bg-info {
    background-color: #8a7a5a !important;
}

[data-theme="grunge-garage"] .btn-primary {
    background-color: #b8885a;
    border-color: #b8885a;
    color: #141210;
}

[data-theme="grunge-garage"] .btn-primary:hover {
    background-color: #d4a870;
    border-color: #d4a870;
    color: #141210;
}

[data-theme="grunge-garage"] .card {
    background-color: #201e18;
    border-color: #3a3628;
}

[data-theme="grunge-garage"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(184, 136, 90, 0.05);
}

/* ─── Hip-Hop Luxe ─────────────────────────────────── */
[data-theme="hiphop-luxe"] {
    --bs-body-bg: #0a0a0a;
    --bs-tertiary-bg: #141414;
    --bs-body-color: #e8e8e8;
    --bs-border-color: #2a2a2a;
    --bs-secondary-bg: #101010;
    --bs-emphasis-color: #ffffff;
    --se-sidebar-start: #0f0f0f;
    --se-sidebar-end: #050505;
    --se-sidebar-text: #d4af37;
    --se-sidebar-active: rgba(212, 175, 55, 0.25);
    --se-sidebar-hover: rgba(212, 175, 55, 0.12);
    --se-accent: #d4af37;
    --se-accent-2: #c0392b;
    --se-topbar-bg: #141414;
    --bs-link-color: #d4af37;
    --bs-link-hover-color: #e8c84a;
    --bs-card-bg: #111111;
    --bs-card-border-color: #2a2a2a;
}

[data-theme="hiphop-luxe"] .badge.bg-success {
    background-color: #d4af37 !important;
    color: #0a0a0a !important;
}

[data-theme="hiphop-luxe"] .badge.bg-primary {
    background-color: #fff !important;
    color: #0a0a0a !important;
}

[data-theme="hiphop-luxe"] .badge.bg-danger {
    background-color: #c0392b !important;
}

[data-theme="hiphop-luxe"] .btn-primary {
    background-color: #d4af37;
    border-color: #d4af37;
    color: #0a0a0a;
}

[data-theme="hiphop-luxe"] .btn-primary:hover {
    background-color: #e8c84a;
    border-color: #e8c84a;
    color: #0a0a0a;
}

[data-theme="hiphop-luxe"] .btn-outline-primary {
    color: #d4af37;
    border-color: #d4af37;
}

[data-theme="hiphop-luxe"] .btn-outline-primary:hover {
    background-color: #d4af37;
    color: #0a0a0a;
}

[data-theme="hiphop-luxe"] .card {
    background-color: #111111;
    border-color: #2a2a2a;
}

[data-theme="hiphop-luxe"] .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(212, 175, 55, 0.05);
}

/* ─── Britpop Mod ──────────────────────────────────── */
[data-theme="britpop-mod"] {
    --bs-body-bg: #f0f2f5;
    --bs-tertiary-bg: #e5e8ed;
    --bs-body-color: #1a1a2e;
    --bs-border-color: #1a1a2e;
    --bs-secondary-bg: #e8eaef;
    --bs-emphasis-color: #0a0a1e;
    --se-sidebar-start: #1a1a2e;
    --se-sidebar-end: #0a0a1e;
    --se-sidebar-text: #fff;
    --se-sidebar-active: rgba(204, 0, 0, 0.5);
    --se-sidebar-hover: rgba(204, 0, 0, 0.25);
    --se-accent: #cc0000;
    --se-accent-2: #003399;
    --se-topbar-bg: #e5e8ed;
    --bs-link-color: #cc0000;
    --bs-link-hover-color: #ff1a1a;
    --bs-card-bg: #eceef2;
    --bs-card-border-color: #1a1a2e;
}

[data-theme="britpop-mod"] .badge.bg-success {
    background-color: #003399 !important;
}

[data-theme="britpop-mod"] .badge.bg-primary {
    background-color: #cc0000 !important;
}

[data-theme="britpop-mod"] .badge.bg-info {
    background-color: #1a1a2e !important;
}

[data-theme="britpop-mod"] .btn-primary {
    background-color: #cc0000;
    border-color: #cc0000;
}

[data-theme="britpop-mod"] .btn-primary:hover {
    background-color: #a00000;
    border-color: #a00000;
}

[data-theme="britpop-mod"] .card {
    background-color: #eceef2;
    border: 2px solid #1a1a2e;
}

[data-theme="britpop-mod"] .table {
    --bs-table-bg: transparent;
}

/* ═══════════════════════════════════════════════════════
   Theme-aware app shell overrides
   ═══════════════════════════════════════════════════════ */

/* Form controls adapt to theme */
[data-theme] .form-control,
[data-theme] .form-select {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

[data-theme] .form-control:focus,
[data-theme] .form-select:focus {
    border-color: var(--se-accent);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--se-accent) 25%, transparent);
}

/* Tables */
[data-theme] .table {
    color: var(--bs-body-color);
}

/* Progress bars pick up accent */
[data-theme] .progress-bar {
    background-color: var(--se-accent);
}

/* Theme selector card styling */
.theme-option {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border: 2px solid var(--bs-border-color);
}

.theme-option:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.theme-option.active {
    border-color: var(--se-accent);
    box-shadow: 0 0 0 2px var(--se-accent);
}

.theme-preview {
    height: 40px;
    border-radius: 4px;
    display: flex;
    overflow: hidden;
}

.theme-preview > div {
    flex: 1;
}