body { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.topbar, main, footer { grid-column: 2; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: 250px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: white;
  background: #081c26;
  border-right: 1px solid #203b47;
}
.sidebar-brand { height: 72px; padding: 0 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #203b47; }
.sidebar-brand strong, .sidebar-brand small { display: block; }
.sidebar-brand strong { font-family: Manrope, sans-serif; font-size: 18px; letter-spacing: -.02em; }
.sidebar-brand small { margin-top: 1px; color: #8ea5ae; font-size: 12px; }
.sidebar-nav { padding: 24px 14px; }
.sidebar-nav > p { margin: 0 10px 10px; color: #6f8993; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.sidebar-link { min-height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 11px; border: 1px solid transparent; border-radius: 11px; color: #b8cbd2; text-decoration: none; font-size: 14px; font-weight: 700; transition: color .18s, background .18s, border .18s; }
.sidebar-link:hover { color: white; background: #102f3c; }
.sidebar-link.active { color: white; border-color: #1a554f; background: #0d393c; box-shadow: inset 3px 0 0 var(--teal); }
.sidebar-link svg { width: 19px; height: 19px; color: #42d2c0; }
.sidebar-link[hidden] { display: none; }
.sidebar-foot { margin-top: auto; padding: 20px; border-top: 1px solid #203b47; }
.sidebar-foot .status { font-size: 12px; }
.menu-toggle { display: none; width: 40px; height: 40px; border: 1px solid #38525e; border-radius: 10px; place-items: center; color: white; background: transparent; }
.sidebar-overlay { display: none; }
body > .topbar { justify-content: flex-end; }
body > .topbar > .brand { display: none; }

@media (max-width: 900px) {
  body { display: block; }
  .topbar, main, footer { grid-column: auto; }
  .sidebar { width: min(290px, 84vw); transform: translateX(-102%); box-shadow: 18px 0 60px rgba(2, 18, 25, .28); transition: transform .24s ease; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 15; width: 100%; height: 100%; border: 0; background: rgba(4, 20, 28, .58); }
  .sidebar-overlay:not([hidden]) { display: block; }
  .menu-toggle { display: grid; }
  body > .topbar { justify-content: space-between; }
  body > .topbar > .brand { display: flex; margin-right: auto; margin-left: 10px; }
}

@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }