/* ==========================================================================
   Reshape in 90 — Royal Purple & Electric Gold Design System & Contrast Engine
   ========================================================================== */
:root {
  /* Reshape in 90 Signature Royal Purple Palette */
  --royal-purple-950: #140A26;
  --royal-purple-900: #1E0F38;
  --royal-purple-800: #2D1852; /* Primary Brand Deep Purple */
  --royal-purple-700: #391C64; /* Core Royal Purple */
  --royal-purple-600: #4D2686;
  --royal-purple-500: #5A289D; /* Vivid Royal Purple Accent */
  --royal-purple-400: #783DBE;
  --royal-purple-300: #9B63E0;
  --royal-purple-200: #BA8DF0;
  --royal-purple-100: #EADBFA;
  --royal-purple-50:  #F3EDFC; /* Soft Lavender Tint */

  /* Electric Gold Signature Accent */
  --electric-gold-500: #FED700;
  --electric-gold-600: #E5C200;
  --electric-gold-700: #CA8A04;
  --electric-gold-800: #A16207;
  --electric-gold-900: #854D0E;

  /* High-Contrast Obsidian */
  --obsidian-dark: #08050E;

  /* Remap primary system variables to Royal Purple */
  --primary-50: #F3EDFC;
  --primary-100: #EADBFA;
  --primary-200: #D8C5F5;
  --primary-300: #BA8DF0;
  --primary-400: #9B63E0;
  --primary-500: #783DBE;
  --primary-600: #2D1852; /* Royal Purple */
  --primary-700: #391C64; /* Core Purple Hover */
  --primary-800: #1E0F38; /* Deep Purple Active */
  --primary-900: #140A26;

  --brand: #2D1852;
  --brand-purple: #2D1852;
  --brand-purple-hover: #391C64;
  --brand-gold: #FED700;
  --primary-light: rgba(45, 24, 82, 0.12);
}

.jvm-zoom-btn.jvm-zoomin,
.jvm-zoom-btn.jvm-zoomout {
  top: 10px;
  background: #d1d5db;
  color: #111827;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2px;
}

.slick-dots {
  display: flex !important;
}

.fc-toolbar-title {
  font-size: 24px !important;
  font-weight: 600;
}

.fc-button {
  border-color: var(--primary-600) !important;
  background: #fff !important;
  color: var(--primary-600) !important;
  font-weight: 600 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-width: 80px !important;
}

.fc-button:hover {
  background-color: var(--primary-50) !important;
}

.fc-button-active {
  color: #fff !important;
  background-color: var(--primary-600) !important;
}

.fc-button-active:hover {
  color: #fff !important;
  background-color: var(--primary-600) !important;
}

.fc-button-active:focus,
.fc .fc-button-primary:not(:disabled):active:focus {
  box-shadow: none !important;
}

.fc-toolbar-chunk {
  display: flex !important;
}

.fc .fc-button-primary:focus {
  box-shadow: none !important;
}

.fc-h-event {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-h-event .fc-event-main {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-v-event .fc-event-main {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  background-color: var(--primary-50) !important;
  color: var(--primary-600) !important;
}

.fc-daygrid-day-number {
  transition: background-color 0.2s;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  border-radius: 50%;
}

.fc-daygrid-day:hover .fc-daygrid-day-number {
  background-color: var(--primary-100) !important;
  color: var(--primary-600) !important;
  transition: background-color 0.2s;
}

.slider-progress .active {
  transition: all 0.3s linear;
}

.slick-list {
  margin: 0 -7px;
}

.slick-slide > div {
  padding: 0 10px;
}

.center-gap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.inline-grid {
  display: inline-grid;
}

.image-upload__boxInner.custom {
  display: flex;
  justify-content: center;
  align-items: center;
}

table.dataTable th.dt-type-numeric,
table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: unset !important;
}

/* Hide all submenus by default */
.sidebar-submenu {
  /* display: none; */
  list-style: none;
  padding-left: 20px;
  /* Adjust as needed */
}

.sidebar-menu .sidebar-submenu {
  display: block;
}

/* Optional: Add transition for smooth toggle */
.sidebar-menu .dropdown .sidebar-submenu {
  transition: max-height 0.3s linear;
  overflow: hidden;
  max-height: 0px;
}

/* .sidebar-menu .dropdown.open .sidebar-submenu {
  max-height: 1000px;
} */

.sidebar-menu li > a > i {
  margin-inline-end: 0;
}

.mr-10 {
  margin-right: 10px !important;
}

.sidebar-menu .sidebar-submenu li a {
  gap: 12px;
}

.sidebar-menu .sidebar-submenu li > .active-page {
  background-color: var(--button-secondary);
  color: var(--text-primary-light);
}

.sidebar-menu li > a.active-page:hover {
  color: var(--text-primary-light);
}
.me-8 {
  margin-right: 8px;
}

.gap-10 {
  display: flex;
  gap: 8px;
}

.w-33 {
  width: 33.33%;
}

.overlay::after {
  position: absolute;
  content: "";
  top: 0;
  inset-inline-start: 0;
  width: 0;
  height: 100%;
  background-color: #000;
  opacity: 0.65;
  transition: all 0.3s;
  z-index: 2;
}

.overlay.active::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   1. Sidebar Navigation & Active States (Solves Yellow Box & Invisible Text)
   -------------------------------------------------------------------------- */
.sidebar-menu .sidebar-menu-group-title {
  color: #7B6B94 !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-block: 0.85rem 0.35rem !important;
  padding-left: 0.5rem !important;
}

.sidebar-menu li a {
  border-radius: 10px !important;
  color: #554868 !important;
  font-weight: 500 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.sidebar-menu li a:hover {
  background-color: #F3EDFC !important;
  color: #2D1852 !important;
}

.sidebar-menu li a:hover .menu-icon,
.sidebar-menu li a:hover i {
  color: #5A289D !important;
  transform: scale(1.08);
  transition: transform 0.2s ease;
}

/* Sidebar Active Page — Royal Purple gradient, crisp white text, Electric Gold icon */
.sidebar-menu li > a.active-page,
.sidebar-menu li.dropdown.open > a,
.sidebar-menu li.dropdown.dropdown-open > a {
  background: linear-gradient(135deg, #2D1852 0%, #391C64 60%, #5A289D 100%) !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 14px rgba(45, 24, 82, 0.28) !important;
}

.sidebar-menu li > a.active-page:hover {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, #391C64 0%, #4D2686 60%, #5A289D 100%) !important;
}

.sidebar-menu li > a.active-page .menu-icon,
.sidebar-menu li > a.active-page i {
  color: #FED700 !important; /* Signature Electric Gold icon */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.sidebar-menu li > a.active-page span {
  color: #FFFFFF !important;
}

/* Submenu active item */
.sidebar-menu .sidebar-submenu li > a.active-page,
.sidebar-menu .sidebar-submenu li.active-page a {
  background-color: #F3EDFC !important;
  color: #2D1852 !important;
  font-weight: 600 !important;
  border-left: 3px solid #5A289D !important;
}

/* --------------------------------------------------------------------------
   2. Primary Action Buttons — Royal Purple with Crisp White Text
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-primary-600,
button.btn-primary,
a.btn-primary {
  background: linear-gradient(135deg, #2D1852 0%, #391C64 100%) !important;
  border: 1px solid #2D1852 !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(45, 24, 82, 0.22) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.btn-primary:hover,
.btn-primary-600:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: linear-gradient(135deg, #391C64 0%, #5A289D 100%) !important;
  border-color: #391C64 !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(45, 24, 82, 0.32) !important;
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-primary-600:active {
  background: #1E0F38 !important;
  border-color: #1E0F38 !important;
  transform: translateY(0);
}

.btn-primary *,
.btn-primary-600 * {
  color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   3. Universal Contrast Safeguards (Solves "text in yellow colour is not clearly showing")
   -------------------------------------------------------------------------- */
/* A: Whenever yellow / warning is a background, text MUST be Dark Obsidian #08050E */
.bg-warning,
.badge-warning,
.btn-warning,
.btn-gold,
.bg-gold,
.bg-warning-500,
.bg-warning-600,
[class*="bg-warning"]:not(.bg-warning-50):not(.bg-warning-100) {
  background-color: #FED700 !important;
  color: #08050E !important;
  font-weight: 700 !important;
}

.bg-warning *,
.badge-warning *,
.btn-warning *,
.btn-gold *,
.bg-gold *,
.bg-warning-500 *,
.bg-warning-600 * {
  color: #08050E !important;
}

/* B: Yellow text on light surfaces is unreadable.
   Ensure all warning/amber text uses rich bronze/amber that passes WCAG AA contrast on white */
.text-warning,
.text-warning-600 {
  color: #B45309 !important; /* Deep rich amber — sharp and clear on white/light bg */
}

.text-warning-500 {
  color: #D97706 !important;
}

.text-warning-700 {
  color: #92400E !important;
}

.text-warning-800 {
  color: #78350F !important;
}

/* C: Primary text utility (Royal Purple — readable on white surfaces) */
.text-primary,
.text-primary-600 {
  color: #2D1852 !important;
}

.text-primary-700 {
  color: #1E0F38 !important;
}

.text-primary-500 {
  color: #4D2686 !important;
}

/* --------------------------------------------------------------------------
   4. Manage Categories Button Hover & Active States
   -------------------------------------------------------------------------- */
.btn-category-manage {
  background-color: #ffffff !important;
  color: #2D1852 !important;
  border: 1.5px solid #2D1852 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.btn-category-manage:hover {
  background: linear-gradient(135deg, #2D1852 0%, #391C64 100%) !important;
  color: #FFFFFF !important;
  border-color: #2D1852 !important;
  box-shadow: 0 4px 14px rgba(45, 24, 82, 0.28) !important;
  transform: translateY(-1px);
}

.btn-category-manage:hover * {
  color: #FFFFFF !important;
}

.btn-category-manage:active {
  background-color: #1E0F38 !important;
  border-color: #1E0F38 !important;
  color: #FFFFFF !important;
  transform: translateY(0);
}

/* Hover background utility classes */
.hover-bg-neutral-50:hover {
  background-color: #f9fafb !important;
}

.hover-bg-neutral-100:hover {
  background-color: #f3f4f6 !important;
  color: #111827 !important;
}

.hover-bg-neutral-200:hover {
  background-color: #e5e7eb !important;
}

/* --------------------------------------------------------------------------
   5. Category Filter Pills (Active & Inactive Theme Styling)
   -------------------------------------------------------------------------- */
.category-filter-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1.5px solid transparent !important;
  user-select: none !important;
  text-decoration: none !important;
}

/* Inactive State — Royal purple tinted border & high contrast */
.category-filter-btn:not(.active) {
  background-color: #ffffff !important;
  color: #391C64 !important;
  border-color: #EADBFA !important;
  box-shadow: 0 1px 3px rgba(45, 24, 82, 0.05) !important;
}

.category-filter-btn:not(.active) .category-icon {
  color: #5A289D !important;
  transition: transform 0.2s ease !important;
}

.category-filter-btn:not(.active):hover {
  background-color: #F3EDFC !important;
  color: #2D1852 !important;
  border-color: #D8C5F5 !important;
  box-shadow: 0 3px 10px rgba(45, 24, 82, 0.12) !important;
  transform: translateY(-1px);
}

.category-filter-btn:not(.active):hover .category-icon {
  transform: scale(1.12);
  color: #2D1852 !important;
}

/* Active State — Royal Purple gradient with Electric Gold icon & crisp white text */
.category-filter-btn.active {
  background: linear-gradient(135deg, #2D1852 0%, #391C64 100%) !important;
  color: #FFFFFF !important;
  border-color: #2D1852 !important;
  box-shadow: 0 4px 14px rgba(45, 24, 82, 0.28) !important;
}

.category-filter-btn.active * {
  color: #FFFFFF !important;
}

.category-filter-btn.active .category-icon,
.category-filter-btn.active .category-icon * {
  color: #FED700 !important;
}

/* --------------------------------------------------------------------------
   6. Table & Pagination Polish
   -------------------------------------------------------------------------- */
.table-bg th {
  background: #FAF8FD !important;
  color: #2D1852 !important;
  border-bottom: 2px solid #EADBFA !important;
  font-weight: 600 !important;
}

.table-bg tr:hover td {
  background-color: #F8F5FD !important;
}

.custom-pagination .pagination-btn.active {
  background-color: #2D1852 !important;
  color: #FFFFFF !important;
  border-color: #2D1852 !important;
  box-shadow: 0 2px 8px rgba(45, 24, 82, 0.25) !important;
  font-weight: bold;
}

.custom-pagination .pagination-btn:hover:not(.active):not(.disabled) {
  background-color: #F3EDFC !important;
  color: #2D1852 !important;
  border-color: #D8C5F5 !important;
}

/* --------------------------------------------------------------------------
   7. Form Controls & Search Input Focus
   -------------------------------------------------------------------------- */
.search-input-wrapper .search-input:focus,
.form-control:focus,
.form-select:focus {
  border-color: #5A289D !important;
  box-shadow: 0 0 0 3px rgba(90, 40, 157, 0.16) !important;
}

/* --------------------------------------------------------------------------
   8. Badges
   -------------------------------------------------------------------------- */
.badge.bg-primary-50,
.badge.bg-primary-100 {
  background-color: #F3EDFC !important;
  color: #2D1852 !important;
  border: 1px solid #D8C5F5 !important;
  font-weight: 600 !important;
}

.badge.bg-warning-50,
.badge.bg-warning-100 {
  background-color: #FEF9C3 !important;
  color: #854D0E !important;
  border: 1px solid #FEF08A !important;
  font-weight: 600 !important;
}