/*================================================================================
    Bosla — Modern UI Theme Layer
    ------------------------------------------------------------------
    A design-system override on top of the Modern Admin (Bootstrap 4) base.
    Loaded LAST so it wins without touching vendor files.
    Works for both LTR and RTL (html[data-textdirection]).
================================================================================*/

:root {
  /* Brand */
  --bs-primary: #4f46e5;
  --bs-primary-600: #4338ca;
  --bs-primary-400: #6366f1;
  --bs-primary-soft: rgba(79, 70, 229, .1);
  --bs-accent: #f97316;

  /* Semantic */
  --bs-success: #10b981;
  --bs-danger: #ef4444;
  --bs-warning: #f59e0b;
  --bs-info: #0ea5e9;

  /* Neutrals */
  --bs-bg: #f4f6fb;
  --bs-surface: #ffffff;
  --bs-border: #e6e9f2;
  --bs-text: #1e293b;
  --bs-muted: #6b7a90;

  /* Sidebar */
  --bs-side-bg: #0f172a;
  --bs-side-bg-2: #131c33;
  --bs-side-text: #dce3ef;        /* high-contrast label on the dark rail */
  --bs-side-text-muted: #c2cbdb;
  --bs-side-text-active: #ffffff;
  --bs-side-width: 260px; /* matches vertical-menu-modern.css */

  /* Shape */
  --bs-radius: 12px;
  --bs-radius-lg: 16px;
  --bs-radius-sm: 8px;

  /* Elevation */
  --bs-shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --bs-shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --bs-shadow: 0 6px 24px rgba(16, 24, 40, .07);
  --bs-shadow-lg: 0 20px 48px rgba(16, 24, 40, .14);

  --bs-font: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-ease: cubic-bezier(.4, 0, .2, 1);
}

/*--------------------------------------------------------------
  1. Base
--------------------------------------------------------------*/
html { font-size: 15px; }

body,
body.vertical-layout,
h1, h2, h3, h4, h5, h6,
.navbar, .main-menu, .card, .modal, .btn, .form-control,
input, select, textarea, button, table, .dropdown-menu,
/* components.css pins the sidebar to Quicksand on `.navigation` itself, which
   beats inheriting from .main-menu — restate it here or the menu keeps the
   old serif fallback stack for Arabic. */
.main-menu a,
.navigation,
.navigation .navigation-header,
.navigation .menu-title,
.navigation .menu-item {
  font-family: var(--bs-font) !important;
}

body {
  background-color: var(--bs-bg) !important;
  color: var(--bs-text);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { color: var(--bs-text); font-weight: 700; letter-spacing: -.01em; }
a { color: var(--bs-primary); transition: color .18s var(--bs-ease); }
a:hover { color: var(--bs-primary-600); text-decoration: none; }
hr { border-color: var(--bs-border); }

::selection { background: var(--bs-primary-soft); color: var(--bs-primary-600); }

/* Scrollbars */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; box-shadow: none; }
::-webkit-scrollbar-thumb { background: #c7cddb; border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #9aa4b8; background-clip: content-box; }

/*--------------------------------------------------------------
  2. Top navbar — light, glassy, bordered
--------------------------------------------------------------*/
.header-navbar {
  background: rgba(255, 255, 255, .85) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--bs-border) !important;
  box-shadow: none !important;
  min-height: 68px;
}

.header-navbar .navbar-wrapper { min-height: 68px; }

/* NOTE: never reset margin-left/right here — the menu-type stylesheet uses it
   to offset the container past the sidebar (260px, mirrored in RTL). */
.header-navbar .navbar-container {
  padding: 0 1.25rem !important;
  background: transparent !important;
  min-height: 68px;
  display: flex;
  align-items: center;
}

.header-navbar .navbar-container > .navbar-collapse { width: 100%; }

/* Brand block sits over the sidebar — keep it dark so the two read as one unit */
.header-navbar .navbar-header {
  background: var(--bs-side-bg) !important;
  min-height: 68px;
  display: flex;
  align-items: center;
  padding: 0 1.25rem !important;
  transition: width .3s var(--bs-ease);
}

.header-navbar .navbar-header .navbar-brand {
  display: flex !important;
  align-items: center;
  gap: .65rem;
  padding: 0 !important;
  margin: 0 !important;
}

.header-navbar .navbar-header .brand-logo {
  width: 34px; height: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 9px;
  padding: 4px;
  margin: 0 !important;
}

.header-navbar .navbar-header .brand-text {
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap;
}

.header-navbar .navbar-header .nav-link,
.header-navbar .navbar-header .nav-link i { color: rgba(255, 255, 255, .85) !important; }

/* Nav links in the light area */
.header-navbar .navbar-container .nav-link,
.header-navbar .navbar-container .nav-link i,
.header-navbar .navbar-container .dropdown-toggle {
  color: var(--bs-text) !important;
}

.header-navbar .navbar-container .nav-item > .nav-link {
  border-radius: var(--bs-radius-sm);
  padding: .55rem .7rem !important;
  transition: background-color .18s var(--bs-ease);
}
.header-navbar .navbar-container .nav-item > .nav-link:hover { background: #eef1f7; }

.header-navbar .navbar-container .nav-link i { font-size: 1.15rem; }

/* Hamburger / collapse toggle */
.header-navbar .menu-toggle i { font-size: 1.35rem; }

/* Hide the redundant app-name mega dropdown, keep the bar clean */
.header-navbar .mega-dropdown { display: none !important; }

/* Search */
.header-navbar .nav-search .search-input .input {
  border-radius: var(--bs-radius);
  border: 1px solid var(--bs-border);
  background: #fff;
}

/* User dropdown */
.header-navbar .dropdown-user-link { display: flex !important; align-items: center; gap: .6rem; }
.header-navbar .dropdown-user-link .user-name { font-weight: 600; }
.header-navbar .avatar img { width: 36px; height: 36px; border-radius: 50%; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--bs-border); }
.header-navbar .avatar.avatar-online i { border: 2px solid #fff; }

/*--------------------------------------------------------------
  3. Sidebar — permanent, dark, pill navigation
--------------------------------------------------------------*/
.main-menu,
.main-menu.menu-light,
.main-menu.menu-dark {
  background: linear-gradient(180deg, var(--bs-side-bg) 0%, var(--bs-side-bg-2) 100%) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Pin the sidebar to the real navbar height so the dark brand block and the
   sidebar read as one continuous column (base template assumes 5rem). */
.main-menu.menu-fixed {
  top: 68px !important;
  height: calc(100% - 68px) !important;
}

.main-menu { padding-top: .5rem; }

.main-menu .main-menu-content { padding: .5rem .75rem 2rem; }

.main-menu .navigation,
.main-menu.menu-light .navigation,
.main-menu.menu-dark .navigation {
  background: transparent !important;
  padding-top: .25rem;
}

/* Section headers */
.main-menu .navigation > li.navigation-header,
.main-menu.menu-light .navigation > li.navigation-header,
.main-menu.menu-dark .navigation > li.navigation-header {
  color: #8e9cb5 !important;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 1.25rem 1rem .5rem !important;
}

/* Items */
.main-menu .navigation > li > a,
.main-menu.menu-light .navigation > li > a,
.main-menu.menu-dark .navigation > li > a {
  color: var(--bs-side-text) !important;
  font-size: .96rem;
  font-weight: 600;
  line-height: 1.5;
  padding: .74rem .85rem !important;
  margin: .15rem 0;
  border-radius: 10px;
  display: flex !important;
  align-items: center;
  gap: .7rem;
  transition: background-color .18s var(--bs-ease), color .18s var(--bs-ease);
  /* The base template decorates open/active items with an edge border and a
     gradient, which shows up as a stray bar beside the item. Strip both and
     let the pill styling below be the only decoration. (No !important on
     background-image — the active state's gradient must still win.) */
  border: 0 !important;
  box-shadow: none !important;
  background-image: none;
  position: relative;
}

/* The base template dims menu labels via opacity — keep them fully opaque */
.main-menu .navigation > li > a > .menu-title,
.main-menu .navigation .menu-content > li > a > .menu-item,
.main-menu .navigation li a span { opacity: 1 !important; }

.main-menu .navigation > li > a > i,
.main-menu .navigation li a > i {
  font-size: 1.1rem !important;
  width: 22px;
  text-align: center;
  margin: 0 !important;
  flex-shrink: 0;
  opacity: .9;
}

.main-menu .navigation > li > a .menu-title { flex: 1; }

.main-menu .navigation > li > a:hover,
.main-menu.menu-light .navigation > li > a:hover,
.main-menu.menu-dark .navigation > li > a:hover {
  background: rgba(255, 255, 255, .07) !important;
  color: #fff !important;
}

/* Active item — solid brand pill (overrides the old inline orange) */
.main-menu .navigation > li.active > a,
.main-menu.menu-light .navigation > li.active > a,
.main-menu.menu-dark .navigation > li.active > a,
.main-menu .navigation li.active > a {
  background: linear-gradient(135deg, var(--bs-primary-400), var(--bs-primary)) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .38) !important;
  font-weight: 600;
}
.main-menu .navigation > li.active > a > i { opacity: 1; }

/* Open parent of an active child */
.main-menu .navigation > li.open > a,
.main-menu.menu-light .navigation > li.open > a,
.main-menu.menu-dark .navigation > li.open > a {
  background: rgba(255, 255, 255, .05) !important;
  color: #fff !important;
}

/* Submenus */
.main-menu .navigation .menu-content,
.main-menu.menu-light .navigation li .menu-content,
.main-menu.menu-dark .navigation li .menu-content {
  background: rgba(0, 0, 0, .22) !important;
  border-radius: 10px;
  padding: .3rem !important;
  margin: .15rem 0 .35rem;
}

.main-menu .navigation .menu-content > li > a,
.main-menu.menu-light .navigation .menu-content > li > a,
.main-menu.menu-dark .navigation .menu-content > li > a {
  color: var(--bs-side-text-muted) !important;
  font-size: .9rem !important;
  font-weight: 500;
  padding: .55rem .8rem !important;
  border-radius: 8px;
  margin: .1rem 0;
}
.main-menu .navigation .menu-content > li > a { border: 0 !important; box-shadow: none !important; background-image: none; }
.main-menu .navigation .menu-content > li > a:hover { background: rgba(255, 255, 255, .06) !important; color: #fff !important; }
.main-menu .navigation .menu-content > li.active > a {
  background: var(--bs-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .35) !important;
}

/* Submenu caret.
   The base template only sets the glyph on `li.has-sub`, but the sidebar blade
   emits plain `li.nav-item` and nothing adds has-sub for the vertical menu — so
   parents ended up with no expand indicator at all. Target the parents by the
   submenu they actually contain, and draw the chevron from borders so it does
   not depend on the icon font loading. Physical border sides (not logical) keep
   it pointing down in both LTR and RTL. */
.main-menu .navigation > li:has(> .menu-content) > a:not(.mm-next):after,
.main-menu .navigation li.has-sub > a:not(.mm-next):after {
  content: "" !important;
  font-family: inherit !important;
  width: 7px;
  height: 7px;
  border: 0 !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  opacity: .55;
  position: absolute;
  left: auto;
  right: auto;
  inset-inline-end: 16px;
  top: 50%;
  margin-top: -6px;
  transform: rotate(45deg) !important;
  transition: transform .2s var(--bs-ease);
}
.main-menu .navigation > li.open:has(> .menu-content) > a:not(.mm-next):after,
.main-menu .navigation li.has-sub.open > a:not(.mm-next):after,
.main-menu .navigation li.open > a:not(.mm-next):after {
  transform: rotate(-135deg) !important;
  margin-top: -2px;
  opacity: .9;
}
/* Keep the label clear of the chevron */
.main-menu .navigation > li:has(> .menu-content) > a { padding-inline-end: 2.1rem !important; }

/* Collapsed rail (icons only) — still visible, never hidden.
   The base template only fades the labels out via animation, so in a flex row
   they keep reserving width and bleed past the 60px rail. Hide them outright,
   and restore everything on the hover-expanded (.expanded) state. */
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .main-menu-content {
  padding-left: .5rem;
  padding-right: .5rem;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li > a {
  justify-content: center;
  padding: .72rem 0 !important;
  overflow: hidden;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li > a > span:not(.badge) {
  display: none !important;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li > a > i {
  margin: 0 !important;
  float: none !important;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation li.has-sub > a:not(.mm-next):after {
  display: none !important;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation .menu-content {
  display: none !important;
}
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li.navigation-header {
  text-align: center;
  padding: 1rem 0 .4rem !important;
}
/* Hover-expanded rail behaves exactly like the pinned sidebar */
body.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu.expanded .navigation > li > a {
  justify-content: flex-start;
  padding: .72rem .85rem !important;
}

/*--------------------------------------------------------------
  4. Content shell
--------------------------------------------------------------*/
/* The base template offsets the fixed navbar via body padding (5rem @14px root).
   Root is now 15px, so pin it to the real navbar height instead of stacking a
   second offset onto .app-content. */
html body.fixed-navbar { padding-top: 68px !important; }

html body .content .content-wrapper,
.content-wrapper { padding: 1.5rem 1.5rem 0 !important; }

.content-header-title,
.content-header .card-title { font-weight: 700; }

/* Breadcrumbs */
.breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  font-size: .85rem;
  margin-bottom: .75rem;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--bs-muted); }
.breadcrumb-item.active { color: var(--bs-text); font-weight: 600; }

/*--------------------------------------------------------------
  5. Cards
--------------------------------------------------------------*/
.card {
  background: var(--bs-surface);
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-radius-lg) !important;
  box-shadow: var(--bs-shadow-sm) !important;
  margin-bottom: 1.5rem;
  overflow: hidden;
  transition: box-shadow .22s var(--bs-ease), transform .22s var(--bs-ease);
}
.card:hover { box-shadow: var(--bs-shadow) !important; }

/* Template ships colour-tinted card borders — neutralise them */
.card.border-primary, .card.border-success, .card.border-danger,
.card.border-warning, .card.border-info, .card.border-secondary {
  border-color: var(--bs-border) !important;
}
.card.box-shadow-0 { box-shadow: var(--bs-shadow-sm) !important; }

.card-header {
  background: transparent !important;
  border-bottom: 1px solid var(--bs-border);
  padding: 1.1rem 1.35rem !important;
}
.card-header .card-title {
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0;
  color: var(--bs-text);
}

.card-body { padding: 1.35rem !important; }
.card-footer { background: #fafbfd !important; border-top: 1px solid var(--bs-border); padding: 1rem 1.35rem; }

.heading-elements a, .heading-elements-toggle { color: var(--bs-muted); }

/*--------------------------------------------------------------
  6. Buttons
--------------------------------------------------------------*/
.btn {
  border-radius: 10px !important;
  font-weight: 600;
  font-size: .88rem;
  padding: .6rem 1.15rem;
  letter-spacing: 0;
  text-transform: none !important;
  border-width: 1px;
  box-shadow: none !important;
  transition: transform .16s var(--bs-ease), background-color .16s var(--bs-ease), box-shadow .16s var(--bs-ease), color .16s var(--bs-ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus { box-shadow: 0 0 0 3px var(--bs-primary-soft) !important; }

.btn-sm { padding: .4rem .8rem; font-size: .8rem; border-radius: 8px !important; }
.btn-lg { padding: .8rem 1.6rem; font-size: .98rem; border-radius: 12px !important; }

.btn-primary { background: var(--bs-primary) !important; border-color: var(--bs-primary) !important; }
.btn-primary:hover { background: var(--bs-primary-600) !important; border-color: var(--bs-primary-600) !important; box-shadow: 0 8px 20px rgba(79, 70, 229, .3) !important; }

.btn-success { background: var(--bs-success) !important; border-color: var(--bs-success) !important; }
.btn-success:hover { box-shadow: 0 8px 20px rgba(16, 185, 129, .3) !important; }

.btn-danger { background: var(--bs-danger) !important; border-color: var(--bs-danger) !important; }
.btn-danger:hover { box-shadow: 0 8px 20px rgba(239, 68, 68, .3) !important; }

.btn-warning { background: var(--bs-warning) !important; border-color: var(--bs-warning) !important; color: #fff !important; }
.btn-info { background: var(--bs-info) !important; border-color: var(--bs-info) !important; }

.btn-outline-primary { color: var(--bs-primary) !important; border-color: #c9c5f5 !important; background: transparent; }
.btn-outline-primary:hover { background: var(--bs-primary) !important; border-color: var(--bs-primary) !important; color: #fff !important; }

.btn-outline-secondary, .btn.grey.btn-outline-secondary {
  color: var(--bs-muted) !important;
  border-color: var(--bs-border) !important;
  background: #fff !important;
}
.btn-outline-secondary:hover, .btn.grey.btn-outline-secondary:hover {
  background: #f1f3f8 !important;
  color: var(--bs-text) !important;
  border-color: #d6dae5 !important;
}

.btn i { vertical-align: middle; }

/*--------------------------------------------------------------
  7. Forms
--------------------------------------------------------------*/
label, .col-form-label {
  font-weight: 600;
  font-size: .85rem;
  color: #46536b;
  margin-bottom: .4rem;
}

.form-control, .custom-select, textarea.form-control {
  border: 1px solid var(--bs-border) !important;
  border-radius: 10px !important;
  padding: .6rem .9rem;
  height: auto;
  min-height: 42px;
  font-size: .9rem;
  color: var(--bs-text);
  background-color: #fff;
  box-shadow: none !important;
  transition: border-color .18s var(--bs-ease), box-shadow .18s var(--bs-ease);
}
.form-control:focus, .custom-select:focus {
  border-color: var(--bs-primary-400) !important;
  box-shadow: 0 0 0 3px var(--bs-primary-soft) !important;
}
.form-control::placeholder { color: #9aa4b8; }
.form-control:disabled, .form-control[readonly] { background: #f6f7fa; }

.form-control.is-invalid { border-color: var(--bs-danger) !important; }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, .13) !important; }

.input-group-text { border-radius: 10px; border-color: var(--bs-border); background: #f6f7fa; }
.form-group { margin-bottom: 1.15rem; }

/* Select2 alignment with the rest of the inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border: 1px solid var(--bs-border) !important;
  border-radius: 10px !important;
  min-height: 42px;
  padding: .28rem .4rem;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--bs-primary-400) !important;
  box-shadow: 0 0 0 3px var(--bs-primary-soft);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; color: var(--bs-text); }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 40px; }
.select2-dropdown { border-color: var(--bs-border); border-radius: 10px; box-shadow: var(--bs-shadow); overflow: hidden; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--bs-primary) !important; }

/* Checkboxes / switches */
.custom-control-input:checked ~ .custom-control-label::before { background: var(--bs-primary); border-color: var(--bs-primary); }

/*--------------------------------------------------------------
  8. Tables & DataTables
--------------------------------------------------------------*/

/* --- 8.1 Table shell ------------------------------------------------
   Index pages render `.card > .card-content > .table-responsive > table`,
   so the table has no padding of its own. Give the block real breathing
   room and let it scroll horizontally without breaking the card. */
.card-content > .table-responsive,
.card-body > .table-responsive {
  padding: 0 1.35rem 1.35rem;
  border-radius: 0 0 var(--bs-radius-lg) var(--bs-radius-lg);
}
.table-responsive { -webkit-overflow-scrolling: touch; }

/* The card header on list pages carries the title + "add new" action */
.card-header .heading-elements { display: flex; align-items: center; gap: .5rem; }

.table {
  color: var(--bs-text);
  margin-bottom: 0;
  border-collapse: separate !important;
  border-spacing: 0;
  width: 100%;
}

/* --- 8.2 Header row -------------------------------------------------
   `table-bordered` from the markup draws a heavy grid; flatten it to a
   single rule under the header and light row separators. */
.table thead th,
.table.table-bordered thead th {
  background: #f7f8fc !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bs-border) !important;
  color: #5a6880 !important;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .95rem 1rem !important;
  white-space: nowrap;
  vertical-align: middle;
  position: sticky;
  top: 0;
  z-index: 2;
}
.table thead th:first-child { border-start-start-radius: 10px; }
.table thead th:last-child  { border-start-end-radius: 10px; }

/* --- 8.3 Body cells -------------------------------------------------*/
.table td,
.table.table-bordered td {
  background: transparent;
  border: 0 !important;
  border-bottom: 1px solid #eef0f6 !important;
  padding: .85rem 1rem !important;
  font-size: .89rem;
  vertical-align: middle;
  color: #384357;
}
.table tbody tr:last-child td { border-bottom: 0 !important; }

/* Row number / id column reads as secondary */
.table tbody td:first-child { color: var(--bs-muted); font-variant-numeric: tabular-nums; }

/* Numbers line up */
.table td, .table th { font-variant-numeric: tabular-nums; }

/* --- 8.4 Row states -------------------------------------------------
   Kill the vendor zebra (it fights the hover state) in favour of a
   single clean hover highlight. */
.table.table-striped tbody tr:nth-of-type(odd),
.table.table-striped tbody tr:nth-of-type(even) { background: transparent !important; }

.table tbody tr {
  transition: background-color .15s var(--bs-ease), box-shadow .15s var(--bs-ease);
}
.table tbody tr:hover,
.table.table-striped tbody tr:hover {
  background: #f5f7fe !important;
  box-shadow: inset 3px 0 0 var(--bs-primary-400);
}
html[data-textdirection="rtl"] .table tbody tr:hover,
html[data-textdirection="rtl"] .table.table-striped tbody tr:hover {
  box-shadow: inset -3px 0 0 var(--bs-primary-400);
}

.table.table-sm td, .table.table-sm th { padding: .7rem .85rem !important; }

/* Action buttons living in the last column */
.table td .btn-sm,
.table td .btn {
  padding: .32rem .7rem;
  font-size: .78rem;
  border-radius: 7px !important;
}
.table td .btn + .btn { margin-inline-start: .3rem; }

/* --- 8.5 DataTables toolbar ----------------------------------------
   dom is 'Bfrtip': export buttons, then filter, then table, info,
   pagination. Lay the top row out as one tidy flex bar. */
/* The wrapper's children (buttons, filter, table, info, pagination) are direct
   siblings under dom:'Bfrtip' and the vendor floats them, which leaves the
   export buttons and the search box on slightly different baselines. Lay them
   out as one flex grid instead so the toolbar aligns on a single row. */
.dataTables_wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding-top: 1.35rem;   /* clears the card header rule above */
}
.dataTables_wrapper > .row { flex: 0 0 100%; width: 100%; margin: 0; }

.dataTables_wrapper .dt-buttons {
  order: 1;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  float: none !important;
  margin: 0 !important;
}
.dataTables_wrapper .dataTables_filter { order: 2; margin-inline-start: auto !important; }
.dataTables_wrapper .dataTables_length { order: 3; }
.dataTables_wrapper table.dataTable,
.dataTables_wrapper > table {
  order: 4;
  flex: 0 0 100%;
  width: 100% !important;
  margin: .25rem 0 0 !important;
}
.dataTables_wrapper .dataTables_info { order: 5; }
.dataTables_wrapper .dataTables_paginate {
  order: 6;
  float: none !important;
  margin-inline-start: auto !important;
}
/* The datatable bootstrap classes are assigned in JS as saturated solid
   buttons (primary/danger/info/warning/success). Re-cast them as one soft
   tinted set so the toolbar reads as a group instead of a rainbow. */
/* Height and radius are matched to the search field below so the toolbar
   reads as one control strip. */
.dataTables_wrapper .dt-buttons .btn {
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  height: 40px;
  font-weight: 600;
  font-size: .8rem;
  line-height: 1;
  padding: 0 .95rem;
  border-radius: 10px !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.dataTables_wrapper .dt-buttons .btn:hover { transform: translateY(-1px); }

.dataTables_wrapper .dt-buttons .buttons-copy  { background: #eef1f7 !important; color: #55637c !important; border-color: #e0e4ed !important; }
.dataTables_wrapper .dt-buttons .buttons-csv   { background: rgba(239, 68, 68, .1) !important;  color: #b91c1c !important; border-color: rgba(239, 68, 68, .18) !important; }
.dataTables_wrapper .dt-buttons .buttons-excel { background: rgba(16, 185, 129, .12) !important; color: #047857 !important; border-color: rgba(16, 185, 129, .2) !important; }
.dataTables_wrapper .dt-buttons .buttons-pdf   { background: rgba(245, 158, 11, .14) !important; color: #b45309 !important; border-color: rgba(245, 158, 11, .22) !important; }
.dataTables_wrapper .dt-buttons .buttons-print { background: rgba(14, 165, 233, .12) !important; color: #0369a1 !important; border-color: rgba(14, 165, 233, .2) !important; }

/* JS tacks an mr-5 onto the print button — neutralise it */
.dataTables_wrapper .dt-buttons .btn.mr-5,
.dataTables_wrapper .dt-buttons .btn.mr-1 { margin: 0 !important; }

.dataTables_wrapper .dataTables_filter {
  float: none !important;
  text-align: inherit !important;
  margin-bottom: 0;
}
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-weight: 600;
  font-size: .82rem;
  color: var(--bs-muted);
  white-space: nowrap;
}
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--bs-border);
  border-radius: 10px;
  height: 40px;
  padding: 0 .9rem;
  min-width: 260px;
  font-size: .88rem;
  line-height: 1;
  outline: none;
  margin: 0 !important;
  background: #fff;
  transition: border-color .18s var(--bs-ease), box-shadow .18s var(--bs-ease);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--bs-primary-400);
  box-shadow: 0 0 0 3px var(--bs-primary-soft);
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: #9aa4b8; font-weight: 400; }

/* Below the toolbar breakpoint let the search take the full row instead of
   being squeezed next to the export buttons. */
@media (max-width: 991.98px) {
  .dataTables_wrapper .dataTables_filter {
    margin-inline-start: 0 !important;
    flex: 0 0 100%;
  }
  .dataTables_wrapper .dataTables_filter label { width: 100%; }
  .dataTables_wrapper .dataTables_filter input { min-width: 0; flex: 1; }
  .dataTables_wrapper .dataTables_paginate { margin-inline-start: 0 !important; }
}

.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--bs-border);
  border-radius: 8px;
  padding: .3rem 1.4rem .3rem .6rem;
  min-height: 34px;
  font-size: .85rem;
  color: var(--bs-text);
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
  color: var(--bs-muted);
  font-size: .84rem;
  padding: .9rem 0 0;
}

/* --- 8.6 Sorting affordances ---------------------------------------*/
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  cursor: pointer;
  padding-inline-end: 1.75rem !important;
  transition: color .15s var(--bs-ease);
}
table.dataTable thead th.sorting:hover { color: var(--bs-primary) !important; }
/* The vendor sheet pins these via `table.dataTable.table-sm .sorting:before`,
   which outranks any plain override here — hence !important on the geometry.
   `left/right: auto` must also precede the logical property or it wins. */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:before,
table.dataTable thead .sorting_desc_disabled:after {
  position: absolute !important;
  left: auto !important;
  right: auto !important;
  inset-inline-end: .55em !important;
  display: block !important;
  opacity: .28;
  font-size: .72em !important;
  line-height: 1 !important;
  bottom: auto !important;
}
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
  top: calc(50% - .78em) !important;
  content: "\2191";
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  top: calc(50% - .06em) !important;
  content: "\2193";
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after { opacity: 1; color: var(--bs-primary); }

/* --- 8.7 Empty & processing states ---------------------------------*/
.dataTables_wrapper .dataTables_empty {
  padding: 3rem 1rem !important;
  text-align: center;
  color: var(--bs-muted);
  font-size: .92rem;
}
.dataTables_wrapper .dataTables_processing {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  top: 45% !important;
  z-index: 5;
}
.dt-processing-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--bs-surface);
  color: var(--bs-text);
  border: 1px solid var(--bs-border);
  border-radius: 999px;
  padding: .55rem 1.15rem;
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--bs-shadow);
}
.dt-processing-pill i { color: var(--bs-primary); }

/* --- 8.8 Responsive child rows -------------------------------------*/
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child { background: #f7f8fc; }
table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom: 1px solid #eef0f6;
  padding: .5rem 0;
}
table.dataTable > tbody > tr.child span.dtr-title { font-weight: 700; color: #5a6880; min-width: 40%; }

.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page-link {
  border-radius: 9px !important;
  border: 1px solid var(--bs-border) !important;
  color: var(--bs-text) !important;
  background: #fff !important;
  margin: 0 2px;
  padding: .4rem .75rem !important;
  font-size: .85rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination .page-link:hover { background: #f1f3f8 !important; border-color: #d6dae5 !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.pagination .page-item.active .page-link {
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .45; }

table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before {
  background: var(--bs-primary) !important;
  box-shadow: none;
  border: 0;
}

/*--------------------------------------------------------------
  9. Badges, alerts, misc
--------------------------------------------------------------*/
.badge {
  border-radius: 999px;
  font-weight: 600;
  font-size: .72rem;
  padding: .38em .8em;
  letter-spacing: 0;
}
.badge-primary { background: var(--bs-primary-soft) !important; color: var(--bs-primary-600) !important; }
.badge-success { background: rgba(16, 185, 129, .12) !important; color: #047857 !important; }
.badge-danger  { background: rgba(239, 68, 68, .12) !important; color: #b91c1c !important; }
.badge-warning { background: rgba(245, 158, 11, .14) !important; color: #b45309 !important; }
.badge-info    { background: rgba(14, 165, 233, .12) !important; color: #0369a1 !important; }
.badge-secondary { background: #eef1f7 !important; color: #55637c !important; }

.alert {
  border: 0;
  border-radius: var(--bs-radius);
  padding: .9rem 1.15rem;
  font-size: .88rem;
}

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--bs-border) !important;
  border-radius: var(--bs-radius) !important;
  box-shadow: var(--bs-shadow) !important;
  padding: .4rem !important;
  min-width: 200px;
}
.dropdown-item {
  border-radius: 8px;
  padding: .55rem .8rem !important;
  font-size: .88rem;
  color: var(--bs-text);
  display: flex;
  align-items: center;
  gap: .55rem;
}
.dropdown-item:hover { background: #f1f3f8; color: var(--bs-primary-600); }
.dropdown-item i { font-size: 1rem; opacity: .75; }
.dropdown-divider { border-color: var(--bs-border); margin: .35rem 0; }

/*--------------------------------------------------------------
  10. Modals
--------------------------------------------------------------*/
.modal-content {
  border: 0 !important;
  border-radius: var(--bs-radius-lg) !important;
  box-shadow: var(--bs-shadow-lg) !important;
  overflow: hidden;
}

/* The template hard-codes bg-primary on modal headers — restyle to a clean sheet */
.modal-header,
.modal-header.bg-primary {
  background: var(--bs-surface) !important;
  border-bottom: 1px solid var(--bs-border) !important;
  padding: 1.15rem 1.5rem !important;
  align-items: center;
}
.modal-header .modal-title,
.modal-header .modal-title.white,
.modal-header.bg-primary .modal-title {
  color: var(--bs-text) !important;
  font-size: 1.05rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.modal-header .modal-title i { color: var(--bs-primary); }
.modal-header .close {
  color: var(--bs-muted) !important;
  opacity: 1;
  text-shadow: none;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 8px;
  padding: .25rem .55rem;
  transition: background-color .16s var(--bs-ease);
}
.modal-header .close:hover { background: #f1f3f8; color: var(--bs-text) !important; }

.modal-body { padding: 1.5rem !important; }
.modal-footer {
  background: #fafbfd;
  border-top: 1px solid var(--bs-border) !important;
  padding: 1rem 1.5rem !important;
  gap: .5rem;
}
.modal-backdrop.show { opacity: .5; background: #0f172a; }

/*--------------------------------------------------------------
  11. Footer
--------------------------------------------------------------*/
.footer {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bs-muted);
  font-size: .82rem;
  padding: 1.25rem 1.5rem;
}
.footer a { color: var(--bs-muted) !important; }
.footer a:hover { color: var(--bs-primary) !important; }

/*--------------------------------------------------------------
  12. Toastr
--------------------------------------------------------------*/
#toast-container > div {
  border-radius: var(--bs-radius) !important;
  box-shadow: var(--bs-shadow-lg) !important;
  opacity: 1 !important;
  padding: 1rem 1rem 1rem 3.2rem;
  font-size: .88rem;
  border: 0;
}
#toast-container > .toast-success { background-color: var(--bs-success) !important; }
#toast-container > .toast-error   { background-color: var(--bs-danger) !important; }
#toast-container > .toast-warning { background-color: var(--bs-warning) !important; }
#toast-container > .toast-info    { background-color: var(--bs-info) !important; }
.toast-title { font-weight: 700; }

/*--------------------------------------------------------------
  13. Loader overlay
--------------------------------------------------------------*/
#loaderOverlay {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(244, 246, 251, .92);
  backdrop-filter: blur(3px);
  z-index: 9999;
}
#loaderOverlay .loader,
.loader {
  width: 46px;
  height: 46px;
  margin: 18vh auto 0;
  border: 3px solid var(--bs-border);
  border-top-color: var(--bs-primary);
  border-radius: 50%;
  animation: bosla-spin .8s linear infinite;
}
@keyframes bosla-spin { to { transform: rotate(360deg); } }

/*--------------------------------------------------------------
  14. RTL adjustments
--------------------------------------------------------------*/
html[data-textdirection="rtl"] .main-menu .navigation > li > a > i { margin: 0 !important; }
html[data-textdirection="rtl"] .table thead th,
html[data-textdirection="rtl"] .table td { text-align: right; }
html[data-textdirection="rtl"] .dataTables_wrapper .dataTables_filter { text-align: left; }
html[data-textdirection="rtl"] .dataTables_wrapper .dataTables_length { text-align: right; }
html[data-textdirection="rtl"] .modal-footer { justify-content: flex-start; }
html[data-textdirection="rtl"] #toast-container > div { padding: 1rem 3.2rem 1rem 1rem; }
html[data-textdirection="rtl"] .header-navbar .dropdown-user-link .mr-1 { margin-right: 0 !important; margin-left: .5rem !important; }

/*--------------------------------------------------------------
  15. Responsive
--------------------------------------------------------------*/
@media (max-width: 767.98px) {
  .content-wrapper { padding: 1rem !important; }
  .card-body { padding: 1.1rem !important; }
  .header-navbar .navbar-header { background: transparent !important; }
  .header-navbar .navbar-header .brand-text { color: var(--bs-text) !important; }
  .header-navbar .navbar-header .nav-link i { color: var(--bs-text) !important; }
  .dataTables_wrapper .dataTables_filter input { min-width: 100%; }
}

/*--------------------------------------------------------------
  16. Modals — no entrance animation
      The template shipped 49 modals with animate.css `zoomInDown`,
      which ran on page load rather than on show and fought Bootstrap's
      own transform. The `fade` class has been removed from the markup
      so Bootstrap opens and closes them instantly; these rules make
      sure nothing reintroduces movement.
--------------------------------------------------------------*/
.modal,
.modal .modal-dialog,
.modal.show .modal-dialog,
.modal-backdrop {
  transition: none !important;
  animation: none !important;
}
.modal .modal-dialog { transform: none !important; }

/* Long forms scroll inside the viewport rather than pushing the page. */
.modal-dialog { max-height: calc(100vh - 3.5rem); }
.modal-dialog .modal-content { max-height: calc(100vh - 3.5rem); }

/* .modal-content is a clipped flex column, so its body only scrolls if it is
   allowed to shrink: flex items default to min-height:auto (= their content
   height), which silently cut long dialogs off with no scrollbar. Many modals
   also put a wrapper between header and body -- a <form>, or the div that
   AJAX fills in "View Invoice Details" -- so that wrapper joins the column
   too, and scrolls itself when its children can't shrink. Footers inside a
   wrapper stay pinned below the scrolling body. */
.modal-dialog .modal-body { overflow-y: auto; min-height: 0; }
.modal-dialog .modal-content > :not(.modal-header):not(.modal-footer) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/*--------------------------------------------------------------
  17. Form modals as side panels
      Data-entry modals (add / edit / filter / membership / booking)
      are docked to the inline-end edge — left in RTL, right in LTR —
      instead of sitting centred. They take full viewport height and
      scroll their own body, so long forms keep the save button in
      view and the page behind stays visible for context.

      They appear instantly; no slide, per the same no-animation rule
      as section 16.

      Read-only modals (details, history, payments, reports) and the
      small delete confirmations keep the centred dialog layout.
--------------------------------------------------------------*/
.modal-drawer .modal-dialog {
  position: fixed;
  top: 0;
  bottom: 0;
  inset-inline-end: 0;
  margin: 0 !important;
  width: 100%;
  max-width: 620px;
  height: 100%;
  max-height: 100% !important;
  display: flex;
  align-items: stretch;
  pointer-events: auto;
  transform: none !important;
}
/* a drawer is already full height — neutralise the centred helper */
.modal-drawer .modal-dialog.modal-dialog-centered { display: flex; min-height: 100%; }
.modal-drawer .modal-dialog.modal-lg { max-width: 760px; }

.modal-drawer .modal-content {
  width: 100%;
  height: 100%;
  max-height: 100% !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 60px rgba(16, 24, 40, .18) !important;
}
html[dir="rtl"] .modal-drawer .modal-content { box-shadow: 24px 0 60px rgba(16, 24, 40, .18) !important; }

/* header and footer pinned, body scrolls */
.modal-drawer .modal-header,
.modal-drawer .modal-footer { flex: 0 0 auto; }
.modal-drawer .modal-body { flex: 1 1 auto; overflow-y: auto; }

/* full width on small screens */
@media (max-width: 767.98px) {
  .modal-drawer .modal-dialog,
  .modal-drawer .modal-dialog.modal-lg { max-width: 100%; }
}