/* IZZY OS — shell + sidebar unificados. Dark premium. Aplicado em Book, Conta e telas admin.
   Tokens do shell = aliases da fonte única (tokens.css). Requer tokens.css carregado antes. */
:root {
  --os-bg: var(--izzy-bg);
  --os-sidebar-bg: var(--izzy-bg-sidebar);
  --os-line: var(--izzy-line-shell);
  --os-line-2: var(--izzy-line-shell-2);
  --os-ink: var(--izzy-ink);
  --os-ink-2: var(--izzy-ink-2);
  --os-ink-3: var(--izzy-ink-3-shell);
  --os-accent: var(--izzy-accent);
  --os-accent-soft: var(--izzy-accent-soft);
  --os-w: var(--izzy-sidebar-w);
  --os-w-collapsed: var(--izzy-sidebar-w-collapsed);
}

.os-sidebar {
  position: fixed; top: 0; left: 0; height: 100vh; width: var(--os-w);
  background: linear-gradient(180deg, var(--izzy-bg-sidebar-top) 0%, var(--os-sidebar-bg) 100%);
  border-right: 1px solid var(--os-line); z-index: 60;
  display: flex; flex-direction: column; overflow: hidden; transition: width .16s ease;
}
.os-brand { display: flex; align-items: center; gap: 10px; padding: 16px 14px; border-bottom: 1px solid var(--os-line); }
.os-badge {
  /* marca IZZY (invariante de tema, como os chips de programa) */
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; color: #06210e; background: linear-gradient(135deg, #34c85a, #1f8f3c);
  box-shadow: 0 2px 10px rgba(46,160,67,.35);
}
.os-brand-txt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.os-brand-txt strong { color: var(--os-ink); font-size: 15px; letter-spacing: .3px; }
.os-brand-txt small { color: var(--os-ink-3); font-size: 11px; }
.os-collapse {
  margin-left: auto; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--os-line-2); color: var(--os-ink-2); font-size: 14px; line-height: 1;
}
.os-collapse:hover { color: var(--os-ink); border-color: var(--os-accent); }

.os-nav { padding: 12px 10px; overflow-y: auto; flex: 1; }
.os-group {
  color: var(--os-ink-3); font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  margin: 14px 10px 6px; font-weight: 700;
}
.os-group:first-child { margin-top: 2px; }
.os-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px;
  color: var(--os-ink-2); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap;
  transition: background .12s, color .12s;
}
.os-item svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.os-item:hover { background: var(--izzy-hover); color: var(--os-ink); }
.os-item.ativo { background: var(--os-accent-soft); color: var(--izzy-accent-ink); }
.os-item.ativo svg { stroke: var(--os-accent); }

/* Recolhido */
.os-collapsed .os-sidebar { width: var(--os-w-collapsed); }
.os-collapsed .os-item span, .os-collapsed .os-brand-txt, .os-collapsed .os-group { display: none; }
.os-collapsed .os-item { justify-content: center; padding: 10px; }
.os-collapsed .os-collapse { transform: rotate(180deg); }
.os-collapsed .os-brand { justify-content: center; }

/* Deslocamento do conteudo (Book/Conta usam .os-main; telas base.html usam .os-page) */
.os-main, .os-page { margin-left: var(--os-w); transition: margin-left .16s ease; }
.os-collapsed .os-main, .os-collapsed .os-page { margin-left: var(--os-w-collapsed); }
.os-page { min-height: 100vh; padding: 22px 26px; }
.os-placeholder { max-width: 640px; }
.os-placeholder h1 { margin: 0 0 8px; }
.os-placeholder p { color: var(--izzy-ink-muted); }

@media (max-width: 720px) {
  .os-sidebar { width: var(--os-w-collapsed); }
  .os-item span, .os-brand-txt, .os-group { display: none; }
  .os-main, .os-page { margin-left: var(--os-w-collapsed); }
}