/* ========================================================================
 *  KX-PAY V2 dashboard  ·  04-reports.css
 * -----------------------------------------------------------------------
 *  Main container and the Reports tab, including both reconciliation
 *  drill-downs
 *
 *  Lifted verbatim from V1 dashboard.html lines 410-576.
 *  Load order matters — see the numeric prefix.
 * =======================================================================
 */

  /* ------------------------------------------------------------------ MAIN */
  /* No max-width so the wide transactions table uses the full viewport. */
  /* A little more room at the top than V1 had. There is no bar above this
     any more, so the first heading on the page is the first thing on the
     page -- 20px left it sitting flush against the top edge. */
  main { padding: 26px 26px 28px; }
  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* ====================== REPORTS PAGE ====================== */
  .mode-toggle { display: inline-flex; gap: 4px; padding: 4px; background: #f1f5f9; border-radius: 10px; }
  .mode-toggle button {
    padding: 6px 12px; border: 0; background: transparent; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600; color: #64748b;
    border-radius: 7px; transition: all 0.15s;
  }
  .mode-toggle button.active {
    background: white; color: #1d4ed8;
    box-shadow: 0 2px 6px rgba(15,23,42,0.08);
  }
  .rp-summary-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 14px; margin-bottom: 22px;
  }
  .rp-summary-card {
    background: white;
    border: 1px solid rgba(96,165,250,0.20);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 4px 20px rgba(59,130,246,0.05);
  }
  .rp-summary-card .rp-label {
    font-size: 11px; color: #64748b;
    text-transform: uppercase; letter-spacing: 0.6px;
    font-weight: 700; margin-bottom: 6px;
  }
  .rp-summary-card .rp-value {
    font-size: 20px; font-weight: 800; letter-spacing: -0.5px;
    color: #0f172a;
  }
  .rp-summary-card.profit {
    background: linear-gradient(135deg, #d1fae5, #ecfdf5);
    border-color: #34d399;
  }
  .rp-summary-card.profit .rp-value { color: #065f46; }
  @media (max-width: 1200px) { .rp-summary-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 720px)  { .rp-summary-grid { grid-template-columns: repeat(2, 1fr); } }

  .rp-tabs {
    display: flex; gap: 0;
    border-bottom: 1px solid #e2e8f0;
    margin: 0 4px 16px;
  }
  .rp-tabs button {
    padding: 12px 18px; background: transparent;
    border: 0; border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    font-family: inherit; font-size: 13px; font-weight: 600;
    color: #64748b; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .rp-tabs button:hover { color: #0f172a; }
  .rp-tabs button.active { color: #1d4ed8; border-bottom-color: #2563eb; }
  .rp-tabs button .rp-count {
    display: inline-block; padding: 1px 7px; border-radius: 99px;
    font-size: 10px; font-weight: 700; background: #f1f5f9; color: #64748b;
  }
  .rp-tabs button.active .rp-count { background: #dbeafe; color: #1d4ed8; }

  .rp-panel { display: none; }
  .rp-panel.active { display: block; }

  /* Hide admin-only items for brand-side users */
  body.brand-role .rp-admin-only { display: none !important; }
  /* Internal-only block (e.g. the Provider A/B/Verification Service legend on
     the Settings page). Hidden by default; shown to admin roles only. The
     `admin-role` body class is toggled by 02-api.js on login/logout. */
  .kx-internal-only { display: none; }
  body.admin-role .kx-internal-only { display: block; }

  /* Use existing .amount class for right-aligned numerics in report tables */
  th.amount-h { text-align: right; }
  table .num { text-align: right; font-variant-numeric: tabular-nums; }
  table .diff-zero { color: #059669; font-weight: 700; }
  table .diff-bad  {
    color: #dc2626; font-weight: 700;
    background: #fee2e2; padding: 2px 8px; border-radius: 6px;
    display: inline-block;
  }
  table .freshness {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 7px; border-radius: 99px; margin-left: 6px;
    vertical-align: middle;
  }
  table .freshness.fresh { background: #d1fae5; color: #059669; }
  table .freshness.stale { background: #fef3c7; color: #d97706; }
  table .freshness.dead  { background: #fee2e2; color: #dc2626; }

  /* ---- Reconciliation: day-by-day drill-down ---- */
  tr.recon-acct-row { cursor: pointer; }
  tr.recon-acct-row:hover { background: #f1f5f9; }
  .recon-chev { display: inline-block; width: 11px; color: #64748b; font-size: 10px; }
  td.recon-day-cell { background: #f8fafc; padding: 14px 18px 18px 38px; }
  .recon-day-loading { font-size: 13px; color: #64748b; padding: 6px 0; }
  .recon-day-summary { font-size: 13px; padding: 8px 12px; border-radius: 6px; margin-bottom: 12px; }
  .recon-day-summary.ok   { background: #d1fae5; color: #065f46; }
  .recon-day-summary.bad  { background: #fee2e2; color: #991b1b; }
  .recon-day-summary.warn { background: #fef3c7; color: #92400e; }
  table.recon-day-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
  table.recon-day-table th {
    text-align: left; font-size: 11px; color: #64748b; font-weight: 600;
    padding: 7px 10px; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
  }
  table.recon-day-table th.amount-h { text-align: right; }
  table.recon-day-table td { padding: 7px 10px; border-bottom: 1px solid #eef2f6; }
  table.recon-day-table tr:last-child td { border-bottom: none; }
  table.recon-day-table tr.recon-day-bad td { background: #fef2f2; }
  table.recon-day-table tr.recon-day-unverified td { background: #fafafa; }
  .recon-muted { color: #94a3b8; }
  .recon-firstbad { font-size: 11px; color: #dc2626; font-weight: 600; }
  .recon-tag {
    display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.03em;
    text-transform: uppercase; padding: 1px 5px; border-radius: 3px;
    margin-left: 3px; vertical-align: middle;
  }
  .recon-tag.live  { background: #dbeafe; color: #1e40af; }
  .recon-tag.stale { background: #fef3c7; color: #b45309; }

  /* ---- Reconciliation: transaction-level drill-down (Stage 2) ---- */
  tr.recon-day-row { cursor: pointer; }
  tr.recon-day-row:hover td { background: #eef2f7 !important; }
  table.recon-day-table td.recon-ledger-cell {
    background: #ffffff; padding: 10px 14px 14px 30px;
    border-left: 3px solid #cbd5e1;
  }
  .recon-ledger-empty {
    font-size: 13px; color: #475569; padding: 9px 12px;
    background: #f8fafc; border-radius: 6px; line-height: 1.5;
  }
  .recon-ledger-head { font-size: 12px; color: #64748b; margin-bottom: 8px; }
  table.recon-ledger-table { width: 100%; border-collapse: collapse; font-size: 12px; }
  table.recon-ledger-table th {
    text-align: left; font-size: 10px; color: #94a3b8; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 5px 8px; border-bottom: 1px solid #e2e8f0; white-space: nowrap;
  }
  table.recon-ledger-table th.amount-h { text-align: right; }
  table.recon-ledger-table td {
    padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top;
  }
  table.recon-ledger-table tfoot td {
    font-weight: 700; background: #f8fafc; border-top: 2px solid #e2e8f0;
    border-bottom: none;
  }
  .led-time  { white-space: nowrap; color: #475569; }
  .led-title { font-weight: 600; color: #0f172a; }
  .led-sub   { font-size: 11px; color: #64748b; }
  .led-ref   { font-size: 11px; color: #64748b; font-family: ui-monospace, monospace; }
  .recon-ledger-note {
    font-size: 12px; padding: 9px 12px; border-radius: 6px; margin-top: 10px;
    line-height: 1.5;
  }
  .recon-ledger-note.ok   { background: #d1fae5; color: #065f46; }
  .recon-ledger-note.bad  { background: #fee2e2; color: #991b1b; }
  .recon-ledger-note.info { background: #eff6ff; color: #1e40af; }
  .profit-pos { color: #059669; font-weight: 700; }
  h2.section-title {
    font-size: 18px; font-weight: 600; color: #0f172a; margin-bottom: 16px;
  }