/* 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: 760px;
  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) ---- */
.cdad-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem .75rem;
}
.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: 1 / -1; }

/* 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. */
.cdad-form .floating-input:disabled,
.cdad-form .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;
}
.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;
}

/* ---- 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); }

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