/* =====================================================================
   Fox's Pallets - base stylesheet (MVP)
   IBM Carbon-aligned. Plain CSS (no build step for MVP).
   Fluid type via clamp. WCAG AA focus + contrast.
   ===================================================================== */

:root {
    /* Carbon-derived tokens */
    --interactive-01: #0f62fe;   /* primary action (Blue 60) */
    --interactive-hover: #0353e9;
    --ui-background: #f4f4f4;     /* Gray 10 */
    --ui-01: #ffffff;
    --ui-02: #f4f4f4;
    --ui-03: #e0e0e0;            /* borders */
    --ui-04: #8d8d8d;
    --text-01: #161616;          /* Gray 100 */
    --text-02: #525252;          /* Gray 70 */
    --text-03: #a8a8a8;
    --text-on-color: #ffffff;
    --support-error: #da1e28;    /* Red 60 */
    --support-error-bg: #fff1f1;
    --support-success: #24a148;  /* Green 50/60 */
    --field-01: #f4f4f4;
    --focus: #0f62fe;

    /* Fluid type scale (clamp) */
    --fs-display: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    --fs-h1: clamp(1.5rem, 1.3rem + 1vw, 2rem);
    --fs-h2: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.125rem);
    --fs-label: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: inherit; }

html { scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fs-body);
    line-height: 1.5;
    color: var(--text-01);
    background: var(--ui-background);
    -webkit-font-smoothing: antialiased;
}

h1 { font-size: var(--fs-h1); line-height: 1.25; font-weight: 600; margin: 0 0 var(--space-4); }
h2 { font-size: var(--fs-h2); line-height: 1.25; font-weight: 600; margin: 0 0 var(--space-3); }

.muted { color: var(--text-02); }

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--interactive-01);
    color: var(--text-on-color);
    padding: var(--space-3) var(--space-4);
    z-index: 100;
}
.skip-link:focus { left: 0; }

/* Focus: always visible, never removed */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

/* --- Buttons --- */
.btn {
    font: inherit;
    font-size: var(--fs-label);
    font-weight: 500;
    border: 1px solid transparent;
    padding: var(--space-3) var(--space-4);
    min-height: 48px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}
.btn--primary { background: var(--interactive-01); color: var(--text-on-color); }
.btn--primary:hover { background: var(--interactive-hover); }
.btn--full { width: 100%; }
.btn--ghost { background: transparent; color: var(--text-01); border-color: transparent; }
.btn--ghost:hover { background: var(--ui-03); }

/* --- Fields --- */
.field { margin-bottom: var(--space-4); }
.field-label {
    display: block;
    font-size: var(--fs-label);
    color: var(--text-02);
    margin-bottom: var(--space-2);
}
.field-input {
    width: 100%;
    font: inherit;
    font-size: var(--fs-body);
    padding: var(--space-3);
    min-height: 48px;
    border: none;
    border-bottom: 1px solid var(--ui-04);
    background: var(--field-01);
    color: var(--text-01);
}
.field-input:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: -2px;
}

/* --- Notifications --- */
.notification {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    border-left: 3px solid transparent;
    font-size: var(--fs-label);
}
.notification--error {
    background: var(--support-error-bg);
    border-left-color: var(--support-error);
    color: var(--text-01);
}

/* --- Auth screen --- */
.auth-body { background: var(--ui-background); }
.auth-shell {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}
.auth-card {
    background: var(--ui-01);
    padding: var(--space-6);
    width: 100%;
    max-width: 24rem;
    border: 1px solid var(--ui-03);
}
.auth-brand { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.auth-brand-mark { font-size: 1.5rem; color: var(--interactive-01); }
.auth-brand-name { font-weight: 600; letter-spacing: 0.01em; }
.auth-title { margin-bottom: var(--space-5); }

/* --- App shell --- */
.topbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    background: var(--text-01);
    color: var(--text-on-color);
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
}
.topbar-brand { font-weight: 600; }
.topbar-role { color: var(--text-03); font-size: var(--fs-label); }
.topbar-logout { margin-left: auto; }
.topbar-logout .btn--ghost { color: var(--text-on-color); }
.topbar-logout .btn--ghost:hover { background: rgba(255,255,255,0.12); }

.shell {
    max-width: 60rem;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}
.placeholder-panel {
    background: var(--ui-01);
    border: 1px solid var(--ui-03);
    padding: var(--space-5);
    margin-top: var(--space-4);
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- Admin: nav, tables, forms, states (Milestone 3) --- */
.topbar-nav { display: flex; gap: var(--space-4); margin-left: var(--space-4); }
.topbar-nav a { color: var(--text-on-color); text-decoration: none; font-size: var(--fs-label); opacity: 0.85; }
.topbar-nav a:hover { opacity: 1; text-decoration: underline; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); flex-wrap: wrap; }
.page-head h1 { margin: 0; }

.notification--success { background: #defbe6; border-left-color: var(--support-success); }

.table-wrap { overflow-x: auto; background: var(--ui-01); border: 1px solid var(--ui-03); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.data-table th, .data-table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--ui-03); white-space: nowrap; }
.data-table th { background: var(--ui-02); font-weight: 600; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

.state { display: inline-block; padding: 2px var(--space-2); font-size: 0.8125rem; border: 1px solid var(--ui-04); }
.state--draft { border-color: #a8a8a8; color: #525252; }
.state--assigned { border-color: var(--interactive-01); color: var(--interactive-01); }
.state--collected, .state--weighed { border-color: #007d79; color: #007d79; }
.state--transferred { border-color: #8a3ffc; color: #8a3ffc; }
.state--complete, .state--submitted { border-color: var(--support-success); color: #0e6027; }

.form-panel { background: var(--ui-01); border: 1px solid var(--ui-03); padding: var(--space-5); max-width: 40rem; }
.field-help { font-size: 0.8125rem; color: var(--text-02); margin: var(--space-2) 0 0; }
.req { color: var(--support-error); }

select.field-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-02) 50%), linear-gradient(135deg, var(--text-02) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: var(--space-6); }

.code-readout { background: var(--ui-02); border: 1px solid var(--ui-03); padding: var(--space-4); margin-bottom: var(--space-4); }
.code-item { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }
.code-label { font-size: var(--fs-label); color: var(--text-02); }
.code-value { font-size: 1.125rem; font-weight: 600; }

.fieldset { border: 1px solid var(--ui-03); padding: var(--space-4); margin-bottom: var(--space-4); }
.fieldset legend { font-weight: 600; font-size: var(--fs-label); padding: 0 var(--space-2); }

/* --- Driver flow (Milestone 4): mobile-first --- */
.driver-body { background: var(--ui-background); }
.d-topbar { display: flex; align-items: center; gap: var(--space-3);
    background: var(--text-01); color: var(--text-on-color);
    padding: var(--space-3) var(--space-4);
    padding-top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
    position: sticky; top: 0; z-index: 10; }
.d-back { color: var(--text-on-color); text-decoration: none; font-size: 1.4rem; line-height: 1; padding: var(--space-1) var(--space-2); }
.d-title { font-weight: 600; flex: 1; }
.d-logout .btn--ghost { color: var(--text-on-color); }
.btn--sm { min-height: 40px; padding: var(--space-2) var(--space-3); font-size: 0.8125rem; }

.d-progress { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--ui-01); border-bottom: 1px solid var(--ui-03); flex-wrap: wrap; }
.d-progress-seg { height: 4px; flex: 1; background: var(--ui-03); min-width: 40px; }
.d-progress-seg.is-done { background: var(--interactive-01); }
.d-progress-label { width: 100%; font-size: 0.8125rem; color: var(--text-02); margin-top: var(--space-1); }

.d-main { max-width: 40rem; margin: 0 auto; padding: var(--space-4); padding-bottom: 6rem; }

.load-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.load-card { background: var(--ui-01); border: 1px solid var(--ui-03); }
.load-card-link { display: block; padding: var(--space-4); text-decoration: none; color: var(--text-01); }
.load-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.load-ref { font-weight: 600; }
.load-card-body { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-label); color: var(--text-02); }
.load-next { display: inline-block; margin-top: var(--space-3); color: var(--interactive-01); font-size: var(--fs-label); font-weight: 500; }

.detail-summary h1 { margin-bottom: var(--space-4); }
.detail-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); }
.detail-grid dt { color: var(--text-02); font-size: var(--fs-label); }
.detail-grid dd { margin: 0; font-weight: 500; }

.journey { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.journey-step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; color: var(--text-03); }
.journey-step.is-done { color: var(--support-success); }
.journey-step.is-current { color: var(--text-01); font-weight: 600; }
.journey-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; }

.d-form { display: block; }
.code-strip { display: flex; gap: var(--space-4); background: var(--text-01); color: var(--text-on-color); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-size: var(--fs-label); }
.code-strip .mono { color: #a6c8ff; }

.line-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-2); }
.line-qty { max-width: 6rem; }
.line-desc { flex: 1; }

.net-readout { display: flex; align-items: baseline; gap: var(--space-2); background: var(--ui-02); padding: var(--space-4); }
.net-readout .code-value { font-size: 1.75rem; }
.is-warn { color: var(--support-error); }

.sig-pad { border: 1px dashed var(--ui-04); background: var(--ui-01); padding: var(--space-2); margin-bottom: var(--space-2); }
.sig-canvas { display: block; width: 100%; height: 160px; background: #fff; touch-action: none; }

.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-label); min-height: 44px; }
.check input { width: 20px; height: 20px; }
.check--confirm { margin: var(--space-4) 0; padding: var(--space-3); background: var(--ui-01); border: 1px solid var(--ui-03); }

.legal-note { font-size: 0.8125rem; color: var(--text-02); background: var(--ui-01); padding: var(--space-3); border-left: 3px solid var(--ui-04); margin-bottom: var(--space-4); }
.fixed-line { font-size: var(--fs-label); color: var(--text-02); margin: 0 0 var(--space-3); }

.d-actionbar { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--space-3) var(--space-4); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); background: var(--ui-01); border-top: 1px solid var(--ui-03); }
.d-actionbar--static { position: static; margin-top: var(--space-5); padding-left: 0; padding-right: 0; border: none; background: transparent; }

/* --- Customer dashboard (Milestone 5) --- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.trace { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.trace-step { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--ui-03); color: var(--text-03); }
.trace-step.is-done { color: var(--text-01); }
.trace-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; flex-shrink: 0; }
.trace-step.is-done .trace-dot { background: var(--support-success); border-color: var(--support-success); color: #fff; }
.trace-label { flex: 1; font-weight: 500; }
.trace-dl { color: var(--interactive-01); font-size: var(--fs-label); text-decoration: none; font-weight: 500; }
.trace-dl:hover { text-decoration: underline; }
.trace-note { color: var(--text-02); font-size: var(--fs-label); }
.dl-all { margin-top: var(--space-4); }