/**
 * 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;
}

@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;
  }
}