/* Variáveis de tema — usadas no painel e em theme-app.css */
:root {
  /* Alinha Bootstrap (.text-primary, .btn-primary, barras) à marca */
  --bs-primary: #6a0392;
  --bs-primary-rgb: 106, 3, 146;
  --app-bg: #f0f2f7;
  --app-surface: #ffffff;
  --app-surface-2: #f8f9fc;
  --app-text: #1c1c1f;
  --app-muted: #6b7280;
  --app-border: rgba(15, 23, 42, 0.08);
  --app-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
  --sidebar-w: 260px;
  --sidebar-bg: linear-gradient(165deg, #1a0b24 0%, #0f0f14 55%, #0a0a0d 100%);
  --sidebar-border: rgba(255, 255, 255, 0.06);
  --sidebar-link: rgba(255, 255, 255, 0.68);
  --sidebar-link-hover-bg: rgba(255, 255, 255, 0.06);
  --sidebar-active: #7c3aed;
  --sidebar-active-glow: rgba(124, 58, 237, 0.35);
  --bc-purple: #6a0392;
  /* Ritmo fluido (painel + páginas mock): substitui paddings fixos por viewport */
  --app-main-pad-x: clamp(0.75rem, 2.8vw, 1.75rem);
  --app-main-pad-y: clamp(0.85rem, 2.4vw, 1.65rem);
  --app-section-gap: clamp(1rem, 2.5vw, 1.75rem);
  --app-radius-card: clamp(0.8125rem, 1.1vw, 1rem);
  --app-radius-panel: clamp(0.875rem, 1.25vw, 1.125rem);
  /*
   * Fundo telas auth públicas (login, esqueci senha): alinhado a --app-bg + primário/violeta.
   * Camadas: radiais suaves por cima do degradê linear (último = base).
   */
  --auth-public-shell-bg: #f0f2f7;
  --auth-public-shell-image:
    radial-gradient(ellipse 115% 78% at 8% -5%, rgba(106, 3, 146, 0.13) 0%, transparent 56%),
    radial-gradient(ellipse 100% 72% at 96% 102%, rgba(124, 58, 237, 0.1) 0%, transparent 52%),
    linear-gradient(165deg, #faf8ff 0%, #f0f2f7 40%, #ebe8f5 75%, #e6e1f4 100%);
}

[data-theme="dark"] {
  --app-bg: #0b0b0f;
  --app-surface: #14141a;
  --app-surface-2: #1a1a22;
  --app-text: #ececf1;
  --app-muted: #b9bcc7;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

html {
  /* Evita barra horizontal por filhos com min-width:auto na grelha Bootstrap */
  overflow-x: clip;
}

/* ===========================================================================
   Overrides globais para legibilidade em modo escuro
   Aplica-se a todas as páginas que usem estas classes/variáveis.
   =========================================================================== */
[data-theme="dark"] .text-muted,
[data-bs-theme="dark"] .text-muted {
  color: var(--app-muted, #b9bcc7) !important;
}

[data-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .text-secondary {
  color: #c7c9d1 !important;
}

[data-theme="dark"] .text-body-secondary,
[data-bs-theme="dark"] .text-body-secondary {
  color: var(--app-muted, #b9bcc7) !important;
}

[data-theme="dark"] small,
[data-theme="dark"] .small,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] .small {
  color: inherit;
}

[data-theme="dark"] .form-text,
[data-bs-theme="dark"] .form-text {
  color: var(--app-muted, #b9bcc7);
}

[data-theme="dark"] .form-label,
[data-bs-theme="dark"] .form-label {
  color: var(--app-text, #ececf1);
}