/* ============================================================
   VOLBOO — Data table layer
   Loads LAST, after css/styles.css.

   Shared by every page that lists records (transactions, reserved
   accounts). A ledger is a reading surface, so the work here is rhythm rather
   than decoration: one identity column that carries the icon, the
   type and the reference; money right-aligned on tabular figures so
   the digits line up down the column; everything else quiet.

   Below 768px the table stops being a table and becomes a list: a
   six-column grid cannot be read on a phone, and side scrolling is
   not reading.
   ============================================================ */

/* ------------------------------------------------------------
   0. Table tokens

   The same stocks and inks the dashboard's Recent Transactions
   panel uses, so a row here and a row there read as one surface.
   Scoped to .page-content rather than :root because this sheet is
   only ever loaded by the two list pages. Keep in step with the
   matching block in css/dashboard.css.
   ------------------------------------------------------------ */
.page-content{
  --d-peach:#fcf0e4;
  --d-green:#ecf5e7;
  --d-blue:#ebf0fe;
  --d-mint:#ecf5f4;

  --d-ink-peach:#b25a06;
  --d-ink-green:#4f882f;
  --d-ink-blue:#022dbd;
  --d-ink-mint:#3b7e76;

  --d-panel-line:#efefef;
  --d-row-line:#f2f2f2;
  --d-head-line:#dedede;
  --d-th:#4d5761;

  --d-ok-bg:#d9f2ef;   --d-ok-ink:#00785a;
  --d-warn-bg:#fff1c8; --d-warn-ink:#8a5c00;
  --d-bad-bg:#fdecea;  --d-bad-ink:#b42318;
}
[data-theme="dark"] .page-content{
  --d-peach:#2b211a;
  --d-green:#1c2418;
  --d-blue:#1a1f2e;
  --d-mint:#172321;

  --d-ink-peach:#e3a263;
  --d-ink-green:#8bc96a;
  --d-ink-blue:#93adf7;
  --d-ink-mint:#74bfb2;

  --d-panel-line:#232b2e;
  --d-row-line:#202629;
  --d-head-line:#303a3d;
  --d-th:#8c9992;

  --d-ok-bg:#10312a;   --d-ok-ink:#5ccfab;
  --d-warn-bg:#342a10; --d-warn-ink:#e8c46e;
  --d-bad-bg:#3a1f1e;  --d-bad-ink:#f4a6a0;
}

/* ------------------------------------------------------------
   1. Toolbar — search leads, actions trail
   ------------------------------------------------------------ */
.tbl-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:20px;
}
.tbl-toolbar .search-box{flex:1 1 240px;max-width:420px;min-width:0}
.tbl-actions{display:flex;align-items:center;gap:8px;margin-left:auto}

/* Count of filters currently narrowing the list */
.filter-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;margin-left:2px;
  border-radius:999px;background:var(--accent);color:#fff;
  font-size:.625rem;font-weight:700;line-height:1;
}
/* display:inline-flex above would otherwise beat the UA [hidden] rule */
.filter-count[hidden]{display:none}
.btn.is-active{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}

/* ------------------------------------------------------------
   2. Filter panel
   ------------------------------------------------------------ */
.filter-panel{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:22px;margin-bottom:20px;
}
.filter-panel.active{display:block;animation:rise .28s cubic-bezier(.16,1,.3,1) both}
.filter-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:18px}
.filter-group label{font-size:.6875rem;font-weight:600;color:var(--text3);margin-bottom:5px}
.filter-select,.filter-input{
  padding:8px 13px;border-radius:999px;
  border:1px solid var(--border-strong);background:var(--bg-input);
  font-size:.78125rem;color:var(--text);transition:var(--transition);
}
.filter-select:focus,.filter-input:focus{
  outline:none;border-color:var(--accent);background:var(--bg);
  box-shadow:0 0 0 3px var(--accent-light);
}
.filter-actions{padding-top:16px;border-top:1px solid var(--border)}

/* ------------------------------------------------------------
   3. Table
   ------------------------------------------------------------ */
/* The panel: one hairline, one radius, no inner padding of its own —
   the table's own cell padding sets the gutter, the way the dashboard
   panel does. */
.tbl-card{padding:0 20px;border-color:var(--d-panel-line);border-radius:17px}
.table-container{overflow-x:auto;overflow-y:hidden}
.tbl{width:100%;border-collapse:separate;border-spacing:0}

/* Column heads read as labels, not as shouted small caps */
.tbl th{
  text-align:left;padding:21px 12px 10px;white-space:nowrap;
  font-size:.78125rem;font-weight:500;letter-spacing:-.01em;
  text-transform:none;color:var(--d-th);background:transparent;
  border-bottom:1px solid var(--d-head-line);
}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl th.right,.tbl td.right{text-align:right}
.tbl td{
  padding:12px;height:58px;font-size:.78125rem;color:var(--text2);
  border-bottom:1px solid var(--d-row-line);vertical-align:middle;
}
.tbl tbody tr{transition:var(--transition)}
.tbl tbody tr[data-ref]{cursor:pointer}
.tbl tbody tr:hover td{background:var(--bg-hover)}
/* The identity block steps aside on hover — the same acknowledgement the
   dashboard rows give the pointer. */
.tbl tbody tr:hover .t-main{padding-left:6px}
.tbl tbody tr:last-child td{border-bottom:none}

/* Identity cell — icon, type, reference */
.t-main{display:flex;align-items:center;gap:9px;min-width:0;transition:padding-left .18s ease}
.t-icon{
  width:30px;height:30px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:.65rem;
}
/* Colour by direction, on the card stocks rather than on alert colours:
   money out is not a warning, it is a withdrawal you made. */
.t-icon.collection{background:var(--d-green);color:var(--d-ink-green)}
.t-icon.withdrawal,.t-icon.payout{background:var(--d-peach);color:var(--d-ink-peach)}
.t-icon.transfer,.t-icon.shift,.t-icon.other{background:var(--d-blue);color:var(--d-ink-blue)}
.t-icon.account{background:var(--d-mint);color:var(--d-ink-mint)}
.t-text{min-width:0}
.t-type{
  font-size:.9375rem;font-weight:500;color:var(--text);
  letter-spacing:-.015em;line-height:1.2;
}
/* Time + status beside the reference. Desktop has dedicated columns for
   both, so this line only appears once the table collapses to rows. */
.t-sub{display:none}
.t-sub .t-dot{opacity:.6}
.t-state{font-weight:500}
.t-state.success{color:var(--d-ok-ink)}
.t-state.pending{color:var(--d-warn-ink)}
.t-state.failed{color:var(--d-bad-ink)}
.t-ref{
  display:flex;align-items:center;gap:6px;margin-top:3px;
  font-size:.6875rem;color:var(--text4);line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.t-ref span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:190px}
.copy-icon{
  cursor:pointer;font-size:.625rem;color:var(--text4);
  padding:2px;border-radius:4px;transition:var(--transition);
}
.copy-icon:hover{color:var(--accent)}
.copy-icon.copied{color:var(--accent)}

/* Money — tabular so the column lines up. Plain ink in both directions:
   the sign and the icon already say which way it went, and two coloured
   columns fight the status pill beside them. */
.t-amount{
  font-size:1rem;font-weight:600;letter-spacing:-.025em;
  color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.t-amount.in{color:var(--text)}

.t-date{font-size:.78125rem;color:var(--text2);white-space:nowrap;font-variant-numeric:tabular-nums}
.t-bank{font-size:.78125rem;color:var(--text2)}

/* Status pills, on the same stocks as the dashboard's tags */
.tbl .status-badge{
  height:28px;padding:0 9px;border-radius:9px;border:0;
  font-size:.75rem;font-weight:500;letter-spacing:-.005em;line-height:1;
  justify-content:center;
}
.tbl .status-badge.success{background:var(--d-ok-bg);color:var(--d-ok-ink)}
.tbl .status-badge.pending{background:var(--d-warn-bg);color:var(--d-warn-ink)}
.tbl .status-badge.failed{background:var(--d-bad-bg);color:var(--d-bad-ink)}
.tbl .status-badge.neutral{background:var(--bg-input);color:var(--text2)}

/* Webhook state — quieter than the transaction's own status */
.hook{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.75rem;font-weight:500;color:var(--text3);white-space:nowrap;
}
.hook::before{
  content:'';width:5px;height:5px;border-radius:50%;background:var(--text4);
}
.hook.sent{color:var(--accent)}
.hook.sent::before{background:var(--accent)}
.hook.failed{color:var(--red)}
.hook.failed::before{background:var(--red)}

/* The chevron stays because these rows go somewhere — but it is a hint,
   not a button, so it carries no chrome until the row is pointed at. */
.t-go{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:transparent;
  color:var(--text4);font-size:.625rem;transition:var(--transition);
}
.tbl tbody tr:hover .t-go{color:var(--text2)}

/* ------------------------------------------------------------
   Expanding detail row
   For records that have more to say but no page of their own. The
   chevron turns to point down while open, and the panel sits on a
   recessed surface so it reads as belonging to the row above it
   rather than as another row in the list.
   ------------------------------------------------------------ */
.tbl tbody tr.is-expandable{cursor:pointer}
.tbl tbody tr.is-open td{background:var(--bg-hover)}
.tbl tbody tr.is-open .t-go{transform:rotate(90deg);color:var(--text2)}

.tbl tr.detail-row{display:none}
.tbl tr.detail-row.open{display:table-row}
.tbl tr.detail-row > td{
  padding:0;background:var(--bg-subtle);
  border-bottom:1px solid var(--d-row-line);
}
.detail-panel{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:16px 28px;padding:20px 18px 22px;margin:0;
}
.detail-item{min-width:0}
.detail-item dt{
  font-size:.6875rem;font-weight:500;color:var(--text4);
  margin:0 0 3px;letter-spacing:-.005em;
}
.detail-item dd{
  margin:0;font-size:.8125rem;color:var(--text);
  display:flex;align-items:center;gap:7px;
  word-break:break-word;min-width:0;
}
.detail-item dd span{overflow:hidden;text-overflow:ellipsis}
.detail-empty{
  padding:20px 18px;margin:0;font-size:.78125rem;color:var(--text4);
}

/* ------------------------------------------------------------
   4. Loading and empty states
   ------------------------------------------------------------ */
.t-skel{height:11px;border-radius:6px;
  background:linear-gradient(90deg,var(--bg-input) 25%,var(--bg-hover) 37%,var(--bg-input) 63%);
  background-size:400% 100%;animation:t-shimmer 1.4s ease infinite;
}
.t-skel.circle{width:30px;height:30px;border-radius:50%}
.t-skel.w40{width:40%}.t-skel.w60{width:60%}.t-skel.w80{width:80%}
@keyframes t-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.t-skel{animation:none}}

.t-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:64px 20px;text-align:center;color:var(--text4);
}
.t-empty-icon{
  width:auto;height:auto;border-radius:0;background:none;
  color:var(--text4);font-size:1.25rem;opacity:.5;margin-bottom:2px;
}
.t-empty h4{font-size:.8125rem;font-weight:600;color:var(--text2);margin:0}
.t-empty p{font-size:.71875rem;margin:0;max-width:300px;line-height:1.5}

/* ------------------------------------------------------------
   5. Pagination
   ------------------------------------------------------------ */
/* The footer sits inside the panel's own gutter, with one hairline
   separating it from the last row. */
.pagination{margin-top:0;padding:16px 0 20px;border-top:1px solid var(--d-row-line)}

/* ------------------------------------------------------------
   5b. Between desktop and phone, columns leave one at a time

   Six columns stop fitting well before the phone layout takes over,
   and a ledger that scrolls sideways is not a ledger you can read.
   Each column that goes is either redundant or reappears inside the
   identity cell, so nothing is actually lost on the way down.
   ------------------------------------------------------------ */

/* Both pages share .tbl, so every column rule is scoped to the table
   it belongs to — the 4th column is Webhook on one and Created on the
   other, and a positional selector would hide the wrong one. */

/* --- 1000px: the webhook state goes; it is the least-read column --- */
@media(max-width:1000px){
  .tbl--transactions th:nth-child(4),
  .tbl--transactions td[data-label="Webhook"]{display:none}
}

/* --- 880px: status and date fold into the reference line ---------- */
@media(max-width:880px){
  .tbl--transactions th:nth-child(3),
  .tbl--transactions th:nth-child(5),
  .tbl--transactions td[data-label="Status"],
  .tbl--transactions td[data-label="Date"]{display:none}

  /* .t-sub already carries the time and the status; it simply had no
     reason to show while both had columns of their own. */
  .tbl--transactions .t-sub{
    display:flex;align-items:center;gap:5px;margin-top:3px;
    font-size:.71875rem;color:var(--text4);white-space:nowrap;
  }
}

/* --- 820px: the accounts list drops its Created column ------------ */
@media(max-width:820px){
  .tbl--accounts th:nth-child(4),
  .tbl--accounts td[data-label="Created"]{display:none}
}

/* ------------------------------------------------------------
   6. Phone: every row becomes a line of a list
   A six-column ledger cannot be read on a 390px screen, and
   side-scrolling a table is not reading. Each row is re-laid as a
   single line: icon, type, then reference, time and status on a
   muted second line, with the amount held to the right.
   ------------------------------------------------------------ */
@media(max-width:768px){
  .tbl-toolbar{gap:8px}
  .tbl-toolbar .search-box{flex:1 1 100%;max-width:none}
  .tbl-actions{margin-left:0;width:100%}
  .tbl-actions .btn{flex:1}

  /* --- Phone: the table becomes a transaction list ---------------
     Each row is one line of the list, not a card of labelled fields:
     icon, type, then reference + time + status on a muted second line,
     with the amount held to the right. Status, webhook and the full
     date stamp fold into that second line or drop, which is what lets
     a row be read in one glance instead of five. */
  .tbl-card{padding:2px 2px 8px;background:transparent;border:none}
  /* The base sheet bleeds .table-container past its parent with a
     negative margin, which is right for a scrolling .data-table and
     wrong here — this one has already become a list. */
  .table-container{overflow:visible;margin:0;padding:0}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}

  .tbl tbody tr{
    display:flex;align-items:flex-start;gap:12px;
    background:transparent;border:none;
    border-bottom:1px solid var(--border);
    border-radius:0;padding:13px 4px;margin:0;
  }
  .tbl tbody tr:last-child{border-bottom:none}
  .tbl tbody tr:hover td,
  .tbl tbody tr.is-open td{background:transparent}

  /* width:auto undoes the width:100% set above for the stacked-card era.
     As flex items those cells would each claim the full row: the amount
     cell does not shrink, so it took the row and left the identity cell
     at zero width. */
  .tbl td{border:none;padding:0;display:block;width:auto}
  .tbl td::before{display:none}

  /* Identity takes the room that is left */
  .tbl td.cell-main{flex:1 1 auto;min-width:0}
  .t-icon{width:34px;height:34px;font-size:.7rem}
  .t-type{font-size:.9375rem;font-weight:500;line-height:1.3}
  /* .t-type claims the first line, so the reference and the sub-line
     pair up on the second one. */
  /* A grid, not a wrapping flex row: wrapping decides before it shrinks,
     so the long reference would take a whole line to itself and push the
     meta below it. Two tracks keep them on one line, the first one free to
     shrink so the reference truncates into whatever is left. */
  .t-text{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;column-gap:6px;
  }
  .t-text .t-type{grid-column:1 / -1}
  .t-ref{font-size:.75rem;grid-column:1;min-width:0;overflow:hidden}
  .t-ref span{max-width:none;min-width:0;flex:1 1 auto}
  .t-sub{grid-column:2}
  .copy-icon{display:none}
  .t-sub{
    display:flex;align-items:center;gap:5px;flex-shrink:0;
    font-size:.75rem;color:var(--text4);white-space:nowrap;
  }

  /* Amount sits opposite, everything else in that group steps out */
  .tbl td[data-label="Amount"]{flex:0 0 auto;text-align:right}
  .t-amount{font-size:.9375rem;font-weight:700}
  .tbl td[data-label="Status"],
  .tbl td[data-label="Webhook"],
  .tbl td[data-label="Date"]{display:none}

  /* A row that only navigates does not need a chevron on a phone.
     One that expands in place still does, since nothing else says so. */
  .tbl td.cell-go{display:none}
  .tbl tbody tr.is-expandable td.cell-go{
    display:block;flex:0 0 auto;color:var(--text4);
  }
  .tbl tbody tr.is-expandable td.cell-go .t-go{transform:none}
  .tbl tbody tr.is-open .t-go{transform:rotate(90deg)}

  /* An expanded row keeps its own hairline and drops a tinted panel
     directly beneath it, so the pair still reads as one entry. */
  .tbl tbody tr.is-open{border-bottom-color:transparent}
  .tbl tr.detail-row.open{
    display:block;background:var(--bg-subtle);
    border:1px solid var(--border);border-radius:14px;
    margin:0 0 12px;
  }
  .tbl tr.detail-row > td{display:block;background:transparent;border:none;padding:0}
  .tbl tr.detail-row > td::before{display:none}
  .detail-panel{grid-template-columns:1fr;gap:13px;padding:14px 16px}
  .detail-empty{padding:14px 16px}
}

@media(max-width:480px){
  .tbl tbody tr{padding:12px 2px;gap:10px}
  .t-icon{width:31px;height:31px}
  .t-type{font-size:.875rem}
  .t-ref span{max-width:92px}
  .t-ref,.t-sub{font-size:.71875rem}
  .t-amount{font-size:.875rem}
}