/* Rebar — brand layer over the shared ERP Sutra platform stylesheet.
 *
 * app.css is the platform: layout, tables, lists, forms, charts. This file
 * is the ONLY place Rebar's own identity lives, so the platform can be
 * updated underneath it without a merge.
 *
 * Identity (design.md §7): construction orange as the BRAND, system blue
 * kept for ACTIONS. Orange is a warning colour in most of this app's status
 * vocabulary (submitted, in progress), so making it the button colour too
 * would blur the one distinction the money screens depend on.
 */

:root {
  --brand:        #F07000;   /* darker than systemOrange #FF9500: that fails
                                contrast as text, and this is used for text */
  --brand-strong: #C25200;
  --brand-soft:   rgba(240, 112, 0, 0.13);
}

/* Brand tile in the sidebar and the app icon's on-screen twin. */
.sidebar__mark {
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: 0 2px 6px rgba(194, 82, 0, 0.32);
}
.sidebar__product-mark {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* The thin strip under the top bar. Rebar's is the rebar-grid motif: two
   crossing bar layers, which is what the product is named after. Drawn in
   CSS rather than an image so it costs no request and scales with the bar. */
.accent {
  height: 3px;
  background:
    repeating-linear-gradient(90deg,
      var(--brand) 0 10px, transparent 10px 20px),
    repeating-linear-gradient(0deg,
      var(--brand-strong) 0 3px, transparent 3px 6px),
    var(--separator);
}

/* Page heading tile — orange, so every screen carries the brand once. */
.pagehead__mark {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* Status vocabulary, stated once (design.md §7).
   green  certified / paid / received
   orange submitted / in progress / partially received
   red    overdue / short / damaged / rejected
   purple retention held
   blue   draft / neutral                                                */
.chip--brand { background: var(--brand-soft); color: var(--brand-strong); }

/* Empty states get the rebar grid rather than a lonely icon. */
.empty__icon { color: var(--brand-strong); opacity: 0.55; }

/* ---------- Scope notice ------------------------------------------------
 *
 * Shown when a site role has no project assigned. NOT styled as an empty
 * state on purpose: an empty list says "there is nothing", and the true
 * message is "nobody has told the app where you work". This shipped as a
 * blank screen on an earlier product and read as a broken app for days.  */
.scope-note {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  padding: var(--sp-5);
  border: 1px solid var(--brand);
  border-left-width: 3px;
  border-radius: var(--r-card);
  background: var(--brand-soft);
  margin-bottom: var(--sp-5);
}
.scope-note .icon { color: var(--brand-strong); flex: none; }
.scope-note__title { font-size: var(--fs-headline); font-weight: 700; margin-bottom: 2px; }
.scope-note__text  { font-size: var(--fs-subhead); color: var(--label); max-width: 62ch; }

/* ---------- Print: RA bill and reconciliation sheets --------------------
 *
 * Clients' engineers still live on paper, and an RA bill annexure is signed
 * by hand. The screen chrome is removed and the item table is allowed to
 * break across pages with its header repeating.                          */
@media print {
  .sidebar, .tabbar, .appbar, .topbar, .accent, .crumbs,
  .fab, .toasts, .pagehead__actions, .toolbar, .no-print { display: none !important; }

  .content { padding: 0 !important; max-width: none !important; }
  .card { border: none !important; box-shadow: none !important; padding: 0 !important; }

  .doc-table thead { display: table-header-group; }
  .doc-table tr    { break-inside: avoid; }

  /* A signature block is not decoration on a measurement document — it is
     what makes the sheet admissible. */
  .sign-row { display: flex; justify-content: space-between; margin-top: 48px; }
  .sign-row__box { width: 30%; border-top: 1px solid #000; padding-top: 6px; font-size: 11px; }
}