/**
 * Modais nativos (<dialog>) alinhados ao design system (design-system.mdc).
 * Load após Tailwind. Variáveis --ds-* são canónicas legacy --modal-* mantidas como alias.
 */
:root {
  /* Design system — Part 3 tokens */
  --ds-canvas: #0c0c0e;
  --ds-surface: #141418;
  --ds-modal-surface: #1a1a1f;
  --ds-hover: #222228;
  --ds-border-subtle: #2a2a32;
  --ds-border-strong: #3f3f4a;
  --ds-text-primary: #f4f4f5;
  --ds-text-secondary: #a1a1aa;
  --ds-text-muted: #71717a;
  --ds-accent: #22c55e;
  --ds-accent-hover: #16a34a;
  --ds-accent-glow: rgba(34, 197, 94, 0.35);
  --ds-error: #ef4444;
  --ds-error-bg: rgba(239, 68, 68, 0.12);
  --ds-modal-backdrop: rgba(12, 12, 14, 0.72);
  --ds-modal-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
  --ds-modal-radius: 14px;
  --ds-input-bg: #141418;
  --ds-focus-ring: rgba(34, 197, 94, 0.28);

  /* Alias legada (consumo existente) */
  --modal-title: var(--ds-text-primary);
  --modal-subtitle: var(--ds-text-secondary);
  --modal-label: #c9d4e0;
  --modal-input-bg: var(--ds-input-bg);
  --modal-input-text: var(--ds-text-primary);
  --modal-input-placeholder: var(--ds-text-muted);
  --modal-input-border: rgba(255, 255, 255, 0.08);
  --modal-focus: var(--ds-accent);
  --modal-focus-glow: var(--ds-focus-ring);
}

/* Garantir que classes utilitárias (ex.: Tailwind .flex) não tornem o diálogo visível fechado */
dialog:not([open]) {
  display: none !important;
}

/* Backdrop: contraste com canvas; blur só se motion OK */
dialog::backdrop {
  background: var(--ds-modal-backdrop);
}

@media (prefers-reduced-motion: no-preference) {
  dialog::backdrop {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
}

dialog {
  color: var(--ds-text-primary);
  border: 1px solid var(--ds-border-subtle);
  background: var(--ds-modal-surface);
  border-radius: var(--ds-modal-radius);
  box-shadow: var(--ds-modal-shadow);
  padding: 0;
  max-width: calc(100vw - 2rem);
}

/**
 * Casca padrão: dialog.ds-modal > form ou div > __header / __body / __footer
 */
dialog.ds-modal {
  padding: 0;
}

.ds-modal__header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid transparent;
}

.ds-modal__body {
  padding: 0.75rem 1.5rem;
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}

.ds-modal__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.5rem 1.25rem;
  margin-top: 0.25rem;
  border-top: 1px solid var(--ds-border-subtle);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 0 0 var(--ds-modal-radius) var(--ds-modal-radius);
}

.ds-modal-alert--error {
  margin-top: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: var(--ds-error-bg);
  color: #fecaca;
  font-size: 0.875rem;
  font-weight: 500;
}

dialog h1,
dialog h2,
dialog h3,
dialog [data-modal-title] {
  color: var(--ds-text-primary) !important;
}

dialog .text-admin-ink {
  color: var(--ds-text-primary) !important;
}

dialog p.text-admin-muted,
dialog .text-admin-muted,
dialog [data-modal-help],
dialog .modal-help {
  color: var(--ds-text-secondary) !important;
}

dialog label,
dialog .modal-label {
  color: var(--modal-label);
}

/* Inputs dentro de dialog */
dialog input:not([type='checkbox']):not([type='radio']):not([type='range']):not([type='file']),
dialog select,
dialog textarea {
  background-color: var(--ds-input-bg) !important;
  color: var(--ds-text-primary) !important;
  border-color: var(--modal-input-border) !important;
  caret-color: var(--ds-text-primary);
}

dialog input::placeholder,
dialog textarea::placeholder {
  color: var(--ds-text-muted);
  opacity: 1;
}

dialog select {
  color-scheme: dark;
}

dialog input:not([type='checkbox']):not([type='radio']):focus,
dialog select:focus,
dialog textarea:focus {
  outline: none !important;
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-focus-ring) !important;
}

dialog input[type='checkbox'],
dialog input[type='radio'] {
  accent-color: var(--ds-accent);
}

/* Form fields em cards elevados no mesmo canvas */
body.min-h-screen.bg-admin-canvas .bg-admin-card input:not([type='checkbox']):not([type='radio']):not([type='submit']):not([type='button']):not([type='file']),
body.min-h-screen.bg-admin-canvas .bg-admin-card select,
body.min-h-screen.bg-admin-canvas .bg-admin-card textarea {
  background-color: var(--ds-input-bg) !important;
  color: var(--ds-text-primary) !important;
  border-color: var(--modal-input-border) !important;
  caret-color: var(--ds-text-primary);
}

body.min-h-screen.bg-admin-canvas .bg-admin-card input::placeholder,
body.min-h-screen.bg-admin-canvas .bg-admin-card textarea::placeholder {
  color: var(--ds-text-muted);
  opacity: 1;
}

body.min-h-screen.bg-admin-canvas .bg-admin-card input:focus,
body.min-h-screen.bg-admin-canvas .bg-admin-card select:focus,
body.min-h-screen.bg-admin-canvas .bg-admin-card textarea:focus {
  outline: none !important;
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-focus-ring) !important;
}

body.min-h-screen.bg-admin-canvas .bg-admin-card label {
  color: var(--modal-label);
}

body.bg-admin-canvas input.border-slate-700,
body.bg-admin-canvas select.border-slate-700,
body.bg-admin-canvas textarea.border-slate-700 {
  background-color: var(--ds-input-bg) !important;
  color: var(--ds-text-primary) !important;
  border-color: var(--modal-input-border) !important;
  caret-color: var(--ds-text-primary);
}

body.bg-admin-canvas input.border-slate-700::placeholder,
body.bg-admin-canvas textarea.border-slate-700::placeholder {
  color: var(--ds-text-muted);
  opacity: 1;
}

body.bg-admin-canvas input.border-slate-700:focus,
body.bg-admin-canvas select.border-slate-700:focus,
body.bg-admin-canvas textarea.border-slate-700:focus {
  outline: none !important;
  border-color: var(--ds-accent) !important;
  box-shadow: 0 0 0 3px var(--ds-focus-ring) !important;
}