/* ══════════════════════════════════════════════════════
   Sócios e carteiras — BKon OS (js/socios.js)
   Base visual: classes .ds-* de css/ds.css. Aqui só o que é próprio da tela.
   Só tokens do portal (claro/escuro automático). Carregar depois de ds.css.
══════════════════════════════════════════════════════ */

/* o atributo hidden vence o display das classes abaixo */
.sc-editor [hidden], .sc-page [hidden], .sc-modal [hidden], .sc-cli[hidden] { display: none !important; }

.sc-page .sc-card { margin: 0 0 var(--ds-s4); }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--ds-s4); align-items: start; margin: 0 0 var(--ds-s4); }
.sc-grid .sc-card { margin: 0; }
.sc-pad { padding: var(--ds-s4) var(--ds-s5); margin: 0; }
.sc-sub { font-size: var(--ds-fs-label); margin: 2px 0 0; }
.sc-texto { margin: 0; color: var(--text-secondary); font-size: var(--ds-fs-body); line-height: 1.5; }
.sc-h3 { font: 600 var(--ds-fs-body)/1.3 var(--font-ui); color: var(--text-primary); margin: var(--ds-s5) 0 var(--ds-s2); }
.sc-badges { display: flex; flex-wrap: wrap; gap: var(--ds-s1); }
.sc-saldo { color: var(--warning); font-weight: 600; }
.sc-saldo--neg { color: var(--danger); font-weight: 600; }

/* filtro de período */
.sc-filtro { align-items: flex-end; }
.sc-filtro .ds-field { flex: 0 1 170px; min-width: 0; }

/* detalhe expansível dentro da tabela */
.sc-det { margin-top: var(--ds-s1); font-weight: 400; }
.sc-det summary { cursor: pointer; color: var(--accent-text, var(--accent)); font-size: var(--ds-fs-label); min-height: 28px; display: inline-flex; align-items: center; }
.sc-det summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.sc-det ul { list-style: none; margin: var(--ds-s1) 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sc-det li { display: flex; justify-content: space-between; gap: var(--ds-s3); font-size: var(--ds-fs-small); color: var(--text-secondary); }

/* modal */
.sc-modal--largo { max-width: 640px; }
.sc-modal__erro { margin: var(--ds-s3) 0 0; }
.sc-check { display: inline-flex; align-items: center; gap: var(--ds-s2); min-height: 40px; font: 400 var(--ds-fs-body)/1.3 var(--font-ui); color: var(--text-primary); cursor: pointer; }
.sc-check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* editor de carteira (modal da tela e modal do cliente) */
.sc-editor { display: flex; flex-direction: column; gap: var(--ds-s3); }
.sc-editor .ds-help { margin: 0; }
.sc-editor__linhas { display: flex; flex-direction: column; gap: var(--ds-s2); }
.sc-editor__vazio { margin: 0; font-size: var(--ds-fs-small); padding: var(--ds-s3); border: 1px dashed var(--border-strong); border-radius: var(--ds-r-md); }
.sc-linha { display: grid; grid-template-columns: minmax(0, 1fr) 120px auto; gap: var(--ds-s2); align-items: center; }
.sc-linha--dest { grid-template-columns: minmax(0, 1fr) 120px; }
.sc-linha--dest .ds-label { font-weight: 400; color: var(--text-secondary); }
.sc-pct { position: relative; }
.sc-pct .ds-input { padding-right: 28px; text-align: right; }
.sc-pct span { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: var(--ds-fs-small); pointer-events: none; }
.sc-editor__rodape { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-s3); flex-wrap: wrap; }
.sc-editor__dest { display: flex; flex-direction: column; gap: var(--ds-s2); padding: var(--ds-s3); border-radius: var(--ds-r-md); background: var(--bg-subtle); }
.sc-editor__vig { max-width: 260px; }
.sc-soma { font: 500 var(--ds-fs-small)/1.3 var(--font-ui); margin: 0; }
.sc-soma--ok { color: var(--success); }
.sc-soma--erro { color: var(--danger); }

/* seção dentro do modal "Novo / Editar cliente" */
.sc-cli { border: 1px solid var(--border); border-radius: var(--ds-r-md); padding: var(--ds-s3) var(--ds-s4) var(--ds-s4); margin: 0 0 var(--ds-s4); min-width: 0; }
.sc-cli legend { padding: 0 var(--ds-s1); }

/* destinações */
.sc-dest { display: flex; flex-direction: column; gap: var(--ds-s3); }
.sc-dest-linha { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto auto; gap: var(--ds-s3); align-items: end; }
.sc-dest-linha .sc-check { min-height: var(--ds-h-field); }
.sc-dest-linha.is-inativa .ds-input { opacity: 0.55; }
.sc-dest-acoes { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ds-s3); margin-top: var(--ds-s4); padding-top: var(--ds-s4); border-top: 1px solid var(--border); }
.sc-dest-vig { width: 200px; }
.sc-dest-acoes .ds-btn--primary { margin-left: auto; }
.sc-page [data-dest-soma] { margin-top: var(--ds-s3); }
.sc-page [data-dest-erro] { margin: var(--ds-s3) 0 0; }

/* histórico de versões */
.sc-hist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sc-hist li { padding: var(--ds-s3) 0; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--ds-s1); }
.sc-hist li:last-child { border-bottom: 0; }
.sc-hist__topo { display: flex; align-items: center; gap: var(--ds-s2); flex-wrap: wrap; }
.sc-hist__topo .ds-btn { margin-left: auto; }

/* painel de detalhes do cliente */
.sc-drawer { margin-top: var(--ds-s4); padding-top: var(--ds-s3); border-top: 1px solid var(--border); }
.sc-drawer__titulo { font: 600 var(--ds-fs-small)/1.3 var(--font-ui); color: var(--text-primary); margin: 0 0 var(--ds-s2); }
.sc-drawer__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-s1); }
.sc-drawer__lista li { display: flex; justify-content: space-between; gap: var(--ds-s3); font-size: var(--ds-fs-body); color: var(--text-secondary); }
.sc-drawer .client-drawer__textbtn { margin: var(--ds-s2) 0 0; }
.sc-drawer .sc-hist li { padding: var(--ds-s2) 0; }

@media (max-width: 700px) {
  .sc-filtro .ds-field { flex: 1 1 120px; }
  .sc-filtro .ds-btn { flex: 1 1 100%; }
  .sc-linha { grid-template-columns: minmax(0, 1fr) 96px; }
  .sc-linha > .ds-btn { grid-column: 1 / -1; justify-self: start; }
  .sc-dest-linha { grid-template-columns: minmax(0, 1fr) 110px; }
  .sc-dest-acoes .ds-btn--primary { margin-left: 0; width: 100%; }
  .sc-dest-vig, .sc-editor__vig { width: 100%; max-width: none; }
  .sc-grid { grid-template-columns: 1fr; }
}