/*
 * Fast Lane Detailing Solutions — global design tokens + base styles.
 * Source of truth: DESIGN.md at repo root. Do not deviate without updating both.
 *
 * Loaded in every template via <link rel="stylesheet" href="/static/css/fastlane.css">.
 * Tailwind utilities still work; this layer adds custom properties + base resets
 * + a handful of fastlane-prefixed helpers.
 */

/* ---- Fonts (Google Fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ---- Tokens ---- */
:root {
    /* Color */
    --fl-charcoal:   #0F1419;
    --fl-charcoal-2: #1A1F26;
    --fl-charcoal-3: #242A33;
    --fl-paper:      #F7F5F0;
    --fl-paper-2:    #EFECE4;
    --fl-cobalt:     #1E40AF;
    --fl-cobalt-hover:#1D3A9E;
    --fl-cobalt-soft:#E0E7FF;
    --fl-ink:        #0F1419;
    --fl-ink-muted:  #6B7280;
    --fl-ink-faint:  #9CA3AF;
    --fl-paper-on-dark:     #F7F5F0;
    --fl-ink-on-dark-muted: #9CA3AF;
    --fl-ok:    #15803D;
    --fl-warn:  #B45309;
    --fl-error: #B91C1C;
    --fl-info:  #1E40AF;

    /* Service-chip palette — vivid, high-contrast. Owner overruled the
     * muted "premium watchmaker" direction (2026-05-27 second pass) — calendar
     * chips need to POP, not whisper. Each service gets a saturated Tailwind-
     * 500/600 color so the day-at-a-glance read is instant. */
    --fl-svc-deluxe:     #2563EB; /* vivid blue */
    --fl-svc-essentials: #10B981; /* emerald */
    --fl-svc-superior:   #8B5CF6; /* violet */
    --fl-svc-interior:   #F59E0B; /* amber */
    --fl-svc-exterior:   #EC4899; /* hot pink */
    --fl-svc-coating:    #EAB308; /* gold — ceramic coating (premium) */
    --fl-svc-other:      #64748B; /* slate (fallback) */

    /* Type families */
    --fl-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --fl-sans:  'DM Sans', system-ui, -apple-system, sans-serif;
    --fl-mono:  'JetBrains Mono', 'SF Mono', Menlo, monospace;

    /* Radius scale */
    --fl-r-sm: 4px;
    --fl-r-md: 8px;
    --fl-r-lg: 12px;

    /* Motion */
    --fl-ease-in:  cubic-bezier(.4, 0, .6, 1);
    --fl-ease-out: cubic-bezier(.2, .8, .2, 1);
    --fl-d-micro:  100ms;
    --fl-d-short:  180ms;
    --fl-d-med:    240ms;
}

/* ---- Base ---- */
html, body {
    font-family: var(--fl-sans);
    color: var(--fl-ink);
    background-color: var(--fl-paper);
    font-feature-settings: 'ss01', 'cv11';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    font-size: 15px;
    line-height: 1.6;
}

/* Display type uses the serif. Applied only to h1 when .fl-display is explicit,
 * so we don't break dashboard h1s that are meant to be UI labels. */
.fl-display {
    font-family: var(--fl-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.05;
    color: var(--fl-ink);
}

.fl-display-xl { font-size: clamp(40px, 5vw, 56px); }
.fl-display-lg { font-size: clamp(32px, 4vw, 40px); }
.fl-display-md { font-size: 28px; }

/* Serif italic reads as an accent voice on phrases */
.fl-accent-italic {
    font-family: var(--fl-serif);
    font-style: italic;
    font-weight: 400;
}

/* Monospace for numbers / IDs / prices */
.fl-mono,
.fl-price {
    font-family: var(--fl-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Dark surface - for public-booking hero + login */
.fl-surface-dark {
    background-color: var(--fl-charcoal);
    color: var(--fl-paper-on-dark);
}
.fl-surface-dark a { color: var(--fl-paper-on-dark); }
.fl-surface-dark .fl-muted { color: var(--fl-ink-on-dark-muted); }

/* Subtle grain overlay on dark hero surfaces */
.fl-grain {
    position: relative;
    isolation: isolate;
}
.fl-grain::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image: radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
                      radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 2px;
    mix-blend-mode: overlay;
}
.fl-grain > * { position: relative; z-index: 1; }

/* Hairline divider */
.fl-hairline { border-color: rgba(15, 20, 25, 0.08); }
.fl-surface-dark .fl-hairline { border-color: rgba(247, 245, 240, 0.10); }

/* ---- Buttons ---- */
.fl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    min-height: 44px;
    border-radius: var(--fl-r-md);
    font-family: var(--fl-sans);
    font-weight: 500;
    font-size: 15px;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--fl-d-short) var(--fl-ease-out),
                border-color var(--fl-d-short) var(--fl-ease-out),
                color var(--fl-d-short) var(--fl-ease-out);
    text-decoration: none;
}
.fl-btn-primary {
    background: var(--fl-cobalt);
    color: var(--fl-paper);
}
.fl-btn-primary:hover { background: var(--fl-cobalt-hover); }
.fl-btn-secondary {
    background: transparent;
    color: var(--fl-ink);
    border-color: rgba(15, 20, 25, 0.15);
}
.fl-btn-secondary:hover { border-color: var(--fl-cobalt); color: var(--fl-cobalt); }
.fl-btn-ghost {
    background: transparent;
    color: var(--fl-ink-muted);
    min-height: 36px;
    padding: 6px 12px;
}
.fl-btn-ghost:hover { color: var(--fl-ink); text-decoration: underline; }

/* ---- Cards ---- */
.fl-card {
    background: #fff;
    border: 1px solid rgba(15, 20, 25, 0.08);
    border-radius: var(--fl-r-md);
    padding: 20px;
}
.fl-card-elevated {
    background: var(--fl-paper-2);
    border: 1px solid rgba(15, 20, 25, 0.10);
    border-radius: var(--fl-r-lg);
    padding: 24px;
}
.fl-card-dark {
    background: var(--fl-charcoal-2);
    border: 1px solid var(--fl-charcoal-3);
    color: var(--fl-paper-on-dark);
    border-radius: var(--fl-r-md);
    padding: 20px;
}

/* ---- Inputs ---- */
.fl-input,
input[type="text"].fl,
input[type="tel"].fl,
input[type="email"].fl,
input[type="number"].fl,
input[type="date"].fl,
textarea.fl,
select.fl {
    width: 100%;
    background: #fff;
    border: 1px solid rgba(15, 20, 25, 0.15);
    border-radius: var(--fl-r-md);
    padding: 11px 14px;
    font-family: var(--fl-sans);
    font-size: 15px;
    color: var(--fl-ink);
    transition: border-color var(--fl-d-short) var(--fl-ease-out),
                box-shadow var(--fl-d-short) var(--fl-ease-out);
    min-height: 44px;
}
.fl-input:focus,
input.fl:focus, textarea.fl:focus, select.fl:focus {
    outline: none;
    border-color: var(--fl-cobalt);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.18);
}

/* Global: any input inside .fl-scope gets the treatment without adding class per element */
.fl-scope input[type="text"],
.fl-scope input[type="tel"],
.fl-scope input[type="email"],
.fl-scope input[type="number"],
.fl-scope input[type="date"],
.fl-scope textarea,
.fl-scope select {
    background: #fff;
    border: 1px solid rgba(15, 20, 25, 0.15) !important;
    border-radius: var(--fl-r-md);
}
.fl-scope input:focus,
.fl-scope textarea:focus,
.fl-scope select:focus {
    outline: none !important;
    border-color: var(--fl-cobalt) !important;
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.18);
}

/* ---- Badges ---- */
.fl-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 9999px;
    line-height: 1.4;
}
.fl-badge-cobalt { background: var(--fl-cobalt-soft); color: var(--fl-cobalt); }
.fl-badge-ok     { background: #DCFCE7; color: var(--fl-ok); }
.fl-badge-warn   { background: #FEF3C7; color: var(--fl-warn); }
.fl-badge-error  { background: #FEE2E2; color: var(--fl-error); }

/* ---- HTMX swap fade ---- */
.htmx-swapping { opacity: 0; transition: opacity var(--fl-d-short) var(--fl-ease-in); }
.htmx-settling { opacity: 1; transition: opacity var(--fl-d-short) var(--fl-ease-out); }

/* ---- Small type helpers ---- */
.fl-meta { color: var(--fl-ink-muted); font-size: 13px; line-height: 1.5; }
.fl-faint { color: var(--fl-ink-faint); }

/* =========================================================================
   Mobile (<= 640px) — tighten calendar, cards, nav, modals.
   Kept in one block so future tweaks are all in one place.
   ========================================================================= */
@media (max-width: 640px) {
    body { font-size: 14px; }

    /* Cards: less padding so content doesn't get squeezed into a tall ribbon */
    .fl-card { padding: 14px; }
    .fl-card-elevated { padding: 16px; }
    .fl-card-dark { padding: 14px; }

    /* Tighten display headlines on the dashboard header bar */
    .fl-display-md { font-size: 22px; }
    .fl-display-lg { font-size: 26px; }

    /* Nav: scroll instead of wrap, smaller pills */
    nav .flex.space-x-1 > a {
        font-size: 12px !important;
        padding: 6px 10px !important;
        white-space: nowrap;
    }

    /* Page header + content padding: give a little more room */
    main > div { padding-left: 12px; padding-right: 12px; }

    /* Calendar grid — force 7 tiny columns to remain readable instead of overflowing */
    .cal-slot {
        padding: 4px 5px;
        font-size: 11px;
        line-height: 1.2;
    }
    .cal-slot div { font-size: 10px !important; }

    /* Month view day cells */
    .grid.grid-cols-7 > div {
        min-height: 70px !important;
        padding: 4px !important;
    }

    /* Week view day cells */
    .grid.grid-cols-7.gap-2 > div {
        min-height: auto !important;
        padding: 8px !important;
    }

    /* Buttons: full-width on narrow forms */
    .fl-btn { font-size: 14px; padding: 10px 14px; }

    /* Modals: remove the fixed 520px and use almost-full-screen sheet style */
    #slot-modal > div {
        width: calc(100% - 20px) !important;
        max-height: calc(100vh - 24px) !important;
        border-radius: 10px;
    }

    /* Hide the calendar legend on mobile — it's too tall */
    .fl-card .flex.items-center.gap-3.mt-5 { display: none; }

    /* Photo grid tile size */
    .fl-photo-tile { width: 72px; height: 72px; }
    .fl-photo-row label { width: 72px !important; height: 72px !important; }

    /* Kelly controls: stack cards */
    .fl-card .grid.grid-cols-2.gap-3 > div .fl-mono.text-2xl { font-size: 20px; }
}

/* Very small phones — shrink month view day cells further */
@media (max-width: 420px) {
    .grid.grid-cols-7.gap-1 > div {
        min-height: 56px !important;
        padding: 3px !important;
    }
    .cal-slot { font-size: 10px; padding: 3px 4px; }
    .cal-slot div { font-size: 9px !important; }
}

/* ---- Service chips ----
 * Solid-color chips for the calendar + slot summaries. White text on every
 * background. !important on background to win any inline-style overrides. */
.svc-deluxe     { background: var(--fl-svc-deluxe)     !important; color: #fff !important; }
.svc-essentials { background: var(--fl-svc-essentials) !important; color: #fff !important; }
.svc-superior   { background: var(--fl-svc-superior)   !important; color: #fff !important; }
.svc-interior   { background: var(--fl-svc-interior)   !important; color: #fff !important; }
.svc-exterior   { background: var(--fl-svc-exterior)   !important; color: #fff !important; }
.svc-coating    { background: var(--fl-svc-coating)    !important; color: #1F2937 !important; }
.svc-other      { background: var(--fl-svc-other)      !important; color: #fff !important; }
.svc-deluxe-solid     { background: var(--fl-svc-deluxe)     !important; color: #fff !important; }
.svc-essentials-solid { background: var(--fl-svc-essentials) !important; color: #fff !important; }
.svc-superior-solid   { background: var(--fl-svc-superior)   !important; color: #fff !important; }
.svc-interior-solid   { background: var(--fl-svc-interior)   !important; color: #fff !important; }
.svc-exterior-solid   { background: var(--fl-svc-exterior)   !important; color: #fff !important; }
.svc-other-solid      { background: var(--fl-svc-other)      !important; color: #fff !important; }