/* App stylesheet, loaded after Bootstrap and before branding/theme.css.
   Visual exceptions to stock Bootstrap only; see docs/look-and-feel.md.
   Site colours live in static/branding/theme.css (variables), not here. */

/* Pin the page viewport. Wide content (e.g. a data table) must scroll inside
   its own container, never the whole page, or swiping it drags the navbar
   sideways too. overflow-x and min-height are a PAIR, keep both:
   overflow-x: hidden makes the browser clip vertically as well, and
   min-height keeps that box at least full-viewport tall so a short page
   doesn't clip dropdowns and overlays at its own edge.
   overscroll-behavior-y stops rubber-banding from dragging the fixed navbar
   and avoids accidental pull-to-refresh. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
  min-height: 100vh;
  overscroll-behavior-y: none;
}

/* The navbar is fixed-top, so body needs matching top padding.
   --navbar-height is set from the navbar's real rendered height by
   static/js/app.js; 56px is the fallback before that runs. */
body {
  padding-top: 56px;
  padding-top: var(--navbar-height, 56px);
}

/* Navbar and menu colour come from the site theme (branding/theme.css). */
.app-navbar,
.offcanvas.app-offcanvas {
  background-color: var(--app-navbar-bg, #212529) !important;
}

/* btn-primary follows the site accent. */
.btn-primary {
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--app-primary-hover, #0b5ed7);
  --bs-btn-hover-border-color: var(--app-primary-hover, #0b5ed7);
  --bs-btn-active-bg: var(--app-primary-active, #0a58ca);
  --bs-btn-active-border-color: var(--app-primary-active, #0a58ca);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

/* DataTables' scrollX locks the table to its content's pixel width. Forcing
   100% lets columns stretch on a wide desktop, while a too-narrow viewport
   still overflows and scrolls inside .dt-scroll-body. */
.dt-scroll-headInner table.dataTable,
.dt-scroll-body table.dataTable {
  width: 100% !important;
  table-layout: auto !important;
}

/* Data-dense tables use the small size. */
.data-table { font-size: 0.875rem; }

/* Detail-page "box" layout: see docs/box-layout-pattern.md.
   Main grid is a real CSS Grid with each box placed in one of two fixed
   columns, NOT CSS multi-column (which reshuffles boxes between columns
   whenever any box changes height). */
.detail-boxes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  font-size: 0.875rem;
}
@media (min-width: 768px) {
  .detail-boxes-grid { grid-template-columns: 1fr 1fr; }
}
.detail-boxes-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.detail-boxes-col > div > div,
.detail-boxes > div > div {
  border: 1px solid #adb5bd !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
  border-radius: 0.25rem;
}

/* Single-box regions: CSS multi-column with one column is stable. */
.detail-boxes {
  column-gap: 1rem;
  column-fill: auto;
  font-size: 0.875rem;
}
.detail-boxes > div {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 1rem;
  display: block;
  width: 100%;
}
.detail-boxes-1 { column-count: 1; }

/* A box is dimmed while its fragment is re-fetched after an edit. */
.box-content.box-loading { opacity: 0.5; }

/* Fixed-width digits for numbers stacked in a column. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Chevron on a Bootstrap collapse trigger, driven by Bootstrap's own
   .collapsed class: pure CSS, no JS. */
.collapse-caret::after { content: "▾"; margin-left: 0.4rem; }
.collapse-caret.collapsed::after { content: "▸"; }

/* ---- App additions ---------------------------------------------------- */

/* Signature element: the invoice slip (docs/ui-standards.md). */
.invoice-slip { display:inline-block; padding:.2rem .5rem; background:#fff; color:#000; font-weight:600;
  font-family:Arial,Helvetica,sans-serif; text-decoration:none; white-space:nowrap; border:1px solid #adb5bd;
  border-left:6px solid #0d6efd; border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.15); }

/* Custom colour variant following Bootstrap's own pattern (anprstock's
   purple "Staff"). Define table-X and bg-X together. */
.table-purple {
  --bs-table-color: #000;
  --bs-table-bg: #e2d9f3;
  --bs-table-border-color: #c9bce0;
  --bs-table-striped-bg: #d7cce8;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #ccc0dc;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d1c6e0;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}
.badge.bg-purple { background-color: #6f42c1 !important; }