/* ==========================================================================
   Admin theme overrides - light/dark token system
   Loaded after style.css / style-rtl.css.

   Light values live on :root. Dark values override the same custom
   properties under body[data-theme="dark"] - and reuse the EXACT palette
   already shipped (but dormant) in style.css's ~180 `body[data-theme=dark]`
   rules (#141432 page bg, #1d1d42 surface, #97A2D2 text, #353570 border,
   #8ea0af muted text) so this file stays consistent with, rather than
   duplicating/fighting, that existing dark skin.

   Toggling is done by theme-toggle.js, which sets/removes
   body[data-theme="dark"]. This file only reacts to that attribute - it
   contains no toggle logic itself.
   ========================================================================== */

:root {
  --brand-primary: #25c2f0;
  --brand-primary-rgb: 37, 194, 240;
  --brand-primary-dark: #1a9fc7;
  --brand-navy: #1B2850;

  --bg-body: #f8fafc;
  --bg-surface: #ffffff;
  --bg-surface-muted: #f8fafc;
  --bg-sidebar: #ffffff;
  --bg-header: #ffffff;

  --text-body: #1f2937;
  --text-muted: #6b7280;
  --text-sidebar: #4b5563;
  --text-sidebar-muted: #6b7280;

  --border-color: #e5e7eb;
  --border-color-strong: #d1d5db;
  --shadow-color: rgba(19, 28, 61, 0.06);
  --overlay-bg: rgba(15, 23, 42, 0.5);
}

body[data-theme="dark"] {
  --bg-body: #0f1115;
  --bg-surface: #171921;
  --bg-surface-muted: #1c1f27;
  --bg-sidebar: #12141a;
  --bg-header: #12141a;

  --text-body: #e5e7eb;
  --text-muted: #9099a8;
  --text-sidebar: #d1d5db;
  --text-sidebar-muted: #8b93a3;

  --border-color: #262a33;
  --border-color-strong: #333844;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --overlay-bg: rgba(3, 4, 6, 0.65);
}
/* A handful of components still get their dark background from the
   vendor's own hardcoded body[data-theme=dark] rules (e.g. #141432/#1d1d42)
   rather than these tokens - override just those here so the whole page
   reads as one consistent neutral-dark palette instead of two different
   dark themes layered on each other. */
body[data-theme="dark"] .dropdown-menu,
body[data-theme="dark"] .header .dropdown-menu,
body[data-theme="dark"] .modal-content,
body[data-theme="dark"] .card,
body[data-theme="dark"] .select2-dropdown,
body[data-theme="dark"] .select2-results__option,
body[data-theme="dark"] .dataTables_wrapper .dataTables_processing {
  background: var(--bg-surface);
  color: var(--text-body);
}
body[data-theme="dark"] .form-control,
body[data-theme="dark"] .form-select {
  background: var(--bg-surface);
  color: var(--text-body);
  border-color: var(--border-color);
}

/* Accent color picker - swaps --brand-primary/-dark/-rgb, everything else
   (sidebar active state, buttons, focus rings, links) already references
   these variables so it re-colors automatically with no further overrides. */
body[data-accent="purple"] {
  --brand-primary: #7367F0;
  --brand-primary-rgb: 115, 103, 240;
  --brand-primary-dark: #5b4bd6;
}
body[data-accent="green"] {
  --brand-primary: #28C76F;
  --brand-primary-rgb: 40, 199, 111;
  --brand-primary-dark: #1f9d57;
}
body[data-accent="orange"] {
  --brand-primary: #FF9F43;
  --brand-primary-rgb: 255, 159, 67;
  --brand-primary-dark: #e8892f;
}
body[data-accent="rose"] {
  --brand-primary: #EA5455;
  --brand-primary-rgb: 234, 84, 85;
  --brand-primary-dark: #d33d3e;
}
body[data-accent="indigo"] {
  --brand-primary: #4361EE;
  --brand-primary-rgb: 67, 97, 238;
  --brand-primary-dark: #2f4fd8;
}

/* Smooth, subtle transition between themes - no layout shift, just color/bg */
body,
.sidebar,
.header,
.card,
.table,
.btn,
.dropdown-menu,
.modal-content,
.badge,
.alert,
.form-control,
.page-header {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}

body {
  background: var(--bg-body);
  color: var(--text-body);
}

/* --------------------------------------------------------------------------
   Sidebar - full height on the left (brand lives here now), header no
   longer spans behind it, it sits beside it instead (see .header below).
   -------------------------------------------------------------------------- */
.sidebar {
  background-color: var(--bg-sidebar);
  border-right: 1px solid var(--border-color);
  top: 0 !important;
  flex-direction: column;
}
.sidebar .slimScrollDiv {
  background: var(--bg-sidebar);
}

.sidebar-brand {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  box-sizing: border-box;
}
.sidebar-brand-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-body);
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.sidebar-brand-link img {
  height: 30px;
  width: 100%;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--brand-primary);
}

/* Sidebar collapse toggle - lives at the right edge of the brand bar (desktop
   only, see the max-width:991.98px override below - collapsing an
   already-off-canvas mobile drawer to icon-only doesn't apply there). Reuses
   the same 3-bar icon shape as the mobile drawer's #mobile_btn, themed via
   --brand-primary instead of the vendor's fixed background. Click handling
   (toggles body.mini-sidebar) is existing vendor JS bound to #toggle_btn by
   id via delegation, so it still works from this new location unchanged. */
.sidebar-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.sidebar-toggle-btn:hover {
  background: rgba(var(--brand-primary-rgb), 0.12);
}
/* Vendor's #toggle_btn::before draws an unrelated dot/oval indicator meant
   for the old header-left placement - it isn't scoped to any ancestor, so
   it still renders next to the bar-icon in this new location. Suppress it
   entirely rather than trying to reposition it. */
#toggle_btn::before {
  content: none;
}
/* Generic bar-icon color (covers #mobile_btn's hamburger, which never had
   its own override before and stayed hardcoded to the vendor's fixed
   cyan) - .sidebar-toggle-btn's own more specific rule below still wins
   for its resting (non-hover, non-collapsed) muted state. */
.bar-icon span {
  background-color: var(--brand-primary);
}
.sidebar-toggle-btn .bar-icon {
  margin-top: 0;
  width: 20px;
}
.sidebar-toggle-btn .bar-icon span {
  width: 20px;
  margin-bottom: 4px;
  background-color: var(--text-sidebar-muted);
}
.sidebar-toggle-btn .bar-icon span:nth-child(2) {
  width: 12px;
}
.sidebar-toggle-btn:hover .bar-icon span,
body.mini-sidebar .sidebar-toggle-btn .bar-icon span {
  background-color: var(--brand-primary);
}

/* Collapse is click-only (see footer-scripts.blade.php - the vendor's
   hover-to-peek behavior is disabled), so these only ever need the plain
   body.mini-sidebar state, no .expand-menu variant. !important guards the
   width/offset against any other rule that might otherwise win a
   specificity tie, since a stuck-wide sidebar was reported here before. */
@media (min-width: 991.98px) {
  body.mini-sidebar .sidebar-brand-link {
    display: none;
  }
  body.mini-sidebar .sidebar-brand {
    justify-content: center;
  }
  body.mini-sidebar .sidebar {
    width: 80px !important;
  }
  /* The slimScroll plugin wraps .sidebar-inner in its own .slimScrollDiv,
     which the vendor pins to a hardcoded 260px !important with
     overflow:visible !important - so even though .sidebar itself shrinks
     above, this inner wrapper stayed at 260px and visually spilled out
     over the main content instead of shrinking with it. */
  body.mini-sidebar .sidebar .slimScrollDiv {
    width: 80px !important;
  }
  body.mini-sidebar .page-wrapper {
    margin-left: 80px !important;
  }
  /* Section labels ("Overview", "Engagement"...) aren't nav-item spans, so
     the vendor's collapsed-text rule never hides them - they just wrap
     awkwardly in the 80px rail otherwise. */
  body.mini-sidebar .sidebar-menu .menu-title {
    display: none;
  }
}
@media (max-width: 991.98px) {
  .sidebar-toggle-btn {
    display: none;
  }
}

.sidebar .sidebar-menu > ul > li > a {
  color: var(--text-sidebar);
  border-radius: 8px;
  transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease;
}
.sidebar .sidebar-menu > ul > li > a span {
  color: var(--text-sidebar);
}
.sidebar .sidebar-menu > ul > li > a svg {
  color: var(--text-sidebar-muted);
}
.sidebar .sidebar-menu > ul > li > a img {
  opacity: 0.7;
}
body[data-theme="dark"] .sidebar .sidebar-menu > ul > li > a img {
  filter: brightness(0) saturate(100%) invert(65%) sepia(27%) saturate(206%) hue-rotate(165deg) brightness(93%) contrast(88%);
}

.sidebar .sidebar-menu > ul > li > a:hover,
.sidebar .sidebar-menu > ul > li > a.active,
.sidebar .sidebar-menu > ul > li.active > a {
  background: rgba(var(--brand-primary-rgb), 0.12);
  border-left: 3px solid var(--brand-primary);
  padding-left: 12px;
  color: var(--brand-primary);
}
.sidebar .sidebar-menu > ul > li > a:hover span,
.sidebar .sidebar-menu > ul > li > a.active span,
.sidebar .sidebar-menu > ul > li.active > a span {
  color: var(--brand-primary);
}
.sidebar .sidebar-menu > ul > li > a:hover img,
.sidebar .sidebar-menu > ul > li > a.active img,
.sidebar .sidebar-menu > ul > li.active > a img {
  opacity: 1;
}
.sidebar .sidebar-menu > ul > li > a:hover svg,
.sidebar .sidebar-menu > ul > li > a.active svg,
.sidebar .sidebar-menu > ul > li.active > a svg {
  color: var(--brand-primary);
}

.sidebar .sidebar-menu > ul > li.submenu ul li a {
  color: var(--text-sidebar-muted);
}
.sidebar .sidebar-menu > ul > li.submenu ul li a:hover,
.sidebar .sidebar-menu > ul > li.submenu ul li a.active {
  color: var(--brand-primary);
  background: transparent;
}
.sidebar .sidebar-menu > ul > li.submenu ul li a:hover::after,
.sidebar .sidebar-menu > ul > li.submenu ul li a.active::after {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

/* Collapsed rail (80px) has no room for a nested indented submenu, so it
   floats open as a proper card instead - the vendor bundle only ever
   accounted for the expanded 260px case (plain flush #FAFBFE block), it had
   no collapsed-specific styling at all, which is why it rendered as an
   unstyled white rectangle spilling over the main content. */
@media (min-width: 991.98px) {
  /* The slimScroll plugin sets inline overflow:hidden on .sidebar-inner at
     runtime (its own scrollbar mechanism) - that clips the flyout below no
     matter how it's positioned, since overflow:hidden clips any descendant
     that visually extends past it regardless of position:absolute. Can't
     mix visible on one axis with a non-visible value on the other here -
     per spec that silently computes the "visible" axis to auto, which
     still clips - so both axes go fully visible, matching how its own
     parent (.slimScrollDiv) already behaves unconditionally (permanently
     non-scrolling) one level up. */
  body.mini-sidebar .sidebar-inner.slimscroll {
    overflow: visible !important;
  }
  body.mini-sidebar .sidebar .sidebar-menu > ul > li.submenu {
    position: relative;
  }
  body.mini-sidebar .sidebar .sidebar-menu > ul > li.submenu > ul {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 8px;
    min-width: 200px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 12px 30px var(--shadow-color);
    padding: 8px;
    z-index: 1002;
  }
}

/* Badge support on sidebar menu items (e.g. counts) */
.sidebar .sidebar-menu .menu-badge {
  display: inline-block;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  background: var(--brand-primary);
  color: #fff;
}

/* Section group labels ("Overview", "Engagement", etc.) */
.sidebar .sidebar-menu .menu-title {
  padding: 16px 15px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-sidebar-muted);
  opacity: 0.7;
}
.sidebar .sidebar-menu .menu-title:first-child {
  padding-top: 4px;
}

/* Sidebar footer profile card - pinned to the bottom of the fixed sidebar.
   Reserving its height (76px) out of the scrollable nav above it is done in
   JS (footer-scripts.blade.php), not here - the nav's own scroll box height
   is set at runtime by the slimScroll plugin, so padding alone here can't
   stop that box from extending behind this footer. */
.sidebar-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-sidebar);
}
.sidebar-footer .user-img.user-img-initials {
  width: 36px;
  height: 36px;
  font-size: 12px;
  flex-shrink: 0;
}
.sidebar-footer-info {
  flex: 1;
  min-width: 0;
}
.sidebar-footer-info h6 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-sidebar);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-footer-info span {
  font-size: 12px;
  color: var(--text-sidebar-muted);
}
.sidebar-footer-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--text-sidebar-muted);
  flex-shrink: 0;
}
.sidebar-footer-logout:hover {
  background: rgba(234, 84, 85, 0.12);
  color: #ea5455;
}

/* --------------------------------------------------------------------------
   Header - starts after the sidebar's width now that the brand lives there
   instead of spanning full-width above it.
   -------------------------------------------------------------------------- */
.header {
  background: var(--bg-header);
  box-shadow: 0 2px 12px var(--shadow-color);
  left: 260px;
}
@media (max-width: 991.98px) {
  .header {
    left: 0;
  }
  /* The mobile drawer (.sidebar) is z-index:1041 and, when open, covers the
     full viewport width - since it's also the same height as the header
     (top:0, needed for the desktop sidebar-brand feature) and stacks above
     it, the header - including the hamburger button that closes the
     drawer - was getting completely buried underneath with no way to
     click it, and since the drawer is full width there's no exposed
     overlay area to tap either. Keeping the header on top fixes both. */
  .header {
    z-index: 1050;
  }
}
@media (min-width: 991.98px) {
  body.mini-sidebar .header {
    left: 80px !important;
  }
}

.header .header-left {
  background: transparent;
  width: auto;
  border-right: none;
  padding: 0 20px 0 24px;
}
body[data-theme="dark"] .header .header-left {
  border-right: none;
}
@media (max-width: 991.98px) {
  /* .header-left is position:absolute (vendor rule, sized for a centered
     logo) and #mobile_btn is ALSO position:absolute at left:0 width:60px -
     since .header-left now holds the left-flush breadcrumb instead of a
     centered logo, the two absolutely-positioned elements collide and the
     hamburger button visually sits on top of the breadcrumb text. */
  .header .header-left {
    padding-left: 76px;
  }
}

.header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.header-breadcrumb .crumb-section {
  color: var(--text-muted);
}
.header-breadcrumb .crumb-page {
  color: var(--text-body);
  font-weight: 700;
}
.header-breadcrumb i {
  font-size: 10px;
  color: var(--border-color-strong);
}
@media (max-width: 767.98px) {
  .header-breadcrumb {
    display: none;
  }
}

.header-mobile-brand {
  display: none;
}
@media (max-width: 991.98px) {
  .header-mobile-brand {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .header-mobile-brand img {
    height: 32px;
    width: auto;
    max-width: 140px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--brand-primary);
  }
  .header-mobile-brand span {
    color: var(--text-body);
    font-weight: 800;
    font-size: 15px;
    white-space: nowrap;
  }
}
.header .user-menu .userset .user-img {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  height: 38px;
  border: 2px solid rgba(var(--brand-primary-rgb), 0.25);
  border-radius: 50%;
}
/* Generated initials avatar - avoids depending on a profile photo entirely
   (the vendor's static avator1.jpg had no reliable width+height constraint
   and stretched into an oval). Reused for both the header avatar and the
   sidebar footer avatar. */
.user-img-initials {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
/* The vendor's dark-mode rules only recolor the dropdown-toggle's *open*
   state - the resting icon color (bell, kebab menu) stays #212B36 (near-
   black) and disappears against the dark header. Cover the resting state
   too. */
.header .user-menu.nav > li > a,
.header .user-menu.nav > li > a i {
  color: var(--text-body);
}
.header .user-menu.nav > li > a:hover,
.header .user-menu.nav > li > a:hover i {
  color: var(--brand-primary);
}

/* .header-icon-btn is the shared style for every icon-only control in the
   header (theme toggle, color picker, notifications) - bare icon, no chip/
   border, just consistent size + generous spacing + a hover color change,
   matching a cleaner reference look. It's applied via
   ".header .user-menu .header-icon-btn" (3 classes deep) specifically to
   out-specificity the vendor's ".user-menu.nav > li > a { height:60px;
   padding:0 15px }" rule (2 classes + 2 combinators) - without that, these
   render inconsistently (some stretched to 60px tall, some with the
   vendor's wide padding, some with none at all). */
.header .user-menu {
  gap: 4px;
}
/* .user-menu is a Bootstrap .nav, so it's actually display:flex (not the
   float:right the vendor CSS implies) with the flex default align-items:
   stretch - each <li> stretches to the full 60px header height, but the
   <li> itself isn't a flex container, so its own child (the icon button)
   just sits at the top of that stretched box instead of centering within
   it - hence the ~10px-too-high icons. Centering the <li>'s own content
   fixes it at the actual source instead of guessing at vertical-align. */
.header .user-menu > li {
  display: flex;
  align-items: center;
}
.header .user-menu .header-icon-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px !important;
  line-height: normal !important;
  padding: 0 !important;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 17px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.header .user-menu .header-icon-btn:hover {
  background: rgba(var(--brand-primary-rgb), 0.12);
  color: var(--brand-primary);
}
.theme-toggle-btn .fa-sun {
  display: none;
}
body[data-theme="dark"] .theme-toggle-btn .fa-sun {
  display: inline-block;
}
body[data-theme="dark"] .theme-toggle-btn .fa-moon {
  display: none;
}

/* Header search box - the header's layout is float-based (.header-left is
   float:left, .user-menu is float:right, not flex), so this needs to float
   too and fill the 60px header row itself, or it breaks onto its own line
   and pushes everything after it (mobile toggle, icons, avatar) below the
   fixed-height header entirely. */
.header-search-form {
  float: left;
  position: relative;
  width: 260px;
  max-width: 30vw;
  height: 60px;
  display: flex;
  align-items: center;
  margin-left: 16px;
}
.header-search-form input {
  width: 100%;
  padding: 8px 60px 8px 36px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--bg-surface-muted);
  color: var(--text-body);
  font-size: 13px;
}
.header-search-form input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}
.header-search-form i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
}
.search-kbd-hint {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 5px;
  padding: 2px 6px;
  pointer-events: none;
}
@media (max-width: 1200px) {
  .header-search-form {
    display: none;
  }
}

/* Accent color picker dropdown */
.color-picker-menu {
  min-width: 220px;
  padding-bottom: 14px;
}
.color-swatch-list {
  display: flex;
  gap: 10px;
  padding: 14px 16px 4px;
}
.color-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--swatch);
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.color-swatch:hover {
  transform: scale(1.1);
}
.color-swatch.active {
  border-color: var(--text-body);
}

/* Vendor hardcodes the kebab trigger's icon to the fixed default cyan,
   unlike the desktop icon row (already accent-aware) - so it never
   followed the accent picker. Scoped to the direct-child trigger <a> only
   (the dropdown-item links live inside the nested .dropdown-menu div, a
   sibling, not a descendant of this <a>), so the menu items keep their
   own vendor styling untouched. */
.mobile-user-menu > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px !important;
  line-height: normal !important;
  color: var(--brand-primary) !important;
  background: transparent;
  border-radius: 50%;
}
/* .mobile-user-menu is display:flex (vendor rule) with the flex default
   align-items:stretch and no centering set, so the 40px trigger above
   wasn't vertically centered within the container's 60px header-row
   height - the same "flex stretch, not centered" pattern already fixed
   for .header .user-menu earlier. */
.mobile-user-menu {
  align-items: center;
}

/* Mobile kebab menu (.mobile-user-menu, shown <=575px in place of the full
   icon row) only ever had Profile/Logout/Clear Cache - the theme toggle and
   accent picker didn't exist there at all, a real feature gap vs. desktop,
   not just a style difference. */
.mobile-menu-dropdown {
  min-width: 220px;
}
.mobile-menu-section {
  padding: 12px 16px 8px;
}
.mobile-menu-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.mobile-menu-section .color-swatch-list {
  padding: 0;
}
.mobile-menu-theme-toggle {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
}
.mobile-menu-theme-toggle i {
  font-size: 15px;
  color: var(--text-muted);
  width: 16px;
}

/* Notification bell + dropdown (empty-state, no fabricated data) */
.notification-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
}
.notification-empty i {
  font-size: 28px;
  margin-bottom: 10px;
  opacity: 0.5;
  display: block;
}
.header .badge.notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 16px;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Page header, breadcrumb, Back button
   -------------------------------------------------------------------------- */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.page-header .page-title-wrap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.page-header .page-title h4 {
  font-weight: 700;
  color: var(--text-body);
}

.page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.breadcrumb-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  padding: 0;
  list-style: none;
}
.breadcrumb-trail .crumb:last-child {
  color: var(--text-body);
  font-weight: 600;
}
.breadcrumb-trail .crumb-sep {
  color: var(--border-color-strong);
  font-size: 11px;
}
html[dir="rtl"] .breadcrumb-trail .crumb-sep i {
  transform: scaleX(-1);
}

.btn-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  color: var(--text-body);
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 1px 3px var(--shadow-color);
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.btn-back:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #fff;
  transform: translateX(-2px);
}
html[dir="rtl"] .btn-back:hover {
  transform: translateX(2px);
}
html[dir="rtl"] .btn-back i {
  transform: scaleX(-1);
}
.btn-back i {
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 10px var(--shadow-color);
}
.card .card-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-color);
}
.card .card-header .card-title {
  color: var(--text-body);
}
.card:hover {
  box-shadow: 0 6px 20px var(--shadow-color);
}

/* --------------------------------------------------------------------------
   Buttons - primary/secondary/success/danger/warning/info/outline/ghost/icon/FAB
   -------------------------------------------------------------------------- */
.btn {
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.btn:active {
  transform: translateY(1px);
}
.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

.btn-primary,
.btn-added,
.btn-login {
  border-radius: 8px !important;
}
/* .btn-added ("Add Category"/"Add Question"/... across every list page) and
   .btn-submit ("Update" on every settings/edit form) were both hardcoded to
   the vendor's fixed cyan regardless of accent - only their hover states
   were theme-aware before, so picking any other accent left these buttons
   visibly stuck on the old color while the rest of the page (pagination,
   sidebar, etc.) correctly followed the picker. */
.btn-primary,
.btn-added,
.btn-submit {
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
}
.btn-primary:hover,
.btn-added:hover,
.btn-submit:hover,
.btn-login:hover {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
}

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info {
  background: transparent;
}
.btn-outline-secondary:hover,
.btn-outline-primary:hover,
.btn-outline-success:hover,
.btn-outline-danger:hover,
.btn-outline-warning:hover,
.btn-outline-info:hover {
  background: rgba(var(--brand-primary-rgb), 0.12) !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-primary) !important;
}
.btn-outline-secondary:hover i,
.btn-outline-primary:hover i,
.btn-outline-success:hover i,
.btn-outline-danger:hover i,
.btn-outline-warning:hover i,
.btn-outline-info:hover i {
  color: var(--brand-primary) !important;
}

.btn-ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-body);
}
.btn-ghost:hover {
  background: rgba(var(--brand-primary-rgb), 0.12);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}
.btn-ghost:hover i {
  color: var(--brand-primary);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 8px;
}
.btn-icon:hover {
  background: rgba(var(--brand-primary-rgb), 0.12);
  color: var(--brand-primary);
}

.btn-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 10px 25px rgba(var(--brand-primary-rgb), 0.4);
  z-index: 1000;
}
.btn-fab:hover {
  background: var(--brand-primary-dark);
  color: #fff;
}

/* Button loading spinner - opt-in utility, add class="btn-loading" */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-top-color: #fff;
  animation: btn-spin 0.6s linear infinite;
}
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table {
  color: var(--text-body);
}
.table thead th {
  background: var(--bg-surface-muted);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 1;
}
.table tbody tr {
  border-bottom: 1px solid var(--border-color);
}
.table tbody tr:hover {
  background: var(--bg-surface-muted);
}
.table td,
.table th {
  border-color: var(--border-color) !important;
}

div.dataTables_wrapper div.dataTables_processing {
  background: var(--bg-surface);
  color: var(--text-body);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  box-shadow: 0 12px 30px var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
div.dataTables_wrapper div.dataTables_processing::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  border-top-color: var(--brand-primary);
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}
table.dataTable tbody tr.odd,
table.dataTable tbody tr.even {
  background: var(--bg-surface);
}
.dataTables_empty {
  padding: 40px 0 !important;
  color: var(--text-muted) !important;
  font-size: 14px;
}

/* Search box / length menu above each DataTable */
.dataTables_filter input,
.dataTables_length select {
  background: var(--bg-surface);
  color: var(--text-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 12px;
}
.dataTables_filter input:focus,
.dataTables_length select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}
.dataTables_info {
  color: var(--text-muted);
}
/* The vendor CSS (style.css/style-rtl.css) injects a hardcoded "Show  per
   page :" via ::before on this label, right in front of DataTables' own
   length-menu text ("Show _MENU_ entries") - always a redundant duplicate
   phrase in English ("Show per page : Show 100 entries"), and worse now
   that lengthMenu is correctly translated for Arabic (English text stuck
   in front of an Arabic sentence). DataTables' own label already says
   this, so removing the injected text is the fix, not translating it. */
.dataTables_length label:before {
  content: none;
}

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */
.badge {
  border-radius: 6px;
  font-weight: 600;
  padding: 5px 10px;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.pagination .page-link,
.dataTables_paginate .paginate_button {
  border-radius: 6px !important;
  margin: 0 2px;
  color: #fff;
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}
/* Two different DataTables integrations are in play across this app's
   pages: the plain jQuery build marks the current page with .current, the
   Bootstrap4-integrated build (dataTables.bootstrap4.min.js) marks it with
   Bootstrap's own .active .page-link instead - and the vendor's own
   style.css hardcodes THAT exact combination (".pagination li.active
   a.page-link") to the fixed default cyan at a higher specificity (3
   classes + 2 types) than the plain override above (2 classes), so it won
   regardless of source order and stayed cyan even after switching accents. */
.dataTables_paginate .paginate_button.current,
.pagination li.active a.page-link,
.dataTables_paginate .paginate_button.active .page-link {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  color: #fff !important;
}
/* Same issue as the .active fix above, but for :hover - the vendor's
   ".pagination li a:hover" targets the <a> directly with a hardcoded
   cyan, a different element than ".paginate_button:hover" (the <li>), so
   they aren't actually in conflict - the anchor's own hardcoded
   background just paints on top, regardless of accent. */
.dataTables_paginate .paginate_button:hover,
.pagination li a:hover,
.dataTables_paginate .paginate_button:hover .page-link {
  background: var(--brand-primary-dark) !important;
  border-color: var(--brand-primary-dark) !important;
  color: #fff !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  background: var(--bg-surface-muted) !important;
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
  opacity: 0.6;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Dropdowns / Modals - radius + shadow polish (colors mostly already
   handled by the vendor's existing body[data-theme=dark] rules)
   -------------------------------------------------------------------------- */
.dropdown-menu {
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 30px var(--shadow-color);
}

.modal-content {
  border-radius: 14px;
  border: none;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.modal-backdrop.show {
  opacity: 0.6;
  backdrop-filter: blur(2px);
}
.modal-header {
  border-bottom: 1px solid var(--border-color);
}
.modal-header .btn-close {
  border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Alerts / flash messages (no vendor styling existed for these at all)
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  animation: alert-in 0.2s ease;
}
@keyframes alert-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.alert-success {
  background: rgba(40, 199, 111, 0.12);
  border-color: rgba(40, 199, 111, 0.3);
  color: #1e8a4c;
}
.alert-danger {
  background: rgba(234, 84, 85, 0.12);
  border-color: rgba(234, 84, 85, 0.3);
  color: #c62828;
}
body[data-theme="dark"] .alert-success {
  color: #6fe3a0;
}
body[data-theme="dark"] .alert-danger {
  color: #ff8a8a;
}
.alert .alert-icon {
  font-size: 16px;
  margin-top: 1px;
}
.alert .alert-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.4;
  animation: alert-progress linear forwards;
}
@keyframes alert-progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-control,
.form-select,
select.form-control {
  background: var(--bg-surface);
  color: var(--text-body);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  transition: all 0.15s ease;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
  background: var(--bg-surface);
  color: var(--text-body);
}
.form-group label,
.form-label {
  color: var(--text-body);
  font-weight: 600;
  font-size: 13px;
}
.form-group label.required::after,
.form-label.required::after {
  content: " *";
  color: #ea5455;
}
.form-control.is-invalid {
  border-color: #ea5455;
}
.form-control.is-valid {
  border-color: #28c76f;
}
.form-check-input:checked {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}

/* Select2 - dark mode is already covered by the vendor's existing
   body[data-theme=dark] rules; this is just a light-mode radius/border
   refinement to match the rest of the form styling above. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: var(--bg-surface);
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--brand-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}
.select2-dropdown {
  border-radius: 10px;
  border: 1px solid var(--border-color);
  box-shadow: 0 12px 30px var(--shadow-color);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Dashboard hero
   -------------------------------------------------------------------------- */
.dashboard-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.dashboard-hero-date {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dashboard-hero-text h2 {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-body);
  margin-bottom: 8px;
}
.dashboard-hero-text h2 .text-accent {
  color: var(--brand-primary);
}
.dashboard-hero-text p {
  color: var(--text-muted);
  font-size: 15px;
  max-width: 640px;
  margin-bottom: 0;
}
.dashboard-hero-text p strong {
  color: var(--text-body);
}
.dashboard-hero-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Dashboard KPI cards
   -------------------------------------------------------------------------- */
.dash-widget {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dash-widget:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px var(--shadow-color);
}
.dash-widget .dash-widgetcontent h5,
.dash-widget .dash-widgetcontent h6 {
  color: var(--text-body);
}
.dash-widget .dash-widgetimg span {
  color: var(--brand-primary);
}
/* The vendor's pastel icon-chip backgrounds (rgba red/green/cyan at 12%
   opacity) are tuned for a white card and read as a muddy smear on the
   dark card surface - bump opacity and swap to a solid brand tint so they
   stay clean, readable color chips in dark mode. */
body[data-theme="dark"] .dash-widget .dash-widgetimg span,
body[data-theme="dark"] .dash-widget.dash1 .dash-widgetimg span,
body[data-theme="dark"] .dash-widget.dash2 .dash-widgetimg span,
body[data-theme="dark"] .dash-widget.dash3 .dash-widgetimg span {
  background: rgba(var(--brand-primary-rgb), 0.16);
}
.dash-sparkline {
  height: 36px;
  margin-top: 6px;
}

/* KPI card v2 - icon on the left (reference layout), value/label on the
   right, consistent footer slot. Markup order is unchanged (content first,
   icon second in the DOM) - row-reverse flips the visual order only, so
   this is a pure style change with zero risk to the ~9 card instances. */
.dash-widget-v2 .dash-widget-top {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.dash-widget-v2 .dash-widgetimg span {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Per-card icon color, set inline via --chip-color. Uses color-mix() so the
   same color reads correctly as a light pastel on a white card AND as a
   richer tint on a dark card, instead of a fixed-alpha overlay that looks
   clean on white but muddy on dark (the exact bug fixed earlier for the
   vendor's default icon chips - color-mix() mixes with the actual card
   background rather than guessing an alpha, so it can't repeat that bug). */
.dash-icon-chip {
  background: rgba(var(--brand-primary-rgb), 0.12);
  background: color-mix(in srgb, var(--chip-color, var(--brand-primary)) 15%, var(--bg-surface));
  color: var(--chip-color, var(--brand-primary));
}
.dash-widget-v2 .dash-widgetcontent h5 {
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.dash-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.dash-trend.up {
  color: #1e8a4c;
  background: rgba(40, 199, 111, 0.12);
}
.dash-trend.down {
  color: #c62828;
  background: rgba(234, 84, 85, 0.12);
}
.dash-trend.new {
  color: var(--brand-primary);
  background: rgba(var(--brand-primary-rgb), 0.12);
}
body[data-theme="dark"] .dash-trend.up {
  color: #6fe3a0;
}
body[data-theme="dark"] .dash-trend.down {
  color: #ff8a8a;
}

/* Honest placeholder for cards with no real historical data behind them -
   a flat line, not a fabricated trend shape. */
.dash-sparkline-flat {
  height: 36px;
  margin-top: 12px;
  position: relative;
}
.dash-sparkline-flat::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  height: 1px;
  background: var(--border-color);
}
.dash-widget-footnote {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
  font-size: 12px;
  color: var(--text-muted);
}
.dash-widget-footnote strong {
  color: var(--text-body);
}

/* Recent Activity feed - real events (signups/reports/notifications), not
   a fabricated log */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
}
.activity-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.activity-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(var(--brand-primary-rgb), 0.12);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}
.activity-body p {
  margin: 0;
  font-size: 13px;
  color: var(--text-body);
}
.activity-time {
  font-size: 12px;
  color: var(--text-muted);
}
.recent-user-avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
  flex-shrink: 0;
}
.recent-user-name {
  max-width: 110px;
  font-size: 13px;
}
.table-compact td,
.table-compact th {
  padding: 10px 8px;
  font-size: 13px;
}

/* Segmented bar + legend (Question Bank by Level) */
.segmented-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-surface-muted);
}
.segmented-bar span {
  height: 100%;
}
.segmented-bar-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.segmented-bar-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-body);
}
.segmented-bar-legend strong {
  margin-left: auto;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Login page (fixed brand gradient - not theme-toggle dependent, there is
   no toggle control on the pre-auth login screen)
   -------------------------------------------------------------------------- */
body.account-page {
  background: linear-gradient(160deg, #131c3d 0%, var(--brand-navy) 45%, var(--brand-primary) 150%);
}
.login-wrapper .login-content {
  max-width: 420px;
}
.login-wrapper .login-userset {
  background: #fff;
  border-radius: 18px;
  padding: 40px 36px;
  box-shadow: 0 25px 60px rgba(10, 15, 40, 0.35);
}
.login-wrapper .login-logo.logo-normal {
  background: transparent;
  margin-bottom: 12px;
}
.login-wrapper .login-userheading h3 {
  font-weight: 800;
  color: #1f2937;
}
.login-wrapper .login-userheading h4 {
  color: #6b7280;
}
.login-wrapper .form-login input[type="text"],
.login-wrapper .form-login input[type="password"],
.login-wrapper .form-login select.form-control {
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  padding: 11px 14px;
}
.login-wrapper .form-login input[type="text"]:focus,
.login-wrapper .form-login input[type="password"]:focus,
.login-wrapper .form-login select.form-control:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.15);
}
.login-wrapper .btn-login {
  width: 100%;
  background: var(--brand-primary) !important;
  border-color: var(--brand-primary) !important;
  padding: 12px;
  font-weight: 700;
  border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
   Error pages - error-404.blade.php / error-403.blade.php (existing markup,
   inherits the site theme, dark-mode aware). The new resources/views/errors/
   404.blade.php and 500.blade.php render standalone (outside the normal
   layout, no dependency on app CSS/DB-backed helpers) with their own inline
   styles, since they must still work if the rest of the app is broken.
   -------------------------------------------------------------------------- */
.error-page .main-wrapper .error-box {
  animation: alert-in 0.3s ease;
}
.error-page .main-wrapper .error-box h1 {
  text-shadow: 0 8px 30px rgba(var(--brand-primary-rgb), 0.25);
}
.error-page .main-wrapper .error-box i {
  color: var(--brand-primary);
  margin-right: 6px;
}


/* --------------------------------------------------------------------------
   Global page loader - background was a hardcoded white regardless of
   theme (jarring flash against a dark-mode page on navigation), and the
   spinner's dozens of box-shadow layers were hardcoded to the default
   cyan regardless of the selected accent.
   -------------------------------------------------------------------------- */
#global-loader {
  background: var(--bg-body) !important;
}
div#global-loader .whirly-loader:not(:required) {
  animation: whirly-loader 1.25s linear infinite;
  background: transparent;
  box-shadow: 0 26px 0 6px var(--brand-primary), 0.90971px 26.05079px 0 5.93333px var(--brand-primary), 1.82297px 26.06967px 0 5.86667px var(--brand-primary), 2.73865px 26.05647px 0 5.8px var(--brand-primary), 3.65561px 26.01104px 0 5.73333px var(--brand-primary), 4.57274px 25.93327px 0 5.66667px var(--brand-primary), 5.48887px 25.8231px 0 5.6px var(--brand-primary), 6.40287px 25.68049px 0 5.53333px var(--brand-primary), 7.31358px 25.50548px 0 5.46667px var(--brand-primary), 8.21985px 25.2981px 0 5.4px var(--brand-primary), 9.12054px 25.05847px 0 5.33333px var(--brand-primary), 10.01448px 24.78672px 0 5.26667px var(--brand-primary), 10.90054px 24.48302px 0 5.2px var(--brand-primary), 11.77757px 24.1476px 0 5.13333px var(--brand-primary), 12.64443px 23.78072px 0 5.06667px var(--brand-primary), 13.5px 23.38269px 0 5px var(--brand-primary), 14.34315px 22.95384px 0 4.93333px var(--brand-primary), 15.17277px 22.49455px 0 4.86667px var(--brand-primary), 15.98776px 22.00526px 0 4.8px var(--brand-primary), 16.78704px 21.48643px 0 4.73333px var(--brand-primary), 17.56953px 20.93855px 0 4.66667px var(--brand-primary), 18.33418px 20.36217px 0 4.6px var(--brand-primary), 19.07995px 19.75787px 0 4.53333px var(--brand-primary), 19.80582px 19.12626px 0 4.46667px var(--brand-primary), 20.5108px 18.468px 0 4.4px var(--brand-primary), 21.1939px 17.78379px 0 4.33333px var(--brand-primary), 21.85416px 17.07434px 0 4.26667px var(--brand-primary), 22.49067px 16.34043px 0 4.2px var(--brand-primary), 23.10251px 15.58284px 0 4.13333px var(--brand-primary), 23.68881px 14.80241px 0 4.06667px var(--brand-primary), 24.24871px 14px 0 4px var(--brand-primary), 24.7814px 13.1765px 0 3.93333px var(--brand-primary), 25.28607px 12.33284px 0 3.86667px var(--brand-primary), 25.76198px 11.46997px 0 3.8px var(--brand-primary), 26.2084px 10.58888px 0 3.73333px var(--brand-primary), 26.62462px 9.69057px 0 3.66667px var(--brand-primary), 27.01001px 8.77608px 0 3.6px var(--brand-primary), 27.36392px 7.84648px 0 3.53333px var(--brand-primary), 27.68577px 6.90284px 0 3.46667px var(--brand-primary), 27.97502px 5.94627px 0 3.4px var(--brand-primary), 28.23116px 4.97791px 0 3.33333px var(--brand-primary), 28.4537px 3.99891px 0 3.26667px var(--brand-primary), 28.64223px 3.01042px 0 3.2px var(--brand-primary), 28.79635px 2.01364px 0 3.13333px var(--brand-primary), 28.91571px 1.00976px 0 3.06667px var(--brand-primary), 29px 0 0 3px var(--brand-primary), 29.04896px -1.01441px 0 2.93333px var(--brand-primary), 29.06237px -2.03224px 0 2.86667px var(--brand-primary), 29.04004px -3.05223px 0 2.8px var(--brand-primary), 28.98185px -4.07313px 0 2.73333px var(--brand-primary), 28.88769px -5.09368px 0 2.66667px var(--brand-primary), 28.75754px -6.1126px 0 2.6px var(--brand-primary), 28.59138px -7.12863px 0 2.53333px var(--brand-primary), 28.38926px -8.14049px 0 2.46667px var(--brand-primary), 28.15127px -9.1469px 0 2.4px var(--brand-primary), 27.87755px -10.1466px 0 2.33333px var(--brand-primary), 27.56827px -11.1383px 0 2.26667px var(--brand-primary), 27.22365px -12.12075px 0 2.2px var(--brand-primary), 26.84398px -13.09268px 0 2.13333px var(--brand-primary), 26.42956px -14.05285px 0 2.06667px var(--brand-primary), 25.98076px -15px 0 2px var(--brand-primary), 25.49798px -15.93291px 0 1.93333px var(--brand-primary), 24.98167px -16.85035px 0 1.86667px var(--brand-primary), 24.43231px -17.75111px 0 1.8px var(--brand-primary), 23.85046px -18.63402px 0 1.73333px var(--brand-primary), 23.23668px -19.49789px 0 1.66667px var(--brand-primary), 22.5916px -20.34157px 0 1.6px var(--brand-primary), 21.91589px -21.16393px 0 1.53333px var(--brand-primary), 21.21024px -21.96384px 0 1.46667px var(--brand-primary), 20.4754px -22.74023px 0 1.4px var(--brand-primary), 19.71215px -23.49203px 0 1.33333px var(--brand-primary), 18.92133px -24.2182px 0 1.26667px var(--brand-primary), 18.10379px -24.91772px 0 1.2px var(--brand-primary), 17.26042px -25.58963px 0 1.13333px var(--brand-primary), 16.39217px -26.23295px 0 1.06667px var(--brand-primary), 15.5px -26.84679px 0 1px var(--brand-primary), 14.58492px -27.43024px 0 0.93333px var(--brand-primary), 13.64796px -27.98245px 0 0.86667px var(--brand-primary), 12.69018px -28.50262px 0 0.8px var(--brand-primary), 11.7127px -28.98995px 0 0.73333px var(--brand-primary), 10.71663px -29.4437px 0 0.66667px var(--brand-primary), 9.70313px -29.86317px 0 0.6px var(--brand-primary), 8.67339px -30.2477px 0 0.53333px var(--brand-primary), 7.6286px -30.59666px 0 0.46667px var(--brand-primary), 6.57001px -30.90946px 0 0.4px var(--brand-primary), 5.49886px -31.18558px 0 0.33333px var(--brand-primary), 4.41643px -31.42451px 0 0.26667px var(--brand-primary), 3.32401px -31.6258px 0 0.2px var(--brand-primary), 2.22291px -31.78904px 0 0.13333px var(--brand-primary), 1.11446px -31.91388px 0 0.06667px var(--brand-primary), 0 -32px 0 0 var(--brand-primary), -1.11911px -32.04713px 0 -0.06667px var(--brand-primary), -2.24151px -32.05506px 0 -0.13333px var(--brand-primary), -3.36582px -32.02361px 0 -0.2px var(--brand-primary), -4.49065px -31.95265px 0 -0.26667px var(--brand-primary), -5.61462px -31.84212px 0 -0.33333px var(--brand-primary), -6.73634px -31.69198px 0 -0.4px var(--brand-primary), -7.8544px -31.50227px 0 -0.46667px var(--brand-primary), -8.9674px -31.27305px 0 -0.53333px var(--brand-primary), -10.07395px -31.00444px 0 -0.6px var(--brand-primary), -11.17266px -30.69663px 0 -0.66667px var(--brand-primary), -12.26212px -30.34982px 0 -0.73333px var(--brand-primary), -13.34096px -29.96429px 0 -0.8px var(--brand-primary), -14.4078px -29.54036px 0 -0.86667px var(--brand-primary), -15.46126px -29.07841px 0 -0.93333px var(--brand-primary), -16.5px -28.57884px 0 -1px var(--brand-primary), -17.52266px -28.04212px 0 -1.06667px var(--brand-primary), -18.52792px -27.46878px 0 -1.13333px var(--brand-primary), -19.51447px -26.85936px 0 -1.2px var(--brand-primary), -20.48101px -26.21449px 0 -1.26667px var(--brand-primary), -21.42625px -25.53481px 0 -1.33333px var(--brand-primary), -22.34896px -24.82104px 0 -1.4px var(--brand-primary), -23.2479px -24.07391px 0 -1.46667px var(--brand-primary), -24.12186px -23.29421px 0 -1.53333px var(--brand-primary), -24.96967px -22.48279px 0 -1.6px var(--brand-primary), -25.79016px -21.64052px 0 -1.66667px var(--brand-primary), -26.58223px -20.76831px 0 -1.73333px var(--brand-primary), -27.34477px -19.86714px 0 -1.8px var(--brand-primary), -28.07674px -18.938px 0 -1.86667px var(--brand-primary), -28.7771px -17.98193px 0 -1.93333px var(--brand-primary), -29.44486px -17px 0 -2px var(--brand-primary), -30.07908px -15.99333px 0 -2.06667px var(--brand-primary), -30.67884px -14.96307px 0 -2.13333px var(--brand-primary), -31.24325px -13.91039px 0 -2.2px var(--brand-primary), -31.7715px -12.83652px 0 -2.26667px var(--brand-primary), -32.26278px -11.74269px 0 -2.33333px var(--brand-primary), -32.71634px -10.63018px 0 -2.4px var(--brand-primary), -33.13149px -9.5003px 0 -2.46667px var(--brand-primary), -33.50755px -8.35437px 0 -2.53333px var(--brand-primary), -33.84391px -7.19374px 0 -2.6px var(--brand-primary), -34.14px -6.0198px 0 -2.66667px var(--brand-primary), -34.39531px -4.83395px 0 -2.73333px var(--brand-primary), -34.60936px -3.63759px 0 -2.8px var(--brand-primary), -34.78173px -2.43218px 0 -2.86667px var(--brand-primary), -34.91205px -1.21916px 0 -2.93333px var(--brand-primary), -35px 0 0 -3px var(--brand-primary), -35.04531px 1.22381px 0 -3.06667px var(--brand-primary), -35.04775px 2.45078px 0 -3.13333px var(--brand-primary), -35.00717px 3.6794px 0 -3.2px var(--brand-primary), -34.92345px 4.90817px 0 -3.26667px var(--brand-primary), -34.79654px 6.13557px 0 -3.33333px var(--brand-primary), -34.62643px 7.36007px 0 -3.4px var(--brand-primary), -34.41316px 8.58016px 0 -3.46667px var(--brand-primary), -34.15683px 9.79431px 0 -3.53333px var(--brand-primary), -33.85761px 11.001px 0 -3.6px var(--brand-primary), -33.5157px 12.19872px 0 -3.66667px var(--brand-primary), -33.13137px 13.38594px 0 -3.73333px var(--brand-primary), -32.70493px 14.56117px 0 -3.8px var(--brand-primary), -32.23675px 15.72291px 0 -3.86667px var(--brand-primary), -31.72725px 16.86968px 0 -3.93333px var(--brand-primary), -31.17691px 18px 0 -4px var(--brand-primary), -30.58627px 19.11242px 0 -4.06667px var(--brand-primary), -29.95589px 20.2055px 0 -4.13333px var(--brand-primary), -29.28642px 21.27783px 0 -4.2px var(--brand-primary), -28.57852px 22.32799px 0 -4.26667px var(--brand-primary), -27.83295px 23.35462px 0 -4.33333px var(--brand-primary), -27.05047px 24.35635px 0 -4.4px var(--brand-primary), -26.23192px 25.33188px 0 -4.46667px var(--brand-primary), -25.37819px 26.27988px 0 -4.53333px var(--brand-primary), -24.49018px 27.1991px 0 -4.6px var(--brand-primary), -23.56888px 28.0883px 0 -4.66667px var(--brand-primary), -22.6153px 28.94626px 0 -4.73333px var(--brand-primary), -21.6305px 29.77183px 0 -4.8px var(--brand-primary), -20.61558px 30.56385px 0 -4.86667px var(--brand-primary), -19.57168px 31.32124px 0 -4.93333px var(--brand-primary), -18.5px 32.04294px 0 -5px var(--brand-primary), -17.40175px 32.72792px 0 -5.06667px var(--brand-primary), -16.27818px 33.37522px 0 -5.13333px var(--brand-primary), -15.1306px 33.98389px 0 -5.2px var(--brand-primary), -13.96034px 34.55305px 0 -5.26667px var(--brand-primary), -12.76875px 35.08186px 0 -5.33333px var(--brand-primary), -11.55724px 35.56951px 0 -5.4px var(--brand-primary), -10.32721px 36.01527px 0 -5.46667px var(--brand-primary), -9.08014px 36.41843px 0 -5.53333px var(--brand-primary), -7.81748px 36.77835px 0 -5.6px var(--brand-primary), -6.54075px 37.09443px 0 -5.66667px var(--brand-primary), -5.25147px 37.36612px 0 -5.73333px var(--brand-primary), -3.95118px 37.59293px 0 -5.8px var(--brand-primary), -2.64145px 37.77443px 0 -5.86667px var(--brand-primary), -1.32385px 37.91023px 0 -5.93333px var(--brand-primary);
  display: inline-block;
  height: 8px;
  overflow: hidden;
  position: relative;
  text-indent: -9999px;
  width: 8px;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  border-radius: 100%;
}

/* --------------------------------------------------------------------------
   Status badges (Active/Deactive, Enabled/Disabled, Distributed) - these
   only ever render via Bootstrap's .bg-success/.bg-danger utility classes
   in this app (no unrelated success/error alerts use them), so retheming
   them directly is safe. Active ties to the selected accent instead of a
   fixed Bootstrap green; inactive uses a theme-aware neutral instead of a
   fixed red that has no relation to the chosen accent.
   -------------------------------------------------------------------------- */
.badge.bg-success {
  background-color: var(--brand-primary) !important;
  color: #fff !important;
}
.badge.bg-danger {
  background-color: var(--text-muted) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Table horizontal scroll - styled scrollbar instead of the bare OS
   default, only visible once a table actually overflows its card.
   -------------------------------------------------------------------------- */
.table-responsive {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) var(--bg-surface-muted);
}
.table-responsive::-webkit-scrollbar {
  height: 8px;
}
.table-responsive::-webkit-scrollbar-track {
  background: var(--bg-surface-muted);
  border-radius: 999px;
}
.table-responsive::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   Global page scrollbar - same treatment as the table one, applied to the
   main vertical scrollbar instead of the bare OS default.
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--brand-primary) var(--bg-surface-muted);
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--bg-surface-muted);
}
::-webkit-scrollbar-thumb {
  background: var(--brand-primary);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-primary-dark);
}

.page-item.active .page-link{
    background: var(--brand-primary-dark);
}

/* --------------------------------------------------------------------------
   RTL mirroring - this whole redesign layer (sidebar-on-the-left header
   offset, floated search box, breadcrumb chevrons, badge/FAB corners, etc.)
   was built and verified in LTR only. style-rtl.css (vendor) mirrors the
   ORIGINAL template's own elements, but has no knowledge of anything added
   here, and this file loads after it - so every physical left/right value
   below stayed pinned to its LTR side even with html[dir="rtl"] set,
   producing exactly the "header/main section/table not usable in Arabic"
   report this section fixes (root cause: .header was offset with a fixed
   `left: 260px` regardless of which side the sidebar actually rendered on,
   so once style-rtl.css correctly moved the sidebar to the right, the
   header's own content area stayed carved out of the wrong side of the
   screen and everything inside it - search box, icons - rendered bunched
   up in the leftover gap instead of using the freed space on the left).
   -------------------------------------------------------------------------- */
html[dir="rtl"] .sidebar {
  border-right: none;
  border-left: 1px solid var(--border-color);
}
html[dir="rtl"] .header {
  left: 0;
  right: 260px;
}
@media (max-width: 991.98px) {
  html[dir="rtl"] .header {
    right: 0;
  }
}
@media (min-width: 991.98px) {
  html[dir="rtl"] body.mini-sidebar .header {
    right: 80px !important;
    left: 0 !important;
  }
  html[dir="rtl"] body.mini-sidebar .page-wrapper {
    margin-right: 80px !important;
    margin-left: 0 !important;
  }
  html[dir="rtl"] .sidebar .sidebar-menu > ul > li.submenu > ul {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: 8px;
  }
}
html[dir="rtl"] .header .header-left {
  border-left: none;
  padding: 0 24px 0 20px;
}
@media (max-width: 991.98px) {
  html[dir="rtl"] .header .header-left {
    padding-left: 24px;
    padding-right: 76px;
  }
}
html[dir="rtl"] .header-breadcrumb i {
  transform: scaleX(-1);
}
html[dir="rtl"] .sidebar .sidebar-menu .menu-badge {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .header-search-form {
  float: right;
  margin-left: 0;
  margin-right: 16px;
}
html[dir="rtl"] .header-search-form i {
  left: auto;
  right: 12px;
}
html[dir="rtl"] .header-search-form input {
  padding: 8px 36px 8px 60px;
}
html[dir="rtl"] .search-kbd-hint {
  right: auto;
  left: 10px;
}
html[dir="rtl"] .header .badge.notification-badge {
  right: auto;
  left: -4px;
}
html[dir="rtl"] .btn-fab {
  right: auto;
  left: 28px;
}
html[dir="rtl"] .segmented-bar-legend strong {
  margin-left: 0;
  margin-right: auto;
}
html[dir="rtl"] .error-page .main-wrapper .error-box i {
  margin-right: 0;
  margin-left: 6px;
}

/* Table "operate" column - the edit/delete icon pair (`<a class="me-3">`
   for edit, `<a class="me-3 delete">` for delete) is identical markup
   across ~15 admin list pages. With table-layout:auto, the browser sizes
   every column to just what its content needs, redistributing the table's
   fixed total width - in Arabic the other columns' text needs more of
   that width, squeezing this content-light column below what its two
   icons + gap need, so the second icon overflowed past its own cell
   padding into the table's outer edge (worse in RTL since that edge is
   the visible left boundary of the page, not just an inner column).
   Reserving a safe minimum stops the column shrinking that far regardless
   of what the other columns need; :has() targets it without needing a
   dedicated class on every one of these controllers' operate columns. */
.table td:has(> a.me-3) {
  min-width: 76px;
  white-space: nowrap;
}
.table td a.me-3 {
  margin-inline-end: 8px !important;
}
.table td a.me-3:last-child {
  margin-inline-end: 0 !important;
}