/* ============================================================
   compat-bootstrap.css — Shim de classes Bootstrap → tokens do ERP
   ------------------------------------------------------------
   PROBLEMA: modais.js e alguns módulos (produtos, compras, financeiro,
   transporte, precos) usam classes do Bootstrap (form-control, input-group,
   list-group, text-muted, row/col, alert, etc.) que NUNCA existiram no CSS
   do ERP. Isso fazia formulários abrirem sem estilo (input branco cru no
   tema escuro) = "a caixa do formulário abre com formatação quebrada".

   SOLUÇÃO: mapear essas classes para o design system do ERP, ESCOPADO
   dentro de .modal-overlay (os dois sistemas de modal usam essa casca),
   pra não arriscar afetar o layout do resto do app.
   ============================================================ */

/* ── Inputs ───────────────────────────────────────────────── */
.modal-overlay .form-control,
.modal-overlay .form-select,
.modal-overlay textarea.form-control {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg3, #22263a);
  border: 1px solid var(--border, #2e3250);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text, #e8eaf6);
  font-size: var(--text-sm, 13px);
  font-family: inherit;
  outline: none;
}
.modal-overlay .form-control:focus,
.modal-overlay .form-select:focus { border-color: var(--accent, #4f8ef7); }
.modal-overlay .form-control::placeholder { color: var(--text3, #565f8a); }
.modal-overlay .form-label {
  display: block; color: var(--text2, #9199c4);
  font-size: .78rem; font-weight: 600; margin-bottom: 6px;
}

/* ── Input group (campo + addon) ──────────────────────────── */
.modal-overlay .input-group { display: flex; align-items: stretch; }
.modal-overlay .input-group > .form-control { flex: 1; }
.modal-overlay .input-group-text {
  display: flex; align-items: center; padding: 8px 12px;
  background: var(--bg2, #1a1d27); border: 1px solid var(--border, #2e3250);
  color: var(--text2, #9199c4); font-size: var(--text-sm, 13px);
}

/* ── Listas ───────────────────────────────────────────────── */
.modal-overlay .list-group { display: flex; flex-direction: column; }
.modal-overlay .list-group-item {
  padding: 10px 12px; border: 1px solid var(--border, #2e3250);
  background: var(--bg2, #1a1d27); color: var(--text, #e8eaf6); cursor: pointer;
}
.modal-overlay .list-group-item + .list-group-item { border-top: none; }
.modal-overlay .list-group-item:first-child { border-radius: 8px 8px 0 0; }
.modal-overlay .list-group-item:last-child  { border-radius: 0 0 8px 8px; }
.modal-overlay .list-group-item:hover { background: var(--bg3, #22263a); }

/* ── Texto utilitário ─────────────────────────────────────── */
.modal-overlay .text-muted     { color: var(--text2, #9199c4) !important; }
.modal-overlay .text-secondary { color: var(--text3, #565f8a) !important; }
.modal-overlay .text-right     { text-align: right; }
.modal-overlay .text-center    { text-align: center; }
.modal-overlay .small, .modal-overlay small { font-size: .82em; }

/* ── Flex / grid utilitário ───────────────────────────────── */
.modal-overlay .d-flex { display: flex; }
.modal-overlay .justify-content-between { justify-content: space-between; }
.modal-overlay .justify-content-end { justify-content: flex-end; }
.modal-overlay .align-items-center { align-items: center; }
.modal-overlay .gap-2 { gap: 8px; } .modal-overlay .gap-3 { gap: 12px; }
.modal-overlay .row { display: flex; flex-wrap: wrap; gap: 12px; }
.modal-overlay .row > [class*="col"] { flex: 1 1 0; min-width: 0; }
.modal-overlay .col, .modal-overlay .col-6, .modal-overlay .col-md-6 { flex: 1 1 0; min-width: 0; }

/* ── Espaçamento utilitário ───────────────────────────────── */
.modal-overlay .mb-1{margin-bottom:4px}  .modal-overlay .mb-2{margin-bottom:8px}  .modal-overlay .mb-3{margin-bottom:16px}
.modal-overlay .mt-1{margin-top:4px}     .modal-overlay .mt-2{margin-top:8px}     .modal-overlay .mt-3{margin-top:16px}
.modal-overlay .pt-3{padding-top:16px}   .modal-overlay .me-2{margin-right:8px}   .modal-overlay .ms-2{margin-left:8px}
.modal-overlay .w-100{width:100%}
.modal-overlay .border-top { border-top: 1px solid var(--border, #2e3250); }

/* ── Alertas ──────────────────────────────────────────────── */
.modal-overlay .alert { padding: 10px 12px; border-radius: 8px; font-size: var(--text-sm, 13px); border: 1px solid var(--border, #2e3250); }
.modal-overlay .alert-info    { background: var(--info-dim, #1a3a4a);   color: var(--text, #e8eaf6); border-color: var(--info, #3498db); }
.modal-overlay .alert-warning { background: var(--warn-dim, #4a3500);   color: var(--text, #e8eaf6); }
.modal-overlay .alert-danger  { background: var(--danger-dim, #4a1a1a); color: var(--text, #e8eaf6); }

/* ── Botões Bootstrap → variantes ERP (base .btn já existe) ── */
.modal-overlay .btn-secondary { background: var(--bg3, #22263a); color: var(--text, #e8eaf6); border: 1px solid var(--border, #2e3250); }
.modal-overlay .btn-outline-primary   { background: transparent; color: var(--accent, #4f8ef7); border: 1px solid var(--accent, #4f8ef7); }
.modal-overlay .btn-outline-secondary { background: transparent; color: var(--text2, #9199c4); border: 1px solid var(--border, #2e3250); }
.modal-overlay .btn-light { background: var(--bg3, #22263a); color: var(--text, #e8eaf6); }

/* ── Badges variantes que podem faltar ────────────────────── */
.modal-overlay .badge-light { background: var(--bg3, #22263a); color: var(--text2, #9199c4); }