/* ===========================================================================
   Anchor Run-off LMS — design system
   Deep-navy Momenta sidebar + light, numbers-first workspace.
   =========================================================================== */
:root {
  --navy-900: #0c1a33;   /* sidebar base */
  --navy-800: #122444;
  --navy-700: #16294f;
  --navy: #16244c;       /* Momenta navy (brand) */
  --brand2: #1f6f93;
  --gold: #c6a14e;       /* Momenta gold accent */
  --gold-soft: #e7d6a8;

  --bg: #f4f6fa;         /* workspace */
  --card: #ffffff;
  --ink: #15233b;
  --ink-2: #38475e;
  --muted: #6b7a90;
  --line: #e6ebf2;
  --line-2: #eef2f7;

  --green: #15803d; --green-bg: #e7f4ec;
  --amber: #b45309; --amber-bg: #fbf0dc;
  --red: #b4232a;   --red-bg: #fbe7e8;
  --grey: #5b6878;  --grey-bg: #eceff3;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,.10);
  --shadow-lg: 0 16px 48px rgba(16,24,40,.22);
  --r: 12px; --r-sm: 9px;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.55 -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
.num, .mono { font-variant-numeric: tabular-nums; font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.strong { font-weight: 650; }

/* ---- app shell ---------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 232px; flex: 0 0 232px; background: var(--navy-900);
  color: #cdd8ea; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
}
.sidebar .brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; color: #fff; font-weight: 700; letter-spacing: .2px; }
.sidebar .brand .mark { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(135deg, var(--gold), #9c7d33); color: var(--navy-900); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.sidebar .brand small { display: block; font-weight: 400; font-size: 10px; letter-spacing: 2px; color: var(--gold-soft); opacity: .8; }
.sidebar nav { padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.sidebar nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; color: #aab9d1; font-weight: 500; }
.sidebar nav a:hover { background: var(--navy-700); color: #fff; text-decoration: none; }
.sidebar nav a.active { background: var(--navy-700); color: #fff; box-shadow: inset 3px 0 0 var(--gold); }
.sidebar nav a .ic { width: 18px; height: 18px; flex: 0 0 18px; opacity: .9; }
.sidebar nav a.active .ic { opacity: 1; }
.navcount { margin-left: auto; background: var(--red-bg); color: var(--red); font-size: 10.5px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.sidebar .spacer { flex: 1; }
.sidebar .who { padding: 14px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 13px; color: #9fb0c9; display: flex; align-items: center; justify-content: space-between; }
.sidebar .who form { margin: 0; }
.sidebar .who .link { color: var(--gold-soft); background: none; border: none; cursor: pointer; font: inherit; padding: 0; }

.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 26px 30px 64px; }

/* ---- workspace topbar + global account search --------------------------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; padding: 10px 30px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.search { position: relative; flex: 1; max-width: 460px; display: flex; align-items: center; gap: 9px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 0 12px; transition: border-color .12s, box-shadow .12s; }
.search:focus-within { border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(31,111,147,.12); background: #fff; }
.search .s-ic { width: 16px; height: 16px; flex: 0 0 16px; color: var(--muted); }
.search input { border: none; background: none; margin: 0; padding: 9px 0; font: inherit; font-size: 13px; box-shadow: none; }
.search input:focus { outline: none; box-shadow: none; }
.search kbd { font: inherit; font-size: 11px; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--muted); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 5px; z-index: 30; max-height: 340px; overflow-y: auto; }
.sr-item { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--ink); }
.sr-item:hover, .sr-item.on { background: var(--line-2); text-decoration: none; }
.sr-ref { font-family: var(--mono); font-size: 12.5px; font-weight: 650; color: var(--navy); }
.sr-bor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-book { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.sr-empty { padding: 12px 10px; color: var(--muted); font-size: 13px; }

/* ---- confirm modal ------------------------------------------------------ */
.modal-scrim { position: fixed; inset: 0; background: rgba(12,20,38,.42); display: grid; place-items: center; z-index: 80; opacity: 0; transition: opacity .16s; }
/* The [hidden] attribute must win over the display:grid above, or this invisible
   full-screen overlay silently swallows every click on the page. */
.modal-scrim[hidden] { display: none !important; }
.modal-scrim.open { opacity: 1; }
.modal { width: 420px; max-width: 92vw; background: #fff; border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 22px 22px 18px; transform: translateY(6px); transition: transform .16s; }
.modal-scrim.open .modal { transform: none; }
.modal h3 { font-size: 16px; margin-bottom: 8px; }
.modal p { margin: 0 0 18px; color: var(--ink-2); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---- layout utilities (prefer these over inline styles) ----------------- */
.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u-center { display: flex; align-items: center; gap: 8px; }
.u-wrap { flex-wrap: wrap; }
.u-gap-sm { gap: 8px; } .u-gap { gap: 12px; }
.u-mt-0 { margin-top: 0; } .u-mt { margin-top: 12px; } .u-mt-lg { margin-top: 18px; }
.u-mb { margin-bottom: 14px; } .u-mb-lg { margin-bottom: 18px; }

/* ---- daily-collections cards (moved out of the page's inline <style>) ---- */
.collgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 860px){ .collgrid { grid-template-columns: 1fr; } }
.collcard .card-h { align-items: flex-start; }
.upload-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.upload-row input[type=file] { flex: 1; min-width: 180px; }
.colllinks { display: flex; gap: 8px; margin-top: 12px; }
.failedbox { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.failedbox .label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.failed-details > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.failed-details > summary:hover { color: var(--ink); }

/* ---- generic page header ----------------------------------------------- */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.pagehead h1 { font-size: 22px; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.statuspick { width: auto; margin: 0; padding: 4px 26px 4px 9px; font-size: 12px; font-weight: 600; color: var(--ink-2); border-radius: 999px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.statuspick:hover { border-color: #c9d4e2; }

/* breadcrumb */
.crumb { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--ink); }
.crumb .sep { margin: 0 7px; opacity: .6; }

/* books landing */
.bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.bookcard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: box-shadow .14s, border-color .14s, transform .14s; color: inherit; }
.bookcard:hover { box-shadow: var(--shadow-md); border-color: #cfd9e6; transform: translateY(-2px); text-decoration: none; }
.bookcard-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.bookcard .bookname { font-size: 17px; font-weight: 700; color: var(--ink); }
.bookcard .chev { color: var(--gold); font-size: 18px; font-weight: 700; }
.bookstats { display: flex; flex-wrap: wrap; gap: 14px 24px; margin: 16px 0 14px; }
.bookstats .bookval { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.bookbadges { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line-2); min-height: 30px; align-items: center; }
.pagehead .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

/* ---- cards -------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.card .card-h { padding: 14px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; justify-content: space-between; }
.card .card-h h2, .card .card-h h3 { font-size: 14px; }
.card .card-b { padding: 18px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 920px){ .grid2,.grid3 { grid-template-columns: 1fr; } }

/* ---- stat tiles --------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 920px){ .tiles { grid-template-columns: repeat(2,1fr); } }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; box-shadow: var(--shadow-sm); }
a.tile-link { display: block; text-decoration: none; color: inherit; transition: transform .08s ease, box-shadow .12s ease, border-color .12s ease; }
a.tile-link:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0,0,0,.08); border-color: var(--navy); }
.tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.tile .v { font-size: 22px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
.tile.accent { background: linear-gradient(160deg, var(--navy), var(--navy-700)); border-color: var(--navy); color: #fff; }
.tile.accent .k { color: var(--gold-soft); }
.tile .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.tile.accent .sub { color: #c7d3e8; }

/* ---- definition facts --------------------------------------------------- */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 26px; }
@media (max-width: 720px){ .facts { grid-template-columns: 1fr 1fr; } }
.facts > div { padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.facts .label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-bottom: 2px; }
.sup { vertical-align: super; font-size: 9px; }

/* ---- badges ------------------------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 650; text-transform: none; letter-spacing: .2px; padding: 3px 9px; border-radius: 999px; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.performing { background: var(--green-bg); color: var(--green); }
.badge.arrears { background: var(--amber-bg); color: var(--amber); }
.badge.default { background: var(--red-bg); color: var(--red); }
.badge.closed { background: var(--grey-bg); color: var(--grey); }
.badge.frozen { background: #e7eefc; color: #2b5cb8; }
.badge.settled { background: #e1f0e6; color: #2f6b47; } /* balance ≤ £0 on an open account */
.badge.atrisk { background: var(--red-bg); color: var(--red); }
.badge.b-mca { background: #e7eefc; color: #2b5cb8; }
.badge.b-recovery { background: #f3e8fd; color: #7c3aed; } /* shadow loan holding a legacy-archive recovery */
.badge.b-partpaid { background: #fdecd8; color: #9a5b06; } /* arrears of less than one whole instalment (Daniela #30) */
/* neutral, dot-less tag for non-status labels (MCA, repaid/written-off) */
.tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--grey-bg); color: var(--grey); }

/* ---- buttons ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 600; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 9px; padding: 8px 13px; cursor: pointer; transition: background .12s, border-color .12s, box-shadow .12s; white-space: nowrap; }
.btn:hover { background: #f3f6fa; border-color: #d7dfea; text-decoration: none; }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn.primary:hover { background: #1d2f60; }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #2a2208; }
.btn.gold:hover { background: #d4b15e; }
.btn.danger { color: var(--red); border-color: #f0cdd0; background: #fff; }
.btn.danger:hover { background: var(--red-bg); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.linkbtn { border: none; background: none; color: var(--brand2); cursor: pointer; font: inherit; padding: 0; }
.linkbtn.danger { color: var(--red); }
.iconx { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 4px; border-radius: 6px; }
.iconx:hover { background: var(--red-bg); color: var(--red); }

.actionbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 20px; }

/* ---- tabs --------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 20px; overflow-x: auto; }
.tabs button { font: inherit; font-weight: 600; color: var(--muted); background: none; border: none; border-bottom: 2px solid transparent; padding: 11px 15px; cursor: pointer; white-space: nowrap; margin-bottom: -1px; }
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--navy); border-bottom-color: var(--gold); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
/* count pill on a collections tab (items needing action) */
.tabcount { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--red-bg); color: var(--red); vertical-align: middle; }

/* ---- daily collections (per-book tab panel) ---------------------------- */
.collhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.collbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--grey-bg); margin-bottom: 12px; }
.collbar.amber { background: var(--amber-bg); }
.collbar.amber strong { color: var(--amber); }
.collbar.green { background: var(--green-bg); color: var(--green); font-weight: 600; }
.collactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line-2); }
.collactions .upload-row { display: flex; align-items: center; gap: 6px; margin: 0; }
.collactions form { margin: 0; }
.stack-lg > * + * { margin-top: 18px; }

/* ---- tables ------------------------------------------------------------- */
table.grid { width: 100%; border-collapse: collapse; }
table.grid th, table.grid td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line-2); }
table.grid thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); font-weight: 600; }
table.grid td.num, table.grid th.num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); }
table.grid tbody tr:hover { background: #f8fafc; }
table.grid.rowlink tbody tr { cursor: pointer; }
table.grid .strong { font-weight: 700; }
table.statement tr.opening td, table.statement tr.closing td { background: #f3f6fa; font-weight: 650; }
table.statement tr.receipt td.desc { color: var(--green); }
table.statement tr.adjustment td.desc { color: var(--red); }
table.grid tfoot td { border-top: 2px solid var(--line); font-weight: 650; }
.mini th, .mini td { padding: 7px 10px; font-size: 13px; }
.tablecard { overflow: hidden; border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow-sm); background: #fff; }
.tablecard .card-h { padding: 13px 16px; border-bottom: 1px solid var(--line-2); display:flex; justify-content: space-between; align-items:center; }
.totaldue { text-align: right; font-size: 15px; margin-top: 14px; padding: 12px 4px 0; }

/* ---- forms -------------------------------------------------------------- */
label { display: block; font-size: 12px; color: var(--ink-2); font-weight: 600; margin-bottom: 12px; }
input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; border: 1px solid #d6dee9; border-radius: 9px; font: inherit; color: var(--ink); background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(31,111,147,.14); }
textarea { resize: vertical; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.inline-check { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.inline-check input { width: auto; margin: 0; }
.field-note { font-size: 11.5px; color: var(--muted); font-weight: 400; margin-top: 4px; }
.form-actions { display: flex; gap: 10px; margin-top: 6px; }

/* ---- people cards ------------------------------------------------------- */
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.person { border: 1px solid var(--line); border-radius: var(--r); padding: 15px 16px; background: #fff; box-shadow: var(--shadow-sm); }
.person.borrower { border-top: 3px solid var(--navy); }
.person.guarantor { border-top: 3px solid var(--gold); }
.person.contact { border-top: 3px solid var(--brand2); }
.person-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.person-head .pname { font-weight: 700; font-size: 15px; }
.role-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--grey-bg); color: var(--grey); }
.role-tag.borrower { background: #e7edf6; color: var(--navy); }
.role-tag.guarantor { background: #f6eeda; color: #8a6a20; }
.person-detail { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.person-detail dt { color: var(--muted); }
.person-detail dd { margin: 0; }

/* ---- memo / callout ----------------------------------------------------- */
.callout { border-left: 4px solid var(--gold); background: #fffaf0; border-radius: var(--r-sm); padding: 14px 16px; }
.callout.red { border-color: var(--red); background: #fdf3f3; }
.memo-lines { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 8px; }
.memo-lines .label { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* ---- slide-over panels & modal ----------------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(12,20,38,.42); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 40; }
.scrim.open { opacity: 1; pointer-events: auto; }
.panel { position: fixed; top: 0; right: 0; height: 100vh; width: 430px; max-width: 94vw; background: #fff; box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); z-index: 50; display: flex; flex-direction: column; }
.panel.open { transform: none; }
.panel .panel-h { padding: 18px 20px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.panel .panel-h h3 { font-size: 16px; }
.panel .panel-b { padding: 20px; overflow-y: auto; flex: 1; }
.panel .panel-b .field-note { margin-bottom: 14px; }

/* ---- empty state / misc ------------------------------------------------- */
.empty { color: var(--muted); text-align: center; padding: 26px; }
.foot { color: var(--muted); font-size: 11.5px; padding: 18px 30px; border-top: 1px solid var(--line); }
.error { background: var(--red-bg); color: var(--red); padding: 11px 14px; border-radius: 9px; margin-bottom: 14px; }

/* ---- login -------------------------------------------------------------- */
.authpage { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 30% -10%, #1c3163, var(--navy-900)); }
.authcard { width: 360px; background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg); padding: 30px; }
.authcard .mark { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(135deg, var(--gold), #9c7d33); color: var(--navy-900); display: grid; place-items: center; font-weight: 800; margin-bottom: 16px; }

@media print {
  /* Print only the active tab (e.g. the Statement) — chrome hidden. */
  .sidebar, .topbar, .actionbar, .tabs, .scrim, .panel, .modal-scrim, .foot, .card-h .btn, .statement-toolbar > div { display: none !important; }
  .workspace, .wrap { padding: 0; max-width: none; }
  .card { box-shadow: none; border: none; }
  .tabpane:not(.active) { display: none !important; }
  body { background: #fff; }
}

/* ---- account cockpit (detail header) ----------------------------------- */
.acct-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin: 2px 0 16px; }
.acct-id h1 { font-size: 22px; }
.acct-id .sub { color: var(--muted); margin-top: 4px; }
.acct-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 14px; min-width: 116px; box-shadow: var(--shadow-sm); }
.kpi span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.kpi b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi small { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.kpi.primary { background: linear-gradient(160deg, var(--navy), var(--navy-700)); border-color: var(--navy); color: #fff; }
.kpi.primary span { color: var(--gold-soft); } .kpi.primary small { color: #c7d3e8; }
.kpi.alert { background: var(--red-bg); border-color: #f0c4c6; } .kpi.alert b { color: var(--red); }
.kpi.ok b { color: var(--green); }

/* ---- "Account actions" dropdown (native <details>) ---------------------- */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 6px; z-index: 30; display: flex; flex-direction: column; gap: 1px; }
.menu-list button { text-align: left; background: none; border: none; font: inherit; padding: 9px 11px; border-radius: 7px; cursor: pointer; color: var(--ink-2); }
.menu-list button:hover { background: var(--line-2); }
.menu-list button.danger { color: var(--red); } .menu-list button.danger:hover { background: var(--red-bg); }

/* ---- manage row (status / book editing in Summary) --------------------- */
.manage-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.manage-row form { margin: 0; }
.manage-row label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }

/* ---- tab helper note --------------------------------------------------- */
.tabnote { margin: -4px 0 16px; color: var(--muted); font-size: 13px; }

/* ---- dashboard "today's tasks" status strip ---------------------------- */
.daily-status { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 24px; }
@media (max-width: 760px){ .daily-status { grid-template-columns: 1fr; } }
.ds-item { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r); padding: 13px 16px; box-shadow: var(--shadow-sm); }
.ds-item.ok { border-left-color: var(--green); }
.ds-item.warn { border-left-color: var(--amber); }
.ds-item.bad { border-left-color: var(--red); }
.ds-ic { width: 22px; height: 22px; flex: 0 0 22px; }
.ds-item.ok .ds-ic { color: var(--green); }
.ds-item.warn .ds-ic { color: var(--amber); }
.ds-item.bad .ds-ic { color: var(--red); }
.ds-body { flex: 1; min-width: 0; }
.ds-title { font-weight: 650; font-size: 13.5px; }
.ds-detail { color: var(--ink-2); font-size: 12.5px; margin-top: 2px; }
.ds-item .btn { margin-left: auto; }

/* ==== Pass 2: cockpit alerts, statement polish, a11y ===================== */
/* Consolidated alerts strip on the account cockpit (severity in the rail). */
.alerts { border: 1px solid #f0cdd0; border-left: 4px solid var(--red); background: #fdf5f5; border-radius: var(--r-sm); padding: 12px 15px; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.alerts.amber { border-color: #ecdcb4; border-left-color: var(--amber); background: #fdf9f0; }
.alerts .a { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; }
.alerts .a .ai { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 1px; color: var(--red); }
.alerts .a.warn .ai { color: var(--amber); }
.alerts .a b { color: var(--ink); }

/* Statement: zebra + hover + emphasised balance for scannability. */
table.statement tbody tr:nth-child(2n) td { background: #fafbfd; }
table.statement tbody tr:hover td { background: #f2f6fb; }
table.statement tbody td:last-child { font-weight: 600; }
table.statement tr.opening td, table.statement tr.closing td { background: #eef2f8 !important; }

/* Keyboard focus — visible, on-brand, only for keyboard users. */
.btn:focus-visible, .tabs button:focus-visible, .sidebar nav a:focus-visible,
.linkbtn:focus-visible, .iconx:focus-visible, .search input:focus-visible,
table.grid.rowlink tbody tr a:focus-visible, .menu > summary:focus-visible {
  outline: 2px solid var(--brand2); outline-offset: 2px; border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ---- review feedback: floating control + toast ------------------------- */
.fab { position: fixed; right: 18px; bottom: 18px; z-index: 40; background: var(--navy); color: #fff; border: none; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.fab:hover { filter: brightness(1.08); }
.fb-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 41; background: var(--green, #15803d); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600; box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.fb-toast[hidden] { display: none; }
@media print { .fab, .fb-toast { display: none !important; } }

/* ---- readonly reviewers: forms visible but non-functional ---------------- */
/* Reviewers can look at everything but change nothing. Historically we hid
   POST forms entirely — that led to complaints like "the Edit contact details
   button doesn't work" because the disclosure opened onto an empty form. Now
   we keep the form VISIBLE (so reviewers can see what fields exist and note
   what they'd change) but disable interaction with a small badge that says
   why. Logout + the feedback form carry .ro-allow and remain fully live. */
body.role-readonly form[method="post"]:not(.ro-allow) {
  position: relative;
  opacity: .68;
  pointer-events: none;
}
body.role-readonly form[method="post"]:not(.ro-allow)::after {
  content: "🔒 Review mode — edits disabled. Use the feedback button (bottom-right) to flag a change.";
  display: block;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #6a4e05;
  background: #fff6d6;
  border: 1px solid #f0d67a;
  border-radius: 6px;
  pointer-events: auto;  /* keep the notice itself selectable */
}

/* Persistent top banner for readonly users — sets context BEFORE they click
   into anything, so the disabled forms make immediate sense. */
.ro-banner { display: none; }
body.role-readonly .ro-banner {
  display: block;
  background: #fff8e1;
  border-bottom: 1px solid #f0d67a;
  color: #6a4e05;
  font-size: 13px;
  padding: 8px 20px;
  text-align: center;
}
body.role-readonly .ro-banner strong { font-weight: 700; }
body.role-readonly .ro-banner a { color: inherit; text-decoration: underline; }

/* ---- morning cockpit (home page) ---------------------------------------- */
.cockpit { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 24px; }
@media (max-width: 900px){ .cockpit { grid-template-columns: 1fr; } }
.cp-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.cp-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 10px; }
.cp-big { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.cp-money { padding-bottom: 12px; border-bottom: 1px solid var(--line-2); margin-bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.cp-lines { display: flex; flex-direction: column; gap: 7px; }
.cp-line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.cp-dot { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 8px; }
.cp-line.ok .cp-dot { background: var(--green); }
.cp-line.warn .cp-dot { background: var(--amber); }
.cp-line.bad .cp-dot { background: var(--red); }
/* Not due yet — deliberately neutral, and dimmed so the eye skips it. Distinct
   from .bad so "09:00, nothing due" never looks like "the watchdog is wedged". */
.cp-line.pending { color: var(--muted); }
.cp-line.pending .cp-dot { background: var(--line-2, #cbd5e1); }
.cp-chips { display: flex; flex-direction: column; gap: 8px; }
.cp-chip { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-weight: 500; }
.cp-chip:hover { border-color: var(--brand2); text-decoration: none; background: #fff; }
.cp-chip .cp-n { min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-weight: 700; font-size: 12.5px; padding: 0 7px; }
.cp-chip .chev { margin-left: auto; color: var(--muted); }
.cp-clear { padding: 14px 4px; color: var(--green); font-weight: 600; }

/* ---- staging data-freshness note (review copy only) ---------------------- */
.staging-note { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--amber); background: var(--amber-bg); border-radius: 999px; padding: 4px 12px; white-space: nowrap; }

/* ---- feedback conversation thread ---------------------------------------- */
.fb-thread { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--line-2); padding-top: 10px; }
.fb-msg { padding: 8px 12px; border-radius: 9px; max-width: 85%; }
.fb-msg.theirs { background: var(--amber-bg); align-self: flex-start; }
.fb-msg.mine { background: var(--line-2); align-self: flex-end; }

/* ---- Creditsafe report tab ---------------------------------------------- */
.cs-headline { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px){ .cs-headline { grid-template-columns: repeat(3, 1fr); } }
.cs-hcell { padding: 8px 10px; background: var(--bg); border-radius: 8px; }
.cs-big { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }
.cs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px){ .cs-grid2 { grid-template-columns: 1fr; } }

/* ---- Creditsafe risk-band colouring (matches PDF R/A/G banner) ---------- */
.cs-hcell.cs-risk-very-low { background: var(--green-bg); }
.cs-hcell.cs-risk-very-low .cs-big { color: var(--green); }
.cs-hcell.cs-risk-low { background: var(--green-bg); }
.cs-hcell.cs-risk-low .cs-big { color: var(--green); }
.cs-hcell.cs-risk-moderate { background: var(--amber-bg); }
.cs-hcell.cs-risk-moderate .cs-big { color: var(--amber); }
.cs-hcell.cs-risk-high { background: var(--red-bg); }
.cs-hcell.cs-risk-high .cs-big { color: var(--red); }
.cs-hcell.cs-risk-very-high { background: var(--red-bg); }
.cs-hcell.cs-risk-very-high .cs-big { color: var(--red); }
.cs-hcell.cs-risk-unknown { background: var(--grey-bg); }
.cs-hcell.cs-risk-unknown .cs-big { color: var(--grey); font-size: 20px; }

/* ---- Creditsafe indicator chips + detail blocks ------------------------- */
.cs-ind-chip { display: inline-block; color: var(--red); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red-bg); text-underline-offset: 3px; }
.cs-ind-chip:hover { text-decoration-color: var(--red); }
.cs-ind-block + .cs-ind-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.cs-ind-h { margin-bottom: 8px; color: var(--red); display: flex; align-items: center; gap: 6px; }
/* Scroll-margin so anchor jumps don't hide behind the sticky topbar. */
#cs-petitions, #cs-insolvency, #cs-court, #cs-indicators { scroll-margin-top: 72px; }

/* ---- side-panel forms: readable labels + full-width inputs -------------- */
/* Was: bare textarea in the Add-note panel rendered at ~20 chars wide with
   the label glued to it (Lubna's "there is no box to type in"). */
.panel .panel-b form { display: flex; flex-direction: column; gap: 12px; }
.panel .panel-b form label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.panel .panel-b form input[type="text"],
.panel .panel-b form input[type="email"],
.panel .panel-b form input[type="tel"],
.panel .panel-b form input[type="number"],
.panel .panel-b form input[type="date"],
.panel .panel-b form select,
.panel .panel-b form textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.panel .panel-b form textarea { min-height: 100px; resize: vertical; font-family: inherit; }
.panel .panel-b form input:focus, .panel .panel-b form textarea:focus, .panel .panel-b form select:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(31,111,147,.15); }
.panel .panel-b form .form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Search: status chip beside borrower name — makes closed matches obvious. */
.sr-status { display: inline-block; margin-left: 8px; padding: 1px 7px; font-size: 10.5px; font-weight: 700; border-radius: 999px; background: var(--green-bg); color: var(--green); text-transform: capitalize; }
.sr-status.closed { background: var(--grey-bg); color: var(--grey); }
.sr-status.arrears { background: var(--amber-bg); color: var(--amber); }
.sr-status.default { background: var(--red-bg); color: var(--red); }

/* ---- status-filter chips on book page (Jacqui + Stephen: clickable counts) */
.statfilter { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 18px; }
.statfilter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.statfilter-chip:hover { text-decoration: none; border-color: var(--brand2); color: var(--ink); }
.statfilter-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.statfilter-chip.on .statfilter-n { background: rgba(255,255,255,.16); color: #fff; }
.statfilter-n { background: var(--line-2); color: var(--ink-2); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.statfilter-chip.performing:hover, .statfilter-chip.performing.on { border-color: var(--green); }
.statfilter-chip.arrears:hover, .statfilter-chip.arrears.on { border-color: var(--amber); }
.statfilter-chip.default:hover, .statfilter-chip.default.on { border-color: var(--red); }

/* ---- sortable table headers -------------------------------------------- */
table.sortable thead th[data-sort] { user-select: none; position: relative; padding-right: 18px; }
table.sortable thead th[data-sort]:hover { color: var(--brand2); }
table.sortable thead th[data-sort]::after { content: '↕'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--muted); opacity: .5; }
table.sortable thead th.sort-on::after { opacity: 1; color: var(--brand2); }
table.sortable thead th[data-dir="asc"]::after { content: '↑'; }
table.sortable thead th[data-dir="desc"]::after { content: '↓'; }

/* In-credit badge (Jake's negative-balance flag) — soft blue so it doesn't read as risk. */
.badge.b-credit { background: #dfe9f7; color: #1e3a72; }

/* Parties tab: inline edit form (matches side-panel form styling). */
.person .editc[open] { padding-top: 8px; border-top: 1px solid var(--line-2); }
.person .editc form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.person .editc form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.person .editc form input { width: 100%; box-sizing: border-box; padding: 7px 10px; font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.person .editc form input:focus { outline: none; border-color: var(--brand2); box-shadow: 0 0 0 3px rgba(31,111,147,.15); }

/* Date-range caption under the collection tiles on the book cards — the two
   tiles use different windows (rolling 7 days vs calendar month to date), so
   each states its own. */
.xsmall { font-size: 10.5px; letter-spacing: .01em; margin-top: 2px; }

/* "NEW" flag next to a feature a reviewer has not yet seen (see config/whats-new.ts).
   Deliberately louder than .badge: the whole point is that it catches the eye. */
.badge-new { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; background: var(--brand2, #1f6f93); color: #fff; vertical-align: middle; margin-left: 5px; }