/* Financial Model (FFM) module styles for unified.html. Ported verbatim from
   index.html's <style> block (the FFM component rules, lines ~10–221) into a
   self-contained, namespaced module. Every on-screen rule is scoped under
   .fm-module-root so the wizard can be lazy-mounted alongside other unified
   modules without selector collisions. The shell already defines the CSS
   variables (--brown, --croissant, --muted, --border, --cream, --green,
   --red, etc.) and the page chrome (body, .sidebar, .topbar, toast), so those
   are intentionally NOT re-declared here.

   The @media print block is gated on body.unified-print-ffm (added by
   exportPDF() before window.print() and removed after) — mirroring
   pl-module.css's body.pl-printing approach — so printing hides the shell
   sidebar/topbar and shows only the FFM content + #pdf-footer. */

.fm-module-root { font-family: var(--fb, 'Otoiwo', system-ui, sans-serif); color: var(--brown); }
.fm-module-root *, .fm-module-root *::before, .fm-module-root *::after { box-sizing: border-box; }

/* Step indicator */
.fm-module-root .steps{display:flex;align-items:center;margin-bottom:2.5rem}
.fm-module-root .step{display:flex;align-items:center;gap:10px;flex:1}
.fm-module-root .step-circle{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600;color:var(--muted);flex-shrink:0;transition:all .3s;font-family:var(--ff)}
.fm-module-root .step-circle.active{border-color:var(--croissant);background:var(--croissant);color:white}
.fm-module-root .step-circle.done{border-color:var(--green);background:var(--green);color:white}
.fm-module-root .step-label{font-size:19px;color:var(--muted)}
.fm-module-root .step-label.active{color:var(--brown);font-weight:500}
.fm-module-root .step-line{flex:1;height:1px;background:var(--border);margin:0 8px}
.fm-module-root .step-line.done{background:var(--green)}

/* Cards + form */
.fm-module-root .card{background:white;border-radius:16px;border:.5px solid var(--border);padding:2rem;margin-bottom:1.25rem}
.fm-module-root .card-title{font-family:var(--ff);font-size:23px;color:var(--brown);font-weight:600;margin-bottom:.35rem}
.fm-module-root .card-sub{font-size:19px;color:var(--muted);margin-bottom:1.5rem;line-height:1.6}
.fm-module-root .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.fm-module-root .form-grid.three{grid-template-columns:1fr 1fr 1fr}
.fm-module-root .field{display:flex;flex-direction:column;gap:5px}
.fm-module-root .field label{font-size:19px;font-weight:500;color:var(--brown)}
.fm-module-root .field input,.fm-module-root .field select{height:42px;border:.5px solid var(--border);border-radius:10px;padding:0 12px;font-family:var(--fb);font-size:19px;color:var(--brown);background:#fff;outline:none;transition:border-color .2s;-webkit-appearance:none}
.fm-module-root .field input:focus,.fm-module-root .field select:focus{border-color:var(--croissant);box-shadow:0 0 0 3px rgba(196,129,58,.1)}
.fm-module-root .field input::placeholder{color:#C4B8AC}
.fm-module-root .input-group{display:flex;align-items:center;border:.5px solid var(--border);border-radius:10px;overflow:hidden;transition:border-color .2s}
.fm-module-root .input-group:focus-within{border-color:var(--croissant);box-shadow:0 0 0 3px rgba(196,129,58,.1)}
.fm-module-root .input-prefix{padding:0 10px;font-size:17px;font-weight:500;color:var(--muted);background:#FAF7F2;height:42px;display:flex;align-items:center;border-right:.5px solid var(--border);white-space:nowrap;flex-shrink:0}
.fm-module-root .input-group input{border:none!important;border-radius:0!important;box-shadow:none!important;height:42px;flex:1;padding:0 12px;font-family:var(--fb);font-size:19px;color:var(--brown);background:#fff;outline:none}

/* Buttons */
.fm-module-root .btn{height:44px;padding:0 20px;border-radius:10px;font-family:var(--fb);font-size:19px;font-weight:500;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:8px;border:none}
.fm-module-root .btn-primary{background:var(--croissant);color:#fff;border:2px solid #A86B28!important}
.fm-module-root .btn-primary:hover{background:#AE6E28}
.fm-module-root .btn-primary:disabled{opacity:.5;cursor:not-allowed}
.fm-module-root .btn-secondary{background:white;border:.5px solid var(--border)!important;color:var(--muted)}
.fm-module-root .btn-secondary:hover{border-color:var(--croissant)!important;color:var(--croissant)}
.fm-module-root .action-row{display:flex;align-items:center;justify-content:space-between;margin-top:1.5rem;gap:1rem}

/* Results header + KPIs */
.fm-module-root .results-header{background:var(--brown);border-radius:16px;padding:1.5rem 2rem;margin-bottom:1.25rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.fm-module-root .results-market{font-size:17px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.fm-module-root .results-title{font-family:var(--ff);font-size:27px;color:white;font-weight:600}
.fm-module-root .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.25rem}
.fm-module-root .kpi{background:white;border:.5px solid var(--border);border-radius:14px;padding:1.25rem 1.5rem}
.fm-module-root .kpi-label{font-size:17px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px}
.fm-module-root .kpi-value{font-family:var(--ff);font-size:25px;color:var(--brown);font-weight:600}
.fm-module-root .kpi-value.pos{color:var(--green)}
.fm-module-root .kpi-value.neg{color:var(--red)}
.fm-module-root .kpi-sub{font-size:17px;color:var(--muted);margin-top:3px}

/* Scenario tiles */
.fm-module-root .scenario-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-bottom:1.25rem}
.fm-module-root .scenario{background:white;border:.5px solid var(--border);border-radius:14px;padding:1.25rem 1.5rem;text-align:center}
.fm-module-root .scenario.base{border-color:var(--croissant);background:var(--croissant-pale)}
.fm-module-root .scenario-name{font-size:17px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px}
.fm-module-root .scenario-rev{font-family:var(--ff);font-size:23px;font-weight:600;color:var(--brown)}
.fm-module-root .scenario-profit{font-size:18px;margin-top:4px}
.fm-module-root .scenario-profit.pos{color:var(--green)}
.fm-module-root .scenario-profit.neg{color:var(--red)}

/* Year table */
.fm-module-root .year-table{background:white;border:.5px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:1.25rem}
.fm-module-root .year-table table{width:100%;border-collapse:collapse}
.fm-module-root .year-table th{font-size:17px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;padding:10px 16px;text-align:left;border-bottom:.5px solid var(--border);background:#FDFAF7}
.fm-module-root .year-table td{font-size:19px;padding:10px 16px;border-bottom:.5px solid rgba(44,26,14,.06);color:var(--brown)}
.fm-module-root .year-table tr:last-child td{border-bottom:none}
.fm-module-root .year-table td.num{font-variant-numeric:tabular-nums;text-align:right}
.fm-module-root .year-table td.pos{color:var(--green)}
.fm-module-root .year-table td.neg{color:var(--red)}

/* Spinner (calc button) */
.fm-module-root .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:fm-spin .7s linear infinite;display:inline-block}
@keyframes fm-spin{to{transform:rotate(360deg)}}

/* Result tab buttons + small toggles */
.fm-module-root .period-btn{height:28px;padding:0 12px;border:none;border-radius:6px;font-family:var(--fb);font-size:17px;font-weight:500;color:var(--muted);background:transparent;cursor:pointer;transition:all .15s}
.fm-module-root .period-btn.active{background:var(--brown);color:white}
.fm-module-root .mini-toggle{height:22px;padding:0 8px;border:none;border-radius:4px;font-family:var(--fb);font-size:15px;font-weight:500;color:var(--muted);background:transparent;cursor:pointer;transition:all .15s}
.fm-module-root .mini-toggle.active{background:var(--croissant);color:white}

/* Patio field guards (ported from #patio-fields rules) */
.fm-module-root #patio-fields .field{min-width:0}
.fm-module-root #patio-fields label span{word-break:break-word;overflow-wrap:break-word}

@media(max-width:640px){
  .fm-module-root .form-grid,.fm-module-root .form-grid.three,.fm-module-root .kpi-grid,.fm-module-root .scenario-grid{grid-template-columns:1fr}
}

/* Print-only companions — hidden on screen, shown in @media print */
.fm-module-root .tornado-print{display:none}
.fm-module-root .cashflow-print{display:none}
.fm-module-root .staff-cost-print{display:none}

/* PDF footer — fixed strip shown only while printing. Lives at the body level
   (the module mounts #pdf-footer outside .content scroll), gated by the print
   class so it never shows on screen. */
#pdf-footer{
  display:none;position:fixed;bottom:0;left:0;right:0;
  padding:8px 20px;border-top:1px solid rgba(44,26,14,.12);
  background:white;font-family:var(--fb);font-size:13px;color:rgba(44,26,14,.45);
  justify-content:space-between;align-items:center;gap:1rem;
  pointer-events:none;z-index:9998;
}

@page{size:A4;margin:12mm 10mm 14mm 10mm}

/* ── Print mode ────────────────────────────────────────────────────────────
   Gated on body.unified-print-ffm (set by exportPDF). Hides the unified shell
   chrome (sidebar/topbar/toast) and the FFM step indicator + result tabs +
   header buttons, expands all result panels, and swaps fragile graphical
   widgets (Chart.js canvas, tornado bar chart, 14-col staff grid) for the
   print-friendly companions. Mirrors index.html's @media print verbatim, just
   gated on the body class and scoped to the FFM root. */
@media print{
  body.unified-print-ffm .sidebar,
  body.unified-print-ffm .topbar,
  body.unified-print-ffm #toast-wrap,
  body.unified-print-ffm .toast-wrap,
  body.unified-print-ffm .fm-module-root .steps,
  body.unified-print-ffm .fm-module-root .results-header .btn,
  body.unified-print-ffm .fm-module-root .results-tabs{display:none!important}
  /* Unlock shell scroll containers so the full document prints */
  body.unified-print-ffm .main{overflow:visible!important}
  body.unified-print-ffm .content{padding:0!important;overflow:visible!important}
  body.unified-print-ffm .fm-module-root{padding:0!important;max-width:100%!important}
  body.unified-print-ffm .fm-module-root .results-header{background:var(--brown)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact;border-radius:12px!important;margin-bottom:1rem!important}
  body.unified-print-ffm #rpanel-summary,
  body.unified-print-ffm #rpanel-sensitivity,
  body.unified-print-ffm #rpanel-cashflow,
  body.unified-print-ffm #rpanel-investment,
  body.unified-print-ffm #rpanel-expenses,
  body.unified-print-ffm #rpanel-scenarios{display:block!important}
  body.unified-print-ffm .fm-module-root .kpi-grid{grid-template-columns:repeat(4,1fr)!important;page-break-inside:avoid}
  body.unified-print-ffm .fm-module-root .card{page-break-inside:avoid}
  body.unified-print-ffm #rpanel-investment{page-break-before:always}
  body.unified-print-ffm #rpanel-expenses{page-break-before:always}
  body.unified-print-ffm #rpanel-scenarios{page-break-before:always}
  body.unified-print-ffm #capex-breakdown-content table,
  body.unified-print-ffm #expenses-breakdown-content table{width:100%;table-layout:fixed}
  body.unified-print-ffm .fm-module-root .scenario-grid{page-break-inside:avoid}
  body.unified-print-ffm{background:white!important}
  body.unified-print-ffm a[href]:after{content:none!important}
  /* Staff costs table: unlock the horizontal scroll container and shrink so all 14 columns fit the printed page */
  body.unified-print-ffm .staff-cost-block{page-break-inside:avoid;page-break-before:auto}
  body.unified-print-ffm .staff-cost-scroll{overflow:visible!important}
  body.unified-print-ffm .staff-cost-scroll table{width:100%!important;min-width:0!important;table-layout:fixed!important;font-size:9.5px!important;white-space:normal!important}
  body.unified-print-ffm .staff-cost-scroll th,body.unified-print-ffm .staff-cost-scroll td{padding:3px 2px!important;position:static!important;word-break:break-word;overflow-wrap:anywhere}
  body.unified-print-ffm .staff-cost-scroll th:first-child,body.unified-print-ffm .staff-cost-scroll td:first-child{padding-left:6px!important;white-space:normal!important;text-align:left!important;width:16%!important}
  body.unified-print-ffm .staff-cost-scroll th:nth-child(2),body.unified-print-ffm .staff-cost-scroll td:nth-child(2){width:9%!important}
  body.unified-print-ffm .staff-cost-scroll tr th:nth-child(n+3),body.unified-print-ffm .staff-cost-scroll tr td:nth-child(n+3){width:6.25%!important;font-size:9px!important}
  /* Driver-sensitivity tornado — swap the graphical bar chart (absolute-positioned, renders poorly in PDF) for a plain table */
  body.unified-print-ffm .tornado-graphical{display:none!important}
  body.unified-print-ffm .tornado-print{display:table!important;page-break-inside:avoid}
  body.unified-print-ffm .tornado-print th,body.unified-print-ffm .tornado-print td{border:1px solid rgba(44,26,14,.15);padding:6px 8px;font-size:11px}
  body.unified-print-ffm .tornado-print th{background:#FDFAF7;font-weight:600;text-align:left}
  body.unified-print-ffm .tornado-print td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
  /* PDF polish — unify typography so the document doesn't look like a Frankenstein
     of screen-sized KPI tiles next to table-sized text. */
  body.unified-print-ffm .kpi{padding:.75rem .9rem!important}
  body.unified-print-ffm .kpi-label{font-size:10.5px!important;margin-bottom:3px!important}
  body.unified-print-ffm .kpi-value{font-size:16px!important;line-height:1.15!important}
  body.unified-print-ffm .kpi-sub{font-size:10.5px!important;margin-top:2px!important}
  body.unified-print-ffm .scenario{padding:.75rem 1rem!important}
  body.unified-print-ffm .scenario-name{font-size:10.5px!important;margin-bottom:4px!important}
  body.unified-print-ffm .scenario-rev{font-size:16px!important}
  body.unified-print-ffm .scenario-profit{font-size:12px!important}
  /* Break-even inline-styled figures (23px on screen) */
  body.unified-print-ffm #be-rev,body.unified-print-ffm #be-receipts,body.unified-print-ffm #be-util{font-size:15px!important}
  body.unified-print-ffm #be-rev-eur{font-size:10.5px!important}
  /* Stress-threshold tiles (24px on screen) */
  body.unified-print-ffm #scenario-stress-content>div{padding:10px!important}
  body.unified-print-ffm #scenario-stress-content>div>div:nth-child(1){font-size:10.5px!important;margin-bottom:4px!important}
  body.unified-print-ffm #scenario-stress-content>div>div:nth-child(2){font-size:16px!important}
  body.unified-print-ffm #scenario-stress-content>div>div:nth-child(3){font-size:10.5px!important;margin-top:3px!important}
  /* 60-month cashflow chart — swap the Chart.js canvas (rasterises unreliably
     across print pipelines, often overflowing or missing) for the inline SVG */
  body.unified-print-ffm #cashflow-chart{display:none!important}
  body.unified-print-ffm .cashflow-print{display:block!important;width:100%!important;max-width:100%}
  body.unified-print-ffm .cashflow-print svg{width:100%!important;height:auto!important}
  /* Staff costs — swap the 14-col monthly grid (position + 12 months + avg) for a
     5-col summary that keeps the seasonality story via Low / Peak month values */
  body.unified-print-ffm .staff-cost-scroll{display:none!important}
  body.unified-print-ffm .staff-cost-print{display:table!important;width:100%;border-collapse:collapse;page-break-inside:avoid}
  body.unified-print-ffm .staff-cost-print th,body.unified-print-ffm .staff-cost-print td{border-bottom:.5px solid rgba(44,26,14,.08);padding:6px 10px;font-size:12px}
  body.unified-print-ffm .staff-cost-print th{background:#FDFAF7;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.6px;font-size:11px;text-align:left}
  body.unified-print-ffm .staff-cost-print th:nth-child(n+2),body.unified-print-ffm .staff-cost-print td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
  body.unified-print-ffm .staff-cost-print tr:last-child td{background:var(--croissant-pale);font-weight:600}
  /* Card spacing: screen uses 1.25rem gaps — too airy on paper */
  body.unified-print-ffm .card{margin-bottom:.75rem!important}
  body.unified-print-ffm .kpi-grid{gap:.5rem!important;margin-bottom:.75rem!important}
  body.unified-print-ffm .scenario-grid{gap:.5rem!important;margin-bottom:.75rem!important}
  /* Footer always prints */
  body.unified-print-ffm #pdf-footer{display:flex!important}
  /* ── #60 readable standalone report ──────────────────────────────────────
     Fill the printable width (prevents the browser's print "shrink-to-fit" from
     scaling the whole report down → tiny), lift the dense font sizes, and tame
     the oversized screen titles so nothing prints tiny or mismatched. */
  body.unified-print-ffm .fm-module-root{width:100%!important;max-width:100%!important;overflow:visible!important}
  body.unified-print-ffm .fm-module-root table{width:100%!important;max-width:100%!important}
  body.unified-print-ffm .fm-module-root svg,
  body.unified-print-ffm .fm-module-root canvas,
  body.unified-print-ffm .fm-module-root img{max-width:100%!important;height:auto!important}
  body.unified-print-ffm .fm-module-root .card-title{font-size:16px!important}
  body.unified-print-ffm .fm-module-root .card-sub{font-size:12.5px!important;margin-bottom:.75rem!important}
  body.unified-print-ffm .fm-module-root .field label{font-size:12.5px!important}
  body.unified-print-ffm .fm-module-root .results-title{font-size:20px!important}
  body.unified-print-ffm .kpi-label,body.unified-print-ffm .kpi-sub{font-size:12px!important}
  body.unified-print-ffm .kpi-value{font-size:19px!important}
  body.unified-print-ffm .scenario-name{font-size:12px!important}
  body.unified-print-ffm .scenario-rev{font-size:19px!important}
  body.unified-print-ffm .scenario-profit{font-size:14px!important}
  body.unified-print-ffm .tornado-print th,body.unified-print-ffm .tornado-print td{font-size:13px!important;padding:7px 9px!important}
  body.unified-print-ffm .staff-cost-print th,body.unified-print-ffm .staff-cost-print td{font-size:12.5px!important}
  body.unified-print-ffm #scenario-stress-content>div>div:nth-child(1){font-size:12px!important}
  body.unified-print-ffm #scenario-stress-content>div>div:nth-child(2){font-size:19px!important}
  body.unified-print-ffm #scenario-stress-content>div>div:nth-child(3){font-size:12px!important}
  body.unified-print-ffm #be-rev,body.unified-print-ffm #be-receipts,body.unified-print-ffm #be-util{font-size:18px!important}
  body.unified-print-ffm #be-rev-eur{font-size:12px!important}
  /* expenses / capex / year tables: readable body text, full width */
  body.unified-print-ffm #expenses-breakdown-content,
  body.unified-print-ffm #capex-breakdown-content,
  body.unified-print-ffm .fm-module-root .results-table{font-size:12.5px!important}
  body.unified-print-ffm .fm-module-root .results-table th,
  body.unified-print-ffm .fm-module-root .results-table td{padding:6px 10px!important}
  /* let major sections flow instead of forcing a blank-padded new page each */
  body.unified-print-ffm #rpanel-investment,
  body.unified-print-ffm #rpanel-expenses,
  body.unified-print-ffm #rpanel-scenarios{page-break-before:auto!important}
  /* keep table rows whole across page breaks (fixes the Year-5 mid-row cut) and
     repeat table headers when a long table spans pages */
  body.unified-print-ffm .fm-module-root tr{break-inside:avoid!important;page-break-inside:avoid!important}
  body.unified-print-ffm .fm-module-root thead{display:table-header-group!important}
  /* Chrome ignores break-inside:avoid on <tr>, so gate the wrapping block for short
     summary tables → the whole table moves to the next page instead of clipping. */
  body.unified-print-ffm .fm-module-root .year-table{break-inside:avoid!important;page-break-inside:avoid!important}
  body.unified-print-ffm .fm-module-root .card-title,
  body.unified-print-ffm .fm-module-root .results-header{break-after:avoid!important}
}