/* THE SHELL — Aspire's layout: a dark side-navigation bar that collapses to an
 * icon rail, a slim top bar carrying the page title, the period and the mode,
 * and each page's own sub-navigation across the top of its content. The
 * Industry tokens (styles.css) colour everything; the sidebar is the one dark
 * surface in the app. No inline styles anywhere (CSP). */

:root {
  --sidebar-w: 244px;
  --sidebar-rail: 60px;
  --sidebar-bg: #1b2a3a;
  --sidebar-bg-2: #22354a;
  --sidebar-ink: #e6ebf0;
  --sidebar-muted: #9fb0c1;
  --sidebar-line: rgba(255, 255, 255, 0.08);
  --sidebar-active: #2f5d8a;
}

.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.app.sidebar-collapsed { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
.workspace { display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.main { flex: 1; }

/* ---- sidebar ---- */
.sidebar {
  background: var(--sidebar-bg); color: var(--sidebar-ink);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  border-right: 1px solid var(--sidebar-line);
}
.sidebar-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px; border-bottom: 1px solid var(--sidebar-line);
  min-height: 56px;
}
.sidebar .nav-brand {
  font-family: var(--font-heading); font-weight: 700; font-size: 15px; letter-spacing: .06em;
  color: var(--sidebar-bg); background: var(--sidebar-ink); text-decoration: none;
  width: 32px; height: 32px; display: grid; place-items: center; flex: 0 0 32px;
}
.brand-name { font-family: var(--font-heading); font-size: 15px; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sidebar-toggle { color: var(--sidebar-muted); border-color: var(--sidebar-line); flex: 0 0 auto; }
.sidebar-toggle:hover { color: var(--sidebar-ink); }
.sidebar-nav { flex: 1; overflow-y: auto; padding: 4px 0 8px; scrollbar-width: thin; }
.nav-group { padding: 4px 8px 3px; }
.nav-group + .nav-group { border-top: 1px solid var(--sidebar-line); margin-top: 2px; }
.nav-group[hidden] { display: none; }
.nav-group-label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sidebar-muted); padding: 5px 8px 3px; white-space: nowrap;
}
.sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  color: var(--sidebar-ink); text-decoration: none; font-size: 13.5px;
  padding: 6px 8px; border: 0; border-left: 3px solid transparent; border-radius: 0;
  background: transparent; width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  white-space: nowrap;
}
.sidebar .nav-item[hidden] { display: none; }
.sidebar .nav-item svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.sidebar .nav-item:hover { background: var(--sidebar-bg-2); color: #fff; }
.sidebar .nav-item.active { background: var(--sidebar-bg-2); border-left-color: #8fc1ff; color: #fff; }
.sidebar .nav-item.active svg { opacity: 1; }
.nav-label { overflow: hidden; text-overflow: ellipsis; flex: 1; }
.sidebar .nav-count { margin-left: auto; background: rgba(255,255,255,.14); color: #fff; }
.sidebar .nav-count.warn { background: #b3261e; color: #fff; }
.sidebar-foot { border-top: 1px solid var(--sidebar-line); padding: 8px; }
.nav-session .avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--sidebar-active); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: 0 0 24px; }

/* collapsed rail: icons only, labels as tooltips (title attributes) */
.app.sidebar-collapsed .brand-name, .app.sidebar-collapsed .nav-label, .app.sidebar-collapsed .nav-group-label, .app.sidebar-collapsed .nav-count { display: none; }
.app.sidebar-collapsed .sidebar-head { padding: 12px 0; justify-content: center; flex-wrap: wrap; gap: 8px; }
.app.sidebar-collapsed .sidebar-toggle { transform: rotate(180deg); }
.app.sidebar-collapsed .sidebar .nav-item { justify-content: center; padding: 9px 0; border-left-width: 3px; }
.app.sidebar-collapsed .nav-group { padding: 4px 6px; }

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 9px 20px; min-height: 56px;
  border-bottom: 1px solid var(--color-divider); background: var(--color-bg);
  position: sticky; top: 0; z-index: 20;
}
.topbar-menu { display: none; }
.topbar-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1; }
.page-title { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: .02em; white-space: nowrap; }
.topbar .nav-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .nav-right { display: flex; align-items: center; gap: 10px; }

/* legacy top-nav rules no longer apply to the shell */
.nav-links { display: none; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .app { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
  .app:not(.sidebar-open) .brand-name, .app:not(.sidebar-open) .nav-label, .app:not(.sidebar-open) .nav-group-label, .app:not(.sidebar-open) .nav-count { display: none; }
  .app:not(.sidebar-open) .sidebar .nav-item { justify-content: center; padding: 9px 0; }
  .app:not(.sidebar-open) .sidebar-head { padding: 12px 0; justify-content: center; flex-wrap: wrap; gap: 8px; }
  .app:not(.sidebar-open) .sidebar-toggle { transform: rotate(180deg); }
}
@media (max-width: 720px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); z-index: 40; transform: translateX(-100%); transition: transform .18s ease; }
  .app.sidebar-open .sidebar { transform: none; }
  .app.sidebar-open .brand-name, .app.sidebar-open .nav-label, .app.sidebar-open .nav-group-label, .app.sidebar-open .nav-count { display: initial; }
  .app.sidebar-open .sidebar .nav-item { justify-content: flex-start; padding: 7px 8px; }
  .topbar-menu { display: inline-flex; }
  .sidebar-toggle { display: none; }
}
@media print {
  .sidebar, .topbar { display: none !important; }
  .app { display: block; }
}