/* Locked flex-shell for paged table cards.
   The card fills the remaining screen height; only .wt-card-scroll
   (the data rows) scrolls. Header / top stats / pagination footer stay pinned. */

.wt-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-panel, #252525);
}

/* Top area: stats / title / filters — pinned, never scrolls */
.wt-card-head {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color);
}

/* The ONLY scrollable region: the data rows */
.wt-card-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: auto;
}

/* Bottom area: pagination — pinned, never scrolls */
.wt-card-foot {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-top: 1px solid var(--border-color);
  background: var(--bg-panel, #252525);
}
.wt-card-foot .why-pager { margin-top: 0; }

.wt-card-scroll > table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
}

/* Sticky column header inside the scrolling region */
.wt-card-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-panel-light, #16161a) !important;
  color: var(--text-main, #e6ebf2) !important;
  box-shadow: inset 0 -1px 0 var(--border-light, rgba(255, 255, 255, 0.10));
  vertical-align: middle;
}
.wt-card-scroll thead th.why-sortable:hover {
  background: var(--bg-panel, #252525) !important;
}

/* ============================================================
   Manajemen Order: locked tab layout
   #page-order fills the content height; the active panel and its
   .wt-card stretch, so only .wt-card-scroll scrolls while the
   header (wt-card-head) and pagination (wt-card-foot) stay pinned.
   ============================================================ */
/* Make #page-order fill the viewport below topbar */
#page-order.active {
  display: flex !important;
  flex-direction: column;
  height: calc(100vh - 120px);
  min-height: 400px;
  max-height: calc(100vh - 120px);
  overflow: hidden;
}
/* Tab panel stretches to fill #page-order */
#page-order > .order-tab-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
/* wt-card stretches to fill tab panel */
#page-order > .order-tab-panel > .wt-card {
  flex: 1 1 auto;
  width: 100%;
  min-height: 320px;
}