/* ========================================================================
 *  KX-PAY V2 dashboard  ·  05-tables.css
 * -----------------------------------------------------------------------
 *  Filter bar, the transactions table, pagination, and role-based
 *  column hiding
 *
 *  Lifted verbatim from V1 dashboard.html lines 577-830.
 *  Load order matters — see the numeric prefix.
 * =======================================================================
 */

  /* --------------------------------------------------------------- FILTERS */
  /* Frosted-glass card with custom-styled dropdowns and search input. */
  .filters {
    background: rgba(255,255,255,0.82);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(96,165,250,0.22);
    border-radius: 16px;
    padding: 14px 18px; margin-bottom: 16px;
    display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
    box-shadow: 0 8px 32px rgba(59,130,246,0.08);
  }
  /* ------------------------------------------------- Collapsible filters */
  /* Desktop shows everything, so the toggle is not there and the wrapper is
     display:contents -- its children lay out as direct members of the
     .filters flex row exactly as they did before it existed.
     The mobile behaviour lives in 09-responsive.css. */
  #tx-filter-more { display: contents; }
  .filters-toggle { display: none; }

  .filters label {
    font-size: 11px; color: #1e40af;
    margin-right: 2px; margin-left: 4px;
    text-transform: uppercase; letter-spacing: 0.6px; font-weight: 700;
  }
  /* Custom-styled dropdown with chevron icon */
  .filters select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #cbd5e1; border-radius: 10px;
    background-color: white;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1L5 5L9 1' stroke='%231d4ed8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat; background-position: right 12px center;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    font-family: inherit; font-size: 13px; color: #0f172a;
    cursor: pointer; outline: none; transition: all 0.15s;
  }
  .filters select:hover { border-color: #60a5fa; }
  .filters select:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
  }
  /* Search input with magnifying-glass icon on the left */
  .filters input {
    padding: 8px 12px 8px 38px;
    border: 1px solid #cbd5e1; border-radius: 10px;
    background-color: white;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    background-repeat: no-repeat; background-position: 12px center;
    font-family: inherit; font-size: 13px; color: #0f172a;
    outline: none; transition: all 0.15s;
  }
  .filters input::placeholder { color: #94a3b8; }
  .filters input:hover { border-color: #60a5fa; }
  .filters input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
  }
  .filters .search-input { width: 280px; }
  /* Buttons — primary blue gradient, outline secondary */
  .btn-icon {
    padding: 8px 14px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white; border: none; border-radius: 10px;
    font-size: 13px; font-weight: 600;
    cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
    transition: all 0.15s;
  }
  .btn-icon:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(37,99,235,0.35);
  }
  .btn-icon.outline {
    background: white; color: #1d4ed8;
    border: 1px solid #93c5fd;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  .btn-icon.outline:hover {
    background: #eff6ff; border-color: #2563eb;
    filter: none;
    box-shadow: 0 2px 6px rgba(37,99,235,0.15);
  }

  /* ----------------------------------------------------------------- TABLE */
  /* Pagination footer for the transactions table */
  .tx-pagination {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; padding: 12px 0; flex-wrap: wrap;
  }
  .tx-pag-left, .tx-pag-right { display: flex; align-items: center; gap: 6px; }
  .tx-pag-right select {
    padding: 4px 8px; border: 1px solid #cbd5e1; border-radius: 6px;
    font-size: 12px; background: white; color: #475569;
  }
  .tx-pag-right .btn-icon { padding: 4px 10px; font-size: 12px; }
  .tx-pag-right .btn-icon:disabled { opacity: 0.4; cursor: not-allowed; }
  /* Numbered page buttons (1 2 ... 25 ... 49 50) */
  .tx-pag-numbers { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; }
  .tx-pag-num {
    min-width: 28px; padding: 4px 8px; border: 1px solid #cbd5e1;
    background: white; color: #475569; border-radius: 6px;
    font-size: 12px; font-family: inherit; cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .tx-pag-num:hover  { background: #eff6ff; border-color: #93c5fd; color: #1d4ed8; }
  .tx-pag-num.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white; border-color: transparent; font-weight: 700; cursor: default;
    box-shadow: 0 2px 8px rgba(37,99,235,0.3);
  }
  .tx-pag-num.active:hover { filter: brightness(1.05); border-color: transparent; color: white; }
  .tx-pag-ellipsis {
    color: #94a3b8; padding: 0 4px; font-size: 12px; user-select: none;
  }

  .table-wrap {
    background: white; border: 1px solid #e2e8f0; border-radius: 8px;
    overflow-x: auto;          /* horizontal scroll for wide tables */
    overflow-y: visible;
  }
  table { width: 100%; border-collapse: collapse; }
  /* Only the transactions table is wide enough to need horizontal scroll. */
  #tab-transactions .table-wrap table { min-width: 2060px; }
  th {
    text-align: left; padding: 12px 10px; font-size: 13px;
    color: #1e40af; background: linear-gradient(180deg, #eff6ff 0%, #f0f9ff 100%);
    border-bottom: 2px solid rgba(96,165,250,0.3);
    font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
    white-space: nowrap;
  }
  td {
    padding: 7px 8px; font-size: 13px; color: #0f172a;
    border-bottom: 1px solid #f1f5f9;
    white-space: nowrap;
  }
  /* Activity tab: let the Details column wrap onto multiple lines so the
     long retry / config / audit messages stay readable without horizontal
     scrolling. Other cells in the row stay nowrap (date, action badge,
     brand name etc. all read better as a single line). vertical-align:top
     keeps multi-line rows looking aligned with the single-line cells. */
  #tab-activity td:nth-child(5) {
    white-space: normal;
    word-break: break-word;
    line-height: 1.4;
    min-width: 280px;
  }
  #tab-activity td { vertical-align: top; }
  tbody tr { cursor: pointer; transition: background .1s; }
  tbody tr:hover { background: #fef3c7; }
  /* Transactions table rows no longer open the detail modal on click —
     there's a dedicated "Detail" button at the end of each row. The row
     itself isn't clickable, so don't show a pointer cursor on it. (The
     hover-tint is kept because it helps the eye track which row it's on
     across the very wide 23-column table.) */
  #tx-tbody tr { cursor: default; }
  tbody tr.flash { animation: flash 1.5s ease-out; }
  @keyframes flash {
    0% { background: #fef3c7; }
    100% { background: transparent; }
  }
  .no-rows {
    text-align: center; padding: 48px 16px; color: #94a3b8; font-size: 14px;
  }
  td.amount { font-variant-numeric: tabular-nums; text-align: right; font-weight: 500; }
  td.muted { color: #64748b; }
  td.mono { font-family: ui-monospace, monospace; font-size: 12px; }
  td.mono-time { font-family: ui-monospace, monospace; font-size: 12px; color: #475569; }
  td.profit-pos { color: #059669; font-weight: 600; }
  td.profit-neg { color: #dc2626; font-weight: 600; }
  td.profit-zero { color: #64748b; }

  /* Click-to-copy cells in the Transactions table.
     Applied to: Created, Username, Name, Amount, Transfer Completed.
     The browser shows a "copy" cursor on hover and the cell gets a soft
     indigo tint so the user can tell it's interactive. */
  td.tx-copyable                   { cursor: copy; transition: background-color 0.15s; }
  td.tx-copyable:hover             { background-color: rgba(99, 102, 241, 0.12); }
  td.tx-copyable.tx-copied-flash   { background-color: rgba(16, 185, 129, 0.30); }

  /* -------------------------------------------------- Brand-role hides */
  /* Brand-side users (brand_admin / operator / viewer) don't see internal
     kx-pay info: provider columns, profit, pricing snapshot.
     They also don't see the BRAND column in the table — but the Brand filter
     dropdown stays visible so they can filter across multiple assigned brands. */
  body.brand-role .col-brand,
  body.brand-role .col-provider,
  body.brand-role .col-profit               { display: none; }
  /* Ref ID column — super_admin only (audit identifier sent to PDGFID).
     Hidden from every other role via the data-role attribute set on
     <html> in afterLogin(). Same CSS-only hiding pattern as the columns
     above so the JS render code stays simple. */
  html:not([data-role="super_admin"]) .col-refid { display: none; }

  /* kx_admin — hide provider money internals (Prov. Bal. Before, Prov. Fee)
     and Profit column. kx_admin still sees Provider name, Provider Account,
     AND Prov. Bal. After columns.
     (Added 14-Jun-2026 — internal money detail privacy for kx_admin.)
     (Updated 09-Jul-2026 — Prov. Bal. After now visible to kx_admin;
      excluded via :not(.col-prov-balafter). Also matches BOTH <th> and <td>:
      headers have `col-provider amount`, cells have `col-provider amount muted`.) */
  html[data-role="kx_admin"] .col-provider.amount:not(.col-prov-balafter),
  html[data-role="kx_admin"] .col-profit { display: none !important; }

  /* kx_admin — hide certain fields inside the transaction Detail modal:
     · the whole "Pricing snapshot" section (Customer charge, Margin protection, Profit)
     · Provider "Fee" and Provider "Balance before" k/v rows (tagged .kxa-hide)
     kx_admin still sees Provider Account, Provider name, Product code,
     Invoice, Message, and Balance after.
     (Added 09-Jul-2026 — modal privacy for kx_admin.) */
  html[data-role="kx_admin"] .modal-section-pricing,
  html[data-role="kx_admin"] .kxa-hide { display: none !important; }

  /* -------------------------------------------------- OLG ticket hide */
  /* OLG engine doesn't issue ticket numbers, so when an OLG brand is the
     active filter, hide the entire Ticket column (both <th> and <td>). */
  body.tx-hide-ticket .col-ticket           { display: none; }
  /* Hide the entire Provider section in the transaction modal for brand-side users.
     Brands should never see which internal provider is doing the work. */
  body.brand-role .modal-section-provider   { display: none; }
  body.brand-role .modal-section-provider,
  body.brand-role .modal-section-pricing    { display: none; }
  /* Transaction modal header — Approve & Reject buttons */
  /* tx-actions sits ABOVE the title in DOM order so we use order:99
     to push it to a new row BELOW title+close (which keep order:0).
     flex-basis:100% forces the full width, triggering the wrap.
     flex-wrap on the inner row lets buttons themselves stack on very
     narrow screens. */
  .tx-actions {
    display: flex; gap: 8px; align-items: center;
    flex-wrap: wrap; flex-basis: 100%; order: 99;
    margin-top: 4px;
  }
  .tx-act-btn {
    padding: 6px 12px; border-radius: 6px; font-weight: 600;
    font-size: 12px; cursor: pointer; border: 1px solid transparent;
    font-family: inherit; transition: filter 0.12s, transform 0.08s;
  }
  .tx-act-btn:hover    { filter: brightness(1.05); }
  .tx-act-btn:active   { transform: scale(0.97); }
  .tx-act-btn:disabled { opacity: 0.6; cursor: wait; }
  .tx-act-approve { background: #10b981; color: white; border-color: #059669; }
  .tx-act-approve:hover { background: #059669; }
  .tx-act-reject  { background: #ef4444; color: white; border-color: #dc2626; }
  .tx-act-reject:hover  { background: #dc2626; }
  .tx-act-cancel  { background: #94a3b8; color: white; border-color: #64748b; }
  .tx-act-cancel:hover  { background: #64748b; }

  /* Circular verify badges — borrowed from design preview 3.
     Each .nc-icon is a perfectly round chip with a coloured background. */
  .nc-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    cursor: pointer; user-select: none; font-size: 13px; font-weight: 700;
    transition: transform 0.12s, filter 0.12s;
  }
  .nc-icon:hover { transform: scale(1.08); filter: brightness(0.95); }
  .verif-ok      { background: #d1fae5; color: #059669; }
  .verif-bad     { background: #fee2e2; color: #dc2626; }
  .verif-pending { background: #fef3c7; color: #d97706; }
  .verif-fail    { background: #f1f5f9; color: #64748b; }
  .verif-none    { background: #f1f5f9; color: #cbd5e1; }