/* portal.css — tema Vancin */
:root {
  --topbar-bg: #1a1f2e;
  --topbar-h: 56px;
  --brand-red: #cf2e2e;
}

/* ── Topbar ──────────────────────────────────────────────────── */
#topbar {
  background: var(--topbar-bg);
  min-height: var(--topbar-h);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  border-bottom: 3px solid var(--bs-primary);
}

#topbar .nav-link {
  color: rgba(255,255,255,.75);
  font-size: .875rem;
  padding: .25rem .6rem;
  border-radius: .375rem;
  transition: background .15s, color .15s;
}
#topbar .nav-link:hover,
#topbar .nav-link.active {
  color: #fff;
  background: rgba(255,255,255,.12);
}

/* ── Login ───────────────────────────────────────────────────── */
#page-login {
  background: var(--login-bg, #111);
  min-height: 100vh;
}
.login-card {
  width: 400px;
  border-radius: 12px;
  overflow: hidden;
  border: none;
}
.login-header {
  background: var(--login-top, var(--topbar-bg));
  padding: 2rem 2rem 1.75rem;
}
.login-body {
  background: #fff;
  padding: 2rem;
}

/* ── App ─────────────────────────────────────────────────────── */
#app {
  min-height: calc(100vh - var(--topbar-h));
  background: #f0f2f5;
}

#page-content {
  max-width: 1280px;
  margin: 0 auto;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.card-header {
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  font-weight: 600;
}

/* ── Stat cards ──────────────────────────────────────────────── */
.stat-card {
  border-left: 4px solid var(--bs-primary);
}
.stat-card .stat-icon {
  font-size: 2rem;
  opacity: .2;
}
.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

/* ── Tables ──────────────────────────────────────────────────── */
.table thead th {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c757d;
  border-top: none;
}

/* ── Status badges ───────────────────────────────────────────── */
.badge-online  { background: #198754 !important; }
.badge-erro    { background: #fd7e14 !important; cursor: help; }
.badge-offline { background: #dc3545 !important; }
.badge-warn    { background: #ffc107 !important; color:#212529 !important; }

/* ── Sidebar (admin pages) ───────────────────────────────────── */
.admin-sidebar .list-group-item.active {
  background: var(--bs-primary);
  border-color: var(--bs-primary);
}

/* ── Dark mode ───────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bs-body-bg: #121212;
    --bs-body-color: #e0e0e0;
  }
  :root:not([data-theme="light"]) #app {
    background: #1a1a1a;
  }
  :root:not([data-theme="light"]) .card {
    background: #1e1e1e;
    color: #e0e0e0;
  }
}

/* Logo — tamanho sempre fixo, sem esticar */
#topbar .navbar-brand { flex: 0 0 auto; padding: 0; }
#topbar #brand-logo { height: 28px; max-height: 28px; width: auto; max-width: 160px; object-fit: contain; display: block; }

/* Nav links desktop */
#topbar .navbar-nav .nav-link { white-space: nowrap; }
/* navbar sem navbar-expand deixa o dropdown estático e ele estica a barra; no desktop ele flutua */
#main-nav-desktop .dropdown-menu { position: absolute; z-index: 1050; }
#topbar .js-user-name { white-space: nowrap; max-width: 130px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }

/* ── Offcanvas lateral ───────────────────────────────────── */
#navOffcanvas { background: var(--topbar-bg); }
#navOffcanvas .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,.1); }
#navOffcanvas #oc-actions { border-top: 1px solid rgba(255,255,255,.1); }
#navOffcanvas .nav-link { color: rgba(255,255,255,.8); padding: .5rem .25rem; }
#navOffcanvas .nav-link:hover, #navOffcanvas .nav-link.active { color: #fff; background: rgba(255,255,255,.1); border-radius: .375rem; }
#navOffcanvas .nav-item { border-bottom: 1px solid rgba(255,255,255,.05); }
#navOffcanvas .dropdown-menu { position: static !important; background: rgba(255,255,255,.05); border: none; width: 100%; }
#navOffcanvas .dropdown-item { color: rgba(255,255,255,.8); }
#navOffcanvas .dropdown-item:hover { background: rgba(255,255,255,.1); color: #fff; }

/* Valores — sidebar vertical vira barra horizontal em mobile */
@media (max-width: 767.98px) {
  .valores-layout { flex-direction: column !important; min-height: unset !important; }
  .valores-sidebar { width: 100% !important; }
  .valores-sidebar .card { border-radius: 0 !important; border-end: none !important; }
  .valores-sidebar-label { display: none; }
  .valores-sidebar-body { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; padding: .5rem !important; gap: .25rem; }
  .valores-sidebar-body .btn { width: auto !important; white-space: nowrap; flex-shrink: 0; }
}

/* Guias — os artigos (guias.js) usam as variáveis de cor do portal antigo */
.guia-artigo { --bg:#f8f9fa; --border:#dee2e6; --muted:#6c757d; --primary:var(--bs-primary); line-height:1.8; font-size:.875rem; }
.guia-artigo h3 { font-size:1rem; font-weight:600; }

/* Hotspot — script da RouterBoard e prévia da página de login */
.hs-script { background:#0f172a; color:#e2e8f0; padding:.75rem; border-radius:.5rem; font-size:.75rem; max-height:360px; overflow:auto; white-space:pre-wrap; word-break:break-all; }
.hs-phone { width:100%; max-width:300px; min-height:460px; margin:0 auto; border-radius:22px; padding:22px 16px; border:6px solid #1f2937; overflow:hidden; }
.hs-logo { max-height:54px; max-width:70%; }
.hs-logo-ph { display:inline-block; padding:.5rem 1rem; border:1px dashed rgba(255,255,255,.5); color:rgba(255,255,255,.7); border-radius:.5rem; font-size:.75rem; }
.hs-cartao { background:rgba(255,255,255,.95); border-radius:12px; padding:12px; }
.hs-campo { height:28px; background:#e5e7eb; border-radius:6px; margin-bottom:8px; }
.hs-botao { color:#fff; text-align:center; border-radius:8px; padding:8px; font-weight:600; font-size:.85rem; }
.hs-ad-ph { aspect-ratio:16/9; background:rgba(255,255,255,.12); border-radius:8px; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:.75rem; text-align:center; }
.hs-ponto { display:inline-block; width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); margin:0 2px; cursor:pointer; }
.hs-ponto.ativo { background:var(--bs-primary); }
.hs-miniatura { width:64px; height:64px; flex-shrink:0; border-radius:.375rem; background:#f1f5f9; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.hs-miniatura img, .hs-miniatura video { width:100%; height:100%; object-fit:cover; }