/*
 * Backend User Dropdown Fix
 * Fixes invisible text in OJS 3.5.x Vue.js dashboard dropdown
 */

/* Force visibility for dropdown menu items */
.app__userNav .pkpDropdown__content,
.app__headerActions .pkpDropdown__content,
.pkpDropdown__content {
  background: white !important;
  color: #1e293b !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  min-width: 200px !important;
  padding: 0.5rem 0 !important;
}

/* Force text visibility in dropdown items */
.pkpDropdown__action,
.app__userNav .pkpDropdown__action,
.app__headerActions .pkpDropdown__action {
  color: #1e293b !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  padding: 0.75rem 1rem !important;
  display: block !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
}

.pkpDropdown__action:hover,
.app__userNav .pkpDropdown__action:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}

/* User profile button */
.app__userNav button,
.app__userNav .pkpButton {
  color: #1e293b !important;
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  padding: 0.5rem 1rem !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
}

.app__userNav button:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

/* Ensure all text elements have proper styling */
.pkpDropdown__content * {
  color: inherit !important;
}

/* Fix for Vue.js v-cloak issue */
[v-cloak] {
  display: none !important;
}

/* Force render of dropdown text content */
.pkpDropdown__content::before {
  content: '' !important;
  display: block !important;
  height: 0 !important;
}