/* Auditmate Lite — application styles */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --border: #e2e5ea;
  --border-strong: #cbd1da;
  --text: #1a1f2b;
  --text-muted: #6b7280;
  --text-faint: #9aa1ac;

  --brand: #1e4d8c;
  --brand-dark: #163a6b;
  --brand-light: #eaf1fa;

  --green: #1a7f4b;
  --green-light: #e7f5ed;
  --amber: #a86a00;
  --amber-light: #fdf3e0;
  --red: #b3261e;
  --red-light: #fdeceb;
  --purple: #6d3fa8;
  --purple-light: #f2ecfa;

  --sidebar-w: 232px;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(16, 24, 40, .07), 0 1px 2px rgba(16, 24, 40, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

/* ---------------------------------------------------------------- layout */

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

.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: #16233a;
  color: #c3ccdb;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 20px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.sidebar-brand .logo {
  font-size: 16px; font-weight: 700; color: #fff; letter-spacing: -.2px;
  display: flex; align-items: center; gap: 8px;
}
.sidebar-brand .logo-mark {
  width: 26px; height: 26px; border-radius: 6px; background: var(--brand);
  display: grid; place-items: center; font-size: 13px; color: #fff;
}
.sidebar-brand .tagline { font-size: 11px; color: #7d8ba3; margin-top: 4px; }

.sidebar-nav { padding: 12px 10px; flex: 1; }
.nav-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .6px;
  color: #64738c; padding: 12px 10px 6px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 6px; color: #c3ccdb;
  font-size: 13.5px; margin-bottom: 2px;
}
.nav-item:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.nav-item.active { background: var(--brand); color: #fff; font-weight: 500; }
.nav-item .icon { width: 16px; text-align: center; opacity: .9; }

.sidebar-footer {
  padding: 14px; border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
}
.user-chip { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--brand);
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600;
  flex-shrink: 0;
}
.user-chip .name { color: #fff; font-weight: 500; }
.user-chip .role { color: #7d8ba3; font-size: 11px; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; }

.topbar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 0 26px; height: 58px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 20;
}
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-muted); }
.breadcrumb .sep { color: var(--text-faint); }
.breadcrumb .current { color: var(--text); font-weight: 500; }

.content { padding: 24px 26px 60px; max-width: 1400px; }

.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; margin-bottom: 20px; flex-wrap: wrap;
}
.page-head .subtitle { color: var(--text-muted); font-size: 13.5px; margin-top: 3px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- surface */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 18px;
}
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h2 { font-size: 15px; }
.card-head .hint { font-size: 12.5px; color: var(--text-muted); font-weight: 400; }
.card-body { padding: 18px; }
.card-body.tight { padding: 0; }

/* --------------------------------------------------------------- metrics */

.metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 22px;
}
.metric {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow);
}
.metric .label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); font-weight: 600;
}
.metric .value { font-size: 27px; font-weight: 650; margin-top: 6px; letter-spacing: -.5px; }
.metric .foot { font-size: 12px; color: var(--text-faint); margin-top: 3px; }
.metric.accent-blue  .value { color: var(--brand); }
.metric.accent-amber .value { color: var(--amber); }
.metric.accent-green .value { color: var(--green); }
.metric.accent-red   .value { color: var(--red); }

/* --------------------------------------------------------------- tables */

table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th {
  text-align: left; padding: 10px 14px; background: #fafbfc;
  border-bottom: 1px solid var(--border); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted);
  white-space: nowrap;
}
table.data td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #fafbfc; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .muted { color: var(--text-muted); font-size: 12.5px; }

.table-wrap { overflow-x: auto; }

/* ---------------------------------------------------------------- pills */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px; font-size: 11.5px; font-weight: 600;
  white-space: nowrap; line-height: 1.6;
}
.pill-grey   { background: #eef0f3; color: #5a6472; }
.pill-blue   { background: var(--brand-light); color: var(--brand); }
.pill-green  { background: var(--green-light); color: var(--green); }
.pill-amber  { background: var(--amber-light); color: var(--amber); }
.pill-red    { background: var(--red-light); color: var(--red); }
.pill-purple { background: var(--purple-light); color: var(--purple); }

.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* -------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 15px; border-radius: 6px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font-size: 13.5px;
  font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: #f7f8fa; text-decoration: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-success { background: var(--green); border-color: var(--green); color: #fff; }
.btn-success:hover { background: #14683c; }
.btn-danger  { background: var(--surface); border-color: #e5b5b2; color: var(--red); }
.btn-danger:hover { background: var(--red-light); }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-lg { padding: 11px 22px; font-size: 14.5px; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* --------------------------------------------------------------- forms */

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12.5px; font-weight: 600; color: #3f4754; }
.field .help { font-size: 11.5px; color: var(--text-faint); }
.field input, .field select, .field textarea {
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 13.5px; font-family: inherit; background: #fff; color: var(--text);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(30, 77, 140, .1);
}
.field textarea { resize: vertical; min-height: 76px; }

.fieldset-title {
  font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); font-weight: 700; margin: 22px 0 12px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.fieldset-title:first-child { margin-top: 0; }

.form-actions {
  display: flex; gap: 9px; justify-content: flex-end; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------- flash */

.flashes { margin-bottom: 18px; display: flex; flex-direction: column; gap: 9px; }
.flash {
  padding: 11px 15px; border-radius: 6px; font-size: 13.5px;
  border-left: 3px solid; display: flex; gap: 9px; align-items: flex-start;
}
.flash-success { background: var(--green-light); border-color: var(--green); color: #14522f; }
.flash-error   { background: var(--red-light); border-color: var(--red); color: #7d1a15; }
.flash-warning { background: var(--amber-light); border-color: var(--amber); color: #6d4500; }
.flash-info    { background: var(--brand-light); border-color: var(--brand); color: var(--brand-dark); }

/* ---------------------------------------------------------------- misc */

.empty {
  text-align: center; padding: 46px 20px; color: var(--text-muted);
}
.empty .icon { font-size: 34px; opacity: .35; margin-bottom: 10px; }
.empty h3 { margin-bottom: 6px; color: var(--text); }
.empty p { margin: 0 0 16px; font-size: 13.5px; }

.searchbar { display: flex; gap: 8px; }
.searchbar input {
  padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 13.5px; min-width: 260px; font-family: inherit;
}

.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: #fafbfc;
}
.toolbar select {
  padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 6px;
  font-size: 13px; font-family: inherit; background: #fff;
}

.stack { display: flex; flex-direction: column; gap: 3px; }
.strong { font-weight: 600; }
.muted { color: var(--text-muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.mono { font-family: "Cascadia Mono", Consolas, monospace; font-size: 12.5px; }
.right { text-align: right; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* -------------------------------------------------------- progress rail */

.progress-rail { display: flex; align-items: center; gap: 0; margin: 4px 0; }
.rail-step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; }
.rail-step .bullet {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: #eef0f3; color: #8a929e;
  border: 1px solid var(--border);
}
.rail-step.done .bullet { background: var(--green); color: #fff; border-color: var(--green); }
.rail-step.active .bullet { background: var(--brand); color: #fff; border-color: var(--brand); }
.rail-step.done .text { color: var(--green); font-weight: 600; }
.rail-step.active .text { color: var(--brand); font-weight: 600; }
.rail-step .text { color: var(--text-muted); }
.rail-line { flex: 1; height: 2px; background: var(--border); margin: 0 10px; min-width: 20px; }
.rail-line.done { background: var(--green); }

/* ------------------------------------------------------------ fy cards */

.fy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.fy-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px;
  background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
.fy-card:hover { border-color: var(--brand); box-shadow: var(--shadow); text-decoration: none; }
.fy-card .fy-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.fy-card .fy-label { font-size: 16px; font-weight: 650; color: var(--text); }
.fy-card .fy-dates { font-size: 12px; color: var(--text-faint); margin-bottom: 12px; }
.fy-card .fy-stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-muted); }

/* ---------------------------------------------------------- AI notices */

.ai-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 20px; font-size: 11px; font-weight: 600;
  background: var(--purple-light); color: var(--purple);
}
.ai-note {
  background: var(--purple-light); border: 1px solid #ddd0f0;
  border-radius: 6px; padding: 11px 14px; font-size: 12.5px; color: #4d2b7d;
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px;
}
.ai-note .icon { font-size: 15px; }

.notice {
  background: var(--brand-light); border: 1px solid #cfe0f5; border-radius: 6px;
  padding: 11px 14px; font-size: 12.5px; color: var(--brand-dark);
  display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px;
}
.notice.warn { background: var(--amber-light); border-color: #f0dfc0; color: #6d4500; }
.notice.danger { background: var(--red-light); border-color: #f2cdcb; color: #7d1a15; }
.notice.ok { background: var(--green-light); border-color: #c8e6d5; color: #14522f; }

/* ------------------------------------------------------------ split UI */

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); min-height: 620px;
}
.split-pane { display: flex; flex-direction: column; min-width: 0; }
.split-pane + .split-pane { border-left: 1px solid var(--border); }
.split-head {
  padding: 11px 15px; background: #fafbfc; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 12.5px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .4px;
}
.split-body { flex: 1; overflow: auto; min-height: 0; }
.split-body.padded { padding: 16px; }

.doc-viewer { width: 100%; height: 100%; min-height: 560px; border: 0; }
.doc-placeholder {
  padding: 40px 24px; text-align: center; color: var(--text-muted);
}
.doc-placeholder .big { font-size: 40px; opacity: .3; margin-bottom: 12px; }

/* ----------------------------------------------------------- edit grid */

table.grid { width: 100%; border-collapse: collapse; font-size: 13px; }
table.grid th {
  position: sticky; top: 0; z-index: 2;
  background: #fafbfc; padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--border-strong); font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted);
  font-weight: 700; white-space: nowrap;
}
table.grid td { padding: 0; border-bottom: 1px solid var(--border); }
table.grid td.actions { padding: 4px 8px; white-space: nowrap; }

/* Editable cells.
   These were borderless and transparent, which reads as printed text - an
   auditor looking at a wrong figure had no way to know they could just
   correct it. A hairline on hover says "this moves" without turning the
   grid into a page of form boxes. */
table.grid input.cell {
  width: 100%; padding: 7px 9px; font-size: 13px;
  font-family: inherit; color: var(--text);
  background: transparent;
  border: 1px solid transparent; border-radius: 5px;
  transition: border-color .12s, background .12s;
}
table.grid input.cell:hover:not([readonly]) {
  border-color: var(--border-strong, #c3cbd6);
  background: #fff;
  cursor: text;
}
table.grid input.cell:focus {
  outline: none; background: #fff;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-light);
}
table.grid input.cell.num {
  text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

tr.row-flagged { background: var(--amber-light); }
tr.row-flagged:hover { background: #fbeed6; }
tr.row-corrected { background: var(--green-light); }
tr.row-discarded { opacity: .42; text-decoration: line-through; }
tr.row-saving { background: var(--brand-light); }

.conf {
  display: inline-block; padding: 1px 6px; border-radius: 4px;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.conf-high { background: var(--green-light); color: var(--green); }
.conf-mid  { background: var(--amber-light); color: var(--amber); }
.conf-low  { background: var(--red-light); color: var(--red); }

.grid-footer {
  padding: 12px 15px; border-top: 1px solid var(--border-strong); background: #fafbfc;
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; flex-wrap: wrap; font-size: 13px;
}
.totals { display: flex; gap: 20px; font-variant-numeric: tabular-nums; }
.totals .t-item .t-label {
  font-size: 11px; text-transform: uppercase; color: var(--text-muted);
  letter-spacing: .4px; font-weight: 600;
}
.totals .t-item .t-value { font-size: 15px; font-weight: 650; }

.icon-btn {
  border: 0; background: transparent; cursor: pointer; padding: 4px 6px;
  border-radius: 4px; font-size: 13px; color: var(--text-faint); line-height: 1;
}
.icon-btn:hover { background: #eef0f3; color: var(--text); }
.icon-btn.ok:hover { background: var(--green-light); color: var(--green); }
.icon-btn.no:hover { background: var(--red-light); color: var(--red); }

/* ------------------------------------------------------- upload dropzone */

.dropzone {
  border: 2px dashed var(--border-strong); border-radius: var(--radius);
  padding: 44px 24px; text-align: center; background: #fafbfc;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.dragging {
  border-color: var(--brand); background: var(--brand-light);
}
.dropzone .big { font-size: 38px; opacity: .4; margin-bottom: 10px; }
.dropzone h3 { margin-bottom: 5px; }
.dropzone p { color: var(--text-muted); margin: 0; font-size: 13px; }

.file-list { margin-top: 16px; display: flex; flex-direction: column; gap: 7px; }
.file-row {
  display: flex; align-items: center; gap: 11px; padding: 9px 13px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  font-size: 13px;
}
.file-row .fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .fsize { color: var(--text-faint); font-size: 12px; }
.file-row .ftype {
  width: 34px; height: 34px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; background: var(--brand-light); color: var(--brand);
  flex-shrink: 0;
}

/* --------------------------------------------------------- statements UI */

table.fin { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.fin th {
  padding: 9px 14px; text-align: right; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted);
  border-bottom: 2px solid var(--border-strong);
}
table.fin th:first-child { text-align: left; }
table.fin td { padding: 7px 14px; border-bottom: 1px solid #f0f2f5; }
table.fin td.num {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.fin tr.group-head td {
  background: #fafbfc; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--text-muted); padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}
table.fin tr.subtotal td {
  font-weight: 650; border-top: 1px solid var(--border-strong);
  border-bottom: 1px solid var(--border-strong); background: #fcfcfd;
}
table.fin tr.total td {
  font-weight: 700; border-top: 2px solid var(--text); border-bottom: 3px double var(--text);
  background: #fafbfc;
}
table.fin .indent-1 { padding-left: 32px; }
table.fin input.amount {
  width: 130px; text-align: right; padding: 5px 8px; border: 1px solid transparent;
  border-radius: 4px; font-size: 13.5px; font-family: inherit; background: transparent;
  font-variant-numeric: tabular-nums;
}
table.fin input.amount:hover { border-color: var(--border-strong); background: #fff; }
table.fin input.amount:focus {
  outline: none; border-color: var(--brand); background: #fff;
  box-shadow: 0 0 0 3px rgba(30, 77, 140, .1);
}
table.fin tr.overridden input.amount { background: var(--amber-light); border-color: #e8d3ab; }

.override-flag {
  font-size: 10px; color: var(--amber); font-weight: 700; margin-left: 6px;
  text-transform: uppercase; letter-spacing: .3px;
}

.statement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.statement-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; background: var(--surface);
}
.statement-card:hover { border-color: var(--brand); text-decoration: none; }
.statement-card .st-name { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.statement-card .st-meta { font-size: 12px; color: var(--text-muted); }

/* ------------------------------------------------------------ report UI */

.report-layout { display: grid; grid-template-columns: 330px 1fr; gap: 18px; align-items: start; }

.section-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
  margin-bottom: 7px; cursor: grab; font-size: 13.5px;
}
.section-item.disabled { opacity: .5; background: #fafbfc; }
.section-item .handle { color: var(--text-faint); cursor: grab; font-size: 14px; }
.section-item .stitle { flex: 1; min-width: 0; }
.section-item .stype {
  font-size: 10px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-faint); font-weight: 700;
}
.section-item.dragging { opacity: .4; border-style: dashed; }

.paper {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  padding: 46px 52px; box-shadow: var(--shadow); font-size: 13.5px; line-height: 1.65;
}
.paper h1 { font-size: 24px; margin-bottom: 14px; }
.paper h2 { font-size: 18px; margin: 26px 0 10px; }
.paper h3 { font-size: 15px; margin: 20px 0 8px; }
.paper h4 { font-size: 13.5px; margin: 16px 0 6px; }
.paper p { margin: 0 0 11px; }
.paper .subtitle { color: var(--text-muted); font-style: italic; }
.report-section { margin-bottom: 34px; }
.report-section + .report-section { border-top: 1px solid var(--border); padding-top: 26px; }

/* ------------------------------------------------------------ login page */

.login-page {
  min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(135deg, #16233a 0%, #1e4d8c 100%); padding: 20px;
}
.login-card {
  background: #fff; border-radius: 12px; padding: 36px; width: 100%; max-width: 400px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22);
}
.login-card .logo-row {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
}
.login-card .logo-mark {
  width: 34px; height: 34px; border-radius: 8px; background: var(--brand);
  display: grid; place-items: center; color: #fff; font-size: 15px; font-weight: 700;
}
.login-card h1 { font-size: 21px; letter-spacing: -.2px; }
.login-card .sub { color: var(--text-muted); font-size: 13.5px; margin: 0 0 24px; }
.login-card .field { margin-bottom: 15px; }
.login-card .btn { width: 100%; }
.login-card .btn-lg { padding: 11px 16px; font-size: 14.5px; }
.login-card .login-foot {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--border);
  text-align: center; font-size: 12px; color: var(--text-muted);
  letter-spacing: .3px;
}

.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 18px; }
.checkbox-row input { width: auto; }

/* ---------------------------------------------------------------- print */

@media print {
  .sidebar, .topbar, .page-actions, .no-print, .flashes { display: none !important; }
  .main { margin-left: 0; }
  .content { padding: 0; max-width: none; }
  .paper { border: 0; box-shadow: none; padding: 0; }
  .card { border: 0; box-shadow: none; }
  body { background: #fff; font-size: 11pt; }
  .report-section { page-break-inside: avoid; }
  table.fin tr.total td { border-bottom: 3px double #000; }
}

@media (max-width: 1100px) {
  .report-layout { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split-pane + .split-pane { border-left: 0; border-top: 1px solid var(--border); }
}

/* ------------------------------------------------- engagement picker --- */

.engagement-picker {
  display: flex; align-items: center; gap: 8px;
  background: #f4f6f9; border: 1px solid var(--border);
  border-radius: 7px; padding: 4px 6px 4px 11px;
}
.engagement-picker .picker-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-muted); font-weight: 700; white-space: nowrap;
}
.engagement-picker { position: relative; }
.engagement-picker input {
  border: 0; background: transparent; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--brand);
  padding: 4px 6px; cursor: text; width: 260px;
}
.engagement-picker input:focus { outline: none; }
.engagement-picker input::placeholder { color: var(--brand); opacity: .85; }
.engagement-picker .picker-caret {
  color: var(--text-muted); font-size: 11px; padding-right: 4px;
  pointer-events: none;
}

/* The filtered list. Scrolls rather than growing, so a firm with two
   hundred engagements gets a usable panel instead of a full-height wall. */
.engagement-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 320px; max-height: 340px; overflow-y: auto;
  margin: 0; padding: 5px; list-style: none;
  background: var(--surface, #fff); border: 1px solid var(--border);
  border-radius: 9px; box-shadow: 0 8px 26px rgba(15, 25, 45, .16);
}
.engagement-list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; padding: 8px 11px; border-radius: 6px; cursor: pointer;
  font-size: 13px;
}
.engagement-list li[hidden] { display: none; }
.engagement-list li.active,
.engagement-list li:hover { background: var(--brand-light); }
.engagement-list li.current { font-weight: 700; }
.engagement-list li.current .eng-name::after {
  content: " ¹3"; color: var(--green);
}
.engagement-list .eng-name { color: var(--text); }
.engagement-list .eng-year {
  color: var(--text-muted); font-size: 11.5px; white-space: nowrap;
}
.engagement-list .no-match {
  color: var(--text-muted); font-style: italic; cursor: default;
}
.engagement-list .no-match:hover { background: none; }

/* ------------------------------------------------------ version list --- */

.version-row {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); margin-bottom: 9px;
}
.version-row.is-final { border-color: var(--green); background: var(--green-light); }
.version-row.from-customer { border-left: 3px solid var(--purple); }
.version-badge {
  width: 42px; height: 42px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: 13px;
  background: var(--brand-light); color: var(--brand);
}
.version-row.is-final .version-badge { background: var(--green); color: #fff; }
.version-row.from-customer .version-badge { background: var(--purple-light); color: var(--purple); }

.diff-up { color: var(--green); font-weight: 600; }
.diff-down { color: var(--red); font-weight: 600; }

.email-preview {
  background: #fafbfc; border: 1px solid var(--border); border-radius: 6px;
  padding: 16px; font-size: 12.5px; white-space: pre-wrap;
  font-family: "Segoe UI", sans-serif; line-height: 1.6; max-height: 320px;
  overflow: auto;
}
.email-preview .hdr {
  font-family: Consolas, monospace; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); padding-bottom: 9px; margin-bottom: 11px;
}

/* ------------------------------------------------- customer review --- */

tr.change-row.status-accepted { background: var(--green-light); }
tr.change-row.status-rejected { background: #fafbfc; opacity: .62; }
tr.change-row.status-pending  { background: var(--amber-light); }
.missing-binding { background:#fdf3e0; color:#a86a00; padding:1px 6px; border-radius:4px; font-size:.9em; font-style:italic; }

/* --- In-place report editing ------------------------------------------ */
/* The report preview doubles as the editor, so an editable area has to
   announce itself without turning the page into a form. A hairline on
   hover, a proper focus ring while typing, nothing at all at rest. */
.rpt-mini [contenteditable="true"] {
  outline: none;
  border-radius: 3px;
  transition: background .12s, box-shadow .12s;
}
.rpt-mini [contenteditable="true"]:hover {
  box-shadow: 0 0 0 1px #cfd6e0;
  cursor: text;
}
.rpt-mini [contenteditable="true"]:focus {
  background: #fffdf5;
  box-shadow: 0 0 0 2px #2f6fed;
}
.rpt-mini [contenteditable="true"]:empty::before,
.rpt-mini [contenteditable="true"] > p:only-child:empty::before {
  content: attr(data-placeholder);
  color: #9aa3af;
  font-style: italic;
}

/* Fields filled from the customer record. Visible as data, not typed text,
   and uneditable so the underlying placeholder survives an edit. */
.rpt-mini .ph {
  background: #eef4ff;
  box-shadow: inset 0 -1px 0 #b9cdf5;
  border-radius: 2px;
  padding: 0 2px;
  cursor: default;
}
.rpt-mini .ph.missing-binding {
  background: #fff3cd;
  box-shadow: inset 0 -1px 0 #e2c65a;
}

.edit-badge {
  font-size: 11px; font-weight: 500; letter-spacing: .2px;
  color: #5a6472; background: #eef1f5; border-radius: 10px;
  padding: 2px 8px; margin-left: 8px; vertical-align: middle;
}
.hint.saving { color: #5a6472; }
.hint.saved  { color: #1a7f4b; }
.hint.failed { color: #b42318; font-weight: 600; }

/* --- Approved trial balance: visibly locked, not visibly broken -------- */
/* Greyed-out controls read as "this app is stuck". A locked control keeps
   its normal weight and says why it will not move when you click it. */
.grid.is-locked .map-select {
  background: var(--bg-subtle, #f6f7f9);
  color: var(--text-muted, #5a6472);
  cursor: not-allowed;
  border-style: dashed;
}
.grid.is-locked input.cell {
  background: transparent;
  color: var(--text-muted, #5a6472);
  cursor: not-allowed;
}
.grid.is-locked tr:hover .map-select { border-color: #b9c2cf; }

/* --- Trial balance: the Total row and column ---------------------------- */
/* Laid out like the client's own workbook - each row closes with its signed
   net, and the grid closes with a ruled total. */
.grid tfoot tr.grid-total td {
  font-weight: 700;
  background: var(--bg-subtle, #f6f7f9);
  border-top: 2px solid var(--text, #1a1f28);
  border-bottom: 3px double var(--text, #1a1f28);
  padding: 10px;
}
.grid td.tb-total { font-variant-numeric: tabular-nums; }
.grid tfoot .num, .grid td.tb-total { white-space: nowrap; }

/* A customer query carries no figures, so it should not read as a proposed
   edit sitting in a column of numbers. */
.change-row.is-query td.num { color: var(--text-muted, #5a6472); }
.change-row.is-query { background: var(--purple-light, #f5f0fb); }

/* --- Where the figures come from -------------------------------------- */
/* Two channels presented as equals on the Documents page: files, and the
   client's accounting system. Neither replaces the other. */
.source-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px;
}
@media (max-width: 900px) { .source-grid { grid-template-columns: 1fr; } }
.source-card { margin: 0; }
.source-head { display: flex; gap: 12px; align-items: flex-start; }
.source-icon { font-size: 22px; line-height: 1; margin-top: 2px; }
.source-head h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 650;
  display: flex; align-items: center; gap: 8px;
}
.source-head p { margin: 0; }
.source-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 14px;
}
.source-actions form { display: inline; margin: 0; }
.connected-line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}

/* Organisation picker */
.pick-row {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px;
}
.pick-row:hover { border-color: var(--brand); background: var(--brand-light); }
.pick-row input { margin-top: 3px; }

/* A source document's own total row: shown for cross-checking, never added
   to the figures it totals. */
tr.row-doc-total td { background: #f2f4f7; font-weight: 600; }
tr.row-doc-total input.cell { font-weight: 600; }
.split-head .edit-badge { white-space: nowrap; }

/* ---------------------------------------------------------------------
   Report builder: coverage panel, sources panel, editing toggle.

   These belong to the application chrome, not to the report typography in
   reports/_styles.html - nothing here is ever printed or exported.
   --------------------------------------------------------------------- */

.preview-tools { display: flex; align-items: center; gap: 10px; }

.chip-toggle {
  border: 1px solid var(--line, #d5d9e0);
  background: #fff;
  color: #5a6472;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11.5px;
  cursor: pointer;
  line-height: 1.6;
}
.chip-toggle:hover { border-color: #9aa5b4; color: #2c3440; }
.chip-toggle.on {
  background: #eaf2fb;
  border-color: #9cc0e6;
  color: #1c4f86;
}

/* ------------------------------------------------------------ coverage */

.coverage-card { margin-bottom: 16px; }
.coverage-card .hint.ok { color: #1b7a43; }
.coverage-card .hint.warn { color: #9a5b00; font-weight: 600; }

.cv-clean {
  background: #edf8f1;
  border-left: 3px solid #2f9e5f;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
}
.cv-summary {
  background: #fff6e6;
  border-left: 3px solid #d69200;
  padding: 10px 14px;
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 14px;
}

.cv-group { margin-bottom: 16px; }
.cv-group h3 {
  font-size: 13px;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.cv-count {
  background: #eceff3;
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  font-weight: 600;
  color: #55606f;
}

.cv-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cv-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #77808d;
  border-bottom: 1px solid var(--line, #e3e6ea);
  padding: 5px 8px;
  font-weight: 600;
}
.cv-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #f0f2f5;
  vertical-align: top;
}
.cv-table .cv-num { text-align: right; font-variant-numeric: tabular-nums; }
.cv-code { color: #8a929e; font-family: ui-monospace, Menlo, Consolas, monospace; }
.cv-key { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11.5px;
          color: #55606f; }
.cv-sugg { font-size: 11.5px; color: #1c4f86; }
.cv-sugg code { background: #eaf2fb; padding: 0 4px; border-radius: 3px; }
.cv-sugg em { color: #77808d; font-style: normal; }

.cv-actions { display: flex; gap: 8px; margin-top: 6px; }

/* ------------------------------------------------------------- sources */

.src-panel {
  position: absolute;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #ccd2da;
  border-radius: 7px;
  box-shadow: 0 8px 26px rgba(15, 25, 45, .18);
  padding: 12px 14px;
  font-size: 12.5px;
  font-family: var(--ui-font, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: #26303c;
}
.src-head {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6a7482;
  border-bottom: 1px solid #eceff3;
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.src-list { list-style: none; margin: 0; padding: 0; }
.src-list li { padding: 6px 0; border-bottom: 1px solid #f2f4f7; }
.src-list li:last-child { border-bottom: 0; }
.src-line { display: flex; justify-content: space-between; gap: 10px; }
.src-name { font-weight: 500; }
.src-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.src-meta { color: #77808d; font-size: 11.5px; margin-top: 2px; }
.by-auditor { color: #1b7a43; }
.by-auto { color: #8a6d00; }
.src-none { color: #55606f; margin: 0; }
.src-over {
  margin: 8px 0 0;
  background: #fff6e6;
  border-left: 3px solid #d69200;
  padding: 6px 9px;
  border-radius: 3px;
}
.src-close {
  margin-top: 10px;
  border: 1px solid #d5d9e0;
  background: #f7f8fa;
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 11.5px;
  cursor: pointer;
}
.src-close:hover { background: #eceff3; }

@media print {
  .src-panel, .coverage-card, .preview-tools { display: none !important; }
}

/* Legend for the report's provenance colours. Hidden with the marks. */
.src-legend {
  display: none;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 11.5px;
  color: #55606f;
  margin-bottom: 8px;
}
.src-legend.on { display: flex; }
.src-legend span { display: inline-flex; align-items: center; gap: 5px; }
.src-legend .sw {
  width: 13px; height: 13px; border-radius: 3px; display: inline-block;
}
.src-legend .sw-tb   { background: rgba(37, 99, 168, .28);
                       box-shadow: inset 3px 0 0 #2563a8; }
.src-legend .sw-calc { background: #fff;
                       border: 1px dashed #7a8290;
                       box-shadow: inset 2px 0 0 #7a8290; }
.src-legend .sw-over { background: rgba(255, 176, 32, .30);
                       box-shadow: inset 2px 0 0 #b06a00; }
.src-legend .legend-tip { margin-left: auto; color: #77808d; font-style: italic; }

/* -----------------------------------------------------------------------
   Password show/hide.

   The button sits inside the field's border rather than beside it, so the
   input keeps its full width and the row does not grow taller than the
   email field above it. Extra right padding on the input stops a long
   password running underneath the icon.
   ----------------------------------------------------------------------- */

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }

.pw-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: #8a929e;
  cursor: pointer;
}
.pw-toggle:hover { color: #3f4754; background: rgba(20, 30, 50, .05); }
.pw-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(30, 77, 140, .18);
  color: #3f4754;
}

.pw-toggle svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* One icon, two states: the eye is always drawn and the stroke through it
   appears only while the password is visible - so the button shows what
   pressing it will do next. */
.pw-toggle .slash { opacity: 0; transition: opacity .12s; }
.pw-toggle.shown { color: var(--brand, #1e4d8c); }
.pw-toggle.shown .slash { opacity: 1; }