:root {
  /* Color Palette - YemenExam */
  --palette-50: #eefbf6;
  --palette-100: #d5f6e7;
  --palette-200: #aeecd3;
  --palette-300: #79dcbc;
  --palette-400: #40c39c;
  --palette-500: #20a985;
  --palette-600: #13886c;
  --palette-700: #0f6d58;
  --palette-800: #0e5747;
  --palette-900: #0d473c;
  --palette-950: #062822;

  /* Dashboard Variables */
  --dash-color-1: transparent;
  --dash-color-2: #cbd5e1;
  --dash-color-3: #94a3b8;
  --dash-color-4: var(--palette-950);
  --dash-color-5: var(--palette-900);
  --dash-color-6: rgba(255, 255, 255, 0.9);
  --dash-color-7: rgba(226, 232, 240, 0.8);
  --dash-color-8: rgba(32, 169, 133, 0.15);
  --dash-color-9: rgba(32, 169, 133, 0);
  --dash-color-10: var(--palette-500);
  --dash-color-11: #f8fafc;
  --dash-color-12: rgba(255, 255, 255, 0.05);
  --dash-color-13: var(--palette-50);
  --dash-color-14: var(--palette-400);
  --dash-color-15: rgba(255, 255, 255, 0.95);
  --dash-color-16: rgba(238, 251, 246, 0.5);
  --dash-color-17: rgba(213, 246, 231, 0.6);
  --dash-color-18: rgba(174, 236, 211, 0.5);
  --dash-color-19: var(--palette-950);
  --dash-color-20: rgba(0, 0, 0, 0.8);
  --dash-color-21: rgba(32, 169, 133, 0.1);
  --dash-color-22: rgba(0, 0, 0, 0.1);
  --dash-color-23: rgba(0, 0, 0, 0.04);
  --dash-color-24: rgba(32, 169, 133, 0.4);
  --dash-color-white-25: white;
  --dash-color-26: #64748b;
  --dash-color-27: rgba(148, 163, 184, 0.1);
  --dash-color-28: rgba(0, 0, 0, 0.05);
  --dash-color-29: var(--palette-500);
  --dash-color-30: var(--palette-50);
  --dash-color-31: var(--palette-400);
  --dash-color-white-32: #ffffff;
  --dash-color-33: rgba(32, 169, 133, 0.08);
  --dash-color-white: var(--palette-50);
}

[x-cloak] {
  display: none !important;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--dash-color-1);
}

::-webkit-scrollbar-thumb {
  background: var(--dash-color-2);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dash-color-3);
}

.sidebar-gradient {
  background: linear-gradient(180deg, var(--dash-color-4) 0%, var(--dash-color-5) 100%);
}

.glass-header {
  background: var(--dash-color-6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dash-color-7);
}

.nav-item-active {
  background: linear-gradient(270deg, var(--dash-color-8) 0%, var(--dash-color-9) 100%);
  border-right: 3px solid var(--dash-color-10);
  color: var(--dash-color-10);
}

.nav-item-inactive {
  border-right: 3px solid var(--dash-color-1);
  color: var(--dash-color-3);
}

.nav-item-inactive:hover {
  color: var(--dash-color-11);
  background: var(--dash-color-12);
}

.sidebar-transition {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-style-224b51a7 {
  display: none;
}

.type-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.type-card:hover {
  border-color: var(--dash-color-10);
  background-color: var(--dash-color-white);
}

.type-card input:checked+div {
  border-color: var(--dash-color-10);
  background-color: var(--dash-color-white);
  box-shadow: 0 0 0 2px var(--dash-color-10);
}

.type-card input:checked+div .check-icon {
  opacity: 1;
  transform: scale(1);
}

.contact-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-card:hover {
  transform: translateY(-5px);
}

.dash-style-6b48b4f0 {
  animation-delay: 100ms;
}

.permission-checkbox:checked+div {
  background-color: var(--dash-color-13);
  border-color: var(--dash-color-14);
}

.permission-checkbox:checked+div .check-icon {
  opacity: 1;
  transform: scale(1);
}

.content-type-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--dash-color-15);
  backdrop-filter: blur(5px);
}

.group-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.group-card:hover {
  transform: translateY(-5px);
}

.dash-style-7349f0af {
  animation-delay: 100ms;
}

body {
  font-family: "Tajawal", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.bg-pattern {
  background: radial-gradient(circle at 10% 20%, var(--dash-color-16) 0, var(--dash-color-1) 55%),
    radial-gradient(circle at 90% 80%, var(--dash-color-17) 0, var(--dash-color-1) 55%),
    radial-gradient(circle at 0% 100%, var(--dash-color-18) 0, var(--dash-color-1) 55%),
    var(--dash-color-19);
}

.image-preview-container {
  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23CBD5E1FF' stroke-width='2' stroke-dasharray='12%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.dash-style-027760e5 {
  animation-delay: 100ms
}

.news-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-card:hover {
  transform: translateY(-5px);
}

.news-image-overlay {
  background: linear-gradient(to top,
      var(--dash-color-20) 0%,
      var(--dash-color-1) 100%);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.animate-slide-in-up {
  animation: slideInUp 0.5s ease-out forwards;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.input-field {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-field:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px var(--dash-color-21),
    0 8px 10px -6px var(--dash-color-21);
}

.file-upload-area {
  position: relative;
  overflow: hidden;
}

.file-upload-area::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: var(--dash-color-21);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.file-upload-area:hover::before {
  width: 300px;
  height: 300px;
}

.item-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.item-card:hover {
  transform: translateX(-8px);
  box-shadow: 0 20px 25px -5px var(--dash-color-22),
    0 10px 10px -5px var(--dash-color-23);
}

.dash-style-902f3cdd {
  animation-delay: 0.1s
}

.dash-style-b3158a4b {
  animation-delay: 0.2s
}

@keyframes pulse-ring {
  0% {
    box-shadow: 0 0 0 0 var(--dash-color-24);
  }

  70% {
    box-shadow: 0 0 0 10px var(--dash-color-9);
  }

  100% {
    box-shadow: 0 0 0 0 var(--dash-color-9);
  }
}

.animate-slide-up {
  animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.icon-preview-box {
  animation: pulse-ring 2s infinite;
}

.floating-label-group {
  position: relative;
}

.floating-label {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--dash-color-white-25);
  padding: 0 0.5rem;
  color: var(--dash-color-26);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.floating-input:focus~.floating-label,
.floating-input:not(:placeholder-shown)~.floating-label {
  top: 0;
  font-size: 0.75rem;
  color: var(--dash-color-10);
}

.grid-pattern {
  background-image:
    linear-gradient(to right, var(--dash-color-27) 1px, var(--dash-color-1) 1px),
    linear-gradient(to bottom, var(--dash-color-27) 1px, var(--dash-color-1) 1px);
  background-size: 20px 20px;
}

.dash-style-99f8dc7d {
  animation-delay: 0.1s;
}

.setting-section {
  transition: all 0.3s ease;
}

.setting-section:hover {
  box-shadow: 0 10px 15px -3px var(--dash-color-22), 0 4px 6px -2px var(--dash-color-28);
}

.social-input-group:focus-within i {
  color: var(--dash-color-10);
}

.dash-style-65f34503 {
  animation-delay: 100ms;
}

.dash-style-f32b34e0 {
  animation-delay: 200ms;
}

.permission-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.permission-card:hover {
  border-color: var(--dash-color-29);
  background-color: var(--dash-color-30);
}

.permission-card input:checked+div {
  border-color: var(--dash-color-29);
  background-color: var(--dash-color-30);
  box-shadow: 0 0 0 2px var(--dash-color-29);
}

.permission-card input:checked+div .check-icon {
  opacity: 1;
  transform: scale(1);
}

.user-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-card:hover {
  transform: translateY(-5px);
}

.role-badge-superuser {
  background: linear-gradient(135deg, var(--dash-color-10), var(--dash-color-31));
  color: var(--dash-color-white-32);
}

.role-badge-staff {
  background: linear-gradient(135deg, var(--dash-color-10), var(--dash-color-31));
  color: var(--dash-color-white-32);
}

.role-badge-user {
  background: var(--dash-color-33);
  color: var(--dash-color-10);
}

/* Enhanced Sidebar Styles */
.modern-sidebar {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 50;
}

.modern-sidebar.lg\:w-\[80px\] .sidebar-scroll {
  overflow-x: hidden !important;
}

.sidebar-scroll {
  overflow-x: hidden !important;
}

.sidebar-section-container {
  overflow: hidden;
  transition: all 0.3s ease;
}

.sidebar-logo-area .brand-text-container {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-nav-item span {
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modern-nav-item {
  position: relative;
}

.modern-nav-item .sidebar-tooltip,
.modern-nav-item>div[x-show] {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.75rem;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
}

.user-profile-section {
  overflow: visible !important;
}

.user-profile-card {
  justify-content: center;
  transition: all 0.3s ease;
}

.section-header {
  transition: all 0.3s ease;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .modern-sidebar {
    width: 280px !important;
    max-width: 280px;
  }

  .modern-sidebar .brand-text-container {
    opacity: 1 !important;
    width: auto !important;
    display: flex !important;
  }

  .modern-nav-item span {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .lg\:w-\[80px\] .modern-nav-item {
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .lg\:w-\[80px\] .sidebar-section-container {
    margin: 0 4px 12px 4px;
    padding: 4px;
  }

  .lg\:w-\[80px\] .sidebar-logo-area {
    padding-left: 0;
    padding-right: 0;
  }

  .lg\:w-\[80px\] .user-profile-section {
    padding-left: 8px;
    padding-right: 8px;
  }

  .lg\:w-\[80px\] .user-profile-card {
    padding: 0.75rem;
  }
}

.modern-sidebar,
.modern-sidebar *,
.sidebar-logo-area,
.modern-nav-item,
.section-header,
.user-profile-section {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.flex.h-screen.overflow-hidden {
  overflow: hidden !important;
}

.flex-1.flex.flex-col.relative.overflow-hidden {
  min-width: 0;
  flex: 1 1 0%;
}

.modern-nav-item>div[x-show]:not(.hidden) {
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.modern-nav-item:hover>div[x-show]:not(.hidden) {
  opacity: 1 !important;
}

@media (min-width: 1024px) {
  .setting-section:hover {
    box-shadow: 0 10px 15px -3px var(--dash-color-22), 0 4px 6px -2px var(--dash-color-28);
  }

  .social-input-group:focus-within i {
    color: var(--dash-color-10);
  }

  .dash-style-65f34503 {
    animation-delay: 100ms;
  }

  .dash-style-f32b34e0 {
    animation-delay: 200ms;
  }

  .permission-card {
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .permission-card:hover {
    border-color: var(--dash-color-29);
    background-color: var(--dash-color-30);
  }

  .permission-card input:checked+div {
    border-color: var(--dash-color-29);
    background-color: var(--dash-color-30);
    box-shadow: 0 0 0 2px var(--dash-color-29);
  }

  .permission-card input:checked+div .check-icon {
    opacity: 1;
    transform: scale(1);
  }

  .user-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .user-card:hover {
    transform: translateY(-5px);
  }

  .role-badge-superuser {
    background: linear-gradient(135deg, var(--dash-color-10), var(--dash-color-31));
    color: var(--dash-color-white-32);
  }

  .role-badge-staff {
    background: linear-gradient(135deg, var(--dash-color-10), var(--dash-color-31));
    color: var(--dash-color-white-32);
  }

  .role-badge-user {
    background: var(--dash-color-33);
    color: var(--dash-color-10);
  }

  /* Enhanced Sidebar Styles */
  .modern-sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 50;
  }

  .modern-sidebar.lg\:w-\[80px\] .sidebar-scroll {
    overflow-x: hidden !important;
  }

  .sidebar-scroll {
    overflow-x: hidden !important;
  }

  .sidebar-section-container {
    overflow: hidden;
    transition: all 0.3s ease;
  }

  .sidebar-logo-area .brand-text-container {
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .modern-nav-item span {
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .modern-nav-item {
    position: relative;
  }

  .modern-nav-item .sidebar-tooltip,
  .modern-nav-item>div[x-show] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
  }

  .user-profile-section {
    overflow: visible !important;
  }

  .user-profile-card {
    justify-content: center;
    transition: all 0.3s ease;
  }

  .section-header {
    transition: all 0.3s ease;
    overflow: hidden;
  }

  @media (max-width: 1023px) {
    .modern-sidebar {
      width: 280px !important;
      max-width: 280px;
    }

    .modern-sidebar .brand-text-container {
      opacity: 1 !important;
      width: auto !important;
      display: flex !important;
    }

    .modern-nav-item span {
      display: block !important;
    }
  }

  @media (min-width: 1024px) {
    .lg\:w-\[80px\] .modern-nav-item {
      justify-content: center;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .lg\:w-\[80px\] .sidebar-section-container {
      margin: 0 4px 12px 4px;
      padding: 4px;
    }

    .lg\:w-\[80px\] .sidebar-logo-area {
      padding-left: 0;
      padding-right: 0;
    }

    .lg\:w-\[80px\] .user-profile-section {
      padding-left: 8px;
      padding-right: 8px;
    }

    .lg\:w-\[80px\] .user-profile-card {
      padding: 0.75rem;
    }
  }

  .modern-sidebar,
  .modern-sidebar *,
  .sidebar-logo-area,
  .modern-nav-item,
  .section-header,
  .user-profile-section {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
  }

  .flex.h-screen.overflow-hidden {
    overflow: hidden !important;
  }

  .flex-1.flex.flex-col.relative.overflow-hidden {
    min-width: 0;
    flex: 1 1 0%;
  }

  .modern-nav-item>div[x-show]:not(.hidden) {
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
  }

  .modern-nav-item:hover>div[x-show]:not(.hidden) {
    opacity: 1 !important;
  }

  @media (min-width: 1024px) {
    .lg\:w-\[280px\] .modern-nav-item>div[x-show] {
      display: none !important;
    }
  }

  /* FIX: Popover Menu positioning */
  .user-profile-section {
    position: relative;
    overflow: visible !important;
    z-index: 100 !important;
    /* أعلى من navigation */
  }

  .user-profile-section>div {
    position: relative;
    z-index: 101 !important;
  }

  /* Popover Menu - أعلى z-index */
  .user-profile-section .absolute {
    z-index: 999999 !important;
    pointer-events: auto !important;
  }

  /* Navigation يجب أن يكون أقل */
  nav.sidebar-scroll {
    position: relative;
    z-index: 1 !important;
  }

  .modern-nav-item {
    z-index: 1;
  }