/* ===== Professional Font Upgrade (SAFE cosmetic) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800&display=swap');

:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #ffffff;

  /* Background image is optional; keep the build stable if the image file isn't present. */
  background-image:
    linear-gradient(rgba(0,0,0,0.70), rgba(0,0,0,0.70));

  background-size: cover;
  background-position: center 30%;  /* shifted upward to show more scene */
  background-repeat: no-repeat;
  background-attachment: scroll;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 16px; }
.topbar { position: sticky; top: 0; background:#11131a; border-bottom:1px solid #232636; z-index:10; }
.tabsWrap{ display:flex; align-items:center; gap:10px; padding:10px; min-width:0; }
.tabs { display:flex; gap:8px; overflow:auto; padding:0; white-space:nowrap; -webkit-overflow-scrolling:touch; flex:1 1 auto; scrollbar-gutter: stable; }
.tab { flex: 0 0 auto; }
.tabsScrollBtn{ flex:0 0 auto; border-radius:999px; padding:10px 12px; border:1px solid #2a2e44; background:#141828; color:#e9ecff; cursor:pointer; }
.tabsScrollBtn:active{ transform: translateY(1px); }
/* Visible scrollbar (helps Windows users) */
.tabs::-webkit-scrollbar{ height: 10px; }
.tabs::-webkit-scrollbar-track{ background: rgba(255,255,255,0.06); border-radius: 999px; }
.tabs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,0.18); border-radius: 999px; }
.tab { white-space:nowrap; border:1px solid #2a2e44; background:#141828; color:#e9ecff; padding:10px 12px; border-radius:999px; cursor:pointer; }
.tab.active { background:#2a2e44; }
.screen { display:none; padding: 10px 2px 40px; }
.screen.active { display:block; }
h1 { margin: 6px 0 14px; font-size: 22px; }
h2 { margin: 18px 0 10px; font-size: 16px; opacity: 0.9; }

.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

/* Utility: allow a grid item to span full width */
.full-span { grid-column: 1 / -1; }

/* Settings notes / callouts */
.note {
  border: 1px solid #2a2e44;
  background: rgba(255,255,255,0.04);
  border-radius: 16px;
  padding: 12px;
  margin-top: 6px;
}

label { display:flex; flex-direction:column; gap:6px; font-size: 14px; }
.check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  flex: 0 0 auto;
}
.sliderField {
  min-width: 0;
}
.sliderFieldHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  flex-wrap: wrap;
}
.settingsExpenseCard {
  gap: 8px;
}
.fieldActionRow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.fieldActionRow input,
.fieldActionRow select {
  flex: 1 1 150px;
}
.businessExpenseRow {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
}
.businessExpenseRow select {
  flex: 1 1 180px;
  min-width: 0;
}
.totalsInlineGroup {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  flex: 0 0 auto;
}
.combinedTotalField {
  width: 100%;
  min-width: 0;
}
#totalProtectionGroup .field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
#totalProtectionGroup .field-inline input {
  width: 120px;
}
#totalProtectionStatus.mini-pill {
  white-space: nowrap;
}
.mini-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 700;
}
.slider-lock-wrap {
  display: grid;
  gap: 6px;
}
.slider-lock-controls {
  display: flex;
  justify-content: flex-end;
}
.slider-lock-toggle {
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
}
input[type="range"].slider-locked,
.slider-lock-wrap.is-locked input[type="range"] {
  opacity: 0.72;
  touch-action: pan-y;
}
input[type="range"][data-locked="true"] {
  pointer-events: auto;
}
.expenseDetails {
  border: 1px solid #2a2e44;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  overflow: hidden;
}
.expenseDetails summary {
  cursor: pointer;
  padding: 10px 12px;
  font-size: 13px;
  list-style: none;
}
.expenseDetails summary::-webkit-details-marker {
  display: none;
}
.expenseList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 20px;
  padding: 0 12px 12px;
}
.expenseChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #2a2e44;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  font-size: 12px;
}
.expenseChip button {
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
}
.expenseEmpty {
  opacity: 0.65;
  font-size: 12px;
  padding-top: 2px;
}
/* Inline (checkbox) labels: allow wrapping so long text doesn't get cut off on Android */
label.inline {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  flex-wrap: wrap;
  line-height: 1.25;
}

label.inline input[type="checkbox"]{
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
input { padding:10px; border-radius:12px; border:1px solid #2a2e44; background:#0f1220; color:#f5f6fa; }
select { padding:10px; border-radius:12px; border:1px solid #2a2e44; background:#0f1220; color:#f5f6fa; }
input[type="range"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: pan-y;
  pointer-events: auto;
  -webkit-appearance: auto;
  appearance: auto;
}
@media (pointer: coarse) {
  input[type="range"] {
    touch-action: pan-y;
  }
}
textarea {
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #2a2e44;
  background: #0f1220;
  color: #f5f6fa;
  resize: vertical;
  width: 100%;
  box-sizing: border-box;
}

.row { display:flex; gap:10px; margin-top: 14px; flex-wrap: wrap; }
button { padding:10px 12px; border-radius:12px; border:1px solid #2a2e44; background:#141828; color:#e9ecff; cursor:pointer; }
button.primary { background:#2a2e44; }
button.danger { border-color:#7a2b2b; background:#2b1111; }

.output { background:#0f1220; border:1px solid #2a2e44; border-radius:16px; padding:12px; margin-top: 14px; overflow:auto; }
.settingsCompanyBanner { margin: 6px 0 12px; font-weight: 700; color: #d9defa; }
.settingsHealthCheckLink {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(94, 212, 170, 0.32);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(21, 34, 52, 0.94), rgba(12, 20, 35, 0.98));
  color: #edf7ff;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}
.settingsHealthCheckLink:hover,
.settingsHealthCheckLink:focus-visible {
  border-color: rgba(94, 212, 170, 0.55);
  transform: translateY(-1px);
}
.settingsHealthCheckIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 14px;
  background: radial-gradient(circle at top, rgba(94, 212, 170, 0.34), rgba(94, 212, 170, 0.12));
  color: #8ff0ca;
}
.settingsHealthCheckIcon svg {
  width: 24px;
  height: 24px;
}
.settingsHealthCheckCopy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.settingsHealthCheckCopy strong {
  font-size: 0.98rem;
  letter-spacing: 0.01em;
}
.settingsHealthCheckCopy span {
  color: rgba(237, 247, 255, 0.72);
  font-size: 0.9rem;
}
.settingsLedgerOutput .list-item + .list-item { margin-top: 10px; }
.otraf-score-section + .otraf-score-section { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08); }
.otraf-score-heading { font-weight: 800; margin-bottom: 8px; }
.otraf-score-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.otraf-score-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.otraf-score-label { font-weight: 700; color: #d9defa; }
.otraf-score-value { color: #ffffff; }
.hint { opacity:0.75; margin-top: 10px; }
.help-inline{
  display:inline-flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.help-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  min-width:18px;
  border-radius:999px;
  border:1px solid rgba(126,138,191,.45);
  background:rgba(18,25,46,.92);
  color:#f2f5ff;
  font-size:11px;
  font-weight:800;
  line-height:1;
  cursor:help;
  padding:0;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.help-dot:hover,
.help-dot:focus-visible{
  border-color:rgba(167,182,255,.75);
  background:rgba(38,48,86,.96);
  outline:none;
}
.help-dot--after{
  margin-left:6px;
  vertical-align:middle;
}
.app-help-tooltip{
  position:fixed;
  z-index:100000;
  max-width:min(320px, calc(100vw - 24px));
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(126,138,191,.28);
  background:rgba(8,12,24,.97);
  color:#eef2ff;
  font-size:13px;
  line-height:1.4;
  box-shadow:0 20px 44px rgba(0,0,0,.38);
  pointer-events:none;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .14s ease, transform .14s ease;
}
.app-help-tooltip.is-visible{
  opacity:1;
  transform:translateY(0);
}
.app-help-tooltip strong{
  display:block;
  margin-bottom:4px;
  color:#ffffff;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.otraf-master-grid textarea,
.otraf-email-grid textarea {
  min-height: 110px;
}
.otraf-email-grid {
  margin-top: 14px;
}
.list { display:flex; flex-direction:column; gap:10px; margin-top: 12px; }
.list-item {
  border:1px solid #2a2e44;
  background:#0f1220;
  border-radius:16px;
  padding:12px;
  position: relative;
  padding-right: 170px;
  cursor: pointer;
}
.trip-delete-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-size: 12px;
}

.trip-delete-btn:hover {
  background: rgba(255,255,255,0.10);
}

.list-item:active { transform: scale(0.99); }
.list-title { font-weight: 700; margin-bottom: 6px; }
.list-sub { opacity: 0.85; font-size: 14px; line-height: 1.3; }

/* =========================
   Plain Lock — Settings v1.0
   (visual fence only)
   ========================= */

.lockNotice{
  border:1px solid #2a2e44;
  background:#0f1220;
  padding:10px 12px;
  border-radius:16px;
  margin: 0 0 14px;
  opacity: 0.95;
}

.lockBox{
  border:1px solid #2a2e44;
  background:#0f1220;
  border-radius:16px;
  padding:12px;
  margin-top: 14px;
}

.lockTitle{
  font-weight: 800;
  margin-bottom: 8px;
}

.lockList{
  margin: 0 0 0 18px;
  padding: 0;
}

/* =========================
   Plain Lock — Scenario v1.0
   ========================= */

.lockWarn{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid #2a2e44;
  background:#0f1220;
  opacity: 0.95;
  min-height: 18px;
}

.lockWarn.ok { border-color: #2a2e44; opacity: 0.65; }
.lockWarn.warn { border-color: #7a6a2b; }
.lockWarn.bad { border-color: #7a2b2b; }

input.locked {
  opacity: 0.75;
}

/* Trip dropdown sections */
.trip-zone {
  margin: 14px 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  background: rgba(15,18,32,0.55);
  backdrop-filter: blur(4px);
}

.trip-zone > .collapsibleInner {
  padding: 16px;
}

.trip-zone-header {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
}

.trip-core-zone {
  padding-bottom: 0;
}

.trip-core-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}

.trip-core-col {
  min-width: 0;
}

.trip-calc-row {
  align-items: stretch;
}

.trip-calc-row .btn-wide {
  min-width: 160px;
}

.trip-doc-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.trip-doc-tab {
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a2e44;
}

.trip-doc-tab.active {
  background: #2a2e44;
}

.trip-doc-panel {
  display: none;
}

.trip-doc-panel.active {
  display: block;
}

.trip-doc-panel .row:first-child,
.trip-doc-panel .grid:first-child {
  margin-top: 0;
}

.grow {
  flex: 1 1 220px;
}

.trip-section {
  margin: 10px 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}

.trip-toggle {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 0;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}

.trip-content {
  display: none;
  padding: 12px;
}

#t_remitInfo {
  width: 100%;
  resize: vertical;
}

/* Trip list actions (Edit/Delete) */
.trip-actions{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 8px;
}

.trip-actions button{
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: inherit;
  font-size: 12px;
}

.trip-actions button:hover{
  background: rgba(255,255,255,0.10);
}

.trip-edit-btn{ }

.trip-delete-btn{
  position: static;
  right: auto;
  top: auto;
  transform: none;
}

/* =========================
   Mobile Override
   ========================= */
@media (max-width: 768px) {

  .grid {
    grid-template-columns: 1fr !important;
  }

  body {
    font-size: 16px;
  }

  h1 {
    font-size: 24px;
  }

  h2 {
    font-size: 18px;
  }

  label {
    font-size: 16px;
  }

  input {
    font-size: 18px;
    padding: 14px;
  }

  button {
    font-size: 18px;
    padding: 14px 16px;
  }

  .tab {
    font-size: 16px;
    padding: 12px 14px;
  }

  .row button {
    width: 100%;
  }

  .businessExpenseRow,
  .totalsInlineGroup {
    flex-wrap: wrap;
  }

  .trip-core-layout {
    grid-template-columns: 1fr;
  }

  .trip-doc-tabs {
    flex-direction: column;
  }

  .scenario-status-big {
    font-size: 24px;
    min-width: 0;
  }
}


/* Collapsible Saved Trips */
details.list-item {
  border: 1px solid #1e293b;
  border-radius: 10px;
  padding: 0;
  margin: 10px 0;
  background: #0f172a;
  color: #ffffff;
}
details.list-item.active {
  outline: 2px solid rgba(0,0,0,0.2);
}
details.list-item > summary {
  list-style: none;
  cursor: pointer;
}
details.list-item > summary::-webkit-details-marker { display:none; }

.trip-summary{
  display:flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  background: #0f172a;
  color: #ffffff;
}
.trip-summary .chev{
  font-size: 16px;
  transform: rotate(0deg);
  transition: transform 0.15s ease;
}
details[open] .trip-summary .chev{
  transform: rotate(180deg);
}
.trip-detail{
  border-top: 1px solid #1e293b;
  padding: 12px;
  background: #0b1220;
  color: #ffffff;
}
.trip-detail .mini{
  display:grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
@media (min-width: 700px){
  .trip-detail .mini{ grid-template-columns: 1fr 1fr; }
}

/* ==============================
   Trucking Made Simple — Invoice Layout
   Printable invoice styling
=================================*/

.invoice-wrap{
  background:#fff;
  color:#000;
  padding:24px;
  max-width:900px;
  margin:20px auto;
  border:1px solid #ccc;
}

.invoice-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  border-bottom:1px solid #ddd;
  padding-bottom:12px;
  margin-bottom:16px;
}

.invoice-ids{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:220px;
}

.invoice-label{
  opacity:0.75;
  font-weight:600;
  margin-right:6px;
}

.invoice-title{
  font-size:26px;
  font-weight:700;
}

.invoice-subtitle{
  font-size:14px;
  margin-top:0;
}

.invoice-meta{
  text-align:right;
  font-size:14px;
}

.invoice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:18px;
}

.invoice-box strong{
  display:block;
  margin-bottom:4px;
}

.invoice-table{
  width:100%;
  border-collapse:collapse;
  margin-top:10px;
}

.invoice-table th,
.invoice-table td{
  border:1px solid #ccc;
  padding:8px;
  vertical-align:top;
}

.invoice-table th{
  background:#f3f3f3;
}

.invoice-total{
  text-align:right;
  margin-top:20px;
  font-size:18px;
  font-weight:700;
}

/* PRINT MODE: print invoice only */
@media print{
  body *{ visibility:hidden; }
  #invoiceOut, #invoiceOut *{ visibility:visible; }
  #invoiceOut{
    position:absolute;
    left:0;
    top:0;
    width:100%;
  }
  button{ display:none !important; }
}


/* Actual/Trips dropdown styling */
select {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #2a2a2a;
  background: #0f0f0f;
  color: #f2f2f2;
}
select:focus { outline: none; border-color: #4c4c4c; }


/* =========================
   Plain Lock — Scenario v1.1 (polish)
   ========================= */
.scenario-badge{
  margin: 10px 0 14px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid #2a2e44;
  background: #0f1220;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.scenario-badge.good{ border-color: #1f7a3a; }
.scenario-badge.ok{ border-color: #7a6a2b; }
.scenario-badge.bad{ border-color: #7a2b2b; }

.scenario-badge.good{ color: #7CFF9B; }
.scenario-badge.ok{ color: #FFD36A; }
.scenario-badge.bad{ color: #FF7C7C; }

.scenario-status-strip{
  margin: 10px 0 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid #2a2e44;
  background: #0f1220;
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.scenario-status-big{
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  min-width: 180px;
}

.scenario-status-meta{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.scenario-status-line{
  opacity: 0.92;
}

.scenario-stop-item{
  padding-right: 132px;
}

.scenario-stop-grid{
  margin-top: 0;
}

label input[type="range"]{
  width: 100%;
}


/* --- Added: Maintenance pill + Totals panels --- */
.topbar{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.topbar-right{display:flex; align-items:center; gap:10px; padding-right:6px;}
.topbar-icons{display:flex; align-items:center; gap:10px;}
.topbar-mini-brand{display:none;}

/* Account actions (Profile / Sign out) */
.topbar-auth{font-size:12px; opacity:.9; white-space:nowrap;}
.topbar-action{
  appearance:none;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(25,30,45,.55);
  color:rgba(255,255,255,.92);
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:700;
  font-size:12px;
  text-decoration:none;
}
.topbar-action:hover{transform:translateY(-1px);}
.pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; border:1px solid rgba(0,0,0,.12); background:#fff;}
.pill.good{color:#0b6b2d;}
.pill.ok{color:#7a5a00;}
.pill.bad{color:#8a0f0f;}
.hidden{display:none !important;}
.panel{margin-top:10px;}

.muted{display:block;font-size:12px;opacity:.75;margin-top:6px;}
.checkline{display:flex;align-items:center;gap:8px;}


/* Trip auto-mile calc layout */
.trip-calc-row{ align-items:flex-start; gap:16px; margin-top:18px; margin-bottom:18px; }
.btn-wide{ min-width: 260px; }
.trip-calc-row .muted{ margin-top:10px; flex:1 1 360px; max-width: 760px; line-height:1.35; }
@media (max-width: 700px){
  .btn-wide{ width:100%; min-width: 0; }
  .trip-calc-row{ flex-direction: column; gap:10px; margin-top:14px; margin-bottom:14px; }
}


/* ==========================
   Header polish: animated truck + centered tabs
   (cosmetic only — no JS impact)
========================== */

.topbar{
  padding: 6px 10px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 0 6px;
  min-width: 220px; /* helps tabs visually center between brand + pill */
}

.brand-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.brand-title{
  font-weight:800;
  font-size:18px;
  letter-spacing:0.2px;
  opacity:0.98;
  white-space: nowrap;
}

.brand-company{
  font-size:11px;
  opacity:0.7;
  white-space: nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 220px;
}

.brand-icon{
  width: 40px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.truck-svg{
  width: 40px;
  height: 28px;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.35));
}

/* Simple animated vibe: rolling wheels + slight bob */
.truck-body{ fill: rgba(255,255,255,0.92); }
.truck-cab{ fill: rgba(255,255,255,0.80); }
.truck-trailer{ fill: rgba(255,255,255,0.70); }
.truck-window{ fill: rgba(0,0,0,0.35); }
.truck-wheel{ fill: rgba(0,0,0,0.75); }

.wheel{
  transform-origin: center;
  animation: wheelSpin 1.1s linear infinite;
}

.brand-icon .truck-svg{
  animation: truckBob 1.1s ease-in-out infinite;
}

@keyframes wheelSpin{
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes truckBob{
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-1.5px); }
}

/* Center the tab buttons between the brand and the Maintenance pill */
.tabs{
  flex: 1 1 auto;
  justify-content: center;
}

/* Keep tabs usable on small screens: allow scrolling but keep centering feel */
.tabs{
  scroll-snap-type: x proximity;
}
.tab{
  scroll-snap-align: center;
}

/* ==========================
   Mobile header: zero-overlap navigation
   - Hide the long title on small screens (truck stays)
   - Replace scrollable pill tabs with: 1–2 buttons + a "More" dropdown
========================== */

.mobileTabs{ display:none; align-items:center; gap:10px; min-width: 0; }
.mobileTabs .mTab{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #2a2e44;
  background: #141828;
  color: #e9ecff;
  cursor: pointer;
  white-space: nowrap;
}
.mobileTabs .mTab.active{ background:#2a2e44; }
.mobileTabs .mMore{ min-width: 0; }
.mobileTabs .mMoreSelect{
  width: 100%;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #2a2e44;
  background: #141828;
  color: #e9ecff;
}

/* Screen-reader only label */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

@media (max-width: 680px){
  .topbar{ flex-wrap: wrap; }

  /* Brand shrinks to icon-only to free space */
  .brand{ min-width: 0; padding-left: 4px; }
  .brand-title,
  .brand-company{ display:none; }
  .brand-icon{ width: 34px; height: 24px; }
  .truck-svg{ width: 34px; height: 24px; }

  /* Desktop tab strip off; mobile nav on */
  .tabsWrap{ display:none; }
  .mobileTabs{
    display:flex;
    flex: 1 1 100%;
    width: 100%;
    padding: 8px 6px 10px;
  }

  /* Keep the maintenance pill on the first row, aligned right */
  .topbar-right{ margin-left: auto; }
}

@media (max-width: 820px){
  .brand{ min-width: 0; }
  .tabs{ justify-content: flex-start; }
}


/* Make wheels visible + rotating */
.truck-wheel{
  fill: rgba(18, 20, 28, 0.90);
  stroke: rgba(255,255,255,0.85);
  stroke-width: 0.9;
}
.truck-wheel-hub{
  fill: rgba(255,255,255,0.90);
  stroke: rgba(0,0,0,0.35);
  stroke-width: 0.6;
}
.truck-wheel-spoke{
  stroke: rgba(255,255,255,0.90);
  stroke-width: 0.7;
  stroke-linecap: round;
  opacity: 0.95;
}

.wheel-group{
  animation: wheelSpin 0.9s linear infinite;
}


/* Professional title styling */
.brand-title{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* ===== Background image (safe, non-breaking) ===== */
:root{
  --tms-bg-url: none; /* JS will set this to url('...') */
}

body{
  background: #0b0f17; /* fallback color */
}

body::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: var(--tms-bg-url);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* tune these if you want it brighter/darker */
  opacity: 0.28;
  filter: saturate(1.05) contrast(1.05);
}


/* --- Desktop "More" tabs (prevents crowded header) --- */
.desktopOnly { display: none; }
.tabsMoreSelect {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,22,35,.65);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .2px;
  outline: none;
}
.tabsMoreSelect:focus { box-shadow: 0 0 0 2px rgba(255,255,255,.18); }

.tab.desktop-hidden { display: none !important; }

@media (min-width: 900px) {
  /* Use the More dropdown instead of scroll buttons on desktop */
  .desktopOnly { display: inline-flex; align-items: center; }
  .tabsScrollBtn { display: none; }
  .tabsWrap { gap: 10px; }
  .tabs { overflow: visible; flex-wrap: nowrap; }
}


/* --- Mobile single-row header (Logo | Settings | Scenario | Maintenance OK) --- */
@media (max-width: 520px) {
  .brand-title { display: none !important; }
  .brand { gap: 8px; }
  .truck-svg { width: 44px; height: 22px; }

  .topbar { 
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
  }

  /* Put mobile tabs in the same row */
  .mobileTabs { 
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .mTab {
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* Hide the old select-based More control on mobile (no native arrows) */
  .mMore, .mMoreSelect { display: none !important; }

  /* Keep maintenance pill on far right */
  .topbar-right { 
    margin-left: auto;
    flex: 0 0 auto;
  }
  .pill { 
    padding: 8px 12px;
    font-size: 14px;
    border-radius: 999px;
    white-space: nowrap;
  }
}

/* Mobile menu panel (opened by tapping the truck icon) */
.mobileMenuPanel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  z-index: 9999;
}
.mobileMenuPanel.open { display: block; }
.mobileMenuInner {
  position: absolute;
  top: 70px;
  left: 10px;
  right: 10px;
  background: rgba(20,22,35,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 10px;
  backdrop-filter: blur(10px);
}
.mobileMenuItem {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-weight: 700;
  margin: 6px 0;
}

.brandMenuBtn {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}


/* Mobile next-arrow button */
.mNext{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,22,35,.45);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.mNext:active{ transform: scale(.98); }


/* --- Mobile header hard no-overlap clamp (override) --- */
@media (max-width: 520px) {
  .topbar{
    padding: 10px 10px;
    gap: 8px;
  }

  /* Keep logo small */
  .truck-svg{ width: 38px !important; height: 20px !important; }

  /* Tabs area can shrink */
  .mobileTabs{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .mTab{
    padding: 7px 10px !important;
    font-size: 13px !important;
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mNext{
    width: 36px !important;
    height: 36px !important;
    font-size: 15px !important;
  }

  /* Maintenance pill must never push into tabs */
  .topbar-right{
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }

  #maintPill{
    padding: 7px 10px !important;
    font-size: 13px !important;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* Mobile "More" button (custom, no iOS select arrows) */

.mMoreBtn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(20,22,35,.45);
  color: rgba(255,255,255,.92);
  font-weight: 900;
  font-size: 16px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}

.mMoreBtn:active{ transform: scale(.98); }

/* Mobile menu panel */
.mobileMenuPanel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;
  z-index: 9999;
}
.mobileMenuPanel.open { display: block; }
.mobileMenuInner {
  position: absolute;
  top: 70px;
  left: 10px;
  right: 10px;
  background: rgba(20,22,35,.92);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 10px;
  backdrop-filter: blur(10px);
}
.mobileMenuItem {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  margin: 6px 0;
}


#maintPill::before{
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 0 2px rgba(0,0,0,.18) inset, 0 6px 14px rgba(0,0,0,.25);
  }
  #maintPill.good::before{ background: #18c964; }
  #maintPill.ok::before{ background: #f5c542; }
  #maintPill.bad::before{ background: #ff4d4f; }
}


/* --- Mobile Maintenance Indicator: true colored circle (no pill) --- */
@media (max-width: 700px){
  #maintPill{
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: none !important;
    color: transparent !important;      /* hide text */
    font-size: 0 !important;            /* hide emoji width */
    line-height: 0 !important;
    position: relative !important;
  }
  /* draw the dot as a pseudo-element filling the control */
  #maintPill::before{
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: block;
    box-shadow: 0 0 0 2px rgba(0,0,0,.18) inset, 0 6px 14px rgba(0,0,0,.25);
  }
  #maintPill.good::before{ background: #18c964; }
  #maintPill.ok::before{ background: #f5c542; }
  #maintPill.bad::before{ background: #ff4d4f; }
}



/* FORCE mobile maintenance to be just a circle */
@media (max-width:700px){
  #maintPill{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:999px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;
    line-height:0 !important;
  }
}


/* --- Mobile Maintenance Dot refinement (smaller + closer to tabs) --- */
@media (max-width:700px){
  .topbar-right{
    margin-left:6px !important;   /* pull it closer to tabs */
  }
  #maintPill{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
  }
  #maintPill::before{
    width:18px !important;
    height:18px !important;
  }
}


/* --- Mobile header cleanup: hide desktop tab strip + pull maint dot next to tabs --- */
@media (max-width: 700px){
  .tabsWrap{ display:none !important; } /* removes the scroll arrow button on mobile */
  .topbar{ justify-content:flex-start !important; }
  .topbar-right{
    margin-left:10px !important;  /* sits right after mobileTabs */
  }
}


/* Loads delete controls */
#btnDeleteSelectedLoad[disabled]{
  opacity: .55;
  cursor: not-allowed;
}

/* Scenario: City/State auto-calc helper */
#scenarioCityAuto { margin: 10px 0 14px; }
.scenarioCityGrid { margin-top: 10px; }
#sc_cityStatus { display: inline-block; padding-left: 8px; }


/* =========================
   Collapsible Sections (All Tabs)
   ========================= */
details.collapsibleSection{
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  overflow: hidden;
  margin: 12px 0;
  background: rgba(255,255,255,0.03);
}
details.collapsibleSection > summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  background: rgba(255,255,255,0.05);
  font-weight: 800;
}
details.collapsibleSection > summary::-webkit-details-marker{ display:none; }
details.collapsibleSection > summary::after{
  content: "▾";
  float: right;
  opacity: 0.85;
  transition: transform 0.15s ease;
}
details.collapsibleSection[open] > summary::after{
  transform: rotate(180deg);
}
details.collapsibleSection .collapsibleInner{
  padding: 12px;
}

.screenCollapseAllRow {
  margin: 8px 0 12px;
}

.screenCollapseAllBtn {
  min-width: 140px;
}


/* Recall dropdowns for mobile/desktop (Trip Entry) */
.recallRow{margin-top:6px;}
.recallRow select{width:100%; padding:10px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.35); color:#fff;}


/* Loads dropdown */
.loadsSelectRow select{
  width:100%;
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#fff;
}


/* --- Trip Files (Rate Confirmations) --- */
.inlineLabel { margin-right: 10px; opacity: 0.9; }
#tripFilesTripSelect { width: 100%; }
.trip-files-actions {
  position: relative;
  z-index: 2;
  isolation: isolate;
}
.trip-files-action-btn {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
#tripFilesInput,
#tripFilesLabel,
#tripFilesTripSelect,
#btnTripFilesAdd,
#btnTripFilesClear,
#tripFilesList,
#tripFilesHint {
  position: relative;
  z-index: 2;
}
.fileRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.fileRow:first-child { border-top: none; }
.fileMeta { flex: 1; min-width: 0; }
.fileName { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fileSub { opacity: 0.8; font-size: 0.9em; margin-top: 2px; }
.fileActions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fileActions a, .fileActions button { white-space: nowrap; }


/* Fleet table */
.tableWrap{ overflow:auto; }
.fleetTable{ width:100%; border-collapse: collapse; }
.fleetTable th, .fleetTable td{ border:1px solid rgba(255,255,255,0.14); padding:8px; vertical-align: top; }
.fleetTable th{ background: rgba(255,255,255,0.06); font-weight:800; }
.fleetTable td{ background: rgba(0,0,0,0.10); }
.fleetStatus{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.14);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
}
.fleetStatus.good{ color:#7CFF9B; }
.fleetStatus.ok{ color:#FFD36A; }
.fleetStatus.bad{ color:#FF7C7C; }
.fleetSettlementActions{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
}
.fleetSettlementSheet{
  display:grid;
  gap:8px;
  line-height:1.45;
  background:#ffffff;
  color:#111111;
  border:1px solid rgba(255,255,255,0.14);
  border-radius:12px;
  padding:20px;
}
.fleetSettlementSheet hr{
  border:0;
  border-top:1px solid #d8d8d8;
  margin:4px 0;
}


/* Fleet: safe hide */
.isHidden{ display:none !important; }


/* ===== TMS Paywall Styles ===== */

#appRoot.tms-locked { filter: blur(6px); pointer-events: none; user-select: none; }
.tms-paywall { position: fixed; inset: 0; display: none; align-items: flex-start; justify-content: center; padding: 16px; z-index: 99999; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); overflow-y: auto; box-sizing: border-box; }
.tms-paywall.tms-show { display: flex; }
.tms-paywall-card { width: min(860px, 100%); max-height: none; overflow: visible; margin: 8px 0 20px; border-radius: 22px; padding: 28px; border: 1px solid rgba(255,255,255,.14); background: rgba(10,10,10,.72); box-shadow: 0 10px 30px rgba(0,0,0,.55); color: #fff; box-sizing: border-box; }
.tms-paywall-card h1 { margin: 0 0 6px 0; font-size: 36px; line-height: 1.03; }
.tms-paywall-sub { margin: 0 0 18px 0; opacity: .85; font-size: 18px; }
.tms-auth label { display:block; margin-top: 14px; margin-bottom: 6px; opacity: .85; }
.tms-auth input { width: 100%; box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); color: #fff; font-size: 16px; outline: none; }
.tms-row { display: flex; gap: 12px; margin-top: 14px; }
.tms-btn { flex: 1; padding: 14px 16px; border-radius: 16px; border: 1px solid rgba(160,180,255,.25); background: rgba(90,120,255,.28); color: #fff; font-size: 16px; cursor: pointer; }
.tms-btn:hover { filter: brightness(1.08); }
.tms-btn:disabled { opacity: .55; cursor: not-allowed; }
.tms-btn-outline { background: rgba(0,0,0,.25); }
.tms-magic { margin-top: 14px; opacity: .9; }
.tms-paywall-status { margin-top: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; white-space: pre-wrap; }
.tms-signedin { display:flex; align-items:center; justify-content: space-between; gap: 12px; padding-top: 8px; }
.tms-email { font-size: 28px; font-weight: 700; }
.tms-muted { opacity: .7; font-size: 14px; }
.tms-note { margin-top: 14px; opacity: .85; }

.sg-hero {
  display: grid;
  gap: 16px;
  margin-top: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(31,39,73,0.92), rgba(21,27,48,0.9)),
    radial-gradient(circle at top right, rgba(55,123,255,0.18), transparent 42%);
  box-shadow: 0 16px 34px rgba(0,0,0,0.22);
}

.sg-hero h2 {
  margin: 6px 0 8px;
  font-size: clamp(24px, 3vw, 34px);
}

.sg-hero p {
  margin: 0;
  max-width: 760px;
  line-height: 1.5;
  opacity: 0.88;
}

.sg-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8fc4ff;
}

.sg-chip-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.sg-chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #eef3ff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sg-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.sg-stat-card {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sg-stat-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.72;
}

.sg-stat-value {
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1;
}

.sg-stat-sub {
  font-size: 13px;
  opacity: 0.8;
}

.sg-section {
  margin-top: 14px;
}

.sg-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.sg-section-head h2 {
  margin: 4px 0 0;
}

.sg-two-col {
  margin-top: 14px;
}

.sg-table td,
.sg-table th {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .sg-hero,
  .sg-stat-card {
    padding: 14px;
  }

  .sg-table td,
  .sg-table th {
    white-space: normal;
  }
}
.tms-legal { margin-top: 16px; opacity: .65; font-size: 13px; }
.tms-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 12px;
}
.tms-plan-card {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.tms-plan-card h3 {
  margin: 0 0 8px 0;
  font-size: 22px;
}
.tms-plan-price {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 700;
}
.tms-plan-card ul {
  margin: 8px 0 12px 18px;
  padding: 0;
  opacity: 0.92;
}
.tms-plan-card-featured {
  border-color: rgba(160,180,255,.55);
  box-shadow: 0 0 0 1px rgba(160,180,255,.25), 0 8px 24px rgba(90,120,255,.16);
}
.tms-plan-badge {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
  background: rgba(90,120,255,.22);
}

/* Topbar status (small inline message next to Profile/Sign out) */
.topbar-status {
  margin-left: 10px;
  font-size: 12px;
  opacity: 0.9;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-status.error { opacity: 1; }

@media (max-width: 768px) {
  .tms-paywall {
    align-items: flex-start;
    padding: 14px;
    overflow-y: auto;
  }

  .tms-paywall-card {
    width: 100%;
    padding: 18px;
    border-radius: 18px;
    margin: 10px 0 24px;
  }

  .tms-paywall-card h1 {
    font-size: 20px;
    line-height: 1.05;
  }

  .tms-paywall-sub {
    font-size: 16px;
    margin-bottom: 14px;
  }

  .tms-row,
  .tms-signedin {
    flex-direction: column;
    align-items: stretch;
  }

  .tms-btn {
    width: 100%;
    min-width: 0;
  }

  .tms-email {
    font-size: 22px;
  }
  .tms-plan-grid {
    grid-template-columns: 1fr;
  }
}

/* Header search row (all devices) */
.tabSearchRow{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  max-width:560px;
  box-sizing:border-box;
  padding:0 10px 10px;
}
.tabSearchRow input{
  flex:1 1 420px;
  min-width:0;
}

/* Header redesign: desktop/tablet use a cleaner two-row layout */
.topbar-main,
.topbar-nav{
  width: 100%;
  box-sizing: border-box;
}

@media (min-width: 701px){
  .topbar{
    display: block;
    padding: 14px 18px 12px;
    background: linear-gradient(180deg, rgba(10,13,22,.96), rgba(10,13,22,.92));
    border-bottom: 1px solid rgba(72,84,132,.28);
    backdrop-filter: blur(14px);
  }

  .topbar-main{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 12px;
  }

  .brand{
    flex: 0 1 auto;
    min-width: 0;
    padding: 0;
  }

  .brand-copy{
    gap: 1px;
  }

  .brand-title{
    font-size: 20px;
  }

  .brand-company{
    font-size: 13px;
    opacity: .62;
    max-width: none;
  }

  .topbar-right{
    flex: 0 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding-right: 0;
    min-width: 0;
  }

  #maintPill{
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: .02em;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(20,24,38,.16);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }

  .topbar-auth,
  .topbar-status{
    font-size: 13px;
    opacity: .88;
    margin-left: 0;
  }

  .topbar-auth{
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-action{
    padding: 9px 16px;
    font-size: 13px;
    background: rgba(255,255,255,.04);
  }

  .topbar-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .tabsWrap{
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    gap: 12px;
  }

  .tabs{
    justify-content: flex-start;
    gap: 10px;
  }

  .tab{
    padding: 11px 18px;
    background: rgba(255,255,255,.03);
    border-color: rgba(89,103,160,.34);
  }

  .tab.active{
    background: linear-gradient(180deg, rgba(83,95,152,.9), rgba(56,65,111,.9));
    border-color: rgba(128,147,220,.45);
    box-shadow: 0 10px 24px rgba(0,0,0,.18);
  }

  .tabsMoreSelect{
    min-width: 112px;
  }

  .tabSearchRow{
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
    gap: 10px;
  }

  .tabSearchRow input{
    flex: 0 0 220px;
    width: 220px;
    padding: 10px 12px;
    font-size: 14px;
  }

  #topTabSearchGo{
    padding: 10px 14px;
    min-width: 52px;
    font-size: 14px;
  }
}

/* iPhone/mobile header: compact stacked layout, not a squeezed desktop header */
@media (max-width: 700px){
  .topbar{
    display: block !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
    background: linear-gradient(180deg, rgba(10,13,22,.98), rgba(10,13,22,.94)) !important;
  }

  .topbar-main{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .brand{
    flex: 0 0 auto;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
  }

  .brand-copy{
    display: none !important;
  }

  .brand-icon,
  .truck-svg{
    width: 34px !important;
    height: 22px !important;
  }

  .topbar-right{
    width: 100%;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-left: 0 !important;
    padding-right: 0 !important;
    min-width: 0 !important;
  }

  #maintPill{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  #maintPill::before{
    width: 18px !important;
    height: 18px !important;
  }

  #paywallAuthStatus{
    display: block;
    min-width: 0;
    max-width: none !important;
    font-size: 13px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #topbarStatus{
    grid-column: 1 / -1;
    font-size: 12px !important;
    max-width: none !important;
    white-space: normal;
    line-height: 1.3;
  }

  .topbar-action{
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  .topbar-nav{
    display: block;
    width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .tabsWrap{
    display: none !important;
  }

  .mobileTabs{
    display: flex !important;
    width: 100%;
    padding: 0 !important;
    gap: 8px !important;
    align-items: center;
  }

  .mobileTabs .mTab{
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 9px 12px !important;
    font-size: 13px !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mMoreBtn{
    width: 38px;
    height: 38px;
  }

  .tabSearchRow{
    display: none !important;
  }

  .mobileMenuInner{
    top: calc(70px + env(safe-area-inset-top, 0px));
  }
}

/* Tablet-only nav fix (does not alter desktop or phone layouts) */
@media (min-width: 701px) and (max-width: 1100px){
  .topbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }

  .brand{
    flex:0 0 auto;
    min-width:230px;
  }

  .tabsWrap{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    gap:8px;
  }

  .tabs{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    flex-wrap:nowrap;
  }

  .tabsScrollBtn{
    display:none !important;
  }

  .desktopOnly{
    display:inline-flex !important;
    align-items:center;
  }

  .tabsMore{
    flex:0 0 110px;
    min-width:110px;
    margin-left:auto;
  }

  .tabsMoreSelect{
    width:100%;
    min-width:110px;
  }

  .mobileTabs,
  .mobileMenuPanel{
    display:none !important;
  }

  .topbar-right{
    flex:1 1 100%;
    order:3;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .tabSearchRow{
    order:4;
    width:auto;
    max-width:560px;
    padding:0 10px 10px;
  }
}

/* Header collision guard (tablet + desktop): keep auth/status on its own row */
@media (min-width: 701px){
  .topbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
  }

  .brand{
    flex:0 0 auto;
    min-width:240px;
  }

  .tabsWrap{
    flex:1 1 auto;
    min-width:0;
  }

  .tabs{
    min-width:0;
  }

  .topbar-right{
    flex:1 1 100%;
    order:3;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  #paywallAuthStatus,
  #topbarStatus{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:40vw;
  }

  .tabSearchRow{
    order:4;
    width:auto;
    max-width:560px;
  }
}

/* FINAL iPhone override: keep phone layout independent from desktop/tablet */
@media (max-width: 700px){
  .topbar{
    display: block !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
    gap: 0 !important;
    justify-content: initial !important;
  }

  .topbar-main{
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px 10px !important;
    align-items: center !important;
    width: 100%;
  }

  .brand{
    grid-column: 1 / 2;
    min-width: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .brand-copy{
    display: none !important;
  }

  .brand-icon,
  .truck-svg{
    width: 34px !important;
    height: 22px !important;
  }

  .topbar-right{
    grid-column: 1 / -1;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto auto;
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #maintPill{
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    justify-self: start;
  }

  #maintPill::before{
    width: 18px !important;
    height: 18px !important;
  }

  #paywallAuthStatus{
    display: block !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #topbarStatus{
    display: none !important;
  }

  .topbar-action{
    padding: 8px 11px !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
  }

  .topbar-nav{
    display: block !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  .tabsWrap{
    display: none !important;
  }

  .mobileTabs{
    display: flex !important;
    width: 100% !important;
    padding: 0 !important;
    gap: 8px !important;
    align-items: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(126,138,191,.55) transparent;
  }

  .mobileTabs .mTab{
    flex: 0 0 auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 9px 16px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  .mMoreBtn{
    display: none !important;
  }

  .tabSearchRow{
    display: none !important;
  }
}

@media (max-width: 700px){
  .mobileTabs::-webkit-scrollbar{
    height: 4px;
  }

  .mobileTabs::-webkit-scrollbar-track{
    background: transparent;
  }

  .mobileTabs::-webkit-scrollbar-thumb{
    background: rgba(126,138,191,.5);
    border-radius: 999px;
  }
}

@media (max-width: 700px) and (orientation: portrait){
  .topbar{
    padding: calc(16px + env(safe-area-inset-top, 0px)) 16px 14px !important;
  }

  .topbar-main{
    grid-template-columns: 42px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    align-items: start !important;
  }

  .brand{
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start;
    align-self: start;
  }

  .brand-icon,
  .truck-svg{
    width: 42px !important;
    height: 26px !important;
  }

  .topbar-right{
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    grid-template-columns: 34px minmax(0, 1fr) 42px 42px !important;
    grid-template-areas:
      "pill auth profile signout"
      ". sync profile signout";
    gap: 8px !important;
    align-items: center !important;
    margin: 0 !important;
    justify-items: start !important;
  }

  #maintPill{
    grid-area: pill;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }

  #maintPill::before{
    width: 18px !important;
    height: 18px !important;
  }

  #paywallAuthStatus{
    grid-area: auth;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    align-self: center !important;
    justify-self: start !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #syncStatusBadge{
    grid-area: sync;
    justify-self: start !important;
    align-self: start !important;
    margin-top: 2px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }

  #btnTopProfile,
  #btnTopSignOut{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    justify-self: start !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    position: relative !important;
  }

  #btnTopProfile{
    grid-area: profile;
    margin-left: 2px !important;
  }

  #btnTopSignOut{
    grid-area: signout;
  }

  #btnTopProfile::before,
  #btnTopProfile::after,
  #btnTopSignOut::before,
  #btnTopSignOut::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #btnTopProfile::before{
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-radius: 999px;
    background: #eef2ff;
  }

  #btnTopProfile::after{
    width: 16px;
    height: 9px;
    margin-top: 5px;
    border: 2px solid #eef2ff;
    border-bottom: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  #btnTopSignOut::before{
    width: 12px;
    height: 12px;
    margin-left: -3px;
    border: 2px solid #eef2ff;
    border-right: 0;
    border-radius: 3px 0 0 3px;
  }

  #btnTopSignOut::after{
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-top: 2px solid #eef2ff;
    border-right: 2px solid #eef2ff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .topbar-nav{
    margin-top: 16px !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }

  .mobileTabs{
    gap: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 4px !important;
    align-items: flex-start !important;
  }

  .mobileTabs .mTab{
    padding: 11px 18px !important;
    font-size: 14px !important;
  }

.mobileTabs::-webkit-scrollbar{
  height: 6px !important;
}
}

@media (max-width: 700px) and (orientation: portrait){
  .topbar{
    display: block !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px 14px !important;
    background:
      radial-gradient(circle at top right, rgba(92, 104, 182, 0.16), transparent 34%),
      linear-gradient(180deg, #060912 0%, #090d17 100%) !important;
    border-bottom: 1px solid rgba(70, 79, 122, 0.26) !important;
    box-shadow: 0 16px 44px rgba(0,0,0,.34);
    overflow-x: clip !important;
  }

  .topbar-main{
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "brand"
      "card";
    gap: 12px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .brand{
    grid-area: brand !important;
    display: block !important;
    min-width: 0 !important;
    padding: 0 !important;
  }

  .brandMenuBtn{
    display: none !important;
  }

  .brand-copy{
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  .brand-title{
    font-size: clamp(24px, 7.2vw, 32px) !important;
    line-height: .98 !important;
    letter-spacing: -.04em !important;
    font-weight: 800 !important;
    color: #f6f8ff !important;
    white-space: normal !important;
  }

  .brand-company{
    max-width: none !important;
    font-size: 11px !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: rgba(184,193,226,.74) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-right{
    grid-area: card !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0, 1fr) !important;
    grid-template-areas:
      "mini icons"
      "status auth"
      "sync sync";
    gap: 8px 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    border: 1px solid rgba(86, 98, 148, 0.38) !important;
    background:
      linear-gradient(180deg, rgba(19,24,41,.92), rgba(15,19,33,.94)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 22px 44px rgba(0,0,0,.28) !important;
    align-items: start !important;
  }

  #maintPill{
    grid-area: status;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    justify-self: start !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    background: radial-gradient(circle at 50% 50%, #34da76 0%, #20c85d 60%, #19ab4e 100%) !important;
    box-shadow:
      inset 0 0 0 3px rgba(255,255,255,.14),
      0 0 0 1px rgba(255,255,255,.08),
      0 4px 10px rgba(0,0,0,.18) !important;
    color: transparent !important;
    font-size: 0 !important;
    overflow: hidden !important;
    align-self: center !important;
  }

  #maintPill::before,
  #maintPill::after{
    display: none !important;
  }

  #paywallAuthStatus{
    grid-area: auth !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 2px !important;
    padding-top: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    white-space: normal !important;
    overflow: visible !important;
    align-self: center !important;
  }

  #paywallAuthStatus:not(:empty)::before{
    content: "Signed in";
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.1;
    font-weight: 700;
    color: #f6f8ff;
    letter-spacing: -.02em;
  }

  #paywallAuthStatus:not(:empty)::after{
    content: attr(data-email);
    display: block;
    font-size: 12px;
    line-height: 1.25;
    color: rgba(188,197,228,.74);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #paywallAuthStatus:not(:empty){
    position: relative;
  }

  .topbar-mini-brand{
    grid-area: mini !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    align-self: center !important;
  }

  .topbar-mini-brand-icon{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 18px !important;
    flex: 0 0 auto !important;
  }

  .topbar-mini-truck{
    width: 26px !important;
    height: 18px !important;
  }

  .topbar-mini-brand-text{
    font-size: 14px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    color: #f5f7ff !important;
  }

  .topbar-icons{
    grid-area: icons !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
    margin-bottom: 2px !important;
    position: relative !important;
    z-index: 6 !important;
    pointer-events: auto !important;
  }

  #syncStatusBadge{
    grid-area: sync !important;
    display: flex !important;
    grid-column: 1 / -1 !important;
    min-height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    justify-self: stretch !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(44, 150, 106, 0.66) !important;
    background: linear-gradient(180deg, rgba(14,54,44,.98), rgba(11,40,35,.98)) !important;
    color: #dbfff1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -.01em !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05) !important;
  }

  #syncStatusBadge::before{
    content: "✓";
    margin-right: 7px;
    font-size: 15px;
    line-height: 1;
    color: #bdf5da;
  }

  #topbarStatus{
    display: none !important;
  }

  .topbar-icons #btnTopFuelDesk,
  .topbar-icons #btnTopHome,
  .topbar-icons #btnTopProfile,
  .topbar-icons #btnTopSignOut{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(120, 130, 176, 0.28) !important;
    background: linear-gradient(180deg, rgba(19,23,39,.98), rgba(16,19,33,.98)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.04),
      0 6px 14px rgba(0,0,0,.18) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    position: relative !important;
    flex: 0 0 auto !important;
    z-index: 7 !important;
    pointer-events: auto !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  #btnTopProfile[hidden],
  #btnTopSignOut[hidden]{
    display: none !important;
  }

  #btnTopFuelDesk::before,
  #btnTopFuelDesk::after,
  #btnTopHome::before,
  #btnTopHome::after,
  #btnTopProfile::before,
  #btnTopProfile::after,
  #btnTopSignOut::before,
  #btnTopSignOut::after{
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  #btnTopFuelDesk::before{
    width: 9px;
    height: 11px;
    margin-left: -2px;
    border: 2px solid #edf1ff;
    border-radius: 2px;
  }

  #btnTopFuelDesk::after{
    width: 5px;
    height: 9px;
    margin-left: 6px;
    margin-top: 2px;
    border-top: 2px solid #edf1ff;
    border-right: 2px solid #edf1ff;
    border-radius: 0 2px 0 0;
  }

  #btnTopHome::before{
    width: 11px;
    height: 8px;
    margin-top: 4px;
    border: 2px solid #edf1ff;
    border-top: 0;
    border-radius: 0 0 3px 3px;
  }

  #btnTopHome::after{
    width: 11px;
    height: 11px;
    margin-top: -4px;
    border-top: 2px solid #edf1ff;
    border-left: 2px solid #edf1ff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  #btnTopProfile::before{
    width: 9px;
    height: 9px;
    margin-top: -6px;
    border-radius: 999px;
    background: #edf1ff;
  }

  #btnTopProfile::after{
    width: 12px;
    height: 7px;
    margin-top: 6px;
    border: 2px solid #edf1ff;
    border-bottom: 0;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  #btnTopSignOut::before{
    width: 10px;
    height: 10px;
    margin-left: -3px;
    border: 2px solid #edf1ff;
    border-right: 0;
    border-radius: 3px 0 0 3px;
  }

  #btnTopSignOut::after{
    width: 8px;
    height: 8px;
    margin-left: 5px;
    border-top: 2px solid #edf1ff;
    border-right: 2px solid #edf1ff;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .topbar-nav{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin-top: 10px !important;
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .tabsWrap{
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .tabs{
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    padding: 2px 0 2px !important;
  }

  .tabs::-webkit-scrollbar{
    display: none !important;
  }

  .tab{
    padding: 10px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(84, 95, 144, 0.4) !important;
    background: rgba(18,23,39,.88) !important;
    color: rgba(238,242,255,.88) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03) !important;
    font-size: 13px !important;
  }

  .tab.active{
    background: linear-gradient(180deg, rgba(57,63,96,.98), rgba(44,49,79,.98)) !important;
    border-color: rgba(112,122,176,.5) !important;
    color: #ffffff !important;
  }

  .tabsScrollBtn,
  .tabsMore,
  .mobileTabs,
  .mobileMenuPanel,
  .tabSearchRow{
    display: none !important;
  }
}

.sync-badge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(15,23,42,0.14);
  color: #e5eefc;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sync-badge[data-state="saving"]{
  background: rgba(245, 158, 11, 0.18);
  color: #fde68a;
}

.sync-badge[data-state="saved"]{
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

.sync-badge[data-state="offline"]{
  background: rgba(239, 68, 68, 0.16);
  color: #fecaca;
}

.sync-badge[data-state="failed"]{
  background: rgba(239, 68, 68, 0.22);
  color: #fee2e2;
}

.sync-badge[data-state="idle"]{
  background: rgba(148, 163, 184, 0.18);
  color: #e2e8f0;
}

.eldStatGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 12px 0 18px;
}

.eldStatCard{
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.03);
}

.eldStatCard strong{
  display: block;
  margin-top: 8px;
  font-size: 18px;
  line-height: 1.2;
}

.eldStatLabel{
  display: block;
  opacity: 0.72;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eldConnectionTable td,
.eldConnectionTable th{
  vertical-align: top;
}

.hosQuickCard{
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
}

.hosQuickTitle{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}

#scenarioHosBanner.good,
#tripHosBanner.good{
  color: #bbf7d0;
}

#scenarioHosBanner.warn,
#tripHosBanner.warn{
  color: #fde68a;
}

#scenarioHosBanner.bad,
#tripHosBanner.bad{
  color: #fecaca;
}