/* ============================================================================
   Betel Roteadores - tema "glass escuro"
   Extraido/adaptado de designer-references/core-developer-56.aura.build
   (paleta, gradiente do CTA, glows, animacoes de entrada, scrollbar, shimmer).
   NAO portado desse material: Iconify (dependeria de API externa), as ~22
   fontes extras do Google (kitchen-sink do snapshot, nao um design deliberado),
   o script de firewall do Supabase e o UnicornStudio (amarrado a conta deles).
   Usamos so a fonte Inter, via Google Fonts (link no <head> de cada pagina).

   Carregar DEPOIS do <style> proprio de cada pagina: redefine as variaveis
   (a maioria das regras ja usa var(--xxx) e herda automaticamente) e sobrepoe
   o pequeno conjunto de regras que tinha cor fixa em hex.
   ============================================================================ */

:root {
  --bg: #030303;
  --panel: rgba(22, 22, 23, 0.72);
  --panel-strong: rgba(16, 16, 17, 0.92);
  --panel-soft: rgba(255, 255, 255, 0.03);
  --ink: #f4f4f5;
  --muted: #9a9a9d;
  --muted-2: #6b6b6e;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --accent: #fbbf24;
  --accent-hover: #fcd34d;
  --accent-ink: #17130a;
  --accent-2: #1b1b1c;
  --accent-soft: rgba(251, 191, 36, 0.14);
  --accent-glow: rgba(251, 191, 36, 0.28);
  --success: #34d399;
  --warn: #f59e0b;
  --danger: #f87171;
}

* {
  scrollbar-color: #333336 #0a0a0a;
}

/* body[data-router-theme="huawei"|"intelbras"] troca a pagina para um tema
   CLARO de proposito (para combinar com a UI nativa daquele fabricante ao
   mostrar as abas do roteador). Isso e um recurso ja validado e INTOCADO
   aqui: todo override abaixo que poderia colidir com essas cores fica
   restrito a "body:not([data-router-theme])". */
body {
  font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
  color: var(--ink);
}

body:not([data-router-theme]) {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05) 0, transparent 26%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.03) 0, transparent 30%),
    linear-gradient(135deg, #050505 0%, #030303 58%, #000000 100%) !important;
}

/* --- Scrollbar customizada --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #2b2b2e; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #414144; }

/* --- Fundo ambiente ---------------------------------------------------------
   Camada base = copia fiel do background CSS da referencia aura.build
   (glow atmosferico + 2 padroes de interferencia + streak + ruido + vinheta).
   O orbe/corona brilhante nao e CSS na referencia: e um shader WebGL do
   UnicornStudio (projeto hRFfUymDGOHwtFe7evR2). Ele agora roda a partir de
   /vendor/unicorn (lib + cena + texturas hospedadas localmente) via
   core/unicornBg.js. As classes .ambient-orb/.ambient-rays abaixo sao apenas
   FALLBACK, exibidas so quando o WebGL nao esta disponivel (body.no-unicorn). */
@keyframes betel-pulse {
  0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.6; transform: translateX(-50%) scale(1.05); }
}
@keyframes betel-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes betel-rotate-rev {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes betel-drift {
  0% { transform: translateX(-10%) translateY(0) rotate(-5deg); opacity: 0.3; }
  50% { transform: translateX(10%) translateY(2%) rotate(-5deg); opacity: 0.5; }
  100% { transform: translateX(-10%) translateY(0) rotate(-5deg); opacity: 0.3; }
}
@keyframes betel-halo {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
}
@keyframes betel-orbit {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes betel-orbit-rev {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

.ambient-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background: #030303;
}
/* Camada WebGL do UnicornStudio (montada por core/unicornBg.js) fica logo
   acima da camada CSS, ainda atras de todo o conteudo. */
#unicornBg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
#unicornBg canvas { display: block; width: 100% !important; height: 100% !important; }

/* Nao renderiza o fundo escuro sobre os temas claros por firmware */
body[data-router-theme] .ambient-bg,
body[data-router-theme] #unicornBg { display: none; }

/* Brilho atmosferico no topo (fonte de luz) — identico a referencia */
.ambient-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120vw;
  height: 80vh;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  animation: betel-pulse 8s ease-in-out infinite;
}

/* Padrao de interferencia rotativo (duas camadas, uma reversa) */
.ambient-interference {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255, 255, 255, 0.01) 60deg, transparent 120deg);
  opacity: 0.3;
  animation: betel-rotate 120s linear infinite;
}
.ambient-interference.rev {
  opacity: 0.2;
  animation: betel-rotate-rev 150s linear infinite;
}

/* Vazamento horizontal de luz na parte de baixo */
.ambient-streak {
  position: absolute;
  bottom: 10%;
  left: -20%;
  width: 140%;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.02) 0%, transparent 70%);
  transform: rotate(-5deg);
  animation: betel-drift 20s ease-in-out infinite;
}

/* Grao/ruido sutil para dar textura (feTurbulence inline, sem CDN) */
.ambient-noise {
  position: absolute;
  inset: 0;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Vinheta para focar o centro */
.ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 0%, #030303 100%);
}

/* --- Fallback do orbe (so quando nao ha WebGL: body.no-unicorn) --- */
.ambient-orb,
.ambient-rays { display: none; }

body.no-unicorn .ambient-orb {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(680px, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(3, 3, 3, 0) 33%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(255, 255, 255, 0.55) 46%,
    rgba(255, 255, 255, 0.95) 48%,
    rgba(255, 255, 255, 0.45) 51%,
    rgba(255, 255, 255, 0.08) 60%,
    rgba(255, 255, 255, 0) 74%);
  filter: blur(5px);
  animation: betel-halo 9s ease-in-out infinite;
}
body.no-unicorn .ambient-rays {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 96vw);
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%,
    transparent 0deg, rgba(255, 255, 255, 0.06) 18deg, transparent 40deg,
    transparent 78deg, rgba(255, 255, 255, 0.04) 98deg, transparent 120deg,
    transparent 168deg, rgba(255, 255, 255, 0.05) 190deg, transparent 214deg,
    transparent 260deg, rgba(255, 255, 255, 0.04) 282deg, transparent 306deg,
    transparent 340deg, rgba(255, 255, 255, 0.05) 352deg, transparent 360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 30%, #000 46%, transparent 78%);
  mask: radial-gradient(circle at center, transparent 30%, #000 46%, transparent 78%);
  animation: betel-orbit 90s linear infinite;
}

/* --- Animacoes de entrada --- */
@keyframes betel-reveal-up {
  0% { opacity: 0; transform: translateY(14px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes betel-word-reveal {
  0% { opacity: 0; transform: translateY(8px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes betel-panel-enter {
  0% { opacity: 0; transform: translateY(16px) scale(0.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.animate-reveal {
  animation: betel-reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
.animate-word {
  animation: betel-word-reveal 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
  display: inline-block;
}
.animate-panel {
  animation: betel-panel-enter 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  opacity: 0;
}
.delay-0 { animation-delay: 0ms; }
.delay-100 { animation-delay: 100ms; }
.delay-150 { animation-delay: 150ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }

/* --- Shimmer de carregamento (skeleton) --- */
@keyframes betel-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  position: relative;
  color: transparent !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
  background-size: 200% 100%;
  animation: betel-shimmer 1.5s infinite;
  border-radius: 10px;
  min-height: 1em;
}

/* ============================================================================
   Overrides pontuais (regras que tinham cor fixa em hex nas paginas atuais).
   O resto do app ja usa var(--xxx) e herda o tema so pela redefinicao acima.
   ============================================================================ */

.sidebar {
  background: rgba(10, 10, 11, 0.6) !important;
  border-right: 1px solid var(--line) !important;
  backdrop-filter: blur(10px);
}

.kpi-button {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

.kpi-button:hover {
  border-color: var(--line-strong) !important;
}

.kpi-button.active {
  background: linear-gradient(180deg, rgba(251, 191, 36, 0.12), rgba(251, 191, 36, 0.04)) !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
}

.kpi-gear {
  background: rgba(255, 255, 255, 0.08) !important;
}

.sidebar-title span,
.kpi-group h3,
.section-title {
  color: var(--muted-2) !important;
}

/* .summary-card e .inline-toggle recebem cor propria por firmware (huawei/
   intelbras, ver body[data-router-theme] no index.html) -- so aplicar nosso
   escuro fora desse contexto. */
body:not([data-router-theme]) .summary-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--line) !important;
}

body:not([data-router-theme]) .inline-toggle {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--line) !important;
}

.toggle,
.module-row {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--line) !important;
}

/* Reset base de botao (pill), valido em qualquer pagina que carregue este
   arquivo, mesmo sem um reset proprio (ex.: botoes renderizados via JS). */
button {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

button:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.45);
}

button:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
  box-shadow: none;
}

.primary {
  background: linear-gradient(180deg, var(--accent-hover), var(--accent)) !important;
  color: var(--accent-ink) !important;
  box-shadow: 0 10px 26px var(--accent-glow) !important;
}

.primary:hover:not(:disabled) {
  box-shadow: 0 14px 32px var(--accent-glow) !important;
}

.secondary {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
}

.secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1) !important;
}

.dark {
  background: var(--accent-2) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}

.danger {
  background: linear-gradient(180deg, #fca5a5, var(--danger)) !important;
  color: #2a0a0a !important;
  box-shadow: 0 10px 24px rgba(248, 113, 113, 0.25) !important;
}

/* Paineis de firmware (feature-card/feature-table) ficam dentro do contexto
   claro do vendor quando body[data-router-theme] esta ativo -- nao escurecer
   ali (ficaria destoante da UI nativa que estamos imitando ao redor). */
body:not([data-router-theme]) .feature-card {
  background: rgba(255, 255, 255, 0.03) !important;
}

body:not([data-router-theme]) .feature-table th {
  background: rgba(255, 255, 255, 0.05) !important;
}

.progress-modal {
  background: linear-gradient(180deg, rgba(20, 20, 21, 0.98), rgba(12, 12, 13, 0.98)) !important;
}

.progress-bar-wrap {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.4) !important;
}

.progress-bar {
  background: linear-gradient(90deg, var(--warn), var(--accent)) !important;
}

.progress-notes {
  background: rgba(255, 255, 255, 0.04) !important;
}

/* .badge.ok/.info tem cor propria por firmware; .warn segue junto por
   consistencia visual dentro do mesmo painel. */
body:not([data-router-theme]) .badge.ok {
  background: rgba(52, 211, 153, 0.14) !important;
}

body:not([data-router-theme]) .badge.warn {
  background: rgba(245, 158, 11, 0.14) !important;
}

body:not([data-router-theme]) .badge.info {
  background: rgba(255, 255, 255, 0.06) !important;
  color: var(--muted) !important;
}

/* Campos dentro de um painel de firmware ficam no estilo claro do vendor;
   fora desse contexto, usamos o tema escuro do nosso proprio chrome. */
body:not([data-router-theme]) input,
body:not([data-router-theme]) select {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--line-strong) !important;
  color: var(--ink) !important;
}

body:not([data-router-theme]) input::placeholder {
  color: var(--muted-2);
}

body:not([data-router-theme]) input:focus,
body:not([data-router-theme]) select:focus {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

body:not([data-router-theme]) input[disabled] {
  background: rgba(255, 255, 255, 0.02) !important;
  color: var(--muted-2) !important;
}

.status-dot.online {
  background: var(--success) !important;
  box-shadow: 0 0 6px rgba(52, 211, 153, 0.6) !important;
}

.status-dot.offline {
  background: var(--danger) !important;
}

/* O iframe/webview embutida mostra a UI nativa (clara) do proprio roteador;
   mantem fundo branco de proposito para nao piscar escuro antes de carregar. */
.router-browser-frame {
  background: #fff;
}
