/* User-panel skin for the shared sidebar.
   ==========================================================================
   Split out of base_userpanel.css. These rules restyle the sidebar itself
   (surface, padding, identity card, collapsed rail), and the sidebar renders on
   EVERY desktop page for a logged-in user - see the
   `request.mobile == 0 and user` condition in html/web/layout.jinja2.

   base_userpanel.css is gated on `dashboard-page` / `user-overview-*`, classes
   that only exist on user-panel page CONTENT, so while these rules lived there
   the sidebar was skinned on panel pages and raw everywhere else (no surface,
   no padding, an unstyled identity card). Keeping them in their own file lets
   the CSS follow the markup: the component below is gated on the sidebar.
   ========================================================================== */

/* Sidebar is `position: fixed` at the document root, outside `.up-panel`,
   so the --up-* tokens defined on `.up-panel` aren't inherited. Re-declared
   locally here. */
.base-sidebar[data-sidebar-id='user-panel-sidebar'] {
  --up-surface: color-mix(in srgb, var(--up-accent) 7%, #1c1c1f);
  --up-surface-2: color-mix(in srgb, var(--up-accent) 11%, #232327);
  --up-row-divider: rgba(255, 255, 255, 0.06);
  --up-text: var(--text-color, #f2f2f4);
  --up-text-muted: var(
    --muted-text,
    color-mix(in srgb, var(--up-text) 66%, transparent)
  );
  --up-text-dim: var(
    --text-faint,
    color-mix(in srgb, var(--up-text) 46%, transparent)
  );
  --up-accent: var(--primary-blue);
  --up-accent-soft: color-mix(in srgb, var(--up-accent) 18%, transparent);
  --up-accent-line: color-mix(in srgb, var(--up-accent) 40%, transparent);

  background: var(--up-surface) !important;
  background-image: none !important;
  border-right: 1px solid var(--up-row-divider) !important;
  border-inline-end: 1px solid var(--up-row-divider) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 18px 14px !important;
}
body.theme-light .base-sidebar[data-sidebar-id='user-panel-sidebar'] {
  --up-surface: #ffffff;
  --up-surface-2: color-mix(in srgb, var(--up-accent) 6%, #f5f5f6);
  --up-row-divider: rgba(0, 0, 0, 0.08);
  --up-text: var(--text-color, #1a1a1c);
  --up-text-muted: color-mix(in srgb, var(--up-text) 62%, transparent);
  --up-text-dim: color-mix(in srgb, var(--up-text) 45%, transparent);
  /* Derived from --up-accent, which follows the project's --primary-blue.
     These were hardcoded to the old default purple (var(--primary-blue)), so every project
     with its own brand got purple tints under a correctly-branded accent. */
  --up-accent-soft: color-mix(in srgb, var(--up-accent) 10%, transparent);
  --up-accent-line: color-mix(in srgb, var(--up-accent) 35%, transparent);

  background: var(--up-surface) !important;
  border-right-color: var(--up-row-divider) !important;
  border-inline-end-color: var(--up-row-divider) !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__item-link,
.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__item-toggle {
  padding: 9px 12px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  gap: 10px !important;
  color: var(--up-text-muted) !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__submenu {
  position: relative !important;
  margin-left: 16px !important;
  padding-left: 8px !important;
  border-left: 1px solid var(--up-row-divider) !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__submenu
  .base-sidebar__item {
  margin-left: 0 !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__submenu
  .base-sidebar__item-link,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__submenu
  .base-sidebar__item-toggle {
  padding: 9px 12px !important;
  min-height: 0 !important;
  border-radius: 8px !important;
  font-size: 12.5px !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link::after,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active::after,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle::after,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active::after {
  content: none !important;
  display: none !important;
  background: none !important;
}
/* Kill the base ::before glow ring on inactive items. The active rule
   below redefines ::before as a thin left rail. */
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link:not(.active)::before,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle:not(.active)::before {
  content: none !important;
  display: none !important;
  background: none !important;
  border: none !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__item-icon {
  font-size: 14px !important;
  width: 16px !important;
  flex-shrink: 0 !important;
}
/* Group headers are intentionally not rendered (see sidebar.jinja2). Each
   group is just a `<ul>` now - add a small gap between sibling groups. */
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__menu--grouped
  + .base-sidebar__menu--grouped {
  margin-top: 4px;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__menu--grouped {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__item {
  list-style: none !important;
  margin: 0 !important;
}

.base-sidebar.base-sidebar--grouped[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active,
.base-sidebar.base-sidebar--grouped[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active,
.base-sidebar[data-sidebar-id='user-panel-sidebar'].base-sidebar--grouped
  .base-sidebar__item-link.active,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active {
  background: var(--up-accent-soft) !important;
  background-image: none !important;
  border: 1px solid var(--up-accent-line) !important;
  color: var(--up-text) !important;
  font-weight: 600 !important;
  position: relative;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active::before,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active::before {
  content: '' !important;
  position: absolute !important;
  left: -1px !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  height: auto !important;
  background: var(--up-accent) !important;
  border-radius: 2px !important;
  display: block !important;
  inset: 8px auto 8px -1px !important;
  /* Kill the base ::before glow ring (mask-composite outline effect) */
  mask: none !important;
  -webkit-mask: none !important;
  mask-composite: add !important;
  -webkit-mask-composite: source-over !important;
  padding: 0 !important;
  z-index: 1 !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active
  .base-sidebar__item-icon,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active
  .base-sidebar__item-icon {
  color: var(--up-accent) !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link:hover
  .base-sidebar__item-icon,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle:hover
  .base-sidebar__item-icon {
  color: var(--up-accent) !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link:not(.active):hover,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle:not(.active):hover {
  background: color-mix(in oklch, var(--up-accent) 8%, transparent) !important;
  border-color: color-mix(
    in oklch,
    var(--up-accent) 18%,
    transparent
  ) !important;
}

.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__search {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  margin-bottom: 14px !important;
  box-shadow: none !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search:hover {
  background: transparent !important;
  box-shadow: none !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search
  .search-field {
  max-width: none !important;
  width: 100% !important;
  --search-height: 38px !important;
  --search-icon-size: 12px !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search
  .search-field__input {
  height: 38px !important;
  line-height: 36px !important;
  padding-block: 0 !important;
  padding-inline-start: 34px !important;
  padding-inline-end: 56px !important;
  background: var(--up-surface-2) !important;
  border: 1px solid var(--up-row-divider) !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  color: var(--up-text-muted) !important;
  vertical-align: middle !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search
  .search-field__input::placeholder {
  color: var(--up-text-dim) !important;
  font-weight: 500 !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search
  .search-field__icon {
  position: absolute !important;
  inset-inline-start: 12px !important;
  top: 0 !important;
  bottom: 0 !important;
  margin-block: auto !important;
  transform: none !important;
  font-size: 12px !important;
  width: 12px !important;
  height: 12px !important;
  line-height: 12px !important;
  display: block !important;
  color: var(--up-text-dim) !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search
  .search-field__icon::before {
  width: 12px !important;
  height: 12px !important;
  line-height: 12px !important;
  display: block !important;
  vertical-align: top !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__search-kbd {
  position: absolute !important;
  inset-inline-end: 7px !important;
  top: 0 !important;
  bottom: 0 !important;
  margin-block: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 20px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--up-row-divider) !important;
  border-radius: 5px !important;
  color: var(--up-text-dim) !important;
  letter-spacing: 0.32px !important;
  line-height: 1 !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search:hover
  .search-field__input {
  background: color-mix(
    in oklch,
    var(--up-surface-2) 92%,
    var(--up-accent)
  ) !important;
  border-color: var(--up-accent-line) !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search:hover
  .search-field__icon {
  color: var(--up-accent) !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__search:hover
  .base-sidebar__search-kbd {
  color: var(--up-text-muted) !important;
  border-color: var(--up-accent-line) !important;
}

.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__collapse-toggle-row {
  justify-content: flex-end !important;
  margin: 0 0 10px 0 !important;
  gap: 6px !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__collapse-toggle {
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: var(--up-surface-2) !important;
  background-image: none !important;
  border: 1px solid var(--up-row-divider) !important;
  color: var(--up-text-muted) !important;
  box-shadow: none !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__collapse-toggle
  i {
  font-size: 11px !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__collapse-toggle:hover {
  background: color-mix(
    in oklch,
    var(--up-surface-2) 88%,
    var(--up-accent)
  ) !important;
  border-color: var(--up-accent-line) !important;
  color: var(--up-text) !important;
  transform: none !important;
}

/* Sidebar additions (attention dot + compact identity card) -- */
.base-sidebar__item-attn {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--up-danger);
  box-shadow: 0 0 0 4px var(--up-danger-soft);
  margin-left: auto;
  flex-shrink: 0;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar'] .base-sidebar__identity {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: var(--up-surface-2) !important;
  border: 1px solid var(--up-row-divider) !important;
  margin-bottom: 14px !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(
    135deg,
    var(--up-accent),
    color-mix(in oklch, var(--up-accent) 60%, #000)
  ) !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  flex-shrink: 0 !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-text {
  min-width: 0 !important;
  flex: 1 1 0% !important;
  line-height: 1.3 !important;
  display: block !important;
  overflow: hidden !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-email {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--up-text) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-email.is-overflowing:hover,
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-email.is-overflowing:focus {
  text-overflow: clip !important;
  animation: base-sidebar-email-marquee 7s linear infinite;
}
@keyframes base-sidebar-email-marquee {
  0%,
  10% {
    text-indent: 0;
  }
  90%,
  100% {
    text-indent: -18em;
  }
}
.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-greeting {
  font-size: 10.5px !important;
  color: var(--up-text-dim) !important;
  margin: 0 0 2px !important;
  line-height: 1.3 !important;
}

.base-sidebar--collapsed[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity {
  width: auto;
  height: auto;
  padding: 6px;
  margin: 0 0 10px;
  justify-content: center;
  border-radius: 12px;
  gap: 0;
}
.base-sidebar--collapsed[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-text {
  display: none !important;
}
.base-sidebar--collapsed[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-link.active::before,
.base-sidebar--collapsed[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__item-toggle.active::before {
  display: none !important;
}

.base-sidebar[data-sidebar-id='user-panel-sidebar']
  .base-sidebar__identity-avatar-img {
  width: 55% !important;
  height: 55% !important;
  object-fit: contain !important;
}