/* /hpay/dashboard only. Rides on hpay-tools.css (the ht- and ib- parts the inbox already uses) and the receipt-led workspace theme
   (hpayWorkspace.css: cream paper, ink type, one red). No new colour and no new font: the chart is ink for QUAI received and red for QUAI sent,
   told apart by lightness and by the legend, never by colour alone (the tooltip and the table say it in words). */

.hpay-workspace .db-viewonly { margin: var(--s3, 12px) 0 0; max-width: 56ch; }
.hpay-workspace .db-controls, .hpay-workspace .db-summary, .hpay-workspace .db-feed { margin-top: var(--s5, 24px); }

/* range and filters */
.hpay-workspace .db-filters { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: end; }
.hpay-workspace .db-field { grid-column: span 3; min-width: 0; }
.hpay-workspace .db-field:first-child { grid-column: span 5; }
.hpay-workspace .db-field.db-search { grid-column: span 3; }
.hpay-workspace .db-field .pl-label { display: block; margin-bottom: 6px; }
.hpay-workspace .db-field select.pl-input, .hpay-workspace .db-field input.pl-input { width: 100%; min-height: 44px; }
.hpay-workspace .db-custom { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-items: end; padding-block: 4px; }
.hpay-workspace .db-custom .pl-label { margin-bottom: 0; grid-row: 1; }
.hpay-workspace .db-custom .pl-label[for="db-to"] { grid-column: 2; }
.hpay-workspace .db-custom #db-from { grid-row: 2; grid-column: 1; }
.hpay-workspace .db-custom #db-to { grid-row: 2; grid-column: 2; }
.hpay-workspace .db-custom #db-apply { grid-row: 3; grid-column: 1; justify-self: start; }
.hpay-workspace .db-custom .ht-reason { grid-row: 3; grid-column: 2; margin: 0; }
.hpay-workspace .db-ranges { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--hp-ink); }
.hpay-workspace .db-range { appearance: none; border: 0; border-right: 1px solid var(--hp-line); background: transparent; color: var(--hp-ink); min-height: 44px; min-width: 64px; padding: 0 16px; font: 500 13px/1 var(--body); cursor: pointer; }
.hpay-workspace .db-range:last-child { border-right: 0; }
.hpay-workspace .db-range:hover { background: var(--hp-sheet); }
.hpay-workspace .db-range[aria-checked="true"] { background: var(--hp-ink); color: var(--hp-sheet); }
.hpay-workspace .db-range:focus-visible { outline: 3px solid var(--hp-red); outline-offset: 2px; position: relative; }

/* the numbers on top */
.hpay-workspace .db-range-text { font: 400 12px/1 var(--mono); color: var(--hp-quiet); letter-spacing: .02em; margin-left: 4px; }
.hpay-workspace .db-tiles { margin-top: 12px; }
.hpay-workspace .db-tiles .ht-stat dd { font-variant-numeric: tabular-nums; }
.hpay-workspace .db-tiles .ht-stat[data-stat="net"] dd { color: var(--hp-ink); }
.hpay-workspace .db-tiles .ht-stat[data-stat="net"] { border-left: 3px solid var(--hp-red); padding-left: 12px; }
.hpay-workspace .db-usd { color: var(--hp-quiet); font-size: 12px; margin-top: 4px; }
.hpay-workspace .db-tiles .ht-stat dd small.db-usd { color: var(--hp-quiet); }

/* the chart */
.hpay-workspace .db-chart { margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--hp-line); }
.hpay-workspace .db-chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.hpay-workspace .db-chart-title { font: 500 15px/1.2 var(--display); letter-spacing: -.02em; }
.hpay-workspace .db-legend { display: inline-flex; gap: 16px; font: 400 12px/1 var(--mono); color: var(--hp-quiet); }
.hpay-workspace .db-key::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.hpay-workspace .db-key--in::before { background: var(--hp-ink); }
.hpay-workspace .db-key--out::before { background: var(--hp-red); }
.hpay-workspace .db-chart-box { width: 100%; min-height: 190px; }
.hpay-workspace .db-svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.hpay-workspace .db-grid { stroke: var(--hp-line); stroke-width: 1; stroke-dasharray: 2 3; }
.hpay-workspace .db-axis { stroke: var(--hp-ink); stroke-width: 1; }
.hpay-workspace .db-tick { fill: var(--hp-quiet); font: 400 11px var(--mono); }
.hpay-workspace .db-in { fill: var(--hp-ink); }
.hpay-workspace .db-out { fill: var(--hp-red); }
.hpay-workspace .db-bar:hover rect { opacity: .78; }
.hpay-workspace .db-chart .ht-chart-peak { margin-top: 8px; }
.hpay-workspace .db-chart-empty { margin-top: 16px; }

/* the table */
.hpay-workspace .db-table .db-who-text { display: inline-flex; flex-direction: column; min-width: 0; }
.hpay-workspace .db-table .db-name { color: var(--hp-quiet); font: 500 12px/1.3 var(--body); }
.hpay-workspace .db-retry { margin-top: 12px; }
.hpay-workspace .ht-callout .btn { margin-top: 8px; }

@media (max-width: 960px) {
  .hpay-workspace .db-field, .hpay-workspace .db-field:first-child, .hpay-workspace .db-field.db-search { grid-column: span 6; }
  .hpay-workspace .db-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hpay-workspace .db-filters { grid-template-columns: minmax(0, 1fr); }
  .hpay-workspace .db-field, .hpay-workspace .db-field:first-child, .hpay-workspace .db-field.db-search { grid-column: 1 / -1; }
  .hpay-workspace .db-ranges { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
  .hpay-workspace .db-range { min-width: 0; padding: 0 4px; }
  .hpay-workspace .db-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hpay-workspace .db-custom { grid-template-columns: minmax(0, 1fr); }
  .hpay-workspace .db-custom .pl-label[for="db-to"], .hpay-workspace .db-custom #db-from, .hpay-workspace .db-custom #db-to, .hpay-workspace .db-custom #db-apply, .hpay-workspace .db-custom .ht-reason { grid-column: 1; grid-row: auto; }
  .hpay-workspace .db-legend { gap: 12px; }
}

@media print {
  .hpay-workspace .nav, .hpay-workspace .hp-ledger-nav, .hpay-workspace .ht-strip, .hpay-workspace .db-controls, .hpay-workspace .ib-side,
  .hpay-workspace .ht-grid--facts, .hpay-workspace .hp-guide, .hpay-workspace .footer, .hpay-workspace #db-toasts, .hpay-workspace .ht-btn-row,
  .hpay-workspace .ht-pager .btn, .hpay-workspace .ib-copy-btn, .hpay-workspace .c-tx, .hpay-workspace #db-gaps .btn { display: none !important; }
  .hpay-workspace .ht-grid { border: 0; background: transparent; }
  .hpay-workspace .db-feed .ht-table th:last-child { display: none; }
  .hpay-workspace .db-table tr { break-inside: avoid; }
  .hpay-workspace .db-svg { max-width: 100%; }
}