/* ============================================================================
   Tema Citel NF-e — paleta única (admin + portal).
   Centraliza os design tokens que antes estavam duplicados em cada template.
   Para ajustar cores/tema, mexa SÓ aqui. Os componentes referenciam via var().

   União de todos os tokens usados nos templates (inclui --ok/--ok-bg do portal
   e --subtle dos logins). O tema escuro foi suavizado (menos neon/contraste).
   ============================================================================ */

:root{
  --citel-blue:#0076CE;--citel-blue-deep:#005AA0;--citel-blue-soft:#E5F1FB;
  --citel-green:#00C38E;--citel-green-deep:#009A6E;--citel-green-soft:#E1F8F0;
  --bg:#FAF9F6;--panel:#FFFFFF;--input:#FFFFFF;--head:#FBFAF7;
  --ink:#1A1A17;--ink-strong:#0E0E0C;--muted:#6B6A64;--line:#E7E4DC;
  --line-strong:#D6D2C7;--soft:#F4F2EC;--subtle:#FBFAF7;--warn:#B5781A;--warn-bg:#F5E8CE;
  --danger:#B5453A;--danger-bg:#F4E1DE;--ok:#009A6E;--ok-bg:#E1F8F0;
}

[data-theme="dark"]{
  /* Azul/verde dessaturados (menos neon), fundo grafite (não preto puro) e texto
     um pouco menos brilhante — reduz o cansaço de leitura. */
  --citel-blue:#5AA0D8;--citel-blue-deep:#79B4E2;--citel-blue-soft:#1B2D3C;
  --citel-green:#5EB39A;--citel-green-deep:#79C2AC;--citel-green-soft:#19302A;
  --bg:#16191E;--panel:#1D2127;--input:#232831;--head:#1A1E24;
  --ink:#D8D6CE;--ink-strong:#ECEAE2;--muted:#979589;--line:#2A2F36;
  --line-strong:#3A4049;--soft:#242931;--subtle:#1A1E24;--warn:#D9A24F;--warn-bg:#352711;
  --danger:#D88475;--danger-bg:#382019;--ok:#79C2AC;--ok-bg:#19302A;
}

/* Legibilidade das grades do painel admin (usavam 12px/4px, apertado demais).
   Sobe a fonte e dá folga vertical nas linhas. NÃO afeta o portal — lá a grade é
   `.lg-grid` (especificidade maior que `table`/`th,td`), então estes overrides só
   pegam as tabelas "cruas" do admin. As células de ação (`.act`) mantêm o padding
   próprio (especificidade de classe). */
table{font-size:14px}
th,td{padding:7px 10px}

/* Botão-ícone do header (toggle de tema e engrenagem de Config) — compartilhado
   por todas as telas admin. Mantém 30x30, hover suave; o <a> da engrenagem usa a
   mesma classe (por isso o text-decoration:none). */
.theme-toggle{width:30px;height:30px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--muted);cursor:pointer;padding:0;text-decoration:none}
.theme-toggle:hover{background:var(--soft);color:var(--ink-strong)}
.theme-toggle svg{width:15px;height:15px}
.theme-toggle .moon{display:none}
[data-theme="dark"] .theme-toggle .sun{display:none}
[data-theme="dark"] .theme-toggle .moon{display:block}

/* Portal cliente: contexto da empresa integrado ao header e toggle legivel. */
.portal-shell .idbar{
  gap:14px;
}
.portal-shell .id-empresa{
  flex:1 1 auto;
  min-width:220px;
  max-width:none;
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:5px;
  text-align:left;
  padding:5px 10px;
  border:1px solid var(--line-strong);
  border-radius:4px;
  background:var(--citel-blue-soft);
  color:var(--ink);
}
.portal-shell .id-empresa::before{
  content:"Empresa:";
  flex:0 0 auto;
  color:var(--citel-blue-deep);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.02em;
}
.portal-shell .id-empresa .nome{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ink-strong);
  font-size:13px;
  font-weight:800;
}
.portal-shell .id-empresa .fant{
  flex:0 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}
@media (max-width:760px){
  .portal-shell .id-empresa{
    flex-basis:100%;
    order:3;
  }
}

/* Troca obrigatoria de senha: tela intermediaria antes do portal. */
.portal-password-gate main{
  min-height:calc(100vh - 88px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:clamp(34px,7vh,82px);
}
.portal-password-gate .modulebar{
  justify-content:flex-end;
}
.password-gate{
  width:100%;
  display:flex;
  justify-content:center;
}
.password-card{
  width:min(100%,520px);
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:5px;
  overflow:hidden;
}
.password-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px 12px;
  background:linear-gradient(180deg,var(--citel-blue-soft),var(--head));
  border-bottom:1px solid var(--line-strong);
}
.password-card h1{
  margin:0;
  font-size:20px;
  line-height:1.2;
  color:var(--ink-strong);
}
.password-card .eyebrow{
  margin:0 0 4px;
  color:var(--citel-blue-deep);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.password-chip{
  flex:0 0 auto;
  border:1px solid var(--warn);
  background:var(--warn-bg);
  color:var(--warn);
  border-radius:3px;
  padding:3px 8px;
  font-size:11px;
  font-weight:800;
}
.password-copy{
  margin:0;
  padding:14px 18px 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
}
.password-error{
  margin:14px 18px 0;
}
.password-form{
  padding:16px 18px 14px;
}
.gate-field{
  display:block;
  margin-bottom:12px;
}
.gate-field span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.gate-field input{
  width:100%;
  height:38px;
  border:1px solid var(--line-strong);
  border-radius:4px;
  background:var(--input);
  color:var(--ink);
  font-size:14px;
  padding:6px 9px;
}
.gate-field input:focus{
  outline:1px solid var(--citel-blue);
  border-color:var(--citel-blue);
}
.password-submit{
  height:36px;
  min-height:0;
  padding:0 16px;
  border-radius:4px;
  font-size:13px;
}
.password-note{
  margin:0;
  padding:10px 18px 14px;
  border-top:1px solid var(--line);
  background:var(--head);
  color:var(--muted);
  font-size:12px;
  line-height:1.4;
}

@media (max-width:760px){
  .portal-password-gate main{
    padding:22px 14px;
    align-items:flex-start;
  }
  .password-card-head{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* ---------------------------------------------------------------------------
   Admin interno + Portal cliente: mesma linguagem visual.
   Os templates admin ainda possuem CSS inline historico; como este arquivo e
   carregado depois, estes overrides fazem o admin conversar com o portal sem
   reescrever cada tela inteira.
--------------------------------------------------------------------------- */
.admin-shell header{
  height:auto;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(280px,1fr) auto;
  grid-template-rows:50px 38px;
  align-items:stretch;
  justify-content:initial;
  gap:0;
  padding:0;
  background:transparent;
  border-top:3px solid var(--citel-blue);
  border-bottom:0;
  z-index:30;
}
.admin-shell .brand-wrap{display:contents}
.admin-shell .brand{
  grid-column:1;
  grid-row:1;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 22px;
  background:var(--panel);
  border-bottom:1px solid var(--line-strong);
  color:var(--citel-blue-deep);
  font-size:15px;
  font-weight:800;
  white-space:nowrap;
}
.admin-shell .brand::before{
  content:"";
  width:6px;
  height:20px;
  border-radius:2px;
  background:var(--citel-blue);
  flex:0 0 auto;
}
.admin-shell .user{
  grid-column:2;
  grid-row:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:0 14px;
  background:var(--panel);
  border-bottom:1px solid var(--line-strong);
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
.admin-shell nav{
  grid-column:1 / -1;
  grid-row:2;
  display:flex;
  align-items:stretch;
  gap:0;
  height:38px;
  padding-left:4px;
  background:var(--citel-blue);
}
.admin-shell nav a{
  display:flex;
  align-items:center;
  height:38px;
  padding:0 16px;
  border-radius:0;
  border-bottom:2px solid transparent;
  color:#eaf3fb;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.admin-shell nav a:hover{
  background:rgba(255,255,255,.12);
  color:#fff;
}
.admin-shell nav a.active{
  background:rgba(255,255,255,.18);
  border-bottom-color:#fff;
  color:#fff;
}
.admin-shell .user .theme-toggle{
  width:28px;
  height:28px;
  border-radius:5px;
}
.admin-shell .user form button{
  height:30px;
  padding:0 13px;
  border-radius:5px;
  font-size:12px;
}
.admin-crumbbar{
  position:sticky;
  top:91px;
  z-index:29;
  background:var(--citel-blue-soft);
  border-bottom:1px solid var(--line-strong);
  padding:5px 16px;
  font-size:12px;
  font-weight:800;
  color:var(--citel-blue-deep);
}
.admin-crumbbar .sep{
  opacity:.55;
  margin:0 8px;
}
.admin-shell main{
  max-width:100%;
  margin:0;
  padding:22px;
}
.admin-shell .page-head{
  margin-bottom:10px;
}
.admin-shell h1{
  font-size:18px;
  line-height:1.2;
  margin:0 0 3px;
}
.admin-shell .sub{
  font-size:12px;
  color:var(--muted);
}
.admin-shell .toolbar,
.admin-shell .addbar{
  position:relative;
  border:1px solid var(--line-strong);
  border-radius:4px;
  background:var(--panel);
  padding:34px 10px 10px;
  gap:10px;
  margin-bottom:10px;
}
.admin-shell .toolbar::before,
.admin-shell .addbar::before{
  content:"Filtros";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:24px;
  display:flex;
  align-items:center;
  padding:0 10px;
  background:linear-gradient(180deg,var(--citel-blue-soft),var(--head));
  border-bottom:1px solid var(--line-strong);
  color:var(--citel-blue-deep);
  font-size:11px;
  font-weight:800;
  letter-spacing:.02em;
}
.admin-shell .addbar::before{content:"Novo acesso"}
.admin-shell .field>span,
.admin-shell .addbar span{
  font-size:10px;
  font-weight:800;
  color:var(--muted);
}
.admin-shell input,
.admin-shell select{
  height:32px;
  border-radius:4px;
  font-size:13px;
}
.admin-shell .search-btn,
.admin-shell .primary{
  border-radius:4px;
  font-size:13px;
}
.admin-shell .table-card{
  position:relative;
  border-radius:4px;
  border:1px solid var(--line-strong);
  background:var(--panel);
  padding-top:27px;
}
.admin-emitentes .table-card::before,
.admin-jobs .table-card::before,
.admin-whitelist .table-card::before{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:27px;
  display:flex;
  align-items:center;
  padding:0 10px;
  background:linear-gradient(180deg,var(--citel-blue-soft),var(--head));
  border-bottom:1px solid var(--line-strong);
  color:var(--citel-blue-deep);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
}
.admin-emitentes .table-card::before{content:"Emitentes cadastrados"}
.admin-jobs .table-card::before{content:"Operações"}
.admin-whitelist .table-card::before{content:"Acessos autorizados"}
.admin-shell .table-wrap{
  overflow:auto;
}
.admin-shell table{
  font-size:13px;
}
.admin-shell th,
.admin-shell td{
  padding:6px 10px;
  border-color:var(--line);
}
.admin-shell th{
  background:var(--citel-blue-soft);
  color:var(--citel-blue-deep);
  border-bottom:2px solid var(--line-strong);
  font-size:11px;
  font-weight:800;
}
.admin-shell tbody tr:nth-child(even) td{
  background:var(--soft);
}
.admin-shell tbody tr:hover td{
  background:var(--citel-blue-soft);
}
.admin-shell .pill{
  border-radius:3px;
  padding:2px 8px;
  font-size:11.5px;
}
.admin-shell .row-action,
.admin-shell .xml-link{
  border-radius:5px;
  border:1px solid var(--line-strong);
  background:var(--panel);
}
.admin-shell .row-action:hover,
.admin-shell .xml-link:hover{
  background:var(--citel-blue-soft);
  border-color:var(--citel-blue);
}
.admin-shell .count{
  background:var(--head);
  border-top:1px solid var(--line-strong);
  font-size:12px;
}

/* Ajuste fino de escala: o admin interno deve ter a mesma densidade do portal
   do cliente, especialmente em titulos, filtros, tabelas e botoes. */
.admin-shell{
  --admin-control-height:32px;
  --admin-font-size:14px;
  --admin-cell-y:5px;
  --admin-cell-x:10px;
}
.admin-shell main{
  padding:26px 28px 42px;
}
.admin-shell .page-head{
  align-items:flex-end;
  margin-bottom:10px;
}
.admin-shell h1{
  font-size:17px;
  font-weight:800;
}
.admin-shell .sub{
  font-size:12px;
}
.admin-shell .page-head .primary{
  height:36px;
  min-height:0;
  padding:0 14px;
  border-radius:5px;
  font-size:13px;
}
.admin-shell .toolbar,
.admin-shell .addbar{
  padding:34px 10px 10px;
}
.admin-shell input,
.admin-shell select{
  height:var(--admin-control-height);
  padding:5px 8px;
  font-size:13px;
}
.admin-shell .search-btn,
.admin-shell .toolbar .primary,
.admin-shell .addbar .primary{
  height:var(--admin-control-height);
  min-height:0;
  padding:0 14px;
  font-size:13px;
}
.admin-shell table{
  font-size:var(--admin-font-size);
}
.admin-shell th,
.admin-shell td{
  padding:var(--admin-cell-y) var(--admin-cell-x);
}
.admin-shell th{
  font-size:11px;
}
.admin-shell .pill{
  min-height:22px;
  display:inline-flex;
  align-items:center;
  border-radius:3px;
}
.admin-shell .row-action{
  width:28px;
  height:24px;
  min-width:28px;
}

/* Toggle de tema — botão-ícone minimalista. Clica e troca sol↔lua na hora,
   trocando o ícone por `display` (sem switch deslizante, sem animação, sem
   ícone torto). Só um ícone aparece por vez, centralizado. `color:inherit`
   deixa funcionar no header claro (admin) e na barra azul (portal). O <a> da
   engrenagem usa a classe base .theme-toggle (regra lá em cima), não este id. */
#themeToggle.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  min-width:32px;
  height:32px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:inherit;
  cursor:pointer;
  padding:0;
  overflow:visible;
  box-shadow:none;
}
#themeToggle.theme-toggle:hover{
  background:rgba(127,127,127,.16);
}
#themeToggle.theme-toggle:focus-visible{
  outline:2px solid var(--citel-blue-deep);
  outline-offset:2px;
}
#themeToggle.theme-toggle::after{
  content:none;
}
/* position:static + altura fixa (largura automática) → ícone centralizado pelo
   flex e sem distorção, seja o sol (quadrado) ou a lua (retrato). */
#themeToggle.theme-toggle svg{
  position:static;
  display:none;
  width:auto;
  height:18px;
  pointer-events:none;
  animation:none;
  transform:none;
}
#themeToggle.theme-toggle .sun{
  display:block;
  color:#E8A100;
  stroke:#E8A100;
}
[data-theme="dark"] #themeToggle.theme-toggle .sun{
  display:none;
}
[data-theme="dark"] #themeToggle.theme-toggle .moon{
  display:block;
  color:#CBD5E1;
  stroke:#CBD5E1;
}

@media (max-width:760px){
  .admin-shell header{
    grid-template-columns:1fr auto;
    grid-template-rows:auto auto;
  }
  .admin-shell .brand{padding:10px 14px}
  .admin-shell .user{padding:6px 10px}
  .admin-shell nav{
    height:auto;
    flex-wrap:wrap;
    padding:0;
  }
  .admin-shell nav a{
    height:36px;
    flex:1 1 auto;
    justify-content:center;
  }
  .admin-crumbbar{
    position:static;
  }
  .admin-shell main{
    padding:16px 14px;
  }
}