/* ── Scanner PWA — Oakleaf Modular ──────────────────────────────────────────
   Mobile-first styles optimised for Zebra TC21 (Android, portrait, gloves).
   Uses Bootstrap Icons (CDN); sc- prefix for scanner-specific components.
   Target: min 56px touch targets, high contrast, 16px+ base text.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
    --sc-primary:         #1a6b3a;
    --sc-primary-dark:    #124d2a;
    --sc-primary-light:   #e8f4ed;
    --sc-success:         #198754;
    --sc-warning:         #b35a00;
    --sc-danger:          #b91c1c;
    --sc-text:            #1a1a1a;
    --sc-text-muted:      #555;
    --sc-border:          #ccc;
    --sc-border-light:    #e8e8e8;
    --sc-surface:         #fff;
    --sc-bg:              #f0f4f1;
    --sc-radius:          8px;
    --sc-radius-lg:       12px;
    --sc-shadow:          0 2px 8px rgba(0,0,0,.12);
    --sc-shadow-card:     0 1px 4px rgba(0,0,0,.08);
    --sc-tap-height:      56px;
    --sc-tap-lg:          64px;
}

/* ── Global box sizing ──────────────────────────────────────────────────────── */

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

/* ── Base ───────────────────────────────────────────────────────────────────── */

body {
    background: var(--sc-bg);
    color: var(--sc-text);
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1rem;
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
}

/* All anchors: no underline by default; set colour; neutralise UA text-decoration */
a { color: var(--sc-primary); -webkit-tap-highlight-color: transparent; text-decoration: none; }

/* Form controls must inherit font — browser defaults (often serif) not acceptable on TC21 */
button, input, select, textarea { font-family: inherit; font-size: inherit; }

/* ── Topbar ─────────────────────────────────────────────────────────────────── */

.sc-topbar {
    background: var(--sc-primary);
    color: #fff;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

.sc-topbar__brand {
    display: flex;
    align-items: center;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    text-decoration: none;
    flex-shrink: 0;
}

.sc-topbar__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,.2);
    border-radius: 6px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .04em;
    flex-shrink: 0;
    margin-right: .5rem; /* explicit margin — gap: not supported in Chrome <84 */
}

.sc-topbar__user {
    font-size: .82rem;
    color: rgba(255,255,255,.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    flex: 1;
    min-width: 0;
}

.sc-topbar__actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.sc-topbar__logout {
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    border-radius: var(--sc-radius);
    padding: .35rem .75rem;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    margin-left: .5rem; /* explicit margin — replaces gap on actions flex container */
}

.sc-topbar__logout:hover,
.sc-topbar__logout:focus {
    background: rgba(255,255,255,.25);
    color: #fff;
    text-decoration: none;
    outline: 2px solid rgba(255,255,255,.5);
}

/* ── Main content wrapper ───────────────────────────────────────────────────── */

.sc-main {
    padding: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ── Page header ────────────────────────────────────────────────────────────── */

.sc-page-header {
    margin-bottom: 1.125rem;
}

.sc-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .85rem;
    color: var(--sc-primary);
    text-decoration: none;
    margin-bottom: .5rem;
    font-weight: 500;
    min-height: 36px;
}

.sc-page-header__back:hover,
.sc-page-header__back:focus {
    text-decoration: underline;
    color: var(--sc-primary-dark);
}

.sc-page-header__heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sc-text);
    margin: 0 0 .2rem;
    line-height: 1.2;
}

.sc-page-header__sub {
    font-size: .9rem;
    color: var(--sc-text-muted);
    margin: 0;
}

/* ── Section header ─────────────────────────────────────────────────────────── */

.sc-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .75rem;
}

.sc-section-header__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sc-text);
    margin: 0;
}

.sc-section-header__count {
    font-size: .85rem;
    font-weight: 400;
    color: var(--sc-text-muted);
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */

.sc-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow);
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.sc-card--highlight {
    border-color: var(--sc-primary);
    border-width: 2px;
    background: var(--sc-primary-light);
}

.sc-card--next-stage {
    border-color: var(--sc-primary);
    border-width: 2px;
    background: var(--sc-primary-light);
    box-shadow: 0 3px 12px rgba(26,107,58,.15);
}

.sc-card__label {
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sc-primary);
    margin-bottom: .3rem;
    display: flex;
    align-items: center;
    gap: .3rem;
}

.sc-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--sc-text);
    margin: 0 0 .25rem;
}

.sc-card--next-stage .sc-card__title {
    font-size: 1.5rem;
}

.sc-card__subtitle {
    font-size: .9rem;
    color: var(--sc-text-muted);
    margin: 0;
}

/* ── Nav cards (home screen) ────────────────────────────────────────────────── */

/*
 * TC21 fix: display:flex on an <a> element is unreliable on older Android WebViews —
 * the UA underline styling can still apply even with class-level overrides, and the
 * flex layout may not initialise correctly.  Solution: make the <a> display:block
 * (reliable on all platforms) and put the flex layout on an inner __inner div.
 *
 * -webkit- prefixes on the inner flex container handle Chrome <84.
 * gap replaced with explicit margin-right on icon (gap requires Chrome ≥84).
 */
.sc-nav-card {
    display: block;
    background: var(--sc-surface);
    border: 2px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-card);
    padding: 1rem 1.125rem;
    margin-bottom: .75rem;
    text-decoration: none;
    color: var(--sc-text);
    transition: border-color .15s, background .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
}

/* Type+class selectors override any UA pseudo-class rule (a:any-link, a:link, a:visited) */
a.sc-nav-card,
a.sc-nav-card:link,
a.sc-nav-card:visited,
a.sc-nav-card:hover,
a.sc-nav-card:focus {
    text-decoration: none;
    color: var(--sc-text);
}

.sc-nav-card:hover,
.sc-nav-card:focus {
    border-color: var(--sc-primary);
    color: var(--sc-text);
    outline: none;
}

.sc-nav-card:active { transform: scale(.99); }

.sc-nav-card--primary {
    border-color: var(--sc-primary);
    background: var(--sc-primary-light);
}

/* Inner flex row — separates block-display of anchor from flex layout of contents */
.sc-nav-card__inner {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    min-height: 48px;
}

.sc-nav-card__icon {
    width: 46px;
    height: 46px;
    border-radius: var(--sc-radius);
    background: var(--sc-primary);
    color: #fff;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    font-size: 1.35rem;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    margin-right: .875rem; /* explicit margin — replaces gap (gap requires Chrome ≥84) */
}

.sc-nav-card--primary .sc-nav-card__icon {
    background: var(--sc-primary-dark);
}

.sc-nav-card__body { -webkit-flex: 1; flex: 1; min-width: 0; }
.sc-nav-card__title { font-size: 1rem; font-weight: 700; margin: 0; color: var(--sc-text); }
.sc-nav-card__sub { font-size: .82rem; color: var(--sc-text-muted); margin: .1rem 0 0; }

/* margin-left: auto keeps chevron flush-right regardless of gap support */
.sc-nav-card__arrow { color: var(--sc-text-muted); font-size: 1.15rem; -webkit-flex-shrink: 0; flex-shrink: 0; margin-left: auto; padding-left: .625rem; }

/* ── Delivery cards ─────────────────────────────────────────────────────────── */

.sc-delivery-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-left: 4px solid var(--sc-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-card);
    padding: 1rem 1.125rem;
    margin-bottom: .75rem;
    display: block;
    text-decoration: none;
    color: var(--sc-text);
    transition: border-color .15s, transform .1s;
}

.sc-delivery-card:hover,
.sc-delivery-card:focus {
    border-color: var(--sc-primary);
    border-left-color: var(--sc-primary);
    color: var(--sc-text);
    text-decoration: none;
    outline: none;
}

.sc-delivery-card:active { transform: scale(.99); }

.sc-delivery-card--planned {
    border-left-color: var(--sc-primary);
}

.sc-delivery-card--draft {
    border-left-color: #aaa;
}

.sc-delivery-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .4rem;
}

.sc-delivery-card__ref {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--sc-text);
    margin: 0;
    line-height: 1.2;
}

.sc-delivery-card__meta {
    font-size: .85rem;
    color: var(--sc-text-muted);
    margin: .2rem 0 0;
    line-height: 1.4;
}

.sc-delivery-card__pods {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--sc-primary);
}

/* ── Stage cards — mobile card layout ───────────────────────────────────────── */
/*
 * Each stage is a self-contained card with vertical stacking:
 * name → badges row → meta text → action button (full width).
 * This avoids the flex-row-with-badges pattern that overflowed at 360 px.
 */

.sc-stage-card {
    background: #fff;
    border: 1px solid var(--sc-border-light);
    border-radius: var(--sc-radius);
    padding: .875rem 1rem;
    margin-bottom: .5rem;
    /* Defensive: constrain children to card width */
    max-width: 100%;
    overflow: hidden;
}

.sc-stage-card:last-child { margin-bottom: 0; }

.sc-stage-card--ready {
    border-color: var(--sc-primary);
    border-left: 3px solid var(--sc-primary);
    background: var(--sc-primary-light);
}

.sc-stage-card--complete {
    border-color: #d0e8d8;
    background: #f8fdf9;
}

.sc-stage-card--locked {
    background: #fafafa;
}

/* Stage name — full width, wraps naturally (no white-space constraint) */
.sc-stage-card__name {
    font-weight: 700;
    font-size: .975rem;
    color: var(--sc-text);
    line-height: 1.3;
    margin-bottom: .3rem;
}

.sc-stage-card--complete .sc-stage-card__name { color: #555; }
.sc-stage-card--locked .sc-stage-card__name { color: #777; }

/* Badges sit on their own row below the name */
.sc-stage-card__badges {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .4rem;
}

/* Spacing between adjacent badges without relying on gap (Chrome <84 compat) */
.sc-stage-card__badges > .sc-badge {
    margin-right: .3rem;
    margin-bottom: .2rem;
}

.sc-stage-card__meta {
    font-size: .8rem;
    color: var(--sc-text-muted);
    margin-bottom: .5rem;
    line-height: 1.4;
}

/* Action button is full width within the card */
.sc-stage-card__action { margin-top: .5rem; }

/* ── Count badge (large number) ─────────────────────────────────────────────── */

.sc-count-badge {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--sc-primary);
    color: #fff;
    border-radius: var(--sc-radius);
    padding: .5rem .875rem;
    min-width: 3.5rem;
    text-align: center;
    flex-shrink: 0;
}

.sc-count-badge__number {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.sc-count-badge__label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: .1rem;
}

/* ── Empty state ────────────────────────────────────────────────────────────── */

.sc-empty-state {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--sc-text-muted);
}

.sc-empty-state__icon {
    font-size: 2.5rem;
    display: block;
    margin-bottom: .75rem;
    color: #bbb;
}

.sc-empty-state__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #555;
    margin: 0 0 .4rem;
}

.sc-empty-state__text { font-size: .9rem; margin: 0; }

/* ── Scan input ─────────────────────────────────────────────────────────────── */

.sc-scan-box {
    background: var(--sc-surface);
    border: 2px solid var(--sc-primary);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow);
    padding: 1.125rem 1.25rem;
    margin-bottom: .75rem;
}

.sc-scan-header {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sc-primary);
    margin-bottom: .625rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.sc-scan-input {
    width: 100%;
    height: 56px;
    font-size: 1.2rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    border: 2px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: .625rem 1rem;
    background: #f8fafa;
    color: var(--sc-text);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: .625rem;
}

.sc-scan-input:focus {
    outline: none;
    border-color: var(--sc-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(26,107,58,.2);
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.sc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    min-height: var(--sc-tap-height);
    font-size: 1.05rem;
    font-weight: 600;
    border: none;
    border-radius: var(--sc-radius);
    cursor: pointer;
    text-decoration: none;
    transition: filter .15s, transform .1s, background .12s;
    padding: .75rem 1.25rem;
    box-sizing: border-box;
}

/* Icon inside button: explicit spacing, no gap (Chrome <84 compat) */
.sc-btn > i { margin-right: .4rem; }
.sc-btn > i:last-child { margin-right: 0; margin-left: .4rem; }

.sc-btn:active { transform: scale(.98); }

.sc-btn--primary {
    background: var(--sc-primary);
    color: #fff;
}

.sc-btn--primary:hover,
.sc-btn--primary:focus {
    background: var(--sc-primary-dark);
    color: #fff;
    text-decoration: none;
    outline: 2px solid var(--sc-primary);
    outline-offset: 2px;
}

.sc-btn--secondary {
    background: #e8e8e8;
    color: var(--sc-text);
}

.sc-btn--secondary:hover,
.sc-btn--secondary:focus {
    background: #d8d8d8;
    color: var(--sc-text);
    text-decoration: none;
}

.sc-btn--outline {
    background: #fff;
    color: var(--sc-primary);
    border: 2px solid var(--sc-primary);
}

.sc-btn--outline:hover,
.sc-btn--outline:focus {
    background: var(--sc-primary-light);
    color: var(--sc-primary);
    text-decoration: none;
}

.sc-btn--danger {
    background: var(--sc-danger);
    color: #fff;
    border: none;
}

.sc-btn--danger:hover,
.sc-btn--danger:focus {
    background: #991515;
    color: #fff;
    text-decoration: none;
}

.sc-btn--sm {
    min-height: 44px;
    font-size: .95rem;
    padding: .5rem 1rem;
}

.sc-btn--lg {
    min-height: var(--sc-tap-lg);
    font-size: 1.125rem;
    padding: 1rem 1.5rem;
}

/* Pod code heading — larger on desktop, controlled on narrow screens */
.sc-card__title--pod { font-size: 1.75rem; line-height: 1.1; }

/* ── Progress bar ───────────────────────────────────────────────────────────── */

.sc-progress {
    background: #dce8e0;
    border-radius: 99px;
    height: 14px;
    overflow: hidden;
    margin: .5rem 0;
}

.sc-progress__fill {
    background: var(--sc-primary);
    height: 100%;
    border-radius: 99px;
    transition: width .4s ease;
    min-width: 4px;
}

.sc-progress__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: .35rem;
}

/* ── Status badges ──────────────────────────────────────────────────────────── */

.sc-badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .25rem .625rem;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

/* Production statuses */
.sc-badge--complete    { background: #d1e8d9; color: #0d4a22; }
.sc-badge--progress    { background: #fff0d0; color: #7a4000; }
.sc-badge--in-progress { background: #fff0d0; color: #7a4000; }
.sc-badge--not-started { background: #e8e8e8; color: #444; }
.sc-badge--inactive    { background: #f0d0d0; color: #6b0000; }

/* Stage eligibility */
.sc-badge--ready  { background: var(--sc-primary-light); color: var(--sc-primary); border: 1px solid rgba(26,107,58,.2); }
.sc-badge--locked { background: #f0f0f0; color: #666; }

/* Stage type */
.sc-badge--on-pod  { background: #e0ecff; color: #1a3a8a; }
.sc-badge--off-pod { background: #fff3e0; color: #7a3a00; }

/* Delivery statuses */
.sc-badge--draft      { background: #f0f0f0; color: #444; }
.sc-badge--planned    { background: #e0ecff; color: #1a3a8a; }
.sc-badge--dispatched { background: #d1e8d9; color: #0d4a22; }

/* ── Stage list (legacy — kept for pages not yet redesigned) ────────────────── */

.sc-stage-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sc-stage-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid #eee;
}

.sc-stage-item:last-child { border-bottom: none; }

.sc-stage-item__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.sc-stage-item__icon--complete {
    background: var(--sc-success);
    color: #fff;
}

.sc-stage-item__icon--pending {
    background: #e0e0e0;
    color: #666;
}

.sc-stage-item__body { flex: 1; min-width: 0; }

.sc-stage-item__name {
    font-weight: 600;
    font-size: .95rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.sc-stage-item__dept { font-size: .8rem; color: var(--sc-text-muted); }

.sc-stage-item__action { flex-shrink: 0; }

.sc-stage-item--highlight {
    background: #f0faf3;
    border-radius: 6px;
    padding-left: .5rem;
    padding-right: .5rem;
    margin: 0 -.5rem;
}

/* ── History ────────────────────────────────────────────────────────────────── */

.sc-history-toggle {
    width: 100%;
    background: #fff;
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: .85rem 1rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--sc-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 52px;
    text-align: left;
}

.sc-history-toggle:focus {
    outline: 2px solid var(--sc-primary);
    outline-offset: 2px;
}

.sc-history-list {
    list-style: none;
    padding: .5rem 0 0;
    margin: 0;
}

.sc-history-item {
    padding: .625rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: .875rem;
}

.sc-history-item:last-child { border-bottom: none; }

.sc-history-item__event {
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sc-history-item__event--completed { color: var(--sc-primary); }
.sc-history-item__event--reopened  { color: var(--sc-warning); }
.sc-history-item__stage { font-weight: 600; }
.sc-history-item__meta  { color: var(--sc-text-muted); font-size: .8rem; }

/* ── Alert / notice ─────────────────────────────────────────────────────────── */

.sc-alert {
    border-radius: var(--sc-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-start;
}

.sc-alert--success {
    background: #d1e8d9;
    border: 1px solid #5aaa7a;
    color: #0d4a22;
}

.sc-alert--danger {
    background: #f8d7da;
    border: 1px solid #e07080;
    color: #6b0000;
}

.sc-alert--warning {
    background: #fff0d0;
    border: 1px solid #e09030;
    color: #7a4000;
}

.sc-alert--info {
    background: #d0e8f8;
    border: 1px solid #4090c8;
    color: #003060;
}

.sc-alert__icon {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: .05rem;
    margin-right: .75rem; /* explicit margin — replaces gap (gap requires Chrome ≥84) */
}

.sc-alert__body { font-size: .95rem; font-weight: 500; line-height: 1.5; }

/* ── Auth card ──────────────────────────────────────────────────────────────── */

.sc-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: var(--sc-primary-dark);
}

.sc-auth-card {
    background: #fff;
    border-radius: var(--sc-radius-lg);
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
    width: 100%;
    max-width: 420px;
    padding: 2rem 1.75rem;
}

.sc-auth-brand {
    display: flex;
    align-items: center;
    gap: .625rem;
    margin-bottom: 1.75rem;
}

.sc-auth-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--sc-primary);
    color: #fff;
    font-weight: 800;
    font-size: .85rem;
    border-radius: var(--sc-radius);
    letter-spacing: .04em;
    flex-shrink: 0;
}

.sc-auth-brand-text  { line-height: 1.2; }
.sc-auth-brand-name  { font-size: 1rem; font-weight: 700; color: var(--sc-text); display: block; }
.sc-auth-brand-sub   { font-size: .78rem; color: var(--sc-text-muted); display: block; }
.sc-auth-title       { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--sc-text); }

/* ── Form helpers ───────────────────────────────────────────────────────────── */

.sc-form-label {
    display: block;
    font-weight: 600;
    font-size: .95rem;
    margin-bottom: .35rem;
    color: var(--sc-text);
}

.sc-form-control {
    width: 100%;
    min-height: var(--sc-tap-height);
    font-size: 1rem;
    border: 2px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding: .75rem 1rem;
    color: var(--sc-text);
    background: #fff;
    margin-bottom: 1rem;
    box-sizing: border-box;
}

.sc-form-control:focus {
    outline: none;
    border-color: var(--sc-primary);
    box-shadow: 0 0 0 3px rgba(26,107,58,.2);
}

/* ── Utility ────────────────────────────────────────────────────────────────── */

.sc-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 1rem 0;
}

.sc-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ── Accessibility focus ring ───────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid var(--sc-primary);
    outline-offset: 2px;
}

/* ── Link anchor overrides — TC21 Android WebView compatibility ─────────────── */
/*
 * The base a { text-decoration: none } rule covers most cases.
 * These type+class selectors (specificity 0,1,1) also override a:any-link and
 * a:link UA pseudo-class rules on older WebViews as a belt-and-braces measure.
 */
a.sc-delivery-card,
a.sc-delivery-card:link,
a.sc-delivery-card:visited,
a.sc-delivery-card:hover,
a.sc-delivery-card:focus {
    text-decoration: none;
    color: var(--sc-text);
}

a.sc-btn,
a.sc-btn:link,
a.sc-btn:visited,
a.sc-btn:hover,
a.sc-btn:focus {
    text-decoration: none;
}

/* ── Responsive — TC21 narrow viewport (≤430px) ─────────────────────────────── */
/*
 * Targets Zebra TC21 portrait at ≈360–414px CSS viewport width.
 * Tighter layout; smaller typography; no horizontal overflow.
 */
@media (max-width: 430px) {
    /* Header: hide display name — brand mark + app name + Sign Out remain */
    .sc-topbar__user { display: none; }

    /* Page content: tighter side padding */
    .sc-main { padding: .75rem; }

    /* Cards: reduce internal padding so stage cards fit on 360px */
    .sc-card { padding: 1rem; }
    .sc-stage-card { padding: .625rem .75rem; }

    /* Pod code heading — reduce from 1.75rem to avoid dominating the screen */
    .sc-card__title--pod { font-size: 1.35rem; }

    /* Next Stage card title — reduce from 1.5rem */
    .sc-card--next-stage .sc-card__title { font-size: 1.2rem; }

    /* Page-level heading */
    .sc-page-header__heading { font-size: 1.25rem; }

    /* Section headers */
    .sc-section-header__title { font-size: .9rem; }

    /* Nav card: slightly tighter on narrow screens */
    .sc-nav-card { padding: .875rem 1rem; }
    .sc-nav-card__icon { width: 40px; height: 40px; font-size: 1.2rem; margin-right: .75rem; }
    .sc-nav-card__title { font-size: .95rem; }
    .sc-nav-card__sub { font-size: .78rem; }

    /* Buttons — already full width; reduce min-height slightly to save vertical space */
    .sc-btn--lg { min-height: 56px; font-size: 1.05rem; }
    .sc-btn--sm { min-height: 44px; font-size: .9rem; padding: .5rem .875rem; }

    /* Scan box — tighter spacing */
    .sc-scan-box { padding: 1rem; }
}