/* configuracoes.css — a tela de Configurações em cartões por assunto.
 *
 * Por que existe: cada aba de Configurações era UM cartão branco só, e tudo
 * (regras de ponto, unidades, setores, cercas, dispositivos) era empilhado
 * dentro dele separado por um filete cinza. O resultado é o que o usuário
 * descreveu: parece um modal gigante, e o olho não encontra onde um assunto
 * acaba e o outro começa — ainda mais com um "olho" (eyebrow) diferente em
 * cada bloco, dois deles idênticos ("ESTRUTURA DA EMPRESA" repetido).
 *
 * O que muda:
 *   1. O painel da aba deixa de ser cartão e vira o CONTAINER dos cartões.
 *      Cada assunto ganha sua própria borda — a separação passa a ser a
 *      superfície, não um filete.
 *   2. Os eyebrows por bloco somem. No lugar entra um rótulo por GRUPO de
 *      cartões, o que reduz a quantidade de títulos e ainda diz o que os
 *      cartões daquele trecho têm em comum.
 *   3. O cabeçalho do cartão vira grade: título e botões na MESMA linha,
 *      descrição embaixo. Antes o grupo de botões era centralizado contra o
 *      bloco inteiro de texto (eyebrow + título + descrição), então ele
 *      flutuava entre o eyebrow e o título, sem se alinhar a nada.
 *
 * Carregado por último: precisa vencer os separadores antigos de
 * remaining-modules.css, ui-refinement.css e company-users.css.
 */

/* ===== 1) O painel da aba: container, não cartão ===================== */

#configuracoes .settings-panel {
  display: grid;
  /* minmax(0, 1fr) e o min-width: 0 dos cartões abaixo: item de grade nasce
     com min-width: auto, então uma tabela larga (Aparelhos conhecidos, em
     telas estreitas) esticava a TRILHA e jogava a página inteira para fora
     da largura do celular. A rolagem tem de ficar dentro do .table-wrap. */
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-content: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* ===== 2) Rótulo de grupo ============================================ */

#configuracoes .settings-group-label {
  margin: 12px 0 -8px;
  color: #6f82a0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

#configuracoes .settings-group-heading {
  margin: 12px 0 -8px;
}

#configuracoes .settings-group-heading .settings-group-label {
  margin: 0;
}

/* A distinção entre unidade e setor era repetida na descrição de um dos dois.
   Com os dois lado a lado, ela é do grupo — dita uma vez. */
#configuracoes .settings-group-note {
  max-width: 78ch;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#configuracoes .settings-panel > *:first-child {
  margin-top: 0;
}

/* ===== 3) O cartão =================================================== */

#configuracoes .settings-card,
#configuracoes .company-units-panel,
#configuracoes .geofence-panel,
#configuracoes .device-auth-config-panel,
#configuracoes .company-notices-panel,
#configuracoes .company-users-panel,
#configuracoes .company-settings {
  min-width: 0;
  margin: 0;
  padding: 22px 24px;
  border: 1px solid var(--ui-panel-border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--ui-panel-shadow);
}

/* O aviso de cadastro incompleto não é um assunto, é um alerta: fica sem a
   borda de cartão para não competir com eles. */
#configuracoes .company-gate-banner {
  margin: 0;
}

/* ===== 4) Cabeçalho do cartão: título e ações na mesma linha ========= */

#configuracoes .panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  /* ui-refinement.css define `gap: 20px` para .panel-heading; aqui a folga
     vertical entre título e descrição precisa ser zero (quem espaça é a
     margem do <p>), só a horizontal continua valendo. */
  gap: 0 20px;
  margin: 0 0 16px;
}

#configuracoes .panel-heading > h2,
#configuracoes .panel-heading > h3 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 760;
  letter-spacing: -.01em;
}

/* A descrição ocupa a largura toda da linha de baixo: presa à coluna do
   título, ela ficaria espremida contra o grupo de botões. */
#configuracoes .panel-heading > p {
  grid-column: 1 / -1;
  grid-row: 2;
  max-width: 78ch;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

#configuracoes .panel-heading > .panel-heading-actions,
#configuracoes .panel-heading > .device-auth-actions,
#configuracoes .panel-heading > button {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

/* Rede de segurança: se algum bloco ainda chegar com o título embrulhado em
   um <div>, ele ocupa a coluna do texto inteira em vez de virar uma célula
   solta na grade. */
#configuracoes .panel-heading > div:not(.panel-heading-actions):not(.device-auth-actions) {
  grid-column: 1;
  grid-row: 1 / span 2;
  min-width: 0;
}

/* ===== 5) Unidades e setores lado a lado ============================= */

/* São o mesmo objeto visto por dois eixos (onde a pessoa fica × do que ela
   faz parte). Lado a lado eles se explicam por comparação e o trecho para de
   ocupar duas rolagens de tela. */
/* Uma coluna, em qualquer largura.
   As duas colunas nasceram quando a estrutura da empresa eram DOIS cards
   (unidades e setores) — um par, e par emparelha bem. Com o terceiro (cargos),
   a grade passou a desenhar duas linhas com um buraco do lado direito, e a
   leitura virava zigue-zague: unidade → setor → volta para a esquerda → cargo.
   Empilhados, os três se leem na ordem em que a empresa pensa (onde fica, que
   parte da operação, o que faz) e cada tabela ganha a largura inteira, que é o
   que uma lista de nome + contagem + ações pedia desde o começo. */
#configuracoes .settings-card-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

/* ===== 6) Lista de chaves liga/desliga =============================== */

#configuracoes .settings-toggle-list .settings-toggle {
  padding: 4px 0;
  border-top: 1px solid var(--line);
}

#configuracoes .settings-toggle-list .settings-toggle:first-child {
  border-top: 0;
}

/* ===== 7) Conteúdo dentro do cartão ================================== */

#configuracoes .units-toolbar {
  margin: 0 0 4px;
  padding-inline: 0;
}

#configuracoes .table-wrap table {
  margin-bottom: 0;
}

#configuracoes .company-users-list,
#configuracoes .geofence-rows,
#configuracoes .company-notice-rows {
  margin-top: 0;
}

/* O cabeçalho de "Dados da empresa" tinha tamanho próprio (19px) de quando
   era o único título da aba. Agora é um cartão entre outros. */
#configuracoes .company-settings-heading h2 {
  font-size: 16px;
  margin: 0;
}

#configuracoes .company-settings {
  margin-bottom: 0;
}

/* ===== 8) Telas estreitas =========================================== */

@media (max-width: 900px) {
  #configuracoes .panel-heading {
    grid-template-columns: minmax(0, 1fr);
  }

  #configuracoes .panel-heading > .panel-heading-actions,
  #configuracoes .panel-heading > .device-auth-actions,
  #configuracoes .panel-heading > button {
    grid-column: 1;
    grid-row: 3;
    justify-self: start;
    margin-top: 12px;
  }
}

@media (max-width: 720px) {
  #configuracoes .settings-panel {
    gap: 14px;
  }

  #configuracoes .settings-card,
  #configuracoes .company-units-panel,
  #configuracoes .geofence-panel,
  #configuracoes .device-auth-config-panel,
  #configuracoes .company-notices-panel,
  #configuracoes .company-users-panel,
  #configuracoes .company-settings {
    padding: 18px;
  }
}

/* Estado da câmera no cadastro de aparelhos (13/09/2026).
   Desde que o ponto passou a ser registrado no clique, com a foto depois, uma
   câmera bloqueada não impede a marcação — ela deixa a marcação sem foto. Isso
   é estado do aparelho, não erro da pessoa: por isso é uma coluna, e não um
   bloqueio na tela de quem bate o ponto. */
.device-camera-state {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.device-camera-state.ok { background: rgba(34, 197, 94, .14); color: #15803d; }
.device-camera-state.denied { background: rgba(239, 68, 68, .14); color: #b91c1c; }
.device-camera-state.unavailable { background: rgba(245, 158, 11, .16); color: #b45309; }

/* A linha que o aviso do sino mandou olhar. O destaque some ao recarregar a
   lista de propósito: ele serve para achar a linha uma vez, não para virar
   mais um estado permanente na tabela. */
.device-registry-table tr.device-row-destaque > td {
  background: rgba(245, 158, 11, .12);
  box-shadow: inset 3px 0 0 #f59e0b;
}

@media (prefers-color-scheme: dark) {
  .device-camera-state.ok { color: #4ade80; }
  .device-camera-state.denied { color: #fca5a5; }
  .device-camera-state.unavailable { color: #fcd34d; }
}

.kiosk-code-label{margin:14px 0 0;color:#6d7d92;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.kiosk-code-digits{margin:8px 0 0;font:700 42px/1.1 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.18em;color:#16325c}
.kiosk-code-wait{margin:6px 0 0;color:#6d7d92;font-size:13px}