:root {
  /* =========================================
     Color Palette - YemenExam (Green Theme)
     ========================================= */

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

  /* --- Dashboard Variables (Mapped to Palette) --- */
  --dash-color-1: transparent;
  --dash-color-2: #cbd5e1;
  --dash-color-3: #94a3b8;
  --dash-color-4: var(--palette-950);
  /* #1f272b -> Darkest Green */
  --dash-color-5: var(--palette-900);
  /* #2c3e50 -> Dark Green */
  --dash-color-6: rgba(255, 255, 255, 0.9);
  --dash-color-7: rgba(226, 232, 240, 0.8);

  /* Accent RGBA replacements (Base: 32, 169, 133) */
  --dash-color-8: rgba(32, 169, 133, 0.15);
  /* rgba(185, 85, 4, 0.15) */
  --dash-color-9: rgba(32, 169, 133, 0);
  /* rgba(185, 85, 4, 0) */
  --dash-color-10: var(--palette-500);
  /* #b95504 -> Primary Green */

  --dash-color-11: #f8fafc;
  --dash-color-12: rgba(255, 255, 255, 0.05);
  --dash-color-13: var(--palette-50);
  /* #eff6ff -> Lightest Green */
  --dash-color-14: var(--palette-400);
  /* #3b82f6 -> Secondary Green */
  --dash-color-15: rgba(255, 255, 255, 0.95);
  --dash-color-16: rgba(238, 251, 246, 0.5);
  /* rgba(233, 213, 255, 0.5) -> Light Green Tint */
  --dash-color-17: rgba(213, 246, 231, 0.6);
  /* rgba(254, 215, 170, 0.6) -> Light Green Tint */
  --dash-color-18: rgba(174, 236, 211, 0.5);
  /* rgba(186, 230, 253, 0.5) -> Light Green Tint */
  --dash-color-19: var(--palette-950);
  /* #0f172a -> Darkest Green */
  --dash-color-20: rgba(0, 0, 0, 0.8);

  --dash-color-21: rgba(32, 169, 133, 0.1);
  /* rgba(185, 85, 4, 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);
  /* rgba(185, 85, 4, 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);
  /* #6366f1 -> Primary Green */
  --dash-color-30: var(--palette-50);
  /* #eef2ff -> Lightest Green */
  --dash-color-31: var(--palette-400);
  /* #e79027 -> Secondary Green */

  --dash-color-white-32: #ffffff;

  --dash-color-33: rgba(32, 169, 133, 0.08);
  /* rgba(185, 85, 4, 0.08) */

  --dash-color-white: var(--palette-50);
  /* #fff7ed -> Lightest Green */
}

/* From base.html */

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

/* Custom Scrollbar */
::-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 */
.sidebar-transition {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* From contact_form.html */

.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);
}

/* From contact_list.html */

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

/* From group_form.html */

.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);
}

/* From group_list.html */

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

/* From login.html */

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

/* From news_form.html */

.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
}

/* From news_list.html */

.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%);
}

/* From section_detail.html */

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

/* Custom Input Focus Effects */
.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 Hover Effect */
.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 Hover Effect */
.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
}

/* From section_item_form.html */

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

/* From site_settings.html */

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

/* From user_form.html */

.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);
}

/* From user_list.html */

.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
   Added: 2025-12-26
   ======================================== */

/* ========================================
   Sidebar Collapsed State Enhancements
   ======================================== */

/* Sidebar container when collapsed - prevent overflow issues */
.modern-sidebar {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  position: relative;
  isolation: isolate;
  /* إنشاء stacking context منفصل */
}

/* Hide scrollbar when sidebar collapsed to prevent visual glitches */
.modern-sidebar.lg\:w-\[80px\] .sidebar-scroll {
  overflow-x: hidden !important;
}

/* Navigation - create separate stacking context */
.sidebar-scroll {
  overflow-x: hidden !important;
  isolation: isolate;
  /* عزل Navigation في stacking context منفصل */
}

/* Section containers in collapsed state - better spacing */
.sidebar-section-container {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Logo area - proper alignment when collapsed */
.sidebar-logo-area .brand-text-container {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Navigation items - prevent text overflow when collapsed */
.modern-nav-item span {
  overflow: hidden;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Tooltips positioning - ensure they appear correctly */
.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 - responsive adjustments */
.user-profile-section {
  overflow: hidden;
}

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

/* Section headers - proper centering when collapsed */
.section-header {
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Mobile responsive fixes */
@media (max-width: 1023px) {
  .modern-sidebar {
    width: 280px !important;
    max-width: 280px;
  }

  /* FIX #2: إظهار اسم الموقع في mobile */
  .modern-sidebar .brand-text-container {
    opacity: 1 !important;
    width: auto !important;
    display: flex !important;
  }

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

  /* FIX #3: تحسين موضع dropdown الـ profile في mobile */
  .user-profile-section .absolute.bottom-full {
    position: fixed !important;
    bottom: 80px !important;
    right: 20px !important;
    left: 20px !important;
    width: auto !important;
  }
}

/* Desktop collapsed state */
@media (min-width: 1024px) {

  /* When collapsed, center icons properly */
  .lg\:w-\[80px\] .modern-nav-item {
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Hide section containers padding when collapsed */
  .lg\:w-\[80px\] .sidebar-section-container {
    margin: 0 4px 12px 4px;
    padding: 4px;
  }

  /* Logo container centering when collapsed */
  .lg\:w-\[80px\] .sidebar-logo-area {
    padding-left: 0;
    padding-right: 0;
  }

  /* User profile adjustments when collapsed */
  .lg\:w-\[80px\] .user-profile-section {
    padding-left: 8px;
    padding-right: 8px;
  }

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

  /* FIX #3: تحسين موضع dropdown الـ profile في desktop عند التصغير */
  .lg\:w-\[80px\] .user-profile-section .absolute.bottom-full {
    left: 100% !important;
    bottom: 0 !important;
    right: auto !important;
    margin-left: 0.75rem !important;
    width: 12rem !important;
  }
}

/* Smooth transitions for all sidebar state changes */
.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;
}

/* Fix overflow issues on main layout */
.flex.h-screen.overflow-hidden {
  overflow: hidden !important;
}

/* Ensure content area adjusts properly */
.flex-1.flex.flex-col.relative.overflow-hidden {
  min-width: 0;
  flex: 1 1 0%;
}

/* FIX #1: تحسين Tooltips - تظهر عند hover فقط في الوضع المصغر */
.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;
}

/* تأكد من أن الـ tooltip يظهر فقط في وضع collapsed */
@media (min-width: 1024px) {
  .lg\:w-\[280px\] .modern-nav-item>div[x-show] {
    display: none !important;
  }
}

/* Profile dropdown positioning - prevent below sidebar issue */
/* FIX: Popover Menu يظهر فوق Navigation List */
.user-profile-section {
  position: relative;
  Enhanced Sidebar Styles Added: 2025-12-26========================================*/
  /* ========================================
   Sidebar Collapsed State Enhancements
   ======================================== */

  /* Sidebar container when collapsed - prevent overflow issues */
  .modern-sidebar {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: relative;
    isolation: isolate;
    /* إنشاء stacking context منفصل */
  }

  /* Hide scrollbar when sidebar collapsed to prevent visual glitches */
  .modern-sidebar.lg\:w-\[80px\] .sidebar-scroll {
    overflow-x: hidden !important;
  }

  /* Navigation - create separate stacking context */
  .sidebar-scroll {
    overflow-x: hidden !important;
    isolation: isolate;
    /* عزل Navigation في stacking context منفصل */
  }

  /* Section containers in collapsed state - better spacing */
  .sidebar-section-container {
    overflow: hidden;
    transition: all 0.3s ease;
  }

  /* Logo area - proper alignment when collapsed */
  .sidebar-logo-area .brand-text-container {
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Navigation items - prevent text overflow when collapsed */
  .modern-nav-item span {
    overflow: hidden;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Tooltips positioning - ensure they appear correctly */
  .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 - responsive adjustments */
  .user-profile-section {
    overflow: hidden;
  }

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

  /* Section headers - proper centering when collapsed */
  .section-header {
    transition: all 0.3s ease;
    overflow: hidden;
  }

  /* Mobile responsive fixes */
  @media (max-width: 1023px) {
    .modern-sidebar {
      width: 280px !important;
      max-width: 280px;
    }

    /* FIX #2: إظهار اسم الموقع في mobile */
    .modern-sidebar .brand-text-container {
      opacity: 1 !important;
      width: auto !important;
      display: flex !important;
    }

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

    /* FIX #3: تحسين موضع dropdown الـ profile في mobile */
    .user-profile-section .absolute.bottom-full {
      position: fixed !important;
      bottom: 80px !important;
      right: 20px !important;
      left: 20px !important;
      width: auto !important;
    }
  }

  /* Desktop collapsed state */
  @media (min-width: 1024px) {

    /* When collapsed, center icons properly */
    .lg\:w-\[80px\] .modern-nav-item {
      justify-content: center;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    /* Hide section containers padding when collapsed */
    .lg\:w-\[80px\] .sidebar-section-container {
      margin: 0 4px 12px 4px;
      padding: 4px;
    }

    /* Logo container centering when collapsed */
    .lg\:w-\[80px\] .sidebar-logo-area {
      padding-left: 0;
      padding-right: 0;
    }

    /* User profile adjustments when collapsed */
    .lg\:w-\[80px\] .user-profile-section {
      padding-left: 8px;
      padding-right: 8px;
    }

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

    /* FIX #3: تحسين موضع dropdown الـ profile في desktop عند التصغير */
    .lg\:w-\[80px\] .user-profile-section .absolute.bottom-full {
      left: 100% !important;
      bottom: 0 !important;
      right: auto !important;
      margin-left: 0.75rem !important;
      width: 12rem !important;
    }
  }

  /* Smooth transitions for all sidebar state changes */
  .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;
  }

  /* Fix overflow issues on main layout */
  .flex.h-screen.overflow-hidden {
    overflow: hidden !important;
  }

  /* Ensure content area adjusts properly */
  .flex-1.flex.flex-col.relative.overflow-hidden {
    min-width: 0;
    flex: 1 1 0%;
  }

  /* FIX #1: تحسين Tooltips - تظهر عند hover فقط في الوضع المصغر */
  .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;
  }

  /* تأكد من أن الـ tooltip يظهر فقط في وضع collapsed */
  @media (min-width: 1024px) {
    .lg\:w-\[280px\] .modern-nav-item>div[x-show] {
      display: none !important;
    }
  }

  /* Profile dropdown positioning - prevent below sidebar issue */
  /* FIX: Popover Menu يظهر فوق Navigation List */
  .user-profile-section {
    position: relative;
    z-index: 1000 !important;
    /* زيادة z-index لضمان الظهور فوق Navigation */
  }

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

  /* Ensure profile dropdown appears above other elements */
  /* FIX: استخدام fixed positioning للخروج من stacking context الخاص بـ sidebar */
  .user-profile-section [style*="position: fixed"] {
    z-index: 99999 !important;
    /* أعلى z-index ممكن */
    pointer-events: auto;
  }

  /* Fallback for absolute positioned dropdowns */
  .user-profile-section .absolute {
    z-index: 9999 !important;
  }

  /* Navigation should be below profile section */
  nav.sidebar-scroll {
    z-index: 1 !important;
    position: relative;
  }

  /* تأكد من أن sidebar لا يحجب fixed elements */
  .modern-sidebar {
    z-index: 50;
    /* نفس z-index الموجود في HTML */
  }