/* ============================================================
   ROUNDS CRM – Brändi-teema 2026  (rounds-theme.css)
   ------------------------------------------------------------
   Drop-in override: lataa TÄMÄ tiedosto sovelluksen nykyisen
   <style>-lohkon JÄLKEEN. Selektorit ovat samat kuin app.php:ssä
   (nav, .card, .btn, .pill, .stat, .dbtn, .modal, .pchip …), joten
   HTML-rakennetta ei tarvitse muuttaa teeman käyttöönottoon.
   Brändilähde: ROUNDS Brand Guidelines 2026
     Main green #05F14E · Rounds black #212321 · Rounds white #EEEEEE
     Rounds purple #A947B9 · CMYK green #57B947
     Fontit: Loos Extended (otsikot), Loos Normal (leipä), Loos Condensed (UI)
     Kuvio: BITMAP (halftone-ruudukko), sallitut yhdistelmät: white&grey,
     black&grey, green&purple. Tyyli: "sharp + Y2K".
   ============================================================ */

/* ----------------------------------------------------------
   0. TOKENIT
   ---------------------------------------------------------- */
:root{
  /* Brändivärit (älä muuta) */
  --r-green:   #05F14E;
  --r-black:   #212321;
  --r-white:   #EEEEEE;
  --r-purple:  #A947B9;
  --r-green2:  #57B947;

  /* Pinnat: sivu tummempi kuin kortti, kortti = Rounds black */
  --bg:        #141614;
  --bg2:       #1a1c1a;
  --card:      #212321;
  --card2:     #2a2d2a;
  --border:    #30332f;
  --border-hi: rgba(238,238,238,.14);

  /* Teksti */
  --text:      #EEEEEE;
  --muted:     #9ba39a;

  /* Toiminnalliset värit */
  --green:     var(--r-green);
  --green-dim: #04c440;
  --green-bg:  rgba(5,241,78,.08);
  --green-glow: 0 0 0 1px rgba(5,241,78,.35), 0 0 22px rgba(5,241,78,.28);
  --purple:    var(--r-purple);
  --purple-hi: #c983d8;          /* linkit ja pienet tekstit tummalla (kontrasti ≥ 4.5) */
  --purple-bg: rgba(169,71,185,.14);
  --red:       #ff5c5c;
  --amber:     #ffb020;
  --blue:      var(--purple-hi);  /* sininen poistuu käytöstä → purppura kontrastivärinä */

  /* Muoto: "sharp". Vain pillit ja avatarit ovat pyöreitä (Y2K). */
  --radius:      4px;
  --radius-lg:   6px;
  --radius-pill: 999px;
  --chamfer:     10px;            /* leikattu kulma pääkutsuissa ja aktiivisessa tabissa */

  --shadow-card: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px rgba(0,0,0,.35);
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

/* ----------------------------------------------------------
   1. PERUSTA: fontit, tausta, bitmap-kuvio
   ---------------------------------------------------------- */
html{ background: var(--bg); }
body{
  font: 15px/1.5 var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative; isolation: isolate;   /* oma pinontakonteksti → taustakerrokset (z -1) jäävät sisällön alle */
}

/* BITMAP-kuvio (black & grey): kiinteä taustakerros, joka haalenee alaspäin.
   Kaksi ruudukkoa eri tiheydellä = halftone-vaikutelma ilman kuvatiedostoa. */
body::before{
  content:"";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(238,238,238,.075) 0 1.1px, transparent 1.6px),
    radial-gradient(circle, rgba(238,238,238,.045) 0 .8px,  transparent 1.3px);
  background-size: 12px 12px, 6px 6px;
  background-position: 0 0, 3px 3px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.12) 55%, transparent 78%);
          mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 28%, rgba(0,0,0,.12) 55%, transparent 78%);
}
/* Vihreä "hehku" vasemmassa yläkulmassa – hillitty, tuo neonin mukaan */
body::after{
  content:"";
  position: fixed; left: -20vw; top: -30vh; width: 70vw; height: 70vh; z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(5,241,78,.10), transparent 70%);
  filter: blur(20px);
}
/* HUOM: nav (sticky), #tabbar/.overlay/#toast/.popover (fixed) säilyttävät sovelluksen omat
   position- ja z-index-arvot. Tämä teema ei koske niiden sijoitteluun. */

::selection{ background: var(--green); color: #0c0e0b; }
:focus-visible{ outline: 2px solid var(--green); outline-offset: 2px; border-radius: 2px; }

a{ color: var(--purple-hi); text-decoration: none; }
a:hover{ color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------
   2. TYPOGRAFIA
   ---------------------------------------------------------- */
h1, h2, h3, .stat b, .teamstat b, .money b, .endcard .big, .hfcol b, .lvlbadge{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1{
  font-size: 30px; line-height: 1.05; margin: 4px 0 6px;
  text-transform: uppercase; letter-spacing: .01em;
  display: flex; align-items: center; gap: 12px;
}
/* Vihreä "bitti" otsikon edessä = logon terävä muotokieli */
h1::before{
  content:""; width: 10px; height: 26px; flex: 0 0 10px;
  background: var(--green);
  clip-path: polygon(0 0, 100% 0, 100% 70%, 60% 100%, 0 100%);
  box-shadow: 0 0 14px rgba(5,241,78,.45);
}
/* Yrityksen nimi (yrityskortti, soittonäkymä) ei ole versaalilla – nimet ovat asiakkaan omia */
.callmain h1, .card h1{ font-size: 28px; text-transform: none; letter-spacing: 0; }
.callmain h1::before{ display: none; }
h2{
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 26px 0 10px;
}
h3{ font-size: 14px; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.muted{ color: var(--muted); }
.small{ font-size: 12.5px; }
.datetime, .tbl th, .stat span, .teamstat span, .dispolbl, .ptypehdr, .ptypelbl, .kthead, #tabbar a, .kbd{
  font-family: var(--font-condensed);
}

/* ----------------------------------------------------------
   3. NAVIGAATIO
   ---------------------------------------------------------- */
nav{
  height: 60px; padding: 0 18px; gap: 4px;
  background: rgba(33,35,33,.86);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255,255,255,.03);
}
/* Neonviiva navin alareunassa */
nav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, var(--green) 0, rgba(5,241,78,.35) 30%, transparent 60%);
}
nav .logo{ height: 30px; margin-right: 18px; }
nav a.navbtn{
  font-family: var(--font-condensed);
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px; border-radius: var(--radius);
  position: relative; transition: color .15s, background .15s;
}
nav a.navbtn:hover{ color: var(--text); background: rgba(238,238,238,.05); }
nav a.navbtn.active{ color: var(--green); background: transparent; }
nav a.navbtn.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:2px; height:2px;
  background: var(--green); box-shadow: 0 0 10px rgba(5,241,78,.6);
}
nav .whoami{ font-family: var(--font-condensed); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
nav a.navbtn.logoutbtn{ color: var(--muted); }

/* Mobiilin alapalkki */
#tabbar{
  background: rgba(33,35,33,.94); backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
}
#tabbar a{ font-size: 10px; letter-spacing: .08em; border-radius: var(--radius); }
#tabbar a.active{ color: var(--green); background: var(--green-bg); box-shadow: inset 0 2px 0 var(--green); }

/* ----------------------------------------------------------
   4. KORTIT, TILASTOT, TAULUKOT
   ---------------------------------------------------------- */
.card, .stat, .teamstat, .chartcard, .leadcard, .callmain, .compactline{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card{ padding: 16px 18px; }
.card.clickable:hover, .leadcard:hover{ border-color: rgba(5,241,78,.45); }

.stats{ gap: 10px; }
.stat{ padding: 14px 16px 12px; position: relative; overflow: hidden; }
.stat::before{ /* ohut vihreä reunaviiva vasemmalla */
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--green);
  opacity:.9;
}
.stat b{ font-size: 30px; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat span{ font-size: 11px; letter-spacing: .12em; }
.teamstat b{ font-size: 26px; color: var(--text); }
.teamstat.today{ border-color: rgba(5,241,78,.4); }
.money b{ color: var(--green); }

.tbl th{
  font-size: 11px; letter-spacing: .12em; padding: 9px 10px;
  border-bottom: 1px solid var(--border-hi); color: var(--muted);
}
.tbl td{ padding: 10px; border-bottom: 1px solid var(--border); }
.tbl tr:hover td, tr[data-go]:hover td{ background: rgba(5,241,78,.05); }
.tbl td b{ font-weight: 700; }
table.tbl th.sortsel, table.tbl th.sortable:hover{ color: var(--green); }

/* Otsikkorivit hienovaraisella bitmap-raidalla */
.card > h3:first-child, .chartcard > h3:first-child{
  padding-bottom: 8px; margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ----------------------------------------------------------
   5. PILLIT (vaihe, tärkeys) – Y2K: pyöreä, versaali, tiivis
   ---------------------------------------------------------- */
.pill{
  font-family: var(--font-condensed);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--radius-pill);
  border: 1px solid transparent;
}
.pill:hover{ transform: none; }
.pill.stage-ehdotettu   { background: rgba(238,238,238,.06); color: #cfd4cc; border-color: rgba(238,238,238,.12); }
.pill.stage-yhteydenotto{ background: var(--purple-bg); color: var(--purple-hi); border-color: rgba(169,71,185,.45); }
.pill.stage-kiinnostunut{ background: rgba(5,241,78,.10); color: var(--green); border-color: rgba(5,241,78,.35); }
.pill.stage-tapaaminen  { background: rgba(5,241,78,.18); color: var(--green); border-color: rgba(5,241,78,.55); }
.pill.stage-tarjous     { background: rgba(255,176,32,.12); color: var(--amber); border-color: rgba(255,176,32,.4); }
.pill.stage-voitettu    { background: var(--green); color: #0c0e0b; border-color: var(--green); box-shadow: 0 0 12px rgba(5,241,78,.35); }
.pill.stage-hylatty     { background: rgba(255,92,92,.10); color: var(--red); border-color: rgba(255,92,92,.4); }
.pill.stage-eiaktiivinen{ background: transparent; color: var(--muted); border-color: var(--border); }
.pill.tärkeys-korkea    { background: rgba(255,92,92,.12); color: var(--red); border-color: rgba(255,92,92,.4); }
.pill.tärkeys-normaali  { background: rgba(238,238,238,.06); color: #cfd4cc; border-color: rgba(238,238,238,.12); }

/* ----------------------------------------------------------
   6. NAPIT – yksi vihreä pääkutsu per näkymä
   ---------------------------------------------------------- */
.btn{
  font-family: var(--font-condensed);
  font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: var(--green); color: #0c0e0b;
  border: 0; border-radius: var(--radius); padding: 10px 18px; min-height: 40px;
  clip-path: polygon(0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100%);
  transition: transform .1s, filter .15s, box-shadow .2s;
}
.btn:hover{ filter: brightness(1.06); box-shadow: var(--green-glow); }
.btn:active{ transform: scale(.97); }
.btn:disabled{ opacity:.45; filter:none; box-shadow:none; }
.btn.ghost{
  background: transparent; color: var(--text);
  border: 1px solid var(--border-hi); clip-path: none; box-shadow: none;
}
.btn.ghost:hover{ border-color: var(--green); color: var(--green); background: var(--green-bg); box-shadow: none; }
.btn.danger{ background: transparent; color: var(--red); border: 1px solid rgba(255,92,92,.4); clip-path: none; }
.btn.danger:hover{ background: rgba(255,92,92,.08); box-shadow: none; }
.btn.small{ padding: 7px 12px; font-size: 13px; min-height: 34px; --chamfer: 7px; }
/* Toissijainen vihreä ei ole täyttö vaan reunus – vähentää vihreän määrää listoissa */
.tbl .btn, .tbl .btn.small, .btnrow .btn.small.ghost{
  background: transparent; color: var(--green); border: 1px solid rgba(5,241,78,.5); clip-path: none;
}
.tbl .btn:hover{ background: var(--green); color: #0c0e0b; box-shadow: var(--green-glow); }

/* Soittotuloksen napit */
.dbtn{
  font-family: var(--font-condensed); font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius); border: 1px solid var(--border-hi); background: var(--bg2);
  transition: border-color .15s, background .15s, color .15s;
}
.dbtn:hover{ border-color: var(--green); color: var(--green); background: var(--green-bg); }
.dbtn.sel{ background: var(--green); color: #0c0e0b; border-color: var(--green); box-shadow: var(--green-glow); }
.dbtn.pos{ border-color: rgba(5,241,78,.45); }
.dbtn.neg{ border-color: rgba(255,92,92,.45); }
.dbtn.warn{ border-color: rgba(255,176,32,.45); }
.dispolbl{ font-size: 11px; letter-spacing: .14em; }

/* Suodatinnapit Tänään-näkymässä (.btn.ghost-rivi) – aktiivinen = vihreä täyttö */
.btnrow .btn.ghost.active, .btnrow .btn.sel{ background: var(--green); color:#0c0e0b; border-color: var(--green); }

/* ----------------------------------------------------------
   7. LOMAKKEET
   ---------------------------------------------------------- */
label.f{ font-family: var(--font-condensed); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
label.f input, label.f select, label.f textarea, input.i, select.i, textarea.i{
  background: var(--bg); border: 1px solid var(--border-hi); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 16px; padding: 10px 12px;
  transition: border-color .15s, box-shadow .15s;
}
input.i:focus, select.i:focus, textarea.i:focus, label.f input:focus, label.f select:focus, label.f textarea:focus{
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(5,241,78,.15); outline: none;
}
input[type=range]{ accent-color: var(--green); }
input[type=checkbox], input[type=radio]{ accent-color: var(--green); }

/* ----------------------------------------------------------
   8. MODAALIT, POPOVER, TOAST
   ---------------------------------------------------------- */
.overlay{ background: rgba(10,12,9,.7); backdrop-filter: blur(8px); }
.modal{
  background: var(--card); border: 1px solid var(--border-hi); border-top: 3px solid var(--green);
  border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.6), 0 0 40px rgba(5,241,78,.06);
}
.modal h2{ font-family: var(--font-display); font-size: 18px; letter-spacing: 0; text-transform: uppercase; color: var(--text); }
.modal .close:hover{ color: var(--green); }
.popover{ background: var(--card); border: 1px solid var(--border-hi); border-top: 2px solid var(--green); border-radius: var(--radius-lg); }
.popover .stbtn{ font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .06em; border-radius: var(--radius); }
#toast > div, .toast{
  background: var(--card); border: 1px solid var(--border-hi); border-left: 3px solid var(--green);
  border-radius: var(--radius); font-family: var(--font-condensed); letter-spacing: .03em;
}
.toast.err{ border-left-color: var(--red); }

/* ----------------------------------------------------------
   9. PELILLISTYS: taso, tavoite, streak – terävä, ei liukuväriä
   ---------------------------------------------------------- */
.lvlbadge{
  width: 48px; height: 48px; border-radius: var(--radius);
  background: var(--green); color: #0c0e0b; font-size: 22px;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
  box-shadow: 0 0 22px rgba(5,241,78,.35);
}
.leveltrack, .goaltrack{ height: 8px; border-radius: 2px; background: var(--bg2); border: 1px solid var(--border); }
.levelfill, .goalfill{ background: var(--green); border-radius: 0; box-shadow: 0 0 12px rgba(5,241,78,.5); }
.goalfill.full{ animation: glowpulse 1.6s ease infinite; }
.lvlhint, .goalhint{ font-family: var(--font-condensed); letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }
.streak{ font-family: var(--font-condensed); border-radius: var(--radius-pill); letter-spacing: .06em; text-transform: uppercase; }
.celebrate{
  background: linear-gradient(90deg, rgba(5,241,78,.16), rgba(169,71,185,.10));
  border: 1px solid rgba(5,241,78,.4); border-radius: var(--radius-lg);
}
.celebrate b{ font-family: var(--font-display); text-transform: uppercase; }
.scorepop{ font-family: var(--font-display); }

/* ----------------------------------------------------------
   10. KAAVIOT, SUPPILO
   ---------------------------------------------------------- */
:root{ --hf0:#05F14E; --hf1:#2fd45d; --hf2:#57B947; --hf3:#6a9a5f; --hf4:#7e8a77; --hf5:#9ba39a; }
.hfbar{ border-radius: 2px 2px 0 0; }
.barline .btrack{ border-radius: 2px; background: var(--bg2); border: 1px solid var(--border); }
.barline .bfill{ border-radius: 0; font-family: var(--font-condensed); }
.barline .bfill.green{ background: var(--green); }
.barline .bfill.blue{ background: var(--purple-hi); }
.barline .bfill.amber{ background: var(--amber); }
.barline .bfill.red{ background: var(--red); }
.endcard{ border-radius: var(--radius-lg); }
.endcard .big{ font-size: 28px; }
.spark .line{ stroke: var(--green); }
.spark .area{ fill: rgba(5,241,78,.12); }
.donut text{ font-family: var(--font-display); }

/* ----------------------------------------------------------
   11. TUOTTEET (chipit, katalogi, tarjousrivit)
   ---------------------------------------------------------- */
.pchip{
  font-family: var(--font-condensed); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius-pill); border: 1px solid var(--border-hi); padding: 3px 11px;
}
.pchip.st-ehdotettu{ border-color: rgba(169,71,185,.6); color: var(--purple-hi); background: var(--purple-bg); }
.pchip.st-tarjottu { border-color: rgba(255,176,32,.6); color: var(--amber); background: rgba(255,176,32,.10); }
.pchip.st-myyty    { border-color: var(--green); color: #0c0e0b; background: var(--green); box-shadow: 0 0 10px rgba(5,241,78,.35); }
.pchip.st-hylatty  { border-color: rgba(255,92,92,.5); color: var(--red); background: rgba(255,92,92,.08); }
.pchip.st-ei_sovi  { border-color: var(--border); color: var(--muted); background: transparent; }
.ptypehdr, .ptypelbl{ letter-spacing: .14em; }
.kthead{ letter-spacing: .12em; border-bottom: 2px solid var(--border-hi); }
.ktrow .kmeta.full{ color: var(--red); }
.orow .osum{ font-family: var(--font-display); font-size: 13px; }
.tag{ font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; border-radius: var(--radius); }
.obadge{ font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .05em; }
.kbd{ border-radius: 3px; }

/* ----------------------------------------------------------
   12. SOITTONÄKYMÄ
   ---------------------------------------------------------- */
.callmain{ padding: 22px; }
.script{ background: var(--bg2); border-left: 3px solid var(--purple); border-radius: var(--radius); }
.contactline .cname:hover{ color: var(--green); }
.empty{ font-family: var(--font-condensed); letter-spacing: .04em; text-transform: uppercase; }

/* ----------------------------------------------------------
   13. LIIKE JA EFEKTIT (hillitty, kunnioittaa reduced-motion)
   ---------------------------------------------------------- */
.card, .stat{ animation: slidein .35s var(--ease-out) both; }
.btn, .dbtn, .pchip, nav a.navbtn{ will-change: transform; }
@keyframes glowpulse{
  0%,100%{ box-shadow: 0 0 10px rgba(5,241,78,.25); }
  50%{ box-shadow: 0 0 26px rgba(5,241,78,.6); }
}
/* "Scanline"-välähdys tason noustessa: lisää luokka .levelup elementille .levelbar */
.levelbar.levelup{ position: relative; overflow: hidden; }
.levelbar.levelup::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-40%;
  background: linear-gradient(90deg, transparent, rgba(5,241,78,.35), transparent);
  animation: scan .9s var(--ease-out) 1;
}
@keyframes scan{ to{ left: 120%; } }
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}

/* ----------------------------------------------------------
   14. MOBIILI
   ---------------------------------------------------------- */
@media (max-width: 820px){
  h1{ font-size: 24px; }
  h1::before{ height: 22px; width: 8px; }
  .stat b{ font-size: 26px; }
  .btn{ font-size: 14px; }
  nav .logo{ height: 26px; }
}
@media (max-width: 420px){
  h1{ font-size: 20px; }
}

/* ----------------------------------------------------------
   15. IKONIT (SVG-sprite, korvaa emojit) – ks. assets/icons.svg
   ---------------------------------------------------------- */
.ic{
  width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  display: inline-block; flex-shrink: 0;
}
.btn .ic{ margin-right: 6px; }
#tabbar a .ic{ width: 22px; height: 22px; }


/* ==========================================================
   MOBIILIKORJAUS 28.9.2026 (P0: napit + ylivuoto)
   Syy: .btn clip-path + condensed-fontti fallbackilla leikkaa
   napin tekstin näkyvistä kapealla näytöllä. Poistetaan
   leikkaus mobiilissa, sallitaan tekstin rivitys, pakotetaan
   ikonit perimään napin tekstin väri, estetään Chomen
   autop zoom ja koko sivun vaakavieritys.
   ========================================================== */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
.btn, .dbtn, .tabbar a, #tabbar a { -webkit-text-size-adjust: 100%; }
@media (max-width: 820px) {
  .btn { clip-path: none; letter-spacing: .02em; white-space: normal; overflow: visible; }
  .btn .ic { fill: currentColor; stroke: currentColor; }
  .dbtn { white-space: normal; }
  .dbtn .ic { fill: currentColor; stroke: currentColor; }
  /* rivi- ja kenttätekstit: ei kiinteitä rivejä kapealla */
  .goalhint, .ktrow .kmeta, .ktrow .kbtns, .orow .osum, .popover .pprice { white-space: normal; }
  .ktrow .kbtns { display: flex; flex-wrap: wrap; gap: 6px; }
  td[style*="white-space:nowrap"] { white-space: normal !important; }
  td[style*="white-space:nowrap"] .btn.small { margin: 2px 0; }
  /* taulukko ilman card-käärettä: anna vaakavieritys turvallisesti */
  table.tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* joinrow (liittymislinkit): rivit allekkain kapealla */
  .joinrow { flex-wrap: wrap; gap: 10px; }
}
@media (max-width: 420px) {
  .btn { padding: 10px 12px; font-size: 14px; }
  .btn.small { padding: 7px 10px; font-size: 12.5px; }
}


/* ==========================================================
   IKONINAPPIEN TOOLTIP 28.9.2026 (selkeä kuin native title,
   mutta näkyy heti hoverissa; title jätetty saavutettavuudelle)
   ========================================================== */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #262826; color: #f2f4ef; border: 1px solid #3a3d38;
  padding: 4px 9px; border-radius: 6px; font-size: 12px; font-weight: 500;
  white-space: nowrap; z-index: 200; pointer-events: none;
  font-family: inherit; text-transform: none; letter-spacing: 0;
}
[data-tip]:hover::before {
  content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #262826; z-index: 201; pointer-events: none;
}


/* ==========================================================
   PUHELINLINKIT 28.9.2026 (paras numero suoraan listassa)
   PC: klikkaa = soitto oletussovelluksella, Alt+klikkaus tai
   oikea klikkaus = kopioi leikepöydälle.
   Mobiili: napautus = soittovalinta, painava osumapinta.
   ========================================================== */
.telink {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--muted); text-decoration: none;
  font-size: 12px; padding: 2px 6px; margin-left: 6px;
  border: 1px solid var(--border); border-radius: 10px;
  white-space: nowrap; vertical-align: middle;
}
.telink .ic { width: .95em; height: .95em; }
.telink:hover { color: var(--green); border-color: var(--green); }
@media (max-width: 820px) {
  .telink { font-size: 14px; padding: 6px 10px; margin-left: 4px; }
}