.admin-shell {
  --admin-sidebar-w: var(--sidebar-w, 280px);
  --admin-bg-body: var(--bg-body, #f7f3ec);
  --admin-bg-sidebar: var(--bg-sidebar, #f4efe7);
  --admin-surface: var(--bg-surface, #ffffff);
  --admin-border: var(--border, #ded7cc);
  --admin-text: var(--text-primary, #24312c);
  --admin-text-secondary: var(--text-secondary, #5f6f68);
  --admin-text-muted: var(--text-muted, #87918c);
  --admin-brand: var(--brand-primary, #3f6b5c);
  --admin-studio: #334155;
  --admin-radius-md: var(--r-md, 8px);
  --admin-radius-sm: var(--r-sm, 6px);
  --admin-space-lg: var(--space-lg, 1.5rem);
  --admin-space-xl: var(--space-xl, 2rem);
  --admin-shadow-sm: var(--shadow-sm, 0 6px 18px rgba(36, 49, 44, 0.08));
  display: grid;
  grid-template-columns: var(--admin-sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  background: var(--admin-bg-body);
  transition: grid-template-columns .18s ease;
}

.admin-shell.menu-collapsed {
  grid-template-columns: 72px minmax(0, 1fr);
}

.admin-sidebar {
  background: var(--admin-bg-sidebar);
  color: var(--admin-text);
  display: flex;
  flex-direction: column;
  padding: var(--admin-space-lg);
  border-right: 1px solid var(--admin-border);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.admin-sidebar[data-context="superadmin"] {
  background:
    linear-gradient(180deg, rgba(51, 65, 85, 0.08), rgba(51, 65, 85, 0) 34%),
    var(--admin-bg-sidebar);
  border-right-color: rgba(51, 65, 85, 0.26);
}

.admin-sidebar a {
  color: inherit;
  text-decoration: none;
}

.admin-sidebar .brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 38px;
  margin-bottom: 1rem;
  font-family: var(--font-head, "Fraunces", Georgia, serif);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--admin-text);
}

.admin-sidebar .menu-toggle {
  width: 30px;
  height: 30px;
  margin-left: auto;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--admin-border);
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--admin-text-secondary);
  cursor: pointer;
  font: inherit;
}

.admin-sidebar .menu-toggle:hover {
  background: var(--admin-surface);
  color: var(--admin-text);
}

.admin-sidebar .brand-mark {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><circle cx='24' cy='24' r='23' fill='%23EEF3EF'/><circle cx='24' cy='24' r='16' fill='none' stroke='%233F6B5C' stroke-width='0.6' opacity='0.3'/><path d='M24 9 L40 35 L8 35 Z' fill='none' stroke='%233F6B5C' stroke-width='2.4' stroke-linejoin='round' stroke-linecap='round'/><path d='M24 9 L24 24 M40 35 L24 24 M8 35 L24 24' stroke='%233F6B5C' stroke-width='1.5' stroke-linecap='round' opacity='0.65'/><circle cx='24' cy='9' r='2.4' fill='%233F6B5C'/><circle cx='40' cy='35' r='2.4' fill='%233F6B5C'/><circle cx='8' cy='35' r='2.4' fill='%233F6B5C'/><circle cx='24' cy='24' r='7' fill='none' stroke='%23C8945A' stroke-width='0.9' opacity='0.45'/><circle cx='24' cy='24' r='3.3' fill='%23C8945A'/></svg>");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.admin-sidebar .brand-tag {
  display: block;
  margin-top: 2px;
  color: var(--admin-text-muted);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.admin-sidebar .context-panel {
  margin: calc(var(--admin-space-xl) * -0.45) 0 var(--admin-space-lg);
}

.admin-sidebar .context-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 1.7rem;
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(51, 65, 85, 0.2);
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.08);
  color: var(--admin-studio);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-sidebar .context-user {
  margin-top: 0.38rem;
  color: var(--admin-text);
  font-size: 0.88rem;
  font-weight: 600;
}

.admin-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--admin-radius-sm);
  background: transparent;
  color: var(--admin-text-secondary);
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.admin-sidebar .nav-link:hover {
  background: var(--admin-surface);
  border-color: var(--admin-border);
  color: var(--admin-text);
}

.admin-sidebar .nav,
.admin-sidebar .nav-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-sidebar .nav {
  gap: 0.9rem;
}

.admin-sidebar .nav-section {
  margin-top: var(--admin-space-xl);
}

.admin-sidebar .nav-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.admin-sidebar .nav-group + .nav-group {
  padding-top: 0.3rem;
  border-top: 1px solid rgba(222, 215, 204, 0.58);
}

.admin-sidebar .nav-section-label {
  margin-bottom: 0.5rem;
  padding-left: 0.6rem;
  color: var(--admin-text-muted);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.admin-sidebar .nav-section-toggle {
  min-height: 2rem;
  padding: 0 0.55rem 0 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border: 0;
  background: transparent;
  color: var(--admin-text-muted);
  cursor: pointer;
  font: inherit;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-align: left;
  text-transform: uppercase;
}

.admin-sidebar .nav-section-toggle:hover {
  color: var(--admin-text);
}

.admin-sidebar .nav-section-arrow {
  flex: 0 0 auto;
  color: var(--admin-text-secondary);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.82rem;
  line-height: 1;
}

.admin-sidebar .nav-group-items {
  display: grid;
  gap: 0.25rem;
}

.admin-sidebar .nav-group.collapsed .nav-group-items {
  display: none;
}

.admin-sidebar .nav-link {
  width: 100%;
  min-height: 2.45rem;
  padding: 0.6rem 0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background-color .15s, color .15s, border-color .15s;
}

.admin-sidebar .nav-link.active {
  background: var(--admin-surface);
  border-color: var(--admin-border);
  color: var(--admin-brand);
  font-weight: 600;
  box-shadow: var(--admin-shadow-sm);
}

.admin-sidebar .nav-link.active svg {
  color: var(--admin-brand);
}

.admin-sidebar[data-context="superadmin"] .nav-link.active {
  border-color: rgba(51, 65, 85, 0.22);
  color: var(--admin-studio);
}

.admin-sidebar[data-context="superadmin"] .nav-link.active svg {
  color: var(--admin-studio);
}

.admin-sidebar[data-context="superadmin"] .avatar-sm {
  background: var(--admin-studio);
}

.admin-sidebar svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.admin-sidebar .sidebar-footer,
.admin-sidebar .sidebar-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--admin-space-lg);
  border-top: 1px solid var(--admin-border);
  color: var(--admin-text-secondary);
  font-size: 0.875rem;
  line-height: 1.35;
}

.admin-sidebar .sidebar-footer {
  margin-top: auto;
}

.admin-sidebar .sidebar-user {
  margin-bottom: var(--admin-space-lg);
  padding: 0 0 var(--admin-space-lg);
  border-top: 0;
  border-bottom: 1px solid var(--admin-border);
}

.admin-sidebar .sidebar-footer strong,
.admin-sidebar .sidebar-footer span,
.admin-sidebar .sidebar-user strong,
.admin-sidebar .sidebar-user span {
  display: block;
}

.admin-sidebar .sidebar-footer strong,
.admin-sidebar .sidebar-user strong {
  color: var(--admin-text);
  font-size: 0.875rem;
  font-weight: 600;
}

.admin-sidebar .sidebar-footer span,
.admin-sidebar .sidebar-user span {
  color: var(--admin-text-muted);
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.admin-sidebar .avatar-sm {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--admin-brand);
  color: #fff;
  font-family: var(--font-head, "Fraunces", Georgia, serif);
  font-size: 0.85rem;
  font-weight: 600;
}

.admin-main {
  min-width: 0;
}

.admin-shell.menu-collapsed .admin-sidebar {
  padding: 1rem 0.75rem;
  overflow: hidden;
}

.admin-shell.menu-collapsed .admin-sidebar .brand {
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}

.admin-shell.menu-collapsed .admin-sidebar .brand > span:not(.brand-mark),
.admin-shell.menu-collapsed .admin-sidebar .context-panel,
.admin-shell.menu-collapsed .admin-sidebar .sidebar-user,
.admin-shell.menu-collapsed .admin-sidebar .nav,
.admin-shell.menu-collapsed .admin-sidebar .nav-section,
.admin-shell.menu-collapsed .admin-sidebar .sidebar-footer {
  display: none;
}

.admin-shell.menu-collapsed .admin-sidebar .menu-toggle {
  margin-left: 0;
}

@media (max-width: 960px) {
  .admin-shell {
    grid-template-columns: 1fr;
  }

  .admin-shell.menu-collapsed {
    grid-template-columns: 1fr;
  }

  .admin-sidebar {
    position: static;
    height: auto;
  }

  .admin-shell.menu-collapsed .admin-sidebar {
    height: auto;
  }

  .admin-sidebar .nav,
  .admin-sidebar .nav-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-sidebar .nav-group {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-sidebar .nav-section-label {
    grid-column: 1 / -1;
  }

  .admin-sidebar .sidebar-footer {
    display: none;
  }
}

@media (max-width: 640px) {
  .admin-sidebar .nav,
  .admin-sidebar .nav-section,
  .admin-sidebar .nav-group {
    grid-template-columns: 1fr;
  }
}