:root {
  --theme-pink: #c4569d;
  --theme-purple: #7a47c7;
  --theme-pink-dark: #a64684;
  --theme-purple-dark: #6434b0;
  --theme-soft: #f7effa;
  --theme-soft-border: #eadcf5;
  --theme-text: #4a356a;
  /* Left sidebar (purple rail) */
  --sidebar-hover-bg: rgba(255, 255, 255, 0.14);
  --sidebar-hover-bg-strong: rgba(255, 255, 255, 0.22);
  --sidebar-hover-shadow: 0 4px 14px rgba(40, 20, 70, 0.25);
  --sidebar-transition: background-color 0.22s ease, color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

/* Bootstrap color system overrides */
:root,
[data-bs-theme="light"] {
  --bs-primary: var(--theme-purple);
  --bs-primary-rgb: 122, 71, 199;
  --bs-link-color: var(--theme-purple);
  --bs-link-hover-color: var(--theme-purple-dark);
}

body {
  background-color: #f9f4fc;
}

#page-topbar,
body[data-topbar="dark"] #page-topbar {
  background: linear-gradient(135deg, #c4569d 0%, #7a47c7 100%);
  box-shadow: 0 2px 8px rgba(89, 44, 140, 0.2);
}

.navbar-header .dropdown .show.header-item,
body[data-topbar="dark"] .navbar-header .dropdown .show.header-item {
  background-color: rgba(255, 255, 255, 0.12);
}

.header-item,
.noti-icon i,
.header-item:hover,
body[data-topbar="dark"] .header-item,
body[data-topbar="dark"] .header-item:hover,
body[data-topbar="dark"] .noti-icon i {
  color: #ffffff;
}

.header-profile-user {
  background-color: rgba(255, 255, 255, 0.28);
}

.app-search .form-control,
body[data-topbar="dark"] .app-search .form-control {
  background-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.app-search .form-control::placeholder,
body[data-topbar="dark"] .app-search .form-control::placeholder {
  color: rgba(255, 255, 255, 0.82);
}

.app-search span,
body[data-topbar="dark"] .app-search span {
  color: rgba(255, 255, 255, 0.92);
}

.dropdown-menu {
  border-color: var(--theme-soft-border);
}

a {
  color: var(--theme-purple);
}

a:hover {
  color: var(--theme-purple-dark);
}

.btn-primary {
  background: linear-gradient(135deg, var(--theme-pink) 0%, var(--theme-purple) 100%);
  border-color: var(--theme-purple);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
  background: linear-gradient(135deg, var(--theme-pink-dark) 0%, var(--theme-purple-dark) 100%);
  border-color: var(--theme-purple-dark);
}

.btn-outline-primary {
  color: var(--theme-purple);
  border-color: var(--theme-purple);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
  background-color: var(--theme-purple);
  border-color: var(--theme-purple);
}

.text-primary {
  color: var(--theme-purple) !important;
}

.bg-primary,
.badge.bg-primary {
  background: linear-gradient(135deg, var(--theme-pink) 0%, var(--theme-purple) 100%) !important;
}

.nav-pills .nav-link.active,
.page-item.active .page-link {
  background-color: var(--theme-purple);
  border-color: var(--theme-purple);
}

.page-link {
  color: var(--theme-purple);
}

.page-link:hover {
  color: var(--theme-purple-dark);
}

.form-control:focus,
.form-select:focus {
  border-color: #b99be2;
  box-shadow: 0 0 0 0.15rem rgba(122, 71, 199, 0.18);
}

.form-check-input:checked {
  background-color: var(--theme-purple);
  border-color: var(--theme-purple);
}

.vertical-menu,
body[data-sidebar="dark"] .vertical-menu {
  background: linear-gradient(180deg, #bf589f 0%, #7a47c7 100%);
}

.navbar-brand-box,
body[data-sidebar="dark"] .navbar-brand-box {
  background: transparent;
}

#sidebar-menu ul li a,
body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: rgba(255, 255, 255, 0.88);
}

.menu-title,
body[data-sidebar="dark"] .menu-title {
  color: rgba(255, 255, 255, 0.62) !important;
}

#sidebar-menu ul li a i,
body[data-sidebar="dark"] #sidebar-menu ul li a i {
  color: rgba(255, 255, 255, 0.82);
}

#sidebar-menu ul li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li a:hover {
  color: #ffffff;
}

/* ---- Sidebar menu hover (expanded) ---- */
body:not(.vertical-collpsed) #sidebar-menu > ul > li > a {
  transition: var(--sidebar-transition);
}

body:not(.vertical-collpsed) #sidebar-menu > ul > li > a i {
  display: inline-block;
  transition: transform 0.22s ease, color 0.22s ease;
}

body:not(.vertical-collpsed) #sidebar-menu > ul > li > a:hover {
  background-color: var(--sidebar-hover-bg) !important;
  box-shadow: var(--sidebar-hover-shadow);
  color: #ffffff !important;
}

body:not(.vertical-collpsed) #sidebar-menu > ul > li > a:hover i {
  color: #ffffff !important;
  transform: scale(1.06);
}

body:not(.vertical-collpsed)[data-sidebar="dark"] #sidebar-menu > ul > li > a:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.mm-active,
.mm-active > a,
.mm-active > a > i,
.mm-active .active,
.mm-active .active i {
  color: #ffffff !important;
}

/* Submenu links on purple gradient (expanded + collapsed flyout once themed below) */
#sidebar-menu ul li ul.sub-menu li a,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a {
  color: rgba(255, 255, 255, 0.72) !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  border-radius: 6px;
}

#sidebar-menu ul li ul.sub-menu li a:hover,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover,
#sidebar-menu ul li ul.sub-menu li a.active,
body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a.active {
  color: #ffffff !important;
}

#sidebar-menu ul li ul.sub-menu li a:hover {
  background-color: var(--sidebar-hover-bg-strong) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

body[data-sidebar="dark"] #sidebar-menu ul li ul.sub-menu li a:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Dark sidebar + collapsed: Minible dark flyout — keep light link colors */
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a {
  color: rgba(255, 255, 255, 0.85) !important;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover,
body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul a.active {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.vertical-collpsed) #sidebar-menu > ul > li > a,
  body:not(.vertical-collpsed) #sidebar-menu > ul > li > a i,
  #sidebar-menu ul li ul.sub-menu li a,
  body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a {
    transition: none !important;
  }

  body:not(.vertical-collpsed) #sidebar-menu > ul > li > a:hover i {
    transform: none !important;
  }
}

/*
 * BeSocial collapsed sidebar: Minible defaults to white flyout + blue/gray text.
 * Keep the same purple gradient and light text as the open menu.
 */
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu {
  background: linear-gradient(180deg, #bf589f 0%, #7a47c7 100%) !important;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a {
  transition: var(--sidebar-transition);
  border-radius: 8px;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a:hover,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a:active,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a:focus {
  color: rgba(255, 255, 255, 0.95) !important;
  background-color: var(--sidebar-hover-bg) !important;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a:hover i,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a:active i,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li > a:focus i {
  color: rgba(255, 255, 255, 0.92) !important;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover {
  z-index: 10010;
  isolation: isolate;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > a {
  color: #ffffff !important;
  /* Opaque panel (Minible row was semi-transparent / showed dashboard through) */
  background: linear-gradient(180deg, #bf589f 0%, #a75ea7 100%) !important;
  background-color: #9d4db3 !important;
  box-shadow: var(--sidebar-hover-shadow) !important;
  position: relative;
  z-index: 1;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > a i {
  color: #ffffff !important;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > a span {
  color: rgba(255, 255, 255, 0.95) !important;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > ul,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul ul {
  background: linear-gradient(180deg, #bf589f 0%, #a75ea7 100%) !important;
  background-color: #9d4db3 !important;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > ul a,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > ul li > a {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: background-color 0.2s ease, color 0.2s ease;
  border-radius: 6px;
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > ul a:hover,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a:hover,
body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu li a.active {
  color: #ffffff !important;
  background-color: var(--sidebar-hover-bg-strong) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

body.vertical-collpsed:not([data-sidebar="dark"]) .vertical-menu #sidebar-menu > ul ul li.active a {
  color: #ffffff !important;
  background-color: #6b3696 !important;
}

/* MetisMenu hides closed submenus; on collapsed hover the flyout must fully expand */
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.sub-menu,
body.vertical-collpsed .vertical-menu #sidebar-menu > ul > li:hover > ul.mm-collapse {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}

/*
 * Minible sets .vertical-collpsed .vertical-menu { position: absolute }, so the rail
 * scrolls with the page. Keep it viewport-fixed like the expanded sidebar (LTR + RTL).
 */
@media (min-width: 993px) {
  body.vertical-collpsed .vertical-menu {
    position: fixed !important;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
  }
}

/* Subtle active-item chip in sidebar */
#sidebar-menu ul li.mm-active > a {
  background-color: rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  transition: var(--sidebar-transition);
}

#sidebar-menu ul li.mm-active > a:hover {
  background-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: var(--sidebar-hover-shadow);
}

.card {
  border-color: var(--theme-soft-border);
}

.table thead th {
  color: var(--theme-text);
}