/* =================================================================
   SahmExpress — Shared CSS (Sahm Momentum Design System)
   ================================================================= */

body {
    background-color: #070d18;
    color: #e8eef7;
    font-family: 'Sora', 'Inter', sans-serif;
    /* Technical navy + subtle engineering grid backdrop */
    background-image:
        linear-gradient(rgba(40,64,107,.10) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40,64,107,.10) 1px, transparent 1px),
        radial-gradient(circle at top right, #0a1424 0%, #070d18 100%);
    background-size: 32px 32px, 32px 32px, 100% 100%;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Monospace for data: amounts, refs, codes, statuses */
.mono, .tabular-nums, .sx-amount, .font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* ----- CSS Custom Properties (Design Tokens) -------------------- */
:root {
  --sahm-primary: #ff7a00;
  --sahm-primary-dark: #d96500;
  --sahm-secondary: #16c784;
  --sahm-surface: #070d18;
  --sahm-surface-bright: #27406b;
  --sahm-surface-container: #0d1a2e;
  --sahm-surface-low: #0a1424;
  --sahm-success: #16c784;
  --sahm-warning: #ffb020;
  --sahm-error: #ff4d5e;
  --sahm-info: #00d9c0;
  --sahm-line: #1c2e4a;
  --sahm-radius: 4px;
  --sahm-glow: 0 0 0 1px rgba(255, 122, 0, 0.25);
  --sahm-card-shadow: 0 2px 12px -4px rgba(0, 0, 0, 0.5);
}

/* ----- Official Sahm utilities ------------------------------------ */

.sahm-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    /* shadow-sahm-card baked in per the spec */
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
}

.sahm-gradient {
    background: linear-gradient(135deg, #ff8200 0%, #e67300 100%);
}

.sahm-border {
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.sahm-glow {
    box-shadow: 0 0 20px rgba(255, 130, 0, 0.2);
}

.sahm-card {
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
}

.sahm-pulse {
    animation: sahm-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes sahm-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Surface color helpers */
.surface-main     { background-color: var(--sahm-surface); }
.surface-bright   { background-color: var(--sahm-surface-bright); }
.surface-container { background-color: var(--sahm-surface-container); }
.surface-low      { background-color: var(--sahm-surface-low); }

/* Status color helpers */
.text-status-success { color: var(--sahm-success); }
.text-status-warning { color: var(--sahm-warning); }
.text-status-error   { color: var(--sahm-error); }
.text-status-info    { color: var(--sahm-info); }

.bg-status-success { background-color: var(--sahm-success); }
.bg-status-warning { background-color: var(--sahm-warning); }
.bg-status-error   { background-color: var(--sahm-error); }
.bg-status-info    { background-color: var(--sahm-info); }

/* Rounded corners */
.rounded-sahm   { border-radius: var(--sahm-radius); }
.rounded-sahm-lg { border-radius: 6px; }

/* Animation helpers */
.animate-fade-in {
    animation: sahm-fade-in 0.3s ease-out forwards;
}
@keyframes sahm-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-slide-right {
    animation: sahm-slide-right 0.25s ease-out forwards;
}
@keyframes sahm-slide-right {
    from { transform: translateX(-10px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* Headlines auto-pick Hanken Grotesk */
h1, h2, h3, h4, .font-display, [class*="font-headline"] {
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
    letter-spacing: -0.01em;
}

/* ----- DEPRECATED: legacy classes still in use -------------------- */
.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
}

/* ----- Material Symbols ------------------------------------------- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ----- Step indicators (Control Center) --------------------------- */
.step-completed { color: #00a651; }
.step-failed    { color: #ef4444; }
.step-active    { border-left: 4px solid #ff8200; }

/* ----- Status dot ------------------------------------------------- */
.status-dot {
    width: 8px; height: 8px;
    border-radius: 9999px;
    background: #00a651;
    box-shadow: 0 0 0 0 rgba(0, 166, 81, 0.5);
    animation: pulse 2s infinite;
}
.status-dot.degraded {
    background: #ff8200;
    box-shadow: 0 0 0 0 rgba(255, 130, 0, 0.5);
}
.status-dot.down {
    background: #ef4444;
    animation: none;
}

@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 166, 81, 0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(0, 166, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 166, 81, 0); }
}

/* ----- Scrollbars ------------------------------------------------- */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); }

/* ----- Misc ------------------------------------------------------- */
.terminal pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.progress-fill {
    transition: width 0.6s ease-out;
}

.tabular-nums { font-variant-numeric: tabular-nums; }

/* ===================================================================
   v4.18 — Master Template patterns
   ===================================================================
   The official component recipes from the Master Design Template.
   These are the PRIMARY patterns for SahmExpress. The `.data-card`
   family below remains available for dense operational dashboards.
   =================================================================== */

/* Stat card — the canonical KPI tile.
   Pairs glassmorphism with a vivid 4px orange left stripe.
   Use this for: dashboards, vendor portals, financial summaries. */
.stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-left: 4px solid #ff8200;
    border-radius: 4px;
    padding: 1.25rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5),
                0 0 20px rgba(255, 130, 0, 0.15);
}
/* Color variants for the left stripe — swap based on semantic meaning */
.stat-card.success  { border-left-color: #00a651; }
.stat-card.warning  { border-left-color: #ffae3d; }
.stat-card.error    { border-left-color: #ef4444; }
.stat-card.info     { border-left-color: #00e5d0; }

/* Stat card big number — Hanken Grotesk, tabular, with subtle glow */
.stat-card .stat-value {
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
    font-size: 1.875rem;          /* text-3xl */
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.stat-card .stat-label {
    font-size: 0.625rem;          /* text-xs */
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.25rem;
}
.stat-card .stat-suffix {
    color: #ff8200;
    font-size: 0.875rem;
    font-weight: 700;
}

/* TopBar — glassmorphism per the master template */
.topbar-glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Sidebar nav item — neutral state */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
    transition: all 0.15s ease;
}
.nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
}

/* Sidebar nav item — ACTIVE state per master template
   Orange tinted bg + orange right border (RTL-friendly) + bold weight */
.nav-item.active {
    background: rgba(255, 130, 0, 0.10);
    color: #ff8200;
    border-right: 4px solid #ff8200;
    font-weight: 700;
}
.nav-item.active:hover {
    background: rgba(255, 130, 0, 0.15);
    color: #ff8200;
}

/* ===================================================================
   v4.13 — Command-deck data utilities
   ===================================================================
   The "operations center" aesthetic: dense, glowing, data-forward.
   Use these for dashboards, live readouts, fleet status, etc.
   =================================================================== */

/* The base data card — deep navy fill, thin teal accent line at the top,
   subtle glow. Pairs nicely with `.sahm-glass` for translucent variants. */
.data-card {
    position: relative;
    background: rgba(13, 26, 46, 0.75);
    border: 1px solid var(--sahm-line);
    border-radius: var(--sahm-radius);
    padding: 1rem;
    overflow: hidden;
    backdrop-filter: blur(10px) saturate(115%);
    -webkit-backdrop-filter: blur(10px) saturate(115%);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.data-card::before {
    /* Thin teal stripe at the top — the "active data feed" signature */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sahm-info), transparent);
    opacity: 0.6;
}
.data-card:hover {
    border-color: var(--sahm-surface-bright);
    box-shadow: inset 0 0 0 1px rgba(0, 217, 192, 0.10);
}
.data-card.is-hot {
    border-color: rgba(0, 217, 192, 0.45);
    box-shadow: inset 0 0 0 1px rgba(0, 217, 192, 0.30);
}
.data-card.is-warning {
    border-color: rgba(255, 176, 32, 0.35);
}
.data-card.is-warning::before {
    background: linear-gradient(90deg, transparent, var(--sahm-warning), transparent);
}
.data-card.is-error {
    border-color: rgba(255, 77, 94, 0.35);
}
.data-card.is-error::before {
    background: linear-gradient(90deg, transparent, var(--sahm-error), transparent);
}

/* Big readout number — the main stat */
.data-readout {
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    color: #00e5d0;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 12px rgba(0, 229, 208, 0.4);
}
.data-readout-lg {
    font-size: 3rem;
}
.data-readout.is-warning { color: #ffae3d; text-shadow: 0 0 12px rgba(255, 174, 61, 0.4); }
.data-readout.is-error   { color: #ef4444; text-shadow: 0 0 12px rgba(239, 68, 68, 0.4); }
.data-readout.is-primary { color: #ff8200; text-shadow: 0 0 12px rgba(255, 130, 0, 0.4); }

/* Trend delta below a readout (e.g. "+12% ↑") */
.data-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.data-delta-up   { color: #00a651; }
.data-delta-down { color: #ef4444; }
.data-delta-flat { color: rgba(255, 255, 255, 0.4); }

/* Tiny label above a readout — "OPEN COD", "TODAY", etc. */
.data-label {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
}

/* Live dot — green pulse for active streams, larger than .status-dot */
.live-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 9999px;
    background: #00e5d0;
    position: relative;
}
.live-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: #00e5d0;
    opacity: 0.6;
    animation: live-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-ping {
    75%, 100% { transform: scale(2.5); opacity: 0; }
}

/* Sparkline strip — set the SVG width/height, use stroke=currentColor in markup */
.sparkline {
    display: block;
    width: 100%;
    height: 32px;
    color: #00e5d0;
}

/* Dot-grid background — the subtle "ops console" backdrop. Apply to a
   section/main element to evoke the mockups' textured feel. */
.dot-grid {
    background-image: radial-gradient(rgba(0, 229, 208, 0.06) 1px, transparent 1px);
    background-size: 16px 16px;
    background-position: 0 0;
}

/* Section header — small caps with teal underline */
.deck-section {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.deck-section::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 229, 208, 0.3), transparent);
}

/* ----- Sahm logo (HTML-only, no images) --------------------------- *
   The brand mark is rendered inline by `sahm-logo.js`. These rules
   target the elements that helper produces.                          */

.sahm-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.sahm-logo .sahm-logo-mark {
    position: relative;
    width: 3rem; height: 3rem;
    background: #ff8200;
    border-bottom-right-radius: 1rem;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(255, 130, 0, 0.2);
    transform: skewX(-6deg);
}
.sahm-logo .sahm-logo-mark::after {
    /* small white "spark" in the top-right corner */
    content: "";
    position: absolute;
    top: -0.5rem; right: -0.5rem;
    width: 1rem; height: 1rem;
    background: rgba(255, 255, 255, 0.30);
    transform: rotate(45deg);
}
.sahm-logo .sahm-logo-s {
    color: white;
    font-weight: 900;
    font-size: 1.875rem;     /* text-3xl */
    font-style: italic;
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
    line-height: 1;
    /* Counter-skew so the S looks upright inside the leaning square */
    transform: skewX(6deg);
}
.sahm-logo .sahm-logo-words {
    display: flex; flex-direction: column;
    line-height: 1;
}
.sahm-logo .sahm-logo-words .word-sahm {
    color: #ff8200;
    font-weight: 900;
    font-size: 1.5rem;       /* text-2xl */
    letter-spacing: -0.025em;
    text-transform: uppercase;
    font-family: 'Hanken Grotesk', 'Inter', sans-serif;
}
.sahm-logo .sahm-logo-words .word-express {
    color: #00a651;
    font-weight: 700;
    font-size: 0.875rem;     /* text-sm */
    font-style: italic;
    letter-spacing: 0.2em;
    margin-top: 0.125rem;
}

/* Small variant for compact headers / mobile */
.sahm-logo.sahm-logo-sm .sahm-logo-mark { width: 2.25rem; height: 2.25rem; }
.sahm-logo.sahm-logo-sm .sahm-logo-mark::after { width: 0.75rem; height: 0.75rem; top: -0.4rem; right: -0.4rem; }
.sahm-logo.sahm-logo-sm .sahm-logo-s { font-size: 1.5rem; }
.sahm-logo.sahm-logo-sm .sahm-logo-words .word-sahm    { font-size: 1.125rem; }
.sahm-logo.sahm-logo-sm .sahm-logo-words .word-express { font-size: 0.7rem; letter-spacing: 0.18em; }

/* Analytics period selector (v4.21) */
.period-btn {
    padding: 0.35rem 0.85rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.15s ease;
    cursor: pointer;
}
.period-btn:hover { color: #fff; }
.period-btn.is-active {
    color: #ff8200;
    background: rgba(255, 130, 0, 0.12);
    border-color: rgba(255, 130, 0, 0.4);
}

/* =====================================================================
   SAHM UNIFIED UI SYSTEM (v4.44) — bold / aggressive 2026
   One source of truth for buttons, search, inputs and tables across
   EVERY interface (office dashboard + driver/ramasseur/vendor APKs).
   Token-driven (uses the design colors from theme.js), so it stays
   identical everywhere and renders the same inside the Android TWA.
   ===================================================================== */

:root{
  --sx-orange:#ff8200; --sx-orange-dk:#e67300; --sx-green:#00a651;
  --sx-teal:#00e5d0; --sx-ink:#020816; --sx-ink-2:#081328; --sx-ink-3:#111b31;
  --sx-line:rgba(255,255,255,.10); --sx-line-2:rgba(255,255,255,.06);
  --sx-txt:#eaf1fb; --sx-dim:#8ea3c4;
  --sx-r:10px;            /* unified radius — slightly sharp, modern */
  --sx-r-lg:14px;
}

/* ---------- BUTTONS ---------- */
.sx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-weight:700;font-size:14px;letter-spacing:.01em;
  padding:11px 20px;border-radius:var(--sx-r);border:1.5px solid transparent;
  cursor:pointer;transition:transform .12s ease,box-shadow .2s ease,background .2s ease;
  text-decoration:none;line-height:1;white-space:nowrap;user-select:none;
}
.sx-btn:active{transform:translateY(1px) scale(.985)}
.sx-btn .material-symbols-outlined{font-size:18px}

.sx-btn-primary{
  background:linear-gradient(135deg,var(--sx-orange),#ff9d3d);color:var(--sx-ink);
  box-shadow:0 6px 20px rgba(255,130,0,.35),inset 0 1px 0 rgba(255,255,255,.3);
}
.sx-btn-primary:hover{box-shadow:0 10px 28px rgba(255,130,0,.5);transform:translateY(-1px)}

.sx-btn-success{
  background:linear-gradient(135deg,var(--sx-green),#00c264);color:#021;
  box-shadow:0 6px 20px rgba(0,166,81,.35),inset 0 1px 0 rgba(255,255,255,.25);
}
.sx-btn-success:hover{box-shadow:0 10px 28px rgba(0,166,81,.5);transform:translateY(-1px)}

.sx-btn-ghost{
  background:rgba(255,255,255,.05);color:var(--sx-txt);border-color:var(--sx-line);
}
.sx-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}

.sx-btn-danger{
  background:rgba(239,68,68,.12);color:#ff6b6b;border-color:rgba(239,68,68,.4);
}
.sx-btn-danger:hover{background:rgba(239,68,68,.2)}

.sx-btn-sm{padding:7px 14px;font-size:12.5px;border-radius:8px}
.sx-btn-lg{padding:15px 28px;font-size:15px;border-radius:var(--sx-r-lg)}
.sx-btn-block{width:100%}
.sx-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- SEARCH BAR ---------- */
.sx-search{position:relative;display:flex;align-items:center}
.sx-search .material-symbols-outlined{
  position:absolute;left:14px;color:var(--sx-dim);font-size:20px;pointer-events:none;transition:color .2s;
}
.sx-search input{
  width:100%;font-family:inherit;font-size:14px;font-weight:500;color:var(--sx-txt);
  background:var(--sx-ink);border:1.5px solid var(--sx-line);border-radius:var(--sx-r);
  padding:12px 16px 12px 44px;transition:border-color .2s,box-shadow .2s;outline:none;
}
.sx-search input::placeholder{color:var(--sx-dim);font-weight:400}
.sx-search input:focus{
  border-color:var(--sx-teal);box-shadow:0 0 0 3px rgba(0,229,208,.15);
}
.sx-search:focus-within .material-symbols-outlined{color:var(--sx-teal)}

/* ---------- INPUTS / SELECTS (unified) ---------- */
.sx-input,.sx-select,.sx-textarea{
  width:100%;font-family:inherit;font-size:14px;font-weight:500;color:var(--sx-txt);
  background:var(--sx-ink);border:1.5px solid var(--sx-line);border-radius:var(--sx-r);
  padding:11px 14px;transition:border-color .2s,box-shadow .2s;outline:none;
}
.sx-input::placeholder,.sx-textarea::placeholder{color:var(--sx-dim);font-weight:400}
.sx-input:focus,.sx-select:focus,.sx-textarea:focus{
  border-color:var(--sx-teal);box-shadow:0 0 0 3px rgba(0,229,208,.15);
}
.sx-label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sx-dim);margin-bottom:7px}

/* ---------- TABLES (bold, command-deck) ---------- */
.sx-table-wrap{
  border:1.5px solid var(--sx-line);border-radius:var(--sx-r-lg);overflow:hidden;
  background:var(--sx-ink-2);
}
.sx-table{width:100%;border-collapse:collapse;font-size:14px}
.sx-table thead th{
  text-align:left;padding:14px 16px;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sx-dim);
  background:linear-gradient(180deg,rgba(0,229,208,.06),transparent);
  border-bottom:2px solid var(--sx-line);white-space:nowrap;
}
.sx-table tbody td{padding:13px 16px;border-bottom:1px solid var(--sx-line-2);color:var(--sx-txt)}
.sx-table tbody tr{transition:background .15s}
.sx-table tbody tr:hover{background:rgba(0,229,208,.045)}
.sx-table tbody tr:last-child td{border-bottom:none}
.sx-table .num{font-family:'JetBrains Mono','Hanken Grotesk',monospace;font-variant-numeric:tabular-nums}
.sx-table .ref{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--sx-teal)}

/* zebra option */
.sx-table.zebra tbody tr:nth-child(even){background:rgba(255,255,255,.018)}

/* ---------- STATUS PILLS (unified) ---------- */
.sx-pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.03em;padding:4px 11px;border-radius:100px;line-height:1.4;white-space:nowrap}
.sx-pill .material-symbols-outlined{font-size:13px}
.sx-pill-pending{background:rgba(148,163,184,.15);color:#cbd5e1}
.sx-pill-transit{background:rgba(141,205,255,.15);color:#8dcdff}
.sx-pill-done{background:rgba(0,166,81,.15);color:#34d399}
.sx-pill-warn{background:rgba(255,174,61,.15);color:#ffae3d}
.sx-pill-error{background:rgba(239,68,68,.15);color:#ff6b6b}

/* ---------- mobile tap targets (Android-friendly) ---------- */
@media (max-width:640px){
  .sx-btn{padding:13px 20px}          /* ≥44px tap height */
  .sx-search input,.sx-input,.sx-select{padding-top:13px;padding-bottom:13px}
  .sx-table thead th,.sx-table tbody td{padding-left:12px;padding-right:12px}
}

/* =====================================================================
   GLOBAL UPGRADE LAYER (v4.45) — applies the bold sx-* feel to existing
   markup WITHOUT touching HTML/JS. Any input/select/button already using
   the legacy "surface-deepest + border-white/10 + rounded-sahm" pattern
   automatically gains the unified focus glow and crisp borders, so every
   section page looks identical and aggressive with zero per-page edits.
   ===================================================================== */

/* Inputs & selects built with the legacy utility pattern */
input.rounded-sahm:focus,
select.rounded-sahm:focus,
textarea.rounded-sahm:focus,
[class*="rounded-sahm"] input:focus {
  border-color: #00e5d0 !important;
  box-shadow: 0 0 0 3px rgba(0, 229, 208, .15) !important;
  outline: none !important;
}

/* Legacy "label-wrapped" search bars (focus-within glow) */
label.focus-within\:border-data-accent:focus-within {
  box-shadow: 0 0 0 3px rgba(0, 229, 208, .15);
}

/* Any legacy table inside a data-card → crisp command-deck header line */
.data-card table thead th,
.dot-grid table thead th {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  border-bottom: 2px solid rgba(255, 255, 255, .1);
}
.data-card table tbody tr,
.dot-grid table tbody tr { transition: background .15s; }
.data-card table tbody tr:hover,
.dot-grid table tbody tr:hover { background: rgba(0, 229, 208, .045); }

/* Legacy primary buttons (bg-primary) → unified glow + lift */
button.bg-primary,
a.bg-primary,
.bg-primary[class*="rounded"] {
  box-shadow: 0 6px 20px rgba(255, 130, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  transition: transform .12s ease, box-shadow .2s ease;
}
button.bg-primary:hover,
a.bg-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255, 130, 0, .45); }
button.bg-primary:active,
a.bg-primary:active { transform: translateY(1px) scale(.985); }

/* Mobile tap targets for legacy buttons too (Android-friendly) */
@media (max-width: 640px) {
  button.bg-primary, a.bg-primary, button.bg-secondary { min-height: 44px; }
}

/* Driver contact buttons — call / SMS / WhatsApp (v4.53, Cathedis-style) */
.sx-contact-row { gap: 6px; }
.sx-contact-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 12px; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; background: rgba(255,255,255,0.04);
  color: #e8eef6; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .14s; font-family: 'Sora', system-ui, sans-serif;
}
.sx-contact-btn .material-symbols-outlined { font-size: 16px; }
.sx-contact-btn:hover { transform: translateY(-1px); }
.sx-c-call { border-color: rgba(22,199,132,0.4); color: #16c784; }
.sx-c-call:hover { background: rgba(22,199,132,0.14); }
.sx-c-sms { border-color: rgba(0,150,255,0.4); color: #3aa0ff; }
.sx-c-sms:hover { background: rgba(0,150,255,0.14); }
.sx-c-wa { border-color: rgba(37,211,102,0.45); color: #25d366; }
.sx-c-wa:hover { background: rgba(37,211,102,0.16); }