/**
 * Yard Management System — Design System
 * Mobile-first, touch-first, Bootstrap 5 extensions
 */

/* ── Design Tokens ── */
:root {
    --navy: #0a1e3d;
    --navy-dark: #06132a;
    --navy-light: #1a3a6b;
    --gold: #f5a623;
    --gold-dark: #d4901a;
    --gold-light: #ffc857;
    --bg-body: #f0f2f5;
    --bg-card: #ffffff;
    --text-primary: #1a1d21;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
    --shadow: 0 4px 6px rgba(0,0,0,0.04), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.08), 0 4px 10px rgba(0,0,0,0.04);
    --shadow-xl: 0 20px 40px rgba(0,0,0,0.1);
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --font: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* ── Base ── */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg-body);
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input, select, textarea { font-size: 1rem !important; }

/* ── Role Accent Strip ── */
.role-strip { height: 3px; width: 100%; }

/* ── Navbar ── */
.yard-nav {
    background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 100%) !important;
    padding: 0.6rem 1rem;
    z-index: 1040;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.yard-nav .navbar-brand { font-weight: 700; font-size: 1.1rem; letter-spacing: 0.5px; }
.yard-nav .btn-sm { min-height: 36px; min-width: 36px; }
.lang-btn { font-size: 0.75rem !important; line-height: 1.5; }

/* ── Offcanvas (mobile nav) ── */
.yard-offcanvas {
    background: linear-gradient(180deg, var(--navy-dark), var(--navy));
    max-width: 300px;
    border-left: 1px solid rgba(255,255,255,0.08);
}
.yard-offcanvas .nav-link {
    padding: 0.85rem 1.25rem;
    border-radius: var(--radius);
    font-size: 0.95rem;
    font-weight: 500;
    transition: background var(--transition);
}
.yard-offcanvas .nav-link:hover,
.yard-offcanvas .nav-link:active { background: rgba(255,255,255,0.08); }

/* ── Breadcrumb ── */
.yard-breadcrumb {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.yard-breadcrumb a { color: var(--navy); text-decoration: none; }

/* ── Offline Bar ── */
.offline-bar {
    background: var(--gold);
    color: #000;
    text-align: center;
    padding: 0.35rem;
    font-weight: 600;
    font-size: 0.85rem;
}

/* ── Cards ── */
.card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: var(--bg-card);
    overflow: hidden;
    transition: box-shadow var(--transition);
}
.card:hover { box-shadow: var(--shadow); }
.card-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: #fff;
    font-weight: 600;
    padding: 0.85rem 1.25rem;
    border-bottom: none;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
}

/* ── Action Card (dashboard) ── */
.action-card {
    border-radius: var(--radius-xl);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 130px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}
.action-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-light));
    opacity: 0;
    transition: opacity var(--transition);
}
.action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}
.action-card:hover::before { opacity: 1; }
.action-card:active { transform: translateY(-1px) scale(0.98); }
.action-card .action-icon {
    font-size: 2.2rem;
    margin-bottom: 0.6rem;
    transition: transform var(--transition);
}
.action-card:hover .action-icon { transform: scale(1.1); }
.action-card .action-count {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}
.action-card .action-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.35rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Buttons ── */
.btn {
    border-radius: var(--radius);
    font-weight: 600;
    transition: all var(--transition);
    letter-spacing: 0.01em;
}
.btn-gold {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
    color: #fff;
    border: none;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.btn-gold:hover, .btn-gold:active {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(245,166,35,0.35);
}
.btn-navy {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
    color: #fff;
    border: none;
}
.btn-navy:hover {
    background: linear-gradient(135deg, var(--navy-light) 0%, var(--navy) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(10,30,61,0.35);
}
.btn-touch { min-height: 52px; font-size: 1rem; padding: 0.7rem 1.5rem; }
.btn-touch-lg { min-height: 56px; font-size: 1.1rem; padding: 0.8rem 1.75rem; }

/* ── Forms ── */
.form-control, .form-select {
    min-height: 48px;
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    font-size: 1rem;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: var(--bg-card);
}
.form-control:focus, .form-select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(245,166,35,0.15);
}
.form-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Toggle Buttons (Pass/Fail/Yes/No) ── */
.toggle-group { display: flex; gap: 0.5rem; width: 100%; }
.toggle-btn {
    flex: 1;
    min-height: 64px;
    font-size: 1.1rem;
    font-weight: 700;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.toggle-btn:hover { border-color: #adb5bd; background: #f8f9fa; }
.toggle-btn:active { transform: scale(0.96); }
.toggle-btn.active-pass {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(34,197,94,0.3);
}
.toggle-btn.active-fail {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(239,68,68,0.3);
}
.toggle-btn.active-na {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    border-color: transparent;
    color: #fff;
}

/* ── Inspection Item Card ── */
.inspection-item {
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: all var(--transition);
}
.inspection-item.item-pass {
    border-color: #22c55e;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}
.inspection-item.item-fail {
    border-color: #ef4444;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
}
.inspection-item .item-label {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.inspection-item .item-label i { font-size: 1.25rem; color: var(--navy); }

/* ── Carrier Chips (quick-tap) ── */
.carrier-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* 48px minimum: these were ~40px, the smallest target on the check-in form, and the list grew
   from 10 chips to 18 on 2026-09-04 — so the smallest target also became the most numerous. A
   tablet in the sun, in gloves, is the whole operating environment. */
.carrier-chip {
    min-height: 48px;
    padding: 0.6rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.carrier-chip:hover { border-color: var(--navy-light); background: #f1f5f9; }
.carrier-chip:active { transform: scale(0.95); }
.carrier-chip.active {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(10,30,61,0.3);
}

/* ── Dock Door Grid ── */
.door-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.6rem;
}
.door-tile {
    min-height: 100px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--transition);
    border: 2px solid transparent;
    text-decoration: none;
    color: inherit;
    position: relative;
    overflow: hidden;
}
.door-tile:hover { transform: scale(1.04); box-shadow: var(--shadow-lg); }
.door-tile:active { transform: scale(0.97); }
.door-tile .door-num { font-size: 1.6rem; font-weight: 900; line-height: 1; }
.door-tile .door-status { font-size: 0.65rem; font-weight: 600; margin-top: 0.25rem; opacity: 0.8; }
.door-tile.door-available {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #86efac;
    color: #166534;
}
.door-tile.door-occupied {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #fbbf24;
    color: #92400e;
}
.door-tile.door-loading {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    border-color: #60a5fa;
    color: #1e40af;
}

/* ── Yard Spot Grid ── */
.spot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 4px;
}
.spot-cell {
    min-height: 80px;
    min-width: 80px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.spot-cell.spot-empty { background: linear-gradient(135deg, #dcfce7, #bbf7d0); color: #166534; }
.spot-cell.spot-occupied { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; }

/* ── Wizard Steps ── */
.wizard-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    opacity: 0.5;
}
.wizard-step.active { color: var(--navy); opacity: 1; }
.wizard-step.completed { color: #22c55e; opacity: 1; }
.wizard-step .step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
    transition: all var(--transition);
}
.wizard-step.active .step-num {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: #fff;
    box-shadow: 0 4px 12px rgba(10,30,61,0.3);
}
.wizard-step.completed .step-num {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(34,197,94,0.3);
}
.wizard-connector { width: 40px; height: 2px; background: var(--border); align-self: center; }

/* ── Signature Pad ── */
.signature-container {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    position: relative;
    overflow: hidden;
}
.signature-container canvas { display: block; width: 100%; height: 200px; }

/* ── Progress Bar ── */
.progress-thick { height: 12px; border-radius: 6px; }

/* ── Toast Notifications ── */
.yard-toast { position: fixed; bottom: 1rem; right: 1rem; z-index: 9999; max-width: 350px; }

/* ── Floating Action Button ── */
.fab {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: #fff;
    border: none;
    box-shadow: 0 6px 20px rgba(245,166,35,0.4);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1030;
    transition: all var(--transition);
}
.fab:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 25px rgba(245,166,35,0.5);
}

/* ── Status Badges ── */
.badge {
    font-weight: 700;
    font-size: 0.75rem;
    border-radius: 999px;
    padding: 0.3em 0.7em;
    letter-spacing: 0.02em;
}

/* ── Trailer Age Indicators ── */
.age-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 4px; vertical-align: middle; }
.age-green { background: #22c55e; }
.age-yellow { background: #f59e0b; }
.age-red { background: #ef4444; }

/* ── Tables ── */
.table-yard { border-radius: var(--radius-lg); overflow: hidden; }
.table-yard th {
    background: linear-gradient(135deg, var(--navy), var(--navy-light));
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    border: none;
    padding: 0.75rem 0.85rem;
}
.table-yard td {
    vertical-align: middle;
    font-size: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--border);
}
.table-yard tbody tr:hover td { background: rgba(245,166,35,0.04); }

/* ── Empty State ── */
.empty-state { text-align: center; padding: 3rem 2rem; color: var(--text-muted); }
.empty-state i { font-size: 4rem; margin-bottom: 1rem; opacity: 0.3; display: block; }
.empty-state p { font-size: 1.05rem; font-weight: 500; max-width: 300px; margin: 0 auto; }

/* ── Notification Dropdown ── */
.notification-dropdown .dropdown-item { transition: background var(--transition); }
.notification-dropdown .dropdown-item:hover { background: rgba(245,166,35,0.06); }

/* ── Skeleton Loader ── */
.skeleton {
    background: linear-gradient(90deg, #e5e7eb 0%, #f3f4f6 50%, #e5e7eb 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius);
    min-height: 20px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-card { height: 130px; border-radius: var(--radius-xl); }
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-text.w-75 { width: 75%; }
.skeleton-text.w-50 { width: 50%; }

/* ── Ripple Effect ── */
.ripple { position: relative; overflow: hidden; }
.ripple::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s, opacity 0.4s;
    opacity: 0;
}
.ripple:active::after { width: 300px; height: 300px; opacity: 1; transition: 0s; }

/* ── Scan Feedback ── */
@keyframes scanFlash { 0% { background: rgba(34,197,94,0.2); } 100% { background: transparent; } }
.scan-flash { animation: scanFlash 0.4s ease; }

/* ── Pulse Animation ── */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.pulse { animation: pulse 1.5s infinite; }

/* ── Responsive ── */
main.container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }

@media (min-width: 768px) {
    main.container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
    .door-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
    .spot-grid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
}
@media (min-width: 1024px) {
    main.container-fluid { padding-left: 2rem; padding-right: 2rem; }
    .action-card { min-height: 140px; }
}
@media (min-width: 1280px) {
    main.container-fluid { max-width: 1400px; margin: 0 auto; }
}

/* ── Keyboard Focus Indicators ── */
.toggle-btn:focus-visible,
.carrier-chip:focus-visible,
.door-tile:focus-visible,
.spot-cell:focus-visible,
.action-card:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 2px;
}
.form-control:focus-visible,
.form-select:focus-visible {
    outline: none; /* Already has box-shadow focus */
}
a:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Extra-small screens ── */
@media (max-width: 374px) {
    .door-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
    .spot-grid { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
    .btn-touch { min-height: 46px; padding: 0.5rem 1rem; font-size: 0.9rem; }
    .btn-touch-lg { min-height: 50px; padding: 0.6rem 1.25rem; font-size: 1rem; }
    h1.h4, .h4 { font-size: 1.1rem; }
    .card-header { font-size: 0.88rem; padding: 0.7rem 1rem; }
    .action-card { min-height: 110px; padding: 1rem; }
    .action-card .action-count { font-size: 1.6rem; }
    .action-card .action-label { font-size: 0.72rem; }
    .action-card .action-icon { font-size: 1.8rem; }
}

/* ── Phase-Locked States ── */
.phase-locked {
    position: relative;
    pointer-events: none;
    user-select: none;
    cursor: default;
    border-radius: inherit;
}
.phase-locked > *:not(.phase-badge) {
    opacity: 0.3;
    filter: grayscale(85%);
    transition: opacity 0.2s;
}
.phase-locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.1);
    border-radius: inherit;
    z-index: 1;
}
.phase-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(99,102,241,0.35);
    pointer-events: auto;
    cursor: help;
    white-space: nowrap;
}
.phase-nav-locked {
    opacity: 0.45;
    cursor: help;
    display: flex;
    align-items: center;
    padding: 0.4rem 1rem;
    color: rgba(255,255,255,0.5) !important;
    pointer-events: auto;
}
.phase-nav-locked:hover {
    opacity: 0.55;
}
.phase-nav-locked .badge {
    pointer-events: auto;
    cursor: help;
}
.phase-locked-btn {
    opacity: 0.35;
    pointer-events: none;
    cursor: default;
    filter: grayscale(80%);
}
.hero-card.phase-locked {
    border-color: #e5e7eb;
    background: #f9fafb;
}
.action-card.phase-locked,
.util-card.phase-locked {
    background: #f3f4f6 !important;
}
/* ── Print ── */
@media print {
    /* Force white bg + black text so dark/HC pages don't waste toner */
    html, body { background: #fff !important; color: #000 !important; }
    .card, .table, .table-yard, .table-yard td, .table-yard th, main, nav, section, article {
        background: #fff !important;
        color: #000 !important;
    }
    .yard-nav, .role-strip, .yard-breadcrumb, .fab, .offline-bar, .yard-offcanvas,
    .phase-locked, .phase-badge, .phase-nav-locked,
    #walkthroughBanner, .sandbox-banner, .toast-container { display: none !important; }
    main { padding: 0 !important; }
    a { color: #000 !important; text-decoration: none !important; }
    a[href]:after { content: ""; }
}

/* ── Uppercase data entry (presentation) ───────────────────────────────────────
   Text/search inputs and selects display in UPPERCASE across YMS Pro for a clean,
   consistent gate-log look. Casing-sensitive fields (email, phone, password, date,
   number) and free-text notes (textarea) are left alone; add class "no-upper" to opt
   any single field out. Placeholders stay normal-case so they don't shout. */
input.form-control:not([type="email"]):not([type="tel"]):not([type="password"]):not([type="date"]):not([type="time"]):not([type="datetime-local"]):not([type="number"]):not([type="color"]):not(.no-upper),
.form-select:not(.no-upper) {
    text-transform: uppercase;
}
.form-control::placeholder { text-transform: none; }

/* Data tables display in UPPERCASE too — guard names, statuses, load/gate/purpose, etc. — for the
   same consistent gate-log presentation as the inputs. Display-only (stored values are unchanged).
   Opt a whole table out with class "no-upper", or a single cell with td.no-upper. */
.table:not(.no-upper) td:not(.no-upper) { text-transform: uppercase; }

/* Form field + toggle labels in UPPERCASE too (e.g. "LIVE LOAD (DRIVER WAITING)"), for a uniform
   gate-form look. Help-text hints (.form-text) deliberately stay normal-case so instructions read
   naturally. Opt out with .no-upper. */
.form-label:not(.no-upper), .form-check-label:not(.no-upper) { text-transform: uppercase; }

/* Checkout & other list displays in UPPERCASE too: the ready-for-checkout list, the versatile
   lookup results, and the selected trailer's detail values (trailer/driver/carrier/location). */
.list-group-item:not(.no-upper) { text-transform: uppercase; }
#trailerDetail [id^="detail"] { text-transform: uppercase; }

/* Buttons in UPPERCASE too (e.g. the All/East/West side filter, Same/Drop&Hook/Bobtail, actions). */
.btn:not(.no-upper) { text-transform: uppercase; }

/* ── Long-list readability ──────────────────────────────────────────────────
   Trailer lists/tables blend together on long screens. Add alternating row shading
   + a clear divider so each row stands apart. Neutral overlay works in light, dark
   and high-contrast themes. Opt a table out with .no-stripe. */
.table:not(.no-stripe) > tbody > tr:nth-child(even) > td { background-color: rgba(128,128,128,0.10); }
.list-group-flush > .list-group-item { border-bottom: 1px solid rgba(128,128,128,0.35); }
.list-group-flush > .list-group-item:nth-child(even) { background-color: rgba(128,128,128,0.10); }
.list-group-flush > .list-group-item-action:hover { background-color: rgba(13,110,253,0.14); }

/* The check-in Next button sits at the bottom of a form about two viewports tall, and so do the
   two required fields its validation complains about. Sticking it to the bottom means the guard
   can always act, and always sees the message, without scrolling back and forth.
   Only on small/medium screens: on a desktop the whole form is already visible. */
@media (max-width: 991.98px) {
    .checkin-next-sticky {
        position: sticky;
        bottom: 0;
        z-index: 20;
        padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
        margin-top: 8px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), var(--bg-card, #fff) 35%);
    }
}