body { background: #f6f7f9; }
main h1 { font-size: 1.6rem; margin-bottom: 1rem; }
main h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.card { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.table-sm td, .table-sm th { vertical-align: middle; }
.mono { font-family: Consolas, "Courier New", monospace; font-size: .9em; }
.stat { font-size: 2rem; font-weight: 600; }
.wrap { white-space: pre-wrap; word-break: break-word; }
.form-public { max-width: 720px; }
.badge-Draft { background: #6c757d; }
.badge-Published, .badge-Active, .badge-Completed, .badge-Released, .badge-Loaded, .badge-Posted, .badge-Live, .badge-Current { background: #198754; }
.badge-Scheduled { background: #0d6efd; }
.badge-Retired, .badge-Superseded, .badge-Rejected, .badge-Past, .badge-Closed { background: #adb5bd; }
.badge-Error, .badge-CompletedWithErrors, .badge-Failed { background: #dc3545; }
.badge-Approved, .badge-Batched, .badge-Processing { background: #0d6efd; }
.badge-Unposted { background: #fd7e14; }
.badge-PendingApproval, .badge-PartiallyRefunded { background: #fd7e14; }
.badge-Refunded, .badge-Voided, .badge-ChargedBack, .badge-Reversed, .badge-Archived { background: #6c757d; }
.badge-Paid, .badge-Succeeded { background: #198754; }
.badge-NoFee { background: #adb5bd; }
.badge-Running { background: #0d6efd; }
.badge-Warning { background: #ffc107; color: #000; }
.form-section { border-bottom: 1px solid #dee2e6; padding-bottom: .25rem; margin-top: 1.25rem; }
.layout-item { cursor: grab; background: #fff; }
.layout-item.dragging { opacity: .5; }
.layout-canvas .layout-item { border: 1px dashed #adb5bd; border-radius: .375rem; padding: .5rem .75rem; margin-bottom: .5rem; }
.receipt { max-width: 760px; background: #fff; }
.receipt-barcode svg { max-width: 100%; height: 40px; width: auto; }
/* The organisation's logo (System settings): on a white tile in the dark header, and at the top of receipts. */
.brand-logo { max-height: 36px; max-width: 160px; width: auto; background: #fff; border-radius: .25rem; padding: 2px 4px; }
.receipt-logo { max-height: 64px; max-width: 220px; width: auto; display: block; margin-bottom: .5rem; }
/* Payer pages: the account tabs scroll sideways on a phone instead of wrapping; a light footer (not printed). */
.my-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.public-footer { background: #f8f9fa; }
/* Back office: the staff header stays at the top while the page scrolls (sticky). In-page links land below it, long menus
   scroll within the screen, and on a phone the opened menu scrolls instead of running off the bottom. */
html:has(body.has-staff-nav) { scroll-padding-top: 4.5rem; }
.staff-nav { box-shadow: 0 .125rem .5rem rgba(0,0,0,.15); }
.staff-nav .dropdown-menu { max-height: calc(100vh - 5rem); overflow-y: auto; }
@media (max-width: 991.98px) { .staff-nav .navbar-collapse { max-height: calc(100vh - 4.5rem); overflow-y: auto; } }
/* Form creation wizard (Admin/Forms/New): numbered steps, and the field library list scrolls. */
.wizard-step a, .wizard-step > span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 2rem; border: 1px solid #dee2e6; text-decoration: none; color: inherit; background: #fff; }
.wizard-step-no { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #e9ecef; font-size: .8rem; font-weight: 600; }
.wizard-step-current > span { border-color: var(--bs-primary); color: var(--bs-primary); font-weight: 600; }
.wizard-step-current .wizard-step-no { background: var(--bs-primary); color: #fff; }
.wizard-step-done .wizard-step-no { background: var(--bs-success); color: #fff; }
.wizard-library { max-height: 26rem; overflow-y: auto; background: #fff; }
/* Security groups (Admin/Users/GroupEdit): templates to start from, a scrolling member list, and the summary beside the form stays in view. */
.template-card:hover { border-color: var(--bs-primary); box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); }
.border-dashed { border-style: dashed !important; }
.member-list { max-height: 18rem; overflow-y: auto; background: #fff; }
@media (min-width: 1200px) { .group-summary { position: sticky; top: 5rem; } }
/* Environment badge in the staff header: production red, non-production amber, development grey. */
.env-badge { font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.env-production { background: #dc3545; color: #fff; }
.env-nonproduction { background: #ffc107; color: #212529; }
.env-development { background: #e9ecef; color: #495057; }
/* "Back to top" (js/site.js): bottom right, shown once the page is scrolled down. */
.to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; opacity: 0; visibility: hidden; transition: opacity .2s; box-shadow: 0 .25rem .75rem rgba(0,0,0,.2); }
.to-top.show { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print {
  nav, .no-print, .alert, .public-footer, .to-top { display: none !important; }
  body { background: #fff; }
  .receipt { box-shadow: none !important; border: none !important; }
}
.help-centre { max-width: 1100px; }
.help-centre-wide { max-width: 1200px; }
.help-content h1 { font-size: 1.6rem; }
.help-content h2 { font-size: 1.25rem; margin-top: 1.75rem; padding-top: .25rem; border-top: 1px solid #eef0f3; }
.help-content h3 { font-size: 1.05rem; margin-top: 1.25rem; }
.help-content table { width: 100%; margin: .75rem 0 1rem; border-collapse: collapse; font-size: .9rem; }
.help-content th, .help-content td { border: 1px solid #dee2e6; padding: .35rem .5rem; vertical-align: top; }
.help-content th { background: #f6f7f9; }
.help-content code { color: #8a2be2; }
.help-content blockquote { border-left: 4px solid #0d6efd; background: #f3f7ff; padding: .5rem .75rem; margin: 1rem 0; }
.help-content blockquote p:last-child { margin-bottom: 0; }
.help-panel .help-content h1 { display: none; }
.help-panel .help-content h2 { font-size: 1.05rem; }
.help-panel .help-content { font-size: .92rem; }

/* v1.3: multi-page forms, layout, pickers */
.form-steps { display: flex; flex-wrap: wrap; gap: .25rem; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.form-steps li { counter-increment: step; flex: 1 1 0; min-width: 7rem; padding: .4rem .6rem; border-bottom: 3px solid #dee2e6; color: #6c757d; font-size: .875rem; }
.form-steps li::before { content: counter(step) ". "; }
.form-steps li.done { border-color: #198754; color: #198754; }
.form-steps li.current { border-color: #0d6efd; color: #0d6efd; font-weight: 600; }
.form-page-break { border-top: 3px solid #0d6efd; padding-top: .5rem; margin-top: 1rem; }
.layout-canvas .layout-item.layout-page { background: #e7f1ff; border-style: solid; border-color: #0d6efd; }
.library-picker { max-height: 340px; overflow-y: auto; }
.column-picker { max-height: 330px; overflow-y: auto; }
.trace-flow { display: flex; flex-wrap: wrap; gap: .5rem; }
.trace-step { flex: 1 1 0; min-width: 7.5rem; background: #fff; border: 1px solid #dee2e6; border-radius: .375rem; padding: .5rem .75rem; position: relative; }
.badge-NoData { background: #adb5bd; }
.badge-Open { background: #0d6efd; }
.badge-Balanced { background: #198754; }
.badge-Variance { background: #dc3545; }
/* Dashboard tiles: a coloured edge when something needs attention. */
.tile { border-left: 4px solid var(--bs-border-color); }
.tile-warning { border-left-color: #fd7e14; }
.tile-danger { border-left-color: #dc3545; }
/* Tenders page: every reporting group's table has the same column widths, so the columns line up from group to group. */
.tender-table { table-layout: fixed; }
.tender-table .col-code { width: 16%; }
.tender-table .col-name { width: 24%; }
.tender-table .col-kind { width: auto; }
.tender-table .col-payments { width: 7rem; }
.tender-table .col-actions { width: 9.5rem; }
.tender-table td { overflow-wrap: anywhere; }