/* Sign-in, signup and welcome pages (auth-layout.php). DESIGN.md §6.28.
   One form column and one photo, in three looks: .au-look-split, .au-look-fade, .au-look-card.
   Plain and quiet on purpose: one ink colour, one solid button, real photos, no decorative gradients.
   Loaded after styles.css and whatsapp-login.css; everything is scoped under body.au. */

body.au {
    --au-bg: #ffffff;
    --au-bg-rgb: 255, 255, 255;
    --au-ink: #0f1b2d;
    --au-muted: #5a6475;
    --au-line: #d5dae1;
    --au-field: #f7f8fa;
    --au-accent: #0f2a44;
    --au-accent-hover: #1b3f63;
    --au-accent-ink: #ffffff;
    --au-chip-on: #e9eff6;
    --au-link: #0f4c81;
    --au-focus: rgba(37, 99, 235, 0.28);
    --au-err: #b42318;
    --au-err-bg: #fef3f2;
    --au-err-line: #fecdca;
    --au-ok: #067647;
    --au-ok-bg: #ecfdf3;
    --au-ok-line: #abefc6;
    --au-warn: #93370d;
    --au-warn-bg: #fffaeb;
    --au-warn-line: #fedf89;
    /* styles.css and whatsapp-login.css read these. */
    --text-primary: var(--au-ink);
    --text-secondary: var(--au-ink);
    --text-muted: var(--au-muted);
    --border-color: var(--au-line);
    --input-bg: var(--au-field);
    --input-border: var(--au-line);
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--au-bg);
    color: var(--au-ink);
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
body.au.dark-mode {
    --au-bg: #0e1622;
    --au-bg-rgb: 14, 22, 34;
    --au-ink: #e8edf4;
    --au-muted: #9aa6b8;
    --au-line: #2b3747;
    --au-field: #152131;
    --au-accent: #e8edf4;
    --au-accent-hover: #ffffff;
    --au-accent-ink: #0e1622;
    --au-chip-on: #1d2c40;
    --au-link: #8cc4ff;
    --au-focus: rgba(140, 196, 255, 0.35);
    --au-err: #ffb4ab;
    --au-err-bg: #2a1517;
    --au-err-line: #5c2b2b;
    --au-ok: #8ee0b0;
    --au-ok-bg: #0f2a1d;
    --au-ok-line: #1f5a3b;
    --au-warn: #fedf89;
    --au-warn-bg: #2b2210;
    --au-warn-line: #5b4517;
    --text-primary: var(--au-ink);
    --text-secondary: var(--au-ink);
    --text-muted: var(--au-muted);
    --border-color: var(--au-line);
    --input-bg: var(--au-field);
    --input-border: var(--au-line);
}

.au a { color: var(--au-link); }
.au [hidden] { display: none !important; }

/* ---- the form column ---------------------------------------------------------------------------------------- */
.au-shell { min-height: 100vh; min-height: 100dvh; }
.au-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 24px clamp(20px, 5vw, 56px);
    background: var(--au-bg);
}
.au-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.au-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--au-ink) !important; text-decoration: none; font-weight: 650; font-size: 17px; letter-spacing: -0.01em; }
.au .login-logo { width: 36px; height: 36px; margin: 0; border: 0; border-radius: 50%; box-shadow: none; object-fit: cover; flex: none; }
.au-tools { display: flex; align-items: center; gap: 8px; }
.au-lang { display: flex; padding: 2px; border: 1px solid var(--au-line); border-radius: 999px; }
.au-lang a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--au-muted); font-size: 13px; font-weight: 650; text-decoration: none; }
.au-lang a[aria-current] { background: var(--au-ink); color: var(--au-bg); }
.au-icon-btn { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--au-line); border-radius: 999px; background: transparent; color: var(--au-ink); cursor: pointer; }
.au-sun { display: none; }
body.dark-mode .au-sun { display: inline; }
body.dark-mode .au-moon { display: none; }
.au-moon, .au-sun { line-height: 0; }

.au .login-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
}
/* styles.css gives the old login card its own background in dark mode, which would win over the rule above. */
body.dark-mode.au .login-box { background: transparent; box-shadow: none; }
.au-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; width: 100%; max-width: 420px; margin: 0 auto; color: var(--au-muted); font-size: 13px; }
.au-foot a { color: var(--au-ink); }
.au-foot p { margin: 0; }

.au h1 { margin: 0 0 8px; color: var(--au-ink); font-size: clamp(26px, 3vw, 32px); font-weight: 650; line-height: 1.15; letter-spacing: -0.02em; }
.au-lead { margin: 0 0 28px; color: var(--au-muted); font-size: 16px; }
.au-alt { margin: 24px 0 0; color: var(--au-muted); font-size: 15px; text-align: center; }
.au-alt a { color: var(--au-ink); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

/* Step counter: "Step 1 of 2" with two bars. */
.au-steps { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--au-muted); font-size: 13px; font-weight: 600; }
.au-steps ol { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.au-steps li { width: 28px; height: 4px; border-radius: 4px; background: var(--au-line); }
.au-steps li.is-done { background: var(--au-ink); }

/* ---- fields ------------------------------------------------------------------------------------------------- */
.au .form-group { margin: 0 0 18px; }
.au .form-group > label, .au .wa-phone label, .au-legend { display: block; margin: 0 0 6px; color: var(--au-ink); font-size: 14px; font-weight: 600; }
.au .form-group input, .au .form-group select, .au .wa-phone-row select.wa-phone-dial, .au .wa-phone-row input.wa-phone-local {
    width: 100%;
    min-height: 50px;
    padding: 12px 14px;
    border: 1px solid var(--au-line);
    border-radius: 12px;
    background: var(--au-field);
    color: var(--au-ink);
    font-size: 16px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.au .wa-phone-row select.wa-phone-dial { width: auto; max-width: 46%; padding: 8px 10px; }
.au .form-group select { appearance: auto; }
.au .form-group input:focus, .au .form-group select:focus, .au .wa-phone-row select:focus, .au .wa-phone-row input:focus {
    outline: none;
    border-color: var(--au-ink);
    box-shadow: 0 0 0 4px var(--au-focus);
}
.au .form-group input[aria-invalid="true"], .au .form-group select[aria-invalid="true"] { border-color: var(--au-err); }
.au-input { position: relative; }
.au-input > svg { position: absolute; top: 50%; left: 14px; color: var(--au-muted); transform: translateY(-50%); pointer-events: none; }
.au .au-input > input { padding-left: 44px; }
.au .au-input > input.has-reveal { padding-right: 52px; }
.au .au-input-plain > input { padding-left: 14px; }
.au-reveal { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--au-muted); cursor: pointer; transform: translateY(-50%); }
.au-reveal:hover { color: var(--au-ink); }
.au-reveal:focus-visible, .au-icon-btn:focus-visible, .au-lang a:focus-visible, .au .btn:focus-visible, .au .pw-login > summary:focus-visible, .au-choices input:focus-visible + span { outline: 3px solid var(--au-focus); outline-offset: 2px; }
.au-reveal .au-eye-off { display: none; }
.au-reveal[aria-pressed="true"] .au-eye { display: none; }
.au-reveal[aria-pressed="true"] .au-eye-off { display: block; }
.au-help { margin: 6px 0 0; color: var(--au-muted); font-size: 13px; }
.au-field-error { display: flex; gap: 6px; margin: 6px 0 0; color: var(--au-err); font-size: 14px; font-weight: 500; }
.au-field-error::before { content: "!"; display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; background: var(--au-err); color: var(--au-bg); font-size: 12px; font-weight: 700; }
.au-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.au-row > * { min-width: 0; }

/* Products as large tick chips. */
.au fieldset { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.au-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.au-choices label { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.au-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.au-choices span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--au-line); border-radius: 999px; background: var(--au-field); color: var(--au-ink); font-size: 15px; font-weight: 500; }
.au-choices span::before { content: ""; width: 16px; height: 16px; border: 1.5px solid var(--au-muted); border-radius: 5px; box-sizing: border-box; }
.au-choices input:checked + span { border-color: var(--au-ink); background: var(--au-chip-on); font-weight: 600; }
.au-choices input:checked + span::before { border-color: var(--au-ink); background: var(--au-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
body.dark-mode .au-choices input:checked + span::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230e1622' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.au fieldset[aria-invalid="true"] .au-choices span { border-color: var(--au-err); }

/* ---- messages ----------------------------------------------------------------------------------------------- */
.au .error { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--au-err-line); border-radius: 12px; background: var(--au-err-bg); color: var(--au-err); font-size: 14px; }
.au .error a { color: inherit; }
.au-note { margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--au-ok-line); border-radius: 12px; background: var(--au-ok-bg); color: var(--au-ok); font-size: 14px; }
.au-net { width: 100%; max-width: 420px; margin: 0 auto 16px; padding: 10px 14px; border: 1px solid var(--au-warn-line); border-radius: 12px; background: var(--au-warn-bg); color: var(--au-warn); font-size: 14px; }
.au-net.is-online { border-color: var(--au-ok-line); background: var(--au-ok-bg); color: var(--au-ok); }

/* ---- buttons ------------------------------------------------------------------------------------------------ */
.au .btn, .au .pw-login > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transform: none;
    box-shadow: none;
    transition: background-color 0.15s, border-color 0.15s;
}
.au .btn-primary { background: var(--au-accent); color: var(--au-accent-ink); }
.au .btn-primary:hover { background: var(--au-accent-hover); transform: none; }
.au .btn-secondary, .au .pw-login > summary { border-color: var(--au-line); background: var(--au-bg); color: var(--au-ink); }
.au .btn-secondary:hover, .au .pw-login > summary:hover { background: var(--au-field); }
.au .btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.au .btn[aria-busy="true"]::before { content: ""; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: au-spin 0.8s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .au .btn[aria-busy="true"]::before { animation: none; } }
.au-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.au-actions .btn-primary { flex: 1; }
.au-back { flex: none; color: var(--au-ink) !important; font-weight: 600; text-decoration: none; padding: 12px 8px; }

/* The WhatsApp code sign-in and the folded email sign-in (whatsapp-login.css, adjusted to this frame). */
.au .wa-login-title { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 15px; font-weight: 650; }
.au .wa-login-help { margin: 0 0 14px; }
.au .wa-login-notice { border: 1px solid var(--au-ok-line); border-radius: 12px; background: var(--au-ok-bg); color: var(--au-ok); }
.au .login-divider { margin: 24px 0; color: var(--au-muted); }
.au .login-divider::before, .au .login-divider::after { border-color: var(--au-line); }
.au .pw-login[open] > summary { margin-bottom: 18px; }

/* Sign in / New account: two tabs at the top of the form (links between login.php and signup.php). */
.au-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 28px; padding: 4px; border: 1px solid var(--au-line); border-radius: 14px; background: var(--au-field); }
.au-tabs a { display: grid; place-items: center; min-height: 44px; padding: 8px 12px; border-radius: 10px; color: var(--au-muted); font-size: 15px; font-weight: 600; text-decoration: none; }
.au-tabs a:hover { color: var(--au-ink); }
.au-tabs a[aria-current="page"] { background: var(--au-bg); color: var(--au-ink); box-shadow: 0 1px 2px rgba(15, 27, 45, 0.08), 0 0 0 1px var(--au-line); }
.au-tabs a:focus-visible { outline: 3px solid var(--au-focus); outline-offset: 2px; }

/* WhatsApp code or email: one way shown at a time, picked with two radios (no JavaScript needed). */
.au-method-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.au-seg { display: flex; gap: 24px; margin: 0 0 18px; border-bottom: 1px solid var(--au-line); }
.au-seg label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 -1px; padding: 10px 2px; border-bottom: 2px solid transparent; color: var(--au-muted); font-size: 15px; font-weight: 600; cursor: pointer; }
.au-seg label svg { flex: none; }
#auMethodWa:checked ~ .au-seg label[for="auMethodWa"], #auMethodPw:checked ~ .au-seg label[for="auMethodPw"] { border-bottom-color: var(--au-ink); color: var(--au-ink); }
#auMethodWa:focus-visible ~ .au-seg label[for="auMethodWa"], #auMethodPw:focus-visible ~ .au-seg label[for="auMethodPw"] { outline: 3px solid var(--au-focus); outline-offset: 2px; border-radius: 6px; }
#auMethodWa:checked ~ .au-method-pw, #auMethodPw:checked ~ .au-method-wa { display: none; }
.au .wa-login-code { margin-top: 18px; }

/* Supplier and driver spaces: one quiet line under the form. */
.au-portals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 28px 0 0; padding: 20px 0 0; border-top: 1px solid var(--au-line); color: var(--au-muted); font-size: 14px; }
.au-portals > span { flex-basis: 100%; }
.au-portal { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--au-line); border-radius: 999px; background: var(--au-bg); color: var(--au-ink) !important; font-weight: 600; text-decoration: none; }
.au-portal:hover { background: var(--au-field); }
.au-portal:focus-visible { outline: 3px solid var(--au-focus); outline-offset: 2px; }

/* The ready page: the seasons made for the products picked at signup. */
.au-seasons { margin: 0 0 22px; padding: 14px 16px; border: 1px solid var(--au-line); border-radius: 12px; background: var(--au-field); }
.au-seasons-title { margin: 0 0 8px; font-weight: 600; }
.au-seasons ul { margin: 0; padding: 0; list-style: none; }
.au-seasons li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 6px 0; }
.au-seasons li span { color: var(--au-muted); font-size: 14px; }
.au-seasons .au-help { margin-top: 8px; }
.op-resend { margin-top: 12px; }

/* The welcome page: the email they will sign in with, read-only. */
.au-who { margin: 0; padding: 12px 14px; border: 1px dashed var(--au-line); border-radius: 12px; font-weight: 600; word-break: break-all; }

/* A finished step: a big tick, then what comes next. */
.au-done-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 20px; border-radius: 50%; background: var(--au-ok-bg); color: var(--au-ok); }
.au-next { margin: 0 0 24px; padding: 0; list-style: none; counter-reset: au-next; }
.au-next li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--au-line); counter-increment: au-next; }
.au-next li:last-child { border-bottom: 1px solid var(--au-line); }
.au-next li::before { content: counter(au-next); position: absolute; top: 12px; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--au-field); border: 1px solid var(--au-line); font-size: 13px; font-weight: 700; }
.au-next strong { display: block; font-weight: 600; }
.au-next span { color: var(--au-muted); font-size: 14px; }

/* ---- the photo ---------------------------------------------------------------------------------------------- */
.au-photo { position: relative; margin: 0; overflow: hidden; background: #3a3127; }
.au-photo picture, .au-photo img { display: block; width: 100%; height: 100%; }
.au-photo img { object-fit: cover; object-position: 55% 40%; }
.au-photo[data-photo="warehouse"] img { object-position: 58% 35%; }
.au-photo[data-photo="loading"] img { object-position: 45% 55%; }
.au-photo[data-photo="farm"] img { object-position: 42% 40%; }
.au-photo[data-photo="truck"] img { object-position: 52% 45%; }
/* hero: the inspector on the left, the dashboard across the top and right. */
.au-photo[data-photo="hero"] img { object-position: 20% 50%; }

/* ---- look 1: split. The form on white, the photo in a rounded panel beside it. ------------------------------ */
@media (min-width: 900px) {
    .au-look-split .au-shell { display: grid; grid-template-columns: minmax(440px, 1fr) minmax(0, 1.2fr); }
    .au-look-split .au-photo { position: sticky; top: 16px; height: calc(100vh - 32px); height: calc(100dvh - 32px); margin: 16px 16px 16px 0; border-radius: 24px; }
}
@media (max-width: 899px) {
    .au-look-split .au-shell { display: flex; flex-direction: column; }
    .au-look-split .au-photo { order: -1; flex: none; height: 176px; border-radius: 0 0 20px 20px; }
    .au-look-split .au-panel { min-height: 0; flex: 1; }
}

/* ---- look 2: fade. The photo fills the page and fades to white behind the form. ----------------------------- */
.au-look-fade .au-photo { position: fixed; inset: 0; }
@media (min-width: 900px) {
    /* The photo starts a third of the way in, and the fade ends soon after the form (at most 530px wide), so the
       inspector stays clear of it. */
    .au-look-fade .au-photo { left: 30%; }
    .au-look-fade .au-photo[data-photo="hero"] img { object-position: 8% 50%; }
    .au-look-fade .au-panel { width: min(100%, 700px); padding-left: clamp(32px, 7vw, 104px); background: linear-gradient(90deg, rgb(var(--au-bg-rgb)) 0, rgb(var(--au-bg-rgb)) 545px, rgba(var(--au-bg-rgb), 0.8) 590px, rgba(var(--au-bg-rgb), 0) 680px); }
    .au-look-fade .login-box, .au-look-fade .au-foot, .au-look-fade .au-net { margin-left: 0; }
    .au-look-fade .au-top { max-width: 420px; }
}
@media (max-width: 899px) {
    .au-look-fade .au-photo { position: absolute; inset: 0 0 auto; height: 46vh; }
    /* A dark band at the top only, so the white brand and switches stay readable over the photo. */
    .au-look-fade .au-photo::after { content: ""; position: absolute; pointer-events: none; inset: 0 0 auto; height: 40%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)); }
    /* The photo's own dashboard logo sits top left: shift it under the brand, the inspector's face still in view. */
    .au-look-fade .au-photo[data-photo="hero"] img { object-position: 36% 0; }
    .au-look-fade .au-panel { padding-top: calc(46vh - 140px); background: linear-gradient(to bottom, rgba(var(--au-bg-rgb), 0) 0, rgba(var(--au-bg-rgb), 0) calc(46vh - 220px), rgb(var(--au-bg-rgb)) calc(46vh - 60px)); }
    .au-look-fade .au-top { position: absolute; top: 16px; right: clamp(20px, 5vw, 56px); left: clamp(20px, 5vw, 56px); }
    .au-look-fade .au-brand { color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
    .au-look-fade .au-lang, .au-look-fade .au-icon-btn { border-color: rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.25); color: #fff; }
    .au-look-fade .au-lang a { color: #fff; }
    .au-look-fade .au-lang a[aria-current] { background: #fff; color: #0f1b2d; }
}

/* ---- look 3: card. The photo fills the page, the form sits in a white card over it. ------------------------- */
.au-look-card .au-photo { position: fixed; inset: 0; }
.au-look-card .au-photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(8, 15, 26, 0.28); pointer-events: none; }
.au-look-card .au-shell { display: grid; place-items: center; padding: 32px 16px 64px; }
.au-look-card .au-panel { width: min(100%, 480px); min-height: 0; padding: 24px 28px 20px; border-radius: 20px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); }
.au-look-card .login-box { padding: 32px 0 24px; }
@media (max-width: 899px) {
    .au-look-card .au-shell { place-items: start center; padding: 96px 12px 56px; }
    .au-look-card .au-panel { padding: 20px 18px 16px; }
}

@media (max-width: 899px) {
    .au .login-box { justify-content: flex-start; padding-top: 28px; }
}

/* ---- small phones ------------------------------------------------------------------------------------------- */
@media (max-width: 420px) {
    .au-row { grid-template-columns: 1fr; }
    .au .login-box { padding: 28px 0; }
    .au-brand span { font-size: 16px; }
}