/* ============================================================
   LAVY ADMIN — "Indigo Slate" Design System v3
   Color: Indigo #4F46E5. Sidebar: Light. RTL-first.
   ============================================================ */

:root {
  /* ── Brand — Indigo (replaces teal entirely) ── */
  --p:        #4F46E5 !important;   /* primary */
  --p-dk:     #4338CA !important;   /* dark */
  --p-lt:     #6366F1 !important;   /* light */
  --p-pale:   #EEF2FF !important;   /* very pale background */
  --p-glow:   rgba(79,70,229,.18) !important;
  --p-bg:     rgba(79,70,229,.08) !important;

  /* ── Sidebar ── */
  --sb-w:         256px !important;
  --sb-bg:        #ffffff !important;
  --sb-border:    #EAECF0 !important;
  --sb-item-h:    40px !important;
  --sb-txt:       #667085 !important;
  --sb-txt-act:   #ffffff !important;
  --sb-label:     #98A2B3 !important;

  /* ── Page ── */
  --bg:       #F5F6FA !important;
  --surface:  #ffffff !important;
  --s2:       #F9FAFB !important;
  --s3:       #F2F4F7 !important;

  /* ── Text ── */
  --t:        #101828 !important;
  --t2:       #344054 !important;
  --t3:       #667085 !important;
  --t4:       #98A2B3 !important;

  /* ── Border ── */
  --bd:       #EAECF0 !important;
  --bd2:      #F2F4F7 !important;

  /* ── Semantic ── */
  --ok:       #027A48 !important;
  --ok-bg:    #D1FADF !important;
  --ok-lt:    #ECFDF3 !important;
  --warn:     #B54708 !important;
  --warn-bg:  #FEF0C7 !important;
  --warn-lt:  #FFFAEB !important;
  --err:      #B42318 !important;
  --err-bg:   #FEE4E2 !important;
  --err-lt:   #FFF5F5 !important;
  --info:     #026AA2 !important;
  --info-bg:  #B9E6FE !important;
  --info-lt:  #F0F9FF !important;

  /* ── Stat card gradients ── */
  --g-indigo: linear-gradient(135deg,#312E81 0%,#4F46E5 55%,#6366F1 100%) !important;
  --g-green:  linear-gradient(135deg,#064E3B 0%,#059669 55%,#10B981 100%) !important;
  --g-amber:  linear-gradient(135deg,#78350F 0%,#D97706 55%,#F59E0B 100%) !important;
  --g-rose:   linear-gradient(135deg,#881337 0%,#E11D48 55%,#F43F5E 100%) !important;
  --g-blue:   linear-gradient(135deg,#1E3A8A 0%,#2563EB 55%,#3B82F6 100%) !important;
  --g-purple: linear-gradient(135deg,#4C1D95 0%,#7C3AED 55%,#8B5CF6 100%) !important;

  /* ── Radius ── */
  --r2:    4px !important;
  --r3:    6px !important;
  --r4:    8px !important;
  --r5:    10px !important;
  --r6:    12px !important;
  --r8:    16px !important;
  --r10:   20px !important;
  --r-f:   9999px !important;

  /* ── Shadow ── */
  --sh-xs: 0 1px 2px rgba(16,24,40,.05) !important;
  --sh-sm: 0 1px 3px rgba(16,24,40,.1), 0 1px 2px rgba(16,24,40,.06) !important;
  --sh:    0 4px 8px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04) !important;
  --sh-md: 0 8px 16px rgba(16,24,40,.1), 0 4px 6px rgba(16,24,40,.05) !important;
  --sh-lg: 0 20px 40px rgba(16,24,40,.12), 0 8px 12px rgba(16,24,40,.06) !important;
  --sh-xl: 0 32px 64px rgba(16,24,40,.14) !important;

  /* ── Type ── */
  --font:   'Cairo', sans-serif !important;
  --f2xs:   10px !important;
  --fxs:    11px !important;
  --fsm:    12px !important;
  --fb:     13.5px !important;
  --fmd:    15px !important;
  --flg:    18px !important;
  --fxl:    22px !important;
  --f2xl:   28px !important;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box !important; }
html { scroll-behavior: smooth !important; }

body {
  font-family: var(--font) !important;
  font-size: var(--fb) !important;
  color: var(--t) !important;
  background: var(--bg) !important;
  line-height: 1.6 !important;
  -webkit-font-smoothing: antialiased !important;
  direction: rtl !important;
}

a { color: var(--p); text-decoration: none !important; }
a:hover { color: var(--p-dk) !important; text-decoration: none !important; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font) !important; font-weight: 700 !important; color: var(--t) !important; line-height: 1.3 !important; }

/* ============================================================
   LAYOUT
   ============================================================ */
#wrapper { display: flex !important; min-height: 100vh !important; }

#content-wrapper {
  flex: 1 !important;
  min-width: 0 !important;
  background: var(--bg) !important;
  display: flex !important;
  flex-direction: column !important;
}
#content { flex: 1 !important; }

.container-fluid { padding: 1.5rem 2rem 2.5rem !important; }

/* Page header */
.d-sm-flex.align-items-center.justify-content-between.mb-4 {
  margin-bottom: 1.5rem !important;
}
.d-sm-flex.align-items-center.justify-content-between.mb-4 h1 {
  font-size: var(--fxl) !important;
  color: var(--t) !important;
  letter-spacing: -0.5px !important;
}

/* ============================================================
   SIDEBAR — light, clean, RTL-ready
   ============================================================ */
.sidebar {
  width: var(--sb-w) !important;
  min-height: 100vh !important;
  background: var(--sb-bg) !important;
  background-image: none !important;
  border-left: 1px solid var(--sb-border) !important;  /* RTL: left */
  box-shadow: 4px 0 24px rgba(16,24,40,.06) !important;
  display: flex !important;
  flex-direction: column !important;
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--bd) transparent !important;
  z-index: 100 !important;
}

.sidebar::-webkit-scrollbar { width: 3px !important; }
.sidebar::-webkit-scrollbar-track { background: transparent !important; }
.sidebar::-webkit-scrollbar-thumb { background: var(--bd) !important; border-radius: 2px !important; }

#accordionSidebar {
  background: var(--sb-bg) !important;
  background-image: none !important;
}

/* ── Brand bar ── */
.sidebar-brand {
  height: 72px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--sb-border) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 20px !important;
  gap: 12px !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.sidebar-brand .sidebar-brand-icon {
  width: 40px !important; height: 40px !important;
  border-radius: var(--r5) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px var(--p-glow) !important;
}
.sidebar-brand .sidebar-brand-icon i { color: #fff !important; font-size: 17px !important; }

.sidebar-brand .sidebar-brand-text {
  color: var(--t) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.1 !important;
}

/* ── Nav list ── */
.sidebar .nav-item {
  position: relative !important;
  padding: 1px 10px !important;
}

.sidebar .nav-item .nav-link {
  color: var(--sb-txt) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 0 12px !important;
  height: var(--sb-item-h) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: var(--r4) !important;
  transition: background .14s, color .14s !important;
  white-space: nowrap !important;
}

.sidebar .nav-item .nav-link i {
  font-size: 15px !important;
  width: 18px !important;
  text-align: center !important;
  color: var(--t4) !important;
  flex-shrink: 0 !important;
  transition: color .14s !important;
}

.sidebar .nav-item .nav-link:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
}
.sidebar .nav-item .nav-link:hover i { color: var(--p) !important; }

/* Active */
.nav-item.active {
    background-color: transparent !important;
}
.sidebar .nav-item.active .nav-link {
  background: var(--p) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 10px var(--p-glow) !important;
}
.sidebar .nav-item.active .nav-link i { color: rgba(255,255,255,.85) !important; }

/* Section heading */
.sidebar-heading {
  font-size: var(--f2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--sb-label) !important;
  padding: 14px 22px 4px !important;
}

.sidebar-divider {
  border: none !important;
  border-top: 1px solid var(--sb-border) !important;
  margin: 6px 10px !important;
}

/* Collapse toggle */
#sidebarToggle {
  background: var(--s3) !important;
  color: var(--t3) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r4) !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  margin: 12px auto !important;
}
#sidebarToggle:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
  border-color: rgba(79,70,229,.25) !important;
}

#sidebarToggleTop {
  background: transparent !important;
  color: var(--t3) !important;
  border: none !important;
  border-radius: var(--r4) !important;
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  height: 64px !important;
  min-height: 64px !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--bd) !important;
  box-shadow: 0 1px 0 var(--bd), 0 4px 12px rgba(16,24,40,.05) !important;
  padding: 0 1.5rem !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

.topbar .navbar-nav .nav-link {
  color: var(--t3) !important;
  padding: 0 .5rem !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  font-size: var(--fb) !important;
  transition: color .14s !important;
}
.topbar .navbar-nav .nav-link:hover { color: var(--t) !important; }
.topbar .nav-item .nav-link:focus { box-shadow: none !important; outline: none !important; }

/* Topbar chip — year / language pill */
.topbar-chip {
  background: var(--s2) !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r-f) !important;
  color: var(--t2) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  padding: 4px 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
  transition: background .13s, border-color .13s, color .13s !important;
  cursor: pointer !important;
}
.topbar-chip .fa, .topbar-chip .fas { font-size: 10px !important; opacity: .65 !important; }
.topbar-chip:hover {
  background: var(--p-pale) !important;
  border-color: rgba(79,70,229,.3) !important;
  color: var(--p) !important;
  text-decoration: none !important;
}

/* Active year chip accent */
.topbar-chip.year-chip {
  background: var(--p-pale) !important;
  border-color: rgba(79,70,229,.2) !important;
  color: var(--p) !important;
}
.topbar-chip.year-chip:hover {
  background: rgba(79,70,229,.12) !important;
  border-color: rgba(79,70,229,.4) !important;
}

/* Language chip */
.topbar-chip.lang-chip {
  letter-spacing: .02em !important;
}

.topbar .topbar-divider,
.topbar-divider {
  width: 1px !important;
  border-right: none !important;
  background: var(--bd) !important;
  height: 20px !important;
  margin: auto 6px !important;
}

.badge-counter {
  font-size: 9px !important;
  font-weight: 700 !important;
  padding: 2px 5px !important;
  border-radius: var(--r-f) !important;
  position: absolute !important;
  top: 12px !important; left: 2px !important;
  background: var(--err) !important;
  color: #fff !important;
  border: 2px solid var(--surface) !important;
}

/* Notification bell icon */
.topbar .nav-item .nav-link .fa-bell,
.topbar .nav-item .nav-link .fa-envelope {
  font-size: 16px !important;
  color: var(--t3) !important;
  transition: color .14s !important;
}
.topbar .nav-item .nav-link:hover .fa-bell,
.topbar .nav-item .nav-link:hover .fa-envelope { color: var(--p) !important; }

.img-profile {
  width: 34px !important; height: 34px !important;
  border-radius: var(--r-f) !important;
  background: var(--p) !important;
  color: #fff !important;
  font-size: 14px !important; font-weight: 700 !important;
  display: flex !important;
  align-items: center !important; justify-content: center !important;
  line-height: 1 !important;
  border: 2px solid rgba(79,70,229,.2) !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.img-profile:hover {
  border-color: rgba(79,70,229,.5) !important;
  box-shadow: 0 0 0 3px var(--p-glow) !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */
.dropdown-menu {
  border: 1px solid var(--bd) !important;
  border-radius: var(--r5) !important;
  box-shadow: var(--sh-md) !important;
  padding: 4px !important;
  min-width: 180px !important;
  background: var(--surface) !important;
}

.dropdown-item {
  border-radius: var(--r3) !important;
  padding: 8px 12px !important;
  font-size: var(--fsm) !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  transition: background .1s !important;
  display: flex !important; align-items: center !important;
}
.dropdown-item:hover { background: var(--p-pale) !important; color: var(--p) !important; }
.dropdown-item:active { background: var(--p) !important; color: #fff !important; }

.dropdown-divider { border-color: var(--bd2) !important; margin: 3px 0 !important; }
.dropdown-menu-right { right: 0 !important; left: auto !important; }
.dropdown-toggle::after { margin-right: .3rem !important; }

.dropdown-header {
  font-size: var(--f2xs) !important;
  font-weight: 600 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--t4) !important;
  padding: 6px 12px 3px !important;
}

/* Notification dropdown */
.dropdown-list.dropdown-menu {
  padding: 0 !important;
  min-width: 300px !important;
  border-radius: var(--r5) !important;
  overflow: hidden !important;
}
.dropdown-list.dropdown-menu h6.dropdown-header {
  background: var(--p) !important;
  color: #fff !important;
  padding: 12px 16px !important;
  font-size: var(--fsm) !important;
  letter-spacing: .05em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 !important; border-radius: 0 !important;
}
.dropdown-list .dropdown-item {
  border-radius: 0 !important;
  border-bottom: 1px solid var(--bd2) !important;
  padding: 12px 16px !important;
  display: flex !important; align-items: flex-start !important; gap: 10px !important;
}
.dropdown-list .dropdown-item:last-child { border-bottom: none !important; }
.dropdown-list .dropdown-item:hover { background: var(--s2) !important; color: inherit !important; }
.dropdown-list .dropdown-item .text-truncate { font-size: var(--fsm) !important; font-weight: 600 !important; color: var(--t) !important; }
.dropdown-list .dropdown-item .small { font-size: 11px !important; color: var(--t4) !important; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface) !important;
  border: 1px solid var(--bd) !important;
  border-radius: var(--r8) !important;
  box-shadow: var(--sh-sm) !important;
  overflow: visible !important;
  transition: box-shadow .2s, transform .18s !important;
}
.card:hover { box-shadow: var(--sh) !important; transform: translateY(-1px) !important; }

.card-header {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--bd) !important;
  padding: .9rem 1.25rem !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.card-header h6 {
  font-size: var(--fb) !important; font-weight: 700 !important;
  color: var(--t) !important; margin: 0 !important;
}

.card-body { padding: 1.25rem !important; overflow: visible !important; }
.card-footer {
  background: var(--s2) !important;
  border-top: 1px solid var(--bd) !important;
  padding: .75rem 1.25rem !important;
}

/* ── KPI / Stat cards — gradient with white text ── */
.card.border-left-primary,
.card.border-right-primary  { background: var(--g-indigo) !important; border: none !important; }
.card.border-left-success,
.card.border-right-success  { background: var(--g-green) !important; border: none !important; }
.card.border-left-warning,
.card.border-right-warning  { background: var(--g-amber) !important; border: none !important; }
.card.border-left-danger,
.card.border-right-danger   { background: var(--g-rose) !important; border: none !important; }
.card.border-left-info,
.card.border-right-info     { background: var(--g-blue) !important; border: none !important; }

/* Remove old border-left/right hack */
.border-left-primary, .border-left-success, .border-left-warning,
.border-left-danger,  .border-left-info,
.border-right-primary,.border-right-success,.border-right-warning,
.border-right-danger, .border-right-info {
  border-left: none !important; border-right: none !important;
}

/* KPI text — white on gradient */
.card.border-left-primary  .text-xs,
.card.border-left-success  .text-xs,
.card.border-left-warning  .text-xs,
.card.border-left-danger   .text-xs,
.card.border-left-info     .text-xs,
.card.border-right-primary .text-xs,
.card.border-right-success .text-xs,
.card.border-right-warning .text-xs,
.card.border-right-danger  .text-xs,
.card.border-right-info    .text-xs {
  color: rgba(255,255,255,.75) !important;
}

.card.border-left-primary  .h5,
.card.border-left-success  .h5,
.card.border-left-warning  .h5,
.card.border-left-danger   .h5,
.card.border-left-info     .h5,
.card.border-right-primary .h5,
.card.border-right-success .h5,
.card.border-right-warning .h5,
.card.border-right-danger  .h5,
.card.border-right-info    .h5,
.card.border-left-primary  .font-weight-bold,
.card.border-left-success  .font-weight-bold,
.card.border-left-warning  .font-weight-bold,
.card.border-left-danger   .font-weight-bold,
.card.border-left-info     .font-weight-bold,
.card.border-right-primary .font-weight-bold,
.card.border-right-success .font-weight-bold,
.card.border-right-warning .font-weight-bold,
.card.border-right-danger  .font-weight-bold,
.card.border-right-info    .font-weight-bold {
  color: #fff !important;
}

/* KPI icon */
.card.border-left-primary .col-auto i,
.card.border-left-success .col-auto i,
.card.border-left-warning .col-auto i,
.card.border-left-danger  .col-auto i,
.card.border-left-info    .col-auto i,
.card.border-right-primary .col-auto i,
.card.border-right-success .col-auto i,
.card.border-right-warning .col-auto i,
.card.border-right-danger  .col-auto i,
.card.border-right-info    .col-auto i {
  background: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 22px !important;
  padding: 14px !important;
  border-radius: var(--r4) !important;
}

/* KPI number & hover */
.h5.mb-0.font-weight-bold, .font-weight-bold.text-gray-800 {
  font-size: 26px !important; font-weight: 900 !important; letter-spacing: -0.4px !important;
}
.text-xs {
  font-size: 11px !important; font-weight: 700 !important;
  text-transform: uppercase !important; letter-spacing: .09em !important;
}

.card.border-left-primary:hover,
.card.border-left-success:hover,
.card.border-left-warning:hover,
.card.border-left-danger:hover,
.card.border-left-info:hover,
.card.border-right-primary:hover,
.card.border-right-success:hover,
.card.border-right-warning:hover,
.card.border-right-danger:hover,
.card.border-right-info:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sh-lg) !important;
}

/* ============================================================
   BUTTONS — unified height, ghost small variants
   ============================================================ */
.btn {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  border-radius: var(--r4) !important;
  font-size: var(--fsm) !important;
  height: 36px !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  transition: all .15s !important;
  border-width: 1.5px !important;
  letter-spacing: .01em !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  white-space: nowrap !important;
}
.btn:focus { box-shadow: none !important; outline: none !important; }
.btn:active { transform: scale(.97) !important; }
/* Small — used for all table/card action buttons */
.btn-sm {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
  border-radius: var(--r3) !important;
  gap: 4px !important;
}
.btn-lg { height: 44px !important; padding: 0 24px !important; font-size: var(--fmd) !important; border-radius: var(--r5) !important; }

/* ── Solid variants (full-size buttons only) ── */
.btn-primary {
  background: var(--p) !important; border-color: var(--p) !important; color: #fff !important;
  box-shadow: 0 2px 8px var(--p-glow) !important;
}
.btn-primary:hover {
  background: var(--p-dk) !important; border-color: var(--p-dk) !important;
  box-shadow: 0 4px 14px var(--p-glow) !important; transform: translateY(-1px) !important;
}
.btn-primary:focus { box-shadow: 0 0 0 3px var(--p-glow) !important; }

.btn-secondary {
  background: var(--surface) !important; border-color: var(--bd) !important; color: var(--t2) !important;
}
.btn-secondary:hover {
  background: var(--s2) !important; border-color: #C4C9D4 !important; transform: translateY(-1px) !important;
}

.btn-success { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }
.btn-danger  { background: #E11D48 !important; border-color: #E11D48 !important; color: #fff !important; }
.btn-warning { background: #D97706 !important; border-color: #D97706 !important; color: #fff !important; }
.btn-info    { background: #0284C7 !important; border-color: #0284C7 !important; color: #fff !important; }
.btn-success:hover,.btn-danger:hover,.btn-warning:hover,.btn-info:hover { opacity: .88 !important; transform: translateY(-1px) !important; }

/* ── Ghost/light variants for .btn-sm action buttons ── */
.btn-sm.btn-primary  {
  background: var(--p-pale) !important; border-color: transparent !important;
  color: var(--p) !important; box-shadow: none !important;
}
.btn-sm.btn-primary:hover  { background: #DDD6FE !important; transform: none !important; }

.btn-sm.btn-secondary {
  background: var(--s3) !important; border-color: transparent !important;
  color: var(--t3) !important; box-shadow: none !important;
}
.btn-sm.btn-secondary:hover { background: var(--bd) !important; color: var(--t2) !important; transform: none !important; }

.btn-sm.btn-success {
  background: var(--ok-lt) !important; border-color: transparent !important;
  color: var(--ok) !important; box-shadow: none !important;
}
.btn-sm.btn-success:hover { background: #A7F3D0 !important; opacity: 1 !important; transform: none !important; }

.btn-sm.btn-danger {
  background: var(--err-lt) !important; border-color: transparent !important;
  color: var(--err) !important; box-shadow: none !important;
}
.btn-sm.btn-danger:hover { background: #FEE4E2 !important; opacity: 1 !important; transform: none !important; }

.btn-sm.btn-warning {
  background: var(--warn-lt) !important; border-color: transparent !important;
  color: var(--warn) !important; box-shadow: none !important;
}
.btn-sm.btn-warning:hover { background: var(--warn-bg) !important; opacity: 1 !important; transform: none !important; }

.btn-sm.btn-info {
  background: var(--info-lt) !important; border-color: transparent !important;
  color: var(--info) !important; box-shadow: none !important;
}
.btn-sm.btn-info:hover { background: var(--info-bg) !important; opacity: 1 !important; transform: none !important; }

.btn-outline-secondary {
  border-color: var(--bd) !important; color: var(--t3) !important; background: transparent !important;
}
.btn-outline-secondary:hover {
  background: var(--s2) !important; border-color: #C4C9D4 !important; color: var(--t2) !important;
}

.btn-link {
  background: var(--s2) !important;
  color: var(--t3) !important; padding: 5px 8px !important; height: auto !important;
  border-radius: var(--r3) !important; border: none !important; box-shadow: none !important;
}
.btn-link:hover { background: var(--s3) !important; color: var(--t) !important; }
.btn-link.text-warning {
  background: var(--warn-lt) !important; color: var(--warn) !important;
}
.btn-link.text-warning:hover { background: var(--warn-bg) !important; }
.btn-link.text-danger {
  background: var(--err-lt) !important; color: var(--err) !important;
}
.btn-link.text-danger:hover  { background: var(--err-bg) !important; }
.btn-link.text-success {
  background: var(--ok-lt) !important; color: var(--ok) !important;
}
.btn-link.text-success:hover { background: #A7F3D0 !important; }
.btn-link.text-primary {
  background: var(--p-pale) !important; color: var(--p) !important;
}
.btn-link.text-primary:hover { background: #DDD6FE !important; }
.btn-link.text-info {
  background: var(--info-lt) !important; color: var(--info) !important;
}
.btn-link.text-info:hover { background: var(--info-bg) !important; }
.btn-link.text-secondary {
  background: var(--s3) !important; color: var(--t3) !important;
}
.btn-link.text-secondary:hover { background: var(--bd) !important; color: var(--t2) !important; }

.btn-user, .btn-circle { border-radius: var(--r-f) !important; }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1rem !important; }

.form-label, label {
  font-size: var(--fsm) !important; font-weight: 600 !important; color: var(--t2) !important;
  margin-bottom: .3rem !important; display: block !important;
}

.form-control {
  font-family: var(--font) !important; font-size: var(--fb) !important; color: var(--t) !important;
  background: var(--surface) !important; border: 1.5px solid var(--bd) !important;
  border-radius: var(--r4) !important; height: 40px !important;
  padding: .375rem .85rem !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.form-control:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px var(--p-glow) !important;
  background: var(--surface) !important; color: var(--t) !important; outline: none !important;
}
.form-control:disabled, .form-control[readonly] {
  background: var(--s2) !important; color: var(--t3) !important; cursor: not-allowed !important;
}
.form-control-sm { height: 33px !important; font-size: var(--fsm) !important; border-radius: var(--r3) !important; }
textarea.form-control { height: auto !important; min-height: 90px !important; }
.form-control-user { border-radius: var(--r-f) !important; height: 46px !important; padding: .5rem 1.25rem !important; }

.custom-select {
  font-family: var(--font) !important; font-size: var(--fb) !important;
  border: 1.5px solid var(--bd) !important; border-radius: var(--r4) !important;
  height: 40px !important; color: var(--t) !important; background-color: var(--surface) !important;
}
.custom-select:focus {
  border-color: var(--p) !important; box-shadow: 0 0 0 3px var(--p-glow) !important;
}

/* Bootstrap-Select */
/* When styleBase:'form-control', the wrapper div ALSO gets .form-control → double border.
   Strip the wrapper border; only the inner toggle button keeps one border. */
.bootstrap-select {
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  height: auto !important;
}
.bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  border: 1.5px solid var(--bd) !important;
  border-radius: var(--r4) !important;
  background: var(--surface) !important;
  color: var(--t) !important;
  font-size: var(--fb) !important;
  height: 40px !important;
  font-family: var(--font) !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px var(--p-glow) !important;
  outline: none !important;
}
.bootstrap-select .dropdown-toggle .filter-option { text-align: right !important; }
/* Dropdown menu: always opens downward, scrollable, full width */
.bootstrap-select .dropdown-menu,
.bootstrap-select.dropup .dropdown-menu {
  width: 100% !important;
  min-width: 0 !important;
  padding: 4px !important;
  z-index: 9999 !important;
  top: 100% !important;
  bottom: auto !important;
  transform: none !important;
}
.bootstrap-select .dropdown-menu .inner,
.bootstrap-select .dropdown-menu.inner {
  text-align: right !important;
  /* Do NOT set max-height or overflow here — bootstrap-select manages its own
     virtual scroll via margin-top/bottom on this element. Overriding breaks it. */
}

/* Inline status select */
.vacation-status-inline {
  font-family: var(--font) !important; font-size: var(--fsm) !important;
  border: 1.5px solid var(--bd) !important; border-radius: var(--r-f) !important;
  height: 28px !important; padding: 0 10px !important;
  color: var(--t2) !important; background: var(--s2) !important; cursor: pointer !important;
}
.vacation-status-inline:focus {
  border-color: var(--p) !important; box-shadow: 0 0 0 2px var(--p-glow) !important; outline: none !important;
}

.input-group .form-control { z-index: 1 !important; }
.input-group .input-group-text {
  background: var(--s2) !important; border: 1.5px solid var(--bd) !important;
  color: var(--t3) !important; font-size: var(--fb) !important;
}
.input-group .input-group-append .btn { border-radius: 0 var(--r4) var(--r4) 0 !important; }
.input-group .input-group-prepend .btn { border-radius: var(--r4) 0 0 var(--r4) !important; }

.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--p) !important; border-color: var(--p) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 3px var(--p-glow) !important;
}

.row-checkbox {
  width: 16px !important; height: 16px !important;
  border: 1.5px solid var(--bd) !important; border-radius: 4px !important;
  cursor: pointer !important; accent-color: var(--p) !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table {
  color: var(--t2) !important; font-size: var(--fb) !important;
  border-color: var(--bd2) !important; margin-bottom: 0 !important;
}
.table th, .table td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  border-color: var(--bd2) !important;
}
/* ── TABLE HEADERS — Clean Slate ── */
.table thead tr,
table.dataTable thead tr {
  background: #f4f6fafa !important;
  box-shadow: 0 2px 0 var(--p) !important;
}

/* Shared th base */
.table thead th,
table.dataTable thead th {
  background: transparent !important;
  color: var(--p) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  padding: 12px 14px !important;
  border: none !important;
  border-inline-start: 1px solid rgba(0,0,0,.07) !important;
  white-space: nowrap !important;
  transition: background .18s !important;
}
.table thead th:first-child,
table.dataTable thead th:first-child { border-inline-start: none !important; }

/* RTL corner radius: first-child = visually right, last-child = visually left */
.table thead th:first-child,
table.dataTable thead th:first-child { border-top-right-radius: 8px !important; }
.table thead th:last-child,
table.dataTable thead th:last-child  { border-top-left-radius: 8px !important; }

/* Hover */
.table thead th:hover { background: rgba(79,70,229,.07) !important; }

.table tbody tr { transition: background .1s !important; }
.table tbody tr:hover { background: var(--p-pale) !important; }
.table-sm th, .table-sm td { padding: 8px 10px !important; font-size: var(--fsm) !important; }

/* DataTables */
table.dataTable {
  width: 100% !important; border-collapse: separate !important; border-spacing: 0 !important;
  border-radius: var(--r5) !important;
  overflow: hidden !important;
  border: 1px solid var(--bd) !important;
}
table.dataTable td, table.dataTable th { white-space: nowrap !important; }

/* last row — remove bottom border so it doesn't double with the table border */
table.dataTable tbody tr:last-child td { border-bottom: none !important; }

table.dataTable thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
  cursor: default !important;
}
table.dataTable thead th.sorting { cursor: pointer !important; }

table.dataTable thead th.sorting:hover,
table.dataTable thead th.sorting_asc:hover,
table.dataTable thead th.sorting_desc:hover {
  background: rgba(79,70,229,.09) !important;
}

/* Active sort — stronger tint + indigo bottom glow */
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  background: rgba(79,70,229,.13) !important;
  box-shadow: inset 0 -3px 0 var(--p) !important;
}

/* ── Sort arrows — RTL: absolute positioned on LEFT ── */
/* Kill ::before entirely */
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 { display: none !important; }

/* Re-enable ::after with left positioning for RTL */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { position: relative !important; padding-left: 20px !important; }

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 {
  display: block !important;
  position: absolute !important;
  left: .5em !important;
    right: inherit!important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

table.dataTable > thead .sorting::after        { content: '⇅' !important; opacity: .35 !important; color: var(--p) !important; }
table.dataTable > thead .sorting_asc::after    { content: '↑' !important; opacity: 1   !important; color: var(--p) !important; }
table.dataTable > thead .sorting_desc::after   { content: '↓' !important; opacity: 1   !important; color: var(--p) !important; }
table.dataTable > thead .sorting_asc_disabled::after,
table.dataTable > thead .sorting_desc_disabled::after { content: '' !important; display: none !important; }

.dataTables_wrapper { padding: 0 !important; }
.dataTables_length, .dataTables_filter { margin-bottom: 12px !important; }
.dataTables_filter input {
  font-family: var(--font) !important; border: 1.5px solid var(--bd) !important;
  border-radius: var(--r4) !important; padding: 6px 12px !important; font-size: var(--fsm) !important;
  color: var(--t) !important; background: var(--surface) !important; height: 36px !important; margin-right: 6px !important;
}
.dataTables_filter input:focus {
  border-color: var(--p) !important; box-shadow: 0 0 0 3px var(--p-glow) !important; outline: none !important;
}
.dataTables_info { font-size: var(--fsm) !important; color: var(--t4) !important; padding-top: 8px !important; }
.dataTables_length select {
  font-family: var(--font) !important; border: 1.5px solid var(--bd) !important; border-radius: var(--r4) !important;
  padding: 4px 8px !important; font-size: var(--fsm) !important; color: var(--t) !important;
  background: var(--surface) !important; height: 34px !important; margin: 0 4px !important;
}
.dataTables_length select:focus {
  border-color: var(--p) !important; box-shadow: 0 0 0 2px var(--p-glow) !important; outline: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  right: 5px !important; border: none !important;
  background-color: var(--p) !important; box-shadow: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  position: relative !important; padding-right: 30px !important; cursor: pointer !important;
}

div.dt-buttons { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
div.dt-buttons .btn { font-size: var(--fsm) !important; }
div.dt-button-collection {
  border-radius: var(--r5) !important; box-shadow: var(--sh-md) !important;
  border: 1px solid var(--bd) !important;
}
div.dt-button-collection .dt-button { border-radius: var(--r3) !important; }
div.dt-button-collection .dt-button:hover { background: var(--p-pale) !important; color: var(--p) !important; }

.dt-button-collection .dropdown-menu .buttons-columnVisibility:before {
  content: ' ' !important; display: block !important; position: absolute !important;
  top: 1.2em !important; left: 0 !important; width: 15px !important; height: 15px !important;
  box-sizing: border-box !important; margin-top: -8px !important; margin-left: 10px !important;
  border: 1.5px solid var(--p) !important; border-radius: 3px !important;
}
.dt-button-collection .dropdown-menu .buttons-columnVisibility.active {
  background: var(--p-pale) !important; color: var(--p) !important;
}
.dt-button-collection .dropdown-menu .buttons-columnVisibility.active span::before {
  font-family: Arial !important; content: '\2714' !important; display: block !important; position: absolute !important;
  top: 1.2em !important; left: 0 !important; width: 15px !important; height: 15px !important;
  box-sizing: border-box !important; margin-top: -7px !important; margin-left: 10px !important;
  text-align: center !important; color: var(--p) !important;
}
.dt-button-collection .dropdown-menu .buttons-columnVisibility span { margin-left: 17px !important; }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination { gap: 3px !important; }
.page-item .page-link {
  font-family: var(--font) !important; font-size: var(--fsm) !important; font-weight: 600 !important;
  color: var(--t3) !important; background: var(--surface) !important;
  border: 1.5px solid var(--bd) !important; border-radius: var(--r4) !important;
  padding: 5px 11px !important; transition: all .12s !important;
}
.page-item .page-link:hover {
  background: var(--p-pale) !important; color: var(--p) !important; border-color: rgba(79,70,229,.3) !important;
}
.page-item.active .page-link {
  background: var(--p) !important; border-color: var(--p) !important;
  color: #fff !important; box-shadow: 0 2px 8px var(--p-glow) !important;
}
.page-item.disabled .page-link {
  color: var(--t4) !important; background: var(--s2) !important; border-color: var(--bd2) !important;
}
.page-link:focus { box-shadow: 0 0 0 3px var(--p-glow) !important; outline: none !important; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  font-family: var(--font) !important; font-size: 11px !important; font-weight: 700 !important;
  padding: 3px 9px !important; border-radius: var(--r-f) !important;
  letter-spacing: .02em !important; display: inline-flex !important; align-items: center !important;
}
.badge-primary   { background: var(--p-bg) !important;     color: var(--p) !important; }
.badge-success   { background: var(--ok-bg) !important;    color: var(--ok) !important; }
.badge-warning   { background: var(--warn-bg) !important;  color: var(--warn) !important; }
.badge-danger    { background: var(--err-bg) !important;   color: var(--err) !important; }
.badge-secondary { background: var(--s3) !important;       color: var(--t3) !important; }
.badge-info      { background: var(--info-bg) !important;  color: var(--info) !important; }
.badge-light     { background: var(--s2) !important;       color: var(--t3) !important; }
.badge-dark      { background: var(--t) !important;        color: #fff !important; }
.badge-purple    { background: #EDE9FE !important;         color: #6D28D9 !important; }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
  border-radius: var(--r5) !important; border: 1px solid transparent !important;
  font-size: var(--fb) !important; padding: .85rem 1.1rem !important;
}
.alert-success { background: var(--ok-lt) !important; border-color: var(--ok-bg) !important; color: var(--ok) !important; }
.alert-danger  { background: var(--err-lt) !important; border-color: var(--err-bg) !important; color: var(--err) !important; }
.alert-warning { background: var(--warn-lt) !important; border-color: var(--warn-bg) !important; color: var(--warn) !important; }
.alert-info    { background: var(--info-lt) !important; border-color: var(--info-bg) !important; color: var(--info) !important; }
.alert-primary { background: var(--p-pale) !important; border-color: rgba(79,70,229,.2) !important; color: var(--p-dk) !important; }

.alert-dismissible .close { padding: .6rem 1rem !important; color: inherit !important; opacity: .5 !important; }
.alert-dismissible .close:hover { opacity: 1 !important; }

/* Bulk bars */
#escort-bulk-bar, #vacation-bulk-bar {
  background: var(--p-pale) !important;
  border: 1px solid rgba(79,70,229,.2) !important;
  border-radius: var(--r4) !important;
  color: var(--t) !important; padding: 10px 16px !important;
  font-size: var(--fsm) !important; gap: 8px !important;
}

/* ============================================================
   MODALS
   ============================================================ */
.modal-content {
  border: none !important; border-radius: var(--r8) !important;
  box-shadow: var(--sh-xl) !important; overflow: hidden !important;
}
.modal-header {
  background: var(--p) !important; border-bottom: none !important;
  padding: 1rem 1.5rem !important;
}
.modal-header .modal-title { font-weight: 700 !important; font-size: var(--fmd) !important; color: #fff !important; }
.modal-header .close { color: rgba(255,255,255,.7) !important; opacity: 1 !important; font-size: 22px !important; }
.modal-header .close:hover { color: #fff !important; }
.modal-body { padding: 1.5rem !important; }
.modal-footer {
  background: var(--s2) !important; border-top: 1px solid var(--bd) !important;
  padding: .85rem 1.5rem !important; gap: 8px !important;
}
.modal-backdrop { background: rgba(16,24,40,.45) !important; }

/* ============================================================
   FOOTER
   ============================================================ */
.sticky-footer {
  background: var(--surface) !important; border-top: 1px solid var(--bd) !important;
  padding: 1rem 2rem !important;
}
.sticky-footer .copyright { font-size: var(--fsm) !important; color: var(--t4) !important; }

.scroll-to-top {
  background: var(--p) !important; box-shadow: var(--sh-md) !important; border-radius: var(--r4) !important;
}

/* ============================================================
   SEARCH / LIVEWIRE
   ============================================================ */
.search-item {
  border-radius: var(--r3) !important; padding: 8px 12px !important;
  cursor: pointer !important; transition: background .1s !important;
}
.search-item:hover, .search-item.highlight {
  background: var(--p) !important; color: #fff !important;
}

/* ============================================================
   SAVED FILTERS
   ============================================================ */
.saved-filters-bar { font-size: var(--fsm) !important; }
.saved-filter-chip.badge {
  background: var(--surface) !important; color: var(--t2) !important;
  border: 1.5px solid var(--bd) !important; border-radius: var(--r-f) !important;
  font-weight: 600 !important; padding: 5px 12px !important;
  cursor: pointer !important; box-shadow: var(--sh-xs) !important; transition: all .12s !important;
}
.saved-filter-chip.badge:hover {
  background: var(--p-pale) !important; border-color: rgba(79,70,229,.3) !important;
  color: var(--p) !important;
}

/* ============================================================
   COLOR HELPERS
   ============================================================ */
.text-primary { color: var(--p) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
.text-danger  { color: var(--err) !important; }
.text-info    { color: var(--info) !important; }
.text-gray-100 { color: #F9FAFB !important; }
.text-gray-300 { color: #D0D5DD !important; }
.text-gray-400 { color: var(--t4) !important; }
.text-gray-500 { color: var(--t4) !important; }
.text-gray-600 { color: var(--t3) !important; }
.text-gray-800 { color: var(--t) !important; }

.bg-primary { background: var(--p) !important; background-image: none !important; }
.bg-success { background: #059669 !important; }
.bg-warning { background: #D97706 !important; }
.bg-danger  { background: #E11D48 !important; }
.bg-info    { background: #0284C7 !important; }
.bg-gradient-primary { background: var(--g-indigo) !important; }
.bg-white   { background: var(--surface) !important; }

/* Dashboard select */
.custom-select.dashboard {
  background: var(--p) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='white' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat left .75rem center/8px 10px !important;
  color: #fff !important; border: none !important; border-radius: var(--r4) !important;
}

/* SweetAlert2 */
.swal2-popup { font-family: var(--font) !important; border-radius: var(--r8) !important; }
.swal2-title { font-family: var(--font) !important; font-size: 1.35rem !important; color: var(--t) !important; }
.swal2-html-container, .swal2-content { font-family: var(--font) !important; font-size: 0.95rem !important; color: var(--t3) !important; }
.swal2-confirm { border-radius: var(--r4) !important; font-family: var(--font) !important; font-weight: 600 !important; }
.swal2-cancel  { border-radius: var(--r4) !important; font-family: var(--font) !important; font-weight: 600 !important; }
.swal2-actions { gap: 8px !important; }

/* Hide the checkbox input SweetAlert2 always renders in the DOM (shown only when input:'checkbox' is used) */
.swal2-checkbox { display: none !important; }

/* Success icon — use project green */
.swal2-icon.swal2-success { border-color: var(--ok-bg) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--ok-bg) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--ok) !important; }
.swal2-icon.swal2-success::before, .swal2-icon.swal2-success::after { background: transparent !important; }

/* ── Mobile Navbar Search ─────────────────────────────────────── */
.navbar-search { position: relative; }
.navbar-search input.form-control {
  border-radius: var(--r6) !important;
  background: var(--s2) !important;
  border: 1px solid var(--bd) !important;
  font-size: var(--fsm) !important;
  height: 38px !important;
  min-width: 0 !important;
  transition: border-color .18s, box-shadow .18s !important;
}
.navbar-search input.form-control:focus {
  border-color: var(--p) !important;
  box-shadow: 0 0 0 3px var(--p-pale) !important;
  background: var(--surface) !important;
}
@media (max-width: 575.98px) {
  .navbar-search { width: 100% !important; }
  .navbar-search .d-flex { width: 100% !important; }
  .navbar-search input.form-control { width: 100% !important; }
}
.swal2-cancel  { border-radius: var(--r4) !important; font-family: var(--font) !important; }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
body.bg-gradient-primary {
  background: #F4F5FF !important; background-image: none !important; min-height: 100vh !important;
}
.card.o-hidden.border-0.shadow-lg {
  border: none !important; border-radius: var(--r10) !important;
  box-shadow: var(--sh-xl) !important; max-width: 420px !important; width: 100% !important;
}
.card.o-hidden .p-5, .card.o-hidden .p-4 { padding: 2rem 2.25rem !important; }
.card.o-hidden .p-5 h1, .card.o-hidden .p-4 h1 {
  font-size: 22px !important; font-weight: 800 !important; color: var(--t) !important; margin-bottom: .25rem !important;
}

/* ============================================================
   ERROR PAGES
   ============================================================ */
.error-page { text-align: center !important; padding: 4rem 2rem !important; }
.error-page .error-code {
  font-size: 100px !important; font-weight: 900 !important; color: var(--p) !important;
  line-height: 1 !important; letter-spacing: -4px !important;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb { background: transparent !important; padding: 0 !important; font-size: var(--fsm) !important; margin-bottom: .5rem !important; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--t4) !important; }
.breadcrumb-item.active { color: var(--t3) !important; }
.breadcrumb-item a { color: var(--p) !important; }

/* ============================================================
   PROGRESS
   ============================================================ */
.progress { background: var(--s3) !important; border-radius: var(--r-f) !important; height: 8px !important; }
.progress-bar { background: var(--p) !important; border-radius: var(--r-f) !important; }

/* ============================================================
   FILTER BAR  (shared across Escorts, Vacations, etc.)
   ============================================================ */
.vac-filter-bar {
  display: flex !important; flex-wrap: wrap !important; gap: 12px !important;
  align-items: flex-end !important; margin-bottom: 1.25rem !important;
}
.vac-filter-field { display: flex !important; flex-direction: column !important; flex: 1 !important; min-width: 160px !important; }
.vac-filter-action { display: flex !important; flex-direction: column !important; }
.vac-filter-label {
  font-size: 11.5px !important; font-weight: 600 !important; color: var(--t3) !important;
  margin-bottom: 4px !important; white-space: nowrap !important;
}

/* bootstrap-select inside filter bars */
.vac-filter-bar .bootstrap-select { width: 100% !important; }
.vac-filter-bar .bootstrap-select > .dropdown-toggle { width: 100% !important; }
.vac-filter-bar .bootstrap-select .dropdown-menu { width: 100% !important; min-width: 0 !important; }
.vac-filter-bar .bootstrap-select > .dropdown-toggle {
  height: 36px !important; font-size: 13px !important; border-radius: var(--r4) !important;
  border: 1.5px solid var(--bd) !important; box-shadow: none !important; outline: none !important;
  font-family: var(--font) !important; padding: 0 10px !important; line-height: 34px !important;
  background: var(--surface) !important; color: var(--t2) !important;
}
.vac-filter-bar .bootstrap-select > .dropdown-toggle:focus {
  border-color: var(--p) !important; box-shadow: 0 0 0 3px var(--p-glow) !important;
}
.vac-filter-bar .bootstrap-select .dropdown-menu li.selected > a,
.vac-filter-bar .bootstrap-select .dropdown-menu li.selected > a span.text { color: #fff !important; }

.vac-reset-btn {
  height: 36px !important; font-size: 13px !important; border-radius: var(--r4) !important;
  border: 1.5px solid var(--bd) !important; font-family: var(--font) !important;
  padding: 0 12px !important; background: var(--s3) !important; color: var(--t3) !important;
  font-weight: 600 !important; cursor: pointer !important; white-space: nowrap !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
}
.vac-reset-btn:hover { background: var(--bd) !important; color: var(--t2) !important; }

/* ============================================================
   BULK ACTION BAR  (floating bottom)
   ============================================================ */
#bulk-bar {
  position: fixed !important; bottom: 24px !important; left: 50% !important;
  transform: translateX(-50%) !important; z-index: 1050 !important;
  animation: bulkSlideUp .22s ease !important;
}
@keyframes bulkSlideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.bulk-bar-inner {
  display: flex !important; align-items: center !important; gap: 12px !important;
  background: var(--t) !important; color: #fff !important;
  padding: 12px 20px !important; border-radius: var(--r8) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.28) !important; white-space: nowrap !important;
}
.bulk-bar-info { display: flex !important; align-items: center !important; gap: 8px !important; }
.bulk-bar-badge {
  background: var(--p) !important; color: #fff !important; font-size: 12px !important;
  font-weight: 700 !important; min-width: 24px !important; height: 24px !important;
  border-radius: var(--r-f) !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  padding: 0 6px !important;
}
.bulk-bar-label { font-size: 13px !important; font-weight: 500 !important; opacity: .85 !important; }
.bulk-bar-actions { display: flex !important; gap: 8px !important; }
.bulk-btn {
  border: none !important; border-radius: var(--r4) !important; font-size: 12px !important;
  font-weight: 600 !important; font-family: var(--font) !important; cursor: pointer !important;
  padding: 6px 14px !important;
  display: inline-flex !important; align-items: center !important; gap: 6px !important;
  transition: opacity .15s !important;
}
.bulk-btn:hover { opacity: .88 !important; }
.bulk-btn-edit   { background: var(--p) !important; color: #fff !important; }
.bulk-btn-delete { background: #E11D48 !important; color: #fff !important; }
.bulk-btn-cancel { background: rgba(255,255,255,.15) !important; color: #fff !important; }

/* ============================================================
   BULK EDIT DRAWER
   ============================================================ */
#bulk-drawer-overlay {
  display: none !important; position: fixed !important; inset: 0 !important;
  background: rgba(16,24,40,.35) !important; z-index: 1060 !important;
  backdrop-filter: blur(2px) !important;
}
#bulk-drawer-overlay.open { display: block !important; }

#bulk-drawer {
  position: fixed !important; top: 0 !important; right: -420px !important;
  width: 400px !important; max-width: 95vw !important; height: 100vh !important;
  background: var(--surface) !important; z-index: 1070 !important;
  display: flex !important; flex-direction: column !important;
  box-shadow: -8px 0 32px rgba(16,24,40,.12) !important;
  transition: right .28s cubic-bezier(.4,0,.2,1) !important;
  border-left: 1px solid var(--bd) !important;
}
#bulk-drawer.open { right: 0 !important; }

.bulk-drawer-header {
  display: flex !important; align-items: flex-start !important; justify-content: space-between !important;
  padding: 20px 24px !important; border-bottom: 1px solid var(--bd) !important; flex-shrink: 0 !important;
}
.bulk-drawer-title { font-size: 16px !important; font-weight: 700 !important; color: var(--t) !important; margin: 0 0 2px !important; }
.bulk-drawer-sub   { font-size: 12px !important; color: var(--t3) !important; margin: 0 !important; }
.bulk-drawer-close {
  background: var(--s3) !important; border: none !important; width: 32px !important; height: 32px !important;
  border-radius: var(--r4) !important; cursor: pointer !important; color: var(--t3) !important;
  font-size: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important;
  transition: background .15s !important;
}
.bulk-drawer-close:hover { background: var(--bd) !important; color: var(--t) !important; }

.bulk-drawer-body {
  flex: 1 !important; overflow-y: auto !important; padding: 20px 24px !important;
  display: flex !important; flex-direction: column !important; gap: 16px !important;
}
.bulk-field-hint {
  font-size: 11.5px !important; color: var(--t4) !important; background: var(--s2) !important;
  border-radius: var(--r4) !important; padding: 8px 12px !important; margin: 0 !important;
}
.bulk-field-group {
  background: var(--s2) !important; border: 1px solid var(--bd) !important;
  border-radius: var(--r5) !important; padding: 14px !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.bulk-field-group.active {
  border-color: var(--p) !important; box-shadow: 0 0 0 3px var(--p-pale) !important;
  background: var(--surface) !important;
}
.bulk-field-toggle-row { display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 10px !important; }
.bulk-field-name { font-size: 13px !important; font-weight: 600 !important; color: var(--t2) !important; }

/* Toggle switch */
.bulk-toggle-switch { position: relative !important; display: inline-flex !important; cursor: pointer !important; margin: 0 !important; }
.bulk-toggle-switch input { opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; }
.bulk-toggle-track {
  width: 36px !important; height: 20px !important; background: var(--bd) !important;
  border-radius: 10px !important; transition: background .2s !important;
  position: relative !important; display: block !important;
}
.bulk-toggle-track::after {
  content: '' !important; position: absolute !important; top: 2px !important; right: 2px !important;
  width: 16px !important; height: 16px !important; background: #fff !important;
  border-radius: 50% !important; transition: transform .2s !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.2) !important;
}
.bulk-toggle-switch input:checked + .bulk-toggle-track { background: var(--p) !important; }
.bulk-toggle-switch input:checked + .bulk-toggle-track::after { transform: translateX(-16px) !important; }

.bulk-field-input {
  width: 100% !important; padding: 8px 10px !important; font-size: 13px !important;
  font-family: var(--font) !important; border: 1.5px solid var(--bd) !important;
  border-radius: var(--r4) !important; background: var(--surface) !important;
  color: var(--t2) !important; outline: none !important;
  transition: border-color .18s, box-shadow .18s !important; resize: vertical !important;
}
.bulk-field-input:disabled { background: var(--s3) !important; color: var(--t4) !important; cursor: not-allowed !important; }
.bulk-field-input:focus { border-color: var(--p) !important; box-shadow: 0 0 0 3px var(--p-pale) !important; }

.bulk-drawer-footer {
  padding: 16px 24px !important; border-top: 1px solid var(--bd) !important;
  display: flex !important; gap: 10px !important; flex-shrink: 0 !important;
}
.bulk-drawer-footer .btn { flex: 1 !important;justify-content: center; font-family: var(--font) !important; font-size: 13px !important; }

/* DataTable checkbox column */
.row-escort-checkbox, .row-checkbox, #select-all-escorts, #select-all-vacations {
  width: 16px !important; height: 16px !important; cursor: pointer !important; accent-color: var(--p) !important;
}

/* ── DataTables collection button — RTL arrow fix ───────── */
.dt-collection-rtl.dropdown-toggle {
  padding-right: 12px !important;
  padding-left: 28px !important;
  position: relative !important;
}
.dt-collection-rtl.dropdown-toggle::after {
  position: absolute !important;
  left: 10px !important;
  right: auto !important;
  top: 50% !important;
  transform: translateY(-40%) !important;
  margin: 0 !important;
}
/* Collection dropdown — icon + text alignment */
.dt-button-collection .dt-button {
  display: flex !important;
  align-items: center !important;
  text-align: right !important;
  font-family: var(--font) !important;
  font-size: 13px !important;
  padding: 8px 16px !important;
}
.dt-button-collection .dt-button:hover {
  background: var(--p-pale) !important;
  color: var(--p) !important;
}
/* Separator pseudo-button */
.dt-button-collection .dt-separator { padding: 0 !important; pointer-events: none !important; background: transparent !important; cursor: default !important; }
.dt-button-collection .dt-separator:hover { background: transparent !important; }

/* ── Import modal dropzone ──────────────────────────────── */
#import-dropzone {
  border: 2px dashed var(--bd) !important;
  border-radius: var(--r5) !important;
  padding: 28px 16px !important;
  text-align: center !important;
  cursor: pointer !important;
  transition: border-color .18s, background .18s !important;
  background: var(--s2) !important;
}
#import-dropzone:hover, #import-dropzone.dz-hover {
  border-color: var(--p) !important;
  background: var(--p-pale) !important;
}

/* ============================================================
   ESCORT PORTAL BANNERS
   ============================================================ */
#offline-banner {
  background: var(--warn-lt) !important; border: 1px solid var(--warn-bg) !important;
  border-radius: var(--r5) !important; color: var(--warn) !important; font-size: var(--fsm) !important; font-weight: 600 !important;
}
#sync-banner {
  background: var(--info-lt) !important; border: 1px solid var(--info-bg) !important;
  border-radius: var(--r5) !important; color: var(--info) !important; font-size: var(--fsm) !important; font-weight: 600 !important;
}

/* ============================================================
   RTL SPECIFICS
   ============================================================ */
[dir="rtl"] .dropdown-menu-right { right: 0 !important; left: auto !important; }
.dropdown-toggle::after { margin-right: .3em !important; margin-left: 0 !important; }
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow { left: 3px !important; right: inherit !important; }

.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
  border-left: 1px solid rgba(0,0,0,.1) !important;
  border-radius: 0 var(--r4) var(--r4) 0 !important;
}
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
  border-radius: var(--r4) 0 0 var(--r4) !important;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .sidebar {
    position: fixed !important;
    z-index: 1000 !important;
    transform: translateX(100%) !important;
    transition: transform .25s cubic-bezier(.4,0,.2,1) !important;
    box-shadow: var(--sh-xl) !important;
  }
  .sidebar.toggled { transform: translateX(0) !important; display: flex !important; }
  body.sidebar-toggled .sidebar { transform: translateX(0) !important; }
  #content-wrapper { margin-right: 0 !important; }
  .container-fluid { padding: 1rem !important; }
  .topbar { padding: 0 1rem !important; }
}

body.sidebar-toggled .sidebar:not(.toggled) { width: 0 !important; overflow: hidden !important; }
body.sidebar-toggled .sidebar:not(.toggled) .nav-link span,
body.sidebar-toggled .sidebar:not(.toggled) .sidebar-brand-text,
body.sidebar-toggled .sidebar:not(.toggled) .sidebar-heading,
body.sidebar-toggled .sidebar:not(.toggled) .sidebar-divider { display: none !important; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .sidebar,.topbar,.sticky-footer,.scroll-to-top,.d-print-none { display: none !important; }
  #content-wrapper { margin-right: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

/* ============================================================
   ANIMATIONS — staggered entrance
   ============================================================ */
@keyframes fadeUp {
  from { opacity: 0 !important; transform: translateY(10px) !important; }
  to   { opacity: 1 !important; transform: translateY(0) !important; }
}

.row > [class*="col-"] > .card {
  animation: fadeUp .32s ease both !important;
}
.row > [class*="col-"]:nth-child(1) > .card { animation-delay: .04s !important; }
.row > [class*="col-"]:nth-child(2) > .card { animation-delay: .08s !important; }
.row > [class*="col-"]:nth-child(3) > .card { animation-delay: .12s !important; }
.row > [class*="col-"]:nth-child(4) > .card { animation-delay: .16s !important; }
.row > [class*="col-"]:nth-child(5) > .card { animation-delay: .20s !important; }
.row > [class*="col-"]:nth-child(6) > .card { animation-delay: .24s !important; }

/* ── Mobile sidebar overlay ── */
#sidebarBackdrop {
    display: none;
}

@media (max-width: 767.98px) {
    /* Hidden by default — slides in from right (RTL) only when body.sidebar-open */
    .sidebar {
        position: fixed !important;
        top: 0;
        right: 0;
        width: 14rem !important;
        height: 100vh !important;
        z-index: 1055 !important;
        overflow-y: auto !important;
        overflow-x: hidden;
        transform: translateX(100%);
        transition: transform 0.25s ease !important;
    }
    body.sidebar-open .sidebar {
        transform: translateX(0) !important;
    }
    /* Override app.css width:0 on .toggled — we use transform instead */
    .sidebar.toggled {
        width: 14rem !important;
    }
    #content-wrapper {
        width: 100% !important;
        margin: 0 !important;
    }
    /* Backdrop: always block on mobile, visibility controlled by opacity */
    #sidebarBackdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1050;
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }
    #sidebarBackdrop.active {
        opacity: 1;
        pointer-events: auto;
    }
}


.swal2-icon.swal2-success [class^=swal2-success-line][class$=tip] {
    left: 0.3125em !important;
}

.dataTables_processing  {
    z-index: 99;
}

ul.dtr-details {
    width: 100%;
}

/* ============================================================
   DARK MODE
   ============================================================ */
[data-theme="dark"] {
  --bg:       #0F172A !important;
  --surface:  #1E293B !important;
  --s2:       #1E293B !important;
  --s3:       #273548 !important;
  --t:        #F1F5F9 !important;
  --t2:       #CBD5E1 !important;
  --t3:       #94A3B8 !important;
  --t4:       #64748B !important;
  --bd:       #334155 !important;
  --bd2:      #1E293B !important;
  --sb-bg:    #1E293B !important;
  --sb-border:#334155 !important;
  --sb-txt:   #94A3B8 !important;
  --sb-label: #64748B !important;
  --p:        #818CF8 !important;   /* indigo-400 — lighter for dark bg */
  --p-dk:     #6366F1 !important;   /* indigo-500 */
  --p-lt:     #A5B4FC !important;   /* indigo-300 */
  --p-pale:   rgba(129,140,248,.15) !important;
  --p-bg:     rgba(129,140,248,.1) !important;
  --ok-bg:    rgba(16,185,129,.15) !important;
  --ok-lt:    rgba(16,185,129,.08) !important;
  --warn-bg:  rgba(245,158,11,.15) !important;
  --warn-lt:  rgba(245,158,11,.08) !important;
  --err-bg:   rgba(239,68,68,.15) !important;
  --err-lt:   rgba(239,68,68,.08) !important;
  --info-bg:  rgba(59,130,246,.15) !important;
  --info-lt:  rgba(59,130,246,.08) !important;
}

[data-theme="dark"] body { background: var(--bg) !important; color: var(--t) !important; }

/* Topbar */
[data-theme="dark"] .topbar { background: var(--surface) !important; border-bottom: 1px solid var(--bd) !important; box-shadow: none !important; }
[data-theme="dark"] .topbar .nav-link { color: var(--t3) !important; }
[data-theme="dark"] .topbar-chip { background: var(--s3) !important; color: var(--t2) !important; border-color: var(--bd) !important; }

/* Sidebar */
[data-theme="dark"] .sidebar { background: var(--sb-bg) !important; border-color: var(--sb-border) !important; }
[data-theme="dark"] .sidebar .nav-link { color: var(--sb-txt) !important; }
[data-theme="dark"] .sidebar .nav-item.active .nav-link { background: var(--p) !important; color: #fff !important; }
[data-theme="dark"] .sidebar-brand { border-color: var(--bd) !important; }
[data-theme="dark"] .sidebar-divider { border-color: var(--bd) !important; }
[data-theme="dark"] .sidebar-heading { color: var(--sb-label) !important; }

/* Cards & surfaces */
[data-theme="dark"] .card { background: var(--surface) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .card-header { background: var(--s2) !important; border-color: var(--bd) !important; color: var(--t) !important; }
[data-theme="dark"] .stat-card { background: unset !important; }

/* Footer */
[data-theme="dark"] .sticky-footer { background: var(--surface) !important; border-top: 1px solid var(--bd) !important; }
[data-theme="dark"] .sticky-footer span, [data-theme="dark"] .sticky-footer small { color: var(--t3) !important; }

/* Tables */
[data-theme="dark"] table.dataTable { background: var(--surface) !important; color: var(--t) !important; border-color: var(--bd) !important; }

/* thead row — override the hardcoded #f4f6fafa background */
[data-theme="dark"] .table thead tr,
[data-theme="dark"] table.dataTable thead tr { background: var(--s3) !important; box-shadow: 0 2px 0 var(--p) !important; }

[data-theme="dark"] .table thead th,
[data-theme="dark"] table.dataTable thead th { background: transparent !important; color: var(--p) !important; border-color: var(--bd) !important; }

/* sorting hover/active in dark */
[data-theme="dark"] table.dataTable thead th.sorting:hover,
[data-theme="dark"] table.dataTable thead th.sorting_asc:hover,
[data-theme="dark"] table.dataTable thead th.sorting_desc:hover { background: rgba(99,102,241,.15) !important; }
[data-theme="dark"] table.dataTable thead th.sorting_asc,
[data-theme="dark"] table.dataTable thead th.sorting_desc { background: rgba(99,102,241,.2) !important; box-shadow: inset 0 -3px 0 var(--p) !important; }

[data-theme="dark"] table.dataTable tbody td { border-color: var(--bd) !important; color: var(--t2) !important; }
[data-theme="dark"] table.dataTable tbody tr:hover td { background: rgba(99,102,241,.07) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-theme="dark"] .dataTables_wrapper .dataTables_filter,
[data-theme="dark"] .dataTables_wrapper .dataTables_info,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate { color: var(--t3) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_filter input { background: var(--s3) !important; border-color: var(--bd) !important; color: var(--t) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--t3) !important; background: transparent !important; border-color: transparent !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--s3) !important; border-color: var(--bd) !important; color: var(--t) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current,
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--p) !important; color: #fff !important; border-color: var(--p) !important; }
[data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--s3) !important; border-color: var(--bd) !important; color: var(--t) !important; }

/* Forms */
[data-theme="dark"] .form-control { background: var(--s3) !important; border-color: var(--bd) !important; color: var(--t) !important; }
[data-theme="dark"] .form-control:focus { background: var(--s3) !important; border-color: var(--p) !important; color: var(--t) !important; }
[data-theme="dark"] .form-control::placeholder { color: var(--t4) !important; }
[data-theme="dark"] .input-group-text { background: var(--s3) !important; border-color: var(--bd) !important; color: var(--t3) !important; }

/* Date / time inputs — color-scheme tells the browser to render the native picker dark */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"] {
    background: var(--s3) !important;
    border-color: var(--bd) !important;
    color: var(--t) !important;
    color-scheme: dark !important;
}
[data-theme="dark"] input[type="date"]:focus,
[data-theme="dark"] input[type="time"]:focus,
[data-theme="dark"] input[type="datetime-local"]:focus {
    border-color: var(--p) !important;
    color-scheme: dark !important;
}
/* vac-input used in filter bar */
[data-theme="dark"] .vac-input { background: var(--s3) !important; border-color: var(--bd) !important; color: var(--t) !important; color-scheme: dark !important; }
[data-theme="dark"] select.form-control option { background: var(--surface) !important; }
[data-theme="dark"] .bootstrap-select .dropdown-toggle { background: var(--s3) !important; border-color: var(--bd) !important; color: var(--t) !important; }
[data-theme="dark"] .bootstrap-select .dropdown-menu { background: var(--surface) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .bootstrap-select .dropdown-item { color: var(--t2) !important; }
[data-theme="dark"] .bootstrap-select .dropdown-item:hover { background: var(--s3) !important; }

/* Dropdowns */
[data-theme="dark"] .dropdown-menu { background: var(--surface) !important; border-color: var(--bd) !important; box-shadow: 0 8px 32px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .dropdown-item { color: var(--t2) !important; }
[data-theme="dark"] .dropdown-item:hover { background: var(--s3) !important; color: var(--t) !important; }
[data-theme="dark"] .dropdown-divider { border-color: var(--bd) !important; }
[data-theme="dark"] .dropdown-header { color: var(--t3) !important; background: var(--s2) !important; }

/* Modals */
[data-theme="dark"] .modal-content { background: var(--surface) !important; border-color: var(--bd) !important; color: var(--t) !important; }
[data-theme="dark"] .modal-header { border-color: var(--bd) !important; }
[data-theme="dark"] .modal-footer { border-color: var(--bd) !important; background: var(--s2) !important; }

/* Alerts */
[data-theme="dark"] .alert { border-color: transparent !important; }

/* Badges & misc text */
[data-theme="dark"] .text-gray-800 { color: var(--t) !important; }
[data-theme="dark"] .text-gray-600 { color: var(--t2) !important; }
[data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-black-50 { color: var(--t3) !important; }
[data-theme="dark"] .border-bottom, [data-theme="dark"] .border-top { border-color: var(--bd) !important; }
[data-theme="dark"] .bg-white { background: var(--surface) !important; }
[data-theme="dark"] .bg-light { background: var(--s3) !important; }
[data-theme="dark"] hr { border-color: var(--bd) !important; }

/* Filter bar */
[data-theme="dark"] .vac-filter-bar { background: var(--surface) !important; border-color: var(--bd) !important; }

/* Drawer */
[data-theme="dark"] .bulk-drawer { background: var(--surface) !important; border-color: var(--bd) !important; }
[data-theme="dark"] .bulk-drawer-overlay { background: rgba(0,0,0,.5) !important; }

/* Substitute suggestions panel */
.suggestions-panel {
    background: var(--p-pale) !important;
    border: 1px solid var(--p-lt) !important;
    border-radius: var(--r4) !important;
    padding: 10px 14px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}
.suggestions-label {
    font-size: var(--fsm) !important;
    font-weight: 600 !important;
    color: var(--p) !important;
    white-space: nowrap !important;
    margin-top: 4px !important;
}
.suggestions-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}
.suggestion-chip {
    background: var(--surface) !important;
    border: 1px solid var(--p) !important;
    color: var(--p) !important;
    border-radius: var(--r-f) !important;
    padding: 4px 12px !important;
    font-size: var(--fsm) !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .15s !important;
    font-family: var(--font) !important;
}
.suggestion-chip:hover { background: var(--p) !important; color: #fff !important; }
.suggestion-chip.active { background: var(--p) !important; color: #fff !important; box-shadow: 0 0 0 3px var(--p-glow) !important; }

/* Recurring absence flag badge */
.recurring-flag {
    cursor: help !important;
    animation: pulse-warn 2s infinite !important;
}
@keyframes pulse-warn {
    0%, 100% { opacity: 1; }
    50%       { opacity: .6; }
}

/* Dark mode toggle button */
.dark-mode-btn {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 8px !important;
  color: var(--t3) !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  transition: color .2s !important;
}
.dark-mode-btn:hover { color: var(--p) !important; }
.dark-mode-btn .icon-sun  { display: none; }
.dark-mode-btn .icon-moon { display: inline; }
[data-theme="dark"] .dark-mode-btn .icon-sun  { display: inline; }
[data-theme="dark"] .dark-mode-btn .icon-moon { display: none; }

/* SweetAlert dark */
[data-theme="dark"] .swal2-popup { background: var(--surface) !important; color: var(--t) !important; }
[data-theme="dark"] .swal2-title { color: var(--t) !important; }
[data-theme="dark"] .swal2-html-container { color: var(--t2) !important; }

.dataTable>tbody>tr.child span.dtr-title {
    min-width: 95px  !important;
}
button:focus {
    outline: transparent !important;
}