/* ════════════════════════════════════════════════════════════════════════
   MELO COMPAT v1 → v3 (30/07/2026)
   Reimplementa, nos TOKENS --m-, as classes utilitárias que os JS legados
   esperam (.modal/.toast/.btn-*/.form-group/...). Permite portar telas M
   para o formato v3 MANTENDO o .js original intacto (mesmos IDs/classes) —
   zero regressão de lógica; muda só a casca. Carregar DEPOIS do melo-ui.css.
   ════════════════════════════════════════════════════════════════════════ */

/* botões (variantes v1 sobre o .btn do melo-ui) */
.btn-primary { background: var(--m-accent) !important; border-color: var(--m-accent) !important; color: #fff !important; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: var(--m-surface); color: var(--m-ink); border: 1px solid var(--m-border); }
.btn-outline:hover { border-color: var(--m-accent); color: var(--m-accent); }
.btn-success { background: var(--m-ok) !important; border-color: var(--m-ok) !important; color: #fff !important; }
.btn-sm { padding: 5px 11px !important; font-size: 12px !important; }
button.btn, a.btn { display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--m-border); background: var(--m-surface); color: var(--m-ink);
  border-radius: var(--m-radius); padding: 7px 14px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* formulários */
.form-group { margin-bottom: 10px; }
.form-group label { display: block; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--m-muted); margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--m-border);
  background: var(--m-bg); color: var(--m-ink); border-radius: var(--m-radius);
  padding: 8px 11px; font-size: 13px; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: 2px solid var(--m-accent); outline-offset: -1px; }

/* modais v1 (.modal + .active | display:flex inline) */
.modal { display: none; position: fixed; inset: 0; background: rgba(4,12,34,.55);
  z-index: 1000; align-items: center; justify-content: center; overflow-y: auto; padding: 20px 10px; }
.modal.active { display: flex; }
.modal-content { background: var(--m-surface); border: 1px solid var(--m-border);
  border-radius: 10px; padding: 20px 22px; width: 100%; max-width: 560px;
  box-shadow: var(--m-shadow); }
.modal-header { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; }
.modal-header h3 { margin: 0; font-size: 16px; color: var(--m-heading); }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer;
  color: var(--m-muted); line-height: 1; }
.modal-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* toasts v1 */
.toast-container { position: fixed; top: 16px; right: 16px; z-index: 2000;
  display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { background: var(--m-surface); color: var(--m-ink); border: 1px solid var(--m-border);
  border-left: 4px solid var(--m-accent); border-radius: 8px; padding: 10px 14px;
  font-size: 13px; box-shadow: var(--m-shadow); transition: opacity .3s; }
.toast.success { border-left-color: var(--m-ok); }
.toast.error { border-left-color: var(--m-danger); }
.toast.warning { border-left-color: var(--m-warn); }
.toast.show { opacity: 1; }
.toast-header { font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--m-muted); margin-bottom: 2px; }
.toast-message { line-height: 1.4; }

/* spinners e badges */
.spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(127,127,127,.35);
  border-top-color: var(--m-accent); border-radius: 50%; animation: m-spin .7s linear infinite;
  vertical-align: -2px; }
@keyframes m-spin { to { transform: rotate(360deg); } }
.loading-spinner { text-align: center; color: var(--m-muted); padding: 24px; font-size: 13px; }
.status-badge, .badge { display: inline-block; padding: 2px 9px; border-radius: 12px;
  font-size: 11px; font-weight: 700; white-space: nowrap; }

/* user-info do header v1 (fica invisível — o shell v3 mostra o usuário) */
.user-info { display: none; }