/* ── Data tables ── */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--color-surface);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}

.data-table thead {
  background: #f8f9fa;
}

.data-table th {
  text-align: left;
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--color-text);
  vertical-align: middle;
}

.data-table tbody tr:last-child td {
  border-bottom: none;
}

.data-table tbody tr.clickable-row {
  cursor: pointer;
  transition: background 0.12s;
}

.data-table tbody tr.clickable-row:hover {
  background: #f0f4ff;
}

.data-table tbody tr.asset-row-nearby {
  border-left: 3px solid #22c55e;
  background: #f0fdf4;
}

/* ── Status badges ── */

.status-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-operational {
  background: #e6f4ea;
  color: #137333;
}

.status-maintenance {
  background: #fef3e2;
  color: #b45309;
}

.status-out-of-service {
  background: #fce8e6;
  color: #c62828;
}

.status-fault {
  background: #fce8e6;
  color: #c62828;
}

.status-standby {
  background: #e8eaf6;
  color: #3949ab;
}

.status-unknown {
  background: #f5f5f5;
  color: #757575;
}

/* ── Search bar ── */

.search-bar {
  margin-bottom: 14px;
}

.search-bar .form-input,
.form-input {
  width: 100%;
  max-width: 360px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s;
}

.form-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

/* ── Inline spinner ── */

.spinner-inline {
  display: block;
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  margin: 40px auto;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Empty state ── */

.empty-state {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 48px 16px;
}

/* ── Asset cards (phone) ── */

.asset-card {
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s;
}

.asset-card:hover {
  box-shadow: var(--shadow-md);
}

.asset-card-name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}

.asset-card-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.asset-card-location {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ── Tab panels ── */

.tab-panel {
  display: none;
  padding: 16px 0;
}

.tab-panel.active {
  display: block;
}

/* ── Tabs ── */

.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 16px;
  overflow-x: auto;
}

.tab-btn {
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.tab-btn:hover {
  color: var(--color-text);
}

.tab-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ── Section header ── */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

/* ── Asset detail header ── */

.asset-detail-header {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.asset-detail-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.asset-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
  align-items: center;
}

/* ── Form rows in modals ── */

.form-row {
  margin-bottom: 14px;
}

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.form-select,
.form-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s;
}

.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26,115,232,0.1);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
}

/* ── Notification preview list in modals ── */

.notify-list {
  background: #f8f9fa;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 8px;
}

/* ── btn-sm ── */

.btn-sm {
  padding: 4px 10px;
  font-size: 12px;
}

/* ── hidden utility ── */

.hidden {
  display: none !important;
}

/* ── KPI strip ── */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  border-left: 4px solid transparent;
  transition: box-shadow 0.2s;
}

.kpi-card:hover { box-shadow: var(--shadow-elevated); }
.kpi-card.kpi-critical { border-left-color: var(--color-critical); }
.kpi-card.kpi-open     { border-left-color: var(--color-primary); }
.kpi-card.kpi-parts    { border-left-color: var(--color-amber); }
.kpi-card.kpi-overdue  { border-left-color: var(--color-warning); }
.kpi-card.kpi-success  { border-left-color: var(--color-success); }

.kpi-number {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}

.kpi-card.kpi-critical .kpi-number { color: var(--color-critical); }
.kpi-card.kpi-open     .kpi-number { color: var(--color-primary); }
.kpi-card.kpi-parts    .kpi-number { color: var(--color-amber); }
.kpi-card.kpi-overdue  .kpi-number { color: var(--color-warning); }
.kpi-card.kpi-success  .kpi-number { color: var(--color-success); }

.kpi-label {
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* ── Filter bar ── */

.filter-bar {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  flex: 1;
  min-width: 180px;
}

.filter-search input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--color-text);
  width: 100%;
  font-family: inherit;
}

.filter-search svg { flex-shrink: 0; color: var(--color-text-muted); }

.filter-select {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.filter-select select {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--color-text-muted);
  cursor: pointer;
  font-family: inherit;
}

/* ── Priority pills ── */

.priority-pill {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.priority-pill.critical { background: #ffebee; color: var(--color-critical); }
.priority-pill.high     { background: #fff3e0; color: var(--color-high); }
.priority-pill.medium   { background: #e8f0fe; color: var(--color-medium); }
.priority-pill.low      { background: #f5f5f5; color: var(--color-low); }

/* ── Kanban board ── */

.kanban-board {
  display: grid;
  gap: 14px;
  align-items: start;
}

.kanban-col {
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  min-width: 0;
}

.kanban-col-header {
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.7);
  border-bottom: 1px solid var(--color-border);
}

.col-name {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-muted);
  flex: 1;
}

.col-badge {
  background: var(--color-border);
  color: var(--color-text-muted);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

.kanban-col-body {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

/* ── Work order cards ── */

.wo-card {
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  padding: 10px 11px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s;
}

.wo-card:hover { box-shadow: var(--shadow-elevated); transform: translateY(-1px); }
.wo-card.priority-critical { border-left-color: var(--color-critical); }
.wo-card.priority-high     { border-left-color: var(--color-high); }
.wo-card.priority-medium   { border-left-color: var(--color-medium); }
.wo-card.priority-low      { border-left-color: var(--color-low); }

.wo-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
}

.wo-number {
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  letter-spacing: 0.3px;
}

.wo-top-right { display: flex; align-items: center; gap: 5px; }

.wo-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}

.wo-asset {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.wo-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wo-due { font-size: 11px; color: var(--color-text-muted); font-weight: 500; }
.wo-due.overdue { color: var(--color-critical); font-weight: 600; }
.wo-due.today   { color: var(--color-critical); font-weight: 600; }

.wo-assignee {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-muted);
}

/* ── Avatar ── */

.avatar-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}

.avatar-xs {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700;
  flex-shrink: 0;
}

.avatar-xs.unassigned { background: var(--color-border); color: var(--color-text-muted); }

/* ── DAG canvas ── */

.dag-canvas-wrap {
  flex: 1;
  overflow: auto;
  background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: #f8f9fc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  position: relative;
}

.dag-node {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  border-left: 4px solid transparent;
  padding: 10px 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: inherit;
  transition: box-shadow 0.2s;
}

.dag-node.type-safety    { border-left-color: var(--color-critical); }
.dag-node.type-inspect   { border-left-color: var(--color-primary); }
.dag-node.type-decision  { border-left-color: var(--color-amber); border-style: dashed; }
.dag-node.type-task      { border-left-color: var(--color-primary); }
.dag-node.type-wait      { border-left-color: var(--color-slate); }
.dag-node.type-milestone { border-left-color: var(--color-purple); }
.dag-node.type-approval  { border-left-color: var(--color-success); }

.dag-node.status-done    { background: #f1f8f2; }
.dag-node.status-active  { background: #f0f5ff; box-shadow: 0 0 0 2px var(--color-primary), 0 4px 16px rgba(26,115,232,0.25); }
.dag-node.status-pending { background: white; }
.dag-node.status-wait    { background: #fafafa; opacity: 0.8; }

.dag-node-top { display: flex; align-items: center; gap: 7px; }
.dag-node-label { font-size: 13px; font-weight: 600; color: var(--color-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dag-node-meta  { font-size: 11px; color: var(--color-text-muted); display: flex; align-items: center; gap: 12px; margin-top: 6px; }

.dag-node-terminal {
  border-radius: 50%;
  background: #e0e0e0;
  border: 2.5px solid #bdbdbd;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: #757575; letter-spacing: 0.5px;
}

.node-status-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 6px; border-radius: 8px;
  text-transform: uppercase; letter-spacing: 0.3px;
  flex-shrink: 0;
  display: flex; align-items: center; gap: 4px;
}

.node-status-badge.done    { background: #e8f5e9; color: var(--color-success); }
.node-status-badge.active  { background: #e8f0fd; color: var(--color-primary); }
.node-status-badge.pending { background: #f5f5f5; color: #9e9e9e; }
.node-status-badge.wait    { background: #f5f5f5; color: #9e9e9e; }

/* ── Pulse dot (active DAG node) ── */

.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: pulseDot 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.7); }
}

/* ── Progress bar ── */

.progress-bar-wrap {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.3s;
}

/* ── AI chat strip (WO detail panel) ── */

.ai-chat-strip {
  padding: 14px 16px;
  background: #fafbff;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--color-border);
}

.ai-chat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ai-bubble {
  background: white;
  border: 1px solid #dce5f9;
  border-radius: 10px;
  border-top-left-radius: 3px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text);
  box-shadow: 0 1px 3px rgba(26,115,232,0.08);
}

.ai-bubble strong { color: var(--color-primary); }

.ai-quick-replies { display: flex; gap: 8px; flex-wrap: wrap; }

.ai-chip {
  border: 1px solid var(--color-primary);
  background: white;
  color: var(--color-primary);
  border-radius: 16px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.ai-chip:hover { background: var(--color-primary); color: white; }

/* ── Location tree (sidebar) ── */

#location-tree-container {
  border-top: 1px solid var(--color-border);
  padding: 4px 0;
}

.loc-tree-header {
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

.loc-tree-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text);
  transition: background 0.12s;
  border-radius: 0;
}

.loc-tree-row:hover {
  background: #e8f0fe;
  color: var(--color-primary);
}

.loc-tree-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  cursor: pointer;
}

.loc-tree-chevron svg {
  width: 14px;
  height: 14px;
  stroke-width: 2;
}

.loc-tree-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.loc-tree-icon svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.75;
}

.loc-tree-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loc-tree-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--color-border);
  color: var(--color-text-muted);
  border-radius: 10px;
  padding: 1px 6px;
  flex-shrink: 0;
}

/* ── Modal ── */

#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

#modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#modal-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  /* width:100% + margin:16px overflowed: margins sit outside the border box,
     so the box was viewport-width PLUS 32px and its right edge — including
     the primary button — hung off a phone screen. calc keeps the margins
     inside the viewport. */
  width: calc(100% - 32px);
  max-width: 480px;
  margin: 16px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 64px);
  transform: translateY(12px);
  transition: transform 0.2s;
}

#modal-box.modal-wide {
  max-width: 860px;
}

#modal-box.modal-wide #modal-body {
  overflow-y: auto;
}

#modal-overlay.visible #modal-box {
  transform: translateY(0);
}

#modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #e0e0e0;
  gap: 8px;
}

#modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: #202124;
}

#modal-close-btn {
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: #5f6368;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

#modal-close-btn:hover {
  background: #f1f3f4;
}

#modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: #202124;
}

#modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #e0e0e0;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  /* Never let a long label push a button off the edge instead of wrapping. */
  flex-wrap: wrap;
}

/* Phone: full-width stacked buttons, primary first. A right-aligned row of
   small targets is desktop shape — a driver confirming something one-handed
   needs the action under their thumb, not tucked in a corner. */
@media (max-width: 600px) {
  #modal-footer {
    flex-direction: column-reverse;
    gap: 10px;
  }

  #modal-footer button {
    width: 100%;
    min-height: 48px;
    font-size: 16px;
  }
}

/* ── Toast notifications ── */

#toast-container {
  position: fixed;
  bottom: 72px; /* above phone bottom nav */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 32px);
}

@media (min-width: 769px) {
  #toast-container {
    bottom: 24px;
    left: auto;
    right: 24px;
    transform: none;
  }
}

.toast {
  background: #323232;
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.toast-success {
  background: #137333;
}

.toast.toast-error {
  background: #c62828;
}

.toast.toast-warning {
  background: #e65100;
}

.toast-dismiss-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 16px;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}

.toast-dismiss-btn:hover {
  color: #fff;
}

/* ── Map overlay components ── */

.map-hover-card {
  position: absolute;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-elevated);
  padding: 10px 14px;
  min-width: 200px;
  pointer-events: none;
  z-index: 20;
  font-size: 12px;
}

.map-detail-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 320px;
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: var(--shadow-elevated);
  z-index: 15;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}

.map-detail-panel.open {
  transform: translateX(0);
}

/* While the right-hand asset detail panel is open, shunt the floating
   Layers toolbox (and its reopen chip) left by the panel width so the
   panel never sits on top of it. Transform is used rather than moving
   `right`/`left` so it composes with the toolbox's own drag positioning
   instead of fighting the inline styles the drag handler sets. */
.map-detail-open .toolbox-panel,
.map-detail-open .toolbox-reopen-btn {
  transform: translateX(-336px);
  transition: transform 0.25s ease;
}

.map-legend {
  position: absolute;
  bottom: 32px;
  left: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

/* ── Map timeline panel ── */

.map-timeline-panel {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #0f1117;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 14px 16px 12px;
  z-index: 20;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
}

.map-timeline-panel.open {
  transform: translateY(0);
}

.map-timeline-panel input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
  outline: none;
}

.map-timeline-panel input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #60a5fa;
  cursor: pointer;
  margin-top: -6px;
  box-shadow: 0 0 6px rgba(96,165,250,0.6);
}

.map-timeline-panel input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  background: transparent;
  border-radius: 2px;
}

/* ── Asset lifecycle badges ── */

.lc-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.badge-success  { background: #e6f4ea; color: #137333; }
.badge-primary  { background: #e8f0fe; color: #1a73e8; }
.badge-info     { background: #e8f5ff; color: #0277bd; }
.badge-warning  { background: #fef3e2; color: #b45309; }
.badge-danger   { background: #fce8e6; color: #c62828; }
.badge-muted    { background: #f1f3f4; color: #5f6368; }

.row-active td { font-weight: 500; }

/* ── Section header action area ── */

.section-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* -- Defect Management -- */

.defect-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  border-left-width: 4px;
  padding: 12px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.defect-card:hover { background: #eff6ff; }
.defect-card.sev-critical    { border-left-color: #d32f2f; }
.defect-card.sev-major       { border-left-color: #e65100; }
.defect-card.sev-minor       { border-left-color: #1a73e8; }
.defect-card.sev-observation { border-left-color: #616161; }

.defect-card-top {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.defect-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.defect-asset {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.defect-card-bottom {
  display: flex;
  justify-content: flex-end;
}
.defect-sev-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sev-critical    { background: #fef2f2; color: #d32f2f; }
.sev-major       { background: #fff7ed; color: #e65100; }
.sev-minor       { background: #eff6ff; color: #1a73e8; }
.sev-observation { background: #f9fafb; color: #616161; }

.defect-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: capitalize;
}
.status-open           { background: #fef2f2; color: #d32f2f; }
.status-temp-fix       { background: #fffbeb; color: #92400e; }
.status-pending-parts  { background: #eff6ff; color: #1d4ed8; }
.status-in-remediation { background: #f0fdf4; color: #166534; }
.status-resolved       { background: #f0fdf4; color: #166534; }
.status-closed         { background: #f3f4f6; color: #616161; }

.defect-deadline {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #f3f4f6;
  color: #616161;
}
.defect-deadline.overdue { background: #fef2f2; color: #d32f2f; }
.defect-deadline.today   { background: #fff7ed; color: #e65100; }

.temp-fix-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fffbeb;
  border-radius: 4px;
  padding: 4px 8px;
  margin-bottom: 8px;
}

.defect-temp-tag {
  font-size: 10px;
  background: #fffbeb;
  color: #92400e;
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
  margin-left: 4px;
}

.defect-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.defect-event {
  font-size: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
}
.defect-event-type {
  font-weight: 600;
  color: var(--color-text);
  text-transform: capitalize;
}
.defect-event-notes {
  color: var(--color-text-muted);
  font-style: italic;
}
.defect-event-time {
  margin-left: auto;
  color: var(--color-text-muted);
  font-size: 11px;
}

.defect-dashboard-widget .widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.defect-dashboard-widget .widget-header h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
.defect-dashboard-widget .widget-link {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
}

/* ── DataTable component ── */
.data-table-wrapper { width: 100%; max-width: 100%; overflow-x: auto; box-sizing: border-box; }
.data-table-component { width: 100%; border-collapse: collapse; }
.data-table-component th, .data-table-component td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
}
.data-table-component thead th {
    background: var(--color-bg);
    font-weight: 600;
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    position: sticky;
    top: 0;
    z-index: 1;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.data-table-component thead th:hover { color: var(--color-text); }
.data-table-component thead th.sort-asc,
.data-table-component thead th.sort-desc { color: var(--color-primary); }
.data-table-component tbody tr:hover { background: #f8f9ff; }
.data-table-component tbody tr.clickable-row { cursor: pointer; }
.data-table-component .dt-filter-row th {
    padding: 4px 6px;
    background: var(--color-surface);
    position: sticky;
    top: 32px;
    z-index: 1;
    cursor: default;
    text-transform: none;
    font-weight: normal;
    color: var(--color-text);
}
.data-table-component .dt-filter-input {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    background: var(--color-surface);
    color: var(--color-text);
}
.data-table-component .dt-filter-input:focus {
    outline: none;
    border-color: var(--color-primary);
}
.data-table-component .dt-expand-cell {
    width: 32px;
    text-align: center;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 8px 4px;
}
.data-table-component .dt-expand-cell svg { transition: transform 0.15s; }
.data-table-component .dt-expand-cell.expanded svg { transform: rotate(90deg); }
.data-table-expand-row td { padding: 0 !important; background: var(--color-bg); }
.data-table-expand-row .dt-expand-content {
    padding: 12px 16px;
    border-left: 3px solid var(--color-primary);
}
.dt-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px;
    font-size: 12px;
    color: var(--color-text-muted);
}
.dt-pagination-controls { display: flex; gap: 4px; align-items: center; }
.dt-page-btn {
    padding: 3px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    cursor: pointer;
    font-size: 12px;
    color: var(--color-text);
    min-width: 28px;
    text-align: center;
}
.dt-page-btn:hover { background: var(--color-bg); }
.dt-page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.dt-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.data-table-component .dt-sort-icon { margin-left: 4px; display: inline-flex; vertical-align: middle; }
.data-table-component .dt-sort-icon svg { width: 12px; height: 12px; }

/* ── Backend-only lock badge (management portal) ── */

.cfg-row-locked { opacity: 0.6; }
.cfg-lock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 3px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.cfg-lock-badge svg { width: 12px; height: 12px; }

/* ── Prompt Editor ─────────────────────────────────────── */
.prompt-editor {
    margin-top: 16px;
    border-top: 1px solid var(--color-border);
    padding-top: 12px;
}
.prompt-editor-header { margin-bottom: 8px; }
.prompt-editor-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}
.prompt-editor-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 12px;
}
.prompt-tab-btn {
    padding: 6px 12px;
    border: none;
    background: none;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.12s, border-color 0.12s;
}
.prompt-tab-btn:hover { color: var(--color-text); }
.prompt-tab-btn.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}
.prompt-editor-content { min-height: 120px; }
.prompt-preview-text {
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    line-height: 1.5;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 400px;
    overflow-y: auto;
}
.prompt-preview-role {
    font-size: 11px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}
.prompt-field-desc {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}
.prompt-textarea {
    width: 100%;
    min-height: 180px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    resize: vertical;
}
.custom-rules-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.custom-rule-row { display: flex; gap: 6px; align-items: center; }

/* ── Groups Admin ── */
.groups-layout { display: grid; grid-template-columns: 280px 1fr; gap: 0; height: 100%; }
.groups-list-panel {
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.groups-list-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.groups-list-header h3 { font-size: 13px; font-weight: 600; }
.group-list-item {
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s;
}
.group-list-item:hover { background: var(--color-bg); }
.group-list-item.active { background: #e8f0fe; }
.group-list-item-name { font-size: 13px; font-weight: 500; flex: 1; }
.group-list-item-meta { font-size: 11px; color: var(--color-text-muted); }
.groups-detail-panel { overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.group-detail-section { }
.group-detail-section h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 10px; }
.group-permissions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.group-permission-item { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; }
.group-permission-item input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; }
.group-members-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.group-members-table th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--color-text-muted); padding: 4px 8px; border-bottom: 1px solid var(--color-border); }
.group-members-table td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); }
.group-add-member-row { display: flex; gap: 8px; margin-top: 8px; }
.group-add-member-row select { flex: 1; }

/* ── Criticality ──────────────────────────────────────────────────────────── */
.criticality-bar {
  height: 10px; border-radius: 5px;
  background: var(--color-border);
  overflow: hidden; margin: 8px 0;
}
.criticality-fill { height: 100%; border-radius: 5px; transition: width 0.3s ease; }

.dim-control { display: flex; gap: 4px; }
.dim-btn {
  width: 32px; height: 28px; border: 1px solid var(--color-border);
  border-radius: 4px; background: white; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--color-text-muted);
  transition: all 0.15s;
}
.dim-btn.active {
  background: var(--color-primary); color: white;
  border-color: var(--color-primary);
}

.criticality-pill {
  display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
}
.criticality-critical { background: #fef2f2; color: var(--color-critical); }
.criticality-high     { background: #fff7ed; color: var(--color-high); }
.criticality-medium   { background: #eff6ff; color: var(--color-medium); }
.criticality-low      { background: #f0fdf4; color: var(--color-low); }

.criticality-panel { padding: 16px; }
.criticality-score-card { padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.criticality-score-header { display: flex; align-items: center; justify-content: space-between; }
.criticality-score-title { font-size: 14px; font-weight: 600; }
.criticality-score-row { display: flex; align-items: center; gap: 12px; }
.criticality-score-row .criticality-bar { flex: 1; margin: 0; }
.criticality-score-value { font-size: 13px; font-weight: 600; white-space: nowrap; }
.criticality-dims { display: flex; flex-direction: column; gap: 8px; }
.criticality-dim-row { display: flex; align-items: center; gap: 12px; }
.criticality-dim-label { flex: 1; font-size: 13px; color: var(--color-text-muted); cursor: default; }
.criticality-dim-value { width: 16px; font-size: 13px; font-weight: 600; text-align: right; }
.criticality-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.criticality-save-status { font-size: 12px; color: var(--color-text-muted); }
.custom-rule-row .form-input { flex: 1; }

/* ── Asset Health (Phase 31) ── */

.health-bar-mini {
  display: inline-block; width: 60px; height: 8px;
  border-radius: 4px; background: var(--color-border);
  overflow: hidden; vertical-align: middle; margin-right: 6px;
}
.health-fill { height: 100%; border-radius: 4px; }

.health-pill {
  display: inline-block; padding: 2px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 600; text-transform: uppercase;
}
.health-critical { background: #fef2f2; color: var(--color-critical); }
.health-at-risk  { background: #fff7ed; color: var(--color-high); }
.health-fair     { background: #fffbeb; color: var(--color-warning); }
.health-healthy  { background: #f0fdf4; color: var(--color-low); }

.health-fill-critical { background: var(--color-critical); }
.health-fill-at-risk  { background: var(--color-high); }
.health-fill-fair     { background: var(--color-warning); }
.health-fill-healthy  { background: var(--color-low); }

/* Fleet Health view */
.fleet-health-view { padding: 20px; }
.fleet-health-view .page-title-row { margin-bottom: 16px; }
.fleet-health-table-wrap { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.fleet-health-table { width: 100%; border-collapse: collapse; }
.fleet-health-table th { padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 600; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); background: var(--color-bg); text-transform: uppercase; letter-spacing: 0.04em; }
.fleet-health-table td { padding: 11px 14px; border-bottom: 1px solid var(--color-border); font-size: 13px; vertical-align: middle; }
.fleet-health-table tr:last-child td { border-bottom: none; }
.fleet-health-table tr:hover td { background: #f8f9fa; }
.fleet-health-table .asset-link { color: var(--color-primary); cursor: pointer; font-weight: 500; }
.fleet-health-table .asset-link:hover { text-decoration: underline; }
.fleet-health-health-cell { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.fleet-health-score { font-size: 13px; font-weight: 700; min-width: 24px; text-align: right; }

/* Health signal breakdown table */
.health-signals-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.health-signals-table th { padding: 8px 12px; text-align: left; font-size: 12px; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); text-transform: uppercase; letter-spacing: 0.04em; }
.health-signals-table td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.health-signals-table tr:last-child td { border-bottom: none; }

/* KPI cards for health bands — clickable filter */
.kpi-card.kpi-health-critical { border-left-color: var(--color-critical); cursor: pointer; }
.kpi-card.kpi-health-at-risk  { border-left-color: var(--color-high); cursor: pointer; }
.kpi-card.kpi-health-fair     { border-left-color: var(--color-warning); cursor: pointer; }
.kpi-card.kpi-health-healthy  { border-left-color: var(--color-low); cursor: pointer; }
.kpi-card.kpi-health-critical .kpi-number { color: var(--color-critical); }
.kpi-card.kpi-health-at-risk  .kpi-number { color: var(--color-high); }
.kpi-card.kpi-health-fair     .kpi-number { color: var(--color-warning); }
.kpi-card.kpi-health-healthy  .kpi-number { color: var(--color-low); }
.kpi-card.kpi-filter-active { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-card); }

/* ── Maintenance triage queue ─────────────────────────────────────────────
   The fault inbox: prestart faults awaiting a maintenance supervisor's
   decision. Severity shows as a left border so a grounded truck is
   scannable down the list. */

.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }

.btn-chip {
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface, #fff);
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text-secondary, #5f6368);
}
.btn-chip:hover  { background: #f1f3f4; }
.btn-chip.active {
  background: var(--color-primary, #1a73e8);
  border-color: var(--color-primary, #1a73e8);
  color: #fff;
}

.mq-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  margin-bottom: 8px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: 6px;
}
.mq-card.sev-critical { border-left-color: #c62828; }
.mq-card.sev-major    { border-left-color: #ef6c00; }
.mq-card.sev-minor    { border-left-color: #f9a825; }
.mq-card.sev-observation { border-left-color: #9aa0a6; }

.mq-card-main { flex: 1; min-width: 0; }

.mq-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.mq-asset { font-weight: 600; font-size: 14px; }

.mq-title {
  font-size: 14px;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

.mq-meta {
  font-size: 12px;
  color: var(--color-text-secondary, #5f6368);
}

.mq-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mq-triaged {
  font-size: 12px;
  color: var(--color-text-secondary, #5f6368);
  font-style: italic;
}

.mq-fault-text {
  padding: 8px 10px;
  background: #f8f9fa;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 12px;
}

/* Question-level condition picker in the prestart template editor. */
.q-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}
.q-conditions .cond-label {
  font-size: 11px;
  color: var(--color-text-secondary, #5f6368);
  margin-right: 2px;
}
.cond-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  font-size: 11px;
  cursor: pointer;
  background: #fff;
  user-select: none;
}
.cond-toggle.on {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
}

/* ── iOS input zoom trap ─────────────────────────────────────────────────────
   Safari and WKWebView zoom the whole page in when a focused input has a font
   smaller than 16px. In a WebView there is no address bar and no reliable way
   to pinch back out, so the app stays stuck zoomed — every field at 13px was a
   one-way trip.

   16px on every text-entry control below the phone breakpoint. Not a visual
   choice: it is the exact threshold iOS uses. */
@media (max-width: 900px) {
  .form-input,
  .search-bar .form-input,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px;
  }
}

/* ── Offline banner ──────────────────────────────────────────────────────────
   Shown whenever the app is running on cached data. Without it an empty truck
   list looks like data loss rather than "you have no signal", and a driver has
   no way to tell that their prestart is queued rather than lost. */
#offline-banner {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 900;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px;
  background: #8a6d00;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

#offline-banner.visible { display: flex; }

#offline-banner .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd54f;
  flex-shrink: 0;
}

#offline-banner .pending {
  font-weight: 500;
  opacity: 0.9;
}

/* The banner is fixed chrome above everything, so the app shifts down by its
   height rather than having its first row hidden underneath. */
/* The banner sits above the tab bar, which already carries the status-bar
   inset — so only the banner's own height is reserved here. Adding the inset
   again would put a bare band back under the status bar. */
body.app-offline #app {
  padding-top: 28px;
}

/* Timeline replay: a truck whose position at the current replay time was
   captured with no signal and uploaded later. The fix and its timestamp are
   genuine (ts_device is the phone's own capture time) — what differs is that
   the office did not know it at the time. Shown as a dashed amber ring so a
   supervisor can tell "we had no contact" from "the truck did not move",
   which otherwise look identical on a replay. */
.tl-marker-offline {
  border-style: dashed !important;
  border-color: #b8860b !important;
  box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.35),
              0 1px 4px rgba(0, 0, 0, 0.4) !important;
}