/* ============================================================================
   PSA-MT — Camada de componentes compartilhada (coerência entre páginas)
   Classes prefixadas `ui-` para adoção incremental sem colidir com o legado.
   Tudo consome os tokens do :root (index.html). Criado 2026-07-02.
   ========================================================================== */

/* ── Foco visível global (acessibilidade por teclado) ── */
.ui-focusable:focus-visible,
.ui-btn:focus-visible,
.ui-input:focus-visible,
.ui-select:focus-visible,
.ui-icon-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Botões ── */
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-semibold);
  line-height: 1; padding: 10px 16px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.ui-btn:active { transform: translateY(1px); }
.ui-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ui-btn--primary { background: var(--blue); color: #fff; }
.ui-btn--primary:hover:not(:disabled) { background: #0E6075; }
.ui-btn--ghost { background: var(--surface); color: var(--text-mid); border-color: var(--border); }
.ui-btn--ghost:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.ui-btn--danger { background: var(--error); color: #fff; }
.ui-btn--danger:hover:not(:disabled) { background: #B91C1C; }
.ui-btn--sm { padding: 6px 12px; font-size: var(--fs-md); }
.ui-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--text-mid);
  cursor: pointer; transition: background var(--t-fast), color var(--t-fast);
}
.ui-icon-btn:hover { background: var(--bg); color: var(--text); }

/* ── Cartão ── */
.ui-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-sm); padding: var(--sp-5);
}

/* ── Cabeçalho de página + toolbar ── */
.ui-page-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.ui-page-header h1, .ui-page-title {
  font-family: var(--font-heading); font-size: var(--fs-2xl); font-weight: var(--fw-semibold);
  color: var(--navy); margin: 0; line-height: 1.15;
}
.ui-page-sub { font-size: var(--fs-md); color: var(--text-muted); margin: 2px 0 0; }
.ui-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Campos de formulário ── */
.ui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.ui-label { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--text-mid); }
.ui-input, .ui-select, .ui-textarea {
  font-family: var(--font-body); font-size: var(--fs-base); color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; width: 100%; box-sizing: border-box; transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--text-muted); }

/* ── Badges / chips ── */
.ui-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1;
  padding: 3px 8px; border-radius: var(--r-pill); background: var(--blue-light); color: var(--blue);
}
.ui-badge--success { background: var(--success-bg); color: var(--success); }
.ui-badge--warn { background: var(--warn-bg); color: var(--warn); }
.ui-badge--error { background: #FEF2F2; color: var(--error); }
.ui-badge--muted { background: var(--bg); color: var(--text-muted); }
.ui-badge--purple { background: var(--purple-bg); color: var(--purple); }

/* ── Tabela ── */
.ui-table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.ui-table th {
  text-align: left; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted);
  padding: 10px 12px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.ui-table td { padding: 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.ui-table tbody tr:hover { background: var(--bg); }

/* ── Estados padronizados: vazio / carregando / erro ── */
.ui-empty, .ui-loading, .ui-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  text-align: center; padding: var(--sp-10) var(--sp-5); color: var(--text-muted); font-size: var(--fs-base);
}
.ui-empty__icon { font-size: 40px; opacity: .8; margin-bottom: var(--sp-1); }
.ui-empty__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--text); }
.ui-error { color: var(--error); }
.ui-spinner {
  width: 22px; height: 22px; border: 2.5px solid var(--border); border-top-color: var(--blue);
  border-radius: 50%; animation: ui-spin .8s linear infinite;
}
@keyframes ui-spin { to { transform: rotate(360deg); } }
.ui-skeleton {
  background: linear-gradient(90deg, var(--bg) 25%, #E8EEFA 37%, var(--bg) 63%);
  background-size: 400% 100%; animation: ui-shimmer 1.4s ease infinite; border-radius: var(--r-sm);
}
@keyframes ui-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ── Modal (largura fluida, sem px fixo) ── */
.ui-modal {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
  background: rgba(13,27,53,.45); backdrop-filter: blur(2px);
}
.ui-modal__panel {
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-pop);
  width: min(92vw, 480px); max-height: 88vh; overflow-y: auto; padding: var(--sp-6);
}
.ui-modal__panel--lg { width: min(94vw, 760px); }
.ui-modal__title { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--navy); margin: 0 0 var(--sp-4); }

/* ── Toasts ── */
#ui-toast-host {
  position: fixed; z-index: var(--z-toast); right: var(--sp-5); bottom: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2); pointer-events: none;
}
.ui-toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--sp-2);
  background: var(--navy); color: #fff; font-size: var(--fs-base); font-weight: var(--fw-medium);
  padding: 12px 16px; border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
  max-width: min(90vw, 380px); animation: ui-toast-in var(--t);
}
.ui-toast--success { background: var(--success); }
.ui-toast--error { background: var(--error); }
.ui-toast--warn { background: var(--warn); }
@keyframes ui-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Responsividade base (breakpoint único) ── */
@media (max-width: 640px) {
  .ui-page-header { align-items: flex-start; }
  .ui-modal__panel { padding: var(--sp-5); }
  #ui-toast-host { left: var(--sp-4); right: var(--sp-4); }
  .ui-toast { max-width: none; }
}