/* ============================================================
   MIRAKILOUZ BEATZ — THEME SYSTEM
   Dark is the default/native look. [data-theme="light"] on <html>
   flips the variables and overrides the Tailwind utility classes
   used throughout the site (bg-black, text-white, bg-gray-900, etc).
   ============================================================ */

:root,
[data-theme="dark"] {
    --bg: #0b0b0b;
    --surface: #151515;
    --surface-soft: #1f1f1f;
    --surface-strong: #262626;
    --text-primary: #ffffff;
    --text-secondary: #a5a5a5;
    --text-tertiary: #6b6b6b;
    /* Was #2a2a2a — nearly the same darkness as --bg (#0b0b0b), giving a
       ~1.3:1 contrast ratio. Used 795 times across 73 files for genuine
       body copy (helper text, labels, secondary prices), not decorative
       filler, so it needs to actually be legible, not just "present". */
    --text-muted: #8a8a8a;
    --border: rgba(255, 255, 255, 0.08);
    --accent: #FF6A00;
    --accent-dark: #e05a00;
    --accent-contrast: #000000;
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.15);
    --success-border: rgba(74, 222, 128, 0.3);
    --danger: #f87171;
    --danger-bg: rgba(248, 113, 113, 0.15);
    --danger-border: rgba(248, 113, 113, 0.3);
    /* Status/badge colors used across admin (featured, format tags, stems,
       stat highlights) were hardcoded per-component to Tailwind's *-400
       swatches — fine against a near-black surface, but ~1.7-2.5:1 on a
       light one. Same fix pattern as --text-muted, generalized: one
       real value per theme instead of a value borrowed from the other. */
    --warning: #fbbf24;
    --warning-bg: rgba(251, 191, 36, 0.12);
    --warning-border: rgba(251, 191, 36, 0.28);
    --info: #60a5fa;
    --info-bg: rgba(96, 165, 250, 0.12);
    --info-border: rgba(96, 165, 250, 0.28);
    --violet: #c084fc;
    --violet-bg: rgba(192, 132, 252, 0.12);
    --violet-border: rgba(192, 132, 252, 0.28);
    --input-bg: #141414;
    --overlay: rgba(0, 0, 0, 0.75);
    --surface-elevated: rgba(21, 21, 21, 0.6);
    --hero-overlay: linear-gradient(135deg, rgba(255, 106, 0, 0.15) 0%, rgba(0, 0, 0, 0.7) 50%, rgba(0, 0, 0, 0.9) 100%);
}

[data-theme="light"] {
    --bg: #ffffff;
    --surface: #f7f7f7;
    --surface-soft: #eeeeee;
    --surface-strong: #e2e2e2;
    --text-primary: #111111;
    --text-secondary: #555555;
    --text-tertiary: #767676;
    --text-muted: #949494;
    --border: rgba(0, 0, 0, 0.10);
    --accent: #FF6A00;
    --accent-dark: #e05a00;
    --accent-contrast: #ffffff;
    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.12);
    --success-border: rgba(22, 163, 74, 0.30);
    --danger: #dc2626;
    --danger-bg: rgba(220, 38, 38, 0.10);
    --danger-border: rgba(220, 38, 38, 0.30);
    --warning: #b45309;
    --warning-bg: rgba(180, 83, 9, 0.10);
    --warning-border: rgba(180, 83, 9, 0.28);
    --info: #1d4ed8;
    --info-bg: rgba(29, 78, 216, 0.10);
    --info-border: rgba(29, 78, 216, 0.28);
    --violet: #7e22ce;
    --violet-bg: rgba(126, 34, 206, 0.10);
    --violet-border: rgba(126, 34, 206, 0.28);
    --input-bg: #ffffff;
    --overlay: rgba(0, 0, 0, 0.45);
    --surface-elevated: rgba(255, 255, 255, 0.7);
    /* Minimal — just enough to keep the centered text/buttons legible near
       the bottom of the photo. The image itself must stay crisp and rich,
       never washed out with a flat white/light tint. */
    --hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0.5) 100%);
}

/* ============================================================
   SHARED RESPONSIVE CONTAINER SYSTEM
   Every page previously hardcoded its own fixed max-width
   (640–1280px) with nothing beyond that for large screens, so on
   big MacBooks/monitors the content stopped growing while the
   surrounding whitespace kept expanding. These four tiers are used
   site-wide instead of one-off values, and widen in two steps for
   large/ultrawide viewports. Base values match each page's original
   width (within a few px) so normal-laptop appearance is unchanged.
   - --container-wide: grids/stores/hero pages (beat store, beat
     detail, placements, home sections) — also used by the nav,
     footer and mini-player so they stay aligned with page content.
   - --container-standard: two-column layouts with a fixed-width
     side panel (checkout, cart).
   - --container-narrow: single-column list/body content (booking
     package sections, dashboard licenses, blog).
   - --container-tight: focused single-column pages (checkout
     success / order confirmation).
   - --container-detail: admin single-record detail views (order
     detail, booking detail) — a few substantial cards rather than
     a list or a form. Narrower than --container-narrow's list shape
     since a single-record view has less to show per row.
   ============================================================ */
:root {
    --container-wide: 1280px;
    --container-standard: 1120px;
    --container-narrow: 1060px;
    --container-tight: 640px;
    --container-detail: 900px;
}

@media (min-width: 1600px) {
    :root {
        --container-wide: 1440px;
        --container-standard: 1240px;
        --container-narrow: 1160px;
        --container-tight: 720px;
        --container-detail: 1000px;
    }
}

@media (min-width: 2200px) {
    :root {
        --container-wide: 1680px;
        --container-standard: 1360px;
        --container-narrow: 1280px;
        --container-tight: 780px;
        --container-detail: 1120px;
    }
}

html {
    background: var(--bg);
}

[data-theme="dark"] .site-logo-img {
    filter: brightness(0) invert(1);
}

body {
    transition: background-color .2s ease, color .2s ease;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2) !important;
}

[data-theme="light"] ::selection {
    background: rgba(255, 106, 0, 0.25);
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
    color: #8a8a8a !important;
    opacity: 1;
}

/* ── TAILWIND UTILITY OVERRIDES (LIGHT MODE ONLY) ──────────────── */
[data-theme="light"] .bg-black,
[data-theme="light"] .bg-gray-950,
[data-theme="light"] .bg-neutral-950 {
    background-color: var(--bg) !important;
}

[data-theme="light"] .bg-gray-900,
[data-theme="light"] .bg-gray-800,
[data-theme="light"] .bg-neutral-900,
[data-theme="light"] .bg-neutral-800 {
    background-color: var(--surface) !important;
}

[data-theme="light"] .bg-gray-700,
[data-theme="light"] .bg-neutral-700 {
    background-color: var(--surface-soft) !important;
}

[data-theme="light"] .text-white {
    color: var(--text-primary) !important;
}

[data-theme="light"] .text-gray-200,
[data-theme="light"] .text-gray-300,
[data-theme="light"] .text-gray-400,
[data-theme="light"] .text-gray-500,
[data-theme="light"] .text-neutral-300,
[data-theme="light"] .text-neutral-400 {
    color: var(--text-secondary) !important;
}

[data-theme="light"] .text-gray-600,
[data-theme="light"] .text-gray-700,
[data-theme="light"] .text-gray-800 {
    color: var(--text-tertiary) !important;
}

/* Dark mode has no equivalent override above because dark is meant to be
   the "native" look these Tailwind classes already suit — true for
   text-gray-200..500 (light/medium grays, still legible on a near-black
   page), but Tailwind's 600/700/800 swatches are themselves dark grays
   (#4b5563/#374151/#1f2937), so on --bg they land at ~2.5:1, ~1.8:1 and
   ~1.3:1 contrast respectively — the identical failure just fixed for
   --text-muted, just reached through raw utility classes instead of the
   variable. */
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700,
[data-theme="dark"] .text-gray-800 {
    color: var(--text-tertiary) !important;
}

[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-800,
[data-theme="light"] .border-gray-900,
[data-theme="light"] .border-neutral-800,
[data-theme="light"] .border-neutral-900 {
    border-color: var(--border) !important;
}

[data-theme="light"] .divide-gray-800>*+*,
[data-theme="light"] .divide-gray-900>*+* {
    border-color: var(--border) !important;
}

/* Success / error badges & alerts (bg-green-900/50, text-green-300, etc.) */
[data-theme="light"] [class*="bg-green-9"],
[data-theme="light"] [class*="bg-green-8"] {
    background-color: var(--success-bg) !important;
}

[data-theme="light"] [class*="text-green-3"],
[data-theme="light"] [class*="text-green-4"] {
    color: var(--success) !important;
}

[data-theme="light"] [class*="border-green"] {
    border-color: var(--success-border) !important;
}

[data-theme="light"] [class*="bg-red-9"],
[data-theme="light"] [class*="bg-red-8"] {
    background-color: var(--danger-bg) !important;
}

[data-theme="light"] [class*="text-red-3"],
[data-theme="light"] [class*="text-red-4"] {
    color: var(--danger) !important;
}

[data-theme="light"] [class*="border-red"] {
    border-color: var(--danger-border) !important;
}

/* Tailwind arbitrary-value classes (bg-[#0a0a0a], border-[#1a1a1a], etc.) —
   these are literal, distinct classes that neither a hex-value sweep nor the
   utility overrides above can reach; enumerated from what's actually used
   across the admin forms/tables that rely on them. */
[data-theme="light"] .bg-\[\#0a0a0a\],
[data-theme="light"] .bg-\[\#0d0d0d\],
[data-theme="light"] .bg-\[\#0f0f0f\] {
    background-color: var(--bg) !important;
}

[data-theme="light"] .bg-\[\#111\] {
    background-color: var(--surface) !important;
}

[data-theme="light"] .bg-\[\#1a1a1a\],
[data-theme="light"] .bg-\[\#222\] {
    background-color: var(--surface-soft) !important;
}

[data-theme="light"] .bg-\[\#333\] {
    background-color: var(--surface-strong) !important;
}

[data-theme="light"] .hover\:bg-\[\#111\]:hover,
[data-theme="light"] .hover\:bg-\[\#1a1a1a\]:hover {
    background-color: var(--surface-soft) !important;
}

[data-theme="light"] .border-\[\#111\],
[data-theme="light"] .border-\[\#141414\],
[data-theme="light"] .border-\[\#1a1a1a\],
[data-theme="light"] .border-\[\#1e1e1e\],
[data-theme="light"] .border-\[\#222\],
[data-theme="light"] .border-\[\#252525\],
[data-theme="light"] .border-\[\#2a2a2a\],
[data-theme="light"] .border-\[\#333\] {
    border-color: var(--border) !important;
}

[data-theme="light"] .hover\:border-\[\#252525\]:hover,
[data-theme="light"] .hover\:border-\[\#2a2a2a\]:hover {
    border-color: var(--border) !important;
}

[data-theme="light"] .text-\[\#1e1e1e\] {
    color: var(--text-muted) !important;
}

/* ── THEME TOGGLE COMPONENT ─────────────────────────────────────── */
.theme-seg {
    display: inline-flex;
    align-items: center;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.theme-seg-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12.5px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background .25s cubic-bezier(.4, 0, .2, 1), color .25s ease;
}

.theme-seg-btn:hover {
    color: var(--text-primary);
}

.theme-seg-btn[data-active="true"] {
    background: var(--accent);
    color: var(--accent-contrast);
}

.theme-seg-btn[data-active="true"]:hover {
    color: var(--accent-contrast);
}

.theme-seg-compact .theme-seg-btn {
    padding: 7px 9px;
    font-size: 13px;
}

@media (max-width: 767px) {
    .theme-seg-btn {
        padding: 9px 14px;
    }

    .theme-seg-compact .theme-seg-btn {
        padding: 9px 11px;
    }
}