/* =============================================================================
   Admin Theme — Visual overrides on Vuexy/Bootstrap 4
   Uses design-tokens.css variables only — no hardcoded palette colors
   ============================================================================= */

/* ── Base & Typography ── */
body,
#content_body {
  font-family: var(--font-family) !important;
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary) !important;
  transition: background-color var(--transition-base), color var(--transition-base);
}

body.light-mode {
  background-color: var(--bg-primary) !important;
}

body.dark-layout {
  background-color: var(--bg-primary) !important;
}

a {
  color: var(--accent-primary);
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

.text-muted,
.text-secondary {
  color: var(--text-muted) !important;
}

/* ── Page Loader (Premium orbital) ── */
html.loading,
html.loading body {
  overflow: hidden;
}

.loader {
  position: fixed;
  z-index: var(--z-loader);
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--loader-bg) !important;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader.is-exiting .loader__stage {
  transform: scale(0.92);
  opacity: 0;
}

.loader__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%, rgba(var(--accent-primary-rgb, 91, 84, 217), 0.08), transparent 70%);
  pointer-events: none;
}

.loader__stage {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.loader__logo-wrap {
  position: relative;
  z-index: 2;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: var(--surface-card);
  box-shadow: 0 4px 24px rgba(var(--accent-primary-rgb, 91, 84, 217), 0.2);
  animation: loaderLogoFloat 2.4s ease-in-out infinite;
}

.loader__logo {
  width: 44px;
  height: 44px;
  object-fit: contain;
  border-radius: 8px;
}

.loader__orbit {
  position: absolute;
  border-radius: 50%;
  border: 2px solid transparent;
}

.loader__orbit--outer {
  inset: 0;
  border-top-color: var(--accent-primary);
  border-right-color: rgba(var(--accent-primary-rgb, 91, 84, 217), 0.15);
  animation: loaderSpin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loader__orbit--inner {
  inset: 12px;
  border-bottom-color: color-mix(in srgb, var(--accent-primary) 60%, transparent);
  border-left-color: rgba(var(--accent-primary-rgb, 91, 84, 217), 0.08);
  animation: loaderSpin 0.85s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
}

.loader__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}

.loader__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 70%, #fff));
  transition: width 0.15s linear;
  border-radius: 0 2px 2px 0;
}

html[dir="rtl"] .loader__progress-bar {
  margin-inline-start: auto;
  background: linear-gradient(270deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 70%, #fff));
  border-radius: 2px 0 0 0;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

@keyframes loaderLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Hide old sk-chase spinner */
.loader .sk-chase { display: none !important; }

/* ── Performance: GPU layers for animated UI ── */
.loader__orbit,
.loader__logo-wrap,
.main-menu .navigation > li > a,
.card,
.btn,
.table tbody tr {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── Navbar (no backdrop-filter — better perf) ── */
.header-navbar,
.navbar-light {
  background: var(--navbar-bg) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.breadcrumb-text,
.breadcrumb-text .user-name {
  color: var(--text-secondary) !important;
  font-family: var(--font-family);
  font-size: 14px;
}

.breadcrumb-text a .user-name {
  transition: color var(--transition-fast);
}

.breadcrumb-text a:hover .user-name {
  color: var(--accent-primary) !important;
}

.header-navbar .nav-link {
  color: var(--text-secondary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.header-navbar .nav-link:hover {
  color: var(--accent-primary) !important;
}

.header-navbar .nav-link .ficon,
.header-navbar .nav-link i.feather,
.header-navbar .navbar-container ul.nav li i.ficon {
  transition: transform var(--transition-fast), color var(--transition-fast), stroke var(--transition-fast);
}

/* Override Vuexy fixed hover (#20a2c6) — use selected primary */
.header-navbar .navbar-container ul.nav li i.ficon:hover,
.header-navbar .navbar-container ul.nav li a.nav-link:hover i.ficon,
.header-navbar .navbar-container ul.nav li a.nav-link:hover i.feather,
.header-navbar .navbar-container ul.nav li a.nav-link:hover .ficon,
.header-navbar .navbar-container ul.nav li a.nav-link:hover svg.feather,
.header-navbar .nav-link:hover .ficon,
.header-navbar .nav-link:hover i.feather,
.header-navbar .nav-link:hover svg.feather {
  transform: scale(1.1);
  color: var(--accent-primary) !important;
  stroke: var(--accent-primary);
}

.header-navbar .navbar-container ul.nav li.dropdown-language a.nav-link:hover .selected-language {
  color: var(--accent-primary) !important;
}

body.dark-layout .header-navbar .navbar-container ul.nav li i.ficon:hover,
body.dark-layout .header-navbar .navbar-container ul.nav li a.nav-link:hover i.ficon,
body.dark-layout .header-navbar .navbar-container ul.nav li a.nav-link:hover i.feather,
body.dark-layout .header-navbar .navbar-container ul.nav li a.nav-link:hover .ficon,
body.dark-layout .header-navbar .navbar-container ul.nav li a.nav-link:hover svg.feather {
  color: var(--accent-primary) !important;
  stroke: var(--accent-primary);
}

#layout-mode .feather,
#layout-mode .ficon {
  transition: transform var(--transition-base), color var(--transition-base);
}

#layout-mode:hover .feather,
#layout-mode:hover .ficon,
#layout-mode:hover svg.feather {
  transform: rotate(15deg) scale(1.1);
  color: var(--accent-primary) !important;
  stroke: var(--accent-primary);
}

#color-picker-toggle:hover #color-picker-icon,
#color-picker-toggle:hover #color-picker-icon svg {
  color: var(--accent-primary) !important;
  stroke: var(--accent-primary);
  transform: scale(1.1);
}

/* ── Sidebar ── */
.main-menu.menu-light {
  background: var(--sidebar-bg) !important;
  border-inline-end: 1px solid var(--border-subtle);
  transition: background var(--transition-base);
  box-shadow: none !important;
}

.main-menu .navigation > li > a {
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  margin: 2px 12px;
  padding: 10px 16px;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  position: relative;
}

.main-menu .navigation-main > li > a .menu-title {
  font-size: 0.95rem;
  line-height: 1.4;
}

.main-menu .navigation > li > a i,
.main-menu .navigation > li > a .feather {
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.main-menu .navigation > li > a:hover {
  background: var(--surface-hover);
  color: var(--accent-primary);
}

.main-menu .navigation > li > a:hover i,
.main-menu .navigation > li > a:hover .feather {
  transform: scale(1.08);
  color: var(--accent-primary);
}

.main-menu .navigation > li.active:not(.has-sub) > a {
  background: rgba(var(--accent-primary-rgb), 0.16) !important;
  color: var(--accent-primary) !important;
  font-weight: var(--font-weight-medium);
  box-shadow: none !important;
}

/* Parent section open — subtle, NOT same as selected child */
.main-menu .navigation > li.has-sub.open > a,
.main-menu .navigation > li.has-sub.sidebar-group-active > a {
  background: transparent !important;
  color: var(--text-secondary) !important;
  font-weight: var(--font-weight-medium);
  box-shadow: none !important;
}

.main-menu .navigation > li.has-sub.open > a .menu-title,
.main-menu .navigation > li.has-sub.sidebar-group-active > a .menu-title {
  color: var(--text-primary) !important;
}

.main-menu .navigation > li.has-sub.open > a > i.feather:not(.icon-circle),
.main-menu .navigation > li.has-sub.sidebar-group-active > a > i.feather:not(.icon-circle) {
  color: var(--accent-primary) !important;
}

.main-menu .navigation > li.active:not(.has-sub) > a::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--accent-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  animation: sidebarIndicatorIn var(--transition-base) ease;
}

.main-menu .navigation > li.has-sub.open > a::before,
.main-menu .navigation > li.has-sub.sidebar-group-active > a::before {
  display: none !important;
}

@keyframes sidebarIndicatorIn {
  from { height: 0; opacity: 0; }
  to { height: 60%; opacity: 1; }
}

.main-menu .navigation .menu-content > li.active > a {
  color: var(--accent-primary) !important;
}

.navbar-header {
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--border-subtle);
}

/* ── Sidebar: submenu / section children ── */
.main-menu .navigation .menu-content {
  background: transparent !important;
  margin: 4px 16px 8px 0;
  padding: 6px 0;
  padding-inline-start: 14px;
  border-inline-start: 1px solid var(--border-subtle);
  list-style: none;
}

.main-menu .navigation .menu-content > li {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0;
}

.main-menu .navigation .menu-content > li > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  border-radius: var(--radius-md);
  margin: 2px 6px;
  padding: 8px 12px;
  font-size: 0.86rem;
  line-height: 1.35;
  font-weight: var(--font-weight-normal);
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}

/* Submenu bullet — icon-circle */
.main-menu .navigation .menu-content > li > a .feather.icon-circle {
  width: 8px !important;
  height: 8px !important;
  min-width: 8px;
  margin: 0 !important;
  stroke-width: 2px;
  opacity: 0.35;
  flex-shrink: 0;
  transition: opacity var(--transition-fast), stroke var(--transition-fast), fill var(--transition-fast);
}

.main-menu .navigation .menu-content > li > a:hover {
  background: var(--surface-hover);
  color: var(--text-secondary);
}

.main-menu .navigation .menu-content > li > a:hover .feather.icon-circle {
  opacity: 0.65;
  stroke: var(--accent-primary);
}

/* Selected sub-item — pill on link only */
.main-menu .navigation .menu-content > li.active {
  background: transparent !important;
  box-shadow: none !important;
}

.main-menu .navigation .menu-content > li.active > a {
  background: rgba(var(--accent-primary-rgb), 0.16) !important;
  color: var(--accent-primary) !important;
  font-weight: var(--font-weight-medium);
  box-shadow: none !important;
}

.main-menu .navigation .menu-content > li.active > a .feather.icon-circle {
  opacity: 1;
  stroke: var(--accent-primary);
  fill: var(--accent-primary);
  stroke-width: 0;
}

.main-menu .navigation .menu-content > li.active > a::before {
  content: '';
  position: absolute;
  inset-inline-start: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 55%;
  background: var(--accent-primary);
  border-radius: var(--radius-full);
}

.main-menu .navigation li.has-sub > a:not(.mm-next):after {
  color: var(--text-muted) !important;
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.main-menu .navigation li.open > a:not(.mm-next):after {
  color: var(--accent-primary) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK MODE — Sidebar (overrides Vuexy dark-layout.css #10163A)
   ══════════════════════════════════════════════════════════════════════════ */
body.dark-layout .main-menu,
body.dark-layout .main-menu.menu-light,
body.dark-layout .main-menu-content,
body.dark-layout .main-menu-content .navigation-main {
  background-color: var(--sidebar-bg) !important;
}

body.dark-layout .main-menu .shadow-bottom {
  background: linear-gradient(-180deg, var(--sidebar-bg) 40%, transparent 100%) !important;
}

body.dark-layout .main-menu.menu-light .navigation li a,
body.dark-layout .main-menu .navigation > li > a {
  color: var(--text-secondary) !important;
}

body.dark-layout .main-menu .navigation > li > a i,
body.dark-layout .main-menu .navigation > li > a .feather,
body.dark-layout .main-menu-content .navigation-main .nav-item i {
  color: var(--text-muted) !important;
}

body.dark-layout .main-menu .navigation > li > a:hover,
body.dark-layout .main-menu .navigation .menu-content li:not(.active) > a:hover,
body.dark-layout .main-menu .navigation > li ul li:not(.active) > a:hover {
  color: var(--accent-primary) !important;
  background: var(--surface-hover) !important;
}

body.dark-layout .main-menu .navigation > li > a:hover i,
body.dark-layout .main-menu .navigation > li > a:hover .feather {
  color: var(--accent-primary) !important;
}

body.dark-layout .main-menu .navigation > li.active:not(.has-sub) > a {
  color: var(--accent-primary) !important;
  background: rgba(var(--accent-primary-rgb), 0.18) !important;
  box-shadow: none !important;
}

body.dark-layout .main-menu .navigation > li.has-sub.open > a,
body.dark-layout .main-menu .navigation > li.has-sub.sidebar-group-active > a,
body.dark-layout .main-menu-content .navigation-main .nav-item.open > a,
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active > a {
  color: var(--text-secondary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.dark-layout .main-menu .navigation > li.has-sub.open > a .menu-title,
body.dark-layout .main-menu .navigation > li.has-sub.sidebar-group-active > a .menu-title {
  color: var(--text-primary) !important;
}

body.dark-layout .main-menu .navigation > li.active:not(.has-sub) > a i,
body.dark-layout .main-menu .navigation > li.has-sub.open > a > i.feather:not(.icon-circle),
body.dark-layout .main-menu .navigation > li.has-sub.sidebar-group-active > a > i.feather:not(.icon-circle) {
  color: var(--accent-primary) !important;
}

body.dark-layout .main-menu .navigation .menu-content > li.active,
body.dark-layout .main-menu .navigation > li ul > li.active {
  background: transparent !important;
  box-shadow: none !important;
}

body.dark-layout .main-menu .navigation .menu-content > li.active > a,
body.dark-layout .main-menu .navigation > li ul > li.active > a {
  color: var(--accent-primary) !important;
  background: rgba(var(--accent-primary-rgb), 0.18) !important;
  box-shadow: none !important;
}

body.dark-layout .main-menu .navigation .menu-content > li.active > a i,
body.dark-layout .main-menu .navigation > li ul > li.active > a i,
body.dark-layout .main-menu .navigation .menu-content > li.active > a .feather.icon-circle {
  color: var(--accent-primary) !important;
  fill: var(--accent-primary) !important;
  stroke: var(--accent-primary) !important;
  opacity: 1 !important;
}

body.dark-layout .main-menu .navigation .menu-content,
body.dark-layout .main-menu-content .navigation-main .nav-item .menu-content,
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content {
  background-color: transparent !important;
  border-inline-start-color: var(--border-subtle) !important;
}

body.dark-layout .main-menu .navigation .menu-content > li > a,
body.dark-layout .main-menu .navigation .menu-content li:not(.active) > a,
body.dark-layout .main-menu .navigation > li ul li:not(.active) > a {
  color: var(--text-muted) !important;
  background-color: transparent !important;
}

body.dark-layout .main-menu-content .navigation-main .sidebar-group-active > a {
  background: transparent !important;
}

body.dark-layout .main-menu-content .navigation-main .nav-item.open > a:after,
body.dark-layout .main-menu-content .navigation-main .nav-item.active > a:after {
  color: var(--accent-primary) !important;
}

body.dark-layout .main-menu .navbar-header {
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--border-subtle);
}

body.dark-layout .main-menu .navbar-header .modern-nav-toggle,
body.dark-layout .main-menu .navbar-header .sidebar-menu-toggle {
  color: var(--text-secondary) !important;
  background: var(--surface-hover) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-layout .main-menu .navbar-header .modern-nav-toggle:hover,
body.dark-layout .main-menu .navbar-header .sidebar-menu-toggle:hover {
  color: var(--accent-primary) !important;
  background: var(--accent-muted) !important;
}

body.dark-layout.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active > a,
body.dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active > a {
  background: rgba(var(--accent-primary-rgb), 0.18) !important;
  box-shadow: none !important;
}

body.dark-layout .main-menu .navigation > li.active:not(.has-sub) > a::before {
  background: var(--accent-primary);
  box-shadow: none;
  opacity: 1;
}

body.dark-layout .main-menu .navigation > li.has-sub.open > a::before,
body.dark-layout .main-menu .navigation > li.has-sub.sidebar-group-active > a::before,
body.dark-layout .main-menu .navigation > li.open:not(.active) > a::before {
  display: none;
}

/* Vuexy dark-layout.css — neutralize broad sidebar-group-active / .active rules */
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active a {
  background: transparent !important;
  border-radius: 0 !important;
}

body.dark-layout .main-menu-content .navigation-main .nav-item.open > a {
  background-color: transparent !important;
}

body.dark-layout .main-menu-content .navigation-main .menu-content > li.active .menu-title,
body.dark-layout .main-menu-content .navigation-main .menu-content > li.active i,
body.dark-layout .main-menu-content .navigation-main .menu-content > li.active a {
  color: var(--accent-primary) !important;
}

body.dark-layout .main-menu-content .navigation-main .sidebar-group-active .menu-content .active a {
  background-color: rgba(var(--accent-primary-rgb), 0.18) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}

/* Vuexy components.css — kill legacy purple gradient on sidebar selected items */
.main-menu.menu-light .navigation > li.active:not(.has-sub) > a,
.main-menu.menu-light .navigation > li.nav-item.active:not(.has-sub) > a {
  background: rgba(var(--accent-primary-rgb), 0.16) !important;
  color: var(--accent-primary) !important;
  box-shadow: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
}

.main-menu.menu-light .navigation > li.open > a,
.main-menu.menu-light .navigation > li.sidebar-group-active > a,
.main-menu.menu-light .navigation > li.has-sub.open > a,
.main-menu.menu-light .navigation > li.has-sub.sidebar-group-active > a {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--text-secondary) !important;
}

.main-menu.menu-light .navigation > li ul .active,
.main-menu.menu-light .navigation > li .active,
.main-menu.menu-light .navigation > li ul li.active,
.main-menu.menu-light .navigation .menu-content > li.active {
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.main-menu.menu-light .navigation > li ul .active > a,
.main-menu.menu-light .navigation > li ul li.active > a,
.main-menu.menu-light .navigation .menu-content > li.active > a {
  background: rgba(var(--accent-primary-rgb), 0.16) !important;
  color: var(--accent-primary) !important;
  box-shadow: none !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
}

body.dark-layout .main-menu.menu-light .navigation > li ul .active > a,
body.dark-layout .main-menu.menu-light .navigation > li ul li.active > a,
body.dark-layout .main-menu.menu-light .navigation .menu-content > li.active > a {
  background: rgba(var(--accent-primary-rgb), 0.18) !important;
  color: var(--accent-primary) !important;
  box-shadow: none !important;
}

body.dark-layout .main-menu-content .navigation-main .nav-item.open > a,
body.dark-layout .main-menu-content .navigation-main .sidebar-group-active > a,
body.dark-layout .main-menu:not(.expanded) .navigation .sidebar-group-active > a {
  background-color: transparent !important;
  box-shadow: none !important;
}

body.dark-layout.menu-collapsed .main-menu:not(.expanded) .navigation-main li.active > a {
  background: rgba(var(--accent-primary-rgb), 0.18) !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar layout — keep menu scrollable when last sections expand
   (header + search sit above; content fills remaining height)
   ══════════════════════════════════════════════════════════════════════════ */
.main-menu.menu-fixed {
  display: flex;
  flex-direction: column;
  height: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  max-height: 100vh;
  max-height: calc(var(--vh, 1vh) * 100);
  overflow: hidden;
}

.main-menu.menu-fixed .navbar-header,
.main-menu.menu-fixed .admin-sidebar-search-wrap {
  flex-shrink: 0;
}

.main-menu.menu-fixed .main-menu-content {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  position: relative;
}

.main-menu.menu-fixed .main-menu-content .navigation-main {
  padding-bottom: 1.75rem;
}

/* ══════════════════════════════════════════════════════════════════════════
   Sidebar scrollbar — Perfect Scrollbar + native fallback
   ══════════════════════════════════════════════════════════════════════════ */
.main-menu .main-menu-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--accent-primary-rgb), 0.28) transparent;
}

.main-menu .main-menu-content::-webkit-scrollbar {
  width: 5px;
}

.main-menu .main-menu-content::-webkit-scrollbar-track {
  background: transparent !important;
  box-shadow: none !important;
}

.main-menu .main-menu-content::-webkit-scrollbar-thumb {
  background: rgba(var(--accent-primary-rgb), 0.28);
  border-radius: var(--radius-full);
}

.main-menu .main-menu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--accent-primary-rgb), 0.45);
}

/* Perfect Scrollbar (Vuexy sidebar) */
.main-menu .main-menu-content.ps .ps__rail-y,
.main-menu .main-menu-content.ps .ps__rail-x {
  background-color: transparent !important;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.main-menu .main-menu-content.ps.ps--scrolling-y .ps__rail-y,
.main-menu .main-menu-content.ps:hover .ps__rail-y,
.main-menu .main-menu-content.ps.ps--focus .ps__rail-y {
  opacity: 1;
}

.main-menu .main-menu-content.ps .ps__rail-y:hover,
.main-menu .main-menu-content.ps .ps__rail-y:focus,
.main-menu .main-menu-content.ps .ps__rail-y.ps--clicking {
  background-color: transparent !important;
  opacity: 1 !important;
}

.main-menu .main-menu-content.ps .ps__thumb-y {
  width: 4px !important;
  right: 3px;
  background-color: rgba(var(--accent-primary-rgb), 0.28) !important;
  border-radius: var(--radius-full);
  transition: background-color var(--transition-fast), width var(--transition-fast);
}

.main-menu .main-menu-content.ps .ps__rail-y:hover > .ps__thumb-y,
.main-menu .main-menu-content.ps .ps__rail-y.ps--clicking .ps__thumb-y,
.main-menu .main-menu-content.ps .ps__rail-y:focus > .ps__thumb-y {
  width: 5px !important;
  background-color: rgba(var(--accent-primary-rgb), 0.48) !important;
}

body.dark-layout .main-menu .main-menu-content {
  scrollbar-color: rgba(240, 238, 248, 0.22) transparent;
}

body.dark-layout .main-menu .main-menu-content::-webkit-scrollbar-thumb {
  background: rgba(240, 238, 248, 0.22);
}

body.dark-layout .main-menu .main-menu-content::-webkit-scrollbar-thumb:hover {
  background: rgba(240, 238, 248, 0.38);
}

body.dark-layout .main-menu .main-menu-content.ps .ps__thumb-y {
  background-color: rgba(240, 238, 248, 0.22) !important;
}

body.dark-layout .main-menu .main-menu-content.ps .ps__rail-y:hover > .ps__thumb-y,
body.dark-layout .main-menu .main-menu-content.ps .ps__rail-y.ps--clicking .ps__thumb-y {
  background-color: rgba(240, 238, 248, 0.38) !important;
}

html[data-textdirection="rtl"] .main-menu .main-menu-content.ps .ps__thumb-y {
  right: auto !important;
  left: 3px !important;
}

html[data-textdirection="rtl"] .main-menu .main-menu-content.ps .ps__rail-y:hover > .ps__thumb-y,
html[data-textdirection="rtl"] .main-menu .main-menu-content.ps .ps__rail-y.ps--clicking .ps__thumb-y {
  right: auto !important;
  left: 2px !important;
}

/* Dark mode — global scrollbars (override style.css white track) */
body.dark-layout ::-webkit-scrollbar-track,
body.dark-layout body::-webkit-scrollbar-track,
body.dark-layout .scroll::-webkit-scrollbar-track {
  background: var(--bg-secondary) !important;
  box-shadow: none !important;
}

body.dark-layout ::-webkit-scrollbar-thumb,
body.dark-layout body::-webkit-scrollbar-thumb,
body.dark-layout .scroll::-webkit-scrollbar-thumb {
  background: rgba(240, 238, 248, 0.22);
}

body.dark-layout ::-webkit-scrollbar-thumb:hover,
body.dark-layout body::-webkit-scrollbar-thumb:hover,
body.dark-layout .scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(240, 238, 248, 0.38);
}

body.dark-layout {
  scrollbar-color: rgba(240, 238, 248, 0.22) var(--bg-secondary);
}

/* Override Vuexy body bg in dark */
body.dark-layout {
  background-color: var(--bg-primary) !important;
}

.app-content.content {
  background: var(--bg-primary) !important;
  animation: contentFadeIn 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes contentFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Cards ── */
.card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  contain: layout style;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.card-title {
  color: var(--text-primary);
  font-weight: var(--font-weight-bold);
}

body.dark-layout .card {
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important; /* override Vuexy #10163A */
  border-color: var(--border-subtle) !important;
}

body.dark-layout .card-title,
body.dark-layout .card-body {
  color: var(--text-primary);
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Buttons ── */
.btn {
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-medium);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast);
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn-primary,
.bg-gradient-primary {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 4px 12px var(--accent-muted);
}

.btn-primary:hover,
.bg-gradient-primary:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-primary)) !important;
  box-shadow: 0 6px 16px var(--accent-glow);
  transform: translateY(-1px);
}

.btn-secondary,
.btn-outline-secondary {
  background: var(--surface-card) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}

.btn-secondary:hover {
  background: var(--surface-hover) !important;
  color: var(--accent-primary) !important;
}

.btn-danger,
.bg-gradient-danger {
  background: linear-gradient(135deg, var(--danger), color-mix(in srgb, var(--danger) 85%, #000)) !important;
  border-color: var(--danger) !important;
}

.btn-warning,
.bg-gradient-warning {
  background: linear-gradient(135deg, var(--warning), color-mix(in srgb, var(--warning) 85%, #000)) !important;
}

.btn-info,
.bg-gradient-info {
  background: linear-gradient(135deg, var(--info), color-mix(in srgb, var(--info) 85%, #000)) !important;
}

.btn-ghost,
.btn-outline-primary {
  background: transparent !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.btn-ghost:hover,
.btn-outline-primary:hover {
  background: var(--accent-muted) !important;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  transform: none !important;
  cursor: not-allowed;
}

.btn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

/* ── Forms ── */
.form-control,
.custom-select,
select.form-control {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  color: var(--text-primary) !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus,
.custom-select:focus {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
}

.form-control::placeholder {
  color: var(--text-muted);
}

.form-group label,
label {
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

/* Dark mode forms — override Vuexy dark-layout.css (#262C49 / #212744) */
body.dark-layout input.form-control,
body.dark-layout textarea.form-control,
body.dark-layout select.form-control,
body.dark-layout .custom-select,
body.dark-layout .custom-file-label,
body.dark-layout .form-control,
html.theme-dark input.form-control,
html.theme-dark textarea.form-control,
html.theme-dark select.form-control,
html.theme-dark .custom-select,
html.theme-dark .custom-file-label,
html.theme-dark .form-control {
  background-color: var(--surface-card) !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

body.dark-layout input.form-control:not(:focus),
body.dark-layout textarea.form-control:not(:focus),
html.theme-dark input.form-control:not(:focus),
html.theme-dark textarea.form-control:not(:focus) {
  border: 1px solid var(--border-subtle) !important;
}

body.dark-layout input.form-control::placeholder,
body.dark-layout textarea.form-control::placeholder,
body.dark-layout .custom-file-label::placeholder,
html.theme-dark input.form-control::placeholder,
html.theme-dark textarea.form-control::placeholder {
  color: var(--text-muted) !important;
}

body.dark-layout input.form-control:disabled,
body.dark-layout input.form-control[readonly],
body.dark-layout textarea.form-control:disabled,
body.dark-layout textarea.form-control[readonly],
html.theme-dark input.form-control:disabled,
html.theme-dark input.form-control[readonly],
html.theme-dark textarea.form-control:disabled,
html.theme-dark textarea.form-control[readonly] {
  background-color: var(--bg-secondary) !important;
  color: var(--text-muted) !important;
  opacity: 0.85;
  border-color: var(--border-subtle) !important;
}

body.dark-layout .custom-file-label::after,
html.theme-dark .custom-file-label::after {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

body.dark-layout .input-group-text,
html.theme-dark .input-group-text {
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}

body.dark-layout .select2-container--default .select2-selection--single,
body.dark-layout .select2-container--default .select2-selection--multiple,
html.theme-dark .select2-container--default .select2-selection--single,
html.theme-dark .select2-container--default .select2-selection--multiple {
  background-color: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}

.select2-dropdown {
  background: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

.select2-container--default .select2-results__option {
  color: var(--text-secondary) !important;
}

.select2-container--default .select2-results__option[aria-selected='true'],
.select2-container--default .select2-results__option[aria-selected=true] {
  background: var(--accent-muted) !important;
  color: var(--accent-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--accent-primary) !important;
  color: #fff !important;
}

body.dark-layout .select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option[aria-selected='true'],
body.dark-layout .select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option[aria-selected=true],
html.theme-dark .select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option[aria-selected='true'],
html.theme-dark .select2-container .select2-dropdown .select2-results .select2-results__options .select2-results__option[aria-selected=true] {
  background: var(--accent-muted) !important;
  color: var(--accent-primary) !important;
}

body.dark-layout .select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-layout .select2-container--default .select2-results__option--highlighted[data-selected],
html.theme-dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.theme-dark .select2-container--default .select2-results__option--highlighted[data-selected] {
  background: var(--accent-primary) !important;
  color: #fff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}

/* Flatpickr — token-based (override legacy #7367f0 in style.css) */
.flatpickr-calendar {
  background: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: var(--shadow-lg) !important;
  border-radius: var(--radius-lg) !important;
  color: var(--text-primary);
}

span.flatpickr-weekday {
  color: var(--accent-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  color: var(--text-primary) !important;
}

.flatpickr-day {
  color: var(--text-secondary);
}

.flatpickr-day.today {
  border-color: var(--accent-primary) !important;
}

.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  background: var(--accent-muted) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: var(--accent-muted) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: #fff !important;
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange {
  background: var(--accent-muted) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
  box-shadow: -5px 0 0 var(--accent-muted), 5px 0 0 var(--accent-muted) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--accent-primary) !important;
}

/* ── Tables ── */
.table_content_append .position-relative {
  border-radius: var(--radius-lg);
  /* horizontal only — vertical auto flashes a scrollbar during row enter animations */
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  background: var(--surface-card);
}

.table_content_append .table {
  margin-bottom: 0;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

.table {
  color: var(--text-primary);
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  font-weight: var(--font-weight-bold);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--border-subtle) !important;
  padding: 0.85rem 1rem;
}

.table tbody tr {
  transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-hover) 40%, transparent);
}

.table tbody tr:hover {
  background: var(--surface-hover) !important;
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.table td {
  border-color: var(--border-subtle) !important;
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

body.dark-layout .table,
html.theme-dark .table {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

body.dark-layout .table thead th,
body.dark-layout .table thead tr th,
html.theme-dark .table thead th,
html.theme-dark .table thead tr th {
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-layout .table tbody tr th,
body.dark-layout .table tbody tr td,
html.theme-dark .table tbody tr th,
html.theme-dark .table tbody tr td {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-layout .table tbody tr:nth-child(even),
html.theme-dark .table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface-hover) 30%, transparent);
}

/* Table action icon buttons — override Vuexy #212744 */
.product-action > span,
body.dark-layout .product-action > span,
html.theme-dark .product-action > span {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

body.dark-layout .btn-searchTable,
html.theme-dark .btn-searchTable {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-subtle);
  color: var(--accent-primary) !important;
}

/* Money / price display — uses admin accent color */
.admin-price {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  color: var(--admin-primary, var(--accent-primary, #5B54D9)) !important;
  font-weight: 700;
  white-space: nowrap;
  direction: inherit;
}

.admin-price__amount {
  color: inherit;
}

.admin-price__currency {
  color: inherit;
  font-weight: 600;
  opacity: .92;
  font-size: .92em;
}

body.dark-layout .admin-price,
html.theme-dark .admin-price {
  color: var(--admin-primary, var(--accent-primary, #5B54D9)) !important;
}

.admin-entity-link {
  color: var(--admin-primary, var(--accent-primary, #5B54D9));
  font-weight: 600;
  text-decoration: none;
}

.admin-entity-link:hover,
.admin-entity-link:focus {
  color: var(--admin-primary, var(--accent-primary, #5B54D9));
  text-decoration: underline;
}

/* Status badges */
.badge,
.badge-pill {
  border-radius: var(--radius-full) !important;
  font-weight: var(--font-weight-medium);
  font-size: 0.72rem;
  padding: 0.3em 0.65em;
}

.badge-primary,
.badge.badge-primary {
  background: var(--accent-muted) !important;
  color: var(--accent-primary) !important;
}

.badge-success {
  background: var(--success-muted) !important;
  color: var(--success) !important;
}

.badge-warning {
  background: var(--warning-muted) !important;
  color: var(--warning) !important;
}

.badge-danger {
  background: var(--danger-muted) !important;
  color: var(--danger) !important;
}

.badge-info {
  background: var(--info-muted) !important;
  color: var(--info) !important;
}

.badge-secondary {
  background: rgba(108, 117, 125, 0.16) !important;
  color: #6c757d !important;
}

.badge-purple {
  background: rgba(115, 51, 204, 0.14) !important;
  color: #7333cc !important;
}

.badge-teal {
  background: rgba(13, 148, 136, 0.14) !important;
  color: #0d9488 !important;
}

.badge-orange {
  background: rgba(234, 88, 12, 0.14) !important;
  color: #ea580c !important;
}

.badge-pink {
  background: rgba(219, 39, 119, 0.14) !important;
  color: #db2777 !important;
}

.admin-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  white-space: nowrap;
}

/* Table action buttons */
.table .btn-sm,
.table .btn-icon {
  border-radius: var(--radius-sm) !important;
  padding: 0.35rem 0.5rem;
  transition: transform var(--transition-fast), background var(--transition-fast);
}

/* Ban status column — uniform badge + action */
.admin-ban-cell {
  text-align: center;
  vertical-align: middle !important;
}

.admin-ban-cell__group {
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.admin-ban-cell__group--stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.admin-ban-cell__group--stack .admin-ban-badge,
.admin-ban-cell__group--stack .admin-ban-action {
  width: 100%;
}

.admin-ban-badge,
.admin-ban-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 32px;
  padding: 0.3rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  white-space: nowrap;
  box-sizing: border-box;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.admin-ban-badge {
  min-width: 8.75rem;
  cursor: default;
  pointer-events: none;
}

.admin-ban-action {
  min-width: 7.75rem;
  cursor: pointer;
  user-select: none;
}

.admin-ban-badge .feather,
.admin-ban-action .feather {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.admin-ban-badge--success {
  color: var(--success) !important;
  background: var(--success-muted) !important;
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.admin-ban-badge--danger {
  color: var(--danger) !important;
  background: var(--danger-muted) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
}

.admin-ban-badge--warning {
  color: var(--warning) !important;
  background: var(--warning-muted) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
}

.admin-ban-action--success {
  color: var(--success) !important;
  background: transparent !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
}

.admin-ban-action--success:hover {
  color: #fff !important;
  background: var(--success) !important;
  border-color: var(--success) !important;
  transform: translateY(-1px);
}

.admin-ban-action--danger {
  color: var(--danger) !important;
  background: transparent !important;
  border-color: rgba(239, 68, 68, 0.45) !important;
}

.admin-ban-action--danger:hover {
  color: #fff !important;
  background: var(--danger) !important;
  border-color: var(--danger) !important;
  transform: translateY(-1px);
}

.table .btn-sm:hover,
.table .btn-icon:hover {
  transform: scale(1.08);
}

/* ── Modals ── */
.modal-content {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal-header {
  border-bottom-color: var(--border-subtle) !important;
}

.modal-footer {
  border-top-color: var(--border-subtle) !important;
}

.modal-title,
body.dark-layout #myModalLabel160 {
  color: var(--text-primary) !important;
}

body.dark-layout .title_lable {
  color: var(--accent-primary) !important;
}

.modal.fade .modal-dialog {
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* ── Pagination ── */
.pagination .page-item .page-link {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-sm) !important;
  margin: 0 2px;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.pagination .page-item.active .page-link {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
  color: var(--text-inverse) !important;
  box-shadow: 0 2px 8px var(--accent-muted);
}

.pagination .page-item .page-link:hover {
  background: var(--surface-hover);
  color: var(--accent-primary);
  border-color: var(--accent-primary);
}

/* ── Filter panel ── */
.btn-searchTable {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.45rem 1rem !important;
  min-width: auto !important;
  margin: 10px 0 !important;
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.btn-searchTable > i {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  transform: none !important;
}

.btn-searchTable:hover,
.btn-searchTable.active {
  background: var(--accent-muted) !important;
  border-color: var(--accent-primary) !important;
  color: var(--accent-primary) !important;
}

.searchTable {
  background: var(--surface-card) !important;
  border-inline-end: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg) !important;
  z-index: 1100 !important;
  position: fixed !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 350px;
  max-width: min(350px, 100vw);
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease !important;
}

/* Arabic / RTL — drawer from the left */
html[dir="rtl"] .searchTable,
[dir="rtl"] .searchTable {
  left: 0 !important;
  right: auto !important;
  transform: translateX(-100%) !important;
}

html[dir="rtl"] .searchTable.active,
[dir="rtl"] .searchTable.active {
  transform: translateX(0) !important;
}

/* English / LTR — drawer from the right */
html[dir="ltr"] .searchTable,
[dir="ltr"] .searchTable {
  right: 0 !important;
  left: auto !important;
  transform: translateX(100%) !important;
}

html[dir="ltr"] .searchTable.active,
[dir="ltr"] .searchTable.active {
  transform: translateX(0) !important;
}

.layout_ {
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.layout_.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.theme-dark .layout_.active,
body.dark-layout .layout_.active {
  background: rgba(0, 0, 0, 0.55);
}

.searchTable .forma {
  flex: 1;
  overflow: auto;
  padding: 1rem 1.15rem;
}

.searchTable h3,
.searchTable .font-bold {
  color: var(--text-primary) !important;
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.searchTable .btnClose {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  color: var(--text-muted) !important;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.searchTable .btnClose:hover {
  background: var(--danger-muted);
  color: var(--danger) !important;
}

.searchTable .form-group label {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-medium);
  margin-bottom: 0.35rem;
}

.searchTable .controls.border {
  position: relative;
  display: block;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  overflow: visible;
  min-height: calc(1.75rem + 1.4rem + 1px);
}

.searchTable .controls.parent-input-date::after {
  display: none !important;
  content: none !important;
}

.searchTable .controls.parent-input-date {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-inline: 0.85rem;
}

.searchTable .filter-field-calendar {
  position: static;
  flex-shrink: 0;
  transform: none;
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  pointer-events: auto;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.searchTable .controls.border > .form-control,
.searchTable .controls.border > input.form-control,
.searchTable .controls.border > textarea.form-control {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  padding-inline: 1rem !important;
  height: calc(1.75rem + 1.4rem + 1px);
}

.searchTable .controls.parent-input-date > .form-control,
.searchTable .controls.parent-input-date > input.form-control,
.searchTable .controls.parent-input-date .flatpickr-input,
.searchTable .controls.parent-input-date .custom-input-date {
  flex: 1;
  min-width: 0;
  width: auto !important;
  padding: 0.7rem 0 !important;
  height: auto !important;
  min-height: 0;
  background: transparent !important;
}

.searchTable .controls.border > .select2-container {
  width: 100% !important;
  display: block;
}

.searchTable .controls.border .select2-container--default .select2-selection--single {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  height: calc(1.75rem + 1.4rem + 1px) !important;
  min-height: calc(1.75rem + 1.4rem + 1px);
  display: flex;
  align-items: center;
}

.searchTable .controls.border .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
  line-height: 1.4 !important;
  padding-inline-start: 1rem !important;
  padding-inline-end: 2.25rem !important;
  width: 100%;
}

.searchTable .controls.border .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  top: 0;
  inset-inline-start: auto !important;
  inset-inline-end: 12px !important;
  width: 20px;
}

.searchTable .controls.border .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent;
  margin-top: -2px;
}

.searchTable .select2-container--open {
  z-index: 1201 !important;
}

.searchTable .select2-dropdown {
  z-index: 1202 !important;
  border-color: var(--border-subtle) !important;
}

.searchTable .flatpickr-calendar.open {
  z-index: 1203 !important;
}

.searchTable .controls.border:focus-within {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted);
}

.searchTable .controls.border .flatpickr-input {
  background: transparent !important;
}

/* ── Toastr (base shell; colors finalized in admin-animations after vendor) ── */
#toast-container > div {
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  opacity: 1 !important;
}

@media (prefers-reduced-motion: no-preference) {
  #toast-container > .toast {
    animation: toastSlideIn var(--transition-base) ease;
  }

  #toast-container > .toast.toast-removing {
    animation: toastSlideOut var(--transition-base) ease forwards;
  }
}

@keyframes toastSlideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes toastSlideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

/* ── Footer ── */
.footer.footer-light {
  background: var(--footer-bg) !important;
  border-top: 1px solid var(--border-subtle);
}

.footer.footer-light p,
.footer.footer-light a {
  color: var(--text-muted) !important;
}

.footer.footer-light a:hover {
  color: var(--accent-primary) !important;
}

/* ── Color Picker Panel ── */
.cp-panel {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.cp-title {
  color: var(--text-primary);
}

.cp-reset-btn {
  background: var(--surface-hover);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.cp-reset-btn:hover {
  background: var(--accent-muted);
  color: var(--accent-primary);
}

.cp-swatch {
  border-radius: var(--radius-sm);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.cp-swatch:hover {
  transform: scale(1.12);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cp-swatch.cp-active {
  box-shadow: 0 0 0 2px var(--surface-card), 0 0 0 4px var(--accent-primary);
}

.cp-toggle { cursor: pointer; }

#color-picker-icon {
  color: var(--accent-primary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.cp-swatch--brand { background: #5B54D9; }
.cp-swatch--blue { background: #0d6efd; }
.cp-swatch--green { background: #28a745; }
.cp-swatch--red { background: #dc3545; }
.cp-swatch--orange { background: #fd7e14; }
.cp-swatch--cyan { background: #20c997; }
.cp-swatch--pink { background: #e83e8c; }
.cp-swatch--purple { background: #6f42c1; }
.cp-swatch--sky { background: #17a2b8; }

.light-mode .product-action span {
  background-color: color-mix(in srgb, var(--text-muted) 20%, transparent) !important;
}

.admin-stat-card__label {
  color: var(--text-muted) !important;
}

/* ── Skeleton Loading ── */
.skeleton-table {
  padding: var(--space-4);
}

.skeleton-table__row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.skeleton-table__cell {
  flex: 1;
  height: 14px;
  border-radius: var(--radius-sm);
}

.skeleton-table__cell--short { flex: 0.5; }
.skeleton-table__cell--wide { flex: 1.5; }

.skeleton-card {
  height: 120px;
  border-radius: var(--radius-xl);
}

.skeleton-table__cell,
.skeleton-card {
  background: var(--surface-hover);
  position: relative;
  overflow: hidden;
}

.skeleton-table__cell::after,
.skeleton-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: translateX(-100%);
  animation: skeletonSweep 1.2s ease-in-out infinite;
}

@keyframes skeletonSweep {
  100% { transform: translateX(100%); }
}

/* ── Empty states ── */
.admin-table-empty,
.no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 260px;
  padding: 2.75rem 1.5rem 3rem;
  margin: 0;
  border-top: 1px dashed var(--border-subtle);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--accent-primary-rgb), 0.08), transparent 70%),
    linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.02), transparent 55%);
  animation: adminTableEmptyIn 0.45s ease both;
}

.admin-table-empty__visual,
.no-data img {
  position: relative;
  margin-bottom: 1.15rem;
}

.admin-table-empty__visual::before {
  content: '';
  position: absolute;
  inset: -1.25rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-primary-rgb), 0.14) 0%, transparent 72%);
  pointer-events: none;
}

.admin-table-empty__img,
.no-data img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 132px;
  width: auto;
  height: auto;
  margin-inline: auto;
  opacity: 0.88;
  filter: saturate(0.92);
  object-fit: contain;
}

.admin-table-empty__title,
.no-data span {
  margin: 0;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  line-height: 1.55;
  max-width: 26rem;
}

.admin-table-empty__hint {
  margin: 0.4rem 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 28rem;
}

.position-relative > .admin-table-empty,
.position-relative > .no-data,
.position-relative > .d-flex.flex-column.w-100.align-center {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.position-relative > .d-flex.flex-column.w-100.align-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  min-height: 260px;
  padding: 2.75rem 1.5rem 3rem;
  margin-top: 0 !important;
  border-top: 1px dashed var(--border-subtle);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(var(--accent-primary-rgb), 0.08), transparent 70%),
    linear-gradient(180deg, rgba(var(--accent-primary-rgb), 0.02), transparent 55%);
  animation: adminTableEmptyIn 0.45s ease both;
}

.position-relative > .d-flex.flex-column.w-100.align-center img {
  position: relative;
  max-width: 132px;
  width: auto !important;
  height: auto;
  margin-bottom: 1.15rem;
  opacity: 0.88;
  filter: saturate(0.92);
}

.position-relative > .d-flex.flex-column.w-100.align-center span {
  margin: 0 !important;
  margin-right: 0 !important;
  font-family: inherit !important;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}

@keyframes adminTableEmptyIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.table-empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-muted);
}

.table-empty-state i {
  font-size: 2.5rem;
  color: var(--text-muted);
  opacity: 0.5;
  margin-bottom: var(--space-3);
  display: block;
}

/* ── Dropdown menus ── */
.dropdown-menu {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
  color: var(--text-secondary) !important;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-hover) !important;
  color: var(--accent-primary) !important;
}

/* User menu — light mode hover (fix Vuexy white text on light bg) */
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item {
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md);
}

.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item i,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item i {
  color: var(--text-muted) !important;
  transition: color var(--transition-fast);
}

.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item:hover,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item:focus,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item:active,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item:hover,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item:focus,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item:active {
  background: var(--accent-muted) !important;
  color: var(--accent-primary) !important;
}

.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item:hover i,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item:focus i,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item:hover i,
.header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item:focus i {
  color: var(--accent-primary) !important;
}

body.dark-layout .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item:hover,
body.dark-layout .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item:focus,
body.dark-layout .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item:hover,
body.dark-layout .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item:focus {
  background: var(--surface-hover) !important;
  color: var(--accent-primary) !important;
}

/* Phone / tablet navbar — single aligned row like laptop */
@media (max-width: 991.98px) {
  .header-navbar.floating-nav {
    margin-left: 0.75rem !important;
    margin-right: 0.75rem !important;
    width: calc(100% - 1.5rem) !important;
  }

  .header-navbar .navbar-wrapper,
  .header-navbar .navbar-container {
    width: 100%;
    height: auto;
    min-height: 3.75rem;
    display: flex;
    align-items: center;
  }

  .header-navbar .navbar-container {
    padding: 0 0.65rem !important;
  }

  .header-navbar #navbar-mobile.navbar-collapse {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100%;
    min-height: 3.75rem;
    float: none !important;
    gap: 0.35rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .header-navbar #navbar-mobile.navbar-collapse .navbar-nav {
    flex-flow: row nowrap !important;
    flex-wrap: nowrap !important;
    float: none !important;
    align-items: center !important;
  }

  .header-navbar #navbar-mobile.navbar-collapse .navbar-nav .nav-item {
    float: none !important;
    display: flex;
    align-items: center;
  }

  .header-navbar .bookmark-wrapper {
    float: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.15rem;
    align-self: center;
  }

  .header-navbar .bookmark-wrapper > .navbar-nav {
    flex-direction: row;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .header-navbar .bookmark-wrapper .mobile-menu {
    margin: 0 !important;
  }

  .header-navbar .bookmark-wrapper .mobile-menu > a.nav-link {
    padding: 0.4rem 0.35rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    margin: 0 !important;
  }

  .header-navbar .navbar-container ul.nav li > a.nav-link {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .header-navbar .breadcrumb-text {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.3rem;
    min-width: 0;
    overflow: hidden;
  }

  .header-navbar .breadcrumb-text a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
  }

  .header-navbar .breadcrumb-text .user-name {
    display: inline-flex !important;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.92rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }

  .header-navbar .breadcrumb-text .user-name i,
  .header-navbar .breadcrumb-text .user-name .feather {
    flex-shrink: 0;
    font-size: 1rem;
  }

  /* Hide secondary breadcrumb segment on small screens to keep one line */
  .header-navbar .breadcrumb-text > a:not(:first-child),
  .header-navbar .breadcrumb-text > .hint-slash {
    display: none !important;
  }

  .header-navbar .navbar-container ul.nav.resp-wrap-icon {
    float: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 0;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center;
  }

  .header-navbar .navbar-container ul.nav.resp-wrap-icon > li.nav-item > a.nav-link,
  .header-navbar .bookmark-wrapper .mobile-menu > a.nav-link,
  .header-navbar .breadcrumb-text {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .header-navbar .navbar-container ul.nav.resp-wrap-icon > li.nav-item {
    margin: 0;
  }

  .header-navbar .navbar-container ul.nav.resp-wrap-icon > li.nav-item > a.nav-link {
    padding: 0.4rem 0.32rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 1;
    height: 2.25rem;
  }

  .header-navbar .navbar-container ul.nav li.dropdown-language .selected-language {
    display: none;
  }

  .header-navbar .navbar-container ul.nav li.dropdown-language > a.nav-link {
    padding: 0.4rem 0.28rem !important;
  }

  .header-navbar .navbar-container ul.nav.resp-wrap-icon .ficon,
  .header-navbar .navbar-container ul.nav.resp-wrap-icon .fi {
    font-size: 1.15rem;
    line-height: 1;
  }

  .header-navbar .navbar-container ul.nav li a.dropdown-user-link {
    padding: 0.25rem 0.2rem !important;
    height: 2.25rem;
  }

  .header-navbar .navbar-container ul.nav li a.dropdown-user-link img {
    width: 34px !important;
    height: 34px !important;
  }

  .header-navbar .navbar-container ul.nav li.color-picker-nav-item {
    position: relative !important;
  }

  .header-navbar .navbar-container ul.nav li.color-picker-nav-item .cp-panel {
    left: auto !important;
    right: 0 !important;
    transform: none !important;
    width: min(240px, calc(100vw - 1.5rem));
  }

  html[dir="rtl"] .header-navbar .navbar-container ul.nav li.color-picker-nav-item .cp-panel {
    right: auto !important;
    left: 0 !important;
  }

  .header-navbar .navbar-container ul.nav li.color-picker-nav-item .cp-panel::before {
    left: auto;
    right: 1rem;
    transform: rotate(45deg);
  }

  html[dir="rtl"] .header-navbar .navbar-container ul.nav li.color-picker-nav-item .cp-panel::before {
    right: auto;
    left: 1rem;
  }
}

@media (max-width: 575.98px) {
  .header-navbar.floating-nav {
    margin-left: 0.55rem !important;
    margin-right: 0.55rem !important;
    width: calc(100% - 1.1rem) !important;
    margin-top: 0.75rem !important;
  }

  .header-navbar .navbar-container {
    padding: 0 0.35rem !important;
  }

  .header-navbar .breadcrumb-text .user-name {
    font-size: 0.85rem !important;
  }

  .header-navbar .navbar-container ul.nav.resp-wrap-icon > li.nav-item > a.nav-link {
    padding: 0.35rem 0.22rem !important;
    height: 2.1rem;
  }

  .header-navbar .navbar-container ul.nav.resp-wrap-icon .ficon,
  .header-navbar .navbar-container ul.nav.resp-wrap-icon .fi {
    font-size: 1.05rem;
  }

  .header-navbar .navbar-container ul.nav li a.dropdown-user-link img {
    width: 30px !important;
    height: 30px !important;
  }
}

/* User / language dropdowns — keep fully visible on tablet & phone */
@media (max-width: 991.98px) {
  .header-navbar,
  .header-navbar .navbar-wrapper,
  .header-navbar .navbar-container,
  .header-navbar .navbar-collapse,
  .header-navbar .navbar-container ul.nav,
  .header-navbar .navbar-container .show {
    overflow: visible !important;
  }

  /* User menu: anchor to navbar edge so it never clips off-screen */
  .header-navbar .navbar-container ul.nav li.dropdown-user,
  .header-navbar .navbar-container ul.nav li.dropdown-user.show {
    position: static !important;
  }

  .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu,
  .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right,
  .header-navbar .navbar-container ul.nav li.dropdown-user.show .dropdown-menu,
  .header-navbar .navbar-container ul.nav li.dropdown-user.show .dropdown-menu-right,
  .header-navbar .navbar-container .show.dropdown-user .dropdown-menu,
  .header-navbar .navbar-container .show.dropdown-user .dropdown-menu-right {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    float: none !important;
    width: max-content !important;
    min-width: 11.5rem !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin-top: 0 !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 1055 !important;
    left: 0.75rem !important;
    right: auto !important;
  }

  html[dir="ltr"] .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu,
  html[dir="ltr"] .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right,
  html[dir="ltr"] .header-navbar .navbar-container ul.nav li.dropdown-user.show .dropdown-menu,
  html[dir="ltr"] .header-navbar .navbar-container .show.dropdown-user .dropdown-menu {
    left: auto !important;
    right: 0.75rem !important;
  }

  .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu .dropdown-item,
  .header-navbar .navbar-container ul.nav li.dropdown-user .dropdown-menu-right .dropdown-item {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Language menu: open directly under the flag */
  .header-navbar .navbar-container ul.nav li.dropdown-language,
  .header-navbar .navbar-container ul.nav li.dropdown-language.show,
  .header-navbar .navbar-nav .dropdown-language.show {
    position: relative !important;
  }

  .header-navbar .navbar-container ul.nav li.dropdown-language .dropdown-menu,
  .header-navbar .navbar-container ul.nav li.dropdown-language .dropdown-menu-right,
  .header-navbar .navbar-container ul.nav li.dropdown-language.show .dropdown-menu,
  .header-navbar .navbar-container ul.nav li.dropdown-language.show .dropdown-menu-right,
  .header-navbar .navbar-container .show.dropdown-language .dropdown-menu,
  .header-navbar .navbar-container .show.dropdown-language .dropdown-menu-right {
    position: absolute !important;
    top: calc(100% + 0.35rem) !important;
    float: none !important;
    width: max-content !important;
    min-width: 8.5rem !important;
    max-width: calc(100vw - 1.5rem) !important;
    margin-top: 0 !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 1056 !important;
    left: 0 !important;
    right: auto !important;
  }

  html[dir="ltr"] .header-navbar .navbar-container ul.nav li.dropdown-language .dropdown-menu,
  html[dir="ltr"] .header-navbar .navbar-container ul.nav li.dropdown-language .dropdown-menu-right,
  html[dir="ltr"] .header-navbar .navbar-container ul.nav li.dropdown-language.show .dropdown-menu,
  html[dir="ltr"] .header-navbar .navbar-container .show.dropdown-language .dropdown-menu {
    left: auto !important;
    right: 0 !important;
  }
}

/* ── Filter toolbar ── */
.admin-filter-toolbar {
  gap: 0.5rem;
}

/* Sidebar header — logo centered, toggle in corner */
.main-menu .navbar-header .navbar-nav.flex-row {
  position: relative;
  align-items: center;
  width: 100%;
  min-height: 4.5rem;
  margin: 0;
}

.main-menu .navbar-header .sidebar-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  width: auto;
  z-index: 1;
  pointer-events: none;
}

.main-menu .navbar-header .sidebar-logo-center .navbar-brand {
  margin: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.main-menu .navbar-header .sidebar-logo-center .brand-logo {
  max-height: 3.75rem;
  width: auto !important;
  height: auto !important;
  max-width: 10.5rem;
  object-fit: contain;
  position: static !important;
  z-index: auto !important;
  background: none !important;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navbar-header .sidebar-logo-center .brand-logo,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header .sidebar-logo-center .brand-logo,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header .sidebar-logo-center .brand-logo {
  max-height: 5.5rem !important;
  max-width: 14rem !important;
  width: auto !important;
}

.main-menu .navbar-header .nav-item.nav-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  z-index: 2;
  margin: 0 !important;
}

html[data-textdirection="rtl"] .main-menu .navbar-header .nav-item.nav-toggle {
  left: 0.15rem;
  right: auto;
}

html[data-textdirection="ltr"] .main-menu .navbar-header .nav-item.nav-toggle {
  right: 0.15rem;
  left: auto;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navbar-header,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header {
  width: 100% !important;
  height: 6.5rem;
  padding: 0.35rem 1rem 0.3rem;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navbar-header .navbar-nav.flex-row,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header .navbar-nav.flex-row,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header .navbar-nav.flex-row {
  min-height: 6rem;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navbar-header .sidebar-logo-center {
  display: flex !important;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu .navbar-header .nav-item.nav-toggle {
  display: flex !important;
}

/* Collapsed sidebar (mini) — logo in top header box, search below */
body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu:not(:hover):not(.expanded) .navbar-header {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  min-height: 0;
  padding: 0.35rem 0.25rem 0.25rem;
  overflow: visible;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu:not(:hover):not(.expanded) .navbar-header .navbar-nav.flex-row {
  min-height: 3.85rem;
  justify-content: center;
  width: 100%;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu:not(:hover):not(.expanded) .navbar-header .sidebar-logo-center {
  position: static;
  left: auto;
  top: auto;
  transform: none;
  margin: 0 auto !important;
  width: 100%;
  display: flex !important;
  justify-content: center;
  pointer-events: auto;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu:not(:hover):not(.expanded) .navbar-header .sidebar-logo-center .navbar-brand {
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  margin-top: 0 !important;
  padding: 0 !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu:not(:hover):not(.expanded) .navbar-header .sidebar-logo-center .brand-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-height: 3.35rem !important;
  max-width: 3.35rem !important;
  width: 3.35rem !important;
  height: auto !important;
  min-width: 2rem;
  min-height: 2rem;
  object-fit: contain !important;
  margin: 0 auto !important;
  background: none !important;
  background-image: none !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu:not(:hover):not(.expanded) .navbar-header .nav-item.nav-toggle {
  display: none !important;
}

/* Sidebar search — below header (fazma pattern) */
.admin-sidebar-search-wrap {
  padding: 0.45rem 0.9rem 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
  position: relative;
  flex-shrink: 0;
}

.main-menu .navigation.navigation-main {
  padding-top: 0 !important;
  margin-top: 0;
}

.admin-sidebar-search-inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--text-muted) 12%, transparent);
  border: 1px solid var(--border-strong);
  overflow: hidden;
  cursor: pointer;
  transition:
    width 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.38s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.admin-sidebar-search-inner.admin-search--expanded {
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--accent-muted);
  border-color: color-mix(in srgb, var(--accent-primary) 45%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 11%, transparent);
  cursor: text;
}

.admin-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.3rem;
  height: 2.3rem;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 2;
}

.admin-search-trigger .feather {
  width: 16px;
  height: 16px;
}

.admin-sidebar-search-inner.admin-search--expanded .admin-search-trigger {
  color: var(--accent-primary);
  transform: rotate(-10deg) scale(1.08);
}

.admin-sidebar-search-input {
  width: 0;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--text-primary) !important;
  font-size: 0.82rem;
  padding: 0;
  opacity: 0;
  caret-color: var(--accent-primary);
  transition: opacity 0.22s ease 0.1s, padding 0.22s ease;
  pointer-events: none;
}

.admin-sidebar-search-inner.admin-search--expanded .admin-sidebar-search-input {
  opacity: 1;
  padding: 0.3rem 0.25rem;
  pointer-events: auto;
}

.admin-sidebar-search-input::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.65;
}

.admin-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  margin-inline-end: 0.4rem;
  background: color-mix(in srgb, var(--text-muted) 14%, transparent);
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

.admin-search-clear .feather {
  width: 12px;
  height: 12px;
}

.admin-sidebar-search-inner.admin-search--expanded .admin-search-clear {
  opacity: 1;
  pointer-events: auto;
}

.admin-search-clear:hover {
  background: var(--danger-muted);
  color: var(--danger);
  transform: rotate(90deg) scale(1.1);
}

.admin-search-empty {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.2rem 0;
  color: var(--text-muted);
  font-size: 0.77rem;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.admin-search-empty[style*="flex"] {
  display: flex !important;
  opacity: 0.85;
  transform: none;
}

.admin-search-empty .feather {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.navigation-main > li[data-admin-search-open="1"] > a {
  background: color-mix(in srgb, var(--accent-primary) 6%, transparent) !important;
}

body.menu-collapsed .main-menu:not(:hover) .admin-sidebar-search-wrap {
  display: block !important;
  padding: 0.3rem 0.35rem 0.4rem;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header .sidebar-logo-center,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header .sidebar-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  display: flex !important;
  pointer-events: none;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header .sidebar-logo-center .navbar-brand,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header .sidebar-logo-center .navbar-brand {
  margin-top: 0 !important;
  pointer-events: auto;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header .nav-item.nav-toggle,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header .nav-item.nav-toggle {
  display: flex !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header .modern-nav-toggle,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navbar-header .sidebar-menu-toggle,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header .modern-nav-toggle,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navbar-header .sidebar-menu-toggle {
  display: inline-flex !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .admin-sidebar-search-wrap {
  padding: 0.25rem 0.35rem 0.35rem;
  border-top: none;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu .main-menu-content {
  height: calc(100% - 8.25rem) !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed:not(.menu-expanded) .main-menu .admin-sidebar-search-inner {
  width: 2.3rem;
  height: 2.3rem;
  margin: 0 auto;
  border-radius: var(--radius-full);
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .admin-sidebar-search-inner.admin-search--expanded {
  width: 100%;
  max-width: 100%;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .admin-search-empty {
  display: none !important;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .admin-sidebar-search-wrap,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .admin-sidebar-search-wrap {
  padding: 0.55rem 0.9rem 0.45rem;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .admin-sidebar-search-inner,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .admin-sidebar-search-inner {
  margin: 0;
  width: 2.3rem;
}

body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .admin-sidebar-search-inner.admin-search--expanded,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .admin-sidebar-search-inner.admin-search--expanded {
  width: 100%;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu-content .navigation-main,
body.vertical-layout.vertical-menu-modern.menu-expanded .admin-sidebar-search-wrap + .shadow-bottom + .main-menu-content .navigation-main {
  margin-top: 0;
  padding-top: 0;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .admin-sidebar-search-wrap + .shadow-bottom + .main-menu-content,
body.vertical-layout.vertical-menu-modern.menu-expanded .main-menu-content {
  padding-top: 0;
}

body.vertical-layout.vertical-menu-modern.menu-expanded .navigation-main > li:first-child,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:hover .navigation-main > li:first-child,
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation-main > li:first-child {
  margin-top: 0.5rem;
}

.navigation-main li.is-menu-hidden {
  display: none !important;
}

/* ── Checkbox custom ── */
.container-checkbox input:checked ~ .checkmark {
  background: linear-gradient(-118deg, var(--accent-primary), color-mix(in srgb, var(--accent-primary) 70%, transparent)) !important;
}

.container-radio input:checked ~ .checkmark {
  background-color: var(--accent-primary) !important;
}

/* ── Spinner (CSS, replaces FA spinner) ── */
.admin-spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid var(--accent-muted);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: adminSpin 0.7s linear infinite;
}

@keyframes adminSpin {
  to { transform: rotate(360deg); }
}

/* ── Count-up stat numbers ── */
[data-count-up] {
  display: inline-block;
}

/* SweetAlert2 — token-based (overrides Vuexy #262C49) */
.swal2-container .swal2-popup,
body.dark-layout .swal2-container .swal2-modal {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}

.swal2-container .swal2-header,
body.dark-layout .swal2-container .swal2-modal .swal2-header {
  background: transparent !important;
}

.swal2-container .swal2-title,
body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-title {
  color: var(--text-primary) !important;
  font-family: var(--font-family) !important;
  font-weight: var(--font-weight-bold) !important;
}

.swal2-container .swal2-html-container,
body.dark-layout .swal2-container .swal2-modal .swal2-content {
  color: var(--text-secondary) !important;
}

body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-success-circular-line-left,
body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-success-circular-line-right,
body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-success-fix,
body.dark-layout .swal2-container .swal2-modal .swal2-header .swal2-animate-success-icon {
  background-color: var(--surface-card) !important;
}

.swal2-styled.swal2-confirm {
  background-color: var(--accent-primary) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
  box-shadow: none !important;
}

.swal2-styled.swal2-cancel {
  background-color: var(--danger) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--font-weight-medium) !important;
  box-shadow: none !important;
}

.swal2-icon.swal2-success {
  border-color: var(--success) !important;
  color: var(--success) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--success) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.35) !important;
}

.swal2-icon.swal2-error {
  border-color: var(--danger) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: var(--danger) !important;
}

.swal2-timer-progress-bar {
  background: var(--accent-primary) !important;
}

.swal2-popup.swal2-toast {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-md) !important;
}

.swal2-popup.swal2-toast .swal2-title {
  color: var(--text-primary) !important;
}

/* ── Image upload (profile / form) — LTR + RTL parity ── */
.imgMontg,
.imgMontg .dropBox,
.imgMontg .textCenter {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.imagesUploadBlock {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
  background: var(--bg-secondary);
}

.uploadImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-secondary);
  cursor: pointer;
  z-index: 1;
}

.uploadImg span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.uploadImg span i {
  font-size: 2.25rem !important;
  width: 2.25rem;
  height: 2.25rem;
  color: var(--accent-primary) !important;
}

.uploadImg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.uploadedBlock {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 50%;
  z-index: 2;
}

.uploadedBlock img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
  position: static;
}

.imagesUploadBlock:has(.uploadedBlock img) .uploadImg {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.uploadedBlock .close {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5) !important;
  color: var(--danger);
  font-size: 1.5rem;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
  pointer-events: none;
  z-index: 3;
}

.uploadedBlock:hover .close {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

html.theme-dark .imagesUploadBlock,
body.dark-layout .imagesUploadBlock {
  border-color: var(--border-subtle);
  background: var(--bg-elevated);
}

html.theme-dark .uploadImg,
body.dark-layout .uploadImg {
  background: var(--bg-elevated);
}

/* ── Multi-image upload (gallery picker) ── */
.imgMontg .dropBox.multiDropBox {
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
}

.imgMontg .multiDropBox .textCenter {
  width: auto;
  flex: 0 0 auto;
}

.multiDropBox .imagesUploadBlock {
  width: 110px;
  height: 110px;
}

.multiDropBox .uploadImg span i {
  font-size: 1.75rem !important;
  width: 1.75rem;
  height: 1.75rem;
}

/* ── Notifications bulk send page ── */
.admin-notifications-page {
  width: 100%;
  max-width: none;
}

.admin-notifications-page__header {
  margin-bottom: 1rem;
}

.admin-notifications-page__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: var(--text-primary);
  font-size: 1.2rem;
  font-weight: 700;
}

.admin-notifications-page__title i {
  color: var(--accent-primary);
  font-size: 1.1rem;
}

.admin-notifications-page__subtitle {
  margin: 0.3rem 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.admin-notifications-page__card,
.admin-notifications-page .card.admin-notifications-page__card {
  background: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.admin-notifications-page__card > .card-body,
.admin-notifications-page .card.admin-notifications-page__card > .card-body {
  background: var(--surface-card) !important;
  padding: 1.25rem !important;
}

.admin-notifications-page .admin-notification-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
  padding: 0.35rem;
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: 100%;
}

.admin-notifications-page .admin-notification-tabs .nav-item {
  flex: 1 1 0;
  min-width: 0;
}

/* ── Account settings / Profile / Intro vertical nav-pills
   Same pattern as admin-notification-tabs: transparent base + accent active
   (prevents Vuexy #7367F0 flash when switching tabs) ── */
#page-account-settings .nav.nav-pills .nav-link,
#page-account-settings .nav.nav-pills .nav-item .nav-link {
  color: var(--text-secondary) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#page-account-settings .nav.nav-pills .nav-link:hover,
#page-account-settings .nav.nav-pills .nav-item .nav-link:hover {
  color: var(--accent-primary) !important;
  background: var(--surface-hover) !important;
  background-color: var(--surface-hover) !important;
  background-image: none !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
}

#page-account-settings .nav.nav-pills .nav-link.active,
#page-account-settings .nav.nav-pills .nav-link.active:hover,
#page-account-settings .nav.nav-pills .nav-item .nav-link.active,
#page-account-settings .nav.nav-pills .nav-item .nav-link.active:hover,
body.dark-layout #page-account-settings .nav.nav-pills .nav-link.active,
body.dark-layout #page-account-settings .nav.nav-pills .nav-item .nav-link.active,
body.dark-layout #page-account-settings .nav-pills .nav-item .nav-link.active,
html.theme-dark #page-account-settings .nav.nav-pills .nav-link.active {
  color: var(--text-inverse) !important;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  background-color: var(--accent-primary) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px var(--accent-muted) !important;
}

#page-account-settings .nav.nav-pills .nav-link:not(.active):not(:hover) .feather {
  color: var(--text-secondary) !important;
}

#page-account-settings .nav.nav-pills .nav-link:hover .feather {
  color: var(--accent-primary) !important;
}

#page-account-settings .nav.nav-pills .nav-link.active .feather,
#page-account-settings .nav.nav-pills .nav-link.active:hover .feather {
  color: var(--text-inverse) !important;
}

body.dark-layout #page-account-settings .nav.nav-pills .nav-link:not(.active):not(:hover),
html.theme-dark #page-account-settings .nav.nav-pills .nav-link:not(.active):not(:hover) {
  color: var(--text-secondary) !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: var(--border-subtle) !important;
}

body.dark-layout #page-account-settings .nav.nav-pills .nav-link:hover,
html.theme-dark #page-account-settings .nav.nav-pills .nav-link:hover {
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
  background-color: var(--surface-hover) !important;
  background-image: none !important;
}

.admin-notifications-page .admin-notification-tabs .nav-link {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  color: var(--text-secondary) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.75rem 1rem !important;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.admin-notifications-page .admin-notification-tabs .nav-link:hover {
  color: var(--accent-primary) !important;
  background: var(--surface-hover) !important;
}

.admin-notifications-page .admin-notification-tabs .nav-link.active,
.admin-notifications-page .nav.nav-pills .nav-link.active {
  color: var(--text-inverse) !important;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px var(--accent-muted);
}

.admin-notifications-page .admin-notification-tabs .nav-link.active:after,
.admin-notifications-page .nav.nav-tabs .nav-item .nav-link.active:after {
  display: none !important;
}

.admin-notifications-page .admin-notification-tabs .nav-link i {
  font-size: 0.95rem;
}

.admin-notifications-page .admin-notifications-tab-content {
  padding-top: 0.15rem;
  background: transparent !important;
}

.admin-notifications-page .admin-notifications-form__fields {
  margin-bottom: 0;
}

.admin-notifications-page .admin-notifications-form__meta {
  margin-top: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.admin-notifications-page .admin-notifications-form__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.admin-notifications-page .form-group {
  margin-bottom: 1rem;
}

.admin-notifications-page .form-group label {
  display: block;
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

/* Inputs: light = white elevated surface, dark = elevated surface (not navy vuexy) */
.admin-notifications-page .form-control,
.admin-notifications-page textarea.form-control,
.admin-notifications-page select.form-control,
.admin-notifications-page input.form-control {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  min-height: 2.5rem;
}

.admin-notifications-page .form-control:focus,
.admin-notifications-page textarea.form-control:focus,
.admin-notifications-page select.form-control:focus,
.admin-notifications-page input.form-control:focus {
  background: var(--bg-elevated) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  color: var(--text-primary) !important;
}

.admin-notifications-page .form-control::placeholder,
.admin-notifications-page textarea.form-control::placeholder {
  color: var(--text-muted) !important;
}

.admin-notifications-page textarea.form-control {
  min-height: 10rem;
  resize: vertical;
}

.admin-notifications-page .select2-container {
  width: 100% !important;
}

.admin-notifications-page .select2-container--default .select2-selection--single {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
}

.admin-notifications-page .select2-container--default.select2-container--focus .select2-selection--single,
.admin-notifications-page .select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
}

.admin-notifications-page .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary) !important;
}

.admin-notifications-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--text-muted) !important;
}

.admin-notifications-page .select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--text-muted) transparent transparent transparent !important;
}

.admin-notifications-page .send-notify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 7rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 4px 12px var(--accent-muted) !important;
  color: var(--text-inverse) !important;
}

.admin-notifications-page .send-notify-button i {
  font-size: 0.95rem;
}

/* Light: softer field contrast against white card */
body:not(.dark-layout) .admin-notifications-page .form-control,
body:not(.dark-layout) .admin-notifications-page textarea.form-control,
body:not(.dark-layout) .admin-notifications-page select.form-control,
body:not(.dark-layout) .admin-notifications-page input.form-control,
body:not(.dark-layout) .admin-notifications-page .select2-container--default .select2-selection--single {
  background: var(--bg-primary) !important;
}

body:not(.dark-layout) .admin-notifications-page .admin-notification-tabs {
  background: var(--bg-primary) !important;
}

/*
 * Dark mode — kill Vuexy navy (#10163A / #262C49)
 * and force new warm-gray dark tokens everywhere on this page.
 */
body.dark-layout .admin-notifications-page,
html.theme-dark .admin-notifications-page {
  background: transparent !important;
  color: var(--text-primary) !important;
}

body.dark-layout .admin-notifications-page .card,
body.dark-layout .admin-notifications-page .card.admin-notifications-page__card,
body.dark-layout .admin-notifications-page__card,
html.theme-dark .admin-notifications-page .card,
html.theme-dark .admin-notifications-page .card.admin-notifications-page__card,
html.theme-dark .admin-notifications-page__card {
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-layout .admin-notifications-page .card-body,
body.dark-layout .admin-notifications-page .card-content,
body.dark-layout .admin-notifications-page .tab-content,
body.dark-layout .admin-notifications-page .tab-pane,
body.dark-layout .admin-notifications-page .notify-form,
body.dark-layout .admin-notifications-page .form-group,
body.dark-layout .admin-notifications-page .controls,
body.dark-layout .admin-notifications-page .row,
html.theme-dark .admin-notifications-page .card-body,
html.theme-dark .admin-notifications-page .card-content,
html.theme-dark .admin-notifications-page .tab-content,
html.theme-dark .admin-notifications-page .tab-pane,
html.theme-dark .admin-notifications-page .notify-form,
html.theme-dark .admin-notifications-page .form-group,
html.theme-dark .admin-notifications-page .controls,
html.theme-dark .admin-notifications-page .row {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--text-primary) !important;
}

body.dark-layout .admin-notifications-page .admin-notification-tabs,
html.theme-dark .admin-notifications-page .admin-notification-tabs {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-layout .admin-notifications-page .admin-notification-tabs .nav-link.active,
body.dark-layout .admin-notifications-page .nav.nav-pills .nav-link.active,
html.theme-dark .admin-notifications-page .admin-notification-tabs .nav-link.active,
html.theme-dark .admin-notifications-page .nav.nav-pills .nav-link.active {
  color: var(--text-inverse) !important;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px var(--accent-muted) !important;
}

body.dark-layout .admin-notifications-page .admin-notification-tabs .nav-link:hover,
html.theme-dark .admin-notifications-page .admin-notification-tabs .nav-link:hover {
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
}

body.dark-layout .admin-notifications-page .form-group label,
html.theme-dark .admin-notifications-page .form-group label {
  color: var(--text-secondary) !important;
}

body.dark-layout .admin-notifications-page .form-control,
body.dark-layout .admin-notifications-page textarea.form-control,
body.dark-layout .admin-notifications-page select.form-control,
body.dark-layout .admin-notifications-page input.form-control,
body.dark-layout .admin-notifications-page .select2-container--default .select2-selection--single,
html.theme-dark .admin-notifications-page .form-control,
html.theme-dark .admin-notifications-page textarea.form-control,
html.theme-dark .admin-notifications-page select.form-control,
html.theme-dark .admin-notifications-page input.form-control,
html.theme-dark .admin-notifications-page .select2-container--default .select2-selection--single {
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

body.dark-layout .admin-notifications-page .form-control:focus,
body.dark-layout .admin-notifications-page textarea.form-control:focus,
body.dark-layout .admin-notifications-page select.form-control:focus,
body.dark-layout .admin-notifications-page input.form-control:focus,
body.dark-layout .admin-notifications-page .select2-container--default.select2-container--focus .select2-selection--single,
body.dark-layout .admin-notifications-page .select2-container--default.select2-container--open .select2-selection--single,
html.theme-dark .admin-notifications-page .form-control:focus,
html.theme-dark .admin-notifications-page textarea.form-control:focus,
html.theme-dark .admin-notifications-page select.form-control:focus,
html.theme-dark .admin-notifications-page input.form-control:focus {
  background: var(--bg-elevated) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
}

body.dark-layout .admin-notifications-page .send-notify-button,
html.theme-dark .admin-notifications-page .send-notify-button {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 4px 12px var(--accent-muted) !important;
  color: var(--text-inverse) !important;
}

body.dark-layout .admin-notifications-page .send-notify-button:hover,
html.theme-dark .admin-notifications-page .send-notify-button:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-primary)) !important;
}

/* Global safety: never leave Vuexy navy on any card in dark mode */
body.dark-layout .card,
html.theme-dark .card {
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
}

body.dark-layout .card .card-body,
html.theme-dark .card .card-body {
  background: transparent !important;
  background-color: transparent !important;
}

/* ── Notify / Email modals (users & providers) ── */
.admin-notify-modal .modal-dialog {
  margin: 1.75rem auto;
}

.admin-notify-modal .modal-dialog.modal-dialog-scrollable {
  max-height: calc(100% - 3.5rem);
}

.admin-notify-modal .modal-content {
  align-items: stretch !important;
  padding: 0 !important;
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text-primary) !important;
  overflow: hidden;
}

.admin-notify-modal form.notify-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent !important;
}

.admin-notify-modal .modal-header,
.admin-notify-modal .modal-body,
.admin-notify-modal .modal-footer {
  width: 100% !important;
  align-self: stretch !important;
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
}

.admin-notify-modal .modal-header,
.admin-notify-modal .modal-header.bg-primary,
.admin-notify-modal .modal-header.bg-primary.white {
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 1rem 1.5rem !important;
}

.admin-notify-modal .modal-title,
.admin-notify-modal .modal-header .modal-title,
.admin-notify-modal .modal-header.bg-primary .modal-title,
.admin-notify-modal .modal-header.bg-primary.white .modal-title {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.admin-notify-modal .modal-header .close,
.admin-notify-modal .modal-header.bg-primary .close,
.admin-notify-modal .modal-header.bg-primary.white .close {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  color: var(--text-secondary) !important;
  opacity: 0.9;
  text-shadow: none;
  border-radius: var(--radius-sm);
}

.admin-notify-modal .modal-header .close span,
.admin-notify-modal .modal-header.bg-primary .close span,
.admin-notify-modal .modal-header.bg-primary.white .close span {
  color: var(--text-secondary) !important;
}

.admin-notify-modal .modal-header .close:hover {
  opacity: 1;
  color: var(--text-primary) !important;
  background: var(--surface-hover) !important;
}

.admin-notify-modal .modal-header .close:hover span {
  color: var(--text-primary) !important;
}

.admin-notify-modal .modal-body,
.admin-notify-modal .modal-dialog .modal-content .modal-body {
  padding: 1.25rem 1.5rem !important;
}

.admin-notify-modal .modal-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem !important;
  border-top: 1px solid var(--border-subtle) !important;
}

.admin-notify-modal .form-group {
  margin-bottom: 1rem;
  background: transparent !important;
}

.admin-notify-modal .form-group label {
  display: block;
  color: var(--text-secondary) !important;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}

.admin-notify-modal .controls,
.admin-notify-modal .row {
  background: transparent !important;
}

.admin-notify-modal .form-control,
.admin-notify-modal textarea.form-control,
.admin-notify-modal input.form-control {
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  border-radius: var(--radius-md) !important;
  min-height: 2.5rem;
  box-shadow: none !important;
}

.admin-notify-modal .form-control:focus,
.admin-notify-modal textarea.form-control:focus,
.admin-notify-modal input.form-control:focus {
  background: var(--bg-elevated) !important;
  background-color: var(--bg-elevated) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  color: var(--text-primary) !important;
}

.admin-notify-modal .form-control::placeholder,
.admin-notify-modal textarea.form-control::placeholder {
  color: var(--text-muted) !important;
}

.admin-notify-modal textarea.form-control {
  min-height: 7rem;
  width: 100%;
  resize: vertical;
}

.admin-notify-modal .btn-secondary {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md);
  min-width: 6.5rem;
  font-weight: 600;
}

.admin-notify-modal .btn-secondary:hover {
  background: var(--surface-hover) !important;
  color: var(--text-primary) !important;
}

.admin-notify-modal .btn-primary,
.admin-notify-modal .send-notify-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 7rem;
  padding: 0.55rem 1.35rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 4px 12px var(--accent-muted) !important;
  color: var(--text-inverse) !important;
}

.admin-notify-modal .btn-primary:hover,
.admin-notify-modal .send-notify-button:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-primary)) !important;
  box-shadow: 0 6px 16px var(--accent-glow) !important;
  color: var(--text-inverse) !important;
}

.admin-notify-modal--mail .form-group,
.admin-notify-modal--mail .controls {
  width: 100%;
  max-width: 100%;
}

.admin-notify-modal--mail .controls {
  display: block;
}

.admin-notify-modal--mail .admin-email-content-field,
.admin-notify-modal--mail textarea.form-control {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  min-height: 10rem;
  resize: vertical;
  box-sizing: border-box;
}

/* Light: softer field contrast against white modal */
body:not(.dark-layout) .admin-notify-modal .form-control,
body:not(.dark-layout) .admin-notify-modal textarea.form-control,
body:not(.dark-layout) .admin-notify-modal input.form-control {
  background: var(--bg-primary) !important;
  background-color: var(--bg-primary) !important;
}

body:not(.dark-layout) .admin-notify-modal .btn-secondary {
  background: var(--bg-primary) !important;
}

/*
 * Dark mode — kill Vuexy navy (#10163A / #262C49)
 * body.dark-layout .modal .modal-* from dark-layout.css
 */
body.dark-layout .admin-notify-modal.modal .modal-content,
body.dark-layout .admin-notify-modal .modal-content,
body.dark-layout .admin-notify-modal.modal .modal-header,
body.dark-layout .admin-notify-modal .modal-header,
body.dark-layout .admin-notify-modal.modal .modal-header[class*='bg-'],
body.dark-layout .admin-notify-modal .modal-header.bg-primary,
body.dark-layout .admin-notify-modal.modal .modal-body,
body.dark-layout .admin-notify-modal .modal-body,
body.dark-layout .admin-notify-modal.modal .modal-footer,
body.dark-layout .admin-notify-modal .modal-footer,
html.theme-dark .admin-notify-modal.modal .modal-content,
html.theme-dark .admin-notify-modal .modal-content,
html.theme-dark .admin-notify-modal.modal .modal-header,
html.theme-dark .admin-notify-modal .modal-header,
html.theme-dark .admin-notify-modal.modal .modal-header[class*='bg-'],
html.theme-dark .admin-notify-modal .modal-header.bg-primary,
html.theme-dark .admin-notify-modal.modal .modal-body,
html.theme-dark .admin-notify-modal .modal-body,
html.theme-dark .admin-notify-modal.modal .modal-footer,
html.theme-dark .admin-notify-modal .modal-footer {
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}

body.dark-layout .admin-notify-modal.modal .modal-header .close,
body.dark-layout .admin-notify-modal .modal-header .close,
body.dark-layout .admin-notify-modal.modal .modal-header[class*='bg-'] .close,
html.theme-dark .admin-notify-modal.modal .modal-header .close,
html.theme-dark .admin-notify-modal .modal-header .close {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
  text-shadow: none;
}

body.dark-layout .admin-notify-modal.modal .modal-header .close span,
body.dark-layout .admin-notify-modal .modal-header .close span,
body.dark-layout .admin-notify-modal.modal .modal-header[class*='bg-'] .close span,
html.theme-dark .admin-notify-modal.modal .modal-header .close span,
html.theme-dark .admin-notify-modal .modal-header .close span {
  color: var(--text-secondary) !important;
}

body.dark-layout .admin-notify-modal .modal-title,
body.dark-layout .admin-notify-modal .form-group label,
html.theme-dark .admin-notify-modal .modal-title,
html.theme-dark .admin-notify-modal .form-group label {
  color: var(--text-secondary) !important;
}

body.dark-layout .admin-notify-modal .modal-title,
html.theme-dark .admin-notify-modal .modal-title {
  color: var(--text-primary) !important;
}

body.dark-layout .admin-notify-modal.modal .modal-content .form-control,
body.dark-layout .admin-notify-modal.modal .modal-content textarea.form-control,
body.dark-layout .admin-notify-modal.modal .modal-content input.form-control,
body.dark-layout .admin-notify-modal.modal .modal-body .form-control,
body.dark-layout .admin-notify-modal.modal .modal-body textarea.form-control,
body.dark-layout .admin-notify-modal.modal .modal-body input.form-control,
body.dark-layout .admin-notify-modal .form-control,
body.dark-layout .admin-notify-modal textarea.form-control,
body.dark-layout .admin-notify-modal input.form-control,
html.theme-dark .admin-notify-modal.modal .modal-content .form-control,
html.theme-dark .admin-notify-modal.modal .modal-body .form-control,
html.theme-dark .admin-notify-modal .form-control,
html.theme-dark .admin-notify-modal textarea.form-control,
html.theme-dark .admin-notify-modal input.form-control {
  background: var(--bg-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

body.dark-layout .admin-notify-modal.modal .modal-content .form-control:focus,
body.dark-layout .admin-notify-modal.modal .modal-body .form-control:focus,
body.dark-layout .admin-notify-modal .form-control:focus,
html.theme-dark .admin-notify-modal .form-control:focus {
  background: var(--bg-primary) !important;
  background-color: var(--bg-primary) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 0 0 3px var(--accent-muted) !important;
  color: var(--text-primary) !important;
}

body.dark-layout .admin-notify-modal .btn-secondary,
html.theme-dark .admin-notify-modal .btn-secondary {
  background: var(--bg-secondary) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}

body.dark-layout .admin-notify-modal .btn-primary,
body.dark-layout .admin-notify-modal .send-notify-button,
html.theme-dark .admin-notify-modal .btn-primary,
html.theme-dark .admin-notify-modal .send-notify-button {
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-hover)) !important;
  border-color: var(--accent-primary) !important;
  box-shadow: 0 4px 12px var(--accent-muted) !important;
  color: var(--text-inverse) !important;
}

body.dark-layout .admin-notify-modal .btn-primary:hover,
body.dark-layout .admin-notify-modal .send-notify-button:hover,
html.theme-dark .admin-notify-modal .btn-primary:hover,
html.theme-dark .admin-notify-modal .send-notify-button:hover {
  background: linear-gradient(135deg, var(--accent-hover), var(--accent-primary)) !important;
  box-shadow: 0 6px 16px var(--accent-glow) !important;
  color: var(--text-inverse) !important;
}

.admin-notifications-page .admin-email-content-field,
.admin-notifications-page textarea[name="message"] {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 14rem;
  resize: vertical;
  box-sizing: border-box;
}

/* ── Admin notifications inbox ── */
.admin-notifications-inbox .card-body {
  padding: 0 !important;
}

.admin-notifications-inbox .app-action {
  padding: 0.85rem 1.25rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 0;
}

.admin-notifications-inbox .app-action .vs-checkbox-con span:last-child {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.admin-notifications-inbox .action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--danger);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.admin-notifications-inbox .action-icon:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border-color: var(--danger);
  transform: scale(1.05);
}

.admin-notifications-inbox .admin-notifications-delete-all {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.55rem;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--danger) !important;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-md);
}

.admin-notifications-inbox .admin-notifications-delete-all:hover,
.admin-notifications-inbox .admin-notifications-delete-all:focus {
  background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
  outline: none;
  box-shadow: none !important;
}

.admin-notifications-inbox .admin-notifications-delete-all i {
  font-size: 1.05rem;
}

.admin-notifications-inbox .media-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-inline-start: 0.75rem;
}

.admin-notifications-inbox .delete_one_button {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text-muted);
}

.admin-notifications-inbox .delete_one_button:hover,
.admin-notifications-inbox .delete_one_button:focus {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent) !important;
  outline: none;
}

.admin-notifications-inbox .admin-notifications-list {
  position: relative;
  max-height: calc(100vh - 14rem);
  overflow-y: auto;
}

.admin-notifications-inbox .admin-notifications-list .users-list-wrapper {
  padding: 0;
  margin: 0;
  list-style: none;
}

.admin-notifications-inbox .media.mail-read {
  display: flex;
  align-items: flex-start;
  padding: 0.85rem 1.25rem;
  margin: 0;
  border: none;
  background: transparent;
  transition: background var(--transition-fast);
}

.admin-notifications-inbox .media.mail-read:hover {
  background: var(--surface-hover);
}

.admin-notifications-inbox hr {
  margin: 0;
  border-color: var(--border-subtle);
}

.admin-notifications-inbox .list-group-item-text {
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  font-size: 0.95rem;
}

.admin-notifications-inbox .mail-meta-item {
  white-space: nowrap;
}

.admin-notifications-inbox .mail-date {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.admin-notifications-inbox .mail-message a {
  color: var(--text-secondary);
  text-decoration: none;
  display: block;
  padding: 0.35rem 0 !important;
}

.admin-notifications-inbox .mail-message a:hover {
  color: var(--accent-primary);
}

.admin-notifications-inbox .mail-message p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}

.admin-notifications-inbox .admin-notifications-list > .admin-table-empty {
  border-top: none;
  min-height: 220px;
  padding: 2.5rem 1rem;
  background: transparent;
  animation: none;
}

.admin-notifications-inbox .no-data {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  min-height: 220px;
  color: var(--text-muted);
  border-top: none;
  background: transparent;
  animation: none;
}

.admin-notifications-inbox .no-data img {
  max-width: 120px;
  opacity: 0.6;
  margin-bottom: 0.75rem;
}

.admin-notifications-inbox .notifications-pagination {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.admin-notifications-inbox .vs-checkbox {
  border-color: var(--border-strong) !important;
  background: var(--surface-card) !important;
}

.admin-notifications-inbox .vs-checkbox-con input:checked ~ .vs-checkbox {
  background: var(--accent-primary) !important;
  border-color: var(--accent-primary) !important;
}

#notifications-content.is-loading {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity var(--transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  .admin-table-empty,
  .position-relative > .d-flex.flex-column.w-100.align-center {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .loader__logo-wrap,
  .loader__orbit {
    animation: none !important;
  }

  .app-content.content {
    animation: none !important;
  }
}

/* ── Nav pills (profile, settings) — kill Vuexy dark-layout legacy tab colors ── */
body.dark-layout .nav.nav-pills .nav-item .nav-link:not(.color-none),
body.dark-layout .nav.nav-pills .nav-item .nav-link:not(.color-none).active,
body.dark-layout .nav.nav-pills .nav-item .nav-link:not(.color-none):hover,
body.dark-layout .nav.nav-pills .nav-item .nav-link:not(.color-none):focus {
  transition: none !important;
}

body.dark-layout .nav.nav-pills .nav-item .nav-link:not(.color-none):not(.active):not(:hover) {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: var(--text-secondary, #d0d2d6) !important;
}

body.dark-layout .nav.nav-pills .nav-item .nav-link:not(.color-none).active,
body.dark-layout .nav.nav-pills .nav-item .nav-link:not(.color-none):hover {
  background: linear-gradient(
    118deg,
    var(--accent-primary, #5B54D9),
    rgba(var(--accent-primary-rgb, 91, 84, 217), 0.75)
  ) !important;
  background-color: var(--accent-primary, #5B54D9) !important;
  border-color: var(--accent-primary, #5B54D9) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px -4px rgba(var(--accent-primary-rgb, 91, 84, 217), 0.5) !important;
}

/* ── Admin image preview modal (light/dark via tokens) ── */
.admin-image-preview-modal .modal-content.admin-image-preview-modal__content,
.admin-image-preview-modal .admin-image-preview-modal__header,
.admin-image-preview-modal .admin-image-preview-modal__footer {
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

.admin-image-preview-modal .admin-image-preview-modal__body,
.admin-image-preview-modal .admin-image-preview-modal__stage,
.admin-image-preview-modal .admin-image-preview-modal__loader,
.admin-image-preview-modal .admin-image-preview-modal__error {
  background: var(--bg-secondary) !important;
  background-color: var(--bg-secondary) !important;
}

.admin-image-preview-modal .admin-image-preview-modal__title-wrap .modal-title,
.admin-image-preview-modal .modal-title {
  color: var(--text-primary) !important;
}

.admin-image-preview-modal .admin-image-preview-modal__subtitle,
.admin-image-preview-modal .admin-image-preview-modal__hint,
.admin-image-preview-modal .admin-image-preview-modal__loader span,
.admin-image-preview-modal .admin-image-preview-modal__error p {
  color: var(--text-muted) !important;
}

.admin-image-preview-modal .admin-image-preview-modal__close,
.admin-image-preview-modal .admin-image-preview-modal__close span {
  color: var(--text-secondary) !important;
  text-shadow: none !important;
}

.admin-image-preview-modal .admin-image-preview-modal__close:hover {
  background: var(--surface-hover) !important;
  color: var(--accent-primary) !important;
}

.admin-image-preview-modal .admin-image-preview-modal__img {
  background: var(--surface-card) !important;
  background-color: var(--surface-card) !important;
}

.admin-image-preview-modal .admin-image-preview-modal__title-icon {
  background: rgba(var(--accent-primary-rgb), 0.12) !important;
  color: var(--accent-primary) !important;
}

/* ── Password visibility toggle ── */
.admin-password-toggle {
  position: relative;
  display: block;
  width: 100%;
}

.admin-password-toggle > .form-control {
  padding-inline-end: 2.75rem;
}

.admin-password-toggle__btn {
  position: absolute;
  inset-inline-end: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #4A4458) !important;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s ease, background 0.2s ease;
}

.admin-password-toggle__btn:hover,
.admin-password-toggle__btn:focus {
  color: var(--accent-primary, #5B54D9) !important;
  background: rgba(var(--accent-primary-rgb, 91, 84, 217), 0.08);
  outline: none;
}

.admin-password-toggle__btn i,
.admin-password-toggle__btn i.feather,
.admin-password-toggle__btn i.feather:before,
.admin-password-toggle__btn svg,
.admin-password-toggle__btn svg.feather {
  width: 1.1rem !important;
  height: 1.1rem !important;
  pointer-events: none;
  color: inherit !important;
  stroke: currentColor !important;
  fill: none !important;
}

body.dark-layout .admin-password-toggle__btn,
html.theme-dark .admin-password-toggle__btn {
  color: var(--text-muted, #B8B3C8) !important;
}

body.dark-layout .admin-password-toggle__btn:hover,
body.dark-layout .admin-password-toggle__btn:focus,
html.theme-dark .admin-password-toggle__btn:hover,
html.theme-dark .admin-password-toggle__btn:focus {
  color: var(--accent-primary, #5B54D9) !important;
  background: rgba(var(--accent-primary-rgb, 91, 84, 217), 0.14);
}