/* =====================================================================
   django-power-tables :: power_tables.css
   Sticky first column, sortable headers, mobile card layout + toggle.
   Uses DaisyUI CSS variables so it adapts to all daisyUI themes.
   ===================================================================== */

.pt-wrap { position: relative; }

.pt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- sortable headers ---------------------------------------------- */
.pt-sortable { cursor: pointer; white-space: nowrap; user-select: none; }
.pt-sortable:hover { background-color: var(--color-base-200); }
.pt-sort-ind { opacity: .55; font-size: .85em; margin-left: .25rem; }

/* ---- sticky first column (table mode only) ------------------------- */
#table-container:not(.pt-cards) table th.pt-sticky-col,
#table-container:not(.pt-cards) table td.pt-sticky-col {
  position: sticky;
  left: 0;
  z-index: 2;
  background-color: var(--color-base-100);
  box-shadow: 2px 0 5px -2px rgba(0, 0, 0, .15);
}
/* keep the sticky header cell above sticky body cells */
#table-container:not(.pt-cards) table thead th.pt-sticky-col {
  z-index: 3;
  background-color: var(--color-base-200);
}

/* zebra striping: repaint sticky cell so rows don't show through on scroll */
#table-container:not(.pt-cards) table.table-zebra > tbody > tr:nth-child(odd) td.pt-sticky-col {
  background-color: var(--color-base-200);
}

/* ---- mobile card layout (toggled via .pt-cards on #table-container) - */
#table-container.pt-cards table,
#table-container.pt-cards thead,
#table-container.pt-cards tbody,
#table-container.pt-cards tr,
#table-container.pt-cards td {
  display: block;
  width: 100%;
}
#table-container.pt-cards thead { display: none; }
#table-container.pt-cards .pt-scroll { overflow-x: visible; }

#table-container.pt-cards tr {
  border: 1px solid var(--color-base-300);
  border-radius: .5rem;
  margin-bottom: .75rem;
  padding: .25rem .5rem .5rem;
  background-color: var(--color-base-100);
}
#table-container.pt-cards td {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border: 0;
  border-bottom: 1px solid color-mix(in oklab, var(--color-base-300) 60%, transparent);
  padding: .5rem .25rem;
  text-align: right;
}
#table-container.pt-cards tr td:last-child { border-bottom: 0; }
#table-container.pt-cards td::before {
  content: attr(data-label);
  font-weight: 600;
  text-align: left;
  color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
}
/* selection checkbox cell: no label clutter, sits at the top of the card */
#table-container.pt-cards td[data-label=""] { justify-content: flex-end; }
#table-container.pt-cards td[data-label=""]::before { content: none; }
/* sentinel / empty rows shouldn't look like data cards */
#table-container.pt-cards tr.pt-sentinel,
#table-container.pt-cards tr.pt-empty { border: 0; background: transparent; }
#table-container.pt-cards tr.pt-sentinel td,
#table-container.pt-cards tr.pt-empty td { border: 0; justify-content: center; }
#table-container.pt-cards tr.pt-sentinel td::before,
#table-container.pt-cards tr.pt-empty td::before { content: none; }