/* Audit Control Centre — one stylesheet, no framework, no CDN.
 *
 * ⚠️ This is the visual language of the system this replaces, carried across on purpose.
 * Kerry's staff have worked in that application for a long time; a workspace that looks
 * unfamiliar is one where people hesitate over things they already know how to do. The
 * palette, the type sizes, the panel shape, the blue buttons and the 270px client list
 * are all taken from its stylesheet rather than reinvented.
 *
 * Nothing here is per-practice. The logo and the address come from the firm's record —
 * see /api/brand — because the same code serves a second practice under its own name.
 */

:root {
  --ink:        #202937;   /* the old app's body colour                       */
  --ink-soft:   #53647c;
  --ink-faint:  #637087;
  --paper:      #f4f6fa;
  --card:       #ffffff;
  --rule:       #dce2ed;   /* panel and header borders                        */
  --field:      #cfd8e6;   /* input borders, a shade darker than the panels   */
  --accent:     #0c75f4;   /* the blue every primary button is                */
  --accent-dim: #edf5ff;   /* the selected client row                         */
  --second:     #edf2fa;   /* secondary buttons                               */
  --second-ink: #283753;
  --second-rule:#d6dfec;
  --link:       #1266cf;
  --warn:       #780bd6;   /* the old app's one warning colour, a deep violet */
  --warn-dim:   #f3effa;
  --bad:        #b42318;
  --bad-dim:    #fdeceb;
  --ok:         #17653f;
  --ok-dim:     #e7f2ec;
  --deep:       #23113d;   /* the active tab                                  */
}

* { box-sizing: border-box }
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
button, input, textarea, select { font: inherit }
a { color: var(--link) }
h1 { font-size: 27px; margin: 0 0 12px }
h2 { font-size: 20px; margin: 0 0 16px }
h3 { font-size: 16px; margin: 0 0 12px }
p { line-height: 1.55 }
[hidden] { display: none !important }

/* ── buttons ─────────────────────────────────────────────────────────────── */
button, .btn {
  border: 0; border-radius: 8px; background: var(--accent); color: #fff;
  padding: 10px 15px; font-size: 14px; cursor: pointer;
  display: inline-block; text-decoration: none; text-align: center;
}
button:hover, .btn:hover { filter: brightness(1.06) }
button:disabled, .btn:disabled { opacity: .55; cursor: wait; filter: none }
button.secondary, .btn.ghost {
  background: var(--second); color: var(--second-ink); border: 1px solid var(--second-rule);
}
button.secondary:hover, .btn.ghost:hover { background: #e3ebf7; filter: none }
.btn.wide { width: 100% }

/* ── fields ──────────────────────────────────────────────────────────────── */
input, textarea, select {
  display: block; width: 100%; padding: 10px; margin-top: 7px;
  border: 1px solid var(--field); border-radius: 6px; background: #fff; color: inherit;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid #0c75f433; border-color: var(--accent);
}
textarea { min-height: 100px; resize: vertical }
label { font-size: 13px; font-weight: 600; display: block }
.field { margin-bottom: 14px }
.field label { margin-bottom: 0 }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.grid .wide { grid-column: 1 / -1 }
.fine, small { font-size: 12px; color: var(--ink-faint); line-height: 1.7 }
.sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 16px }
.money { font-variant-numeric: tabular-nums }
.empty { color: var(--ink-faint); text-align: center; padding: 50px 20px; margin: 0 }

/* ── the header ──────────────────────────────────────────────────────────── */
header.top {
  background: var(--card); border-bottom: 1px solid var(--rule);
  padding: 18px 30px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
}
.top .mark-logo { width: 160px; height: auto; display: block }
.top .mark { font-weight: 700; font-size: 17px }
.top nav { display: flex; align-items: center; gap: 9px; flex-wrap: wrap }
.top .user { font-size: 13px; text-align: right; line-height: 1.5 }
.draftBanner { color: #584474; font-size: 12px; letter-spacing: .5px }
.role {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft);
}
/* The approval queue, as a button like the rest of the bar. */
.queue { background: var(--second); color: var(--second-ink); border: 1px solid var(--second-rule) }
.queue .n {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 6px;
  border-radius: 10px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.queue.waiting .n { background: var(--bad) }

/* ── the page ────────────────────────────────────────────────────────────── */
.shell { max-width: 1440px; margin: 0 auto; padding: 28px }
.layout { display: grid; grid-template-columns: 270px 1fr; gap: 25px; align-items: start }
.panel {
  background: var(--card); border: 1px solid var(--rule); border-radius: 12px;
  padding: 23px; margin-bottom: 22px;
}
.panel h2 { margin: 0 0 2px }
.panel h2 + .sub { margin-top: 6px }

/* ── the client list ─────────────────────────────────────────────────────── */
.layout aside .count {
  font-size: 11px; color: var(--ink-faint); letter-spacing: .05em;
  text-transform: uppercase; margin: 12px 0 4px;
}
.clientList { max-height: 72vh; overflow: auto }
.row {
  display: block; width: 100%; text-align: left; margin: 7px 0; cursor: pointer;
  background: #fff; color: var(--ink); border: 1px solid #e3e7ee; border-radius: 8px;
  padding: 9px 11px; font-size: 13px;
}
.row:hover { border-color: var(--field); filter: none }
.row[aria-current="true"] { border-color: var(--accent); background: var(--accent-dim) }
.row .nm { font-weight: 700; display: block }
.row .sv { color: var(--ink-soft) }
.row .meta { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 3px }

/* ── notes ───────────────────────────────────────────────────────────────── */
.note {
  padding: 14px; font-size: 13px; margin: 0 0 14px;
  background: var(--warn-dim); border-left: 3px solid var(--warn); color: var(--ink);
}
.note.bad  { background: var(--bad-dim);  border-left-color: var(--bad);  color: var(--bad) }
.note.ok   { background: var(--ok-dim);   border-left-color: var(--ok);   color: var(--ok) }
.note.warn { background: var(--warn-dim); border-left-color: var(--warn); color: #584474 }
.status, .msg { font-size: 13px; color: var(--ink-soft); margin: 0; min-height: 20px }
.save { display: flex; align-items: center; gap: 12px; margin-top: 4px }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 15px 0 0 }
.acts .btn, .acts button { padding: 8px 13px; font-size: 13px }

/* ── chips ───────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px }
.chip {
  font-size: 12px; padding: 7px 11px; border-radius: 8px;
  border: 1px solid var(--second-rule); background: var(--second); color: var(--second-ink);
}
.chip[aria-pressed="true"] { background: var(--accent-dim); border-color: var(--accent); color: var(--second-ink) }

/* ── tables ──────────────────────────────────────────────────────────────── */
.files, .irl { width: 100%; border-collapse: collapse; font-size: 13px }
.files th, .irl th {
  text-align: left; font-size: 12px; color: #53627a; background: #f6f8fc;
  padding: 13px 10px; border-bottom: 1px solid #e2e7ef; font-weight: 700;
}
.files td, .irl td { padding: 13px 10px; border-bottom: 1px solid #e2e7ef; vertical-align: top }
.tag {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 4px; background: var(--warn-dim); color: var(--warn);
}
.tag.signed { background: var(--ok-dim); color: var(--ok) }

/* ── the audit papers ────────────────────────────────────────────────────── */
.forms { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px }
.formcard {
  flex: 1 1 200px; text-align: left; background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 9px; padding: 18px;
}
.formcard:hover { border-color: var(--accent); filter: none }
.formcard[aria-current="true"] { border-color: var(--accent); background: var(--accent-dim) }
.formcard .t { font-weight: 700; display: block }
.formcard .n { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums }
.bar-track { height: 14px; border-radius: 3px; background: #e6ebf3; margin-top: 8px; overflow: hidden }
.bar-fill { height: 100%; background: var(--accent); width: 0; display: block }

.pager { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin: 15px 0 }
.pg {
  min-width: 34px; padding: 7px 9px; font-size: 13px; background: #fff;
  color: #36455f; border: 1px solid #d3dceb; border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
.pg[aria-current="true"] { background: var(--deep); color: #fff; border-color: var(--deep) }
.pg.full { border-color: var(--ok); color: var(--ok) }
.pg[aria-current="true"].full { background: var(--ok); color: #fff; border-color: var(--ok) }
.saved-mark { font-size: 12px; color: var(--ok) }

.fq { border-top: 1px solid #e2e7ef; padding: 14px 0 }
.fq:first-child { border-top: 0 }
.fq label { font-size: 13px; color: var(--ink); margin-bottom: 6px; font-weight: 600 }
.fq .name {
  font-size: 10px; color: var(--ink-faint); letter-spacing: .05em; text-transform: uppercase;
  font-weight: 400;
}
/* A Yes/No question has three states, not two. A tick box can only say "ticked" or "not
   ticked", which would quietly turn every unanswered question into a "No". */
.yn { display: flex; gap: 7px; flex-wrap: wrap }
.yn button {
  padding: 7px 15px; font-size: 13px; background: #fff; color: #36455f;
  border: 1px solid #d3dceb; border-radius: 8px;
}
.yn button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff }
.yn button.no[aria-pressed="true"] { background: var(--bad); border-color: var(--bad) }
.yn .clear { color: var(--ink-faint); border-style: dashed }
.yn .clear[aria-pressed="true"] { background: #eef1f5; color: var(--second-ink); border-style: solid }

/* ── approvals ───────────────────────────────────────────────────────────── */
.req, .rev { border-top: 1px solid #e2e7ef; padding: 16px 0 }
.req:first-child, .rev:first-child { border-top: 0 }
.req .head, .rev .head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px }
.req .t, .rev .t { font-weight: 700 }
.req .who, .rev .who { font-size: 12px; color: var(--ink-soft) }
.st {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; background: #eef1f5; color: var(--ink-soft);
}
.st.pending, .st.changes, .st.reading, .st.reporting { background: var(--warn-dim); color: var(--warn) }
.st.approved, .st.done { background: var(--ok-dim); color: var(--ok) }
.st.stale, .st.rejected, .st.failed { background: var(--bad-dim); color: var(--bad) }

.decide {
  border: 1px solid var(--rule); border-radius: 9px; padding: 18px; margin-top: 12px;
  background: #fbfcfe;
}
.decide .lab {
  display: block; font-size: 12px; font-weight: 700; color: #53627a; margin-bottom: 2px;
}
.decide .why { font-size: 12px; color: var(--ink-soft); margin: 4px 0 8px }
.decide input, .decide textarea { margin-bottom: 12px }
.decide textarea { min-height: 70px }

.qrow {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; cursor: pointer;
  border-top: 1px solid #e2e7ef; padding: 13px 0;
}
.qrow:first-child { border-top: 0 }
.qrow:hover .t { color: var(--accent) }
.qrow .cl { font-weight: 700; min-width: 180px }

/* ── the information request log ─────────────────────────────────────────── */
.irl td.n { color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 20px }
.irl td.n.sent { color: var(--accent); font-weight: 700 }
.irl input, .irl select { margin-top: 0; padding: 8px 9px }
.irl td.said { color: var(--ink-soft); padding-top: 18px }
.irl .when { display: block; font-size: 11px; color: var(--ink-faint); margin-top: 4px }
.irl .x {
  width: 30px; padding: 8px 0; background: #fff; color: var(--ink-faint);
  border: 1px solid var(--second-rule); border-radius: 8px; line-height: 1;
}
.irl .x:hover { border-color: var(--bad); color: var(--bad); filter: none }
.picks {
  display: grid; gap: 6px; max-height: 190px; overflow: auto; padding: 12px;
  background: #fff; border: 1px solid var(--field); border-radius: 6px; margin-bottom: 12px;
}
.picks label { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; font-weight: 400 }
.picks input { width: auto; margin: 3px 0 0; accent-color: var(--accent) }
label.btn { display: inline-flex; align-items: center; justify-content: center; cursor: pointer }

/* ── financial statement screening ───────────────────────────────────────── */
.counts { display: flex; flex-wrap: wrap; gap: 18px; margin: 12px 0; font-size: 13px;
          color: var(--ink-soft) }
.counts .c {
  display: inline-block; min-width: 22px; padding: 1px 8px; border-radius: 4px;
  background: #eef1f5; color: var(--ink); font-weight: 700; margin-right: 5px;
  font-variant-numeric: tabular-nums;
}
.counts .c.bad  { background: var(--bad-dim);  color: var(--bad) }
.counts .c.warn { background: var(--warn-dim); color: var(--warn) }
/* "NOT checked" carries the same weight as a finding on purpose: it is the thing
   somebody still has to go and do by hand. */
.checks { margin-top: 12px; border: 1px solid var(--rule); border-radius: 9px; overflow: hidden }
.ck { display: flex; gap: 14px; padding: 13px 14px; border-top: 1px solid #e2e7ef; font-size: 13px }
.ck:first-child { border-top: 0 }
.ck .mark {
  flex: 0 0 96px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding-top: 2px; color: var(--ink-faint);
}
.ck.finding { background: var(--bad-dim) }
.ck.finding .mark { color: var(--bad) }
.ck.not-run { background: var(--warn-dim) }
.ck.not-run .mark { color: var(--warn) }
.ck .d { color: var(--ink-soft) }
.ck .sev { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint) }

/* ── narrow screens ──────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .layout { grid-template-columns: 1fr }
  .clientList { max-height: 240px }
  .grid { grid-template-columns: 1fr }
  header.top { flex-wrap: wrap }
  .shell { padding: 16px }
  .files, .irl { display: block; overflow: auto }
}

/* ── sign in ─────────────────────────────────────────────────────────────────
   Carried across from the system this replaces, so that the page Kerry's staff
   open every morning is the one they already know. The logo and the address come
   from the firm's RECORD, never from this repository — a second practice signs
   in to its own name on the same code. */
.loginBody {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f4f6fa, #eee8f9);
  padding: 24px;
}
.loginCard {
  width: min(440px, 92vw);
  background: #fff;
  padding: 38px;
  border: 1px solid #dfe4ef;
  border-radius: 18px;
  box-shadow: 0 20px 55px #24113f12;
}
.loginCard img { width: 190px; max-width: 100%; margin-bottom: 25px; display: block }
.loginCard .eyebrow { font-size: 11px; letter-spacing: 2px; color: #695381; margin: 0 }
.loginCard h1 { font-size: 27px; margin: 0 0 12px }
.loginCard p { line-height: 1.55; margin: 0 }
.loginCard label { display: block; margin: 18px 0 }
.loginCard button { width: 100%; margin-top: 8px }
/* The failure has to be readable without shifting the form under the pointer. */
.loginMessage { min-height: 20px; margin: 12px 0 0; font-size: 13px; color: var(--bad) }
.loginCard .fine { margin-top: 22px }

/* ── the landing page ────────────────────────────────────────────────────────
   Cards in the shape the old system used, but every figure on them is counted
   from the database when the page is asked for. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px }
.cards .card { padding: 18px; margin-bottom: 22px; border-radius: 9px }
.cards .card h3 { margin: 0 0 6px; font-size: 13px; color: var(--ink-soft) }
.cards .card .big {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cards .card .fine { margin: 6px 0 0 }
/* A note that is somebody's turn to act reads as something to click. */
.note[data-go] { transition: filter .1s }
.note[data-go]:hover { filter: brightness(.97) }
/* The mark is the way back to the overview, so it has to behave like a control
   without looking like a button in the middle of a white bar. */
.top .home {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 10px; color: inherit;
}
.top .home:hover { filter: none; opacity: .8 }
.servicePick { margin: 10px 0 }
.invoiceTotals td { padding: 6px 10px }