/* ============================================================
   DESIGN SYSTEM — COMPONENTES GLOBAIS
   frontend/static/css/components.css

   Depende de: tokens.css (deve ser carregado antes)

   CONVENÇÃO DE NOMES:
     Todos os componentes usam o prefixo "ds-" para evitar
     qualquer conflito com o CSS legado existente no sistema.
     Todas as variáveis internas usam o prefixo "--ds-".

   REGRAS DESTE ARQUIVO:
     - Nenhuma sobrescrita de tag nua (h1, p, table, input)
     - Nenhuma sobrescrita de escopo modular (.page-*)
     - Convive com o CSS legado — módulos migram gradualmente
     - Componentes são opt-in: exigem classe explícita no HTML
   ============================================================ */


/* ============================================================
   BOTÕES — .ds-btn
   ============================================================

   Uso:
     <button class="ds-btn ds-btn-primary">Salvar</button>
     <a      class="ds-btn ds-btn-secondary ds-btn-sm">Voltar</a>
     <button class="ds-btn ds-btn-ghost">Cancelar</button>

   Diagnóstico resolvido:
     Os módulos atuais usam .btn + .btn-* (com base .btn).
     Login/upload/cadastros usam .btn-primary sem base.
     O prefixo ds- isola completamente estes componentes
     do legado — nenhum conflito de especificidade possível.
   ============================================================ */

.ds-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--ds-space-2);
  padding:         0.6rem 1.1rem;
  border-radius:   var(--ds-radius-md);
  border:          1px solid transparent;
  font-family:     var(--ds-font-family);
  font-size:       var(--ds-font-md);
  font-weight:     var(--ds-weight-semibold);
  line-height:     var(--ds-leading-tight);
  cursor:          pointer;
  text-decoration: none;
  white-space:     nowrap;
  transition:
    background   var(--ds-transition-base),
    border-color var(--ds-transition-base),
    box-shadow   var(--ds-transition-base),
    transform    var(--ds-transition-fast);
}

.ds-btn:focus-visible {
  outline:    none;
  box-shadow: var(--ds-focus-ring);
}

.ds-btn:disabled,
.ds-btn[disabled] {
  opacity:   0.45;
  cursor:    not-allowed;
  transform: none !important;
}

/* ── Tamanhos */

.ds-btn-sm {
  font-size: var(--ds-font-sm);
  padding:   0.3rem 0.75rem;
}

.ds-btn-lg {
  font-size: var(--ds-font-lg);
  padding:   0.75rem 1.5rem;
}

/* ── Primário — gradiente indigo → ciano */

.ds-btn.ds-btn-primary {
  background:   var(--ds-gradient-primary);
  color:        var(--ds-text-title);
  border-color: transparent;
  box-shadow:   var(--ds-shadow-md);
}

.ds-btn.ds-btn-primary:hover:not(:disabled) {
  background: var(--ds-gradient-primary-hover);
  transform:  translateY(-1px);
  box-shadow: var(--ds-shadow-lg);
}

.ds-btn.ds-btn-primary:active:not(:disabled) {
  transform:  translateY(0);
  box-shadow: var(--ds-shadow-sm);
}

/* ── Secundário — outline sutil */

.ds-btn.ds-btn-secondary {
  background:   var(--ds-bg-hover);
  color:        var(--ds-text-body);
  border-color: var(--ds-border-md);
}

.ds-btn.ds-btn-secondary:hover:not(:disabled) {
  background:   var(--ds-bg-active);
  border-color: var(--ds-border-strong);
}

/* ── Outline — borda visível, fundo transparente */

.ds-btn.ds-btn-outline {
  background:   transparent;
  color:        var(--ds-text-body);
  border-color: var(--ds-border-strong);
}

.ds-btn.ds-btn-outline:hover:not(:disabled) {
  background: var(--ds-bg-hover);
}

/* ── Ghost — sem borda, fundo invisível */

.ds-btn.ds-btn-ghost {
  background:   transparent;
  color:        var(--ds-text-muted);
  border-color: transparent;
}

.ds-btn.ds-btn-ghost:hover:not(:disabled) {
  background: var(--ds-bg-hover);
  color:      var(--ds-text-body);
}

/* ── Danger — ações destrutivas */

.ds-btn.ds-btn-danger {
  background:   var(--ds-color-danger-bg);
  color:        var(--ds-color-danger);
  border-color: var(--ds-color-danger-border);
}

.ds-btn.ds-btn-danger:hover:not(:disabled) {
  background:   rgba(248, 113, 113, 0.22);
  border-color: var(--ds-color-danger);
}


/* ============================================================
   CARD — .ds-card
   ============================================================

   Uso:
     <div class="ds-card">
       <div class="ds-card-header">
         <div>
           <h3>Título</h3>
           <p>Descrição opcional</p>
         </div>
         <div class="ds-card-header-actions">
           <button class="ds-btn ds-btn-secondary ds-btn-sm">Ação</button>
         </div>
       </div>
       <div class="ds-card-body">conteúdo</div>
       <div class="ds-card-footer">rodapé</div>
     </div>

   Diagnóstico resolvido:
     Módulos usam rent-card, modal-content, e .card (style.css).
     .ds-card não conflita com nenhuma dessas classes.
   ============================================================ */

.ds-card {
  background:    var(--ds-bg-surface);
  border-radius: var(--ds-radius-lg);
  border:        1px solid var(--ds-border);
  box-shadow:    var(--ds-shadow-lg);
  color:         var(--ds-text-body);
  overflow:      hidden;
}

.ds-card-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--ds-space-4);
  padding:         var(--ds-space-5) var(--ds-space-6);
  border-bottom:   1px solid var(--ds-border);
}

.ds-card-header h3,
.ds-card-header h4 {
  margin:      0 0 var(--ds-space-1);
  font-size:   var(--ds-font-lg);
  font-weight: var(--ds-weight-semibold);
  color:       var(--ds-text-title);
  line-height: var(--ds-leading-tight);
}

.ds-card-header p {
  margin:    0;
  font-size: var(--ds-font-sm);
  color:     var(--ds-text-muted);
}

.ds-card-header-actions {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-2);
  flex-shrink: 0;
}

.ds-card-body {
  padding: var(--ds-space-5) var(--ds-space-6);
}

.ds-card-footer {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--ds-space-3);
  padding:         var(--ds-space-4) var(--ds-space-6);
  border-top:      1px solid var(--ds-border);
}


/* ============================================================
   KPI — .ds-kpi
   ============================================================

   Uso:
     <div class="ds-kpi">
       <span class="ds-kpi-label">Receita Líquida</span>
       <span class="ds-kpi-value">R$ 12.500</span>
       <span class="ds-kpi-caption">+8% vs mês anterior</span>
     </div>

     Modificadores de estado:
       <div class="ds-kpi ds-kpi--warn">...</div>
       <div class="ds-kpi ds-kpi--danger">...</div>
       <div class="ds-kpi ds-kpi--ok">...</div>

     Container de grid:
       <div class="ds-kpi-grid">
         <div class="ds-kpi">...</div>
         <div class="ds-kpi">...</div>
       </div>

   Diagnóstico resolvido:
     Sistema atual tem .kpi-card (13+ definições) e .kpi
     (rentabilidade/conferencia). .ds-kpi é o padrão canônico
     sem conflito — coexiste com ambos durante a migração.
   ============================================================ */

.ds-kpi {
  display:        flex;
  flex-direction: column;
  gap:            var(--ds-space-1);
}

.ds-kpi-label {
  font-size:      var(--ds-font-sm);
  font-weight:    var(--ds-weight-medium);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  color:          var(--ds-text-muted);
  line-height:    var(--ds-leading-tight);
}

.ds-kpi-value {
  font-size:   var(--ds-font-kpi);
  font-weight: var(--ds-weight-semibold);
  color:       var(--ds-text-title);
  line-height: 1;
}

.ds-kpi-caption {
  font-size: var(--ds-font-sm);
  color:     var(--ds-text-faint);
}

/* Modificadores de estado */
.ds-kpi--warn   .ds-kpi-value { color: var(--ds-color-warning); }
.ds-kpi--danger .ds-kpi-value { color: var(--ds-color-danger);  }
.ds-kpi--ok     .ds-kpi-value { color: var(--ds-color-success); }
.ds-kpi--info   .ds-kpi-value { color: var(--ds-color-info);    }

/* Grid de KPIs */
.ds-kpi-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:                   var(--ds-space-4);
}


/* ============================================================
   FILTER BAR — .ds-filter-bar
   ============================================================

   Uso:
     <div class="ds-filter-bar">
       <div class="ds-filter-row">
         <div class="ds-form-group">
           <label for="f-data">Data</label>
           <input id="f-data" type="date" class="ds-form-control">
         </div>
         <div class="ds-form-group">
           <label for="f-empresa">Empresa</label>
           <input id="f-empresa" class="ds-form-control" placeholder="Buscar…">
         </div>
       </div>
       <div class="ds-filter-actions">
         <button class="ds-btn ds-btn-primary">Aplicar</button>
         <button class="ds-btn ds-btn-ghost">Limpar</button>
       </div>
     </div>

   Diagnóstico resolvido:
     5 implementações distintas no sistema (filters, compras-filter-group,
     rent-form-grid etc). .ds-filter-bar é o padrão canônico futuro.
   ============================================================ */

.ds-filter-bar {
  background:    var(--ds-bg-surface);
  border:        1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  padding:       var(--ds-space-5) var(--ds-space-6);
}

.ds-filter-row {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:                   var(--ds-space-4);
  align-items:           end;
}

.ds-filter-actions {
  display:     flex;
  align-items: center;
  gap:         var(--ds-space-3);
  flex-wrap:   wrap;
  margin-top:  var(--ds-space-4);
  padding-top: var(--ds-space-4);
  border-top:  1px solid var(--ds-border);
}

/* ── Inputs do Design System — .ds-form-group / .ds-form-control */

.ds-form-group {
  display:        flex;
  flex-direction: column;
  gap:            var(--ds-space-1);
}

.ds-form-group label {
  font-size:   var(--ds-font-sm);
  font-weight: var(--ds-weight-medium);
  color:       var(--ds-text-muted);
}

.ds-form-control {
  background:    var(--ds-bg-input);
  border:        1px solid var(--ds-border-input);
  border-radius: var(--ds-radius-md);
  padding:       0.55rem var(--ds-space-3);
  font-size:     var(--ds-font-base);
  font-family:   var(--ds-font-family);
  color:         var(--ds-text-body);
  outline:       none;
  width:         100%;
  transition:
    border-color var(--ds-transition-base),
    background   var(--ds-transition-base),
    box-shadow   var(--ds-transition-base);
}

.ds-form-control::placeholder {
  color: var(--ds-text-faint);
}

.ds-form-control:hover {
  border-color: var(--ds-border-input-hover);
}

.ds-form-control:focus {
  border-color: var(--ds-color-primary);
  background:   var(--ds-bg-input-focus);
  box-shadow:   var(--ds-focus-ring);
}

/* Estados de validação */
.ds-form-control.is-invalid {
  border-color: var(--ds-color-danger-border);
  box-shadow:   0 0 0 3px var(--ds-color-danger-bg);
}

.ds-form-control.is-valid {
  border-color: var(--ds-color-success-border);
}

/* Select e date no dark mode */
.ds-form-control[type="date"],
select.ds-form-control {
  color-scheme: dark;
  cursor:       pointer;
}

select.ds-form-control option {
  background: var(--ds-bg-deep);
  color:      var(--ds-text-body);
}


/* ============================================================
   MODAL — .ds-modal-overlay / .ds-modal
   ============================================================

   Uso:
     <div class="ds-modal-overlay" id="meuModal">
       <div class="ds-modal">
         <div class="ds-modal-header">
           <div>
             <h5 class="ds-modal-title">Título</h5>
             <p class="ds-modal-subtitle">Descrição</p>
           </div>
           <button class="ds-btn-close" aria-label="Fechar">✕</button>
         </div>
         <div class="ds-modal-body">
           conteúdo
         </div>
         <div class="ds-modal-footer">
           <button class="ds-btn ds-btn-ghost">Cancelar</button>
           <button class="ds-btn ds-btn-primary">Confirmar</button>
         </div>
       </div>
     </div>

   Abertura/fechamento:
     JS adiciona/remove .is-open no .ds-modal-overlay.
     Nenhum JS existente é alterado — novos elementos adotam
     este padrão; legado continua com seus próprios mecanismos.

   Tamanhos disponíveis:
     <div class="ds-modal ds-modal--lg">   max-width: 900px
     <div class="ds-modal ds-modal--xl">   max-width: 1200px

   Diagnóstico resolvido:
     10 modais com 5 padrões distintos. .ds-modal-overlay e
     .ds-modal são completamente novos — zero conflito com
     .modal-overlay (analises), .modal.fade (compras/vendas),
     ou .modal (despesas).
   ============================================================ */

.ds-modal-overlay {
  position:           fixed;
  inset:              0;
  background:         rgba(2, 6, 23, 0.75);
  backdrop-filter:    blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display:            flex;
  align-items:        center;
  justify-content:    center;
  padding:            var(--ds-space-6);
  z-index:            var(--ds-z-modal);
  opacity:            0;
  visibility:         hidden;
  transition:
    opacity    var(--ds-transition-base),
    visibility var(--ds-transition-base);
}

.ds-modal-overlay.is-open {
  opacity:    1;
  visibility: visible;
}

.ds-modal {
  background:     var(--ds-bg-surface);
  border:         1px solid var(--ds-border-md);
  border-radius:  var(--ds-radius-xl);
  box-shadow:     var(--ds-shadow-xl);
  width:          100%;
  max-width:      640px;
  max-height:     90vh;
  display:        flex;
  flex-direction: column;
  overflow:       hidden;
  transform:      translateY(12px);
  transition:     transform var(--ds-transition-base);
}

.ds-modal-overlay.is-open .ds-modal {
  transform: translateY(0);
}

.ds-modal--lg { max-width: 900px;  }
.ds-modal--xl { max-width: 1200px; }

.ds-modal-header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             var(--ds-space-4);
  padding:         var(--ds-space-5) var(--ds-space-6);
  border-bottom:   1px solid var(--ds-border);
  flex-shrink:     0;
}

.ds-modal-title {
  font-size:   var(--ds-font-lg);
  font-weight: var(--ds-weight-semibold);
  color:       var(--ds-text-title);
  margin:      0 0 var(--ds-space-1);
  line-height: var(--ds-leading-tight);
}

.ds-modal-subtitle {
  font-size: var(--ds-font-sm);
  color:     var(--ds-text-muted);
  margin:    0;
}

.ds-btn-close {
  background:    none;
  border:        none;
  color:         var(--ds-text-muted);
  font-size:     var(--ds-font-lg);
  cursor:        pointer;
  padding:       var(--ds-space-1);
  border-radius: var(--ds-radius-sm);
  line-height:   1;
  flex-shrink:   0;
  transition:
    color      var(--ds-transition-base),
    background var(--ds-transition-base);
}

.ds-btn-close:hover {
  color:      var(--ds-text-title);
  background: var(--ds-bg-hover);
}

.ds-btn-close:focus-visible {
  outline:    none;
  box-shadow: var(--ds-focus-ring);
}

.ds-modal-body {
  padding:    var(--ds-space-5) var(--ds-space-6);
  overflow-y: auto;
  flex:       1;
}

.ds-modal-footer {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  gap:             var(--ds-space-3);
  padding:         var(--ds-space-4) var(--ds-space-6);
  border-top:      1px solid var(--ds-border);
  flex-shrink:     0;
}


/* ============================================================
   TABLE — .ds-table
   ============================================================

   Uso:
     <div class="ds-table-wrap">
       <table class="ds-table">
         <thead>
           <tr>
             <th>Coluna</th>
             <th class="ds-col-right">Valor</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>Dado</td>
             <td class="ds-col-right">R$ 1.000</td>
           </tr>
         </tbody>
         <tfoot>
           <tr class="ds-table-total">
             <td>Total</td>
             <td class="ds-col-right">R$ 1.000</td>
           </tr>
         </tfoot>
       </table>
     </div>

   Diagnóstico resolvido:
     4 famílias de tabela coexistentes: table-basic, rent-table,
     table-premium, table-basic + módulo. .ds-table é novo e
     não conflita com nenhuma delas.
   ============================================================ */

.ds-table-wrap {
  width:         100%;
  overflow-x:    auto;
  border-radius: var(--ds-radius-lg);
  border:        1px solid var(--ds-border);
}

.ds-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--ds-font-base);
  color:           var(--ds-text-body);
}

.ds-table thead {
  background: rgba(15, 23, 42, 0.92);
  position:   sticky;
  top:        0;
  z-index:    1;
}

.ds-table th {
  padding:        0.5rem var(--ds-space-3);
  text-align:     left;
  font-size:      var(--ds-font-sm);
  font-weight:    var(--ds-weight-medium);
  color:          var(--ds-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  border-bottom:  1px solid var(--ds-border-md);
  white-space:    nowrap;
}

.ds-table td {
  padding:        0.5rem var(--ds-space-3);
  border-bottom:  1px solid var(--ds-border);
  vertical-align: middle;
}

.ds-table tbody tr:last-child td {
  border-bottom: none;
}

.ds-table tbody tr:hover {
  background: var(--ds-bg-hover);
}

.ds-table tfoot .ds-table-total {
  background:  rgba(15, 23, 42, 0.95);
  font-weight: var(--ds-weight-semibold);
  border-top:  1px solid var(--ds-border-strong);
}

/* Alinhamento de coluna */
.ds-col-right  { text-align: right;  }
.ds-col-center { text-align: center; }
.ds-col-nowrap { white-space: nowrap; }


/* ============================================================
   BADGE — .ds-badge
   ============================================================

   Uso:
     <span class="ds-badge ds-badge-success">Aprovado</span>
     <span class="ds-badge ds-badge-danger">Erro</span>
     <span class="ds-badge ds-badge-warning">Pendente</span>
     <span class="ds-badge ds-badge-info">Novo</span>
     <span class="ds-badge ds-badge-neutral">Rascunho</span>

   Diagnóstico resolvido:
     Sistema usa .badge-soft (rentabilidade/conferencia) e
     .rent-chip (rentabilidade). .ds-badge é novo e independente.
   ============================================================ */

.ds-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--ds-space-1);
  padding:        0.2rem var(--ds-space-2);
  border-radius:  var(--ds-radius-full);
  font-size:      var(--ds-font-xs);
  font-weight:    var(--ds-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  border:         1px solid transparent;
  white-space:    nowrap;
}

.ds-badge-info    { background: var(--ds-color-info-bg);    color: var(--ds-color-info);    border-color: var(--ds-color-info-border);    }
.ds-badge-success { background: var(--ds-color-success-bg); color: var(--ds-color-success); border-color: var(--ds-color-success-border); }
.ds-badge-warning { background: var(--ds-color-warning-bg); color: var(--ds-color-warning); border-color: var(--ds-color-warning-border); }
.ds-badge-danger  { background: var(--ds-color-danger-bg);  color: var(--ds-color-danger);  border-color: var(--ds-color-danger-border);  }
.ds-badge-neutral { background: var(--ds-bg-hover);         color: var(--ds-text-muted);    border-color: var(--ds-border-md);            }


/* ============================================================
   UTILITÁRIOS — prefixo ds-
   ============================================================

   Usados pontualmente em qualquer template.
   Não sobrescrevem classes utilitárias existentes.
   ============================================================ */

.ds-text-muted   { color: var(--ds-text-muted)    !important; font-size: var(--ds-font-sm); }
.ds-text-faint   { color: var(--ds-text-faint)    !important; }
.ds-text-danger  { color: var(--ds-color-danger)  !important; }
.ds-text-success { color: var(--ds-color-success) !important; }
.ds-text-warning { color: var(--ds-color-warning) !important; }
.ds-text-info    { color: var(--ds-color-info)    !important; }

.ds-divider {
  border:     none;
  border-top: 1px solid var(--ds-border);
  margin:     var(--ds-space-5) 0;
}

/* Alerta inline (mensagens de erro/sucesso em formulários) */
.ds-alert {
  padding:       0.55rem var(--ds-space-3);
  border-radius: var(--ds-radius-md);
  font-size:     var(--ds-font-sm);
  border:        1px solid transparent;
}

.ds-alert-error   { background: var(--ds-color-danger-bg);  border-color: var(--ds-color-danger-border);  color: var(--ds-color-danger);  }
.ds-alert-success { background: var(--ds-color-success-bg); border-color: var(--ds-color-success-border); color: var(--ds-color-success); }
.ds-alert-warning { background: var(--ds-color-warning-bg); border-color: var(--ds-color-warning-border); color: var(--ds-color-warning); }
.ds-alert-info    { background: var(--ds-color-info-bg);    border-color: var(--ds-color-info-border);    color: var(--ds-color-info);    }