/*
  SOPREMA Apps — Design System v0.1 — Componentes
  Depende só de tokens.css (nenhum valor de cor/raio/sombra hardcoded aqui).
  Ícones: sempre lineares (stroke, não fill) — ver classe .icon.

  Acessibilidade / TDAH: contraste alto texto↔fundo, um destaque de cor por vez
  (nunca dois CTAs concorrendo), rótulos curtos e diretos, foco visível em todo
  elemento interativo (outline azul, nunca removido sem substituto).
*/

/* ---------- Shell global: header fixo no topo + sidebar + conteúdo ----------
   Estrutura fiel ao Stitch aprovado: <header class="app-topbar">…</header>
   <div class="app-shell"><aside class="app-sidebar">…</aside><main class="app-main">…</main></div>
   Único lugar onde isso é definido — todas as telas usam a mesma marcação, então
   nenhuma tela pode mais "esquecer" o CSS do menu (bug real corrigido em 14/08). */
.app-topbar {
  height: 72px; background: var(--app-surface); border-bottom: 1px solid var(--app-border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 28px;
  position: sticky; top: 0; z-index: 30;
}
.app-topbar .brand-mark b { font-size: 22px }
.app-topbar-actions { display: flex; align-items: center; gap: 10px }
.tg-icon-btn {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid transparent; background: transparent;
  color: var(--app-text-muted); display: grid; place-items: center; cursor: pointer;
}
.tg-icon-btn:hover { background: var(--app-surface-muted); color: var(--app-text) }
.app-body { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 72px) }
.app-shell { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh }
.app-sidebar {
  background: var(--app-bg); border-right: 1px solid var(--app-border);
  padding: 24px 16px; display: flex; flex-direction: column; gap: 18px;
}
/* 100% de largura de verdade — nada de max-width/margin:auto centralizando e sobrando
   cinza dos dois lados. Bug reportado 2x pelo Wellington (a 1a correção só trocou o teto
   baixo por um teto mais alto ainda centralizado, o que ainda deixava sobra visível em
   monitor largo). Sem teto nenhum agora: cresce igual ao restante do shell. */
.app-main { padding: clamp(24px, 2.5vw, 44px); width: 100% }
@media (min-width: 1400px) {
  .app-body { grid-template-columns: 300px 1fr }
}
/* Mobile: sidebar oculta via display:none, mas como item de grid ela ainda reserva uma
   "track" que o align-content:stretch padrão infla com a altura livre do container —
   bug real (buraco em branco entre o header e o título em toda tela mobile). Em bloco
   simples isso não existe, e no mobile é sempre 1 coluna mesmo — sem motivo pra continuar
   como grid aqui. Fica no fim do bloco de shell de propósito: precisa vir DEPOIS das
   regras base de .app-body/.app-sidebar pra realmente vencer a cascata (mesma
   especificidade, então ordem no arquivo decide — bug real encontrado ao testar as
   telas de equipe/gestão em mobile, a sidebar não sumia). */
@media (max-width: 900px) { .app-body { display: block } .app-sidebar { display: none } }
.brand-mark { display: flex; align-items: center; gap: 12px }
.brand-mark .logo-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--soprema-blue) }
.brand-logo { height: 30px; width: auto; display: block }
.brand-divider { width: 1px; height: 22px; background: var(--app-border); flex: 0 0 auto }
.brand-mark b { font-size: 20px; font-weight: 900; color: var(--soprema-blue); letter-spacing: .01em }
.brand-sub { font-size: var(--font-size-xs); color: var(--app-text-muted); margin: 2px 0 0 }

/* Cartão de perfil no topo da sidebar — foto real (ou inicial), nome, tagline fixa */
.sb-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 6px 6px 4px }
.sb-avatar {
  width: 76px; height: 76px; border-radius: 50%; background: var(--blue-600); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 28px; overflow: hidden; flex: 0 0 auto;
  border: 3px solid var(--app-surface); box-shadow: var(--shadow-card);
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover }
.sb-name { font-weight: 800; font-size: var(--font-size-md); color: var(--soprema-blue) }
.sb-tagline { font-size: var(--font-size-xs); color: var(--app-text-muted) }

.side-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--app-border); padding-top: 10px }
.side-foot button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; background: transparent; color: var(--app-text-muted); text-align: left; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-sm); font-weight: 700; width: 100% }
.side-foot button:hover { background: var(--app-surface-muted); color: var(--app-text) }
.side-foot button.on { background: var(--blue-100); color: var(--soprema-blue) }
[data-theme="dark"] .side-foot button.on { background: rgba(22,136,229,.16) }

/* ---------- Navegação da sidebar — badge de ícone colorido (não só stroke solto) ---------- */
.nav-side { display: flex; flex-direction: column; gap: 3px }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px; border: 0; background: transparent;
  color: var(--app-text); text-align: left; border-radius: var(--radius-md); cursor: pointer;
  font-size: var(--font-size-sm); font-weight: 700; width: 100%;
}
.nav-item:hover { background: var(--app-surface-muted) }
.nav-item.on { background: var(--blue-100); color: var(--soprema-blue) }
[data-theme="dark"] .nav-item.on { background: rgba(22,136,229,.16) }
.nav-item .nic {
  width: 34px; height: 34px; border-radius: var(--radius-sm); flex: 0 0 auto; display: grid; place-items: center;
  background: var(--app-surface-muted); color: var(--app-text-muted);
}
.nav-item.on .nic { background: var(--soprema-blue); color: #fff }
.nav-item .nic svg { width: 18px; height: 18px }

/* ---------- KPI cards + barras de proporção — usados nos dashboards de equipe/gestão ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px }
.kpi-card .kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px }
.kpi-card .kpi-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-label); color: var(--app-text-muted); font-weight: 800 }
.kpi-card .kpi-value { font-size: 32px; font-weight: 900; line-height: 1 }
.kpi-card .kpi-sub { font-size: 11px; color: var(--app-text-muted); margin-top: 6px }
.bar-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--font-size-xs); margin-bottom: 6px; font-weight: 700 }
.bar-track { height: 8px; border-radius: 4px; background: var(--app-surface-muted); overflow: hidden; margin-bottom: 14px }
.bar-track > div { height: 100%; background: var(--soprema-blue); border-radius: 4px }
.empty-note { text-align: center; color: var(--app-text-muted); border: 1px dashed var(--app-border); border-radius: var(--radius-md); padding: 24px; font-size: var(--font-size-sm) }

/* ---------- Lista de locais (frequentes / favoritos) — usada em Dashboard e Configurações ---------- */
.freq-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--app-border); font-size: var(--font-size-sm) }
.freq-row:last-child { border-bottom: 0 }
.freq-row button { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--app-border); background: var(--app-surface); color: var(--soprema-blue); font-weight: 900; cursor: pointer }

/* ---------- Barra de navegação inferior (mobile) — sidebar some em telas pequenas,
   esta é a única forma de navegar entre Dashboard/Histórico/Calendário/Ajustes no
   celular (bug real: antes dela não existia NENHUMA navegação mobile além do FAB). */
.mobile-tabbar { display: none }
@media (max-width: 900px) {
  .mobile-tabbar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
    background: var(--app-surface); border-top: 1px solid var(--app-border);
    justify-content: space-around; padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px rgba(0,35,70,.08);
  }
  .mt-item { background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; font-weight: 700; color: var(--app-text-muted); padding: 4px 10px; cursor: pointer }
  .mt-item svg { width: 20px; height: 20px }
  .mt-item.on { color: var(--soprema-blue) }
}

/* ---------- Avatar do topbar (34px) — mesma lógica de foto/inicial da sidebar ---------- */
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--blue-600); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; overflow: hidden; flex: 0 0 auto }
.avatar img, .sb-avatar img, .avatar-lg img { width: 100%; height: 100%; object-fit: cover }

/* ---------- Botões ---------- */
/* Um único CTA primário por tela/seção — o resto é secondary/ghost. */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: var(--radius-md);
  padding: 11px 18px; font-weight: 700; font-size: var(--font-size-sm); cursor: pointer;
  border: 1px solid transparent; transition: transform .08s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px }
.btn-primary { background: var(--soprema-blue); color: #fff; box-shadow: var(--shadow-card) }
.btn-primary:hover { background: var(--blue-700) }
.btn-secondary { background: var(--app-surface); color: var(--soprema-blue); border-color: var(--blue-600) }
.btn-secondary:hover { background: var(--blue-100) }
[data-theme="dark"] .btn-secondary:hover { background: var(--app-surface-muted) }
.btn-ghost { background: transparent; color: var(--app-text-muted); border-color: transparent }
.btn-ghost:hover { color: var(--app-text); background: var(--app-surface-muted) }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger) }
.btn:disabled { opacity: .45; cursor: not-allowed }

/* ---------- Ícones lineares ---------- */
.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.icon-badge {
  width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--blue-100); color: var(--soprema-blue); flex: 0 0 auto;
}
[data-theme="dark"] .icon-badge { background: rgba(22,136,229,.16) }
/* Variações de cor por tipo de registro — mesma paleta semântica das telas de gestão,
   evita o visual monótono (tudo azul-claro igual) que deixava o Dashboard sem graça. */
.icon-badge.badge-cliente { background: rgba(240,145,0,.14); color: var(--warning) }
.icon-badge.badge-viagem { background: rgba(46,125,50,.14); color: var(--success) }

/* ---------- Cards de categoria "com tempero" — fundo tingido + badge sólido colorido +
   indicadores de estado (check = registrado hoje, estrela = favorito). Referência visual
   trazida pelo Wellington (telas antigas do protótipo): fundo leve na cor da categoria,
   ícone em círculo sólido com glifo branco — não só um ícone azul solto num card branco. */
.cat-card { position: relative; border-color: transparent !important }
.cat-card.on { outline: 2px solid var(--soprema-blue); outline-offset: -2px }
.cat-blue { background: var(--cat-blue-tint) }
.cat-green { background: var(--cat-green-tint) }
.cat-violet { background: var(--cat-violet-tint) }
.cat-amber { background: var(--cat-amber-tint) }
.cat-teal { background: var(--cat-teal-tint) }
.cat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; color: #fff; flex: 0 0 auto }
.cat-icon svg { stroke: #fff }
.cat-icon.blue { background: var(--cat-blue) }
.cat-icon.green { background: var(--cat-green) }
.cat-icon.violet { background: var(--cat-violet) }
.cat-icon.amber { background: var(--cat-amber) }
.cat-icon.teal { background: var(--cat-teal) }
.cat-check {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--soprema-blue); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-card);
}
.cat-check svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3 }
.cat-star { position: absolute; top: 10px; right: 10px; color: var(--warning) }
.cat-star svg { width: 16px; height: 16px; fill: var(--warning); stroke: var(--warning) }

/* ---------- Cards ---------- */
.card {
  background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-card);
}
.card-floating { box-shadow: var(--shadow-floating) }
.card-select {
  background: var(--app-surface); border: 1.5px solid var(--app-border); border-radius: var(--radius-lg);
  padding: 18px; cursor: pointer; display: flex; flex-direction: column; gap: 10px;
  transition: border-color .12s ease, transform .08s ease;
}
.card-select:hover { border-color: var(--blue-500); transform: translateY(-1px) }
.card-select.selected { border-color: var(--soprema-blue); background: var(--blue-100) }
[data-theme="dark"] .card-select.selected { background: rgba(22,136,229,.14) }
.card-select b { font-size: var(--font-size-md); font-weight: 800 }
.card-select span { font-size: var(--font-size-xs); color: var(--app-text-muted) }

/* ---------- Status atual (hero card) ---------- */
.status-hero {
  background: linear-gradient(135deg, var(--blue-100), var(--app-surface));
  border: 1px solid var(--blue-500); border-radius: var(--radius-lg); padding: 22px;
}
[data-theme="dark"] .status-hero { background: linear-gradient(135deg, rgba(22,136,229,.18), var(--app-surface)) }
.status-hero .eyebrow { font-size: var(--font-size-xs); font-weight: var(--font-weight-label); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--soprema-blue) }
.status-hero .loc { font-size: var(--font-size-xl); font-weight: 900; margin: 4px 0 }
.status-hero .meta { color: var(--app-text-muted); font-size: var(--font-size-sm) }

/* ---------- Formulário ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px }
.field label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-label); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--app-text-muted);
}
.field input, .field select, .field textarea {
  border: 1.5px solid var(--app-border); border-radius: var(--radius-sm); padding: 10px 12px;
  background: var(--app-surface); color: var(--app-text); font-size: var(--font-size-sm); font-family: inherit;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--blue-500); outline-offset: 1px; border-color: var(--soprema-blue) }

/* ---------- Tabela / listagem ---------- */
.table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm) }
.table th {
  text-align: left; font-size: var(--font-size-xs); font-weight: var(--font-weight-label); letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase; color: var(--app-text-muted); padding: 10px 12px; border-bottom: 1px solid var(--app-border);
}
.table td { padding: 12px; border-bottom: 1px solid var(--app-border) }
.table tbody tr:nth-child(even) { background: var(--app-surface-muted) }
.table tbody tr:hover { background: var(--blue-100) }
[data-theme="dark"] .table tbody tr:hover { background: rgba(22,136,229,.12) }

/* ---------- Badges / status ---------- */
/* Semântico é separado da identidade (azul) — só aparece em estado real, não decoração. */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: var(--font-size-xs); font-weight: 700 }
.badge-success { background: rgba(46,125,50,.12); color: var(--success) }
.badge-warning { background: rgba(240,145,0,.14); color: var(--warning) }
.badge-danger { background: rgba(216,59,59,.12); color: var(--danger) }
.badge-info { background: var(--blue-100); color: var(--soprema-blue) }
[data-theme="dark"] .badge-info { background: rgba(22,136,229,.18) }

/* ---------- Chips (favoritos / locais recentes) ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  background: var(--app-surface-muted); border: 1px solid var(--app-border); font-size: var(--font-size-xs);
  font-weight: 700; cursor: pointer;
}
.chip:hover { border-color: var(--soprema-blue); color: var(--soprema-blue) }

/* ---------- Layout mobile (bottom tab bar + cards grandes) ---------- */
.mobile-shell { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--app-bg); position: relative; padding-bottom: 84px }
.mobile-header { padding: 20px 18px 4px }
.mobile-header .date { font-size: var(--font-size-xs); color: var(--app-text-muted) }
.mobile-header h1 { font-size: var(--font-size-xl); margin: 2px 0 0 }
.mobile-header h1 b { color: var(--soprema-blue) }
.mobile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px 18px }
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px;
  background: var(--app-surface); border-top: 1px solid var(--app-border); display: flex; justify-content: space-around;
  padding: 10px 6px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0,35,70,.06);
}
.tabbar button {
  background: none; border: 0; display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: var(--app-text-muted); cursor: pointer; padding: 4px 8px;
}
.tabbar button.active { color: var(--soprema-blue) }

/* ---------- Toggle de tema ---------- */
.theme-toggle {
  width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--app-border);
  background: var(--app-surface); display: grid; place-items: center; cursor: pointer; color: var(--app-text);
}

/* ---------- Modal / drawer de registro (compartilhado entre todas as telas) ---------- */
.overlay { position: fixed; inset: 0; background: rgba(6,20,38,.5); display: none; place-items: center; z-index: 50; padding: 16px; overflow-y: auto }
.overlay.on { display: grid }
.dialog { background: var(--app-surface); border-radius: var(--radius-lg); padding: 24px; width: min(420px,100%); box-shadow: var(--shadow-floating) }
.dialog h3 { margin: 0 0 16px; font-size: var(--font-size-lg) }
.optgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px }
.periodrow { display: flex; gap: 6px; margin-bottom: 16px }
.periodrow button { flex: 1; border: 1.5px solid var(--app-border); background: var(--app-surface); color: var(--app-text); padding: 9px 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--font-size-xs); font-weight: 700 }
.periodrow button.on { background: var(--soprema-blue); color: #fff; border-color: var(--soprema-blue) }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px }
.toast { position: fixed; bottom: 20px; right: 20px; background: var(--app-surface); border: 1px solid var(--app-border); border-radius: var(--radius-sm); padding: 12px 16px; box-shadow: var(--shadow-floating); z-index: 60; font-size: var(--font-size-sm) }