/* ========================================
   estilos-backend.css - SISTEMA MODULAR
   ========================================*/


/* ========================================*/
/* 1. ESTILO BASE DA PÁGINA */
.body-padrao {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    color: #111827;
    background: #f3f4f6;
    margin: 0;
    padding: 20px;
    line-height: 1.5;
    min-height: 100vh;
}
/* ========================================*/
/* 2 Card padrao */

.card-padrao {
    background: #ffffff;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto 20px auto;
}

/* RESPONSIVO */
@media (max-width: 768px) {
    .body-padrao { padding: 12px; }
}
/* ========================================*/
/* 3. TÍTULOS PADRÃO */

.titulo-padrao h1 { 
    font-size: 24px; 
    letter-spacing: -0.03em; 
    margin: 0 0 4px 0; 
    font-weight: 700; 
    color: #111827;
}

.titulo-padrao  h2 {
      font-size: 16px;
      letter-spacing: -0.02em;
      margin-top: 12px;
      margin-bottom: 4px;
    }

.titulo-padrao p.small { 
    font-size: 13px; 
    color: #6b7280; 
    margin: 0 0 16px 0; 
}


/* ========================================
   4. header-padrao - HEADER FLEX (ESQUERDA/DIREITA)
   ======================================== */
.header-padrao {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* ========================================
   tabs-padrao - ABAS (dentro do header Dirieta)
   ======================================== */
.tabs-padrao {
    display: flex;
    gap: 8px;
    margin: 0;
}

.tabs-padrao .tab-button {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.2s ease;
}

.tabs-padrao .tab-button.tab-active {
    background: #2563eb;
    color: #f9fafb;
    border-color: #1d4ed8;
}

.tabs-padrao .tab-button:hover:not(.tab-active) {
    background: #eff6ff;
    transform: translateY(-1px);
}



/* ========================================
   toolbar-direita - BOTÕES AZUL/BRANCO
   ========================================
   REGRA AUTOMÁTICA:
   <a> = AZUL | <button> = BRANCO
   ======================================== */

.toolbar-direita {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

/* BASE PARA TODOS */
.toolbar-direita a,
.toolbar-direita button {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

/* LINKS AZUIS (<a>) */
.toolbar-direita a {
    border-color: #2563eb;
    background: #2563eb;
    color: #f9fafb;
}

.toolbar-direita a:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(37, 99, 216, 0.3);
}

/* BOTÕES BRANCOS (<button>) */
.toolbar-direita button {
    border-color: #6b7280;
    background: #ffffff;
    color: #374151;
}

.toolbar-direita button:hover {
    background: #f9fafb;
    transform: translateY(-1px);
}

/* RESPONSIVO */
@media (max-width: 480px) {
    .toolbar-direita { justify-content: flex-end; }
}
/* ========================================*/
/* 5. CARDS DE ESTATÍSTICAS (RESUMO) */
/* Wrapper dos cards: permite 2, 3, 4 ou mais colunas lado a lado */

.stats-padrao {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.stats-padrao .stat {
  flex: 1 1 220px;  /* mínimo 220px, depois expande até ocupar a linha */
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  background: #f9fafb;
}


/* Label pequena */
.stats-padrao .stat-label {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 4px;
}

/* Valor em destaque */
.stats-padrao .stat-value {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

/* Ajuste específico para o saldo em caixa */
.stats-padrao #saldo-caixa-principal {
    font-size: 16px;
    line-height: 1.4;
}

/* ========================================*/
/* 6. TABELA PADRÃO (RESUMOS, LISTAGENS) */
.tabela-scroll {
    width: 100%;
    overflow-x: auto;
    margin-top: 12px;
}

.tabela-padrao {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: 0;
    background: #ffffff;
}

.tabela-padrao th,
.tabela-padrao td {
    border: 1px solid #e5e7eb;
    padding: 6px 8px;
    text-align: left;
}

.tabela-padrao thead {
    background: #f3f4f6;
}

.tabela-padrao th.sortable {
    cursor: pointer;
}

.tabela-padrao tfoot td {
    font-weight: 600;
    background: #f9fafb;
}

/* TABELA DE TRANSAÇÕES (LAYOUT COMPACTO) */
.tabela-transacoes-wrapper .tabela-padrao th,
.tabela-transacoes-wrapper .tabela-padrao td {
    font-size: 11px;
    padding: 4px 6px;
    white-space: nowrap;
}

/* larguras mínimas por coluna (ajustar se quiseres) */
.tabela-transacoes-wrapper th.col-ordem        { width: 50px;  }
.tabela-transacoes-wrapper th.col-data-compra  { width: 90px;  }
.tabela-transacoes-wrapper th.col-data-venda   { width: 90px;  }
.tabela-transacoes-wrapper th.col-nome         { width: 140px; }
.tabela-transacoes-wrapper th.col-num-acoes    { width: 60px;  }
.tabela-transacoes-wrapper th.col-valor        { width: 80px;  }
.tabela-transacoes-wrapper th.col-custo        { width: 90px;  }
.tabela-transacoes-wrapper th.col-ganho        { width: 80px;  }
.tabela-transacoes-wrapper th.col-ganho-pct    { width: 60px;  }
.tabela-transacoes-wrapper th.col-taxa         { width: 60px;  }
.tabela-transacoes-wrapper th.col-moeda        { width: 80px;  }
.tabela-transacoes-wrapper th.col-acoes        { width: 50px;  }

/* inputs de filtro ocupam a largura da célula */
.tabela-transacoes-wrapper .filtro-input {
    width: 100%;
    box-sizing: border-box;
    font-size: 11px;
    padding: 2px 4px;
}

/*  Remover setas dos inputs numéricos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.select-utilizador {
    padding: 4px 8px;
    margin-right: 8px;
    font-size: 14px;
}

/* Valores positivos/negativos (ex.: % Dia, saldos, etc.) */
.positivo {
    color: #059669;
    font-weight: 600;
}

.negativo {
    color: #dc2626;
    font-weight: 600;
}