/* Reduceraren – kupongöversikt, färgpanel och reduceringsresultat.

 * Hela systemet på en skärm, färgmarkeringar och spann-inställningar, samt
 * det som ritas efter en körd reducering (kedjan, diagram, tooltips).
 */

/* --- Kupongöversikt: hela systemet på en skärm --------------------------- */

.overview {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.7rem 0.3rem;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background 0.15s;
}

/* Subtil produktfärgad bakgrund på hela Kupongöversikt-raden – utöver
   brickan (.current-product-badge) intill rubriken, så det syns supertydligt
   vilken produkt (Stryktipset/Europatipset/Topptipset) kupongen gäller redan
   innan man läser texten (efterfrågat 2026-08-20). Ljus tint av samma
   temafärg som brickans mörka gradient, inte samma mörka gradient själv –
   annars blir vit text/brickan svår att läsa mot en lika mörk bakgrund. */
.overview-header.product-stryk {
  background: rgba(44, 84, 144, 0.14);
}

.overview-header.product-europa {
  background: rgba(31, 138, 87, 0.14);
}

.overview-header.product-topp {
  background: rgba(207, 148, 31, 0.18);
}

.overview-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.overview-title {
  margin: 0;
  font-size: 0.95rem;
}

.overview-color-toggle {
  font-size: 0.78rem;
}

.overview-list {
  padding: 0.4rem;
}

.overview-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.18rem 0.3rem;
  border-radius: 4px;
  /* Utan denna hint målar Chromium ibland inte om overview-name-texten när
     raden byggs om (döljs helt tills man markerar text/scrollar, vilket
     tvingar fram en repaint) – transform: translateZ(0) knuffar raden till
     ett eget GPU-lager så den alltid målas direkt (rapporterat 2026-08-20). */
  transform: translateZ(0);
}

.overview-row:nth-child(even) {
  background: #fafaf8;
}

.overview-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 4px;
  background: linear-gradient(155deg, #34925e, var(--green-700));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.overview-name {
  flex: 1;
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overview-signs {
  display: flex;
  gap: 0.15rem;
  flex-shrink: 0;
}

.overview-sign {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  background: #e4e4e1;
  color: #9a9da3;
  font-size: 0.75rem;
  font-weight: 700;
  overflow: hidden;
  transition: background 0.15s, color 0.15s;
}

.overview-sign.picked {
  /* --value-color sätts per tecken i JS (renderOverview) utifrån spelvärdet,
     med blått som reservfärg om inget spelvärde finns. Samma variabel
     återanvänds av fill-stapeln nedan så basfärg och stapel alltid matchar. */
  background: var(--value-color, linear-gradient(155deg, var(--blue-500), var(--blue-700)));
  color: #fff;
}

/* Ram runt tecken som skiljer sig mot din senast sparade version (se
   ownManualSignsDiff/showOwnSaveNotice) – bara synlig tillsammans med
   own-save-bannern. Outline i stället för border, så cellens storlek/
   packning i raden inte påverkas. */
.overview-sign-diff-added {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  /* z-index av samma skal som .overview-sign-current nedan: outline-offset
     ritar ramen utanfor rutan, dar granntecknets bakgrund annars malas over
     den eftersom syskon utan z-index malas i DOM-ordning. */
  z-index: 2;
}

.overview-sign-diff-removed {
  outline: 2px solid var(--red-500);
  outline-offset: 1px;
  z-index: 2;
}

/* Grön ram runt det tecken som leder/vunnit just nu i Live-rättningens
   kupongöversikt (se currentSignFor i renderLiveScoreboard). Outline i
   stället för border av samma skäl som diff-ramarna ovan: den ritas utanför
   rutan och påverkar därför varken cellens storlek eller packningen i raden.
   box-shadow ovanpå ger en svag glöd så ramen syns även mot en mörk fylld
   stapel, där enbart en tunn grön linje försvinner. */
.overview-sign-current {
  outline: 2px solid var(--green-500);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(31, 157, 92, 0.2);
  /* Ringen ritas UTANFOR rutan (outline-offset + box-shadow) medan
     tecknen 1/X/2 ligger som syskon i en flexrad med bara 0.15rem gap.
     Utan z-index malas de i DOM-ordning, sa ringen kring t.ex. 1 hamnade
     under bakgrunden pa X bredvid och sag avklippt ut pa hogersidan
     (David 2026-08-24). Egen stackningskontext lyfter hela cellen inkl.
     ringen over grannarna. Position ar redan relative pa .overview-sign. */
  z-index: 2;
}

/* Samma ring, men röd: det ledande tecknet finns INTE på din bästa rad, alltså
   ligger den raden fel på just den matchen just nu (se bestRowSignFor i
   renderLiveScoreboard). Ringen sitter kvar på facit/ledningen – bara färgen
   skiljer – så blicken kan svepa över kolumnen och läsa grönt/rött som
   "hur många rätt har min bästa rad". Måste komma EFTER .overview-sign-current
   i filen för att vinna: båda är enkla klasser med samma specificitet, så det
   är källordningen som avgör. */
.overview-sign-current-miss {
  outline-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.2);
}

/* Efter en körd reducering (updateOverviewSignFills) ersätts den statiska
   picked/grå-bakgrunden av en liggande mini-stapel: fill-spannet fylls
   botten-uppåt proportionerligt mot andelen valda rader som har tecknet –
   100 % helt blå, 50 % halvfylld, 0 % osynlig (grå bas syns igenom). Högre
   specificitet än .overview-sign.picked (två klasser mot en) så den alltid
   vinner över den statiska bakgrunden när den är aktiv. */
.overview-sign.picked.has-fill {
  background: #e4e4e1;
}

.overview-sign-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  background: var(--value-color, linear-gradient(155deg, var(--blue-500), var(--blue-700)));
  transition: height 0.4s var(--ease-out);
}

.overview-sign-label {
  position: relative;
  z-index: 1;
}

/* Fyllnaden kan vara hög (mörkblå bakom texten) eller låg (ljusgrå bakom
   texten) beroende på andelen – en fast textfärg skulle bli oläslig mot
   endera. Vit text med mörk skugga läses mot båda utan att behöva räkna ut
   exakt var brytpunkten mellan bakgrunderna hamnar. */
.overview-sign.has-fill .overview-sign-label {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.55);
}

.overview-summary {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.5rem 0.8rem;
  background: linear-gradient(160deg, var(--navy-900), var(--navy-950));
  color: #e8e8e6;
  font-size: 0.85rem;
}

.overview-summary b {
  font-weight: 400;
  color: #9aa8bd;
  margin-right: 0.3rem;
}

.overview-summary .cost {
  margin-left: auto;
  background: linear-gradient(155deg, var(--blue-500), var(--blue-700));
  padding: 0.25rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
}

/* "Flest rätt just nu" längst till höger på Reducerat-raden (Live-rättning).
   Egen margin-left:auto i stället för att förlita sig på .cost: kostnaden
   saknas efter spelstopp (rowPrice finns bara i Svenska Spels data), och då
   skulle talet annars klistra sig intill "Reducerat" mitt på raden. Med auto
   på båda hamnar kostnaden först till höger och det här sist, medan det här
   ensamt åker hela vägen ut när kostnaden saknas. */
.overview-summary .overview-best {
  margin-left: auto;
  white-space: nowrap;
}

/* Lappens namn efter produktbrickan i kupongöversiktens rubrik. Normalvikt
   och dämpad färg så det läses som en underrubrik – "Kupongöversikt" och
   produktbrickan ska fortsätta vara det ögat tar först. */
.overview-lapp-name {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.overview-summary .pending {
  color: var(--gold-400);
}

.overview-limits {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.overview-reduced {
  font-weight: 600;
  margin-right: auto;
}

.overview-limit {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-variant-numeric: tabular-nums;
}

.match-details > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
  font-weight: 600;
}

/* --- Färgpanel ------------------------------------------------------------ */

#reduce-panel {
  background: var(--paper-raised);
  border: 1px solid var(--paper-line);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-sm);
}

#reduce-panel h2 {
  margin: 0 0 0.7rem;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

/* Antal rader/Reducera, odds-spann och spelvärdesspann ligger på var sin rad
   – varje rad är ett eget villkor, så de ska läsas som tre skilda beslut i
   stället för att flyta ihop i en enda rad med blandade etiketter. */
#reduce-panel > .controls {
  margin-bottom: 0.6rem;
}

#reduce-panel > .controls:last-of-type {
  margin-bottom: 0.8rem;
}

/* Antal rader/Reducera, odds-spann och spelvärdesspann i ett gemensamt
   grid-rutnät: samma etikettkolumn-bredd på alla tre raderna, så "Antal
   rader", "Total-odds mellan" och "Totalt spelvärde mellan" radar upp sig
   rakt i stället för att flyta olika långt beroende på textlängd. */
.reduce-field-row {
  display: grid;
  grid-template-columns: 11.5rem max-content max-content max-content max-content 1fr;
  align-items: center;
  column-gap: 0.6rem;
  flex-wrap: nowrap;
}

/* Återställningspilen ligger alltid i samma kolumn på alla tre raderna, så
   de tre ⟳-knapparna radar upp sig rakt under varandra. Odds-/spelvärdes-
   raderna fyller kolumn 2–4 (fält, "och", fält) medan "Antal rader" bara
   fyller kolumn 2 – utan explicit placering skulle den översta pilen hamna
   i kolumn 3 och hänga ensam till vänster om de andra två. */
.reduce-field-row .field-reset {
  grid-column: 5;
}

/* .controls button (ovan) ger annars en blå knappbox med skugga – för
   diskret för att inte konkurrera med de riktiga knapparna, bara en liten
   återställningspil bredvid fälten. */
.controls button.field-reset {
  background: none !important;
  border: none !important;
  border-radius: var(--radius-sm);
  color: #8a8880;
  font-size: 1rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  cursor: pointer;
  box-shadow: none !important;
  transition: color 0.15s;
}

.controls button.field-reset:hover {
  color: var(--blue-500);
  transform: none;
  box-shadow: none !important;
}

.field-reset:focus-visible {
  outline: 2px solid var(--blue-500);
  outline-offset: 1px;
}

.reduce-field-label {
  font-weight: 600;
  color: var(--ink);
}

.reduce-field-and {
  justify-self: start;
}

@media (max-width: 560px) {
  .reduce-field-row {
    grid-template-columns: 1fr;
    row-gap: 0.4rem;
  }

  /* En kolumn på mobil – pilen får inte tvingas till kolumn 5 (som inte
     finns här) och läggs i stället bredvid sitt fält, högerställd. */
  .reduce-field-row .field-reset {
    grid-column: 1;
    justify-self: end;
    margin-top: -0.2rem;
  }

  .reduce-field-and {
    display: none;
  }

  #target-rows,
  #odds-min,
  #odds-max,
  #value-min,
  #value-max {
    width: 100%;
  }

  #reduce-button {
    width: 100%;
  }
}

#reduce-panel > details {
  border-top: 1px solid #eeeeeb;
  padding-top: 0.5rem;
  margin-top: 0.5rem;
}

#reduce-panel > details > summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-weight: 600;
}

#color-panel {
  padding: 0;
  margin-bottom: 0;
}

#color-picker {
  display: flex;
  gap: 0.3rem;
}

#color-limits {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0.5rem 0 0.8rem;
}

#color-limits th {
  text-align: left;
  font-weight: 500;
  color: var(--ink-soft);
  font-size: 0.75rem;
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid #e8e8e5;
}

#color-limits td {
  padding: 0.25rem 0.4rem;
  border-bottom: 1px solid #f2f2ef;
}

.swatch-dot {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 0.3rem;
}

.color-count {
  color: #8a8d93;
  font-variant-numeric: tabular-nums;
}

.limit-select {
  border: 1px solid #ccccc8;
  border-radius: 3px;
  padding: 0.15rem 0.3rem;
  font-family: inherit;
  font-size: 0.85rem;
  background: #fff;
  min-width: 3.2rem;
}

.limit-select:disabled {
  background: var(--paper);
  color: #b0b3b8;
  cursor: not-allowed;
}

/* --- Resultat av reducering ---------------------------------------------- */

/* Reduceringskedjan: hela vägen från startantal till valda rader i en enda
   rad av kapslar, med pilar som visuella separatorer. Detta är resultatets
   viktigaste rad – den ska läsas som ett resultat, inte skummas som en
   logg-textrad. Sista kapseln (valda rader) är resan MÅL och får därför
   egen färg och större vikt än stegen som leder dit. */
.reduce-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.8rem 0;
}

.reduce-chain-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  background: #fcfcfb;
  border: 1px solid #e8e8e5;
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.7rem;
  line-height: 1.15;
}

.reduce-chain-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.reduce-chain-label {
  font-size: 0.68rem;
  color: var(--ink-faint);
  white-space: nowrap;
}

.reduce-chain-arrow {
  color: #c7c6bf;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.reduce-chain-final {
  background: linear-gradient(155deg, var(--blue-500), var(--blue-700));
  border-color: var(--blue-700);
  box-shadow: 0 2px 8px rgba(47, 111, 191, 0.3);
}

.reduce-chain-final .reduce-chain-value {
  color: #fff;
  font-size: 1.15rem;
}

.reduce-chain-final .reduce-chain-label {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 560px) {
  .reduce-summary {
    gap: 0.3rem;
  }

  .reduce-chain-step {
    padding: 0.3rem 0.5rem;
  }

  .reduce-chain-value {
    font-size: 0.88rem;
  }

  .reduce-chain-final .reduce-chain-value {
    font-size: 1rem;
  }
}

#reduce-result {
  animation: rise-in 0.4s var(--ease-out) both;
}

.stats-box {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.6rem;
  margin: 0.6rem 0;
}

.stat-item {
  background: #fcfcfb;
  border: 1px solid #e8e8e5;
  border-radius: var(--radius-md);
  padding: 0.55rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.stat-label {
  font-size: 0.72rem;
  color: #898781;
}

.stat-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.dist-chart {
  position: relative;
  background: #fcfcfb;
  border: 1px solid #e8e8e5;
  border-radius: var(--radius-md);
  padding: 0.8rem 0.8rem 0.5rem;
  margin: 0.6rem 0;
}

.dist-svg {
  width: 100%;
  height: auto;
  display: block;
}

.dist-bar {
  transition: opacity 0.2s;
  cursor: pointer;
}

.dist-bar:hover,
.dist-bar:focus-visible {
  opacity: 0.8;
  outline: none;
}

/* Delad tooltip-bubbla: fördelningsdiagrammets staplar (.dist-bar) och
   Live-rättningens fyllda 1/X/2-rutor (.live-cell-fill) använder samma
   utseende och samma JS-hjälpare (setupHoverTooltip). */
.dist-tooltip,
.live-tooltip {
  position: absolute;
  transform: translate(-50%, -100%) translateY(-8px);
  background: var(--navy-800, #1f2a44);
  color: #fff;
  font-size: 0.76rem;
  line-height: 1.3;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

.dist-tooltip::after,
.live-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--navy-800, #1f2a44);
}

.dist-grid {
  stroke: #e1e0d9;
  stroke-width: 1;
}

.dist-axis-label {
  fill: #898781;
  font-size: 9px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dist-axis-title {
  fill: var(--ink-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

.dist-bar-label {
  fill: var(--ink-soft);
  font-size: 9px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}