/* F50  Cash projection for each Euroform program (batch 3).
   Colours come from the console's own tokens, so the light theme follows. The
   chart is SVG with classes (the CSP forbids style attributes): in is the info
   blue, out is the warn orange, a running total below zero is crit red. */

.f50-tabs{margin:0 0 16px}
.f50-tabs .f50-wait{font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7;margin-left:3px}

.f50-head{margin:0 0 14px}
.f50-title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.f50-place{display:block;font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0;margin-top:3px}
.f50-sum{margin:8px 0 6px;font-size:14px;line-height:1.55;color:var(--ink-2);max-width:820px}
.f50-meta{margin:0 0 10px;font-size:11.5px;color:var(--ink-3)}
.f50-acts{display:flex;flex-wrap:wrap;gap:8px}

.f50-kpis{margin:0 0 14px}
.f50-chart,.f50-months,.f50-rules,.f50-lots,.f50-progs{margin:0 0 14px}

.f50-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:11px;color:var(--ink-3);margin:-4px 0 8px}
.f50-k{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:-8px;vertical-align:-1px}
.f50-k.in{background:var(--info)}
.f50-k.out{background:var(--warn)}
.f50-k.run{height:2px;width:14px;background:var(--ink);border-radius:1px;vertical-align:3px}
.f50-svg{display:block;max-width:100%;height:auto}
.f50-in{fill:var(--info)}
.f50-out{fill:var(--warn)}
.f50-run{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.f50-dot{fill:var(--ink)}
.f50-dot.neg{fill:var(--crit)}
.f50-grid{stroke:var(--line);stroke-width:1}
.f50-zero{stroke:var(--ink-3);stroke-width:1}
.f50-ax{fill:var(--ink-3);font-size:11px;font-family:var(--sans)}

td.f50-neg{color:var(--crit)}
td.f50-pos{color:var(--good)}
.f50-months td small{display:inline;margin:0 0 0 4px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
tr.f50-total td{font-weight:700;border-top:1px solid var(--line);background:var(--panel-2)}
.f50-lots td .pill{white-space:nowrap}

.f50-rules ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px;font-size:13px;line-height:1.55;color:var(--ink-2)}
.f50-rules b{color:var(--ink)}
.f50-h4{margin:14px 0 6px;font-size:12px;font-weight:700;color:var(--warn);letter-spacing:.02em}
.f50-flags{margin:0;padding-left:18px;font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.f50-flags li{margin:3px 0}

.f50-dim{font-size:12px;color:var(--ink-3);line-height:1.5}
.f50-who{font-size:11px;color:var(--ink-3);margin:0}
.f50-link{background:none;border:0;padding:0;font:inherit;color:var(--lime);cursor:pointer;text-decoration:underline}
.f50-prev{display:flex;flex-direction:column;gap:8px}
.f50-linelist{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
.f50-line{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);font-size:12.5px;line-height:1.5}

/* The job drawer line and the Money line. */
.f50-job{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);font-size:12.5px}
.f50-job-k{font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.f50-job-v{flex:1;min-width:160px}
.f50-job-pick{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.f50-job select{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:5px;padding:5px 8px;font:inherit;font-size:12px;max-width:100%}
.f50-money{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--info);border-radius:var(--r);background:var(--panel);font-size:13px;color:var(--ink-2)}

@media (max-width:700px){
  .f50-title{font-size:19px}
  .f50-sum{font-size:13.5px}
  /* Two buttons a row and two cards a row: six full-width buttons and six
     full-width cards pushed the chart three screens down on a phone. */
  .btnrow.f50-acts{flex-direction:row;flex-wrap:wrap}
  .btnrow.f50-acts .btn{flex:1 1 calc(50% - 4px);width:auto;min-width:0;min-height:44px}
  .f50-kpis{grid-template-columns:1fr 1fr;gap:10px}
  .f50-kpis .kpi{padding:12px 13px}
  .f50-kpis .kpi .v{font-size:21px}
  .f50-kpis .kpi .n{font-size:11px}
  .f50-tabs{display:flex;max-width:100%}
  .f50-tabs button{flex:1 1 auto}
}