/* ============================================================================
   SPEEDX MOTORISTA — layout do cockpit (consome tokens + componentes)
============================================================================ */

html, body { height: 100%; overflow: hidden; }

/* ------------------------------- MAPA ------------------------------------ */
#mapa { position: absolute; inset: 0; z-index: var(--z-map); background: var(--surface-sunken); }
.leaflet-control-attribution {
  font-size: 10px; background: var(--glass) !important; color: var(--text-muted) !important;
}

/* ------------------------------ TOP BAR ---------------------------------- */
.topbar {
  position: fixed; z-index: var(--z-topbar);
  top: calc(var(--sp-3) + env(safe-area-inset-top));
  left: var(--sp-3); right: var(--sp-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.topbar__brand {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-full);
  background: var(--glass); backdrop-filter: blur(10px);
}
.brand-bolt { width: 20px; height: 20px; color: var(--accent); }
.brand-name { font-size: var(--fs-title); font-weight: var(--fw-heavy); letter-spacing: -0.02em; }
.brand-x { color: var(--primary); }
.topbar__right { display: flex; align-items: center; gap: var(--sp-2); }

/* --------------------------- COCKPIT (Início) ---------------------------- */
.painel-cockpit { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

.metricas {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.metrica {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-3) var(--sp-2);
  background: var(--surface-sunken); border-radius: var(--r-md);
}
.metrica__valor { font-size: var(--fs-title); font-weight: var(--fw-bold); }
.metrica__label { font-size: var(--fs-caption); color: var(--text-muted); }

/* Estado da operação (offline / online / em corrida) */
.estado {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); margin-bottom: var(--sp-4);
  background: var(--surface-sunken); border-radius: var(--r-md);
}
.estado--online   { background: var(--success-soft); }
.estado--corrida  { background: var(--info-soft); }
.estado--erro     { background: var(--danger-soft); }

.estado__icone { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
.estado--online .estado__icone  { color: var(--success); }
.estado--corrida .estado__icone { color: var(--info); }
.estado--erro .estado__icone    { color: var(--danger); }
.estado__icone .icon { width: 26px; height: 26px; }

.estado__titulo { font-size: var(--fs-body); font-weight: var(--fw-bold); }
.estado__texto  { font-size: var(--fs-body-sm); color: var(--text-secondary); }

/* Botão online quando ATIVO vira ação de sair (vermelho vazado) */
#btn-online.ligado {
  background: transparent; color: var(--danger);
  border: 1.5px solid var(--danger); box-shadow: none;
}

/* ------------------------------ PÁGINAS (abas) --------------------------- */
.pagina {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: var(--bg);
  padding: calc(76px + env(safe-area-inset-top)) var(--sp-4) calc(84px + env(safe-area-inset-bottom));
  overflow-y: auto;
}
.pagina__titulo { font-size: var(--fs-heading-lg); font-weight: var(--fw-bold); margin-bottom: var(--sp-4); }

.cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.conta-linha { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.conta-linha__label { font-size: var(--fs-body-sm); color: var(--text-muted); }
.conta-linha__valor { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); text-align: right; word-break: break-all; }

/* Lista de corridas da sessão */
.corrida-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
.corrida-item:last-child { border-bottom: none; }
.corrida-item__hora { font-size: var(--fs-caption); color: var(--text-muted); }
.corrida-item__valor { font-weight: var(--fw-bold); color: var(--success); }

/* --------------------------- BOTTOM NAVIGATION --------------------------- */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-topbar);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border-subtle);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 12px rgba(16,22,19,.06);
}
.bottom-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-2) 0 var(--sp-2);
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-medium);
  transition: color var(--t-base) var(--ease);
}
.bottom-nav__item .icon { width: 22px; height: 22px; }
.bottom-nav__item--ativo { color: var(--primary); }

/* ------------------------- MODAL DO CHAMADO ------------------------------ */
.modal.chamado { text-align: left; }

.chamado__topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.chamado__segundos { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.chamado__valor {
  font-size: var(--fs-display); font-weight: var(--fw-heavy);
  color: var(--text); line-height: var(--lh-tight);
  margin-bottom: var(--sp-4); letter-spacing: -0.02em;
}

.chamado__detalhes { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chamado__linha { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-body-sm); color: var(--text-secondary); }
.chamado__linha .icon--sm { color: var(--primary); }

.chamado-tempo {
  height: 6px; background: var(--surface-sunken);
  border-radius: var(--r-full); overflow: hidden; margin-bottom: var(--sp-5);
}
#chamado-barra {
  height: 100%; width: 100%;
  background: var(--primary); border-radius: var(--r-full);
  transition: width 1s linear;
}

.chamado__acoes { display: flex; gap: var(--sp-3); }
.chamado__acoes .btn { flex: 1; }