/*
This file contains CSS custom properties for primary colors
to ensure Tailwind CSS can properly generate color utilities
*/

:root {
  --color-primary-50: 244 246 251;
  --color-primary-100: 232 236 247;
  --color-primary-200: 213 221 238;
  --color-primary-300: 185 198 224;
  --color-primary-400: 151 169 207;
  --color-primary-500: 123 140 192;
  --color-primary-600: 103 114 177;
  --color-primary-700: 92 99 162;
  --color-primary-800: 77 82 133;
  --color-primary-900: 66 71 107;
  --color-primary-950: 8 21 52;
  --color-primary: 8 21 52;
}

/* Force inclusion of primary color classes */
.text-primary-600 { color: rgb(103 114 177); }
.text-primary-500 { color: rgb(123 140 192); }
.text-primary { color: rgb(8 21 52); }
.bg-primary-600 { background-color: rgb(103 114 177); }
.bg-primary-700 { background-color: rgb(92 99 162); }
.bg-primary-800 { background-color: rgb(77 82 133); }
.hover\:bg-primary-700:hover { background-color: rgb(92 99 162); }
.hover\:bg-primary-600\/90:hover { background-color: rgb(103 114 177 / 0.9); }
.hover\:text-primary-500:hover { color: rgb(123 140 192); }
.focus\:ring-primary-500:focus { --tw-ring-color: rgb(123 140 192); }
.focus\:border-primary-500:focus { border-color: rgb(123 140 192); }
.border-primary-500 { border-color: rgb(123 140 192); }
.ring-primary-500 { --tw-ring-color: rgb(123 140 192); }

/* Gradient classes for dashboard */
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-primary-800 { --tw-gradient-from: rgb(77 82 133); --tw-gradient-to: rgb(77 82 133 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.via-primary-700 { --tw-gradient-to: rgb(92 99 162 / 0); --tw-gradient-stops: var(--tw-gradient-from), rgb(92 99 162), var(--tw-gradient-to); }
.to-primary-600 { --tw-gradient-to: rgb(103 114 177); }

/* Z-index fix for dropdown menu */
.dropdown-menu {
    z-index: 999 !important;
}

/* Higher z-index for navbar dropdowns to ensure they appear above all content */
.navbar-dropdown {
    z-index: 99999 !important;
    position: relative;
    max-width: 16rem !important;
    overflow: hidden !important;
}

/* Ensure dropdown content never overflows */
.navbar-dropdown .truncate {
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

/* Ensure user info section has proper flex layout */
.navbar-dropdown .flex .min-w-0 {
    min-width: 0 !important;
    flex: 1 !important;
}

/* Ensure profile pictures are properly rounded in navbar and dropdowns */
.navbar img[class*="rounded-full"],
.navbar div[class*="rounded-full"],
.navbar-dropdown img[class*="rounded-full"],
.navbar-dropdown div[class*="rounded-full"],
nav img[class*="rounded-full"],
nav div[class*="rounded-full"] {
    border-radius: 9999px !important;
}

/* Additional comprehensive profile picture rounding */
img.rounded-full,
div.rounded-full,
[class*="rounded-full"] {
    border-radius: 9999px !important;
    overflow: hidden !important;
}

/* Specific targeting for navbar profile pictures */
nav [class*="w-8"][class*="h-8"][class*="rounded-full"],
nav [class*="w-10"][class*="h-10"][class*="rounded-full"],
.navbar [class*="w-8"][class*="h-8"][class*="rounded-full"],
.navbar [class*="w-10"][class*="h-10"][class*="rounded-full"],
.navbar-dropdown [class*="w-8"][class*="h-8"][class*="rounded-full"],
.navbar-dropdown [class*="w-10"][class*="h-10"][class*="rounded-full"] {
    border-radius: 50% !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    min-height: 2rem !important;
    overflow: hidden !important;
}