/* Where's My Money - shared styling */

/* ==========================================================================
   Financial Color System
   --------------------------------------------------------------------------
   One meaning, one color, defined once - used everywhere a dollar amount,
   status, or warning is shown across the investor portal, admin dashboard,
   and print reports. Before this existed, nearly every financial figure was
   red regardless of what it meant (money received, money owed, money at
   risk, or an actual default), which made reports hard to read at a glance
   and trained people to tune red out. Now:
     - Navy   = informational only (principal invested, totals) - never red.
     - Green  = money the investor has actually received.
     - Gold   = money owed, but not necessarily lost (interest/balloon owed).
     - Orange = money at risk (missed payments, principal at risk) - caution,
                not "this is gone."
     - Red    = reserved for true financial danger: an account that's both
                in Default AND past its Maturity Date, legal action, or a
                critical error. If everything is red, nothing is.
   ========================================================================== */
:root {
  --financial-primary: #1F3A5F; /* Navy   - informational only, never "bad news" */
  --financial-success: #2E7D32; /* Green  - money successfully received */
  --financial-warning: #D97706; /* Amber/Gold - money owed, not necessarily lost */
  --financial-risk:    #E67E22; /* Orange - money at risk / caution */
  --financial-danger:  #C62828; /* Red    - true financial danger only */

  --financial-bg-success: #ECFDF5;
  --financial-bg-warning: #FEF3C7;
  --financial-bg-risk:    #FFF7ED;
  --financial-bg-danger:  #FEE2E2;
  --financial-bg-info:    #EAF1F8;
}

/* Text-color utilities for dollar figures - pick by MEANING, not by whether
   the number happens to be inside a "Default" contract. A defaulted
   contract's "Interest Owed" is still money that's owed (gold), not
   automatically red; only the contract's overall status/severity indicator
   (see .wmm-badge-* and .wmm-default-alert below) escalates to red, and only
   once it's actually past its Maturity Date. */
.wmm-fin-info    { color: var(--financial-primary); }
.wmm-fin-success { color: var(--financial-success); }
.wmm-fin-warning { color: var(--financial-warning); }
.wmm-fin-risk    { color: var(--financial-risk); }
.wmm-fin-danger  { color: var(--financial-danger); font-weight: 700; }

/* Subtle background tints for cards/rows - intentionally muted, not
   saturated, so they read as "context" rather than shouting for attention.
   Kept legible when printed in grayscale since text labels are never
   dropped in favor of color alone (see accessibility note further down). */
.wmm-bg-success { background-color: var(--financial-bg-success); }
.wmm-bg-warning { background-color: var(--financial-bg-warning); }
.wmm-bg-risk    { background-color: var(--financial-bg-risk); }
.wmm-bg-danger  { background-color: var(--financial-bg-danger); }

/* Left-accent card variants - a calmer alternative to painting a whole card
   border/header in a semantic color; used on dashboard summary cards. */
.wmm-card-accent { border-left: 4px solid transparent; }
.wmm-card-accent.wmm-accent-info    { border-left-color: var(--financial-primary); }
.wmm-card-accent.wmm-accent-success { border-left-color: var(--financial-success); }
.wmm-card-accent.wmm-accent-warning { border-left-color: var(--financial-warning); }
.wmm-card-accent.wmm-accent-risk    { border-left-color: var(--financial-risk); }
.wmm-card-accent.wmm-accent-danger  { border-left-color: var(--financial-danger); }

/* Status badges (Current / Late / Default / Past Maturity) - rounded,
   white-lettered, consistent sizing, replacing plain-text status columns.
   Every badge keeps its text label (never relies on color alone), which
   also keeps them meaningful when a report is printed in grayscale. */
.wmm-badge {
  display: inline-block;
  padding: 0.32rem 0.75rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.2;
}
.wmm-badge-success { background-color: var(--financial-success); color: #fff; }
.wmm-badge-danger   { background-color: var(--financial-danger); color: #fff; }
.wmm-badge-neutral  { background-color: #64748b; color: #fff; }
/* Amber and orange badges use dark text instead of white - with white
   lettering their contrast ratio against these particular background colors
   falls short for small badge text (checked against WCAG AA), so a dark
   label keeps them properly readable rather than just "on-brand." */
.wmm-badge-warning { background-color: var(--financial-warning); color: #2b1600; }
.wmm-badge-risk     { background-color: var(--financial-risk); color: #2b1600; }

/* Outline variant - white pill, colored text/border. Reserved for the
   contract-level status pill (header, next to the CTR code/borrower name)
   when that contract is Default or Post Maturity, per Mary's 07-09-2026
   request. Layered on top of .wmm-badge-danger/.wmm-badge-risk so it only
   affects call sites that explicitly add .wmm-badge-outline - schedule-row
   labels and other badges using the same base classes are untouched. */
.wmm-badge-outline.wmm-badge-danger {
  background-color: #ffffff;
  color: var(--financial-danger);
  border: 1.5px solid var(--financial-danger);
}
.wmm-badge-outline.wmm-badge-risk {
  background-color: #ffffff;
  color: var(--financial-risk);
  border: 1.5px solid var(--financial-risk);
}

/* The prominent "N MONTHS IN DEFAULT" callout - large, bold, unmissable.
   Reserved for contracts that are BOTH in Default status AND past their
   Maturity Date (the "Past Maturity" state), so it only ever appears for
   the single most serious situation on the site. A Default that hasn't
   reached Maturity yet gets the calmer orange .wmm-badge-risk pill instead
   - see render_months_in_default_badge_html() in includes/functions.php. */
.wmm-default-alert {
  display: block;
  background-color: var(--financial-danger);
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-align: center;
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  margin: 0.75rem 0;
}
@media (min-width: 480px) {
  .wmm-default-alert { display: inline-block; text-align: left; }
}

/* Default / Post Maturity breakdown - three small boxes side by side,
   replacing the old single oversized .wmm-default-alert callout. Per
   Mary's 07-09-2026 request: boxes stay neutral/bordered, only the month
   NUMBER itself is red - not the whole box - so the red is reserved for
   the actual number that matters instead of painting a whole large block
   red for one contract. */
.wmm-default-box-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.wmm-default-box {
  border: 1px solid #e2ddd3;
  border-radius: 0.4rem;
  padding: 0.4rem 0.75rem;
  min-width: 128px;
  background-color: #fafaf8;
}
.wmm-default-box-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #6b6b66;
  white-space: nowrap;
}
.wmm-default-box-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--financial-danger);
  line-height: 1.3;
}
.wmm-default-box-unit {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b6b66;
  text-transform: uppercase;
}

body {
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

.card {
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    border-radius: 0.75rem;
}

.card-header {
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    border-radius: 0.75rem 0.75rem 0 0 !important;
}

/* ==========================================================================
   Broader UX polish - spacing, typography, tables, cards, mobile
   ========================================================================== */

/* Slightly roomier card bodies and a clearer label/value rhythm on the
   stat-tile cards used throughout the dashboards. */
.card-body { padding: 1.25rem 1.35rem; }
.card .text-muted.small { letter-spacing: 0.01em; }

/* Financial tables: clearer header row, calmer borders, comfortable row
   height - the goal is a report that scans easily left-to-right instead of
   a dense grid of numbers. */
.table {
  font-variant-numeric: tabular-nums;
}
.table thead th {
  background-color: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #475569;
  font-weight: 700;
  white-space: nowrap;
}
.table td, .table th { vertical-align: middle; }
.table tfoot td, .table tfoot th {
  border-top: 2px solid #cbd5e1;
  background-color: #f8fafc;
}

/* Give every "totals" row a bit more visual weight without resorting to
   color alone - bold text + a slightly heavier top border is enough. */
.wmm-totals-row td, .wmm-totals-row th { font-weight: 700; }

/* Section headings inside reports (Investor Summary, Accounting Breakdown,
   etc.) get a bit more breathing room and a consistent look wherever h6 is
   used as a section label. */
h6.wmm-section-label,
h6 {
  letter-spacing: 0.03em;
}

/* Mobile: let wide financial tables scroll horizontally inside their own
   card instead of squeezing every column or breaking the page layout. */
@media (max-width: 767.98px) {
  .table-responsive-wmm { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card-body { padding: 1rem; }
  h3 { font-size: 1.5rem; }
}

.repeatable-block {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    background: #fff;
    position: relative;
}

.repeatable-block .remove-block-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

/* Contract-level remove button: the summary line's text length varies a lot
   (contract code, type, principal amount, status badge all concatenated),
   so an absolutely-positioned top-right button can overlap wrapped summary
   text on narrower screens or with longer contract details. Instead of
   using flexbox "order" to visually relocate the button (which silently
   overrides the actual HTML order below it - a real bug that caused this
   whole block to render out of sequence no matter how the PHP markup was
   arranged), the button is simply placed directly in the HTML wherever it
   should visually appear (see render_contract_block() in
   wizard/step4_contracts.php - right after the Contract Details <details>
   closes). That keeps "what order things appear in on screen" always equal
   to "what order things appear in in the file," with nothing hidden in
   CSS. The button keeps both .remove-block-btn (required by wizard.js's
   ':scope > .remove-block-btn' selector) and the .remove-contract-btn
   modifier, which now only needs to cancel the absolute positioning. */
.repeatable-block--contract .remove-contract-btn {
    position: static;
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.wizard-nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
}

.required-star {
    color: #dc3545;
}

/* ---- Contract Details accordion (investor-facing print_summary.php) ----
   Built for an audience skewing older: generous text size, comfortable
   spacing, and large click targets throughout, rather than packing more
   onto the screen. */
.wmm-contract-card {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: #fff;
}

.wmm-contract-header-title {
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.wmm-contract-header-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2rem;
    margin: 0.75rem 0 0.25rem;
}

.wmm-contract-header-stats > div {
    min-width: 130px;
}

.wmm-contract-header-stats .text-muted.small {
    font-size: 0.85rem;
}

.wmm-contract-header-stats .fw-bold {
    font-size: 1.1rem;
}

details.wmm-subsection {
    border-top: 1px solid #e9ecef;
}

details.wmm-subsection:last-of-type {
    border-bottom: 1px solid #e9ecef;
}

.wmm-accordion-summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--financial-primary);
    padding: 0.9rem 0.5rem;
    list-style: none;
    min-height: 44px; /* comfortable tap target on touchscreens */
    display: flex;
    align-items: center;
}

.wmm-accordion-summary:hover {
    background-color: #f8fafc;
}

.wmm-accordion-summary::-webkit-details-marker {
    display: none;
}

.wmm-accordion-summary::before {
    content: '>';
    display: inline-block;
    margin-right: 0.6rem;
    font-size: 0.75em;
}

details[open] > .wmm-accordion-summary::before {
    content: 'v';
}

.wmm-accordion-body {
    padding: 0.25rem 0.5rem 1.25rem;
    font-size: 1rem;
}

.wmm-subsection-standalone {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0 0.5rem;
}

.wmm-subsection-standalone.wmm-subsection {
    border-top: 1px solid #dee2e6;
}

/* The months-in-default callout sits after the calm informational stats
   (dates/principal/rate/balance) rather than between the title and those
   stats, and is right-aligned so it reads as a distinct flag rather than
   interrupting the header's normal reading order. */
.wmm-contract-header-alert {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

/* ---- "You're securely viewing..." banner (wizard/step4_contracts.php) ----
   Calm and reassuring rather than a warning: soft green background, plenty
   of white space, message on the left and a contact block on the right so
   an investor always knows who to reach if something looks wrong, without
   the page telling them something IS wrong. */
.wmm-viewing-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    background-color: var(--financial-bg-success);
    border: 1px solid #cfe8d6;
    border-radius: 0.5rem;
    padding: 1.1rem 1.5rem;
}

.wmm-viewing-banner-message {
    flex: 1 1 320px;
    font-size: 1.02rem;
    text-align: left;
}

.wmm-viewing-banner-contact {
    flex: 0 0 auto;
    text-align: left;
}

/* A plain small text link here was too easy to miss for an audience
   skewing older, especially against a busy page - Mary specifically flagged
   this after watching a real investor session. This makes "email me" a
   real, unmissable button instead of a line of small blue text: generous
   padding, a big touch target, high contrast, and a plain-English label
   ("Email Mary") instead of the raw address doing double duty as the
   only clickable element. The actual address still shows underneath in
   plain text, for anyone who'd rather type it into their own email app. */
.wmm-contact-email-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--financial-primary);
    color: #fff !important;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 0.6rem 1.25rem;
    border-radius: 0.5rem;
    margin-top: 0.3rem;
}
.wmm-contact-email-btn:hover {
    background-color: #16293f;
}
.wmm-contact-email-address {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #555;
}

@media (max-width: 575.98px) {
    .wmm-viewing-banner {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Reset the flex-basis inherited from the row layout above - in a
       column-direction flex container, a leftover "320px" basis is read as
       a height, not a width, which stretched this block far taller than
       its actual text needed. */
    .wmm-viewing-banner-message {
        flex: 0 1 auto;
    }
    .wmm-viewing-banner-contact {
        flex: 0 0 auto;
        width: 100%;
        border-top: 1px solid #cfe8d6;
        padding-top: 0.85rem;
        margin-top: 0.25rem;
    }
}

/* ---- Professional accent color instead of Bootstrap's stock blue ----
   Bootstrap's default "primary" blue was never part of this app's
   financial color system (navy/green/gold/orange/red) and stood out next
   to it. These bring every blue-by-default Bootstrap element - solid
   buttons, outline buttons, and plain links - in line with the same navy
   already used for informational content elsewhere on the site. */
a {
    color: var(--financial-primary);
}
a:hover, a:focus {
    color: #14283f;
}

/* Added 2026-07-06: the plain `a { color }` rule above (navy) was silently
   making any solid-background button BUILT FROM AN <a> TAG unreadable -
   navy text on top of an equally-navy .btn-primary background - since it
   overrides whatever text color Bootstrap would otherwise give that button.
   A <button> element never had this problem since these navy/link color
   rules only ever targeted <a>. Found on wizard/print_summary.php's new
   "Go to Dashboard" button; wizard/success.php's "Print / Save My Summary"
   button (also an <a class="btn btn-primary">) had the exact same
   invisible-text bug already live before today. */
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus,
a.btn-success, a.btn-success:hover, a.btn-success:focus {
    color: #fff;
}

.btn-primary {
    background-color: var(--financial-primary);
    border-color: var(--financial-primary);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #14283f;
    border-color: #14283f;
}

.btn-outline-primary {
    color: var(--financial-primary);
    border-color: var(--financial-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active {
    background-color: var(--financial-primary);
    border-color: var(--financial-primary);
    color: #fff;
}

.text-primary {
    color: var(--financial-primary) !important;
}

.btn-success {
    background-color: var(--financial-success);
    border-color: var(--financial-success);
}
.btn-success:hover, .btn-success:focus, .btn-success:active {
    background-color: #1f5723;
    border-color: #1f5723;
}

.btn-outline-success {
    color: var(--financial-success);
    border-color: var(--financial-success);
}
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
    background-color: var(--financial-success);
    border-color: var(--financial-success);
    color: #fff;
}

/* Bootstrap's stock alert colors, remapped to the same financial palette
   used everywhere else (info=navy, success=green, warning=gold, danger=red)
   instead of Bootstrap's own blue/green/yellow/red, so a flash message or
   inline notice never clashes with the badges and figures right next to it. */
.alert-info {
    background-color: var(--financial-bg-info);
    border-color: #c9dced;
    color: #14283f;
}
.alert-success {
    background-color: var(--financial-bg-success);
    border-color: #b7dfc5;
    color: #1e4620;
}
.alert-warning {
    background-color: var(--financial-bg-warning);
    border-color: #f3dfa5;
    color: #6b4a05;
}
.alert-danger {
    background-color: var(--financial-bg-danger);
    border-color: #f3b4b4;
    color: #7a1f1f;
}

/* Darken the default checkbox outline for legibility against a white
   background, and use the site's own green (not Bootstrap's) once checked.
   Shared globally so every checkbox on the site looks the same - this used
   to be copy-pasted into a <style> block on both the Contracts & Payments
   and Investment Objectives pages individually. */
.form-check-input {
    border: 2px solid #495057;
}
.form-check-input:checked {
    background-color: var(--financial-success);
    border-color: var(--financial-success);
}

/* Targeted, non-global recolors for the two spots still using Bootstrap's
   stock red/yellow instead of the site's own palette (the Admin Investor
   Detail page's Danger Zone and "Contact Info Provided" cards) - done as
   dedicated classes rather than overriding .border-danger/.bg-danger
   everywhere, since those Bootstrap classes/utilities are also used by
   unrelated elements (e.g. delete buttons) that aren't part of this pass. */
.wmm-card-border-danger {
    border-color: var(--financial-danger) !important;
}
.wmm-card-header-danger {
    background-color: var(--financial-danger) !important;
    color: #fff;
}
.wmm-card-border-warning {
    border-color: var(--financial-warning) !important;
}

/* ---- Legal Representation rows (wizard/step6_legal.php) ----
   Same overlap-safe layout already used for Contract blocks: the remove
   button is pushed below the row's own content instead of being absolutely
   positioned over the top-right corner, where it could crowd the Email
   field on narrower screens. */
.repeatable-block--legal {
    display: flex;
    flex-direction: column;
}
.repeatable-block--legal > .repeatable-block-content {
    order: 1;
}
.repeatable-block--legal .remove-legal-btn {
    position: static;
    align-self: flex-start;
    order: 2;
    margin-top: 0.75rem;
}

@media print {
    nav, footer, .no-print { display: none !important; }
    .container { max-width: 100% !important; }
    body { background: #fff !important; }

    /* Force badge/callout background colors to actually print (browsers
       strip backgrounds by default when printing) - but even if a printer
       renders these as plain grayscale, the text label inside every badge
       ("Late", "Default", "11 MONTHS IN DEFAULT", etc.) still carries the
       meaning on its own, so nothing here depends on color alone. */
    .wmm-badge, .wmm-default-alert, .wmm-bg-success, .wmm-bg-warning, .wmm-bg-risk, .wmm-bg-danger {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color-adjust: exact;
    }

    /* Printed/PDF reports must show everything regardless of what an
       investor happened to have expanded or collapsed on screen. A closed
       <details> element's contents aren't just visually hidden by CSS -
       browsers skip rendering them entirely - so an author stylesheet rule
       can't force them to show. The actual expand-all-for-print happens in
       JS (see print_summary.php), which flips every <details> open before
       the print dialog opens and restores it after. This rule just hides
       the now-redundant disclosure arrow so a printed page doesn't show a
       "collapsed" triangle next to fully-expanded content. */
    .wmm-accordion-summary::before {
        display: none;
    }
}

/* ---- Term / Post-Maturity / Grand Total / Value-equation boxes ----
   Shared by the investor Print Report (wizard/print_summary.php) and the
   Investor Dashboard's per-contract detail view, so a contract reads
   identically whether an investor is looking at it on screen or on paper.
   Colors carry the same meaning as everywhere else on the site: orange for
   "owed but still within the original term," red for "owed because of a
   default past maturity," navy for a plain total, and the value-equation
   cells reuse info/risk/danger backgrounds to visually walk through how a
   contract's worth grew because of the default. */
.wmm-summary-box {
    margin-top: 1.25rem;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
}
.wmm-summary-box h4 {
    color: #fff;
    font-size: 0.95rem;
    margin: 0;
    padding: 0.6rem 1rem;
}
.wmm-summary-box.wmm-box-term h4 { background: var(--financial-risk); }
.wmm-summary-box.wmm-box-since h4 { background: var(--financial-danger); }
.wmm-summary-box.wmm-box-grand h4 { background: var(--financial-primary); }
.wmm-summary-box.wmm-box-value h4 { background: var(--financial-primary); }
.wmm-summary-rows { padding: 0.8rem 1rem; }
.wmm-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.95rem;
    padding: 0.35rem 0;
    border-bottom: 1px dotted #ddd;
}
.wmm-summary-row:last-child { border-bottom: none; font-weight: 700; }
.wmm-summary-box.wmm-box-grand .wmm-summary-row:last-child { font-size: 1.1rem; color: var(--financial-primary); }

/* Added 2026-07-06 at Mary's request: "Payments Received" needed to be
   visible somewhere in the Contract Term Summary box, in green. This row
   is deliberately styled apart from the ordinary dotted-border rows above
   it since it's money actually received (good news), not money owed. */
.wmm-summary-row-highlight {
    background: var(--financial-bg-success);
    border: 1px solid #b6e3c4;
    border-radius: 6px;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.4rem;
    font-weight: 700;
}
.wmm-summary-row-highlight span:last-child { color: var(--financial-success); }

.wmm-value-equation {
    display: flex;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    flex-wrap: wrap;
}
.wmm-value-cell {
    flex: 1;
    min-width: 140px;
    text-align: center;
    border-radius: 8px;
    padding: 0.75rem 0.6rem;
    background: var(--financial-bg-info);
    border: 1px solid #c7d9ec;
}
.wmm-value-cell.wmm-value-risk { background: var(--financial-bg-risk); border-color: #f6c896; }
.wmm-value-cell.wmm-value-danger { background: var(--financial-bg-danger); border-color: #f0b3b3; }
.wmm-value-label {
    font-size: 0.78rem;
    color: #555;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}
.wmm-value-cell.wmm-value-risk .wmm-value-label { color: var(--financial-risk); }
.wmm-value-cell.wmm-value-danger .wmm-value-label { color: var(--financial-danger); }
.wmm-value-amount {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--financial-primary);
}
.wmm-value-cell.wmm-value-risk .wmm-value-amount { color: var(--financial-risk); }
.wmm-value-cell.wmm-value-danger .wmm-value-amount { color: var(--financial-danger); }
.wmm-value-op {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 700;
    color: #999;
    padding: 0 0.25rem;
}

/* Added 2026-07-06: the two stat chips under the Then-vs-Now equation
   (Total Interest Paid to Date, Missed Payments) - approved from a mockup
   built with these exact classes, so this must stay visually identical to
   that mockup. Deliberately separate from .wmm-value-cell/.wmm-value-op
   since these two numbers aren't part of the +/= chain above them. */
.wmm-stat-chip-row {
    display: flex;
    gap: 0.75rem;
    padding: 0 1rem 1rem;
    flex-wrap: wrap;
}
.wmm-stat-chip {
    flex: 1;
    min-width: 200px;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid #dee2e6;
}
.wmm-stat-chip-label { font-size: 0.8rem; color: #555; margin-bottom: 0.3rem; }
.wmm-stat-chip-value { font-size: 1.25rem; font-weight: 800; }
.wmm-stat-chip.chip-received { background: var(--financial-bg-success); border-color: #b6e3c4; }
.wmm-stat-chip.chip-received .wmm-stat-chip-value { color: var(--financial-success); }
.wmm-stat-chip.chip-missed { background: #f4f5f7; border-color: #d8dde3; }
.wmm-stat-chip.chip-missed .wmm-stat-chip-value { color: #555; }

@media print {
    .wmm-summary-box { break-inside: avoid; }
}

/* ---- Investor Dashboard (wizard/dashboard.php) ----
   Sidebar + KPI cards + contracts table + portfolio donut, matching the
   reference layout Mary shared. Reuses the same financial color variables
   as every other screen - nothing new invented, just newly arranged. */
.wmm-dash-layout {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}
.wmm-dash-sidebar {
    flex: 0 0 200px;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 0;
    position: sticky;
    top: 1rem;
}
.wmm-dash-sidebar a {
    display: block;
    padding: 0.6rem 1.25rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.95rem;
    border-left: 3px solid transparent;
}
.wmm-dash-sidebar a:hover {
    background: #f8fafc;
}
.wmm-dash-sidebar a.active {
    color: var(--financial-primary);
    font-weight: 700;
    border-left-color: var(--financial-primary);
    background: var(--financial-bg-info);
}
.wmm-dash-main {
    flex: 1;
    min-width: 0;
}
.wmm-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.wmm-kpi-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
}
.wmm-kpi-card .wmm-kpi-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 0.35rem;
}
.wmm-kpi-card .wmm-kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
}
.wmm-kpi-card .wmm-kpi-sub {
    font-size: 0.8rem;
    color: #888;
    margin-top: 0.25rem;
}
.wmm-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
    gap: 1.5rem;
}
@media (max-width: 900px) {
    .wmm-dash-layout { flex-direction: column; }
    .wmm-dash-sidebar { flex: none; width: 100%; position: static; }
    .wmm-dash-grid { grid-template-columns: 1fr; }
}
.wmm-dash-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.25rem;
}

/* Added 2026-07-06: the small "needs attention first" line at the very top
   of the Dashboard, above the KPI cards. Always the same contract the list
   below already sorts to the top (Past Maturity first) - nothing for the
   investor to pick or configure, per Mary's request to keep this simple. */
.wmm-dash-featured {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    background: var(--financial-bg-risk);
    border: 1px solid #f6c896;
    border-radius: 0.5rem;
    padding: 0.6rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}
.wmm-dash-featured a { color: var(--financial-primary); text-decoration: underline; }

/* Added 2026-07-06: replaced the click-to-expand table with one card per
   contract. Each card always shows the Then-vs-Now box (see
   render_contract_then_now_box_html() in includes/functions.php) with no
   click required, then an accordion (native <details name="...">, same
   exclusive-open pattern as the Print Report's Contract Details sections)
   reveals the fuller Term Summary / Default Info / Total Owed breakdown
   only if the investor wants to dig further - per Mary's 2026-07-06
   feedback ("Each Then and Now should be in the dash, then if investor
   wants to open, the card appears"). */
.wmm-dash-contract-block {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1rem 1.25rem 0.25rem;
    margin-bottom: 1.5rem;
    background: #fff;
}
.wmm-dash-contract-block:last-child { margin-bottom: 0; }
.wmm-dash-contract-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}
.wmm-dash-contract-head-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 1.05rem;
}
.wmm-dash-contract-head-stats {
    font-size: 0.85rem;
    color: #666;
}

table.wmm-contracts-table {
    width: 100%;
    border-collapse: collapse;
}
table.wmm-contracts-table th {
    text-align: left;
    font-size: 0.78rem;
    text-transform: uppercase;
    color: #888;
    border-bottom: 1px solid #dee2e6;
    padding: 0.5rem 0.6rem;
}
table.wmm-contracts-table td {
    padding: 0.7rem 0.6rem;
    border-bottom: 1px solid #f1f3f5;
    vertical-align: middle;
}
table.wmm-contracts-table tr.wmm-row-clickable {
    cursor: pointer;
}
table.wmm-contracts-table tr.wmm-row-clickable:hover {
    background: #f8fafc;
}
table.wmm-contracts-table tr.wmm-row-detail-open > td {
    border-bottom: none;
}
.wmm-donut {
    border-radius: 50%;
    width: 160px;
    height: 160px;
    margin: 0 auto 1rem auto;
}
.wmm-donut-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.85rem;
}
.wmm-donut-legend-item {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}
.wmm-donut-legend-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 2px;
    margin-right: 0.4rem;
}
.wmm-dash-detail-row td {
    background: #fafbfc;
    padding: 1rem 1.5rem;
}
.wmm-dash-empty {
    text-align: center;
    color: #888;
    padding: 3rem 1rem;
}
/* ==========================================================================
   ADDED 2026-07-25 — Round 20 design standards.
   Everything below this line was decided with Mary on 07/25/2026 and is
   recorded in the Design & Function Register, Items 44, 45 and 47.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ITEM 44 — COLOUR DESCRIBES MONEY. NAVY OPERATES THE MACHINE.

   Green, gold, orange and red are reserved for what money is DOING, exactly
   as the Financial Color System at the top of this file defines them. They
   never appear on a control.

   Green had been doing two jobs at once - "money you have actually received"
   AND "press here" - so the same colour meant good news in one place and an
   instruction in another. It is also the worst possible choice for a button
   on this site: green against white is precisely the hue pair that collapses
   for a colour-blind reader, and roughly one man in twelve cannot separate
   them reliably. Navy against white differs in LIGHTNESS rather than hue, so
   it survives every form of colour blindness - and navy is already defined
   here as informational, never bad news.

   The companion rule, which matters as much as the colour: EXACTLY ONE
   FILLED BUTTON PER SCREEN. If a second one feels necessary, one of the two
   is not really the next step. Applying this rule is what exposed two
   buttons that should not have existed at all.
   -------------------------------------------------------------------------- */
.btn-wmm-primary,
.btn.btn-wmm-primary {
    background-color: var(--financial-primary);
    border: 2px solid var(--financial-primary);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0.65rem 1.9rem;
    border-radius: 0.5rem;
    min-height: 44px;              /* comfortable tap target */
}
.btn-wmm-primary:hover,
.btn-wmm-primary:focus {
    background-color: #16293f;
    border-color: #16293f;
    color: #fff;
}
.btn-wmm-secondary,
.btn.btn-wmm-secondary {
    background-color: #fff;
    border: 2px solid var(--financial-primary);
    color: var(--financial-primary);
    font-size: 1.02rem;
    font-weight: 700;
    padding: 0.6rem 1.6rem;
    border-radius: 0.5rem;
    min-height: 44px;
}
.btn-wmm-secondary:hover,
.btn-wmm-secondary:focus {
    background-color: var(--financial-bg-info);
    color: var(--financial-primary);
}
/* A way out of a page is a text link, not a button competing with the action. */
.btn-wmm-quiet {
    background: none;
    border: none;
    color: #6c757d;
    text-decoration: underline;
    font-size: 0.95rem;
    padding: 0.5rem 0.25rem;
    cursor: pointer;
}
.btn-wmm-quiet:hover { color: var(--financial-primary); }

/* --------------------------------------------------------------------------
   ITEMS 45 and 47 — the Then-vs-Now box, rebuilt.
   Each side leads with the one number that side is about, at a size that can
   be read across a room, with short label/value pairs beneath that do not
   wrap. See render_contract_then_now_box_html() in includes/functions.php.
   -------------------------------------------------------------------------- */
.wmm-tn-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 700px) {
    .wmm-tn-split { grid-template-columns: 1fr; }
}
.wmm-tn-side { padding: 1.1rem 1.25rem; }
.wmm-tn-then { background: #f6f7f9; border-right: 1px solid #e3e6ea; }
.wmm-tn-now  { background: var(--financial-bg-risk); }
@media (max-width: 700px) {
    .wmm-tn-then { border-right: none; border-bottom: 1px solid #e3e6ea; }
}
.wmm-tn-head {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: #8b8b84;
    margin-bottom: 0.7rem;
}
.wmm-tn-now .wmm-tn-head { color: var(--financial-risk); }
.wmm-tn-big {
    font-size: 2.15rem;
    font-weight: 800;
    line-height: 1.05;
    color: var(--financial-primary);
}
/* the meaning colours must survive .wmm-tn-big's own colour declaration */
.wmm-tn-big.wmm-fin-danger  { color: var(--financial-danger); }
.wmm-tn-big.wmm-fin-success { color: var(--financial-success); }
.wmm-tn-big.wmm-fin-risk    { color: var(--financial-risk); }
.wmm-tn-sub {
    font-size: 0.9rem;
    color: #5b5b54;
    margin: 0.15rem 0 0.9rem;
}
.wmm-tn-detail {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding-top: 0.6rem;
}
.wmm-tn-detail > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
    padding: 0.22rem 0;
}
.wmm-tn-detail span { color: #6b6b66; white-space: nowrap; }
.wmm-tn-detail b { font-weight: 700; white-space: nowrap; }
/* the growth block is a group, not a row - it must not inherit the row flex */
.wmm-tn-detail > .wmm-tn-growing {
    display: block;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.18);
}
.wmm-tn-growing > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.9rem;
    padding: 0.22rem 0;
}
.wmm-tn-grow-head {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--financial-risk);
    margin-bottom: 0.25rem;
}
.wmm-tn-grow-rate {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.wmm-tn-grow-rate b { color: var(--financial-risk); }

/* ==========================================================================
   ADDED 2026-07-25 — the navigation rebuild.
   Register Items 5, 7, 16, 26, 27, 42 and 43.
   ========================================================================== */

/* ---- Item 16: the sidebar, drawn from one shared definition ------------- */
.wmm-nav-parent {
    display: block;
    padding: 0.6rem 1.25rem;
    color: #495057;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 700;
    border-left: 3px solid transparent;
}
.wmm-nav-parent:hover { background: #f8fafc; }
.wmm-nav-parent.active {
    color: var(--financial-primary);
    border-left-color: var(--financial-primary);
    background: var(--financial-bg-info);
}
.wmm-nav-child {
    display: block;
    padding: 0.38rem 1.25rem 0.38rem 2.1rem;
    color: #6c757d;
    text-decoration: none;
    font-size: 0.88rem;
    border-left: 3px solid transparent;
}
.wmm-nav-child:hover { background: #f8fafc; color: var(--financial-primary); }
.wmm-nav-sep { height: 1px; background: #e9ecef; margin: 0.55rem 1rem; }
/* Log Out was one grey link among eight and easy to hit by mistake. */
.wmm-nav-logout {
    display: block;
    margin: 0.75rem 1rem 0.25rem;
    padding: 0.55rem 1rem;
    text-align: center;
    border: 2px solid #adb5bd;
    border-radius: 0.45rem;
    color: #495057;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
}
.wmm-nav-logout:hover {
    border-color: var(--financial-primary);
    color: var(--financial-primary);
    background: var(--financial-bg-info);
}

/* ---- Items 5 and 42: the named areas and the one button out ------------- */
.wmm-area-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.6rem;
    background: var(--financial-primary); color: #fff;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0.7rem 1.15rem;
    font-weight: 800; font-size: 1.02rem;
}
.wmm-area-step {
    font-size: 0.78rem; font-weight: 700; color: #cfe0f2;
    letter-spacing: 0.04em; text-transform: uppercase;
}
.wmm-area-body {
    background: #fff; border: 1px solid #dee2e6; border-top: none;
    border-radius: 0 0 0.5rem 0.5rem; padding: 1.35rem 1.25rem;
}
.wmm-area-nav {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap;
    margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid #e9ecef;
}
.wmm-nav-actions { margin-left: auto; }
/* Saving is a statement, not a control - so it is green text, never a button. */
.wmm-save-state {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.88rem; color: var(--financial-success); font-weight: 600;
}
.wmm-save-dot {
    width: 0.55rem; height: 0.55rem; border-radius: 50%;
    background: var(--financial-success); display: inline-block;
}

/* ---- Item 5: the chooser ------------------------------------------------ */
.wmm-chooser { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.wmm-choice {
    display: block; text-decoration: none;
    background: #fff; border: 2px solid #dee2e6; border-radius: 0.6rem;
    padding: 1.2rem 1.3rem;
}
.wmm-choice:hover { border-color: var(--financial-primary); background: var(--financial-bg-info); }
.wmm-choice-title { display: block; font-size: 1.12rem; font-weight: 800; color: var(--financial-primary); margin-bottom: 0.3rem; }
.wmm-choice-sub { display: block; font-size: 0.92rem; color: #5b5b54; }

/* ---- Item 26: yellow means it needs you --------------------------------- */
.wmm-needs-you {
    background: var(--financial-bg-warning) !important;
    border-color: var(--financial-warning) !important;
    border-width: 2px !important;
}
.wmm-yellow-counter {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    background: var(--financial-bg-warning); border: 1px solid #f0d089;
    border-radius: 0.5rem; padding: 0.7rem 1.1rem; margin-bottom: 1.1rem;
    font-size: 1rem; font-weight: 600; color: #7a4a00;
}
.wmm-yellow-counter.all-clear {
    background: var(--financial-bg-success); border-color: #b6e3c4;
    color: var(--financial-success);
}

/* ---- Item 27: help on demand, in words --------------------------------- */
.wmm-help-btn {
    background: #fff; border: 2px solid var(--financial-primary);
    color: var(--financial-primary); font-weight: 700; font-size: 0.95rem;
    border-radius: 0.5rem; padding: 0.45rem 1.1rem; cursor: pointer;
}
.wmm-help-btn:hover { background: var(--financial-bg-info); }
.wmm-help-panel {
    display: none;
    background: #fff; border: 2px solid var(--financial-primary);
    border-radius: 0.5rem; padding: 1.1rem 1.35rem; margin-top: 0.75rem;
    font-size: 1rem; line-height: 1.55; max-width: 660px;
}
.wmm-help-panel.open { display: block; }
.wmm-help-panel h6 { color: var(--financial-primary); font-weight: 800; margin-bottom: 0.5rem; }
.wmm-quiet-link {
    background: none; border: none; color: var(--financial-primary);
    text-decoration: underline; font-size: 0.92rem; padding: 0.4rem 0.2rem; cursor: pointer;
}

/* ---- Item 42: the hub --------------------------------------------------- */
.wmm-hub-lede { font-size: 1.08rem; max-width: 64ch; color: #3d3d38; margin-bottom: 1.4rem; }
.wmm-hub-block { border: 1px solid #dee2e6; border-radius: 0.55rem; background: #fff; margin-bottom: 1.3rem; overflow: hidden; }
.wmm-hub-block-head { font-weight: 800; font-size: 1rem; padding: 0.6rem 1.05rem; border-bottom: 1px solid #e9ecef; }
.wmm-hub-done .wmm-hub-block-head  { background: var(--financial-bg-success); color: var(--financial-success); }
.wmm-hub-open .wmm-hub-block-head  { background: var(--financial-bg-warning); color: #7a4a00; }
.wmm-hub-clear .wmm-hub-block-head { background: var(--financial-bg-success); color: var(--financial-success); }
.wmm-hub-block-body { padding: 1rem 1.05rem; }
.wmm-hub-list { margin: 0 0 0.6rem; padding-left: 1.25rem; font-size: 0.98rem; }
.wmm-hub-list li { margin-bottom: 0.22rem; }
.wmm-hub-foot { font-size: 0.85rem; color: #8b8b84; margin: 0; }
.wmm-hub-open-item {
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; border-bottom: 1px solid #f1f3f5;
}
.wmm-hub-open-title { font-weight: 700; color: #2b2b28; }
.wmm-hub-open-sub { font-size: 0.9rem; color: #5b5b54; margin-top: 0.1rem; }
.wmm-hub-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
@media (max-width: 640px) { .wmm-hub-doors { grid-template-columns: 1fr; } }
.wmm-hub-door {
    display: block; text-decoration: none;
    background: #fbfbfa; border: 2px solid #dee2e6; border-radius: 0.6rem;
    padding: 1.15rem 1.3rem;
}
.wmm-hub-door:hover { border-color: var(--financial-primary); background: var(--financial-bg-info); }
.wmm-hub-door-go { border-color: var(--financial-primary); background: var(--financial-bg-info); }
.wmm-hub-door-go:hover { background: #dce8f4; }
.wmm-hub-door-title { display: block; font-size: 1.2rem; font-weight: 800; color: #55554e; margin-bottom: 0.25rem; }
.wmm-hub-door-go .wmm-hub-door-title { color: var(--financial-primary); }
.wmm-hub-door-sub { display: block; font-size: 0.92rem; color: #5b5b54; }

/* ---- Item 7: the name she calls a contract ------------------------------ */
.wmm-contract-name { font-size: 1.08rem; font-weight: 800; color: var(--financial-primary); }
.wmm-contract-code { font-size: 0.76rem; color: #8b8b84; font-weight: 600; letter-spacing: 0.03em; }
.wmm-contract-actions {
    display: flex; gap: 0.6rem; flex-wrap: wrap;
    margin-top: 1.2rem; padding-top: 1rem; padding-bottom: 1.2rem;
    border-top: 1px solid #eceef1;
}
.wmm-card-link {
    background: none; border: none; color: var(--financial-primary);
    font-weight: 700; font-size: 0.98rem; text-decoration: underline;
    text-underline-offset: 3px; padding: 0.35rem 0; cursor: pointer;
}
.wmm-card-link::after { content: ' \2192'; }