/* D2SCI — Modal: Dados do Cliente (visualização)
   ==============================================
   CSS PRÓPRIO do modal, DESACOPLADO da tela de Clientes. Namespace: `cdad-`.
   O JS correspondente é src/js/modals/cliente-dados.js. */

/* ---- Body lock enquanto o modal está aberto ---- */
.cdad-open { overflow: hidden; }

/* ---- Overlay + diálogo ---- */
.cdad-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.cdad-overlay.is-open { display: flex; }

.cdad-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 940px;
  max-height: 90vh;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: calc(var(--radius, .5rem) * 1.5);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  overflow: hidden;
}

/* ---- Cabeçalho ---- */
.cdad-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--card-border);
}
.cdad-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
}
.cdad-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  border-radius: var(--radius, .5rem);
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.cdad-close:hover { background: var(--primary-soft, rgba(0,0,0,.05)); color: var(--text); }

/* ---- Corpo ---- */
.cdad-body {
  padding: 1rem 1.25rem;
  overflow-y: auto;
}

.cdad-status {
  margin: 0 0 .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* ---- Grade de campos (editável, exceto cdcliente/certificado) ----
   6 colunas, nao 3. Com 3 colunas o menor span possivel era 1/3 da largura,
   entao Codigo, Inscricao, Celular, UF e Dia Venc. — campos de 2 a 8
   caracteres — ocupavam a mesma largura de "Razao Social" e empurravam tudo
   para baixo: o modal ficava altissimo e cheio de espaco morto. Com 6
   colunas o span 1 vale metade disso e cada linha comporta ate 6 campos
   curtos (ver os spans declarados em ModalCliente.pas). */
.cdad-form {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .55rem .6rem;
}
.cdad-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.cdad-field--s1 { grid-column: span 1; }
.cdad-field--s2 { grid-column: span 2; }
.cdad-field--s3 { grid-column: span 3; }
.cdad-field--s4 { grid-column: span 4; }
.cdad-field--s5 { grid-column: span 5; }
.cdad-field--s6 { grid-column: 1 / -1; }

/* Campos curtos ficam apertados demais com o padding padrao do
   floating-label; tirar um pouco deixa o valor caber sem cortar. */
.cdad-form .floating-input { padding-left: .5rem; padding-right: .5rem; }
.cdad-form .floating-label { left: .35rem; padding: 0 .35rem; }

/* ---- <select> (UF, Municipio, Empresa Vinculada, Forma de Cobranca) ----
   O .floating-input do componente base nasce com `background-color:
   transparent`, e o Chrome/Firefox nao herdam transparencia no controle de
   um <select>: eles caem no fundo do UA (branco) ou, quando o tema pinta um
   ancestral, no fundo daquele ancestral — e por isso que num tema o select
   saia branco e no outro saisse com a cor do card/primaria, sem combinar com
   os <input> ao lado. Fixar o par fundo/texto nos tokens do tema resolve os
   dois casos de uma vez, e vale para todos os presets (Clean/azul, Dark,
   Green, Pink e ZEUS), nao so para os escuros — a regra `.dark
   select.floating-input` do componente base so cobria os escuros.

   O `option` precisa da mesma dupla: o popup nativo nao herda nada do
   <select>, e num tema escuro sairia texto claro sobre fundo claro. */
.cdad-form select.floating-input,
.cdad-form select.floating-input option {
  background-color: var(--card-bg, #fff);
  color: var(--text, #0f172a);
}

/* Seta do dropdown: `appearance: none` (necessario para o fundo do tema
   pegar) apaga a seta nativa, e sem ela o select fica identico a um input —
   nada indica que aquilo abre uma lista. Desenhada em SVG inline com
   currentColor, entao acompanha o tema sem um arquivo a mais. */
.cdad-form select.floating-input {
  padding-right: 1.6rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .5rem center;
  background-size: .85rem;
}

/* Campos de texto/data/senha/moeda/select usam o componente floating-label
   (src/css/components/floating-label.css); estas regras so cobrem estados
   especificos deste modal que o componente base nao trata. */
/* ATENCAO ao seletor: `:read-only` NAO e so "input com readonly" — ele casa
   com todo elemento nao-editavel, e um <select> nunca e :read-write. Como
   `.floating-input:read-only` (sem qualificar a tag) pegava tambem os
   <select>, UF/Municipio/Forma de Cobranca apareciam com o texto em
   --text-muted, mais apagados que os campos de texto ao lado — o "select
   diferente dos outros" que se via na tela. Qualificando por tag, a regra
   volta a valer so para quem tem readonly de verdade (Código, Certificado). */
.cdad-form .floating-input:disabled,
.cdad-form input.floating-input:read-only,
.cdad-form textarea.floating-input:read-only {
  opacity: 1;
  color: var(--text-muted);
  /* Chrome/Safari esmaecem o texto de inputs disabled/readonly via
     UA-stylesheet mesmo com `color` definido acima — sem isso o valor fica
     ilegivel em temas com --card-bg translucido (ex.: ZEUS). */
  -webkit-text-fill-color: var(--text-muted);
  cursor: default;
}
.cdad-form select.floating-input:disabled {
  /* css/d2bridge.css (injetado pelo runtime D2Bridge, fora do nosso
     controle) tem a regra global `select[disabled] { background-color:
     #e9ecef }`. Selector de atributo tem mais especificidade que uma unica
     classe, entao sem !important o select fica com fundo cinza-claro fixo
     por cima de qualquer tema escuro (ZEUS etc.). */
  background-color: var(--sidebar-bg, var(--card-bg)) !important;
}

/* ---- Campo CNPJ com botao de busca colado (consulta Receita) ---- */
.cdad-input-group {
  display: flex;
  align-items: stretch;
}
.cdad-input-group .floating-field { flex: 1 1 0%; min-width: 0; }
.cdad-input-group .floating-input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.cdad-input-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  border: 1px solid var(--primary);
  border-left: 0;
  border-top-right-radius: var(--radius, .5rem);
  border-bottom-right-radius: var(--radius, .5rem);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  transition: filter .15s;
}
.cdad-input-btn:hover { filter: brightness(1.08); }
.cdad-input-btn:disabled { opacity: .6; cursor: default; filter: none; }

/* ---- Loading overlay (consulta CNPJ) ---- */
.cdad-dialog { position: relative; }
.cdad-loading {
  display: none;
  position: absolute;
  inset: 0;
  /* Precisa ficar acima do .floating-label (z-index:10 — components/
     floating-label.css), senao os labels flutuantes da grade (Cidade,
     Municipio etc.) aparecem por cima do overlay "Consultando CNPJ,
     aguarde..." em vez de ficarem escondidos atras dele. */
  z-index: 20;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .5);
}
.cdad-loading.is-open { display: flex; }
.cdad-loading-box {
  padding: 1.25rem 1.5rem;
  text-align: center;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius, .5rem);
}
.cdad-loading-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 3px solid var(--card-border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: cdad-spin .8s linear infinite;
}
@keyframes cdad-spin { to { transform: rotate(360deg); } }
.cdad-loading-text {
  margin-top: .6rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text);
}

/* ---- Checkbox (campos 'logico': Ativo, Empresa Principal, etc.) ---- */
.cdad-checkwrap {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  padding: .45rem 0;
  cursor: pointer;
  /* E um <button> (o clique vira evento do runtime), entao sem isto o
     navegador desenha a moldura padrao de botao em volta do par
     checkbox+rotulo — cinza sobre os temas escuros. */
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
}
.cdad-checkwrap input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
  cursor: pointer;
}
.cdad-checkwrap span {
  font-size: .82rem;
  color: var(--text);
}
.cdad-checkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.25rem;
  row-gap: .25rem;
}

/* ---- Card "Certificado Digital" (agrupa Cert. Config., nome/senha/
   vencimento do certificado e a importacao de arquivo) ---- */
.cdad-card {
  margin-top: 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius, .5rem);
  overflow: hidden;
}
.cdad-card-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .85rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text);
  background: var(--app-bg, rgba(0, 0, 0, .03));
  border-bottom: 1px solid var(--card-border);
}
.cdad-card-body {
  padding: .85rem;
}

/* ---- Cards de escolha unica (Regime Tributario / CRT) ----
   Mesmo desenho do card de certificado, um nivel abaixo: cada opcao e um
   botao com um radio decorativo dentro (o estado vive no runtime, ver
   SciForm.fkRadio). */
.cdad-radiogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.cdad-radio {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .55rem .7rem;
  text-align: left;
  border: 1px solid var(--card-border);
  border-radius: var(--radius, .5rem);
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cdad-radio:hover { border-color: var(--primary); }
/* Marcado: o runtime acrescenta esta classe (e o `checked` no input). */
.cdad-radio--on {
  border-color: var(--primary);
  background: var(--primary-soft, rgba(0, 0, 0, .04));
}
.cdad-radio-dot {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--primary);
  pointer-events: none;
}
.cdad-radio-txt {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  min-width: 0;
}
.cdad-radio-cod {
  flex-shrink: 0;
  padding: .1rem .35rem;
  border-radius: .3rem;
  background: var(--primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.2;
}
.cdad-radio-lbl {
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
}

@media (max-width: 900px) {
  .cdad-radiogrid { grid-template-columns: 1fr; }
}

/* ---- Certificado (upload) ---- */
.cdad-cert-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px dashed var(--card-border);
}
.cdad-cert-label {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.cdad-cert-input { font-size: .8rem; color: var(--text-muted); max-width: 100%; }
.cdad-cert-nome { font-size: .78rem; color: var(--success); font-weight: 600; }

/* ---- Rodapé ---- */
.cdad-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--card-border);
  background: var(--app-bg, transparent);
}
.cdad-acao-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius, .5rem);
  background: var(--primary);
  color: #fff;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s;
}
.cdad-acao-btn:hover { filter: brightness(1.08); }
#cdad-usuarios-site { margin-right: auto; } /* unico botao "informativo": fica isolado a esquerda */
.cdad-acao-btn--ghost {
  background: transparent;
  border-color: var(--card-border);
  color: var(--text);
}
.cdad-acao-btn--ghost:hover { filter: none; border-color: var(--primary); color: var(--primary); }
.cdad-gravar-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--success);
  border-radius: var(--radius, .5rem);
  background: var(--success);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .15s, opacity .15s;
}
.cdad-gravar-btn:hover { filter: brightness(1.08); }
.cdad-gravar-btn:disabled { opacity: .6; cursor: default; filter: none; }
.cdad-fechar-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .85rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius, .5rem);
  background: var(--card-bg);
  color: var(--text);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s, background .15s, border-color .15s, color .15s;
}
.cdad-fechar-btn:hover { border-color: var(--primary); color: var(--primary); }

/* Tablet: 6 colunas viram 2 — cada span curto ocupa metade da largura. */
@media (max-width: 900px) and (min-width: 641px) {
  .cdad-form { grid-template-columns: repeat(2, 1fr); }
  .cdad-field--s1 { grid-column: span 1; }
  .cdad-field--s2,
  .cdad-field--s3,
  .cdad-field--s4,
  .cdad-field--s5,
  .cdad-field--s6 { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  .cdad-form { grid-template-columns: 1fr; }
  .cdad-field--s1,
  .cdad-field--s2,
  .cdad-field--s3,
  .cdad-field--s4,
  .cdad-field--s5,
  .cdad-field--s6 { grid-column: 1 / -1; }
}