/* main.css — Variáveis globais, reset e tipografia */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════════════════
   TEMA DARK (padrão) — futurista espacial
   ═══════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #060D18;
  --bg-card: #0B1628;
  --bg-element: #1A2740;
  --bg-input: #0D1A2E;
  --bg-hover: #162236;

  /* Bordas */
  --border: #1E3050;
  --border-light: #152540;
  --border-hover: #2E4A70;
  --border-focus: #3B82F6;

  /* Texto */
  --text-primary: #E2E8F0;
  --text-secondary: #C2DDF0;
  --text-muted: #90BDD8;
  --text-disabled: #2D4460;

  /* Accent / Azul elétrico */
  --accent: #1E56D0;
  --accent-light: #4D9EFF;
  --accent-hover: #2563EB;
  --accent-bg: #0D2350;
  --accent-text: #93C5FD;
  --accent-glow: rgba(77,158,255,0.15);

  /* Status — Sucesso / Verde */
  --success: #10B981;
  --success-bg: #053327;
  --success-text: #6EE7B7;
  --success-border: #065F46;

  /* Status — Aviso / Âmbar */
  --warning: #F59E0B;
  --warning-bg: #451A00;
  --warning-text: #FCD34D;
  --warning-border: #78350F;

  /* Status — Perigo / Vermelho */
  --danger: #EF4444;
  --danger-bg: #450A0A;
  --danger-text: #FCA5A5;
  --danger-border: #7F1D1D;

  /* Status — Roxo (avise-me) */
  --purple: #8B5CF6;
  --purple-bg: #1E0A3C;
  --purple-text: #C4B5FD;
  --purple-border: #3B1F8C;

  /* Status — Cinza (inativo) */
  --muted-bg: #1A2740;
  --muted-text: #90BDD8;
  --muted-border: #2E4A70;

  /* Dimensões */
  --sidebar-width: 240px;
  --topbar-height: 60px;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;

  /* Sombras */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 20px rgba(77,158,255,0.12);

  /* Transições */
  --transition: 150ms ease;
  --transition-slow: 300ms ease;

  /* Gradiente futurista da sidebar */
  --sidebar-gradient: linear-gradient(180deg, #0B1628 0%, #060D18 100%);
  --topbar-gradient: linear-gradient(90deg, #0B1628 0%, #0D1A2E 100%);

  /* Cores de linha da tabela */
  --row-hover-bg: rgba(30,86,208,0.06);

  /* Esquema de cores para controles nativos */
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════
   TEMA LIGHT (padrão) — Megatoon: clean, light, premium
   Azul-marinho + azul Megatoon + verde-limão sobre branco
   ═══════════════════════════════════════════════════════════ */

[data-theme="light"] {
  /* Backgrounds — branco com base azul-acinzentada bem clara */
  --bg-primary: #F3F6FB;
  --bg-card: #FFFFFF;
  --bg-element: #EEF3FA;
  --bg-input: #FFFFFF;
  --bg-hover: #F1F6FC;

  /* Bordas — finas e suaves */
  --border: #E2E9F3;
  --border-light: #EDF1F8;
  --border-hover: #C5D4E8;
  --border-focus: #1F5FBF;

  /* Texto — azul-marinho Megatoon */
  --text-primary: #14233F;
  --text-secondary: #41557A;
  --text-muted: #8194B2;
  --text-disabled: #B7C5DA;

  /* Accent — azul Megatoon ("MEGA") */
  --accent: #1F5FBF;
  --accent-light: #2C76DC;
  --accent-hover: #184E9E;
  --accent-bg: #E9F1FC;
  --accent-text: #18508F;
  --accent-glow: rgba(31,95,191,0.12);

  /* Sucesso — verde-limão Megatoon ("TOON") */
  --success: #6FB02B;
  --success-bg: #EEF7E0;
  --success-text: #3F6E12;
  --success-border: #CDE7A6;

  /* Aviso — âmbar */
  --warning: #E08600;
  --warning-bg: #FDF1D8;
  --warning-text: #8A5200;
  --warning-border: #F6DCA0;

  /* Perigo — vermelho */
  --danger: #DC2626;
  --danger-bg: #FDE6E6;
  --danger-text: #9B1C1C;
  --danger-border: #F6C6C6;

  /* Roxo (avise-me / histórico) */
  --purple: #7C3AED;
  --purple-bg: #EFE9FE;
  --purple-text: #4A1F95;
  --purple-border: #DDD2FB;

  /* Cinza (inativo) */
  --muted-bg: #EEF3FA;
  --muted-text: #8194B2;
  --muted-border: #DCE5F1;

  /* Sombras — suaves e premium (tom azul-marinho) */
  --shadow-sm: 0 1px 2px rgba(20,45,95,0.06);
  --shadow: 0 6px 20px rgba(20,45,95,0.08);
  --shadow-lg: 0 14px 40px rgba(20,45,95,0.12);
  --shadow-glow: 0 0 0 3px rgba(31,95,191,0.12);

  /* Gradientes — sidebar/topbar claros e limpos */
  --sidebar-gradient: linear-gradient(180deg, #FFFFFF 0%, #F4F8FD 100%);
  --topbar-gradient: linear-gradient(90deg, #FFFFFF 0%, #FBFDFF 100%);

  /* Linha de tabela */
  --row-hover-bg: rgba(31,95,191,0.045);

  /* Esquema de cores para controles nativos */
  color-scheme: light;
}

/* ── Reset ──────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--transition-slow), color var(--transition-slow);
}

a {
  color: var(--accent-light);
  text-decoration: none;
}

a:hover {
  color: var(--text-primary);
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

ul, ol {
  list-style: none;
}

/* ── Tipografia ─────────────────────────────────────────── */

h1 { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); letter-spacing: -0.02em; }
h2 { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); }
h3 { font-size: 1.1rem; font-weight: 500; color: var(--text-primary); }
h4 { font-size: 1rem; font-weight: 500; color: var(--text-secondary); }

.text-muted { color: var(--text-muted); font-size: 0.85rem; }
.text-secondary { color: var(--text-secondary); }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-danger { color: var(--danger-text); }

/* ── Utilitários ────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.w-full { width: 100%; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none !important; }

/* ── Ícones Lucide ──────────────────────────────────────── */

.icon {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  flex-shrink: 0;
}

.icon--sm { width: 14px; height: 14px; }
.icon--lg { width: 20px; height: 20px; }
.icon--xl { width: 24px; height: 24px; }

.icon--success { color: var(--success-text); }
.icon--warning { color: var(--warning-text); }
.icon--danger  { color: var(--danger-text); }
.icon--muted   { color: var(--text-muted); }
.icon--accent  { color: var(--accent-light); }
.icon--purple  { color: var(--purple-text); }

/* ── Spinner de loading ─────────────────────────────────── */

.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-top-color: var(--accent-light);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Alertas e notificações ─────────────────────────────── */

.alert {
  padding: 0.75rem 1rem;
  border-radius: var(--border-radius);
  border: 1px solid;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alert--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }
.alert--danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger-text); }
.alert--info    { background: var(--accent-bg);  border-color: var(--border);          color: var(--accent-text); }

/* ── Modal ──────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-slow), visibility var(--transition-slow);
  backdrop-filter: blur(3px);
}

[data-theme="light"] .modal-overlay {
  background: rgba(0, 20, 60, 0.4);
}

.modal-overlay.ativo {
  opacity: 1;
  visibility: visible;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-lg);
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-lg);
  transform: translateY(-10px);
  transition: transform var(--transition-slow);
}

.modal--lg   { max-width: 720px; }
.modal--xl   { max-width: 900px; }
.modal--full { max-width: min(1200px, 96vw); }

.modal-overlay.ativo .modal {
  transform: translateY(0);
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.modal__title {
  font-size: 1rem;
  font-weight: 600;
}

.modal__close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}

.modal__close:hover { color: var(--text-primary); }

.modal__body { margin-bottom: 1.25rem; max-height: 72vh; overflow-y: auto; }

.modal__footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}

/* ── Acesso negado ──────────────────────────────────────── */

.acesso-negado {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  gap: 1rem;
}

.acesso-negado h2 { color: var(--danger-text); }
.acesso-negado p  { color: var(--text-secondary); }

/* ── Theme toggle button ────────────────────────────────── */

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-element);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.3rem 0.65rem;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  white-space: nowrap;
}

.theme-toggle:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.theme-toggle .icon { flex-shrink: 0; }