/**
 * Shared user menu dropdown design tokens and component states.
 *
 * @purpose Keep header and dashboard dropdown structure identical while allowing context-aware color modes.
 * @target Favorites, notifications, messages, and recently viewed user menu components.
 * @keywords user-menu,dropdown,shared-design,primary-color,dark-mode
 */
.javo-user-menu-dropdown {
  --javo-user-menu-primary: var(--primary-color, #7367f0);
  --javo-user-menu-primary-hover: #6559de;
  --javo-user-menu-primary-soft-bg: rgba(115, 103, 240, 0.11);
  --javo-user-menu-primary-soft-bg-strong: rgba(115, 103, 240, 0.18);
  --javo-user-menu-primary-soft-border: rgba(115, 103, 240, 0.22);
  --javo-user-menu-primary-soft-text: #564bc0;
  --javo-user-menu-card-radius: 12px;
  --javo-user-menu-control-radius: 10px;
  border-radius: var(--javo-user-menu-card-radius);
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
}

/**
 * @purpose Let dashboard search shrink before tablet account actions overflow the viewport.
 * @target The shared dashboard navigation between mobile and desktop breakpoints.
 * @keywords dashboard, tablet, search, flex, overflow
 */
@media (min-width: 768px) and (max-width: 1023px) {
  body.javo-dashboard .javo-dashboard-top-nav__inner > :first-child {
    min-width: 0;
    flex: 1 1 0;
  }
  body.javo-dashboard .top-nav .top-nav-search-trigger {
    min-width: 0;
    width: 100%;
    max-width: 16rem;
  }
  body.javo-dashboard .top-nav .top-nav-actions {
    flex: 0 0 auto;
  }
}

/*
 * Keep long account and activity menus inside the current viewport at every
 * breakpoint. The account menu can exceed 1,000px when all membership links
 * are present, so desktop users need the same internal scrolling guarantee as
 * mobile users.
 */
.javo-header-user-menu
  :is(.javo-user-menu-dropdown, .javo-user-menu-dropdown--account),
body.javo-dashboard
  .dashboard-wrapper
  .top-nav
  .top-nav-actions
  :is(.javo-user-menu-dropdown, .javo-user-menu-dropdown--account) {
  max-height: calc(100dvh - 5rem);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

@media (pointer: coarse) {
  .javo-header-user-menu > button,
  .javo-header-user-menu > a,
  .javo-header-user-menu > * > button,
  .javo-header-user-menu > * > a {
    min-width: 44px;
    min-height: 44px;
  }
}

/**
 * Compact header dropdown containment.
 *
 * @purpose Anchor wide header popovers to the complete action group and keep
 * every row and footer action reachable inside narrow mobile viewports.
 * @target Favorites, notifications, messages, and recently viewed dropdowns.
 * @keywords header,mobile,dropdown,overflow,popover,responsive
 */
@media (max-width: 639px) {
  .javo-header-user-menu {
    position: relative;
  }

  body.javo-dashboard .dashboard-wrapper .top-nav .top-nav-actions {
    position: relative;
  }

  .javo-header-user-menu > :has(> .javo-user-menu-dropdown),
  body.javo-dashboard
    .dashboard-wrapper
    .top-nav
    .top-nav-actions
    > :has(> .javo-user-menu-dropdown),
  body.javo-dashboard
    .dashboard-wrapper
    .top-nav
    .top-nav-actions
    > :has(> .javo-user-menu-dropdown--account) {
    position: static !important;
  }

  .javo-header-user-menu .javo-user-menu-dropdown,
  body.javo-dashboard
    .dashboard-wrapper
    .top-nav
    .top-nav-actions
    :is(.javo-user-menu-dropdown, .javo-user-menu-dropdown--account) {
    right: 0 !important;
    left: auto !important;
    width: min(24rem, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 6.5rem);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.javo-dashboard
    .dashboard-wrapper
    .top-nav
    .top-nav-actions
    :is(.javo-user-menu-dropdown, .javo-user-menu-dropdown--account) {
    max-height: calc(100dvh - var(--dashboard-header-height, 4rem) - 1rem);
  }

  body.admin-bar.javo-dashboard
    .dashboard-wrapper
    .top-nav
    .top-nav-actions
    :is(.javo-user-menu-dropdown, .javo-user-menu-dropdown--account) {
    max-height: calc(100dvh - var(--dashboard-header-height, 4rem) - 3.875rem);
  }
}

@supports (color: color-mix(in oklab, black, white)) {
  .javo-user-menu-dropdown {
    --javo-user-menu-primary-hover: color-mix(in oklab, var(--javo-user-menu-primary) 86%, black);
    --javo-user-menu-primary-soft-bg: color-mix(
      in oklab,
      var(--javo-user-menu-primary) 11%,
      transparent
    );
    --javo-user-menu-primary-soft-bg-strong: color-mix(
      in oklab,
      var(--javo-user-menu-primary) 18%,
      transparent
    );
    --javo-user-menu-primary-soft-border: color-mix(
      in oklab,
      var(--javo-user-menu-primary) 22%,
      transparent
    );
    --javo-user-menu-primary-soft-text: color-mix(
      in oklab,
      var(--javo-user-menu-primary) 78%,
      black
    );
  }
}

.javo-user-menu-dropdown .javo-dashboard-primary-icon {
  border: 1px solid var(--javo-user-menu-primary-soft-border);
  border-radius: var(--javo-user-menu-control-radius);
  background-color: var(--javo-user-menu-primary-soft-bg);
  color: var(--javo-user-menu-primary-soft-text);
}

.javo-user-menu-dropdown .javo-dashboard-primary-link,
.javo-user-menu-dropdown .javo-dashboard-primary-text {
  color: var(--javo-user-menu-primary-soft-text);
}

.javo-user-menu-dropdown .javo-dashboard-primary-link {
  border-radius: 6px;
}

.javo-user-menu-dropdown .javo-dashboard-primary-soft-surface {
  background-color: var(--javo-user-menu-primary-soft-bg);
}

.javo-user-menu-dropdown .javo-dashboard-primary-progress {
  background-color: var(--javo-user-menu-primary);
}

.javo-user-menu-dropdown .javo-dashboard-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 6px;
}

.javo-user-menu-dropdown .javo-dashboard-status-icon i {
  color: currentColor;
}

.javo-user-menu-dropdown .javo-dashboard-status-icon--primary {
  border-color: var(--javo-user-menu-primary-soft-border);
  background-color: var(--javo-user-menu-primary-soft-bg-strong);
  color: var(--javo-user-menu-primary-soft-text);
}

.javo-user-menu-dropdown .javo-dashboard-primary-action {
  border-radius: var(--javo-user-menu-control-radius);
  background-color: var(--javo-user-menu-primary);
  color: #ffffff;
}

@media (hover: hover) {
  .javo-user-menu-dropdown .javo-dashboard-primary-link:hover {
    background-color: var(--javo-user-menu-primary-soft-bg);
    color: var(--javo-user-menu-primary-hover);
  }

  .javo-user-menu-dropdown .javo-dashboard-primary-action:hover {
    background-color: var(--javo-user-menu-primary-hover);
    color: #ffffff;
  }
}

/**
 * Recently viewed frontend accent.
 *
 * @purpose Keep the public header light and align its history accents with the site's red notification badges.
 * @target Frontend recently viewed header icon and action button.
 * @keywords recently-viewed,frontend,light-mode,red-accent
 */
body:not(.javo-dashboard) .javo-user-menu-dropdown--recently-viewed {
  --javo-user-menu-primary: #ef4444;
  --javo-user-menu-primary-hover: #dc2626;
  --javo-user-menu-primary-soft-bg: rgba(239, 68, 68, 0.1);
  --javo-user-menu-primary-soft-bg-strong: rgba(239, 68, 68, 0.16);
  --javo-user-menu-primary-soft-border: rgba(239, 68, 68, 0.22);
  --javo-user-menu-primary-soft-text: #dc2626;
}

/**
 * Recently viewed dashboard dark appearance.
 *
 * @purpose Preserve the dark dashboard history palette without forcing dark mode onto public headers.
 * @target Dark dashboard top navigation recently viewed dropdown shell, rows, footer, and action button.
 * @keywords recently-viewed,dashboard,dark-mode,context,shared-design
 */
.dark body.javo-dashboard .jv-recently-viewed-dropdown,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown {
  border-color: rgba(71, 85, 105, 0.75) !important;
  background: #243247 !important;
  box-shadow: 0 22px 44px rgba(2, 6, 23, 0.34) !important;
}

.dark body.javo-dashboard .jv-recently-viewed-dropdown__header,
.dark body.javo-dashboard .jv-recently-viewed-dropdown__footer,
.dark body.javo-dashboard .jv-recently-viewed-dropdown__scroller,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__header,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__footer,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__scroller {
  border-color: rgba(71, 85, 105, 0.72) !important;
  background: #243247 !important;
}

.dark body.javo-dashboard .jv-recently-viewed-dropdown__header-icon,
.dark body.javo-dashboard .jv-recently-viewed-dropdown__empty > span,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__header-icon,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__empty > span {
  background: rgba(148, 163, 184, 0.12) !important;
  color: #9fb0c7 !important;
}

.dark body.javo-dashboard .jv-recently-viewed-dropdown__header p,
.dark body.javo-dashboard .jv-recently-viewed-dropdown__empty p.text-sm,
.dark body.javo-dashboard .jv-recently-viewed-dropdown__clear,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__header p,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__empty p.text-sm,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__clear {
  color: #f8fafc !important;
}

.dark body.javo-dashboard .jv-recently-viewed-dropdown__empty,
.dark body.javo-dashboard .jv-recently-viewed-dropdown__empty p.text-xs,
.dark body.javo-dashboard .jv-recently-viewed-dropdown__clear:hover,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__empty,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__empty p.text-xs,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__clear:hover {
  color: #9fb0c7 !important;
}

.dark body.javo-dashboard .jv-recently-viewed-item,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item {
  border-color: rgba(148, 163, 184, 0.18) !important;
  background: transparent !important;
}

.dark body.javo-dashboard .jv-recently-viewed-item:hover,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.dark body.javo-dashboard .jv-recently-viewed-item__thumb,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item__thumb {
  background: rgba(148, 163, 184, 0.1) !important;
  color: #94a3b8 !important;
}

.dark body.javo-dashboard .jv-recently-viewed-item__title,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item__title {
  color: #f8fafc !important;
}

.dark body.javo-dashboard .jv-recently-viewed-item__meta,
.dark body.javo-dashboard .jv-recently-viewed-item__meta i,
.dark body.javo-dashboard .jv-recently-viewed-item__remove,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item__meta,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item__meta i,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item__remove {
  color: #94a3b8 !important;
}

.dark body.javo-dashboard .jv-recently-viewed-item__remove:hover,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-item__remove:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fca5a5 !important;
}

.dark body.javo-dashboard .jv-recently-viewed-dropdown__view-all,
body.javo-dashboard .dashboard-wrapper .top-nav.dark .jv-recently-viewed-dropdown__view-all {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

@media (hover: hover) {
  .dark body.javo-dashboard .jv-recently-viewed-dropdown__view-all:hover,
  body.javo-dashboard
    .dashboard-wrapper
    .top-nav.dark
    .jv-recently-viewed-dropdown__view-all:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
  }
}