/*
 * ChatLog · estilo da tela de Administração (dentro do próprio sistema).
 *
 * Só o que a tela precisa a mais. O cartão, o título e os botões vêm das classes
 * que o index.html já tem (.cfg-card, .cfg-card-head, .section-head, .cfg-note).
 * Tudo aqui começa com clad- para não esbarrar em nenhum estilo do app.
 *
 * As cores são fixas, não usam as variáveis de tema. O .cfg-card é branco fixo,
 * inclusive no modo escuro, então texto por variável ficaria branco no branco.
 * Esta tela acompanha Configurações e fica sempre clara.
 */

/* as tabelas pedem mais largura que os cartões de Configurações */
.cfg-card.clad-card { max-width: 1100px; }

.clad-label { display: block; font-size: 12px; color: #5F5E5A; margin: 10px 0 4px; font-weight: 600; }
.clad-in {
  width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
  border: 1px solid #ececec; border-radius: 8px; background: #faf9f5; color: #0C1712;
}
.clad-row { display: flex; gap: 12px; flex-wrap: wrap; }
.clad-row > div { flex: 1; min-width: 190px; }
.clad-chk { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: 13px; color: #0C1712; }
.clad-chk input { width: auto; }

.clad-btn {
  border: none; padding: 10px 17px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; font-family: inherit; margin-top: 14px;
  background: #0F4435; color: #fff;
}
.clad-btn:disabled { opacity: .6; cursor: default; }
.clad-btn.sec { background: #E0E7E2; color: #0F4435; }

.clad-msg { font-size: 13px; margin-top: 10px; padding: 9px 12px; border-radius: 8px; display: none; }
.clad-msg.ok { display: block; background: #E1F5EE; color: #0F4435; }
.clad-msg.err { display: block; background: #FCEBEB; color: #9A3B3B; }

.clad-rola { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.clad-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; margin-top: 6px; }
.clad-tab th, .clad-tab td { text-align: left; padding: 10px; border-bottom: 1px solid #ececec; vertical-align: middle; }
.clad-tab th { color: #0F4435; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.clad-tab td { color: #0C1712; }
.clad-tab .clad-nome { min-width: 170px; }
.clad-tab .clad-acoes { white-space: nowrap; text-align: right; }
.clad-tab .clad-acoes button { margin-left: 6px; }

.clad-badge { display: inline-block; border-radius: 6px; padding: 2px 9px; font-size: 11px; font-weight: 700; background: #E1F5EE; color: #0F4435; }
.clad-badge.op { background: #E0E7E2; color: #3E9B78; }

.clad-mini {
  background: #fff; border: 1px solid #C3D5CC; color: #0F4435;
  padding: 5px 10px; border-radius: 7px; cursor: pointer; font-size: 12px; font-family: inherit;
}
.clad-mini.rm { border-color: #f0cccc; color: #9A3B3B; }
.clad-mini:disabled { opacity: .6; cursor: default; }

.clad-sel {
  width: 100%; padding: 7px 9px; font-size: 13px; font-family: inherit;
  border: 1px solid #ececec; border-radius: 8px; background: #faf9f5; color: #0C1712;
}

.clad-sub { font-size: 12px; color: #888780; margin-top: 2px; }