/* Paleta "Padrão" (dark) é o tema default — aplicada direto no :root.
   [data-theme="light"] (setado via JS/localStorage em theme.js) sobrescreve
   pra virar a paleta "Lightmode". Ver static/js/theme.js pro toggle. */
:root {
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;
  --bg: #0E1013;
  --bg-inset: #0A0C10;
  --navbar-bg: #15181D;
  /* Fundo "afundado" da area de conteudo/sidebar (redesign): mais escuro que
     --surface (onde os cards "flutuam" por cima), mas nao tao escuro quanto
     --bg-inset (reservado pro fundo do card de login). */
  --content-bg: #0E1013;
  --sidebar-bg: #15181D;
  --sidebar-active-bg: #1B1F26;
  --surface: #15181D;
  --surface-alt: #1B1F26;
  --border: #23272F;
  --border-strong: #30363F;
  --text: #E7EAEF;
  --text-muted: #E7EAEF;
  --amber: #BF9004;        /* ouro médio -- so sobrevive pro status "warning", ver comentario abaixo */
  --amber-dark: #A66D03;   /* ouro escuro */
  --g-amber: linear-gradient(90deg, #F2E205, #F2CB05, #BF9004, #A66D03);
  --g-amber-135: linear-gradient(135deg, #F2E205, #F2CB05, #BF9004, #A66D03);
  /* Azul (mesmo tom do --navbar-bg abaixo) é a cor de destaque -- pedido
     explícito do usuário pra bater com o print de referência, mesmo o logo
     Vettore sendo dourado. O dourado (--amber) continua existindo só pro
     status "warning"/"confirmando atualização", não é mais usado como
     destaque de UI (botões, links, aba ativa etc.). */
  --accent: #3D7BF0;
  --accent-text: #ffffff;
  --accent-soft: rgba(61, 123, 240, 0.14);
  --status-online: #43B36B;
  --status-online-bg: rgba(67, 179, 107, 0.14);
  --status-warning: var(--amber);
  --status-warning-bg: rgba(191, 144, 4, 0.15);
  --status-offline: #696969;
  --status-offline-bg: rgba(105, 105, 105, 0.25);
  --input-bg: #1B1F26;
  --shadow: none;
  /* Sem faixa colorida embaixo da topbar -- fazia sentido só enquanto o
     destaque da UI era o dourado da marca; com o destaque agora azul (igual
     ao próprio --navbar-bg), a faixa ficaria redundante/apagada. */
  --nav-border-bottom: none;
  /* --surface-alt é escura demais aqui (perto de --surface) pra servir de
     fundo dos slots vazios de Salas — usa branco translúcido em vez disso,
     só nesse tema, pra garantir contraste real contra o card da sala. */
  --slot-bg: rgba(255, 255, 255, 0.07);
  --slot-border: rgba(255, 255, 255, 0.35);
  /* --border-strong (#2a3450) é sutil demais pra servir de borda de botão —
     pensada pra divisor de card/tabela, não pra dar affordance de "isto é
     clicável" contra um fundo já escuro. Mesmo truque do --slot-border
     acima (branco translúcido) pros botões outline-secondary. */
  --btn-outline-border: rgba(255, 255, 255, 0.4);
  --btn-outline-hover-bg: rgba(255, 255, 255, 0.14);
  --pre-bg: #1B1F26;
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #f4f5f7;
  --bg-inset: #0000CD;
  --navbar-bg: var(--bg-inset);
  --content-bg: #eef0f4;
  --sidebar-bg: #ffffff;
  --sidebar-active-bg: rgba(0, 0, 205, 0.08);
  --surface: #ffffff;
  --surface-alt: #dcdde0;
  /* Mais escuras que antes (#e2e2e2/#c7c9cf) -- o redesign flat tirou a
     sombra dos cards (--shadow: none no dark, e mesmo no light a sombra
     sozinha já não separava bem card/input/sala do fundo), então a borda
     virou a única pista visual de contorno e precisava de mais contraste.
     Pedido explícito do usuário: "deixa as bordas mais visíveis no modo
     claro". */
  --border: #cbced4;
  --border-strong: #a5aab3;
  --text: #0d0d0d;
  --text-muted: #696969;
  --accent: #0000CD;
  --accent-text: #ffffff;
  --accent-soft: rgba(0, 0, 205, 0.08);
  --status-online: #00a86b;
  --status-online-bg: rgba(0, 168, 107, 0.12);
  --status-warning: #b8860b;
  --status-warning-bg: rgba(184, 134, 11, 0.12);
  --status-offline: #696969;
  --status-offline-bg: rgba(105, 105, 105, 0.15);
  --input-bg: #ffffff;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  --nav-border-bottom: none;
  --slot-bg: var(--surface-alt);
  --slot-border: var(--border-strong);
  --btn-outline-border: var(--border-strong);
  --btn-outline-hover-bg: var(--border-strong);
  --pre-bg: var(--surface-alt);
  color-scheme: light;
}

html { background: var(--content-bg); }
body {
  background: var(--content-bg); min-height: 100vh; color: var(--text);
  font-family: var(--font-sans);
}

h1, h2, h3, h4, h5, h6, .btn, .navbar-brand { font-family: var(--font-sans); }

/* IBM Plex Mono só pra número/id/hash/data de verdade agora -- pedido do
   redesign de fonte, reverte a versão anterior que aplicava mono em toda
   célula de tabela (.table td/th), o que deixava até nome de app/regra em
   mono à toa. .mono fica disponível pra marcar caso a caso onde ainda faz
   sentido (id, hash, IP, etc.), sem precisar aplicar pra tabela inteira. */
code, .tag-font, .kpi-value, .mono {
  font-family: var(--font-mono);
}

/* --navbar-bg é separado de --bg-inset (que o login.css ainda usa sozinho)
   pra poder estilizar a navbar sem mudar o fundo da tela de login junto.
   A navbar continua sempre escura/saturada o bastante nos dois temas —
   por isso o texto dela é claro fixo, independente de var(--text) (cor do
   texto da PÁGINA, que inverte entre os temas). */
.navbar { background: var(--navbar-bg) !important; border-bottom: var(--nav-border-bottom); }
.navbar-brand { color: #f0f1f5 !important; font-size: .92rem; font-weight: 600 !important; letter-spacing: .01em; }

.theme-toggle {
  background: transparent; border: 1px solid rgba(240, 241, 245, 0.28); color: #f0f1f5;
  border-radius: 5px; padding: .3rem .55rem; font-size: .85rem; line-height: 1; cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }

/* ---------------------------------------------------------------------
   Layout: topbar fina (so marca + toggle de tema) + sidebar lateral com
   a navegacao (era tudo dentro da navbar antes). Redesign pedido pelo
   usuario -- mockup em Downloads/"Monitor vetorizado para designs.zip".
   --------------------------------------------------------------------- */
.topbar { padding: 0; margin-bottom: 0; }
.topbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1.25rem;
}

.app-shell { display: flex; align-items: stretch; min-height: calc(100vh - 54px); }

.sidebar {
  flex: none; width: 220px; background: var(--sidebar-bg); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem 0.9rem;
}
.sidebar-nav { display: flex; flex-direction: column; gap: 0.15rem; }
/* Link inativo do menu: cor fraca de propósito (contraste com o ativo), mas
   #6E7783 sólido contra o fundo quase preto do sidebar (dark) e a mesma cor
   ainda em cima de opacity:.68 (light) ficavam abaixo do mínimo de leitura
   confortável -- usuário reportou "meio apagado, escondido" nos dois temas.
   Troca pra uma fração do próprio --text (em vez de um cinza solto sem
   ligação com o resto da paleta) e tira o opacity extra do light -- ainda
   claramente mais fraco que o link ativo, só que legível. */
.sidebar-link {
  display: block; padding: 0.5rem 0.7rem; border-radius: 5px; font-size: 0.86rem; font-weight: 400;
  color: rgba(231, 234, 239, 0.62); text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme="light"] .sidebar-link { color: var(--text-muted); }
.sidebar-link:hover { background: rgba(255,255,255,.03); color: var(--text); }
[data-theme="light"] .sidebar-link:hover { background: var(--accent-soft); }
.sidebar-link.active {
  background: var(--sidebar-active-bg); color: var(--text); font-weight: 600;
}
.sidebar-footer { display: flex; flex-direction: column; }
.sidebar-logout { color: #dc3545; }
.sidebar-logout:hover { background: rgba(220, 53, 69, 0.12); color: #dc3545; }

.app-main { flex: 1; min-width: 0; padding: 1.75rem 2rem; max-width: 1200px; }

@media (max-width: 991.98px) {
  .app-shell { flex-direction: column; min-height: 0; }
  .sidebar {
    width: 100%; border-right: none; border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
  }
  .app-main { padding: 1.25rem; max-width: none; }
}

/* Bootstrap desenha o icone do hamburguer escuro por padrao (pensado pra
   fundo claro) -- some contra o fundo escuro da navbar nos dois temas,
   ja que a navbar em si nunca muda de cor (ver comentario acima sobre
   --navbar-bg). Troca pro traco claro, igual a cor do texto dos links. */
.navbar-toggler {
  border-color: rgba(240, 241, 245, 0.35);
}
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(240, 241, 245, 0.25); }
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28240, 241, 245, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.card { background: var(--surface); border: 1px solid var(--border); color: var(--text); box-shadow: none; border-radius: 6px; }

/* Bootstrap não tema .list-group-item sozinho (fundo branco/texto preto
   fixos por padrão) -- usado nas listas "Sites/Apps bloqueados" (regras.html)
   e "Scripts remotos" (suporte.html), sempre dentro de um .card, então
   fundo transparente deixa o fundo do próprio .card aparecer. */
.list-group-item {
  background: transparent; color: var(--text); border-color: var(--border);
}

/* Titulo de pagina (<h4> logo no topo de cada tela) e titulo de card
   (<h6>, primeira coisa dentro de cada .card) -- maiuscula, letter-spacing,
   tom apagado, redesign pedido pelo usuario. Regra generica em vez de
   editar cada template: os dois padroes (h4 solto no topo do conteudo,
   h6 dentro de .card) ja eram 100% consistentes em todas as paginas antes
   dessa mudanca. Titulo de modal fica de fora (nao faz parte do redesign,
   e maiuscula+apagado ficaria estranho num header de modal). */
.app-main h4, .card h6:not(.modal-title) {
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  color: var(--text-muted); font-size: 0.8rem;
}
.app-main h4 { font-size: 0.85rem; margin-bottom: 1.25rem; }

/* Botões: padrão Bootstrap normal nos dois temas agora (preenchido na cor
   de destaque, outline esvaziado até o hover) -- o invert branco-no-repouso
   só existia pra combinar com o destaque dourado do tema dark antigo; com
   --accent virando azul nos dois temas, dá pra usar a mesma regra única. */
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover, .btn-primary:focus { background: var(--accent); border-color: var(--accent); color: var(--accent-text); filter: brightness(1.1); }
.btn-outline-primary { background: transparent; border-color: var(--accent); color: var(--accent); }
.btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

/* .btn-outline-secondary do Bootstrap usa cinza médio fixo — quase invisível
   contra o fundo escuro (--surface). Troca pras variáveis do tema, igual já
   acontece com .btn-outline-primary; como usa var(), adapta sozinho pros
   dois temas sem precisar de bloco [data-theme="light"] separado. */
.btn-outline-secondary {
  color: var(--text); border-color: var(--btn-outline-border); background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  color: var(--text); background: var(--btn-outline-hover-bg); border-color: var(--btn-outline-border);
}

/* .bg-body-secondary do Bootstrap (usado nos <pre> de resultado de
   script/desinstalação) também não é integrado com o data-theme deste
   projeto — sempre sai claro, texto quase ilegível em cima de fundo
   escuro. Mesmo raciocínio do resto do arquivo: reescreve com var(). */
.bg-body-secondary {
  background-color: var(--pre-bg) !important; color: var(--text);
}

.btn-power {
  width: 2rem; height: 2rem; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem; line-height: 1;
}

/* .btn-outline-warning: usado em ações "mais drásticas que o normal" (ex.:
   Forçar remoção de programa) — reaproveita a cor de status "warning" já
   usada no resto do painel em vez do amarelo cru padrão do Bootstrap. */
.btn-outline-warning {
  color: var(--status-warning); border-color: var(--status-warning); background: transparent;
}
.btn-outline-warning:hover, .btn-outline-warning:focus {
  color: var(--accent-text); background: var(--status-warning); border-color: var(--status-warning);
}

/* Toggle verde/vermelho (Ativado/Desativado) — página de Suporte (Bloquear
   instaladores, Nível Especial). Continua sendo o <button type=submit> do
   form existente (POST faz o toggle de verdade, sem JS aqui) — só o visual
   virou "pill" com bolinha deslizante em vez de btn-success/outline-secondary. */
.toggle-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 92px; height: 26px; border-radius: 999px; border: none;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; color: #ffffff; cursor: pointer;
}
.toggle-switch.toggle-on { background: var(--status-online); justify-content: flex-start; padding: 0 26px 0 10px; }
.toggle-switch.toggle-off { background: #dc3545; justify-content: flex-end; padding: 0 10px 0 26px; }
.toggle-switch .toggle-knob {
  position: absolute; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #ffffff;
}
.toggle-switch.toggle-on .toggle-knob { right: 3px; }
.toggle-switch.toggle-off .toggle-knob { left: 3px; }

.form-control, .form-select { background: var(--input-bg); border-color: var(--border); color: var(--text); }
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E7783' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .65rem center; background-size: 15px;
  border-width: 1px; cursor: pointer; padding-right: 2rem;
  transition: border-color .12s, background-color .12s;
}
[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6472' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.form-select:hover { border-color: var(--border-strong); background-color: var(--surface-alt); }
.form-select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D7BF0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.form-control:focus, .form-select:focus { background: var(--input-bg); color: var(--text); border-color: var(--accent); box-shadow: none; }
.form-control::placeholder { color: var(--text-muted); opacity: 1; }
.form-control:disabled, .form-select:disabled { background: var(--surface); color: var(--text-muted); }

.table { color: var(--text); }
.table > :not(caption) > * > * { background: transparent; color: var(--text); border-color: var(--border); }
.table-hover > tbody > tr:hover > * { background: var(--accent-soft); color: var(--text); }
thead.sticky-top, thead.sticky-top th { background: var(--surface) !important; }

/* Chip com contorno (fundo transparente + texto/borda na cor do status) em
   vez de pilula solida -- redesign pedido pelo usuario, visto na coluna de
   status de /versoes e no badge de status da pagina de detalhe do PC. */
.badge-online, .badge-warning, .badge-offline {
  background: transparent; border: 1px solid currentColor; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.68rem;
}
.badge-online { color: var(--status-online); }
.badge-warning { color: var(--status-warning); }
.badge-offline { color: var(--status-offline); }

.modal-content { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.modal-header, .modal-footer { border-color: var(--border); }
.btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
[data-theme="light"] .btn-close { filter: none; }

.text-muted { color: var(--text-muted) !important; }
hr { border-color: var(--border); opacity: 1; }
code { color: var(--accent); }
a { color: var(--accent); }

.app-main > .alert { background: var(--surface); border: 1px solid var(--border); color: var(--text); }