/* App shell: sidebar on the start (right) side, content beside it. */
.shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--petrol-deep);
  color: #DCE6E8;
  display: flex; flex-direction: column;
  padding: 1.25rem 0.75rem;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 0.625rem; padding: 0 0.5rem 1.5rem; color: #fff; text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; }
.brand-name { font-weight: 700; font-size: 1.125rem; }
.brand-sub { display: block; font-size: var(--fs-xs); color: #9DB3BA; font-weight: 400; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.55rem 0.75rem; border-radius: var(--r-sm);
  color: #C9D7DA; text-decoration: none; font-size: var(--fs-sm);
  border-inline-start: 3px solid transparent;
}
.nav a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.nav a[aria-current="page"] { background: rgba(232, 163, 23, 0.12); color: #fff; border-inline-start-color: var(--amber); }
.nav svg { width: 18px; height: 18px; flex: none; }

.sidebar-foot { margin-top: auto; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 0.875rem 0.5rem 0; font-size: var(--fs-sm); }
.sidebar-user { color: #fff; font-weight: 600; }
.sidebar-role { color: #9DB3BA; font-size: var(--fs-xs); }
.sidebar-foot .btn-link { color: #C9D7DA; margin-top: 0.5rem; }

.main { padding: 1.75rem clamp(1rem, 3vw, 2.5rem) 3rem; max-width: 1180px; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-head p { color: var(--muted); margin-top: 0.25rem; font-size: var(--fs-sm); }
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0.75rem; gap: 0.5rem; }
  .brand { padding: 0; margin-inline-end: auto; }
  .nav { flex-direction: row; flex-wrap: wrap; order: 3; width: 100%; }
  .nav a { border-inline-start: 0; border-bottom: 3px solid transparent; }
  .nav a[aria-current="page"] { border-bottom-color: var(--amber); }
  .sidebar-foot { margin: 0; border: 0; padding: 0; display: flex; gap: 0.75rem; align-items: center; }
  .sidebar-foot .btn-link { margin: 0; }
}