/* ==========================================================================
   orders.css — orders.html (order history) and order.html (invoice document)

   Page-scoped only. Every value is a token from css/tokens.css; nothing in
   components.css or layout.css is restyled globally — the few shared classes
   touched below are always reached through a page-owned ancestor.
   ========================================================================== */

/* ==========================================================================
   1. orders.html — summary tiles
   ========================================================================== */

.orders-stats {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.orders-stats .stat-icon.is-danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.orders-stats .stat-icon.is-success {
  background: var(--success-soft);
  color: var(--success);
}

.orders-stats .stat-hint {
  min-height: 2.4em;          /* reserves the line so the tiles never jump */
  color: var(--text-muted);   /* --text-subtle drops under 4.5:1 in both themes */
}

/* ==========================================================================
   2. orders.html — filter toolbar
   ========================================================================== */

.orders-toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--card-pad-tight);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.orders-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-5);
}

.orders-toolbar-row-dates {
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.orders-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
  flex: 1 1 22rem;
}

.orders-tabs-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.orders-search {
  flex: 0 1 20rem;
  min-width: 12rem;
}

.orders-range {
  flex: 0 0 auto;
  min-width: 11rem;
}

.orders-custom-range {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.orders-custom-range .field {
  min-width: 9.5rem;
}

.orders-custom-range .input {
  min-height: var(--control-h-sm);
}

.orders-clear {
  flex: 0 0 auto;
}

.orders-result {
  margin-top: var(--space-5);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  min-height: 1.4em;
}

.orders-boot {
  margin-top: var(--space-2);
}

/* ==========================================================================
   3. orders.html — the table
   ========================================================================== */

.orders-table-wrap {
  margin-top: var(--space-3);
}

.orders-table td {
  vertical-align: top;
}

@media (min-width: 721px) {
  /* Seven columns at the default --row-px spend 280px on gutters alone, which
     pushed the row actions outside the card on laptop widths. Tighten this
     table's gutters and let Items absorb whatever is left over. */
  .orders-table th,
  .orders-table td { padding-inline: var(--space-3); }

  .orders-table thead th:nth-child(3),
  .orders-table td[data-label="Items"] { width: 100%; }

}

@media (min-width: 1181px) {
  /* There is room for "Credit / debit card" on one line at desktop widths;
     below that it wraps rather than pushing the actions out of the card. */
  .orders-table td[data-label="Method"] { white-space: nowrap; }
}

@media (min-width: 721px) and (max-width: 1180px) {
  /* Two controls will not sit side by side next to six data columns on a
     tablet, so they stack and the table stays inside its card. */
  .orders-table .table-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  .orders-table .table-actions > * { flex: 0 0 auto; }
  .orders-table .order-ref { max-width: 8rem; }
}

.order-invoice-link {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  text-decoration: none;
}

.order-invoice-link:hover,
.order-invoice-link:focus-visible {
  color: var(--primary);
  text-decoration: underline;
}

.order-ref,
.order-time {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.order-ref {
  font-family: var(--font-mono);
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-date {
  display: block;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- items cell with mini course tiles ---- */

.order-items {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-width: 0;
}

.order-tiles {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.order-tiles > * + * {
  margin-left: calc(var(--space-2) * -1);
}

.order-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--tile-a, var(--primary)), var(--tile-b, var(--primary-hover)));
  box-shadow: 0 0 0 2px var(--surface);
  color: var(--slate-0);
}

/* The ring reads as a gap between overlapping tiles, so it has to match the
   surface the row is actually painted on — including the zebra stripe. */
.orders-table tbody tr:nth-child(even) .order-tile {
  box-shadow: 0 0 0 2px var(--surface-2);
}

.orders-table tbody tr:hover .order-tile {
  box-shadow: 0 0 0 2px var(--surface-3);
}

.order-tile > svg {
  width: 1.05rem;
  height: 1.05rem;
  stroke-width: 1.9;
}

.order-tile-more {
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.order-items-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.order-items-name {
  font-weight: var(--fw-medium);
  color: var(--text);
  overflow-wrap: anywhere;
}

.order-items-meta {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* The disabled "Download invoice" affordance keeps its tooltip reachable. */
.order-invoice-tip {
  display: inline-flex;
}

.orders-empty {
  margin-top: var(--space-3);
}

.orders-note {
  margin-top: var(--space-8);
}

@media (max-width: 720px) {
  /* .table-collapse turns rows into cards, but .table td.shrink keeps its
     width:1% / nowrap, which squeezed the actions cell to a few pixels and
     pushed both buttons outside the card. Give it the full card width back. */
  .orders-table td.shrink {
    width: auto;
    white-space: normal;
    justify-content: flex-end;
  }
  .orders-table .table-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
  }
  /* Invoice number and gateway reference stack instead of truncating. */
  .orders-table td[data-label="Order"] {
    flex-wrap: wrap;
  }
  .orders-table .order-ref {
    flex: 1 1 100%;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-align: right;
  }
  .orders-search,
  .orders-range {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   4. order.html — the invoice document
   ========================================================================== */

.order-boot {
  min-height: 22rem;
}

.invoice-doc {
  overflow: hidden;
}

.invoice-doc::before {
  content: "";
  display: block;
  height: var(--space-1);
  background: var(--grad-brand);
}

.invoice-doc-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.invoice-doc .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ---- letterhead ---- */

.invoice-letterhead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.invoice-issuer {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
  flex: 1 1 20rem;
}

.invoice-mark {
  display: block;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
}

.invoice-mark > svg {
  width: 100%;
  height: 100%;
}

.invoice-issuer-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.invoice-brand {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
  line-height: var(--lh-tight);
}

.invoice-entity {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.invoice-address {
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.invoice-contact {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.invoice-sep {
  padding-inline: var(--space-1);
  color: var(--text-muted);
}

.invoice-reg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-5);
  margin: var(--space-2) 0 0;
}

.invoice-reg dt {
  display: inline;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.invoice-reg dt::after {
  content: ":\00a0";
}

.invoice-reg dd {
  display: inline;
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.invoice-stamp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  text-align: right;
  flex: 0 1 17rem;
  min-width: 0;
  margin-inline-start: auto;   /* hugs the right edge even after it wraps */
}

.invoice-kind {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

.invoice-number {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  overflow-wrap: anywhere;
}

.invoice-kind-note {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: var(--lh-base);
  max-width: 26ch;
}

/* ---- parties ---- */

.invoice-parties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6);
}

.invoice-party-title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.invoice-party-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
  overflow-wrap: anywhere;
}

.invoice-party-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
}

.invoice-party-note {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

/* ---- line items ---- */

.invoice-section-title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}

/* Several shared classes inside this document fall back to --text-subtle,
   which lands under 4.5:1 in both themes (3.71:1 on white, 4.43:1 on the dark
   surfaces). Re-point them at --text-muted inside this page only. */
.order-lines-table thead th,
.order-lines-table .invoice-item-meta {
  color: var(--text-muted);
}

#order-meta dt {
  color: var(--text-muted);
}

.order-timeline .timeline-time {
  color: var(--text-muted);
}

.invoice-tax-note {
  margin-top: var(--space-3);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.order-lines-table td[data-label="Qty"],
.order-lines-table td[data-label="Unit price"] {
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* .invoice-table drops its header on phones — restore the labels so the
     stacked figures stay readable. */
  .order-lines-table tbody td:not(:first-child)::before {
    content: attr(data-label) " · ";
    color: var(--text-muted);
  }

  /* The component stacks tbody rows but leaves tfoot as real table rows, so
     "Subtotal (taxable value)" plus a nowrap figure set the table's width and
     pushed the totals outside the invoice card. Stack the totals the same way. */
  .order-lines-table { table-layout: fixed; }

  .order-lines-table tfoot tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-1) var(--space-3);
    align-items: baseline;
  }

  .order-lines-table tfoot td {
    padding-inline: 0;
  }

  .order-lines-table tfoot td:first-child {
    text-align: left;
  }

  .order-lines-table tfoot td.amount {
    text-align: right;
  }

  /* One rule across the stacked row, not one per cell with a gap in it. */
  .order-lines-table tfoot .is-total {
    border-top: 1px solid var(--border);
    padding-top: var(--space-3);
  }

  .order-lines-table tfoot .is-total td {
    border-top: 0;
    padding-top: 0;
  }
}

/* ---- payment attempt timeline ---- */

.invoice-trail-sub {
  font-size: var(--fs-md);
  color: var(--text-muted);
  line-height: var(--lh-base);
  margin-bottom: var(--space-5);
}

.order-timeline .timeline-item.is-current .timeline-title {
  color: var(--text);
}

.order-timeline .timeline-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-4);
}

.order-trail-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--text);
  overflow-wrap: anywhere;
}

.order-trail-code {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--danger-soft-text);
  font-family: var(--font-mono);
}

.order-trail-inv {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.order-trail-current {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}

/* ---- document footer + page actions ---- */

.invoice-foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-base);
}

.invoice-foot-legal {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}

.order-btn-icon {
  display: inline-grid;
  place-items: center;
}

.order-btn-icon > svg {
  width: 1.05em;
  height: 1.05em;
}

.order-foot-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.order-missing {
  margin-top: var(--space-4);
}

@media (max-width: 560px) {
  .invoice-stamp {
    align-items: flex-start;
    text-align: left;
    flex-basis: 100%;
    margin-inline-start: 0;
  }
  .order-foot-actions {
    justify-content: stretch;
  }
  .order-foot-actions > .btn {
    flex: 1 1 12rem;
  }
}

/* ==========================================================================
   5. Print — order.html is a document first and a web page second
   ========================================================================== */

@media print {
  .page-head,
  .order-foot-actions,
  .order-boot,
  .breadcrumb,
  .banner-actions,
  .invoice-party-note {
    display: none !important;
  }

  .section {
    padding-block: 0 !important;
  }

  .invoice-doc {
    border: 0 !important;
    border-radius: 0 !important;
    break-inside: auto;
  }

  .invoice-doc::before {
    display: none;
  }

  .invoice-doc-body {
    padding: 0 !important;
    gap: var(--space-4);
  }

  .invoice-doc a {
    color: inherit;
    text-decoration: none;
  }

  .invoice-trail,
  .invoice-parties,
  .invoice-letterhead {
    break-inside: avoid;
  }

  .timeline-item {
    break-inside: avoid;
  }

  .invoice-foot {
    break-before: avoid;
  }
}