/* ============================================================================
   QRBCERTO — Design System Premium (theme.css)
   ----------------------------------------------------------------------------
   Camada de REFINO VISUAL nivel iOS, carregada DEPOIS de styles.css. Nao altera
   logica, endpoints nem nomes de campos — so eleva a aparencia por tokens e
   refino de componentes-base. Reversivel: remover o <link> volta ao tema antigo.

   Organizacao:
     1. Tokens (cor, tipografia, espaco, raio, sombra, material, movimento)
     2. Base / utilidades
     3. Login (primeira impressao)
     4. Chrome (topbar + sheets com material/vidro fosco)
     5. Componentes (botoes, inputs, cards, badges, skeleton, empty state)
     6. Microinteracoes (feedback de toque) + reduce-motion
   Etapa 1 de N — foco: fundacao + login + chrome. (Telas internas nas proximas.)
   ============================================================================ */

/* 1) TOKENS ----------------------------------------------------------------- */
:root {
  /* Rampa de tipografia coerente (base ~17px, estilo iOS) */
  --text-caption2: 11px;
  --text-caption: 12px;
  --text-footnote: 13px;
  --text-subhead: 15px;
  --text-callout: 16px;
  --text-body: 17px;
  --text-title3: 20px;
  --text-title2: 23px;
  --text-title1: 28px;
  --text-largetitle: 34px;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-base: 1.45;

  /* Pesos mais comedidos (Apple usa semibold p/ enfase, nao 800/900 em tudo) */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tracking: aperta titulos grandes, relaxa textos pequenos em caixa-alta */
  --track-tight: -0.022em;
  --track-snug: -0.01em;
  --track-caps: 0.06em;

  /* Materiais (vidro fosco translucido — iOS) */
  --mat-regular: rgba(255, 255, 255, 0.72);
  --mat-thick: rgba(255, 255, 255, 0.86);
  --mat-blur: saturate(180%) blur(20px);

  /* Movimento */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.16s;
  --dur-base: 0.26s;
  --dur-slow: 0.4s;

  /* Sombras premium — mais suaves, em camadas, realistas */
  --shadow-e1: 0 1px 2px rgba(16, 24, 20, 0.05), 0 1px 3px rgba(16, 24, 20, 0.04);
  --shadow-e2: 0 2px 6px -2px rgba(16, 24, 20, 0.08), 0 6px 18px -6px rgba(16, 24, 20, 0.10);
  --shadow-e3: 0 8px 24px -8px rgba(16, 24, 20, 0.16), 0 4px 10px -4px rgba(16, 24, 20, 0.08);
  --shadow-e4: 0 18px 48px -16px rgba(16, 24, 20, 0.24), 0 8px 18px -8px rgba(16, 24, 20, 0.10);

  /* Raio um pouco mais generoso (cantos "produto") */
  --r-card: 18px;
  --r-control: 13px;
  --r-pill: 9999px;
}

/* 1b) ADAPTACAO AO TEMA ESCURO (o app tem body.theme-dark) ------------------ */
/* So redefinimos tokens que dependem da luminosidade — materiais e hairlines.
   Tudo que usa var(--mat-*) (topbar, sheets) adapta sozinho, sem regra extra. */
body.theme-dark {
  --mat-regular: rgba(20, 28, 25, 0.62);
  --mat-thick: rgba(15, 21, 19, 0.80);
  --shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-e2: 0 2px 8px -2px rgba(0, 0, 0, 0.5);
  --shadow-e3: 0 10px 28px -8px rgba(0, 0, 0, 0.55);
  --shadow-e4: 0 20px 50px -16px rgba(0, 0, 0, 0.6);
}
body.theme-dark .topbar { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.theme-dark .login-panel { border-color: rgba(255, 255, 255, 0.08); }

/* 2) BASE ------------------------------------------------------------------- */
body {
  /* leve melhora de renderizacao tipografica + recursos OpenType do Inter */
  font-feature-settings: "cv05" 1, "ss01" 1, "cv11" 1;
  letter-spacing: var(--track-snug);
}

/* 3) LOGIN ------------------------------------------------------------------ */
/* Fundo calmo e premium (substitui o padrao de grade por um gradiente sutil) */
.login-shell {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(16, 185, 129, 0.10) 0%, transparent 55%),
    linear-gradient(180deg, #f4f7f3 0%, #eef2ec 100%);
  padding: clamp(20px, 5vw, 40px);
}

.login-panel {
  width: min(440px, 100%);
  gap: 16px;
  padding: clamp(24px, 6vw, 36px);
  border: 1px solid rgba(16, 24, 20, 0.06);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-e4);
}

.login-brand { text-align: center; }
.login-logo { height: 60px; margin: 0 auto 14px; }

.login-panel h1 {
  font-size: clamp(26px, 7vw, 30px);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

.login-copy {
  font-size: var(--text-subhead);
  line-height: var(--lh-base);
  color: var(--muted);
}

/* Labels e campos do login com mais respiro e hierarquia leve */
.login-panel label {
  gap: 7px;
  font-weight: var(--fw-semibold);
  font-size: var(--text-footnote);
  letter-spacing: 0;
  color: var(--ink-secondary);
}

.login-panel input {
  border-radius: var(--r-control);
  padding: 13px 15px;
  font-size: var(--text-callout);
  background: var(--surface-2);
  border-color: var(--line);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.login-panel input:focus {
  background: var(--surface);
  border-color: var(--accent-green);
  box-shadow: 0 0 0 4px var(--accent-green-alpha);
}

.login-panel .primary.full { margin-top: 4px; }

.login-or { font-size: var(--text-footnote); }
.login-alt, .login-lgpd { font-size: var(--text-footnote); }

/* 4) CHROME — topbar e sheets com material (vidro fosco) -------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  border-bottom: 1px solid rgba(16, 24, 20, 0.07);
  box-shadow: none;
}
/* Navegadores sem suporte a backdrop-filter: cai p/ fundo solido (legibilidade) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar { background: var(--surface); }
}

.topbar h2 {
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
}
.eyebrow {
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps);
  color: var(--accent-green);
}

/* Sheet: backdrop com leve blur + apresentacao com mola */
.sheet-backdrop {
  background: rgba(16, 24, 20, 0.34);
  -webkit-backdrop-filter: saturate(120%) blur(3px);
  backdrop-filter: saturate(120%) blur(3px);
}
.sheet {
  border-radius: 24px 24px 0 0;
  box-shadow: var(--shadow-e4);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.sheet-handle {
  width: 40px;
  height: 5px;
  background: var(--line-strong);
  opacity: 0.9;
  margin: 7px auto 14px;
}
.sheet-title {
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-snug);
}

/* 5) COMPONENTES ------------------------------------------------------------ */
/* Botoes: peso mais comedido, raio de controle, sombra premium, sem tracking */
.primary, .secondary, .danger {
  border-radius: var(--r-control);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    transform 0.1s var(--ease-out);
}
.primary { box-shadow: var(--shadow-e2), inset 0 1px 0 rgba(255, 255, 255, 0.16); }
.secondary { box-shadow: var(--shadow-e1); }

/* Inputs: raio e foco premium (fora do login tambem) */
input, select, textarea {
  border-radius: var(--r-control);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 4px var(--accent-green-alpha);
}

/* Cards de feed e linhas de lista: profundidade e cantos mais suaves */
.feed-card {
  border-radius: var(--r-card);
  box-shadow: var(--shadow-e1);
  transition: box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out);
}
.feed-card:hover {
  box-shadow: var(--shadow-e3);
  transform: translateY(-2px);
}

/* Skeleton com brilho mais sutil */
.skeleton { border-radius: var(--r-control); }

/* Empty state com respiro */
.empty-state { gap: 12px; }

/* 7) TELAS INTERNAS — paineis, listas, metricas, ficha (Etapa 2) ------------ */
.panel, .list-row, .metric, .detail-pane, .report-sheet {
  border-radius: var(--r-card);
}
.panel, .metric, .detail-pane, .report-sheet { box-shadow: var(--shadow-e1); }

.list-row {
  border-radius: 14px;
  box-shadow: var(--shadow-e1);
  transition: transform var(--dur-base) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.list-row.clickable:hover {
  box-shadow: var(--shadow-e2);
  transform: translateY(-2px);
}
.list-row.clickable:active {
  transform: scale(0.992);
  box-shadow: var(--shadow-e1);
}

/* Titulos de secao: peso mais comedido + tracking apertado */
.panel h3, .detail-pane h3, .report-sheet h3 {
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-snug);
}
.metric strong { letter-spacing: var(--track-tight); font-weight: var(--fw-bold); }
.related-title { letter-spacing: var(--track-snug); }
.ficha-actions-wrap > summary { border-radius: var(--r-control); }

/* Toolbar / filtros com mais respiro */
.toolbar { gap: 10px; }

/* 8) MAPA (chrome) + FORMULARIOS (Etapa 3) ---------------------------------- */
/* Botoes flutuantes do mapa = vidro fosco sobre o mapa (estilo iOS Maps) */
.map-icon-btn {
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
  box-shadow: var(--shadow-e2);
  border-color: rgba(16, 24, 20, 0.06);
  transition: transform 0.1s var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.map-icon-btn:active { transform: scale(0.92); }
/* No escuro a regra legada (body.theme-dark .map-icon-btn) tem specificity maior,
   entao replicamos aqui (mesma specificity, carrega depois -> vence) com o material.
   :not(.primary) preserva o verde do botao de acao primario. */
body.theme-dark .map-icon-btn:not(.primary) {
  border-color: rgba(255, 255, 255, 0.10);
  background: var(--mat-thick);
  -webkit-backdrop-filter: var(--mat-blur);
  backdrop-filter: var(--mat-blur);
}
/* Botao de ACAO primario verde nos DOIS temas (no escuro o legado o deixava cinza). */
body.theme-dark .map-icon-btn.primary {
  background: linear-gradient(180deg, #338a69, var(--green));
  border-color: transparent;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .map-icon-btn { background: var(--surface); }
}

/* Picker de camada, topbar e menu do mapa */
.map-layer-btn { border-radius: var(--r-control); font-weight: var(--fw-bold); }
.map-topbar { border-bottom-color: rgba(16, 24, 20, 0.07); }
body.theme-dark .map-topbar { border-bottom-color: rgba(255, 255, 255, 0.08); }
.map-layer-menu { border-radius: 18px; box-shadow: var(--shadow-e3); }

/* FAB de registro rapido + ferramentas Leaflet: sombra premium + toque */
.quick-field-fab {
  box-shadow: var(--shadow-e3);
  transition: transform 0.1s var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.quick-field-fab:active { transform: scale(0.92); }
.map-tool-btn { transition: transform 0.1s var(--ease-out); }
.map-tool-btn:active { transform: scale(0.92); }

/* Formularios do sheet: grupos com cantos suaves + legendas */
.sheet-group { border-radius: var(--r-card); }
.sheet-group > legend { font-weight: var(--fw-bold); letter-spacing: var(--track-snug); }
.loc-mode-btn { border-radius: 10px; font-weight: var(--fw-semibold); }
.quick-add-btn { border-radius: var(--r-control); }

/* 6) MICROINTERACOES (feedback de toque) ------------------------------------ */
.primary:active, .secondary:active, .danger:active,
.install-login:active, .icon-btn:active, .nav button:active {
  transform: scale(0.97);
}
.list-row.clickable:active, .feed-card:active {
  transform: scale(0.992);
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .sheet, .feed-card, .primary, .secondary, .danger {
    transition: none !important;
  }
  .primary:active, .secondary:active, .danger:active,
  .feed-card:active, .feed-card:hover, .list-row.clickable:active {
    transform: none !important;
  }
}

/* 9) TRANSICOES DE TELA (Etapa 4) ------------------------------------------- */
/* Entrada suave do conteudo ao trocar de view (classe re-disparada em setView). */
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.content.view-anim { animation: viewEnter var(--dur-base) var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .content.view-anim { animation: none; }
}

/* 10) TELA INICIAL (Home / painel de entrada) ------------------------------- */
.home { max-width: 760px; margin: 0 auto; padding: 6px 2px 28px; }
.home-head { margin: 4px 2px 18px; }
.home-eyebrow {
  margin: 0; font-size: var(--text-caption); font-weight: var(--fw-bold);
  letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--accent-green);
}
.home-title { margin: 5px 0 2px; font-size: var(--text-title1); font-weight: var(--fw-bold); letter-spacing: var(--track-tight); color: var(--ink); }
.home-sub { margin: 0; font-size: var(--text-callout); color: var(--muted); }

.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 860px) { .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }

.home-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  min-height: 96px; padding: 16px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-e1); color: var(--ink); cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.home-card:hover { box-shadow: var(--shadow-e3); transform: translateY(-2px); border-color: var(--line-strong); }
.home-card:active { transform: scale(0.985); }
.home-card-ic {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; background: var(--accent-green-alpha); color: var(--accent-green);
}
.home-card-ic svg { width: 26px; height: 26px; }
.home-card-txt { display: grid; gap: 3px; min-width: 0; }
.home-card-txt strong { font-size: var(--text-callout); font-weight: var(--fw-bold); letter-spacing: var(--track-snug); }
.home-card-txt > span { font-size: var(--text-footnote); color: var(--muted); line-height: 1.35; }

/* Acao PRINCIPAL (Adicionar abordado): destaque verde, largura total */
.home-card.is-primary {
  grid-column: 1 / -1;
  background: linear-gradient(180deg, var(--primary-brand-hover), var(--primary-brand));
  border-color: transparent; color: #fff;
  box-shadow: var(--shadow-e2), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.home-card.is-primary .home-card-ic { background: rgba(255, 255, 255, 0.18); color: #fff; }
.home-card.is-primary .home-card-txt > span { color: rgba(255, 255, 255, 0.85); }
.home-card.is-primary:hover { box-shadow: var(--shadow-e4); }

/* Botao "Inicio" do topo some na propria tela inicial (evita redundancia) */
body.view-home .home-btn { display: none; }

@media (prefers-reduced-motion: reduce) {
  .home-card { transition: none; }
  .home-card:hover, .home-card:active { transform: none; }
}

/* 11) USABILIDADE — topbar limpa + Home (auditoria mobile-first) ------------- */
/* A barra de sessao saiu da topbar: "Sair" e nome/papel foram pro menu lateral; o
   sino virou o item "Novidades" no menu. A topbar fica enxuta (menu + titulo). */
.topbar { min-height: 0; padding-top: 10px; padding-bottom: 10px; }
.topbar h2 { font-size: var(--text-title3); }

/* "Novidades" (sino realocado) como item de menu, com contador inline a direita */
.nav-notif { display: flex; align-items: center; gap: 9px; position: relative; }
.nav-notif svg { flex: 0 0 auto; }
.nav-notif-txt { flex: 1 1 auto; }
.nav-notif .notif-badge {
  position: static; box-shadow: none; margin-left: auto;
  background: var(--accent-green); color: #07120d;
}

/* Usuario/papel realocado pro menu lateral (acima do "Sair do sistema") */
.sidebar-user { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 6px 4px 2px; }
.sidebar-user strong { color: #f3f8f4; font-size: var(--text-subhead); font-weight: var(--fw-bold); line-height: 1.2; }
.sidebar #sessionRole { display: inline-flex; }

/* Home: tira o titulo/eyebrow redundante da topbar (a propria Home ja se apresenta) */
body.view-home #viewTitle, body.view-home #classification { display: none; }

@media (max-width: 640px) {
  .topbar .eyebrow { display: none; }   /* eyebrow caixa-alta rouba altura, nao ajuda */
}

/* Home: cards secundarios em COLUNA no celular (icone em cima, texto nao espreme);
   em linha de novo no >=860px. A acao principal (is-primary) segue em linha. */
@media (max-width: 859px) {
  .home-card:not(.is-primary) { flex-direction: column; align-items: flex-start; gap: 10px; }
  .home-card:not(.is-primary) .home-card-ic { width: 46px; height: 46px; }
}

/* 12) USABILIDADE lote 2 — ficha, listas, formularios ----------------------- */
/* "X" de fechar a ficha: fica VISIVEL ao rolar (sticky) e com alvo >=44px */
.sheet-close {
  position: sticky; top: 6px; float: right;
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; z-index: 5;
}

/* Linha de pessoa no celular: nome ganha a largura toda; acoes vao p/ a 2a linha */
@media (max-width: 560px) {
  .person-row { grid-template-columns: 52px minmax(0, 1fr); }
  .person-row .row-actions { grid-column: 1 / -1; justify-content: flex-end; margin-top: 2px; }
}

/* Mensagem de erro de formulario sempre legivel (vermelho) */
.form-msg.err { color: var(--red); font-weight: var(--fw-semibold); }

/* 13) USABILIDADE lote 3 — clareza ------------------------------------------ */
/* Chip de situacao colado ao nome (relacao nome -> status mais clara) */
.list-row .row-title { justify-content: flex-start; }
/* O "pin" na linha de abordados e decorativo (a linha toda abre a ficha): cor
   neutra p/ nao parecer um botao de "ver no mapa" e enganar o toque. */
.abord-pin { color: var(--muted); opacity: 0.6; }
/* Chip de status e clicavel: alvo de toque confortavel no celular */
@media (max-width: 760px) {
  button.list-status { min-height: 34px; }
}

/* Situacao do veiculo (FURTADO/ROUBADO/RECUPERADO) e a info de triagem mais
   importante: ganha um pouco mais de peso visual na lista de veiculos. */
.person-row[data-list-type="vehicle"] .list-status { font-size: var(--text-caption); padding: 5px 12px; }

/* Listas mais densas no celular (mais linhas por tela numa lista operacional) */
@media (max-width: 560px) {
  .list { gap: 8px; }
  .person-row { padding: 10px 12px; }
}

/* Rotulo de contexto no topo da ficha ("Ficha de pessoa", "Local"...) */
.sheet-context { margin: 0 0 8px; }

/* 14) PERF/A11Y (refino noturno ciclo 1) ----------------------------------- */
/* will-change:transform permanente em .tl-card/.prisao-row promovia uma camada
   de composicao POR LINHA (custo de GPU em listas longas). Neutralizado. */
.tl-card, .prisao-row { will-change: auto; }

/* 15) ALVOS DE TOQUE >= 44px no mobile (a11y) ------------------------------ */
/* Mantem o visual COMPACTO (densidade que o dono pediu) mas garante area de
   TOQUE >= 44px via ::after transparente centrado. O pseudo faz parte do botao,
   entao o toque na area estendida aciona o botao; centrado, cada controle "dona"
   sua metade -> sem mis-tap entre vizinhos. Zero mudanca visual. */
@media (max-width: 560px) {
  .row-act, button.list-status, .tl-act, .op-row-go, .op-row-x { position: relative; }
  .row-act::after, button.list-status::after, .tl-act::after,
  .op-row-go::after, .op-row-x::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
  }
}

/* 16) TOPBAR ENXUTA — menu + Inicio na MESMA linha, agrupados a esquerda ----- */
/* O lado direito da topbar ficou VAZIO (a barra de sessao e o sino sairam), entao
   o justify-content:space-between jogava o botao "Inicio" pro MEIO. Pior: no mobile
   a topbar era flex-direction:column (sobra da barra de sessao antiga) -> os 3
   itens EMPILHAVAM e ESTICAVAM a barra (155px de altura). Agora: sempre LINHA,
   icones (menu + Inicio) colados a esquerda e o titulo logo apos -> barra compacta. */
.topbar { justify-content: flex-start; }
@media (max-width: 640px) {
  .topbar { flex-direction: row; align-items: center; }
}