/* Base typography + utility classes shared across all pages */

h1, h2, h3, h4 { font-weight: 700; color: var(--color-text-primary); }
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { font-size: var(--fs-base); color: var(--color-text-secondary); }

.text-hint { color: var(--color-text-hint); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary-brand { color: var(--color-primary); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-center { text-align: center; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }

.hidden { display: none !important; }

.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

/* Scrollbar (desktop) */
@media (min-width: 1024px) {
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: var(--radius-full); }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-text-hint); }
}

/* App root layout regions, populated by router.js */
#app-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#page-content {
  flex: 1;
  width: 100%;
}

/* Currency formatting helper — Naira glyph via ::before keeps markup clean */
.amount::before { content: '\20A6'; }

/* ---- Receipt print mode (receipt.js "Save as PDF") ----
   Hides everything except the receipt card so the browser's native
   print-to-PDF destination produces a clean, single receipt. */
@media print {
  body:not(.printing-receipt) * { display: none !important; }
  body.printing-receipt #receipt-printable {
    display: block !important;
    position: static;
    max-width: 480px;
    margin: 0 auto;
    padding: 24px;
  }
  body.printing-receipt #receipt-printable * { display: revert !important; }
  body.printing-receipt #receipt-actions,
  body.printing-receipt .sheet-handle { display: none !important; }
}