/*
 * One table scale for the whole site (admin panel and retailer/partner web app),
 * taken from the "Latest Transactions" table on the admin dashboard
 * (templates/includes/latest_transaction_table.html):
 *   cells 0.8125rem, headers 0.72rem bold uppercase, padding 0.65rem x 0.9rem.
 *
 * Loaded after every other stylesheet (admin/base.html and base.html). Pages
 * define their own table rules inside <style> blocks and the admin theme uses
 * !important, so the sizing here is !important too. Colours and backgrounds are
 * left to each page; only size, spacing and header typography are unified.
 */

:root {
  /* Smaller since 2026-10-24 (owner: on small screens a table did not fit the page). */
  --dp-table-font: 0.75rem;
  --dp-table-head-font: 0.66rem;
  --dp-table-cell-y: 0.5rem;
  --dp-table-cell-x: 0.65rem;
}

/* Laptops (1366 px and below): tighter still so every column fits. */
@media (max-width: 1400px) {
  :root {
    --dp-table-font: 0.72rem;
    --dp-table-head-font: 0.64rem;
    --dp-table-cell-y: 0.42rem;
    --dp-table-cell-x: 0.55rem;
  }
}

/* ---- Data grids ------------------------------------------------------------ */
body #result_list,
body .dp-table,
body .data-table,
body .rt-table,
body .ac-table,
body .funding-table,
body .scheme-table,
body .lt-table {
  font-size: var(--dp-table-font) !important;
  line-height: 1.4 !important;
}

body #result_list thead th,
body .dp-table thead th,
body .data-table thead th,
body .rt-table thead th,
body .ac-table thead th,
body .funding-table thead th,
body .scheme-table thead th,
body .lt-table thead th {
  padding: var(--dp-table-cell-y) var(--dp-table-cell-x) !important;
  font-size: var(--dp-table-head-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: #475569 !important;
  white-space: nowrap;
}

/* Sort links / the header text inside Django's changelist headers. */
body #result_list thead th a,
body #result_list thead th .text,
body #result_list thead th .text a {
  font-size: inherit !important;
  color: inherit !important;
}

body #result_list tbody td,
body #result_list tbody th,
body .dp-table tbody td,
body .data-table tbody td,
body .rt-table tbody td,
body .ac-table tbody td,
body .funding-table tbody td,
body .scheme-table tbody td,
body .lt-table tbody td {
  padding: var(--dp-table-cell-y) var(--dp-table-cell-x) !important;
  font-size: var(--dp-table-font) !important;
  line-height: 1.4 !important;
  vertical-align: middle !important;
}

/* Text inside cells follows the cell size (links, name/mobile lines, dates).
   Badges, pills and buttons keep their own, smaller sizes. */
body #result_list tbody td > a,
body #result_list tbody th > a,
body #result_list tbody td > span:not([class*="badge"]):not([class*="pill"]):not([class*="status"]),
body #result_list tbody td > div,
body #result_list tbody td > strong,
body #result_list tbody td > b,
body .data-table tbody td > a,
body .data-table tbody td > div {
  font-size: inherit !important;
}

/* Footer / summary rows. */
body .data-table tfoot td,
body .rt-table tfoot td,
body .lt-table tfoot td,
body #result_list tfoot td {
  padding: var(--dp-table-cell-y) var(--dp-table-cell-x) !important;
  font-size: var(--dp-table-font) !important;
}

/* The slab editor has inputs in every cell: keep rows compact. */
body .scheme-table tbody td {
  padding: 0.35rem 0.5rem !important;
}
body .scheme-table .form-control {
  font-size: var(--dp-table-font) !important;
}

/* ---- Detail tables (approve / reject / security pages) --------------------- */
/* Those tables have no class; the data grids above keep their own header size. */
body.directpe-admin-body #dp-main table:not([class]):not([id]) td,
body.directpe-admin-body #dp-main table:not([class]):not([id]) th {
  font-size: var(--dp-table-font) !important;
}

/* ---- Phones: a little tighter so more columns fit before scrolling --------- */
@media (max-width: 768px) {
  :root {
    --dp-table-font: 0.7rem;
    --dp-table-head-font: 0.62rem;
    --dp-table-cell-y: 0.35rem;
    --dp-table-cell-x: 0.45rem;
  }
}

/* Wide tables scroll inside their card instead of pushing the page sideways. */
body .dp-table-wrapper,
body .ach-wrap,
body .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Images / thumbnails inside list cells stay small. */
body #result_list tbody td img {
  max-height: 40px;
  width: auto;
}

/* ---- Reports (QR wallet-load submissions): dense, one line per row --------- */
/* Thousands of rows are reviewed here, so this list is tighter than the rest. */
body.model-transaction.change-list #result_list thead th {
  padding: 0.4rem 0.55rem !important;
  font-size: 0.66rem !important;
}
body.model-transaction.change-list #result_list tbody td,
body.model-transaction.change-list #result_list tbody th {
  padding: 0.3rem 0.55rem !important;
  font-size: 0.75rem !important;
  line-height: 1.3 !important;
}
body.model-transaction.change-list #result_list td.field-submitted_at,
body.model-transaction.change-list #result_list td.field-reviewed_at,
body.model-transaction.change-list #result_list td.field-status,
body.model-transaction.change-list #result_list td.field-amount,
body.model-transaction.change-list #result_list td.field-user_transaction_id,
body.model-transaction.change-list #result_list th.field-txn_id_display {
  white-space: nowrap;
}
body.model-transaction.change-list #result_list td.field-qr_code_display {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.model-transaction.change-list #result_list tbody td > a.dp-review-btn {
  font-size: 0.7rem !important;
}
/* Checkbox + view icon and the Edit/Delete icons: small and on one line. */
body.model-transaction.change-list #result_list td.action-checkbox {
  white-space: nowrap;
}
body.model-transaction.change-list #result_list .dp-icon-btn {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}
body.model-transaction.change-list #result_list .dp-icon-btn svg {
  width: 12px;
  height: 12px;
}

/* ---- Simple filter bar on every list (apps/common/simple_filters.py) ------- */
.dp-simple-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.65rem;
  margin: 0 0 0.75rem;
}
.dp-simple-filters label {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  min-width: 8.5rem;
}
.dp-simple-filters label.grow { flex: 1 1 12rem; }
.dp-simple-filters input,
.dp-simple-filters select {
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #0f172a;
  padding: 0.38rem 0.55rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #fff;
  min-height: 2.1rem;
  box-sizing: border-box;
  width: 100%;
}
.dp-simple-filters-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
@media (max-width: 640px) {
  .dp-simple-filters label { min-width: calc(50% - 0.4rem); flex: 1 1 calc(50% - 0.4rem); }
  .dp-simple-filters label.grow { flex-basis: 100%; }
  .dp-simple-filters input, .dp-simple-filters select { font-size: 16px; } /* no iOS zoom */
}

/* QR image in the QR Codes and Advance Credit QRs lists (apps/common/widgets.py::qr_thumbnail). */
#result_list td .dp-qr-thumb { display: inline-block; width: 64px; height: 64px; padding: 3px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 6px; vertical-align: middle; }
#result_list td .dp-qr-thumb img { width: 100%; height: 100%; max-height: none; object-fit: contain; display: block; }