/**
 * Standardized RSA Modal Contextual Components (rsa-modal.css)
 * 
 * Rules for nested components (Cards, Tables, Lists, Inputs, Button Groups)
 * placed inside .modal, .bottom-sheet-modal, and .offcanvas.
 * Guarantees proper contrast and surface elevation over Paper background (--bs-paper-bg)
 * in both Light Mode and Dark Mode automatically without needing custom per-modal classes.
 */

/* ==========================================================================
   0. Modal Sheet Base Canvas & Global Background Scroll Lock
   ========================================================================== */
html.modal-open,
body.modal-open,
html.offcanvas-open,
body.offcanvas-open,
html:has(.modal.show),
body:has(.modal.show),
html:has(.offcanvas.show),
body:has(.offcanvas.show) {
  overscroll-behavior: none !important;
  touch-action: none !important;
}

/* Ensure modal contents and scrollable containers can always be scrolled via mouse wheel, trackpad, and touch */
.modal,
.modal-dialog,
.modal-content,
.modal-body,
.modal-dialog-scrollable .modal-body,
.modal [style*="overflow"],
.modal [class*="overflow"] {
  touch-action: pan-y !important;
}

/* Universal: Keep overflow visible so position: sticky on #layout-navbar & sticky cards (e.g. classes/detail info card) NEVER collapses when modal/offcanvas opens! */
html.modal-open,
body.modal-open,
html.offcanvas-open,
body.offcanvas-open,
html:has(.modal.show),
body:has(.modal.show),
html:has(.offcanvas.show),
body:has(.offcanvas.show) {
  overflow: visible !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Mobile layout stability: Prevent navbar and hero banner horizontal shifts or reflow when modal is open */
@media (max-width: 1199.98px) {
  body.modal-open #layout-navbar,
  body.modal-open .layout-navbar,
  body:has(.modal.show) #layout-navbar,
  body:has(.modal.show) .layout-navbar {
    inset-inline-start: 0 !important;
    inline-size: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

.has-dashboard-hero .dashboard-banner-row #banner {
  transform: translateZ(0);
}

/* ==========================================================================
   0.1 Mobile-Only Modals Desktop Isolation & Orphan Backdrop Prevention
   When user resizes screen from mobile to desktop (>= 768px), prevent mobile-only
   modals (.d-md-none, #mobileMenuModal) from trapping the desktop with a dark backdrop.
   ========================================================================== */
@media (min-width: 768px) {
  .modal.d-md-none,
  #mobileMenuModal {
    display: none !important;
  }
}

/* Zero-delay non-blocking modals & backdrops during dismiss/transition */
.modal:not(.show),
.modal-backdrop:not(.show),
.modal.collapsing,
.modal.is-hiding:not(.show),
.modal-backdrop.fade:not(.show),
.modal-backdrop.is-hiding:not(.show) {
  pointer-events: none !important;
}

/* Universal Modal Stacking Hierarchy & Interaction Guarantee */
.modal {
  z-index: 1090 !important;
}

.modal.show {
  pointer-events: auto !important;
}

.modal.show .modal-dialog,
.modal .modal-dialog,
.modal-dialog {
  position: relative;
  z-index: 1091 !important;
  pointer-events: none !important;
}

.modal.show .modal-content,
.modal .modal-content,
.modal-content {
  position: relative;
  z-index: 1092 !important;
  pointer-events: auto !important;
}

.modal.show .modal-header,
.modal.show .modal-body,
.modal.show .modal-footer,
.modal.show .modal-content,
.modal.show .modal-content * {
  pointer-events: auto !important;
}

.modal.show .modal-header .btn-close,
.modal.show .btn-close,
.modal .modal-header .btn-close,
.modal .btn-close {
  pointer-events: auto !important;
  z-index: 1095 !important;
}

.modal.show .modal-content button:disabled,
.modal.show .modal-content input:disabled,
.modal.show .modal-content select:disabled,
.modal.show .modal-content [disabled] {
  pointer-events: auto !important;
  cursor: not-allowed;
}

.modal .dropdown-menu {
  z-index: 1095 !important;
}

/* ==========================================================================
   0.2 Universal Centralized Smooth Modal Micro-Transitions (Zero-Delay)
   Eliminates sequential delay between backdrop and modal dialog.
   Calibrated 0.22s (desktop) & 0.25s (mobile) with silky cubic-bezier deceleration
   matching modern macOS/iOS sheet dynamics without frame-drops ("patah").
   ========================================================================== */

/* Universal Backdrop: Smooth concurrent fade (220ms) using Canonical Tokens */
.modal-backdrop,
.offcanvas-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1089 !important;
  background-color: var(--bs-backdrop-color, rgba(0, 0, 0, var(--bs-backdrop-opacity, 0.45))) !important;
  backdrop-filter: blur(var(--bs-backdrop-blur, 4px)) !important;
  -webkit-backdrop-filter: blur(var(--bs-backdrop-blur, 4px)) !important;
  transform: translate3d(0, 0, 0) !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  opacity: 0;
  transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity;
}

.modal-backdrop.show,
.offcanvas-backdrop.show {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal-backdrop.is-hiding:not(.show),
.offcanvas-backdrop.is-hiding:not(.show) {
  opacity: 0 !important;
  transition: opacity 0.16s ease-out !important;
  pointer-events: none !important;
}

[data-bs-theme="dark"] .modal-backdrop,
[data-bs-theme="dark"] .offcanvas-backdrop {
  background-color: var(--bs-backdrop-color, rgba(0, 0, 0, var(--bs-backdrop-opacity, 0.55))) !important;
  backdrop-filter: blur(var(--bs-backdrop-blur, 4px)) !important;
  -webkit-backdrop-filter: blur(var(--bs-backdrop-blur, 4px)) !important;
}

[data-bs-theme="dark"] .modal-backdrop.show,
[data-bs-theme="dark"] .offcanvas-backdrop.show {
  opacity: 1 !important;
}

/* Guarantee modal select placeholder never duplicates with empty .item */
.modal .ts-control .item.placeholder,
.modal .ts-control .item[data-value=""],
.modal .ts-control .item[data-value="-"],
.modal .ts-control:has(.items-placeholder) .item[data-value=""],
.modal .ts-control:has(.items-placeholder) .placeholder,
.bottom-sheet-modal .ts-control .item.placeholder,
.bottom-sheet-modal .ts-control .item[data-value=""],
.bottom-sheet-modal .ts-control .item[data-value="-"] {
  display: none !important;
}

/* Desktop Modals: Elegant, fluid center pop (scale 0.95 -> 1 in 220ms) */
@media (min-width: 768px) {
  .modal.fade .modal-dialog,
  .modal.fade:not(.bottom-sheet-modal):not([class*="bottom-sheet"]) .modal-dialog {
    opacity: 0 !important;
    transform: scale(0.95) translate3d(0, 0, 0) !important;
    -webkit-transform: scale(0.95) translate3d(0, 0, 0) !important;
    transform-origin: center center !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.20s ease-out !important;
    will-change: transform, opacity;
  }

  .modal.show .modal-dialog,
  .modal.show:not(.bottom-sheet-modal):not([class*="bottom-sheet"]) .modal-dialog {
    opacity: 1 !important;
    transform: scale(1) translate3d(0, 0, 0) !important;
    -webkit-transform: scale(1) translate3d(0, 0, 0) !important;
  }

  .modal.is-hiding .modal-dialog,
  .modal:not(.show) .modal-dialog {
    transition: transform 0.16s ease-in, opacity 0.14s ease-in !important;
  }
}

/* Mobile Modals (Bottom Sheets & Dialogs): Silky-smooth responsive slide-up (250ms) */
@media (max-width: 767.98px) {
  .modal.fade .modal-dialog,
  .bottom-sheet-modal.modal.fade .modal-dialog {
    transform: translateY(100%) !important;
    -webkit-transform: translateY(100%) !important;
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform;
  }

  .modal.show:not(.is-dragging) .modal-dialog,
  .bottom-sheet-modal.modal.show:not(.is-dragging) .modal-dialog {
    transform: translateY(0) !important;
    -webkit-transform: translateY(0) !important;
  }

  .modal.is-hiding .modal-dialog,
  .modal:not(.show) .modal-dialog {
    transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1) !important;
  }
}

/* Anti-flicker hardware acceleration and stable viewport composition */
.modal,
.modal-dialog,
.modal-content,
.modal-backdrop {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform-style: flat;
}

.modal .modal-content,
.modal-content,
.bottom-sheet-modal .modal-content {
  background-color: var(--bs-modal-bg, var(--bs-body-bg, #f6f6f6)) !important;
  --bs-modal-bg: var(--bs-modal-bg, #f6f6f6) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

[data-bs-theme="dark"] .modal .modal-content,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-content {
  background-color: var(--bs-paper-bg, #1e1e1e) !important;
  --bs-modal-bg: var(--bs-paper-bg, #1e1e1e) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* ==========================================================================
   1. Nested Cards in Modals (.modal .card, .bottom-sheet-modal .card)
   ========================================================================== */

/* Light Mode: Clean White Surface with subtle border for visual grouping */
.modal .card,
.modal .card.border,
.modal .modal-body .card,
.bottom-sheet-modal .card,
.bottom-sheet-modal .card.border,
.offcanvas .card,
.offcanvas .card.border {
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  border: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
  border-width: 1px !important;
  outline: none !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}


.modal .card .card-header,
.modal .card .card-body,
.modal .card .card-footer,
.bottom-sheet-modal .card .card-header,
.bottom-sheet-modal .card .card-body,
.bottom-sheet-modal .card .card-footer {
  background-color: transparent !important;
}

/* Dark Mode: SOLID Surface matching elevated token (Using --bs-surface-elevated, frameless, 1rem radius) */
[data-bs-theme="dark"] .modal .card,
[data-bs-theme="dark"] .modal .card.border,
[data-bs-theme="dark"] .modal .modal-body .card,
[data-bs-theme="dark"] #userDetailModal .card,
[data-bs-theme="dark"] .bottom-sheet-modal .card,
[data-bs-theme="dark"] .bottom-sheet-modal .card.border,
[data-bs-theme="dark"] .offcanvas .card,
[data-bs-theme="dark"] .offcanvas .card.border {
  --bs-card-bg: var(--bs-modal-card-bg, var(--bs-surface-elevated)) !important;
  background-color: var(--bs-modal-card-bg, var(--bs-surface-elevated)) !important;
  border: none !important;
  border-width: 0 !important;
  outline: none !important;
  border-radius: 1rem !important;
  box-shadow: none !important;
  overflow: hidden;
}

/* Modal Inner Data Key-Value Row Dividers */
.modal .card .border-bottom,
.modal .card [class*="border-bottom"],
.bottom-sheet-modal .card .border-bottom {
  border-bottom: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
  border-color: var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
}

[data-bs-theme="dark"] .modal .card .border-bottom,
[data-bs-theme="dark"] .modal .card [class*="border-bottom"],
[data-bs-theme="dark"] #userDetailModal .card .border-bottom,
[data-bs-theme="dark"] .bottom-sheet-modal .card .border-bottom {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Ensure only the actual last row item inside modal card never has a dangling bottom border */
.modal .card .d-flex.flex-column>*:last-child,
.modal .card .list-group>*:last-child,
.modal .card .list-group-item:last-child {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
}

/* Modal Close Button: Soft Circular Canvas Button matching modal canvas with tactile scale feedback */
.modal .btn-close,
.modal-header .btn-close,
.modal .modal-header .btn-close,
.bottom-sheet-modal .modal-header .btn-close,
.offcanvas-header .btn-close,
.offcanvas .btn-close,
.btn-close {
  background-color: var(--bs-modal-btn-close-bg, #e5e5e5) !important;
  color: var(--bs-btn-circle-color, #2c2c2c) !important;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, color 0.2s ease !important;
}

.modal .btn-close:hover,
.modal-header .btn-close:hover,
.modal .modal-header .btn-close:hover,
.bottom-sheet-modal .modal-header .btn-close:hover,
.offcanvas-header .btn-close:hover,
.offcanvas .btn-close:hover {
  background-color: var(--bs-modal-btn-close-hover-bg, #d9d9d9) !important;
  color: var(--bs-btn-circle-hover-color, #000000) !important;
  transform: translateY(-50%) !important;
}

.modal .btn-close:active,
.modal .btn-close:hover:active,
.modal-header .btn-close:active,
.modal-header .btn-close:hover:active,
.modal .modal-header .btn-close:active,
.modal .modal-header .btn-close:hover:active,
.bottom-sheet-modal .modal-header .btn-close:active,
.bottom-sheet-modal .modal-header .btn-close:hover:active,
.offcanvas-header .btn-close:active,
.offcanvas-header .btn-close:hover:active,
.offcanvas .btn-close:active,
.offcanvas .btn-close:hover:active,
.btn-close:active,
.btn-close:hover:active {
  transform: translateY(-50%) scale(0.90) !important;
  -webkit-transform: translateY(-50%) scale(0.90) !important;
  transition: transform 0.08s ease !important;
  background-color: var(--bs-modal-btn-close-hover-bg, #d9d9d9) !important;
}

[data-bs-theme="dark"] .modal .btn-close,
[data-bs-theme="dark"] .modal-header .btn-close,
[data-bs-theme="dark"] .modal .modal-header .btn-close,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-header .btn-close,
[data-bs-theme="dark"] .offcanvas-header .btn-close,
[data-bs-theme="dark"] .offcanvas .btn-close {
  background-color: var(--bs-modal-btn-close-bg, var(--bs-surface-elevated)) !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .modal .btn-close:hover,
[data-bs-theme="dark"] .modal-header .btn-close:hover,
[data-bs-theme="dark"] .modal .modal-header .btn-close:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-header .btn-close:hover,
[data-bs-theme="dark"] .offcanvas-header .btn-close:hover,
[data-bs-theme="dark"] .offcanvas .btn-close:hover {
  background-color: var(--bs-modal-btn-close-hover-bg, #353535) !important;
  color: #ffffff !important;
  transform: translateY(-50%) !important;
}

[data-bs-theme="dark"] .modal .btn-close:active,
[data-bs-theme="dark"] .modal .btn-close:hover:active,
[data-bs-theme="dark"] .modal-header .btn-close:active,
[data-bs-theme="dark"] .modal-header .btn-close:hover:active,
[data-bs-theme="dark"] .modal .modal-header .btn-close:active,
[data-bs-theme="dark"] .modal .modal-header .btn-close:hover:active,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-header .btn-close:active,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-header .btn-close:hover:active,
[data-bs-theme="dark"] .offcanvas-header .btn-close:active,
[data-bs-theme="dark"] .offcanvas-header .btn-close:hover:active,
[data-bs-theme="dark"] .offcanvas .btn-close:active,
[data-bs-theme="dark"] .offcanvas .btn-close:hover:active,
[data-bs-theme="dark"] .btn-close:active,
[data-bs-theme="dark"] .btn-close:hover:active {
  background-color: var(--bs-modal-btn-close-hover-bg, #3a3a3a) !important;
  transform: translateY(-50%) scale(0.90) !important;
  -webkit-transform: translateY(-50%) scale(0.90) !important;
  transition: transform 0.08s ease !important;
}

/* Modal Drag Indicator / Grabber Pill (Mobile Bottom-Sheet line above title) */
@media (max-width: 767.98px) {
  .modal-content::before,
  .modal:not(.modal-fullscreen) .modal-content::before {
    content: "" !important;
    display: block !important;
    width: var(--bs-modal-drag-indicator-width) !important;
    height: var(--bs-modal-drag-indicator-height) !important;
    border-radius: var(--bs-modal-drag-indicator-border-radius) !important;
    background-color: var(--bs-modal-drag-indicator-bg) !important;
  }
}

@media (min-width: 768px) {
  .modal-content::before,
  .bottom-sheet-modal .modal-content::before,
  .modal:not(.modal-fullscreen) .modal-content::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
  }
}

/* ==========================================================================
   2. Tables in Modals (.modal .table, .modal .table-responsive)
   ========================================================================== */

.modal .table-responsive:not(.modal-table-container):not([class*="border"]),
.bottom-sheet-modal .table-responsive:not(.modal-table-container):not([class*="border"]),
.offcanvas .table-responsive:not(.modal-table-container):not([class*="border"]) {
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  overflow-x: auto;
  margin-bottom: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

.modal .modal-table-container,
.bottom-sheet-modal .modal-table-container,
.offcanvas .modal-table-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 0 !important;
  max-height: clamp(280px, 55vh, 460px);
  border-radius: var(--bs-card-border-radius, 1.25rem) !important;
  border: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
}

/* Dark Mode: Global subtle border box and rounded container for ALL modal tables across all pages */
[data-bs-theme="dark"] .modal .modal-table-container,
[data-bs-theme="dark"] .modal .table-responsive:not(.card .table-responsive):not(.card-body .table-responsive),
[data-bs-theme="dark"] .modal [class*="modal-table"],
[data-bs-theme="dark"] .modal-table-container,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-table-container,
[data-bs-theme="dark"] .bottom-sheet-modal .table-responsive,
[data-bs-theme="dark"] .offcanvas .modal-table-container,
[data-bs-theme="dark"] .offcanvas .table-responsive,
.dark-style .modal .modal-table-container,
.dark-style .modal .table-responsive:not(.card .table-responsive):not(.card-body .table-responsive),
.dark-style .modal-table-container {
  border: 1px solid var(--bs-modal-table-border, rgba(255, 255, 255, 0.12)) !important;
  border-radius: var(--bs-modal-table-border-radius, var(--bs-border-radius-lg, 0.75rem)) !important;
  background-color: var(--bs-modal-table-bg, transparent) !important;
  max-height: clamp(280px, 55vh, 460px);
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.modal table.table,
.modal .card table.table,
.bottom-sheet-modal table.table,
.offcanvas table.table {
  margin-bottom: 0;
  font-size: 0.85rem;
  --bs-table-bg: var(--bs-modal-card-bg, #ffffff);
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  table-layout: fixed;
}

.modal table.table th,
.modal table.table td,
.bottom-sheet-modal table.table th,
.bottom-sheet-modal table.table td,
.offcanvas table.table th,
.offcanvas table.table td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
}

.modal table.table thead th,
.modal table.table-sticky-header thead th,
.modal thead.sticky-top th,
.bottom-sheet-modal table.table thead th,
.offcanvas table.table thead th {
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  --bs-table-bg: var(--bs-modal-card-bg, #ffffff) !important;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--bs-secondary-color, #707070);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.07) !important;
  z-index: 5 !important;
}

/* Dark Mode: Table and Sticky Header match modal card color - Completely Borderless */
[data-bs-theme="dark"] .modal table.table,
[data-bs-theme="dark"] .modal .card table.table,
[data-bs-theme="dark"] .bottom-sheet-modal table.table,
[data-bs-theme="dark"] .offcanvas table.table {
  --bs-table-bg: var(--bs-modal-table-bg, transparent) !important;
  background-color: var(--bs-modal-table-bg, transparent) !important;
  border: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal table.table thead th,
[data-bs-theme="dark"] .modal table.table-sticky-header thead th,
[data-bs-theme="dark"] .modal thead.sticky-top th,
[data-bs-theme="dark"] .bottom-sheet-modal table.table thead th,
[data-bs-theme="dark"] .offcanvas table.table thead th {
  background-color: var(--bs-modal-bg, var(--bs-card-bg, #1e1e1e)) !important;
  --bs-table-bg: var(--bs-modal-bg, var(--bs-card-bg, #1e1e1e)) !important;
  color: rgba(255, 255, 255, 0.75) !important;
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  z-index: 5 !important;
}

/* Modal Table Rows - Zero-lag instantaneous state change without lingering background fade */
.modal table.table tr,
.modal table.table tr > td,
.modal table.table tr > th,
.bottom-sheet-modal table.table tr,
.bottom-sheet-modal table.table tr > td,
.bottom-sheet-modal table.table tr > th,
.offcanvas table.table tr,
.offcanvas table.table tr > td,
.offcanvas table.table tr > th,
.modal-table-container table tr,
.modal-table-container table tr > td,
.modal-table-container table tr > th {
  transition: none !important;
}

[data-bs-theme="dark"] .modal table.table tr:not(:last-child):not(:last-of-type):not(.selected):not(.user-row-selected):not(.table-active) td,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:not(:last-child):not(:last-of-type):not(.selected):not(.user-row-selected):not(.table-active) td,
[data-bs-theme="dark"] .offcanvas table.table tr:not(:last-child):not(:last-of-type):not(.selected):not(.user-row-selected):not(.table-active) td {
  background-color: var(--bs-modal-table-bg, transparent) !important;
  --bs-table-bg: var(--bs-modal-table-bg, transparent) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--bs-modal-table-border, rgba(255, 255, 255, 0.12)) !important;
  box-shadow: none !important;
  transition: none !important;
}

[data-bs-theme="dark"] .modal table.table tr:not(:last-child):not(:last-of-type):not(.selected):not(.user-row-selected):not(.table-active):hover td,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:not(:last-child):not(:last-of-type):not(.selected):not(.user-row-selected):not(.table-active):hover td,
[data-bs-theme="dark"] .offcanvas table.table tr:not(:last-child):not(:last-of-type):not(.selected):not(.user-row-selected):not(.table-active):hover td {
  background-color: var(--bs-modal-table-hover-bg, rgba(255, 255, 255, 0.04)) !important;
}

/* Modal Selected Row States (Dark & Light) - All cells share identical background color in lockstep */
[data-bs-theme="dark"] .modal table.table tr:not(:last-child):not(:last-of-type).selected td,
[data-bs-theme="dark"] .modal table.table tr:not(:last-child):not(:last-of-type).user-row-selected td,
[data-bs-theme="dark"] .modal table.table tr:not(:last-child):not(:last-of-type).table-active td,
[data-bs-theme="dark"] .modal .modal-table-container table tr:not(:last-child):not(:last-of-type).selected td,
[data-bs-theme="dark"] .modal .modal-table-container table tr:not(:last-child):not(:last-of-type).user-row-selected td,
[data-bs-theme="dark"] .modal-table-container table tbody tr:not(:last-child):not(:last-of-type).selected td,
[data-bs-theme="dark"] .modal-table-container table tbody tr:not(:last-child):not(:last-of-type).user-row-selected td {
  background-color: var(--bs-table-selected-bg) !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-bg-state: transparent !important;
  --bs-table-hover-bg: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--bs-modal-table-border, rgba(255, 255, 255, 0.12)) !important;
  box-shadow: none !important;
  transition: none !important;
}

.modal table.table tr:not(:last-child):not(:last-of-type).selected td,
.modal table.table tr:not(:last-child):not(:last-of-type).user-row-selected td,
.modal table.table tr:not(:last-child):not(:last-of-type).table-active td,
.modal .modal-table-container table tr:not(:last-child):not(:last-of-type).selected td,
.modal .modal-table-container table tr:not(:last-child):not(:last-of-type).user-row-selected td,
.modal-table-container table tbody tr:not(:last-child):not(:last-of-type).selected td,
.modal-table-container table tbody tr:not(:last-child):not(:last-of-type).user-row-selected td {
  background-color: var(--bs-table-selected-bg) !important;
  --bs-table-accent-bg: transparent !important;
  --bs-table-bg-state: transparent !important;
  --bs-table-hover-bg: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  box-shadow: none !important;
  transition: none !important;
}

:is([data-bs-theme="dark"], .dark-style, html, body) :is(.modal, .bottom-sheet-modal, .offcanvas, body) :is(table, .table) tbody tr:is(:last-child, :last-of-type) :is(td, th, > *),
[data-bs-theme="dark"] .modal table.table tbody tr:is(:last-child, :last-of-type) :is(td, th, > *),
[data-bs-theme="dark"] .modal .modal-table-container table tbody tr:is(:last-child, :last-of-type) :is(td, th, > *),
[data-bs-theme="dark"] .modal table.table tr:is(:last-child, :last-of-type) :is(td, th, > *),
[data-bs-theme="dark"] .modal table.table tr:is(:last-child, :last-of-type).selected :is(td, th, > *),
[data-bs-theme="dark"] .modal table.table tr:is(:last-child, :last-of-type).user-row-selected :is(td, th, > *),
[data-bs-theme="dark"] .modal table.table tr:is(:last-child, :last-of-type):hover :is(td, th, > *),
[data-bs-theme="dark"] .modal table.table tr:is(:last-child, :last-of-type):not(.selected):not(.user-row-selected):not(.table-active) :is(td, th, > *),
.modal table.table tr:last-child > *,
.modal table.table tr:last-of-type > *,
.bottom-sheet-modal table.table tr:last-child > *,
.bottom-sheet-modal table.table tr:last-of-type > *,
.offcanvas table.table tr:last-child > *,
.offcanvas table.table tr:last-of-type > *,
[data-bs-theme="dark"] .modal table.table tr:last-child td,
[data-bs-theme="dark"] .modal table.table tr:last-child th,
[data-bs-theme="dark"] .modal table.table tr:last-child > *,
[data-bs-theme="dark"] .modal table.table tr:last-of-type > *,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:last-child td,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:last-child th,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:last-child > *,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:last-of-type > *,
[data-bs-theme="dark"] .offcanvas table.table tr:last-child td,
[data-bs-theme="dark"] .offcanvas table.table tr:last-child th,
[data-bs-theme="dark"] .offcanvas table.table tr:last-child > *,
[data-bs-theme="dark"] .offcanvas table.table tr:last-of-type > * {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
  border-bottom-color: transparent !important;
  border-bottom-style: none !important;
}

/* Ensure generous bottom padding for the last row in modal tables to avoid squished appearance against rounded bottom border */
.modal table.table tr:last-child > td,
.modal table.table tr:last-child > th,
.modal-table-container table tr:last-child > td,
.modal-table-container table tr:last-child > th,
.bottom-sheet-modal table.table tr:last-child > td,
.bottom-sheet-modal table.table tr:last-child > th,
.offcanvas table.table tr:last-child > td,
.offcanvas table.table tr:last-child > th,
[data-bs-theme="dark"] .modal table.table tr:last-child > td,
[data-bs-theme="dark"] .modal table.table tr:last-child > th,
[data-bs-theme="dark"] .modal-table-container table tr:last-child > td,
[data-bs-theme="dark"] .modal-table-container table tr:last-child > th,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:last-child > td,
[data-bs-theme="dark"] .bottom-sheet-modal table.table tr:last-child > th,
[data-bs-theme="dark"] .offcanvas table.table tr:last-child > td,
[data-bs-theme="dark"] .offcanvas table.table tr:last-child > th {
  padding-bottom: var(--bs-modal-table-last-row-padding-bottom, 0.95rem) !important;
}

/* Balance top row padding when thead is visually hidden (d-none) */
.modal table.table thead.d-none ~ tbody tr:first-child > td,
.modal table.table thead.d-none ~ tbody tr:first-child > th,
.modal-table-container table thead.d-none ~ tbody tr:first-child > td,
.modal-table-container table thead.d-none ~ tbody tr:first-child > th,
[data-bs-theme="dark"] .modal table.table thead.d-none ~ tbody tr:first-child > td,
[data-bs-theme="dark"] .modal table.table thead.d-none ~ tbody tr:first-child > th,
[data-bs-theme="dark"] .modal-table-container table thead.d-none ~ tbody tr:first-child > td,
[data-bs-theme="dark"] .modal-table-container table thead.d-none ~ tbody tr:first-child > th {
  padding-top: var(--bs-modal-table-last-row-padding-bottom, 0.95rem) !important;
}

@media (hover: hover) and (pointer: fine) {
  [data-bs-theme="dark"] .modal table.table-hover>tbody>tr:hover>*,
  [data-bs-theme="dark"] .modal table.table-hover>tbody>tr.hover>*,
  [data-bs-theme="dark"] .modal table.table-hover>tbody>tr:not(.selected):not(.user-row-selected):not(.table-active):hover>* {
    background-color: transparent !important;
    --bs-table-bg-state: transparent !important;
    box-shadow: none !important;
  }
}

@media (max-width: 767.98px), (hover: none) {
  .modal table.table-hover > tbody > tr:hover > *,
  .modal table.table-hover > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  .modal table.table-hover > tbody > tr.hover > *,
  [data-bs-theme="dark"] .modal table.table-hover > tbody > tr:hover > *,
  [data-bs-theme="dark"] .modal table.table-hover > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  [data-bs-theme="dark"] .modal table.table-hover > tbody > tr.hover > * {
    background-color: transparent !important;
    --bs-table-hover-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    box-shadow: none !important;
  }
}

/* Modal Table Container: Auto Full-Height Filling Available Modal Space */
.modal-body > .table-responsive,
.modal .modal-body > .table-responsive,
.bottom-sheet-modal .modal-body > .table-responsive {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  overflow-y: auto !important;
}

.modal-body > .table-responsive > table,
.modal .modal-body > .table-responsive > table,
.bottom-sheet-modal .modal-body > .table-responsive > table {
  width: 100% !important;
  margin-bottom: 0 !important;
}

.modal-body > .table-responsive:has(.table-empty-state:not(.d-none)),
.modal-body > .table-responsive:has(.table-loading-state:not(.d-none)),
.modal .modal-body > .table-responsive:has(.table-empty-state:not(.d-none)),
.modal .modal-body > .table-responsive:has(.table-loading-state:not(.d-none)) {
  display: flex !important;
  flex-direction: column !important;
}

.modal-body > .table-responsive:has(.table-empty-state:not(.d-none)) > table,
.modal-body > .table-responsive:has(.table-loading-state:not(.d-none)) > table,
.modal .modal-body > .table-responsive:has(.table-empty-state:not(.d-none)) > table,
.modal .modal-body > .table-responsive:has(.table-loading-state:not(.d-none)) > table {
  flex: 1 1 auto !important;
  height: 100% !important;
}

.modal-body > .table-responsive:has(.table-empty-state:not(.d-none)) > table > tbody,
.modal-body > .table-responsive:has(.table-loading-state:not(.d-none)) > table > tbody,
.modal .modal-body > .table-responsive:has(.table-empty-state:not(.d-none)) > table > tbody,
.modal .modal-body > .table-responsive:has(.table-loading-state:not(.d-none)) > table > tbody {
  height: 100% !important;
}

.modal-body > .table-responsive > table > tbody > tr:has(.table-empty-state:not(.d-none)),
.modal-body > .table-responsive > table > tbody > tr:has(.table-loading-state:not(.d-none)),
.modal .modal-body > .table-responsive > table > tbody > tr:has(.table-empty-state:not(.d-none)),
.modal .modal-body > .table-responsive > table > tbody > tr:has(.table-loading-state:not(.d-none)),
.bottom-sheet-modal .modal-body > .table-responsive > table > tbody > tr:has(.table-empty-state:not(.d-none)),
.bottom-sheet-modal .modal-body > .table-responsive > table > tbody > tr:has(.table-loading-state:not(.d-none)) {
  height: 100% !important;
}

.modal-body > .table-responsive .table-empty-state:not(.d-none),
.modal-body > .table-responsive .table-loading-state:not(.d-none),
.modal .modal-body > .table-responsive .table-empty-state:not(.d-none),
.modal .modal-body > .table-responsive .table-loading-state:not(.d-none),
.bottom-sheet-modal .modal-body > .table-responsive .table-empty-state:not(.d-none),
.bottom-sheet-modal .modal-body > .table-responsive .table-loading-state:not(.d-none) {
  height: 100% !important;
  vertical-align: middle !important;
  padding: 2.5rem 1rem !important;
}

/* Normal data rows inside modal tables: align neatly at top, height auto, never stretched */
.modal-body > .table-responsive > table:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))),
.modal .modal-body > .table-responsive > table:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))),
.modal-table-container > table:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) {
  height: auto !important;
  flex: 0 0 auto !important;
}

.modal-body > .table-responsive > table:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) > tbody,
.modal .modal-body > .table-responsive > table:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) > tbody,
.modal-table-container > table:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) > tbody {
  height: auto !important;
}

.modal-body > .table-responsive > table tbody > tr:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))),
.modal .modal-body > .table-responsive > table tbody > tr:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))),
.modal-table-container > table tbody > tr:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) {
  height: auto !important;
}

.modal-body > .table-responsive > table tbody > tr:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) > td,
.modal .modal-body > .table-responsive > table tbody > tr:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) > td,
.modal-table-container > table tbody > tr:not(:has(.table-empty-state:not(.d-none))):not(:has(.table-loading-state:not(.d-none))) > td {
  height: auto !important;
  vertical-align: middle !important;
}

/* Modal Card Footer & Pagination Styling */
.modal .card .card-footer {
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.06) !important;
}

[data-bs-theme="dark"] .modal .card .card-footer {
  background-color: var(--bs-modal-card-bg, var(--bs-surface-elevated)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .modal .pagination .page-link {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #e9e9e9 !important;
  border: none !important;
}

[data-bs-theme="dark"] .modal .pagination .page-item:not(.active) .page-link:hover,
[data-bs-theme="dark"] .modal .pagination .page-link:hover:not(.active),
.dark-style .modal .pagination .page-item:not(.active) .page-link:hover,
.dark-style .modal .pagination .page-link:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .modal .pagination .page-item.active .page-link,
[data-bs-theme="dark"] .modal .pagination .page-item.active .page-link:hover,
[data-bs-theme="dark"] .modal .pagination .page-item.active .page-link:focus,
[data-bs-theme="dark"] .modal .pagination .page-item.active .page-link:active,
.dark-style .modal .pagination .page-item.active .page-link,
.dark-style .modal .pagination .page-item.active .page-link:hover,
.dark-style .modal .pagination .page-item.active .page-link:focus,
.dark-style .modal .pagination .page-item.active .page-link:active {
  background: linear-gradient(135deg, #ff6b26 0%, #ff5200 100%) !important;
  background-color: var(--bs-primary, #ff5911) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  filter: none !important;
}

[data-bs-theme="dark"] .modal .pagination .page-item.disabled .page-link,
.dark-style .modal .pagination .page-item.disabled .page-link {
  background-color: rgba(255, 255, 255, 0.03) !important;
  color: rgba(255, 255, 255, 0.3) !important;
}

/* Global No Glow / Box-Shadow on All Modal Pagination Links */
.modal .pagination .page-link,
.modal .pagination .page-item .page-link,
.modal .pagination .page-item.active .page-link,
.modal .pagination .page-item.active .page-link:hover,
.modal .pagination .page-item.active .page-link:focus,
.modal .pagination .page-item.active .page-link:active,
.modal .pagination .page-link:hover,
.modal .pagination .page-link:focus,
.modal .pagination .page-link:active {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  filter: none !important;
}

/* ==========================================================================
   Standard Modal Pagination: Compact Layout (No Numbers, Prev/Next Only)
   Modal Ukuran Standar: Nomor halaman disembunyikan agar tidak kepotong/lebar.
   Modal Ukuran Besar (.modal-lg / .modal-xl): Tetap tampil panjang lengkap.
   ========================================================================== */
.modal-dialog:not(.modal-lg):not(.modal-xl) .pagination .page-item:not(:first-child):not(:last-child),
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .pagination .page-item:not(:first-child):not(:last-child) {
  display: none !important;
}

.modal-dialog:not(.modal-lg):not(.modal-xl) .card-footer:has(.pagination),
.modal-dialog:not(.modal-lg):not(.modal-xl) .card-footer[id*="Pagination"],
.modal-dialog:not(.modal-lg):not(.modal-xl) [id*="Pagination"]:not(ul):not(nav),
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .card-footer:has(.pagination),
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .card-footer[id*="Pagination"],
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) [id*="Pagination"]:not(ul):not(nav) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
}

.modal-dialog:not(.modal-lg):not(.modal-xl) .card-footer:has(.pagination) small,
.modal-dialog:not(.modal-lg):not(.modal-xl) .card-footer:has(.pagination) .small,
.modal-dialog:not(.modal-lg):not(.modal-xl) .card-footer:has(.pagination) .text-muted,
.modal-dialog:not(.modal-lg):not(.modal-xl) [id*="Pagination"] small,
.modal-dialog:not(.modal-lg):not(.modal-xl) [id*="Pagination"] .small,
.modal-dialog:not(.modal-lg):not(.modal-xl) [id*="Pagination"] .text-muted,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .card-footer:has(.pagination) small,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .card-footer:has(.pagination) .small,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .card-footer:has(.pagination) .text-muted,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) [id*="Pagination"] small,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) [id*="Pagination"] .small,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) [id*="Pagination"] .text-muted {
  width: auto !important;
  text-align: left !important;
  white-space: nowrap !important;
  margin: 0 !important;
  display: inline-block !important;
  font-size: 0.8125rem !important;
  line-height: 1.2 !important;
}

.modal-dialog:not(.modal-lg):not(.modal-xl) .pagination,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .pagination {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  justify-content: flex-end !important;
  width: auto !important;
}

.modal-dialog:not(.modal-lg):not(.modal-xl) .pagination .page-item:first-child .page-link,
.modal-dialog:not(.modal-lg):not(.modal-xl) .pagination .page-item:last-child .page-link,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .pagination .page-item:first-child .page-link,
.modal:not(:has(.modal-lg)):not(:has(.modal-xl)) .pagination .page-item:last-child .page-link {
  min-width: var(--bs-pagination-btn-min-width, 6.25rem) !important;
  height: var(--bs-pagination-btn-height, 38px) !important;
  padding: 0 var(--bs-pagination-btn-padding-x, 18px) !important;
  font-size: var(--bs-pagination-btn-font-size, 0.85rem) !important;
  font-weight: var(--bs-pagination-btn-font-weight, 600) !important;
  white-space: nowrap !important;
  border-radius: var(--bs-pagination-btn-border-radius, 50rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* ==========================================================================
   3. List Groups & Inset Rows (.modal .list-group)
   ========================================================================== */

.modal .list-group:not(.card .list-group),
.bottom-sheet-modal .list-group:not(.card .list-group),
.offcanvas:not(#modalAllNotifications) .list-group:not(.card .list-group) {
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  border-radius: var(--bs-card-border-radius, 1.25rem) !important;
  overflow: hidden !important;
  border: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal .list-group:not(.card .list-group),
[data-bs-theme="dark"] .bottom-sheet-modal .list-group:not(.card .list-group),
[data-bs-theme="dark"] .offcanvas:not(#modalAllNotifications) .list-group:not(.card .list-group) {
  --bs-card-bg: var(--bs-surface-elevated) !important;
  background-color: var(--bs-surface-elevated) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: var(--bs-card-border-radius, 1.25rem) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Offcanvas Pusat Notifikasi: List-group-flush must remain transparent, seamless, and borderless */
#modalAllNotifications .list-group,
#modalAllNotifications .list-group-flush,
.offcanvas#modalAllNotifications .list-group,
.offcanvas#modalAllNotifications .list-group-flush {
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

[data-bs-theme="dark"] #modalAllNotifications .list-group,
[data-bs-theme="dark"] #modalAllNotifications .list-group-flush,
[data-bs-theme="dark"] .offcanvas#modalAllNotifications .list-group,
[data-bs-theme="dark"] .offcanvas#modalAllNotifications .list-group-flush {
  background-color: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#modalAllNotifications .empty-state-notif {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Modal list groups inside cards: card already provides outer border & radius, eliminate double borders */
.modal .card .list-group,
.modal .card .card-body > .list-group,
.bottom-sheet-modal .card .list-group,
.bottom-sheet-modal .card .card-body > .list-group,
.offcanvas .card .list-group,
.offcanvas .card .card-body > .list-group {
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
}

/* Modal Action Sheet & Standalone List Groups (Group of Buttons) - Match Card and Table Border Radius (1.25rem) */
.modal .list-group:not(.card .list-group),
.bottom-sheet-modal .list-group:not(.card .list-group),
.offcanvas:not(#modalAllNotifications) .list-group:not(.card .list-group),
.modal .list-group.rounded-3,
.bottom-sheet-modal .list-group.rounded-3,
.modal .list-group-flush.rounded-3,
.bottom-sheet-modal .list-group-flush.rounded-3,
.modal .list-group.rounded-4,
.bottom-sheet-modal .list-group.rounded-4,
.modal .list-group-flush.rounded-4,
.bottom-sheet-modal .list-group-flush.rounded-4 {
  position: relative !important;
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  border: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
  border-radius: var(--bs-card-border-radius, 1.25rem) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal .list-group:not(.card .list-group),
[data-bs-theme="dark"] .bottom-sheet-modal .list-group:not(.card .list-group),
[data-bs-theme="dark"] .offcanvas:not(#modalAllNotifications) .list-group:not(.card .list-group),
[data-bs-theme="dark"] .modal .list-group.rounded-3,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group.rounded-3,
[data-bs-theme="dark"] .modal .list-group-flush.rounded-3,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-flush.rounded-3,
[data-bs-theme="dark"] .modal .list-group.rounded-4,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group.rounded-4,
[data-bs-theme="dark"] .modal .list-group-flush.rounded-4,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-flush.rounded-4,
[data-bs-theme="dark"] .modal .list-group,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group,
[data-bs-theme="dark"] .modal .list-group.border,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group.border,
[data-bs-theme="dark"] .modal .list-group[class*="border"],
[data-bs-theme="dark"] .bottom-sheet-modal .list-group[class*="border"] {
  --bs-card-bg: var(--bs-surface-elevated) !important;
  background-color: var(--bs-surface-elevated) !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: var(--bs-card-border-radius, 1.25rem) !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transform: translateZ(0) !important;
  box-shadow: none !important;
}

/* Inner items: strictly zero border-radius and zero outer borders (top/left/right) so parent overflow: hidden clips smoothly with zero hover border jumps or corner notches */
.modal .list-group .list-group-item,
.bottom-sheet-modal .list-group .list-group-item,
.offcanvas:not(#modalAllNotifications) .list-group .list-group-item,
.modal .list-group > .list-group-item:first-child,
.bottom-sheet-modal .list-group > .list-group-item:first-child,
.offcanvas:not(#modalAllNotifications) .list-group > .list-group-item:first-child,
.modal .list-group > .list-group-item:last-child,
.bottom-sheet-modal .list-group > .list-group-item:last-child,
.offcanvas:not(#modalAllNotifications) .list-group > .list-group-item:last-child,
.modal .list-group-item-action,
.bottom-sheet-modal .list-group-item-action {
  padding: 0.75rem 1rem;
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-light-mode, rgba(0, 0, 0, 0.08)) !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin: 0 !important;
}

[data-bs-theme="dark"] .modal .list-group .list-group-item,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group .list-group-item,
[data-bs-theme="dark"] .offcanvas:not(#modalAllNotifications) .list-group .list-group-item,
[data-bs-theme="dark"] .modal .list-group > .list-group-item:first-child,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group > .list-group-item:first-child,
[data-bs-theme="dark"] .offcanvas:not(#modalAllNotifications) .list-group > .list-group-item:first-child,
[data-bs-theme="dark"] .modal .list-group > .list-group-item:last-child,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group > .list-group-item:last-child,
[data-bs-theme="dark"] .offcanvas:not(#modalAllNotifications) .list-group > .list-group-item:last-child {
  background-color: transparent !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin: 0 !important;
}

.modal .list-group .list-group-item:last-child,
.bottom-sheet-modal .list-group .list-group-item:last-child,
.offcanvas:not(#modalAllNotifications) .list-group .list-group-item:last-child {
  border-bottom: none !important;
  border-bottom-width: 0 !important;
}

/* Zero radius & zero outer border shifts across hover, focus, and active states */
.modal .list-group .list-group-item:hover,
.modal .list-group .list-group-item:focus,
.modal .list-group .list-group-item:active,
.modal .list-group-item-action:hover,
.modal .list-group-item-action:focus,
.modal .list-group-item-action:active,
.bottom-sheet-modal .list-group .list-group-item:hover,
.bottom-sheet-modal .list-group .list-group-item:focus,
.bottom-sheet-modal .list-group .list-group-item:active,
.bottom-sheet-modal .list-group-item-action:hover,
.bottom-sheet-modal .list-group-item-action:focus,
.bottom-sheet-modal .list-group-item-action:active,
[data-bs-theme="dark"] .modal .list-group .list-group-item:hover,
[data-bs-theme="dark"] .modal .list-group .list-group-item:focus,
[data-bs-theme="dark"] .modal .list-group .list-group-item:active,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group .list-group-item:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group .list-group-item:focus,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group .list-group-item:active {
  border-radius: 0 !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  transform: none !important;
}

/* Modal & Action Sheet Interactive List Items (Consistent text color, subtle background hover) */
.modal .list-group-item-action,
.bottom-sheet-modal .list-group-item-action,
.offcanvas .list-group-item-action {
  color: var(--bs-modal-list-item-color);
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Subtle background feedback on hover/focus on desktop pointer devices only */
@media (hover: hover) and (pointer: fine) {
  .modal .list-group-item-action:hover,
  .bottom-sheet-modal .list-group-item-action:hover,
  .offcanvas .list-group-item-action:hover,
  .modal .list-group-item-action:focus,
  .bottom-sheet-modal .list-group-item-action:focus,
  .offcanvas .list-group-item-action:focus {
    background-color: var(--bs-modal-list-item-hover-bg) !important;
  }
}

/* Strictly zero hover/active background or text color shift on mobile/touch screens */
@media (max-width: 767.98px), (hover: none) {
  .modal .list-group-item-action,
  .modal .list-group-item-action:hover,
  .modal .list-group-item-action:focus,
  .modal .list-group-item-action:focus-visible,
  .modal .list-group-item-action:active,
  .bottom-sheet-modal .list-group-item-action,
  .bottom-sheet-modal .list-group-item-action:hover,
  .bottom-sheet-modal .list-group-item-action:focus,
  .bottom-sheet-modal .list-group-item-action:focus-visible,
  .bottom-sheet-modal .list-group-item-action:active,
  .offcanvas .list-group-item-action,
  .offcanvas .list-group-item-action:hover,
  .offcanvas .list-group-item-action:focus,
  .offcanvas .list-group-item-action:focus-visible,
  .offcanvas .list-group-item-action:active {
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    transition: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):hover,
  .modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):focus,
  .modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):active,
  .bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):hover,
  .bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):focus,
  .bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):active,
  .offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):hover,
  .offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):focus,
  .offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):active {
    color: var(--bs-modal-list-item-color) !important;
  }

  .modal .list-group-item-action.text-heading:hover,
  .modal .list-group-item-action.text-heading:focus,
  .modal .list-group-item-action.text-heading:active,
  .bottom-sheet-modal .list-group-item-action.text-heading:hover,
  .bottom-sheet-modal .list-group-item-action.text-heading:focus,
  .bottom-sheet-modal .list-group-item-action.text-heading:active,
  .offcanvas .list-group-item-action.text-heading:hover,
  .offcanvas .list-group-item-action.text-heading:focus,
  .offcanvas .list-group-item-action.text-heading:active {
    color: var(--bs-modal-list-item-color) !important;
  }

  .modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success) *:not(.brand-whatsapp):not([class*="brand-whatsapp"]):not(.ri-whatsapp-line):not(.ri-whatsapp-fill):not([class*="text-"]),
  .bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success) *:not(.brand-whatsapp):not([class*="brand-whatsapp"]):not(.ri-whatsapp-line):not(.ri-whatsapp-fill):not([class*="text-"]),
  .offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success) *:not(.brand-whatsapp):not([class*="brand-whatsapp"]):not(.ri-whatsapp-line):not(.ri-whatsapp-fill):not([class*="text-"]) {
    color: inherit !important;
  }
}

/* Maintain balanced neutral text color for default items (soft modern slate from root.css tokens) */
.modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn),
.modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):hover,
.modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):focus,
.modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):focus-visible,
.modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):active,
.bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn),
.bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):hover,
.bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):focus,
.bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):focus-visible,
.bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):active,
.offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn),
.offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):hover,
.offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):focus,
.offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):focus-visible,
.offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn):active,
.modal .list-group-item-action.text-heading,
.modal .list-group-item-action.text-heading:hover,
.modal .list-group-item-action.text-heading:focus,
.modal .list-group-item-action.text-heading:focus-visible,
.modal .list-group-item-action.text-heading:active,
.bottom-sheet-modal .list-group-item-action.text-heading,
.bottom-sheet-modal .list-group-item-action.text-heading:hover,
.bottom-sheet-modal .list-group-item-action.text-heading:focus,
.bottom-sheet-modal .list-group-item-action.text-heading:focus-visible,
.bottom-sheet-modal .list-group-item-action.text-heading:active,
.offcanvas .list-group-item-action.text-heading,
.offcanvas .list-group-item-action.text-heading:hover,
.offcanvas .list-group-item-action.text-heading:focus,
.offcanvas .list-group-item-action.text-heading:focus-visible,
.offcanvas .list-group-item-action.text-heading:active,
.modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn) span:not([class*="text-"]),
.bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn) span:not([class*="text-"]),
.offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn) span:not([class*="text-"]),
.modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn) .text-heading,
.bottom-sheet-modal .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn) .text-heading,
.offcanvas .list-group-item-action:not(.text-danger):not(.text-info):not(.text-warning):not(.text-primary):not(.text-success):not(.delete-user-btn) .text-heading {
  color: var(--bs-modal-list-item-color) !important;
}

/* Explicit High-Specificity Semantic Color Preservation (Desktop & Mobile, Light & Dark) */
.modal .list-group-item-action.text-info,
.modal .list-group-item-action.text-info:hover,
.modal .list-group-item-action.text-info:focus,
.modal .list-group-item-action.text-info:focus-visible,
.modal .list-group-item-action.text-info:active,
.modal .list-group-item-action.text-info *,
.bottom-sheet-modal .list-group-item-action.text-info,
.bottom-sheet-modal .list-group-item-action.text-info:hover,
.bottom-sheet-modal .list-group-item-action.text-info:focus,
.bottom-sheet-modal .list-group-item-action.text-info:focus-visible,
.bottom-sheet-modal .list-group-item-action.text-info:active,
.bottom-sheet-modal .list-group-item-action.text-info *,
.offcanvas .list-group-item-action.text-info,
.offcanvas .list-group-item-action.text-info:hover,
.offcanvas .list-group-item-action.text-info:focus,
.offcanvas .list-group-item-action.text-info:focus-visible,
.offcanvas .list-group-item-action.text-info:active,
.offcanvas .list-group-item-action.text-info *,
[data-bs-theme="dark"] .modal .list-group-item-action.text-info,
[data-bs-theme="dark"] .modal .list-group-item-action.text-info:hover,
[data-bs-theme="dark"] .modal .list-group-item-action.text-info:focus,
[data-bs-theme="dark"] .modal .list-group-item-action.text-info:focus-visible,
[data-bs-theme="dark"] .modal .list-group-item-action.text-info:active,
[data-bs-theme="dark"] .modal .list-group-item-action.text-info *,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-info,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-info:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-info:focus,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-info:focus-visible,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-info:active,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-info *,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-info,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-info:hover,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-info:focus,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-info:focus-visible,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-info:active,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-info * {
  color: var(--bs-info, #03c3ec) !important;
}

.modal .list-group-item-action.text-warning,
.modal .list-group-item-action.text-warning:hover,
.modal .list-group-item-action.text-warning:focus,
.modal .list-group-item-action.text-warning:focus-visible,
.modal .list-group-item-action.text-warning:active,
.modal .list-group-item-action.text-warning *,
.bottom-sheet-modal .list-group-item-action.text-warning,
.bottom-sheet-modal .list-group-item-action.text-warning:hover,
.bottom-sheet-modal .list-group-item-action.text-warning:focus,
.bottom-sheet-modal .list-group-item-action.text-warning:focus-visible,
.bottom-sheet-modal .list-group-item-action.text-warning:active,
.bottom-sheet-modal .list-group-item-action.text-warning *,
.offcanvas .list-group-item-action.text-warning,
.offcanvas .list-group-item-action.text-warning:hover,
.offcanvas .list-group-item-action.text-warning:focus,
.offcanvas .list-group-item-action.text-warning:focus-visible,
.offcanvas .list-group-item-action.text-warning:active,
.offcanvas .list-group-item-action.text-warning *,
[data-bs-theme="dark"] .modal .list-group-item-action.text-warning,
[data-bs-theme="dark"] .modal .list-group-item-action.text-warning:hover,
[data-bs-theme="dark"] .modal .list-group-item-action.text-warning:focus,
[data-bs-theme="dark"] .modal .list-group-item-action.text-warning:focus-visible,
[data-bs-theme="dark"] .modal .list-group-item-action.text-warning:active,
[data-bs-theme="dark"] .modal .list-group-item-action.text-warning *,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-warning,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-warning:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-warning:focus,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-warning:focus-visible,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-warning:active,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-warning *,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-warning,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-warning:hover,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-warning:focus,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-warning:focus-visible,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-warning:active,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-warning * {
  color: var(--bs-warning, #ffab00) !important;
}

.modal .list-group-item-action.text-danger,
.modal .list-group-item-action.text-danger:hover,
.modal .list-group-item-action.text-danger:focus,
.modal .list-group-item-action.text-danger:focus-visible,
.modal .list-group-item-action.text-danger:active,
.modal .list-group-item-action.text-danger *,
.bottom-sheet-modal .list-group-item-action.text-danger,
.bottom-sheet-modal .list-group-item-action.text-danger:hover,
.bottom-sheet-modal .list-group-item-action.text-danger:focus,
.bottom-sheet-modal .list-group-item-action.text-danger:focus-visible,
.bottom-sheet-modal .list-group-item-action.text-danger:active,
.bottom-sheet-modal .list-group-item-action.text-danger *,
.offcanvas .list-group-item-action.text-danger,
.offcanvas .list-group-item-action.text-danger:hover,
.offcanvas .list-group-item-action.text-danger:focus,
.offcanvas .list-group-item-action.text-danger:focus-visible,
.offcanvas .list-group-item-action.text-danger:active,
.offcanvas .list-group-item-action.text-danger *,
[data-bs-theme="dark"] .modal .list-group-item-action.text-danger,
[data-bs-theme="dark"] .modal .list-group-item-action.text-danger:hover,
[data-bs-theme="dark"] .modal .list-group-item-action.text-danger:focus,
[data-bs-theme="dark"] .modal .list-group-item-action.text-danger:focus-visible,
[data-bs-theme="dark"] .modal .list-group-item-action.text-danger:active,
[data-bs-theme="dark"] .modal .list-group-item-action.text-danger *,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-danger,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-danger:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-danger:focus,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-danger:focus-visible,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-danger:active,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-danger *,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-danger,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-danger:hover,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-danger:focus,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-danger:focus-visible,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-danger:active,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-danger * {
  color: var(--bs-danger, #ea5455) !important;
}

.modal .list-group-item-action.text-heading,
.modal .list-group-item-action.text-heading:hover,
.modal .list-group-item-action.text-heading:focus,
.modal .list-group-item-action.text-heading:focus-visible,
.modal .list-group-item-action.text-heading:active,
.modal .list-group-item-action.text-heading *,
.bottom-sheet-modal .list-group-item-action.text-heading,
.bottom-sheet-modal .list-group-item-action.text-heading:hover,
.bottom-sheet-modal .list-group-item-action.text-heading:focus,
.bottom-sheet-modal .list-group-item-action.text-heading:focus-visible,
.bottom-sheet-modal .list-group-item-action.text-heading:active,
.bottom-sheet-modal .list-group-item-action.text-heading *,
.offcanvas .list-group-item-action.text-heading,
.offcanvas .list-group-item-action.text-heading:hover,
.offcanvas .list-group-item-action.text-heading:focus,
.offcanvas .list-group-item-action.text-heading:focus-visible,
.offcanvas .list-group-item-action.text-heading:active,
.offcanvas .list-group-item-action.text-heading *,
[data-bs-theme="dark"] .modal .list-group-item-action.text-heading,
[data-bs-theme="dark"] .modal .list-group-item-action.text-heading:hover,
[data-bs-theme="dark"] .modal .list-group-item-action.text-heading:focus,
[data-bs-theme="dark"] .modal .list-group-item-action.text-heading:focus-visible,
[data-bs-theme="dark"] .modal .list-group-item-action.text-heading:active,
[data-bs-theme="dark"] .modal .list-group-item-action.text-heading *,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-heading,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-heading:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-heading:focus,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-heading:focus-visible,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-heading:active,
[data-bs-theme="dark"] .bottom-sheet-modal .list-group-item-action.text-heading *,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-heading,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-heading:hover,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-heading:focus,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-heading:focus-visible,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-heading:active,
[data-bs-theme="dark"] .offcanvas .list-group-item-action.text-heading * {
  color: var(--bs-modal-list-item-color) !important;
}

/* Preserve Semantic Text Colors across all states (Normal, Hover, Focus, Active) */
.modal .list-group-item-action.text-info,
.bottom-sheet-modal .list-group-item-action.text-info,
.offcanvas .list-group-item-action.text-info,
.modal .list-group-item-action.text-info:hover,
.bottom-sheet-modal .list-group-item-action.text-info:hover,
.offcanvas .list-group-item-action.text-info:hover,
.modal .list-group-item-action.text-info:focus,
.bottom-sheet-modal .list-group-item-action.text-info:focus,
.offcanvas .list-group-item-action.text-info:focus {
  color: var(--bs-info, #03c3ec) !important;
}

.modal .list-group-item-action.text-warning,
.bottom-sheet-modal .list-group-item-action.text-warning,
.offcanvas .list-group-item-action.text-warning,
.modal .list-group-item-action.text-warning:hover,
.bottom-sheet-modal .list-group-item-action.text-warning:hover,
.offcanvas .list-group-item-action.text-warning:hover,
.modal .list-group-item-action.text-warning:focus,
.bottom-sheet-modal .list-group-item-action.text-warning:focus,
.offcanvas .list-group-item-action.text-warning:focus {
  color: var(--bs-warning, #ffab00) !important;
}

.modal .list-group-item-action.text-danger,
.modal .list-group-item-action.delete-user-btn,
.bottom-sheet-modal .list-group-item-action.text-danger,
.bottom-sheet-modal .list-group-item-action.delete-user-btn,
.offcanvas .list-group-item-action.text-danger,
.offcanvas .list-group-item-action.delete-user-btn,
.modal .list-group-item-action.text-danger:hover,
.modal .list-group-item-action.delete-user-btn:hover,
.bottom-sheet-modal .list-group-item-action.text-danger:hover,
.bottom-sheet-modal .list-group-item-action.delete-user-btn:hover,
.offcanvas .list-group-item-action.text-danger:hover,
.offcanvas .list-group-item-action.delete-user-btn:hover,
.modal .list-group-item-action.text-danger:focus,
.bottom-sheet-modal .list-group-item-action.text-danger:focus,
.offcanvas .list-group-item-action.text-danger:focus {
  color: var(--bs-danger, #ea5455) !important;
}

.modal .list-group-item-action.text-primary,
.bottom-sheet-modal .list-group-item-action.text-primary,
.offcanvas .list-group-item-action.text-primary,
.modal .list-group-item-action.text-primary:hover,
.bottom-sheet-modal .list-group-item-action.text-primary:hover,
.offcanvas .list-group-item-action.text-primary:hover,
.modal .list-group-item-action.text-primary:focus,
.bottom-sheet-modal .list-group-item-action.text-primary:focus,
.offcanvas .list-group-item-action.text-primary:focus {
  color: var(--bs-primary, #ff5911) !important;
}

.modal .list-group-item-action.text-success,
.bottom-sheet-modal .list-group-item-action.text-success,
.offcanvas .list-group-item-action.text-success,
.modal .list-group-item-action.text-success:hover,
.bottom-sheet-modal .list-group-item-action.text-success:hover,
.offcanvas .list-group-item-action.text-success:hover,
.modal .list-group-item-action.text-success:focus,
.bottom-sheet-modal .list-group-item-action.text-success:focus,
.offcanvas .list-group-item-action.text-success:focus {
  color: var(--bs-success, #71dd37) !important;
}

.modal .list-group-item-action:is(.text-info, .text-warning, .text-primary, .text-success, .text-danger) *,
.bottom-sheet-modal .list-group-item-action:is(.text-info, .text-warning, .text-primary, .text-success, .text-danger) *,
.offcanvas .list-group-item-action:is(.text-info, .text-warning, .text-primary, .text-success, .text-danger) * {
  color: inherit !important;
}

/* WhatsApp Brand Green (#25D366) strictly for Admin Contact Modal (#adminPopup) */
#adminPopup .brand-whatsapp,
#adminPopup .ri-whatsapp-line,
#adminPopup .ri-whatsapp-fill,
#adminListContainer .brand-whatsapp,
#adminListContainer .ri-whatsapp-line,
#adminListContainer .ri-whatsapp-fill,
.modal #adminListContainer .brand-whatsapp,
.modal #adminListContainer .ri-whatsapp-line,
.modal #adminListContainer .ri-whatsapp-fill,
.bottom-sheet-modal #adminListContainer .brand-whatsapp,
.bottom-sheet-modal #adminListContainer .ri-whatsapp-line,
.bottom-sheet-modal #adminListContainer .ri-whatsapp-fill,
[data-bs-theme="dark"] #adminPopup .brand-whatsapp,
[data-bs-theme="dark"] #adminPopup .ri-whatsapp-line,
[data-bs-theme="dark"] #adminPopup .ri-whatsapp-fill,
[data-bs-theme="dark"] #adminListContainer .brand-whatsapp,
[data-bs-theme="dark"] #adminListContainer .ri-whatsapp-line,
[data-bs-theme="dark"] #adminListContainer .ri-whatsapp-fill {
  color: var(--bs-brand-whatsapp, #25D366) !important;
}

.modal .list-group-item-action .text-muted,
.bottom-sheet-modal .list-group-item-action .text-muted,
.offcanvas .list-group-item-action .text-muted {
  color: var(--bs-secondary-color, #707070) !important;
}


/* Modal Inner Data Key-Value Row Dividers */
[data-bs-theme="dark"] .modal .border-bottom:not(.modal-header),
[data-bs-theme="dark"] .bottom-sheet-modal .border-bottom:not(.modal-header) {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

/* ==========================================================================
   4. Buttons & Actions in Modals (.modal-footer, .btn-group)
   ========================================================================== */

.modal .btn-group,
.bottom-sheet-modal .btn-group {
  border-radius: 0.5rem;
}

.modal .btn-group .btn,
.bottom-sheet-modal .btn-group .btn {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
}

/* Modal Cancel / Secondary Actions: btn-label-secondary aesthetic (Soft subtle background, calm readability, zero outline) */
.modal-footer .btn-outline-secondary,
.modal-footer .btn-secondary,
.modal-footer .btn-label-secondary,
.modal-footer button[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-close),
.modal-footer a[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
.bottom-sheet-modal .modal-footer .btn-outline-secondary,
.bottom-sheet-modal .modal-footer .btn-secondary,
.bottom-sheet-modal .modal-footer .btn-label-secondary,
.bottom-sheet-modal .modal-footer button[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-close) {
  background-color: rgba(var(--bs-secondary-rgb, 112, 112, 112), 0.14) !important;
  border: none !important;
  border-color: transparent !important;
  color: var(--bs-secondary, #707070) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.modal-footer .btn-outline-secondary:hover:not(:disabled):not(.disabled),
.modal-footer .btn-secondary:hover:not(:disabled):not(.disabled),
.modal-footer .btn-label-secondary:hover:not(:disabled):not(.disabled),
.modal-footer button[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-close):hover:not(:disabled):not(.disabled),
.bottom-sheet-modal .modal-footer .btn-outline-secondary:hover:not(:disabled):not(.disabled),
.bottom-sheet-modal .modal-footer .btn-secondary:hover:not(:disabled):not(.disabled),
.bottom-sheet-modal .modal-footer .btn-label-secondary:hover:not(:disabled):not(.disabled) {
  background-color: var(--bs-secondary, #707070) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

[data-bs-theme="dark"] .modal-footer .btn-outline-secondary,
[data-bs-theme="dark"] .modal-footer .btn-secondary,
[data-bs-theme="dark"] .modal-footer .btn-label-secondary,
[data-bs-theme="dark"] .modal-footer button[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-close),
[data-bs-theme="dark"] .modal-footer a[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning),
[data-bs-theme="dark"] .bottom-sheet-modal .modal-footer .btn-outline-secondary,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-footer .btn-secondary,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-footer .btn-label-secondary,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-footer button[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-close) {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: none !important;
  border-color: transparent !important;
  color: var(--bs-gray-700, #cecece) !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal-footer .btn-outline-secondary:hover:not(:disabled):not(.disabled),
[data-bs-theme="dark"] .modal-footer .btn-secondary:hover:not(:disabled):not(.disabled),
[data-bs-theme="dark"] .modal-footer .btn-label-secondary:hover:not(:disabled):not(.disabled),
[data-bs-theme="dark"] .modal-footer button[data-bs-dismiss="modal"]:not(.btn-primary):not(.btn-danger):not(.btn-success):not(.btn-warning):not(.btn-close):hover:not(:disabled):not(.disabled),
[data-bs-theme="dark"] .bottom-sheet-modal .modal-footer .btn-outline-secondary:hover:not(:disabled):not(.disabled),
[data-bs-theme="dark"] .bottom-sheet-modal .modal-footer .btn-secondary:hover:not(:disabled):not(.disabled),
[data-bs-theme="dark"] .bottom-sheet-modal .modal-footer .btn-label-secondary:hover:not(:disabled):not(.disabled) {
  background-color: rgba(255, 255, 255, 0.16) !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* ==========================================================================
   5. Form Controls & Inputs in Modals
   ========================================================================== */

/* Search Box in Modals & Offcanvas - Seamless Solid Pill, strictly ZERO border, ZERO hover styling, ZERO scale transition */
.modal .rsa-search-box,
.modal .rsa-search-box:hover,
.bottom-sheet-modal .rsa-search-box,
.bottom-sheet-modal .rsa-search-box:hover,
.offcanvas .rsa-search-box,
.offcanvas .rsa-search-box:hover {
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
  -webkit-transition: none !important;
  border: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.modal .rsa-search-box__input,
.modal .rsa-search-box input,
.modal input.rsa-search-box__input,
.modal input.form-control.rsa-search-box__input,
.modal input[type="text"][id*="search"],
.modal input[type="text"][id*="Search"],
.modal .rsa-search-box:hover .rsa-search-box__input,
.modal .rsa-search-box:hover input,
.modal .rsa-search-box__input:hover,
.bottom-sheet-modal .rsa-search-box__input,
.bottom-sheet-modal .rsa-search-box input,
.bottom-sheet-modal input.rsa-search-box__input,
.bottom-sheet-modal input.form-control.rsa-search-box__input,
.bottom-sheet-modal input[type="text"][id*="search"],
.bottom-sheet-modal input[type="text"][id*="Search"],
.bottom-sheet-modal .rsa-search-box:hover .rsa-search-box__input,
.bottom-sheet-modal .rsa-search-box:hover input,
.bottom-sheet-modal .rsa-search-box__input:hover,
.offcanvas .rsa-search-box__input,
.offcanvas .rsa-search-box input,
.offcanvas input.rsa-search-box__input,
.offcanvas input.form-control.rsa-search-box__input,
.offcanvas input[type="text"][id*="search"],
.offcanvas input[type="text"][id*="Search"],
.offcanvas .rsa-search-box:hover .rsa-search-box__input,
.offcanvas .rsa-search-box:hover input,
.offcanvas .rsa-search-box__input:hover {
  background-color: var(--bs-input-filled-bg, #e5e5e5) !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  outline-width: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: border-color 0.15s ease !important;
  -webkit-transition: border-color 0.15s ease !important;
  animation: none !important;
  color: var(--bs-body-color) !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
}

[data-bs-theme="dark"] .modal .rsa-search-box__input,
[data-bs-theme="dark"] .modal .rsa-search-box input,
[data-bs-theme="dark"] .modal input.rsa-search-box__input,
[data-bs-theme="dark"] .modal input.form-control.rsa-search-box__input,
[data-bs-theme="dark"] .modal input[type="text"][id*="search"],
[data-bs-theme="dark"] .modal input[type="text"][id*="Search"],
[data-bs-theme="dark"] .modal input.form-control[placeholder*="Cari"],
[data-bs-theme="dark"] .modal input.form-control[placeholder*="Search"],
[data-bs-theme="dark"] .modal .rsa-search-box:hover .rsa-search-box__input,
[data-bs-theme="dark"] .modal .rsa-search-box:hover input,
[data-bs-theme="dark"] .modal .rsa-search-box__input:hover,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box__input,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box input,
[data-bs-theme="dark"] .bottom-sheet-modal input.rsa-search-box__input,
[data-bs-theme="dark"] .bottom-sheet-modal input.form-control.rsa-search-box__input,
[data-bs-theme="dark"] .bottom-sheet-modal input[type="text"][id*="search"],
[data-bs-theme="dark"] .bottom-sheet-modal input[type="text"][id*="Search"],
[data-bs-theme="dark"] .bottom-sheet-modal input.form-control[placeholder*="Cari"],
[data-bs-theme="dark"] .bottom-sheet-modal input.form-control[placeholder*="Search"],
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box:hover .rsa-search-box__input,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box:hover input,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box__input:hover,
[data-bs-theme="dark"] .offcanvas .rsa-search-box__input,
[data-bs-theme="dark"] .offcanvas .rsa-search-box input,
[data-bs-theme="dark"] .offcanvas input.rsa-search-box__input,
[data-bs-theme="dark"] .offcanvas input.form-control.rsa-search-box__input,
[data-bs-theme="dark"] .offcanvas input[type="text"][id*="search"],
[data-bs-theme="dark"] .offcanvas input[type="text"][id*="Search"],
[data-bs-theme="dark"] .offcanvas input.form-control[placeholder*="Cari"],
[data-bs-theme="dark"] .offcanvas input.form-control[placeholder*="Search"],
[data-bs-theme="dark"] .offcanvas .rsa-search-box:hover .rsa-search-box__input,
[data-bs-theme="dark"] .offcanvas .rsa-search-box:hover input,
[data-bs-theme="dark"] .offcanvas .rsa-search-box__input:hover {
  background-color: var(--bs-search-box-bg, var(--bs-surface-elevated)) !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  outline-width: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  transition: border-color 0.15s ease !important;
  -webkit-transition: border-color 0.15s ease !important;
  animation: none !important;
  color: #ffffff !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  box-sizing: border-box !important;
}

/* Modal Search Box - FOCUS & ACTIVE state (Same as page: orange border, icon orange, background stays identical) */
.modal .rsa-search-box__input:focus,
.modal .rsa-search-box__input:focus-visible,
.modal .rsa-search-box__input:active,
.modal input.rsa-search-box__input:focus,
.modal input.rsa-search-box__input:focus-visible,
.modal input.rsa-search-box__input:active,
.modal input.form-control.rsa-search-box__input:focus,
.modal input.form-control.rsa-search-box__input:focus-visible,
.modal input.form-control.rsa-search-box__input:active,
.modal .rsa-search-box input:focus,
.modal .rsa-search-box input:focus-visible,
.modal .rsa-search-box input:active,
.modal input[type="text"][id*="search"]:focus,
.modal input[type="text"][id*="search"]:active,
.modal input[type="text"][id*="Search"]:focus,
.modal input[type="text"][id*="Search"]:active,
.modal input.form-control[placeholder*="Cari"]:focus,
.modal input.form-control[placeholder*="Cari"]:active,
.modal input.form-control[placeholder*="Search"]:focus,
.modal input.form-control[placeholder*="Search"]:active,
.modal .rsa-search-box:focus-within .rsa-search-box__input,
.modal .rsa-search-box:focus-within input,
.bottom-sheet-modal .rsa-search-box__input:focus,
.bottom-sheet-modal .rsa-search-box__input:focus-visible,
.bottom-sheet-modal .rsa-search-box__input:active,
.bottom-sheet-modal input.rsa-search-box__input:focus,
.bottom-sheet-modal input.rsa-search-box__input:active,
.bottom-sheet-modal input.form-control.rsa-search-box__input:focus,
.bottom-sheet-modal input.form-control.rsa-search-box__input:active,
.bottom-sheet-modal input[type="text"][id*="search"]:focus,
.bottom-sheet-modal input[type="text"][id*="search"]:active,
.bottom-sheet-modal .rsa-search-box:focus-within .rsa-search-box__input,
.bottom-sheet-modal .rsa-search-box:focus-within input,
.offcanvas .rsa-search-box__input:focus,
.offcanvas .rsa-search-box__input:focus-visible,
.offcanvas .rsa-search-box__input:active,
.offcanvas input.rsa-search-box__input:focus,
.offcanvas input.rsa-search-box__input:active,
.offcanvas input.form-control.rsa-search-box__input:focus,
.offcanvas input.form-control.rsa-search-box__input:active,
.offcanvas input[type="text"][id*="search"]:focus,
.offcanvas input[type="text"][id*="search"]:active,
.offcanvas .rsa-search-box:focus-within .rsa-search-box__input,
.offcanvas .rsa-search-box:focus-within input {
  background-color: var(--bs-input-filled-bg, #e5e5e5) !important;
  border: 1px solid var(--bs-primary, #ff5911) !important;
  border-color: var(--bs-primary, #ff5911) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  outline-width: 0 !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] .modal .rsa-search-box__input:focus,
[data-bs-theme="dark"] .modal .rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] .modal .rsa-search-box__input:active,
[data-bs-theme="dark"] .modal input.rsa-search-box__input:focus,
[data-bs-theme="dark"] .modal input.rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] .modal input.rsa-search-box__input:active,
[data-bs-theme="dark"] .modal input.form-control.rsa-search-box__input:focus,
[data-bs-theme="dark"] .modal input.form-control.rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] .modal input.form-control.rsa-search-box__input:active,
[data-bs-theme="dark"] .modal .rsa-search-box input:focus,
[data-bs-theme="dark"] .modal .rsa-search-box input:focus-visible,
[data-bs-theme="dark"] .modal .rsa-search-box input:active,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box__input:focus,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] .bottom-sheet-modal .rsa-search-box__input:active,
[data-bs-theme="dark"] .bottom-sheet-modal input.rsa-search-box__input:focus,
[data-bs-theme="dark"] .bottom-sheet-modal input.rsa-search-box__input:active,
[data-bs-theme="dark"] .bottom-sheet-modal input.form-control.rsa-search-box__input:focus,
[data-bs-theme="dark"] .bottom-sheet-modal input.form-control.rsa-search-box__input:active,
[data-bs-theme="dark"] .offcanvas .rsa-search-box__input:focus,
[data-bs-theme="dark"] .offcanvas .rsa-search-box__input:focus-visible,
[data-bs-theme="dark"] .offcanvas .rsa-search-box__input:active,
[data-bs-theme="dark"] .offcanvas input.rsa-search-box__input:focus,
[data-bs-theme="dark"] .offcanvas input.rsa-search-box__input:active,
[data-bs-theme="dark"] .offcanvas input.form-control.rsa-search-box__input:focus,
[data-bs-theme="dark"] .offcanvas input.form-control.rsa-search-box__input:active {
  background-color: var(--bs-search-box-bg, var(--bs-surface-elevated)) !important;
  border: 1px solid var(--bs-primary, #ff5911) !important;
  border-color: var(--bs-primary, #ff5911) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  outline: none !important;
  outline-width: 0 !important;
  color: #ffffff !important;
}

/* Modal Search Icon on focus-within: turns primary orange */
.modal .rsa-search-box:focus-within .rsa-search-box__icon,
.modal .rsa-search-box:focus-within > .material-symbols-outlined,
.modal .position-relative:has(> .material-symbols-outlined):focus-within > .material-symbols-outlined,
.modal .position-relative:has(> .material-symbols-outlined) input:focus ~ .material-symbols-outlined,
.bottom-sheet-modal .rsa-search-box:focus-within .rsa-search-box__icon,
.bottom-sheet-modal .rsa-search-box:focus-within > .material-symbols-outlined,
.offcanvas .rsa-search-box:focus-within .rsa-search-box__icon,
.offcanvas .rsa-search-box:focus-within > .material-symbols-outlined {
  color: var(--bs-primary, #ff5911) !important;
}

/* Clear button inside modal search boxes: strictly stationary at translateY(-50%) on all states */
.modal .rsa-search-box__clear,
.modal button.rsa-search-box__clear,
.bottom-sheet-modal .rsa-search-box__clear,
.bottom-sheet-modal button.rsa-search-box__clear,
.offcanvas .rsa-search-box__clear,
.offcanvas button.rsa-search-box__clear,
.modal .rsa-search-box__clear:hover,
.modal .rsa-search-box__clear:focus,
.modal .rsa-search-box__clear:focus-visible,
.modal .rsa-search-box__clear:active,
.modal button.rsa-search-box__clear:active,
.modal button.rsa-search-box__clear:hover:active,
.bottom-sheet-modal .rsa-search-box__clear:active,
.bottom-sheet-modal button.rsa-search-box__clear:active,
.offcanvas .rsa-search-box__clear:active,
.offcanvas button.rsa-search-box__clear:active {
  top: 50% !important;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: color 0.15s ease !important;
}

.modal .rsa-search-box__clear > i,
.modal .rsa-search-box__clear > .material-symbols-outlined,
.modal .rsa-search-box__clear:active > i,
.modal .rsa-search-box__clear:active > .material-symbols-outlined,
.bottom-sheet-modal .rsa-search-box__clear:active > i,
.bottom-sheet-modal .rsa-search-box__clear:active > .material-symbols-outlined,
.offcanvas .rsa-search-box__clear:active > i,
.offcanvas .rsa-search-box__clear:active > .material-symbols-outlined {
  transform: none !important;
  -webkit-transform: none !important;
  transition: none !important;
}

/* Form Controls & Inputs in Modals matching btn-close */
.modal .form-control:not(:focus):not(.rsa-search-box__input),
.modal .form-select:not(:focus),
.modal .modal-dropzone,
.bottom-sheet-modal .form-control:not(:focus):not(.rsa-search-box__input),
.bottom-sheet-modal .form-select:not(:focus),
.bottom-sheet-modal .modal-dropzone {
  background-color: var(--bs-input-filled-bg, #e5e5e5) !important;
}

.modal .modal-dropzone,
.bottom-sheet-modal .modal-dropzone {
  border: 1.5px dashed var(--bs-border-color, rgba(0, 0, 0, 0.15)) !important;
  border-radius: var(--bs-input-border-radius, var(--bs-card-border-radius, 1rem)) !important;
}

[data-bs-theme="dark"] .modal .modal-dropzone,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-dropzone {
  background-color: var(--bs-input-filled-bg, var(--bs-surface-elevated)) !important;
}

[data-bs-theme="dark"] .modal .modal-dropzone,
[data-bs-theme="dark"] .bottom-sheet-modal .modal-dropzone {
  border: 1.5px dashed rgba(255, 255, 255, 0.18) !important;
}

.modal .modal-dropzone.border-primary,
.bottom-sheet-modal .modal-dropzone.border-primary {
  border-color: var(--bs-primary) !important;
}

/* Ensure child elements inside dropzones don't intercept drag events causing dragleave/drop failure */
.modal-dropzone > *,
#batchDropzone > *,
#batchMobileDropzone > *,
#batchAvatarDropzone > *,
#cardDropzone > *,
#avatarDropzone > *,
#guidePdfDropzone > *,
#uploadZoneDesktop > *,
#uploadZoneMobile > *,
.btn-pick-slot-desktop > *,
.btn-pick-slot-mobile > *,
#importClassesDropzone > *,
#importMembersDropzone > *,
#importStaffDropzone > *,
#importDropzone > *,
#importMaterialsDropzone > *,
#materialFileDropzone > *,
#avatarPreviewContainer > *,
#btn-add-screenshot > *,
[id^="slider_dropzone_"] > * {
  pointer-events: none;
}

/* Dropdown Button (Tom Select & Native Select) Uniform var(--bs-control-height, 44px) Height & Pill Radius matching modal inputs and buttons */
.modal .form-control:not(textarea),
.modal select.form-select,
.modal select.form-select:disabled,
.modal select.form-select[disabled],
.modal select.form-select.disabled,
.modal .ts-control,
.modal .ts-wrapper .ts-control,
.modal .ts-wrapper.single .ts-control,
.modal .ts-wrapper.multi .ts-control,
.modal .ts-wrapper.is-disabled .ts-control,
.modal .ts-wrapper.disabled .ts-control,
.modal .ts-wrapper:has(select:disabled) .ts-control,
.modal .ts-wrapper.dropdown-active .ts-control,
.modal .ts-wrapper.focus .ts-control,
.modal .ts-wrapper.is-open .ts-control,
.modal .flatpickr-input,
.modal input.flatpickr-input,
.modal #edit_session_date,
.modal #pastSessionDate,
.modal-footer .btn,
.bottom-sheet-modal .form-control:not(textarea),
.bottom-sheet-modal select.form-select,
.bottom-sheet-modal select.form-select:disabled,
.bottom-sheet-modal select.form-select[disabled],
.bottom-sheet-modal .ts-control,
.bottom-sheet-modal .ts-wrapper .ts-control,
.bottom-sheet-modal .ts-wrapper.single .ts-control,
.bottom-sheet-modal .ts-wrapper.is-disabled .ts-control,
.bottom-sheet-modal .ts-wrapper.disabled .ts-control,
.bottom-sheet-modal .ts-wrapper.dropdown-active .ts-control {
  min-height: var(--bs-control-height, 44px) !important;
  height: var(--bs-control-height, 44px) !important;
  max-height: var(--bs-control-height, 44px) !important;
  box-sizing: border-box !important;
  border-radius: var(--bs-input-border-radius, var(--bs-card-border-radius, 1rem)) !important;
  -webkit-border-radius: var(--bs-input-border-radius, var(--bs-card-border-radius, 1rem)) !important;
}

.modal .ts-control,
.modal .ts-wrapper .ts-control,
.modal .ts-wrapper.single .ts-control,
.modal .ts-wrapper.is-disabled .ts-control,
.modal .ts-wrapper.disabled .ts-control,
.modal select.form-select,
.modal select.form-select:disabled,
.bottom-sheet-modal .ts-control,
.bottom-sheet-modal .ts-wrapper .ts-control,
.bottom-sheet-modal .ts-wrapper.single .ts-control,
.bottom-sheet-modal .ts-wrapper.is-disabled .ts-control,
.bottom-sheet-modal .ts-wrapper.disabled .ts-control,
.bottom-sheet-modal select.form-select,
.bottom-sheet-modal select.form-select:disabled {
  padding-left: 1.15rem !important;
  padding-right: 2.25rem !important;
  font-size: 0.9375rem !important;
  line-height: normal !important;
}

/* Unified Disabled Select & Control in Modals (Light Theme) */
.modal .ts-wrapper.is-disabled .ts-control,
.modal .ts-wrapper.disabled .ts-control,
.modal .ts-wrapper:has(select:disabled) .ts-control,
.modal select.form-select:disabled,
.modal select.form-select[disabled],
.modal select.form-select.disabled,
.modal .form-control:disabled,
.bottom-sheet-modal .ts-wrapper.is-disabled .ts-control,
.bottom-sheet-modal .ts-wrapper.disabled .ts-control,
.bottom-sheet-modal select.form-select:disabled {
  background-color: rgba(0, 0, 0, 0.04) !important;
  border: none !important;
  border-width: 0 !important;
  color: var(--bs-secondary-color, #8e8e8e) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Unified Disabled Select & Control in Modals (Dark Theme) */
[data-bs-theme="dark"] .modal .ts-wrapper.is-disabled .ts-control,
[data-bs-theme="dark"] .modal .ts-wrapper.disabled .ts-control,
[data-bs-theme="dark"] .modal .ts-wrapper:has(select:disabled) .ts-control,
[data-bs-theme="dark"] .modal select.form-select:disabled,
[data-bs-theme="dark"] .modal select.form-select[disabled],
[data-bs-theme="dark"] .modal select.form-select.disabled,
[data-bs-theme="dark"] .modal .form-control:disabled,
[data-bs-theme="dark"] .bottom-sheet-modal .ts-wrapper.is-disabled .ts-control,
[data-bs-theme="dark"] .bottom-sheet-modal .ts-wrapper.disabled .ts-control,
[data-bs-theme="dark"] .bottom-sheet-modal select.form-select:disabled {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: none !important;
  border-width: 0 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Disabled items & placeholder inside modal TomSelect */
.modal .ts-wrapper.is-disabled .ts-control .item,
.modal .ts-wrapper.is-disabled .ts-control input,
.modal .ts-wrapper.is-disabled .items-placeholder,
.bottom-sheet-modal .ts-wrapper.is-disabled .ts-control .item,
.bottom-sheet-modal .ts-wrapper.is-disabled .ts-control input,
.bottom-sheet-modal .ts-wrapper.is-disabled .items-placeholder {
  color: var(--bs-secondary-color, #8e8e8e) !important;
  cursor: not-allowed !important;
}

[data-bs-theme="dark"] .modal .ts-wrapper.is-disabled .ts-control .item,
[data-bs-theme="dark"] .modal .ts-wrapper.is-disabled .ts-control input,
[data-bs-theme="dark"] .modal .ts-wrapper.is-disabled .items-placeholder,
[data-bs-theme="dark"] .bottom-sheet-modal .ts-wrapper.is-disabled .ts-control .item,
[data-bs-theme="dark"] .bottom-sheet-modal .ts-wrapper.is-disabled .ts-control input,
[data-bs-theme="dark"] .bottom-sheet-modal .ts-wrapper.is-disabled .items-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
  cursor: not-allowed !important;
}

/* Tom Select Dropdown Options / Items inside open dropdown panel */
.ts-dropdown .option,
.ts-dropdown .ts-dropdown-content .option,
[data-dropdown-for] .option,
.modal .ts-dropdown .option {
  border-radius: var(--bs-dropdown-item-border-radius, 0.75rem) !important;
  -webkit-border-radius: var(--bs-dropdown-item-border-radius, 0.75rem) !important;
  padding-left: 0.85rem !important;
  padding-right: 0.85rem !important;
  margin-bottom: 2px !important;
}

/* ==========================================================================
   6. Mobile Safe-Area & Viewport Boundary Guarantee
   Ensures modals, headers, drag handles, and close buttons never overflow past top
   ========================================================================== */
@media (max-width: 767.98px) {

  /* Mobile Bottom Sheet: Default height is content-driven (auto)
     Short if content is little, expands up to max-height (and scrolls) if content is long.
  */
  .modal:not(.modal-fullscreen) .modal-dialog,
  .bottom-sheet-modal .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 28px) !important;
  }

  .modal .modal-content,
  .bottom-sheet-modal .modal-content {
    border-radius: 28px 28px 0 0 !important;
    height: auto !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 28px) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  [data-bs-theme="dark"] .modal .modal-content,
  [data-bs-theme="dark"] .bottom-sheet-modal .modal-content,
  [data-bs-theme="dark"] .bottom-sheet-modal:not(.modal-sm):not(.modal-confirm):not(.modal-alert):not(#bulkDeleteModal) .modal-content,
  [data-bs-theme="dark"] .bottom-sheet-modal.modal-sm .modal-content,
  [data-bs-theme="dark"] .bottom-sheet-modal.modal-confirm .modal-content,
  [data-bs-theme="dark"] .bottom-sheet-modal.modal-alert .modal-content,
  [data-bs-theme="dark"] .bottom-sheet-modal#bulkDeleteModal .modal-content {
    background-color: var(--bs-paper-bg, #1e1e1e) !important;
    --bs-modal-bg: var(--bs-paper-bg, #1e1e1e) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  .modal .modal-body,
  .bottom-sheet-modal .modal-body {
    flex: 0 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior-y: contain !important;
  }

  .modal-content > form,
  form.modal-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .modal-body form,
  .modal-body > form {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    flex: none !important;
    overflow: visible !important;
  }

  .modal-body.text-center form,
  .modal-body.text-center > form {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .modal .modal-footer,
  .bottom-sheet-modal .modal-footer {
    position: sticky !important;
    bottom: 0 !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    background: var(--bs-modal-bg, var(--bs-body-bg, #f6f6f6)) !important;
    border: none !important;
    border-top: none !important;
    border-top-width: 0 !important;
    box-shadow: none !important;
    z-index: 10 !important;
    padding: 0.75rem 1.25rem max(1.25rem, env(safe-area-inset-bottom, 0px)) 1.25rem !important;
  }

  [data-bs-theme="dark"] .modal .modal-footer,
  [data-bs-theme="dark"] .bottom-sheet-modal .modal-footer {
    background: var(--bs-modal-bg, var(--bs-paper-bg, #1e1e1e)) !important;
    border: none !important;
    border-top: none !important;
    border-top-width: 0 !important;
    box-shadow: none !important;
  }

  .modal .modal-footer:not(.d-none),
  .bottom-sheet-modal .modal-footer:not(.d-none) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
  }

  /* 2-Button Grid: Strictly 50:50 Equal Widths */
  .modal .modal-footer:has(> :nth-child(2):last-child):not(.d-none),
  .bottom-sheet-modal .modal-footer:has(> :nth-child(2):last-child):not(.d-none),
  .modal-footer.no-stack:has(> :nth-child(2):last-child):not(.d-none) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .modal .modal-footer:has(> :nth-child(2):last-child) > *,
  .bottom-sheet-modal .modal-footer:has(> :nth-child(2):last-child) > *,
  .modal-footer.no-stack:has(> :nth-child(2):last-child) > * {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .modal .modal-footer:has(> :nth-child(2):last-child) > .dropup,
  .modal .modal-footer:has(> :nth-child(2):last-child) > .dropdown,
  .bottom-sheet-modal .modal-footer:has(> :nth-child(2):last-child) > .dropup,
  .bottom-sheet-modal .modal-footer:has(> :nth-child(2):last-child) > .dropdown,
  .modal-footer.no-stack:has(> :nth-child(2):last-child) > .dropup,
  .modal-footer.no-stack:has(> :nth-child(2):last-child) > .dropdown {
    display: block !important;
    position: relative !important;
    width: 100% !important;
  }

  .modal .modal-footer:has(> :nth-child(2):last-child) > .btn,
  .modal .modal-footer:has(> :nth-child(2):last-child) > * > .btn,
  .bottom-sheet-modal .modal-footer:has(> :nth-child(2):last-child) > .btn,
  .bottom-sheet-modal .modal-footer:has(> :nth-child(2):last-child) > * > .btn,
  .modal-footer.no-stack:has(> :nth-child(2):last-child) > .btn,
  .modal-footer.no-stack:has(> :nth-child(2):last-child) > * > .btn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .modal .modal-footer > .btn:not(.dropdown-item),
  .modal .modal-footer > .dropdown,
  .modal .modal-footer > .dropup,
  .modal .modal-footer > form > .btn,
  .modal .modal-footer > div[class*="col-"]:not(.dropdown-menu),
  .bottom-sheet-modal .modal-footer > .btn:not(.dropdown-item),
  .bottom-sheet-modal .modal-footer > .dropdown,
  .bottom-sheet-modal .modal-footer > .dropup,
  .bottom-sheet-modal .modal-footer > form > .btn,
  .bottom-sheet-modal .modal-footer > div[class*="col-"]:not(.dropdown-menu) {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  .modal .modal-footer > .dropdown > .btn,
  .modal .modal-footer > .dropup > .btn,
  .bottom-sheet-modal .modal-footer > .dropdown > .btn,
  .bottom-sheet-modal .modal-footer > .dropup > .btn {
    width: 100% !important;
  }

  .modal .modal-footer > .btn:only-child,
  .modal .modal-footer > .dropdown:only-child,
  .modal .modal-footer > .dropup:only-child,
  .bottom-sheet-modal .modal-footer > .btn:only-child,
  .bottom-sheet-modal .modal-footer > .dropdown:only-child,
  .bottom-sheet-modal .modal-footer > .dropup:only-child {
    flex: 1 1 100% !important;
    grid-column: 1 / -1 !important;
  }

  /* Full-Page & Builder Modals (Level 3 / Explicit Full Sheets): Body expands to fill available height */
  .modal.modal-sheet-full .modal-dialog,
  .modal.modal-full-height .modal-dialog,
  .modal.modal-level-3 .modal-dialog,
  .modal-sheet-full .modal-dialog,
  #guideEditorModal .modal-dialog,
  #urlParametersHelpModal .modal-dialog,
  #materialsModal .modal-dialog,
  #createClassModal .modal-dialog,
  #addParticipantsModal .modal-dialog,
  #modalCreateBroadcast .modal-dialog,
  #modalEditBroadcast .modal-dialog,
  #contentModal .modal-dialog,
  #guideModal .modal-dialog,
  #modalAddTeam .modal-dialog,
  #modalEditTeam .modal-dialog,
  #modalEditAddress .modal-dialog,
  #recoveryUsersModal .modal-dialog,
  #recoveryClassesModal .modal-dialog,
  #recoveryMaterialsModal .modal-dialog,
  #recoverySessionsModal .modal-dialog,
  #importUsersModal .modal-dialog,
  #importMaterialsModal .modal-dialog,
  #modalRepeatHistory .modal-dialog,
  #modalCapacityDetail .modal-dialog,
  #modalActiveUsers .modal-dialog,
  #modalPrivacy .modal-dialog,
  #modalCookies .modal-dialog,
  #sessionStatusModal .modal-dialog,
  #editProgressModal .modal-dialog {
    height: calc(100dvh - env(safe-area-inset-top, 20px) - 28px) !important;
  }

  .modal.modal-sheet-full .modal-content,
  .modal.modal-full-height .modal-content,
  .modal.modal-level-3 .modal-content,
  .modal-sheet-full .modal-content,
  #guideEditorModal .modal-content,
  #urlParametersHelpModal .modal-content,
  #materialsModal .modal-content,
  #createClassModal .modal-content,
  #addParticipantsModal .modal-content,
  #modalCreateBroadcast .modal-content,
  #modalEditBroadcast .modal-content,
  #contentModal .modal-content,
  #guideModal .modal-content,
  #modalAddTeam .modal-content,
  #modalEditTeam .modal-content,
  #modalEditAddress .modal-content,
  #recoveryUsersModal .modal-content,
  #recoveryClassesModal .modal-content,
  #recoveryMaterialsModal .modal-content,
  #recoverySessionsModal .modal-content,
  #importUsersModal .modal-content,
  #importMaterialsModal .modal-content,
  #modalRepeatHistory .modal-content,
  #modalCapacityDetail .modal-content,
  #modalActiveUsers .modal-content,
  #modalPrivacy .modal-content,
  #modalCookies .modal-content,
  #sessionStatusModal .modal-content,
  #editProgressModal .modal-content {
    height: 100% !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 20px) - 28px) !important;
  }

  .modal.modal-sheet-full .modal-body,
  .modal.modal-full-height .modal-body,
  .modal.modal-level-3 .modal-body,
  .modal-sheet-full .modal-body,
  #guideEditorModal .modal-body,
  #urlParametersHelpModal .modal-body,
  #materialsModal .modal-body,
  #createClassModal .modal-body,
  #addParticipantsModal .modal-body,
  #modalCreateBroadcast .modal-body,
  #modalEditBroadcast .modal-body,
  #contentModal .modal-body,
  #guideModal .modal-body,
  #modalAddTeam .modal-body,
  #modalEditTeam .modal-body,
  #modalEditAddress .modal-body,
  #recoveryUsersModal .modal-body,
  #recoveryClassesModal .modal-body,
  #recoveryMaterialsModal .modal-body,
  #recoverySessionsModal .modal-body,
  #importUsersModal .modal-body,
  #importMaterialsModal .modal-body,
  #modalRepeatHistory .modal-body,
  #modalCapacityDetail .modal-body,
  #modalActiveUsers .modal-body,
  #modalPrivacy .modal-body,
  #modalCookies .modal-body,
  #sessionStatusModal .modal-body,
  #editProgressModal .modal-body {
    flex: 1 1 auto !important;
  }


  #modalEditTeam .modal-body {
    text-align: left !important;
  }

  #modalEditTeam .form-label {
    text-align: left !important;
    display: block !important;
  }

  #modalEditTeam .form-check {
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    padding-left: 0 !important;
    margin-bottom: 0 !important;
  }

  #modalEditTeam .form-check .form-check-input {
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
  }

  #modalEditTeam .form-check .form-check-label {
    text-align: left !important;
    margin-bottom: 0 !important;
  }

  /* Compact / Confirmation Dialogs / Action Sheets */
  .modal.modal-sm .modal-dialog,
  .modal.modal-confirm .modal-dialog,
  .modal.modal-alert .modal-dialog,
  .modal.modal-action-sheet .modal-dialog,
  .modal-action-sheet .modal-dialog,
  .bottom-sheet-modal.modal-sm .modal-dialog,
  .bottom-sheet-modal.modal-action-sheet .modal-dialog,
  #bulkDeleteModal .modal-dialog,
  .modal:has(.modal-sm) .modal-dialog {
    top: auto !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: 85vh !important;
  }

  .modal.modal-sm .modal-content,
  .modal.modal-confirm .modal-content,
  .modal.modal-alert .modal-content,
  .modal.modal-action-sheet .modal-content,
  .modal-action-sheet .modal-content,
  .bottom-sheet-modal.modal-sm .modal-content,
  .bottom-sheet-modal.modal-action-sheet .modal-content,
  #bulkDeleteModal .modal-content,
  .modal:has(.modal-sm) .modal-content {
    border-radius: 28px 28px 0 0 !important;
    height: auto !important;
    max-height: 85vh !important;
  }

  .modal .modal-header,
  .bottom-sheet-modal .modal-header {
    flex-shrink: 0 !important;
    min-height: 56px !important;
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }
}

/* ==========================================================================
   7. Hidden Modal Footer Safeguards
   Guarantees multi-step modals (e.g. #importUsersModal) hide inactive footers
   ========================================================================== */
.modal-footer.d-none,
.modal .modal-footer.d-none,
.modal-dialog .modal-footer.d-none,
.modal-content .modal-footer.d-none,
.bottom-sheet-modal .modal-footer.d-none,
.offcanvas-footer.d-none,
.modal-footer[hidden],
.modal .modal-footer[hidden],
.modal-footer[style*="display: none"],
.modal-footer[style*="display:none"],
#usersReviewFooter.d-none,
#usersUploadFooter.d-none {
  display: none !important;
  visibility: hidden !important;
  min-height: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  overflow: hidden !important;
}

/* ==========================================================================
   7.1. Standard Desktop Centered Floating Modals (@media (min-width: 768px))
   Universal styling for centered dialogs:
   - Modern 24px corner radius & seamless border
   - Premium soft elevation shadow (light & dark mode)
   - Contained vertical scroll within modal-body (max-height: 85vh)
   - Borderless, clean header and sticky footer
   - Single-button full width pill buttons
   ========================================================================== */
@media (min-width: 768px) {
  .modal:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog.modal-dialog-centered,
  .modal.modal-dialog-centered:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog {
    position: relative !important;
    margin: 1.75rem auto !important;
    height: auto !important;
    min-height: calc(100% - 3.5rem) !important;
    max-height: none !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Default width for non-sized centered dialogs */
  .modal:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog.modal-dialog-centered:not(.modal-sm):not(.modal-lg):not(.modal-xl) {
    width: 480px !important;
    max-width: calc(100vw - 2rem) !important;
  }

  .modal:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog.modal-dialog-centered .modal-content,
  .modal.modal-dialog-centered:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-content {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: 85vh !important;
    border-radius: 24px !important;
    -webkit-border-radius: 24px !important;
    border: 1px solid var(--bs-border-color) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  [data-bs-theme="dark"] .modal:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog.modal-dialog-centered .modal-content,
  [data-bs-theme="dark"] .modal.modal-dialog-centered:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-content {
    background-color: var(--bs-paper-bg, #1e1e1e) !important;
    --bs-modal-bg: var(--bs-paper-bg, #1e1e1e) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
  }

  .modal:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog.modal-dialog-centered .modal-header,
  .modal.modal-dialog-centered:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-header {
    flex-shrink: 0 !important;
    padding: 1.25rem 1.25rem 0.5rem 1.25rem !important;
  }

  .modal:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog.modal-dialog-centered .modal-body,
  .modal.modal-dialog-centered:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    padding: 0.75rem 1.25rem 1rem 1.25rem !important;
  }

  .modal:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-dialog.modal-dialog-centered .modal-footer,
  .modal.modal-dialog-centered:not(.bottom-sheet-modal):not(.modal-fullscreen) .modal-footer {
    flex-shrink: 0 !important;
    padding: 0.75rem 1.25rem 1.25rem 1.25rem !important;
    background-color: transparent !important;
    border-top: none !important;
    border-top-width: 0 !important;
  }

  /* Single-button footers in centered modals: full-width pill button */
  .modal:not(.bottom-sheet-modal) .modal-footer > .btn:only-child,
  .modal:not(.bottom-sheet-modal) .modal-footer > form:only-child > .btn,
  .modal:not(.bottom-sheet-modal) .modal-footer > div:only-child > .btn {
    width: 100% !important;
    flex: 1 1 100% !important;
    min-height: var(--bs-control-height, 44px) !important;
    height: var(--bs-control-height, 44px) !important;
    border-radius: 50rem !important;
  }
}

/* ==========================================================================
   8. Dashboard Announcement & Multi-Step Popup Modal Styles
   Standardized with Global Modal Close Button Design System
   ========================================================================== */
.modal .modal-content .popup-close-btn,
.modal-content .popup-close-btn,
.modal .popup-close-btn,
#dashboardAnnouncementModal .btn-close,
#previewPopupModal .btn-close {
  position: absolute !important;
  top: 0.875rem !important;
  bottom: auto !important;
  right: 1.25rem !important;
  left: auto !important;
  inset-block-start: 0.875rem !important;
  inset-inline-start: auto !important;
  inset-block-end: auto !important;
  inset-inline-end: 1.25rem !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--bs-modal-btn-close-bg, #e5e5e5) !important;
  background-image: none !important;
  color: var(--bs-secondary, #707070) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: pointer !important;
  z-index: 1065 !important;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.2s ease, color 0.2s ease !important;
}

@media (hover: hover) and (pointer: fine) {
  .modal .modal-content .popup-close-btn:hover,
  .modal .popup-close-btn:hover,
  #dashboardAnnouncementModal .btn-close:hover,
  #previewPopupModal .btn-close:hover {
    transform: none !important;
    -webkit-transform: none !important;
    outline: 0 !important;
    box-shadow: none !important;
    background-color: var(--bs-modal-btn-close-hover-bg, #d9d9d9) !important;
    color: var(--bs-gray-900, #1a1a1a) !important;
  }
}

.modal .modal-content .popup-close-btn:active,
.modal .popup-close-btn:active,
#dashboardAnnouncementModal .btn-close:active,
#previewPopupModal .btn-close:active {
  transform: scale(0.90) !important;
  -webkit-transform: scale(0.90) !important;
  transition: transform 0.08s ease !important;
  background-color: var(--bs-btn-circle-active-bg, rgba(0, 0, 0, 0.14)) !important;
  color: var(--bs-btn-circle-hover-color, #111111) !important;
}

/* Glassmorphism close button overlay ONLY when modal has banner image */
.popup-has-banner .popup-close-btn,
.modal .popup-has-banner .popup-close-btn,
#dashboardAnnouncementModal .popup-has-banner .btn-close,
#previewPopupModal .popup-has-banner .btn-close {
  background-color: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .popup-has-banner .popup-close-btn:hover,
  .modal .popup-has-banner .popup-close-btn:hover,
  #dashboardAnnouncementModal .popup-has-banner .btn-close:hover,
  #previewPopupModal .popup-has-banner .btn-close:hover {
    background-color: rgba(0, 0, 0, 0.7) !important;
    color: #ffffff !important;
  }
}

/* Dark Mode Theme matching standard modal */
[data-bs-theme="dark"] .modal .modal-content .popup-close-btn:not(.popup-has-banner .popup-close-btn),
[data-bs-theme="dark"] #dashboardAnnouncementModal .btn-close:not(.popup-has-banner .btn-close),
[data-bs-theme="dark"] #previewPopupModal .btn-close:not(.popup-has-banner .btn-close) {
  background-color: var(--bs-modal-btn-close-bg, var(--bs-surface-elevated)) !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
  [data-bs-theme="dark"] .modal .modal-content .popup-close-btn:not(.popup-has-banner .popup-close-btn):hover,
  [data-bs-theme="dark"] #dashboardAnnouncementModal .btn-close:not(.popup-has-banner .btn-close):hover,
  [data-bs-theme="dark"] #previewPopupModal .btn-close:not(.popup-has-banner .btn-close):hover {
    background-color: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
  }
}

[data-bs-theme="dark"] .modal .modal-content .popup-close-btn:not(.popup-has-banner .popup-close-btn):active,
[data-bs-theme="dark"] #dashboardAnnouncementModal .btn-close:not(.popup-has-banner .btn-close):active,
[data-bs-theme="dark"] #previewPopupModal .btn-close:not(.popup-has-banner .btn-close):active {
  background-color: rgba(255, 255, 255, 0.22) !important;
}

/* Popup Modal Container Elevation & Surface Guarantee */
#previewPopupModal,
#dashboardAnnouncementModal {
  z-index: 1095 !important;
}

#previewPopupModal .modal-dialog,
#dashboardAnnouncementModal .modal-dialog {
  z-index: 1096 !important;
}

#previewPopupModal .modal-content,
#dashboardAnnouncementModal .modal-content {
  background-color: var(--bs-paper-bg, #ffffff) !important;
  color: var(--bs-body-color) !important;
}

[data-bs-theme="dark"] #previewPopupModal .modal-content,
[data-bs-theme="dark"] #dashboardAnnouncementModal .modal-content {
  background-color: var(--bs-paper-bg, #1e1e1e) !important;
  color: #ffffff !important;
}

/* Popup Content Typography - Clean Left-Aligned Modern Onboarding */
.popup-heading {
  display: block !important;
  text-align: left !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  margin: 0 0 0.5rem 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  letter-spacing: -0.01em !important;
  color: var(--bs-heading-color) !important;
}

[data-bs-theme="dark"] .popup-heading {
  color: #ffffff !important;
}

.popup-description {
  display: block !important;
  text-align: left !important;
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: var(--bs-secondary-color, var(--bs-secondary)) !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: normal !important;
}

.popup-description:empty {
  display: none !important;
}

.popup-description > br:first-child {
  display: none !important;
}

[data-bs-theme="dark"] .popup-description {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Stepper Dots */
.popup-stepper-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.18);
  transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
}

.popup-stepper-dot:hover:not(.active) {
  background-color: rgba(0, 0, 0, 0.35);
  transform: scale(1.2);
}

[data-bs-theme="dark"] .popup-stepper-dot {
  background-color: rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"] .popup-stepper-dot:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.45);
}

.popup-stepper-dot.active {
  width: 24px;
  border-radius: 999px;
  background-color: var(--bs-primary) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* ==========================================================================
   Popup Announcement & Multi-Step Slider: Mobile Centered Floating Guarantee
   ========================================================================== */
#dashboardAnnouncementModal,
#previewPopupModal {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#dashboardAnnouncementModal .modal-dialog,
#previewPopupModal .modal-dialog,
.modal#dashboardAnnouncementModal .modal-dialog,
.modal#previewPopupModal .modal-dialog {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: calc(100dvh - 2rem) !important;
  min-height: calc(100vh - 2rem) !important;
  margin: 1rem auto !important;
  max-width: 520px !important;
  width: calc(100% - 2rem) !important;
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  max-height: none !important;
  z-index: 1065 !important;
}

#dashboardAnnouncementModal.modal-lg .modal-dialog,
#previewPopupModal.modal-lg .modal-dialog,
.modal#dashboardAnnouncementModal.modal-lg .modal-dialog,
.modal#previewPopupModal.modal-lg .modal-dialog {
  max-width: 520px !important;
}

/* Strictly disable mobile bottom-sheet drag indicator pill */
#dashboardAnnouncementModal .modal-content::before,
#previewPopupModal .modal-content::before,
.modal#dashboardAnnouncementModal .modal-content::before,
.modal#previewPopupModal .modal-content::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Ensure full rounded border radius on all 4 corners and flexible vertical containment */
#dashboardAnnouncementModal .modal-content,
#previewPopupModal .modal-content,
.modal#dashboardAnnouncementModal .modal-content,
.modal#previewPopupModal .modal-content {
  border-radius: 1.25rem !important;
  overflow: hidden !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  max-height: calc(100dvh - 2rem) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ==========================================================================
   Popup Scale-In Center Animation (Mobile & Desktop)
   Animasi muncul scale kecil dari tengah halaman (Center Zoom Pop-In)
   ========================================================================== */
#dashboardAnnouncementModal.modal.fade .modal-dialog,
#previewPopupModal.modal.fade .modal-dialog,
.modal.fade#dashboardAnnouncementModal .modal-dialog,
.modal.fade#previewPopupModal .modal-dialog {
  opacity: 0 !important;
  transform: scale(0.95) translate3d(0, 0, 0) !important;
  -webkit-transform: scale(0.95) translate3d(0, 0, 0) !important;
  transform-origin: center center !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.20s ease-out !important;
  will-change: transform, opacity !important;
}

#dashboardAnnouncementModal.modal.show .modal-dialog,
#previewPopupModal.modal.show .modal-dialog,
.modal.show#dashboardAnnouncementModal .modal-dialog,
.modal.show#previewPopupModal .modal-dialog,
.modal.show#dashboardAnnouncementModal:not(.is-dragging) .modal-dialog,
.modal.show#previewPopupModal:not(.is-dragging) .modal-dialog {
  opacity: 1 !important;
  transform: scale(1) translate3d(0, 0, 0) !important;
  -webkit-transform: scale(1) translate3d(0, 0, 0) !important;
}

/* Static backdrop click effect: subtle bounce feedback */
#dashboardAnnouncementModal.modal.modal-static .modal-dialog,
#previewPopupModal.modal.modal-static .modal-dialog,
.modal.modal-static#dashboardAnnouncementModal .modal-dialog,
.modal.modal-static#previewPopupModal .modal-dialog {
  transform: scale(1.03) translate3d(0, 0, 0) !important;
  -webkit-transform: scale(1.03) translate3d(0, 0, 0) !important;
  transition: transform 0.14s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Full banner preservation - exact 2:1 aspect ratio guarantee (matching 1600x800 banner standard, zero crop) */
.popup-banner-box {
  width: 100% !important;
  aspect-ratio: 2 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  background-color: var(--bs-body-bg) !important;
  display: block !important;
  overflow: hidden !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
}

/* Loading state: subtle skeleton shimmer (removed once image is ready) */
.popup-banner-box:not(.is-ready) {
  background: linear-gradient(90deg, var(--bs-body-bg) 0%, rgba(255, 255, 255, 0.05) 50%, var(--bs-body-bg) 100%) !important;
  background-size: 200% 100% !important;
  animation: bannerSkeletonShimmer 2.2s infinite ease-in-out;
}

.popup-banner-box img,
.popup-banner-img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 2 / 1 !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  border-radius: 0 !important;
  opacity: 0;
  transition: opacity 0.25s ease-out !important;
  will-change: opacity;
}

.popup-banner-box.is-ready img,
.popup-banner-box img.is-loaded,
.popup-banner-img.is-loaded {
  opacity: 1 !important;
}

/* Ensure inner carousel scrolls gracefully if total height exceeds viewport */
#dashboardAnnouncementModal .modal-content,
#previewPopupModal .modal-content,
.modal#dashboardAnnouncementModal .modal-content,
.modal#previewPopupModal .modal-content {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 1.25rem !important;
}

/* ==========================================================================
   Multi-Step Popup Stepper - Dynamic Smooth Auto-Height & Zero Scrollbars
   Tinggi menyesuaikan isi konten secara natural dan bertransisi mulus
   ========================================================================== */
#dashboardAnnouncementModal .carousel,
#previewPopupModal .carousel,
#carouselDashboardAnnouncement,
#carouselPopupPreviewStepper {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  overflow: hidden !important;
}

#dashboardAnnouncementModal .carousel-inner,
#previewPopupModal .carousel-inner,
#carouselDashboardAnnouncement .carousel-inner,
#carouselPopupPreviewStepper .carousel-inner {
  position: relative !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  transition: height 0.35s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: height;
}

/* Stored steps item in Edit Popup Dashboard modal */
.popup-existing-slide-item {
  background-color: var(--bs-card-bg, #ffffff) !important;
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08)) !important;
  color: var(--bs-body-color) !important;
  border-radius: 0.75rem !important;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

[data-bs-theme="dark"] .popup-existing-slide-item {
  background-color: var(--bs-modal-card-bg, var(--bs-surface-elevated)) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
}

#dashboardAnnouncementModal .carousel-item,
#previewPopupModal .carousel-item,
#carouselDashboardAnnouncement .carousel-item,
#carouselPopupPreviewStepper .carousel-item {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: none;
  flex-direction: column !important;
  transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

#carouselDashboardAnnouncement .carousel-item.active,
#carouselDashboardAnnouncement .carousel-item-next,
#carouselDashboardAnnouncement .carousel-item-prev,
#carouselPopupPreviewStepper .carousel-item.active,
#carouselPopupPreviewStepper .carousel-item-next,
#carouselPopupPreviewStepper .carousel-item-prev {
  display: flex !important;
}

#dashboardAnnouncementModal .modal-body,
#previewPopupModal .modal-body,
#dashboardAnnouncementModal .popup-modal-body,
#previewPopupModal .popup-modal-body,
#dashboardAnnouncementModal .carousel-item .modal-body,
#previewPopupModal .carousel-item .modal-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

/* Hard kill ANY scrollbar track & thumb inside announcement popup modal */
#dashboardAnnouncementModal *::-webkit-scrollbar,
#previewPopupModal *::-webkit-scrollbar,
#dashboardAnnouncementModal::-webkit-scrollbar,
#previewPopupModal::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

#dashboardAnnouncementModal *::-webkit-scrollbar-thumb,
#previewPopupModal *::-webkit-scrollbar-thumb,
#dashboardAnnouncementModal *::-webkit-scrollbar-track,
#previewPopupModal *::-webkit-scrollbar-track {
  display: none !important;
  background: transparent !important;
}

@media (max-height: 520px) {
  #dashboardAnnouncementModal .carousel-item .modal-body,
  #previewPopupModal .carousel-item .modal-body {
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }
}

@media (max-height: 720px) {
  #dashboardAnnouncementModal .carousel-item .modal-body,
  #previewPopupModal .carousel-item .modal-body {
    padding: 1rem 1.25rem !important;
  }
}

@media (max-height: 600px) {
  #dashboardAnnouncementModal .carousel-item .modal-body,
  #previewPopupModal .carousel-item .modal-body {
    padding: 0.75rem 1rem !important;
  }
  .popup-heading {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
  }
  .popup-description {
    font-size: 0.85rem !important;
    line-height: 1.45 !important;
  }
}

/* Slide WITHOUT banner - Compact, tight, and natural */
#carouselDashboardAnnouncement .carousel-item .modal-body.popup-body-no-banner,
#carouselPopupPreviewStepper .carousel-item .modal-body.popup-body-no-banner {
  padding: 1.75rem 1.5rem !important;
  height: auto !important;
}

#dashboardAnnouncementModal .popup-modal-footer,
#previewPopupModal .popup-modal-footer {
  flex-shrink: 0 !important;
}

/* Symmetrical and Balanced Popup Body Content Padding (Atas, Kanan, Bawah, Kiri Sama 1.5rem) */
#dashboardAnnouncementModal .modal-body,
#previewPopupModal .modal-body {
  padding: 1.5rem !important;
  box-sizing: border-box !important;
}

/* 3-Column Symmetrical Stepper Footer (Left: Kembali, Center: Dots, Right: Lanjut) */
.popup-modal-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 1rem !important; /* Standar 1rem (16px) keliling */
  border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08)) !important;
  background-color: var(--bs-light-bg-subtle, #fcfcfd) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

[data-bs-theme="dark"] .popup-modal-footer {
  background-color: rgba(255, 255, 255, 0.03) !important;
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.popup-footer-action-start,
.popup-footer-action-end {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.popup-footer-action-start {
  justify-content: flex-start !important;
}

.popup-footer-action-end {
  justify-content: flex-end !important;
}

.popup-footer-dots {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 0.5rem !important;
  min-width: 0 !important;
}

/* Stepper Navigation Buttons on Desktop (>= 768px): Sesuai Standar Website (44px Pill) */
@media (min-width: 768px) {
  .popup-modal-footer {
    padding: 1rem !important; /* Tetap konsisten 1rem */
  }

  .popup-modal-footer .btn-popup-nav,
  #popupBtnPrev,
  #popupBtnNext,
  #btnPreviewStepPrev,
  #btnPreviewStepNext {
    border-radius: var(--bs-border-radius-pill, 50rem) !important;
    height: var(--bs-control-height, 44px) !important;
    min-height: var(--bs-control-height, 44px) !important;
    max-height: var(--bs-control-height, 44px) !important;
    padding: 0 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    aspect-ratio: auto !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  .popup-modal-footer .btn-popup-nav i,
  #popupBtnPrev i,
  #popupBtnNext i,
  #btnPreviewStepPrev i,
  #btnPreviewStepNext i {
    font-size: 1.15rem !important;
  }

  .popup-modal-footer .popup-btn-label {
    display: inline !important;
  }
}

/* Mobile & Tablet (< 768px): Full Circle 44px Arrow Buttons (Standar Icon Circle Website) */
@media (max-width: 767.98px) {
  .popup-modal-footer {
    padding: 1rem !important; /* Standar 1rem keliling */
    gap: 0.5rem !important;
  }

  .popup-footer-action-start,
  .popup-footer-action-end {
    flex: 0 0 var(--bs-control-height, 44px) !important;
    width: var(--bs-control-height, 44px) !important;
    height: var(--bs-control-height, 44px) !important;
  }

  .popup-footer-dots {
    gap: 8px !important;
    padding: 0 !important;
  }

  /* Sama persis dengan ukuran desktop: 8px bulat, 24px active pill */
  .popup-stepper-dot {
    width: 8px !important;
    height: 8px !important;
    flex-shrink: 0 !important;
  }

  .popup-stepper-dot.active {
    width: 24px !important;
  }

  .popup-modal-footer .popup-btn-label {
    display: none !important;
  }

  #popupBtnPrev,
  #popupBtnNext,
  #btnPreviewStepPrev,
  #btnPreviewStepNext {
    width: var(--bs-control-height, 44px) !important;
    height: var(--bs-control-height, 44px) !important;
    min-width: var(--bs-control-height, 44px) !important;
    min-height: var(--bs-control-height, 44px) !important;
    max-width: var(--bs-control-height, 44px) !important;
    max-height: var(--bs-control-height, 44px) !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #popupBtnPrev i,
  #popupBtnNext i,
  #btnPreviewStepPrev i,
  #btnPreviewStepNext i {
    font-size: 1.35rem !important;
    margin: 0 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 360px) {
  .popup-modal-footer {
    padding: 0.75rem !important; /* Pada layar ultra kecil <= 360px agar tidak sesak */
  }

  .popup-footer-action-start,
  .popup-footer-action-end {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
  }

  #popupBtnPrev,
  #popupBtnNext,
  #btnPreviewStepPrev,
  #btnPreviewStepNext {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-width: 40px !important;
    max-height: 40px !important;
    aspect-ratio: 1 / 1 !important;
  }

  #popupBtnPrev i,
  #popupBtnNext i,
  #btnPreviewStepPrev i,
  #btnPreviewStepNext i {
    font-size: 1.25rem !important;
  }

  .popup-footer-dots {
    gap: 6px !important;
  }
}

/* ==========================================================================
   Popup Setting Modal - Lightweight, Smooth Scroll & Compact Accordion
   ========================================================================== */
#popupModal .modal-body {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

#popupModal .accordion-collapse.collapsing {
  transition: height 0.16s cubic-bezier(0, 0, 0.2, 1) !important;
  will-change: height;
}

#popupModal .accordion-item {
  background-color: var(--bs-card-bg, #ffffff) !important;
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08)) !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  margin-bottom: 0.625rem !important;
}

#popupModal textarea.form-control,
.modal textarea.form-control {
  resize: vertical !important;
  min-height: 64px !important;
  max-height: none !important;
  height: auto;
}

[data-bs-theme="dark"] #popupModal .accordion-item {
  background-color: var(--bs-card-bg, #1e1e1e) !important;
  border-color: var(--bs-border-color, #2c2c2c) !important;
}

#popupModal .accordion-button {
  background-color: transparent !important;
  color: var(--bs-heading-color, #222222) !important;
  box-shadow: none !important;
  padding: 0.8rem 1rem !important;
  font-size: 0.9375rem !important;
  border-radius: 0 !important;
  border: none !important;
  border-left: 3px solid transparent !important;
  transform: none !important;
  transition: none !important;
}

[data-bs-theme="dark"] #popupModal .accordion-button {
  background-color: transparent !important;
  color: var(--bs-heading-color, #e9e9e9) !important;
}

/* Nonaktifkan efek hover dan bounce (scale/transform) pada tombol accordion */
#popupModal .accordion-button:hover,
#popupModal .accordion-button:focus,
#popupModal .accordion-button:active,
[data-bs-theme="dark"] #popupModal .accordion-button:hover,
[data-bs-theme="dark"] #popupModal .accordion-button:focus,
[data-bs-theme="dark"] #popupModal .accordion-button:active {
  background-color: transparent !important;
  color: var(--bs-heading-color, #e9e9e9) !important;
  box-shadow: none !important;
  transform: none !important;
  filter: none !important;
  outline: none !important;
}

#popupModal .accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: var(--bs-heading-color, #1a1a1a) !important;
  border-bottom: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08)) !important;
  border-left: 3px solid var(--bs-primary) !important;
  transform: none !important;
}

[data-bs-theme="dark"] #popupModal .accordion-button:not(.collapsed) {
  background-color: transparent !important;
  color: var(--bs-heading-color, #e9e9e9) !important;
  border-bottom: 1px solid var(--bs-border-color, #2c2c2c) !important;
  border-left: 3px solid var(--bs-primary) !important;
  transform: none !important;
}

#popupModal .accordion-button:not(.collapsed):hover,
#popupModal .accordion-button:not(.collapsed):focus,
#popupModal .accordion-button:not(.collapsed):active,
[data-bs-theme="dark"] #popupModal .accordion-button:not(.collapsed):hover,
[data-bs-theme="dark"] #popupModal .accordion-button:not(.collapsed):focus,
[data-bs-theme="dark"] #popupModal .accordion-button:not(.collapsed):active {
  background-color: transparent !important;
  color: var(--bs-heading-color, #e9e9e9) !important;
  box-shadow: none !important;
  transform: none !important;
}

#popupModal .accordion-button::after {
  background-size: 0.875rem !important;
  width: 0.875rem !important;
  height: 0.875rem !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

[data-bs-theme="dark"] #popupModal .accordion-button::after {
  filter: invert(1) grayscale(100%) brightness(200%);
}

#popupModal .accordion-body {
  padding: 1.15rem !important;
  background-color: transparent !important;
}

/* ==========================================================================
   Standardized Modal Choice Selected Checkmark Badge
   Solid primary circular badge with white checkmark for selection/choice modals
   ========================================================================== */
.choice-check-badge,
.sort-check-badge {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  border-radius: 50% !important;
  background-color: var(--bs-primary, #ff5911) !important;
  color: #ffffff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.choice-check-badge.d-none,
.sort-check-badge.d-none {
  display: none !important;
}

.choice-check-badge i,
.choice-check-badge svg,
.sort-check-badge i,
.sort-check-badge svg {
  font-size: 0.95rem !important;
  line-height: 1 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Universal Modal Confirm Component (Centralized Proportions)
   ========================================================================== */
.modal-confirm-icon-circle {
  width: 72px !important;
  height: 72px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin-bottom: 1rem !important;
  flex-shrink: 0 !important;
}

.modal-confirm-icon-circle i,
.modal-confirm-icon-circle .material-symbols-outlined {
  font-size: 2.25rem !important;
  line-height: 1 !important;
}

.modal-confirm-text {
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

.modal-confirm-subtext {
  margin-top: 0.5rem !important;
  margin-bottom: 0 !important;
  font-weight: 500 !important;
}

/* ==========================================================================
   MODAL FORM CONTROLS: NO FLICKER, UNIFORM STATES
   - Kills the bg-color transition on .ts-control / form-control inside modals
     so the 0.15s ease-in-out backdrop shift is invisible when TomSelect adds
     .focus or .dropdown-active class — no more kedip / flash.
   - Locks all interactive states (normal / hover / focus / dropdown-active)
     to the SAME background-color so there is zero visual change on interaction.
   - Only :disabled / .is-disabled genuinely differs (dimmed).
   - Fixes flatpickr date-input text color in dark-mode to match TomSelect.
   ========================================================================== */

/* 1. Kill transitions on all form inputs inside modals */
.modal .ts-control,
.modal .ts-wrapper .ts-control,
.modal .form-control,
.modal .form-select,
.modal .flatpickr-input,
.modal input.flatpickr-input,
.modal #edit_session_date,
.modal #pastSessionDate,
.bottom-sheet-modal .ts-control,
.bottom-sheet-modal .form-control,
.bottom-sheet-modal .form-select,
.bottom-sheet-modal .flatpickr-input {
  transition: none !important;
}

/* 2. Lock bg-color to resting value across ALL interactive states (light mode) */
.modal .ts-control,
.modal .ts-wrapper .ts-control,
.modal .ts-wrapper.focus .ts-control,
.modal .ts-wrapper.dropdown-active .ts-control,
.modal .ts-wrapper.is-open .ts-control,
.modal .ts-control:focus,
.modal .ts-control:hover {
  background-color: var(--bs-input-filled-bg, rgba(0, 0, 0, 0.06)) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 2a. Lock bg-color across ALL interactive states (dark mode) */
[data-bs-theme="dark"] .modal .ts-control,
[data-bs-theme="dark"] .modal .ts-wrapper .ts-control,
[data-bs-theme="dark"] .modal .ts-wrapper.focus .ts-control,
[data-bs-theme="dark"] .modal .ts-wrapper.dropdown-active .ts-control,
[data-bs-theme="dark"] .modal .ts-wrapper.is-open .ts-control,
[data-bs-theme="dark"] .modal .ts-control:focus,
[data-bs-theme="dark"] .modal .ts-control:hover {
  background-color: var(--bs-input-filled-bg, rgba(255, 255, 255, 0.08)) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3. Lock flatpickr / form-control bg-color to resting value in light mode */
.modal .form-control:not(.rsa-search-box__input):focus,
.modal .form-control:not(.rsa-search-box__input):hover:not(:disabled),
.modal .flatpickr-input:focus,
.modal input.flatpickr-input:focus,
.modal #edit_session_date:focus,
.modal #pastSessionDate:focus {
  background-color: var(--bs-input-filled-bg, rgba(0, 0, 0, 0.06)) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 3a. Lock flatpickr / form-control bg-color to resting value in dark mode */
[data-bs-theme="dark"] .modal .form-control:not(.rsa-search-box__input):focus,
[data-bs-theme="dark"] .modal .form-control:not(.rsa-search-box__input):hover:not(:disabled),
[data-bs-theme="dark"] .modal .flatpickr-input:focus,
[data-bs-theme="dark"] .modal input.flatpickr-input:focus,
[data-bs-theme="dark"] .modal #edit_session_date:focus,
[data-bs-theme="dark"] .modal #pastSessionDate:focus {
  background-color: var(--bs-input-filled-bg, rgba(255, 255, 255, 0.08)) !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 4. Fix flatpickr text color in dark mode — match .ts-control which already gets #ffffff */
[data-bs-theme="dark"] .modal .flatpickr-input,
[data-bs-theme="dark"] .modal input.flatpickr-input,
[data-bs-theme="dark"] .modal #edit_session_date,
[data-bs-theme="dark"] .modal #pastSessionDate {
  color: #ffffff !important;
}

/* 5. Cursor pointer on flatpickr (clickable date picker) */
.modal .flatpickr-input,
.modal input.flatpickr-input,
.modal #edit_session_date,
.modal #pastSessionDate {
  cursor: pointer !important;
}

/* 6. Autofill Protection: Preserve gray filled background & rounded shape in modals */
.modal .form-control:-webkit-autofill,
.modal .form-control:-webkit-autofill:hover,
.modal .form-control:-webkit-autofill:focus,
.modal .form-control:-webkit-autofill:active,
.modal input:-webkit-autofill,
.modal input:-webkit-autofill:hover,
.modal input:-webkit-autofill:focus,
.modal input:-webkit-autofill:active,
.bottom-sheet-modal .form-control:-webkit-autofill,
.bottom-sheet-modal input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bs-input-filled-bg, rgba(0, 0, 0, 0.06)) inset !important;
  box-shadow: 0 0 0 1000px var(--bs-input-filled-bg, rgba(0, 0, 0, 0.06)) inset !important;
  -webkit-text-fill-color: var(--bs-body-color, #3a3a3a) !important;
  caret-color: var(--bs-body-color, #3a3a3a) !important;
  border: none !important;
  border-radius: var(--bs-input-border-radius, var(--bs-card-border-radius, 1rem)) !important;
  transition: background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s !important;
}

.modal .form-control:-webkit-autofill:focus,
.modal input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bs-input-filled-bg-focus, rgba(0, 0, 0, 0.09)) inset !important;
  box-shadow: 0 0 0 1000px var(--bs-input-filled-bg-focus, rgba(0, 0, 0, 0.09)) inset !important;
}

[data-bs-theme="dark"] .modal .form-control:-webkit-autofill,
[data-bs-theme="dark"] .modal .form-control:-webkit-autofill:hover,
[data-bs-theme="dark"] .modal .form-control:-webkit-autofill:focus,
[data-bs-theme="dark"] .modal .form-control:-webkit-autofill:active,
[data-bs-theme="dark"] .modal input:-webkit-autofill,
[data-bs-theme="dark"] .modal input:-webkit-autofill:hover,
[data-bs-theme="dark"] .modal input:-webkit-autofill:focus,
[data-bs-theme="dark"] .modal input:-webkit-autofill:active,
[data-bs-theme="dark"] .bottom-sheet-modal .form-control:-webkit-autofill,
[data-bs-theme="dark"] .bottom-sheet-modal input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--bs-input-filled-bg, rgba(255, 255, 255, 0.08)) inset !important;
  box-shadow: 0 0 0 1000px var(--bs-input-filled-bg, rgba(255, 255, 255, 0.08)) inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  border: none !important;
  border-radius: var(--bs-input-border-radius, var(--bs-card-border-radius, 1rem)) !important;
  transition: background-color 50000s ease-in-out 0s, color 50000s ease-in-out 0s !important;
}

[data-bs-theme="dark"] .modal .form-control:-webkit-autofill:focus,
[data-bs-theme="dark"] .modal input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bs-input-filled-bg-focus, rgba(255, 255, 255, 0.12)) inset !important;
  box-shadow: 0 0 0 1000px var(--bs-input-filled-bg-focus, rgba(255, 255, 255, 0.12)) inset !important;
}

/* ==========================================================================
   Universal Modal Confirmation & Alert Icon Centering System
   Guarantees all dialog/confirmation icons remain perfectly centered
   across desktop and mobile bottom sheets regardless of DOM hierarchy.
   ========================================================================== */
.modal-body.text-center .d-inline-flex,
.modal-body.text-center .d-flex:has(> i),
.modal-body.text-center .modal-icon-circle,
.modal-body.text-center .rounded-circle,
.modal-body.text-center .avatar,
.modal-body.text-center [class*="bg-label-"],
.modal-body.text-center div:has(> .material-symbols-outlined),
.modal-body.text-center div:has(> i.fas),
.modal-body.text-center div:has(> i.far),
.modal-confirm-icon,
.modal-icon-circle,
#confirmHelperIconWrapper,
#status-icon-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: center !important;
  text-align: center !important;
}

.modal-body.text-center > div:first-child:has(> i),
.modal-body.text-center > div:first-child:has(> .material-symbols-outlined),
.modal-body.text-center form > div:first-of-type:has(> i),
.modal-body.text-center form > div:first-of-type:has(> .material-symbols-outlined) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.modal-body.text-center .material-symbols-outlined {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Universal Confirmation Modal Icon Circle & Icon Proportions (Consistent with Gambar 2) */
.modal-body.text-center .modal-icon-circle,
.modal-body.text-center .modal-confirm-icon-circle,
.modal-body.text-center .d-inline-flex.rounded-circle[style*="72px"],
.modal-body.text-center #status-icon-wrapper,
.modal-body.text-center #confirmRecoveryActionIconWrapper,
.modal-body.text-center #globalConfirmIconWrapper {
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border-radius: 50% !important;
}

.modal-body.text-center .modal-body-icon i,
.modal-body.text-center .modal-icon-circle i,
.modal-body.text-center .modal-icon-circle .material-symbols-outlined,
.modal-body.text-center .modal-confirm-icon-circle i,
.modal-body.text-center .modal-confirm-icon-circle .material-symbols-outlined,
.modal-body.text-center .d-inline-flex.rounded-circle[style*="72px"] i,
.modal-body.text-center .d-inline-flex.rounded-circle[style*="72px"] .material-symbols-outlined,
.modal-body.text-center #status-icon-wrapper i,
.modal-body.text-center #status-icon-wrapper .material-symbols-outlined,
.modal-body.text-center #confirmRecoveryActionIconWrapper i,
.modal-body.text-center #confirmRecoveryActionIconWrapper .material-symbols-outlined,
.modal-body.text-center #globalConfirmIconWrapper i,
.modal-body.text-center #globalConfirmIconWrapper .material-symbols-outlined {
  font-size: 2.25rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ── Universal Zero-Line Rule for Filter Sidebar & Bottom-Sheet Footers ── */
.bottom-sheet-modal .modal-footer,
.bottom-sheet-modal .modal-content form .modal-footer,
.bottom-sheet-modal .modal-footer.border-top,
#modalFilters .modal-footer,
#modalFilters .modal-footer.border-top,
#modalFilters .modal-content form .modal-footer {
  border-top: none !important;
  border-top-width: 0 !important;
  border-top-style: none !important;
  border-top-color: transparent !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}