/* === BASE: reset, variáveis, layout, sidebar, topbar, content === */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#9B3D8F;--primary-l:#F5EAF4;--primary-m:#7A2D72;--primary-d:#5A1F54;
  --accent:#C9A96E;--accent-l:#FAF5EC;
  --rose:#D4537E;--rose-l:#FBEAF0;
  --teal:#1D9E75;--teal-l:#E1F5EE;
  --amber:#BA7517;--amber-l:#FAEEDA;
  --blue:#378ADD;--blue-l:#E6F1FB;
  --coral:#D85A30;--coral-l:#FAECE7;
  --gray:#888780;--gray-l:#F1EFE8;
  --bg:#F8F5FB;--surface:#FFFFFF;
  --border:#E8E0EF;--border2:#D4C8E0;
  --txt:#1A1020;--txt2:#6B5F78;--txt3:#A89DB5;
  --sidebar:230px;--slot:34px;--time-w:54px;
  --radius:12px;--radius-sm:8px;
  /* Sidebar escura (tema sofisticado) */
  --sidebar-bg-1:#3C1838;--sidebar-bg-2:#260E22;
  --sidebar-txt:rgba(255,255,255,.70);
  --sidebar-txt-hover:#FFFFFF;
  --sidebar-hover:rgba(255,255,255,.06);
  --sidebar-active:rgba(217,183,121,.14);
  --sidebar-border:rgba(255,255,255,.08);
  --gold:#D9B779;--gold-soft:#E7CE9E;
  /* Escala de sombras */
  --shadow-sm:0 1px 3px rgba(38,14,34,.06);
  --shadow-md:0 6px 20px -8px rgba(38,14,34,.14);
  --shadow-lg:0 16px 40px -12px rgba(38,14,34,.22);
}
html{height:auto}
body{
  min-height:100vh;
  font-family:inherit;
  background:var(--bg);
  color:var(--txt);
  font-size:14px;
  margin:0;
  /* o body é quem rola */
}
h1,h2,h3,h4{font-weight:700}

/* ── LAYOUT ── */
/* shell vira um container simples; sidebar fica fixa, main empurrado pela margem */
#shell{min-height:100vh}
#sidebar{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--sidebar);
  background:linear-gradient(180deg,var(--sidebar-bg-1) 0%,var(--sidebar-bg-2) 100%);
  border-right:none;
  display:flex;flex-direction:column;
  overflow-y:auto;
  z-index:50;
}
/* barra de rolagem discreta na sidebar escura */
#sidebar::-webkit-scrollbar{width:6px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
#main{
  margin-left:var(--sidebar);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ── SIDEBAR (tema escuro sofisticado) ── */
.sb-brand{
  padding:20px 18px 16px;
  border-bottom:1px solid var(--sidebar-border);
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;text-align:center;
}
.sb-brand-icon{
  font-size:20px;color:var(--gold);margin-bottom:6px;
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(217,183,121,.12);
  border:1px solid rgba(217,183,121,.22);
}
.sb-brand-name{font-weight:700;font-size:16px;color:#fff;line-height:1.2;letter-spacing:.01em}
.sb-brand-sub{font-size:10.5px;color:rgba(255,255,255,.45);margin-top:2px;letter-spacing:.03em}
/* Quando só a logo aparece (sem texto), ela fica maior e centralizada */
.sb-brand-logo-only .sb-brand-icon{width:54px;height:54px;margin-bottom:0;font-size:26px}
.sb-section{padding:8px 0}
.sb-section-label{
  font-size:9.5px;font-weight:700;color:var(--gold);
  text-transform:uppercase;letter-spacing:.13em;
  padding:9px 18px 5px;opacity:.85;
}
.sb-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 18px;margin:1px 8px;border-radius:8px;
  cursor:pointer;font-size:12.5px;color:var(--sidebar-txt);
  transition:background .15s,color .15s;white-space:nowrap;
}
.sb-item:hover{background:var(--sidebar-hover);color:var(--sidebar-txt-hover)}
/* Boot: esconde a seção Plataforma INTEIRA (rótulo + itens só-do-dono-do-SaaS) até
   aplicarPermissoesSidebar rodar. Evita o flash no reload de troca de empresa/filial. */
#sidebar.perms-pending .sb-section-plataforma{display:none}
.sb-item.active{
  background:var(--sidebar-active);
  color:#fff;font-weight:500;
  box-shadow:inset 2px 0 0 var(--gold);
}
.sb-item.active i{color:var(--gold)}
.sb-item i{font-size:16px;flex-shrink:0;opacity:.9}
.sb-badge{
  margin-left:auto;background:var(--gold);color:#3A1635;
  font-size:9px;font-weight:700;padding:1px 6px;border-radius:20px;
}
.sb-divider{height:1px;background:var(--sidebar-border);margin:7px 18px}

/* ── TOPBAR ── */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:12px 22px;
  display:flex;align-items:center;gap:12px;
  position:sticky;
  top:0;
  z-index:40;
  box-shadow:0 1px 0 rgba(38,14,34,.02);
}
.tb-title{font-weight:700;font-size:18px;color:var(--txt);flex:1;letter-spacing:.01em}
.tb-date{font-size:11px;color:var(--txt3)}
.btn-primary{
  background:var(--primary);color:#fff;border:none;
  border-radius:var(--radius-sm);padding:8px 16px;
  font-size:12px;font-weight:600;cursor:pointer;
  display:flex;align-items:center;gap:6px;font-family:inherit;
  box-shadow:0 4px 12px -4px rgba(155,61,143,.5);
  transition:background .15s,transform .1s,box-shadow .15s;
}
.btn-primary:hover{background:var(--primary-m);box-shadow:0 6px 16px -4px rgba(155,61,143,.55)}
.btn-primary:active{transform:translateY(1px)}
.btn-ghost{background:none;border:1px solid var(--border2);border-radius:var(--radius-sm);padding:7px 13px;font-size:12px;cursor:pointer;color:var(--txt);font-family:inherit;transition:all .15s}
.btn-ghost:hover{background:var(--bg);border-color:var(--primary)}
.btn-danger{background:none;border:1px solid #E24B4A;color:#A32D2D;border-radius:var(--radius-sm);padding:7px 13px;font-size:12px;cursor:pointer;font-family:inherit;transition:all .15s}
.btn-danger:hover{background:#FCEBEB}

/* ── CONTENT ── */
.content{
  padding:20px;
  flex:1;
}
.panel{display:none}
.panel.active{display:block;animation:panel-fadein .18s ease}
@keyframes panel-fadein{from{opacity:.6}to{opacity:1}}

/* Sombra suave padrão nos cartões — dá profundidade e ar premium */
.stat-card,.sec-card,.kpi-card,.dash-sec,.vp-card,.side-card,
.r-stat,.agd-section,.avu-section,.venda-step-bar,.agenda-grid-wrap{
  box-shadow:var(--shadow-sm);
}

/* ── MENU LATERAL RETRÁTIL (celular / tablet) ── */
.sb-toggle{
  display:none;  /* só aparece em telas pequenas */
  background:none;border:1px solid var(--border2);border-radius:var(--radius-sm);
  width:36px;height:36px;cursor:pointer;color:var(--txt);
  align-items:center;justify-content:center;font-size:19px;flex-shrink:0;
  transition:all .15s;
}
.sb-toggle:hover{background:var(--primary-l);color:var(--primary);border-color:var(--primary)}
.sb-backdrop{
  display:none;position:fixed;inset:0;
  background:rgba(30,10,40,.42);z-index:45;
}
.sb-backdrop.open{display:block}

/* ── MENU RECOLHIDO PRA ÍCONES (desktop) — botão na topbar ── */
.sb-collapse{
  display:none;  /* aparece só no desktop (≥901px) */
  background:none;border:1px solid var(--border2);border-radius:var(--radius-sm);
  width:36px;height:36px;cursor:pointer;color:var(--txt);
  align-items:center;justify-content:center;font-size:19px;flex-shrink:0;transition:all .15s;
}
.sb-collapse:hover{background:var(--primary-l);color:var(--primary);border-color:var(--primary)}
@media (min-width:901px){
  .sb-collapse{display:flex}
  /* menu vira faixa fininha só com ícones */
  body.sb-mini #sidebar{width:64px;transition:width .18s ease}
  body.sb-mini #main{margin-left:64px;transition:margin-left .18s ease}
  body.sb-mini #sidebar .sb-section-label{opacity:0;height:0;padding:0;margin:0;overflow:hidden}
  body.sb-mini #sidebar .sb-item{justify-content:center;padding:9px 0;font-size:0;gap:0}
  body.sb-mini #sidebar .sb-item i{font-size:17px}
  body.sb-mini #sidebar .sb-badge{display:none}
  body.sb-mini #sidebar .sb-divider{margin:7px 12px}
  body.sb-mini #sidebar .sb-brand{padding:14px 0}
  body.sb-mini #sidebar .sb-brand-logo-only .sb-brand-icon{width:42px;height:42px;font-size:22px}
  body.sb-mini #sidebar .sb-user{justify-content:center;padding-left:0;padding-right:0}
  body.sb-mini #sidebar .sb-user-info,
  body.sb-mini #sidebar .sb-logout{display:none}
  /* hover: expande temporário (overlay) mostrando os textos */
  body.sb-mini #sidebar:hover{width:var(--sidebar);box-shadow:6px 0 30px rgba(38,14,34,.35)}
  body.sb-mini #sidebar:hover .sb-section-label{opacity:.85;height:auto;padding:9px 18px 5px}
  body.sb-mini #sidebar:hover .sb-item{justify-content:flex-start;padding:9px 18px;font-size:12.5px;gap:10px}
  body.sb-mini #sidebar:hover .sb-badge{display:inline-block}
  body.sb-mini #sidebar:hover .sb-brand{padding:20px 18px 16px}
  body.sb-mini #sidebar:hover .sb-user{justify-content:flex-start;padding-left:14px;padding-right:14px}
  body.sb-mini #sidebar:hover .sb-user-info{display:block}
  body.sb-mini #sidebar:hover .sb-logout{display:flex}
}

/* ════════════════════════════════════════════════
   RESPONSIVO GLOBAL — vale para todas as páginas
   ════════════════════════════════════════════════ */

/* ── Tablet e abaixo (≤ 900px) ── */
@media (max-width:900px){
  #sidebar{
    transform:translateX(-100%);
    transition:transform .24s ease;
    box-shadow:4px 0 30px rgba(38,14,34,.32);
  }
  #sidebar.open{transform:translateX(0)}
  #main{margin-left:0}
  .sb-toggle{display:flex}
  .topbar{padding:11px 16px}
  .content{padding:16px}
  /* Grades de 4 colunas → 2 */
  .stats-grid,.kpi-grid{grid-template-columns:repeat(2,1fr)}
  /* Grades de 2 colunas → 1 */
  .two-col,.dash-two,.form-grid,.agd-info-grid{grid-template-columns:1fr}
}

/* ── Celular (≤ 560px) ── */
@media (max-width:560px){
  .content{padding:12px}
  .topbar{padding:10px 13px;gap:8px}
  .tb-title{font-size:16px}
  .tb-date{display:none}
  /* Todas as grades viram 1 coluna */
  .stats-grid,.kpi-grid,.pagto-opts,.fin-row,.parcelas-row,
  .retorno-stats,.agv2-srv-cfg,.agv2-prof-card-grid{grid-template-columns:1fr}
  /* Modais ocupam quase a tela inteira */
  .modal{width:94vw !important;max-width:94vw}
  /* Tabelas largas rolam na horizontal em vez de estourar */
  .content{overflow-x:hidden}
}