/* © 2026 bladept696 — Centro de Comando / Hash Commander. Todos os direitos reservados.
   é proibido copiar, modificar, redistribuir ou publicar este ficheiro, no todo ou em parte, sem autorização escrita do autor.
   https://github.com/bladept696/centro-de-comando-v3 */
  /* --- Organização por grupos + animação de abertura ---------------------
     O menu de navegação estava com 18 abas soltas, sem qualquer ordem
     visual. Agora ficam agrupadas por categoria (rótulo com linha
     degradê), e cada botão "desliza" para dentro com um pequeno atraso
     em cascata quando o menu abre, para o painel parecer mais vivo. */
  .nav-menu-group-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 8px 4px 3px;
    padding: 0;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    opacity: .85;
    user-select: none;
  }
  .nav-menu-group-label:first-child { margin-top: 2px; }
  .nav-menu-group-icon {
    font-size: 11px;
    filter: saturate(0.6);
  }
  .nav-menu-group-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--line-strong), transparent);
  }

  @keyframes navItemPopIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  .nav-menu.open .nav-menu-dropdown .tab-btn,
  .nav-menu.open .nav-menu-dropdown .nav-menu-group-label {
    animation: navItemPopIn 0.32s cubic-bezier(.2,.8,.3,1) both;
  }
  .nav-menu-dropdown button:nth-of-type(1)  { animation-delay: 0.01s; }
  .nav-menu-dropdown button:nth-of-type(2)  { animation-delay: 0.03s; }
  .nav-menu-dropdown button:nth-of-type(3)  { animation-delay: 0.05s; }
  .nav-menu-dropdown button:nth-of-type(4)  { animation-delay: 0.07s; }
  .nav-menu-dropdown button:nth-of-type(5)  { animation-delay: 0.09s; }
  .nav-menu-dropdown button:nth-of-type(6)  { animation-delay: 0.11s; }
  .nav-menu-dropdown button:nth-of-type(7)  { animation-delay: 0.13s; }
  .nav-menu-dropdown button:nth-of-type(8)  { animation-delay: 0.15s; }
  .nav-menu-dropdown button:nth-of-type(9)  { animation-delay: 0.17s; }
  .nav-menu-dropdown button:nth-of-type(10) { animation-delay: 0.19s; }
  .nav-menu-dropdown button:nth-of-type(11) { animation-delay: 0.21s; }
  .nav-menu-dropdown button:nth-of-type(12) { animation-delay: 0.23s; }
  .nav-menu-dropdown button:nth-of-type(13) { animation-delay: 0.25s; }
  .nav-menu-dropdown button:nth-of-type(14) { animation-delay: 0.27s; }
  .nav-menu-dropdown button:nth-of-type(15) { animation-delay: 0.29s; }
  .nav-menu-dropdown button:nth-of-type(16) { animation-delay: 0.31s; }
  .nav-menu-dropdown button:nth-of-type(17) { animation-delay: 0.33s; }
  .nav-menu-dropdown button:nth-of-type(18) { animation-delay: 0.35s; }
  .nav-menu-dropdown div:nth-of-type(1) { animation-delay: 0s; }
  .nav-menu-dropdown div:nth-of-type(2) { animation-delay: 0.07s; }
  .nav-menu-dropdown div:nth-of-type(3) { animation-delay: 0.15s; }
  .nav-menu-dropdown div:nth-of-type(4) { animation-delay: 0.23s; }
  .nav-menu-dropdown div:nth-of-type(5) { animation-delay: 0.29s; }

  /* Indicador de aba ativa mais vivo: barrinha degradê a "respirar" à
     esquerda do botão selecionado, em vez do simples fundo estático. */
  .tab-btn.active { position: relative; }
  .tab-btn.active::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 15%;
    bottom: 15%;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--green), transparent, var(--green));
    background-size: 100% 200%;
    animation: navActiveGlow 1.8s ease-in-out infinite;
  }
  .tab-btn.amber-tab.active::before { background: linear-gradient(180deg, var(--amber), transparent, var(--amber)); background-size: 100% 200%; }
  .tab-btn.cyan-tab.active::before { background: linear-gradient(180deg, var(--cyan), transparent, var(--cyan)); background-size: 100% 200%; }
  @keyframes navActiveGlow {
    0%, 100% { background-position: 0 0%; }
    50% { background-position: 0 100%; }
  }

  /* Sweep subtil de brilho ao passar o rato num item do menu. */
  .tab-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
    transform: translateX(-120%);
    pointer-events: none;
  }
  .tab-btn:hover::after { transform: translateX(120%); transition: transform 0.6s ease; }

  @media (prefers-reduced-motion: reduce) {
    .nav-menu.open .nav-menu-dropdown .tab-btn,
    .nav-menu.open .nav-menu-dropdown .nav-menu-group-label { animation: none; }
    .tab-btn.active::before { animation: none; }
    .tab-btn:hover::after { transition: none; transform: translateX(-120%); }
  }

  /* --- Barra lateral de navegação (ecrãs largos) -------------------------
     Em ecrãs >= 1180px o menu suspenso passa a ser uma barra lateral fixa,
     agrupada por secções (Painel, Desempenho, Rede e pool, Alertas,
     Ferramentas, Comunidade). Mantém os MESMOS botões, ícones animados,
     contadores e a função switchTab() — só muda o aspeto e a posição.
     Abaixo disso continua o menu suspenso de antes. */
  @media (min-width: 1180px) {
    body:not(.kiosk-active) { padding-left: 254px; }
    html body .nav-menu {
      position: fixed; left: 0; top: 0; bottom: 0; width: 232px;
      padding: 14px 10px 18px; z-index: 60;
      background: var(--deep, #09141e);
      border-right: 1px solid var(--line-strong); border-bottom: none;
      overflow-y: auto; scrollbar-width: thin;
    }
    html body .nav-menu .nav-menu-btn { display: none; }
    html body .nav-menu .nav-menu-dropdown {
      display: flex; position: static; max-width: none; max-height: none;
      padding: 0; gap: 1px; border: none; border-radius: 0;
      background: transparent; box-shadow: none;
      backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible;
    }
    .nav-menu .nav-menu-group-label {
      margin: 16px 8px 5px; font-size: 11px; font-weight: 500;
      letter-spacing: 0; text-transform: none; opacity: 1;
    }
    .nav-menu .nav-menu-group-label:first-child { margin-top: 2px; }
    .nav-menu .nav-menu-group-label::after,
    .nav-menu .nav-menu-group-icon { display: none; }
    .nav-menu .tab-btn {
      padding: 7px 10px; font-size: 12.5px; font-weight: 500;
      letter-spacing: 0; line-height: 1.25; gap: 10px; color: #b9d0d8;
    }
    .nav-menu .tab-btn:hover { color: var(--text); background: #0f1e2c; }
    .nav-menu .tab-btn .tab-icon { width: 20px; text-align: center; font-size: 15px; flex: 0 0 20px; }
    .nav-menu .tab-btn .icon-parasite-mite { height: 16px; }
    .nav-menu .tab-btn .power-status-dot { position: absolute; left: 4px; top: 50%; margin: -3px 0 0; width: 6px; height: 6px; }
    .nav-menu .tab-btn { min-height: 34px; }
    .nav-menu .tab-btn.active { color: var(--cyan); background: #12303d; background: color-mix(in srgb, var(--cyan) 16%, transparent); }
    .nav-menu .tab-btn.amber-tab.active { color: var(--amber); background: #2b220d; }
    .nav-menu .tab-btn.cyan-tab.active { color: var(--cyan); background: #0d2530; }
    .nav-menu .tab-btn.active::before { background: linear-gradient(180deg, var(--cyan), transparent, var(--cyan)); background-size: 100% 200%; }
    .nav-menu .tab-btn.amber-tab.active::before { background: linear-gradient(180deg, var(--amber), transparent, var(--amber)); background-size: 100% 200%; }
  }

  /* --- Ecrã da máquina: réplica do LCD/OLED físico dentro do cartão ------- */