/* ============================================================================
   Forecourt 360 — shared design system
   ----------------------------------------------------------------------------
   ONE source of truth for the tokens + responsive primitives that were being
   hand-rolled (and drifting) across the six role layouts and ~270 Blade views.

   Loaded on every page via partials/pwa-head.blade.php, so it is available to
   the three layouts that don't run Vite (director / transport / reconciliation)
   as well as the ones that do. Plain CSS on purpose — no build step.

   Rules:
   - Everything here is TOKENS + OPT-IN primitives. The only thing that touches
     an existing screen unasked is the `overflow-x: clip` safety net (a
     confirmed Phase-1 fix for the login page's phantom horizontal scroll).
   - The palette is exactly the Tailwind slate/amber the app already uses —
     this file names it, it does not restyle anything.
   - Light theme only. The app has no dark mode; this does not add one.
   ========================================================================== */

:root {
    /* ---- slate scale (the app's neutral) ---------------------------------- */
    --f360-slate-950: #0f172a;
    --f360-slate-900: #1e293b;
    --f360-slate-800: #334155;
    --f360-slate-700: #475569;
    --f360-slate-600: #64748b;
    --f360-slate-500: #94a3b8;
    --f360-slate-400: #cbd5e1;
    --f360-slate-300: #e2e8f0;
    --f360-slate-200: #f1f5f9;
    --f360-slate-100: #f8fafc;

    /* ---- brand + semantic ----------------------------------------------- */
    --f360-accent:        #f59e0b;   /* amber — Manager/Admin/Transport active nav, primary CTA */
    --f360-accent-ink:    #1e293b;   /* text ON amber */
    --f360-accent-soft:   #fef3c7;
    --f360-primary:       #1e40af;   /* blue — Director/Reconciliation primary buttons, links */
    --f360-primary-soft:  #eff6ff;
    --f360-brand-orange:  #ea580c;   /* the "360" in the wordmark */

    --f360-ok:        #16a34a;  --f360-ok-ink:   #166534;  --f360-ok-soft:   #dcfce7;
    --f360-warn:      #d97706;  --f360-warn-ink: #92400e;  --f360-warn-soft: #fef3c7;
    --f360-danger:    #dc2626;  --f360-danger-ink:#991b1b; --f360-danger-soft:#fee2e2;
    --f360-info:      #1e40af;  --f360-info-ink: #1e40af;  --f360-info-soft: #eff6ff;

    /* ---- surfaces + text ---------------------------------------------------- */
    --f360-bg:         #f1f5f9;
    --f360-surface:    #ffffff;
    --f360-surface-2:  #f8fafc;
    --f360-ink:        #0f172a;
    --f360-ink-2:      #374151;
    --f360-muted:      #64748b;
    --f360-hairline:   #e2e8f0;
    --f360-hairline-2: #f1f5f9;

    /* ---- sidebar (dark chrome) ------------------------------------------- */
    --f360-sidebar-bg:      #1e293b;
    --f360-sidebar-bg-deep: #0f172a;

    /* ---- type scale (matches the current layouts) ----------------------- */
    --f360-text-xs:   11px;
    --f360-text-sm:   12px;
    --f360-text-base: 13px;
    --f360-text-md:   14px;
    --f360-text-lg:   16px;
    --f360-text-xl:   20px;
    --f360-text-2xl:  22px;
    --f360-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

    /* ---- spacing / radius / shadow ------------------------------------------ */
    --f360-sp-1: 4px;  --f360-sp-2: 8px;  --f360-sp-3: 12px;
    --f360-sp-4: 16px; --f360-sp-5: 24px; --f360-sp-6: 32px;
    --f360-radius:    8px;
    --f360-radius-lg: 12px;
    --f360-radius-sm: 6px;
    --f360-shadow:    0 1px 3px rgba(0, 0, 0, .08);
    --f360-shadow-lg: 0 8px 32px rgba(0, 0, 0, .15);

    /* ---- touch --------------------------------------------------------------- */
    --f360-touch: 44px;   /* min hit target on a coarse pointer (WCAG 2.5.5 / Android) */
}

/* ============================================================================
   Global safety net — CONFIRMED PHASE-1 FIX
   The auth shell's decorative absolutely-positioned blobs push the page ~200px
   wider than the viewport on a phone. `clip` (not `hidden`) kills the phantom
   horizontal scroll WITHOUT creating a scroll container, so `position: sticky`
   topbars/thead keep working. Falls back to `visible` on old Safari — no harm.
   ========================================================================== */
html { overflow-x: clip; }
body { overflow-x: clip; max-width: 100%; }

/* Media never blows out a narrow screen. */
img, svg, video, canvas { max-width: 100%; height: auto; }

/* Phase 3A: same guarantee for embedded frames/objects, and let long
   <pre>/<code> (SQL dumps, stack traces, tokens) scroll inside their own box
   instead of widening the page. Additive guardrails only — no screen has to
   opt in, and nothing that already fits is affected. */
iframe, embed, object { max-width: 100%; }
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================================
   OPT-IN PRIMITIVES  (nothing below applies unless a view asks for the class)
   ========================================================================== */

/* ---- responsive table: horizontal-scroll container -------------------------
   Wrap any wide <table> in <div class="f360-table-wrap"> so the TABLE scrolls,
   never the page. */
.f360-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* ---- responsive table: row -> card on phones ------------------------------
   Two ways in, same result at ≤640px — each row becomes a stacked card with
   the column label beside each value, NOTHING hidden:
     a) <x-ui.data-table>  ->  .f360-table-wrap[data-cards] > table
     b) <table class="f360-table--cards">  (manual opt-in)
   Every <td> must carry data-label="Column name"; a label-less cell (action
   row / full-width heading) uses data-label="". */
@media (max-width: 640px) {
    .f360-table-wrap[data-cards] > table,
    .f360-table-wrap[data-cards] > table > thead,
    .f360-table-wrap[data-cards] > table > tbody,
    .f360-table-wrap[data-cards] > table > tfoot,
    .f360-table-wrap[data-cards] > table > tbody > tr,
    .f360-table-wrap[data-cards] > table > tbody > tr > td,
    .f360-table--cards,
    .f360-table--cards thead,
    .f360-table--cards tbody,
    .f360-table--cards tfoot,
    .f360-table--cards tr,
    .f360-table--cards td { display: block; width: 100%; }

    .f360-table-wrap[data-cards] > table > thead,
    .f360-table--cards thead { position: absolute; left: -9999px; }

    .f360-table-wrap[data-cards] > table > tbody > tr,
    .f360-table--cards tr {
        margin: 0 0 var(--f360-sp-3);
        border: 1px solid var(--f360-hairline);
        border-radius: var(--f360-radius);
        background: var(--f360-surface);
        padding: var(--f360-sp-2) var(--f360-sp-3);
        box-shadow: var(--f360-shadow);
    }

    .f360-table-wrap[data-cards] > table > tbody > tr > td,
    .f360-table--cards td {
        border: 0;
        border-bottom: 1px solid var(--f360-hairline-2);
        padding: var(--f360-sp-2) 0;
        display: flex;
        justify-content: space-between;
        gap: var(--f360-sp-3);
        text-align: right;
        white-space: normal;
    }
    .f360-table-wrap[data-cards] > table > tbody > tr > td:last-child,
    .f360-table--cards td:last-child { border-bottom: 0; }

    .f360-table-wrap[data-cards] > table > tbody > tr > td::before,
    .f360-table--cards td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: var(--f360-text-xs);
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--f360-muted);
        text-align: left;
        flex: 0 0 42%;
    }
    .f360-table-wrap[data-cards] > table > tbody > tr > td[data-label=""],
    .f360-table--cards td[data-label=""] { justify-content: flex-end; }
    .f360-table-wrap[data-cards] > table > tbody > tr > td[data-label=""]::before,
    .f360-table--cards td[data-label=""]::before { content: none; }
}

/* ---- modal -> bottom sheet on phones -------------------------------------
   <div class="f360-sheet-backdrop"><div class="f360-sheet"> … </div></div>
   Desktop: centered dialog. ≤640px: slides up from the bottom edge, full width,
   rounded top corners, own scroll. */
.f360-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .7);
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--f360-sp-4);
}
.f360-sheet {
    background: var(--f360-surface);
    border-radius: var(--f360-radius-lg);
    box-shadow: var(--f360-shadow-lg);
    width: 480px;
    max-width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 640px) {
    .f360-sheet-backdrop { align-items: flex-end; padding: 0; }
    .f360-sheet {
        width: 100%;
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--f360-radius-lg) var(--f360-radius-lg) 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
}

/* ---- form grid --------------------------------------------------------------
   <div class="f360-form-grid f360-form-grid--2"> … </div>
   Collapses to a single column on phones so fields are never cramped. */
.f360-form-grid { display: grid; gap: var(--f360-sp-3); }
.f360-form-grid--2 { grid-template-columns: 1fr 1fr; }
.f360-form-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.f360-form-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
    .f360-form-grid--3, .f360-form-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .f360-form-grid--2, .f360-form-grid--3, .f360-form-grid--4 { grid-template-columns: 1fr; }
}

/* ---- stat card grid ------------------------------------------------------ */
.f360-stat-grid {
    display: grid;
    gap: var(--f360-sp-3);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
@media (max-width: 480px) {
    .f360-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- page header (title + actions) ------------------------------------------
   <div class="f360-page-header"><h1>…</h1><div class="f360-page-header__actions">…</div></div> */
.f360-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--f360-sp-3);
    flex-wrap: wrap;
    margin-bottom: var(--f360-sp-4);
}
.f360-page-header__actions { display: flex; gap: var(--f360-sp-2); flex-wrap: wrap; }
@media (max-width: 640px) {
    .f360-page-header { align-items: stretch; }
    .f360-page-header__actions { width: 100%; }
    .f360-page-header__actions > * { flex: 1; text-align: center; }
}

/* ---- filter bar -------------------------------------------------------------
   A horizontal row of filter controls that wraps (not scrolls) on small
   screens so nothing is lost off-edge. */
.f360-filter-bar {
    display: flex;
    gap: var(--f360-sp-2);
    flex-wrap: wrap;
    align-items: flex-end;
}
.f360-filter-bar > * { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) {
    .f360-filter-bar > * { flex-basis: 100%; }
}

/* ---- coarse-pointer sizing ------------------------------------------------
   On a touch device, give the primary interactive controls a real 44px target.
   Scoped to `pointer: coarse` so the desktop UI is untouched. Opt-out with
   .f360-touch-exempt for genuinely dense controls (e.g. a data-grid cell). */
@media (pointer: coarse) {
    .f360-touch-scope button:not(.f360-touch-exempt),
    .f360-touch-scope [role="button"]:not(.f360-touch-exempt),
    .f360-touch-scope input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not(.f360-touch-exempt),
    .f360-touch-scope select:not(.f360-touch-exempt),
    .f360-touch-scope textarea:not(.f360-touch-exempt),
    .f360-touch-scope a.f360-btn:not(.f360-touch-exempt) {
        min-height: var(--f360-touch);
    }
    .f360-touch-scope input[type="checkbox"]:not(.f360-touch-exempt),
    .f360-touch-scope input[type="radio"]:not(.f360-touch-exempt) {
        min-width: 20px;
        min-height: 20px;
    }
}

/* ---- button primitive (optional — existing .btn-primary etc. still work) --- */
.f360-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--f360-sp-2);
    padding: var(--f360-sp-2) var(--f360-sp-4);
    border: 1px solid transparent;
    border-radius: var(--f360-radius-sm);
    font-size: var(--f360-text-base);
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}
.f360-btn--primary { background: var(--f360-accent); color: var(--f360-accent-ink); }
.f360-btn--secondary { background: var(--f360-slate-200); color: var(--f360-ink-2); }
.f360-btn--blue { background: var(--f360-primary); color: #fff; }
.f360-btn--danger { background: var(--f360-danger); color: #fff; }
.f360-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ---- status badge primitive ------------------------------------------------ */
.f360-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--f360-text-xs);
    font-weight: 700;
    white-space: nowrap;
}
.f360-badge--ok     { background: var(--f360-ok-soft);     color: var(--f360-ok-ink); }
.f360-badge--warn   { background: var(--f360-warn-soft);   color: var(--f360-warn-ink); }
.f360-badge--danger { background: var(--f360-danger-soft); color: var(--f360-danger-ink); }
.f360-badge--info   { background: var(--f360-info-soft);   color: var(--f360-info-ink); }
.f360-badge--muted  { background: var(--f360-slate-200);   color: var(--f360-muted); }

/* ---- utilities ---------------------------------------------------------------- */
.f360-hide-mobile { }
@media (max-width: 640px) { .f360-hide-mobile { display: none !important; } }
.f360-only-mobile { display: none !important; }
@media (max-width: 640px) { .f360-only-mobile { display: revert !important; } }

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}