/* ============================================================
   DigiSat · Painel — base (tema + layout/chrome)
   Bootstrap 5.3 padrão + primário #094d8d. Variáveis aplicadas
   no body. Componentes/utilitários ficam em components.css.
   ============================================================ */

html {
  scroll-behavior:smooth;
}

/* ---------- Primário #094d8d (variáveis do Bootstrap) ---------- */
body {
  --bs-primary:#094d8d;
  --bs-primary-rgb:9,77,141;      /* RGB de #094d8d (antes apontava para #04487e) */
  --bs-link-color:#094d8d;
  --bs-link-color-rgb:9,77,141;
  --bs-link-hover-color:#03345d;
  --bs-link-hover-color-rgb:3,52,93;

  /* Família única: tudo herda daqui — títulos, corpo, tabelas, formulários
     e botões. Não há mais declaração de font-family em nenhum componente. */
  --bs-body-font-family:'Poppins', sans-serif;
  --bs-body-font-weight:300;
  --bs-body-font-size:.9375rem;   /* 15px */
  --bs-body-line-height:1.6;
}
/* Coluna de conteúdo: cresce para preencher a .app-shell, garantindo que o
   fundo chegue até a base da janela mesmo em telas com pouco conteúdo. */
.app-main {
  flex:1 1 auto;
  background:#335a8a12;
}

/* ============================================================
   Escala tipográfica — 300 base · 400 títulos · 500 ênfase
   Nenhum peso 700+ no painel: o contraste 300→500 já cria a
   hierarquia, e o texto fica visualmente mais leve.
   ============================================================ */

/* Os templates usam .fw-bold em 162 pontos e <strong> em 199. Em vez de
   editar todos, o utilitário é REMAPEADO: neste painel "bold" significa
   500 (Medium), não 700. Se algum dia precisar do 700 de verdade, use
   uma classe própria — não reverta esta regra sem revisar as duas telas. */
.fw-bold      { font-weight:500!important; }
.fw-semibold  { font-weight:400!important; }
b, strong     { font-weight:500; }

/* Negrito de verdade (700) — para quando 500 não basta, tipicamente
   títulos que precisam ancorar a hierarquia. Use esta classe em vez de
   .fw-bold, que neste painel vale 500. */
.fw-forte     { font-weight:700!important; }

/* Dois níveis de título, porque são coisas diferentes:
     h1  → título DA PÁGINA. Ancora a tela inteira, então vai de negrito real.
     h2..h6 → títulos DE SEÇÃO e DE ITEM (card-header, nome de produto,
              nome de sistema). Aplicar 700 aqui pesa a tela toda — estes
              só precisam se destacar do corpo (300), e 500 já faz isso.
   Os rótulos discretos (h6 muted/uppercase) trazem .fw-bold/.fw-semibold,
   cujo !important os mantém em 500/400. */
h1, .h1 { font-weight:700; }
h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 { font-weight:500; }

/* Título de página: <h3 class="fw-forte">. Escopado em h3.fw-forte para não
   encolher o preço do card de produto nem o valor de KPI, que também são .h3/h3. */
h3.fw-forte { font-size:1.5rem; }

/* ---------- Tabelas ---------- */
.table { font-size:.875rem; }        /* 14px */
.table th {
  font-weight:500;
  font-size:.75rem;                  /* 12px */
  text-transform:uppercase;
  letter-spacing:.06em;
}

/* ---------- Badges ---------- */
.badge { --bs-badge-font-weight:400; }

/* ---------- Scrollbar da marca (padrão do site, no azul do painel) ---------- */
::-webkit-scrollbar { width:.6rem; height:.6rem; }
::-webkit-scrollbar-track { background:#fff; }
::-webkit-scrollbar-thumb {
  background:#094d8d;
  border-radius:.4rem;
  border:2px solid #fff;
}

/* ============================================================
   Topbar
   ============================================================ */
.app-topbar {
  background:#fff;
  border-bottom:1px solid #dee2e6;
  padding:0.85rem 0;
  position:sticky; top:0; z-index:1030;
}
.app-topbar .navbar-brand {
  color:#0b1d3a; font-weight:600;
  display:flex; align-items:center; gap:.55rem; letter-spacing:-.01em;
  padding-top:0; padding-bottom:0;
}
.app-topbar .navbar-brand .brand-logo {
  height:40px; width:auto; display:block;
}
.brand-dot {
  width:.62rem; height:.62rem; border-radius:50%;
  background:#094d8d; box-shadow:0 0 0 4px rgba(9,77,141,.16);
  flex:0 0 auto;
}

/* Botão hambúrguer (só aparece < md — navbar-expand-md esconde em ≥ md) */
.topbar-burger { color:#0b1d3a; line-height:1; }
.topbar-burger i { font-size:1.5rem; }
.topbar-burger:focus { box-shadow:none; }

/* Mobile (< md): navbar no mesmo estilo do sidebar — gradiente + itens brancos */
@media (max-width:767.98px) {
  .app-topbar {
    background:var(--sidebar-bg);
    border-bottom:0;
    box-shadow:0 .25rem .75rem rgba(0,0,0,.15);
  }
  .app-topbar .topbar-burger,
  .app-topbar .topbar-text { color:#fff; }
  .app-topbar .btn-outline-primary {
    color:#fff;
    border-color:rgba(255,255,255,.55);
  }
  .app-topbar .btn-outline-primary:hover,
  .app-topbar .btn-outline-primary:focus {
    color:var(--bs-primary);
    background:#fff;
    border-color:#fff;
  }
}

/* ============================================================
   Sidebar (gradiente) — altura total à esquerda no desktop.
   Mobile (< md): vira offcanvas (gaveta) por cima do header.
   Desktop (≥ md): fixa, do topo à base, com o navbar à direita.
   ============================================================ */
:root {
  --sidebar-w:250px;
  --sidebar-bg:linear-gradient(130deg, rgb(7,24,49) 0%, rgb(11,60,117) 50%, rgb(3,122,201) 100%);
}

.sidebar {
  background:var(--sidebar-bg)!important;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important;
  padding:0!important;
}
/* Largura da gaveta no mobile */
.sidebar.offcanvas-md { --bs-offcanvas-width:270px; }

/* Logo no topo */
.sidebar-brand { padding:1rem .95rem .54rem; justify-content:center; border-bottom: 1px solid rgba(255, 255, 255, .12);}
.sidebar .sidebar-logo { height:40px; width:auto; display:block; }
.sidebar .offcanvas-header { border-bottom:1px solid rgba(255,255,255,.12); }
.sidebar .sidebar-nav { padding:.7rem .7rem 1rem; }

.sidebar .nav-link {
  color:#fff;
  font-size:.875rem;   /* 14px */
  display:flex;
  align-items:center;
}

/* App shell: coluna navbar + main. O min-height garante altura total da
   viewport e o flex-column faz o .app-main absorver o espaço que sobra —
   sem isso o fundo do main para no fim do conteúdo (tela curta = faixa
   branca ao lado do sidebar, que é fixed do topo à base). */
.app-shell {
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100dvh;   /* mobile: desconta a barra de endereço do navegador */
}

/* App shell: conteúdo (navbar + main) deslocado para a direita do sidebar */
@media (min-width:768px) {
  .sidebar.offcanvas-md {
    position:fixed; top:0; left:0; bottom:0;
    width:var(--sidebar-w);
    z-index:1040;            /* acima do navbar (1030) → sidebar sobre o navbar */
    overflow-y:auto;
    background:var(--sidebar-bg)!important;   /* offcanvas-md zera o fundo em ≥ md */
  }
  .sidebar .offcanvas-body { display:block!important; }
  .app-shell { margin-left:var(--sidebar-w); }
}
.sidebar .nav-link:hover {
  background:rgba(255,255,255,.10);
  color:#fff;
}
.sidebar .nav-link.active {
  background:#fff;
  color:#094d8d;
  box-shadow:0 6px 16px rgba(7,24,49,.35);
}
.sidebar .nav-link.active i { opacity:1; }
/* submenu herda o MESMO estilo dos itens de cima (só recuado via ms-3 no HTML) */
.sidebar-eyebrow {
  color:#cdd9ef; font-size:.68rem; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; padding:.5rem .9rem .4rem;
}

/* ============================================================
   Login (split-screen)
   ============================================================ */
.auth-wrap {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  grid-template-rows:1fr auto;
  min-height:100vh;
  background:var(--sidebar-bg);
}
.auth-brand {
  position:relative; overflow:hidden; color:#fff;
  background:transparent;
  padding:3.5rem 4rem; display:flex; flex-direction:column;
}
.auth-brand::before {
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(120% 80% at 28% 18%,#000 38%,transparent 100%);
          mask-image:radial-gradient(120% 80% at 28% 18%,#000 38%,transparent 100%);
}
.auth-brand > * { position:relative; z-index:1; }
.auth-logo { font-weight:600; font-size:1.15rem; display:flex; align-items:center; gap:.55rem; }
.auth-logo img { height:34px; width:auto; }
.auth-eyebrow { margin-top:auto; color:#7ea2e8; font-weight:500; letter-spacing:.18em; font-size:.72rem; text-transform:uppercase; }
.auth-title { color:#fff; font-size:2.6rem; line-height:1.08; font-weight:600; margin:.6rem 0 1.1rem; letter-spacing:-.02em; }
.auth-sub { color:#aebfe0; max-width:31rem; font-size:1.02rem; }
.auth-features { list-style:none; padding:0; margin:1.9rem 0 auto; display:grid; gap:.85rem; }
.auth-features li { display:flex; align-items:center; gap:.7rem; color:#d4def2; font-size:.97rem; }
.auth-features i { color:#4a90d0; font-size:1.1rem; flex:0 0 auto; }
.auth-foot { grid-column:1 / -1; color:#6f86b4; font-size:.8rem; text-align:center; padding:1.25rem 1rem; }
.auth-panel { display:flex; align-items:center; justify-content:center; padding:2.5rem; }
.auth-card {
  width:100%; max-width:25rem;
  background:#fff;
  padding:2.5rem 2.25rem;
  border-radius:1rem;
  box-shadow:0 1.5rem 3rem rgba(7,24,49,.28);
}
.auth-card .logo-mark { font-weight:600; color:#0b1d3a; font-size:1.35rem; letter-spacing:-.02em; }
.auth-card .logo-mark img { height:40px; width:auto; }
.auth-card h1 { font-size:1.7rem; margin:1.4rem 0 .35rem; }
.auth-card .lead-sub { color:#6c757d; font-size:.95rem; margin-bottom:1.6rem; }
.auth-support { color:#6c757d; font-size:.82rem; margin-top:1.4rem; }

@media (max-width:860px) {
  .auth-wrap { grid-template-columns:1fr; }
  .auth-brand { display:none; }
  .auth-title { font-size:2.1rem; }
}

/* ============================================================
   Preloader — logo pulsante sobre o gradiente da marca.
   Aparece 1× por sessão (lógica em js/preloader.js): navegar
   entre telas do painel não deve custar uma tela de carregamento.
   ============================================================ */
html.preloader-hidden #preloader { display:none!important; }
#preloader {
  position:fixed; inset:0;
  background:var(--sidebar-bg);
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  transition:opacity .2s ease;
}
.logo-loader {
  width:14rem; max-width:60vw; height:auto;
  animation:pulse-logo 1.5s infinite ease-in-out;
}
@keyframes pulse-logo {
  0%   { transform:scale(1);   opacity:1; }
  50%  { transform:scale(1.1); opacity:.7; }
  100% { transform:scale(1);   opacity:1; }
}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *{ transition:none!important; animation:none!important; }
}