/* Greig ERP — Greig Technologies Ltd brand theme. Single stylesheet, no build step.
   Brand (taken from the logo): "TECHNOLOGIES" green #00964E, globe shadow green #006D2C, wordmark grey #555555.
   --green #008545 is the logo green made just deep enough for white text on buttons (contrast 4.7:1).
   Type: Jost (titles and figures, echoes the logo's geometric caps), IBM Plex Sans (UI), IBM Plex Mono (serials, MACs).
   Design: the screen borrows the printed letterhead — every page opens with a title over a green rule, the same rule
   that heads printed reports and claims. Colour carries meaning only: green = act / done, amber = waiting on someone,
   red = stopped. Everything else is paper, ink and hairlines. */
:root {
  --green: #008545; --green-dark: #006d2c; --green-ink: #006b36; --green-bright: #00964e;
  --green-soft: #dff2e7; --green-tint: #f1f9f4; --green-line: #96d1ae;
  --brand-grey: #555555; --brand-grey-dark: #404040; /* the grey of the GREIG wordmark */
  --slate: #3a3d3b; --ink: #1f2321; --muted: #5f6662; --faint: #8a918d;
  --line: #dde3df; --line-soft: #ebefec; --input: #c9d1cc;
  --bg: #f3f5f2; --card: #ffffff; --thead: #f7f9f7;
  --amber: #8a5300; --amber-soft: #fcefd6; --amber-mark: #d48a00; --red: #a8231a; --red-soft: #fde8e6;
  --blue: #1d5b93; --blue-soft: #e6eef7; --grey-soft: #edf0ee;
  --radius: 10px; --radius-sm: 6px; --shadow: none;
  --font: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-head: 'Jost', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 17.4px; } /* 14.5px + 20% — every rem-based size follows */
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: var(--green-ink); text-decoration: none; }
a:hover { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.2; font-family: var(--font-head); font-weight: 500; color: var(--slate); text-wrap: balance; }
h1 { font-size: 1.45rem; letter-spacing: -.005em; } h2 { font-size: 1.12rem; } h3 { font-size: 1rem; } h4 { font-size: .93rem; }
p { margin: 0 0 .75rem; }
small, .muted { color: var(--muted); }
small { font-size: .84rem; }
.muted { font-size: .9rem; }
small.muted { font-size: .84rem; }
p.muted { max-width: 75ch; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
code, .mono { font-family: var(--font-mono); font-size: .86em; }
code { background: var(--grey-soft); padding: .1em .35em; border-radius: 4px; }
.icon { flex: 0 0 auto; vertical-align: -0.2em; }
:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 2px; }
strong { font-weight: 600; }

/* Title Case for labels (client house style). Body text and help text stay sentence case. */
h1, h2, h3, .card-head h2, .card-head h3, .field label, .lbl, legend, .btn, .tabs a, .nav-group a, .nav-group > span, .filters label, th, .dl dt, .stat .label, .chip { text-transform: capitalize; }

/* ---- layout ---- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: 272px; flex: 0 0 272px; background: var(--card); border-right: 1px solid var(--line); padding: 16px 0 0; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; }
.sidebar > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 12px 20px; scrollbar-width: thin; scrollbar-color: #d5dcd8 transparent; }
.sidebar > .brand { margin: 0 12px; }
.side-user { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem .8rem; border-top: 1px solid var(--line); background: var(--card); }
.side-user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font: 600 .76rem var(--font-head); flex: 0 0 auto; }
.side-user .who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.side-user .who strong { font-size: .84rem; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.side-user { gap: .5rem; }
.side-user .icon-btn { width: 30px; height: 30px; }
.side-user .who small { font-size: .76rem; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; flex: 0 0 auto; }
.icon-btn:hover { background: var(--grey-soft); color: var(--ink); text-decoration: none; }
.sidebar-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(20, 28, 24, .38); }
.brand { display: block; padding: 4px 10px 10px; }
.brand img { display: block; width: 160px; height: auto; }
.nav-group { margin-top: 12px; }
.nav-group > span { display: block; font-size: .78rem; font-weight: 600; color: var(--faint); padding: 0 12px 4px; }
.nav-group a { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--slate); font-size: .93rem; }
.nav-group a .icon { color: var(--faint); width: 17px; height: 17px; }
.nav-group a:hover { background: var(--grey-soft); text-decoration: none; color: var(--ink); }
.nav-group a:hover .icon { color: var(--slate); }
.nav-group a.active { background: var(--green-soft); color: var(--green-ink); font-weight: 600; }
.nav-group a.active::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); }
.nav-group a.active .icon { color: var(--green); }
.nav-group a .count { margin-left: auto; background: var(--green); color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 600; padding: .05rem .45rem; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: none; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; padding: .45rem 2rem; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar > .actions > strong { display: none; font: 500 1rem var(--font-head); color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* the page title is in the letterhead below; shown here on phones only */
.topbar .user { display: flex; align-items: center; gap: .65rem; font-size: .88rem; line-height: 1.25; margin-left: auto; }
.topbar .user .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font: 600 .78rem var(--font-head); flex: 0 0 auto; }
.topbar .user small { font-size: .78rem; }
.content { padding: 1.9rem 2.25rem 2.75rem; width: 100%; max-width: none; min-width: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.menu-toggle, .btn.menu-toggle { display: none; }

/* ---- page letterhead: back, crumbs, title, actions, over the green rule ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: 1.4rem; padding-bottom: .9rem; border-bottom: 2px solid var(--green); }
.page-head .page-title { flex: 1 1 16rem; min-width: 0; }
.page-head .crumbs { font-size: .95rem; color: var(--muted); margin-bottom: .2rem; }
.page-head .crumbs a { color: var(--muted); }
.page-head .crumbs a:hover { color: var(--green-ink); }
.page-head .crumbs .crumb-sep { margin: 0 .3rem; }
.page-head h1 { margin: 0; overflow-wrap: anywhere; }
.page-head > .actions { justify-content: flex-end; }

/* ---- cards & grid ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; min-width: 0; }
.card.tight { padding: 0; overflow: hidden; }
.card.tight > table { margin: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin-bottom: .8rem; }
.card-head h2, .card-head h3 { margin: 0; display: flex; align-items: center; gap: .45rem; }
.card-head h2 .icon, .card-head h3 .icon { color: var(--green); }
.card.tight .card-head { padding: .8rem 1.25rem; border-bottom: 1px solid var(--line); margin: 0; }
.card > h3:first-child, .card form > h3:first-child { margin-top: 0; }
.card form > h3:not(:first-child) { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.grid { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.grid > .card { margin-bottom: 0; }
.grid > * { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }

/* ---- summary strip: figures side by side in one panel; amber mark = waiting on someone ---- */
.stats { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.stat { position: relative; display: block; flex: 1 1 170px; min-width: 0; background: var(--card); padding: .85rem 1.1rem .9rem; color: var(--ink); }
a.stat:hover { text-decoration: none; background: var(--green-tint); color: var(--ink); }
.stat .label { font-size: .84rem; font-weight: 500; color: var(--muted); line-height: 1.3; }
.stat .value { font: 500 1.75rem/1.15 var(--font-head); margin-top: .2rem; color: var(--slate); font-variant-numeric: tabular-nums; }
.stat .value .badge { white-space: normal; }
.stat .value .badge { font-family: var(--font); vertical-align: middle; }
.stat .sub { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.stat.warn { box-shadow: inset 0 3px 0 var(--amber-mark); }
.stat.warn .value { color: var(--amber); } .stat.danger .value { color: var(--red); } .stat.ok .value { color: var(--green-ink); }
.stat.danger { box-shadow: inset 0 3px 0 var(--red); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .62rem 1rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-size: .8rem; font-weight: 600; color: var(--slate); background: var(--thead); white-space: normal; border-bottom-color: var(--line); line-height: 1.3; }
thead th { padding-top: .55rem; padding-bottom: .55rem; }
tfoot th, tfoot td { background: var(--thead); border-top: 1px solid var(--line); border-bottom: 0; font-size: .9rem; color: var(--ink); }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f8faf8; }
tr.selected td { background: var(--green-tint); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.actions-cell { white-space: nowrap; text-align: right; }
.table-wrap { overflow-x: auto; }
.empty { padding: 2.1rem 1.5rem 2.2rem; text-align: center; color: var(--muted); font-size: .92rem; }
.empty::before { content: ""; display: block; width: 38px; height: 38px; margin: 0 auto .65rem; border-radius: 50%; background: var(--grey-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238a918d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E") no-repeat center / 18px 18px; }
td .empty::before, .card-head + .empty::before { width: 32px; height: 32px; background-size: 16px 16px; }

/* ---- status badges (square-cornered: they report a state; round chips are things you click) ---- */
.badge { display: inline-block; font-size: .76rem; font-weight: 600; line-height: 1.35; padding: .12rem .5rem; border-radius: 5px; background: var(--grey-soft); color: #4b524e; white-space: nowrap; text-transform: capitalize; vertical-align: .05em; }
.badge.green, .badge.active, .badge.approved, .badge.completed, .badge.done, .badge.issued, .badge.retired, .badge.reimbursed, .badge.valid, .badge.closed, .badge.ok, .badge.mobilised, .badge.in_stock, .badge.installed, .badge.sent, .badge.paid, .badge.settled, .badge.signed { background: var(--green-soft); color: var(--green-ink); }
.badge.amber, .badge.submitted, .badge.reviewed, .badge.in_progress, .badge.awaiting_report, .badge.partially_issued, .badge.partially_retired, .badge.expiring, .badge.mobilising, .badge.scheduled, .badge.on_hold, .badge.planned, .badge.standby, .badge.high, .badge.warn, .badge.pending { background: var(--amber-soft); color: var(--amber); }
.badge.red, .badge.rejected, .badge.expired, .badge.cancelled, .badge.fault, .badge.faulty, .badge.blocked, .badge.urgent, .badge.overdue, .badge.failed, .badge.missing, .badge.suspended, .badge.disposed { background: var(--red-soft); color: var(--red); }
.badge.blue, .badge.processing, .badge.open, .badge.planning, .badge.invoiced, .badge.todo, .badge.draft, .badge.returned, .badge.demobilised, .badge.info { background: var(--blue-soft); color: var(--blue); }
.badge.grey { background: var(--grey-soft); color: #4b524e; }

/* ---- buttons & chips ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: 0 .95rem; border-radius: var(--radius-sm); border: 1px solid var(--input); background: var(--card); color: var(--ink); font: 500 .9rem var(--font); cursor: pointer; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.btn .icon { width: 16px; height: 16px; }
.btn:hover { background: var(--grey-soft); border-color: #b9c3bd; text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--green); border-color: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-dark); border-color: var(--green-dark); color: #fff; }
.btn.danger { color: var(--red); border-color: #ebbcb7; }
.btn.danger:hover { background: var(--red-soft); border-color: #e0a29b; color: var(--red); }
.btn.sm { min-height: 30px; padding: 0 .7rem; font-size: .82rem; }
.btn.sm .icon { width: 15px; height: 15px; }
.btn.link { border: 0; background: transparent; color: var(--green-ink); padding: .2rem .3rem; min-height: 0; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
form.inline { display: inline; }
.chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 30px; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--input); background: var(--card); color: var(--slate); font-size: .84rem; }
.chip:hover { text-decoration: none; border-color: var(--green-line); color: var(--ink); }
.chip.active, .chip.on { background: var(--slate); border-color: var(--slate); color: #fff; }
.chip input { accent-color: var(--green); margin: 0; }
.chip.pick.active { background: var(--green-soft); border-color: #7fbf98; color: var(--green-ink); font-weight: 600; }

/* ---- forms ---- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.field label, .lbl { display: block; font-size: .84rem; font-weight: 600; color: var(--slate); margin-bottom: .3rem; }
.field label .req { color: var(--red); }
.field input:not([type]), .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=date], .field input[type=datetime-local], .field input[type=month], .field input[type=tel], .field input[type=url], .field input[type=file], .field input[type=search], .field select, .field textarea, .input {
  width: 100%; min-height: 40px; padding: .48rem .7rem; border: 1px solid var(--input); border-radius: var(--radius-sm); background: #fff; font: inherit; font-size: .95rem; color: var(--ink); }
.field input[type=file] { padding: .4rem .5rem; font-size: .88rem; }
/* selects: one quiet chevron instead of the browser's default control */
.field select, select.input, .filters select, table.lines select, td select {
  -webkit-appearance: none; appearance: none; padding-right: 2.1rem !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646a67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .65rem center / 15px 15px; }
.field select[multiple], select.input[multiple] { padding-right: .7rem !important; background-image: none; }
.field input[type=date], .field input[type=month], .field input[type=datetime-local] { min-height: 40px; }
.field textarea, textarea.input { min-height: 96px; resize: vertical; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover, .input:hover { border-color: #b2bcb6; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline: 3px solid rgba(33,156,93,.2); outline-offset: 0; border-color: var(--green-bright); }
.field:has(.error) input, .field:has(.error) select, .field:has(.error) textarea { border-color: var(--red); }
.field .help { font-size: .8rem; color: var(--muted); margin-top: .25rem; }
.field .error { font-size: .8rem; color: var(--red); margin-top: .25rem; font-weight: 500; }
.field.check { display: flex; align-items: center; gap: .55rem; padding-top: 1.45rem; }
.field.check label { margin: 0; font-weight: 500; }
input[type=checkbox], input[type=radio] { accent-color: var(--green); width: 17px; height: 17px; }
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); }
/* filter bar: one toolbar above the list it filters */
.filters { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: flex-end; margin-bottom: 1rem; padding: .75rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.filters .field { flex: 1 1 160px; min-width: 150px; max-width: 280px; }
.filters .field:first-child:has(input) { flex-basis: 220px; max-width: 360px; }
.filters .field label { font-size: .78rem; font-weight: 500; color: var(--muted); margin-bottom: .2rem; }
.filters input, .filters select { min-height: 36px !important; padding: .3rem .55rem !important; font-size: .9rem !important; }
.filters .btn { min-height: 36px; }
.filters label.check { margin: 0 0 .45rem; }
.dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; text-align: center; min-height: 150px; padding: 1.2rem; border: 2px dashed var(--green-line); border-radius: var(--radius); background: var(--green-tint); color: var(--green-ink); cursor: pointer; }
.dropzone.drag { background: var(--green-soft); }
.dropzone input[type=file] { max-width: 100%; }

/* ---- alerts ---- */
.alert { display: block; padding: .75rem 1rem; border-radius: var(--radius-sm); margin-bottom: 1rem; font-size: .92rem; border: 1px solid transparent; border-left-width: 4px; }
.alert a { font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.alert:has(> .icon), .alert:has(> div) { display: flex; gap: .6rem; align-items: flex-start; }
.alert > div { flex: 1; min-width: 0; }
.alert.success { background: var(--green-tint); color: var(--green-ink); border-color: #cfe7d7; border-left-color: var(--green); }
.alert.error { background: #fdf3f2; color: #7d1b13; border-color: #f4d0cc; border-left-color: var(--red); }
.alert.warning { background: #fdf7ea; color: #6b4600; border-color: #f2e0bb; border-left-color: var(--amber-mark); }
.alert.info { background: #f2f6fb; color: #1b4a75; border-color: #d3e2f1; border-left-color: var(--blue); }
.alert.info a { color: #1b4a75; }
.alert ul { margin: .25rem 0 0 1rem; padding: 0; }

/* ---- detail lists ---- */
.dl { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 0 1.5rem; font-size: .93rem; margin: 0; }
.dl > dt, .dl > dd { padding: .42rem 0; border-bottom: 1px solid var(--line-soft); }
.dl > dt:last-of-type, .dl > dd:last-of-type { border-bottom: 0; }
.dl dt { color: var(--muted); font-weight: 500; font-size: .88rem; }
.dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv { display: flex; gap: 2rem; flex-wrap: wrap; }
.progress { height: 8px; background: var(--grey-soft); border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--green-bright); }
.pill-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.timeline li:last-child { border-bottom: 0; }
.tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1.1rem; flex-wrap: wrap; }
.tabs a { padding: .65rem 0; border-bottom: 2px solid transparent; color: var(--muted); font-weight: 500; }
.tabs a.active { color: var(--green-ink); border-color: var(--green); }
.tabs a:hover { text-decoration: none; color: var(--ink); }

/* ---- sticky selection bar ---- */
.bulkbar { position: sticky; bottom: 0; z-index: 15; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0 -2rem -2.5rem; padding: .85rem 2rem; background: #2f3331; color: #fff; }
.bulkbar .muted { color: #c9d1cc; }
.bulkbar .btn { background: transparent; color: #fff; border-color: #6b726e; }
.bulkbar .btn.primary { background: var(--green); border-color: #3fae68; }

/* ---- status board (kanban-ish) ---- */
.board { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.board .col { background: var(--bg); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: .75rem; }
.board .col h3 { font: 600 .84rem var(--font); color: var(--slate); margin-bottom: .6rem; }
.board .item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .65rem .75rem; margin-bottom: .5rem; font-size: .9rem; }
.board .item .ref { font: .76rem var(--font-mono); color: var(--muted); }

/* ---- pagination ---- */
.pagination { display: flex; gap: .3rem; justify-content: flex-end; padding: .75rem 1rem; font-size: .85rem; align-items: center; }
.pagination a, .pagination span { min-width: 2rem; text-align: center; padding: .3rem .6rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); }
.pagination span.current { background: var(--green); color: #fff; border-color: var(--green); }
.pagination span.disabled { color: var(--muted); }
.pagination .info { border: 0; background: transparent; margin-right: auto; color: var(--muted); }
.pagination { flex-wrap: wrap; }
.pagination .per-page { display: flex; align-items: center; margin-right: .5rem; }
.pagination .per-page label { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); text-transform: none; }
.pagination .per-page select { width: auto; min-width: 4.2rem; padding: .25rem 1.6rem .25rem .5rem; font-size: .85rem; }

/* ---- line-item editors ---- */
table.lines td { padding: .35rem .4rem; }
table.lines input:not([type=checkbox]):not([type=radio]), table.lines select { width: 100%; min-height: 36px; padding: .35rem .5rem; border: 1px solid var(--input); border-radius: 6px; font: inherit; }
table.lines td.rm { width: 40px; text-align: center; }

/* ---- permissions matrix ---- */
.perm td, .perm th { vertical-align: middle; }
.perm .lvl { display: inline-flex; align-items: center; gap: .35rem; margin-right: .9rem; white-space: nowrap; font-size: .88rem; text-transform: capitalize; }
.perm .lvl.na { visibility: hidden; }
.perm tr.group td { background: var(--thead); font-size: .84rem; color: var(--slate); font-weight: 600; padding: .5rem 1rem; }

/* ---- signature pad ---- */
.sigpad { border: 1.5px dashed var(--green-line); border-radius: 10px; background: #fbfdfb; width: 100%; height: 160px; touch-action: none; }

/* ---- login ---- */
.login { display: flex; flex-wrap: wrap; min-height: 100vh; background: #fff; }
.login .panel { flex: 1 1 480px; position: relative; overflow: hidden; background: linear-gradient(100deg, #007a3e 0%, #008545 55%, #00924c 100%); color: #fff; padding: 3.5rem 4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2.5rem; }
.login .panel .eyebrow { font: 500 1.05rem var(--font-head); color: #d6eedd; letter-spacing: .01em; }
.login .panel h1 { color: #fff; font-size: 2.6rem; line-height: 1.12; max-width: 460px; text-transform: none; }
.login .panel p { color: rgba(255,255,255,.92); font-size: 1.05rem; line-height: 1.6; max-width: 460px; }
.login .panel .foot { font-size: .82rem; color: #bfe3cb; position: relative; }
.login .panel .sphere { position: absolute; right: -120px; bottom: -120px; width: 520px; height: 520px; opacity: .22; pointer-events: none; }
.login .formside { flex: 1 1 420px; background: var(--card); display: flex; align-items: center; justify-content: center; padding: 3rem 2rem; }
.login form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 1rem; }
.login form .logo { width: 220px; height: auto; margin-bottom: .75rem; }
.login .field input { min-height: 46px; font-size: 1rem; }
.login .btn.primary { min-height: 48px; font-size: 1rem; }
.login .note { font-size: .84rem; color: var(--muted); }

/* ---- print ---- */
.print-only { display: none; }
.doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid var(--green); padding-bottom: .75rem; margin-bottom: 1rem; }
.doc-head .co { font: 600 1.2rem var(--font-head); color: var(--green-ink); }
.doc-head .meta { text-align: right; font-size: .85rem; color: var(--muted); }
.doc-head .doc-logo { width: 190px; height: auto; display: block; margin-bottom: .35rem; }
.sig-box { border-top: 1px solid var(--ink); margin-top: 2.5rem; padding-top: .3rem; font-size: .8rem; }
/* Printing. A document card may run over several pages: it must never be kept in one piece (that pushed every
   document to page 2 and printed a blank first page). Small blocks — rows, signatures, the letterhead — stay whole. */
@page { size: A4; margin: 12mm 12mm 14mm; }
@media print {
  html { font-size: 12.6px; }
  body { background: #fff; color: #000; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .shell, .main { display: block !important; min-height: 0 !important; }
  .sidebar, .sidebar-backdrop, .topbar, .tabbar, .actions, .no-print, .pagination, .bulkbar, .doc-toolbar, .page-head .back { display: none !important; }
  .content { padding: 0 !important; max-width: none; }
  .card { box-shadow: none; border: 0; padding: 0; break-inside: auto; }
  .print-only { display: block; }
  thead { display: table-header-group; }
  tfoot { display: table-row-group; }
  tr, .sig-box, .doc-head, .wb-parties > div, .avoid-break { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}

/* ---- no sideways scrolling: pages use the full width and content wraps instead ---- */
img, video, canvas, iframe { max-width: 100%; }
/* Words stay whole; headers and badges wrap at spaces; long codes (MACs, serials) may break */
td, th { overflow-wrap: break-word; hyphens: manual; }

.mono, code { overflow-wrap: anywhere; }
td .input, td input:not([type=checkbox]):not([type=radio]), td textarea { min-width: 0; max-width: 100%; }
td select, td select.input { min-width: 8.5rem; max-width: 100%; }   /* readable choices; the table stacks if they don't fit */
td form, td details { max-width: 100%; }
td .form-grid { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); }
.perm td { white-space: normal; }
.actions, .card-head { flex-wrap: wrap; }
.card-head > * { min-width: 0; }

/* Laptop screens: narrower menu, tighter padding, fewer columns */
@media (max-width: 1360px) {
  .sidebar { width: 236px; flex-basis: 236px; }
  .content { padding: 1.25rem 1.4rem 2.2rem; }
  .topbar { padding-left: 1.4rem; padding-right: 1.4rem; }
  .bulkbar { margin: 0 -1.4rem -2.2rem; padding: .85rem 1.4rem; }
  th, td { padding: .55rem .6rem; }
  th:first-child, td:first-child { padding-left: 1rem; } th:last-child, td:last-child { padding-right: 1rem; }
  table { font-size: .88rem; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 > .span-2 { grid-column: 1 / -1; }
  /* a wide card plus one side card: the side card takes the full row instead of leaving half of it empty */
  .grid-3 > .span-2:first-child + :last-child { grid-column: 1 / -1; }
}
@media (max-width: 1120px) {
  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-3 > .span-2 { grid-column: auto; }
  /* two-panel pages laid out with an inline grid (Send Documents, Licences, Sent email) */
  .grid[style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ---- responsive ---- */
@media (max-width: 960px) {
  .grid-2, .grid-3, .grid-4, .form-grid, .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .sidebar { position: fixed; left: -320px; top: 0; z-index: 50; transition: left .2s; box-shadow: 0 0 24px rgba(0,0,0,.12); }
  .sidebar.open { left: 0; }
  .menu-toggle, .btn.menu-toggle { display: inline-flex; }
  .topbar { display: flex; }
  .sidebar { height: 100dvh; }
  .topbar { padding: .6rem max(16px, env(safe-area-inset-right, 0px)) .6rem max(16px, env(safe-area-inset-left, 0px)); }
  .topbar .user .who { display: none; }
  .topbar > .actions > strong { display: block; min-width: 0; }
  .topbar > .actions { flex-wrap: nowrap; min-width: 0; }
  .topbar .user form .btn { font-size: 0; gap: 0; padding: 0 .55rem; }
  .topbar .user form .btn .icon { font-size: .9rem; }
  h1 { font-size: 1.25rem; }
  .page-head { margin-bottom: 1rem; padding-bottom: .7rem; }
  .page-head > .actions { justify-content: flex-start; width: 100%; }
  .stat { flex-basis: 140px; padding: .7rem .85rem; }
  .stat .value { font-size: 1.2rem; }
  .filters .field { max-width: none; }
  .dl { grid-template-columns: 1fr; }
  .dl > dt { border-bottom: 0; padding-bottom: 0; }
  .dl > dd { padding-top: .1rem; }
  .content { padding: 1rem max(16px, env(safe-area-inset-right, 0px)) 2rem max(16px, env(safe-area-inset-left, 0px)); }
  .bulkbar { margin: 0 -16px -2rem; padding: .8rem 16px; }
  .login .panel { padding: 2.5rem 1.5rem; min-height: auto; }
  .login .panel h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* Stand-alone checkbox lines (remove employee, imports) */
label.check { display: flex; align-items: center; gap: .55rem; margin: .5rem 0; font-weight: 500; cursor: pointer; }
label.check input { accent-color: var(--green); margin: 0; }
fieldset.lease-fields legend { padding: 0 .35rem; font-weight: 600; }
fieldset[hidden] { display: none !important; }

/* ---- tables too wide for their card: rows become compact labelled blocks (set by app.js) ---- */
table.stacked thead { display: none; }
table.stacked, table.stacked tbody, table.stacked tfoot { display: block; width: 100%; }
table.stacked tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: .4rem 1.1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line-soft); }
table.stacked tr:last-child { border-bottom: 0; }
table.stacked tbody tr:hover td { background: transparent; }
table.stacked tfoot tr { background: var(--thead); }
table.stacked td, table.stacked th { display: block; padding: 0; border: 0; min-width: 0; text-align: left !important; white-space: normal !important; }
table.stacked td:first-child, table.stacked td[colspan], table.stacked td.full { grid-column: 1 / -1; }
table.stacked td[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: .76rem; font-weight: 500; color: var(--muted); margin-bottom: .05rem; }
table.stacked td:empty { display: none; }
table.stacked td select, table.stacked td select.input, table.stacked td .input, table.stacked td input:not([type=checkbox]):not([type=radio]) { min-width: 0; width: 100%; }
table.stacked.lines tr { padding: .6rem .4rem; }

/* ---- printed document header: NCC / ISO logos ---- */
.doc-head-right { display: flex; flex-direction: column; align-items: flex-end; gap: .6rem; }
.doc-accreditations { display: flex; gap: .9rem; align-items: flex-end; justify-content: flex-end; flex-wrap: wrap; }
.doc-accreditations figure { margin: 0; text-align: center; }
.doc-accreditations img { display: block; height: 52px; width: auto; max-width: 120px; object-fit: contain; margin: 0 auto; }
.doc-accreditations figcaption { font-size: .62rem; color: var(--muted); margin-top: .15rem; max-width: 130px; line-height: 1.2; }
.doc-acc-text { display: inline-block; border: 1px solid var(--line); border-radius: 6px; padding: .3rem .5rem; font-size: .68rem; font-weight: 600; color: var(--slate); max-width: 140px; line-height: 1.25; }
.esign-audit { margin-top: 1rem; padding: .6rem .8rem; border: 1px dashed var(--line); border-radius: 8px; font-size: .74rem; color: var(--muted); }
@media print { .doc-accreditations img { height: 46px; } }

/* ---- customer pages (e-signature) ---- */
.public-page { background: var(--bg); }
.public-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem max(16px, 2rem); background: var(--card); border-bottom: 3px solid var(--green); }
.public-top img { height: 56px; width: auto; }
.public-top span { font: 500 1rem var(--font-head); color: var(--slate); text-align: right; }
.public-main { max-width: 980px; margin: 0 auto; padding: 1.5rem max(16px, 1.5rem) 2.5rem; }
.public-foot { text-align: center; font-size: .78rem; color: var(--muted); padding: 1rem 16px 2rem; }
.sign-pad-wrap { border: 2px dashed var(--input); border-radius: 10px; background: #fff; position: relative; }
.sign-pad-wrap canvas { display: block; width: 100%; height: 190px; touch-action: none; cursor: crosshair; }
.sign-pad-wrap .hint { position: absolute; left: 1rem; bottom: .6rem; font-size: .78rem; color: var(--faint); pointer-events: none; }
@media print { .public-main { max-width: none; padding: 0; } }
.doc-head { flex-wrap: wrap; }
.doc-head > * { min-width: 0; }
@media (max-width: 640px) {
  .doc-head-right { align-items: flex-start; width: 100%; }
  .doc-head .meta, .doc-accreditations { text-align: left; justify-content: flex-start; }
  .public-top span { font-size: .85rem; }
}
@media (max-width: 640px) {
  .no-stack th, .no-stack td { padding: .45rem .4rem; overflow-wrap: anywhere; }
  .no-stack { overflow-x: auto; }
}
.doc-head > :first-child { flex: 1 1 300px; }
.doc-head > .doc-head-right { flex: 0 1 auto; }
.doc-acc-text { max-width: 190px; }

/* ---- Back button: compact, in the Greig Technologies wordmark grey ---- */
.btn.back { min-height: 26px; padding: 0 .55rem 0 .4rem; gap: .25rem; font-size: .78rem; font-weight: 600; border-radius: 5px; background: var(--brand-grey); border-color: var(--brand-grey); color: #fff; align-self: center; }
.btn.back .icon { color: #fff; width: 14px; height: 14px; }
.btn.back:hover { background: var(--brand-grey-dark); border-color: var(--brand-grey-dark); color: #fff; text-decoration: none; }
.btn.back:focus-visible { outline-color: var(--green-bright); }
@media print { .payslip-page { break-after: page; margin-bottom: 0 !important; } .payslip-page:last-child { break-after: auto; } }
/* small section titles inside cards (document pickers, histories) and group rows in tables */
.subhead { font: 600 .86rem var(--font); color: var(--slate); margin: 1rem 0 .4rem; text-transform: capitalize; letter-spacing: 0; }
td.group-row, tr.group-row td { background: var(--green-tint); font-size: .84rem; font-weight: 600; color: var(--green-ink); padding: .5rem 1rem; }
/* filters reloading the list */
.filters.is-loading, form.is-loading .filters { opacity: .6; pointer-events: none; transition: opacity .15s; }
@media (prefers-reduced-motion: reduce) { .filters.is-loading { transition: none; } }

/* ---- leave ---- */
.tabs a .badge { margin-left: .35rem; }
.leave-balances { display: grid; gap: .95rem; }
.lb-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.lb-label { font-weight: 600; color: var(--slate); font-size: .92rem; }
.lb-left { font-size: .86rem; color: var(--muted); }
.lb-left strong { font: 500 1.15rem var(--font-head); color: var(--ink); }
.lb-bar { display: flex; height: 8px; margin: .3rem 0 .2rem; background: var(--grey-soft); border-radius: 999px; overflow: hidden; }
.lb-taken { background: var(--green); }
.lb-pending { background: repeating-linear-gradient(135deg, var(--amber-mark) 0 4px, #f0c470 4px 8px); }
.leave-balances small { font-size: .8rem; }
.leave-balances.compact { gap: .75rem; }
.leave-balances.compact .lb-left strong { font-size: 1rem; }
fieldset.leave-types { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .6rem; }
fieldset.leave-types legend { grid-column: 1 / -1; margin-bottom: .35rem; padding: 0; }
.leave-type { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem .8rem; border: 1px solid var(--input); border-radius: var(--radius-sm); background: #fff; cursor: pointer; }
.leave-type:hover { border-color: var(--green-line); }
.leave-type:has(input:checked) { border-color: var(--green); background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--green); }
.leave-type input { margin-top: .2rem; }
.leave-type span { display: flex; flex-direction: column; gap: .1rem; }
.leave-type small { font-size: .8rem; line-height: 1.35; }
.leave-count { padding: .65rem .85rem; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--line-soft); font-size: .92rem; }
ol.steps { margin: 0; padding-left: 1.2rem; font-size: .9rem; }
ol.steps li { margin-bottom: .45rem; }
ul.plain { list-style: none; margin: 0; padding: 0; font-size: .88rem; }
ul.plain li { padding: .3rem 0; border-bottom: 1px solid var(--line-soft); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain li span { display: inline-block; min-width: 7.5rem; color: var(--muted); }
.leave-summary { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; padding-bottom: 1rem; margin-bottom: .6rem; border-bottom: 1px solid var(--line); }
.leave-summary .lbl { display: block; font-weight: 500; color: var(--muted); font-size: .82rem; margin-bottom: .1rem; }
.leave-summary strong { font: 500 1.08rem var(--font-head); color: var(--ink); }
ol.approval { list-style: none; margin: 0; padding: 0; }
ol.approval li { position: relative; display: grid; grid-template-columns: 11rem 1fr; gap: .2rem 1rem; padding: .5rem 0 .5rem 1.6rem; border-bottom: 1px solid var(--line-soft); font-size: .92rem; }
ol.approval li:last-child { border-bottom: 0; }
ol.approval li::before { content: ""; position: absolute; left: .2rem; top: .78rem; width: .7rem; height: .7rem; border-radius: 50%; border: 2px solid var(--input); background: #fff; }
ol.approval li.done::before { background: var(--green); border-color: var(--green); }
ol.approval li.now::before { background: var(--amber-mark); border-color: var(--amber-mark); }
ol.approval li.stop::before { background: var(--red); border-color: var(--red); }
ol.approval .ap-step { font-weight: 600; color: var(--slate); }
.decide { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
details.decide summary { cursor: pointer; color: var(--red); font-weight: 500; font-size: .9rem; }
details.decide form { margin-top: .6rem; }
@media (max-width: 640px) { ol.approval li { grid-template-columns: 1fr; } }

/* field engineers' availability grid */
.avail-scroll { overflow-x: auto; }
table.avail { font-size: .8rem; border-collapse: separate; border-spacing: 0; }
table.avail th, table.avail td { padding: 0; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
table.avail .avail-who { position: sticky; left: 0; z-index: 1; background: var(--card); padding: .45rem .9rem; min-width: 10rem; border-right: 1px solid var(--line); white-space: nowrap; font-size: .88rem; }
table.avail thead .avail-who { background: var(--thead); }
table.avail .avail-who small { display: block; font-weight: 400; color: var(--muted); font-size: .76rem; }
table.avail th.avail-day { text-align: center; min-width: 1.45rem; padding: .35rem 0; font-weight: 600; color: var(--slate); }
table.avail th.avail-day span { display: block; font-weight: 400; color: var(--faint); font-size: .7rem; }
table.avail th.avail-day.off { color: var(--faint); }
table.avail th.avail-day.today { box-shadow: inset 0 -3px 0 var(--green); color: var(--green-ink); }
table.avail td.num, table.avail th.num { padding: 0 .8rem; }
.avail-cell { height: 2.1rem; border-left: 1px solid #fff; }
.avail-cell a { display: block; width: 100%; height: 2.1rem; }
.s-free { background: #eaf5ee; }
.s-off { background: #f1f3f2; }
.s-leave { background: repeating-linear-gradient(135deg, #f2c35d 0 5px, #f8d98f 5px 10px); }
.s-pending { background: repeating-linear-gradient(135deg, #fbe9c4 0 5px, #fff 5px 10px); box-shadow: inset 0 0 0 1px #ecd09a; }
.s-job { background: #c9dcf0; }
.s-trip { background: var(--green); }
.s-clash { background: repeating-linear-gradient(135deg, #e48a80 0 5px, #f6c8c3 5px 10px); }
.avail-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding: .7rem 1rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--slate); }
.avail-legend i { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: .35rem; border: 1px solid rgba(0,0,0,.08); }

/* ---- show / hide password ---- */
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 2.9rem !important; }
.pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 34px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); background: var(--grey-soft); }
.pw-toggle[aria-pressed="true"] { color: var(--green-ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--green-bright); outline-offset: 0; }
@media (max-width: 640px) {
  .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; scrollbar-width: none; }
  .tabs a { white-space: nowrap; }
}
.field label.check { text-transform: none; }

/* ---- dashboard: panels in a six-column grid; each person can move, hide and resize tiles and panels ---- */
.dash-panels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }
.dash-panel { position: relative; min-width: 0; grid-column: span 6; }
.dash-panel > .card { margin-bottom: 0; }
.dash-panel.w-wide { grid-column: span 4; }
.dash-panel.w-half { grid-column: span 3; }
.dash-panel.w-third { grid-column: span 2; }
[data-hidden] { display: none !important; }
@media (max-width: 1360px) { .dash-panel.w-third { grid-column: span 3; } .dash-panel.w-wide { grid-column: span 6; } }
@media (max-width: 960px) { .dash-panel.w-wide, .dash-panel.w-half, .dash-panel.w-third { grid-column: span 6; } }

.dash-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin-bottom: 1rem; padding: .7rem 1rem; border: 1px dashed var(--green-line); border-radius: var(--radius); background: var(--green-tint); font-size: .9rem; }
.dash-bar p { margin: 0; max-width: 75ch; }
.btn[data-dash-arrange]:not(.primary)[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green-line); color: var(--green-ink); }

/* arranging */
.dash-editing [data-hidden] { display: block !important; opacity: .45; }
.dash-editing .dash-panel[data-hidden] { display: block !important; }
.dash-editing .stat, .dash-editing .dash-panel > .card { outline: 1px dashed var(--green-line); outline-offset: -1px; }
.dash-editing .stat { padding-top: 2.1rem; cursor: grab; }
.dash-editing .dash-panel > .card { padding-top: 2.6rem; }
.dash-editing .dash-panel > .card.tight { padding-top: 2.4rem; }
.dash-editing a { -webkit-user-drag: none; user-select: none; }
.dash-ctl { display: none; }
.dash-editing .dash-ctl { position: absolute; top: .35rem; left: .45rem; right: .45rem; z-index: 3; display: flex; align-items: center; gap: .25rem; }
.dash-ctl .grip { display: grid; place-items: center; width: 28px; height: 26px; border-radius: 5px; color: var(--slate); cursor: grab; touch-action: none; }
.dash-ctl .grip:hover { background: var(--grey-soft); }
.dash-ctl button { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 .3rem; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--slate); cursor: pointer; font: 600 .74rem var(--font); }
.dash-ctl button:hover { border-color: var(--green-line); color: var(--ink); }
.dash-ctl .spacer { flex: 1; }
.dash-ctl button[aria-pressed="true"] { background: var(--slate); border-color: var(--slate); color: #fff; }
.dash-ctl .icon { width: 14px; height: 14px; }
.dash-dragging { opacity: .55; outline: 2px solid var(--green) !important; }
body.dash-drag-active, body.dash-drag-active * { cursor: grabbing !important; user-select: none; }
@media print { .dash-ctl, .dash-bar { display: none !important; } }
/* login on phones: the sign-in form comes first; the green panel shrinks to a short band below it */
@media (max-width: 640px) {
  .login { flex-direction: column-reverse; }
  .login .formside { padding: 2rem 1.25rem 1.5rem; align-items: flex-start; flex: 1 0 auto; }
  .login form .logo { width: 180px; }
  .login .panel { flex: 0 0 auto; padding: 1.4rem 1.25rem; gap: .6rem; }
  .login .panel h1 { font-size: 1.35rem; margin: 0; }
  .login .panel p { display: none; }
  .login .panel .sphere { width: 260px; height: 260px; right: -70px; bottom: -110px; }
}
.dash-notice { flex-basis: 100%; margin: 0; color: var(--red); font-weight: 500; }

/* ---- Payroll: take home ---- */
td.take-home strong { color: var(--ink); }
td.take-home small { white-space: nowrap; }
.pay-calc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin: 0; }
.pay-calc > div { background: var(--thead); border: 1px solid var(--line); border-radius: 10px; padding: .7rem .85rem; min-width: 0; }
.pay-calc dt { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: capitalize; margin: 0 0 .25rem; }
.pay-calc dd { margin: 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pay-calc > div.net { background: var(--green-soft); border-color: transparent; }
.pay-calc > div.net dd { font-size: 1.25rem; color: var(--green); }
.pay-summary.negative .pay-calc > div.net { background: var(--red-soft, #fdecec); }
.pay-summary.negative .pay-calc > div.net dd { color: var(--red); }
@media (max-width: 1100px) { .pay-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .pay-calc > div { padding: .6rem .7rem; } .pay-calc dd { font-size: .95rem; } .pay-calc > div.net { grid-column: 1 / -1; } }

/* ---- Project documents ---- */
.proj-docs td { vertical-align: top; }
.doc-file { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .6rem; padding: .2rem 0; }
.doc-file + .doc-file { border-top: 1px dashed var(--line); padding-top: .35rem; margin-top: .15rem; }
.doc-file a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.doc-file small { color: var(--muted); }
.doc-file.older a { font-weight: 400; color: var(--muted); }
.doc-file form { margin-left: auto; }
.btn.doc-remove { color: var(--faint); }
.btn.doc-remove:hover { color: var(--red); }
.doc-upload { display: inline-block; text-align: left; }
.doc-upload[open] summary { margin-bottom: .45rem; }
.doc-upload form { display: flex; flex-direction: column; gap: .45rem; min-width: 220px; }
.doc-upload input[type=file] { max-width: 260px; font-size: .82rem; }
.doc-add { padding: 1rem 1.3rem; border-top: 1px solid var(--line); }
.doc-add h3 { margin-bottom: .7rem; }
@media (max-width: 640px) {
  .proj-docs thead { display: none; }
  .proj-docs, .proj-docs tbody, .proj-docs tr, .proj-docs td { display: block; width: 100%; }
  .proj-docs tr { border-bottom: 1px solid var(--line); padding: .55rem 0; }
  .proj-docs td { border: 0; padding: .2rem 1rem; }
  .proj-docs td.actions-cell { text-align: left; white-space: normal; }
  .doc-file form { margin-left: auto; }
  .doc-upload form { min-width: 0; }
}
.form-docs { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem 1rem; margin: 1.2rem 0 0; background: var(--thead); }
.form-docs legend { font-weight: 600; padding: 0 .4rem; color: var(--ink); }
.form-docs > p { margin: 0 0 .8rem; font-size: .86rem; }
.form-docs input[type=file] { width: 100%; font-size: .85rem; }

/* ---- Document store & under processing ---- */
.processing-box { border: 1px dashed var(--line); border-radius: var(--radius-sm); padding: .6rem .8rem; background: var(--thead); }
.processing-box .form-grid { margin-top: .5rem; }
.store-link { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; color: var(--muted); }
.store-link:hover { color: var(--green-ink); }
.doc-versions { margin-top: .3rem; }
.doc-versions summary { cursor: pointer; font-size: .8rem; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: .25rem; }
.doc-versions summary::-webkit-details-marker { display: none; }
.doc-versions ul { margin: .35rem 0 0; padding: 0 0 0 .2rem; list-style: none; font-size: .82rem; }
.doc-versions li { padding: .15rem 0; }
.readiness td.doc-cell { white-space: nowrap; }
.readiness td.doc-cell small { color: var(--muted); }


/* ---- Waybill print ---- */
.wb-parties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; font-size: .88rem; line-height: 1.45; }
.wb-parties > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .6rem .75rem; }
.wb-h { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .25rem; }
@media (max-width: 760px) { .wb-parties { grid-template-columns: 1fr; } }
.wb-sigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.6rem; }
@media (max-width: 600px) { .wb-sigs { grid-template-columns: 1fr; } }
@media print { .wb-parties, .wb-sigs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- Mobilisation journey legs ---- */
table.lines.legs { table-layout: fixed; min-width: 900px; }

/* ---- Monthly expense return ---- */
.return-mine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; border-left: 4px solid var(--amber-mark); }
.return-mine.claims, .return-mine.nil { border-left-color: var(--green); }
.tight-list { margin: 0; padding-left: 1.1rem; font-size: .88rem; display: grid; gap: .45rem; }

/* ---- Procurement ---- */
.quote-compare td.best { background: var(--green-soft); color: var(--green-ink); font-weight: 600; }
.quote-compare th, .quote-compare td { white-space: nowrap; }
.quote-compare td:first-child { white-space: normal; min-width: 14rem; }
.quote-actions { display: flex; gap: .3rem; justify-content: flex-end; margin-top: .4rem; flex-wrap: wrap; }
.quote-actions form { display: inline; }
.portal-wrap { max-width: 1000px; margin: 0 auto; display: grid; gap: 1.25rem; }
.portal-po { border-left: 4px solid var(--green); }
.portal-invoice { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.vi-actions form { display: grid; gap: .35rem; min-width: 190px; }
.vi-actions input[type=text], .vi-actions input[type=date] { width: 100%; }
.vi-actions details { margin-top: .4rem; }

/* ---- Budgets ---- */
.budget-bar { height: 8px; border-radius: 4px; background: var(--grey-soft); overflow: hidden; margin-bottom: .15rem; }
.budget-bar span { display: block; height: 100%; background: var(--green); }
.budget-bar.near span { background: var(--amber-mark); }
.budget-bar.over span { background: var(--red); }
td.neg { color: var(--red); }
tr.current-month td { background: var(--green-tint); }
.budget-grid { min-width: max-content; }
.budget-grid td, .budget-grid th { white-space: nowrap; }
.budget-grid input[data-month] { width: 7.5rem; text-align: right; }
.budget-grid .amt { display: flex; align-items: center; gap: .15rem; }
.budget-grid .sticky-col { position: sticky; left: 0; background: var(--card); z-index: 1; }
.budget-grid thead .sticky-col, .budget-grid tfoot .sticky-col { background: var(--thead); }
.budget-grid select { min-width: 12rem; }
.budget-grid input[type=text] { min-width: 12rem; }

/* ---- Small drop-down forms on page actions (e.g. bank payment file) ---- */
.inline-menu { position: relative; display: inline-block; }
.inline-menu > summary { list-style: none; }
.inline-menu > summary::-webkit-details-marker { display: none; }
.inline-menu .menu-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 320px; max-width: calc(100vw - 32px); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 10px 30px rgba(20, 30, 25, .14); padding: .9rem 1rem; text-align: left; white-space: normal; }
.bulkpay { display: flex; flex-wrap: wrap; gap: .6rem .75rem; align-items: flex-end; padding: .8rem 1.25rem; border-top: 1px solid var(--line); background: var(--thead); }
.bulkpay .field { min-width: 160px; }
tr.subtotal th { background: var(--thead); font-size: .86rem; border-top: 1px solid var(--line); }
.bulkpay form.inline { display: inline-flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.pfa-edit { padding: .8rem 0 .2rem; }
/* ---- Approval steps (payroll) ---- */
.flow-steps { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; counter-reset: step; }
.flow-steps li { counter-increment: step; display: flex; align-items: center; gap: .45rem; padding: .35rem .8rem .35rem .4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-size: .84rem; color: var(--muted); }
.flow-steps li::before { content: counter(step); display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--grey-soft); font-size: .75rem; font-weight: 600; }
.flow-steps li.done { color: var(--green-ink); }
.flow-steps li.done::before { content: "✓"; background: var(--green-soft); color: var(--green-ink); }
.flow-steps li.current { border-color: var(--green); color: var(--ink); font-weight: 600; }
.flow-steps li.current::before { background: var(--green); color: #fff; }

/* Dashboard: greeting line, "Waiting On You" queue list, "Field Team Today" */
.page-sub { margin: .2rem 0 0; color: var(--muted); font-size: .95rem; }
.queue-list { list-style: none; margin: 0; padding: 0; }
.queue-list li + li { border-top: 1px solid var(--line-soft); }
.queue-list a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem 1.25rem; color: var(--ink); }
.queue-list a:hover { text-decoration: none; background: var(--green-tint); }
.queue-list .q { min-width: 0; }
.queue-list .q strong { display: block; font-weight: 600; font-size: .92rem; }
.queue-list .q small { color: var(--muted); }
.queue-list .n { flex: none; min-width: 2rem; padding: .1rem .55rem; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font: 600 .95rem/1.5 var(--font-head); text-align: center; font-variant-numeric: tabular-nums; }
.all-clear { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 1rem 1.25rem; color: var(--green-ink); }
.today-free { margin: 0; padding: .7rem 1.25rem .85rem; font-size: .88rem; color: var(--muted); }
.today-free strong { color: var(--ink); font-weight: 600; }

/* ---- Dashboard design pass: the letterhead masthead with an orbit line, a fluid tile strip and quieter panels.
   Everything is scoped to .page-dashboard so other pages keep their look. ---- */
.page-dashboard { --dash-gap: clamp(.9rem, .55rem + 1vw, 1.5rem); --lift: 0 1px 2px rgba(13, 60, 32, .05), 0 10px 28px -18px rgba(13, 60, 32, .28); }
.dash-hero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  min-height: clamp(11rem, 9rem + 5vw, 13.5rem); padding: clamp(1.25rem, .9rem + 1.2vw, 2rem) clamp(1.25rem, .8rem + 1.8vw, 2.5rem) 4.6rem;
  border-radius: 20px; overflow: hidden; color: #fff;
  background: linear-gradient(100deg, #007a3e 0%, #008545 55%, #00924c 100%); }
.dash-mark { position: absolute; z-index: -1; right: clamp(-2rem, 6vw - 4rem, 3rem); top: 44%; width: clamp(12rem, 7rem + 11vw, 17.5rem); height: auto;
  transform: translateY(-50%) rotate(-12deg); opacity: .8; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .3)); pointer-events: none; user-select: none; }
.dash-hero::after { content: ''; position: absolute; z-index: -1; inset: auto -10% -60% 35%; height: 120%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .1), transparent); pointer-events: none; }
.dash-hero-text { position: relative; min-width: 0; max-width: min(60ch, 68%); }
.dash-hero h1 { margin: 0; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.75rem); font-weight: 500; letter-spacing: -.01em; line-height: 1.15; color: #fff; }
.dash-date { margin: .35rem 0 0; font: 500 .92rem var(--font-head); color: #bfe6cd; letter-spacing: .01em; }
.dash-brief { margin: .6rem 0 0; font-size: .98rem; color: rgba(255, 255, 255, .88); }
.dash-hero > .actions { position: relative; }
.dash-hero .btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; backdrop-filter: blur(6px); }
.dash-hero .btn:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.dash-hero .btn[data-dash-arrange][aria-pressed="true"] { background: #fff; border-color: #fff; color: var(--green-ink); }
@media (prefers-reduced-motion: no-preference) {
  .dash-mark { animation: dash-mark-in 1.1s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes dash-mark-in { from { opacity: 0; transform: translateY(-50%) rotate(-40deg) scale(.9); } to { opacity: .8; transform: translateY(-50%) rotate(-12deg) scale(1); } }

/* Tiles: a single row that rides up over the bottom of the masthead; on narrow screens it scrolls sideways. */
.page-dashboard .dash-tiles { position: relative; z-index: 2; display: flex; flex-wrap: nowrap; gap: .75rem; margin: -3.65rem clamp(.75rem, .4rem + 1vw, 1.25rem) calc(var(--dash-gap) - .35rem);
  padding: .25rem .1rem .6rem; background: none; border: 0; border-radius: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.page-dashboard .stat { flex: 1 1 0; display: flex; flex-direction: column; min-width: 7.6rem; padding: .85rem .9rem .95rem; border-radius: 14px; background: var(--card);
  border: 1px solid var(--line-soft); box-shadow: var(--lift); scroll-snap-align: start; transition: border-color .15s ease, transform .15s ease; }
.page-dashboard a.stat:hover { background: var(--card); border-color: var(--green-line); transform: translateY(-2px); }
.tile-ico { display: grid; place-items: center; width: 2rem; height: 2rem; margin-bottom: .55rem; border-radius: 9px; background: var(--green-soft); color: var(--green-ink); }
.page-dashboard .stat .label { order: 3; font-size: .8rem; line-height: 1.3; color: var(--muted); min-height: 2.1em; }
.page-dashboard .stat .value { order: 2; margin: 0 0 .15rem; font-size: clamp(1.6rem, 1.3rem + .8vw, 2rem); line-height: 1.05; letter-spacing: -.01em; }
.page-dashboard .stat .sub { order: 4; margin-top: .15rem; font-size: .76rem; }
.page-dashboard .stat.warn { box-shadow: var(--lift); border-color: #f0d9a8; background: linear-gradient(180deg, #fffaf0, var(--card) 60%); }
.page-dashboard .stat.warn .tile-ico { background: var(--amber-soft); color: var(--amber); }
.page-dashboard .stat.danger .tile-ico { background: var(--red-soft); color: var(--red); }
@media (prefers-reduced-motion: reduce) { .page-dashboard a.stat:hover { transform: none; } }

/* Panels: softer frames, hairline heads, rows that answer the pointer. */
.page-dashboard .dash-panels { gap: var(--dash-gap); }
.page-dashboard .dash-panel > .card { border-color: var(--line-soft); border-radius: 14px; box-shadow: var(--lift); }
.page-dashboard .dash-panel > .card.tight .card-head { padding: .95rem 1.25rem .8rem; border-bottom-color: var(--line-soft); }
.page-dashboard .dash-panel .card-head h2, .page-dashboard .dash-panel .card-head h3 { font-size: 1.08rem; font-weight: 500; color: var(--ink); margin: 0; }
.page-dashboard .dash-panel th { background: transparent; color: var(--faint); font-size: .76rem; font-weight: 500; border-bottom-color: var(--line-soft); padding-top: .7rem; padding-bottom: .5rem; }
.page-dashboard .dash-panel td { border-bottom-color: var(--line-soft); }
.page-dashboard .dash-panel tbody tr:last-child td { border-bottom: 0; }
.page-dashboard .dash-panel tbody tr:hover td { background: var(--green-tint); }
.page-dashboard .dash-panel .group-row, .page-dashboard .dash-panel tr:hover .group-row { background: var(--thead); }
.page-dashboard .alert { border-radius: 12px; }

/* Project board columns as lanes. */
.page-dashboard .board { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .85rem; }
.page-dashboard .board .col { background: var(--bg); border: 0; border-radius: 12px; padding: .8rem .75rem .35rem; }
.page-dashboard .board .col h3 { font: 500 .86rem var(--font-head); color: var(--slate); }
.page-dashboard .board .item { border-color: var(--line-soft); border-radius: 10px; padding: .75rem .8rem; transition: border-color .15s ease; }
.page-dashboard .board .item:hover { border-color: var(--green-line); }
.page-dashboard .board .progress { height: 5px; }

/* Field Team Today: the whole team as one bar, then who is where. */
.team-today { padding: .95rem 1.25rem .85rem; border-bottom: 1px solid var(--line-soft); }
.team-bar { display: flex; gap: 3px; height: 10px; margin-bottom: .7rem; }
.team-bar span { flex: 1 1 0; min-width: 6px; border-radius: 999px; }
.team-bar .trip, .team-legend .trip i { background: var(--blue); }
.team-bar .job, .team-legend .job i { background: var(--green-bright); }
.team-bar .leave, .team-legend .leave i { background: #b9c1bc; }
.team-bar .available, .team-legend .available i { background: var(--green-soft); box-shadow: inset 0 0 0 1px var(--green-line); }
.team-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: 0; padding: 0; list-style: none; font-size: .86rem; color: var(--muted); }
.team-legend li { display: flex; align-items: center; gap: .4rem; }
.team-legend i { width: .65rem; height: .65rem; border-radius: 3px; }
.team-legend b { font: 600 .98rem var(--font-head); color: var(--ink); }

@media (max-width: 640px) {
  .dash-hero-text { max-width: none; }
  .dash-hero { border-radius: 16px; padding-bottom: 4.4rem; }
  .dash-mark { width: 12rem; right: -3.5rem; top: 40%; opacity: .45; }
  .page-dashboard .dash-tiles { margin-inline: .5rem; }
  .page-dashboard .stat { flex: 0 0 8.4rem; min-width: 8.4rem; }
  /* Narrow screens: drop the secondary columns so the tables fit without sideways scrolling. */
  .page-dashboard [data-panel="jobs"] :is(th, td):is(:nth-child(3), :nth-child(4)),
  .page-dashboard [data-panel="mobilisations"] :is(th, td):is(:nth-child(4), :nth-child(5)) { display: none; }
}
@media print { .dash-mark { display: none; } .dash-hero { color: var(--ink); background: none; border-bottom: 2px solid var(--green); } .dash-hero h1 { color: var(--ink); } .page-dashboard .dash-tiles, .page-dashboard .dash-panel > .card { box-shadow: none; } }
.page-dashboard.dash-editing .stat { padding-top: 2.1rem; }
.page-dashboard.dash-editing .dash-tiles { margin-top: 0; overflow: visible; flex-wrap: wrap; }

/* ---- Customers, CRM style: account cards, the account header, sites with their installed equipment, a history timeline ---- */
.crm-totals { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 1.1rem; border: 1px solid var(--line-soft); border-radius: 14px; overflow: hidden; background: var(--card); }
.crm-totals > * { flex: 1 1 9rem; min-width: 0; outline: 1px solid var(--line-soft); outline-offset: -.5px; display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1.05rem; background: var(--card); color: var(--ink); }
.crm-totals > a:hover { text-decoration: none; background: var(--green-tint); color: var(--ink); }
.crm-totals b { font: 500 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.1 var(--font-head); color: var(--slate); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.crm-totals span { font-size: .8rem; color: var(--muted); text-transform: capitalize; }
.crm-totals em { display: block; font-style: normal; color: var(--faint); text-transform: none; }
.crm-totals .warn { box-shadow: inset 0 3px 0 var(--amber-mark); } .crm-totals .warn b { color: var(--amber); }
.crm-totals .bad { box-shadow: inset 0 3px 0 var(--red); } .crm-totals .bad b { color: var(--red); }

.crm-avatar { display: grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: linear-gradient(140deg, var(--green-bright), var(--green-dark)); color: #fff; font: 600 .95rem var(--font-head); letter-spacing: .02em; }
.crm-avatar.lg { width: 3.6rem; height: 3.6rem; border-radius: 16px; font-size: 1.3rem; }
.crm-avatar.sm { width: 2rem; height: 2rem; border-radius: 50%; font-size: .8rem; background: var(--green-soft); color: var(--green-ink); }

.crm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr)); gap: 1rem; margin-bottom: 1rem; }
.crm-card { display: flex; flex-direction: column; gap: .85rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line-soft); border-radius: 14px; transition: border-color .15s ease; }
.crm-card:hover { border-color: var(--green-line); }
.crm-card > header { display: flex; align-items: flex-start; gap: .75rem; }
.crm-name { flex: 1; min-width: 0; }
.crm-name h2 { margin: 0; font-size: 1.05rem; line-height: 1.25; }
.crm-name h2 a { color: var(--ink); }
.crm-name small { display: block; margin-top: .1rem; }
.crm-flags { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; justify-content: flex-end; }
.crm-figures { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: .6rem 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.crm-figures > div { padding: 0 .65rem; min-width: 0; }
.crm-figures > div + div { border-left: 1px solid var(--line-soft); }
.crm-figures > div:first-child { padding-left: 0; }
.crm-figures dt { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-figures dd { margin: .1rem 0 0; font: 500 1.2rem/1.1 var(--font-head); color: var(--slate); white-space: nowrap; }
.crm-figures dd.hot { color: var(--amber); } .crm-figures dd.owed { color: var(--red); }
.crm-sites { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.crm-sites li { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .25rem .2rem .6rem; border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; }
.crm-sites li span { min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--green-soft); color: var(--green-ink); font-size: .74rem; font-weight: 600; text-align: center; }
.crm-sites li.more { padding-right: .6rem; border-style: dashed; }
.crm-none { margin: 0; font-size: .85rem; color: var(--faint); }
.crm-card > footer { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--line-soft); font-size: .8rem; color: var(--muted); }
.crm-health { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; }
.crm-health > span { display: inline-flex; align-items: center; gap: .3rem; }
.dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--faint); vertical-align: .05em; }
.dot.on { background: var(--green-bright); box-shadow: 0 0 0 3px var(--green-soft); }
.dot.off { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.dot.warn { background: var(--amber-mark); box-shadow: 0 0 0 3px var(--amber-soft); }
.crm-health .dot + * { margin-right: .25rem; }
.crm-unmatched { font-weight: 600; color: var(--amber); }
.crm-last { margin-left: auto; }

.crm-account { display: flex; gap: 1.1rem; align-items: flex-start; margin-bottom: 1rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line-soft); border-radius: 16px;
  background: linear-gradient(115deg, var(--green-tint), var(--card) 55%); }
.crm-account-main { flex: 1; min-width: 0; }
.crm-account .crm-flags { justify-content: flex-start; margin-bottom: .55rem; }
.crm-reach { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0; padding: 0; list-style: none; font-size: .9rem; }
.crm-reach li { display: inline-flex; align-items: center; gap: .4rem; min-width: 0; }
.crm-reach .icon { color: var(--green-ink); }
.page-crm .tabs a { display: inline-flex; align-items: center; }

.crm-overview { display: grid; grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); gap: 1.25rem; align-items: start; }
.crm-overview .card { margin-bottom: 1.25rem; }
.crm-callout { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: .9rem 1.25rem 0; padding: .7rem .9rem; border-radius: 10px; background: var(--amber-soft); color: #6b4600; font-size: .9rem; }
.crm-callout > span { flex: 1 1 18rem; }
.crm-callout .icon { color: var(--amber-mark); }
.crm-sitegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .85rem; padding: .9rem 1.25rem 1.25rem; }
.crm-site { display: flex; flex-direction: column; gap: .55rem; padding: .85rem .95rem; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card); }
.crm-site > header { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.crm-site h3 { margin: 0; font-size: 1rem; }
.crm-site-health { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; font-size: .82rem; color: var(--muted); }
.crm-site-health .count b { font: 500 1.1rem var(--font-head); color: var(--ink); margin-right: .15rem; }
.crm-site-health i.dot { margin-right: .3rem; }
.crm-site-health .src { margin-left: auto; padding: .05rem .45rem; border-radius: 5px; background: var(--blue-soft); color: var(--blue); font-size: .74rem; font-weight: 600; }
.crm-site-kit { margin: 0; font-size: .84rem; color: var(--slate); }
.crm-chips, .crm-jobs { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.crm-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.crm-chips li { padding: .15rem .55rem; border-radius: 8px; background: var(--green-soft); color: var(--green-ink); }
.crm-jobs li { padding: .3rem 0; border-top: 1px dashed var(--line); }
.crm-jobs .badge { margin-left: .25rem; }
.crm-people { list-style: none; margin: 0; padding: .35rem 0; }
.crm-people li { display: flex; gap: .7rem; padding: .6rem 1.25rem; }
.crm-people li + li { border-top: 1px solid var(--line-soft); }
.crm-people div { min-width: 0; }
.crm-people small { display: block; overflow-wrap: anywhere; }
.crm-balance { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; margin: 0; padding: .9rem 1.25rem; }
.crm-balance.wide { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); border-bottom: 1px solid var(--line-soft); }
.crm-balance dt { font-size: .76rem; color: var(--muted); }
.crm-balance dd { margin: 0; font-family: var(--font-head); font-size: 1.05rem; }
.crm-balance dd.owed { color: var(--red); }
.crm-sitecard .card-head small { display: block; margin-top: .15rem; font-weight: 400; }
.crm-sitecard .card-head h2 .badge { vertical-align: .2em; }
.crm-allclear { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 1rem 1.25rem; color: var(--green-ink); }
.crm-matchbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; padding: .9rem 1.25rem; border-top: 1px solid var(--line-soft); background: var(--thead); }
.crm-matchbar .field { flex: 0 1 20rem; margin: 0; }
.crm-matchbar.muted { margin: 0; }
.crm-gone summary { cursor: pointer; list-style: none; }
.crm-gone summary::-webkit-details-marker { display: none; }
.crm-addcontact { padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--thead); }
.crm-addcontact h3 { margin: 0 0 .6rem; }
.crm-addcontact .form-actions { margin-top: .5rem; padding-top: .5rem; border: 0; }

.crm-timeline { list-style: none; margin: 0; padding: .5rem 1.25rem 1rem; position: relative; }
.crm-timeline li { position: relative; display: flex; gap: .8rem; align-items: flex-start; padding: .55rem 0; }
.crm-timeline li::before { content: ''; position: absolute; left: .95rem; top: 2.4rem; bottom: -.55rem; width: 1px; background: var(--line); }
.crm-timeline li:last-child::before { display: none; }
.crm-tl-icon { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--green-soft); color: var(--green-ink); position: relative; z-index: 1; }
.crm-tl-body { flex: 1; min-width: 0; }
.crm-tl-title { font-size: .9rem; overflow-wrap: anywhere; }
.crm-tl-body small { display: block; }
.crm-tl-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: none; font-size: .8rem; color: var(--muted); text-align: right; }
.crm-timeline.compact .crm-tl-title { font-size: .86rem; }

@media (max-width: 1100px) { .crm-overview { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .crm-account { flex-direction: column; gap: .75rem; padding: 1rem; }
  .crm-reach { flex-direction: column; gap: .35rem; }
  .crm-last { margin-left: 0; }
  .crm-sitegrid { padding: .75rem; }
  .crm-tl-meta { font-size: .74rem; }
  .page-crm .tabs { flex-wrap: nowrap; overflow-x: auto; gap: 1.1rem; scrollbar-width: none; }
  .page-crm .tabs a { flex: none; white-space: nowrap; }
}
.perm-lock { color: var(--amber); }
.perm-lock .icon { vertical-align: -.15em; }

/* Customer logo or initials badge, in five brand-friendly tones so neighbouring customers are easy to tell apart. */
.crm-avatar.t0 { background: linear-gradient(140deg, var(--green-bright), var(--green-dark)); }
.crm-avatar.t1 { background: linear-gradient(140deg, #2f7f86, #1d5258); }
.crm-avatar.t2 { background: linear-gradient(140deg, #3d74ad, #1d4f80); }
.crm-avatar.t3 { background: linear-gradient(140deg, #5c6460, #363b38); }
.crm-avatar.t4 { background: linear-gradient(140deg, #a8742a, #7a4f12); }
.crm-avatar.logo { background: #fff; border: 1px solid var(--line); padding: .25rem; overflow: hidden; }
.crm-avatar.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.crm-avatar.logo.lg { padding: .4rem; }
.crm-mark-col { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: none; }
.crm-mark-col .btn.link { font-size: .74rem; padding: .1rem .2rem; }
.crm-logo-edit { display: flex; align-items: center; gap: .8rem; }
.crm-logo-preview { width: 3rem; height: 3rem; object-fit: contain; padding: .25rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.check-inline { display: inline-flex; align-items: center; gap: .4rem; margin-top: .35rem; font-size: .86rem; text-transform: none; }

/* Outstanding balance: one line, label left and amount right. */
.crm-owed { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .55rem .75rem; border-radius: 10px; background: var(--bg); white-space: nowrap; }
.crm-owed span { font-size: .8rem; color: var(--muted); }
.crm-owed strong { font: 500 1.05rem var(--font-head); color: var(--slate); overflow: hidden; text-overflow: ellipsis; }
.crm-owed.due { background: var(--red-soft); } .crm-owed.due strong { color: var(--red); }
.crm-owed.clear strong { font: 500 .88rem var(--font); color: var(--green-ink); }
.crm-totals > .wide { flex: 3 1 20rem; }
.crm-totals .money .amounts b { font-size: clamp(1.1rem, .95rem + .45vw, 1.35rem); }
.crm-totals .money { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem 1.5rem; background: var(--thead); }
.crm-totals .money > span { font-size: .86rem; color: var(--slate); font-weight: 500; }
.crm-totals .money .amounts { display: flex; flex-wrap: wrap; gap: .4rem 0; }
.crm-totals .money .cur { display: inline-flex; align-items: baseline; gap: .5rem; padding: .1rem 1.1rem; border-left: 1px solid var(--line); }
.crm-totals .money .cur:first-child { border-left: 0; }
.crm-totals .money .cur:last-child { padding-right: 0; }
.crm-totals .money .cur em { font: 600 .7rem var(--font); font-style: normal; letter-spacing: .04em; color: var(--muted); padding: .1rem .4rem; border-radius: 5px; background: var(--card); border: 1px solid var(--line-soft); }
.crm-totals .money .amounts b { white-space: nowrap; }
.crm-totals a.wide b, .crm-totals a.wide em { white-space: nowrap; }

.crm-inactive { display: flex; align-items: center; gap: .4rem; margin: -.3rem 0 0; font-size: .8rem; color: var(--muted); }
.crm-card.inactive { opacity: 1; background: var(--thead); }
.crm-card.inactive .crm-avatar { filter: grayscale(1); opacity: .7; }
.crm-inactive-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid #f2e0bb; border-left: 4px solid var(--amber-mark); border-radius: 12px; background: #fdf7ea; color: #6b4600; font-size: .92rem; }
.crm-inactive-bar > span { flex: 1 1 20rem; }
@media (max-width: 640px) {
  .crm-totals > * { flex-basis: 40%; }
  .crm-totals > .wide { flex-basis: 100%; }
  .crm-totals .money .amounts { flex-direction: column; width: 100%; gap: 0; }
  .crm-totals .money .cur { padding: .35rem 0; border-left: 0; justify-content: space-between; }
  .crm-totals .money .cur + .cur { border-top: 1px dashed var(--line); }
  .crm-figures { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: .55rem; }
  .crm-figures > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .crm-card > header { flex-wrap: wrap; }
  .crm-card .crm-name { flex-basis: calc(100% - 3.5rem); }
  .crm-card .crm-flags { justify-content: flex-start; padding-left: 3.35rem; margin-top: -.35rem; }
}

/* ================= Consistency pass (review of 27 Oct): alignment, controls, tables ================= */

/* Card heads and table cells line up: the first and last columns of a tight card share the head's 1.25rem inset. */
.card.tight table th:first-child, .card.tight table td:first-child { padding-left: 1.25rem; }
.card.tight table th:last-child, .card.tight table td:last-child { padding-right: 1.25rem; }
.card.tight table.stacked td, .card.tight table.stacked th { padding: 0; }

/* Big figures shrink rather than being cut off. */
.stat .value { font-size: clamp(1.15rem, .9rem + .8vw, 1.75rem); overflow-wrap: anywhere; }

/* Every form control outside a .field gets the same look; a smaller size in tables and card heads. */
/* :where() keeps these at the lowest weight, so any control with its own styling keeps it. */
.content :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file], [type=range]), select, textarea):where(:not(.field *, .filters *, table.lines *, .perm *)) {
  min-height: 34px; padding: .3rem .6rem; border: 1px solid var(--input); border-radius: var(--radius-sm); background-color: #fff; font: inherit; font-size: .9rem; color: var(--ink); max-width: 100%; }
.content :where(select:not([multiple])):where(:not(.field *, .filters *, table.lines *)) { -webkit-appearance: none; appearance: none; padding-right: 2rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646a67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center / 14px 14px; }
.content :where(td) :where(input:not([type=checkbox], [type=radio]), select) { min-height: 32px; }
/* Inputs and buttons in one row are the same height. */
.field :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { min-height: 40px; height: 40px; padding-top: 0; padding-bottom: 0; }
.field select[multiple] { height: auto !important; min-height: 8.5rem; padding-top: .35rem !important; padding-bottom: .35rem !important; overflow-y: auto; }
form.inline.actions, form.inline.per-page { display: inline-flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; }
.check-inline { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; text-transform: none; white-space: nowrap; }
.check-inline input { accent-color: var(--green); margin: 0; }
.alert a.btn { text-decoration: none; font-weight: 500; }

/* Labels the house style capitalises, but sentences and data that must keep their own case. */
.field.check label, label.check, th small, tfoot th, .badge.note, .page-head h1 .keep-case { text-transform: none; }

/* Tables stacked into blocks (narrow cards). */
table.stacked th[data-label]:not([data-label=""])::before { content: attr(data-label); display: block; font-size: .76rem; font-weight: 500; color: var(--muted); }
table.stacked td.group-row::before { display: none; }
table.stacked td small, table.stacked td.take-home small { white-space: normal; }
@media (max-width: 640px) { table.stacked tr { grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr)); } }

/* Card footers (notes and totals under a table). */
.card-foot { padding: .8rem 1.25rem; border-top: 1px solid var(--line); font-size: .88rem; }
.card-foot p.muted, .card p.muted.foot { max-width: none; }

/* Pagination: the per-page select matches the page buttons; on phones the summary takes its own row. */
.pagination .per-page select { min-height: 32px; height: 32px; }
@media (max-width: 640px) {
  .pagination { justify-content: space-between; }
  .pagination .info { flex-basis: 100%; margin-right: 0; }
}

/* Dashboard: show that the tile row scrolls when it is wider than the screen. */
.page-dashboard .dash-tiles.overflows { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3rem), transparent); }

/* Customers. */
.crm-totals .money .cur:first-child { padding-left: 0; }
.crm-reach a[href^="tel:"], .crm-people a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 640px) {
  .crm-mark-col { align-items: flex-start; }
  .crm-callout { flex-wrap: nowrap; align-items: flex-start; }
  .crm-callout .btn { flex: none; }
}

/* A checkbox placed in a form grid next to inputs: aligned with the inputs on wide screens, no gap when stacked. */
.form-grid .field-check { display: flex; align-items: flex-end; padding-bottom: .55rem; }
@media (max-width: 760px) { .form-grid .field-check { padding-bottom: 0; } }
/* A checkbox line whose text is a sentence with a bold start: keep it one flowing line. */
label.check > span { display: inline; }
.card > p.muted { max-width: none; }
.held-list { margin: .4rem 0 0 1.1rem; padding: 0; } .held-list li { margin: .25rem 0; } .held-list form { margin-left: .5rem; }

/* Staff loans */
.loan-limit { display: grid; gap: .35rem; margin: 0 0 1rem; padding: .75rem .9rem; border-radius: 10px; background: var(--thead); }
.loan-limit > div { display: flex; justify-content: space-between; gap: 1rem; }
.loan-limit dt { font-size: .84rem; color: var(--muted); }
.loan-limit dd { margin: 0; font-weight: 600; white-space: nowrap; }
.loan-limit .avail dd { color: var(--green-ink); font-size: 1.05rem; }
.loan-preview { min-height: 1.2em; margin: -.3rem 0 .6rem; }
.loan-figures { margin-bottom: 1rem; }

/* Staff loans: live repayment calculator and schedule */
.loan-calc { margin: -.2rem 0 .9rem; }
.loan-calc .loan-limit { margin-bottom: .5rem; }
.loan-schedule-wrap summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--green-ink); padding: .2rem 0; }
.loan-schedule { font-size: .86rem; margin-top: .4rem; }
.loan-schedule td, .loan-schedule th { padding: .35rem .6rem; }
tr.muted-row td { color: var(--muted); }
.loan-schedule td:first-child { white-space: nowrap; }
[data-limit-box].is-loading { opacity: .45; transition: opacity .15s; }
.payslip-ids { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1.2rem; margin: 0 0 1rem; padding: .8rem 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.payslip-ids dt { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.payslip-ids dd { margin: .1rem 0 0; font-weight: 600; }
/* Customers: overdue line under the outstanding balance, and the overdue-by-age summary */
.crm-overdue { display: flex; align-items: baseline; gap: .5rem; margin-top: -.35rem; padding: .3rem .75rem; font-size: .82rem; color: var(--red); white-space: nowrap; overflow: hidden; }
.crm-overdue span { color: var(--muted); }
.crm-overdue strong { font-weight: 600; }
.crm-overdue small { margin-left: auto; color: var(--muted); }
.crm-overdue:hover strong { text-decoration: underline; }
td.num.owed { color: var(--red); font-weight: 600; }
/* Outstanding totals: currencies line up whether they sit side by side or wrap onto a second line
   (no divider or indent on the wrapped line; equal-width currency labels so the amounts start in the same place). */
.crm-totals .money .amounts { display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem 2rem; }
.crm-totals .money .cur, .crm-totals .money .cur:first-child, .crm-totals .money .cur:last-child { padding: .1rem 0; border-left: 0; }
.crm-totals .money .cur em { display: inline-block; min-width: 3.4rem; text-align: center; }
.crm-totals .money .amounts b { font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .crm-totals .money .amounts { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .crm-totals .money .cur, .crm-totals .money .cur:first-child { padding: .35rem 0; justify-content: space-between; }
}

/* Customer › Contracts & Billing: unpaid invoices with their full overview (read-only; the portal does the rest) */
.inv-list { display: grid; gap: .6rem; padding: .2rem 1rem 1rem; }
.inv { border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; }
.inv[open] { box-shadow: 0 1px 0 var(--line-soft), 0 6px 18px rgba(16, 40, 24, .06); }
.inv > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; gap: .6rem 1rem; padding: .75rem 1rem; }
.inv > summary::-webkit-details-marker { display: none; }
.inv > summary:hover { background: var(--thead); }
.inv[open] > summary { border-bottom: 1px solid var(--line-soft); background: var(--thead); }
.inv-no, .inv-due, .inv-amt { display: flex; flex-direction: column; min-width: 0; }
.inv-no small, .inv-due small, .inv-amt small { font-size: .76rem; color: var(--muted); }
.inv-amt { text-align: right; }
.inv-amt strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-body { padding: .9rem 1rem 1rem; display: grid; gap: .9rem; }
.inv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .5rem 1rem; margin: 0; }
.inv-meta dt { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.inv-meta dd { margin: .1rem 0 0; font-weight: 500; }
.inv-lines td { vertical-align: top; }
.inv-desc { font-size: .86rem; color: var(--slate); margin-top: .15rem; white-space: normal; }
.inv-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 1rem 2rem; align-items: start; }
.inv-notes h4 { margin: 0 0 .2rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.inv-notes p { margin: 0 0 .7rem; font-size: .88rem; }
.inv-totals { margin: 0; display: grid; gap: .3rem; }
.inv-totals > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; }
.inv-totals dt { color: var(--muted); }
.inv-totals dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-totals .total { border-top: 1px solid var(--line); padding-top: .35rem; font-weight: 600; }
.inv-totals .total dt { color: var(--ink); }
.inv-totals .due { margin-top: .2rem; padding: .5rem .7rem; border-radius: 8px; background: var(--red-soft); font-weight: 600; }
.inv-totals .due dt, .inv-totals .due dd { color: var(--red); }
.inv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding-top: .3rem; border-top: 1px solid var(--line-soft); }
@media (max-width: 760px) {
  .inv > summary { grid-template-columns: minmax(0, 1fr) auto; }
  .inv-due { display: none; }
  .inv > summary .badge { justify-self: end; }
  .inv-amt { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; text-align: left; }
  .inv-foot { grid-template-columns: 1fr; }
}
.inv > summary .badge { justify-self: start; }
.inv-lines td:first-child { min-width: 14rem; }
@media (max-width: 760px) {
  .inv-list { padding: .2rem .5rem .8rem; }
  .inv-body { padding: .8rem .75rem; }
}
/* Waybills: Engineering check and Finance approval before printing */
.wb-checks .wb-steps { list-style: none; margin: 0; padding: .3rem 1.25rem 1rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; counter-reset: step; }
.wb-steps li { position: relative; padding: .7rem .8rem .7rem 2.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); display: flex; flex-direction: column; gap: .15rem; }
.wb-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: .75rem; top: .7rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 600; background: var(--thead); color: var(--muted); border: 1px solid var(--line); }
.wb-steps li.done { border-color: #cfe7d7; background: var(--green-tint, #f3faf5); }
.wb-steps li.done::before { content: '✓'; background: var(--green); color: #fff; border-color: var(--green); }
.wb-steps li.now { border-color: var(--amber-mark); box-shadow: inset 3px 0 0 var(--amber-mark); }
.wb-steps small { color: var(--muted); font-size: .8rem; }
.wb-decide { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.5rem; padding: 0 1.25rem 1rem; }
.wb-decide form { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.wb-decide .field { width: 100%; margin: 0; }
.wb-recall { padding: 0 1.25rem .9rem; }
.wb-approval { margin-top: .8rem; }
@media (max-width: 760px) { .wb-checks .wb-steps { grid-template-columns: 1fr; } }
/* Sites: choose whether to create the network in Meraki or UniFi */
.net-choice { border: 1px solid var(--line); border-radius: 12px; padding: .8rem 1rem 1rem; margin: 0; }
.net-choice legend { padding: 0 .4rem; font-weight: 600; font-size: .9rem; }
.net-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.net-opt { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--card); }
.net-opt:has(input:checked) { border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green); background: var(--green-tint, #f3faf5); }
.net-opt input { margin-top: .2rem; accent-color: var(--green); }
.net-opt span { display: flex; flex-direction: column; gap: .1rem; }
.net-opt small { color: var(--muted); font-size: .8rem; }
.net-opt.off { opacity: .55; cursor: not-allowed; }
.net-choice .field[hidden] { display: none; }
.net-create { margin-top: .5rem; }
.net-create summary { cursor: pointer; font-size: .86rem; font-weight: 600; color: var(--green-ink); }
.net-create form { margin-top: .6rem; display: grid; gap: .6rem; justify-items: start; }
.net-create .net-choice { width: 100%; }
/* Two-factor sign-in */
.otp-input { font: 500 1.5rem var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: .3em; text-align: center; max-width: 14rem; }
.twofa { display: grid; gap: 1rem; max-width: 860px; }
.twofa-steps { margin: 0; padding: .2rem 1.25rem 1.25rem 2.6rem; display: grid; gap: 1.1rem; }
.twofa-steps li { padding-left: .3rem; line-height: 1.55; }
.twofa-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .7rem; }
.twofa-qr .qr { width: 196px; height: 196px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; display: grid; place-items: center; }
.twofa-qr .qr svg { width: 100%; height: 100%; }
.twofa-key { display: inline-block; font: 500 1.05rem var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: .08em; padding: .45rem .7rem; background: var(--thead); border: 1px solid var(--line); border-radius: 8px; word-break: break-all; }
.twofa-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-top: .6rem; }
.twofa-confirm .field { margin: 0; }
.twofa-act { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; padding: 0 1.25rem 1.25rem; }
.twofa-act h3 { margin: 0; }
.twofa-act .field { width: 100%; max-width: 320px; margin: 0; }
.twofa-codes .codes { display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); gap: .4rem 1.5rem; margin: .2rem 0 1rem; padding-left: 1.8rem; font-size: 1.05rem; }
.twofa-codes p, .twofa-codes .actions { padding: 0 1.25rem; }
.twofa-codes .actions { padding-bottom: 1.25rem; }
@media print { .twofa > :not(.twofa-codes) { display: none; } }

/* ---- Greig ERP on the phone (installable app) ---- */
.tabbar { display: none; }
@media (max-width: 760px) {
  .tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--card); border-top: 1px solid var(--line); padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(16, 40, 24, .06); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 52px; border: 0; background: none;
    color: var(--muted); font: 500 .7rem var(--font); text-decoration: none; cursor: pointer; border-radius: 10px; }
  .tabbar a.active { color: var(--green-ink); background: var(--green-tint, #eef7f1); }
  .main { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}
.page-app { display: grid; gap: 1rem; max-width: 760px; }
.app-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.25rem; border-radius: 16px; color: #fff;
  background: linear-gradient(100deg, #007a3e 0%, #008545 55%, #00924c 100%); }
.app-hero img { position: absolute; right: -40px; bottom: -50px; width: 170px; opacity: .2; pointer-events: none; }
.app-hero small { color: #cfe9d8; font-size: .82rem; }
.app-hero h1 { margin: .1rem 0 0; color: #fff; font-size: 1.45rem; text-transform: none; }
.app-hero p { margin: .35rem 0 0; color: rgba(255,255,255,.92); font-size: .86rem; display: flex; gap: .35rem; align-items: center; }
.app-install { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid #cfe7d7; background: var(--green-tint, #f3faf5); border-radius: 12px; color: var(--green-ink); }
.app-install div { flex: 1; display: flex; flex-direction: column; color: var(--ink); }
.app-install small { color: var(--muted); }
.app-actions { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .65rem; }
.app-tile { display: flex; flex-direction: column; gap: .2rem; min-height: 104px; padding: .85rem .9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card);
  color: var(--ink); text-decoration: none; box-shadow: 0 1px 0 var(--line-soft); }
.app-tile:hover { border-color: var(--green); text-decoration: none; }
.app-tile .ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--green-tint, #eef7f1); color: var(--green-ink); margin-bottom: .25rem; }
.app-tile strong { font-weight: 600; font-size: .95rem; }
.app-tile small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.app-list ul { list-style: none; margin: 0; padding: 0; }
.app-list li + li { border-top: 1px solid var(--line-soft); }
.app-list li a { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .75rem 1.1rem; min-height: 56px; color: var(--ink); text-decoration: none; }
.app-list li a:hover { background: var(--thead); }
.app-list li a > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.app-list li a > span:first-child strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-list small { color: var(--muted); font-size: .8rem; }
.app-when { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.app-when b { font-weight: 600; font-variant-numeric: tabular-nums; }
.app-when em { font-style: normal; color: var(--muted); font-size: .76rem; }
.net-status { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 60; padding: .55rem .9rem;
  border-radius: 999px; background: #3a3d3b; color: #fff; font-size: .82rem; box-shadow: 0 6px 18px rgba(0,0,0,.18); max-width: calc(100% - 32px); text-align: center; }
@media (min-width: 761px) { .net-status { bottom: 18px; } }
.app-offline { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--bg, #f4f6f5); padding: 24px 16px; }
.app-offline main { max-width: 420px; text-align: center; display: grid; gap: .8rem; justify-items: center; }
.app-offline h1 { margin: .5rem 0 0; }
.draft-note, .offline-note { margin-bottom: 1rem; }
.app-offline .err-code { margin: .6rem 0 0; font: 600 .85rem var(--font-mono, 'IBM Plex Mono', monospace); letter-spacing: .12em; color: var(--muted); }
.app-offline .err-code + h1 { margin-top: 0; }
.badge-btn { border: 0; cursor: pointer; font: inherit; }
.badge-btn:hover { filter: brightness(.95); text-decoration: underline; }
.crm-ninja-pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: .6rem 0 .2rem; padding: .55rem .8rem; border-radius: 10px; background: #fdf7ea; border: 1px solid #f2e0bb; font-size: .88rem; color: #6b4600; }
.crm-card .crm-flags { flex: 0 0 auto; max-width: 8.5rem; }
.crm-card .crm-flags .badge { white-space: nowrap; }
.crm-card footer .crm-sync { flex-basis: 100%; }
/* Dashboard cards with more than 10 lines of text fold */
.dash-fold-body { position: relative; }
.card.tight > .dash-fold-body > table { margin: 0; }
.card > .dash-fold-body > p.muted { max-width: none; }
.card.is-folded .dash-fold-body { overflow: hidden; }
.card.is-folded .dash-fold-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1rem; background: linear-gradient(to bottom, transparent, var(--card, #fff)); pointer-events: none; }
.dash-fold { display: flex; justify-content: center; padding: .35rem .75rem .6rem; border-top: 1px solid var(--line-soft); }
.dash-fold[hidden] { display: none; }
.dash-fold .btn { font-weight: 600; }
/* Backups */
.backup-health { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.25rem; margin-bottom: 1rem; border-radius: 14px; border: 1px solid var(--line); background: var(--card); }
.backup-health strong { font: 500 1.15rem var(--font-head); }
.backup-health p { margin: .2rem 0; }
.backup-health small { display: block; color: var(--muted); }
.backup-health.tone-green { border-color: #cfe7d7; background: var(--green-tint, #f3faf5); color: var(--green-ink); }
.backup-health.tone-amber { border-color: #f2e0bb; background: #fdf7ea; color: #6b4600; }
.backup-health.tone-red { border-color: #f3c9c4; background: var(--red-soft); color: var(--red); }
.backup-health.tone-blue { border-color: #cddcef; background: #eef4fb; color: #1d5b93; }
.backup-health p, .backup-health small { color: var(--ink); }
.backup-files { margin: 0; padding-left: 1.1rem; font-size: .86rem; }
.backup-cmds { margin: 0; display: grid; gap: .55rem; }
.backup-cmds dt { font-size: .8rem; color: var(--muted); }
.backup-cmds dd { margin: .1rem 0 0; }
.backup-cmds code, .backup-steps code { font-size: .82rem; background: var(--thead); padding: .1rem .35rem; border-radius: 5px; word-break: break-all; }
.backup-steps { margin: 0 0 .8rem; padding: .2rem 0 0 1.3rem; display: grid; gap: .7rem; }
.backup-servers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 1.25rem; }
.backup-server { display: flex; flex-direction: column; }
.backup-server .dl { margin-bottom: .6rem; }
.backup-note { margin: 0 0 .6rem; padding: .5rem .7rem; border-radius: var(--radius-sm); font-size: .88rem; background: var(--thead); }
.backup-note.tone-red { background: var(--red-soft); color: var(--red); }
.backup-note.tone-amber { background: var(--amber-soft); color: var(--amber); }
.backup-detail { margin: .3rem 0 .6rem; font-size: .88rem; }
.backup-detail summary { cursor: pointer; color: var(--green-ink); font-weight: 500; }
.backup-detail[open] summary { margin-bottom: .4rem; }
.backup-actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; padding-top: .3rem; }
.backup-actions .btn { white-space: normal; text-align: left; max-width: 100%; }
.backup-server > a.btn { align-self: flex-start; }
code.backup-cmd { display: block; margin-bottom: .4rem; padding: .5rem .6rem !important; line-height: 1.5; }
.dash-backup { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1rem; text-decoration: none; }
.dash-backup svg { flex: none; margin-top: .1rem; }
.dash-backup:hover { text-decoration: none; filter: brightness(.98); }

/* Customer contacts: edit a contact in place */
tr.contact-edit-row > td { background: var(--thead); padding: .9rem 1rem; }
tr.contact-edit-row .form-actions { margin-top: .5rem; }

/* Customer availability page (public) */
.avail-card { max-width: 820px; margin: 0 auto; }
.avail-card h3 { margin: 1.4rem 0 .5rem; font-size: 1.05rem; }
.avail-job { margin: .8rem 0 0; }
.avail-windows { display: grid; gap: .5rem; margin-bottom: .6rem; }
.avail-window { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(160px, 2fr) auto; gap: .6rem; align-items: end; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--thead); }
.avail-window .field { margin: 0; }
.avail-remove { align-self: center; margin-top: 1.2rem; }
.avail-list { margin: 0; padding-left: 1.1rem; }
@media (max-width: 640px) {
  .avail-window { grid-template-columns: 1fr 1fr; }
  .avail-window .avail-note { grid-column: 1 / -1; }
  .avail-remove { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
}
/* Job card: customer availability */
.avail-dates { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.avail-dates li { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.avail-dates form { margin-left: auto; }
.avail-contact { margin-top: .6rem; font-size: .9rem; }
.avail-contact summary { cursor: pointer; color: var(--green-ink); font-weight: 500; }
.avail-contact form { margin-top: .6rem; display: grid; gap: .5rem; }
.avail-contact .or { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

/* A list of tick boxes in place of a multi-select (no Ctrl-click needed) */
.check-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .15rem .9rem; max-height: 13rem; overflow-y: auto; padding: .45rem .7rem; border: 1px solid var(--input); border-radius: var(--radius-sm); background: var(--card); }
.check-item { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; font-weight: 400; cursor: pointer; text-transform: none; }
.check-item input { width: 1.05rem; height: 1.05rem; flex: none; accent-color: var(--green); }
.field .check-list .check-item { display: flex; margin: 0; font-weight: 400; font-size: .92rem; color: var(--ink); letter-spacing: 0; }
.field .check-list .check-item input { margin: 0; }
.avail-window > * { min-width: 0; }
.avail-window input { width: 100%; min-width: 0; }
.avail-card .avail-form > h3:first-child { margin-top: 1.6rem; }
.avail-window input[type=date] { padding-left: .5rem !important; padding-right: .35rem !important; font-size: .95rem; }
/* Customer availability page: approving the quoted amount */
.avail-quote { border: 1px solid var(--green-line); background: var(--green-tint); border-radius: var(--radius-sm); padding: .9rem 1rem; }
.avail-quote.has-error { border-color: #e0a29b; background: var(--red-soft); }
.avail-quote-amount { display: grid; gap: .1rem; margin-bottom: .7rem; }
.avail-quote-amount small { color: var(--muted); }
.avail-quote-amount strong { font: 600 1.5rem var(--font-head); color: var(--green-ink); }
.avail-quote-check { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; cursor: pointer; text-transform: none; letter-spacing: 0; }
.avail-quote-check input { width: 1.2rem; height: 1.2rem; margin-top: .15rem; flex: none; accent-color: var(--green); }
.avail-warn { color: var(--amber); }

/* =====================================================================================================
   Attendance request (public page the customer opens from the email). Scoped to .att-*.
   Greig green band (the logo green, a faint chart graticule over it); light page; Greig green actions.
   ===================================================================================================== */
.public-main.is-bleed { max-width: none; padding: 0; }
.att-band { position: relative; color: #fff; background-color: #008545;
  background-image:
    repeating-radial-gradient(circle at 108% -30%, rgba(255,255,255,.09) 0 1px, transparent 1px 64px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(100deg, #007a3e 0%, #008545 55%, #00924c 100%);
  background-size: auto, 56px 56px, 56px 56px, auto; border-bottom: 4px solid var(--green-dark); }
.att-band-inner { max-width: 1080px; margin: 0 auto; padding: clamp(1.6rem, 4vw, 2.8rem) 16px clamp(1.4rem, 3vw, 2.2rem); }
.att-from { margin: 0 0 .5rem; font-size: .95rem; color: rgba(255,255,255,.92); }
.att-place { margin: 0; font: 500 clamp(2.1rem, 5.4vw, 3.6rem)/1.04 var(--font-head); color: #fff; letter-spacing: -.01em; text-wrap: balance; }
.att-place-sub { margin: .45rem 0 0; color: rgba(255,255,255,.92); font-size: 1rem; }
.att-facts { display: flex; flex-wrap: wrap; gap: .9rem 2.4rem; margin: 1.4rem 0 0; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.28); }
.att-facts div { min-width: 0; }
.att-facts dt { font-size: .8rem; color: rgba(255,255,255,.95); margin-bottom: .15rem; }
.att-facts dd { margin: 0; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.att-fact-wide { flex: 1 1 18rem; max-width: 34rem; }

.att-wrap { max-width: 1080px; margin: 0 auto; padding: 2.2rem 16px 3.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 2.75rem; align-items: start; }
.att-main { min-width: 0; }
.att-intro { margin: 0 0 1.8rem; font-size: 1.08rem; line-height: 1.6; max-width: 62ch; color: var(--ink); }

/* The sequence of steps on a numbered track */
.att-steps { list-style: none; margin: 0; padding: 0; counter-reset: att; }
.att-step { position: relative; counter-increment: att; padding: 0 0 2.4rem 3.4rem; }
.att-step::before { content: counter(att); position: absolute; left: 0; top: -.1rem; width: 2.15rem; height: 2.15rem; border-radius: 50%; display: grid; place-items: center;
  font: 600 1rem var(--font-head); color: #fff; background: var(--green); box-shadow: 0 0 0 5px var(--bg); z-index: 1; }
.att-step::after { content: ""; position: absolute; left: calc(1.075rem - 1px); top: 2.2rem; bottom: .2rem; width: 2px; background: #CFDCD4; }
.att-step:last-child { padding-bottom: 0; }
.att-step:last-child::after { display: none; }
.att-step-head { margin-bottom: 1.1rem; }
.att-step-head h2 { margin: 0 0 .25rem; font: 500 1.4rem/1.25 var(--font-head); color: var(--slate); }
.att-step-head p { margin: 0; color: var(--muted); max-width: 62ch; }

.att-field { display: grid; gap: .3rem; min-width: 0; }
.att-field label, .att-tiles legend { font-size: .88rem; font-weight: 600; color: var(--slate); }
.att-field input, .att-field textarea, .att-field select { width: 100%; min-width: 0; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #C3CEC7; border-radius: 8px; padding: .65rem .75rem; }
.att-field input, .att-field select { min-height: 46px; }
.att-field textarea { resize: vertical; line-height: 1.5; }
.att-field input:focus, .att-field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(16,120,56,.18); }
.att-field [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(168,35,26,.12); }
.att-field input::placeholder, .att-field textarea::placeholder { color: #8E9993; }
.att-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; margin-top: 1.3rem; }
.att-grid-3 { grid-template-columns: 1.3fr 1fr 1fr; margin-top: 0; }
.att-span { grid-column: 1 / -1; }

/* Date windows */
.att-windows { display: grid; gap: .65rem; }
.att-window { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr) 2.6rem; gap: .75rem; align-items: end; padding: .85rem .9rem; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; }
.att-window input[type=date] { padding-left: .6rem; padding-right: .4rem; }
.att-remove { width: 2.6rem; height: 46px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.att-remove:hover { color: var(--red); background: var(--red-soft); }
.att-add { margin-top: .75rem; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; font: 600 .92rem var(--font); color: var(--green-ink); background: none; border: 1px dashed var(--green-line); border-radius: 8px; cursor: pointer; }
.att-add:hover { background: var(--green-tint); border-style: solid; }

/* Choice tiles */
.att-tiles { border: 0; margin: 0 0 1.1rem; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.att-tiles legend { padding: 0; margin-bottom: .45rem; }
.att-tiles-3 { grid-template-columns: repeat(3, 1fr); }
.att-tile { position: relative; display: block; cursor: pointer; }
.att-tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.att-tile-body { display: grid; gap: .2rem; height: 100%; padding: .8rem .9rem .85rem 2.6rem; background: #fff; border: 1px solid #C9D4CD; border-radius: 10px; position: relative; transition: border-color .12s, background-color .12s; }
.att-tile-body::before { content: ""; position: absolute; left: .9rem; top: .95rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid #9AAAA1; background: #fff; }
.att-tile-body strong { font-weight: 600; color: var(--ink); font-size: .96rem; line-height: 1.3; }
.att-tile-body small { color: var(--muted); font-size: .85rem; line-height: 1.4; }
.att-tile:hover .att-tile-body { border-color: var(--green-line); }
.att-tile input:checked + .att-tile-body { border-color: var(--green); background: var(--green-tint); box-shadow: inset 0 0 0 1px var(--green); }
.att-tile input:checked + .att-tile-body::before { border-color: var(--green); background: radial-gradient(circle, var(--green) 0 40%, #fff 45%); }
.att-tile input:focus-visible + .att-tile-body { outline: 3px solid rgba(16,120,56,.35); outline-offset: 2px; }

/* The quote slip */
.att-quote { background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.att-quote.is-error { border-color: #E0A29B; box-shadow: 0 0 0 3px rgba(168,35,26,.1); }
.att-quote-figure { padding: 1.2rem 1.3rem 1.1rem; border-bottom: 1px dashed #C9D4CD; background: linear-gradient(#fff, #F7FAF8); }
.att-quote-figure span { display: block; font-size: .88rem; color: var(--muted); }
.att-quote-figure strong { display: block; margin-top: .15rem; font: 500 clamp(2rem, 6vw, 2.75rem)/1.05 var(--font-head); color: var(--slate); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.att-quote-figure p { margin: .6rem 0 0; color: var(--muted); font-size: .92rem; max-width: 60ch; }
.att-approve { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.3rem; cursor: pointer; font-size: 1rem; line-height: 1.5; }
.att-approve input { flex: none; width: 1.35rem; height: 1.35rem; margin-top: .12rem; accent-color: var(--green); cursor: pointer; }
.att-approve:has(input:checked) { background: var(--green-tint); }
.att-decision { border: 0; margin: 0; padding: 1rem 1.3rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.att-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.att-tile.is-decline input:checked + .att-tile-body { border-color: var(--red); background: var(--red-soft); box-shadow: inset 0 0 0 1px var(--red); }
.att-tile.is-decline input:checked + .att-tile-body::before { border-color: var(--red); background: radial-gradient(circle, var(--red) 0 40%, #fff 45%); }
.att-tile.is-decline:hover .att-tile-body { border-color: #E0A29B; }
.att-decline { display: grid; gap: .9rem; padding: 0 1.3rem 1.2rem; }
.att-decline[hidden] { display: none; }
.att-send.is-decline { background: var(--red); }
.att-send.is-decline:hover { background: #8a1c15; }
.att-stamp.is-declined { border-color: var(--red); color: var(--red); background: var(--red-soft); }
.att-stamp.is-declined strong { color: var(--red); }
.att-no { display: inline-flex; align-items: center; gap: .25rem; color: var(--red); font-size: .85rem; font-weight: 600; }
.att-quote-note { margin: 0; padding: .75rem 1.3rem 1rem; font-size: .88rem; color: var(--muted); border-top: 1px solid var(--line-soft); }

/* Submit */
.att-submit { margin-top: 1.6rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.att-send { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.5rem; font: 600 1.02rem var(--font); color: #fff; background: var(--green); border: 0; border-radius: 10px; cursor: pointer; }
.att-send:hover { background: var(--green-dark); }
.att-send:focus-visible { outline: 3px solid rgba(16,120,56,.4); outline-offset: 3px; }
.att-submit p { margin: 0; font-size: .86rem; color: var(--muted); max-width: 34ch; }

.att-errors { display: flex; gap: .75rem; margin: 0 0 1.8rem; padding: .9rem 1.1rem; border-radius: 10px; background: var(--red-soft); color: var(--red); border: 1px solid #F0C4BE; }
.att-errors:focus { outline: none; }
.att-errors ul { margin: .35rem 0 0; padding-left: 1.1rem; color: var(--ink); }

/* Received / inactive */
.att-receipt { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.5rem 1.6rem; }
.att-receipt-head { display: flex; gap: 1rem; align-items: flex-start; color: var(--green); }
.att-receipt-head.is-muted { color: var(--muted); }
.att-receipt-head h2 { margin: 0 0 .3rem; font: 500 1.6rem/1.2 var(--font-head); color: var(--slate); }
.att-receipt-head p { margin: 0; color: var(--ink); max-width: 62ch; }
.att-summary { margin: 1.4rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.att-summary > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: .4rem 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line-soft); }
.att-summary dt { color: var(--muted); font-size: .9rem; }
.att-summary dd { margin: 0; }
.att-datelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.att-datelist span { color: var(--muted); margin-left: .5rem; font-size: .9rem; }
.att-stamp { display: flex; align-items: center; gap: .8rem; margin-top: 1.3rem; padding: .85rem 1.1rem; border: 2px solid var(--green); border-radius: 10px; color: var(--green); background: var(--green-tint); width: fit-content; max-width: 100%; }
.att-stamp p { margin: 0; display: grid; }
.att-stamp strong { color: var(--green-ink); }
.att-stamp span { color: var(--ink); font-size: .9rem; }
.att-fine { margin: 1.2rem 0 0; font-size: .9rem; color: var(--muted); }

/* Side column */
.att-aside { position: sticky; top: 1.2rem; display: grid; gap: 1rem; }
.att-aside-block { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.15rem; }
.att-aside-block h2 { margin: 0 0 .7rem; font: 500 1.05rem var(--font-head); color: var(--slate); }
.att-aside dl { margin: 0; display: grid; gap: .65rem; }
.att-aside dt { font-size: .8rem; color: var(--muted); }
.att-aside dd { margin: .1rem 0 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.att-aside p { margin: .45rem 0 0; }
.att-person { display: flex; gap: .55rem; align-items: flex-start; }
.att-person .icon { margin-top: .15rem; color: var(--green); flex: none; }
.att-person small { color: var(--muted); }
.att-link { display: inline-flex; align-items: flex-start; gap: .45rem; overflow-wrap: break-word; font-size: .94rem; }
.att-link .icon { flex: none; margin-top: .2rem; }
.att-ok { display: inline-flex; align-items: center; gap: .25rem; color: var(--green); font-size: .85rem; font-weight: 600; }
.att-licence { margin: 0; padding: 0 .2rem; font-size: .78rem; color: var(--faint); line-height: 1.5; }

@media (max-width: 900px) {
  .att-wrap { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .att-aside { position: static; grid-template-columns: 1fr 1fr; }
  .att-licence { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .att-step { padding-left: 0; padding-top: 0; }
  .att-step::before { position: static; display: grid; margin-bottom: .6rem; box-shadow: none; }
  .att-step::after { display: none; }
  .att-step + .att-step { border-top: 1px solid var(--line); padding-top: 1.8rem; }
  .att-window { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.6rem; }
  .att-window-note { grid-column: 1 / 3; grid-row: 2; }
  .att-remove { grid-column: 3; grid-row: 1; }
  .att-tiles, .att-tiles-3, .att-grid, .att-grid-3 { grid-template-columns: 1fr; }
  .att-aside { grid-template-columns: 1fr; }
  .att-summary > div { grid-template-columns: 1fr; gap: .15rem; }
  .att-decision { grid-template-columns: 1fr; }
  .att-send { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .att-tile-body { transition: none; } }
@media print { .att-band { background: none; color: var(--ink); border-bottom: 2px solid var(--green); } .att-place, .att-facts dd { color: var(--ink); } .att-aside { position: static; } }

/* Job card: quote approval */
.quote-total { margin: 0 0 .7rem; display: grid; }
.quote-total strong { font: 500 1.6rem/1.1 var(--font-head); color: var(--slate); font-variant-numeric: tabular-nums; }
.quote-total small { color: var(--muted); }
.quote-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.quote-steps li { position: relative; padding-left: 1.6rem; display: grid; }
.quote-steps li::before { content: ""; position: absolute; left: 0; top: .2rem; width: .95rem; height: .95rem; border-radius: 50%; border: 2px solid #B8C4BD; background: #fff; }
.quote-steps li.done::before { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 2px #fff; }
.quote-steps li.now::before { border-color: var(--amber-mark); }
.quote-steps li.now strong { color: var(--amber); }
.quote-steps strong { font-weight: 600; font-size: .92rem; }
.quote-steps small { color: var(--muted); }
.quote-lines { margin-top: .7rem; font-size: .88rem; }
.quote-lines summary { cursor: pointer; color: var(--green-ink); font-weight: 500; }
.quote-lines table { margin-top: .4rem; }

/* ---- Printable documents (layout :document="true") ---- */
.doc-page .content.doc-content { max-width: 1040px; margin: 0 auto; padding-top: 1rem; }
.doc-toolbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .8rem; padding: .6rem max(16px, 1.25rem); background: var(--card); border-bottom: 1px solid var(--line); }
.doc-toolbar strong { flex: 1; min-width: 0; font: 500 1rem var(--font-head); color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-toolbar .actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.doc-page .card.no-stack, .doc-page .doc-content > .card { padding: 1.6rem 1.8rem; }
@media print {
  .doc-page .content.doc-content { max-width: none; margin: 0; padding: 0 !important; }
  .doc-page .card.no-stack, .doc-page .doc-content > .card { padding: 0; }
  /* The letterhead stays on one line: company on the left, title and reference on the right. */
  .doc-head { flex-wrap: nowrap; gap: 1.2rem; }
  .doc-head > :first-child { flex: 1 1 auto; }
  .doc-head > .doc-head-right { flex: 0 0 auto; max-width: 52%; align-items: flex-end; }
  .doc-head .meta, .doc-accreditations { text-align: right; justify-content: flex-end; }
  .doc-head .doc-logo { width: 150px; }
  .doc-accreditations img { height: 40px; }
  .doc-acc-text { font-size: .64rem; max-width: 150px; }
  .no-stack th, .no-stack td { padding: .38rem .45rem; }
  th { background: #EEF2EF !important; }
}

/* Waybill print */
.wb-lines { margin-top: 1rem; table-layout: fixed; }
.wb-lines th .unit { text-transform: none; }
.wb-serials span { display: block; font-family: var(--font-mono); font-size: .78rem; line-height: 1.35; overflow-wrap: anywhere; }
.wb-lines td:last-child { border-left: 1px dashed var(--line); }
@media print {
  .wb-parties { gap: .6rem; margin-top: .8rem; font-size: .9rem; }
  .wb-parties > div { padding: .45rem .6rem; }
  .wb-lines { font-size: .9rem; }
  .wb-lines tbody tr { border-bottom: 1px solid #CBD3CE; }
  .wb-sigs { gap: 1.2rem; margin-top: 2.2rem; break-inside: avoid; }
}
.wb-lines th.num, .wb-lines td.num { padding-right: .9rem; }
.wb-lines th { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* ---- Payroll: total payout panel (run page and the latest run on the payroll list) ---- */
.payout { padding: 0; overflow: hidden; }
.payout-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; padding: 1rem 1.25rem 0; }
.payout-head h2 { margin: 0; font: 500 1.05rem/1.25 var(--font-head); color: var(--slate); }
.payout-period { margin: .1rem 0 0; color: var(--muted); font-size: .88rem; }
.payout-head-side { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.payout-empty { margin: 0; padding: .9rem 1.25rem 1.2rem; color: var(--muted); }
.payout-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.25rem 2.5rem; align-items: end; padding: .9rem 1.25rem 1.15rem; }
.payout-figure { font: 500 clamp(1.9rem, 3.4vw, 2.6rem)/1.05 var(--font-head); color: var(--green-dark); font-variant-numeric: tabular-nums; letter-spacing: -.01em; overflow-wrap: anywhere; }
.payout-caption { margin: .45rem 0 0; color: var(--muted); font-size: .9rem; }
.payout-bar { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; background: var(--grey-soft); gap: 2px; }
.payout-bar span { display: block; min-width: 3px; }
.payout-bar .seg-emp, .key-emp { background: var(--green); }
.payout-bar .seg-cas, .key-cas { background: var(--brand-grey); }
.payout-lines { margin: .7rem 0 0; }
.payout-line { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: .42rem 0; }
.payout-line + .payout-line { border-top: 1px solid var(--line-soft); }
.payout-line dt { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; color: var(--ink); font-weight: 500; min-width: 0; }
.payout-line dt small { color: var(--muted); font-weight: 400; font-size: .82rem; }
.payout-line dd { margin: 0; display: flex; align-items: baseline; gap: .7rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.payout-line dd strong { font-weight: 600; color: var(--slate); }
.payout-line dd small { color: var(--muted); font-size: .8rem; min-width: 3.2em; text-align: right; }
.key { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; align-self: center; }
.payout-other { margin: 0; padding: .6rem 1.25rem; border-top: 1px solid var(--line-soft); font-size: .9rem; color: var(--muted); }
.payout-other strong { color: var(--slate); font-weight: 600; }
.payout-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); background: var(--thead); }
.payout-facts > div { padding: .7rem 1.25rem .75rem; min-width: 0; }
.payout-facts > div + div { border-left: 1px solid var(--line-soft); }
.payout-facts dt { font-size: .78rem; color: var(--muted); font-weight: 500; }
.payout-facts dd { margin: .15rem 0 0; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.payout-facts dd small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.payout-note { display: flex; align-items: flex-start; gap: .45rem; margin: 0; padding: .65rem 1.25rem; border-top: 1px solid #f0d9a8; background: var(--amber-soft); color: var(--amber); font-size: .88rem; }
.payout-note .icon { flex: none; margin-top: .12rem; }
@media (max-width: 960px) {
  .payout-body { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .payout-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .payout-facts > div:nth-child(3) { border-left: 0; }
  .payout-facts > div:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
}
@media (max-width: 420px) {
  .payout-line { flex-direction: column; gap: .15rem; }
}

/* Payroll list: month, amounts, and each month's payout against the largest */
.payroll-runs .run-month a { font-weight: 600; }
.payroll-runs .run-month small, .payroll-runs .run-sub { display: block; color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.payout-cell > span, .payout-cell > strong { display: block; white-space: nowrap; }
.payout-cell small { display: block; color: var(--muted); font-size: .8rem; }
.payout-cell-total strong { color: var(--green-dark); font-weight: 600; }
.run-bar { display: block; height: 4px; margin: .35rem 0 0 auto; width: 100%; max-width: 9rem; border-radius: 999px; background: var(--grey-soft); overflow: hidden; }
.run-bar > span { display: block; height: 100%; margin-left: auto; background: var(--green-line); border-radius: inherit; }
.payroll-settings .form-actions { margin-top: .4rem; }
@media (max-width: 480px) {
  .payout-facts { grid-template-columns: minmax(0, 1fr); }
  .payout-facts > div + div { border-left: 0; border-top: 1px solid var(--line-soft); }
}

/* Payroll list: employees and their pay details (compact, fits beside the sidebar) */
.staff-pay .card-head { flex-wrap: wrap; }
.staff-pay-counts { display: flex; flex-wrap: wrap; gap: .35rem; }
.staff-pay td { vertical-align: top; }
.staff-pay .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.staff-pay .sp-person a { font-weight: 600; }
.staff-pay .sp-person small, .staff-pay .sp-bank small, .staff-pay td.take-home small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.35; }
.staff-pay .sp-minus { color: var(--muted); }
.staff-pay .sp-bank span:not(.badge) { display: block; }
.staff-pay .sp-bank .badge, .staff-pay .sp-status .badge { margin-top: .25rem; white-space: normal; }
.staff-pay .sp-status .badge { margin-top: 0; }
.staff-pay .sp-edit { display: block; margin-top: .35rem; font-size: .84rem; font-weight: 500; white-space: nowrap; }
.staff-pay .sp-edit.sp-add { font-weight: 600; }
.staff-pay tfoot th.num { white-space: nowrap; }
.staff-pay-counts .badge { text-transform: none; }
/* Narrower screens: allowances and deductions stay on each person's pay details; take home is kept. */
.staff-pay td.take-home small { white-space: normal; }
@media (max-width: 1600px) { .staff-pay .sp-opt { display: none; } }
@media (min-width: 1601px) {
  .staff-pay .sp-person { min-width: 12rem; }
  .staff-pay .sp-bank { min-width: 10.5rem; }
  .staff-pay .sp-status { min-width: 9.5rem; }
  .staff-pay td.take-home small { white-space: nowrap; }
}

/* Mobilisation: reschedule travel legs */
.reschedule .card-head { flex-wrap: wrap; }
.rs-legs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.rs-leg { padding: .8rem 1.25rem; border-bottom: 1px solid var(--line-soft); }
.rs-leg-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .9rem; align-items: start; }
.rs-num { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--grey-soft); color: var(--slate); font-size: .8rem; font-weight: 600; }
.rs-route { color: var(--muted); font-size: .88rem; margin-top: .1rem; }
.rs-when { text-align: right; font-variant-numeric: tabular-nums; }
.rs-when small { display: block; color: var(--muted); }
.rs-form { margin: .6rem 0 0 2.5rem; }
.rs-form > summary { list-style: none; display: inline-flex; }
.rs-form > summary::-webkit-details-marker { display: none; }
.rs-form[open] > summary { margin-bottom: .7rem; background: var(--green-tint); border-color: var(--green-line); }
.rs-form form { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--thead); }
.rs-tell { display: flex; flex-direction: column; gap: .35rem; }
.rs-history { padding: .9rem 1.25rem 1rem; }
.rs-history h4 { margin: 0 0 .5rem; font: 500 .98rem var(--font-head); color: var(--slate); }
@media (max-width: 640px) {
  .rs-leg-head { grid-template-columns: auto minmax(0, 1fr); }
  .rs-when { grid-column: 2; text-align: left; }
  .rs-form { margin-left: 0; }
}

/* Job card: quote build-up from the rate card */
.quote-build { margin: 1.4rem 0 0; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--thead); min-width: 0; }
.quote-build legend { padding: 0 .4rem; font: 500 1rem var(--font-head); color: var(--slate); }
.qb-intro { margin: 0 0 .8rem; max-width: 72ch; }
.qb-grid { display: grid; gap: .9rem; }
.qb-group { padding: .8rem .9rem .3rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--card); }
.qb-group h4 { margin: 0 0 .5rem; font: 500 .92rem var(--font-head); color: var(--green-ink); }
.qb-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 1rem 1.5rem; align-items: start; margin-top: .9rem; }
.qb-summary dl { margin: 0; padding: .7rem .9rem; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line-soft); }
.qb-summary dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0; font-variant-numeric: tabular-nums; }
.qb-summary dt { color: var(--muted); }
.qb-summary dd { margin: 0; font-weight: 500; white-space: nowrap; }
.qb-summary .qb-total { margin-top: .3rem; padding-top: .5rem; border-top: 1px solid var(--line); }
.qb-summary .qb-total dt { color: var(--ink); font-weight: 600; }
.qb-summary .qb-total dd { color: var(--green-dark); font: 600 1.15rem var(--font-head); }
.quote-build:not(.has-total) .qb-total dd { color: var(--muted); }
@media (max-width: 720px) { .qb-summary { grid-template-columns: minmax(0, 1fr); } }
/* Rate card */
.rc-intro { margin: 0 0 1rem; max-width: 75ch; color: var(--muted); }
.rc-table th[scope="row"] { font-weight: 500; color: var(--ink); background: none; }
.rc-table input { max-width: 11rem; margin-left: auto; text-align: right; }

/* Job card: standby rotation (crew changes) */
.rotation .card-head { flex-wrap: wrap; }
.rt-head-side { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rt-head-side small { color: var(--muted); }
.rt-intro { margin: 0 1.25rem .8rem; color: var(--muted); max-width: 72ch; }
.rt-now { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; padding: 0 1.25rem 1rem; }
.rt-box { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--thead); min-width: 0; }
.rt-box.is-due { border-color: #f0d9a8; background: #fffaf0; }
.rt-label { font-size: .78rem; font-weight: 500; color: var(--muted); }
.rt-box strong { font: 500 1.15rem var(--font-head); color: var(--slate); }
.rt-box small { color: var(--muted); }
.rt-box .badge { margin-top: .2rem; white-space: normal; }
.rt-meter { display: block; width: 100%; height: 5px; margin-top: .35rem; border-radius: 999px; background: var(--grey-soft); overflow: hidden; }
.rt-meter > span { display: block; height: 100%; background: var(--green); }
.rt-table tr.is-now td { background: var(--green-tint); }
.rt-table tr.is-past td { color: var(--muted); }
.rt-gap { color: var(--amber); }
.rt-actions { white-space: nowrap; text-align: right; }
.rt-foot { margin: 0; padding: .6rem 1.25rem; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line-soft); }
.rt-panel { padding: .8rem 1.25rem; border-top: 1px solid var(--line-soft); }
.rt-panel > summary { list-style: none; display: inline-flex; }
.rt-panel > summary::-webkit-details-marker { display: none; }
.rt-panel[open] > summary { margin-bottom: .8rem; }
@media (max-width: 760px) {
  .rt-now { grid-template-columns: minmax(0, 1fr); }
}

/* Dialogs (forms opened from a row: mobilise a hitch, change a hitch) */
.erp-dialog { width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 1.1rem 1.25rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--ink); box-shadow: 0 20px 48px rgba(31, 35, 33, .22); }
.erp-dialog::backdrop { background: rgba(31, 35, 33, .38); }
.erp-dialog .dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .3rem; }
.erp-dialog .dlg-head h3 { margin: 0; font: 500 1.1rem var(--font-head); color: var(--slate); }
.erp-dialog .dlg-sub { margin: 0 0 .9rem; color: var(--muted); font-size: .9rem; }
.erp-dialog .form-actions { margin-top: 1rem; }
.erp-dialog input[type="time"], .erp-dialog input[type="date"] { width: 100%; }

/* Bank chosen from the head office sort code list; its code is shown beside it */
.field input.readonly-field { background: var(--thead); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: .02em; cursor: default; }
.field .help.is-warn { color: var(--amber); font-weight: 600; }

/* Bank search box over the head office list */
.bank-combo { position: relative; }
.field input.bank-combo-input { padding-right: 2.1rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23646a67' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right .65rem center / 15px 15px; }
.bank-combo-list { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: .3rem 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 10px 28px rgba(20, 40, 30, .14); max-height: 320px; overflow-y: auto; }
.bank-combo-list[hidden] { display: none; }
.bank-combo-list li[role="option"] { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .45rem .8rem; cursor: pointer; font-size: .93rem; }
.bank-combo-list li[role="option"] small { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .8rem; }
.bank-combo-list li.is-active { background: var(--green-tint); }
.bank-combo-list li[aria-selected="true"] span { font-weight: 600; color: var(--green-ink); }
.bank-combo-list mark { background: none; color: var(--green-ink); font-weight: 700; padding: 0; }
.bank-combo-group { padding: .55rem .8rem .25rem; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border-top: 1px solid var(--line-soft); }
.bank-combo-group:first-child { border-top: 0; }
.bank-combo-empty { padding: .6rem .8rem; color: var(--muted); font-size: .9rem; }

.att-tiles.is-error .att-tile-body { border-color: #E0A29B; }

/* Choosing several customer contacts for an email */
.contact-picker { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-picker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .45rem; }
.contact-pick { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; cursor: pointer; font-weight: 400; margin: 0; }
.contact-pick:hover { border-color: #b2bcb6; }
.contact-pick input { margin-top: .2rem; accent-color: var(--green); flex: none; }
.contact-pick:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.contact-pick strong { font-weight: 600; color: var(--ink); }
.contact-pick small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.contact-pick .badge { margin-left: .3rem; }
.svc-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
.svc-checks { display: grid; grid-template-columns: 1fr; gap: .4rem; }
.notice-who { margin: 0 0 .8rem; padding-left: 1.1rem; max-height: 340px; overflow-y: auto; font-size: .92rem; }
.notice-preview { margin-top: 1rem; padding: 1rem 1.2rem; background: var(--thead); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); font-size: .95rem; line-height: 1.6; }

/* ---- Client portal ---- */
.portal-page { background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; }
.portal-top { background: #fff; border-bottom: 3px solid var(--green); }
.portal-top-inner { max-width: 1120px; margin: 0 auto; padding: .7rem 16px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.portal-brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: var(--slate); }
.portal-brand span { font: 500 1.15rem var(--font-head); padding-left: .8rem; border-left: 1px solid var(--line); }
.portal-nav { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.portal-nav a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-size: .93rem; }
.portal-nav a:hover { background: var(--thead); }
.portal-nav a.active { background: var(--green-tint); color: var(--green-ink); font-weight: 600; }
.portal-nav form { margin: 0; }
.portal-main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 1.5rem 16px 2.5rem; }
.portal-title { font: 500 1.7rem/1.25 var(--font-head); color: var(--slate); margin: 0 0 1rem; }
.portal-auth { max-width: 440px; margin: 2rem auto; }
.portal-auth h1 { font: 500 1.6rem var(--font-head); color: var(--slate); margin: 0 0 .4rem; }
.portal-auth .field { margin-bottom: .8rem; }
.portal-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.portal-bar .tabs { margin: 0; }
@media (max-width: 760px) { .portal-main .grid { grid-template-columns: 1fr !important; } .portal-brand span { display: none; } }

/* Ticket conversation (portal and staff) */
.ticket-thread { display: grid; gap: .8rem; margin-bottom: 1rem; }
.ticket-msg { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.1rem; }
.ticket-msg header { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .45rem; font-size: .92rem; }
.ticket-msg header time { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.ticket-msg.is-staff { border-left: 4px solid var(--green); }
.ticket-msg.is-customer { border-left: 4px solid var(--blue); }
.ticket-msg.is-internal { background: #fffaf0; border-color: #f2e0bb; border-left: 4px solid var(--amber-mark); }
.ticket-msg.is-system { background: transparent; border: 0; padding: 0 .3rem; }
.ticket-system { margin: 0; color: var(--muted); font-size: .88rem; text-align: center; }
.ticket-system time { margin-left: .4rem; }
.ticket-body { line-height: 1.6; overflow-wrap: anywhere; }
.ticket-files { margin: .6rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ticket-files a { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; padding: .2rem .55rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.sla-state { font-size: .85rem; font-weight: 600; }
.sla-state.is-breached { color: var(--red); }
.sla-state.is-due { color: var(--amber); }
.sla-state.is-met { color: var(--green-ink); }

/* Customer availability form: small explanatory notes (additional scope is invoiced separately). */
.att-help { display: block; margin-top: .35rem; font-size: .85rem; line-height: 1.4; color: var(--muted); max-width: 60ch; }
.att-quote-figure .att-help { margin-top: .5rem; }

/* ===================================================================================================
   Company overview (dashboard of administrators and the MD): headline figures, invoiced vs collected,
   receivables ageing, pipeline, commitments, budget, operations, people and compliance.
   Chart colours: invoiced = brand green, collected = blue (validated pair: CVD ΔE 18.9, contrast ≥ 3:1).
   =================================================================================================== */
.exec { margin-bottom: 1.5rem; --c-inv: #008545; --c-col: #1d5b93; }
.exec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem 1.5rem; flex-wrap: wrap; margin: .25rem 0 1rem; }
.exec-head h2 { margin: 0; font-size: 1.35rem; }
.exec-sub { margin: .2rem 0 0; color: var(--muted); font-size: .86rem; max-width: 80ch; }
.exec-section { margin: 1.6rem 0 .75rem; font-size: 1.05rem; color: var(--slate); }
.exec-day { margin-top: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }

/* Headline figures: one bordered strip, cells separated by hairlines (like .stats). */
.exec-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 1.25rem; }
.exec-kpi { display: flex; flex-direction: column; gap: .12rem; min-width: 0; padding: .95rem 1.1rem 1rem; background: var(--card); color: var(--ink); }
a.exec-kpi:hover { text-decoration: none; background: var(--green-tint); color: var(--ink); }
.exec-kpi.is-warn { box-shadow: inset 0 3px 0 var(--amber-mark); }
.k-label { font-size: .82rem; font-weight: 500; color: var(--muted); line-height: 1.3; }
.k-value { font: 500 1.8rem/1.12 var(--font-head); color: var(--slate); font-variant-numeric: tabular-nums; margin: .15rem 0 .2rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.k-sub { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.k-other { font-size: .78rem; color: var(--faint); line-height: 1.35; }
.k-delta { white-space: nowrap; font-weight: 600; margin-left: .2rem; }
.k-delta.up { color: var(--green-ink); }
.k-delta.down { color: var(--red); }
.k-flag { display: inline-flex; align-items: center; gap: .25rem; color: var(--amber); font-weight: 500; }
.k-flag .icon { flex: 0 0 auto; }

.exec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.exec-span-2 { display: flex; flex-direction: column; }
.exec-span-2 .exec-chart:not([hidden]) { flex: 1 1 auto; display: flex; flex-direction: column; }
.exec-span-2 .ec-plot { flex: 1 1 auto; min-height: 220px; height: auto; }
.exec-grid > .card { margin-bottom: 0; }
.exec-span-2 { grid-column: span 2; }
.exec-legend { display: flex; gap: .9rem; font-size: .8rem; color: var(--muted); }
.exec-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.sw-inv { background: var(--c-inv); }
.sw-col { background: var(--c-col); }
.sw-act { background: var(--green); }
.sw-plan { background: #d5ddd8; }
.exec-tabs { display: flex; gap: .3rem; padding: .7rem 1.25rem 0; }
.exec-tabs button { font: inherit; font-size: .8rem; font-weight: 600; padding: .25rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.exec-tabs button.active { background: var(--slate); border-color: var(--slate); color: #fff; }

/* Invoiced vs collected: paired columns on one axis; hover or focus a month for its figures. */
.exec-chart { margin: 0; padding: 1rem 1.25rem .9rem; }
.ec-plot { position: relative; height: 220px; margin-left: 3.4rem; }
.ec-grid { position: absolute; inset: 0; pointer-events: none; }
.ec-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line-soft); }
.ec-line span { position: absolute; right: calc(100% + .45rem); top: -.55em; font-size: .72rem; color: var(--faint); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ec-line:last-child { border-top-color: var(--line); }
.ec-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ec-month { position: relative; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.ec-month:hover, .ec-month:focus-visible { background: linear-gradient(to top, rgba(31, 35, 33, .04), rgba(31, 35, 33, .04)); }
.ec-month:focus-visible { box-shadow: inset 0 0 0 2px var(--green-bright); border-radius: 4px; }
.ec-pair { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; justify-content: center; }
.ec-bar { display: block; width: min(16px, 34%); min-height: 0; border-radius: 4px 4px 0 0; }
.ec-bar.inv { background: var(--c-inv); }
.ec-bar.col { background: var(--c-col); }
.ec-tip { position: absolute; bottom: calc(100% - 2.2rem); left: 50%; transform: translateX(-50%); z-index: 3; display: none; flex-direction: column; gap: .15rem; min-width: 11rem;
    padding: .55rem .7rem; background: var(--ink); color: #fff; border-radius: 8px; font-size: .78rem; line-height: 1.35; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.ec-tip span { display: flex; align-items: center; gap: .4rem; font-variant-numeric: tabular-nums; }
.ec-tip .sw { box-shadow: 0 0 0 1px rgba(255, 255, 255, .6); }
.ec-month:hover .ec-tip, .ec-month:focus-visible .ec-tip { display: flex; }
.ec-month:first-child .ec-tip, .ec-month:nth-child(2) .ec-tip { left: 0; transform: none; }
.ec-month:last-child .ec-tip, .ec-month:nth-last-child(2) .ec-tip { left: auto; right: 0; transform: none; }
.ec-axis { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: .35rem 0 0 3.4rem; font-size: .74rem; color: var(--muted); text-align: center; }
.ec-month.is-now .ec-bar { opacity: .75; }
.ec-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; margin-top: .8rem; font-size: .82rem; color: var(--muted); }
.ec-foot strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ec-table summary { cursor: pointer; color: var(--green-ink); font-weight: 500; }
.ec-table[open] { flex-basis: 100%; }
.ec-table table { margin-top: .5rem; font-size: .84rem; }

/* Receivables ageing: one segmented bar per currency; grey = not yet due, then deepening red with age. */
.ageing { padding: .9rem 1.25rem .2rem; }
.ageing-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .82rem; color: var(--muted); }
.ageing-top strong { font: 500 1.15rem var(--font-head); color: var(--slate); font-variant-numeric: tabular-nums; }
.ageing-bar { display: flex; gap: 2px; height: 12px; margin: .45rem 0 .55rem; border-radius: 4px; overflow: hidden; background: var(--grey-soft); }
.ageing-bar span { min-width: 3px; }
.ageing-keys { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .2rem .9rem; font-size: .78rem; color: var(--muted); }
.ageing-keys li { display: flex; align-items: center; gap: .35rem; }
.ageing-keys i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.ageing-keys span { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.ag-current { background: #b9c3bd; }
.ag-1_30 { background: #efb3aa; }
.ag-31_60 { background: #e07a6c; }
.ag-61_90 { background: #c2412f; }
.ag-90_plus { background: #8a1c13; }
.exec-minor { margin: 1rem 1.25rem .35rem; font-size: .82rem; font-family: var(--font); font-weight: 600; color: var(--muted); text-transform: none; }
.exec-list { list-style: none; margin: 0 0 .5rem; padding: 0; }
.exec-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .45rem 1.25rem; border-top: 1px solid var(--line-soft); font-size: .88rem; }
.exec-list li a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-list .num { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.exec-list .num small { font-size: .74rem; }

/* Label + per-currency value rows (work to invoice, commitments). */
.exec-rows { list-style: none; margin: 0; padding: 0; }
.exec-rows li + li { border-top: 1px solid var(--line-soft); }
.exec-rows a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1.25rem; color: var(--ink); }
.exec-rows a:hover { background: var(--green-tint); text-decoration: none; }
.r-label { font-size: .88rem; min-width: 0; }
.r-val { display: flex; flex-direction: column; align-items: flex-end; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r-val small { font-weight: 400; color: var(--muted); }

/* Budget: spent bar over the planned-to-date track. */
.exec-budget-top { display: flex; flex-direction: column; gap: .15rem; margin: 0; padding: .85rem 1.25rem .4rem; font-size: .9rem; }
.exec-budget-top > span strong { font-variant-numeric: tabular-nums; }
.exec-budget-top small { color: var(--muted); }
.bullets { list-style: none; margin: 0; padding: .3rem 1.25rem .2rem; display: grid; gap: .55rem; }
.bullets li { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .82rem; }
.b-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b-track { position: relative; height: 12px; }
.b-plan { position: absolute; left: 0; top: 0; bottom: 0; background: #d5ddd8; border-radius: 0 4px 4px 0; }
.b-act { position: absolute; left: 0; top: 3px; bottom: 3px; background: var(--green); border-radius: 0 4px 4px 0; }
.b-act.is-over { background: var(--amber-mark); }
.b-val { font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.b-val small { color: var(--muted); }
.exec-note { display: flex; align-items: center; gap: .35rem; margin: .4rem 1.25rem .9rem; font-size: .76rem; color: var(--muted); }
.exec-note .sw + * { margin-left: 0; }
.exec-note .sw:not(:first-child) { margin-left: .6rem; }

/* Operations: four summary cards. */
.exec-ops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.exec-op { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); }
a.exec-op:hover { text-decoration: none; border-color: var(--green-line); background: var(--green-tint); color: var(--ink); }
.op-title { display: flex; align-items: center; gap: .45rem; font: 500 1rem var(--font-head); color: var(--slate); }
.op-title .icon { color: var(--green); }
.op-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; }
.op-figures span { display: flex; flex-direction: column; font-size: .76rem; color: var(--muted); line-height: 1.25; }
.op-figures b { font: 500 1.35rem/1.1 var(--font-head); color: var(--slate); font-variant-numeric: tabular-nums; }
.op-figures .is-bad b { color: var(--red); }
.op-flag { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--amber); font-weight: 500; }
.op-note { font-size: .78rem; color: var(--muted); }

/* People and compliance: compact figure chips. */
.exec-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .75rem; }
.exec-chips .exec-chip { display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); min-width: 0; }
.exec-chips .exec-chip:hover { text-decoration: none; border-color: var(--green-line); background: var(--green-tint); }
.exec-chips .exec-chip b { font: 500 1.3rem/1 var(--font-head); color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exec-chips .exec-chip span { display: flex; flex-direction: column; font-size: .84rem; line-height: 1.3; min-width: 0; }
.exec-chips .exec-chip small { font-size: .74rem; color: var(--muted); }
.exec-chips .exec-chip.is-warn { box-shadow: inset 3px 0 0 var(--amber-mark); }
.exec-chips .exec-chip.is-bad { box-shadow: inset 3px 0 0 var(--red); }
.exec-chips .exec-chip.is-bad b { color: var(--red); }

@media (max-width: 1360px) {
    .exec-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .exec-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1120px) {
    .exec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exec-span-2 { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .exec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .exec-grid, .exec-ops { grid-template-columns: minmax(0, 1fr); }
    .k-value { font-size: 1.45rem; }
    .ec-plot { height: 180px; margin-left: 2.9rem; }
    .ec-axis { margin-left: 2.9rem; font-size: .66rem; }
    .ec-axis span:nth-child(odd) { visibility: hidden; }   /* every other month: the labels would run together */
    .exec-span-2 .ec-plot { min-height: 180px; }
    .ec-tip { min-width: 9.5rem; }
}
@media (max-width: 420px) {
    .exec-kpis { grid-template-columns: minmax(0, 1fr); }
}
@media print {
    .exec-tabs, .ec-table summary { display: none; }
}