/* South River Capital LOS — base styling. Plain CSS, no framework. */

/* Self-hosted variable UI font (no external/CDN dependency at runtime). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
}

/* ===== Design tokens — single source of truth (migrated incrementally) ===== */
:root {
  --font: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --navy: #0f2b46;
  --brand: #1a5dab;
  --brand-strong: #174f93;
  --brand-ring: rgba(26, 93, 171, 0.15);
  --ink: #1c2530;
  --ink-2: #3a4654;
  --muted: #6a7888;
  --danger: #b23b3b;

  --surface: #fff;
  --bg: #f4f6f8;
  --border: #e3e8ee;
  --border-strong: #c5cfd9;
  --th-bg: #eef2f6;
  --row-hover: #f7fafd;

  --r-sm: 5px;
  --r: 8px;
  --r-pill: 999px;

  --shadow: 0 1px 3px rgba(16, 43, 70, 0.08), 0 1px 2px rgba(16, 43, 70, 0.04);
  --shadow-md: 0 2px 10px rgba(16, 43, 70, 0.12);

  --t: .15s ease;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: #1a5dab; text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow-md);
}
.topbar a { color: #fff; }
.brand { display: flex; align-items: center; font-weight: 700; letter-spacing: -0.01em; }
.brand a { display: flex; align-items: center; gap: 0.55rem; color: #fff; }
.brand a:hover { text-decoration: none; }
/* Flatten the colored logo mark to solid white on the navy topbar. */
.brand img { height: 30px; width: auto; display: block; filter: brightness(0) invert(1); }
.mainnav { display: flex; align-items: center; gap: 0.25rem; flex: 1; }
.userbox { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.logout-form { display: block; }

/* Top-nav dropdown groups (Origination / Servicing / Reporting + user) */
.navgroup { position: relative; }
.navgroup-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  color: #fff;
  opacity: 0.9;
  font: inherit;
  cursor: pointer;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
}
.navgroup-toggle:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); }
.navgroup .caret { font-size: 0.7em; opacity: 0.8; }

.navflat {
  display: inline-flex;
  align-items: center;
  opacity: 0.9;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
}
.navflat:hover { opacity: 1; background: rgba(255, 255, 255, 0.1); text-decoration: none; }

.navmenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  margin-top: 0.35rem;
  padding: 0.35rem 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 43, 70, 0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  z-index: 50;
}
.navmenu-right { left: auto; right: 0; }
.navgroup:hover .navmenu,
.navgroup:focus-within .navmenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.navmenu a,
.navmenu .linkbtn {
  display: block;
  width: 100%;
  text-align: left;
  color: #1c2530;
  opacity: 1;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}
.navmenu a:hover,
.navmenu .linkbtn:hover { background: #eef2f6; text-decoration: none; }
/* Logout sits inside the menu — neutralize the global filled-button styling. */
.navmenu .linkbtn { background: none; border: none; color: var(--danger); text-decoration: none; font: inherit; cursor: pointer; }

.content { max-width: 1200px; margin: 1.5rem auto; padding: 0 1.25rem; }

.messages { list-style: none; max-width: 1200px; margin: 1rem auto; padding: 0 1.25rem; }
.msg { padding: 0.6rem 0.9rem; border-radius: 5px; margin-bottom: 0.5rem; }
.msg.success { background: #e3f5e8; color: #1c6b38; }
.msg.error { background: #fbe4e4; color: #962020; }
.msg.warning { background: #fdf3e0; color: #8a5b12; }

h1 { font-size: 1.5rem; }

table { width: 100%; border-collapse: collapse; background: var(--surface); font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
th { background: var(--th-bg); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
tbody tr { transition: background var(--t); }
tbody tr:hover:not(.ledger-opening):not(.ledger-current):not(.to-delete) td { background: var(--row-hover); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }

button, input[type=submit], .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  background: var(--brand); color: #fff; border: 1px solid var(--brand); border-radius: var(--r-sm);
  padding: 0.5rem 0.95rem; cursor: pointer; font-size: 0.92rem; font-weight: 600;
  font-family: inherit; line-height: 1.2; text-decoration: none;
  transition: background var(--t), border-color var(--t);
}
button:hover, input[type=submit]:hover, .btn:hover { background: var(--brand-strong); border-color: var(--brand-strong); text-decoration: none; }
button:active, input[type=submit]:active, .btn:active { transform: translateY(0.5px); }
button:focus-visible, input[type=submit]:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Secondary = neutral / cancel / nav-style actions (outline, not filled). */
button.secondary, .btn.secondary { background: var(--surface); color: var(--ink-2); border-color: var(--border-strong); }
button.secondary:hover, .btn.secondary:hover { background: var(--th-bg); border-color: var(--muted); color: var(--ink); }
button.danger, .btn.danger { background: var(--danger); color: #fff; border-color: var(--danger); }
button.danger:hover, .btn.danger:hover { background: #8f2d2d; border-color: #8f2d2d; }

label { display: block; margin-bottom: 0.75rem; font-size: 0.9rem; }
input[type=text], input[type=number], input[type=date], input[type=email],
input[type=password], select, textarea {
  width: 100%; padding: 0.48rem 0.6rem; border: 1px solid var(--border-strong);
  border-radius: var(--r-sm); font-size: 0.95rem; font-family: inherit; color: var(--ink);
  background: var(--surface); margin-top: 0.2rem; transition: border-color var(--t), box-shadow var(--t);
}
input[type=text]:focus, input[type=number]:focus, input[type=date]:focus,
input[type=email]:focus, input[type=password]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-ring);
}

.auth-card { max-width: 380px; margin: 3rem auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); padding: 1.75rem; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin-bottom: 1.25rem; }
.auth-brand img { height: 42px; width: auto; }
.auth-brand .name { font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.error { color: #962020; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: #6a7888; font-size: 0.88rem; }

/* Shared layout helpers used across feature pages */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-head .actions { display: flex; align-items: center; gap: 0.75rem; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.section-head h2 { font-size: 1.1rem; margin: 0; }
.actions { display: flex; align-items: center; gap: 0.75rem; }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; margin: 0; }
dl.kv dt { color: #6a7888; font-size: 0.88rem; }
dl.kv dd { margin: 0; }

.inline-form { display: inline; }
form.stacked .form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
form.stacked .form-row > label { flex: 1; min-width: 160px; }
label.check-row { display: flex; align-items: center; gap: 0.5rem; }
label.check-row input[type=checkbox] { width: auto; margin: 0; }

.tag { display: inline-block; background: #e7eef6; color: #2c5a86; font-size: 0.72rem;
  padding: 0.05rem 0.4rem; border-radius: 3px; margin-left: 0.4rem; vertical-align: middle; }

tr.ledger-opening td { background: #f6f9fc; font-weight: 600; }
tr.ledger-current td { background: #eef7f0; font-weight: 600; border-top: 2px solid #cfe3d4; }

/* Internal notes */
.note-add { margin-bottom: 1rem; }
ul.notes { list-style: none; padding: 0; margin: 0; }
li.note { border-top: 1px solid #e3e8ee; padding: 0.7rem 0; }
li.note:first-child { border-top: none; }
.note-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.2rem; }
.note-body { white-space: pre-wrap; }
.linkbtn-danger { background: none; border: none; color: #b23b3b; cursor: pointer; text-decoration: underline; padding: 0; font-size: 0.82rem; }

/* ===== Usability redesign: badges, loan workspace shell, grouping ===== */

/* Status badges (also reused for entity-type chips) */
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 0.12rem 0.5rem; border-radius: 999px;
  background: #eef2f6; color: #5a6b7b; vertical-align: middle;
}
.badge-application { background: #e7eef6; color: #2c5a86; }
.badge-clear_to_close { background: #fdf3e0; color: #8a5b12; }
.badge-servicing { background: #e3f5e8; color: #1c6b38; }
.badge-paid_off { background: #eef2f6; color: #5a6b7b; }
.badge-withdrawn { background: #f0f2f5; color: #6a7888; }
.badge-special_servicing { background: #fbe4e4; color: #962020; }

/* Loan workspace header: snapshot band + secondary tab nav */
.loan-header { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.loan-header-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.6rem; }
.loan-header-top .loan-id { display: flex; align-items: center; gap: 0.75rem; }
.loan-header-top h1 { margin: 0; }
.loan-header-facts { display: flex; flex-wrap: wrap; gap: 0.45rem 1.5rem; padding: 0 1.25rem 0.9rem; font-size: 0.92rem; }
.loan-header-facts .lbl { color: #6a7888; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.35rem; }
.loan-header-facts .hl { font-weight: 700; }
.subnav { display: flex; gap: 0.25rem; padding: 0 0.75rem; border-top: 1px solid #e3e8ee; }
.subnav a { padding: 0.7rem 0.9rem; color: #5a6b7b; border-bottom: 2px solid transparent; font-size: 0.92rem; }
.subnav a:hover { text-decoration: none; color: #1a5dab; }
.subnav a.active { color: #1a5dab; border-bottom-color: #1a5dab; font-weight: 600; }

/* Two-column loan overview */
.loan-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.loan-grid > .loan-main > :last-child,
.loan-grid > .loan-side > :last-child { margin-bottom: 0; }

/* Portfolio summary band + status filter chips (loans list) */
.summary-band { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.1rem 1.4rem; margin-bottom: 1.25rem; box-shadow: var(--shadow); }
.summary-band .stat { display: flex; flex-direction: column; gap: 0.15rem; }
.summary-band .stat .v { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink); }
.summary-band .stat .k { color: #6a7888; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.filter-chips .chip { display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid #d4dbe3; background: #fff; color: #3a4654; font-size: 0.85rem; }
.filter-chips .chip:hover { text-decoration: none; border-color: #1a5dab; color: #1a5dab; }
.filter-chips .chip.active { background: #1a5dab; border-color: #1a5dab; color: #fff; }
.filter-chips .chip .n { opacity: 0.7; margin-left: 0.25rem; }

/* Grouped form fieldsets */
fieldset.form-group { border: 1px solid #e3e8ee; border-radius: 8px; padding: 0.9rem 1.25rem 1.1rem; margin: 0 0 1.1rem; }
fieldset.form-group > legend { font-weight: 600; font-size: 0.95rem; padding: 0 0.4rem; color: #1c2530; }
.or-divider { display: flex; align-items: center; text-align: center; color: #6a7888; font-size: 0.82rem; margin: 0.5rem 0 0.9rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid #e3e8ee; }
.or-divider span { padding: 0 0.6rem; }

/* Segmented control — e.g. existing-vs-new borrower picker on the loan form */
.seg-toggle { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 0.9rem; background: var(--th-bg); border: 1px solid var(--border); border-radius: var(--r); }
.seg-btn { appearance: none; border: none; background: transparent; color: var(--ink-2); font: inherit; font-size: 0.9rem; font-weight: 500; padding: 0.4rem 0.95rem; border-radius: var(--r-sm); cursor: pointer; transition: background var(--t), color var(--t), box-shadow var(--t); }
.seg-btn:hover { color: var(--ink); }
.seg-btn.is-active { background: var(--surface); color: var(--brand); font-weight: 600; box-shadow: var(--shadow); }
.borrower-pane[hidden] { display: none; }

/* Clustered key-value groups (ledger balance summary) */
.kv-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.kv-groups .kv-group h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; color: #6a7888; margin: 0 0 0.5rem; border-bottom: 1px solid #e3e8ee; padding-bottom: 0.3rem; }

@media (max-width: 800px) {
  .loan-grid { grid-template-columns: 1fr; }
  .kv-groups { grid-template-columns: 1fr; }
  .subnav { overflow-x: auto; }
  .loan-header-top { flex-wrap: wrap; }
}

/* ===== Document uploader & list (WP-E redesign) ===== */
.doc-layout { display: grid; gap: 1.25rem; }
.count-pill {
  display: inline-block; min-width: 1.4rem; text-align: center;
  background: #eef2f6; color: #5a6b7b; font-size: 0.8rem; font-weight: 600;
  padding: 0.05rem 0.45rem; border-radius: 999px; vertical-align: middle;
}

/* Drag-and-drop zone */
.uploader .dropzone {
  position: relative; display: block; margin-bottom: 1rem;
  border: 2px dashed #c5cfd9; border-radius: 10px;
  background: #f8fafc; padding: 1.75rem 1.25rem; text-align: center;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.uploader .dropzone:hover { border-color: #1a5dab; background: #f2f8fe; }
.uploader .dropzone.is-dragover { border-color: #1a5dab; background: #e8f2fd; }
/* Visually hide the native file input; the whole dropzone (a <label>) triggers it. */
.uploader .dropzone input[type=file] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.dz-icon { width: 40px; height: 40px; color: #1a5dab; margin-bottom: 0.3rem; }
.dz-title { margin: 0; font-size: 1rem; font-weight: 600; color: #1c2530; }
.dz-sub { margin: 0.15rem 0 0; color: #5a6b7b; font-size: 0.9rem; }
.dz-link { color: #1a5dab; font-weight: 600; text-decoration: underline; }
.dz-hint { margin: 0.5rem 0 0; color: #6a7888; font-size: 0.78rem; }

/* Selected-file chip (shown after a file is chosen) */
.dz-file {
  display: flex; align-items: center; gap: 0.75rem; text-align: left;
  background: #fff; border: 1px solid #d4dbe3; border-radius: 8px; padding: 0.6rem 0.7rem;
}
/* `display:flex` above would otherwise defeat the [hidden] attribute. */
.dz-file[hidden] { display: none; }
.dz-file-icon {
  flex: none; width: 40px; height: 40px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: #1a5dab; color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em;
}
.dz-file-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dz-file-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-file-size { color: #6a7888; font-size: 0.8rem; }
.dz-file-remove {
  flex: none; background: none; color: #6a7888; border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; padding: 0 0.35rem; border-radius: 5px;
}
.dz-file-remove:hover { color: #b23b3b; background: #fbe4e4; }

/* Field rows */
.uploader-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.uploader-fields .field { margin: 0; }
.field-label { display: block; font-size: 0.82rem; font-weight: 600; color: #3a4654; margin-bottom: 0.3rem; }
.field-label .opt { font-weight: 400; color: #6a7888; }

.uploader-actions { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.btn-upload { font-weight: 600; }
.btn-upload:disabled { background: #aebccb; cursor: not-allowed; }
.uploader-hint { font-size: 0.84rem; }

/* Document list */
.doc-items { list-style: none; margin: 0; padding: 0; }
.doc-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid #eef2f6; }
.doc-item:first-child { border-top: none; }
.doc-thumb {
  flex: none; width: 44px; height: 44px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
  background: #eef2f6; color: #5a6b7b;
}
.doc-thumb:hover { text-decoration: none; filter: brightness(0.97); }
.doc-thumb--pdf { background: #fbe4e4; color: #b23b3b; }
.doc-thumb--image { background: #e3f1ff; color: #1a5dab; }
.doc-thumb--word { background: #e1ecfb; color: #2c5a86; }
.doc-thumb--excel { background: #e3f5e8; color: #1c6b38; }
.doc-thumb--archive { background: #fdf3e0; color: #8a5b12; }

.doc-body { flex: 1; min-width: 0; }
.doc-name {
  font-weight: 600; display: inline-block; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.doc-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.2rem 0 0.15rem; }
.doc-type {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  background: #e7eef6; color: #2c5a86; padding: 0.08rem 0.5rem; border-radius: 999px;
}
.doc-desc { color: #3a4654; font-size: 0.86rem; }
.doc-meta { font-size: 0.8rem; }

.doc-actions { flex: none; display: flex; align-items: center; gap: 0.4rem; }
.iconbtn {
  display: inline-block; background: #fff; border: 1px solid #d4dbe3; color: #3a4654;
  font-size: 0.82rem; padding: 0.32rem 0.7rem; border-radius: 6px; cursor: pointer;
}
.iconbtn:hover { border-color: #1a5dab; color: #1a5dab; text-decoration: none; }
.iconbtn--danger { color: #b23b3b; }
.iconbtn--danger:hover { border-color: #b23b3b; color: #b23b3b; background: #fbe4e4; }

/* Empty state */
.doc-empty { text-align: center; padding: 1.75rem 1rem; }
.doc-empty svg { width: 44px; height: 44px; color: #b8c2cd; margin-bottom: 0.4rem; }
.doc-empty-title { margin: 0 0 0.2rem; font-weight: 600; }
.doc-empty p { margin: 0; }

@media (max-width: 800px) {
  .uploader-fields { grid-template-columns: 1fr; }
  .doc-item { flex-wrap: wrap; }
  .doc-actions { width: 100%; justify-content: flex-end; }
}

/* ===== Portfolio outlook (scheduled principal runoff chart) ===== */
.chart-card { padding: 1rem 1.1rem 0.85rem; }
.chart-plot { position: relative; }
.runoff-chart { width: 100%; height: auto; display: block; }
.runoff-chart .grid { stroke: #eef2f6; stroke-width: 1; }
.runoff-chart .axis { stroke: #c5cfd9; stroke-width: 1; }
.runoff-chart .area { fill: rgba(26, 93, 171, 0.12); stroke: none; }
.runoff-chart .line { fill: none; stroke: #1a5dab; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
/* Scheduled (plan) = light envelope + dashed line; Actual = solid bold line. */
.runoff-chart .sched-area { fill: rgba(26, 93, 171, 0.08); stroke: none; }
.runoff-chart .sched-line { fill: none; stroke: #8aa4c0; stroke-width: 1.75; stroke-dasharray: 5 4; stroke-linejoin: round; }
.runoff-chart .actual-line { fill: none; stroke: #1a5dab; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.runoff-chart .today-line { stroke: #9aa7b4; stroke-width: 1; stroke-dasharray: 3 3; }
.runoff-chart .today-label { text-anchor: middle; fill: #5a6b7b; font-size: 10px; font-weight: 600; }
.runoff-chart .marker { fill: #fff; stroke: #8aa4c0; stroke-width: 2; transition: fill .12s ease; }
/* Larger transparent hover/focus target sitting over each dot. */
.runoff-chart .marker-hit { fill: transparent; pointer-events: all; cursor: pointer; outline: none; }
.runoff-chart .marker-group:hover .marker,
.runoff-chart .marker-group:focus-within .marker { fill: #1a5dab; }
.runoff-chart .marker-group:focus-within .marker { stroke: #0f2b46; }
.runoff-chart text { fill: #6a7888; font-size: 11px; font-family: inherit; }
.runoff-chart .ytick { text-anchor: end; }
.runoff-chart .xtick { text-anchor: middle; }
/* Hover tooltip (JS-positioned over the focused dot). */
.chart-tooltip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px));
  background: #0f2b46; color: #fff; font-size: 0.8rem; line-height: 1.3;
  padding: 0.4rem 0.6rem; border-radius: 6px; white-space: nowrap;
  pointer-events: none; box-shadow: 0 4px 12px rgba(15, 43, 70, 0.25); z-index: 5;
}
.chart-tooltip[hidden] { display: none; }
.chart-tooltip::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #0f2b46;
}
.chart-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; align-items: center; font-size: 0.82rem; color: #6a7888; margin-top: 0.6rem; }
.chart-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: #1a5dab; vertical-align: middle; margin-right: 0.4rem; }
.chart-legend .swatch-actual { background: #1a5dab; }
.chart-legend .swatch-sched { width: 16px; height: 0; border-radius: 0; border-top: 2px dashed #8aa4c0; }
/* Variance stat colouring */
.summary-band .stat .v-ahead { color: #1c6b38; }
.summary-band .stat .v-behind { color: #962020; }

/* ===== Memo of Settlement ===== */
/* Computed interest-reserve highlight inside the settlement-details card. */
.reserve-callout {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.5rem;
  background: #f2f8fe; border: 1px solid #dbe9f8; border-left: 3px solid #1a5dab;
  border-radius: 8px; padding: 0.75rem 1rem; margin-top: 0.5rem;
}
.reserve-callout .lbl { color: #6a7888; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.5rem; }
.reserve-callout .value { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.reserve-callout > div { flex: none; }
.reserve-callout p { flex: 1; min-width: 220px; margin: 0; }

/* Line-item editing — every row has a visible one-click Remove control. The
   Django DELETE checkbox is kept in the DOM (so removals submit) but hidden —
   the button drives it. */
.lineitem-table .delete-cell { text-align: center; white-space: nowrap; }
.lineitem-table .remove-row { font-size: 0.85rem; }
.delete-flag { display: none; }
/* A persisted row flagged for deletion: marked, dimmed, reversible until save. */
tr.to-delete td { background: #fbe4e4; }
tr.to-delete td:not(.delete-cell) { opacity: 0.5; }

/* Tab intro banner — clarifies what a workspace tab covers (e.g. actual vs
   planned payments) so adjacent tabs aren't confused. */
.tab-intro {
  margin: 0 0 1.25rem; padding: 0.6rem 0.9rem;
  background: #f5f8fc; border-left: 3px solid #aebfd4; border-radius: 4px;
  color: #4a5a6b; font-size: 0.9rem;
}

/* Payment schedule (Exhibit A) editor. */
.lineitem-table input[type="date"],
.lineitem-table input[type="number"] { width: 100%; box-sizing: border-box; }
.lineitem-table .row-no { color: #6a7888; text-align: right; font-variant-numeric: tabular-nums; }
.lineitem-table .row-total { color: #2d3a4a; }
.lineitem-table tfoot .totals-row td { border-top: 2px solid #d4dbe4; padding-top: 0.5rem; }
.calc-form { display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap; }
.calc-form label { display: flex; flex-direction: column; gap: 0.25rem; }

/* ===== Portfolio reports (summary / holdings / maturity / concentration / advances) ===== */

/* Standalone report sub-nav strip (reuses .subnav tab styling inside a card bar) */
.report-subnav {
  background: #fff; border: 1px solid #e3e8ee; border-radius: 8px;
  border-top: 1px solid #e3e8ee; padding: 0 0.5rem; margin-bottom: 1.25rem;
}

/* Past-due callout on the summary page */
.portfolio-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #fdecec; border-left: 3px solid #b23b3b;
}

/* Horizontal-scroll safety net for the wide holdings table */
.table-scroll { overflow-x: auto; margin-bottom: 1.25rem; }

/* Concentration proportional share bars */
.conc-bar-col { width: 30%; }
.conc-track { background: #eef2f6; border-radius: 999px; height: 10px; width: 100%; overflow: hidden; }
.conc-bar { background: #1a5dab; height: 100%; border-radius: 999px; }

/* Totals row in report-table footers (generalizes the existing lineitem-table rule) */
tfoot .totals-row td { border-top: 2px solid #d4dbe4; background: #f6f9fc; }