/* ============================================================================
   Planejador Social — sirius-ui.css
   Camada de shell visual (sidebar lateral + topbar), espelhando o padrão já
   aplicado no CRM (produtos/crm-sirius/public/sirius-ui.css). Convenção de
   classes: sb-* (sidebar) e tb-* (topbar). Reaproveita as vars de tema/accent
   que já existem no <style> principal do index.html (--cyan, --grad, --card,
   --soft, --line, --mut, --white, --font-display, --font-ui) — não define
   nenhuma variável nova, só consome as que já existem.

   Carrega DEPOIS de overrides.css e ANTES de responsive.css (responsive.css
   continua sendo o dono único da responsividade — só ganhou mais regras lá
   pra sidebar/tablet/phone, ver comentário no topo daquele arquivo).

   Importante: isso é só CASCA visual. Nenhum id, onclick ou função JS foi
   removido — os botões de navegação foram realocados pra dentro da sidebar
   (mesmo elemento, mesmo id, mesmo onclick), não duplicados nem recriados.
   ============================================================================ */

#app-shell{display:flex;align-items:flex-start;min-height:100vh}

/* ---------- Sidebar ---------- */
#sidebar{
  width:236px;flex-shrink:0;background:var(--soft);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;z-index:45;
  transition:width .18s ease;
}
.sb-header{padding:20px 18px 14px}
.sb-header .brand{display:flex;align-items:center;gap:9px}
.sb-prod-title{
  font-family:var(--font-display);font-weight:700;font-size:13px;margin:12px 0 0;
  letter-spacing:.01em;color:var(--white);display:inline-flex;align-items:center;gap:7px;
  padding:5px 10px;border-radius:20px;background:color-mix(in srgb,var(--cyan) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 30%,transparent);
}
.sb-nav{flex:1;overflow-y:auto;padding:6px 12px 12px;display:flex;flex-direction:column;gap:2px}
.sb-sec{
  font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mut);padding:14px 10px 6px;
}
.sb-item{
  display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;
  color:var(--mut);font-family:var(--font-display);font-weight:600;font-size:13.5px;
  position:relative;transition:.15s;background:transparent;border:none;cursor:pointer;
  width:100%;text-align:left;
}
.sb-item svg{width:18px;height:18px;flex-shrink:0}
.sb-item:hover{color:var(--white);background:var(--surface)}
.sb-item.on{color:var(--cyan);background:color-mix(in srgb,var(--cyan) 10%,transparent)}
.sb-item.on::before{
  content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--cyan);box-shadow:0 0 8px var(--cyan);
}
.sb-item .ge-pill{margin-left:auto}
.sb-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.sb-footer{padding:10px 10px 14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
.sb-user-row{padding:8px 10px 10px;color:var(--mut);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-foot-item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
  color:var(--mut);font-family:var(--font-display);font-weight:600;font-size:12.5px;
  background:transparent;border:none;cursor:pointer;width:100%;text-align:left;transition:.15s;
}
.sb-foot-item svg{width:15px;height:15px;flex-shrink:0}
.sb-foot-item:hover{color:var(--white);background:var(--surface)}

/* ---------- Main / Topbar ---------- */
#main-content{flex:1;min-width:0}
.topbar{display:flex;align-items:center;gap:16px}
.tb-title h1{font-size:18px;font-weight:700;margin:0;letter-spacing:-.01em}
.tb-title p{color:var(--mut);font-size:12px;margin:2px 0 0}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.tb-btn{
  width:36px;height:36px;padding:0;line-height:0;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  color:var(--mut);border:1px solid var(--line);background:transparent;cursor:pointer;transition:.15s;
}
.tb-btn:hover{color:var(--cyan);border-color:var(--cyan)}
.tb-btn svg{width:17px;height:17px;display:block}

/* ---------- Painel de Configurações: centralizado igual aos outros modais ----------
   O gatilho (#navGear) saiu do canto superior direito (onde o painel abria, ancorado
   em top:58px;right:36px) e foi pro rodapé da sidebar. Ancorar perto do botão ficou
   estranho (cobria a própria sidebar). Mais simples e consistente: abre centralizado
   na tela, exatamente como #editModal/#contasModal/#planPwModal já fazem. */
.settings-overlay.open{ display:flex!important; align-items:center; justify-content:center; padding:16px; }
.settings-box{ position:relative!important; top:auto; right:auto; left:auto; bottom:auto; margin:0; box-shadow:none; }
.settings-bg{ background:rgba(0,0,0,.72); }

/* ---------- Light theme ---------- */
[data-theme="light"] #sidebar{background:#fff;box-shadow:1px 0 0 var(--line)}
[data-theme="light"] .sb-item.on{color:#0b8a82}
[data-theme="light"] .sb-item.on::before{background:var(--cyan)}
[data-theme="light"] .tb-btn:hover{color:#0b8a82;border-color:var(--cyan)}

/* ---------- Tela de login (planShowLogin, injetada via JS) ---------- */
.plan-name-btn{
  background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:13px 6px;
  color:var(--white);font-family:var(--font-display);font-weight:600;font-size:13px;cursor:pointer;transition:.15s;
}
.plan-name-btn:hover{border-color:var(--cyan);background:color-mix(in srgb,var(--cyan) 8%,transparent);color:var(--cyan)}

/* ---------- Modo compartilhado (link só-leitura do cliente) / impressão ----------
   O sidebar é navegação/administração — não deve aparecer pro cliente no link
   compartilhado nem sair no PDF exportado da Grade Editorial. */
.share-mode #sidebar{display:none!important}
.share-mode #app-shell{display:block!important}
.share-mode #main-content{width:100%!important}
@media print{
  #sidebar{display:none!important}
  #app-shell,#main-content{display:block!important;width:100%!important;height:auto!important;min-height:0!important}
}