/* ╔══════════════════════════════════════════╗
   ║ 📑 budgets.css — Versão final aplicada    ║
   ╚══════════════════════════════════════════╝
   - Substitua o arquivo atual por este conteúdo.
   - Foi ajustado tamanho de fonte, larguras de coluna e comentários.
*/

/* ===== Variáveis / header ===== */
:root{
  --c-primary:#a6c8ee;
  --c-ring: rgba(166,200,238,0.25);
  --c-space-4: 0.75rem;
  --c-space-6: 1.5rem;
  --radius: .5rem;
  /* fallback para bordas usadas no projeto */
  --c-input-bd: #e6eef8;
  --c-input-bg: #f7fbff;
}

/* ===== Cards ===== */
.card{
  background:#fff;
  border:1px solid var(--c-input-bd);
  border-radius:var(--radius);
  padding:var(--c-space-6);
  box-shadow:0 1px 0 rgba(0,0,0,.03), inset 0 1px 0 rgba(255,255,255,.6);
}
.card h2{
  margin:0 0 var(--c-space-4);
  font-size:1.0rem;
  color:#0f172a;
}

/* ===== Abas ===== */
.abas{
  display:flex; gap:8px;
  border-bottom:1px solid var(--c-input-bd);
  padding-bottom:8px; margin-bottom: var(--c-space-6);
}
.aba{
  -webkit-appearance:none; appearance:none;
  background:#fff; border:1px solid var(--c-input-bd);
  border-radius:var(--radius) var(--radius) 0 0;
  padding:8px 12px; cursor:pointer; font-weight:600;
}
.aba:hover{ background: var(--c-input-bg); }
.aba.ativa{
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-ring);
}
.aba-conteudo[hidden]{ display:none !important; }

/* ===== Tabela (com wrapper .c-scroll--table do theme) ===== */
.tabela{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed; /* mantém as larguras aplicadas nas colunas */
  background:#fff;
  min-width: 920px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Cabeçalho sticky */
.tabela thead th{
  position:sticky; top:0; z-index:1;
  background:#fff;
  border-bottom:1px solid var(--c-input-bd);
  box-shadow:0 2px 0 rgba(0,0,0,.03);
  font-weight:700;
  font-size:0.85rem;
  padding:10px 12px;
  text-align:left;
}

/* Células (fonte menor, padding reduzido) */
.tabela th, .tabela td{
  padding:4px 8px;
  border:1px solid #e5e7eb;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:0.70rem; /* reduzido para tabelas grandes */
  line-height:0.6;
  vertical-align:middle;
}

/* Hover linha */
.tabela tbody tr:hover{ background:#f8fbff; }

/* ===== Larguras por coluna (clássico: classes nas <th>) */
/* Substitua as classes no <th> do seu HTML conforme o exemplo mais abaixo. */
/* Use larguras realistas — se precisar de ajuste me diga os valores desejados. */
.tabela .col-sku   { width: 60px;  text-align:left; }  /* coluna SKU */
.tabela .col-desc  { width: 520px;  text-align:left; }  /* descrição (maior) */
.tabela .col-um    { width: 60px;   text-align:center; }/* unidade de medida */
.tabela .col-grade { width: 60px;  text-align:center; }/* grade/variação */
.tabela .col-qtd   { width: 60px;   text-align:center; }/* quantidade */
.tabela .col-unit  { width: 80px;  text-align:right; } /* unitário (monetário) */
.tabela .col-descval{ width: 80px; text-align:right; } /* desconto em reais */
.tabela .col-total { width: 80px;  text-align:right; } /* total do item */
.tabela .col-rem   { width: 70px;   text-align:center; } /* remover/ações */

/* Obs: se a soma das larguras for menor que a largura do container, algumas colunas podem expandir. */

/* ===== Botões ===== */
.btn{ height:25px; }
.btn-success{ background:#16a34a; color:#fff; border:1px solid #15803d; }
.btn-success:hover{ filter:brightness(1.03); }
.btn-danger{ background:#dc2626; color:#fff; border:1px solid #b91c1c; }
.btn-danger:hover{ filter:brightness(1.03); }

/* ===== Modal ===== */
.modal{ position:fixed; inset:0; background: rgba(0,0,0,.4); display:none; z-index:1000; }
.modal-content{ background:#fff; margin:6% auto; padding: var(--c-space-6); border-radius: var(--radius); width: 560px; max-width: 92%; box-shadow: 0 5px 15px rgba(0,0,0,0.2); position: relative; }
.modal-content .close{ position:absolute; top:10px; right:14px; font-size:24px; font-weight:700; cursor:pointer; background:transparent; border:none; }
.resultado-modal{ margin-top: var(--c-space-3); max-height: 300px; overflow-y:auto; border:1px solid var(--c-input-bd); border-radius: var(--radius); padding: .5rem; background:#fff; }
.resultado-modal div{ padding:.45rem .5rem; cursor:pointer; border-radius:8px; }
.resultado-modal div:hover{ background: var(--c-input-bg); }

/* ===== Tipos/labels ===== */
label{ display:block; margin-bottom:6px; font-weight:600; color:#34495e; }

/* ===== Responsivo ===== */
@media (max-width: 1024px){
  .tabela .col-desc{ width: 320px; }
  .tabela .col-unit, .tabela .col-total{ width: 110px; }
}

@media (max-width: 640px){
  .card{ padding: var(--c-space-4); }
  .tabela{ min-width: 720px; }
  .tabela th, .tabela td{ font-size:0.75rem; padding:6px 8px; }
  /* esconda colunas menos relevantes no mobile adicionando a classe .hide-mobile nas <th>/<td> no HTML */
  .tabela .hide-mobile{ display: none; }
}

/* ===== Abas (repetido por compatibilidade) ===== */
.abas{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 16px; }
.abas .aba{ height:40px; padding:0 12px; cursor:pointer; background:#fff; border:1px solid var(--c-input-bd); border-radius:var(--radius); }
.abas .aba.ativa{ background:#111827; color:#fff; border-color:#111827; }
.aba-conteudo{ display:none; margin-top:12px; }
.aba-conteudo.ativa{ display:block; }

/* ===== Notas ===== */
/* 1) Coloque as classes no <th> conforme abaixo para que as larguras sejam aplicadas. */
/* 2) Se preferir que a descrição quebre linha em vez de ellipsis, retire `white-space:nowrap` nas células. */