/* ==========================================================================
   app.css — the shared stylesheet for AWB Logistics.
   Introduced by the UX programme (U3 step 1). See docs/ux/UX_AUDIT.md and
   docs/ux/UX_PLAN.md.

   WHY THIS FILE EXISTS
   Before it there was no stylesheet at all: every rule lived in a per-layout
   <style> block or in one of ~563 inline style="" attributes, and five of the
   eight admin sections (customers, dashboard, statuses, users, logs) had no CSS
   of their own whatsoever. That is why the app carried 18 distinct font sizes,
   nine of them inside a 4px band, and not one line-height.

   HOW IT IS MEANT TO BE USED
   Additive, not a rewrite. The inline style attributes still exist and still
   win on specificity — they were deliberately NOT touched. This file gives the
   next change somewhere to go, and gives the five CSS-less sections a scale to
   inherit. Loaded from all three layouts before their own <style> blocks, so a
   layout or a view can still override anything here.
   ========================================================================== */

:root {
    /* ---- brand + surface tokens (canonical home; the layouts used to each
       keep their own copy, which is how they drifted apart) ---- */
    --primary: #E22F2F;
    --primary-hover: #c41f1f;
    --primary-light: #fff1f2;

    --bg-main: #f8fafc;
    --bg: #f8fafc;              /* guest.php's older name for --bg-main */
    --sidebar-bg: #ffffff;
    --sidebar-text: #475569;
    --sidebar-active: #fff1f2;
    --sidebar-active-text: #E22F2F;

    --card-bg: #ffffff;
    --border-color: #e2e8f0;

    --text-main: #0f172a;
    --text-muted: #64748b;

    --pastel-blue: #e0f2fe;
    --pastel-blue-text: #0369a1;
    --pastel-yellow: #fef3c7;
    --pastel-yellow-text: #a16207;
    --pastel-rose: #ffe4e6;
    --pastel-rose-text: #c41f1f;

    --sidebar-width: 260px;
    --sidebar-collapsed-width: 70px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* ---- typefaces ----
       One fallback stack for all three layouts. Only the public tracking page
       used to degrade to a real system font; the admin app and the login screen
       fell back to generic sans-serif, so if Google Fonts is slow or blocked
       the customer-facing page looked deliberate and the staff-facing one did
       not (UX-T4). */
    --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, sans-serif;
    /* Record ids used bare `monospace` while log lines used 'Courier New'
       (UX-T5) — same intent, two faces on the same screen. */
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
                 'Courier New', monospace;

    /* ---- type scale (UX-T1) ----
       Eight steps replacing eighteen sizes. The old set had 0.75 / 0.8 / 0.85 /
       0.875 / 0.9 / 0.95rem all doing the single job of "smaller than body".
       Adopt these in new work; existing declarations migrate as views are
       touched. Base stays 1rem so nothing inherited resizes on introduction. */
    --fs-xs:   0.75rem;    /* 12px — badges, meta, micro-copy   (was 11.52, 12) */
    --fs-sm:   0.8125rem;  /* 13px — secondary text, log lines  (was 12.8, 13, 13.33) */
    --fs-base: 0.875rem;   /* 14px — body copy, tables, buttons (was 13.6, 14, 14.4) */
    --fs-md:   1rem;       /* 16px — form controls, lead text   (was 15.2, 16) */
    --fs-lg:   1.25rem;    /* 20px — card titles, h3            (was 17.6, 18.72, 20) */
    --fs-xl:   1.5rem;     /* 24px — section headings, h2       (was 24, 25.6) */
    --fs-2xl:  1.75rem;    /* 28px — page titles, h1            (was 28, 32) */
    --fs-3xl:  2.5rem;     /* 40px — KPI numerals */

    /* ---- line-height (UX-T2) ----
       Every one of the 638 text nodes in the admin app computed to `normal`
       before this. The public tracking page was the only surface that set a
       real value — and it is the only surface that does not feel cramped. */
    --lh-tight:   1.25;    /* headings, KPI numerals */
    --lh-base:    1.5;     /* body */
    --lh-relaxed: 1.6;     /* log lines */
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
    font-family: var(--font-sans);
    line-height: var(--lh-base);
    /* font-size is deliberately left at the browser default (16px). Setting it
       to --fs-base here would resize every inherited node in the app at once —
       that is a redesign, not a typography fix. Views adopt the scale as they
       are touched. */
}

/* <button> and friends do not inherit font-family. The layouts patched this
   rule by rule and missed three, so the primary "Login" CTA — the first button
   anyone sees — rendered in Arial while the page around it was Plus Jakarta
   Sans, as did the password toggle and the admin hamburger (UX-T3). One rule
   instead of three patches. font-family only: the `font` shorthand would also
   reset size and weight and undo existing rules. */
button,
input,
select,
textarea {
    font-family: inherit;
}

/* Headings had no size rules of their own on several surfaces, so they fell
   through to the UA stylesheet — which is why one <h3> rendered at 18.72px next
   to another at 16px on the same page (UX-T6). */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
h5, h6 { font-size: var(--fs-base); }

/* ==========================================================================
   Shared primitives
   Lifted from views/layouts/main.php so the five sections that have no <style>
   block of their own inherit them too. Class names are unchanged, so no view
   markup had to move.
   ========================================================================== */

.card {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 24px;
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 24px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
    font-size: var(--fs-base);
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); transform: translateY(-1px); }

/* Pastel buttons */
.btn-view { background: var(--pastel-blue); color: var(--pastel-blue-text); }
.btn-view:hover { background: #bae6fd; }
.btn-edit { background: var(--pastel-yellow); color: var(--pastel-yellow-text); }
.btn-edit:hover { background: #fde68a; }
.btn-delete { background: var(--pastel-rose); color: var(--pastel-rose-text); }
.btn-delete:hover { background: #fecdd3; }

.btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); }
.btn-outline:hover { background: #f1f5f9; color: var(--text-main); }

.form-group { margin-bottom: 20px; }
.form-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: var(--fs-base);
    color: var(--text-muted);
}
.form-control {
    width: 100%;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid var(--border-color);
    font-family: inherit;
    /* 16px, not the old 0.95rem/15.2px. iOS Safari zooms the viewport whenever
       a focused input is under 16px, so every tap into a field on an iPhone
       used to zoom the page — an annoyance nobody had reported because nobody
       had connected it to the font size. */
    font-size: var(--fs-md);
    transition: border-color 0.2s;
}
.form-control:focus { outline: none; border-color: var(--primary); }

/* Tables */
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th {
    text-align: left;
    padding: 12px 16px;
    color: var(--text-muted);
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}
td { padding: 16px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }

/* Once <main> can shrink, a table is the one thing on these pages that still
   cannot: its columns have a real minimum width. Its own scroll container keeps
   those columns reachable instead of clipped (F1-01). */
.table-wrap { overflow-x: auto; }

/* Monospace record ids and log lines — one stack, two call sites (UX-T5). */
.mono { font-family: var(--font-mono); }

/* ==========================================================================
   Entity links (U3 step 2)
   The app used to link only from the icons in an ACTIONS column, almost never
   from the name of the thing — an order number, a customer name and a status
   were dead text on every list (UX_AUDIT §4.2, L1-L4, L6). Users click names.

   Deliberately quiet: inherits its colour so a table of names does not become
   a wall of blue, and earns an underline on hover/focus.
   ========================================================================== */
.link-entity {
    color: inherit;
    text-decoration: none;
    border-radius: 4px;
}
.link-entity:hover { text-decoration: underline; text-underline-offset: 2px; }
.link-entity:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    text-decoration: underline;
}

/* A status badge that links stays a badge — it must not pick up link colour or
   an underline, only the affordance that it is clickable. */
a.link-badge { text-decoration: none; display: inline-block; }
a.link-badge:hover { filter: brightness(0.96); }
a.link-badge:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Flash banners (A2-05).
   The app had no success channel at all — only flash_error, rendered inline in
   the layout with hand-written styles. Both outcomes now share one component,
   so "saved" and "failed" are told the same way in the same place.
   --------------------------------------------------------------------------- */
.flash {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    margin-bottom: 16px;
    font-weight: 500;
    font-size: var(--fs-base);
    border: 1px solid transparent;
}
.flash-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.flash-error   { background: #fff1f2; border-color: #fecdd3; color: #c41f1f; }
.flash svg { flex: 0 0 auto; }