/* ═══════════════════════════════════════════════════════════════════════════
   Resultatbron · vyn Händelser i Prognosverktyget (2026-10-05)
   Hör till resultatbron.js. Bara färgtoken ur shared/kosa-design.css, så att
   vyn följer Sand, Vitt, Mörkt, KOSA och Glas (ljust och mörkt) utan egna
   färger. Korten återanvänder sidans .tbl-card, som Glas redan klär om.
   Storlekar och radier håller sig till skalan i DESIGN.md.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Fliken och noten vid Helårsprognos resultat */
.tab-btn.tab-handelser{color:var(--blue)}
.tab-btn.tab-handelser.active{color:var(--gold)}
.rb-not-plats{margin-top:4px}
.rb-not{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-size:11px;font-weight:600;color:var(--muted);text-align:left;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.rb-not:hover{color:var(--text)}
.rb-not-varn{color:var(--amber)}
.rb-not:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* En sparning som servern avvisade (visaSparFel i prognosverktyg.html), bredvid "✓ Sparat" */
.save-fel{font-size:11px;font-weight:600;color:var(--neg)}

/* Glas: i Översikt visas bara översikten */
html[data-eko-vy="oversikt"] #viewHandelser{display:none !important}

/* ── Vyn ── */
.rb{container-type:inline-size;display:flex;flex-direction:column;gap:18px;width:100%;max-width:1040px;margin:0 auto;padding:18px 0 8px;color:var(--text);font-size:13px;line-height:1.5}
.rb-num{font-family:'SF Mono',Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Tusentalsmellanrummet är en hel teckenbredd i fast teckenbredd: dra ihop det. Glas har sitt eget typsnitt. */
html:not([data-glas]) .rb-num{word-spacing:-.3em}
.rb-nb{white-space:nowrap}
.rb-neg,.rb-neg-t{color:var(--neg)}
.rb-pos,.rb-pos-t{color:var(--pos)}
.rb-dimtext{color:var(--muted);font-size:12px}
.rb-topp{display:flex;flex-direction:column;gap:4px}
.rb-h1{margin:0;font-size:18px;font-weight:700;line-height:1.2;color:var(--text)}
.rb-h2{margin:0;font-size:15px;font-weight:700;line-height:1.2;color:var(--text)}
.rb-lede{margin:0;max-width:70ch;color:var(--muted)}
.rb-hint{margin:0;max-width:70ch;color:var(--muted);font-size:12px}
.rb-status{margin:0;padding:8px 12px;border-radius:8px;background:var(--pos-bg);color:var(--text);font-weight:600}
.rb-status-fel{background:var(--neg-bg)}

/* Kort: sidans .tbl-card med jämna hörn */
.tbl-card.rb-kort{border-radius:12px;margin-bottom:0}

/* Chips och knappar */
.rb-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.rb-chip{min-height:32px;padding:5px 13px;border-radius:999px;border:1px solid var(--border-strong);background:var(--card);color:var(--text);font:inherit;font-size:13px;font-weight:500;line-height:1.2;cursor:pointer;transition:border-color .15s,background .15s}
.rb-chip:hover{border-color:var(--text)}
.rb-chip[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--card);font-weight:600}
.rb-chip-vaxel{margin-left:auto}
.rb-btn{min-height:32px;padding:5px 12px;border-radius:8px;border:1px solid var(--border-strong);background:var(--card);color:var(--text);font:inherit;font-size:13px;font-weight:500;line-height:1.2;cursor:pointer;transition:border-color .15s}
.rb-btn:hover{border-color:var(--text)}
.rb-btn[disabled]{opacity:.55;cursor:default}
.rb-btn.rb-prim{background:var(--text);border-color:var(--text);color:var(--card);font-weight:600}
.rb-chip:focus-visible,.rb-btn:focus-visible,.rb-datum input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rb-uppd{margin-left:auto}
.rb-datum{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.rb-datum input{min-height:32px;padding:4px 8px;border-radius:8px;border:1px solid var(--border-strong);background:var(--card);color:var(--text);font:inherit;font-size:13px}

/* Besked */
.rb-besked{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:8px;border:1px solid var(--border);background:var(--card2);color:var(--text)}
.rb-besked > span{flex:1 1 260px;min-width:0}
.rb-besked-varn{background:var(--amber-bg);border-color:var(--border-strong)}

/* Sammanfattningen */
.rb-hero{padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.rb-hero-rad{display:flex;flex-wrap:wrap;gap:12px 40px;align-items:flex-end}
.rb-kpi-l{font-size:12px;color:var(--muted)}
.rb-kpi-v{font-size:26px;font-weight:700;line-height:1.15;color:var(--text)}
.rb-kpi-v.rb-neg{color:var(--neg)}
.rb-kpi-v.rb-pos{color:var(--pos)}
.rb-kpi-v small{margin-left:6px;font-size:13px;font-weight:600;color:var(--muted)}
.rb-delta .rb-kpi-v{font-size:22px}
.rb-split{display:flex;height:10px;border-radius:6px;overflow:hidden;background:var(--card2)}
.rb-split i{display:block;height:100%}
.rb-s-man{background:var(--gold)}
.rb-s-bok{background:var(--blue)}
.rb-s-skifte{background:var(--muted2)}
.rb-legend{display:flex;flex-wrap:wrap;gap:6px 24px}
.rb-legend span{display:inline-flex;align-items:center;gap:8px}
.rb-dot{width:10px;height:10px;border-radius:2px;flex:none}

/* Raderna */
.rb-bro{display:flex;flex-direction:column;gap:12px}
.rb-lista{list-style:none;margin:0;padding:0}
.rb-lista > li + li{border-top:1px solid var(--border)}
.rb-kol,.rb-ev,.rb-ankare{display:grid;grid-template-columns:52px minmax(0,1fr) 140px 104px 116px;gap:4px 14px;align-items:center;padding:10px 16px}
.rb-kol{padding-block:8px;background:var(--card2);color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.rb-kol .rb-d,.rb-kol .rb-r{text-align:right}
.rb-ankare{background:var(--card2)}
.rb-ankare .rb-w{grid-column:1 / 5;font-weight:600}
.rb-ankare .rb-w span{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.rb-ankare .rb-r{text-align:right;font-size:15px;font-weight:700;color:var(--text)}
.rb-dag{padding:6px 16px;background:var(--card2);color:var(--muted);font-size:11px;font-weight:600}
.rb-tom{margin:0;padding:18px 16px;color:var(--muted)}
.rb-ev{position:relative}
.rb-ev:hover{background:var(--gold-dim)}
.rb-t{font-size:13px;font-weight:600}
.rb-w{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
/* Rubriken är knappen. Dess ::after täcker hela raden, så att hela raden går att trycka på. */
.rb-rub{appearance:none;background:none;border:0;padding:0;margin:0;font:inherit;font-weight:600;color:var(--text);text-align:left;cursor:pointer;overflow-wrap:anywhere}
.rb-rub::after{content:"";position:absolute;inset:0}
.rb-rub:focus-visible{outline:none}
.rb-rub:focus-visible::after{outline:2px solid var(--gold);outline-offset:-2px}
.rb-txt{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.rb-kind{padding:1px 8px;border-radius:999px;font-size:10.5px;font-weight:600}
.rb-k-man{background:var(--gold-dim);color:var(--text2)}
.rb-k-bok{background:var(--blue-bg);color:var(--blue)}
.rb-k-skifte{background:var(--card2);color:var(--muted)}
.rb-bar{position:relative;height:12px;border-radius:2px;background:var(--card2)}
.rb-bar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--border-strong)}
.rb-bar i{position:absolute;top:0;bottom:0;border-radius:2px}
.rb-bar i.rb-neg{background:var(--neg)}
.rb-bar i.rb-pos{background:var(--pos)}
.rb-d{text-align:right;font-weight:600}
.rb-r{text-align:right;color:var(--muted)}
li.rb-dim .rb-bar i{background:var(--border-strong)}
li.rb-dim .rb-d{color:var(--muted);font-weight:400}
li.rb-dim .rb-rub{font-weight:400}

/* Det som ligger bakom en rad */
.rb-mer{display:flex;flex-direction:column;gap:10px;padding:2px 16px 14px 82px}
.rb-mer p{margin:0;max-width:70ch}
.rb-why{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--amber-bg)}
.rb-why b{color:var(--amber)}
.rb-vem{color:var(--muted);font-size:12px}
.rb-tab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 18px;max-width:440px}
.rb-tab > span:nth-child(even){text-align:right}
.rb-tab > span:nth-child(odd){overflow-wrap:anywhere}
.rb-andr{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:10px}
.rb-andr li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 92px minmax(96px,auto);gap:4px 14px;align-items:center;padding:8px 12px}
.rb-andr li + li{border-top:1px solid var(--border)}
.rb-a-namn{font-weight:600;overflow-wrap:anywhere}
.rb-a-txt{white-space:normal;overflow-wrap:anywhere;color:var(--muted)}
.rb-a-eff{text-align:right;font-weight:600}
.rb-a-knapp{display:flex;justify-content:flex-end}
.rb-bekr{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border-radius:10px;border:1px solid var(--border-strong);background:var(--card2)}
.rb-bekr-knappar{display:flex;flex-wrap:wrap;gap:8px}
.rb-andr li:has(.rb-bekr) .rb-a-knapp{grid-column:1 / -1;justify-content:flex-start}

/* Varningen i månadstabellen: försäljningen ändrad, inköpet är ett fast värde */
tr.rb-varn-rad > td{padding:0 !important;white-space:normal;text-align:left}
.rb-varn{position:sticky;left:9px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;box-sizing:border-box;width:max-content;max-width:min(720px,calc(100vw - 48px));margin:6px 9px;padding:10px 12px;border-radius:8px;border:1px solid var(--border-strong);background:var(--amber-bg);color:var(--text);font-size:13px;line-height:1.45}
.rb-varn-txt{flex:1 1 280px;min-width:0}
.rb-varn-knappar{display:flex;flex-wrap:wrap;gap:8px}

/* Smal yta: kolumnerna staplas, inget rullar i sidled */
@container (max-width:640px){
  .rb-kol{display:none}
  .rb-ev,.rb-ankare{grid-template-columns:44px minmax(0,1fr) auto;padding:10px 12px}
  .rb-ev .rb-t{grid-row:1 / 3;align-self:start}
  .rb-ev .rb-w{grid-column:2 / 4}
  .rb-ev .rb-bar{grid-column:2}
  .rb-ev .rb-d{grid-column:3}
  .rb-ev .rb-r{grid-column:2 / 4;font-size:12px}
  .rb-ev .rb-r::before{content:"Resultat efter: ";font-family:var(--font-body,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif);word-spacing:normal}
  .rb-ankare .rb-w{grid-column:1 / 3}
  .rb-ankare .rb-r{grid-column:3}
  .rb-dag{padding-inline:12px}
  .rb-mer{padding:2px 12px 12px}
  .rb-hero{padding:14px}
  .rb-kpi-v{font-size:22px}
  .rb-delta .rb-kpi-v{font-size:18px}
  .rb-chip,.rb-btn,.rb-datum input{min-height:40px}
  .rb-chip-vaxel,.rb-uppd{margin-left:0}
  .rb-andr li{grid-template-columns:minmax(0,1fr) auto}
  .rb-a-txt{grid-column:1 / -1;grid-row:2}
  .rb-a-knapp{grid-column:1 / -1;justify-content:flex-start}
}
@media (prefers-reduced-motion: reduce){.rb-chip,.rb-btn{transition:none}}