/* Index Forecast Lab - the evaluation screens (Accuracy, Backtest, Inside the model: ifl_views_eval.py).
   Loaded globally by Dash from /assets: every rule is scoped under .ifl-app .ifl-ev*. The page's own rules
   (cards, kpis, tables, pills) are in ifl_style.css; the tokens are the same: accent #f0a030, good #3fbf7f,
   bad #e66767, muted #9fb3c8, headings #cfefff. */

/* verdict chips: an icon and a word, never colour alone */
.ifl-app .ifl-ev-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .62rem; border: 1px solid;
                         border-radius: 8px; padding: 0 7px; line-height: 1.65; white-space: nowrap; margin-top: 2px; }
.ifl-app .ifl-ev-badge i { font-size: .6rem; }
.ifl-app .ifl-ev-badge.yes { border-color: rgba(63,191,127,0.6); color: #bfe8c4; background: rgba(63,191,127,0.09); }
.ifl-app .ifl-ev-badge.no { border-color: rgba(230,103,103,0.5); color: #ffd0cb; background: rgba(230,103,103,0.07); }
.ifl-app .ifl-ev-badge.na { border-color: rgba(255,255,255,0.15); color: #9fb3c8; }

/* the scorecard: a value, a small line, a chip per cell */
.ifl-app .ifl-ev-score td { vertical-align: top; padding-top: 6px; padding-bottom: 6px; }
.ifl-app .ifl-ev-cell { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ifl-app .ifl-ev-sub { color: #7f93a6; font-size: .64rem; white-space: nowrap; }
.ifl-app .ifl-ev-hn { color: #cfefff; font-weight: 600; }

/* the verdict sentence */
.ifl-app .ifl-ev-verdict { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 9px 12px;
                           border: 1px solid rgba(240,160,48,0.45); border-left: 4px solid #f0a030; border-radius: 10px;
                           background: rgba(240,160,48,0.07); color: #f3f6f9; font-size: .84rem; line-height: 1.55; }
.ifl-app .ifl-ev-verdict i { color: #f0a030; margin-top: 4px; flex: 0 0 auto; }

/* the horizon selector between the scorecard and the detail */
.ifl-app .ifl-ev-hsel { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 4px 0 10px; padding: 7px 10px;
                        background: rgba(255,255,255,0.04); border-radius: 10px; }
.ifl-app .ifl-ev-hsel .ifl-k { margin: 0; }

/* the signal: words, formula, controls */
.ifl-app .ifl-ev-words { color: #e8f0f7; font-size: .84rem; line-height: 1.55; margin: 2px 0 8px; }
.ifl-app .ifl-ev-formula { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: rgba(255,255,255,0.05);
                           border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 8px 12px; color: #f5d6a3;
                           font-size: .8rem; white-space: pre-wrap; overflow-x: auto; }
.ifl-app .ifl-ev-ctl { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; margin: 10px 0 2px; padding: 8px 10px;
                       background: rgba(255,255,255,0.04); border-radius: 10px; }
.ifl-app .ifl-ev-ctl-in { margin: 0 0 10px; }
.ifl-app .ifl-ev-ctl-g { min-width: 0; }
.ifl-app .ifl-ev-ctl .ifl-k { margin-bottom: 3px; }
.ifl-app .ifl-ev-go { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.ifl-app .ifl-ev-run { font-weight: 600; padding: 5px 14px; }
.ifl-app .ifl-ev-run i { color: #f0a030; }
.ifl-app .ifl-ev-msg { font-size: .74rem; }
.ifl-app .ifl-ev-msg .ifl-ev-cost { display: block; margin-top: 2px; color: #ffe3a3; }
.ifl-app .ifl-ev-msg .ifl-ev-cost i { color: #f0a030; }
.ifl-app .ifl-ev-num { width: 84px; height: 28px; background: rgba(0,0,0,0.45); color: #e8e8e8; border: 1px solid rgba(255,255,255,0.15);
                       border-radius: 8px; padding: 0 8px; font-size: .8rem; }
.ifl-app .ifl-ev-dd { min-width: 280px; }
.ifl-app .ifl-ev-one { max-width: 360px; margin-bottom: 6px; }

/* interpretability: the two lines of every panel, the run card */
.ifl-app .ifl-ev-read { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.06); color: #b9c7d5;
                        font-size: .72rem; line-height: 1.5; }
.ifl-app .ifl-ev-read b { color: #cfefff; font-weight: 600; }
.ifl-app .ifl-ev-ref { color: #7f93a6; font-style: italic; margin-top: 2px; }
.ifl-app .ifl-ev-runrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.ifl-app .ifl-ev-state { display: flex; flex-direction: column; gap: 2px; font-size: .74rem; }
.ifl-app .ifl-wait.ifl-ev-small { padding: 18px 10px; font-size: .78rem; }

/* Accuracy: compare with another study (the dropdown, who is who, the two tables) */
.ifl-app .ifl-cmp-pick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 8px; }
.ifl-app .ifl-cmp-pick .ifl-k { margin: 0; }
.ifl-app .ifl-cmp-dd { flex: 1 1 420px; min-width: 260px; max-width: 760px; }
.ifl-app .ifl-cmp-who { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 8px; color: #b9c7d5; font-size: .76rem; }
.ifl-app .ifl-cmp-who b { color: #cfefff; font-weight: 600; }
.ifl-app .ifl-cmp-show { margin-left: 10px; padding: 1px 9px; font-size: .7rem; }
.ifl-app .ifl-cmp-show i { color: #f0a030; }
.ifl-app .ifl-cmp-bt-h { margin: 12px 0 4px; color: #cfefff; font-size: .78rem; }
.ifl-app .ifl-cmp-table th, .ifl-app .ifl-cmp-bt th { white-space: normal; }

@media (max-width: 640px) {
  .ifl-app .ifl-ev-go { margin-left: 0; }
  .ifl-app .ifl-ev-dd { min-width: 0; width: 100%; }
  .ifl-app .ifl-cmp-dd { min-width: 0; width: 100%; flex-basis: 100%; }
}