:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #d9dde2;
  --text: #1c2733;
  --muted: #5b6672;
  --accent: #1f6feb;
  --accent-weak: #e7f0fe;
  --ok: #1a7f37;
  --warn: #9a6700;
  --danger: #cf222e;
  --danger-weak: #ffebe9;
  --radius: 8px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

[x-cloak] { display: none !important; }
/* The browser's own [hidden]{display:none} is user-agent-origin, so an
   author rule of equal specificity (e.g. .btn{display:inline-block}) wins
   over it and silently defeats a plain `hidden` attribute -- force it. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 3px; }

.topbar {
  display: flex;
  align-items: center;
  gap: 12px 22px;
  flex-wrap: wrap;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 11px 24px;
}
/* The wordmark is a static SVG traced from the reference artwork (see
   _brand.html) -- CSS attempts to spread "ENABLE" to match "ENBL"'s width
   (flexbox, then SVG textLength) never rendered consistently everywhere.
   Size it via width on .brand-svg; height follows the file's own aspect
   ratio. .topbar's align-items:center handles vertical centering. */
.brand-svg { display: block; }
.topbar .brand { display: inline-flex; align-items: center; }
.topbar .brand-svg { width: 65px; }
/* ===================== Auth / login ===================== */
.authpage { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.authmain { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 22px; color: var(--text); }
.login-brand .brand-svg { width: 160px; }
.login-brand .brand-url { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: .03em; }
.authcard { width: 100%; max-width: 400px; padding: 26px 28px 28px; }
.authcard h1 { margin: 0 0 4px; font-size: 22px; }
.authcard > p.subtle { margin: 0 0 20px; }
.authcard label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.authfield { position: relative; margin-bottom: 16px; }
.authfield > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; }
.authpage .authfield input { width: 100%; height: 42px; padding: 0 40px 0 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 14px; line-height: 1.4; }
.authpage .authfield input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.authtoggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.authtoggle svg { width: 17px; height: 17px; }
.authtoggle:hover { color: var(--text); }
.authsubmit { width: 100%; height: 42px; margin-top: 4px; font-size: 15px; }
.autherr { margin-bottom: 14px; padding: 9px 12px; border: 1px solid var(--danger); border-radius: 8px; background: var(--danger-weak); color: var(--danger); font-size: 13px; }
.autherr ul { margin: 0; padding-left: 16px; }
.otp-boxes { display: flex; gap: 8px; }
.otp-box { width: 44px; height: 52px; text-align: center; font-size: 22px; font-weight: 600; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.otp-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); }
.otp-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.authfoot { display: flex; justify-content: space-between; gap: 12px; padding: 16px 24px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.topbar nav { display: flex; gap: 18px; }
.topbar nav a { color: var(--muted); padding: 4px 0; border-bottom: 2px solid transparent; }
.topbar nav a:hover { color: var(--text); text-decoration: none; }
.topbar nav a.active { color: var(--text); font-weight: 600; border-bottom-color: var(--accent); }
.topbar .spacer { flex: 1; }
.topbar .search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 380px; height: 34px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 0 12px;
}
.topbar .search svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.topbar .search input { border: none; background: none; outline: none; font: inherit; width: 100%; padding: 0; }

.iconbtn {
  position: relative; display: inline-flex; width: 34px; height: 34px; flex: none;
  align-items: center; justify-content: center; border-radius: 8px; color: var(--muted);
}
.iconbtn svg { width: 18px; height: 18px; }
.iconbtn:hover { background: var(--bg); text-decoration: none; }
.iconbtn .dot {
  position: absolute; top: 2px; right: 2px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.topbar nav a .navcount {
  font-size: 11px; font-weight: 700; background: var(--bg); color: var(--muted);
  border-radius: 999px; padding: 0 6px;
}
.topbar nav a.active .navcount { background: var(--accent-weak); color: var(--accent); }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent-weak); color: var(--accent); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.userbox, .productswitch { position: relative; }
.productswitch > button { display: flex; align-items: center; gap: 4px; background: none; border: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--text); padding: 0 10px 0 0; }
.productswitch .menu { min-width: 140px; }
.productswitch .menu a.active { font-weight: 600; color: var(--accent); }
.userbox > button { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; font: inherit; }
.userbox .nm { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--text); }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 170px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}
.menu a, .menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 6px;
  color: var(--text); background: none; border: none; font: inherit; cursor: pointer;
}
.menu a:hover, .menu button:hover { background: var(--bg); text-decoration: none; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.userbox .menu a, .userbox .menu button { display: flex; align-items: center; gap: 10px; }
.userbox .menu svg { width: 15px; height: 15px; flex: none; color: var(--muted); }

.container { max-width: 1280px; margin: 0 auto; padding: 24px 24px 64px; }

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 22px 0 12px; }
h3 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.subtle { color: var(--muted); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 800px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

.stat { text-align: left; }
.stat .value { font-size: 24px; font-weight: 700; }
.stat .label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }

table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr:hover td { background: #fafbfc; }
tr.done td { color: var(--muted); text-decoration: line-through; }
tr.done td .btn, tr.done td .pill { text-decoration: none; }

.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--muted);
}
.pill-list { display: flex; flex-wrap: wrap; gap: 5px 6px; }
.badge.accent { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.badge.ok { background: #e6f6ea; color: var(--ok); border-color: transparent; }
.badge.warn { background: #fff5e0; color: var(--warn); border-color: transparent; }
.badge.danger { background: var(--danger-weak); color: var(--danger); border-color: transparent; }

.btn {
  display: inline-block; padding: 7px 14px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; font-size: 14px;
  /* Reset native form-control chrome -- Safari otherwise gives a lone
     visible submit button (e.g. when a sibling is x-show-hidden) its own
     pill-shaped "default button" glow on top of this styling. */
  appearance: none; -webkit-appearance: none;
}
.btn:hover { text-decoration: none; border-color: var(--muted); }
.btn svg { width: 14px; height: 14px; vertical-align: -2px; flex: none; }
.btn.small svg { width: 12px; height: 12px; }
a.btn:has(svg), button.btn:has(svg) { display: inline-flex; align-items: center; gap: 6px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.small { padding: 3px 9px; font-size: 12px; }

.messages { list-style: none; padding: 0; margin: 0 0 16px; }
.messages li { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 8px; border: 1px solid var(--border); background: var(--surface); }
.messages li.success { background: #e6f6ea; border-color: transparent; }
.messages li.error { background: var(--danger-weak); border-color: transparent; }

/* Form controls — one look everywhere, matching the dashboard chips */
input[type="text"], input[type="search"], input[type="date"], input[type="month"], input[type="number"],
input[type="email"], input[type="password"], input[type="url"], input[type="tel"],
select, textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 11px;
}
/* Single-line controls share an exact height so <select> and <input type=date>
   don't render at slightly different heights side by side. */
input[type="text"], input[type="search"], input[type="date"], input[type="month"], input[type="number"],
input[type="email"], input[type="password"], input[type="url"], input[type="tel"],
select { height: 36px; line-height: 1.4; }
select { cursor: pointer; }
textarea { resize: vertical; }
input[type="search"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%235b6672' stroke-width='2' stroke-linecap='round'><circle cx='6.5' cy='6.5' r='4.5'/><line x1='14' y1='14' x2='10' y2='10'/></svg>");
  background-repeat: no-repeat; background-position: 10px center; padding-left: 30px;
}

form.stacked label { display: block; font-weight: 600; margin: 12px 0 4px; }
form.stacked input, form.stacked select, form.stacked textarea { width: 100%; }
form.stacked .helptext { color: var(--muted); font-size: 12px; }
form.stacked .errorlist { color: var(--danger); font-size: 12px; margin: 4px 0; padding-left: 16px; }
fieldset { border: 1px solid var(--border); border-radius: var(--radius); margin: 0 0 16px; padding: 8px 16px 16px; }
legend { font-weight: 700; padding: 0 6px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters select { min-width: 148px; }
.filters input[type="search"] { min-width: 240px; flex: 1 1 240px; max-width: 360px; }
.toolbar { display: flex; gap: 8px; }

.fdrop { position: relative; }
.fdrop-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.fpanel {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40; width: 260px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
}
.fpanel .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.fpanel .field > label { font-weight: 600; font-size: 13px; }
.fpanel .field > select { width: 100%; }
.fpanel-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; }
.dl { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; }
.dl dt { color: var(--muted); }
.dl dd { margin: 0; }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a, .tabs button {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 8px 12px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; font: inherit; color: var(--muted); cursor: pointer;
}
.tabs a:hover, .tabs button:hover { color: var(--text); text-decoration: none; }
.tabs a.active, .tabs button.active {
  color: var(--text); font-weight: 600; border-bottom-color: var(--accent);
}
.tabs .tab-n { font-size: 11px; font-weight: 700; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 0 6px; }
.tabs .active .tab-n { background: var(--accent-weak); color: var(--accent); }
.tabs .tabmore { position: relative; margin-left: auto; }
.tabs .tabmore > button svg { width: 13px; height: 13px; }
.tabs .tabmore .menu { min-width: 150px; }
.tabs .tabmore .menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 0; border-bottom: none; color: var(--text); }
.tabs .tabmore .menu .tab-n { background: var(--bg); color: var(--muted); }
.empty { color: var(--muted); padding: 24px; text-align: center; }

/* Per-opportunity breadcrumb + sub-navigation */
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }
.subnav {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border); margin-bottom: 20px;
}
.subnav a, .subnav button {
  padding: 8px 12px; border: none; background: none; font: inherit; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subnav a:hover, .subnav button:hover { color: var(--text); text-decoration: none; }
.subnav a.active, .subnav button.active {
  color: var(--text); font-weight: 600; border-bottom-color: var(--accent);
}

/* Two-column form fields (big forms) */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 24px; align-items: start; }
.form-grid .field { margin-bottom: 14px; }
.form-grid .field.wide { grid-column: 1 / -1; }
.form-grid .field > label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 5px; }
.form-grid .field > input, .form-grid .field > select, .form-grid .field > textarea,
.form-grid .field > .ig { width: 100%; }
.form-grid .field input[type="checkbox"], .form-grid .field input[type="radio"] { width: auto; }
.form-grid .field > label.inline-check { display: flex; align-items: center; gap: 8px; }
.req { color: var(--danger); font-weight: 700; }
.form-grid .field .helptext { color: var(--muted); font-size: 12px; margin-top: 4px; }
.form-grid .field .counter { text-align: right; color: var(--muted); font-size: 11px; margin-top: 2px; }
.form-grid .field:has(> .counter) { margin-bottom: 6px; }
.form-grid .field .errorlist { color: var(--danger); font-size: 12px; margin: 4px 0 0; padding-left: 16px; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }

/* prefix add-on (MYR / %) */
.ig { display: flex; align-items: stretch; }
.ig .ig-pre {
  display: flex; align-items: center; padding: 0 12px; flex: none;
  background: var(--bg); border: 1px solid var(--border); border-right: none;
  border-radius: 8px 0 0 8px; color: var(--muted); font-size: 13px; font-weight: 600;
}
.ig > input, .ig > select { border-radius: 0 8px 8px 0; flex: 1; min-width: 0; }

/* form page: header, stepper, section cards */
.formhead { align-items: flex-start; }
.formhead-title { display: flex; gap: 14px; align-items: flex-start; }

.stepper { display: flex; list-style: none; margin: 2px 0 0; padding: 0; }
.stepper li { display: flex; align-items: flex-start; }
.stepper li a { display: flex; flex-direction: column; align-items: center; gap: 5px; color: var(--muted); padding: 0 4px; }
.stepper li a:hover { text-decoration: none; color: var(--text); }
.stepper .s-num {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--surface); color: var(--muted); border: 1px solid var(--border);
}
.stepper li.on .s-num { background: var(--accent); color: #fff; border-color: var(--accent); }
.stepper .s-lbl { font-size: 11px; }
.stepper li:not(:last-child)::after { content: ""; width: 22px; height: 1px; background: var(--border); margin: 13px -2px 0; }
@media (max-width: 720px) { .stepper .s-lbl { display: none; } }

.infobar {
  display: flex; align-items: center; gap: 10px; font-size: 13px;
  background: var(--accent-weak); border: 1px solid #d3e3fb; border-radius: var(--radius);
  padding: 11px 14px; margin-bottom: 18px;
}
.infobar svg { width: 16px; height: 16px; color: var(--accent); flex: none; }

.formsec { margin-bottom: 18px; padding: 22px; }
.formsec > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.formsec > header h3 { margin: 0; font-size: 15px; }
.formsec > header p { margin: 2px 0 0; font-size: 12.5px; }

.formsec.compact .form-grid { gap: 10px 24px; }
.formsec.compact .field { display: grid; grid-template-columns: 130px 1fr; align-items: center; margin-bottom: 0; }
.formsec.compact .field > label { margin: 0; }
.formsec.compact .field .helptext, .formsec.compact .field .errorlist { grid-column: 2; }

.formfoot { justify-content: flex-start; margin-top: 4px; }

/* Horizontal bar chart (dashboard) */
.barchart { display: grid; grid-template-columns: minmax(0, 160px) 1fr max-content; gap: 9px 12px; align-items: center; }
.barchart .bc-label { color: var(--text); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barchart .bc-track { background: var(--bg); border-radius: 4px; height: 20px; overflow: hidden; }
.barchart .bc-fill { height: 100%; background: var(--accent); border-radius: 0 4px 4px 0; min-width: 2px; }
.barchart .bc-value { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.barchart a.bc-label:hover { text-decoration: underline; }

/* Inline action forms (Move stage / Record a decision) */
.action-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.action-row .fld { display: flex; flex-direction: column; gap: 4px; }
.action-row .fld > label { font-weight: 600; }
.action-row .fld > select,
.action-row .fld > input[type="text"],
.action-row .fld > input[type="date"],
.action-row .fld > textarea {
  padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px;
  font: inherit; background: var(--surface); min-width: 200px;
}
.action-row .fld > textarea { resize: vertical; }
.action-row .fld.grow { flex: 1 1 280px; }
.action-row .fld.grow > input[type="text"],
.action-row .fld.grow > textarea { width: 100%; min-width: 0; }

/* Hover/focus help bubble next to a heading */
.help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 8px; vertical-align: middle;
  border: 1px solid var(--border); border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1; color: var(--muted);
  cursor: help; position: relative;
}
.help:hover, .help:focus {
  background: var(--accent-weak); color: var(--accent);
  border-color: transparent; outline: none;
}
.help::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 30;
  width: 340px; max-width: 72vw;
  background: var(--text); color: #fff;
  padding: 9px 11px; border-radius: 6px;
  font-size: 12px; font-weight: 400; line-height: 1.45; text-align: left;
  white-space: normal;
  opacity: 0; visibility: hidden; transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease;
}
.help:hover::after, .help:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* --- Delivery workspaces (mobilisation, execution) --- */
.plan-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: stretch; }
.plan-split > section { display: flex; flex-direction: column; min-width: 0; }
.plan-split > section > h3:first-child { margin: 0 0 10px; font-size: 14px; }
.plan-split > section > .tablecard,
.plan-split > section > .pd-box { flex: 1; }
.plan-split .pd-box { border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 14px 16px; }
@media (max-width: 820px) { .plan-split { grid-template-columns: 1fr; } }

/* Readiness checklist: collapsible per-area accordion */
.ck-hdrbar { flex: none; width: 170px; }
.ck-hdrbar .progress { height: 8px; }
.cklist { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ckcat + .ckcat { border-top: 1px solid var(--border); }
.ckcat-head { display: grid; align-items: center; gap: 14px; cursor: pointer; padding: 11px 16px 11px 14px;
  grid-template-columns: 18px minmax(110px, 1fr) 48px minmax(110px, 2fr) 38px; }
.ckcat-head:hover { background: var(--bg); }
.ckcat-row { display: contents; }
.ckcat-name { font-weight: 600; }
.ckcat-count, .ckcat-pct { white-space: nowrap; text-align: right; }
.ckcat-bar .progress { height: 8px; }
.checklist.ckcat-items { border: none; border-radius: 0; margin: 0; background: var(--bg); }
.checklist.ckcat-items li { padding-left: 34px; }

.regrow { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; }
.regrow:hover { background: var(--bg); }
.regrow .reg-name { font-weight: 600; }
.regrow .reg-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* --- Tender review workspace --- */
a.card.statlink { display: block; color: var(--text); }
a.card.statlink:hover { border-color: var(--muted); text-decoration: none; }

.addbox {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 14px; margin-bottom: 12px;
}
.addbox .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.addbox .full { grid-column: 1 / -1; }
.addbox label { display: block; font-weight: 600; font-size: 12px; margin-bottom: 3px; }
.addbox input, .addbox select, .addbox textarea {
  width: 100%; padding: 7px 11px; border: 1px solid var(--border);
  border-radius: 8px; font: inherit; background: var(--surface);
}
.addbox textarea { resize: vertical; }
.addbox .actions { margin-top: 12px; display: flex; gap: 8px; }
@media (max-width: 640px) { .addbox .grid2 { grid-template-columns: 1fr; } }

/* Status pills — one component, keyed by value. `.badge` shares the shape. */
.pill, .badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--bg); color: var(--muted); border: 1px solid var(--border);
}
/* positive / done */
.badge.ok,
.pill-compliant, .pill-closed, .pill-ready, .pill-complete, .pill-done,
.pill-accepted, .pill-approved, .pill-green, .pill-resolved, .pill-won, .pill-paid
  { background: #e6f6ea; color: var(--ok); border-color: transparent; }
/* negative / blocked */
.badge.danger,
.pill-non_compliant, .pill-missed, .pill-rejected, .pill-red,
.pill-high, .pill-critical, .pill-blocked, .pill-off_track, .pill-lost
  { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
/* attention / in-flight */
.badge.warn,
.pill-partial, .pill-open, .pill-pending, .pill-amber, .pill-returned,
.pill-mitigating, .pill-medium, .pill-at_risk, .pill-overdue
  { background: #fff5e0; color: var(--warn); border-color: transparent; }
/* informational */
.badge.accent,
.pill-answered, .pill-in_progress, .pill-issued
  { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
/* neutral: not_started, not_assessed, not_applicable, cancelled, low — default styling */

.progress { height: 8px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: 12px; }
.progress > span { display: block; height: 100%; background: var(--ok); }
.checklist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); }
.checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border); }
.checklist li:first-child { border-top: none; }
.checklist li.done .ci-text { color: var(--muted); text-decoration: line-through; }
.checklist input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; cursor: pointer; }
.checklist .ci-mark { flex: none; width: 16px; text-align: center; font-weight: 700; color: var(--danger); }
.checklist li.done .ci-mark { color: var(--ok); }
.checklist .ci-text { flex: 1; }
.checklist .ci-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

.inline-add {
  display: flex; align-items: center; gap: 8px; flex: 1 1 240px;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 3px 3px 3px 10px; background: var(--surface);
}
.inline-add input {
  flex: 1; border: none; outline: none; background: none; font: inherit; padding: 6px 0;
}
.inline-add button {
  flex: none; border: 1px solid var(--border); background: var(--bg); color: var(--text);
  padding: 6px 14px; border-radius: 6px; cursor: pointer; font: inherit;
}
.inline-add button:hover { border-color: var(--muted); }

.checklist .ci-del button,
.del-x {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 4px;
}
.checklist .ci-del button:hover, .del-x:hover { color: var(--danger); }

/* Stage-gate checklist */
.gate { margin-bottom: 14px; }
.gate-list { list-style: none; margin: 0; padding: 0; }
.gate-list li { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; font-size: 13px; }
.gate-list li .mark { font-weight: 700; width: 1em; text-align: center; }
.gate-list li.met { color: var(--muted); }
.gate-list li.met .mark { color: var(--ok); }
.gate-list li.unmet { color: var(--text); }
.gate-list li.unmet .mark { color: var(--danger); }

/* ===================== Dashboard v2 ===================== */
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-head h1 { margin: 0; }
/* Also used standalone as a filter-row wrapper (e.g. above a tablecard),
   not just inside .dash-head/.page-head. */
.tools { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tools label { font-size: 13px; color: var(--muted); }
/* Filter chip and the action button sit at the same height. */
.tools .dchip,
.tools .btn { height: 38px; box-sizing: border-box; display: inline-flex; align-items: center; }
.tools .dchip { padding: 0 14px; }
.tools .dchip select, .tools .dchip input { height: auto; line-height: 1.4; }
.dchip {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  font-size: 13px; color: var(--text);
}
.dchip svg { width: 15px; height: 15px; color: var(--muted); }
.dchip select, .dchip input { border: none; background: none; outline: none; font: inherit; padding: 0; border-radius: 0; height: auto; }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1000px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .statgrid { grid-template-columns: 1fr; } }
.statcard { position: relative; display: flex; gap: 14px; align-items: flex-start; }
.statcard .big { font-size: 26px; font-weight: 800; line-height: 1.1; }
.statcard .lbl { color: var(--muted); font-size: 13px; margin: 3px 0 9px; }
.statcard .viewall { position: absolute; top: 16px; right: 16px; font-size: 13px; }
.statcard.ok { background: #e6f6ea; border-color: transparent; }
.statcard.ok .big { color: var(--ok); }
.statcard.danger { background: var(--danger-weak); border-color: transparent; }
.statcard.danger .big { color: var(--danger); }
.trend { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.trend .vs { color: var(--muted); font-weight: 400; }
.trend.up { background: #e6f6ea; color: #1a7f37; }
.trend.down { background: #ffebe9; color: #cf222e; }
.trend.flat { background: var(--bg); color: var(--muted); }

/* funnel / stage stepper */
.funnel { display: flex; align-items: stretch; overflow-x: auto; padding-bottom: 4px; }
.funnel-step {
  flex: 1 1 0; min-width: 120px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); padding: 14px 10px; text-align: center;
}
.funnel-step.on { background: #eef4fe; border-color: #cfe0fb; }
.funnel-step .num {
  width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 8px;
  background: var(--bg); color: var(--muted); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.funnel-step.on .num { background: var(--accent); color: #fff; }
.funnel-step .nm { font-size: 12.5px; font-weight: 600; line-height: 1.25; min-height: 2.5em; }
.funnel-step .oc { color: var(--muted); font-size: 12px; margin-top: 6px; }
.funnel-step .mv { font-weight: 700; font-size: 13px; margin-top: 2px; }
.funnel-step.on .nm, .funnel-step.on .mv { color: var(--accent); }
.funnel-arrow { display: flex; align-items: center; color: var(--border); font-size: 16px; padding: 0 1px; flex: none; }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg a, .seg button { border: none; background: var(--surface); padding: 6px 13px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; color: var(--muted); }
.seg a { text-decoration: none; }
.seg a + a, .seg button + button { border-left: 1px solid var(--border); }
.seg a.on, .seg button.on { background: var(--accent); color: #fff; border-left-color: var(--accent); }

/* vertical bar chart */
.vbars { display: flex; align-items: flex-end; gap: 10px; height: 160px; border-bottom: 1px solid var(--border); padding-top: 22px; }
.vbars .col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.vbars .col .b { width: 60%; max-width: 32px; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 3px; }
.vbars .col .b.zero { background: var(--border); }
.vbars .col .cv { font-size: 11px; font-weight: 700; color: var(--muted); }
.vlabels { display: flex; gap: 10px; margin-top: 7px; }
.vlabels span { flex: 1; min-width: 0; text-align: center; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cardhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cardhead h3 { margin: 0; }
.cardhead a { font-size: 13px; }
.owner-cell { display: inline-flex; align-items: center; gap: 7px; vertical-align: middle; }

.dash-lower { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 16px; margin-top: 16px; }
@media (max-width: 1000px) { .dash-lower { grid-template-columns: 1fr; } }
.funnel-step:not(.on) .mv { color: var(--muted); font-weight: 600; }
a.funnel-step { color: inherit; text-decoration: none; display: block; }
a.funnel-step:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 1px 5px rgba(31, 111, 235, .14); }
.owner-cell .avatar.sm { flex: none; }

.owner-cell { white-space: nowrap; }

.field .attached { font-size: 12px; color: var(--muted); margin-bottom: 5px; }

.uploadgrp {
  grid-column: 1 / -1; margin-top: 4px;
  border: 1px dashed var(--border); border-radius: 8px; padding: 12px 14px 4px;
  background: var(--bg);
}
.uploadgrp-head { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.uploadgrp-head strong { color: var(--text); }
.uploadgrp .form-grid { gap: 2px 20px; }

/* ===== Consistent page headers (dashboard look) ===== */
.page-head .ph-title { display: flex; gap: 14px; align-items: flex-start; }
.page-head .ph-title h1 { margin: 0; }
.page-head .ph-title p { margin: 3px 0 0; }
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

.action-callout { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 8px;
  background: var(--accent-weak); flex-wrap: wrap; }
.action-callout > svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.action-callout .act-text { flex: 1; font-size: 13px; min-width: 200px; }
.action-callout .btn { flex: none; padding: 7px 14px; font-size: 14px; line-height: 1.5; box-sizing: border-box; font-family: inherit; }
.action-callout.warn { background: #fff5e0; }
.action-callout.warn > svg { color: var(--warn); }
.action-callout.danger { background: var(--danger-weak); }
.action-callout.danger > svg { color: var(--danger); }

.meta-lines { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.meta-lines .meta-line { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.meta-lines .meta-line svg { width: 14px; height: 14px; flex: none; color: var(--muted); }

.stacked-list { display: flex; flex-direction: column; gap: 8px; }

/* table shown as a panel */
/* Caps a long name at 2 lines regardless of truncatechars length, so a
   dashboard table row never grows past a predictable height. */
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tablecard { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.tablecard > table { border: 0; }
.tablecard > table th { background: #fafbfc; }
.tablecard > table tr:last-child td { border-bottom: none; }
.tablecard.scroll-x { overflow-x: auto; }

/* Fixed column proportions for wide, badge-heavy tables (e.g. the Projects
   list). The min-width guarantees every column's percentage still resolves
   to enough real pixels for its worst-case content (a long stage badge, a
   7-figure amount) so nothing wraps or truncates -- narrower viewports fall
   back to the .scroll-x horizontal scroll instead of squeezing columns. */
.opp-table { table-layout: fixed; width: 100%; min-width: 1600px; }
.opp-table th.num, .opp-table td.num { text-align: right; }

.opp-table .stick-name, .opp-table .stick-company { position: sticky; background: var(--surface); }
.opp-table .stick-name { left: 0; }
.opp-table .stick-company { left: 288px; box-shadow: 4px 0 6px -4px rgba(0,0,0,.15); }
.opp-table thead .stick-name, .opp-table thead .stick-company { background: #fafbfc; z-index: 2; }
.opp-table tbody .stick-name, .opp-table tbody .stick-company { z-index: 1; }
.opp-table tbody tr:hover .stick-name, .opp-table tbody tr:hover .stick-company { background: #fafbfc; }

/* Standalone "stacked" forms get the card panel look */
.container > form.stacked {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 22px 20px; max-width: 780px;
}
.container > form.stacked > fieldset { border: 0; padding: 0; margin: 0; }
.container > form.stacked > fieldset > legend { padding: 0; margin: 14px 0 2px; font-size: 14px; }
.container > form.stacked .toolbar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* ===== Opportunity detail — header card + overview ===== */
.detailhead { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.detailhead .dh-body { flex: 1; min-width: 0; }
.detailhead .dh-kicker { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.detailhead h1 { margin: 2px 0 4px; }
.detailhead .dh-body > .subtle { margin: 0 0 9px; }
.detailhead .dh-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.detailhead .dh-badges .badge svg { width: 12px; height: 12px; vertical-align: -1px; }
.detailhead .dh-actions { display: flex; gap: 8px; flex: none; }
.detailhead .dh-actions .btn svg { width: 13px; height: 13px; vertical-align: -2px; }
@media (max-width: 720px) { .detailhead { flex-wrap: wrap; } .detailhead .dh-actions { width: 100%; } }

/* section card with an icon + title + action header row */
.card > header.ch { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.card > header.ch h3 { margin: 0; font-size: 15px; flex: 1; }

.dl.tight { grid-template-columns: fit-content(190px) 1fr; gap: 7px 18px; }
.dl.tight dd .badge { margin-left: 4px; }

/* 9-stage step indicator */
.stagebar { display: flex; margin-bottom: 20px; }
.stagebar .step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; padding: 0 2px; }
.stagebar .step .dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  background: var(--surface); border: 2px solid var(--border); color: var(--muted); }
.stagebar .step .dot svg { width: 15px; height: 15px; }
.stagebar .step.done .dot, .stagebar .step.current .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.stagebar .step:not(:first-child)::before { content: ""; position: absolute; z-index: 0; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.stagebar .step.done::before, .stagebar .step.current::before { background: var(--accent); }
.stagebar .step .nm { font-size: 11px; margin-top: 7px; line-height: 1.2; color: var(--muted); }
.stagebar .step.current .nm { color: var(--text); font-weight: 700; }
@media (max-width: 820px) { .stagebar { overflow-x: auto; padding-bottom: 4px; } .stagebar .step { min-width: 92px; } }

/* assessment score bars */
.scorebars { display: grid; grid-template-columns: minmax(120px, max-content) 1fr max-content; gap: 10px 12px; align-items: center; }
.scorebars .lbl { font-size: 13px; }
.scorebars .lbl.strong { font-weight: 700; }
.scorebars .track { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.scorebars .fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.scorebars .fill.ok { background: var(--ok); }
.scorebars .val { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.scorebars .div { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: 2px 0; }

/* "at a glance" tinted card */
.card.glance { background: var(--accent-weak); border-color: #d3e3fb; }
.glance-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.glance-pair .big { font-size: 21px; font-weight: 800; line-height: 1.15; }
.glance-pair .lbl, .glance-row .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.glance-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #cfe0fb; }
.glance-row.budgetgrid { row-gap: 0; }
.glance-row .v { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.glance-row .v svg { width: 15px; height: 15px; color: var(--accent); flex: none; }
.dot-on { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; display: inline-block; }

.status-dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex: none; }
.status-dot svg { width: 13px; height: 13px; }
.status-dot.ok { background: #e6f6ea; color: var(--ok); }
.status-dot.warn { background: #fff5e0; color: var(--warn); }

.glance-row a { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.glance-row a svg { width: 12px; height: 12px; flex: none; }
.glance-callout { display: flex; gap: 9px; margin-top: 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255,255,255,.6); font-size: 12.5px; line-height: 1.45; }
.glance-callout svg { width: 15px; height: 15px; flex: none; color: var(--accent); margin-top: 2px; }

/* risk rows */
.risklist { display: grid; grid-template-columns: 1fr max-content; gap: 9px 12px; align-items: center; }
.risklist .k { font-size: 13px; }
.risklist .k.strong { font-weight: 700; }
.risklist .sep { grid-column: 1 / -1; border-top: 1px solid var(--border); margin: 3px 0; }

/* delivery snapshot sub-cards */
.snapgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .snapgrid { grid-template-columns: 1fr; } }
.snapcard { display: block; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; background: var(--surface); color: inherit; }
.snapcard:hover { border-color: var(--muted); text-decoration: none; }
.snapcard > header { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.snapcard > header strong { flex: 1; font-size: 14px; }
.snapcard > header .chev { color: var(--muted); display: flex; }
.snapcard > header .chev svg { width: 16px; height: 16px; }
.snapcard .snapstatus { margin-bottom: 4px; }
.snapcard .snapmetric { display: grid; grid-template-columns: 74px 1fr auto; align-items: center;
  gap: 8px; font-size: 12px; margin-top: 8px; }
.snapcard .snapmetric .l { color: var(--muted); }
.snapcard .snapmetric .bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.snapcard .snapmetric .bar > span { display: block; height: 100%; background: var(--ok); }
.snapcard .snapmetric .v { white-space: nowrap; font-weight: 600; }
.snapcard .snapmetric .v .subtle { font-weight: 400; }
.snapcard .snapline { font-size: 12px; color: var(--muted); margin-top: 10px; }
.snapcard .snapline strong { color: var(--text); }

/* ===== Opportunity detail — Workflow tab ===== */
.detailhead .dh-side { display: flex; flex-direction: column; align-items: stretch; gap: 12px; flex: none; }
.detailhead .dh-actions { display: flex; gap: 8px; align-items: center; }
.dh-deadline { display: flex; gap: 9px; align-items: flex-start; background: var(--accent-weak); border: 1px solid #d3e3fb;
  border-radius: 10px; padding: 9px 12px; }
.dh-deadline svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-top: 2px; }
.dh-deadline .lbl { font-size: 11px; color: var(--muted); }
.dh-deadline .d { font-weight: 700; font-size: 13px; margin-top: 1px; }
.dh-deadline .rem { font-size: 11px; color: var(--warn); font-weight: 600; margin-top: 1px; }
.dh-deadline.overdue { background: var(--danger-weak); border-color: #f3c9cd; }
.dh-deadline.overdue svg { color: var(--danger); }
.dh-deadline.overdue .rem { color: var(--danger); }
.dh-deadline.unset { background: var(--bg); border-color: var(--border); }
.dh-deadline.unset svg { color: var(--muted); }
.dh-deadline.unset .d { font-weight: 600; color: var(--muted); }
.dh-deadline.unset .rem { color: var(--accent); }
@media (max-width: 720px) { .detailhead .dh-side { width: 100%; } }

/* Stage / decision forms: dropdown / rationale / action button, kept the same
   size and alignment across the Move-stage and Record-a-decision cards. */
.stageform { display: grid; grid-template-columns: 220px 1fr 172px; gap: 12px 14px; align-items: end; }
.stageform .fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stageform .fld > label { font-weight: 600; }
.stageform .fld > select, .stageform .fld > input, .stageform .fld > textarea { width: 100%; }
.stageform > .btn { width: 100%; justify-content: center; }
.stageform .fld > input.err { border-color: var(--danger); background: var(--danger-weak); }
@media (max-width: 700px) { .stageform { grid-template-columns: 1fr; } .stageform > .btn { width: auto; justify-self: start; } }


/* stepper: completed = green, current = blue */
.stagebar .step.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.stagebar .step.done::before { background: var(--ok); }
.stagebar .step.current .dot { background: var(--accent); border-color: var(--accent); color: #fff; }
.stagebar .step.current::before { background: var(--ok); }

/* two-column workflow layout */
.wf-grid { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
.wf-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.wf-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.wf-main > .formsec, .wf-side > .formsec { margin-bottom: 0; }
@media (max-width: 980px) { .wf-grid { grid-template-columns: 1fr; } .wf-side { position: static; } }

/* Opportunity snapshot list when it sits in the narrow sidebar */
.wf-side .dl2 { grid-template-columns: 1fr; gap: 11px 0; }
.wf-side .dl2 > div { grid-template-columns: 1fr; gap: 2px; }
.wf-side .dl2 dt { font-size: 11.5px; }

/* card header: stacked title + subtitle, optional help link */
.card > header.ch .ch-titles { flex: 1; min-width: 0; }
.card > header.ch .ch-titles h3 { margin: 0; }
.card > header.ch .ch-titles p { margin: 2px 0 0; font-size: 12.5px; }

/* collapsible card header */
.card > header.ch.toggle { cursor: pointer; margin-bottom: 0; }
.card.is-open > header.ch.toggle { margin-bottom: 14px; }
.card > header.ch .ch-count { flex: none; font-size: 11px; font-weight: 700; background: var(--bg);
  color: var(--muted); border-radius: 999px; padding: 1px 8px; }
.count-pill { display: inline-block; flex: none; font-size: 11px; font-weight: 700; background: var(--bg);
  color: var(--muted); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.ch-help { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--accent);
  cursor: help; white-space: nowrap; position: relative; }
.ch-help svg { width: 14px; height: 14px; }
.ch-help[data-tip]:hover::after, .ch-help[data-tip]:focus::after {
  content: attr(data-tip); position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  width: 260px; padding: 8px 10px; background: var(--text); color: #fff; border-radius: 6px;
  font-size: 11.5px; font-weight: 400; line-height: 1.4; white-space: normal; }

/* award status bar */
.statusbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 8px; margin-bottom: 14px; background: var(--bg); }
.statusbar .k { font-weight: 600; font-size: 13px; }
.statusbar.pill-pending { background: #fff5e0; }
.statusbar.pill-won { background: #e6f6ea; }
.statusbar.pill-lost, .statusbar.pill-withdrawn { background: var(--danger-weak); }

/* empty state box inside a card */
.emptybox { text-align: center; padding: 26px 16px; color: var(--muted); }
.emptybox p { margin: 8px 0 2px; font-weight: 600; color: var(--text); }
.emptybox .subtle { font-size: 12px; }

/* requires-approval mark */
.rq { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; }
.rq svg { width: 11px; height: 11px; }
.rq.yes { background: #e6f6ea; color: var(--ok); }
.rq.no { background: var(--danger-weak); color: var(--danger); }

/* stage guidance card */
.card.guidance { background: var(--accent-weak); border-color: #d3e3fb; }
.card.guidance p { margin: 0 0 10px; font-size: 13px; }
.card.guidance ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.card.guidance li { font-size: 12.5px; }

/* ===== Award & contracting — progress tracker ===== */
.ctrack { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 6px 0 16px; }
.cstep { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 4px 6px 0; }
.cstep .dot { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: #e5e8ec; color: var(--muted); }
.cstep .dot svg { width: 15px; height: 15px; }
.cstep:not(:first-child)::before { content: ""; position: absolute; z-index: 0; top: 19px; right: 50%; width: 100%; height: 2px; background: var(--border); }
.cstep .lbl { font-weight: 700; font-size: 12.5px; margin-top: 8px; }
.cstep .sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.cstep.done .dot { background: var(--ok); color: #fff; }
.cstep.done::before { background: var(--ok); }
.cstep.current .dot { background: var(--accent); color: #fff; }
.cstep.current .lbl { color: var(--accent); }
.cstep.current::before { background: var(--ok); }
@media (max-width: 640px) { .ctrack { grid-auto-flow: row; grid-auto-columns: auto; gap: 6px; } .cstep { flex-direction: row; gap: 10px; text-align: left; padding: 4px 0; }
  .cstep:not(:first-child)::before { display: none; } .cstep .lbl { margin-top: 0; } }

/* detail cards */
.cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.ccard { display: flex; gap: 10px; min-width: 0; border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.cc-body { min-width: 0; }
.cc-label { font-size: 12px; color: var(--muted); }
.cc-pill { margin-top: 5px; }
.cc-title { font-weight: 700; font-size: 14px; margin: 4px 0 5px; overflow-wrap: anywhere; }
.cc-line { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; margin-top: 2px; white-space: nowrap; }
.cc-line.subtle { white-space: normal; }
.cc-line svg { width: 12px; height: 12px; flex: none; }
.ccard .doclink { display: flex; align-items: flex-start; gap: 5px; margin: 9px 0 0; font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; }
.ccard .doclink svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
.doclink { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: 12.5px; white-space: nowrap; }
.doclink svg { width: 13px; height: 13px; }

/* ===== Documents tab ===== */
.docbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.docbar-tools { display: flex; align-items: center; gap: 10px; }
.docbar-tools input[type="search"] { width: 260px; max-width: 46vw; }

.doctabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; flex-wrap: wrap; }
.doctabs button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer;
  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted);
  font: inherit; padding: 8px 12px; }
.doctabs button:hover { color: var(--text); }
.doctabs button.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.doctabs .n { font-size: 11px; font-weight: 700; background: var(--bg); color: var(--muted); border-radius: 999px; padding: 0 6px; }
.doctabs button.active .n { background: var(--accent-weak); color: var(--accent); }

.doctable { table-layout: fixed; min-width: 820px; }
.doctable th, .doctable td { overflow-wrap: anywhere; }
.doctable td .badge { white-space: normal; }
.doc-name { display: flex; align-items: center; gap: 10px; }
.dn-body { display: flex; flex-direction: column; min-width: 0; }
.dn-body .subtle { font-size: 11px; }
.filetag { flex: none; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; letter-spacing: .02em; background: var(--bg); color: var(--muted); }
.pill-contract, .pill-legal { background: #e6f6ea; color: var(--ok); border-color: transparent; }
.pill-loa_sst, .pill-purchase_order, .pill-tender { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.filetag.ft-pdf { background: var(--danger-weak); color: var(--danger); }
.filetag.ft-doc, .filetag.ft-docx { background: var(--accent-weak); color: var(--accent); }
.filetag.ft-xls, .filetag.ft-xlsx, .filetag.ft-csv { background: #e6f6ea; color: var(--ok); }
.filetag.ft-png, .filetag.ft-jpg, .filetag.ft-jpeg { background: #f0e9fe; color: #6b3fd4; }

.rowacts { display: inline-flex; align-items: center; gap: 6px; }
.rowacts .iconbtn { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); }
.rowacts .iconbtn svg { width: 15px; height: 15px; }

.docfoot { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 14px 16px;
  border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); }
.docfoot > svg { width: 20px; height: 20px; color: var(--muted); flex: none; }
.docfoot > div { flex: 1; display: flex; flex-direction: column; }
.docfoot .subtle { font-size: 12px; }

/* ===== Award & contracting edit form ===== */
.backlink { display: inline-block; margin: 2px 0 10px; font-size: 13px; }
.formintro { max-width: 900px; margin: 0 0 4px; }

.formsec > header .secnum { width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  background: #e5e8ec; color: var(--muted); }
.formsec > header .secnum.done { background: var(--ok); color: #fff; }
.formsec > header .secnum.current { background: var(--accent); color: #fff; }
.badge.sec-status { display: inline-flex; align-items: center; gap: 4px; }
.badge.sec-status svg { width: 12px; height: 12px; flex: none; }
.badge.sec-status.done { background: #e6f6ea; color: var(--ok); border-color: transparent; }
.badge.sec-status.current { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.badge.sec-status.pending { background: var(--bg); color: var(--muted); }

.form-grid.form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .form-grid.form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .form-grid.form-grid-3 { grid-template-columns: 1fr; } }

.formsec .counter { text-align: right; color: var(--muted); font-size: 11px; margin-top: 4px; }
.formsec > div > textarea { width: 100%; }

/* SST / Contract / PO sections — fields left (40%), upload panel right (60%) */
.secsplit { display: grid; grid-template-columns: 2fr 3fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .secsplit { grid-template-columns: 1fr; gap: 16px; } }
.secfields .field { margin-bottom: 16px; }
.secfields .field:last-child { margin-bottom: 0; }
.secfields .field > label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 5px; }
.secfields .field > input, .secfields .field > select { width: 100%; }
.secfields .field .helptext { color: var(--muted); font-size: 12px; margin-top: 4px; }

.uploadpanel { background: var(--accent-weak); border: 1px solid #d3e3fb; border-radius: 10px; padding: 16px; }
.up-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; }
.up-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.up-head strong { font-size: 13.5px; }
.up-head .subtle { font-size: 12px; }
.linkbtn { background: none; border: none; padding: 0; color: var(--accent); font: inherit; font-size: 12.5px;
  cursor: pointer; white-space: nowrap; }
.linkbtn:hover { text-decoration: underline; }

.verlist { list-style: none; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .65); display: flex; flex-direction: column; gap: 6px; }
.verlist li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; flex-wrap: wrap; }

.filebox { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; min-height: 128px; padding: 20px 16px; cursor: pointer;
  border: 1.5px dashed #9db8e3; border-radius: 10px; background: rgba(255, 255, 255, .45); }
.filebox:hover { border-color: var(--accent); background: rgba(255, 255, 255, .7); }
/* .form-grid .field > label's own display:block otherwise wins on
   specificity when a filebox sits inside a form-grid field (as on the My
   Profile MyKad uploads), silently undoing the centered column layout. */
.form-grid .field > label.filebox { display: flex; }
.filebox input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.filebox svg { width: 30px; height: 30px; color: var(--accent); }
.filebox .fb-main { font-size: 13px; color: var(--text); }
.filebox .fb-link { color: var(--accent); font-weight: 600; }
.filebox .fb-chosen { font-weight: 600; word-break: break-all; }
.filebox .fb-hint { font-size: 11.5px; color: var(--muted); }
.filebox .fb-empty { display: contents; }
.filebox.has-preview { padding: 6px; }
.filebox .fb-preview { max-width: 100%; max-height: 116px; object-fit: contain; border-radius: 6px; }
.filebox .fb-replace {
  position: absolute; bottom: 8px; right: 8px; background: rgba(13, 17, 23, .72); color: #fff;
  font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 6px; pointer-events: none;
}

.filelist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.filelist-item { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 8px 6px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); font-size: 13px; }
.filelist-item .fl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filelist-item .fl-remove {
  flex: none; width: 22px; height: 22px; border-radius: 50%; border: none; background: none;
  color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.filelist-item .fl-remove:hover { background: var(--border); color: var(--text); }

.daterange-wrap { position: relative; }
.daterange-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); font: inherit; color: var(--text); cursor: pointer;
}
.daterange-trigger:hover { border-color: var(--accent); }
.daterange-trigger svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.daterange-pop {
  position: absolute; z-index: 50; top: calc(100% + 6px); left: 0; width: 280px; padding: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
.drp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 13px; }
.drp-head button { border: none; background: none; cursor: pointer; color: var(--muted); padding: 4px 8px; border-radius: 6px; }
.drp-head button:hover { background: var(--bg); color: var(--text); }
.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.drp-dow { margin-bottom: 4px; }
.drp-dow span { font-size: 10.5px; font-weight: 600; color: var(--muted); text-align: center; text-transform: uppercase; }
.drp-day { border: none; background: none; font: inherit; font-size: 12.5px; padding: 7px 0; border-radius: 6px; cursor: pointer; color: var(--text); }
.drp-day:hover { background: var(--bg); }
.drp-muted { color: var(--muted); opacity: .4; }
.drp-weekend { color: var(--muted); }
.drp-inrange { background: var(--accent-weak); border-radius: 0; }
.drp-edge { background: var(--accent); color: #fff; font-weight: 700; }

.up-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
@media (max-width: 560px) { .up-fields { grid-template-columns: 1fr; } }
.up-fields .field > label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 5px; }
.up-fields .field > input, .up-fields .field > select { width: 100%; }

/* ===== Award & contracting — collapsible sections ===== */
.collapsec { padding: 0; margin-bottom: 12px; overflow: hidden; }
/* Fixed-width right-hand slots so cols / pill / action / chevron line up
   vertically down the section list regardless of each row's content. */
.secrow { display: flex; align-items: center; gap: 18px; padding: 16px 20px; cursor: pointer; min-height: 40px; }
.secrow > * { align-self: center; }
.secrow > .secmark { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; background: #e5e8ec; color: var(--muted); }
.secrow > .secmark svg { width: 16px; height: 16px; }
.secrow > .secmark.done { background: var(--ok); color: #fff; }
.secrow > .secmark.current { background: var(--accent); color: #fff; }
.secrow-main { flex: 1 1 auto; min-width: 0; }
.secrow-main h3 { margin: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secrow-main p { margin: 3px 0 0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.secrow-cols { flex: none; width: 300px; display: flex; align-items: center; gap: 20px; justify-content: flex-end; }
.secrow-cols > div { display: flex; flex-direction: column; text-align: right; line-height: 1.35; }
.secrow-cols .cl { font-size: 11px; color: var(--muted); white-space: nowrap; }
.secrow-cols .cv { font-size: 13px; font-weight: 600; white-space: nowrap; margin-top: 2px; }
.secrow-status { flex: none; width: 108px; display: flex; align-items: center; justify-content: flex-end; }
.secrow .sec-status { margin: 0; display: inline-flex; align-items: center; justify-content: center; }
.secrow-act { flex: none; width: 168px; display: flex; align-items: center; justify-content: flex-start; }
.secrow-act .btn { margin: 0; }
.chevbtn { flex: none; width: 18px; align-self: center; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.chev { display: flex; transition: transform .15s ease; }
.chev svg { width: 18px; height: 18px; }
.chev.up { transform: rotate(180deg); }
@media (max-width: 980px) {
  .secrow-cols { display: none !important; }
}
@media (max-width: 640px) {
  .secrow { flex-wrap: wrap; gap: 10px 14px; }
  .secrow-main { flex-basis: 100%; }
  .secrow-status, .secrow-act { width: auto; }
  .secrow-act { flex: 1; }
}

.secbody { padding: 18px 20px 20px; border-top: 1px solid var(--border); }
.sf-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sf-head strong { font-size: 13.5px; }
.collapsec .secfields { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: var(--surface); }

.secfoot { display: flex; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.formsec > .secfoot { margin-top: 14px; }

.backtotop { display: flex; justify-content: flex-end; margin-top: 10px; }

/* current-document row inside the upload panel */
.up-current { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding: 12px 14px;
  border-radius: 8px; background: rgba(255, 255, 255, .7); font-size: 12.5px; }
.up-current > div { flex: 1; min-width: 0; }
.up-current .subtle { font-size: 11.5px; margin-top: 1px; }
.up-current .btn { flex: none; }

/* Approval detail — opportunity snapshot (two-column key/value list) */
.dl2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 44px; margin: 0; }
.dl2 > div { display: grid; grid-template-columns: minmax(110px, 42%) 1fr; gap: 14px; align-items: baseline; }
.dl2 > div.wide { grid-column: 1 / -1; grid-template-columns: 150px 1fr; }
.dl2 dt { color: var(--muted); font-size: 13px; }
.dl2 dd { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
@media (max-width: 720px) { .dl2 { grid-template-columns: 1fr; gap: 8px 0; } }

/* Approval detail — Request card (message-first layout) */
.reqmeta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.reqmeta .owner-cell strong { font-weight: 600; }
.reqmeta-status { margin-left: auto; }
.reqmsg { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); font-size: 13.5px; line-height: 1.55; }
.reqfoot { margin: 14px 0 0; font-size: 12.5px; }
.reqdecision { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Dependency picker: searchable checkbox list (task form) */
.deppicker { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.deppicker .dep-search { width: 100%; border: none; border-bottom: 1px solid var(--border);
  border-radius: 8px 8px 0 0; padding: 8px 10px 8px 32px; font: inherit; background-position: 10px center; }
.deppicker .dep-search:focus { outline: none; box-shadow: none; }
.dep-list { max-height: 220px; overflow-y: auto; padding: 4px; }
.dep-opt { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 6px;
  cursor: pointer; font-size: 13px; }
.dep-opt:hover { background: var(--bg); }
.dep-opt input { margin: 0; flex: none; position: relative; top: 2px; }
.dep-opt span { color: var(--text); }

/* Task detail: action row + related-task list */
.taskactions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.taskactions form { display: flex; margin: 0; }
.taskactions .btn { line-height: 1.4; }
.dl.tight .reltask { display: flex; flex-direction: column; }
.dl.tight .reltask + .reltask { margin-top: 8px; }
.dl.tight .reltask .subtle { font-size: 11px; line-height: 1.35; }

/* Alerts page */
.unread-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 8px; vertical-align: middle; flex: none; }
.badge.pill-task_overdue { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.badge.pill-task_due_soon { background: #fff5e0; color: var(--warn); border-color: transparent; }
.badge.pill-task_assigned,
.badge.pill-approval_requested,
.badge.pill-handover_initiated { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.badge.pill-approval_decided,
.badge.pill-handover_decided { background: #e6f6ea; color: var(--ok); border-color: transparent; }
.badge.pill-tender_scan_failed { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.badge.pill-tender_match_closed { background: #fff5e0; color: var(--warn); border-color: transparent; }
.badge.pill-tender_match { background: var(--accent-weak); color: var(--accent); border-color: transparent; }
.badge.pill-certification_expired { background: var(--danger-weak); color: var(--danger); border-color: transparent; }
.badge.pill-certification_expiring { background: #fff5e0; color: var(--warn); border-color: transparent; }

/* Row kebab menu — fixed-positioned so the table panel's overflow can't clip it */
.rowmenu .menu { position: fixed; top: -1000px; left: 0; right: auto; z-index: 90; }

/* ===================== ROOTS dashboard ===================== */
.rd-greeting { margin: 0 0 2px; font-size: 13px; }
.rd-headmeta { display: flex; align-items: center; gap: 14px; }

.dash2col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: stretch; }
.dash2col-even { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .dash2col, .dash2col-even { grid-template-columns: 1fr; } }
.dash2col > .formsec, .dash2col-even > .formsec { display: flex; flex-direction: column; }
.dash2col > .formsec .qa-grid { flex: 1; align-content: start; }

.ch-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; flex: none; }
.ch-icon svg { width: 18px; height: 18px; }
.ch-icon.blue { background: var(--accent-weak); color: var(--accent); }
.ch-icon.green { background: #e6f6ea; color: var(--ok); }
.ch-icon.warn { background: #fff5e0; color: var(--warn); }
.ch-icon.grey { background: var(--bg); color: var(--muted); }

.formsec > header.rd-sechead { align-items: center; }
.formsec > header.rd-sechead .rd-sechead-title { flex: 1; min-width: 0; }
.formsec > header.rd-sechead .rd-sechead-title p { margin: 2px 0 0; }

.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px;
  height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: var(--bg); color: var(--muted); vertical-align: middle; margin-left: 4px; }
.count-badge.warn { background: #fff5e0; color: var(--warn); }

.lb-row { display: flex; align-items: center; gap: 16px; padding: 16px 0; flex-wrap: wrap; }
.lb-row + .lb-row { border-top: 1px solid var(--border); }
.lb-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; flex: none; }
.lb-icon svg { width: 18px; height: 18px; }
.lb-icon.blue { background: var(--accent-weak); color: var(--accent); }
.lb-icon.green { background: #e6f6ea; color: var(--ok); }
.lb-main { flex: 1 1 240px; min-width: 0; }
.lb-title { font-weight: 700; font-size: 14.5px; margin-bottom: 7px; }
.lb-stats { display: flex; }
.lb-stats > div { display: flex; flex-direction: column; padding: 0 16px; }
.lb-stats > div:first-child { padding-left: 0; }
.lb-stats > div + div { border-left: 1px solid var(--border); }
.lb-stats strong { font-size: 13px; }
.lb-stats span { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.lb-gauge { width: 200px; flex: none; text-align: right; }
.lb-remaining { font-size: 22px; font-weight: 800; line-height: 1; }
.lb-remaining.blue { color: var(--accent); }
.lb-remaining.green { color: var(--ok); }
.lb-remaining .unit { display: block; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.lb-bar { height: 6px; border-radius: 999px; background: var(--bg); margin-top: 9px; overflow: hidden; }
.lb-bar > span { display: block; height: 100%; border-radius: 999px; }
.lb-bar > span.blue { background: var(--accent); }
.lb-bar > span.green { background: var(--ok); }
.lb-frac { font-size: 11px; color: var(--muted); margin-top: 4px; }

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qa-tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px; color: var(--text); }
.qa-tile:hover { text-decoration: none; }
.qa-tile .qa-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: 9px; flex: none; background: var(--surface); }
.qa-tile .qa-icon svg { width: 16px; height: 16px; }
.qa-tile .qa-chevron { position: absolute; top: 14px; right: 14px; color: var(--muted); flex: none; }
.qa-tile .qa-chevron svg { width: 15px; height: 15px; }
.qa-tile strong { font-size: 13.5px; }
.qa-tile .subtle { font-size: 12px; }
.qa-tile.qa-blue { background: var(--accent-weak); }
.qa-tile.qa-blue .qa-icon { color: var(--accent); }
.qa-tile.qa-green { background: #e6f6ea; }
.qa-tile.qa-green .qa-icon { color: var(--ok); }
.qa-tile.qa-plain { flex-direction: row; align-items: center; border: 1px solid var(--border); background: var(--surface); padding: 12px 14px; }
.qa-tile.qa-plain .qa-icon { background: var(--bg); color: var(--muted); width: 30px; height: 30px; }
.qa-tile.qa-plain .qa-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.qa-tile.qa-plain .qa-chevron { position: static; margin-left: 4px; }
@media (max-width: 480px) { .qa-grid { grid-template-columns: 1fr; } }

.td-ic { display: inline-flex; align-items: center; gap: 6px; }
.td-ic svg { width: 14px; height: 14px; color: var(--muted); flex: none; }

.activity-list { display: flex; flex-direction: column; }
.activity-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.activity-item + .activity-item { border-top: 1px solid var(--border); }
.activity-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; }
.activity-dot.info { background: var(--accent); }
.activity-dot.ok { background: var(--ok); }
.activity-dot.danger { background: var(--danger); }
.activity-main { flex: 1; min-width: 0; }
.activity-main .at-title { font-weight: 600; font-size: 13.5px; }
.activity-main .at-sub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.activity-date { flex: none; font-size: 12px; color: var(--muted); white-space: nowrap; }