/* Oppilaskortti — tyylit.
 *
 * Peräisin prototyypistä (arkisto/opintokortti.html). Sisältö on sama;
 * ero on siinä, että tämä on erillinen tiedosto eikä inline-<style>, jolloin
 * CSP pysyy tiukkana ilman 'unsafe-inline'-myönnytystä.
 *
 * FONTIT: DM Sans ja DM Mono hostataan itse hakemistosta /fontit/.
 * Google Fontsia ei käytetä: se vaatisi CSP:n löysentämistä (fontSrc on
 * 'self') ja lisäisi kolmannen osapuolen jokaiseen sivulataukseen.
 */

/* --- Fontit ---------------------------------------------------------------
 *
 * Tiedostot ovat versionhallinnassa, jotta käyttöönotto ei vaadi erillistä
 * latausvaihetta. Haettu kertaalleen fonts.gstatic.comista (DM Sans v17,
 * DM Mono v16), latin-osajoukko — suomen ä, ö ja å sekä ajatusviiva sisältyvät
 * siihen, joten latin-ext ei ole tarpeen.
 *
 * DM Sans on **muuttuva fontti**: yksi tiedosto kattaa koko paksuusvälin, ja
 * siitä käytetään arvoja 400, 500 ja 600. Tarkistettu tiedoston omasta
 * taulukkohakemistosta (`fvar` löytyy). DM Monosta muuttuvaa versiota ei ole,
 * joten sen kaksi leikkausta ovat erillisinä tiedostoina.
 *
 * `font-display: swap` — teksti näkyy heti järjestelmäfontilla ja vaihtuu kun
 * tiedosto on latautunut. Ilman sitä sivu olisi hetken tyhjä hitaalla
 * yhteydellä. Hinta on pieni tekstin siirtymä latauksen hetkellä.
 *
 * LISENSSI: SIL Open Font License 1.1, ks. `fontit/OFL-DMSans.txt` ja
 * `fontit/OFL-DMMono.txt`. Lisenssiteksti on jaeltava fonttien mukana —
 * **älä poista niitä tiedostoja.**
 */

@font-face {
  font-family: 'DM Sans';
  src: url('/fontit/dmsans.woff2') format('woff2');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fontit/dmmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('/fontit/dmmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #F7F6F3;
  --surface: #FFFFFF;
  --surface2: #F2F1EE;
  --border: #E4E2DC;
  --border2: #CCCAC2;
  --text: #1A1916;
  --text2: #6B6860;
  --text3: #9E9C96;
  --blue: #1A4FA0;
  --blue-light: #EDF2FB;
  --blue-mid: #5882C4;
  --green: #1A6B42;
  --green-light: #EAF4EE;
  --green-mid: #4A9E6E;
  --amber: #92610A;
  --amber-light: #FBF3E2;
  --punainen: #A32020;
  --punainen-light: #FBEDED;
  --radius: 10px;
  --radius-lg: 14px;

  --fontti: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fontti-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body {
  font-family: var(--fontti);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

/* --- Näkyvä kohdistus näppäimistökäytölle -------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* --- Kirjautuminen ------------------------------------------------------- */

.kirjautuminen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.kirjautumis-kortti {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 100%;
  max-width: 380px;
}
.kirjautumis-logo {
  width: 38px; height: 38px;
  background: var(--blue);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.kirjautumis-logo svg { width: 20px; height: 20px; fill: white; }
.kirjautumis-otsikko {
  font-size: 18px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 2px;
}
.kirjautumis-ala { font-size: 12px; color: var(--text3); margin-bottom: 1.5rem; }

.kentta { display: flex; flex-direction: column; gap: 5px; margin-bottom: 1rem; }
.kentta label { font-size: 12px; color: var(--text2); font-weight: 500; }
.kentta input {
  border: 1px solid var(--border2);
  border-radius: 8px;
  background: var(--surface);
  font-size: 14px;
  color: var(--text);
  padding: 9px 11px;
  font-family: var(--fontti);
  outline: none;
  width: 100%;
}
.kentta input:focus { border-color: var(--blue); }

.painike {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: var(--blue);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fontti);
  padding: 10px 16px;
  cursor: pointer;
  transition: background .15s;
}
.painike:hover { background: #163F80; }
.painike:disabled { background: var(--border2); cursor: default; }

.painike-kevyt {
  border: 1px solid var(--border2);
  border-radius: 7px;
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  font-family: var(--fontti);
  padding: 5px 12px;
  cursor: pointer;
}
.painike-kevyt:hover { background: var(--bg); color: var(--text); }
/* Sama tyyli myös linkkeinä (yläpalkin siirtymät) — ilman alleviivausta. */
a.painike-kevyt { text-decoration: none; display: inline-flex; align-items: center; }

.virhe {
  background: var(--punainen-light);
  border: 1px solid #EFD3D3;
  color: var(--punainen);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 1rem;
}
.ilmoitus {
  background: var(--amber-light);
  border: 1px solid #EFE0BE;
  color: var(--amber);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 1rem;
}
.onnistui {
  background: var(--green-light);
  border: 1px solid #CDE5D7;
  color: var(--green);
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13px;
  margin-bottom: 1rem;
}
/* Apuluokka. !important on tarkoituksellinen: piilotus ei saa hävitä sille,
   että elementin oma sääntö (esim. .view-tabs { display:flex }) on
   tyylitiedostossa myöhempänä. */
.piilossa { display: none !important; }

.paluurivi { margin-top: 1rem; text-align: center; }
.paluulinkki { font-size: 12px; color: var(--text3); text-decoration: none; }
.paluulinkki:hover { color: var(--text); text-decoration: underline; }

/* --- Sovelluksen runko --------------------------------------------------- */

.app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 1.5rem;
  display: flex; align-items: center; gap: 1.25rem;
  height: 54px; flex-shrink: 0;
}
.logo {
  width: 30px; height: 30px;
  background: var(--blue);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.logo svg { width: 16px; height: 16px; fill: white; }
.topbar-info { flex: 1; min-width: 0; }
.topbar-title {
  font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-sub {
  font-size: 11px; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-kayttaja {
  font-size: 12px; color: var(--text2); text-align: right; white-space: nowrap;
}
.topbar-kayttaja span { display: block; font-size: 10px; color: var(--text3); }

/* Nimi on linkki salasanan vaihtoon. Ilman tätä sivulle pääsi vain
   ensimmäisen kirjautumisen automaattisella ohjauksella. */
a.topbar-kayttaja {
  text-decoration: none; border-radius: 6px;
  padding: 4px 8px; margin: -4px -8px;
  transition: background .12s;
}
a.topbar-kayttaja:hover { background: var(--surface2); color: var(--text); }
a.topbar-kayttaja:hover span { color: var(--text2); }

.view-tabs { display: flex; gap: 4px; background: var(--surface2); border-radius: 8px; padding: 3px; }
.tab-btn {
  font-size: 12px; font-weight: 500;
  padding: 5px 14px;
  border: none; border-radius: 6px;
  background: transparent; color: var(--text2);
  cursor: pointer; transition: all .15s;
  font-family: var(--fontti);
}
.tab-btn.active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.main { display: flex; flex: 1; overflow: hidden; }

/* --- Sivupalkki ---------------------------------------------------------- */

.sidebar {
  width: 260px; min-width: 260px;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
  padding: 12px 0;
  flex-shrink: 0;
}
.sidebar-label {
  font-size: 10px; font-weight: 600; color: var(--text3);
  padding: 0 14px 6px; letter-spacing: .08em; text-transform: uppercase;
}
.mod-item {
  padding: 9px 14px;
  cursor: pointer;
  border-left: 2px solid transparent;
  border-top: none; border-right: none; border-bottom: none;
  background: transparent;
  transition: all .12s;
  display: block; width: 100%; text-align: left;
  font-family: var(--fontti);
}
.mod-item:hover { background: var(--bg); }
.mod-item.active { background: var(--blue-light); border-left-color: var(--blue); }
.mod-name { font-size: 12px; font-weight: 500; color: var(--text); line-height: 1.35; margin-bottom: 5px; }
.mod-item.active .mod-name { color: var(--blue); }
.mod-bar-wrap { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 3px; }
.mod-bar-fill { height: 100%; background: var(--green-mid); border-radius: 2px; transition: width .4s ease; }
.mod-pts { font-size: 10px; color: var(--text3); font-variant-numeric: tabular-nums; }
.mod-item.active .mod-pts { color: var(--blue-mid); }

/* --- Sisältö ------------------------------------------------------------- */

.content { flex: 1; overflow-y: auto; padding: 1.5rem; }
.dash { display: flex; flex-direction: column; gap: 1.25rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.1rem;
}
.stat-label { font-size: 11px; color: var(--text3); margin-bottom: 4px; }
.stat-value { font-size: 28px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.stat-value.green { color: var(--green); }
.stat-value.blue { color: var(--blue); }
.stat-value.amber { color: var(--amber); }
.stat-sub { font-size: 11px; color: var(--text3); margin-top: 4px; }

.student-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
}
.student-card-title {
  font-size: 11px; font-weight: 600; color: var(--text3);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px;
}
.student-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 1.5rem; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field-lbl { font-size: 11px; color: var(--text3); }
.field-arvo { font-size: 13px; color: var(--text); padding: 3px 0; border-bottom: 1px solid var(--border); }
.field-arvo.tyhja { color: var(--text3); }

.mod-table {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.mod-table-head {
  display: grid; grid-template-columns: 1fr 70px 90px 70px 110px;
  padding: 8px 1.25rem; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.th {
  font-size: 10px; font-weight: 600; color: var(--text3);
  text-align: right; text-transform: uppercase; letter-spacing: .05em;
}
.th:first-child { text-align: left; }
.mod-table-row {
  display: grid; grid-template-columns: 1fr 70px 90px 70px 110px;
  padding: 10px 1.25rem; border-bottom: 1px solid var(--border);
  align-items: center; cursor: pointer; transition: background .1s;
  width: 100%; background: transparent; border-left: none; border-right: none; border-top: none;
  font-family: var(--fontti); text-align: left;
}
.mod-table-row:last-child { border-bottom: none; }
.mod-table-row:hover { background: var(--bg); }
.mod-table-row.total { background: var(--surface2); cursor: default; }
.td { font-size: 12px; color: var(--text); text-align: right; }
.td:first-child { text-align: left; font-weight: 500; }
.td.green { color: var(--green); font-weight: 600; font-family: var(--fontti-mono); font-size: 12px; }
.td.muted { color: var(--text3); }
.td.mono { font-family: var(--fontti-mono); font-size: 12px; }
.prog-wrap { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.prog-bar { height: 5px; width: 90px; background: var(--border); border-radius: 3px; overflow: hidden; }
.prog-fill { height: 100%; background: var(--green-mid); border-radius: 3px; }
.prog-pct { font-size: 10px; color: var(--text3); font-variant-numeric: tabular-nums; }

/* --- Opintojaksonäkymä --------------------------------------------------- */

.mod-view { display: flex; flex-direction: column; gap: 1rem; }
.mod-hdr {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.1rem 1.25rem;
  display: flex; gap: 1.5rem; align-items: flex-start;
}
.mod-hdr-main { flex: 1; }
.mod-hdr-title { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--text); margin-bottom: 2px; }
.mod-hdr-meta { font-size: 12px; color: var(--text3); margin-bottom: 10px; }
.mod-hdr-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.mod-hdr-fill { height: 100%; background: var(--green-mid); border-radius: 3px; transition: width .4s; }
.mod-kpis { display: flex; gap: 1.5rem; flex-shrink: 0; }
.kpi { text-align: right; }
.kpi-val { font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.kpi-val.green { color: var(--green); }
.kpi-val.blue { color: var(--blue); }
.kpi-lbl { font-size: 10px; color: var(--text3); margin-top: 2px; }

.sec-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.sec-hdr {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 1.25rem; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.sec-title { font-size: 12px; font-weight: 600; color: var(--text); }
.sec-pts { font-size: 11px; color: var(--text3); font-family: var(--fontti-mono); }
.task-col-row {
  display: grid; grid-template-columns: 1fr 76px 76px 64px;
  padding: 5px 1.25rem; background: var(--surface2); border-bottom: 1px solid var(--border);
}
.tcol {
  font-size: 10px; font-weight: 600; color: var(--text3);
  text-align: center; text-transform: uppercase; letter-spacing: .05em;
}
.tcol:first-child { text-align: left; }
.task-row {
  display: grid; grid-template-columns: 1fr 76px 76px 64px;
  align-items: center; padding: 7px 1.25rem;
  border-bottom: 1px solid var(--border); transition: background .1s;
}
.task-row:last-child { border-bottom: none; }
.task-row.done { background: var(--green-light); }
.task-txt { font-size: 12px; color: var(--text); line-height: 1.45; padding-right: 10px; }
.task-row.done .task-txt { color: var(--green); }

.chk {
  width: 26px; height: 26px;
  border: 1.5px solid var(--border2); border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto; font-size: 13px; transition: all .15s;
  background: transparent; user-select: none; font-weight: 600;
  padding: 0; font-family: var(--fontti); color: inherit;
}
/* Painike vain siellä, missä käyttäjällä on oikeus kuitata. Muualla sama
   ruutu piirretään div-elementtinä, jota ei voi kohdistaa eikä klikata. */
button.chk { cursor: pointer; }
button.chk:hover { border-color: var(--text2); }
button.chk:disabled { cursor: progress; opacity: .5; }
.chk.s { border-color: var(--blue-mid); }
.chk.s.on { background: var(--blue-light); border-color: var(--blue); color: var(--blue); }
.chk.t { border-color: var(--green-mid); }
.chk.t.on { background: var(--green-light); border-color: var(--green); color: var(--green); }
.task-p { font-size: 11px; color: var(--text3); text-align: center; font-family: var(--fontti-mono); }
.task-p.on { color: var(--green); font-weight: 600; }

/* --- Opettajan näkymät ---------------------------------------------------- */

.tyokalurivi {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.haku {
  border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface); font-size: 13px; color: var(--text);
  padding: 8px 11px; font-family: var(--fontti); outline: none;
  min-width: 260px; flex: 0 1 320px;
}
.haku:focus { border-color: var(--blue); }
/* Kiinteä leveys, ei sisällön mukainen: muuten koko työkalurivi asettuu
   uudelleen joka kerta kun valittu ryhmä vaihtuu, koska tunnukset ovat eri
   pituisia. Hyppivä rivi näyttää vialta. */
.ryhmavalitsin {
  border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface); font-size: 13px; color: var(--text);
  padding: 8px 11px; font-family: var(--fontti); outline: none;
  width: 160px; flex: 0 0 auto;
}
.ryhmavalitsin:focus { border-color: var(--blue); }
.valinta {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text2); cursor: pointer;
}
.tyokalurivi-tila { margin-left: auto; font-size: 12px; color: var(--text3); }

.painike-korostettu {
  border: none; border-radius: 8px;
  background: var(--blue); color: #FFFFFF;
  font-size: 13px; font-weight: 600; font-family: var(--fontti);
  padding: 8px 14px; cursor: pointer;
}
.painike-korostettu:hover { background: #163F80; }
.painike-korostettu:disabled {
  background: var(--border2); cursor: default;
}

a.tab-btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Taulukko */
.taulu {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.taulu-otsikot, .taulu-rivi {
  display: grid; align-items: center;
  padding: 9px 1.25rem; gap: 10px;
}
.taulu-otsikot {
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.taulu-rivi { border-bottom: 1px solid var(--border); }
.taulu-rivi:last-child { border-bottom: none; }
.taulu-rivi:hover { background: var(--bg); }
.taulu-rivi.suljettu .solu-nimi { color: var(--text3); }

.otsikko-solu {
  font-size: 10px; font-weight: 600; color: var(--text3);
  text-transform: uppercase; letter-spacing: .05em;
  background: none; border: none; padding: 0; text-align: left;
  font-family: var(--fontti);
}
button.otsikko-solu { cursor: pointer; }
button.otsikko-solu:hover { color: var(--text); }
.otsikko-solu.oikealle { text-align: right; }

.solu {
  font-size: 13px; color: var(--text); min-width: 0;
  /* Katkaisu on näyttävä katkaisulta, ei satunnaiselta lyhenteeltä. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.solu-nimi { white-space: normal; }
.solu.himmea { color: var(--text3); font-size: 12px; }
.solu.mono { font-family: var(--fontti-mono); font-size: 12px; }
.solu.oikealle { text-align: right; }
.solu-nimi { font-weight: 500; }
.solu-napit { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.napit-selite { font-size: 12px; color: var(--text3); }

.merkki {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 20px; letter-spacing: .03em;
}
.merkki.paakayttaja { background: var(--amber-light); color: var(--amber); }
.merkki.opettaja { background: var(--blue-light); color: var(--blue); }
.merkki.opiskelija { background: var(--surface2); color: var(--text2); }
.merkki.suljettu { background: var(--punainen-light); color: var(--punainen); }
.merkki.vastuu { background: var(--blue-light); color: var(--blue); }

/* Dialogit */
dialog {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.5rem; max-width: 420px; width: calc(100vw - 2rem);
  background: var(--surface); color: var(--text); font-family: var(--fontti);
  /* Selain keskittää dialogin margin:autolla. Tiedoston alun * { margin: 0 }
     kumoaa sen, joten se palautetaan tässä. */
  margin: auto;
}
dialog::backdrop { background: rgba(26, 25, 22, .35); }
.dialogi-otsikko { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 1rem; }
.dialogi-teksti { font-size: 13px; color: var(--text2); margin-bottom: 1rem; }
.dialogi-napit { display: flex; gap: 8px; justify-content: flex-end; margin-top: 1.25rem; }
.dialogi-napit .painike { width: auto; }
.kentta select {
  border: 1px solid var(--border2); border-radius: 8px; background: var(--surface);
  font-size: 14px; color: var(--text); padding: 9px 11px;
  font-family: var(--fontti); outline: none; width: 100%;
}
.kentta select[multiple] { padding: 6px; }
.kentta select[multiple] option { padding: 4px 5px; border-radius: 4px; }
.kentta-ohje { font-size: 12px; color: var(--text3); line-height: 1.45; }

.salasana-laatikko {
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px 14px;
}
.salasana-rivi { display: flex; justify-content: space-between; gap: 1rem; padding: 4px 0; }
.salasana-lbl { font-size: 12px; color: var(--text3); }
.salasana-arvo { font-family: var(--fontti-mono); font-size: 14px; font-weight: 500; user-select: all; }

.toast {
  position: fixed;
  left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: #FFFFFF;
  border-radius: 8px; padding: 10px 16px;
  font-size: 13px; max-width: min(560px, calc(100vw - 2rem));
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  z-index: 10;
}
.toast.virheellinen { background: var(--punainen); }

/* --- Opetussuunnitelman vaje ---------------------------------------------
   Kolmessa opintojaksossa tehtävien pistesumma jää alle jakson laajuuden.
   Merkintä on huomiota herättävä muttei hälyttävä: kyse ei ole viasta
   sovelluksessa eikä opiskelijan suorituksessa. */

.vaje-merkki { color: var(--amber); font-weight: 600; cursor: help; }

.mod-hdr-vaje {
  font-size: 11px; color: var(--amber);
  background: var(--amber-light); border: 1px solid #EFE0BE;
  border-radius: 6px; padding: 5px 8px; margin-bottom: 10px;
}

.huomio {
  background: var(--amber-light); border: 1px solid #EFE0BE;
  border-radius: var(--radius-lg); padding: 1rem 1.25rem;
  font-size: 12px; color: var(--amber); line-height: 1.5;
}
.huomio strong { display: block; font-size: 13px; margin-bottom: 4px; }
.huomio-lista { margin: 8px 0 0 1.1rem; }
.huomio-lista li { margin-bottom: 2px; }

.tyhja-tila {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 2rem 1.25rem;
  text-align: center; color: var(--text2); font-size: 13px;
}
.tyhja-tila strong { display: block; color: var(--text); font-size: 14px; margin-bottom: 4px; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* --- Kapea näyttö -------------------------------------------------------- */

/* Prototyyppi oli työpöytänäkymä. Opiskelija katsoo korttiaan puhelimella,
   joten kapealla näytöllä koko sivu vierii pystysuunnassa normaalisti ja
   leveät taulukot vierivät vaakasuunnassa omassa säiliössään — sivun runko
   ei koskaan vieri sivusuunnassa. */
@media (max-width: 720px) {
  .app { height: auto; min-height: 100vh; overflow: visible; }
  .main { flex-direction: column; overflow: visible; }
  .content { overflow: visible; padding: 1rem; }

  .topbar { height: auto; flex-wrap: wrap; padding: 10px 1rem; gap: 10px; }
  .topbar-info { order: 2; flex: 1 1 auto; }
  .topbar-title, .topbar-sub { white-space: normal; overflow: visible; }
  .topbar-kayttaja { order: 3; }
  .topbar .painike-kevyt { order: 4; }
  .view-tabs { order: 5; flex: 1 1 100%; }
  .tab-btn { flex: 1; }

  .sidebar {
    width: 100%; min-width: 0; max-height: 45vh;
    border-right: none; border-bottom: 1px solid var(--border);
  }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .student-fields { grid-template-columns: 1fr; }
  .mod-hdr { flex-direction: column; gap: 1rem; }
  .mod-kpis { gap: 1.25rem; }

  .mod-table { overflow-x: auto; }
  .mod-table-head, .mod-table-row { min-width: 540px; }
  .sec-card { overflow-x: auto; }
  .sec-hdr, .task-col-row, .task-row { min-width: 440px; }

  /* Ilman tätä .taulu leikkaisi oikeat sarakkeet pois (overflow: hidden),
     eikä niihin pääsisi käsiksi mitenkään. */
  .taulu { overflow-x: auto; }
  /* Kiinteät sarakkeet vievät jo noin 660 px. Jos min-width on sitä lähellä,
     fr-sarakkeet kutistuvat nollaan ja teksti menee päällekkäin. */
  .taulu-otsikot, .taulu-rivi { min-width: 980px; }
  .haku { min-width: 0; flex: 1 1 100%; }
  .ryhmavalitsin { flex: 1 1 100%; width: auto; }
  .tyokalurivi-tila { margin-left: 0; }
}

/* --- Tuloste ------------------------------------------------------------- */

@media print {
  .app { height: auto; overflow: visible; }
  .main { overflow: visible; height: auto; }
  .content { overflow: visible; padding: 0; }
  .sidebar, .view-tabs, .tab-btn, .painike, .painike-kevyt { display: none; }
  body { background: #FFFFFF; }
  .sec-card, .mod-table, .stat-card, .student-card, .mod-hdr { break-inside: avoid; }
}

/* --- Ohjesivut ------------------------------------------------------------
   Proosaa varten. Yleisreset nollaa marginaalit, joten leipätekstin välit
   määritellään tässä eksplisiittisesti. Mitat on sidottu lukukokemukseen
   eikä sovelluksen taulukoihin: rivin pituus enintään noin 70 merkkiä. */

.ohje { max-width: 44rem; margin: 0 auto; padding-bottom: 3rem; }

.ohje h2 {
  font-size: 20px; font-weight: 600; letter-spacing: -.02em;
  margin: 2.5rem 0 .75rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.ohje h2:first-of-type { margin-top: .5rem; padding-top: 0; border-top: none; }
.ohje h3 { font-size: 15px; font-weight: 600; margin: 1.5rem 0 .5rem; }

.ohje p { margin-bottom: .85rem; }
.ohje ol, .ohje ul { margin: 0 0 .85rem 1.35rem; }
.ohje li { margin-bottom: .4rem; }
.ohje li > ul, .ohje li > ol { margin-top: .4rem; margin-bottom: .4rem; }

.ohje strong { font-weight: 600; }
/* Käyttöliittymän polut ja painikkeiden nimet. Täyte on tarkoituksella pieni:
   isompi jättää näkyvän raon, kun merkintää seuraa pilkku tai piste. */
.ohje .polku {
  font-weight: 500; background: var(--surface2);
  padding: 1px 4px; border-radius: 4px; white-space: nowrap;
}

/* Sisällysluettelo: ohjetta luetaan kysymyksen kanssa, ei alusta loppuun. */
.ohje-sisallys {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 2rem;
}
.ohje-sisallys-otsikko {
  font-size: 11px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text3); margin-bottom: .6rem;
}
.ohje-sisallys ol { margin: 0 0 0 1.2rem; }
.ohje-sisallys li { margin-bottom: .25rem; }
.ohje-sisallys a { color: var(--blue); text-decoration: none; }
.ohje-sisallys a:hover { text-decoration: underline; }

/* Kaksi nostoa: huomio selittää, varoitus estää virheen jota ei voi perua. */
.ohje-huomio, .ohje-varoitus {
  border-radius: var(--radius); padding: .85rem 1rem;
  margin: 1rem 0 1.25rem; border-left: 3px solid;
}
.ohje-huomio { background: var(--blue-light); border-color: var(--blue-mid); }
.ohje-varoitus { background: var(--amber-light); border-color: var(--amber); }
.ohje-huomio p:last-child, .ohje-varoitus p:last-child { margin-bottom: 0; }

@media print {
  .topbar, .ohje-sisallys { display: none; }
  .ohje { max-width: none; }
  .ohje h2 { page-break-after: avoid; }
}
.ohje-sisallys li.kesken { color: var(--text3); }