/* Allseas colours: blue #005776 (primary), red #E40200 (accent line only). */
:root {
  --blue: #005776; --red: #E40200; --turq: #39AEB8; --sky: #55D4E3; --metal: #9A9885;
  --bg: #f4f6f8; --card: #fff; --ink: #111; --muted: #5b6670; --line: #dde3e8; --soft: #eef4f7;
  --ok: #2e7d57; --okbg: #e5f4ec; --gap: #9A2647; --gapbg: #f6e6ec; --warn: #7a5f12; --warnbg: #f8f0dc;
  --info: #005776; --infobg: #e3eff4; --amber: #c9a227;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 Roboto, "Segoe UI", Tahoma, Arial, sans-serif; }
a { color: var(--blue); }
button { font: inherit; cursor: pointer; }
.hidden { display: none !important; }

.top { background: #fff; color: var(--blue); padding: 10px 20px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 3px solid var(--red); }
.top .logo { height: 32px; width: auto; display: block; }
.top .brandtext { border-left: 1px solid var(--line); padding-left: 16px; }
.top .brand { font-weight: 700; font-size: 19px; letter-spacing: .3px; line-height: 1.1; }
.top .crumb { color: var(--muted); font-size: 12px; }
.top .spacer { flex: 1; }
.hdr-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hdr-right select { font: inherit; padding: 5px 8px; border-radius: 4px; border: 1px solid #b9c4cc; max-width: 280px; }
.who { display: flex; flex-direction: column; line-height: 1.2; text-align: right; }
.who span { font-size: 11px; color: var(--muted); }
.hbtn { background: #fff; color: var(--blue); border: 1px solid var(--blue); border-radius: 4px; padding: 5px 10px; font-size: 12px; }
.light { width: 10px; height: 10px; border-radius: 50%; flex: none; cursor: help; box-shadow: 0 0 0 2px rgba(255,255,255,.8); }
.light.green { background: #2e9e5b; }
.light.amber { background: #e0a100; }
.light.red { background: #c8372d; }
.mode { background: var(--warnbg); color: var(--warn); border-radius: 4px; padding: 2px 6px; font-size: 11px; font-weight: 700; letter-spacing: .5px; }

.tabs { display: flex; gap: 2px; padding: 0 20px; background: #fafbfc; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; padding: 12px 14px; color: var(--muted); font-weight: 500; white-space: nowrap; }
.tabs button.on { color: var(--blue); border-bottom-color: var(--blue); }
/* The steps as one flow: arrow blocks, the last one an end block (flat right side). */
.tabs .flow { display: flex; align-items: center; margin: 0 10px; padding: 6px 0; }
.tabs .flow button { --tip: 11px; border: 0; margin-left: calc(var(--tip) * -1 + 5px); padding: 8px calc(var(--tip) + 12px) 8px calc(var(--tip) + 12px);
  background: #dfe8ee; color: var(--blue); font-weight: 500;
  clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%, var(--tip) 50%); }
.tabs .flow button:first-child { margin-left: 0; padding-left: 14px; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); border-radius: 4px 0 0 4px; }
.tabs .flow button:last-child { padding-right: 16px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--tip) 50%); border-radius: 0 4px 4px 0; }
.tabs .flow button:hover { background: #cddbe4; }
.tabs .flow button.done { background: var(--okbg); color: var(--ok); }
.tabs .flow button.on { background: var(--blue); color: #fff; }
.tabs .flow button.on .count { background: #fff; color: var(--blue); }
.tabs .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--red); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 20px; margin: 0 0 4px; color: var(--blue); }
h2 { font-size: 16px; margin: 0 0 10px; color: var(--blue); }
h3 { font-size: 14px; margin: 14px 0 8px; color: var(--blue); }
.grid2 h3:first-child { margin-top: 0; }
.sub { color: var(--muted); margin: 0 0 16px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.card.flush { padding: 0; }
.center { max-width: 520px; margin: 60px auto; text-align: left; }
.stack { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; border-left: 4px solid var(--blue); }
.kpi b { display: block; font-size: 24px; color: var(--blue); }
.kpi span { color: var(--muted); font-size: 12px; }
.kpi.gap { border-left-color: var(--gap); } .kpi.gap b { color: var(--gap); }
.kpi.ok { border-left-color: var(--ok); } .kpi.ok b { color: var(--ok); }
.kpi.warn { border-left-color: var(--amber); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid2 > *, .layout > * { min-width: 0; }
.card { overflow-x: auto; }

.chip { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--soft); color: var(--blue); }
.chip.H, .chip.High { background: var(--gapbg); color: var(--gap); }
.chip.M, .chip.Medium { background: var(--warnbg); color: var(--warn); }
.chip.L, .chip.Low { background: var(--okbg); color: var(--ok); }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 8px; border-radius: 10px; white-space: nowrap; background: var(--soft); color: var(--muted); }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st.ok { background: var(--okbg); color: var(--ok); } .st.gap { background: var(--gapbg); color: var(--gap); }
.st.review, .st.cfo { background: var(--infobg); color: var(--info); } .st.req { background: var(--warnbg); color: var(--warn); }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.gap { background: var(--gap); } .dot.review, .dot.cfo { background: var(--info); } .dot.req { background: var(--amber); }
.legend .dot { margin: 0 2px 0 8px; }

table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 500; background: #fafbfc; }
tr.warnrow td { background: #fdf6f8; }
.sp.inactive, .proc.inactive { opacity: .5; }
.tree.reordering { outline: 2px dashed var(--sky); outline-offset: -2px; }
/* Save order / Cancel stay in view while the tree scrolls */
.tree .order-bar { position: sticky; top: -8px; z-index: 2; background: #fff; margin: -8px -8px 4px; padding: 10px 12px; border-bottom: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.sp.inactive .nm { text-decoration: line-through; }
.mv { border: 1px solid var(--line); background: #fff; color: var(--blue); border-radius: 3px; padding: 0 5px; font-size: 11px; line-height: 16px; margin-left: 2px; cursor: pointer; }
.mv:disabled { opacity: .3; cursor: default; }
.ctl-pick { max-height: 220px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; padding: 6px; }
.ctl-pick label { gap: 6px; padding: 3px 0; }
.ctl-list { margin: 4px 0 8px; padding-left: 18px; }
/* soft Allseas red: in-scope FS account without a linked sub-process */
tr.uncovered td { background: #fce8e8; }
tr.uncovered td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.legend.uncovered { display: inline-block; width: 14px; height: 10px; background: #fce8e8; border-left: 3px solid var(--red); vertical-align: -1px; margin-right: 4px; }
tr.pg td { background: var(--soft); font-weight: 700; color: var(--blue); }
td select, .filters select { font: inherit; padding: 3px 6px; border: 1px solid #b9c4cc; border-radius: 4px; }

.btn { background: var(--blue); color: #fff; border: 0; border-radius: 4px; padding: 6px 12px; font-weight: 500; }
.btn.sec { background: #fff; color: var(--blue); border: 1px solid var(--blue); }
.btn.ghost { background: none; color: var(--blue); border: 0; padding: 4px 6px; }
.btn.danger { background: #fff; color: var(--gap); border: 1px solid var(--gap); }
.btn.sm { padding: 3px 8px; font-size: 12px; }
.row { display: flex; gap: 8px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.start { align-items: flex-start; }
.muted { color: var(--muted); } .small { font-size: 12px; } .late { color: var(--gap); font-weight: 500; }
.empty { padding: 20px; text-align: center; color: var(--muted); }
.att { padding-left: 18px; margin: 0; }
.att li { margin: 6px 0; }
.att .row { justify-content: space-between; }

.layout { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.tree { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px; position: sticky; top: 8px; max-height: calc(100vh - 140px); overflow: auto; }
.tree .dept { font-weight: 700; color: var(--blue); padding: 8px 6px 4px; border-bottom: 2px solid var(--red); margin-bottom: 4px; }
.tree .proc { font-weight: 500; padding: 6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; border-radius: 4px; }
.tree .proc:hover, .tree .sp:hover { background: var(--soft); }
.tree .sp { display: flex; gap: 8px; align-items: center; padding: 4px 6px 4px 18px; border-radius: 4px; cursor: pointer; font-size: 13px; }
.tree .sp.on, .tree .proc.on { background: var(--infobg); }
.tree .sp.on { font-weight: 500; }
.tree .proc .tog { display: inline-block; width: 14px; cursor: pointer; }
.tree .sp .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-list { list-style: none; padding: 0; margin: 0; }
.req-list li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.req-list .y { color: var(--ok); font-weight: 700; } .req-list .n { color: var(--gap); font-weight: 700; }
.risk { margin: 10px 0 14px; }
.risk > .r { font-weight: 500; margin-bottom: 4px; }
.risk .ctl { margin: 6px 0 6px 12px; }
.ctl { border-left: 3px solid var(--line); padding: 6px 10px; margin: 8px 0; background: #fafbfc; }
.ctl .r { font-weight: 500; } .ctl .c { white-space: pre-line; }
.badge-legacy { background: #fff3e0; color: #8a4b00; border: 1px solid #f0c48a; font-size: 11px; padding: 0 6px; border-radius: 8px; white-space: nowrap; }
details summary { cursor: pointer; color: var(--blue); font-weight: 500; margin: 10px 0 6px; }
.note { background: var(--infobg); border-radius: 6px; padding: 10px 12px; font-size: 13px; margin: 10px 0; }
.note.rework { background: var(--gapbg); }
.bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--line); min-width: 120px; }
.bar i { display: block; height: 100%; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.taskcard { border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 6px; padding: 14px; margin-bottom: 12px; background: #fff; }
.taskcard.rework { border-left-color: var(--gap); } .taskcard.done { border-left-color: var(--ok); } .taskcard.wait { border-left-color: var(--info); }
.taskcard .ask { font-weight: 500; margin-top: 2px; }

.matrix-wrap { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.matrix { font-size: 12px; width: auto; }
.matrix th, .matrix td { border: 1px solid var(--line); padding: 3px 5px; text-align: center; }
.matrix thead th { position: sticky; top: 0; background: #fafbfc; z-index: 2; }
.matrix th.v { writing-mode: vertical-rl; transform: rotate(180deg); height: 260px; white-space: nowrap; font-weight: 400; color: var(--ink); text-align: left; }
.matrix td.n, .matrix th.n { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.matrix thead th.n { z-index: 3; background: #fafbfc; }
.matrix td.H { background: var(--gapbg); color: var(--gap); font-weight: 700; }
.matrix td.M { background: var(--warnbg); color: var(--warn); font-weight: 700; }
.matrix tr.pg td { text-align: left; }

.modal { position: fixed; inset: 0; background: rgba(0,30,45,.45); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 50; overflow: auto; }
.modal-card { background: #fff; border-radius: 8px; max-width: 640px; width: 100%; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.f { display: block; margin: 10px 0; }
.f > span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; font-weight: 500; }
.f input, .f select, .f textarea { width: 100%; font: inherit; padding: 7px 9px; border: 1px solid #b9c4cc; border-radius: 4px; background: #fff; }
.f textarea { min-height: 70px; }
.f.check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.f.check input { width: auto; }
.idbox { padding: 7px 9px; border: 1px dashed #b9c4cc; border-radius: 4px; background: #fafbfc; font-weight: 500; min-height: 34px; }
.hint { font-size: 11px; color: var(--muted); margin-top: 3px; }
.err { font-size: 12px; color: var(--gap); margin-top: 3px; min-height: 1em; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.acc { margin: 3px 0; }
.picker-chosen { padding: 6px 0; }
.picker-list { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 4px 4px; max-height: 200px; overflow: auto; }
.picker-list:empty { display: none; }
.picker-item { display: block; width: 100%; text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--line); padding: 6px 9px; }
.picker-item:hover { background: var(--soft); }

#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: 380px; }
.toast { background: #102a35; color: #fff; padding: 10px 14px; border-radius: 6px; font-size: 13px; box-shadow: 0 4px 16px rgba(0,0,0,.25); border-left: 4px solid var(--sky); }
.toast a, .toastlink { color: var(--sky); font-weight: 500; }
.busy { position: fixed; inset: 0; background: rgba(255,255,255,.4); z-index: 70; display: flex; align-items: center; justify-content: center; }
.spinner { width: 34px; height: 34px; border: 4px solid var(--line); border-top-color: var(--blue); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 10px auto; }
@keyframes spin { to { transform: rotate(360deg); } }
.busy-msg { max-width: 360px; text-align: center; font-size: 13px; color: var(--ink); }
.busy-msg:not(:empty) { background: #fff; padding: 8px 12px; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,.15); }

.help-steps { padding-left: 20px; margin: 0; }
.help-steps li { margin: 6px 0; }
.faq { border-bottom: 1px solid var(--line); }
.faq summary { margin: 0; padding: 9px 0; color: var(--ink); }
.faq summary:hover { color: var(--blue); }
.faq p { margin: 0 0 10px 16px; color: var(--ink); max-width: 900px; }

@media (max-width: 900px) {
  .layout, .grid2 { grid-template-columns: 1fr; }
  .tree { position: static; max-height: none; }
  main { padding: 16px; }
}

/* Step screens: header with sign-offs, overview list of steps */
.stepbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.stepbar h1 { margin: 2px 0 4px; }
.stepbar .row { gap: 6px; }
.signoff { font-size: 12px; color: var(--muted); padding: 4px 8px; border: 1px dashed var(--line); border-radius: 4px; }
.signoff.done { color: var(--ok); background: var(--okbg); border: 1px solid transparent; }
table.steps td.n { width: 28px; font-weight: 700; color: var(--blue); }
a.chip.link { text-decoration: none; cursor: pointer; }
/* Linked FS accounts per risk: three fixed slots (H, M, L) so position and colour both tell the level */
.fs-slots { display: inline-grid; grid-template-columns: repeat(3, 34px); gap: 4px; }
.fs-slots .chip { text-align: center; cursor: help; }
tr.inactive td { opacity: .55; }

/* Titles with descriptions; register/matrix toggle; risk and control matrices */
.desc { color: var(--muted); font-size: 12px; margin-top: 2px; font-weight: 400; }
.seg { display: inline-flex; border: 1px solid var(--blue); border-radius: 4px; overflow: hidden; }
.seg button { background: #fff; color: var(--blue); border: 0; padding: 5px 12px; font-size: 12px; cursor: pointer; }
.seg button.on { background: var(--blue); color: #fff; }
.matrix.titles th.v { height: 190px; cursor: help; }
.matrix.titles td.n { cursor: help; }
.matrix td.hit { color: var(--blue); }

/* Closed year banner */
.note.closed { border-left: 4px solid var(--metal); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Year report (printed or saved as PDF) */
.report { background: #fff; max-width: 900px; margin: 0 auto; padding: 20px 28px; border: 1px solid var(--line); border-radius: 6px; }
.report .rep-head { display: flex; align-items: center; gap: 16px; border-bottom: 3px solid var(--red); padding-bottom: 10px; margin: 12px 0; }
.report .rep-head h1 { margin: 0; }
.rep-status { margin-left: auto; font-weight: 700; letter-spacing: 2px; padding: 4px 12px; border-radius: 4px; }
.rep-status.draft { color: var(--gap); border: 2px solid var(--gap); }
.rep-status.final { color: var(--ok); border: 2px solid var(--ok); }
.rep-table { width: 100%; margin-bottom: 8px; }
.report h2.proc-h { border-bottom: 1px solid var(--line); margin-top: 22px; }
.report section.sp { margin: 10px 0 14px; }
.report section.sp h3 { margin: 0; }
ul.rep { margin: 4px 0; padding-left: 18px; font-size: 12px; }
ul.rep ul { padding-left: 16px; }
.sigs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; }
.sig .line { border-bottom: 1px solid var(--ink); height: 48px; margin-bottom: 4px; }
@media print {
  .top, #tabs, .noprint, #toasts, #busy, #modal, .note.closed { display: none !important; }
  body, main { background: #fff; }
  main { padding: 0; max-width: none; }
  .report { border: 0; padding: 0; max-width: none; }
  .report section.sp, .rep-table tr { break-inside: avoid; }
  .report h2 { break-after: avoid; }
  a { color: inherit; text-decoration: none; }
}
.toolbar { margin-bottom: 12px; }
.card .row.between.start + h2 { margin-top: 16px; }

/* Final sign-off boxes */
.sigs2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sigbox { border: 1px dashed var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.sigbox.done { border: 1px solid transparent; background: var(--okbg); color: var(--ok); }

/* Risk/control matrix (RCM) */
table.rcm { width: 100%; }
table.rcm td { vertical-align: top; border-bottom: 1px solid var(--line); }
table.rcm td[rowspan] { background: #fbfcfd; }
table.rcm td[title] { cursor: help; }
table.rcm tr.pg td { background: var(--soft); font-weight: 700; color: var(--blue); }