@font-face {
  font-family: 'Geist';
  src: url("Geist-VariableFont_wght.74d893c71d5d.ttf") format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Triple Point — Private Credit origination theme.
   Maps the brand palette (docs/colour_palette.md) onto the Bootstrap 5.3
   components the app uses. Loaded after the Bootstrap CDN stylesheet, so these
   rules win. Utility classes (.bg-*, .btn-*) are set with !important because the
   Bootstrap utilities they override are themselves !important. */

:root {
  /* ── Brand palette — canonical tokens, verbatim from docs/colour_palette.md.
     Everything else in this file references these (or the semantic aliases
     below), so the palette has one source of truth. ──────────────────────── */
  --night-100: #005C80;
  --night-200: #004966;
  --night-300: #00374D;
  --night-400: #002432;
  --night-500: #001A24;

  --turquoise-100: #45C2D8;
  --turquoise-200: #45C2D8;
  --turquoise-300: #208698;
  --turquoise-400: #17616E;

  --grey-blue-100: #D2DDE0;
  --grey-blue-200: #B4C6CB;
  --grey-blue-300: #96AFB6;
  --grey-blue-400: #7697A0;

  --aqua-100: #E9F8F8;
  --aqua-200: #BDEDEA;
  --aqua-300: #93E3DC;
  --aqua-400: #68D8CD;
  --aqua-500: #29C7B8;
  --aqua-600: #209C91;
  --aqua-700: #18726A;
  --aqua-800: #0F4842;
  --aqua-900: #061E1B;

  --orange-100: #FFF0E1;
  --orange-200: #FED6AE;
  --orange-300: #FEBC7C;
  --orange-400: #FDA349;
  --orange-500: #FD8916;
  --orange-600: #DE7002;
  --orange-700: #AC5601;
  --orange-800: #793D01;
  --orange-900: #472401;

  --pure-100: #FFFDFA;
  --pure-200: #FFF8F0;
  --pure-300: #FFF4E5;
  --pure-400: #FFF0DB;
  --pure-500: #FFEBD0;

  --dust-100: #FCFCFC;
  --dust-200: #F7F7F7;
  --dust-300: #F0F0F0;

  /* ── Semantic aliases — the names used across this file, each pointing at a
     palette token (so existing rules are unchanged but now palette-sourced). */
  --tp-dark-teal: var(--night-400);
  --tp-mid-teal: var(--turquoise-400);
  --tp-light-teal: var(--aqua-500);
  --tp-orange: var(--orange-500);
  --tp-light-orange: var(--pure-400);
  --tp-blue-grey: var(--grey-blue-400);

  /* Runtime-honoured Bootstrap variables (links, focus rings, incidental uses). */
  --bs-primary: var(--tp-mid-teal);
  --bs-primary-rgb: 23, 97, 110;
  --bs-link-color: var(--tp-mid-teal);
  --bs-link-color-rgb: 23, 97, 110;
  --bs-link-hover-color: var(--tp-dark-teal);
  --bs-link-hover-color-rgb: 0, 36, 50;
  --bs-focus-ring-color: rgba(23, 97, 110, 0.25);
}

body {
  background-color: #f3f6f7;  /* a faint teal-grey wash, in place of plain bg-light */
}

/* ── Brand header bar (templates/base.html) ────────────────────────────────── */
.tp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background-color: var(--tp-dark-teal);
  padding: 0.5rem 1.5rem;
  min-height: 64px;
}
.tp-header__brand { display: flex; align-items: center; gap: 0.75rem; }
.tp-header__logo { display: inline-flex; align-items: center; }
.tp-header__logo img { height: 40px; width: auto; display: block; }
.tp-header__right { display: flex; align-items: center; gap: 0.75rem; }
.tp-header__app-name {
  font-family: 'Geist', sans-serif;
  color: var(--tp-light-teal);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}
.tp-header__user {
  color: var(--tp-orange);
  font-weight: 600;
  white-space: nowrap;
}
/* Release/build tag (placename, e.g. "Vienna-1.1") — orange, just after the app name.
   align-self overrides the brand bar's center alignment so the small tag sits at the
   bottom; padding-bottom nudges it up to line up with the app name's baseline rather
   than its descender. */
.tp-header__build {
  color: var(--tp-orange);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  align-self: flex-end;
  padding-bottom: 0.3rem;
}
/* Environment flag — bold "TEST" box shown on the test endpoint only (absent in
   prod). A high-contrast box so it's unmistakable which endpoint is in use. */
.tp-header__env {
  align-self: center;
  background: #d32f2f;
  color: #fff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  text-transform: uppercase;
}
/* Scoped under .tp-header so it beats Bootstrap's link colour in every state. */
.tp-header .tp-header__bell,
.tp-header .tp-header__bell:link,
.tp-header .tp-header__bell:visited,
.tp-header .tp-header__bell:hover,
.tp-header .tp-header__bell:focus {
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  text-decoration: none;
}
.tp-header .tp-header__bell .bi { color: #fff; }

/* ── App shell: left sidebar + main content (templates/base.html) ──────────── */
.tp-shell { display: flex; align-items: stretch; min-height: calc(100vh - 64px); }
.tp-sidebar {
  flex: 0 0 220px;
  background: #fff;
  border-right: 1px solid #dde6e8;
  padding: 1rem 0.5rem;
}
.tp-main { flex: 1 1 auto; min-width: 0; }
.tp-sidebar__group { margin-bottom: 1.25rem; }
.tp-sidebar__title {
  font-weight: 700;
  color: var(--tp-dark-teal);
  padding: 0.25rem 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tp-sidebar .nav-link {
  color: var(--tp-dark-teal);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.25rem;
  /* Flex + gap owns the icon↔label spacing, so collapsing to the icon rail leaves no
     stray margin behind (and every entry spaces identically, which the per-link
     `me-1` classes did not). */
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tp-sidebar .nav-link:hover:not(.disabled) { background: var(--tp-light-orange); }
.tp-sidebar .nav-link.active { background: var(--tp-mid-teal); color: #fff; }
.tp-sidebar .nav-link.disabled { color: var(--tp-blue-grey); }
/* Icons keep one column whatever the label length, so the rail's icons line up with
   the expanded nav's — nothing shifts sideways as the pane opens and closes. */
.tp-sidebar .nav-link .bi { flex: 0 0 1rem; text-align: center; }

/* ── Collapsible nav ───────────────────────────────────────────────────────────
   Collapsed is an ICON RAIL, not a hidden pane: every workflow stays one click away
   (with its name as a native tooltip), which a hidden pane would not.

   The state lives as a class on <html>, set from localStorage by an inline script in
   the <head> — before first paint, so a user who collapsed the nav doesn't see it
   flash open on every page load. The width transition is suppressed until the body
   carries .tp-nav-ready for the same reason: no animation on load, only on click. */
.tp-sidebar__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.35rem;
  border: 1px solid #dde6e8;
  border-radius: 6px;
  background: #fff;
  color: var(--tp-dark-teal);
  line-height: 1;
}
.tp-sidebar__toggle:hover { background: var(--tp-light-orange); }
.tp-sidebar__toggle .bi { transition: transform 0.2s ease; }
.tp-nav-ready .tp-sidebar { transition: flex-basis 0.2s ease; }

.tp-nav-collapsed .tp-sidebar { flex-basis: 3.5rem; }
/* The labels and group headings go; the icons and the toggle stay. `display: none`
   rather than a width transition on the text — a squeezed label reflows to two lines
   mid-animation, which reads as a glitch. */
.tp-nav-collapsed .tp-sidebar__label,
.tp-nav-collapsed .tp-sidebar__title { display: none; }
.tp-nav-collapsed .tp-sidebar .nav-link { justify-content: center; padding: 0.5rem 0; }
/* Point the chevrons the way they now act: outward = expand. */
.tp-nav-collapsed .tp-sidebar__toggle .bi { transform: rotate(180deg); }

/* Page title in brand dark teal. */
h1 { color: var(--tp-dark-teal); }

/* ── Links ───────────────────────────────────────────────────────────────── */
a { color: var(--tp-mid-teal); }
a:hover { color: var(--tp-dark-teal); }

/* ── Primary buttons ─────────────────────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--tp-mid-teal);
  --bs-btn-border-color: var(--tp-mid-teal);
  --bs-btn-hover-bg: var(--tp-dark-teal);
  --bs-btn-hover-border-color: var(--tp-dark-teal);
  --bs-btn-active-bg: var(--tp-dark-teal);
  --bs-btn-active-border-color: var(--tp-dark-teal);
  --bs-btn-disabled-bg: var(--tp-mid-teal);
  --bs-btn-disabled-border-color: var(--tp-mid-teal);
}
.btn-outline-primary {
  --bs-btn-color: var(--tp-mid-teal);
  --bs-btn-border-color: var(--tp-mid-teal);
  --bs-btn-hover-bg: var(--tp-mid-teal);
  --bs-btn-hover-border-color: var(--tp-mid-teal);
  --bs-btn-active-bg: var(--tp-mid-teal);
  --bs-btn-active-border-color: var(--tp-mid-teal);
}
.btn-outline-secondary {
  --bs-btn-color: var(--tp-blue-grey);
  --bs-btn-border-color: var(--tp-blue-grey);
  --bs-btn-hover-bg: var(--tp-blue-grey);
  --bs-btn-hover-border-color: var(--tp-blue-grey);
  --bs-btn-active-bg: var(--tp-blue-grey);
  --bs-btn-active-border-color: var(--tp-blue-grey);
}
.btn-link { --bs-btn-color: var(--tp-mid-teal); --bs-btn-hover-color: var(--tp-dark-teal); }

/* Decision buttons (Stage 2): Approve = light teal, Return = orange.
   Reject keeps Bootstrap's red — the palette has no red, and a terminal reject
   reads best in a distinct alarm colour. */
.btn-success {
  /* Approve — base Aqua/500, hover/active step down the aqua ramp (600 → 700). */
  --bs-btn-bg: var(--aqua-500);
  --bs-btn-border-color: var(--aqua-500);
  --bs-btn-color: var(--tp-dark-teal);
  --bs-btn-hover-bg: var(--aqua-600);
  --bs-btn-hover-border-color: var(--aqua-600);
  --bs-btn-hover-color: var(--tp-dark-teal);
  --bs-btn-active-bg: var(--aqua-700);
  --bs-btn-active-border-color: var(--aqua-700);
  --bs-btn-active-color: #fff;
}
.btn-warning {
  /* Return — base Orange/500, hover/active step down the orange ramp (600 → 700). */
  --bs-btn-bg: var(--orange-500);
  --bs-btn-border-color: var(--orange-500);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--orange-600);
  --bs-btn-hover-border-color: var(--orange-600);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--orange-700);
  --bs-btn-active-border-color: var(--orange-700);
  --bs-btn-active-color: #fff;
}

/* ── Status badges (DrawdownRequest.status_badge) ───────────────────────────
   One unique colour per workflow status, from docs/colour_palette.md. The
   progression warms through the turquoise/aqua range to orange at the final
   stage; rejected is red (a terminal/error state, outside the brand ramp). */
.badge.tp-badge-draft    { background-color: var(--grey-blue-400) !important; color: #fff; }
.badge.tp-badge-manager  { background-color: var(--turquoise-100) !important; color: var(--tp-dark-teal); }
.badge.tp-badge-legal    { background-color: var(--aqua-500) !important; color: var(--tp-dark-teal); }
.badge.tp-badge-date     { background-color: var(--aqua-600) !important; color: #fff; }
.badge.tp-badge-ops      { background-color: var(--turquoise-400) !important; color: #fff; }
.badge.tp-badge-aspire   { background-color: var(--orange-400) !important; color: var(--tp-dark-teal); }
.badge.tp-badge-opsmgr   { background-color: var(--orange-600) !important; color: #fff; }
.badge.tp-badge-bankline { background-color: var(--orange-800) !important; color: #fff; }
.badge.tp-badge-rejected { background-color: #C5283D !important; color: #fff; } /* terminal/error red — outside the brand ramp */

/* ── Nav tabs ────────────────────────────────────────────────────────────── */
.nav-tabs { --bs-nav-tabs-link-active-color: var(--tp-dark-teal); }
.nav-tabs .nav-link { color: var(--tp-mid-teal); }
.nav-tabs .nav-link:hover:not(.disabled) { color: var(--tp-dark-teal); }
.nav-tabs .nav-link.active {
  color: var(--tp-dark-teal);
  border-top: 2px solid var(--tp-light-teal);
}

/* ── Table headers ───────────────────────────────────────────────────────── */
.table-light, .table > thead.table-light > tr > th {
  --bs-table-bg: #e4eef0;
  color: var(--tp-dark-teal);
}

/* Unread notification rows — a faint brand-teal wash (pairs with the teal
   "New" badge), in place of Bootstrap's neutral-grey .table-active. */
.tp-unread > td { background-color: rgba(41, 199, 184, 0.12); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card { border-color: #dde6e8; }
.border-info { border-color: var(--tp-light-teal) !important; }

/* ── Alerts (tinted to the palette; danger stays red) ──────────────────────── */
.alert-primary, .alert-info {
  --bs-alert-bg: #e4f5f3;
  --bs-alert-border-color: var(--tp-light-teal);
  --bs-alert-color: var(--tp-dark-teal);
}
.alert-success {
  --bs-alert-bg: #e1f4f1;
  --bs-alert-border-color: var(--tp-mid-teal);
  --bs-alert-color: var(--tp-dark-teal);
}
.alert-warning {
  --bs-alert-bg: var(--tp-light-orange);
  --bs-alert-border-color: var(--tp-orange);
  --bs-alert-color: var(--orange-800);
}

/* ── Key choice callout (Stage A "Loan or Lease?") ──────────────────────────
   The pivotal decision that shapes the rest of the form — given an emphasised
   tinted box (left accent border) so it stands out without oversized text. */
.tp-keychoice {
  background: var(--aqua-100);
  border: 1px solid var(--turquoise-400);
  border-left: 5px solid var(--turquoise-400);
  border-radius: 8px;
  padding: 1rem 1.25rem;
}
.tp-keychoice__q {
  font-size: 1rem;
  font-weight: 600;
  color: var(--tp-dark-teal);
  margin-bottom: 0.55rem;
}
.tp-keychoice__opts { display: flex; gap: 1.5rem; }
.tp-keychoice__opts .form-check { margin: 0; padding-left: 1.75em; }
.tp-keychoice__opts .form-check-input {
  width: 1.15em; height: 1.15em; margin-top: 0.15em; margin-left: -1.75em;
}
.tp-keychoice__opts .form-check-label {
  font-size: 1rem; font-weight: 500; color: var(--tp-dark-teal); cursor: pointer;
}

/* ── Form focus ring in brand teal ─────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
  border-color: var(--tp-light-teal);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

/* Mandatory-field markers — a red asterisk on required form labels and table
   column headers. Shared by the origination form and the Stage 2 / Stage 4
   review checklists so every stage flags required fields the same way. */
label.required::after, th.required::after { content: "\00a0*"; color: #dc3545; }

/* Field validation messages ("This field is required", etc.) in red — shared by
   the origination form and the Stage 2 / Stage 4 review checklists. The asterisk
   marks a field as required; this text appears on a failed submit. No red row
   background — the asterisk + message is the whole treatment. */
.errorlist {
  color: #dc3545;
  list-style: none;
  padding-left: 0;
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
}

/* Checked radios & checkboxes in brand orange (Bootstrap hard-codes its blue,
   so --bs-primary alone doesn't reach these). */
.form-check-input:checked {
  background-color: var(--tp-orange);
  border-color: var(--tp-orange);
}
.form-check-input:focus {
  border-color: var(--tp-orange);
  box-shadow: 0 0 0 0.25rem rgba(253, 137, 22, 0.25);
}

/* select2 single-select container: match Bootstrap's .form-select height so a
   select2 typeahead (Facility ID / Borrower) lines up with the plain Team /
   Stage dropdowns next to it. !important throughout because select2's own CSS
   has the same selector specificity and loads after theme.css (via form.media),
   so it would otherwise win — same reason the colour rules below use it.
   38px container − 0.75rem vertical padding − 2px border = 24px content, which
   matches the 1.5 line-height so the text is centred and never clips. */
.select2-container--default .select2-selection--single {
  height: calc(1.5em + 0.75rem + 2px) !important;  /* Bootstrap .form-select default */
  padding: 0.375rem 0.75rem;
  /* Same border as the native .form-select beside it (select2's own #aaa border
     loads after theme.css, so !important is needed to win). */
  border: 1px solid var(--bs-border-color) !important;
  border-radius: 0.375rem;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 1.5 !important;
  padding: 0;
  color: #212529;
}
/* select2's placeholder defaults to light grey (#999); match the native select's
   default-option text colour so "Any facility…" reads like "All teams". */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #212529 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100% !important;
  top: 0 !important;
  right: 0.5rem !important;
}

/* select2 dropdown (borrower/facility typeaheads): highlighted option in brand
   orange, the already-selected option in light orange. (Native <select> option
   highlighting is drawn by the OS and can't be themed via CSS.) */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  /* !important: select2's own rule has the same selector/specificity and loads
     after theme.css, so it would otherwise win with its default blue. */
  background-color: var(--tp-orange) !important;
  color: #fff !important;
}
.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--tp-light-orange);
  color: var(--tp-dark-teal);
}

/* Routing-role badge — [LOR] / [Facility Agent] beside a lender's name on the
   Participations grid and the payment chain (see components/role_tags.html). Reads
   as an annotation on the name, not a status: outlined in brand teal rather than
   filled, so it can't be mistaken for one of the status badges on the same pages. */
.badge.tp-role-tag {
  background-color: transparent;
  color: var(--tp-dark-teal);
  border: 1px solid var(--tp-mid-teal);
  font-weight: 600;
  font-size: .7rem;
  padding: .15em .4em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── The derived payment chain ─────────────────────────────────────────────────
   Project-level, not per-page, because the SAME chain is rendered in three places
   and they all have to read as one screen:
     • the Draft Submission form's Payment Details tab (editable: account + reference)
     • the detail page's Stage F block (read-only, with the account details)
     • the detail page's Stage 5 Payment References (Ops records internal references)
   Each renders one <table> per leg type, headed by a tinted caption. Independent
   <table>s auto-size to their own content, so every shared column is pinned to a
   percentage — that is the only thing keeping the columns of the tables above and
   below each other in line. Add a column to one of the three and give it a
   pay-col-* width here, or the alignment goes. */
.payments-table { margin-bottom: 0; }
/* A caption (not a <tr>) so the leg heading can't be mistaken for a data row and
   doesn't have to span a column count that differs between the three renderings. */
.payments-table .pay-leg-caption {
  caption-side: top; color: var(--tp-dark-teal);
  font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .6rem; border-radius: .375rem .375rem 0 0;
}
/* Internal legs (money moving inside the lender group) take the teal/grey end of the
   palette; the two external ones — the payments that actually leave Triple Point —
   take the warmer end, so they stand out as the rows needing an account. */
.pay-leg-fund_payout        { background-color: var(--aqua-200); }
.pay-leg-fund_costs         { background-color: var(--aqua-100); }
.pay-leg-agent_payout       { background-color: var(--grey-blue-200); }
.pay-leg-agent_costs        { background-color: var(--grey-blue-100); }
.pay-leg-borrower_payout    { background-color: var(--pure-500); }
.pay-leg-third_party_payout { background-color: var(--orange-200); }
/* The derived figures (Payer / Recipient / Value) are separated from what a user
   fills in (account, reference) by a whitespace gutter, which keeps the right-aligned
   Value off the account cell. Unlike the Participations one this is pure width — no
   transparent background, no cleared border — because the caption, header and totals
   rows are solid across the table. */
.payments-table .pay-gutter { width: 2.5rem; min-width: 2.5rem; padding: 0; }
.payments-table .pay-col-party { width: 16%; }
.payments-table .pay-col-value { width: 11%; }
.payments-table .pay-col-ref   { width: 18%; }
/* Read-only Stage F only: the chosen account, broken out into its own columns. */
.payments-table .pay-col-loc       { width: 8%; }
.payments-table .pay-col-acct-name { width: 12%; }
.payments-table .pay-col-acct-no   { width: 12%; }
.payments-table .pay-col-sort      { width: 7%; }

/* ── Page width ────────────────────────────────────────────────────────────────
   The workflow pages (a form and the detail page that reviews it) are WIDE by
   nature — the payment chain is nine columns, the participations grid twelve — so
   they get the screen rather than Bootstrap's .container, whose responsive
   max-width (1140px on lg/xl) squeezed the detail page's tables while the form tab
   showing the same table ran full width.

   Not `container-fluid` either: a table row spanning a 4K monitor edge to edge is
   hard to track across, so there is a ceiling. 1760px is above the usable width of
   a 1920px screen once the nav is out (1920 − 220), so nothing changes at 1080p and
   below — it only stops the sprawl on the very large monitors. Centred, so the
   leftover space is symmetric.

   Single-column forms (Bank Callback, login) keep their own narrower caps: a column
   of one-line inputs stretched wide is worse to fill in, not better. */
.tp-page {
  width: 100%;
  max-width: 1760px;
  margin-inline: auto;
  padding: 1.5rem;
}