/* ==========================================================================
   RouteX — padrão de telas (Fase 2)
   ==========================================================================
   Camada única de layout e componentes, carregada DEPOIS de style.css,
   theme-bi.css e do CSS de cada módulo. Toda tela do painel segue estas
   regras; CSS de módulo só cuida do que é específico dele.

   Regras de página (antes cada tela tinha a sua: 1400 px centralizado,
   1200 px centralizado, Rotas encolhida no meio com 563 px, Conta em largura
   total, cartões de Relatórios parados em 900 px):
     - o conteúdo ocupa a LARGURA TODA da área útil, alinhado à esquerda
     - mesma margem interna em todas as telas (--erp-gutter)
     - cabeçalho igual: título + subtítulo à esquerda, ações à direita
     - formulário limita a LARGURA DOS CAMPOS (leitura), nunca a da página
   ========================================================================== */

:root {
  --erp-gutter: 24px;           /* margem interna da página */
  --erp-gap: 16px;              /* espaço entre blocos */
  --erp-radius: 12px;           /* cartões e painéis */
  --erp-radius-sm: 8px;         /* botões e campos */
  --erp-ctl-h: 36px;            /* altura de botão e campo */
  --erp-ctl-h-sm: 30px;
  --erp-row-pad: 10px 14px;     /* célula de tabela */
  --erp-title: 20px;            /* título da página */
  --erp-form-max: 1100px;       /* largura máxima de um formulário */
}
@media (max-width: 900px) { :root { --erp-gutter: 14px; --erp-gap: 12px; --erp-title: 18px; } }

/* ---------- Página ---------- */
/* Raiz de cada tela (todas as variações existentes) */
.view > .dashboard,
.view > .cadastros-view,
.view > .rotas-view,
.view > .relos,
.view > .dsp {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 20px var(--erp-gutter) 28px;
  box-sizing: border-box;
}
/* blocos de 1º nível ocupam a largura toda (nada de cartão parado em 900 px) */
.view > .dashboard > .account-card,
.view > .cadastros-view > .account-card { max-width: none; }

/* ---------- Cabeçalho da página ---------- */
.view .dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  min-height: 44px;
}
.view .dashboard-title { min-width: 0; }
.view .dashboard-title h1 { font-size: var(--erp-title); font-weight: 700; line-height: 1.25; margin: 0; letter-spacing: .2px; }
.view .dashboard-title p { font-size: 13px; margin: 3px 0 0; color: var(--text-secondary); line-height: 1.4; }
/* ações do cabeçalho (botões, abas de modo) ficam juntas à direita */
.view .dashboard-header > :not(.dashboard-title) { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---------- Painéis e cartões ---------- */
.view .panel, .view .account-card { border-radius: var(--erp-radius); }
.view .panel + .panel, .view .panel + .account-card, .view .account-card + .panel, .view .account-card + .account-card { margin-top: var(--erp-gap); }
.view .panel-header { padding: 12px 16px; min-height: 48px; gap: 10px; flex-wrap: wrap; }
.view .panel-title { font-size: 14px; font-weight: 700; }
.view .panel-subtitle { font-size: 12px; color: var(--text-muted); }
/* formulário dentro de cartão: campos com largura de leitura, alinhados à esquerda */
.view .account-fields { max-width: var(--erp-form-max); }
/* exceções que são listas/tabelas largas dentro de account-card */
.conta-sec[data-sec="usuarios"] .account-fields, .conta-sec[data-sec="app"] .account-fields, .conta-sec[data-sec="historico"] .account-fields,
.view[data-view="relatorios"] .account-fields { max-width: none; }

/* ---------- Indicadores (KPI): uma família só ---------- */
.view .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; margin-bottom: var(--erp-gap); }
.view .kpi-card, .view .em-kpi, .view .info-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--erp-radius);
  padding: 14px 16px;
  min-width: 0;
}

/* ---------- Abas: um estilo só (sublinhado), em todas as telas ---------- */
.view .rotas-tabs, .view .ck-tabs, .view .dsp-cats, .view .cadastros-tabs, .view .devices-tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--erp-gap);
}
.view .rotas-tab, .view .ck-tab, .view .dsp-cat-tab, .view .cadastros-tab, .view .devices-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  margin: 0 0 -1px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}
.view .rotas-tab:hover, .view .ck-tab:hover, .view .dsp-cat-tab:hover, .view .cadastros-tab:hover, .view .devices-tab:hover { color: var(--text-primary); background: transparent; }
.view .rotas-tab.active, .view .ck-tab.active, .view .dsp-cat-tab.active, .view .cadastros-tab.active, .view .devices-tab.active {
  color: var(--accent-hover);
  border-bottom-color: var(--accent);
  background: transparent;
  box-shadow: none;
}
/* abas dentro do cabeçalho da página não levam a linha de baixo nem margem */
.view .dashboard-header .rotas-tabs { border-bottom: 0; margin: 0; }

/* ---------- Tabelas: um estilo só ---------- */
.view .data-table, .view .ck-table, .view .dsp-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.view .data-table th, .view .ck-table th, .view .dsp-tabela th {
  background: var(--bg-tertiary);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.view .data-table td, .view .ck-table td, .view .dsp-tabela td { padding: var(--erp-row-pad); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.view .data-table tbody tr:hover td, .view .ck-table tbody tr:hover td, .view .dsp-tabela tbody tr:hover td { background: var(--bg-hover); }
.view .data-table th.r, .view .data-table td.r, .view .dsp-tabela th.r, .view .dsp-tabela td.r { text-align: right; }

/* ---------- Botões e campos: mesma altura em todo lugar ---------- */
.view .btn { min-height: var(--erp-ctl-h); border-radius: var(--erp-radius-sm); }
.view .btn.btn-sm { min-height: var(--erp-ctl-h-sm); padding: 5px 12px; font-size: 12.5px; }
.view .form-input:not(textarea):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
.view .form-select { min-height: var(--erp-ctl-h); border-radius: var(--erp-radius-sm); }
.view .form-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 5px; }

/* ---------- Listas de cadastro ---------- */
.view .crud-item { border-radius: 10px; }

/* ---------- Estado vazio ---------- */
.view .empty-state { padding: 36px 16px; text-align: center; color: var(--text-muted); }
/* Faixa de indicadores estreita (5 cartões em 1366 px cortavam "R$ 23.150,8…"):
   ícone e espaços menores e o valor acompanha a largura da faixa (16–25 px). */
.view .kpi-grid { container-type: inline-size; }
.view .kpi-grid .kpi-card .kpi-value { font-size: clamp(16px, 1.75cqi, 25px); }
@container (max-width: 1250px) {
  .view .kpi-grid .kpi-card { padding: 12px 12px; column-gap: 10px; grid-template-columns: 34px minmax(0, 1fr); }
  .view .kpi-grid .kpi-card .kpi-icon { width: 34px; height: 34px; font-size: 16px; }
  .view .kpi-grid .kpi-card .kpi-icon svg { width: 18px; height: 18px; }
}

/* ---------- Estados padrão: carregando / vazio / erro (Utils.estado) ---------- */
.ui-estado { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ui-estado-titulo { font-weight: 700; color: var(--text-primary); font-size: 14px; }
.ui-estado-erro .empty-state-text { color: var(--text-secondary); max-width: 520px; }
.ui-estado-tentar { margin-top: 4px; }
.ui-estado-det { margin-top: 6px; font-size: 11.5px; color: var(--text-muted); max-width: 640px; }
.ui-estado-det summary { cursor: pointer; }
.ui-estado-det code { display: block; margin-top: 4px; white-space: pre-wrap; word-break: break-word; text-align: left; }
.ui-spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); animation: ui-gira .8s linear infinite; }
@keyframes ui-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-spinner { animation-duration: 2.4s; } }

/* Administração no celular: o menu interno vira faixa horizontal que ROLA por
   dentro (com 1fr ela crescia até o conteúdo e empurrava a página pro lado) */
@media (max-width: 900px) {
  .conta-layout { grid-template-columns: minmax(0, 1fr); }
  .conta-nav { min-width: 0; max-width: 100%; }
}
/* cartões da Administração não crescem além da tela: tabelas largas (Usuários
   do app) rolam dentro do próprio quadro */
.conta-sec, .conta-sec > .account-card, .conta-sec .account-fields { min-width: 0; max-width: 100%; }

/* Administração no rodapé do menu (gerada por js/modulos.js) */
.nav-rail-rodape-grupos { display: contents; }

/* ---- Logo do menu: a imagem da marca no lugar do nome, maior; recolhido mostra o ícone ---- */
.nav-rail-logo, [data-theme="dark"] .nav-rail-logo { flex-direction: column; align-items: flex-start; gap: 6px; padding: 6px 8px; margin: 0 14px 18px; }
.nav-rail-logo .nav-logo, [data-theme="dark"] .nav-rail-logo .nav-logo { width: auto; height: auto; max-width: 100%; max-height: 52px; flex: none; object-fit: contain; object-position: left center; }
.nav-rail-logo .nav-logo-icone, [data-theme="dark"] .nav-rail-logo .nav-logo-icone { display: none; width: 34px; height: 34px; flex: none; object-fit: contain; border-radius: 8px; }
.nav-brand-sub { color: #74c47c; font-size: 11.5px; font-weight: 600; letter-spacing: .4px; white-space: nowrap; padding-left: 2px; }
body.nav-collapsed .nav-rail-logo { align-items: center; padding: 4px 0; margin: 0 0 16px; }
body.nav-collapsed .nav-rail-logo .nav-logo, body.nav-collapsed .nav-brand-sub { display: none; }
body.nav-collapsed .nav-rail-logo .nav-logo-icone { display: block; }
@media (max-width: 768px) {
  body.nav-collapsed .nav-rail-logo { align-items: flex-start; padding: 6px 8px; margin: 0 14px 16px; }
  body.nav-collapsed .nav-rail-logo .nav-logo { display: block; }
  body.nav-collapsed .nav-brand-sub { display: initial; }
  body.nav-collapsed .nav-rail-logo .nav-logo-icone { display: none; }
}
/* Aparência: prévia do menu e do ícone */
.brand-preview-menu { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px 14px; border-radius: 10px; background: #0b1622; border: 1px dashed var(--border); max-width: 270px; }
.brand-preview-menu img { max-width: 100%; max-height: 52px; object-fit: contain; }
.brand-preview-menu span { color: #74c47c; font-size: 11.5px; font-weight: 600; }
.brand-icone-linha { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brand-icone-prev { display: flex; align-items: flex-end; gap: 10px; }
.brand-icone-prev img { border-radius: 10px; background: repeating-conic-gradient(rgba(255,255,255,.08) 0 25%, transparent 0 50%) 0 0 / 12px 12px; border: 1px solid var(--border); object-fit: contain; }
.brand-icone-aba { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px 8px 0 0; background: var(--bg-secondary, rgba(255,255,255,.06)); font-size: 12px; color: var(--text-secondary, #9fb3c8); }
.brand-icone-aba img { width: 16px; height: 16px; border: 0; background: none; border-radius: 3px; }

/* Administração > Situação do sistema */
.badge-info { background: rgba(88, 166, 255, .16); color: #79b8ff; }
.sis-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.sis-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary, rgba(255,255,255,.03)); min-width: 0; }
.sis-kpi span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.sis-kpi b { font-size: 18px; }
.sis-kpi small { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
.sis-kpi.ruim { border-color: rgba(239, 107, 107, .5); }
.sis-titulo { font-size: 14px; margin: 4px 0 8px; }
.sis-tabela td { vertical-align: top; }
.sis-tabela .num { text-align: right; font-variant-numeric: tabular-nums; }
.sis-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.sis-erro { font-size: 12px; color: var(--danger, #ef6b6b); margin-top: 4px; overflow-wrap: anywhere; }
.sis-ruim { color: var(--danger, #ef6b6b); font-weight: 700; }
.sis-nota { font-size: 12px; color: var(--text-muted); margin-top: 8px; }