/* =============================================================
   portal-themes.css – Temas de cores para o portal SosDados
   Aplique  data-portal-theme="nome"  no <body> para trocar o tema.
   O tema "dark-blue" é o padrão (variáveis em portal.css :root).
   ============================================================= */

/* ── dark-blue (padrão) ── */
[data-portal-theme="dark-blue"] {
  --p-bg:       #05081a;
  --p-surface:  #0d1240;
  --p-surface2: #141850;
  --p-border:   rgba(255,255,255,0.08);
  --p-brand:    #00d4ff;
  --p-brand-bg: rgba(0,212,255,0.10);
  --p-green:    #00ff88;
  --p-text:     #e8eeff;
  --p-muted:    #7d8ab5;
  --p-logo-ink: #05081a;
}

/* ── slate  (cinza-ardósia / índigo) ──
   Tom neutro profissional. Menos saturação, menos azul. */
[data-portal-theme="slate"] {
  --p-bg:       #0d0f14;
  --p-surface:  #161b27;
  --p-surface2: #1e2535;
  --p-border:   rgba(255,255,255,0.07);
  --p-brand:    #818cf8;
  --p-brand-bg: rgba(129,140,248,0.10);
  --p-green:    #34d399;
  --p-text:     #e2e8f0;
  --p-muted:    #64748b;
  --p-logo-ink: #0d0f14;
}

/* ── midnight  (preto-roxo) ──
   Extremamente sóbrio, acento lilás suave. */
[data-portal-theme="midnight"] {
  --p-bg:       #08070f;
  --p-surface:  #110f1e;
  --p-surface2: #19162e;
  --p-border:   rgba(255,255,255,0.06);
  --p-brand:    #c084fc;
  --p-brand-bg: rgba(192,132,252,0.10);
  --p-green:    #4ade80;
  --p-text:     #ede9fe;
  --p-muted:    #6b6b8a;
  --p-logo-ink: #08070f;
}

/* ── forest  (verde-escuro) ──
   Para quem prefere um visual mais "terminal/matrix". */
[data-portal-theme="forest"] {
  --p-bg:       #050d0a;
  --p-surface:  #0c1f19;
  --p-surface2: #122a22;
  --p-border:   rgba(255,255,255,0.07);
  --p-brand:    #34d399;
  --p-brand-bg: rgba(52,211,153,0.10);
  --p-green:    #86efac;
  --p-text:     #ecfdf5;
  --p-muted:    #5a7a6e;
  --p-logo-ink: #050d0a;
}

/* ── warm  (carvão-âmbar) ──
   Tons quentes, cansativo para os olhos por menos tempo. */
[data-portal-theme="warm"] {
  --p-bg:       #0f0c08;
  --p-surface:  #1c1610;
  --p-surface2: #262018;
  --p-border:   rgba(255,255,255,0.07);
  --p-brand:    #fbbf24;
  --p-brand-bg: rgba(251,191,36,0.10);
  --p-green:    #a3e635;
  --p-text:     #fef3c7;
  --p-muted:    #7a6a4a;
  --p-logo-ink: #0f0c08;
}

/* ── cyber  (SosDados Blue/Teal intenso) ──
  Variação vibrante da identidade atual para interfaces com maior contraste. */
[data-portal-theme="cyber"] {
  --p-bg:          #020d07;
  --p-surface:     #06180e;
  --p-surface2:    #0a2217;
  --p-border:      rgba(0,230,118,0.12);
  --p-border2:     rgba(0,230,118,0.20);
  --p-brand:       #00e676;
  --p-brand2:      #00b85c;
  --p-brand-bg:    rgba(0,230,118,0.10);
  --p-brand-glow:  0 0 20px rgba(0,230,118,0.25);
  --p-green:       #4ade80;
  --p-green-bg:    rgba(74,222,128,0.10);
  --p-text:        #e8fff3;
  --p-text2:       #b8e8d0;
  --p-muted:       #3a7a58;
  --p-muted2:      #5a9a78;
  --p-logo-ink:    #020d07;
  --p-shadow:      0 4px 24px rgba(0,0,0,0.65);
  --p-shadow-lg:   0 8px 40px rgba(0,0,0,0.75);
  --p-shadow-glow: 0 4px 24px rgba(0,230,118,0.20);
}

/* ── emerald  (SosDados Teal corporativo) ──
  Variação mais sóbria da identidade atual para contextos administrativos. */
[data-portal-theme="emerald"] {
  --p-bg:          #030f0b;
  --p-surface:     #081a14;
  --p-surface2:    #0d241c;
  --p-border:      rgba(16,185,129,0.12);
  --p-border2:     rgba(16,185,129,0.20);
  --p-brand:       #10b981;
  --p-brand2:      #059669;
  --p-brand-bg:    rgba(16,185,129,0.10);
  --p-brand-glow:  0 0 20px rgba(16,185,129,0.25);
  --p-green:       #34d399;
  --p-green-bg:    rgba(52,211,153,0.10);
  --p-text:        #e0fff5;
  --p-text2:       #a8d9c0;
  --p-muted:       #2d6a50;
  --p-muted2:      #4a8a6a;
  --p-logo-ink:    #030f0b;
  --p-shadow:      0 4px 24px rgba(0,0,0,0.65);
  --p-shadow-lg:   0 8px 40px rgba(0,0,0,0.75);
  --p-shadow-glow: 0 4px 24px rgba(16,185,129,0.20);
}

/* ── Ajustes de componentes que usam cores fixas ──
   Garante que o active-state da sidebar use o brand correto. */
[data-portal-theme] .p-nav-item:hover {
  border-left-color: var(--p-brand);
}
[data-portal-theme] .p-nav-item.active {
  color: var(--p-brand);
  background: var(--p-brand-bg);
  border-left-color: var(--p-brand);
}
[data-portal-theme] .p-sidebar-logo {
  background: linear-gradient(135deg, var(--p-brand), var(--p-green));
  color: var(--p-logo-ink);
}

/* ═══════════════════════════════════════════════
   MODO CLARO – sobrepõe bg/surface/texto, mantém
   as cores de acento de cada tema.
   ══════════════════════════════════════════════ */
body.mode-light {
  --p-bg:       #f1f4f9;
  --p-surface:  #ffffff;
  --p-surface2: #e8edf4;
  --p-border:   rgba(0,0,0,0.10);
  --p-text:     #111827;
  --p-muted:    #64748b;
  --p-shadow:   0 4px 24px rgba(0,0,0,0.10);
}

/* Ajusta o acento de cada tema para ter contraste suficiente no fundo claro */
body.mode-light[data-portal-theme="dark-blue"] {
  --p-brand:    #0099cc;
  --p-brand-bg: rgba(0,153,204,0.10);
  --p-green:    #059669;
  --p-logo-ink: #ffffff;
}
body.mode-light[data-portal-theme="slate"] {
  --p-brand:    #4f46e5;
  --p-brand-bg: rgba(79,70,229,0.10);
  --p-green:    #059669;
  --p-logo-ink: #ffffff;
}
body.mode-light[data-portal-theme="midnight"] {
  --p-brand:    #7c3aed;
  --p-brand-bg: rgba(124,58,237,0.10);
  --p-green:    #16a34a;
  --p-logo-ink: #ffffff;
}
body.mode-light[data-portal-theme="forest"] {
  --p-brand:    #047857;
  --p-brand-bg: rgba(4,120,87,0.10);
  --p-green:    #15803d;
  --p-logo-ink: #ffffff;
}
body.mode-light[data-portal-theme="warm"] {
  --p-brand:    #b45309;
  --p-brand-bg: rgba(180,83,9,0.10);
  --p-green:    #4d7c0f;
  --p-logo-ink: #ffffff;
}
body.mode-light[data-portal-theme="cyber"] {
  --p-brand:    #00915e;
  --p-brand-bg: rgba(0,145,94,0.10);
  --p-green:    #059669;
  --p-logo-ink: #ffffff;
}
body.mode-light[data-portal-theme="emerald"] {
  --p-brand:    #047857;
  --p-brand-bg: rgba(4,120,87,0.10);
  --p-green:    #065f46;
  --p-logo-ink: #ffffff;
}

/* Hover de nav precisa de sombra escura no fundo claro */
body.mode-light .p-nav-item:hover {
  background: rgba(0,0,0,0.05);
}
body.mode-light .p-nav-item.active {
  background: var(--p-brand-bg);
}
body.mode-light .p-client-nav a:hover,
body.mode-light .p-client-nav a.active {
  background: rgba(0,0,0,0.06);
}

/* Badge text adapta ao fundo claro */
body.mode-light .badge-ok    { color: #059669; }
body.mode-light .badge-warn  { color: #b45309; }
body.mode-light .badge-danger { color: #dc2626; }
body.mode-light .badge-muted { color: #475569; }

/* Botão primário: texto escuro sobre acento colorido (ok em todos os temas) */
body.mode-light .p-btn-primary,
body.mode-light .p-btn-green {
  color: #ffffff;
}

/* Seletor de temas – painel flutuante */
.p-theme-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--p-border);
  color: var(--p-muted);
  border-radius: 6px;
  padding: 0.3rem 0.65rem;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.p-theme-btn:hover {
  color: var(--p-text);
  border-color: var(--p-brand);
}
.p-theme-btn svg { flex-shrink: 0; }

.p-theme-panel {
  position: absolute;
  right: 1.5rem;
  top: calc(var(--p-topbar-h) + 8px);
  background: var(--p-surface2);
  border: 1px solid var(--p-border);
  border-radius: 10px;
  padding: 1rem;
  z-index: 200;
  min-width: 260px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none;
}
.p-theme-panel.open { display: block; }

.p-theme-panel h3 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--p-muted);
  margin-bottom: 0.75rem;
}

.p-theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.p-theme-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.7rem;
  border-radius: 7px;
  border: 2px solid transparent;
  cursor: pointer;
  background: var(--p-surface);
  transition: border-color 0.15s ease;
  font-size: 0.82rem;
  color: var(--p-text);
  font-family: inherit;
  width: 100%;
  text-align: left;
}
.p-theme-swatch:hover { border-color: var(--p-border); filter: brightness(1.15); }
.p-theme-swatch.selected { border-color: var(--p-brand); }

.p-theme-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.12);
}