/* Identidade visual Amorix — a mesma do Painel Fiscal (Amorixsuporte/fiscal,
   app/globals.css): tema escuro, cores do manual de marca, Inter.
   Compartilhado por index.html, admin.html e login.html. As variáveis
   antigas das telas (--page-plane, --surface-2, --brand-blue...) são
   mapeadas para a paleta nova, assim os componentes existentes herdam as
   cores sem reescrever cada regra. */

:root {
  color-scheme: dark;

  /* Paleta do fiscal (manual de marca) */
  --amx-azul: #1C57DF;
  --amx-azul-escuro: #022F6F;
  --amx-azul-medio: #6A85AA;
  --amx-amarelo: #F7C600;
  --amx-amarelo-esc: #F7A900;
  --bg: #06142E;
  --rail: #041026;
  --surface: #0B1F4B;
  --surface-2: #10295C;
  --line: #1D3970;
  --line-soft: #15306A;
  --text: #EAF0FB;
  --muted: #9DB0CF;
  --faint: #6A85AA;
  --bad: #FF7A6B;
  --bad-bg: rgba(255, 122, 107, .12);
  --warn: #FFC24D;
  --warn-bg: rgba(255, 194, 77, .12);
  --ok: #4FD69C;
  --ok-bg: rgba(79, 214, 156, .12);
  --info-bg: rgba(28, 87, 223, .18);
  --link: #9FBBFF;
  /* Tokens que mudam no modo claro (bloco no fim do arquivo) */
  --destaque: var(--amx-amarelo);
  --foco: var(--amx-amarelo);
  --top-bg: rgba(6, 20, 46, .92);
  --bad-text: #FFD2CC;
  --ok-text: #CFF5E3;
  --sombra: rgba(0, 0, 0, .4);
  --fundo-dialogo: rgba(3, 10, 24, .72);
  --font: "Inter", -apple-system, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --r: 16px;
  --r-sm: 10px;

  /* Nomes que as telas da Intranet já usam */
  --page-plane: var(--bg);
  --surface-1: var(--surface);
  --text-primary: var(--text);
  --text-secondary: #C3D0E6;
  --text-muted: var(--muted);
  --gridline: var(--line-soft);
  --baseline: var(--line);
  --border: var(--line);
  --good: var(--ok);
  --good-bg: var(--ok-bg);
  --brand-navy: var(--amx-azul-escuro);
  --brand-blue: var(--amx-azul);
  --brand-tint: var(--info-bg);
  --series-1: #5B8CFF;
  --series-2: var(--amx-amarelo);
  --series-3: #2FA877;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
body { font-size: 14px; line-height: 1.5; }
a { color: inherit; }

/* Botões: principal amarelo com texto azul-marinho (igual ao fiscal). */
.btn-primary {
  background: var(--amx-amarelo) !important;
  color: #0B1F4B !important;
  border: 1px solid var(--amx-amarelo) !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700;
}
.btn-primary:hover:not(:disabled) { background: var(--amx-amarelo-esc) !important; opacity: 1; }
.btn-secondary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-sm) !important;
}
.btn-secondary:hover:not(:disabled) { border-color: var(--amx-azul-medio) !important; }

:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--foco); outline-offset: 1px; }
::selection { background: rgba(247, 198, 0, .35); }

/* ---------- Estrutura: menu lateral + área principal ---------- */
.app { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100vh; }
.rail {
  background: var(--rail);
  border-right: 1px solid var(--line-soft);
  padding: 20px 14px;
  display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px; text-decoration: none; }
.logo img { height: 28px; width: auto; display: block; }
.logo span {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--amx-amarelo); font-weight: 700;
  border-left: 1px solid var(--line); padding-left: 10px;
}
.rail nav { display: flex; flex-direction: column; gap: 2px; }
.rail nav .grp {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); padding: 14px 10px 6px;
}
.rail nav .grp:first-child { padding-top: 0; }
.navlink {
  text-decoration: none; display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: none; border: 0; border-radius: 10px;
  padding: 9px 10px; color: var(--muted); cursor: pointer; font: inherit; font-size: 14px;
}
.navlink svg { width: 18px; height: 18px; flex: none; }
.navlink:hover { background: var(--surface); color: var(--text); }
.navlink[aria-current="page"] { background: var(--amx-azul); color: #fff; }
/* Usuário no topo do menu, logo abaixo do logo: Meu perfil sempre à mão. */
.rail .me {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; font-size: 13.5px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
}
.rail .me:has([aria-current="page"]) { border-color: var(--amx-azul); box-shadow: inset 3px 0 0 var(--amx-azul); }
.rail .me a.avatar { text-decoration: none; }
.rail .me .me-nome { display: block; color: var(--text); text-decoration: none; font-weight: 600; overflow-wrap: anywhere; }
.rail .me .me-acoes { display: flex; gap: 12px; margin-top: 2px; }
.rail .me .me-acoes a, .rail .me .me-acoes button {
  background: none; border: 0; padding: 0; font: inherit; font-size: 12px;
  color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--amx-azul-escuro); border: 1px solid var(--amx-azul); color: #EAF0FB;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}

.conteudo { min-width: 0; display: flex; flex-direction: column; }
/* O conteúdo fica preso à coluna: tabela larga rola dentro do próprio
   cartão, em vez de alargar a página (o excesso ficava escondido). */
.conteudo > main { min-width: 0; width: 100%; box-sizing: border-box; }
.conteudo .card:has(> table), .conteudo .card:has(> .table-card-head) { overflow-x: auto; }
.top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 28px; border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 5;
  background: var(--top-bg); backdrop-filter: blur(8px);
}
.top .crumb { font-size: 12px; color: var(--faint); }
.top h1 { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.2; }
.top .sp { flex: 1; }
/* Ao pular para uma seção pelo menu, o título não fica atrás do topo fixo. */
main [id] { scroll-margin-top: 90px; }

@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; padding: 12px 16px; gap: 10px; }
  /* A Intranet tem muitos itens: no celular o menu é uma linha só, com
     rolagem lateral, para não empurrar o conteúdo para baixo. */
  .rail nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .rail nav::-webkit-scrollbar { display: none; }
  .rail nav .grp { display: none; }
  .rail nav > div { display: contents; }
  .navlink { width: auto; padding: 7px 10px; font-size: 13px; white-space: nowrap; }
  .navlink svg { width: 16px; height: 16px; }
  .rail .me { padding: 8px 10px; }
  .top { padding-inline: 16px; position: static; }
}
/* ---------- Componentes de /js/ui.js ---------- */
.ui-dialogo-fundo {
  position: fixed; inset: 0; z-index: 100;
  background: var(--fundo-dialogo); display: grid; place-items: center; padding: 16px;
}
.ui-dialogo {
  width: min(440px, 100%); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px; box-shadow: 0 18px 48px var(--sombra);
}
.ui-dialogo-texto { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--text); white-space: pre-line; }
.ui-dialogo-campo {
  width: 100%; padding: 9px 11px; margin: -6px 0 18px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--text); font: inherit;
}
.ui-dialogo-botoes { display: flex; justify-content: flex-end; gap: 10px; }
.ui-dialogo-botoes button { padding: 9px 16px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-primary.ui-perigo { background: var(--bad) !important; border-color: var(--bad) !important; color: #2A0B06 !important; }

.ui-topo {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amx-amarelo); color: #0B1F4B; border: 0; cursor: pointer;
  box-shadow: 0 8px 22px var(--sombra);
  opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s;
}
.ui-topo svg { width: 20px; height: 20px; }
.ui-topo.visivel { opacity: 1; pointer-events: auto; transform: none; }
.ui-topo:hover { background: var(--amx-amarelo-esc); }

/* Foto no lugar das iniciais (qualquer avatar) */
.avatar-foto { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.avatar, .bday-avatar { overflow: hidden; }

/* Botão sol/lua no cartão do usuário: mostra sempre o outro modo. */
.rail .me .ui-tema {
  margin-left: auto; flex: none; align-self: flex-start;
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: none; border: 1px solid transparent; color: var(--amx-amarelo); cursor: pointer; padding: 0;
}
.rail .me .ui-tema svg { width: 18px; height: 18px; }
.rail .me .ui-tema:hover { background: var(--surface-2); border-color: var(--line); }

/* ---------- Modo claro (INV-68) ----------
   Ativado por /js/tema.js (data-theme="light" no <html>). Mesmas cores da
   marca sobre fundo claro. O menu lateral continua azul-marinho nos dois
   modos: é a assinatura da marca e o logo é branco. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F6FB;
  --surface: #FFFFFF;
  --surface-2: #EEF3FB;
  --line: #CFDAEA;
  --line-soft: #E1E8F2;
  --text: #0B1F4B;
  --muted: #4A5F82;
  --faint: #6A7FA0;
  --bad: #C0392B;
  --bad-bg: rgba(192, 57, 43, .10);
  --warn: #B7791F;
  --warn-bg: rgba(183, 121, 31, .12);
  --ok: #1E8A5A;
  --ok-bg: rgba(30, 138, 90, .10);
  --info-bg: rgba(28, 87, 223, .10);
  --link: #1C57DF;
  --text-secondary: #2A3F63;
  --series-1: #1C57DF;
  --series-2: #B7791F;
  --series-3: #1E8A5A;
  --destaque: #9A6B00;
  --foco: #1C57DF;
  --top-bg: rgba(243, 246, 251, .92);
  --bad-text: #8E2A1F;
  --ok-text: #135E3D;
  --sombra: rgba(11, 31, 75, .14);
  --fundo-dialogo: rgba(11, 31, 75, .45);
}
:root[data-theme="light"] .rail {
  color-scheme: dark;
  --surface: #0B1F4B;
  --surface-2: #10295C;
  --line: #1D3970;
  --line-soft: #15306A;
  --text: #EAF0FB;
  --muted: #9DB0CF;
  --faint: #6A85AA;
  --link: #9FBBFF;
  --foco: var(--amx-amarelo);
  color: var(--text);
  border-right-color: var(--rail);
}
:root[data-theme="light"] .btn-primary.ui-perigo { color: #fff !important; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }