/* Board flavour (spec 021, Omar 2026-09-29 «نفس النكهة»): the look every boardless screen borrows from
   mockup-v3/Staff.dc.html, Suppliers.dc.html and Orders.dc.html. Their helmet classes (.btn .btnp .ghost
   .kbd .kbd-on .seg .xwrap .xcell .lrow .pchip .cellin .note .fwrap) and inline sizes are re-expressed on
   the repo's own primitives (.btn .btn-primary .kbd .chip .segmented .input .scr-grid-wrap …) so no markup
   has to change its class names. Everything is scoped under `.bf`, the root class of a boardless view.
   Colours are the casheer.css tokens that hold the boards' hex (--teal #1c6470, --ink #141f27, --ink-2
   #4f5c64, --line-2 #cfd1c8, --line #e2e3dc, --bg #f5f5f1, --surface-2 #f0f0eb, --teal-bg #e5efee);
   sizes are the boards' px, copied, never invented. Logical properties only. */

.bf {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  /* Grid defaults; a view overrides both on the element that holds its grid. */
  --cols: minmax(0, 1fr);
  --row-h: 48px;
  /* Three radii only — 10 / 14 / 20 (Q8a B-15). The app's own tokens are 8 and 11; inside a boardless view
     every control, card and panel that reads them draws the flavour's. The segmented tray (9) and its
     segments (8) are the boards' own and keep their values below. */
  --r-2: 10px; --r-md: 10px; --r-sm: 10px; --radius-md: 10px;
  --r-3: 14px; --r-lg: 14px; --r-xl: 14px;
}

/* The board's <main>: padding 10px 16px, gap 10px. */
.bf-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 16px;
  box-sizing: border-box;
  overflow-y: auto;
}

/* The board's page head band (Orders: padding 8px 16px, white, 1px bottom rule; h1 24/800). */
.bf-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  box-sizing: border-box;
}

.bf-head h1 { font-size: 24px; font-weight: 800; line-height: 1.25; color: var(--ink); }
.bf-head-note { font-size: 13.5px; color: var(--ink-2); }

/* The board's command bar (Suppliers/Staff: padding 6px 16px, gap 6px, white, 1px bottom rule). */
.bf > .scr-actions {
  flex: none;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  box-sizing: border-box;
}

/* «الأوامر على: name» / a key-hint line at the end of the bar (13px ink-2). */
.bf-bar-note {
  margin-inline-start: auto;
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
}

.bf-bar-note strong { font-weight: 800; color: var(--ink); }

/* Buttons: .btn / .btnp / .ghost — 48px, 0 14px, gap 8, radius 10, 13.5/700 (primary 800). */
.bf .btn {
  height: 48px;
  min-height: 48px;
  padding: 0 14px;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.5;
}

.bf a.btn { text-decoration: none; }
.bf .btn-primary { padding: 0 16px; font-weight: 800; }

/* .ghost: a quiet second action beside a primary one (strips, form footers). */
.bf-quiet .btn:not(.btn-primary) { padding: 0 12px; border-color: transparent; background: transparent; color: var(--ink-2); font-size: 14px; }
.bf-quiet .btn:not(.btn-primary):hover:not(:disabled) { background: var(--surface-2); }
.bf-quiet .btn-primary { padding: 0 18px; font-size: 15px; }

/* The search well (.fwrap): 40px (compact, Q8a B-14), 1px #93958d, radius 10, padding 0 12, gap 8, input 14px. */
.bf .bf-search {
  flex: 1 1 auto;
  min-width: 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  box-sizing: border-box;
}

.bf .bf-search:focus-within { border-color: var(--teal); box-shadow: var(--halo); }

.bf .bf-search .input {
  flex: 1;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 400;
}

/* Filter row: search 40px, inputs and selects 40px (compact), trays and chips below. */
.bf .scr-filters { align-items: center; gap: 6px; }
.bf .scr-filters .field { flex-direction: row; align-items: center; gap: 6px; }
.bf .scr-filters .field > span:first-child { white-space: nowrap; }
.bf .scr-filters .input,
.bf .scr-filters select.input { height: 40px; min-height: 40px; border-radius: 10px; font-size: 14px; }

/* .seg tray: 44px, padding 2px, gap 2px, #e8e9e3, radius 9; segments 40px, 13.5/700, radius 8. */
.bf .segmented {
  min-height: 44px;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: 9px;
  background: var(--surface-3);
  box-sizing: border-box;
}

.bf .segmented > * {
  min-height: 40px;
  padding: 0 8px;
  gap: 6px;
  border-radius: 8px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.bf .segmented > *:hover { background: var(--surface-2); }
.bf .segmented > [aria-pressed="true"] { background: var(--surface); color: var(--teal-ink); box-shadow: var(--shadow-1); }

/* The count pill inside a segment: min 20x20, 0 5px, radius 10, 11.5/800. */
.bf .segmented .num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
  box-sizing: border-box;
}

.bf .segmented > [aria-pressed="true"] .num { background: var(--teal-bg); color: var(--teal-ink); }

/* .pchip: a single choice — 48px, 0 14px, radius 24, 13.5/700; chosen = 2px teal on the teal wash. */
.bf .bf-pchips { display: flex; flex-wrap: wrap; gap: 6px; }

.bf .bf-pchips > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  box-sizing: border-box;
}

.bf .bf-pchips > *:hover:not(:disabled) { background: var(--surface-2); }
.bf .bf-pchips > [aria-pressed="true"] { border: 2px solid var(--teal); background: var(--teal-bg); color: var(--teal-ink); }
.bf .bf-pchips > *:disabled { opacity: .48; cursor: not-allowed; }

/* Boardless status tones use the shared 28px board chip geometry. */
.bf .chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bf .chip-ok, .bf .chip-paid { background: var(--green-bg); border-color: var(--green-line); color: var(--green); }
.bf .chip-wait, .bf .chip-credit { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.bf .chip-late { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.bf .chip-idle, .bf .chip-void, .bf .chip-held { background: var(--surface-2); border-color: var(--line); color: var(--ink-2); }

/* The grid (.xwrap / .xcell): a 1px #cfd1c8 frame, radius 10; header 40px 13.5/700 on #f0f0eb (Q8a B-13); cells
   0 10px, 1px hairlines, 13.5px. A view sets `--cols` (its grid-template-columns) and `--row-h`.
   Three carriers share one cell look: a table inside `.scr-grid-wrap`, a table inside `.bf-subgrid`
   (34px header, 38px rows) and div rows (`.bf-xwrap > .bf-xrow > .bf-xcell`). */
.bf .scr-grid-wrap, .bf .bf-xwrap { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.bf .bf-xwrap, .bf .bf-subgrid { overflow: hidden; }
.bf .bf-subgrid { border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); }
.bf .scr-grid-head { flex: none; }

.bf .scr-grid-wrap table, .bf .bf-subgrid table { display: block; width: 100%; }
.bf .scr-grid-wrap thead, .bf .scr-grid-wrap tbody, .bf .bf-subgrid thead, .bf .bf-subgrid tbody { display: block; }
.bf .scr-grid-wrap tr, .bf .bf-subgrid tr, .bf .bf-xrow { display: grid; grid-template-columns: var(--cols); }

.bf .scr-grid-wrap th, .bf .scr-grid-wrap td,
.bf .bf-subgrid th, .bf .bf-subgrid td,
.bf .bf-xcell {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0 10px;
  border: 0;
  border-inline-end: 1px solid var(--line);
  border-block-end: 1px solid var(--line);
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  font-size: 13.5px;
  font-weight: 400;
  text-align: start;
}

.bf .scr-grid-wrap thead th, .bf .bf-subgrid thead th, .bf .bf-xcell.hd {
  position: static;
  height: 40px;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 700;
}

.bf .bf-subgrid thead th { height: 34px; }
.bf .bf-subgrid tr { height: 38px; }
.bf .bf-subgrid thead tr { height: 34px; }
.bf .scr-grid-body > table > tbody > tr { height: var(--row-h); }

/* A selected row (.lrow.on): the teal wash with a 2px teal inset. */
.bf .scr-grid-wrap tr.is-selected, .bf .bf-xrow.on { background: var(--teal-bg); box-shadow: inset 0 0 0 2px var(--teal); }

/* A clickable list row (.lrow): a button that is also a grid row. */
.bf button.bf-xrow { width: 100%; padding: 0; border: 0; background: var(--surface); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.bf button.bf-xrow:hover:not(.on) { background: var(--surface-2); }

/* A row that spans the grid (group header, expanded details). */
.bf .scr-grid-wrap tr.bf-span { grid-template-columns: minmax(0, 1fr); height: auto; }
.bf .scr-grid-wrap tr.bf-span > td, .bf .scr-grid-wrap tr.bf-span > th { display: block; height: auto; padding: 0; white-space: normal; border-inline-end: 0; }
.bf .scr-grid-wrap tr.bf-group { grid-template-columns: minmax(0, 1fr); height: 36px; }
.bf .scr-grid-wrap tr.bf-group > th { display: flex; height: 36px; padding: 0 10px; background: var(--surface-2); font-size: 12.5px; font-weight: 700; color: var(--ink-2); }

/* The panel (Suppliers account / Staff person): white, 1px #e2e3dc, radius 14 (flavour), the boards' soft shadow. */
.bf .bf-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
  box-sizing: border-box;
}

.bf .bf-panel h2 { font-size: 22px; font-weight: 800; line-height: 1.3; }
.bf h3 { font-size: 15px; font-weight: 700; }
.bf .bf-meta { font-size: 13.5px; color: var(--ink-2); }

/* A labelled field: label 13.5/700 ink-2, gap 4; a text input 52px (the flavour's main field, Q8a B-14), 1px
   #93958d, radius 10, 14/700. A compact one — a filter, a search well — is 40 (above). */
.bf .field { display: flex; flex-direction: column; gap: 4px; }
.bf .field > span:first-child { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }

.bf .input,
.bf select.input {
  height: 52px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  box-sizing: border-box;
}

.bf textarea.input { height: auto; min-height: 112px; padding: 10px; }
.bf .input[readonly] { background: var(--bg); border-color: var(--line); }
.bf .input[aria-invalid="true"] { border-color: var(--red); }

/* .cellin: a number typed inside a grid row — 48px, 1px #93958d, radius 8, 16/800, right-aligned. */
.bf .bf-cellin { height: 48px; padding: 0 10px; font-size: 16px; font-weight: 800; text-align: end; }

/* The money input (Suppliers pay): 56px, 2px teal + halo, radius 10, 28/800, with the unit after it. */
.bf .bf-money {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 16px;
  border: 2px solid var(--teal);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--halo);
  box-sizing: border-box;
}

.bf .bf-money .input { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 28px; font-weight: 800; text-align: end; }
.bf .bf-money-unit { font-size: 15px; color: var(--ink-3-text); }

/* A choice row (.swrow): 52px, 0 14px, 1px #cfd1c8, radius 10, 15/700. */
.bf .bf-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 700;
  box-sizing: border-box;
}

.bf .bf-choice input { flex: none; width: 22px; height: 22px; accent-color: var(--teal); }

/* A strip (Staff review / PIN / flash): 64px (flash 56), radius 10, gap 12, title 15/800, note 12.5. */
.bf .bf-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding-block: 8px;
  padding-inline-start: 8px;
  padding-inline-end: 14px;
  border: 1px solid var(--teal-line);
  border-radius: 10px;
  background: var(--teal-bg);
  box-sizing: border-box;
}

.bf .bf-strip-text { flex: 1; min-width: 0; }
.bf .bf-strip-text > strong { display: block; font-size: 15px; font-weight: 800; color: var(--teal-ink); }
.bf .bf-strip-text > span { display: block; font-size: 12.5px; color: var(--ink-2); }
.bf .bf-strip .btn { flex: none; }
.bf .bf-strip-warn { border-color: var(--amber-line); background: var(--amber-bg); }
.bf .bf-strip-warn .bf-strip-text > strong { color: var(--amber); }
.bf .bf-strip-ok { min-height: 56px; padding-block: 4px; padding-inline-start: 4px; border-color: var(--green-line); background: var(--green-bg); }
.bf .bf-strip-ok .bf-strip-text > strong { color: var(--green); }
.bf .bf-strip-danger { border-color: var(--red-line); background: var(--red-bg); }
.bf .bf-strip-danger .bf-strip-text > strong { color: var(--red); }

/* The quiet info block (Suppliers «no open invoices»): 12px 14px, radius 10, #f0f0eb, 14/600 ink-2. */
.bf .bf-note { padding: 12px 14px; border-radius: 10px; background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* An error (Suppliers pay.err): 10px 14px, radius 10, red on the red wash, 14/700. */
.bf .error {
  padding: 10px 14px;
  border: 1px solid var(--red-line);
  border-radius: 10px;
  background: var(--red-bg);
  color: var(--red);
  font-size: 14px;
  font-weight: 700;
}

/* A state message that replaces the work area (loading / error / empty / denied): 28px 16px, centred. */
.bf .scr-state { padding: 28px 16px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-2); }

/* Totals (Orders totals card): label 13.5/700 ink-2, figure 17/800; a bar sits under a grid. */
.bf .total { justify-items: start; gap: 0; }
.bf .total-label { font-size: 13.5px; font-weight: 700; color: var(--ink-2); }
.bf .total-value { font-size: 17px; font-weight: 800; line-height: 1.5; }
.bf .total-value.is-muted { font-size: 14px; font-weight: 700; color: var(--ink-3-text); }
.bf .scr-totals { padding: 10px 16px; gap: 0; background: var(--surface-2); border-block-start: 1px solid var(--line-2); }
.bf .scr-totals .total { padding-inline: 16px; }

/* A pinned full-page form (Suppliers pay): panel padding 16px 20px, gap 12; title 24/800. */
.bf .scr-form { flex: none; gap: 12px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-1); box-sizing: border-box; }
.bf .scr-form-subject { padding: 0; background: none; color: var(--ink); font-size: 24px; font-weight: 800; line-height: 1.3; }
.bf .scr-form-body { flex: none; overflow: visible; }
.bf .scr-form-review { margin-block-start: auto; }

/* A hint (Suppliers: 12.5px ink-2, line-height 1.45). */
.bf .bf-hint { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }

/* The two BOARDED goods screens — Receiving and Suppliers — load this sheet too (receiving-screen.js,
   suppliers-screen.js). They have boards, and their boards draw 48px inputs at radius 8, 44px wells and
   filter fields, 36px table heads at 12.5 and radius-11 panels; the sizes above (52 / 40 / 40 / 14) are
   the flavour for screens with NO board (Q8a B-13..B-15), so these two keep exactly what they had. */
.goods-page .bf { --r-2: 8px; --r-md: 8px; --r-sm: 8px; --radius-md: 8px; --r-3: 11px; --r-lg: 11px; --r-xl: 11px; }
.goods-page .bf .input,
.goods-page .bf select.input { height: 48px; border-radius: 8px; }
.goods-page .bf .bf-search { height: 44px; }
.goods-page .bf .scr-filters .input,
.goods-page .bf .scr-filters select.input { height: 44px; min-height: 44px; }
.goods-page .bf .scr-grid-wrap thead th,
.goods-page .bf .bf-subgrid thead th,
.goods-page .bf .bf-xcell.hd { height: 36px; font-size: 12.5px; }
.goods-page .bf .bf-subgrid thead th { height: 34px; }
.goods-page .bf .bf-panel { border-radius: 11px; }
.goods-page .bf .scr-form { border-radius: 11px; }