/* Basic light/dark and card polish */
:root { color-scheme: light dark; }

/* Support BOTH attributes: data-theme (yours) and data-bs-theme (Bootstrap)
   Define full variable sets so Bootstrap utilities (bg-body, bg-body-tertiary, borders) react correctly. */
html[data-theme="dark"],
html[data-bs-theme="dark"],
[data-theme="dark"],
[data-bs-theme="dark"] {
  --bs-body-bg: #0b0d10;
  --bs-body-bg-rgb: 11,13,16;
  --bs-body-color: #e6e8eb;
  --bs-body-color-rgb: 230,232,235;

  /* Make Bootstrap backgrounds & borders theme-aware */
  --bs-tertiary-bg: #0f1318;
  --bs-secondary-color: #9aa3af;
  --bs-border-color: rgba(255,255,255,.12);

  /* Your card vars */
  --card-bg: #12161c;
  --card-border: rgba(255,255,255,.08);
}

html[data-theme="light"],
html[data-bs-theme="light"],
[data-theme="light"],
[data-bs-theme="light"] {
  --bs-body-bg: #ffffff;
  --bs-body-bg-rgb: 255,255,255;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33,37,41;

  --bs-tertiary-bg: #f8f9fa;
  --bs-secondary-color: #6c757d;
  --bs-border-color: rgba(0,0,0,.10);

  --card-bg: #ffffff;
  --card-border: rgba(0,0,0,.08);
}

/* Ensure page surfaces react to the variables */
html, body { background-color: var(--bs-body-bg); color: var(--bs-body-color); }
.bg-body        { background-color: var(--bs-body-bg) !important; }
.bg-body-tertiary { background-color: var(--bs-tertiary-bg) !important; }

/* Theme-aware surface for cards/blocks */
.card-soft {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  color: var(--bs-body-color);
}

.sticky-top { top: 0; }

/* Offcanvas width tweak */
.offcanvas-end { width: 360px; }
@media (max-width: 576px) { .offcanvas-end { width: 100%; } }

/* === Global Mobile Stacked Tables (applies at ≤576px) === */
@media (max-width: 576px) {
  /* We stack any table that has the helper class added by JS */
  .table-mobile-stack thead { display: none; }
  .table-mobile-stack,
  .table-mobile-stack tbody,
  .table-mobile-stack tr,
  .table-mobile-stack td { display: block; width: 100%; }

  .table-mobile-stack tr {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--card-bg, var(--bs-body-bg));
    overflow: hidden;
  }

  .table-mobile-stack td {
    border: 0 !important;
    border-bottom: 1px solid var(--bs-border-color) !important;
    padding: .75rem 1rem !important;
  }
  .table-mobile-stack td:last-child { border-bottom: 0 !important; }

  .table-mobile-stack td::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    margin-bottom: .25rem;
    color: var(--bs-secondary-color);
  }

  /* Nice button row on mobile for action cells */
  .table-mobile-stack td.actions {
    display: flex;
    gap: .5rem;
    align-items: center;
    flex-wrap: wrap;
  }
}

/* Ensure any AJAX box can scroll horizontally if needed */
.be-ajax-wrap,
.be-ajax-wrap .table-responsive {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}
.be-ajax-wrap .text-break {
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
/* If parent applies overflow-x:hidden, this still allows inner scroll */
.accordion-body .be-ajax-wrap,
.offcanvas-body .be-ajax-wrap,
.modal-body .be-ajax-wrap {
  overflow-x: auto !important;
}

/* lets children with their own overflow-x scroll independently */
.accordion-body, .offcanvas-body, .modal-body { overscroll-behavior-x: contain; }