/* ═══════════════════════════════════════════════════════════
   Próvision — Component Library  (.prv-*)
   Sprint 1 (2026-04) — Design system foundation

   Biblioteca de componentes base em CSS vanilla usando os
   tokens de css/design-tokens.css. Uso obrigatório em páginas
   novas e na homogeneização das páginas legadas (Sprints 4-8).

   Regras:
   - Nunca usar cores hardcoded aqui. Só var(--*).
   - Nunca @import — depender da ordem de carregamento no HTML.
   - Cada bloco é independente: delete um, o resto funciona.
   - Variantes seguem BEM: .prv-btn--primary, .prv-card--dark.
   ═══════════════════════════════════════════════════════════ */

/* ── Reset leve (escopo .prv-*) ──────────────────────────── */
[class*="prv-"] { box-sizing: border-box; }

/* ───────────────────────────────────────────────────────────
   Buttons
   ─────────────────────────────────────────────────────────── */
.prv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0 var(--space-lg);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.prv-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.prv-btn:disabled,
.prv-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.prv-btn:active { transform: translateY(1px); }

.prv-btn--sm { min-height: 32px; padding: 0 var(--space-md); font-size: var(--fs-sm); }
.prv-btn--lg { min-height: 48px; padding: 0 var(--space-xl); font-size: var(--fs-lg); }
.prv-btn--block { width: 100%; }
.prv-btn--icon { padding: 0; width: 40px; }
.prv-btn--icon.prv-btn--sm { width: 32px; }
.prv-btn--icon.prv-btn--lg { width: 48px; }

.prv-btn--primary {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}
.prv-btn--primary:hover { background: var(--navy-light); border-color: var(--navy-light); }
.prv-btn--primary:active { background: var(--color-base); }

.prv-btn--gold {
  background: var(--gold);
  border-color: var(--gold);
  color: #FFFFFF;
  box-shadow: var(--shadow-gold);
}
.prv-btn--gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); }

.prv-btn--ghost {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
}
.prv-btn--ghost:hover { background: var(--bg-hover); border-color: var(--border-hover); }

.prv-btn--subtle {
  background: var(--bg-surface-2);
  border-color: transparent;
  color: var(--text-secondary);
}
.prv-btn--subtle:hover { background: var(--bg-hover); color: var(--text-primary); }

.prv-btn--danger {
  background: var(--red);
  border-color: var(--red);
  color: #FFFFFF;
}
.prv-btn--danger:hover { background: var(--red); border-color: var(--red); filter: brightness(0.9); }
.prv-btn--danger:focus-visible { box-shadow: var(--focus-ring-danger); }

.prv-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--navy);
  padding: 0;
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prv-btn--link:hover { color: var(--gold); }

/* ───────────────────────────────────────────────────────────
   Cards
   ─────────────────────────────────────────────────────────── */
.prv-card {
  display: block;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-base) var(--ease-standard);
}
.prv-card--compact { padding: var(--space-lg); }
.prv-card--flat { box-shadow: none; }
.prv-card--muted { background: var(--bg-surface-2); }
.prv-card--interactive { cursor: pointer; }
.prv-card--interactive:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.prv-card--interactive:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.prv-card--dark {
  background: var(--navy);
  border-color: var(--navy-light);
  color: var(--text-on-dark);
}
.prv-card--dark .prv-card-title { color: #FFFFFF; }
.prv-card--dark .prv-card-muted { color: var(--text-on-dark-2); }

.prv-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.prv-card-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}
.prv-card-muted {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.prv-card-body { color: var(--text-secondary); font-size: var(--fs-md); line-height: var(--lh-normal); }
.prv-card-footer {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

/* ───────────────────────────────────────────────────────────
   Form controls (input / select / textarea / checkbox / radio)
   ─────────────────────────────────────────────────────────── */
.prv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
}
.prv-label {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-label);
  letter-spacing: 0.02em;
}
.prv-help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}
.prv-error {
  font-size: var(--fs-xs);
  color: var(--red);
  line-height: var(--lh-normal);
}

.prv-input,
.prv-select,
.prv-textarea {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}
.prv-textarea { min-height: 96px; resize: vertical; }
.prv-input::placeholder,
.prv-textarea::placeholder { color: var(--text-muted); }

.prv-input:hover,
.prv-select:hover,
.prv-textarea:hover { border-color: var(--border-hover); }

.prv-input:focus,
.prv-select:focus,
.prv-textarea:focus {
  outline: none;
  border-color: var(--border-active);
  box-shadow: var(--focus-ring);
}

.prv-input:disabled,
.prv-select:disabled,
.prv-textarea:disabled {
  background: var(--bg-surface-2);
  color: var(--text-muted);
  cursor: not-allowed;
}
.prv-input[aria-invalid="true"],
.prv-select[aria-invalid="true"],
.prv-textarea[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: var(--focus-ring-danger);
}

.prv-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-2xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748B' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
}

.prv-checkbox,
.prv-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.prv-checkbox input[type="checkbox"],
.prv-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.prv-checkbox input[type="checkbox"] { border-radius: var(--radius-xs); }
.prv-radio input[type="radio"]       { border-radius: 50%; }
.prv-checkbox input[type="checkbox"]:hover,
.prv-radio input[type="radio"]:hover { border-color: var(--navy); }
.prv-checkbox input[type="checkbox"]:focus-visible,
.prv-radio input[type="radio"]:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.prv-checkbox input[type="checkbox"]:checked {
  background: var(--navy);
  border-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.prv-radio input[type="radio"]:checked {
  background: var(--bg-surface);
  border-color: var(--navy);
  border-width: 5px;
}

/* ───────────────────────────────────────────────────────────
   Badge / Pill / Tag
   ─────────────────────────────────────────────────────────── */
.prv-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.prv-badge--info    { background: var(--blue-bg);  color: var(--blue);  border-color: transparent; }
.prv-badge--success { background: var(--green-bg); color: var(--green); border-color: transparent; }
.prv-badge--warn    { background: var(--amber-bg); color: var(--amber); border-color: transparent; }
.prv-badge--danger  { background: var(--red-bg);   color: var(--red);   border-color: transparent; }
.prv-badge--gold    { background: var(--gold-bg);  color: var(--gold);  border-color: transparent; }
.prv-badge--navy    { background: var(--navy);     color: #FFFFFF;      border-color: transparent; }

.prv-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  cursor: default;
}
.prv-pill--interactive { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.prv-pill--interactive:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.prv-pill--active {
  background: var(--navy);
  border-color: var(--navy);
  color: #FFFFFF;
}

.prv-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px var(--space-sm);
  background: var(--navy-muted);
  border-radius: var(--radius-sm);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1.4;
}
.prv-tag-close {
  all: unset;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: var(--navy);
  opacity: 0.6;
}
.prv-tag-close:hover { opacity: 1; }

/* ───────────────────────────────────────────────────────────
   Modal (overlay + content)
   ─────────────────────────────────────────────────────────── */
.prv-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(11, 17, 32, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.prv-modal-overlay[data-open="true"],
.prv-modal-overlay.is-open { opacity: 1; pointer-events: auto; }

.prv-modal {
  position: relative;
  z-index: var(--z-modal);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - var(--space-3xl));
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--duration-base) var(--ease-emphasized);
}
.prv-modal-overlay[data-open="true"] .prv-modal,
.prv-modal-overlay.is-open .prv-modal { transform: translateY(0) scale(1); }

.prv-modal--sm { max-width: 400px; }
.prv-modal--lg { max-width: 800px; }
.prv-modal--xl { max-width: 1040px; }

.prv-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl);
  border-bottom: 1px solid var(--border);
}
.prv-modal-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}
.prv-modal-close {
  all: unset;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.prv-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.prv-modal-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.prv-modal-body {
  padding: var(--space-xl);
  overflow-y: auto;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.prv-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
}

/* ───────────────────────────────────────────────────────────
   Pane  (painel contido em workspace shell)
   ─────────────────────────────────────────────────────────── */
.prv-pane {
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 0;
}
.prv-pane--flat { border-radius: 0; border-left: 0; border-right: 0; }
.prv-pane--muted { background: var(--bg-surface-2); }

.prv-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  flex-shrink: 0;
}
.prv-pane-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
}
.prv-pane-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}
.prv-pane-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--space-lg);
  overflow-y: auto;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}
.prv-pane-body--nopad { padding: 0; }
.prv-pane-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border);
  background: var(--bg-surface-2);
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────
   Table
   ─────────────────────────────────────────────────────────── */
.prv-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-md);
  color: var(--text-primary);
}
.prv-table thead th {
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-surface-2);
  border-bottom: 1px solid var(--border);
  color: var(--text-label);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.prv-table tbody td {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  line-height: var(--lh-normal);
  vertical-align: top;
}
.prv-table tbody tr:last-child td { border-bottom: 0; }
.prv-table tbody tr { transition: background-color var(--duration-fast) var(--ease-standard); }
.prv-table tbody tr:hover { background: var(--bg-hover); }

.prv-table--compact thead th,
.prv-table--compact tbody td { padding: var(--space-sm) var(--space-md); font-size: var(--fs-sm); }

.prv-table--zebra tbody tr:nth-child(even) td { background: var(--bg-surface-2); }

/* ───────────────────────────────────────────────────────────
   Alerts
   ─────────────────────────────────────────────────────────── */
.prv-alert {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-md);
  background: var(--bg-surface-2);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.prv-alert-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.prv-alert-body { flex: 1; }
.prv-alert-title {
  margin: 0 0 var(--space-2xs) 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.prv-alert--info    { border-left-color: var(--blue);  background: var(--blue-bg);  color: var(--text-primary); }
.prv-alert--info    .prv-alert-icon { color: var(--blue); }
.prv-alert--success { border-left-color: var(--green); background: var(--green-bg); color: var(--text-primary); }
.prv-alert--success .prv-alert-icon { color: var(--green); }
.prv-alert--warn    { border-left-color: var(--amber); background: var(--amber-bg); color: var(--text-primary); }
.prv-alert--warn    .prv-alert-icon { color: var(--amber); }
.prv-alert--error   { border-left-color: var(--red);   background: var(--red-bg);   color: var(--text-primary); }
.prv-alert--error   .prv-alert-icon { color: var(--red); }

/* ───────────────────────────────────────────────────────────
   Misc helpers (usados por componentes)
   ─────────────────────────────────────────────────────────── */
.prv-divider {
  height: 1px;
  background: var(--border);
  border: 0;
  margin: var(--space-lg) 0;
}
.prv-divider--vertical {
  width: 1px;
  height: auto;
  align-self: stretch;
  margin: 0 var(--space-md);
}

.prv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ───────────────────────────────────────────────────────────
   Dark workspace compat  (html.provision-app--dark)
   Quando o usuário estiver no workspace autenticado dark,
   os componentes .prv-* herdam cores legíveis automaticamente.
   ─────────────────────────────────────────────────────────── */
html.provision-app--dark .prv-card {
  background: var(--ws-glass-panel, rgba(30,41,59,0.45));
  border-color: var(--ws-glass-border, rgba(148,163,184,0.16));
  color: var(--text-on-dark);
}
html.provision-app--dark .prv-card-title { color: #FFFFFF; }
html.provision-app--dark .prv-card-muted,
html.provision-app--dark .prv-card-body { color: var(--ws-text-secondary, #cbd5e1); }
html.provision-app--dark .prv-card-footer { border-top-color: var(--ws-glass-border, rgba(148,163,184,0.16)); }

html.provision-app--dark .prv-input,
html.provision-app--dark .prv-select,
html.provision-app--dark .prv-textarea {
  background: rgba(15,23,42,0.6);
  border-color: var(--ws-glass-border, rgba(148,163,184,0.16));
  color: var(--text-on-dark);
}
html.provision-app--dark .prv-input::placeholder,
html.provision-app--dark .prv-textarea::placeholder { color: var(--ws-text-muted, #94a3b8); }

html.provision-app--dark .prv-pane,
html.provision-app--dark .prv-modal {
  background: var(--ws-chrome-bg, #1b2540);
  border-color: var(--ws-glass-border, rgba(148,163,184,0.16));
  color: var(--text-on-dark);
}
html.provision-app--dark .prv-pane-header,
html.provision-app--dark .prv-pane-footer,
html.provision-app--dark .prv-modal-header,
html.provision-app--dark .prv-modal-footer {
  background: transparent;
  border-color: var(--ws-glass-border, rgba(148,163,184,0.16));
}
html.provision-app--dark .prv-pane-title,
html.provision-app--dark .prv-modal-title { color: #FFFFFF; }
html.provision-app--dark .prv-pane-body,
html.provision-app--dark .prv-modal-body { color: var(--ws-text-secondary, #cbd5e1); }

html.provision-app--dark .prv-table { color: var(--text-on-dark); }
html.provision-app--dark .prv-table thead th {
  background: rgba(15,23,42,0.6);
  border-bottom-color: var(--ws-glass-border, rgba(148,163,184,0.16));
  color: var(--ws-text-muted, #94a3b8);
}
html.provision-app--dark .prv-table tbody td {
  border-bottom-color: var(--ws-glass-border, rgba(148,163,184,0.16));
  color: var(--ws-text-secondary, #cbd5e1);
}
html.provision-app--dark .prv-table tbody tr:hover { background: rgba(148,163,184,0.06); }

html.provision-app--dark .prv-divider { background: var(--ws-glass-border, rgba(148,163,184,0.16)); }

/* ── reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [class*="prv-"],
  [class*="prv-"]::before,
  [class*="prv-"]::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}