/* BS Mining & Engineering — Operations
   Palette sampled from the bsme.co.za logo: brand red #E41824 (70% of the
   mark) and charcoal #30303C (22%). Amber stays as the shared warning
   colour, and the steel/green semantics are design language, not identity. */

:root {
  --red: #e41824;
  --red-dark: #b31220;
  --red-wash: #fdf1f2;
  --amber: #f9b707;
  --amber-wash: #fff8e6;
  --ink: #1c1c24;
  --charcoal: #30303c;
  --slate: #565663;
  --grey: #7a7a7a;
  --line: #e2e2e4;
  --line-soft: #eeeef0;
  --panel: #ffffff;
  --canvas: #f4f4f5;
  --steel: #2f6b8f;
  --steel-wash: #eef4f8;
  --green: #1e7a45;
  --green-wash: #edf6f0;

  --sidebar: 236px;
  --radius: 4px;
  --shadow: 0 1px 2px rgba(26, 26, 26, .06), 0 1px 8px rgba(26, 26, 26, .04);
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Montserrat, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
  background: var(--canvas);
}

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 20px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }

/* ---------- Shell ---------- */

.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  flex: 0 0 var(--sidebar);
  background: var(--charcoal);
  color: #cfcfd2;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.brand img { width: 34px; height: 34px; object-fit: contain; background: #fff; border-radius: 3px; padding: 2px; }
.brand-name { color: #fff; font-weight: 800; font-size: 14px; letter-spacing: .04em; line-height: 1.1; }
.brand-sub { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #8d8d92; }

/* The nav must be the part that scrolls when the sidebar runs out of room —
   `min-height: 0` is what lets a flex child shrink below its content, without
   which extra nav items push the company name out of the viewport. */
.nav { padding: 12px 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.nav::-webkit-scrollbar { width: 8px; }
.nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; }
.nav-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: #75757b; padding: 12px 8px 6px;
}
.nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; margin-bottom: 2px;
  color: #cfcfd2; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; text-decoration: none;
  border-left: 3px solid transparent;
}
.nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav a.active { background: rgba(228, 24, 36, .16); border-left-color: var(--red); color: #fff; font-weight: 600; }
.nav a .count { margin-left: auto; font-size: 11px; color: #8d8d92; font-variant-numeric: tabular-nums; }
.nav a.active .count { color: #e8a0a0; }
.nav svg { width: 15px; height: 15px; flex: 0 0 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }

/* Never compressed or clipped: the company name is the one thing on this
   screen that must always be legible. */
.sidebar-foot {
  flex: 0 0 auto;
  padding: 12px 14px 16px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 11px; line-height: 1.45; color: #75757b;
  background: var(--charcoal);
}
.sidebar-foot strong { color: #d6d6d9; display: block; font-size: 12px; line-height: 1.35; margin-bottom: 2px; }

.brand { flex: 0 0 auto; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  padding: 14px 26px;
  display: flex; align-items: center; gap: 16px;
  position: sticky; top: 0; z-index: 20;
}
.topbar > div:first-child { min-width: 0; }
.topbar h1 { overflow-wrap: anywhere; }
.topbar .sub { color: var(--grey); font-size: 12px; margin-top: 2px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.user-chip { display: flex; align-items: center; gap: 9px; padding-left: 14px; border-left: 1px solid var(--line); }
.user-chip .who, .user-chip .role { white-space: nowrap; }
.avatar { flex: 0 0 32px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--red); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px; letter-spacing: .02em;
}
.user-chip .who { font-size: 12px; font-weight: 600; line-height: 1.25; }
.user-chip .role { font-size: 11px; color: var(--grey); }

.content { padding: 22px 26px 44px; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: #fff; color: var(--charcoal);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { border-color: #c9c9cd; background: #fafafb; text-decoration: none; }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-dark { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }
.btn-dark:hover { background: #000; border-color: #000; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-link { border: 0; background: none; color: var(--red); padding: 0; font-weight: 600; }
.btn-link:hover { background: none; text-decoration: underline; }

/* ---------- Panels ---------- */

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.panel-head {
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px;
  /* Wraps rather than forcing the panel wider than its column — a long
     sub-note beside a button is what pushed the dashboard off-screen on a
     phone. */
  flex-wrap: wrap;
}
.panel-head h2 { min-width: 0; }
.panel-head .spacer { margin-left: auto; }
.panel-body { padding: 16px; }
.panel-note { font-size: 12px; color: var(--grey); }

.grid { display: grid; gap: 16px; }
/* Grid and flex children default to min-width:auto, which lets wide content
   (a table, a long heading) push the whole layout past the viewport instead
   of scrolling inside its own container. */
.grid > *, .detail-grid > *, .cols-2 > * { min-width: 0; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.cols-2 { grid-template-columns: 1.55fr 1fr; align-items: start; }

/* ---------- KPI tiles ---------- */

.kpi {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; box-shadow: var(--shadow);
  border-top: 3px solid var(--slate); text-decoration: none; color: inherit; display: block;
}
a.kpi:hover { text-decoration: none; border-color: #c9c9cd; }
.kpi .label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.kpi .value { font-size: 27px; font-weight: 800; line-height: 1.15; margin-top: 5px; font-variant-numeric: tabular-nums; }
.kpi .foot { font-size: 11.5px; color: var(--grey); margin-top: 3px; }
.kpi.is-red { border-top-color: var(--red); }
.kpi.is-red .value { color: var(--red); }
.kpi.is-amber { border-top-color: var(--amber); }
.kpi.is-steel { border-top-color: var(--steel); }
.kpi.is-green { border-top-color: var(--green); }

/* ---------- Chips ---------- */

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 100px;
  font-size: 11px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  border: 1px solid transparent;
}
.chip-high { background: var(--red-wash); color: var(--red-dark); border-color: #f3d2d2; }
.chip-medium { background: var(--amber-wash); color: #8a6100; border-color: #f3e2b8; }
.chip-low { background: #f2f2f4; color: var(--slate); border-color: #e4e4e8; }
.chip-unset { background: #fff; color: var(--grey); border-color: var(--line); }
.chip-open { background: var(--steel-wash); color: var(--steel); border-color: #d5e4ee; }
.chip-closed { background: #f2f2f4; color: var(--grey); border-color: #e4e4e8; }
.chip-submitted { background: var(--green-wash); color: var(--green); border-color: #cfe6d9; }
.chip-not_submitted { background: var(--red-wash); color: var(--red-dark); border-color: #f3d2d2; }
.chip-pending { background: #f7f7f8; color: var(--grey); border-color: var(--line); }

.due { font-variant-numeric: tabular-nums; white-space: nowrap; }
.due .rel { display: block; font-size: 11px; font-weight: 600; }
.due-overdue .rel { color: var(--red); }
.due-today .rel { color: #8a6100; }
.due-soon .rel { color: var(--steel); }
.due-future .rel, .due-closed .rel, .due-none .rel { color: var(--grey); font-weight: 500; }

/* ---------- Table ---------- */

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data th {
  text-align: left; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grey); font-weight: 700;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: #fafafb; position: sticky; top: 0; z-index: 1; white-space: nowrap;
}
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
table.data tbody tr:hover { background: #fbfbfc; }
table.data tbody tr { border-left: 3px solid transparent; }
table.data tr.row-overdue { border-left-color: var(--red); }
table.data tr.row-today { border-left-color: var(--amber); }
table.data tr.row-soon { border-left-color: var(--steel); }
table.data .ref, .ref { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--charcoal); }
table.data .ref-text { font-size: 12px; font-weight: 600; color: var(--slate); }
table.data .scope { color: var(--slate); max-width: 460px; }
table.data .scope a { color: var(--charcoal); font-weight: 600; }
/* Row links read as data, not as calls to action — red is reserved for
   urgency in this app, so a whole column of red dates would be misleading. */
table.data td a { color: var(--charcoal); font-weight: 600; }
table.data td a:hover { color: var(--red); }
table.data .scope .line { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.data .note { display: block; margin-top: 4px; font-size: 11.5px; color: var(--grey); font-style: italic; }
.num { font-variant-numeric: tabular-nums; }
table.data th.right, table.data td.right { text-align: right; }
table.data td.right.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Filters ---------- */

.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.filters .search { flex: 1 1 240px; min-width: 200px; position: relative; }
.filters .search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; stroke: var(--grey); fill: none; stroke-width: 1.8; }
.filters .search input { padding-left: 32px; width: 100%; }

/* Styled by exclusion, not by listing each type. The list version silently
   missed type=email and type=number, so the People form and the trip form's
   two odometer fields rendered as raw browser inputs. Anything added later
   is covered by default; only the types that must look different opt out.
   ⚠ The :not() chain is wrapped in :where() so it contributes NO specificity.
   Without it the rule scores 0,6,1 and beats component rules like
   `.filters .search input`, which quietly lost the padding that keeps the
   search text clear of the magnifier icon on every search box in the app. */
input:where(:not([type=hidden]):not([type=submit]):not([type=button]):not([type=file]):not([type=checkbox]):not([type=radio])),
select, textarea {
  font: inherit; font-size: 13px; color: var(--charcoal);
  padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; width: 100%;
}
select { padding-right: 26px; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(228, 24, 36, .25); outline-offset: -1px; border-color: var(--red); }
textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.filters select { width: auto; min-width: 122px; }

.tabs { display: flex; gap: 2px; padding: 0 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs a {
  padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--grey);
  border-bottom: 2px solid transparent; text-decoration: none;
}
.tabs a:hover { color: var(--charcoal); text-decoration: none; }
.tabs a.active { color: var(--red); border-bottom-color: var(--red); }
.tabs a .n { font-variant-numeric: tabular-nums; color: var(--grey); font-weight: 500; }

.pager { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line-soft); font-size: 12.5px; color: var(--grey); }
.pager .spacer { margin-left: auto; }
.pager a, .pager span.cur { padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--charcoal); font-weight: 600; }
.pager span.cur { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.pager a:hover { background: #fafafb; text-decoration: none; }

/* ---------- Bars ---------- */

.bars { display: grid; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 118px 1fr 34px; align-items: center; gap: 10px; font-size: 12.5px; }
.bar-row .name { color: var(--slate); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: #f0f0f2; border-radius: 2px; height: 9px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--red); border-radius: 2px; }
.bar-fill.medium { background: var(--amber); }
.bar-fill.low { background: #b9b9be; }
.bar-fill.unset { background: #dcdce0; }
.bar-fill.steel { background: var(--steel); }
.bar-row .n { text-align: right; font-variant-numeric: tabular-nums; color: var(--charcoal); font-weight: 600; }

.spark { display: flex; align-items: flex-end; gap: 5px; height: 92px; padding-top: 6px; }
.spark .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.spark .stem { width: 100%; background: var(--steel); border-radius: 2px 2px 0 0; min-height: 2px; }
.spark .col.is-now .stem { background: var(--red); }
.spark .cap { font-size: 9.5px; color: var(--grey); letter-spacing: .02em; white-space: nowrap; }

/* ---------- Detail ---------- */

.detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.field { padding: 11px 0; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: 148px 1fr; gap: 12px; }
.field:last-child { border-bottom: 0; }
.field dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); font-weight: 600; padding-top: 1px; }
.field dd { margin: 0; }
.scope-text { white-space: pre-wrap; line-height: 1.6; color: var(--charcoal); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: 10px 0 10px 16px; border-left: 2px solid var(--line); position: relative; font-size: 12.5px; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid #fff; }
.timeline .when { color: var(--grey); font-size: 11px; }
.timeline .what { font-weight: 600; }
.timeline .detail { color: var(--slate); word-break: break-word; }

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
label.fl { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin-bottom: 5px; }
.form-actions { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line-soft); background: #fafafb; }
.form-actions .spacer { margin-left: auto; }

/* ---------- Flash / empty ---------- */

.flash { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; font-weight: 500; margin-bottom: 14px; border: 1px solid; }
.flash-success { background: var(--green-wash); border-color: #cfe6d9; color: var(--green); }
.flash-error { background: var(--red-wash); border-color: #f3d2d2; color: var(--red-dark); }

.empty { padding: 46px 20px; text-align: center; color: var(--grey); }
.empty strong { display: block; color: var(--charcoal); margin-bottom: 4px; font-size: 14px; }

.callout { display: flex; gap: 11px; padding: 12px 14px; background: var(--amber-wash); border: 1px solid #f3e2b8; border-radius: var(--radius); font-size: 12.5px; color: #6d4d00; }
.callout svg { width: 17px; height: 17px; flex: 0 0 17px; stroke: #8a6100; fill: none; stroke-width: 1.8; margin-top: 1px; }
.callout a { color: #6d4d00; text-decoration: underline; font-weight: 600; }

/* ---------- Comment thread ---------- */

.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.thread li { padding-left: 12px; border-left: 2px solid var(--line); }
.thread li:last-child { border-left-color: var(--red); }
.thread-meta { display: flex; align-items: baseline; gap: 9px; margin-bottom: 3px; flex-wrap: wrap; }
.thread-meta .who { font-size: 12.5px; font-weight: 600; color: var(--charcoal); }
.thread-meta .when { font-size: 11px; color: var(--grey); font-variant-numeric: tabular-nums; }
.thread-body { font-size: 13.5px; line-height: 1.6; color: var(--slate); white-space: pre-wrap; }

/* ---------- Odometer readout (trip detail) ---------- */

.odo { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; }
.odo > div { display: flex; flex-direction: column; gap: 3px; }
.odo-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--grey); font-weight: 600; }
.odo-value { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.odo-value.big { font-size: 27px; color: var(--red); letter-spacing: -.01em; }
.odo-sep { color: var(--line-firm, #c9c9cd); font-size: 18px; padding-bottom: 4px; }
.odo-total { margin-left: auto; text-align: right; }
.odo-total .odo-value { display: block; }

.filters label.fl.inline { margin-bottom: 0; align-self: center; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--grey); }

@media (max-width: 620px) {
  .odo-total { margin-left: 0; text-align: left; width: 100%; }
}

/* ---------- User guide ---------- */

.guide { max-width: 760px; }
.guide p { margin: 0 0 12px; line-height: 1.65; color: var(--slate); }
.guide p:last-child { margin-bottom: 0; }
.guide ul, .guide ol { margin: 0 0 12px; padding-left: 20px; color: var(--slate); line-height: 1.65; }
.guide li { margin-bottom: 7px; }
.guide li:last-child { margin-bottom: 0; }
.guide strong { color: var(--charcoal); }
.guide code {
  font-family: var(--mono); font-size: 12px; color: var(--charcoal);
  background: #f7f7f8; border: 1px solid var(--line); padding: 1px 5px; border-radius: 3px;
}
.guide-list { margin: 0; }
.guide-list > div {
  display: grid; grid-template-columns: 168px 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--line-soft);
}
.guide-list > div:last-child { border-bottom: 0; }
.guide-list dt { font-weight: 600; color: var(--charcoal); font-size: 13px; }
.guide-list dd { margin: 0; color: var(--slate); line-height: 1.6; }
.guide-steps { counter-reset: step; list-style: none; padding-left: 0; }
.guide-steps li {
  position: relative; padding-left: 32px; margin-bottom: 11px;
}
.guide-steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}

@media (max-width: 700px) {
  .guide-list > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- Login ---------- */

.login-page { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.login-aside { background: var(--charcoal); color: #cfcfd2; padding: 52px 56px; display: flex; flex-direction: column; }
.login-aside .mark { display: flex; align-items: center; gap: 12px; margin-bottom: auto; }
.login-aside .mark img { width: 46px; height: 46px; background: #fff; border-radius: 4px; padding: 3px; object-fit: contain; }
.login-aside .mark-name { color: #fff; font-weight: 800; font-size: 17px; letter-spacing: .05em; line-height: 1.1; }
.login-aside .mark-sub { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: #8d8d92; }
.login-aside h1 { color: #fff; font-size: 30px; line-height: 1.22; max-width: 15ch; }
.login-aside .rule { width: 54px; height: 3px; background: var(--red); margin: 22px 0; }
.login-aside p { max-width: 42ch; line-height: 1.65; color: #a9a9ae; font-size: 13.5px; }
.login-stats { display: flex; gap: 34px; margin-top: 34px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .1); }
.login-stats .v { color: #fff; font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.login-stats .k { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: #75757b; margin-top: 2px; }
.login-aside .foot { margin-top: auto; padding-top: 34px; font-size: 11.5px; color: #6a6a70; }

.login-form { display: flex; align-items: center; justify-content: center; padding: 40px; background: var(--panel); }
.login-card { width: 100%; max-width: 348px; }
.login-card h2 { font-size: 21px; margin-bottom: 6px; }
.login-card .lead { color: var(--grey); font-size: 13px; margin: 0 0 26px; }
.login-card .fieldset { margin-bottom: 15px; }
.login-card .btn { width: 100%; justify-content: center; padding: 11px; font-size: 14px; }
.login-hint { margin-top: 22px; padding: 12px 14px; background: #fafafb; border: 1px solid var(--line); border-radius: var(--radius); font-size: 12px; color: var(--grey); line-height: 1.7; }
.login-hint code { font-family: var(--mono); color: var(--charcoal); background: #fff; border: 1px solid var(--line); padding: 1px 5px; border-radius: 3px; }

/* ---------- Error ---------- */

.error-page { display: grid; place-items: center; min-height: 100vh; text-align: center; padding: 24px; }
.error-page .code { font-size: 62px; font-weight: 800; color: var(--red); line-height: 1; }

@media (max-width: 1080px) {
  .cols-2, .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; }
  /* the nav wraps into a bar here — it must not scroll inside a fixed box */
  .nav { display: flex; flex-wrap: wrap; gap: 4px; overflow: visible; padding: 8px; }
  .nav a { flex: 1 1 auto; }
  .nav-label, .sidebar-foot { display: none; }
  .login-page { grid-template-columns: 1fr; }
  .login-aside { display: none; }
  .content, .topbar { padding-left: 16px; padding-right: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; gap: 3px; }

  /* The topbar is a single row on desktop: title on the left, actions pinned
     right. On a phone the actions are wider than the screen, and because they
     do not shrink the title was squeezed to zero width and broke one letter
     per line. Here the bar wraps instead — title on its own row, actions
     beneath it. */
  .topbar {
    position: static;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 12px; padding-bottom: 12px;
  }
  .topbar > div:first-child { flex: 1 1 100%; }
  .topbar h1 { font-size: 18px; }
  .topbar .sub { font-size: 11.5px; }
  .topbar-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
  }
  .topbar-actions .btn { flex: 0 1 auto; }
  .user-chip { margin-left: auto; padding-left: 12px; }
  .user-chip .who { font-size: 11.5px; }
  .user-chip .role { display: none; }

  .grid-kpi { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .kpi .value { font-size: 23px; }
}

/* ---------- Tables on phones ----------
   A register is a wide table. Below 620px it cannot be read by scrolling
   sideways — half the columns sit off-screen and the reader never finds
   them. Each row becomes a small labelled card instead, keeping the same
   markup and the same row accent for urgency. */
@media (max-width: 620px) {
  table.data thead { display: none; }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: auto; }

  table.data tr {
    padding: 12px 14px 12px 11px;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
  }
  table.data tr:last-child { border-bottom: 0; }
  table.data tbody tr:hover { background: transparent; }

  table.data td {
    border: 0;
    padding: 3px 0;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 10px;
    align-items: baseline;
    /* start, not stretch — otherwise a status pill is stretched the full
       width of the column and reads as a text box */
    justify-items: start;
    text-align: left !important;
  }
  table.data td::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 600; letter-spacing: .07em;
    text-transform: uppercase; color: var(--grey);
    padding-top: 2px;
  }
  /* the scope is the headline of the card, not a labelled field */
  table.data td[data-label="Scope of work"],
  table.data td[data-label="Route"] {
    display: block; padding-bottom: 7px;
  }
  table.data td[data-label="Scope of work"]::before,
  table.data td[data-label="Route"]::before { content: none; }
  table.data td[data-label="Scope of work"] .line,
  table.data td[data-label="Route"] .line {
    -webkit-line-clamp: 3; font-size: 14px;
  }
  table.data .scope { max-width: none; }
  table.data td:empty { display: none; }

  .pager { flex-wrap: wrap; gap: 6px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tabs a { white-space: nowrap; }
  .filters { gap: 6px; }
  .filters select, .filters input[type=date] { flex: 1 1 44%; min-width: 0; width: auto; }
}

@media (max-width: 460px) {
  /* Below this the user's name and the page actions cannot share a row. */
  .topbar-actions { gap: 6px; }
  .topbar-actions .btn { font-size: 12px; padding: 7px 10px; }
  .user-chip { width: 100%; margin-left: 0; padding-left: 0; border-left: 0;
               padding-top: 8px; border-top: 1px solid var(--line); }
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Print / PDF ---------- */

.print-only { display: none; }

@media print {
  @page { margin: 16mm 15mm; }

  .sidebar, .topbar, .filters, .tabs, .pager, .btn { display: none !important; }
  .print-only { display: block; }

  html, body { background: #fff; font-size: 10pt; line-height: 1.5; color: #1a1a1a; }
  .shell { display: block; }
  .main { display: block; }
  .content { padding: 0; }

  /* Cover masthead, printed once at the top of the first page. */
  .print-cover { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 3px solid var(--red); }
  .print-cover .row { display: flex; align-items: center; gap: 12px; }
  .print-cover img { width: 46px; height: 46px; object-fit: contain; }
  .print-cover .name { font-size: 15pt; font-weight: 800; letter-spacing: .04em; line-height: 1.1; }
  .print-cover .sub { font-size: 8pt; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
  .print-cover h1 { font-size: 21pt; margin-top: 16px; letter-spacing: -.01em; }
  .print-cover .lead { font-size: 10pt; color: var(--slate); margin-top: 5px; }

  /* Let a long topic flow onto the next page rather than leaving a third of
     the page blank — but never strand a heading at the foot of a page. */
  .guide { max-width: none; }
  .panel { border: 0; box-shadow: none; margin-bottom: 13px !important; }
  .panel:first-child { break-before: avoid; page-break-before: avoid; }
  .panel-head {
    padding: 0 0 6px; border-bottom: 1.5px solid var(--charcoal);
    margin-bottom: 10px; break-after: avoid; page-break-after: avoid;
  }
  .panel-head h2 { font-size: 13pt; }
  .panel-head .panel-note { font-size: 8.5pt; }
  .panel-body { padding: 0; }

  .guide p, .guide li, .guide-list dd { color: #333; line-height: 1.5; }
  .guide p { margin-bottom: 7px; break-inside: avoid; page-break-inside: avoid; }
  .guide ul, .guide ol { margin-bottom: 7px; }
  .guide-list > div { padding: 5px 0; break-inside: avoid; page-break-inside: avoid; }
  .guide li, .guide-steps li {
    margin-bottom: 5px; break-inside: avoid; page-break-inside: avoid;
  }
  .guide ul, .guide ol { orphans: 2; widows: 2; }
  .chip { border: 1px solid #ccc; }

  a { color: var(--charcoal); text-decoration: none; }
}

/* ---------------------------------------------------- training matrix ---- */

/* A grid of people against certificates. It is wide by nature, so it scrolls
   inside .table-wrap while the employee column stays put. */
table.matrix { min-width: max-content; }
table.matrix th.matrix-name,
table.matrix td.matrix-name {
  position: sticky; left: 0; z-index: 2; background: #fff;
  border-right: 1px solid var(--line); text-align: left; font-weight: 600;
  white-space: nowrap; max-width: 200px; overflow: hidden; text-overflow: ellipsis;
  /* A row header is a name, not a column label: the uppercase, letter-spaced
     treatment inherited from thead made people shout, and red is this app's
     urgency colour, so a name in red reads as a problem. */
  text-transform: none; letter-spacing: 0; font-size: 13px; padding: 8px 12px;
}
table.matrix tbody th.matrix-name a { color: var(--charcoal); }
table.matrix tbody th.matrix-name a:hover { color: var(--red); }
table.matrix thead th.matrix-name { z-index: 3; background: var(--paper-2, #fafafa); }
table.matrix th.matrix-col {
  writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
  height: 178px; padding: 8px 4px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: none; white-space: nowrap;
  vertical-align: bottom;
}
table.matrix th.matrix-col span { display: inline-block; max-height: 170px;
  overflow: hidden; text-overflow: ellipsis; }
td.matrix-cell { text-align: center; padding: 6px 8px; font-size: 11px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
td.matrix-cell a { display: block; padding: 3px 5px; border-radius: 3px;
  text-decoration: none; font-weight: 600; }
td.matrix-cell a:hover { text-decoration: none; outline: 1px solid var(--line); }
.cell-expired a { background: var(--red-wash); color: var(--red-dark); }
.cell-soon a    { background: var(--amber-wash); color: #8a6100; }
.cell-valid a   { background: var(--green-wash); color: var(--green); }
.cell-none a    { color: #c9c9cd; font-weight: 400; }

.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
  margin: 0 4px 0 10px; vertical-align: baseline; }
.swatch-expired { background: var(--red-wash); outline: 1px solid #f3d2d2; }
.swatch-soon    { background: var(--amber-wash); outline: 1px solid #f3e2b8; }
.swatch-valid   { background: var(--green-wash); outline: 1px solid #cfe6d9; }

@media (max-width: 620px) {
  /* The stacked-card table layout would destroy a matrix, so it keeps its
     grid and scrolls instead. */
  table.matrix, table.matrix thead, table.matrix tbody,
  table.matrix tr, table.matrix th, table.matrix td { display: revert; }
  table.matrix th.matrix-col { height: 150px; }
  table.matrix th.matrix-col span { max-height: 142px; }
}

/* ------------------------------------------------- site roster (0007) ---- */

/* People down the side, the period's days across, one code per cell — the
   site's own Summary sheet. Colour families follow the roster in use at LSP:
   blue for a day shift, navy for a night, grey for off, a family each for
   leave, sick, absent, training and the rest. */
table.roster { min-width: max-content; }
table.roster th, table.roster td { padding: 5px 3px; text-align: center; }
table.roster th.day { min-width: 36px; font-size: 10px; letter-spacing: 0;
  text-transform: none; line-height: 1.3; color: var(--slate); }
table.roster th.day b { display: block; font-size: 12px; color: var(--charcoal); }
table.roster .wkend { background: #f3f3f5; }
table.roster th.day.is-today { box-shadow: inset 0 0 0 2px var(--amber); }
table.roster tr.count-row th, table.roster tr.count-row td {
  font-size: 11px; color: var(--slate); font-weight: 500; padding: 4px 3px;
  background: #fbfbfc; }
table.roster tr.count-row th.matrix-name { font-weight: 500; color: var(--grey); }
table.roster td.tot { font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 5px 8px; white-space: nowrap; }
table.roster th.tot { font-size: 10px; letter-spacing: .04em; padding: 5px 8px; }
table.roster td.tot.first, table.roster th.tot.first { border-left: 1px solid var(--line); }
table.roster td.matrix-name small { display: block; font-weight: 400; color: var(--grey);
  font-size: 11px; }
table.roster tr.group th { text-align: left; font-size: 11px; letter-spacing: .06em;
  padding: 12px 12px 6px; background: #fff; }

.rc { display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 26px; padding: 0 3px; border-radius: 4px;
  font-size: 11px; font-weight: 700; position: relative; text-decoration: none;
  font-variant-numeric: tabular-nums; }
a.rc:hover { text-decoration: none; filter: brightness(1.08); }
.rc-day      { background: #24508a; color: #fff; }
.rc-night    { background: #142944; color: #f9c84a; }
.rc-off      { background: #e9e9ec; color: #565663; }
.rc-leave    { background: #dcefed; color: #1d6b63; }
.rc-sick     { background: #ebe4f5; color: #5b3f8c; }
.rc-absent   { background: #b8401a; color: #fff; }
.rc-training { background: var(--green-wash); color: var(--green); box-shadow: inset 0 0 0 1px #cfe6d9; }
.rc-other    { background: var(--amber-wash); color: #8a6100; box-shadow: inset 0 0 0 1px #f3e2b8; }
.rc-unknown  { background: #fff; color: var(--slate); box-shadow: inset 0 0 0 1px var(--grey); }
.rc-blank    { color: #c9c9cd; font-weight: 400; min-width: 30px; }
/* A comment on the cell, marked the way Excel marks one. */
.rc.has-note::after { content: ""; position: absolute; top: 0; right: 0;
  border-style: solid; border-width: 0 7px 7px 0;
  border-color: transparent var(--red) transparent transparent; border-top-right-radius: 4px; }
/* The clocking flags. Outlines, not fills, so the code stays readable. */
.rc.flag-no_clock   { outline: 2px solid var(--red); outline-offset: 1px; }
.rc.flag-unrostered { outline: 2px dashed var(--steel); outline-offset: 1px; }
.rc.flag-other_hours { outline: 2px dotted #c98a00; outline-offset: 1px; }
/* A chip is a link; the table's own link colour must not win over it. */
table.data td a.rc-day, table.data td a.rc-absent { color: #fff; }
table.data td a.rc-night    { color: #f9c84a; }
table.data td a.rc-off      { color: #565663; }
table.data td a.rc-leave    { color: #1d6b63; }
table.data td a.rc-sick     { color: #5b3f8c; }
table.data td a.rc-training { color: var(--green); }
table.data td a.rc-other    { color: #8a6100; }
table.data td a.rc-unknown  { color: var(--slate); }
table.data td a.rc-blank    { color: #c9c9cd; font-weight: 400; }
table.data td a.rc:hover    { filter: brightness(1.12); }
/* A visit started this day: a dot under the code. */
.clk { display: block; width: 5px; height: 5px; border-radius: 50%; margin: 3px auto 0;
  background: var(--green); }
.clk.none { background: transparent; }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center;
  font-size: 12px; color: var(--slate); }
.legend span.item { display: inline-flex; align-items: center; gap: 6px; }
.legend .rc { min-width: 26px; height: 22px; font-size: 10px; }

/* Production tracker: rigs down the side, days across. */
table.tracker { min-width: max-content; }
table.tracker th, table.tracker td { padding: 6px 7px; text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tracker th.day { min-width: 38px; font-size: 10px; letter-spacing: 0;
  text-transform: none; text-align: center; line-height: 1.3; }
table.tracker th.day b { display: block; font-size: 12px; color: var(--charcoal); }
table.tracker td.sum { background: #fafafb; font-weight: 600; }
table.tracker td.sum.first, table.tracker th.sum.first { border-left: 1px solid var(--line); }
table.tracker td.daycell.src-reports { color: var(--steel); font-weight: 700; }
table.tracker td.daycell.src-manual { font-style: italic; }
table.tracker td.daycell.zero { color: #b5b5bb; }
table.tracker td.daycell.blank { color: #d4d4d8; }
table.tracker tr.total td, table.tracker tr.total th { border-top: 1px solid var(--line);
  font-weight: 700; }
.below { color: var(--red-dark); }
.above { color: var(--green); }

@media (max-width: 620px) {
  table.roster, table.roster thead, table.roster tbody, table.roster tr,
  table.roster th, table.roster td,
  table.tracker, table.tracker thead, table.tracker tbody, table.tracker tr,
  table.tracker th, table.tracker td { display: revert; }
  table.roster thead, table.tracker thead { display: table-header-group; }
}