/* billing view (Elszámolás): month picker, statement lines grouped with subtotals, drill-down,
   history. Same tokens as app.css. */

/* ---------- Month picker ---------- */
.bl-period { min-width: 0; }
.bl-period__row { display: flex; }
.bl-period__row .select { flex: 1 1 12rem; min-width: 10rem; border-left: 0; border-right: 0; }
.bl-period__row .btn { flex: none; }
.bl-snapinfo { align-self: center; }

/* ---------- Statement header: data panel next to the totals ---------- */
.bl-summary { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
.bl-summary .kpis { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899.98px) {
  .bl-summary { grid-template-columns: minmax(0, 1fr); }
  .bl-summary .kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
}
.bl-section { display: grid; gap: 0.75rem; min-width: 0; }

/* ---------- Lines table ---------- */
.bl-lines td { vertical-align: top; }
.bl-lines .bl-line-name { font-weight: 600; }
.bl-lines tr.bl-group th {
  position: static; padding: 0.5rem 0.75rem; text-align: left;
  font: 700 0.75rem/1.2 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: var(--panel-alt); border-top: 2px solid var(--line-strong); border-bottom: 1px solid var(--line);
}
.bl-lines tbody:first-of-type tr.bl-group th { border-top: 0; }
.bl-lines tr.bl-subtotal td { font-weight: 700; color: var(--ink-2); border-top: 1px solid var(--line-strong); }
.bl-lines tbody tr.bl-subtotal:hover td { background: transparent; }
.bl-lines .bl-line-actions { white-space: nowrap; text-align: right; width: 1%; }
.bl-lines .bl-line-actions .btn { min-height: 1.75rem; }
.bl-warn { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--danger); font-weight: 600; }
.bl-warn .icon { width: 1rem; height: 1rem; }
.table td .sub.bl-warn { display: flex; color: var(--danger); }
/* Phones: every line becomes two rows (name and net amount, then quantity x unit price and the
   actions); VAT and gross per line are left out, the totals above show them. */
@media (max-width: 640px) {
  .bl-lines, .bl-lines tbody, .bl-lines tfoot { display: block; }
  .bl-lines thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .bl-lines tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding: 0.625rem 0.75rem; border-bottom: 1px solid var(--line); }
  .bl-lines tr.bl-group { padding: 0; }
  .bl-lines tr.bl-group th { display: block; flex: 1 1 100%; }
  .bl-lines td { display: block; padding: 0; border: 0; text-align: left; }
  .bl-lines tbody tr:hover td { background: transparent; }
  .bl-lines .bl-c-name, .bl-lines .bl-c-label { flex: 1 0 calc(100% - 8.75rem); min-width: 0; }
  .bl-lines .bl-c-net { flex: 0 0 8rem; text-align: right; font-weight: 700; }
  .bl-lines .bl-c-qty { order: 3; flex: none; color: var(--ink-2); }
  .bl-lines .bl-c-price { order: 4; flex: 1 1 auto; color: var(--ink-2); }
  .bl-lines .bl-c-price::before { content: "x "; }
  .bl-lines .bl-c-vat, .bl-lines .bl-c-gross { display: none; }
  .bl-lines .bl-c-act { order: 5; flex: none; width: auto; }
  .bl-lines .bl-c-act:empty { display: none; }
  .bl-lines tr.bl-subtotal td { border-top: 0; }
  .bl-lines tr.bl-subtotal { border-top: 1px solid var(--line-strong); }
  .bl-lines tfoot tr { background: var(--panel-alt); border-top: 2px solid var(--ink); border-bottom: 0; }
  .bl-lines tfoot td { border-top: 0; background: transparent; }
  .bl-kpis .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bl-kpis .kpi:first-child { grid-column: 1 / -1; }
}

/* A table and its pager kept together; min-width 0 lets the table scroll inside its wrapper. */
.bl-tablebox { min-width: 0; }
.bl-row-actions { flex-wrap: nowrap; gap: 0.25rem; }

/* ---------- Drill-down ---------- */
.bl-drill__tabs { padding: 0 1.25rem; border-bottom-width: 1px; }
.bl-drill #bl-drill-body { display: grid; gap: 0; min-width: 0; }
.bl-drill #bl-drill-body > .table-wrap { border: 0; border-top: 1px solid var(--line); }
.bl-drill #bl-drill-body > .table-foot { border: 0; border-top: 1px solid var(--line); }
.bl-drill .loading { padding: 1.5rem 1.25rem; }
.bl-drill .notice { margin: 1rem 1.25rem; }
.bl-drill__note { padding: 0.75rem 1.25rem; color: var(--ink-2); }
.bl-drill h2:focus { outline: none; }
.bl-drill h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---------- History ---------- */
.bl-history { display: grid; gap: 0; }
.bl-history li {
  display: grid; grid-template-columns: 9.5rem minmax(6rem, 10rem) minmax(0, 1fr); gap: 0.25rem 1rem;
  padding: 0.5rem 0; border-top: 1px solid var(--line); font-size: 0.875rem;
}
.bl-history li:first-child { border-top: 0; }
@media (max-width: 640px) {
  .bl-history li { grid-template-columns: minmax(0, 1fr); }
}

@media print {
  .bl-line-actions, .bl-drill__tabs { display: none !important; }
}