/* Sessionäkymä: kangas, klusterit ja sessiokortit. Värit tokeneina (styles.css). */

:root {
  --tila-kaynnissa: #12b76a;
  --tila-odottaa: #f79009;
  --tila-valmis: #98a2b3;
  --tila-aloitettu: #2e90fa;
}

.sessio-otsake { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.sessio-otsake h1 { margin: 0; }
.sessio-otsake .sessio-napit { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.sessio-otsake .nappi.toissijainen { background: var(--pinta-2); color: var(--teksti); border-color: var(--reuna); }
.sessiolaskurit { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; color: var(--hiljainen); }
.sessiolaskurit .tila-odottaa { color: var(--teksti); font-weight: 600; }

.tilapallo {
  display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; flex: none;
  background: var(--tila-valmis);
}
.tila-kaynnissa .tilapallo { background: var(--tila-kaynnissa); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tila-kaynnissa) 25%, transparent); }
.tila-odottaa .tilapallo { background: var(--tila-odottaa); }
.tila-aloitettu .tilapallo { background: var(--tila-aloitettu); }
@media (prefers-reduced-motion: no-preference) {
  .sessiokortti.tila-kaynnissa .tilapallo { animation: sykkii 1.6s ease-in-out infinite; }
}
@keyframes sykkii { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--tila-kaynnissa) 10%, transparent); } }

/* Kangas: roolit sarakkeina, vierittyy vaakaan leveillä näytöillä. */
.sessiokangas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 1fr); gap: 1rem;
  overflow-x: auto; align-items: start; padding-bottom: .5rem; }
.paneeli .sessiokangas, .sessiokangas:has(> .sessiolista) { display: block; overflow: visible; }
.sessiosarake { background: var(--pinta-2); border-radius: var(--sade); padding: .7rem; border-top: 3px solid var(--vari); min-width: 0; }
.sessiosarake h2 a { text-decoration: none; }
.odottaa-laskuri { background: var(--tila-odottaa); color: #fff; }
.sessioklusteri { border-left: 2px solid var(--reuna); padding-left: .55rem; margin: .4rem 0 .9rem; }
.sessioklusteri.yksittaiset { border-left: 0; padding-left: 0; }
.sessioklusteri h3 { margin: .2rem 0 .45rem; font-size: .85rem; color: var(--hiljainen); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sessiolista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .6rem; }

.sessiokortti { background: var(--pinta); border: 1px solid var(--reuna); border-radius: 8px; padding: .55rem .65rem;
  margin-bottom: .5rem; box-shadow: var(--varjo); }
.sessiolista .sessiokortti { margin: 0; }
.sessiokortti.tila-odottaa { border-color: var(--tila-odottaa); }
.sessiokortti.tila-valmis { opacity: .88; }
.sessiokortti header { display: flex; align-items: center; gap: .45rem; }
.sessionimi { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.sessiokortti header .hiljainen { white-space: nowrap; font-size: .78rem; }
.sessiokuvaus { margin: .3rem 0 0; font-size: .88rem; }
.odottaa-sinua { margin: .35rem 0 0; font-size: .85rem; padding: .25rem .45rem; border-radius: 5px;
  background: color-mix(in srgb, var(--tila-odottaa) 14%, transparent); }
.tila-aloitettu .odottaa-sinua { background: color-mix(in srgb, var(--tila-aloitettu) 12%, transparent); }
.sirut { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 0; }
.siru { font-size: .75rem; padding: .05rem .4rem; border-radius: 4px; background: var(--pinta-2); color: var(--hiljainen);
  text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.siru:hover { color: var(--teksti); }
.raskas .kulutus { background: color-mix(in srgb, var(--vaara) 15%, transparent); color: var(--vaara); }
.sessioraportti { margin-top: .4rem; font-size: .85rem; }
.sessioraportti summary { cursor: pointer; color: var(--hiljainen); }
.sessioraportti .viimeisin { white-space: pre-wrap; max-height: 16rem; overflow: auto; margin: .3rem 0 0; }
.sessiokortti footer { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin-top: .45rem; }
.sessiokortti footer .rivi-inline { display: flex; gap: .3rem; }
.sessiokortti footer select { font-size: .8rem; padding: .1rem .3rem; }
.hiljainen-nappi { background: none; border-color: transparent; color: var(--hiljainen); margin-left: auto; }

.sessiopaneeli h2 .nappi { margin-left: auto; }
#aloitusviesti { width: 100%; margin: .6rem 0; font: .85rem/1.45 ui-monospace, Consolas, monospace; }

@media (max-width: 760px) {
  .sessiokangas { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .sessio-otsake .sessio-napit { margin-left: 0; }
}

/* Läpikäynti: jono vanhin ensin, tarkistuslista kortilla. */
.lapikaynti-ryhma { margin-bottom: 1.2rem; }
.lapikaynti-ryhma h2 { display: flex; align-items: center; gap: .5rem; border-left: 4px solid var(--vari); padding-left: .5rem; }
.tarkistus { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0 0; font-size: .82rem; color: var(--hiljainen); }
.tarkistus .puuttuu { color: var(--vaara); }
.tarkistus .ok { color: var(--onnistui); }
.sessiokortti.tila-odottaa .tarkistus .odottaa { color: var(--tila-odottaa); font-weight: 600; }
.sessiokortti footer .kuittaus { display: flex; gap: .3rem; flex-wrap: wrap; align-items: center; }