/**
 * ==========================================================================
 * RSA Table Component (rsa-table.css)
 * Standardized Data Table & Responsive Shell System for e-RSA
 * 
 * Features: Responsive Container Shell, Sticky Headers, Card Integration,
 *           Row States, Vertical Alignment, and Mobile Touch Scroll
 * Breakpoints: Strictly locked to Mobile (< 768px) & Desktop (>= 768px)
 * ==========================================================================
 */

/* 1. Responsive Shell Container */
.table-responsive {
  width: 100%;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: smooth;
  position: relative;
}

/* Seamless Card Integration: Eliminate Double Borders */
.card > .table-responsive,
.card-body > .table-responsive,
.card-datatable {
  margin-bottom: 0;
  border: none !important;
}

.card > .table-responsive:first-child {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.card > .table-responsive:last-child {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}

/* Page Table Card Shell: Clean Subtle Border & Elevation (Identical to Standalone Cards) */
.card:has(> .table-responsive),
.card:has(> form > .table-responsive),
.card:has(> .card-body > .table-responsive),
.card:has(> .table),
.card-datatable {
  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;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .card:has(> .table-responsive),
[data-bs-theme="dark"] .card:has(> form > .table-responsive),
[data-bs-theme="dark"] .card:has(> .card-body > .table-responsive),
[data-bs-theme="dark"] .card:has(> .table),
[data-bs-theme="dark"] .card-datatable {
  border: none !important;
  border-width: 0 !important;
  border-radius: var(--bs-card-border-radius, 1.25rem) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Allow table card shell to overflow visibly so floating popups (dropdowns, selects, flatpickr) are never clipped */
.card:has(.dropdown-menu.show),
.card:has(.ts-wrapper.dropdown-active),
.card:has(.ts-dropdown.show),
.card.dropdown-opened-card,
[data-bs-theme="dark"] .card:has(.dropdown-menu.show),
[data-bs-theme="dark"] .card:has(.ts-wrapper.dropdown-active),
[data-bs-theme="dark"] .card:has(.ts-dropdown.show),
[data-bs-theme="dark"] .card.dropdown-opened-card {
  overflow: visible !important;
}

/* Ensure all floating panels in tables sit at maximum elevation */
.table-responsive .dropdown-menu,
.table .dropdown-menu,
.card .dropdown-menu {
  z-index: 100000 !important;
}

/* 2. Global Table Typography & Structure */
.table {
  width: 100%;
  margin-bottom: 0;
  vertical-align: middle;
  border-collapse: collapse;
}

.table th,
.table td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-bottom-width: 1px;
}

/* 3. Standard Table Header (thead) */
.table thead th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--bs-secondary, #707070);
  background-color: var(--bs-table-bg, rgba(0, 0, 0, 0.02));
  border-bottom: 1px solid var(--bs-border-color, #e5e5e5);
  white-space: nowrap;
}

[data-bs-theme="dark"] .table thead th {
  background-color: var(--bs-modal-table-bg, var(--bs-surface-elevated));
  border-bottom-color: rgba(255, 255, 255, 0.08);
  color: #a0a0a0;
}

/* Card Header Flat Edge: Tables inside cards with header must have 0 top border-radius */
.card-header ~ .table-responsive,
.card-header ~ table,
.card-header ~ * .table-responsive,
.card:has(.card-header) > .table-responsive,
.card:has(.card-header) table {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}


/* Sticky Header Support */
.table-sticky-header thead th,
.table thead.sticky-top th {
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--bs-border-color, #e5e5e5);
}

[data-bs-theme="dark"] .table-sticky-header thead th,
[data-bs-theme="dark"] .table thead.sticky-top th {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 4. Table Row States (Hover & Selection) - Instant crisp selection feedback with zero lag or lingering transitions */
.table-hover > tbody > tr,
.table-hover > tbody > tr > *,
.table:not(.table-no-hover) > tbody > tr,
.table:not(.table-no-hover) > tbody > tr > *,
.table tbody > tr,
.table tbody > tr > * {
  transition: none !important;
}

.table-hover > tbody > tr:hover,
.table:not(.table-no-hover) > tbody > tr:hover {
  background-color: transparent !important;
}

/* Desktop-only subtle hover background feedback */
@media (hover: hover) and (pointer: fine) {
  .table-hover > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  .table:not(.table-no-hover) > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > * {
    --bs-table-hover-bg: var(--table-row-hover-bg, rgba(0, 0, 0, 0.025)) !important;
    --bs-table-bg-state: var(--table-row-hover-bg, rgba(0, 0, 0, 0.025)) !important;
    background-color: var(--table-row-hover-bg, rgba(0, 0, 0, 0.025)) !important;
    box-shadow: none !important;
  }

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

/* Mobile & touch devices: strictly NO sticky row hover background */
@media (max-width: 767.98px), (hover: none) {
  .table-hover > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  .table:not(.table-no-hover) > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  .user-row-clickable:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  .user-row-clickable:not(.selected):not(.user-row-selected):not(.table-active):hover > td,
  [data-bs-theme="dark"] .table-hover > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  [data-bs-theme="dark"] .table:not(.table-no-hover) > tbody > tr:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  [data-bs-theme="dark"] .user-row-clickable:not(.selected):not(.user-row-selected):not(.table-active):hover > *,
  [data-bs-theme="dark"] .user-row-clickable:not(.selected):not(.user-row-selected):not(.table-active):hover > td {
    --bs-table-hover-bg: transparent !important;
    --bs-table-bg-state: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
  }
}

/* Selected Row State (Multi-select selection) */
.table tbody > tr.selected,
.table tbody > tr.table-active {
  background-color: var(--bs-table-selected-bg) !important;
}

[data-bs-theme="dark"] .table tbody > tr.selected,
[data-bs-theme="dark"] .table tbody > tr.table-active {
  background-color: var(--bs-table-selected-bg) !important;
}

/* 5. Special Columns */
/* Standard Checkbox Selection Column (Desktop) */
.table th.col-checkbox-cell,
.table td.col-checkbox-cell {
  width: 48px !important;
  min-width: 48px !important;
  max-width: 48px !important;
  text-align: center !important;
}

/* Tables where avatar acts as the selection button (Users & Attendance) */
#usersResultsSection th.col-checkbox-cell,
#usersResultsSection td.col-checkbox-cell,
#attendanceTable th.col-checkbox-cell,
#attendanceTable td.col-checkbox-cell,
#participantsTable th.col-checkbox-cell,
#participantsTable td.col-checkbox-cell {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  visibility: hidden !important;
}


/* Action button column */
.table th.th-action,
.table td.td-action {
  width: 64px;
  min-width: 64px;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.75rem;
}

/* Table Dropdown Menus: Always float above tables, headers, and borders without clipping */
.table-responsive .dropdown-menu,
table .dropdown-menu {
  z-index: 1060 !important;
}

/* Table Header Sort Icons: Standard compact size, never enlarged, consistent color & opacity */
.table thead th .material-symbols-outlined,
.table thead th .sort-icon-indicator,
.table thead th .sort-icon,
.table thead th span[class*="sort"],
th .sort-icon-indicator,
th .sort-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.1em !important;
  width: 1.1em !important;
  min-width: 1.1em !important;
  max-width: 1.1em !important;
  height: 1.1em !important;
  min-height: 1.1em !important;
  max-height: 1.1em !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-left: 0.25rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  user-select: none !important;
  transform: translateY(-0.75px) !important;
  transition: none !important;
}

/* Inactive sort icons: Uniform secondary/muted color and subtle opacity across all tables */
.table thead th .sort-icon:not(.text-primary):not(.text-danger):not(.text-success),
.table thead th .sort-icon-indicator:not(.text-primary),
.table thead th .material-symbols-outlined.text-muted:not(.text-primary):not(.text-danger):not(.text-success),
.table thead th.cursor-pointer .material-symbols-outlined:not(.text-primary):not(.text-danger):not(.text-success),
th[class*="sortable"] .material-symbols-outlined:not(.text-primary):not(.text-danger):not(.text-success),
th[data-sort-field] .material-symbols-outlined:not(.text-primary):not(.text-danger):not(.text-success),
th .sort-icon:not(.text-primary):not(.text-danger):not(.text-success),
th .sort-icon-indicator:not(.text-primary) {
  color: var(--bs-secondary-color, #8b8b8b) !important;
  opacity: 0.65 !important;
}

/* Hover state on sortable table headers */
.table thead th.cursor-pointer:hover .material-symbols-outlined:not(.text-primary),
th[class*="sortable"]:hover .material-symbols-outlined:not(.text-primary),
th[data-sort-field]:hover .material-symbols-outlined:not(.text-primary),
th:hover .sort-icon:not(.text-primary),
th:hover .sort-icon-indicator:not(.text-primary) {
  opacity: 1 !important;
  color: var(--bs-body-color, #e4e6ef) !important;
  transition: opacity 0.15s ease, color 0.15s ease !important;
}

/* Active sorted header icon state */
.table thead th .sort-icon.text-primary,
.table thead th .material-symbols-outlined.text-primary,
.table thead th.asc .material-symbols-outlined,
.table thead th.desc .material-symbols-outlined,
.table thead th.asc .sort-icon,
.table thead th.desc .sort-icon {
  color: var(--bs-primary, #ff5911) !important;
  opacity: 1 !important;
}

/* 6. Mobile Responsiveness (< 768px) */
@media (max-width: 767.98px) {
  .table th,
  .table td {
    padding: 0.75rem 0.85rem;
    font-size: 0.875rem;
  }

  .table thead th {
    font-size: 0.7rem;
  }
}

/* 7. Tables Inside Modals & Dialogs (Frameless Inset Container matching modal card) */
.modal .unfilled-sessions-main-container,
.modal .card:has(table) {
  border: none !important;
  border-width: 0 !important;
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  border-radius: var(--bs-card-border-radius, 1rem) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.modal .modal-table-container {
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
  border-radius: var(--bs-card-border-radius, 0.75rem) !important;
  max-height: clamp(280px, 55vh, 460px);
  overflow-y: auto !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  box-shadow: none !important;
}

[data-bs-theme="dark"] .modal .unfilled-sessions-main-container,
[data-bs-theme="dark"] .modal .card:has(table) {
  border: none !important;
  border-width: 0 !important;
  background-color: transparent !important;
}

[data-bs-theme="dark"] .modal .modal-table-container {
  background-color: transparent !important;
}

.modal .modal-table-container thead th {
  background-color: var(--bs-modal-card-bg, #ffffff) !important;
}

[data-bs-theme="dark"] .modal .modal-table-container thead th,
.dark-style .modal .modal-table-container thead th {
  background-color: var(--bs-modal-bg, var(--bs-card-bg, #1e1e1e)) !important;
}

.modal .card-body {
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
  overflow: hidden;
}

.modal .table-responsive {
  border-top-left-radius: inherit !important;
  border-top-right-radius: inherit !important;
}

.modal .table thead tr:first-child th:first-child {
  border-top-left-radius: inherit !important;
}

.modal .table thead tr:first-child th:last-child {
  border-top-right-radius: inherit !important;
}

/* All Modal Tables: Completely hide thead (column headers) for clean sheet list UX */
.modal table thead,
.modal .table thead,
.modal-table-container thead,
.bottom-sheet-modal table thead,
.bottom-sheet-modal .table thead,
.modal table > thead,
.modal .modal-table-container > table > thead,
.modal-table-container > .table > thead,
.modal table thead[class*="d-"],
.modal .table thead[class*="d-"] {
  display: none !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,
.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;
}

[data-bs-theme="dark"] .modal .table,
[data-bs-theme="dark"] .modal table,
[data-bs-theme="dark"] .bottom-sheet-modal .table,
[data-bs-theme="dark"] .bottom-sheet-modal table {
  border: none !important;
  border-width: 0 !important;
  border-style: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  background-color: transparent !important;
  --bs-table-bg: transparent !important;
}

/* Dark Mode: Modal Table Horizontal Row Dividers (Subtle, matching page table divider) */
[data-bs-theme="dark"] .modal .table thead th,
[data-bs-theme="dark"] .modal table thead th {
  border: none !important;
  border-bottom: none !important;
  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;
}

[data-bs-theme="dark"] .modal .table tbody tr:not(:last-child):not(:last-of-type) td,
[data-bs-theme="dark"] .modal .table tbody tr:not(:last-child):not(:last-of-type) th,
[data-bs-theme="dark"] .modal table tbody tr:not(:last-child):not(:last-of-type) td,
[data-bs-theme="dark"] .modal table tbody tr:not(:last-child):not(:last-of-type) th,
[data-bs-theme="dark"] .bottom-sheet-modal .table tbody tr:not(:last-child):not(:last-of-type) td,
[data-bs-theme="dark"] .bottom-sheet-modal .table tbody tr:not(:last-child):not(:last-of-type) th {
  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;
  background-color: transparent !important;
  --bs-table-bg: transparent !important;
}

/* Soft Row Hover on Modal Tables in Dark Mode (Using root.css variable) */
[data-bs-theme="dark"] .modal .table-hover tbody tr:not(.selected):not(.user-row-selected):not(.table-active):hover > td,
[data-bs-theme="dark"] .modal .table-hover tbody tr:not(.selected):not(.user-row-selected):not(.table-active):hover > th,
[data-bs-theme="dark"] .modal table.table-hover tbody tr:not(.selected):not(.user-row-selected):not(.table-active):hover > td,
[data-bs-theme="dark"] .modal table.table-hover tbody tr:not(.selected):not(.user-row-selected):not(.table-active):hover > th {
  background-color: var(--bs-modal-table-hover-bg, rgba(255, 255, 255, 0.04)) !important;
  --bs-table-hover-bg: var(--bs-modal-table-hover-bg, rgba(255, 255, 255, 0.04)) !important;
}

/* Remove bottom border on the very last row in all tables for clean seamless finish */
: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, > *),
table tbody tr:last-child td,
table tbody tr:last-child th,
table tbody tr:last-child > *,
table tbody tr:last-of-type > *,
.table tbody tr:last-child td,
.table tbody tr:last-child th,
.table tbody tr:last-child > *,
.table tbody tr:last-of-type > *,
.table > tbody > tr:last-child > *,
.table > tbody > tr:last-of-type > *,
.modal .table tbody tr:last-child td,
.modal .table tbody tr:last-child th,
.modal .table tbody tr:last-child > *,
.modal table tbody tr:last-child td,
.modal table tbody tr:last-child th,
.modal table tbody tr:last-child > *,
.modal .modal-table-container .table tbody tr:last-child > *,
.modal-table-container .table tbody tr:last-child > *,
.bottom-sheet-modal .table tbody tr:last-child td,
.bottom-sheet-modal .table tbody tr:last-child th,
[data-bs-theme="dark"] table tbody tr:last-child td,
[data-bs-theme="dark"] table tbody tr:last-child th,
[data-bs-theme="dark"] table tbody tr:last-child > *,
[data-bs-theme="dark"] table tbody tr:last-of-type > *,
[data-bs-theme="dark"] .table tbody tr:last-child td,
[data-bs-theme="dark"] .table tbody tr:last-child th,
[data-bs-theme="dark"] .table tbody tr:last-child > *,
[data-bs-theme="dark"] .table tbody tr:last-of-type > *,
[data-bs-theme="dark"] .table > tbody > tr:last-child > *,
[data-bs-theme="dark"] .table > tbody > tr:last-of-type > *,
[data-bs-theme="dark"] .modal .table tbody tr:last-child td,
[data-bs-theme="dark"] .modal .table tbody tr:last-child th,
[data-bs-theme="dark"] .modal .table tbody tr:last-child > *,
[data-bs-theme="dark"] .modal table tbody tr:last-child td,
[data-bs-theme="dark"] .modal table tbody tr:last-child th,
[data-bs-theme="dark"] .modal table tbody tr:last-child > *,
[data-bs-theme="dark"] .modal .modal-table-container .table tbody tr:last-child > *,
[data-bs-theme="dark"] .modal-table-container .table tbody tr:last-child > *,
[data-bs-theme="dark"] .bottom-sheet-modal .table tbody tr:last-child td,
[data-bs-theme="dark"] .bottom-sheet-modal .table tbody tr:last-child th {
  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 tbody tr:last-child > td,
.modal table tbody tr:last-child > th,
.modal .modal-table-container table tbody tr:last-child > td,
.modal .modal-table-container table tbody tr:last-child > th,
.modal .table-responsive table tbody tr:last-child > td,
.modal .table-responsive table tbody tr:last-child > th,
.bottom-sheet-modal table tbody tr:last-child > td,
.bottom-sheet-modal table tbody tr:last-child > th,
[data-bs-theme="dark"] .modal table tbody tr:last-child > td,
[data-bs-theme="dark"] .modal table tbody tr:last-child > th,
[data-bs-theme="dark"] .modal .modal-table-container table tbody tr:last-child > td,
[data-bs-theme="dark"] .modal .modal-table-container table tbody tr:last-child > th,
[data-bs-theme="dark"] .modal .table-responsive table tbody tr:last-child > td,
[data-bs-theme="dark"] .modal .table-responsive table tbody tr:last-child > th,
[data-bs-theme="dark"] .bottom-sheet-modal table tbody tr:last-child > td,
[data-bs-theme="dark"] .bottom-sheet-modal table tbody 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 thead.d-none ~ tbody tr:first-child > td,
.modal table thead.d-none ~ tbody tr:first-child > th,
.modal .modal-table-container table thead.d-none ~ tbody tr:first-child > td,
.modal .modal-table-container table thead.d-none ~ tbody tr:first-child > th,
[data-bs-theme="dark"] .modal table thead.d-none ~ tbody tr:first-child > td,
[data-bs-theme="dark"] .modal table thead.d-none ~ tbody tr:first-child > th,
[data-bs-theme="dark"] .modal .modal-table-container table thead.d-none ~ tbody tr:first-child > td,
[data-bs-theme="dark"] .modal .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;
}

/* Modal Tables: Hide top border on pagination footers to prevent floating lines */
.modal [id*="PaginationFooter"],
.modal [id*="paginationFooter"],
.modal [id*="Pagination"],
.modal #modalAddTeamPagination,
.modal .modal-pagination-footer {
  border-top: none !important;
  border-top-width: 0 !important;
  border-top-color: transparent !important;
}


/* Modal Tables: Strictly prevent any secondary left indicator bar after checkbox when selected */
.modal table tbody tr.selected > td:not(:first-child),
.modal table tbody tr.selected:hover > td:not(:first-child),
.modal table tbody tr.user-row-selected > td:not(:first-child),
.modal table tbody tr.user-row-selected:hover > td:not(:first-child),
.modal-table-container table tbody tr.selected > td:not(:first-child),
.modal-table-container table tbody tr.selected:hover > td:not(:first-child),
.modal-table-container table tbody tr.user-row-selected > td:not(:first-child),
.modal-table-container table tbody tr.user-row-selected:hover > td:not(:first-child),
.modal table tbody tr.selected > td.col-checkbox-cell + td,
.modal table tbody tr.user-row-selected > td.col-checkbox-cell + td,
.modal table tbody tr.selected > td.col-checkbox-cell ~ td,
.modal table tbody tr.user-row-selected > td.col-checkbox-cell ~ td {
  box-shadow: none !important;
  border-left: none !important;
  border-left-width: 0 !important;
}

/* Modal Footer Dropup Positioning: Strictly anchored directly above the trigger button */
.modal-footer .dropup,
.modal-footer .dropdown {
  position: relative !important;
}

.modal-footer .dropup .dropdown-menu,
.modal-footer .dropup .dropdown-menu[data-bs-popper="static"],
.modal-footer .dropup .dropdown-menu-end,
.modal-footer .dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
  bottom: 100% !important;
  top: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0.5rem !important;
  transform: none !important;
  z-index: 1060 !important;
}

[data-bs-theme="dark"] .modal-footer .dropup .dropdown-menu,
[data-bs-theme="dark"] .modal-footer .dropdown .dropdown-menu {
  background-color: var(--bs-modal-card-bg, var(--bs-surface-elevated)) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important;
}

/* ==========================================================================
   Interactive / Selectable Table Rows: Pointer Cursor System
   - Modals Default: cursor: default on rows, cells, text, badges
   - Modals Selectable: 1-Click row select (cursor: pointer strictly on selectable tables/rows)
   - Page Tables (Desktop >= 768px): cursor: default on rows, cells, text, badges
     (Selection strictly via Checkbox or Avatar; Action buttons retain pointer)
   ========================================================================== */

/* 1. Modal Default Rows: Non-selectable table rows have default cursor */
.modal table tbody tr,
.modal table tbody tr > td,
.modal table tbody tr > th,
.modal .modal-table-container tbody tr,
.modal .modal-table-container tbody tr > td,
.modal .modal-table-container tbody tr > th {
  cursor: default !important;
}

/* 2. Genuine 1-Click Selectable Rows (Strictly inside Modals) */
.modal table tbody tr.cursor-pointer,
.modal table tbody tr.cursor-pointer > *,
.modal table tbody tr.selectable-row,
.modal table tbody tr.selectable-row > *,
.modal table tbody tr.clickable-row,
.modal table tbody tr.clickable-row > *,
.modal table tbody tr.recovery-user-row,
.modal table tbody tr.recovery-user-row > *,
.modal table tbody tr.export-participant-row,
.modal table tbody tr.export-participant-row > *,
.modal table tbody tr.export-class-row,
.modal table tbody tr.export-class-row > *,
.modal table tbody tr.export-material-row,
.modal table tbody tr.export-material-row > *,
.modal #availableParticipantsTable tbody tr,
.modal #availableParticipantsTable tbody tr > *,
.modal #recoveryUsersTableBody tr,
.modal #recoveryUsersTableBody tr > *,
.modal #recoverySessionsTableBody tr,
.modal #recoverySessionsTableBody tr > *,
.modal #recoveryClassesTableBody tr,
.modal #recoveryClassesTableBody tr > *,
.modal #recoveryClassSessionsTableBody tr,
.modal #recoveryClassSessionsTableBody tr > *,
.modal #recoveryMaterialsTableBody tr,
.modal #recoveryMaterialsTableBody tr > *,
.modal table[data-selectable="true"] tbody tr,
.modal table[data-selectable="true"] tbody tr > * {
  cursor: pointer !important;
}

/* Retain text cursor for text inputs inside modal rows */
.modal table tbody tr input[type="text"],
.modal table tbody tr input[type="search"],
.modal table tbody tr input[type="password"] {
  cursor: text !important;
}

/* Retain pointer cursor for interactive controls inside ANY modal table row */
.modal table tbody tr button,
.modal table tbody tr button *,
.modal table tbody tr .btn,
.modal table tbody tr .btn *,
.modal table tbody tr a,
.modal table tbody tr a *,
.modal table tbody tr input[type="checkbox"],
.modal table tbody tr input[type="radio"],
.modal table tbody tr .form-check-input,
.modal table tbody tr .dropdown-toggle,
.modal table tbody tr .dropdown-item,
.modal table tbody tr .cursor-pointer,
.modal table tbody tr [data-bs-toggle="tooltip"] {
  cursor: pointer !important;
}

/* Prevent accidental text highlight on modal 1-click select */
.modal #availableParticipantsTable tr,
.modal #recoveryUsersTableBody tr,
.modal #recoverySessionsTableBody tr,
.modal #recoveryClassesTableBody tr,
.modal #recoveryClassSessionsTableBody tr,
.modal #recoveryMaterialsTableBody tr,
.modal table tbody tr.selectable-row,
.modal table tbody tr.recovery-user-row,
.modal table tbody tr.export-participant-row,
.modal table tbody tr.export-class-row,
.modal table tbody tr.export-material-row {
  user-select: none;
  -webkit-user-select: none;
}

/* 2. Sortable Headers & General Direct Pointer Elements */
.table thead th.cursor-pointer,
.table thead th.cursor-pointer *,
th.cursor-pointer,
th.cursor-pointer *,
label.cursor-pointer,
span.cursor-pointer,
a.cursor-pointer,
button.cursor-pointer {
  cursor: pointer !important;
}

/* 3. Checkbox & Form Check Input Global Pointer Guarantee (Input Only, Cell is Default) */
.col-checkbox-cell,
th.col-checkbox-cell,
td.col-checkbox-cell,
.table th.col-checkbox-cell,
.table td.col-checkbox-cell {
  cursor: default !important;
}

input[type="checkbox"],
input[type="radio"],
.form-check-input,
.col-checkbox-cell input[type="checkbox"],
.col-checkbox-cell .form-check-input {
  cursor: pointer !important;
}

/* 4. Main Page Tables (Desktop >= 768px): Table rows & cells ALWAYS have cursor: default (Selection strictly via Checkbox or Avatar) */
@media (min-width: 768px) {
  .table:not(.modal table) tbody tr,
  .table:not(.modal table) tbody td,
  .table:not(.modal table) tbody th,
  .table:not(.modal table) .col-checkbox-cell,
  th.col-checkbox-cell,
  td.col-checkbox-cell,
  tr.participant-row,
  tr.participant-row > td,
  tr.participant-row > th,
  tr.user-row-clickable,
  tr.user-row-clickable > td,
  tr.user-row-clickable > th,
  tr.selectable-row:not(.modal tr),
  tr.selectable-row:not(.modal tr) > td,
  #participantsTable tbody tr,
  #participantsTable tbody td,
  #participantsTable .col-checkbox-cell,
  #classesTable tbody tr,
  #classesTable tbody td,
  #classesTable .col-checkbox-cell,
  #usersResultsSection table tbody tr,
  #usersResultsSection table tbody td,
  #usersResultsSection .col-checkbox-cell,
  #teamResultsSection table tbody tr,
  #teamResultsSection table tbody td,
  #teamResultsSection .col-checkbox-cell,
  #materialsTable tbody tr,
  #materialsTable tbody td,
  #materialsTable .col-checkbox-cell,
  #attendanceTable tbody tr,
  #attendanceTable tbody td,
  #attendanceTable .col-checkbox-cell {
    cursor: default !important;
  }

  /* Interactive controls, checkboxes, avatars, and buttons strictly have pointer cursor */
  .table:not(.modal table) input[type="checkbox"],
  .table:not(.modal table) .form-check-input,
  .col-checkbox-cell input[type="checkbox"],
  .col-checkbox-cell .form-check-input,
  .table:not(.modal table) .avatar,
  .table:not(.modal table) .avatar *,
  .table:not(.modal table) .selectable-avatar,
  .table:not(.modal table) .selectable-avatar *,
  .table:not(.modal table) .col-aksi,
  .table:not(.modal table) .col-aksi *,
  .table:not(.modal table) button,
  .table:not(.modal table) button *,
  .table:not(.modal table) .btn,
  .table:not(.modal table) .btn *,
  .table:not(.modal table) a,
  .table:not(.modal table) a *,
  .table:not(.modal table) .dropdown,
  .table:not(.modal table) .dropdown *,
  .table:not(.modal table) .dropdown-toggle,
  .table:not(.modal table) .dropdown-toggle *,
  .table:not(.modal table) .dropdown-item,
  .table:not(.modal table) .dropdown-item *,
  #participantsTable input[type="checkbox"],
  #participantsTable .form-check-input,
  #participantsTable .avatar,
  #participantsTable .avatar *,
  #participantsTable .col-aksi,
  #participantsTable .col-aksi *,
  #participantsTable button,
  #participantsTable button *,
  #participantsTable .btn,
  #participantsTable .btn *,
  #participantsTable a,
  #participantsTable a *,
  #classesTable input[type="checkbox"],
  #classesTable .form-check-input,
  #classesTable .avatar,
  #classesTable .avatar *,
  #classesTable .col-aksi,
  #classesTable .col-aksi *,
  #usersResultsSection input[type="checkbox"],
  #usersResultsSection .form-check-input,
  #usersResultsSection .avatar,
  #usersResultsSection .avatar *,
  #teamResultsSection input[type="checkbox"],
  #teamResultsSection .form-check-input,
  #teamResultsSection .avatar,
  #teamResultsSection .avatar *,
  #materialsTable input[type="checkbox"],
  #materialsTable .form-check-input,
  #materialsTable .avatar,
  #materialsTable .avatar *,
  #attendanceTable input[type="checkbox"],
  #attendanceTable .form-check-input,
  #attendanceTable .avatar,
  #attendanceTable .avatar * {
    cursor: pointer !important;
  }
}

/* 4. Mobile Screen (< 768px): Row is clickable for user detail modal */
@media (max-width: 767.98px) {
  .participant-row-clickable,
  .participant-row-clickable *,
  .user-row-clickable,
  .user-row-clickable * {
    cursor: pointer;
  }
}

/* ==========================================================================
   8. Standard Spacious Empty State System (Across All Pages)
   Strictly Monochrome Icons, Clean Single Headings, Standardized Size & Padding
   ========================================================================== */
.table tbody td.table-empty-state,
.table tbody td.table-loading-state,
table tbody tr td.table-empty-state,
table tbody tr td.table-loading-state,
.table tbody tr:has(.table-empty-state) td,
.table tbody tr:has(.table-empty-state-container) td,
.table-responsive .table-empty-state,
.table-responsive .table-loading-state {
  min-height: auto !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  vertical-align: middle !important;
  text-align: center !important;
}

.table-empty-state-container,
.table-loading-state-container,
.table-empty-state .table-empty-state-inner,
.table-loading-state .table-loading-state-inner {
  min-height: 150px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  gap: 0.75rem !important;
  text-align: center !important;
}

/* ==========================================================================
   Universal Empty State Styling (Icon & Text Unified Monochrome)
   Ensures icon and text have 100% IDENTICAL secondary color and opacity,
   with normal (non-bold) font weight across cards and tables.
   ========================================================================== */

/* 1. Icon: Monochrome, prominent clean standard size, identical secondary color */
.table-empty-state-container > i,
.table-empty-state-container > .material-symbols-outlined,
.table-empty-state-container i,
.table-empty-state-container .material-symbols-outlined,
.table-empty-state > i,
.table-empty-state > .material-symbols-outlined,
.table-empty-state svg,
.table-empty-state-container svg,
.icon-empty-state,
.notification-empty-state i,
.notification-empty-state .material-symbols-outlined,
.notes-book-empty i,
.notes-book-empty .material-symbols-outlined {
  font-size: 3.25rem !important;
  width: 3.25rem !important;
  height: 3.25rem !important;
  color: var(--bs-secondary-color, #707070) !important;
  opacity: 1 !important;
  margin: 0 auto 0.5rem auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* 2. Text: Standard typography, normal font-weight (NOT bold), identical secondary color */
.table-empty-state p,
.table-empty-state-container p,
.table-empty-state span:not(.material-symbols-outlined),
.table-empty-state-container span:not(.material-symbols-outlined),
.table-empty-state h6,
.table-empty-state-container h6,
.table-empty-state h5,
.table-empty-state-container h5,
.notification-empty-state p,
.notification-empty-state h6,
.notes-book-empty p,
.notes-book-empty h6,
.notes-book-empty span:not(.material-symbols-outlined) {
  font-size: 0.9375rem !important;
  font-weight: 400 !important; /* Normal weight - not bold */
  color: var(--bs-secondary-color, #707070) !important;
  opacity: 1 !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  letter-spacing: normal !important;
  text-align: center !important;
}

/* Override any inline or inherited utility bold classes inside empty states */
.table-empty-state .fw-bold,
.table-empty-state .fw-semibold,
.table-empty-state-container .fw-bold,
.table-empty-state-container .fw-semibold,
.notification-empty-state .fw-bold,
.notification-empty-state .fw-semibold,
.notes-book-empty .fw-bold,
.notes-book-empty .fw-semibold {
  font-weight: 400 !important;
}

/* 3. Dark Mode: Uniform matching color for BOTH icon and text */
[data-bs-theme="dark"] .table-empty-state-container > i,
[data-bs-theme="dark"] .table-empty-state-container > .material-symbols-outlined,
[data-bs-theme="dark"] .table-empty-state-container i,
[data-bs-theme="dark"] .table-empty-state-container .material-symbols-outlined,
[data-bs-theme="dark"] .table-empty-state > i,
[data-bs-theme="dark"] .table-empty-state > .material-symbols-outlined,
[data-bs-theme="dark"] .table-empty-state svg,
[data-bs-theme="dark"] .table-empty-state-container svg,
[data-bs-theme="dark"] .table-empty-state p,
[data-bs-theme="dark"] .table-empty-state span:not(.material-symbols-outlined),
[data-bs-theme="dark"] .table-empty-state h6,
[data-bs-theme="dark"] .table-empty-state h5,
[data-bs-theme="dark"] .table-empty-state-container p,
[data-bs-theme="dark"] .table-empty-state-container span:not(.material-symbols-outlined),
[data-bs-theme="dark"] .table-empty-state-container h6,
[data-bs-theme="dark"] .table-empty-state-container h5,
[data-bs-theme="dark"] .icon-empty-state,
[data-bs-theme="dark"] .notification-empty-state i,
[data-bs-theme="dark"] .notification-empty-state .material-symbols-outlined,
[data-bs-theme="dark"] .notification-empty-state p,
[data-bs-theme="dark"] .notification-empty-state h6,
[data-bs-theme="dark"] .notes-book-empty i,
[data-bs-theme="dark"] .notes-book-empty .material-symbols-outlined,
[data-bs-theme="dark"] .notes-book-empty p,
[data-bs-theme="dark"] .notes-book-empty h6,
html.dark-style .table-empty-state-container > i,
html.dark-style .table-empty-state-container > .material-symbols-outlined,
html.dark-style .table-empty-state-container i,
html.dark-style .table-empty-state-container .material-symbols-outlined,
html.dark-style .table-empty-state p,
html.dark-style .table-empty-state-container p {
  color: var(--bs-secondary-color, rgba(255, 255, 255, 0.55)) !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* Hide secondary descriptions below heading in empty cards and tables if multiple p/h tags exist */
.table-empty-state-container:has(h6) p,
.table-empty-state-container:has(h5) p,
.table-empty-state:has(h6) p,
.table-empty-state:has(h5) p,
.table-empty-state-container h6 ~ p,
.table-empty-state-container h5 ~ p,
.table-empty-state h6 ~ p,
.table-empty-state h5 ~ p {
  display: none !important;
}

@media (max-width: 767.98px) {
  .table:has(.table-empty-state) thead,
  .table-responsive:has(.table-empty-state) thead {
    display: none !important;
  }

  .table tbody td.table-empty-state,
  .table tbody td.table-loading-state,
  table tbody tr td.table-empty-state,
  table tbody tr td.table-loading-state,
  .table tbody tr:has(.table-empty-state) td,
  .table tbody tr:has(.table-empty-state-container) td,
  .table-responsive .table-empty-state,
  .table-responsive .table-loading-state {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border: none !important;
  }

  /* Empty state cards that do not contain tables or tab-content */
  .card:not(:has(.table-responsive)):not(:has(table)):not(:has(.tab-content)):has(.table-empty-state-container),
  .card.py-4:not(:has(.table-responsive)):not(:has(table)):not(:has(.tab-content)):has(.table-empty-state-container) {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .table-empty-state-container,
  .table-loading-state-container,
  .table-empty-state .table-empty-state-inner,
  .table-loading-state .table-loading-state-inner {
    min-height: 130px !important;
    gap: 0.65rem !important;
  }

  .table-empty-state-container > i,
  .table-empty-state-container > .material-symbols-outlined,
  .table-empty-state-container i,
  .table-empty-state-container .material-symbols-outlined,
  .table-empty-state > i,
  .table-empty-state > .material-symbols-outlined,
  .table-empty-state svg,
  .table-empty-state-container svg {
    font-size: 2.75rem !important;
    width: 2.75rem !important;
    height: 2.75rem !important;
    margin: 0 auto 0.4rem auto !important;
    opacity: 1 !important;
  }
}

/* ========================================================
 * Standardized Table & Filter Loading Container
 * Ultra-subtle (opacity: 0.85) & Snappy (0.08s transition)
 * ======================================================== */
.table-container-loading {
  opacity: 0.85 !important;
  pointer-events: none !important;
  transition: opacity 0.08s cubic-bezier(0.4, 0, 0.2, 1) !important;
  user-select: none !important;
}

/* ==========================================================================
 * Horizontally Scrollable Tables on Mobile (Log & Pemantauan / Category Tables)
 * Preserves exact desktop layout, column widths, avatars & badges on mobile
 * ========================================================================== */
@media (max-width: 767.98px) {
  .table-scroll-horizontal,
  .audit-table-wrapper,
  .email-table-wrapper,
  .bug-reports-table-wrapper {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative;
    overscroll-behavior-x: contain;
  }

  .table-scroll-horizontal .table,
  .table-scroll-horizontal .table.table-no-stack,
  .audit-table-wrapper .table,
  .audit-table-wrapper .table.table-no-stack,
  .email-table-wrapper .table,
  .email-table-wrapper .table.table-no-stack,
  .bug-reports-table-wrapper .table,
  .bug-reports-table-wrapper .table.table-no-stack {
    width: max-content !important;
    min-width: 860px !important;
    max-width: none !important;
    table-layout: auto !important;
  }

  /* Specific minimum width for tables with fewer columns (Email Logs & Bug Reports) */
  .email-table-wrapper .table,
  .email-table-wrapper .table.table-no-stack {
    min-width: 720px !important;
  }

  .bug-reports-table-wrapper .table,
  .bug-reports-table-wrapper .table.table-no-stack {
    min-width: 780px !important;
  }

  /* When empty state is shown, allow it to span cleanly without horizontal scroll */
  .table-scroll-horizontal .table:has(.table-empty-state),
  .audit-table-wrapper .table:has(.table-empty-state),
  .email-table-wrapper .table:has(.table-empty-state),
  .bug-reports-table-wrapper .table:has(.table-empty-state) {
    min-width: 100% !important;
    width: 100% !important;
  }

  /* Reset forced cell squishing (max-width: 0) and clipping from mobile app.css */
  .table-scroll-horizontal .table td,
  .table-scroll-horizontal .table th,
  .audit-table-wrapper .table td,
  .audit-table-wrapper .table th,
  .email-table-wrapper .table td,
  .email-table-wrapper .table th,
  .bug-reports-table-wrapper .table td,
  .bug-reports-table-wrapper .table th {
    max-width: none !important;
    overflow: visible !important;
    box-sizing: border-box;
  }

  /* Keep table headers and text-nowrap elements strictly on one line */
  .table-scroll-horizontal .table thead th,
  .audit-table-wrapper .table thead th,
  .email-table-wrapper .table thead th,
  .bug-reports-table-wrapper .table thead th,
  .table-scroll-horizontal .table th.text-nowrap,
  .table-scroll-horizontal .table td.text-nowrap,
  .audit-table-wrapper .table th.text-nowrap,
  .audit-table-wrapper .table td.text-nowrap,
  .email-table-wrapper .table th.text-nowrap,
  .email-table-wrapper .table td.text-nowrap,
  .bug-reports-table-wrapper .table th.text-nowrap,
  .bug-reports-table-wrapper .table td.text-nowrap {
    white-space: nowrap !important;
  }

  /* Ensure badges and action buttons in log tables do not wrap or clip */
  .table-scroll-horizontal .table .badge,
  .audit-table-wrapper .table .badge,
  .email-table-wrapper .table .badge,
  .bug-reports-table-wrapper .table .badge {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
  }

  .table-scroll-horizontal .table .btn-sm,
  .audit-table-wrapper .table .btn-sm,
  .email-table-wrapper .table .btn-sm,
  .bug-reports-table-wrapper .table .btn-sm {
    white-space: nowrap !important;
  }

  /* Compact User Meta (.user-meta-compact) in audit tables */
  .table-scroll-horizontal .user-meta-compact,
  .audit-table-wrapper .user-meta-compact {
    min-width: 175px !important;
    width: max-content !important;
    max-width: 250px !important;
  }

  .table-scroll-horizontal .user-meta-compact .user-name,
  .audit-table-wrapper .user-meta-compact .user-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
    font-weight: 600 !important;
  }

  .table-scroll-horizontal .user-meta-compact .user-id,
  .audit-table-wrapper .user-meta-compact .user-id {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
  }

  /* Standard User Meta (.user-meta-info) */
  .table-scroll-horizontal .user-meta-info,
  .audit-table-wrapper .user-meta-info,
  .bug-reports-table-wrapper .user-meta-info {
    min-width: 175px !important;
    width: max-content !important;
  }

  .table-scroll-horizontal .user-meta-info .user-name,
  .audit-table-wrapper .user-meta-info .user-name,
  .bug-reports-table-wrapper .user-meta-info .user-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
    font-weight: 600 !important;
  }

  .table-scroll-horizontal .user-meta-info .user-id,
  .audit-table-wrapper .user-meta-info .user-id,
  .bug-reports-table-wrapper .user-meta-info .user-id {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 180px !important;
  }

  /* Activity description / chronology column readable width */
  .audit-table-wrapper .table td:last-child {
    min-width: 250px;
    white-space: normal;
  }
}