/*
 * Admin appearance themes (ADDITIVE theme layer).
 *
 * How this works — and why "Classic" is always safe:
 *   The base look lives in admin.css with hardcoded surfaces (dark header, white
 *   cards, greige page). Every rule in THIS file is scoped to
 *   `html[data-admin-theme="..."]`. When NO data-admin-theme attribute is present,
 *   nothing here applies and the page renders exactly as it always has — that IS
 *   the "Classic" theme. So Classic is preserved by construction: it is the base,
 *   never overridden, and can never be deleted by a theme.
 *
 * Operational colors (available / occupied / warning / danger / chart series and the
 * --basic-* palette) intentionally stay fixed in admin.css so a theme never changes
 * the MEANING of a status color — only the surrounding chrome (nav, cards, palette).
 *
 * No background image is touched anywhere in this file (David's hero/background
 * photography is untouched; the admin uses none, and themes only reskin chrome).
 *
 * Original 5-theme token structure by Codex (commit 7c4b1e8); reworked by Claude to
 * (a) make Classic the default + a real selectable theme, (b) enrich "ocean" into the
 * Ocean Resort Modern identity, and (c) replace the unlabeled dots with a labeled,
 * accessible theme picker.
 */

/* ─── Ocean Resort Modern — the flagship resort palette ───────────────────────
   Ocean blue / turquoise / white / seafoam, with coral + sun-yellow accents.
   No brown / wood / beige. */
html[data-admin-theme="ocean"] {
    --ink: #062e3d;
    --ink-soft: #41697a;
    --line: #c3e4ec;
    --bg: #f0fbfd;
    --bg-soft: #ddf3f8;
    --accent: #0891b2;
    --accent-soft: #d3f2f9;
    --admin-header: #063b52;
    --admin-header-panel: #0a4c68;
    --admin-surface: #ffffff;
    --admin-surface-hover: #e9f8fc;
    --admin-hero-start: #ffffff;
    --admin-hero-end: #d6f2f8;
    --admin-shadow-color: rgba(6, 46, 61, .13);
    /* Resort accent hues used only for tasteful chrome pops below. */
    --resort-coral: #ff6b5e;
    --resort-sun: #f6c445;
    --resort-seafoam: #5fd0c4;
}

html[data-admin-theme="seafoam"] {
    --ink: #073b3a;
    --ink-soft: #456967;
    --line: #bfddd7;
    --bg: #effaf7;
    --bg-soft: #dff3ee;
    --accent: #0f766e;
    --accent-soft: #ccfbf1;
    --admin-header: #073b3a;
    --admin-header-panel: #0b514e;
    --admin-surface: #ffffff;
    --admin-surface-hover: #e5f7f2;
    --admin-hero-start: #ffffff;
    --admin-hero-end: #d9f4ed;
    --admin-shadow-color: rgba(7, 59, 58, .12);
}

html[data-admin-theme="sunset"] {
    --ink: #3f1d18;
    --ink-soft: #73554f;
    --line: #f0c9bd;
    --bg: #fff7f2;
    --bg-soft: #ffeadf;
    --accent: #e14b2f;
    --accent-soft: #ffe0d5;
    --admin-header: #4a2130;
    --admin-header-panel: #672d3f;
    --admin-surface: #fffdfc;
    --admin-surface-hover: #fff0e9;
    --admin-hero-start: #fffdfc;
    --admin-hero-end: #ffe5d8;
    --admin-shadow-color: rgba(83, 37, 35, .13);
}

html[data-admin-theme="night-ocean"] {
    color-scheme: dark;
    --ink: #eefaff;
    --ink-soft: #a9c7d6;
    --line: #31576a;
    --bg: #071b28;
    --bg-soft: #0d2b3b;
    --accent: #38bdf8;
    --accent-soft: #103f57;
    --admin-header: #03121c;
    --admin-header-panel: #0b2b3d;
    --admin-surface: #0d2736;
    --admin-surface-hover: #14384a;
    --admin-hero-start: #0e3042;
    --admin-hero-end: #092333;
    --admin-shadow-color: rgba(0, 0, 0, .38);
}

html[data-admin-theme="xls-professional"] {
    --ink: #12213a;
    --ink-soft: #58677c;
    --line: #d3dce8;
    --bg: #f3f6fa;
    --bg-soft: #e7edf5;
    --accent: #2563eb;
    --accent-soft: #dbeafe;
    --admin-header: #111f38;
    --admin-header-panel: #1a2f53;
    --admin-surface: #ffffff;
    --admin-surface-hover: #edf4ff;
    --admin-hero-start: #ffffff;
    --admin-hero-end: #e8f0fb;
    --admin-shadow-color: rgba(18, 33, 58, .12);
}

/* Self-hosted Jost, loaded here (not via Google Fonts) so it is fetched ONLY
   while an admin page has data-admin-theme="barefoot" set (these rules are
   unconditional, but no admin selector requests the "Jost" family unless that
   attribute is present, so unrelated admin themes never trigger a download).
   See public/assets/fonts/barefoot/Jost-OFL.txt for the SIL OFL 1.1 license.
   Six real weights are declared -- 300 (the public theme's heading/display
   weight, reused here for the same file) plus 400/500/600/700/800, which
   admin.css and this file actually request for body text, table headers,
   badges, buttons, tabs, and stat totals. Per Codex
   C-2026-08-01-1931-V5-BAREFOOT-FINAL-CORRECTIONS P2: without these, the
   browser would synthesize (fake) bold from the 300 face for every one of
   those controls -- the exact faux-bold problem already fixed for public
   headings, just spread across the entire admin UI instead of one selector.
   Any request for an intermediate weight (e.g. the 650/750 values used below)
   matches to the nearest real face here without synthesis -- the CSS font
   matching algorithm only fakes a weight when NO nearby face exists, and one
   always does now. */
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("../../assets/fonts/barefoot/Jost-300.woff2") format("woff2");
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../assets/fonts/barefoot/Jost-400.woff2") format("woff2");
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../../assets/fonts/barefoot/Jost-500.woff2") format("woff2");
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../../assets/fonts/barefoot/Jost-600.woff2") format("woff2");
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../assets/fonts/barefoot/Jost-700.woff2") format("woff2");
}
@font-face {
    font-family: "Jost";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../../assets/fonts/barefoot/Jost-800.woff2") format("woff2");
}

/* ─── Barefoot — same design DNA as the public "barefoot" theme (stone / wood /
   sea / warm white / soft ink), reskinned for compact, dense, scan-first admin
   use rather than the public site's spacious editorial layout. Phase 1 chrome
   only: nav/cards/palette, same as every other admin theme here -- density,
   layout, tables and operational status colors are UNCHANGED (defined in
   admin.css, never in this file, for any theme). Per Codex
   C-2026-08-01-1831-V5-BAREFOOT-PHASE1-CORRECTIONS P1-1, the shared design DNA
   also means the admin control/body face becomes Jost here -- not the system
   font stack every other admin theme uses. */
html[data-admin-theme="barefoot"] {
    --ink: #26343b;
    --ink-soft: #637078;
    --line: #e3dcd2;
    --bg: #fffefa;
    --bg-soft: #f5f2eb;
    --accent: #4a6b82;
    --accent-soft: #e4ecf0;
    --admin-header: #26343b;
    --admin-header-panel: #35454d;
    --admin-surface: #fffefa;
    --admin-surface-hover: #f5f2eb;
    --admin-hero-start: #fffefa;
    --admin-hero-end: #f5f2eb;
    --admin-shadow-color: rgba(38, 52, 59, .10);
    --font: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Shared surface re-pointing (fires for ANY active theme, never for Classic) ─ */
html[data-admin-theme] body {
    background: var(--bg);
    color: var(--ink);
}

html[data-admin-theme] .admin-header {
    background: var(--admin-header);
}

html[data-admin-theme] .admin-nav-menu-panel {
    background: var(--admin-header-panel);
    border-color: color-mix(in srgb, var(--admin-header-panel) 72%, white);
}

html[data-admin-theme] .admin-nav-menu-panel a:hover {
    background: color-mix(in srgb, var(--admin-header-panel) 78%, white);
}

html[data-admin-theme] :where(
    .card,
    .stat,
    .dashboard-stat,
    .dashboard-finance-card,
    .dashboard-action-grid > a,
    .dashboard-card,
    .availability-summary,
    .inventory-status-card
) {
    background: var(--admin-surface);
    border-color: var(--line);
    box-shadow: 0 10px 28px var(--admin-shadow-color);
}

html[data-admin-theme] .dashboard-hero {
    background: linear-gradient(125deg, var(--admin-hero-start), var(--admin-hero-end));
    border-color: var(--line);
    box-shadow: 0 14px 34px var(--admin-shadow-color);
}

html[data-admin-theme] :where(
    .btn.secondary,
    .lead-term-priority-bar a,
    .lead-full-message,
    .availability-edit-form,
    .admin-grid .col-pin-left,
    .admin-grid .col-pin-right
) {
    background: var(--admin-surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-admin-theme] :where(
    tr:hover td,
    .admin-grid tbody tr:hover .col-pin-left,
    .admin-grid tbody tr:hover .col-pin-right,
    .dashboard-activity-table tbody tr:hover
) {
    background: var(--admin-surface-hover);
}

html[data-admin-theme] :where(input, select, textarea) {
    background: var(--admin-surface);
    color: var(--ink);
    border-color: var(--line);
}

html[data-admin-theme] .dashboard-action-grid > a:hover,
html[data-admin-theme] .dashboard-action-grid > a:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent);
}

/* ─── Ocean Resort Modern chrome pops (only on the ocean theme) ──────────────── */
html[data-admin-theme="ocean"] .admin-header {
    background: linear-gradient(120deg, #063b52 0%, #0a556f 55%, #0e7f8e 100%);
}
/* Coral active-nav underline — the resort accent. */
html[data-admin-theme="ocean"] .admin-header nav a.active::after {
    background: var(--resort-coral);
    height: 3px;
}
html[data-admin-theme="ocean"] .admin-nav-menu > summary.active {
    text-decoration-color: var(--resort-coral);
}
/* Sun-yellow focus ring for keyboard users on the ocean header. */
html[data-admin-theme="ocean"] .admin-header a:focus-visible,
html[data-admin-theme="ocean"] .admin-header summary:focus-visible {
    outline: 3px solid var(--resort-sun);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ═══ Theme picker (labeled + accessible; replaces the unlabeled dots) ═════════ */
.admin-header .who {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-theme-picker {
    position: relative;
    font-size: 13px;
}
.admin-theme-picker > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    user-select: none;
    padding: 5px 10px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 8px;
    background: rgba(255, 255, 255, .10);
    color: #fff;
    white-space: nowrap;
}
.admin-theme-picker > summary::-webkit-details-marker { display: none; }
.admin-theme-picker > summary::after { content: ' \25BE'; font-size: 10px; opacity: .8; }
.admin-theme-picker > summary:hover { background: rgba(255, 255, 255, .18); }
.admin-theme-picker > summary:focus-visible {
    outline: 3px solid #facc15;
    outline-offset: 2px;
}
.admin-theme-picker .current-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, .7);
    background: var(--accent, #1c6e5c);
}

.admin-theme-panel {
    position: absolute;
    z-index: 40;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    padding: 6px;
    border: 1px solid #d7dde2;
    border-radius: 10px;
    background: #fff;
    color: #16181b;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
}
.admin-theme-panel .panel-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7178;
    padding: 6px 8px 4px;
}
.admin-theme-choice {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 9px;
    border: 0;
    border-radius: 7px;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.admin-theme-choice:hover { background: #f0f3f5; }
.admin-theme-choice:focus-visible {
    outline: 2px solid #0891b2;
    outline-offset: -2px;
}
.admin-theme-choice .swatch {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .18);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55);
}
.admin-theme-choice .name { flex: 1; }
.admin-theme-choice .check {
    color: #0891b2;
    font-weight: 700;
    opacity: 0;
}
.admin-theme-choice[aria-pressed="true"] { background: #eaf7fb; font-weight: 600; }
.admin-theme-choice[aria-pressed="true"] .check { opacity: 1; }

/* Swatches (Classic first — the preserved default). */
.swatch.theme-classic          { background: #1c6e5c; }
.swatch.theme-ocean            { background: linear-gradient(135deg, #0891b2, #5fd0c4); }
.swatch.theme-seafoam          { background: #0f766e; }
.swatch.theme-sunset           { background: #e14b2f; }
.swatch.theme-night-ocean      { background: #071b28; }
.swatch.theme-xls-professional { background: #2563eb; }
.swatch.theme-barefoot         { background: #4a6b82; }

@media (max-width: 960px) {
    .admin-header .who {
        width: 100%;
        justify-content: space-between;
    }
    .admin-theme-panel { right: auto; left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-theme-picker > summary,
    .admin-theme-choice { transition: none; }
}