/* Shell da aplicação: sidebar fixa à esquerda + topbar de contexto.
   Carregado por todas as páginas internas; o markup é injetado por tenant.js.
   Os seletores usam .app-shell no body para vencer o CSS inline de cada página. */

:root{
  --sh-navy:#3D4455;
  --sh-navy-deep:#232834;
  --sh-navy-darker:#1b1f28;
  --sh-gold:#C8812A;
  --sh-gold-lit:#dd9a45;
  --sh-side-w:252px;
  --sh-top-h:64px;
  --sh-ink-side:#e8ecf3;
  --sh-mute-side:#98a3b8;
  --sh-bg:#eef1f5;
  --sh-surface:#ffffff;
  --sh-ink:#1f2733;
  --sh-ink-2:#4a5568;
  --sh-muted:#8a93a2;
  --sh-line:#e2e7ef;
  --sh-red:#e5484d;
  --sh-ring:0 0 0 3px rgba(200,129,42,.28);
}
@media (prefers-color-scheme:dark){
  :root{
    --sh-bg:#0f1115; --sh-surface:#1b1f28; --sh-ink:#eef1f6; --sh-ink-2:#c3c9d4;
    --sh-line:#2a2f3a;
  }
}

/* ---------------------------------------------------------------- layout */

body.app-shell{
  margin:0;
  padding-left:var(--sh-side-w);
  background:var(--sh-bg);
  min-height:100vh;
}
body.app-shell > header{display:none}          /* header legado de cada página */

body.app-shell main{
  max-width:1320px;
  margin:26px auto 72px;
  padding:0 32px;
}

/* ------------------------------------------------------------- sidebar */

.app-side{
  position:fixed; inset:0 auto 0 0; width:var(--sh-side-w); z-index:60;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,var(--sh-navy) 0%,var(--sh-navy-deep) 58%,var(--sh-navy-darker) 100%);
  color:var(--sh-ink-side);
  border-right:1px solid rgba(255,255,255,.07);
  font:14px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

.app-side .s-brand{
  display:flex; align-items:center; gap:11px;
  padding:20px 20px 18px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.app-side .s-mark{
  width:38px; height:38px; border-radius:11px; flex:none;
  background:linear-gradient(140deg,var(--sh-gold-lit),var(--sh-gold));
  display:grid; place-items:center; font-size:19px;
  box-shadow:0 4px 14px rgba(200,129,42,.4);
}
.app-side .s-name{font-size:14.5px; font-weight:650; letter-spacing:.15px; line-height:1.2}
.app-side .s-sub{font-size:11px; color:var(--sh-mute-side); margin-top:2px; letter-spacing:.3px}

.app-side .s-nav{flex:1; overflow-y:auto; padding:14px 12px 8px}
.app-side .s-nav::-webkit-scrollbar{width:6px}
.app-side .s-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14); border-radius:3px}

.app-side .s-group{
  font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:#7c88a0; padding:14px 12px 7px;
}
.app-side .s-group:first-child{padding-top:2px}

.app-side .s-link{
  display:flex; align-items:center; gap:11px;
  padding:9.5px 12px; margin-bottom:2px; border-radius:10px;
  color:#c3cbdb; text-decoration:none; font-size:13.5px; font-weight:500;
  transition:background .14s, color .14s;
  position:relative;
}
.app-side .s-link svg{width:17px; height:17px; flex:none; opacity:.82}
.app-side .s-link:hover{background:rgba(255,255,255,.07); color:#fff}
.app-side .s-link.on{
  background:rgba(255,255,255,.11); color:#fff; font-weight:600;
}
.app-side .s-link.on svg{opacity:1; color:var(--sh-gold-lit)}
.app-side .s-link.on::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  border-radius:0 3px 3px 0; background:var(--sh-gold);
}
.app-side .s-link:focus-visible{outline:none; box-shadow:var(--sh-ring)}

/* rodapé: usuário */
.app-side .s-user{
  border-top:1px solid rgba(255,255,255,.08);
  padding:13px 14px; display:flex; align-items:center; gap:10px;
}
.app-side .s-avatar{
  width:36px; height:36px; border-radius:50%; flex:none;
  background:linear-gradient(140deg,var(--sh-gold-lit),var(--sh-gold));
  display:grid; place-items:center; font-weight:700; font-size:15px; color:#fff;
}
.app-side .s-uwrap{min-width:0; flex:1}
.app-side .s-uname{
  font-size:13px; font-weight:600; line-height:1.2; color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-side .s-role{font-size:11px; color:var(--sh-mute-side); margin-top:1px}
.app-side .s-out{
  width:34px; height:34px; flex:none; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  color:#c3cbdb; display:grid; place-items:center; transition:.14s;
}
.app-side .s-out svg{width:16px; height:16px}
.app-side .s-out:hover{background:var(--sh-red); border-color:var(--sh-red); color:#fff}

/* -------------------------------------------------------------- topbar */

.app-top{
  position:sticky; top:0; z-index:50;
  height:var(--sh-top-h);
  display:flex; align-items:center; gap:16px;
  padding:0 32px;
  background:color-mix(in srgb,var(--sh-surface) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--sh-line);
  font:14px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--sh-ink);
}
.app-top .t-title{font-size:16px; font-weight:650; letter-spacing:.1px}
.app-top .t-right{margin-left:auto; display:flex; align-items:center; gap:10px}

.app-top .t-org{
  display:flex; align-items:center; gap:9px;
  background:var(--sh-bg); border:1px solid var(--sh-line);
  border-radius:11px; padding:6px 12px 6px 11px;
}
.app-top .t-org svg{width:15px; height:15px; color:var(--sh-muted); flex:none}
.app-top .t-olbl{
  font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--sh-muted); line-height:1;
}
.app-top .t-org select{
  margin-top:3px; font-size:13.5px; font-weight:650; font-family:inherit;
  color:var(--sh-ink); background:transparent; border:0; cursor:pointer;
  outline:none; max-width:230px; padding:0;
}
.app-top .t-org select option{color:#111}

.app-top .t-act{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--sh-gold); color:#fff; border:0; text-decoration:none;
  padding:8.5px 14px; border-radius:10px; font-size:13px; font-weight:600;
  font-family:inherit; cursor:pointer; transition:.14s;
}
.app-top .t-act:hover{background:#b3701f}
.app-top .t-act svg{width:15px; height:15px}
.app-top .t-act:focus-visible{outline:none; box-shadow:var(--sh-ring)}

.app-burger{
  display:none; width:38px; height:38px; border-radius:10px; cursor:pointer;
  background:var(--sh-bg); border:1px solid var(--sh-line); color:var(--sh-ink-2);
  place-items:center;
}
.app-burger svg{width:18px; height:18px}

.app-scrim{
  position:fixed; inset:0; z-index:55; background:rgba(16,24,38,.5);
  opacity:0; pointer-events:none; transition:opacity .18s;
  backdrop-filter:blur(2px);
}

/* ---------------------------------------------------------- responsivo */

@media (max-width:1080px){
  body.app-shell{padding-left:0}
  .app-side{transform:translateX(-100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
    box-shadow:0 0 40px rgba(0,0,0,.3)}
  body.side-open .app-side{transform:none}
  body.side-open .app-scrim{opacity:1; pointer-events:auto}
  .app-burger{display:grid}
  .app-top{padding:0 18px}
  body.app-shell main{padding:0 18px; margin-top:20px}
  .app-top .t-title{display:none}
  .app-top .t-org select{max-width:150px}
}

@media (max-width:620px){
  .app-top .t-act .lbl{display:none}
  .app-top .t-act{padding:9px 11px}
}

/* ------------------------------------------- botões com ícone de traço */

body.app-shell main button{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
}
body.app-shell main button > svg{width:15px; height:15px; flex:none}

/* --------------------------- grids das páginas em telas estreitas -------
   index.html e dashboard.html foram escritos sem media query; as demais
   páginas já tratam a partir de 820px. O !important existe porque o
   dashboard fixa grid-template-columns em style inline no elemento. */

@media (max-width:1080px){
  body.app-shell .up,
  body.app-shell .cards,
  body.app-shell .kpis,
  body.app-shell .charts,
  body.app-shell .grid{grid-template-columns:1fr 1fr !important}
  body.app-shell .cmp,
  body.app-shell .form-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.app-shell .up,
  body.app-shell .cards,
  body.app-shell .kpis,
  body.app-shell .charts,
  body.app-shell .grid{grid-template-columns:1fr !important}
}

/* tabelas largas rolam dentro do próprio container, nunca a página */
body.app-shell table{max-width:100%}
@media (max-width:1080px){
  body.app-shell main{overflow-x:hidden}
  body.app-shell table{display:block; overflow-x:auto; white-space:nowrap}
}

@media print{
  .app-side,.app-top,.app-scrim,.app-burger{display:none !important}
  body.app-shell{padding-left:0}
  body.app-shell main{margin:0; padding:0; max-width:none}
}