.brand-icon {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* The admin theme has a more specific brand-icon rule in app.css, so override
   it here to keep the configured logo free of an extra colored tile. */
.admin-sidebar .brand-icon {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.brand-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.user-nav {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
  scrollbar-width: thin;
}

.user-nav-dashboard {
  margin-bottom: 2px;
}

.nav-group {
  display: grid;
  gap: 3px;
  margin-top: 14px;
}

.nav-section-label {
  display: block;
  padding: 0 13px 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
  user-select: none;
}

.user-nav-support {
  margin-top: 14px;
}

.sidebar-foot {
  flex: 0 0 auto;
}

.sidebar-collapse-toggle {
  display: none;
}

@media (min-width: 821px) {
  .app-shell {
    transition: grid-template-columns .18s ease;
  }

  .sidebar {
    overflow: visible;
    transition: padding .18s ease;
  }

  .sidebar-collapse-toggle {
    position: absolute;
    top: 47px;
    right: -13px;
    z-index: 40;
    width: 27px;
    height: 27px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 9px;
    color: #64748b;
    background: #fff;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .10);
    cursor: pointer;
    transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  }

  .sidebar-collapse-toggle:hover {
    color: var(--purple);
    border-color: #d7c8ff;
    background: var(--purple-soft);
    box-shadow: 0 7px 18px rgba(15, 23, 42, .13);
  }

  .admin-sidebar .sidebar-collapse-toggle {
    border-color: rgba(255,255,255,.28);
    color: #4f3d76;
    background: #fff;
  }

  .admin-sidebar .sidebar-collapse-toggle:hover {
    color: var(--purple);
    border-color: #d7c8ff;
    background: #f7f4ff;
  }

  .sidebar-collapse-toggle .icon {
    display: none;
  }

  .sidebar-collapse-toggle::before {
    content: "‹";
    display: block;
    font-size: 21px;
    font-weight: 500;
    line-height: 1;
    transform: translateY(-1px);
  }

  .app-shell.sidebar-collapsed {
    --sidebar-width: 82px;
  }

  .app-shell.sidebar-collapsed .sidebar {
    padding-left: 10px;
    padding-right: 10px;
  }

  .app-shell.sidebar-collapsed .sidebar-collapse-toggle::before {
    content: "›";
  }

  .app-shell.sidebar-collapsed .brand {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .app-shell.sidebar-collapsed .brand > span:last-child,
  .app-shell.sidebar-collapsed .nav-section-label,
  .app-shell.sidebar-collapsed .user-nav .nav-link > span,
  .app-shell.sidebar-collapsed .user-nav .nav-link > small,
  .app-shell.sidebar-collapsed .sidebar-credit-card > span:not(.sidebar-credit-icon),
  .app-shell.sidebar-collapsed .sidebar-credit-card > .sidebar-credit-arrow,
  .app-shell.sidebar-collapsed .sidebar-download > span {
    display: none;
  }

  .app-shell.sidebar-collapsed .user-nav {
    padding-right: 0;
  }

  .app-shell.sidebar-collapsed .user-nav .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .app-shell.sidebar-collapsed .nav-group,
  .app-shell.sidebar-collapsed .user-nav-support {
    margin-top: 8px;
  }

  .app-shell.sidebar-collapsed .sidebar-foot {
    padding-left: 0;
    padding-right: 0;
  }

  .app-shell.sidebar-collapsed .sidebar-credit-card,
  .app-shell.sidebar-collapsed .sidebar-download {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Super Admin compact mode mirrors the normal-user icon rail. */
  .admin-shell.sidebar-collapsed .admin-account-label {
    display: none;
  }

  .admin-shell.sidebar-collapsed .admin-sidebar nav .nav-link {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .admin-shell.sidebar-collapsed .admin-sidebar nav .nav-link > span,
  .admin-shell.sidebar-collapsed .admin-sidebar nav .nav-trailing-icon,
  .admin-shell.sidebar-collapsed .admin-sidebar-note small {
    display: none;
  }

  .admin-shell.sidebar-collapsed .admin-sidebar-note {
    justify-content: center;
    gap: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 820px) {
  .user-nav {
    overflow-y: visible;
  }

  .nav-group {
    margin-top: 12px;
  }

  .sidebar-collapse-toggle {
    display: none !important;
  }
}