/* ==========================================================================
   NexiBook Admin Palette Override
   Scope: :root when this file is loaded (admin surfaces only).
   Purpose: Keeps admin on unified gold palette matching customer + landing.
            Emerald stays for success states, amber for warnings. Reverted from earlier indigo flip (2026-04-21).
            Customer booking flow does NOT load this file, so it naturally
            keeps the gold marketing palette from colors_and_type.css.
   Load AFTER colors_and_type.css. Presence of link = surface is admin.

   Legacy compatibility: body.nb-admin + body[data-surface="admin"] still
   supported for any template that explicitly sets those classes.
   ========================================================================== */

/* NOTE: This file is loaded BEFORE some legacy stylesheets (notably
   /css/design-system/tokens.css) on admin views. CSS custom properties at
   :root respect last-wins; without `!important` on each declaration the
   legacy gold alias would override us. We use `!important` here ONLY on
   the token redefinitions — NOT on any visual properties — so the palette
   flip works regardless of sheet order. This is safe because:
   (a) this file is only served on admin surfaces,
   (b) token-level overrides are exactly what `!important` is for.  */
:root,
html:root,
body.nb-admin,
body[data-surface="admin"] {
    /* ── Primary (was gold → now indigo) ─────────────────────────────────── */
    --color-primary:        #FFD700 !important;                    /* gold */
    --color-primary-hover:  #E6C200 !important;                 /* gold-600 */
    --color-primary-rgb:    255, 215, 0 !important;
    --color-primary-text:   #000000 !important;
    --color-primary-light:  rgba(255, 215, 0, 0.12) !important;
    --color-primary-lighter: rgba(255, 215, 0, 0.06) !important;

    /* Redirect any legacy --color-gold lookups on admin so components that hard-ref
       gold still read the admin accent instead — avoids mixing palettes. */
    --color-gold:           #FFD700 !important;
    --color-gold-hover:     #E6C200 !important;
    --color-gold-dim:       #FDB931 !important;
    --color-gold-deep:      #F5AF3D !important;

    /* Gradients used for gold buttons — replace with indigo-violet gradient */
    --nb-gradient-gold:         linear-gradient(135deg, #FFD700 0%, #FDB931 50%, #F5AF3D 100%) !important;
    --nb-gradient-gold-subtle:  linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%) !important;
    --nb-gradient-gold-wash:    linear-gradient(180deg, rgba(255, 215, 0, 0.08) 0%, var(--nb-bg-surface) 100%) !important;
    --nb-shadow-gold:           0 10px 40px rgba(255, 215, 0, 0.35) !important;
    --nb-shadow-gold-sm:        0 4px 12px rgba(255, 215, 0, 0.25) !important;

    /* ── States ─────────────────────────────────────────────────────────── */
    --color-success:        var(--nb-app-success) !important;   /* #10b981 emerald */
    --color-warn:           var(--nb-app-cta) !important;       /* #f59e0b amber */
    --color-warning:        var(--nb-app-cta) !important;

    /* ── Borders/shadows in the admin palette ───────────────────────────── */
    --color-border-gold:    rgba(255, 215, 0, 0.30) !important;
    --nb-border-gold:       rgba(255, 215, 0, 0.30) !important;

    /* ── Text-on-primary is white on indigo, not black on gold ──────────── */
    --nb-text-on-gold:      #000000 !important;
    --color-text-on-gold:   #000000 !important;
}

/* Customer booking flow keeps marketing gold — this file is NOT loaded there,
   so root tokens from colors_and_type.css apply naturally. */

/* ==========================================================================
   Mobile-first admin polish
   Tighten spacing, stack sidebars, scale typography down on narrow viewports.
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        /* tighter default reading rhythm on phones */
        --nb-space-3: 1.25rem;   /* was 1.5rem (24px) */
        --nb-space-4: 1.5rem;    /* was 2rem    (32px) */
        --nb-space-6: 2rem;      /* was 3rem    (48px) */
    }

    /* Drop body padding on narrow screens so cards breathe */
.container,
.main-content,
.page-wrapper {
        padding-left: var(--nb-space-2, 1rem);
        padding-right: var(--nb-space-2, 1rem);
    }

    /* Turn tables into vertically stacked cards on phones if they opt in */
table.nb-stack-on-mobile,
table.nb-stack-on-mobile thead,
table.nb-stack-on-mobile tbody,
table.nb-stack-on-mobile tr,
table.nb-stack-on-mobile th,
table.nb-stack-on-mobile td {
        display: block;
    }
table.nb-stack-on-mobile thead { display: none; }
table.nb-stack-on-mobile tr {
        margin-bottom: var(--nb-space-2);
        padding: var(--nb-space-2);
        border: 1px solid var(--nb-border-light);
        border-radius: var(--nb-radius-md);
        background: var(--nb-bg-surface);
    }
table.nb-stack-on-mobile td {
        padding-block: 0.25rem;
        border: 0;
    }
table.nb-stack-on-mobile td::before {
        content: attr(data-label);
        display: inline-block;
        min-width: 8rem;
        font-weight: var(--nb-weight-semi);
        color: var(--nb-text-muted);
        margin-right: 0.5rem;
    }
}

/* ==========================================================================
   Accessibility & motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus rings visible on admin — 2px gold, 2px offset.
   This file only loads on admin surfaces, so global :focus-visible is scoped correctly. */
:focus-visible {
    outline: 2px solid #FFD700;
    outline-offset: 2px;
    border-radius: 4px;
}