/*
 * SAP Horizon skin for track (a test layer, loaded last by base.html).
 * Re-colours and re-shapes the existing pages without changing their markup.
 * Values are the ones used in the Fuel Savings console (sap.css): brand #0070F2, text #1D2D3E,
 * 8px controls, 16px cards, tinted status pills, no coloured edge stripes.
 */

body.sap {
  --mh-cyan: #0070f2;
  --mh-purple: #0070f2;
  --mh-peri: #0070f2;
  --mh-peri-soft: #ebf8ff;
  --mh-ink: #1d2d3e;
  --mh-paper: #f5f6f7;
  --mh-gradient: #0070f2;
  --mh-gradient-soft: #ebf8ff;
  --text: #1d2d3e;
  --text-muted: #556b82;
  --text-soft: #788fa6;
  --border: #d5dadd;
  --border-soft: #e5e5e5;
  --danger: #aa0808;
  --success: #256f3a;
  --warning: #b44f00;
  --radius: 8px;
  --radius-lg: 16px;
  --shadow-xs: none;
  --shadow-sm: 0 0 0 1px rgba(34, 53, 72, 0.08), 0 2px 4px rgba(34, 53, 72, 0.1);
  --shadow-md: 0 0 0 1px rgba(34, 53, 72, 0.08), 0 4px 8px rgba(34, 53, 72, 0.12);
  --shadow-lg: 0 0 0 1px rgba(34, 53, 72, 0.08), 0 8px 24px rgba(34, 53, 72, 0.16);
  --topbar-h: 52px;
  --sidebar-w: 240px;
  font-family: "72", "72full", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--mh-paper);
}
body.sap h1, body.sap h2, body.sap h3, body.sap .page-title, body.sap .brand-name { letter-spacing: 0; }

/* ── Buttons: Emphasized (blue) and Transparent/Default (grey) ───────── */

.sap .btn { border-radius: 8px; font-weight: 700; font-size: 0.875rem; min-height: 36px; padding: 6px 14px; box-shadow: none; transform: none; transition: background 120ms; }
.sap .btn-sm { min-height: 30px; padding: 3px 12px; font-size: 0.8125rem; }
.sap .btn-primary { background: #0070f2; color: #fff; border: 1px solid #0070f2; box-shadow: none; }
.sap .btn-primary:hover { background: #0064d9; border-color: #0064d9; box-shadow: none; transform: none; }
.sap .btn-ghost { background: #eaecee; color: #0064d9; border: 1px solid #eaecee; box-shadow: none; }
.sap .btn-ghost:hover { background: #dfe2e5; box-shadow: none; }

/* ── Cards, stat tiles: 16px, no edge stripe ─────────────────────────── */

.sap .card, .sap .stat-card { border-radius: 16px; box-shadow: var(--shadow-sm); }
.sap .stat-card::before { display: none; }
.sap .stat-label, .sap .eyebrow { letter-spacing: 0; text-transform: none; font-size: 0.8125rem; font-weight: 400; color: var(--text-muted); }
.sap .stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: 0; }
.sap .card-title { font-size: 1rem; font-weight: 700; }
.sap .page-header h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0; }

/* ── Tables (list report): grey header, quiet rows, blue hover tint ──── */

.sap table.data-table { font-size: 0.875rem; }
.sap table.data-table thead th { background: #f5f6f7; color: var(--mh-ink); font-weight: 700; text-transform: none; letter-spacing: 0; font-size: 0.8125rem; border-bottom: 1px solid var(--border); }
.sap table.data-table tbody td { border-bottom: 1px solid var(--border-soft); padding: 10px 14px; }
.sap table.data-table tbody tr:hover { background: #ebf8ff; }

/* ── Status: tinted pills (Object Status), never a coloured stripe ───── */

.sap .badge { border-radius: 8px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.sap .badge-ok { background: #ebf5cb; color: #256f3a; }
.sap .badge-warning { background: #fff3b8; color: #b44f00; }
.sap .badge-expired { background: #ffd6ea; color: #aa0808; }
.sap .badge-unknown { background: #eff1f2; color: #556b82; }
.sap .alert { border-radius: 8px; box-shadow: none; }
.sap .alert-success { background: #ebf5cb; color: #256f3a; box-shadow: none; }
.sap .alert-danger { background: #ffd6ea; color: #aa0808; box-shadow: none; }
.sap .alert-warning { background: #fff3b8; color: #b44f00; box-shadow: none; }
.sap .dot-online { background: #30914c; box-shadow: none; }
.sap .dot-stale { background: #e76500; }
.sap .dot-offline { background: #a9b4be; }
.sap .alert-toast { border-radius: 12px; border-left-width: 1px; }
.sap #nav-alert-badge { background: #f53232 !important; border-radius: 999px; }

/* ── Fields: label above, 1px #758ca4 border, 8px radius, blue focus ── */

.sap .form-group label { font-weight: 400; font-size: 0.875rem; color: var(--mh-ink); }
.sap .form-control, .sap input[type=text], .sap input[type=email], .sap input[type=password], .sap input[type=number], .sap input[type=search], .sap input[type=date], .sap select, .sap textarea {
  border-radius: 8px; border: 1px solid #758ca4; background: #fff; color: var(--mh-ink); min-height: 36px;
}
.sap .form-control:hover, .sap select:hover { border-color: #0064d9; }
.sap .form-control:focus, .sap input:focus, .sap select:focus, .sap textarea:focus { outline: none; border-color: #0070f2; box-shadow: 0 0 0 1px #0070f2; }

/* ── Depot switcher ──────────────────────────────────────────────────── */

.sap .depot-switcher-btn { border-radius: 8px; border-color: var(--border); background: #fff; }
.sap .depot-switcher-btn:hover { border-color: #0064d9; background: #ebf8ff; }
.sap .depot-switcher-label { letter-spacing: 0; text-transform: none; font-weight: 400; }
.sap .depot-dropdown { border-radius: 12px; box-shadow: var(--shadow-lg); }
.sap .depot-dropdown-item:hover { background: #eff1f2; }
.sap .depot-dropdown-item.active { color: #0064d9; }

/* ── Page content spacing ────────────────────────────────────────────── */

.sap .content-padded { padding: 16px 24px 32px; }

/* ── Forms: SAP form fields (grey, underlined), blue emphasised Save, grey Cancel ── */

.sap .form-group label { font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 2px; }
.sap .form-group label .req, .sap .form-group label span[style*="dc2626"] { color: #aa0808 !important; }
.sap .form-control, .sap .form-group input:not([type=checkbox]):not([type=radio]), .sap .form-group select, .sap .form-group textarea {
  background: #f5f6f7; border: 0; border-bottom: 1px solid #758ca4; border-radius: 4px 4px 0 0; min-height: 36px;
}
.sap .form-control:hover, .sap .form-group input:hover, .sap .form-group select:hover { background: #eff1f2; border-bottom-color: #0064d9; }
.sap .form-control:focus, .sap .form-group input:focus, .sap .form-group select:focus, .sap .form-group textarea:focus {
  background: #fff; border-bottom: 2px solid #0070f2; box-shadow: none; outline: 1px dotted #0070f2; outline-offset: 1px;
}
.sap .form-group .errorlist, .sap .errorlist { list-style: none; color: #aa0808; font-size: 0.8125rem; padding: 2px 0 0; }
.sap .form-group small, .sap .form-help, .sap .help-text { color: var(--text-muted); }
.sap .form-card, .sap .card form { border-radius: 16px; }

/* ── Live map: shell panel, segmented map-type buttons, SAP list on the right ── */

.sap .map-toolbar { background: #fff; border-radius: 12px; box-shadow: var(--shadow-md); border: 0; }
.sap .map-toolbar label { color: var(--mh-ink); }
.sap .map-toolbar input[type=checkbox] { accent-color: #0070f2; }
.sap .map-style-picker { background: #fff; border-radius: 8px; box-shadow: var(--shadow-md); padding: 0; overflow: hidden; display: inline-flex; gap: 0; border: 1px solid #bcc3ca; }
.sap .map-style-btn { background: #fff; color: #0064d9; border: 0; border-radius: 0; font-weight: 700; padding: 6px 14px; border-right: 1px solid #bcc3ca; }
.sap .map-style-btn:last-child { border-right: 0; }
.sap .map-style-btn:hover { background: #eff1f2; color: #0064d9; }
.sap .map-style-btn.active { background: #0070f2; color: #fff; border-color: #0070f2; }

.sap .right-panel { background: #fff; border-left: 1px solid var(--border); }
.sap .panel-context, .sap .context-head { background: #fff; border-bottom: 1px solid var(--border-soft); }
.sap .context-title { font-weight: 700; color: var(--mh-ink); }
.sap .context-crumbs { letter-spacing: 0; text-transform: none; color: var(--text-muted); }
.sap .rp-badge { background: #eff1f2; color: #556b82; border-radius: 8px; font-weight: 700; }
.sap .vlist-search { border-radius: 999px; background: #eff1f2; border: 1px solid transparent; padding-left: 14px; }
.sap .vlist-search:hover { background: #fff; border-color: #bcc3ca; }
.sap .vlist-search:focus { background: #fff; border-color: #0070f2; box-shadow: 0 0 0 1px #0070f2; }
.sap .vehicle-card, .sap .trip-row { border-radius: 8px; }
.sap .vehicle-card:hover, .sap .trip-row:hover { background: #eff1f2; }
.sap .vehicle-card.selected, .sap .trip-row.selected { background: #ebf8ff; border-color: #a8d4f5; }
.sap .vc-label { font-weight: 700; color: var(--mh-ink); }
.sap .tracks-btns button { border-radius: 8px; font-weight: 700; background: #eaecee; color: #0064d9; border: 1px solid #eaecee; }
.sap .tracks-btns button:hover:not(:disabled) { background: #dfe2e5; }
.sap .tracks-btns button.primary { background: #0070f2; color: #fff; border-color: #0070f2; }
.sap .tp-btn { border-radius: 8px; }
.sap .replay-bar { border-radius: 12px; }
.sap .trip-meta .active-badge { color: #256f3a; }
.sap .panel-resize-handle:hover, .sap .panel-resize-handle.dragging { background: #d1e8ff; }
.sap input.vlist-search { border: 1px solid transparent !important; border-radius: 999px !important; background: #eff1f2 !important; }
.sap input.vlist-search:focus { border-color: #0070f2 !important; background: #fff !important; }

/* ── Remove coloured edge stripes; carry state with tint instead ─────── */

.sap .rh-card { border-left: 1px solid var(--border-soft); border-radius: 16px; box-shadow: var(--shadow-sm); transform: none !important; }
.sap .rh-tag { letter-spacing: 0; text-transform: none; font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }
.sap .rh-card-icon { background: #ebf8ff !important; border-radius: 12px; }
.sap .rh-drawer-hint { border-left: 0; background: #ebf8ff; color: var(--mh-ink); }
.sap .rh-badge { border-radius: 8px; }
.sap .dsp-card { border-left: 0; padding-left: 14px; }
.sap .dsp-card.critical { background: #fff5f9; }
.sap .dsp-card.safety { background: #fffbe0; }
.sap .dsp-card.ops { background: #fff; }

/* ── Dispatcher console: purple chrome becomes SAP blue ──────────────── */

.sap .dsp-pill-all { color: #0064d9; border-color: #a8d4f5; background: #ebf8ff; }
.sap .dsp-pill-all.active, .sap .dsp-pill-all:hover { background: #0070f2; color: #fff; border-color: #0070f2; }
.sap .dsp-theme-btn:hover { border-color: #0070f2; color: #0070f2; background: #ebf8ff; }
.sap .dsp-vdivider:hover::after, .sap .dsp-vdivider.dragging::after, .sap .dsp-hdivider:hover::after, .sap .dsp-hdivider.dragging::after { background: #0070f2; }
.sap .dsp-off-bar { background: #0070f2; }
.sap input[type=checkbox], .sap input[type=radio] { accent-color: #0070f2; }

/* ── Filter bars and page headings ───────────────────────────────────── */

.sap .page-header .eyebrow, .sap .page-header a.eyebrow { color: #0064d9; }
.sap form.filters, .sap .filter-bar { background: #fff; border-radius: 12px; padding: 10px 14px; box-shadow: var(--shadow-sm); }

/* ── Filter bars: one white bar, labels above, grey fields, buttons aligned ── */

.sap .content-padded > form[method="get"], .sap .content-padded > form[method="GET"] {
  background: #fff; border-radius: 12px; padding: 12px 16px !important; box-shadow: var(--shadow-sm); margin-bottom: 16px !important; gap: 12px !important;
}
.sap form[method="get"] .form-group label { font-size: 0.75rem; }
.sap form[method="get"] .btn-ghost { background: #eaecee; }

/* ── Title shown once ────────────────────────────────────────────────── */

.sap .page-header h1.sap-dup-title { display: none; }
.sap .page-header { margin-bottom: 16px; align-items: center; }
.sap .page-header p { margin-top: 0; }

/* ═══ SAP shell: shell bar, navigation bar, page header with breadcrumb ═══ */

.sap .app { display: flex; flex-direction: column; height: 100vh; }
.sap .content { flex: 1; min-height: 0; overflow: auto; position: relative; }
.sapi { width: 1em; height: 1em; font-size: 16px; fill: currentColor; flex-shrink: 0; vertical-align: -0.15em; }
.sapi.sm { font-size: 14px; }

/* Shell bar */
.sx-shell { flex: none; height: 52px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 0 16px; position: relative; z-index: 30; }
.sx-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1rem; color: var(--mh-ink); text-decoration: none; }
.sx-logo-mark { width: 24px; height: 24px; border-radius: 4px; background: #0070f2; position: relative; }
.sx-logo-mark::after { content: ""; position: absolute; inset: 6px; border-radius: 2px; background: #fff; }
.sx-sep { width: 1px; height: 22px; background: var(--border); }
.sx-org { display: inline-flex; align-items: center; gap: 6px; color: var(--mh-ink); font-size: 0.875rem; }
.sx-grow { flex: 1; }
.sx-avatar { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #0070f2; color: #fff; font-weight: 700; font-size: 0.875rem; cursor: pointer; }
.sx-avatar:hover { box-shadow: 0 0 0 3px #d1e8ff; }
.sx-userwrap { position: relative; }
.sx-usermenu { display: none; position: absolute; right: 0; top: 42px; min-width: 240px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; }
.sx-userwrap.open .sx-usermenu { display: block; }
.sx-usermenu .who { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.sx-usermenu .who span { font-size: 0.75rem; color: var(--text-muted); }
.sx-usermenu .sep { height: 1px; background: var(--border-soft); margin: 4px 0; }
.sx-usermenu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--mh-ink); text-decoration: none; font-size: 0.875rem; }
.sx-usermenu a:hover { background: #eff1f2; }
.sx-shell .depot-switcher { position: relative; }
.sx-shell .depot-dropdown { right: 0; left: auto; top: 40px; }

/* Navigation bar: groups open menus, the current group carries the indicator */
.sx-nav { flex: none; height: 44px; background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: stretch; padding: 0 8px; overflow: visible; position: relative; z-index: 20; }
.sx-group { position: relative; display: flex; }
.sx-navbtn { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; padding: 0 14px; font: inherit; font-size: 0.875rem; font-weight: 400; color: var(--mh-ink); cursor: pointer; }
.sx-navbtn:hover, .sx-group.open .sx-navbtn { background: #eff1f2; }
.sx-navbtn .sapi { font-size: 10px; color: var(--text-muted); margin-left: 2px; }
.sx-group.current .sx-navbtn { color: #0064d9; font-weight: 700; box-shadow: inset 0 -3px 0 #0070f2; }
.sx-menu { display: none; position: absolute; left: 0; top: 44px; min-width: 240px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 50; }
.sx-group.open .sx-menu { display: block; }
.sx-menu .nav-link { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--mh-ink); font-size: 0.875rem; text-decoration: none; }
.sx-menu .nav-link:hover { background: #eff1f2; }
.sx-menu .nav-link.active { background: #ebf8ff; color: #0064d9; font-weight: 700; }
.sx-menu .nav-link.active::before { display: none; }

/* Page header: breadcrumb, title, actions */
.sx-pagehead { flex: none; background: #fff; border-bottom: 1px solid var(--border); padding: 10px 24px 12px; display: flex; align-items: center; gap: 16px; }
.sx-pagehead-main { flex: 1; min-width: 0; }
.sx-pagehead .page-title { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--mh-ink); }
.sx-pagehead-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sx-crumbs { list-style: none; display: flex; flex-wrap: wrap; gap: 0; font-size: 0.8125rem; color: var(--text-muted); margin-bottom: 2px; }
.sx-crumbs li + li::before { content: "/"; margin: 0 6px; color: #a9b4be; }
.sx-crumbs a { color: #0064d9; text-decoration: none; }
.sx-crumbs a:hover { text-decoration: underline; }

@media (max-width: 720px) {
  .sx-nav { overflow-x: auto; }
  .sx-menu { position: fixed; left: 8px; right: 8px; top: 96px; }
  .sx-org, .sx-sep { display: none; }
  .sx-pagehead { padding: 8px 16px; }
}

/* ═══ Object Page: header facets, section bar, sections, label-value pairs ═══ */

.op-facets { background: #fff; padding: 14px 24px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 40px; border-bottom: 1px solid var(--border); }
.op-ident { display: flex; align-items: center; gap: 14px; min-width: 220px; }
.op-avatar { width: 48px; height: 48px; border-radius: 50%; background: #ebf8ff; color: #0064d9; display: inline-flex; align-items: center; justify-content: center; }
.op-avatar { font-weight: 700; font-size: 1.125rem; }
.op-sub { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 4px; }
.op-facet { margin: 0; }
.op-facet dt { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; }
.op-facet dd { margin: 0; font-size: 0.875rem; color: var(--mh-ink); font-weight: 700; }
.op-tabs { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--border); display: flex; gap: 0; padding: 0 16px; }
.op-tabs a { padding: 12px 16px; font-size: 0.875rem; color: var(--mh-ink); text-decoration: none; border-bottom: 3px solid transparent; }
.op-tabs a:hover { background: #eff1f2; }
.op-tabs a.on { color: #0064d9; font-weight: 700; border-bottom-color: #0070f2; }
.op-section { margin-bottom: 24px; scroll-margin-top: 56px; }
.op-section-title { font-size: 1.125rem; font-weight: 700; color: var(--mh-ink); margin: 4px 0 12px; }
.op-lvp { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 32px; margin: 0; }
.op-lvp dt { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 2px; }
.op-lvp dd { margin: 0; font-size: 0.875rem; color: var(--mh-ink); }
.op-text { font-size: 0.875rem; color: var(--mh-ink); white-space: pre-line; line-height: 1.6; }
.op-msg-negative { display: flex; gap: 12px; align-items: flex-start; background: #ffd6ea; box-shadow: none; }
.op-msg-negative .sapi { color: #aa0808; }
.op-msg-negative .op-text { color: #aa0808; }
.badge .sapi { font-size: 12px; vertical-align: -2px; margin-right: 2px; }

/* ═══ List report toolbar: title with count, search ═══ */

.sx-listbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border-soft); background: #fff; }
.sx-listtitle { font-size: 1rem; font-weight: 700; color: var(--mh-ink); }
.sx-listtitle .n { font-weight: 400; color: var(--text-muted); }
.sx-listgrow { flex: 1; }
.sx-listsearch { position: relative; }
.sx-listsearch .sapi { position: absolute; left: 11px; top: 11px; font-size: 14px; color: var(--text-muted); pointer-events: none; }
.sx-listsearch input { height: 34px; width: 220px; border-radius: 999px !important; border: 1px solid transparent !important; background: #eff1f2 !important; padding: 0 12px 0 34px; font: inherit; font-size: 0.875rem; }
.sx-listsearch input:focus { background: #fff !important; border-color: #0070f2 !important; box-shadow: 0 0 0 1px #0070f2; outline: none; }
.sx-listsearch input:hover { background: #fff !important; border-color: #bcc3ca !important; }

/* ═══ Message Box dialog ═══ */

.sx-overlay { position: fixed; inset: 0; background: rgba(34, 53, 72, 0.45); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 16px; }
.sx-dialog { background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(34, 53, 72, 0.1), 0 16px 48px rgba(34, 53, 72, 0.35); width: min(440px, 100%); outline: none; }
.sx-dialog-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px 8px; }
.sx-dialog-head .sapi { font-size: 20px; color: #e76500; }
.sx-dialog-head h2 { font-size: 1.125rem; font-weight: 700; color: var(--mh-ink); margin: 0; }
.sx-dialog-body { padding: 4px 20px 16px 54px; font-size: 0.875rem; color: var(--mh-ink); line-height: 1.5; }
.sx-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; }
.sx-dialog .btn-neg { background: #f53232; border-color: #f53232; color: #fff; }
.sx-dialog .btn-neg:hover { background: #d92b2b; border-color: #d92b2b; }

/* ═══ Sweep: in-page headers, section titles inside forms, banners ═══ */

.sap .page-header .eyebrow, .sap .page-header a.eyebrow { display: none; }
.sap .page-header:not(:has(h1:not(.sap-dup-title))):not(:has(p)) { display: none; }
.sap .page-header p { color: var(--text-muted); font-size: 0.875rem; }
/* section titles inside cards and forms ("Vehicle & Customer"): plain bold text, no gradient */
.sap .card .eyebrow, .sap form .eyebrow, .sap .eyebrow { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--mh-ink); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; text-transform: none; margin-bottom: 8px; }
/* page-level notes: tinted message strip, no coloured edge */
.sap [style*="border-left:4px solid"], .sap [style*="border-left: 4px solid"] { border-left: 0 !important; }
.sap [style*="background:#fffbeb"], .sap [style*="background:#fef3c7"] { background: #fff3b8 !important; border-radius: 8px; }
.sap .card[style*="max-width"] { border-radius: 16px; }
.sap .alert[style*="border:1px solid"] { border-color: transparent !important; background: #fff3b8 !important; color: #b44f00 !important; }

/* ═══ Sign-in: centred card on grey, Fiori-style Log On ═══ */

.sap .auth-shell { display: block; background: #f5f6f7; }
.sap .auth-hero { display: none; }
.sap .auth-pane { min-height: 100vh; padding: 32px 16px; }
.sap .auth-card { background: #fff; border-radius: 16px; box-shadow: var(--shadow-md); padding: 32px; max-width: 420px; animation: none; }
.sap .sx-authbrand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.125rem; color: var(--mh-ink); margin-bottom: 20px; }
.sap .sx-authbrand .sx-logo-mark { width: 28px; height: 28px; border-radius: 4px; background: #0070f2; position: relative; display: inline-block; }
.sap .sx-authbrand .sx-logo-mark::after { content: ""; position: absolute; inset: 7px; border-radius: 2px; background: #fff; }
.sap .auth-card-head h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: 0; }
.sap .auth-submit { min-height: 36px; }
.sap .auth-form-row a { color: #0064d9; }
.sap .auth-checkbox input { accent-color: #0070f2; }

/* ═══ Toasts, map popups, dispatcher buttons ═══ */

.sap .alert-toast { border-left: 0; background: #fff3b8; border-radius: 12px; box-shadow: var(--shadow-lg); }
.sap .alert-toast.severity-critical { background: #ffd6ea; }
.sap .alert-toast.severity-info { background: #ebf8ff; }
.sap .alert-toast-title { color: var(--mh-ink); }
.sap .alert-toast-sub { color: var(--text-muted); }
.sap .maplibregl-popup-content { border-radius: 12px; box-shadow: var(--shadow-lg); padding: 10px 14px; font-family: inherit; color: var(--mh-ink); }
.sap .maplibregl-ctrl-group { border-radius: 8px; box-shadow: var(--shadow-md); }
.sap .dsp-btn-resolve, .sap .dsp-btn-locate { border-radius: 8px; font-weight: 700; }
.sap .dsp-btn-resolve { background: #30914c; border-color: #30914c; }
.sap .dsp-btn-resolve:hover { background: #256f3a; border-color: #256f3a; }
.sap .dsp-btn-locate { color: #0064d9; border-color: #bcc3ca; background: #fff; }
.sap .dsp-btn-locate:hover { background: #eff1f2; }
.sap .tracks-row input[type=date], .sap .tracks-row input[type=time] { background: #f5f6f7; border: 0; border-bottom: 1px solid #758ca4; border-radius: 4px 4px 0 0; }
.sap .tracks-row input:focus { background: #fff; border-bottom: 2px solid #0070f2; outline: none; }

/* Kit icons in toasts and message areas take the meaning colour */
.sap .alert-toast .sapi { font-size: 18px; color: #b44f00; }
.sap .alert-toast.severity-critical .sapi { color: #aa0808; }
.sap .alert-toast.severity-info .sapi { color: #0064d9; }
.sap .alert .sapi { vertical-align: -3px; margin-right: 4px; }
.sap .alert-danger .sapi { color: #aa0808; }
.sap .btn .sapi { margin-right: 4px; }

/* Surveillance room alert cards: severity as a tint, not a coloured side stripe */
.sap .alert-card { border-left-width: 1px; }
.sap .alert-card.sev-critical { border-left-color: transparent; background: rgba(255, 59, 59, 0.12); }
.sap .alert-card.sev-warning { border-left-color: transparent; background: rgba(245, 166, 35, 0.1); }
.sap .alert-card.sev-info { border-left-color: transparent; }