/* Orbit Connect product-UI mocks (docs/DESIGN_BRIEF.md "Product visuals = HTML/CSS mock-ups"). Hand-built HTML/CSS,
   never a screenshot; every number is sample data that adds up. Prefix .mock-*. Colours/spacing are tokens only.
   Each top-level .mock-* element is a self-contained "card" surface (border + radius + shadow) so callers (hero,
   feature rows) can drop it straight into a layout without an extra wrapper. */

.mock-invoice, .mock-gstr1, .mock-timeline, .mock-gst-rules {
  max-width: 30rem;
  margin-inline: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
@media (min-width: 56em) {
  .mock-invoice, .mock-gstr1, .mock-timeline, .mock-gst-rules { margin-inline: 0; }
}

.mock-invoice__inner, .mock-gstr1__inner, .mock-timeline__inner, .mock-gst-rules__inner {
  padding: var(--space-5) var(--space-5) var(--space-6);
}

/* Shared "Sample" header row: title on the left, Sample badge on the right. */
.mock-invoice__top, .mock-gstr1__top, .mock-timeline__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.mock-invoice__brand { margin: 0; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text); }
.mock-invoice__meta { margin: 0.125rem 0 0; font-size: var(--text-xs); color: var(--color-muted); }

/* ============================== Invoice ============================== */
.mock-invoice__docmeta {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  margin: 0 0 var(--space-3); padding: var(--space-3) 0;
  border-top: 1px dashed var(--color-border); border-bottom: 1px dashed var(--color-border);
}
.mock-invoice__docfield { display: flex; flex-direction: column; gap: 0.125rem; }
.mock-invoice__label { font-size: 0.6875rem; font-weight: var(--weight-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.mock-invoice__value { font-size: 0.8125rem; font-weight: var(--weight-medium); color: var(--color-text); }
.mock-invoice__bill { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.375rem; margin-bottom: var(--space-4); }

.mock-invoice__table { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); overflow: hidden; }
.mock-invoice__row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  align-items: center; gap: 0.375rem; padding: 0.5rem 0.625rem; font-size: 0.75rem;
}
.mock-invoice__row + .mock-invoice__row { border-top: 1px solid var(--color-border); }
.mock-invoice__row--head {
  background: var(--color-surface-sunken); color: var(--color-muted);
  font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase;
}
.mock-invoice__row--charge { color: var(--color-text-2); font-style: italic; }
.mock-invoice__col { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mock-invoice__col--item { font-weight: var(--weight-medium); color: var(--color-text); }
.mock-invoice__row--head .mock-invoice__col--item { font-weight: 650; }
.mock-invoice__col--num { text-align: right; font-variant-numeric: tabular-nums; }
.mock-invoice__col--hsn, .mock-invoice__col--qty { text-align: center; color: var(--color-muted); font-variant-numeric: tabular-nums; }
@media (min-width: 48em) {
  .mock-invoice__row { grid-template-columns: minmax(0, 1.4fr) 3.5rem 2rem repeat(4, minmax(0, 1fr)); }
}

.mock-invoice__totals { display: grid; gap: 0.25rem; font-size: 0.8125rem; }
.mock-invoice__totals > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.mock-invoice__totals > div > span:first-child { color: var(--color-muted); }
.mock-invoice__totals > div > span:last-child { font-variant-numeric: tabular-nums; }
.mock-invoice__grand {
  margin-top: 0.125rem; padding-top: 0.375rem; border-top: 1px solid var(--color-border-strong);
  font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--color-text);
}

/* ============================== GSTR-1 summary ============================== */
.mock-gstr1__note { margin: 0 0 var(--space-4); font-size: var(--text-xs); color: var(--color-muted); }
.mock-gstr1__group + .mock-gstr1__group { margin-top: var(--space-4); }
.mock-gstr1__group-title { margin: 0 0 0.375rem; font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-eyebrow); }
.mock-gstr1__row {
  display: grid; grid-template-columns: minmax(0, 0.7fr) repeat(3, minmax(0, 1fr));
  gap: 0.375rem; padding: 0.375rem 0; font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.mock-gstr1__row + .mock-gstr1__row { border-top: 1px solid var(--color-border); }
.mock-gstr1__row--head { border-top: 0 !important; color: var(--color-muted); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.03em; text-transform: uppercase; }
.mock-gstr1__row > span:not(:first-child) { text-align: right; }

/* ============================== Timeline ============================== */
.mock-timeline__list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mock-timeline__item { position: relative; display: grid; grid-template-columns: 1.5rem 1fr auto; align-items: center; gap: var(--space-3); padding: 0.625rem 0; }
.mock-timeline__item + .mock-timeline__item::before { content: ""; position: absolute; top: -0.625rem; left: 0.6875rem; width: 2px; height: 0.625rem; background: var(--color-border-strong); }
.mock-timeline__dot { width: 1.5rem; height: 1.5rem; border: 2px solid var(--color-border-strong); border-radius: 50%; background: var(--color-surface); }
.mock-timeline__item.is-done .mock-timeline__dot { border-color: var(--success-solid); background: var(--success-solid) var(--icon-check) center / 0.85rem no-repeat; }
.mock-timeline__label { font-size: 0.8125rem; color: var(--color-text); }
.mock-timeline__time { font-size: 0.6875rem; color: var(--color-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================== GST-by-collection rules ============================== */
.mock-gst-rules__order {
  display: flex; flex-wrap: wrap; gap: 0.375rem 0.5rem; margin: 0 0 var(--space-4); padding: 0; list-style: none;
  font-size: 0.6875rem; color: var(--color-muted); counter-reset: rule;
}
.mock-gst-rules__order li { counter-increment: rule; }
.mock-gst-rules__order li::before { content: counter(rule) ". "; font-weight: 650; color: var(--color-eyebrow); }
.mock-gst-rules__list { display: grid; gap: 0.5rem; }
.mock-gst-rules__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-sunken); font-size: 0.8125rem; }
.mock-gst-rules__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); color: var(--color-text); }
.mock-gst-rules__arrow { color: var(--color-muted); }
.mock-gst-rules__rate { font-variant-numeric: tabular-nums; font-weight: var(--weight-bold); color: var(--color-eyebrow); }
.mock-gst-rules__footnote { margin: var(--space-4) 0 0; font-size: 0.6875rem; color: var(--color-muted); }