/* ============================================================================
   cadastro.css — os modais de cadastro completo (PdvCad.pas)

   Prefixo de classes: `kcad`. Servem ao TPdvCadModal e a seus dois
   descendentes (ModalCadCliente, ModalCadFuncionario). O TPdvModal monta

     .kcad-overlay > .kcad-dialog > .ui-modal-head (components/modal-head.css)
                                  > .kcad-tabs   (TopHtml: Cadastro | Listagem)
                                  > .kcad-body   > .kcad-pane...
                                                   > .kcad-subtabs  (as
                                                     sub-abas do cadastro de
                                                     funcionario)
                                                   > .kcad-subpane...
                                  > .kcad-acoes  (rodape)

   ...e o TPdvForm monta, dentro de cada cartao:

     .kcad-form > .kcad-field.kcad-field--sN > .floating-field
     .kcad-checkrow > .kcad-checkwrap > .kcad-check
     .kcad-input-group / .kcad-input-btn   (campo com botao colado)
     .kcad-radiogrid / .kcad-radio(.kcad-radio--on)
     .kcad-file (fkArquivo: miniatura + seletor)
     .kcad-cor  (fkCor: input color + atalhos de cor)

   Desenhado sobre os tokens do tema, como o resto do projeto — o layout de
   cartoes vem do modal-cad-cliente.js / modal-cad-funcionario.js do
   D2PdvSmart, que la eram Tailwind com gradiente azul fixo.
   ============================================================================ */

body.kcad-open { overflow: hidden; }

.kcad-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(15, 18, 24, .55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.kcad-overlay.is-open { display: flex; }

/* O cadastro de CFOP e o unico modal que abre POR CIMA de outro (o "+" do
   <select> CFOP do modal de Perfil Tributario). Os dois usam o prefixo kcad,
   entao o empilhamento ficaria por conta da ordem no #modal-root -- que e a
   ordem de PRIMEIRA abertura, e nao a de agora. Uma camada acima resolve sem
   depender disso. Ver runtime/src/ModalCadCfop.pas. */
#cadcfop-overlay { z-index: 1260; }

.kcad-dialog {
  display: flex;
  flex-direction: column;
  width: min(60rem, 100%);
  max-height: calc(100vh - 2rem);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* ---- abas (Cadastro | Listagem) ---- */
.kcad-tabs {
  display: flex;
  gap: .25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--app-bg);
}
.kcad-tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .8rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}
.kcad-tab:hover { color: var(--text); }
.kcad-tab--on { color: var(--primary); border-bottom-color: var(--primary); }

.kcad-body {
  padding: 1rem;
  overflow-y: auto;
}

/* ---- sub-abas da aba Cadastro (Dados Gerais | Pessoais | Avancado) ----
   Barra mais discreta que a de cima: ela vive DENTRO do pane, entao nao pode
   competir com a fileira principal. */
.kcad-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid var(--card-border);
}
.kcad-subtab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.kcad-subtab:hover { color: var(--text); }
.kcad-subtab--on { color: var(--text); border-bottom-color: var(--primary); }

.kcad-subpane { display: block; }
.kcad-subpane.hidden { display: none; }

.kcad-pane { display: block; }
.kcad-pane.hidden { display: none; }

/* ---- mensagem do modal (o runtime alterna a classe `erro`) ---- */
.kcad-status {
  margin: 0 0 .8rem;
  padding: .55rem .8rem;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 600;
  background: color-mix(in srgb, var(--success) 15%, transparent);
  color: var(--success);
}
.kcad-status.erro {
  background: color-mix(in srgb, var(--danger) 15%, transparent);
  color: var(--danger);
}

/* ---- cartoes de campos ---- */
.kcad-card {
  margin-bottom: .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.kcad-card:last-child { margin-bottom: 0; }

/* Mesma faixa do cabecalho do modal e da .page-titlebar das telas. */
.kcad-card-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  border-bottom: 1px solid var(--card-border);
  background: var(--primary);
  color: #111;
  font-size: .78rem;
  font-weight: 800;
}

.kcad-card-body { padding: 1rem .9rem .9rem; }

/* ---- grade de campos ---- */
.kcad-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1.15rem .8rem;
}

.kcad-field { min-width: 0; }
.kcad-field--s1 { grid-column: span 1; }
.kcad-field--s2 { grid-column: span 2; }
.kcad-field--s3 { grid-column: span 3; }
.kcad-field--s4 { grid-column: span 4; }
.kcad-field--s5 { grid-column: span 5; }
.kcad-field--s6 { grid-column: 1 / -1; }

/* ---- campo com erro (TPdvForm.SetFieldError) ----
   O recado fica POR BAIXO do input e permanece na tela ate o campo ser
   corrigido — o VCL dizia a mesma coisa num MessageDlg que sumia no OK.
   `:empty` e quem esconde o <small> enquanto nao ha erro: ele nasce sem
   classe `hidden` de proposito (o patch `visible` mexe em style.display e
   nao venceria um display:none !important de classe). */
.kcad-erro {
  display: block;
  margin-top: .3rem;
  color: var(--danger, #ef4444);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.3;
}
.kcad-erro:empty { display: none; }

.kcad-field--erro .floating-input {
  border-color: var(--danger, #ef4444);
  box-shadow: 0 0 0 1px var(--danger, #ef4444) inset;
}
.kcad-field--erro .floating-label { color: var(--danger, #ef4444); }
.kcad-field--erro .kcad-input-btn {
  border-color: var(--danger, #ef4444);
}

/* ---- campo com botao colado (as lupas de CEP e CNPJ) ---- */
.kcad-input-group { display: flex; align-items: stretch; }
.kcad-input-group .floating-field { flex: 1 1 0%; min-width: 0; }
/* o anel de foco do input tem de passar por cima da borda do botao */
.kcad-input-group .floating-field:focus-within { z-index: 2; }
.kcad-input-group .floating-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.kcad-input-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.6rem;
  padding: 0 .75rem;
  border: 1px solid var(--primary);
  border-left: 0;
  border-radius: var(--radius);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  background: var(--primary);
  color: #111;
  font-size: .85rem;
  cursor: pointer;
}
.kcad-input-btn:hover { background: var(--primary-hover); }

/* ---- campos logicos ---- */
.kcad-checkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.15rem;
  padding-top: .35rem;
}
.kcad-checkwrap {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
/* So desenho: o estado vive no runtime (o <button> em volta e quem clica).

   O `width: auto` que estava aqui era o bug: o flowbite.min.css (plugin de
   formularios do Tailwind) ja poe `appearance: none` em TODO
   [type=checkbox], e sem appearance nativa a caixa nao tem tamanho proprio —
   com `auto` ela encolhia para quase nada e o campo ficava sem cara de
   checkbox. Dai a medida fixa abaixo.

   O visto e background-image, nao um ::after: <input> e elemento
   substituido e nao gera caixa para ::before/::after.

   O seletor do :checked passa pelo .kcad-checkwrap de proposito — o
   [type=checkbox]:checked do flowbite tem a mesma especificidade que
   .kcad-check:checked, e um empate deixaria a cor do visto a merce da ordem
   dos <link> do index.html. */
.kcad-check {
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  border: 2px solid var(--card-border);
  border-radius: .3rem;
  background: var(--card-bg, #fff) no-repeat center / .7rem .7rem;
  transition: background-color .15s ease, border-color .15s ease;
}
.kcad-checkwrap .kcad-check:checked {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23fff' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z'/%3e%3c/svg%3e");
}
.kcad-checkwrap:hover .kcad-check { border-color: var(--primary); }

/* ---- grupo de escolha unica (Pessoa Fisica / Juridica) ---- */
.kcad-radiogrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: .5rem;
}
.kcad-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .65rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  text-align: left;
  cursor: pointer;
}
.kcad-radio:hover { border-color: var(--primary); }
.kcad-radio--on {
  border-color: var(--primary);
  background: var(--primary-soft);
}
.kcad-radio-dot { pointer-events: none; accent-color: var(--primary); }
.kcad-radio-txt { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.kcad-radio-cod { font-weight: 800; color: var(--primary); }
.kcad-radio-lbl { overflow: hidden; text-overflow: ellipsis; }

/* ---- foto (fkArquivo) ---- */
.kcad-file { display: flex; align-items: center; gap: .75rem; }
.kcad-file-img {
  width: 4.5rem;
  height: 4.5rem;
  flex: none;
  object-fit: cover;
  border: 1px dashed var(--card-border);
  border-radius: var(--radius);
  background: var(--app-bg);
}
.kcad-file-lado { display: flex; flex-direction: column; gap: .35rem; }
.kcad-file-rot { font-size: .7rem; font-weight: 600; color: var(--text-muted); }
.kcad-file-input { display: none; }
.kcad-file-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .75rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.kcad-file-btn:hover { border-color: var(--primary); color: var(--primary); }

/* ---- cor da agenda (fkCor) ---- */
.kcad-cor {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
}
.kcad-cor-atual {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  padding: .3rem .6rem .3rem .3rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
}
.kcad-cor-input {
  width: 2.4rem;
  height: 1.8rem;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) - 2px);
  background: none;
  cursor: pointer;
}
.kcad-cor-rot { font-size: .75rem; font-weight: 600; color: var(--text-muted); }

.kcad-cor-atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.kcad-cor-atalho {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
}
.kcad-cor-atalho:hover { border-color: var(--text); transform: scale(1.08); }

/* ---- aba Listagem ---- */
.kcad-busca { margin-bottom: .75rem; }

.kcad-info {
  margin-bottom: .5rem;
  font-size: .75rem;
  color: var(--text-muted);
}

.kcad-lista {
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.kcad-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--card-border);
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
}
.kcad-item:last-child { border-bottom: 0; }
.kcad-item:hover { background: var(--primary-soft); }

.kcad-item-main { flex: 1; min-width: 0; }
.kcad-item-titulo {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kcad-item-sub { margin-top: .1rem; font-size: .72rem; color: var(--text-muted); }
.kcad-item-cod { flex: none; font-size: .72rem; color: var(--text-muted); }

.kcad-item-btn {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
}
.kcad-item-btn:hover { border-color: var(--primary); color: var(--primary); }

.kcad-vazio {
  padding: .9rem;
  text-align: center;
  font-size: .8rem;
  font-style: italic;
  color: var(--text-muted);
}

/* ---- rodape ---- */
.kcad-acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  padding: .75rem 1rem;
  border-top: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--text) 3%, transparent);
}

.kcad-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
}
.kcad-btn:hover { border-color: var(--primary); color: var(--primary); }

.kcad-btn-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: #111;
}
.kcad-btn-primary:hover { background: var(--primary-hover); color: #111; }

.kcad-btn-danger { border-color: var(--danger); color: var(--danger); }
.kcad-btn-danger:hover { background: var(--danger); color: #fff; }

@media (max-width: 820px) {
  .kcad-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kcad-field--s3,
  .kcad-field--s4,
  .kcad-field--s5,
  .kcad-field--s6 { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .kcad-form { grid-template-columns: minmax(0, 1fr); }
  .kcad-field--s1,
  .kcad-field--s2 { grid-column: 1 / -1; }
  .kcad-acoes { flex-wrap: wrap; }
  .kcad-acoes .kcad-btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- lista de sugestoes (campo com historico, PdvForm.Suggest) ----
   O porte do filtro-cedente.js do D2PdvSmart: o campo continua sendo de
   digitacao livre; a lista so oferece o que ja foi gravado antes. */
.kcad-sugwrap {
  position: relative;
  display: block;
}
.kcad-sugmenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 13rem;
  overflow-y: auto;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow-lg);
}
.kcad-sugitem {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .7rem;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  border-bottom: 1px solid var(--card-border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kcad-sugitem::before {
  content: "\f1da";              /* fa-clock-rotate-left: veio do historico */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;              /* o Free so tem o peso solido completo */
  flex-shrink: 0;
  font-size: .72rem;
  color: var(--text-muted);
}
.kcad-sugitem:last-child { border-bottom: 0; }
.kcad-sugitem:hover { background: var(--primary-soft); }
.kcad-sugvazio {
  padding: .55rem .7rem;
  text-align: center;
  font-size: .78rem;
  font-style: italic;
  color: var(--text-muted);
}