/*! ==========================================================================
    JBM Tools — tool chrome shared by every PPC tool in the suite.
    Depends on jbm-core.css. Loaded after it.

    Sections
      01 Tool shell
      02 Input columns
      03 Results
      04 RAG meters / score arcs
      05 Verdict blocks
      06 File drop zone
      07 Data tables (interactive row state)
      08 Heatmap (day-parting style)
      09 Bar / waterfall charts (pure CSS + inline SVG)
      10 Misc tool widgets
    ========================================================================== */

/* ── 01 Tool shell ─────────────────────────────────────────────────────── */
.jbm-tool { padding-bottom: clamp(2rem, 5vw, 4rem); }
.jbm-tool__grid {
  display: grid; gap: clamp(1rem, 2.5vw, 1.75rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1000px) {
  .jbm-tool__grid--split { grid-template-columns: minmax(320px, 420px) minmax(0, 1fr); }
  .jbm-tool__grid--wide  { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.jbm-inputpanel {
  padding: clamp(1rem, 2.2vw, 1.4rem);
  background: var(--jbm-surface);
  border: 1px solid var(--jbm-line);
  border-top: 3px solid var(--jbm-red);
  border-radius: var(--jbm-radius-lg);
}
@media (min-width: 1000px) {
  .jbm-inputpanel--sticky { position: sticky; top: calc(var(--jbm-header-h) + 1rem); }
}
.jbm-inputpanel__head { margin-bottom: 1rem; }
.jbm-inputpanel__head h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.jbm-inputpanel__head p { margin: 0; font-size: .84rem; color: var(--jbm-muted); }

.jbm-modelnote {
  margin: 0 0 1rem; padding: .6rem .75rem;
  background: var(--jbm-info-tint);
  border-left: 3px solid var(--jbm-info);
  border-radius: 0 var(--jbm-radius-sm) var(--jbm-radius-sm) 0;
  font-size: .8rem; color: var(--jbm-ink-soft);
}
.jbm-modelnote > :last-child { margin-bottom: 0; }

/* ── 02 Input columns ──────────────────────────────────────────────────── */
.jbm-cols { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.jbm-cols--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.jbm-cols--tight { gap: .6rem; }

.jbm-slider { display: block; }
.jbm-slider__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  margin-bottom: .2rem;
}
.jbm-slider__top label { font-size: .84rem; font-weight: 800; color: var(--jbm-ink-soft); }
.jbm-slider__out {
  font-family: var(--jbm-font-data); font-variant-numeric: tabular-nums;
  font-size: .88rem; font-weight: 700; color: var(--jbm-red-ink);
}
.jbm-slider__scale {
  display: flex; justify-content: space-between;
  font-size: .7rem; color: var(--jbm-muted-2);
}

/* ── 03 Results ────────────────────────────────────────────────────────── */
.jbm-results { min-width: 0; }
.jbm-results[hidden] { display: none; }

.jbm-verdict {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
  border-radius: var(--jbm-radius);
  border: 1px solid var(--jbm-line);
  background: var(--jbm-surface-2);
  border-left: 5px solid var(--jbm-muted);
}
.jbm-verdict--good { border-left-color: var(--jbm-good); background: var(--jbm-good-tint); }
.jbm-verdict--warn { border-left-color: var(--jbm-warn); background: var(--jbm-warn-tint); }
.jbm-verdict--bad  { border-left-color: var(--jbm-bad);  background: var(--jbm-bad-tint); }
.jbm-verdict__icon { font-size: 1.5rem; line-height: 1.1; flex: none; }
.jbm-verdict__title { margin: 0 0 .2rem; font-size: 1.02rem; }
.jbm-verdict__body { margin: 0; font-size: .88rem; color: var(--jbm-ink-soft); }
.jbm-verdict__body strong { color: #fff; }

.jbm-block { margin-top: 1.25rem; }
.jbm-block__title {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 .7rem; padding-bottom: .5rem;
  border-bottom: var(--jbm-hair);
  font-size: .95rem;
}

.jbm-list { list-style: none; margin: 0; padding: 0; }
.jbm-list li {
  position: relative; padding: .5rem 0 .5rem 1.4rem;
  border-bottom: var(--jbm-hair); font-size: .9rem; color: var(--jbm-ink-soft);
}
.jbm-list li:last-child { border-bottom: 0; }
.jbm-list li::before {
  content: ""; position: absolute; left: .15rem; top: .95rem;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--jbm-red);
}
.jbm-list--check li::before {
  content: "\2713"; background: none; width: auto; height: auto; top: .5rem;
  color: var(--jbm-good); font-weight: 800; font-size: .85rem;
}
.jbm-list--warn li::before { background: var(--jbm-warn); }
.jbm-list--bad li::before { background: var(--jbm-bad); }

/* ── 04 RAG meters / score arcs ────────────────────────────────────────── */
.jbm-meter { display: block; margin-bottom: .7rem; }
.jbm-meter__top {
  display: flex; justify-content: space-between; gap: .6rem; align-items: baseline;
  font-size: .84rem; margin-bottom: .25rem;
}
.jbm-meter__top span:first-child { color: var(--jbm-ink-soft); font-weight: 700; }
.jbm-meter__val { font-family: var(--jbm-font-data); font-weight: 700; color: #fff; }
.jbm-meter__track {
  height: 9px; border-radius: 5px; background: var(--jbm-surface-3);
  border: 1px solid var(--jbm-line); overflow: hidden;
}
.jbm-meter__fill { height: 100%; border-radius: 4px; background: var(--jbm-muted); transition: width .3s ease; }
.jbm-meter--good .jbm-meter__fill { background: var(--jbm-good); }
.jbm-meter--warn .jbm-meter__fill { background: var(--jbm-warn); }
.jbm-meter--bad  .jbm-meter__fill { background: var(--jbm-bad); }
.jbm-meter__note { margin: .25rem 0 0; font-size: .76rem; color: var(--jbm-muted); }

.jbm-score {
  display: grid; place-items: center; gap: .2rem;
  padding: 1rem; text-align: center;
}
.jbm-score__num {
  font-family: var(--jbm-font-data); font-size: clamp(2.2rem, 1.6rem + 2.5vw, 3.2rem);
  font-weight: 700; line-height: 1; color: #fff;
}
.jbm-score__grade { font-size: .8rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.jbm-score--good .jbm-score__num, .jbm-score--good .jbm-score__grade { color: var(--jbm-good); }
.jbm-score--warn .jbm-score__num, .jbm-score--warn .jbm-score__grade { color: var(--jbm-warn); }
.jbm-score--bad  .jbm-score__num, .jbm-score--bad  .jbm-score__grade { color: var(--jbm-bad); }

/* ── 05 Verdict / formula blocks ───────────────────────────────────────── */
.jbm-formula {
  margin: .5rem 0 0; padding: .7rem .85rem;
  background: var(--jbm-bg-alt);
  border: 1px solid var(--jbm-line);
  border-radius: var(--jbm-radius-sm);
  font-family: var(--jbm-font-data); font-size: .82rem;
  color: var(--jbm-info); overflow-x: auto;
}

/* ── 06 File drop zone ─────────────────────────────────────────────────── */
.jbm-drop {
  position: relative;
  display: grid; place-items: center; gap: .35rem;
  min-height: 148px; padding: 1.25rem;
  background: var(--jbm-surface-2);
  border: 2px dashed var(--jbm-line-strong);
  border-radius: var(--jbm-radius);
  text-align: center; cursor: pointer;
  transition: border-color .14s ease, background-color .14s ease;
}
.jbm-drop:hover, .jbm-drop:focus-within { border-color: var(--jbm-red-ink); background: var(--jbm-surface-3); }
.jbm-drop[data-drag="true"] { border-color: var(--jbm-red-ink); background: var(--jbm-red-tint); }
.jbm-drop__icon { font-size: 1.75rem; line-height: 1; }
.jbm-drop__title { font-weight: 800; font-size: .95rem; }
.jbm-drop__hint { font-size: .78rem; color: var(--jbm-muted); }
.jbm-drop input[type="file"] {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer;
}
.jbm-drop__file { font-size: .8rem; color: var(--jbm-good); font-weight: 700; }

/* ── 07 Data tables (interactive row state) ────────────────────────────── */
.jbm-table tbody tr[data-state="flag"] td { background: var(--jbm-bad-tint); }
.jbm-table tbody tr[data-state="review"] td { background: var(--jbm-warn-tint); }
.jbm-table tbody tr[data-state="keep"] td { background: var(--jbm-good-tint); }
.jbm-table tbody tr[data-state="exclude"] td { opacity: .45; }
.jbm-table tbody tr[data-state="exclude"] td:first-child { box-shadow: inset 3px 0 0 var(--jbm-muted-2); }
.jbm-table tbody tr[data-selected="true"] td { box-shadow: inset 0 0 0 9999px rgba(200, 16, 46, .12); }
.jbm-rowtoggle {
  min-width: 34px; min-height: 34px; padding: 0 .5rem;
  background: var(--jbm-surface-3); color: var(--jbm-ink-soft);
  border: 1px solid var(--jbm-line); border-radius: 6px;
  font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer;
}
.jbm-rowtoggle[aria-pressed="true"] { background: var(--jbm-red); color: #fff; border-color: var(--jbm-red); }
.jbm-term { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.jbm-term mark { background: rgba(255, 107, 125, .28); color: #fff; padding: 0 .1em; border-radius: 3px; }
.jbm-sub { display: block; font-size: .78rem; color: var(--jbm-muted); font-weight: 400; }

/* pagination footer for long tables */
.jbm-tablefoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: .7rem .85rem;
  background: var(--jbm-surface-2);
  border-top: 1px solid var(--jbm-line);
  font-size: .82rem; color: var(--jbm-muted);
}
.jbm-tablefoot__btns { display: flex; gap: .4rem; }

/* ── 08 Heatmap ────────────────────────────────────────────────────────── */
.jbm-heat { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.jbm-heat__grid {
  display: grid;
  grid-template-columns: 46px repeat(24, minmax(30px, 1fr));
  gap: 2px; min-width: 720px;
}
.jbm-heat__h {
  font-size: .66rem; font-weight: 800; color: var(--jbm-muted);
  text-align: center; padding-bottom: .2rem;
}
.jbm-heat__rowlabel {
  display: flex; align-items: center;
  font-size: .7rem; font-weight: 800; color: var(--jbm-muted);
}
.jbm-heat__cell {
  position: relative;
  aspect-ratio: 1 / 1; min-height: 30px;
  border: 0; border-radius: 4px; padding: 0;
  background: var(--jbm-surface-3);
  color: #fff; font: inherit; font-size: .62rem; font-weight: 700;
  cursor: pointer; overflow: hidden;
}
.jbm-heat__cell[data-level="0"] { background: #1c2230; color: var(--jbm-muted-2); }
.jbm-heat__cell[data-level="1"] { background: #1e4d3a; }
.jbm-heat__cell[data-level="2"] { background: #2a7a55; }
.jbm-heat__cell[data-level="3"] { background: #7a2b39; }
.jbm-heat__cell[data-level="4"] { background: #b3202f; }
.jbm-heat__cell[aria-pressed="true"] { box-shadow: inset 0 0 0 2px #fff; }
.jbm-heat__cell:focus-visible { outline: 3px solid var(--jbm-red-ink); outline-offset: 1px; z-index: 2; }
.jbm-heat__tip {
  position: absolute; z-index: 30; left: 50%; bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: .4rem .6rem; white-space: nowrap; pointer-events: none;
  background: #000; color: #fff;
  border: 1px solid var(--jbm-line-strong); border-radius: 6px;
  font-size: .74rem; box-shadow: var(--jbm-shadow-lg);
}
.jbm-heat__tip[hidden] { display: none; }
.jbm-heat__legend { display: flex; align-items: center; gap: .4rem; font-size: .76rem; color: var(--jbm-muted); }
.jbm-heat__legend i { width: 20px; height: 10px; border-radius: 2px; display: block; }

/* ── 09 Charts (CSS bars + inline SVG) ─────────────────────────────────── */
.jbm-bars { display: grid; gap: .5rem; }
.jbm-bars__row { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: .6rem; align-items: center; font-size: .85rem; }
.jbm-bars__label { color: var(--jbm-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jbm-bars__track { height: 14px; border-radius: 4px; background: var(--jbm-surface-3); overflow: hidden; }
.jbm-bars__fill { height: 100%; border-radius: 4px; background: var(--jbm-red); transition: width .3s ease; }
.jbm-bars__val { font-family: var(--jbm-font-data); font-weight: 700; white-space: nowrap; }

.jbm-chart { width: 100%; height: auto; display: block; }
.jbm-chart text { fill: var(--jbm-muted); font-family: var(--jbm-font-body); font-size: 11px; }
.jbm-chart .axis { stroke: var(--jbm-line); stroke-width: 1; }
.jbm-chart .line-good { fill: none; stroke: var(--jbm-good); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.jbm-chart .line-warn { fill: none; stroke: var(--jbm-warn); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.jbm-chart .line-bad  { fill: none; stroke: var(--jbm-bad);  stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.jbm-chart .line-info { fill: none; stroke: var(--jbm-info); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.jbm-chart .dot { fill: var(--jbm-bg); stroke-width: 2; }
.jbm-chart .band { fill: rgba(200, 16, 46, .1); }

/* profit waterfall */
.jbm-flow { display: grid; gap: .3rem; }
.jbm-flow__row {
  display: grid; grid-template-columns: minmax(100px, 1fr) minmax(0, 3fr) auto;
  gap: .6rem; align-items: center;
  padding: .45rem 0; border-bottom: var(--jbm-hair); font-size: .86rem;
}
.jbm-flow__row:last-child { border-bottom: 0; }
.jbm-flow__track { position: relative; height: 18px; }
.jbm-flow__bar { position: absolute; top: 2px; height: 14px; border-radius: 3px; }
.jbm-flow__bar--pos { background: var(--jbm-good); }
.jbm-flow__bar--neg { background: var(--jbm-bad); }
.jbm-flow__bar--zero { background: var(--jbm-muted-2); }
.jbm-flow__val { font-family: var(--jbm-font-data); font-weight: 700; white-space: nowrap; }

/* ── 10 Misc tool widgets ──────────────────────────────────────────────── */
.jbm-filelist { list-style: none; margin: .6rem 0 0; padding: 0; font-size: .82rem; }
.jbm-filelist li {
  display: flex; align-items: center; gap: .5rem;
  padding: .3rem 0; border-bottom: 1px dashed var(--jbm-line); color: var(--jbm-muted);
}
.jbm-filelist li:last-child { border-bottom: 0; }

.jbm-kv { display: grid; grid-template-columns: auto 1fr; gap: .35rem .9rem; font-size: .87rem; margin: 0; }
.jbm-kv dt { color: var(--jbm-muted); font-weight: 700; }
.jbm-kv dd { margin: 0; font-family: var(--jbm-font-data); color: #fff; overflow-wrap: anywhere; }

.jbm-empty {
  padding: 2rem 1rem; text-align: center;
  color: var(--jbm-muted); font-size: .9rem;
  border: 1px dashed var(--jbm-line-strong); border-radius: var(--jbm-radius);
}
.jbm-empty strong { display: block; color: var(--jbm-ink-soft); font-size: 1rem; margin-bottom: .3rem; }

.jbm-clientcard {
  padding: .85rem .95rem; margin-bottom: .6rem;
  background: var(--jbm-surface-2);
  border: 1px solid var(--jbm-line);
  border-left: 4px solid var(--jbm-muted);
  border-radius: var(--jbm-radius-sm);
}
.jbm-clientcard--good { border-left-color: var(--jbm-good); }
.jbm-clientcard--warn { border-left-color: var(--jbm-warn); }
.jbm-clientcard--bad { border-left-color: var(--jbm-bad); }
.jbm-clientcard__head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.jbm-clientcard__name { font-weight: 800; color: #fff; overflow-wrap: anywhere; }
.jbm-clientcard__grid {
  display: grid; gap: .3rem .9rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  font-size: .8rem;
}
.jbm-clientcard__grid b { display: block; color: var(--jbm-muted); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 800; }
.jbm-clientcard__grid span { font-family: var(--jbm-font-data); color: var(--jbm-ink); }

@media print {
  .jbm-drop, .jbm-tablefoot, .jbm-rowtoggle, .jbm-no-print { display: none !important; }
  .jbm-heat__grid { min-width: 0; }
  .jbm-results[hidden] { display: block !important; }
}