/* ---------------------------------------------------------------------------
   Yankee: the styles the web portal and the mobile app share, built on yankee-tokens.css.
   The design system (Documents/03-Architecture/design-system) is the reference; each app's app.css keeps only what
   is specific to that surface. Load order: bootstrap → yankee-tokens.css → yankee.css → app.css → scoped styles.
   --------------------------------------------------------------------------- */

/* Bootstrap onto the tokens. The brand orange stays the accent for marks that aren't text; anything carrying white
   text uses `action` (4.96:1), links use `brand-orange-dark` (4.54:1 on ground). */
:root {
    --bs-primary: var(--brand-orange);
    --bs-primary-rgb: 232, 98, 44;
    --bs-link-color: var(--brand-orange-dark);
    --bs-link-color-rgb: 193, 73, 28;
    --bs-link-hover-color: var(--brand-orange-darker);
    --bs-border-radius: var(--radius-base);
    --bs-border-color: var(--line);
    --bs-body-color: var(--ink);
    --bs-body-bg: var(--ground);
}

html, body {
    background-color: var(--ground);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.01em;
    color: var(--brand-charcoal);
}
h1 { font-weight: 600; }
h1:focus { outline: none; }

a, .btn-link { color: var(--brand-orange-dark); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--brand-orange-darker); text-decoration: underline; }

/* Buttons. A filled primary is `action` with `on-action` text; the brand orange alone is 3.38:1 under white. */
.btn-primary {
    --bs-btn-color: var(--on-action);
    --bs-btn-bg: var(--action);
    --bs-btn-border-color: var(--action);
    --bs-btn-hover-color: var(--on-action);
    --bs-btn-hover-bg: var(--brand-orange-darker);
    --bs-btn-hover-border-color: var(--brand-orange-darker);
    --bs-btn-active-color: var(--on-action);
    --bs-btn-active-bg: var(--brand-orange-darker);
    --bs-btn-active-border-color: var(--brand-orange-darker);
    --bs-btn-disabled-color: var(--on-action);
    --bs-btn-disabled-bg: var(--action);
    --bs-btn-disabled-border-color: var(--action);
}
.btn-outline-primary {
    --bs-btn-color: var(--brand-orange-dark);
    --bs-btn-border-color: var(--brand-orange);
    --bs-btn-hover-color: var(--on-action);
    --bs-btn-hover-bg: var(--action);
    --bs-btn-hover-border-color: var(--action);
    --bs-btn-active-color: var(--on-action);
    --bs-btn-active-bg: var(--brand-orange-darker);
    --bs-btn-active-border-color: var(--brand-orange-darker);
}
.badge.text-bg-primary { background-color: var(--action) !important; color: var(--on-action) !important; }
.badge.text-bg-info { background-color: var(--badge-info) !important; }
.form-check-input:checked { background-color: var(--action); border-color: var(--action); }

/* Keyboard focus: a solid 2px ring (at least 5.79:1 on every surface) plus the soft halo. The halo alone was under
   3:1. Mouse clicks don't draw the ring (:focus-visible). */
.btn:focus-visible, a:focus-visible, .nav-link:focus-visible,
.form-control:focus-visible, .form-select:focus-visible, .form-check-input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus);
}
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--brand-orange); box-shadow: var(--shadow-focus); }

/* Cards and tables: one radius and one header for both apps (the mobile 0.5rem corners and tinted header were drift). */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-base);
    box-shadow: var(--shadow-card);
}
.card-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    color: var(--brand-charcoal);
}
.table { --bs-table-bg: transparent; }
.table > thead th {
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: var(--muted);
    border-bottom: 2px solid var(--line);
}

/* Validation and the framework error UI. A red outline is never the only signal: a message says what to fix. */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--validation-valid); }
.invalid { outline: 1px solid var(--validation-error); }
.validation-message { color: var(--validation-error); }
.blazor-error-boundary { background: var(--error-boundary); padding: 1rem; color: #fff; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* Touch targets (NFR-UX-001): any control a driver uses on the road is at least 48px high. */
.yk-touch {
    min-height: var(--touch-target);
    font-size: 1.05rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.yk-touch-field { min-height: var(--touch-target); font-size: 1.05rem; }

/* StatusBadge and JobMarkers (Yankee.Clients.Shared/Display): every state is an icon AND a word in its own colour
   pair (NFR-UX-004). The `badge` class stays for layout and for the tests that find a status by it. */
.yk-status, .yk-marker {
    --bs-badge-color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: .3em;
    font-weight: 700;
}
.yk-ico { font-weight: 700; line-height: 1; }
.yk-status--pending    { color: var(--status-pending-fg);    background-color: var(--status-pending-bg); }
.yk-status--scheduled  { color: var(--status-scheduled-fg);  background-color: var(--status-scheduled-bg); }
.yk-status--inprogress { color: var(--status-inprogress-fg); background-color: var(--status-inprogress-bg); }
.yk-status--deferred   { color: var(--status-deferred-fg);   background-color: var(--status-deferred-bg); }
.yk-status--completed  { color: var(--status-completed-fg);  background-color: var(--status-completed-bg); }
.yk-status--failed     { color: var(--status-failed-fg);     background-color: var(--status-failed-bg); }
.yk-status--cancelled  { color: var(--status-cancelled-fg);  background-color: var(--status-cancelled-bg); }
.yk-status--unknown    { color: var(--status-pending-fg);    background-color: var(--status-pending-bg); }
.yk-marker--urgent     { color: var(--urgent-fg);            background-color: var(--urgent-bg); }
.yk-marker--promise    { color: var(--promise-fg);           background-color: var(--promise-bg); }
.yk-marker--redirected { color: var(--status-deferred-fg);   background-color: var(--status-deferred-bg); }
.yk-markers { display: inline-flex; flex-wrap: wrap; gap: .3rem; align-items: center; }