.table-responsive {
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
}

.table-responsive,
.table-responsive > .table {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

.table-responsive > * {
  overflow: visible;
}

.table-responsive .dropdown-menu {
  z-index: 2100;
}

.table-responsive .dropdown {
  position: static;
}

.table-responsive .dropdown-menu {
  position: absolute;
}

.table-responsive::-webkit-scrollbar,
.etm-scroll-region::-webkit-scrollbar,
.usm-users-table-scroll::-webkit-scrollbar,
.permission-settings-scroll::-webkit-scrollbar,
.claim-config-table-wrap::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.table-responsive::-webkit-scrollbar-thumb,
.etm-scroll-region::-webkit-scrollbar-thumb,
.usm-users-table-scroll::-webkit-scrollbar-thumb,
.permission-settings-scroll::-webkit-scrollbar-thumb,
.claim-config-table-wrap::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 999px;
}

.table-responsive::-webkit-scrollbar-track,
.etm-scroll-region::-webkit-scrollbar-track,
.usm-users-table-scroll::-webkit-scrollbar-track,
.permission-settings-scroll::-webkit-scrollbar-track,
.claim-config-table-wrap::-webkit-scrollbar-track {
  background: transparent;
}

.dtr-control {
  position: relative;
  padding-left: 2rem !important;
}

.dtr-control::before {
  content: "+";
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 999px;
  background: #e9eef7;
  color: #2f5ea8;
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.125rem;
  text-align: center;
}

.parent .dtr-control::before,
tr.shown .dtr-control::before {
  content: "−";
  background: #dbeafe;
}

table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  display: none;
}

table.dataTable > tbody > tr.child ul.dtr-details {
  width: 100%;
  margin: 0;
}

table.dataTable > tbody > tr.child span.dtr-title {
  font-weight: 600;
}

.dataTables_wrapper .dataTables_paginate {
  display: flex;
  justify-content: flex-end;
}

.dataTables_wrapper .dataTables_paginate .pagination {
  flex-wrap: wrap;
  gap: 0.25rem;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_paginate {
  margin-top: 0.5rem;
}

.datatable-footer,
.datatable-footer .d-flex {
  gap: 0.75rem;
}

.filter-chip-stack {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}

.filter-chip-stack::-webkit-scrollbar {
  height: 6px;
}

.filter-chip-stack::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

.mobile-stat-grid > * {
  display: flex;
}

.mobile-stat-grid .stat-card,
.mobile-stat-grid .lms-course-stat,
.mobile-stat-grid .bg-white.border {
  width: 100%;
}

.mobile-stat-grid .badge,
.mobile-stat-grid .symbol,
.mobile-stat-grid .btn {
  white-space: nowrap;
}

.calendar-filter-panel .filter-actions,
.calendar-filter-panel .calendar-scope-group {
  flex-wrap: wrap;
}

.calendar-filter-panel .form-select,
.calendar-filter-panel .btn {
  min-height: 38px;
}

.fc .fc-toolbar {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fc .fc-toolbar-title {
  font-size: 1rem;
}

.fc .fc-button {
  padding: 0.35rem 0.65rem;
}

.modal-body .table-responsive {
  max-height: 60vh;
  overflow-y: auto !important;
}

.modal-body .table-responsive table {
  min-width: 100%;
}

@media (max-width: 991.98px) {
  .mobile-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .table-responsive {
    position: relative;
  }

  .table-responsive::after {
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    display: block;
    width: 24px;
    height: 100%;
    margin-left: auto;
    pointer-events: none;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  }

  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_paginate {
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .dataTables_wrapper .dataTables_paginate .pagination {
    justify-content: center;
  }

  .modal-body .table-responsive table {
    font-size: 0.85rem;
  }

  .mobile-stat-grid {
    grid-template-columns: 1fr;
  }

  .calendar-filter-panel .btn-group,
  .calendar-filter-panel .filter-actions {
    width: 100%;
  }

  .calendar-filter-panel .filter-actions .btn,
  .calendar-filter-panel .btn-group .btn {
    flex: 1 1 auto;
  }

  .fc .fc-toolbar {
    align-items: flex-start;
  }

  .fc .fc-toolbar-title {
    font-size: 0.95rem;
  }
}