/* MradiQ design tokens and shell.
 *
 * Every value here was read out of the client's canvas.fig with
 * backend/tools/figparse.py — not eyeballed from a screenshot. The hex codes
 * are the ones their file actually uses, ordered by how often they appear.
 */

:root {
  /* greens — #13251B is the sidebar, #087443 the primary action */
  --ink-900: #13251B;
  --green-700: #087443;
  --green-600: #087443;   /* one MradiQ green everywhere (client, 16-oct-2026) */
  --green-500: #087443;
  --green-400: #087443;
  --green-300: #7DB99C;   /* a tint of #087443 — lighter bars / text on green */
  --green-tint: #EFF8F2;

  /* neutrals */
  --ink: #212429;
  --ink-soft: #4B5852;   /* darker for readability (client, 28-oct-2026: "people who have eyesight issues") */
  --ink-faint: #5E6A65;  /* was #9FA2A7 (2.6:1 on white); now 5.7:1 — WCAG AA */
  --line: #E6EAE8;
  --line-soft: #F1F4F2;
  --canvas: #F7F9F8;
  --panel: #FFFFFF;

  /* signals */
  --amber: #FCB040;
  --amber-soft: #FEF4E6;
  --red: #EA4335;
  --red-soft: #FDECEB;
  --blue: #0D99FF;
  --blue-soft: #E7F3FE;

  /* aliases so the stylesheets written before the rebrand keep working —
     checked by grepping every var(--x) in the older sheets against this block */
  --accent: #087443;
  --accent-soft: #EFF8F2;
  --bg: #F7F9F8;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(19, 37, 27, .05), 0 6px 20px rgba(19, 37, 27, .05);
  --sidebar: 228px;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 14px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
a { color: inherit; }

/* ---------------------------------------------------------------- sidebar */
/*
 * Restyled 4 Oct to match the design the client's designer produced
 * (design-reference/dashboard-developer.jpg): a WHITE sidebar with a solid
 * green pill on the active item, not the dark panel this had before. That one
 * change accounts for most of the difference between the two at a glance.
 */

.mq-shell { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }

.mq-side {
  background: #fff; color: var(--ink); padding: 22px 0 20px;
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; overflow-y: auto; border-right: 1px solid var(--line);
}
.mq-logo { padding: 0 18px 26px; display: flex; align-items: center; gap: 10px; }
.mq-logo .mark {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--green-700); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.mq-logo .name { font-size: 20px; font-weight: 700; letter-spacing: -.03em; color: var(--ink); }
.mq-logo .name i { color: var(--green-700); font-style: normal; }
.mq-logo .tag {
  font-size: 9.5px; color: var(--ink-faint); margin-top: 1px;
  letter-spacing: .01em; font-weight: 500;
}

.mq-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
/* Section headings and a calmer active state — the client's navigation
   concept of 16-oct-2026: darker, larger labels; the current page a light
   green pill with a green bar, instead of a solid green block. */
.mq-grp {
  font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #8A938F; padding: 16px 14px 6px;
}
.mq-grp:first-child { padding-top: 2px; }
.mq-nav a, .mq-nav span {
  position: relative; display: flex; align-items: center; gap: 13px; white-space: nowrap;
  padding: 10px 14px; border-radius: 10px;
  font-size: 14.5px; color: #2B302D; text-decoration: none; font-weight: 500;
}
.mq-nav a:hover { background: #F2F7F4; color: var(--green-700); }
.mq-nav a.active { background: #E6F2EB; color: var(--green-700); font-weight: 700; }
.mq-nav a.active::before {
  content: ''; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 4px;
  border-radius: 0 4px 4px 0; background: var(--green-700);
}
.mq-nav a.active .ico { opacity: 1; color: var(--green-700); }
.mq-nav .soon { color: #B4BCB8; cursor: default; }
.mq-nav .soon::after {
  content: 'Phase 2'; margin-left: auto; font-size: 9px; letter-spacing: .05em;
  white-space: nowrap; flex: none;
  text-transform: uppercase; border: 1px solid var(--line);
  border-radius: 100px; padding: 2px 8px; color: #B4BCB8;
}
.mq-nav .ico {
  width: 20px; height: 20px; flex: none; opacity: .9; color: #3A423E;
  display: inline-flex; align-items: center; justify-content: center;
}
.mq-nav .soon .ico { color: inherit; opacity: .8; }
.mq-nav .ico svg { width: 20px; height: 20px; display: block; }

/* The promo card the design has at the foot of the sidebar. Its text is set
   by each screen from real counts — never a slogan with a made-up number. */
.mq-promo {
  margin: 22px 14px 0; padding: 14px 15px; border-radius: 11px;
  background: var(--green-tint); line-height: 1.45;
}
.mq-promo b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 3px; }
.mq-promo span { font-size: 11.5px; color: var(--ink-soft); }

.mq-side .foot {
  padding: 12px 18px 0; font-size: 10px;
  color: #C3CBC7; line-height: 1.5;
}

/* who is signed in, and the way out */
.mq-who {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 14px 0; border-top: 1px solid var(--line-soft);
}
.mq-who .av {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--ink-900); color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mq-who .id { min-width: 0; flex: 1; line-height: 1.3; }
.mq-who .id b {
  display: block; font-size: 12.5px; color: var(--ink); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mq-who .id span {
  font-size: 10.5px; color: var(--ink-faint); text-transform: capitalize;
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mq-who .out {
  border: 0; background: none; color: var(--ink-soft); cursor: pointer; flex: none;
  font: inherit; font-size: 11px; padding: 4px 6px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mq-who .out:hover { color: var(--red); background: var(--red-soft); }
.mq-who .id b { font-size: 13px; }
.mq-who .id span { font-size: 11px; }

/* phone and tablet: a top bar with a menu button; the sidebar slides in */
.mq-mbar, .mq-close, .mq-scrim { display: none; }

/* ------------------------------------------------------------------ main */

.mq-main { min-width: 0; display: flex; flex-direction: column; background: var(--canvas); }

/* top bar: breadcrumb + profile menu (client, 17-oct-2026) */
.mq-bar { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 30px; background: #fff; border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 25; box-sizing: border-box; }
.mq-bar .spacer, .mq-mbar .spacer { flex: 1; }
.mq-crumb { display: flex; gap: 8px; align-items: center; font-size: 13.5px; color: var(--ink-soft); }
.mq-crumb i { font-style: normal; color: var(--ink-faint); } .mq-crumb b { color: var(--ink); font-weight: 600; }
.mq-me { position: relative; }
.mq-mebtn { display: flex; align-items: center; gap: 9px; background: none; border: 0; padding: 4px 6px 4px 4px; border-radius: 99px;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mq-mebtn:hover { background: #F2F7F4; }
.mq-me .av { width: 34px; height: 34px; border-radius: 50%; background: #087443; color: #fff; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; flex: none; }
.mq-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 250px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 16px 40px rgba(17, 32, 26, .16); padding: 6px; z-index: 70; }
.mq-menu[hidden] { display: none; }
.mq-menu .hd { display: flex; gap: 10px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.mq-menu .hd div { display: flex; flex-direction: column; min-width: 0; } .mq-menu .hd b { font-size: 14px; }
.mq-menu .hd small { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-menu a, .mq-menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border-radius: 9px; border: 0;
  background: none; font: inherit; font-size: 14px; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.mq-menu a:hover, .mq-menu button:hover { background: #F2F7F4; }
.mq-menu [data-signout] { border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; }
.mq-menu [data-signout]:hover { color: var(--red); background: var(--red-soft); }
.mq-co { position: relative; }
.mq-cobtn { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 5px 10px 5px 6px;
  font: inherit; cursor: pointer; color: var(--ink); max-width: 280px; }
.mq-cobtn:hover { border-color: #B9D8C6; }
.mq-co img, .mq-co .ini { width: 30px; height: 30px; border-radius: 7px; flex: none; object-fit: contain; }
.mq-co .ini { background: #087443; color: #fff; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; }
.mq-cobtn .nm { display: flex; flex-direction: column; text-align: left; min-width: 0; }
.mq-cobtn .nm b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-cobtn .nm small { font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.mq-menu.co { width: 290px; }
.mq-menu.co button.on { background: #E6F2EB; }
.mq-menu.co .t { display: flex; flex-direction: column; } .mq-menu.co .t small { color: var(--ink-soft); font-size: 12px; }
.mq-verify { background: #FFF6E2; border-bottom: 1px solid #F3D9A4; color: #6B4700; font-size: 13px; padding: 8px 30px; }
.mq-pilot { background: #EAF2FB; border-bottom: 1px solid #BCD3EE; color: #173A63; font-size: 13px; padding: 8px 30px; }
.mq-pilot.acting { background: #FDEBD3; border-bottom-color: #F0B66A; color: #5A3300; }
.mq-pilot button { border: 1px solid currentColor; background: #fff; color: inherit; font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; padding: 2px 10px; margin-left: 6px; }
.mq-verify button { border: 0; background: none; color: #087443; font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.mq-bell { position: relative; }
.mq-bellbtn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: var(--ink-soft);
  display: grid; place-items: center; cursor: pointer; }
.mq-bellbtn:hover { background: #F2F7F4; color: var(--ink); }
.mq-bellbtn em { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #DC2626;
  color: #fff; font-style: normal; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid #fff; }
.mq-menu.bell { width: 340px; max-height: 70vh; overflow: auto; }
.mq-menu.bell a { align-items: flex-start; }
.mq-menu.bell a.unread { background: #F2F8F4; }
.mq-menu.bell a .t { font-size: 13px; line-height: 1.4; } .mq-menu.bell small { color: var(--ink-soft); }
.mq-menu.bell .none { font-size: 13px; color: var(--ink-soft); padding: 10px; margin: 0; }
.mq-hello { display: flex; align-items: flex-end; gap: 16px; padding: 20px 30px 0; }
.mq-hello h2 { font-size: 20px; letter-spacing: -.01em; font-weight: 600; color: var(--ink); line-height: 1.25; }
.mq-hello h2 em { font-style: normal; color: #087443; }
.mq-hello p { color: var(--ink-soft); font-size: 13px; margin-top: 2px; }
.mq-hello .mq-date { margin-left: auto; color: var(--ink-soft); font-size: 13.5px; white-space: nowrap; }
.mq-hello[hidden] { display: none; }

.mq-top {
  background: var(--canvas); border-bottom: 0;
  padding: 26px 30px 20px; display: flex; align-items: flex-start; gap: 16px;
  position: sticky; top: 60px; z-index: 20;
}
.mq-top h1 { font-size: 22px; letter-spacing: -.02em; font-weight: 700; }
.mq-top .sub { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; }
.mq-top .spacer { flex: 1; }
.mq-top .controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 4px;
}

.mq-sel {
  border: 1px solid var(--line); border-radius: 9px;
  padding: 9px 13px; font: inherit; font-size: 13px; background: #fff;
  color: var(--ink); max-width: 260px; font-weight: 500;
}
.mq-sel:focus { outline: 2px solid var(--green-tint); border-color: var(--green-700); }
a.mq-sel { text-decoration: none; display: inline-block; }

.mq-body { padding: 4px 30px 60px; }

/* ----------------------------------------------------------------- cards */

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow); margin-bottom: 18px;
}
.panel > header {
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 14px;
}
.panel > header h2 { font-size: 16px; font-weight: 700; letter-spacing: -.02em; }
.panel > header .sub { font-size: 12.5px; color: var(--ink-faint); }
.panel > header .spacer { flex: 1; }
/* Title with an explanation under it, rather than beside it. A sentence
   dropped straight into the header's flex row gets squeezed into a column a
   few words wide inside any half-width panel. */
.panel > header .titleblock { display: flex; flex-direction: column; gap: 3px; }
.panel > header .titleblock .sub { line-height: 1.45; }
.panel .body { padding: 22px; }
.hidden { display: none !important; }
/* The hidden attribute must win over any display rule (".sheet label { display: block }" was showing the
   Subcontractor and Status rows of the worker form to everyone, client 30-oct-2026). */
[hidden] { display: none !important; }

/* ----------------------------------------------------------------- tiles */
/*
 * Four across, matching design-reference/dashboard-developer.jpg: a tinted
 * icon square on the left, the label above the figure, and a coloured note
 * underneath. The note is only rendered when there is a real figure behind
 * it — the design shows things like "+3 this quarter" and "TZS 1.2B overdue"
 * which this system has no source for, and a plausible number with nothing
 * behind it is the one thing this app does not do.
 */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.tiles.five { grid-template-columns: repeat(5, 1fr); }
.tiles.three { grid-template-columns: repeat(3, 1fr); }
.tiles.tight { grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 0; }
@media (max-width: 1240px) { .tiles, .tiles.five, .tiles.three { grid-template-columns: repeat(2, 1fr); } }

.tile {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px; box-shadow: var(--shadow);
  display: flex; gap: 14px; align-items: flex-start;
}
.tile .ic {
  width: 44px; height: 44px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 19px;
  background: var(--green-tint); color: var(--green-700);
}
.tile .ic.blue { background: var(--blue-soft); color: var(--blue); }
.tile .ic.amber { background: var(--amber-soft); color: #B07A14; }
.tile .ic.red { background: var(--red-soft); color: var(--red); }
.tile .ic.grey { background: var(--line-soft); color: var(--ink-soft); }
.tile .wrap { min-width: 0; flex: 1; }
.tile .k {
  font-size: 12.5px; letter-spacing: 0; color: var(--ink-soft);
  font-weight: 500; line-height: 1.35;
}
.tile .v {
  font-size: 20px; font-weight: 700; margin-top: 4px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.tile .v.blank { color: #8A948F; font-weight: 500; font-size: 22px; }
.tile .d { font-size: 11.5px; color: var(--green-600); margin-top: 6px; font-weight: 600; }
.tile .d.plain { color: var(--ink-faint); font-weight: 500; }
.tile .d.why { color: var(--amber); font-weight: 500; }
.tile .d.bad { color: var(--red); }
.tile.pos .v { color: var(--ink); }
.tile.neg .v { color: var(--red); }
/* A tile without an icon puts label, figure and note straight inside it.
   Those stack — label, figure, note — instead of sitting side by side,
   which on a phone squeezed the figure into a sliver and broke a date
   over three lines (client, 16-oct: "7/5/202 / 6"). */
.tile { flex-wrap: wrap; row-gap: 0; }
.tile > .k, .tile > .v, .tile > .d { flex: 1 1 100%; }

/* the compact EVM row keeps the older, denser look */
.tiles.tight .tile { display: block; padding: 15px 16px; }
.tiles.tight .tile .v { font-size: 20px; }
.tiles.tight .tile .k { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-faint); }

/* ---------------------------------------------------------------- tables */

table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: #FAFCFB;
  position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:hover { background: #FAFCFB; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { max-height: 620px; overflow: auto; }
.ref { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); white-space: nowrap; }
.code-id { font-family: var(--mono); font-size: 11.5px; font-weight: 600; white-space: nowrap; }

/* ----------------------------------------------------------- pills, buttons */

.pill {
  display: inline-block; border-radius: 100px; padding: 2px 9px;
  font-size: 10.5px; font-weight: 600; white-space: nowrap;
}
.pill.matched, .pill.confirmed, .pill.approved { background: var(--green-tint); color: var(--green-700); }
.pill.paid { background: var(--green-tint); color: var(--green-600); }
.pill.corrected, .pill.submitted { background: var(--blue-soft); color: var(--blue); }
.pill.review, .pill.in_review { background: var(--amber-soft); color: #9A6410; }
.pill.returned { background: #FDF0DE; color: #8A5A11; }
.pill.unmatched, .pill.rejected { background: var(--red-soft); color: var(--red); }
.pill.excluded, .pill.draft { background: var(--line-soft); color: var(--ink-faint); }

button.act, .act {
  border: 1px solid var(--line); background: #fff; color: var(--ink-soft);
  border-radius: var(--radius-sm); padding: 7px 13px; font: inherit;
  font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.act:hover { border-color: #CFD8D4; background: #FAFCFB; }
.act.primary { background: var(--green-700); border-color: var(--green-700); color: #fff; font-weight: 500; }
.act.primary:hover { background: #087443; filter: brightness(.9); }
.act.danger { border-color: #F1C4C0; color: var(--red); }
.act.danger:hover { background: var(--red-soft); }
.act.warn { border-color: #F5DCB0; color: #9A6410; }
.act.warn:hover { background: var(--amber-soft); }
.act:disabled { opacity: .45; cursor: not-allowed; }
.act-row { display: flex; gap: 6px; }

input[type=search], input[type=text], input[type=number], select, textarea {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; font: inherit; font-size: 13px; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--green-tint); border-color: var(--green-700);
}

/* ----------------------------------------------------------------- misc */

.notice { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }
.notice.info { background: var(--blue-soft); color: #0B5E9E; }
.notice.warn { background: var(--amber-soft); color: #8A5A11; }
.notice.err  { background: var(--red-soft); color: #A42D22; }
.notice.ok   { background: var(--green-tint); color: var(--green-700); }
.empty { padding: 44px 20px; text-align: center; color: var(--ink-faint); font-size: 13.5px; }

.note {
  margin: 0 20px 18px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--amber-soft); color: #8A5A11; font-size: 12.5px;
}
.note b { font-weight: 600; }

.spinner {
  width: 15px; height: 15px; border: 2px solid var(--line);
  border-top-color: var(--green-700); border-radius: 50%;
  animation: spin .7s linear infinite; display: inline-block; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) {
  .mq-shell { grid-template-columns: 1fr; }
  .mq-mbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 30;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .mq-mbar img { height: 34px; width: auto; display: block; }
  .mq-burger, .mq-close { border: 0; background: none; color: var(--ink); width: 44px; height: 44px; border-radius: 10px;
    display: grid; place-items: center; cursor: pointer; }
  .mq-burger:hover, .mq-close:hover { background: #F2F7F4; }
  .mq-side { position: fixed; z-index: 60; top: 0; left: 0; bottom: 0; width: min(330px, 88vw); height: 100vh;
    transform: translateX(-105%); transition: transform .22s ease; box-shadow: 0 20px 60px rgba(17, 32, 26, .25);
    border-radius: 0 18px 18px 0; }
  .mq-shell.nav-open .mq-side { transform: none; }
  .mq-close { display: grid; position: absolute; top: 14px; right: 10px; }
  .mq-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(17, 32, 26, .35); }
  .mq-shell.nav-open .mq-scrim { display: block; }
  .mq-side .foot { display: none; }
  .mq-top { position: static; }
  .tiles, .tiles.tight, .tiles.three { grid-template-columns: repeat(2, 1fr); }
  .mq-bar { display: none; }               /* the phone bar carries the profile menu */
  .mq-menu.bell { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; }
  .mq-mbar .mq-cobtn .nm { display: none; } .mq-mbar .mq-cobtn { padding: 4px; border: 0; }
  .mq-menu.co { position: fixed; left: 12px; right: 12px; top: 60px; width: auto; }
  .mq-mbar { gap: 6px; }
  .mq-mbar .mq-mebtn .nm, .mq-mbar .mq-mebtn > svg, .mq-mbar .mq-cobtn > svg { display: none; }
  .mq-mbar .mq-mebtn { padding: 2px; }
  .mq-mbar .mq-mebtn .nm { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mq-hello { padding: 18px 16px 0; } .mq-hello h2 { font-size: 18px; } .mq-hello .mq-date { display: none; }
}

/* The board heading inside each view is redundant now that the top bar carries
   the title and subtitle from the data. Kept in the markup so the pages do not
   need restructuring, but hidden. */
.board-head { display: none; }

/* Phones: the title and the project picker stack, so the picker never pushes
   the page wider than the screen (procurement, compliance, financials). */
@media (max-width: 700px) {
  .mq-top { flex-wrap: wrap; padding: 18px 16px 14px; }
  .mq-top .spacer { display: none; }
  .mq-top .controls { width: 100%; min-width: 0; }
  .mq-top .controls > *, .mq-top .controls select { max-width: 100%; min-width: 0; }
  .mq-body { padding: 4px 16px 60px; }
}

/* ------------------------------------------------------------------ modals */
/* Shared. These lived in payments.css, so on Approvals, Consultant Review,
   Site Progress and the contractor dashboard every dialog — approve, adjust,
   reject, record progress, edit details — rendered as bare form fields
   dumped at the foot of the page. Found in a frame of the demo video. */

.modal {
  position: fixed; inset: 0; background: rgba(23,32,42,.45);
  display: grid; place-items: center; z-index: 50; padding: 20px;
}
.sheet {
  background: #fff; border-radius: 12px; padding: 22px; width: min(640px, 100%);
  max-height: 86vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.sheet.narrow { width: min(460px, 100%); }
.sheet h3 { font-size: 16px; margin-bottom: 14px; }
.sheet .hint { font-size: 12px; color: var(--ink-faint); margin: 0 0 10px; }
.frow { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.sheet label { display: block; font-size: 11.5px; color: var(--ink-faint); font-weight: 600; flex: 1; min-width: 130px; }
.sheet label.full { margin-bottom: 12px; }
.sheet input, .sheet select, .sheet textarea {
  display: block; width: 100%; margin-top: 4px; border: 1px solid var(--line);
  border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 13px;
  color: var(--ink); background: #fff;
}
.sheetfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Links styled as buttons are buttons: no underline. */
a.act { text-decoration: none; display: inline-flex; align-items: center; }

/* The official logo in the sidebar. */
.mq-logo { display: block; padding: 0 18px 22px; }
.mq-logo img { display: block; width: 170px; height: auto; }

.boq-locked { background: #F2F7F4; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; font-size: 13.5px; }

/* ---------------------------------------------------------------- phones */
/* Mobile pass (client, 16-oct-2026): nothing may push the page wider than
   the screen. A wide table scrolls sideways inside its own card; inputs,
   selects and buttons shrink to fit; card headers wrap instead of
   overhanging; stat tiles go two-up. Measured on every page and tab. */
@media (max-width: 760px) {
  .mq-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mq-body table > thead, .mq-body table > tbody, .mq-body table > tfoot { width: 100%; }
  .mq-body input, .mq-body select, .mq-body textarea { max-width: 100%; min-width: 0; }
  .mq-body .act { max-width: 100%; white-space: normal; }
  .panel > header { flex-wrap: wrap; padding: 14px 16px; gap: 10px; }
  .panel > header .spacer { display: none; }
  .panel > header > select, .panel > header > input, .panel > header .controls { flex: 1 1 100%; }
  .panel .body { padding: 16px; }
  .tiles, .tiles.five, .tiles.tight, .tiles.three { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile { min-width: 0; padding: 14px; }
  .tile > * { min-width: 0; }
  .tile .k { font-size: 12px; }
  .tile .v { font-size: 18px; overflow-wrap: break-word; }
  .tile .d { font-size: 11px; }
  .mq-body h1, .mq-body h2, .mq-body h3 { overflow-wrap: anywhere; }
  .mq-top h1 { font-size: 20px; }
  .mq-top .controls .act, .mq-top .controls select { flex: 1 1 auto; }
}

/* the profile bar never prints */
@media print { .mq-bar, .mq-mbar, .mq-hello, .mq-menu { display: none !important; } }

/* "Discuss" — opens Project Chat on a conversation attached to the record */
.act.discuss { display: inline-flex; gap: 5px; align-items: center; text-decoration: none; font-size: 12.5px; padding: 5px 11px;
  border-color: #087443; color: #087443; background: #fff; vertical-align: middle; }
.act.discuss:hover { background: #E6F2EB; }
/* A module the company has withheld on this project (18-oct-2026) */
.no-access { padding: 28px 24px; }
.no-access h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--ink); }
.no-access p { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
.mq-menu.bell a.rem b { color: #8A5A00; }

/* An example in an empty field must not look like a value already typed
   (client screenshot, 19-oct-2026: the variation form looked pre-filled). */
.sheet input::placeholder, .sheet textarea::placeholder { font-weight: 400; color: #6E7A75; font-style: italic; }

/* project status banner (Project Closeout & Status, 19-oct-2026) */
.mq-status { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding: 10px 30px; font-size: 13px;
             border-bottom: 1px solid; }
.mq-status a { color: inherit; font-weight: 700; white-space: nowrap; }
.mq-status.on_hold, .mq-status.discontinuation_pending { background: #FFF6E2; border-color: #F3D9A4; color: #6B4700; }
.mq-status.closed, .mq-status.discontinued { background: #EEF1F5; border-color: #D5DBE3; color: #374151; }
.mq-status.closeout_requested, .mq-status.completion_verified, .mq-status.handed_over { background: #E8F5EE; border-color: #BFE3CE; color: #0B5E36; }
@media (max-width: 760px) { .mq-status { padding: 10px 16px; } }

/* The dark green menu (client, 21-oct-2026: "Change the current white
   background to this color on the left side where there is a menu").
   Last in the file so it wins over the earlier light-menu rules. The phone
   top bar stays white; the sidebar carries the light-on-dark logo. */
.mq-side {
  background: linear-gradient(180deg, #15291e 0%, #102119 55%, #0c1912 100%);
  color: #E3ECE7; border-right-color: #0c1912;
}
.mq-grp { color: #B3C4BA; }
.mq-nav a, .mq-nav span { color: #DCE6E0; }
.mq-nav .ico { color: #C4D3CB; opacity: 1; }
.mq-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.mq-nav a:hover .ico { color: #fff; }
.mq-nav a.active { background: rgba(98, 187, 70, .17); color: #fff; }
.mq-nav a.active::before { background: #62BB46; }
.mq-nav a.active .ico { color: #7FCB66; }
.mq-nav .soon, .mq-nav .soon .ico { color: #A3B5AB; }
.mq-nav .soon::after { border-color: rgba(255, 255, 255, .22); color: #A3B5AB; }
.mq-promo { background: rgba(255, 255, 255, .06); }
.mq-promo b { color: #fff; } .mq-promo span { color: #B5C5BC; }
.mq-side .foot { color: #A3B5AB; }
.mq-who { border-top-color: rgba(255, 255, 255, .1); }
.mq-who .av { background: #62BB46; color: #0c1912; }
.mq-who .id b { color: #fff; } .mq-who .id span { color: #B9C9C0; }
.mq-who .out { color: #B5C5BC; }
.mq-who .out:hover { color: #fff; background: rgba(239, 68, 68, .25); }
.mq-side .mq-close { color: #fff; }
.mq-side .mq-close:hover { background: rgba(255, 255, 255, .08); }
.mq-side { scrollbar-color: rgba(255, 255, 255, .18) transparent; }

/* KPI cards and approval pipeline — the shared dashboard look (21-oct-2026,
   after the client's Internal Payments mock-up). Built by mqKpi()/mqPipe(). */
.mqks { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; margin-bottom: 14px; }
.mqk {
  --c: #15803D; --t: #E9F7EE; --chip: #D5F0DE;
  position: relative; display: block; min-width: 0; container-type: inline-size;
  background: linear-gradient(180deg, var(--t) 0%, #fff 70%); border: 1px solid var(--line);
  border-top: 3px solid var(--c); border-radius: 14px; padding: 16px 16px 14px;
  box-shadow: 0 1px 2px rgba(17, 32, 26, .04); color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, transform .15s ease;
}
a.mqk:hover { box-shadow: 0 8px 22px rgba(17, 32, 26, .09); transform: translateY(-1px); }
.mqk-in { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
/* a narrow card puts its icon above the text, so the figure keeps the full width */
@container (max-width: 250px) { .mqk-in { flex-direction: column; gap: 10px; } .mqk .mqk-ic { width: 40px; height: 40px; } }
.mqk-ic { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--chip); color: var(--c); }
.mqk-body { min-width: 0; flex: 1; }
.mqk-l { font-size: 13.5px; font-weight: 600; color: #2B302D; line-height: 1.3; }
.mqk-v { font-size: 24px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); margin: 6px 0 4px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.mqk-s { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; }
.mqk.green, .mqps.green { --c: #15803D; --t: #EBF8EF; --chip: #D3F0DC; }
.mqk.blue, .mqps.blue { --c: #2563eb; --t: #EEF4FF; --chip: #DCE7FE; }
.mqk.amber, .mqps.amber { --c: #B45309; --t: #FFF6E8; --chip: #FDE9C8; }
.mqk.purple, .mqps.purple { --c: #7c3aed; --t: #F5F0FF; --chip: #E8DEFD; }
.mqk.red, .mqps.red { --c: #dc2626; --t: #FEF1F1; --chip: #FCDADA; }
.mqk.teal, .mqps.teal { --c: #0F766E; --t: #ECFBF8; --chip: #CDF2EC; }
.mqk.slate, .mqps.slate { --c: #475569; --t: #F3F5F8; --chip: #E2E8F0; }

.mqpipe { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; position: relative; }
.mqps { --c: #15803D; --chip: #D3F0DC; position: relative; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: #fff; min-width: 0; }
.mqps:not(:last-child)::after { content: ''; position: absolute; right: -12px; top: 50%; width: 10px; height: 10px;
  border-radius: 50%; background: #E3E8E5; border: 2px solid #fff; transform: translateY(-50%); z-index: 1; }
.mqps.busy { border-color: var(--c); box-shadow: 0 0 0 3px var(--chip); }
.mqps .mqk-ic { width: 40px; height: 40px; }
.mqps div { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mqps b { font-size: 22px; font-weight: 800; color: var(--ink); line-height: 1.1; }
.mqps span:not(.mqk-ic) { font-size: 13px; font-weight: 600; color: #2B302D; }
.mqps small { font-size: 12px; color: var(--ink-soft); }
.mqps em { font-style: normal; font-size: 11.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .mqks { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mqk { padding: 12px; }
  .mqk-ic { width: 38px; height: 38px; }
  .mqk-v { font-size: 20px; }
  .mqpipe { grid-template-columns: 1fr 1fr; }
  .mqps::after { display: none; }
}

/* The existing stat tiles take the same look as mqKpi (21-oct-2026): a
   tinted card whose top edge and round icon chip follow the icon's colour.
   Tiles with no icon get a quiet slate edge. */
.tile {
  --c: #15803D; --t: #EBF8EF; --chip: #D3F0DC;
  background: linear-gradient(180deg, var(--t) 0%, #fff 72%);
  border-top: 3px solid var(--c); box-shadow: 0 1px 2px rgba(17, 32, 26, .04);
}
.tile:not(:has(.ic)) { --c: #94a3b8; --t: #F6F8FA; }
.tile:has(.ic.blue) { --c: #2563eb; --t: #EEF4FF; --chip: #DCE7FE; }
.tile:has(.ic.amber) { --c: #B45309; --t: #FFF6E8; --chip: #FDE9C8; }
.tile:has(.ic.red) { --c: #dc2626; --t: #FEF1F1; --chip: #FCDADA; }
.tile:has(.ic.purple) { --c: #7c3aed; --t: #F5F0FF; --chip: #E8DEFD; }
.tile:has(.ic.teal) { --c: #0F766E; --t: #ECFBF8; --chip: #CDF2EC; }
.tile:has(.ic.grey) { --c: #64748b; --t: #F3F5F8; --chip: #E2E8F0; }
.tile .ic, .tile .ic.blue, .tile .ic.amber, .tile .ic.red, .tile .ic.grey {
  border-radius: 50%; width: 46px; height: 46px; background: var(--chip); color: var(--c);
}
.tile .ic svg { width: 22px; height: 22px; }
.tile .k { font-size: 13px; font-weight: 600; color: #2B302D; }
.tile .v { font-size: 22px; font-weight: 800; }
.tiles.tight .tile .k { font-size: 11px; font-weight: 700; color: #5B6560; }
.mqks.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .mqks.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mqk-u { font-weight: 500; color: var(--ink-faint); font-size: 11.5px; }
.mqk-v .na { color: #6E7A75; font-weight: 600; font-size: .8em; } .mqk-v .bad, .mqk-s .bad { color: var(--red); }
.mqk-s .good { color: var(--green-700); font-weight: 600; }
@container (max-width: 250px) { .mqk-v { font-size: 20px; } }
@container (max-width: 190px) { .mqk-v { font-size: 17px; } }

/* "Submit to government client" (static/gov-link.js, 28-oct-2026) */
[data-gov] a.act { display: inline-flex; align-items: center; gap: 6px; }
.gov-btns { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; }