/* ============================================================================
   OWELLA ERP — designjärjestelmä
   Suunta: TILIKIRJA. Hiljainen, dokumenttimainen, täsmällinen.
   Työkalu jota katsotaan kahdeksan tuntia päivässä — ei markkinointisivu.

   Luvut ovat sankari: tabular-nums, monospace, hiusviivat, ei varjoja.
   Väriä käytetään vain kun se kertoo jotain (tila, virhe) — ei koristeeksi.

   EI kirkasta vihreää. Sivupalkki on VAALEA.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* Pinnat. Paperi KELLERTAA hiukan (#F6F5F1, ennen #F4F5F3): puhdas kylma harmaa on
     laboratorio, ei tyopoyta. Ero on pieni mutta sita katsotaan kahdeksan tuntia paivassa. */
  --ink:    #15181B;   /* grafiitti — teksti, yläpalkki */
  --paper:  #F6F5F1;   /* pohja */
  --card:   #FFFFFF;
  --rule:   #E4E4DE;   /* hiusviiva */
  --rule-2: #EFEFEA;   /* vaaleampi jako */
  --muted:  #5D6660;
  --faint:  #8B938D;

  /* Brändi — laskettu kylläisyys */
  --pine:   #26463C;   /* pääväri: painikkeet, aktiivinen tila */
  --pine-2: #2F5A4B;   /* hover */
  --pine-w: #ECF2EE;   /* pinnan sävy */

  /* ELAVA AKSENTTI. Vain siina, mika on NYT kaynnissa tai valmis - ei koristeena.
     Jos tama olisi joka napissa, se lakkaisi tarkoittamasta mitaan. */
  --lime:   #54A924;
  --lime-w: #F0F7E8;
  --lime-d: #3D7C1A;   /* teksti vaalealla pohjalla — kontrasti riittaa */

  /* Tila — kertoo, ei koristele */
  --brass:   #8A6A2B;  --brass-w: #FAF3E3;
  --brick:   #8E3B2E;  --brick-w: #F9EDEA;

  /* PEHMEA SYVYYS. Ei "korttipino"-varjoja - vain sen verran, etta pinta irtoaa paperista.
     Alkuperainen suunta kielsi varjot kokonaan; se teki nakymasta litteän ja teollisen. */
  --shadow: 0 1px 2px rgba(21,24,27,.04), 0 10px 28px -18px rgba(21,24,27,.22);

  --r: 10px;

  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1;   /* taulukkonumerot kaikkialla */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); height: 100%; }
body {
  background: var(--paper); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14.5px; line-height: 1.5;
  overscroll-behavior: none;
  height: 100%; overflow: hidden;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.012em; }
h2 { font-size: 17px; }
h3 { font-size: 14.5px; }
.mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

/* Silmäotsikko — kertoo rakenteen, ei koristele */
.eyebrow {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 600; font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint);
}

/* ---------------------------------------------------------------- KUORI */
.shell {
  display: grid;
  grid-template-areas: "bar" "main" "nav";
  grid-template-rows: auto 1fr auto;
  height: 100vh; height: 100dvh;
  overflow: hidden;
}

/* Yläpalkki — grafiitti, matala, ei koristeita */
.bar {
  grid-area: bar;
  background: var(--ink); color: #fff;
  padding: calc(env(safe-area-inset-top) + 11px) 16px 11px;
  display: flex; align-items: center; gap: 10px;
  z-index: 50;
}
.bar .logo { font-weight: 600; font-size: 15px; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: 7px; }
.bar .logo .logo-mark { width: 20px; height: 20px; flex: 0 0 auto; }
.bar .tag {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  color: #9BA49D; border: 1px solid #333B35; padding: 2px 7px; border-radius: 3px;
}
/* Versiomerkki tuotenimen perässä — hillitty lime-korostus, ei erillistä laattaa.
   "Owella ERP 2.0" luetaan yhtenä — ei toistoa. */
.bar .logo .name { min-width: 0; }
/* Versiomerkki: pieni lime-yläindeksi ERP:n perässä. em-suhteinen koko pysyy
   oikeassa mittasuhteessa vaikka logo rivittyisi. */
.bar .logo .ver {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: .6em; font-weight: 700; letter-spacing: 0;
  color: #54A924; vertical-align: super; line-height: 1;
  margin-left: 2px;
}
.bar .spacer { flex: 1; }
.bar button {
  background: transparent; border: 1px solid #333B35;
  height: 30px; padding: 0 12px; border-radius: var(--r);
  color: #C9D1CB; font: inherit; font-size: 13px; cursor: pointer;
}
.bar button:hover { background: #232823; color: #fff; }

.main { grid-area: main; overflow-y: auto; min-height: 0; }
.wrap { padding: 16px 14px 32px; }

/* Navigaatio — VAALEA. Aktiivinen merkitään viivalla, ei täytöllä. */
/* Alanavigaatio. Kohteita voi olla 4-6 -> painikkeet JAKAVAT tilan tasan
   (flex:1, min-width:0) eivatka koskaan tyonna riviaan leveaksi.
   Ilman min-width:0 flex-lapsi ei suostu kutistumaan sisaltonsa alle -> ylivuoto. */
.nav {
  grid-area: nav;
  background: var(--card); border-top: 1px solid var(--rule);
  display: flex;
  padding: 5px 2px calc(env(safe-area-inset-bottom) + 5px);
  /* Navi EI VOI tyontaa sivua leveammaksi, oli kohteita 4 tai 8.
     Jos ne eivat mahdu, navi itse vierii - sivu ei. */
  overflow-x: auto;
  scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
/* ══════════════════════════════════════════════════════════════════════════
   HIDDEN VOITTAA AINA (1.215.0)

   Tama ansa on nyt purrut KOLMANNEN kerran: [hidden] on selaimen omassa
   tyylitiedostossa vain `display:none` pienimmalla mahdollisella painoarvolla,
   joten MIKA TAHANSA oma display-saanto kumoaa sen. Luokka .pj-list{display:flex}
   voittaa [hidden]:n, ja elementti jaa nakyviin vaikka JS asetti el.hidden=true.

   Seuraus on aina sama ja aina hiljainen: JS tekee tasmalleen mita kasketaan,
   mikaan ei kaadu, mutta ruudulla nakyy vaara asia. Niin kavi projektilistalle:
   projekti avattiin omaksi sivukseen, lista kaskettiin piiloon — ja lista jai
   nakyviin, joten projekti nakyi yha sen ALAPUOLELLA.

   Ratkaistaan kerran, kaikille. Yksittaisten kohdistusten metsastaminen on
   juuri se tapa jolla tama on paassyt toistumaan.
   ══════════════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }

/* SAMA ANSA KUIN #loginview:ssa: display-saanto KUMOAA hidden-attribuutin, koska
   [hidden] on vain display:none pienemmalla painoarvolla. Ilman tata pois kytketyn
   moduulin nappi jaisi nakyviin - palvelin estaisi sen kylla (403), mutta kayttaja
   nakisi napin joka antaa virheen. Ratkaistaan kohdistuksella, ei !important-lipulla. */
.nav button[hidden] { display: none; }
.nav-toggle { display: none; }   /* näkyy vain kiskotilassa (>=680px) */

.nav button {
  flex: 1 1 0; min-width: 0;
  background: none; border: 0; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; color: var(--faint); font-size: 10px; font-weight: 500;
  border-radius: var(--r);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav button .i { width: 19px; height: 19px; flex: 0 0 auto; }
.nav button.on { color: var(--pine); font-weight: 600; }

/* ---------------------------------------------------------------- KORTIT
   Ei varjoja. Hiusviiva riittää — dokumentti, ei kohotettu paneeli. */
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 14px; padding: 18px; margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card > h2, .card > h3 { margin-bottom: 2px; }
.sub { color: var(--muted); font-size: 13px; }
.card > .sub { margin-bottom: 14px; }

/* Mittarit — tilikirjan nauha, ei värikkäitä laatikoita.
   Numero on iso ja monospace; selite pieni ja hiljainen. */
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  margin-bottom: 12px; overflow: hidden;
}
.stat { padding: 14px 16px; border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.stat .n {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: 24px; letter-spacing: -.02em; line-height: 1.15;
}
.stat .l {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-top: 3px;
}

/* Tilamerkinnät — pieniä, ei pyöreitä pillereitä */
.pill {
  display: inline-block; font-size: 11.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 3px; border: 1px solid;
}
.pill.ok   { background: var(--pine-w);  color: var(--pine);  border-color: #CFDED6; }
.pill.warn { background: var(--brass-w); color: var(--brass); border-color: #E7DBC0; }
.pill.bad  { background: var(--brick-w); color: var(--brick); border-color: #EBD3CD; }

/* Taulukot — tiheät, hiusviivoin. Luvut oikealle ja monospacena. */
.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tbl th {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  text-align: left; font-weight: 600; font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  padding: 7px 10px 7px 0; border-bottom: 1px solid var(--rule);
}
.tbl td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: #FAFBFA; }
.tbl .num { text-align: right; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

/* Lomake */
label {
  display: block; font-size: 12px; font-weight: 600; color: var(--muted);
  margin-bottom: 5px; letter-spacing: .01em;
}
input, select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: #fff; color: var(--ink); margin-bottom: 12px;
}
input:focus, select:focus {
  outline: 2px solid var(--pine); outline-offset: -1px; border-color: var(--pine);
}
input::placeholder { color: var(--faint); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--pine); color: #fff; border: 1px solid var(--pine);
  border-radius: var(--r); padding: 9px 16px;
  font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.btn .i { width: 16px; height: 16px; flex: 0 0 auto; }
.btn:hover { background: var(--pine-2); border-color: var(--pine-2); }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover { background: var(--paper); border-color: var(--faint); }

/* PIENI NAPPI. Sama nappi oli kirjoitettu käsin VIIDELLÄ eri koolla (padding 3px/4px/5px/
   6px/7px, fontti 11.5–13px). Ero ei ole tyylikysymys: rivinapit näyttivät eri kokoisilta
   samassa taulukossa. Yksi koko, yksi nimi. */
.btn.pieni { padding: 4px 9px; font-size: 12px; }

/* ── MOBIILI: taulukot PINOUTUVAT riveiksi ──────────────────────────────────
   Viisi saraketta ei mahdu puhelimeen. Vaakavieritys on huono rahataulukolle:
   luvut jaavat piiloon eika niita voi verrata. Siksi jokainen rivi muuttuu
   omaksi lohkokseen, jossa sarakeotsikko on vasemmalla ja arvo oikealla.

   Otsikot tulevat automaattisesti (data-label, ks. labelTables()) -> uusi
   taulukko ei voi unohtaa niita. Talla tekstin ylivuoto on rakenteellisesti
   estetty, ei tapauskohtaisesti korjattu. */
@media (max-width: 719px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  /* Otsikkorivi piiloon. Taulukoissa ei ole <thead>-elementtia (vain <tr><th>),
     joten kohdistetaan riviin joka SISALTAA th-soluja. */
  .tbl thead, .tbl tr:has(th) { display: none; }
  .tbl tr {
    padding: 12px 0; border-bottom: 1px solid var(--rule);
  }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl tbody tr:hover td { background: transparent; }
  .tbl td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 3px 0; border: 0; text-align: left;
  }
  /* Sarakeotsikko rivin sisalla */
  .tbl td::before {
    content: attr(data-label);
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 600; font-size: 10.5px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--faint);
    flex: 0 0 auto; padding-top: 2px;
  }
  .tbl td:empty { display: none; }
  /* Solu jossa on aliteksti (kohde, sahkoposti, y-tunnus) PINOUTUU:
     selite ylos, sisalto alle koko leveydelle. Muuten nimi ja aliteksti
     jakaisivat rivin vierekkain ja pitka sana katkeaisi keskelta. */
  .tbl td:first-child,
  .tbl td:has(.sub) {
    display: block; padding-bottom: 6px;
  }
  .tbl td:first-child::before,
  .tbl td:has(.sub)::before { display: block; margin-bottom: 2px; }
  .tbl td:first-child > *,
  .tbl td:has(.sub) > *,
  .tbl td:has(.sub) .sub { text-align: left; }

  /* Nimet eivat katkea keskelta sanaa - vain jos on pakko */
  .tbl td { overflow-wrap: break-word; }
  .tbl .num { text-align: right; }
  .tbl td > * { text-align: right; }
  .tbl td .sub { text-align: right; }
}

/* Mikaan ei valu lohkon yli: pitkat sanat katkeavat, kortti ei laajene */
.card, .stat { min-width: 0; }
.wrap { overflow-x: hidden; }
.tbl td, .tbl th { overflow-wrap: anywhere; }

/* Nimikentät — rivittyvät, eivät valu reunan yli */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chips span {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  background: var(--paper); border: 1px solid var(--rule);
  padding: 3px 7px; border-radius: 3px; color: var(--muted);
}

/* Tyhjä tila — suunta, ei tunnelma */
.empty { color: var(--muted); font-size: 13.5px; padding: 18px 0; }

.login { max-width: 340px; margin: 0 auto; padding: 64px 18px; }

/* ================================================================ TABLETTI */
@media (min-width: 600px) {
  .shell {
    grid-template-areas: "bar bar" "nav main";
    grid-template-columns: 78px 1fr;
    grid-template-rows: auto 1fr;
  }
  /* Sivupalkki: VAALEA, hiusviivalla erotettu. Ei tummanvihreää laattaa. */
  .nav {
    flex-direction: column; justify-content: flex-start; gap: 2px;
    background: var(--card); border-top: 0; border-right: 1px solid var(--rule);
    padding: 12px 8px;
  }
  .nav button { flex: 0 0 auto; width: 100%; padding: 10px 4px; font-size: 10px; border-radius: var(--r); }
  .nav button:hover { background: var(--paper); color: var(--ink); }
  .nav button.on { background: var(--pine-w); color: var(--pine); }

  .wrap { padding: 22px 24px 40px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}

/* ================================================================ DESKTOP
   Täysleveä. Aktiivinen navi merkitään viivalla — tilikirjan merkintä. */
@media (min-width: 1100px) {
  .shell { grid-template-columns: 218px 1fr; }

  .nav { padding: 14px 10px; }
  .nav button {
    flex-direction: row; justify-content: flex-start; gap: 11px;
    font-size: 13.5px; padding: 9px 11px; text-align: left;
    border-left: 2px solid transparent; border-radius: 0 var(--r) var(--r) 0;
  }
  .nav button .i { width: 17px; height: 17px; }
  .nav button.on { border-left-color: var(--pine); }

  .wrap { padding: 26px 30px 48px; max-width: none; }
  .stat .n { font-size: 27px; }
  .stat { padding: 16px 18px; }
  .tbl { font-size: 14px; }
}

@media (min-width: 1800px) { .wrap { max-width: 1680px; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }


/* ══════════════════════════════════════════════════════════════════════════
   TYOPOYTA: SIVUPALKKI.

   Mobiilissa navi on ALHAALLA - siella peukalo on. Tyopoydalla se kuuluu
   VASEMPAAN LAITAAN: siella on tilaa, ja lista pysyy nakyvissa samalla kun
   sisaltoa selataan. Ylareunan nappirivi on kompromissi joka ei palvele
   kumpaakaan.

   Sama HTML molemmissa - vain grid-alueet vaihtuvat. Ei kahta navigaatiota,
   ei kahta koodipolkua joka voisi erota.
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 680px) {
  .shell {
    grid-template-areas:
      "nav bar"
      "nav main";
    /* KAPEA IKONIKISKO oletuksena — ikonit näkyvät ja ovat klikattavissa aina.
       Ei tyhjää tummaa laattaa: kapea kisko vie vähän tilaa, paljon selkeyttä. */
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto 1fr;
  }

  .nav {
    flex-direction: column;
    align-items: stretch;
    border-top: 0;
    border-right: 1px solid var(--rule);
    background: var(--card);
    padding: 14px 8px;
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
    /* Kisko istuu grid-alueessa (64px). Auetessaan se LEVIÄÄ sisällön PÄÄLLE
       (position: sticky + kasvava leveys) — sisältö ei nyki auki/kiinni. */
    width: 64px;
    position: sticky;
    top: 0;
    height: 100dvh;
    z-index: 30;
    transition: width .16s ease, box-shadow .16s ease;
  }
  /* Aukeaa kun hiiri on päällä TAI jokin sen elementti on fokuksessa
     (näppäimistökäyttö). Levaitessaan tekstit tulevat näkyviin. */
  .nav:hover, .nav:focus-within, .nav.auki {
    width: 232px;
    box-shadow: 12px 0 28px -18px rgba(20,32,26,.45);
  }

  /* KOSKETUSKYTKIN: iPadilla ei ole hoveria, joten kisko laajennetaan napautuksella.
     Chevron kääntyy auki-tilassa. Piilossa mobiilissa (siellä navi on alapalkki). */
  .nav-toggle {
    align-self: flex-end;
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; padding: 0; margin: 0 2px 4px auto;
    border: 1px solid var(--rule); border-radius: 9px;
    background: #fff; color: var(--muted); cursor: pointer;
    flex: 0 0 auto; transition: background .12s;
  }
  .nav-toggle:hover { background: var(--paper); color: var(--pine); }
  .nav-toggle .i { width: 18px; height: 18px; transition: transform .16s ease; }
  .nav:hover .nav-toggle .i, .nav:focus-within .nav-toggle .i, .nav.auki .nav-toggle .i {
    transform: rotate(180deg);
  }

  /* Tuotenimi sivupalkin ylareunaan - se kuuluu navigaatioon, ei sisaltoon.
     Kiskotilassa näytetään lyhyt merkki "O", auetessa koko nimi. */
  .nav::before {
    content: "O";
    display: block;
    font-family: 'IBM Plex Sans Condensed', sans-serif;
    font-weight: 700; font-size: 15px; letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--pine);
    padding: 2px 0 16px;
    text-align: center;
    white-space: nowrap; overflow: hidden;
  }
  .nav:hover::before, .nav:focus-within::before {
    content: "Owella ERP";
    font-size: 12px; letter-spacing: .08em;
    padding: 2px 10px 16px;
    text-align: left;
  }

  .nav button {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 9px 12px;
    font-size: 13.5px;
    border-radius: 8px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
  }
  .nav button .i { width: 19px; height: 19px; flex: 0 0 auto; }
  /* Kiskotilassa tekstin piilotus tapahtuu leveyden kaventuessa; varmistetaan
     ettei se katkea rumasti kun kisko on kapea. */
  .nav:not(:hover):not(:focus-within) button { justify-content: flex-start; }

  .nav button.on {
    background: var(--pine-w, var(--paper));
    color: var(--pine);
  }
  .nav button.on::after { display: none; }

  .bar { border-bottom: 1px solid var(--rule); }
  .main { padding: 26px 32px 48px; }
  .main > section { max-width: 980px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   KIRJAUTUMINEN. Oma sivu, ei laatikko sisallon paalla.

   Kirjautumissivu on ensimmainen asia jonka kayttaja nakee - ja ainoa sivu
   jonka ulkopuolinen nakee. Se kertoo MIHIN ollaan kirjautumassa (yrityksen
   nimi), jotta kukaan ei syota tunnuksiaan vaaraan tyotilaan.
   ══════════════════════════════════════════════════════════════════════════ */
/* :not([hidden]) — display-saanto KUMOAISI hidden-attribuutin, koska [hidden] on
   vain display:none pienemmalla painoarvolla. Ilman tata kirjautumisruutu jaisi
   nakyviin sisaankirjautumisen jalkeen: sivu toimisi, mutta kayttaja ei nakisi sita.
   Ratkaistaan kohdistuksella, EI !important-lipulla. */
#loginview:not([hidden]) {
  min-height: 100vh; min-height: 100dvh;
  height: 100%; overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--paper);
}

.login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 100vh; min-height: 100dvh;
}
.login .card {
  width: 100%;
  max-width: 380px;
  padding: 30px 28px 26px;
}
.login .card h2 { font-size: 21px; margin-top: 2px; }
.login .btn { margin-top: 18px; }

/* Tyopoydalla: vasemmalla tunnus, oikealla lomake. Tyhja tila ei ole hukkaa -
   se kertoo etta tama on OMA sivu, ei modaali jonka voi ohittaa. */
@media (min-width: 860px) {
  #loginview:not([hidden]) { grid-template-columns: 1fr 1fr; }

  .login-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 56px;
    background: var(--pine);
    color: #F4F5F3;
  }
  .login-brand .eyebrow { color: rgba(244,245,243,.62); }
  .login-brand h1 {
    font-size: 30px; font-weight: 600; letter-spacing: -.02em;
    margin: 10px 0 14px;
  }
  .login-brand p {
    font-size: 14px; line-height: 1.6;
    color: rgba(244,245,243,.74);
    max-width: 34ch;
  }
  .login-brand .foot {
    margin-top: auto; padding-top: 40px;
    font-size: 12px; color: rgba(244,245,243,.5);
  }
}
@media (max-width: 859px) {
  .login-brand { display: none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   MODUULIVALIKKO JA ALAPALKIN RAJAUS

   Alapalkissa oli 19 painiketta, jotka vierivät vaakasuunnassa. Vieritettävä
   navigaatio on navigaatio jota ei lueta: käyttäjä näkee neljä ensimmäistä ja
   olettaa, että ne ovat kaikki. Loput ovat olemassa vain sille, joka jo tietää
   niiden olevan siellä.

   Nyt alapalkissa on VAIN TÄRKEIMMÄT + Valikko. Kaikki muu on moduulivalikossa,
   joka on ryhmitelty ja haettavissa.

   Sama ratkaisu kuin vanhassa: musta yläpalkki + "⊞ Kaikki moduulit", ja
   alapalkissa viisi kohdetta (Koti / Projektit / Kuvaa / Laskut / Tunnit).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Yläpalkin nappi ── */
.bar .allbtn {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.09); border: 0; color: inherit;
  padding: 7px 11px; border-radius: var(--r); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 500;
}
.bar .allbtn:hover { background: rgba(255,255,255,.16); }
.bar .allbtn svg { width: 15px; height: 15px; }

/* ── Alapalkki: vain tärkeimmät ──
   MOBIILISSA piilotetaan kaikki paitsi ne joilla on data-prim, plus Valikko.

   HUOM: [hidden] on yhä voimassa — moduulin pois kytkeminen ja roolirajaus
   piilottavat painikkeen riippumatta siitä, onko se ensisijainen. Tämä sääntö
   ei saa kumota sitä. */
.burger { display: none; }

@media (max-width: 599px) {
  .nav button:not([data-prim]):not(.burger) { display: none; }
  .nav .burger:not([hidden]) {
    display: flex;
    flex-direction: column; align-items: center; gap: 2px;
    flex: 1 1 0; min-width: 0;
    background: none; border: 0; cursor: pointer; font: inherit;
    padding: 6px 2px; color: var(--faint); font-size: 10px; font-weight: 500;
  }
  .nav { overflow-x: visible; }          /* ei enää vieritystä: kaikki mahtuu */
  .bar .allbtn-t { display: none; }      /* nappi kutistuu ikoniksi */
}

/* ── Valikko ── */
.mm {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(13,14,16,.42);
  display: flex;
}
.mm[hidden] { display: none; }

.mm-panel {
  background: var(--card);
  width: min(340px, 86vw);
  display: flex; flex-direction: column;
  padding: 18px 16px calc(env(safe-area-inset-bottom) + 18px);
  box-shadow: 0 0 40px rgba(0,0,0,.18);
  /* VASEMMALTA, kuten pyydetty. Alapalkin nappi on oikealla, valikko vasemmalla:
     peukalo avaa, silmä lukee vasemmalta. */
  animation: mm-in .18s ease-out;
}
@keyframes mm-in { from { transform: translateX(-14px); opacity: .6; } }

.mm-head { display: flex; align-items: center; margin-bottom: 12px; }
.mm-head strong { font-size: 15px; }
.mm-x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 17px; color: var(--muted); padding: 4px 6px; line-height: 1;
}

.mm input[type="search"] {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper); color: inherit; box-sizing: border-box;
}

.mm-lista { overflow-y: auto; margin-top: 14px; }

.mm-ryhma { margin-bottom: 16px; }
.mm-ryhma[hidden] { display: none; }
.mm-ryhma h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 6px;
}

.mm-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 14.5px;
  padding: 9px 8px; border-radius: var(--r); color: inherit; text-align: left;
}
.mm-item:hover { background: var(--paper); }
.mm-item[hidden] { display: none; }
.mm-item.on { color: var(--pine); font-weight: 600; }
.mm-item svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--faint); }
.mm-item.on svg { color: var(--pine); }

.mm-tyhja { color: var(--muted); font-size: 14px; padding: 10px 8px; }

/* Työpöydällä valikko on paneeli, ei koko sivun laatikko — sivunavigaatio on
   jo näkyvissä, joten valikko on oikotie, ei ainoa reitti. */
@media (min-width: 680px) {
  .mm { justify-content: flex-start; padding-left: 232px; }
  .mm-panel { width: 380px; border-right: 1px solid var(--rule); }
}

/* ══════════════════════════════════════════════════════════════════════════
   LIGHTBOX-MODAALI — toiminnot avautuvat tähän, EI sivulle.

   Periaate: lomakkeet, valinnat ja lisäykset eivät kuulu näkymän jatkoksi vaan
   painikkeen taakse, joka avaa modaalin. Näkymä pysyy luettavana; toiminto on
   erillinen hetki.

   RESPONSIIVISUUS on rakennettu tähän, ei erillisenä:
   - Puhelin: pohjalevy (bottom-sheet). Nousee alhaalta, tarttuu peukalolle, ja
     jättää tilaa home-indicatorille (safe-area-inset-bottom). Enintään 92vh, sisältö
     vierii — lomake ei jää näytön alle.
   - Tabletti/työpöytä: keskitetty kortti, enintään 560px leveä.
   Sama merkintä molemmissa; vain sijoittelu vaihtuu.
   ══════════════════════════════════════════════════════════════════════════ */
.lb {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(13,14,16,.46);
  display: flex; align-items: flex-end; justify-content: center;
  /* Puhelin: kiinni alareunaan (bottom-sheet). */
}
.lb[hidden] { display: none; }

.lb-card {
  background: var(--card);
  width: 100%;
  max-height: 92vh;
  display: flex; flex-direction: column;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.22);
  padding: 6px 18px calc(env(safe-area-inset-bottom) + 18px);
  animation: lb-up .22s cubic-bezier(.2,.7,.3,1);
}
@keyframes lb-up { from { transform: translateY(24px); opacity: .7; } }

/* Vetokahva vain puhelimessa — kertoo että levyn voi sulkea. */
.lb-grip {
  width: 38px; height: 4px; border-radius: 2px; background: var(--rule);
  margin: 8px auto 4px; flex: 0 0 auto;
}

.lb-head {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0 12px; flex: 0 0 auto;
}
.lb-head h3 { font-size: 16px; margin: 0; }
.lb-x {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 20px; color: var(--muted); padding: 4px 8px; line-height: 1;
  min-width: 40px; min-height: 40px;   /* mobiilin kosketuskohde ≥ 40px */
}
.lb-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lb-foot {
  display: flex; gap: 10px; padding-top: 14px; flex: 0 0 auto;
  border-top: 1px solid var(--rule-2); margin-top: 14px;
}
.lb-foot .btn { flex: 1 1 0; }        /* napit täyttävät leveyden puhelimessa */
/* Tabletti ja työpöytä: keskitetty kortti, ei pohjalevy. */
@media (min-width: 640px) {
  .lb { align-items: center; padding: 24px; }
  .lb-card {
    width: min(560px, 100%);
    border-radius: 16px;
    box-shadow: var(--shadow), 0 24px 64px -24px rgba(0,0,0,.4);
    padding: 6px 24px 22px;
  }
  .lb-grip { display: none; }         /* kahva vain kosketuksella */
  .lb-foot { justify-content: flex-end; }
  .lb-foot .btn { flex: 0 0 auto; min-width: 120px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LOMAKKEEN ASETTELU — järkevä palstoitus modaaleissa.

   Periaate: puhelimessa kaikki allekkain (yksi palsta ei koskaan tunnu ahtaalta
   kapealla näytöllä). Tabletilla ja työpöydällä lyhyet kentät — luvut, päivät,
   postinumerot, valinnat — asettuvat vierekkäin, jotta lomake ei veny turhaan
   pystyyn ja toisiinsa liittyvät kentät ovat samalla rivillä.

   .frow          = rivi joka jakautuu palstoihin ≥560px (muuten allekkain)
   .frow.f-2      = kaksi yhtä leveää palstaa
   .frow.f-3      = kolme palstaa
   .fspan-2       = kenttä joka vie kaksi palstaa (esim. pitkä nimi kolmen palstan rivillä)
   .fgroup        = looginen ryhmä otsikolla (isot lomakkeet: "Perustiedot", "Vastuu"…)
   .fnarrow       = kapea kenttä (luku/pvm) — rivillä se ei veny leveäksi turhaan
   ══════════════════════════════════════════════════════════════════════════ */
.frow { display: grid; grid-template-columns: 1fr; gap: 0 12px; }
.frow > .fcell { min-width: 0; }              /* estää gridin ylivuodon pitkillä arvoilla */

/* Ryhmä: ohut yläviiva + pieni otsikko erottaa osiot toisistaan isossa lomakkeessa. */
.fgroup { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.fgroup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.fgroup > h4 {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 8px;
}

/* Modaalin kentät saavat oletusvälin, jotta template-lomakkeet näyttävät siisteiltä
   ilman että jokaiseen labeliin kirjoitetaan margin. */
.lb-body label { display: block; font-size: 12.5px; color: var(--muted); margin: 10px 0 4px; }
.lb-body .fgroup > h4 + .frow label:first-child,
.lb-body .frow:first-child label:first-child { margin-top: 0; }
.lb-body input, .lb-body select, .lb-body textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--paper); color: inherit;
}
.lb-body textarea { resize: vertical; min-height: 64px; }

@media (min-width: 560px) {
  .frow.f-2 { grid-template-columns: 1fr 1fr; }
  .frow.f-3 { grid-template-columns: 1fr 1fr 1fr; }
  .frow .fspan-2 { grid-column: span 2; }
  /* Rivin ensimmäisen kentän label ei saa työntyä irti kun kentät menevät vierekkäin. */
  .frow.f-2 > .fcell > label:first-child,
  .frow.f-3 > .fcell > label:first-child { margin-top: 10px; }
}

/* Viestikellon lukumäärä. Punainen piste ilman lukua kertoo että jotain on;
   luku kertoo paljonko — ja se on ero "vilkaisen myöhemmin" ja "avaan nyt" välillä. */
.bell-n {
  background: var(--brick); color: #fff; font-size: 11px; font-weight: 600;
  min-width: 17px; height: 17px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.bell-n[hidden] { display: none; }


/* ============================================================================
   ELAVYYS (1.3.0). Niko: "ei niin teollinen".

   Suunta on yha TILIKIRJA - luvut ovat sankari eika vari koristele. Mutta:
     - paperi kellertaa hiukan (kylma harmaa on laboratorio, ei tyopoyta)
     - pinta irtoaa paperista pehmealla varjolla (litteä nakyma nayttaa keskeneraiselta)
     - VARI KERTOO TILAN, ja se nakyy rivin vasemmassa reunassa yhdella silmayksella

   Boldness on kaytetty YHTEEN paikkaan: kiertokiskoon (.kisko), joka nayttaa mihin
   meidan toimivaltamme loppuu. Kaikki muu pysyy hiljaisena.
   ============================================================================ */

.btn { transition: background .12s, border-color .12s, transform .08s; }
.btn:active { transform: translateY(1px); }

/* RIVIN VASEN REUNA = TILA. Ainoa "koriste" joka ei ole koriste: se kertoo, kumpi
   riveista vaatii sinua TANAAN, ilman etta luet yhtaan sanaa. */
.rivi {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: 12px; background: var(--card); margin-top: 10px; cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.rivi:hover { border-color: #CFD3CD; transform: translateY(-1px); box-shadow: var(--shadow); }
.rivi:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.rivi.odottaa  { border-left-color: var(--brass); }
.rivi.myohassa { border-left-color: var(--brick); }
.rivi.valmis   { border-left-color: var(--lime); }
.rivi .num { margin-left: auto; text-align: right; white-space: nowrap; }

.pill-lime  { background: var(--lime-w);  color: var(--lime-d); }
.pill-brass { background: var(--brass-w); color: var(--brass); }
.pill-brick { background: var(--brick-w); color: var(--brick); }
.pill-pine  { background: var(--pine-w);  color: var(--pine); }

/* ---------------------------------------------------- KIERTOKISKO (signatuuri)
   Meidan askeleet ovat TAYTETTYJA pisteita. Fennoan askeleet (hyvaksynta, maksu) ovat
   ONTTOJA ja katkoviivalla: me emme hyvaksy emmeka maksa laskua.

   Se ero on koko moduulin tarkein saanto - ja se on piirretty nakyviin, jottei sita
   tarvitse lukea. */
.kisko { display: flex; margin: 14px 0 4px; }
.askel { flex: 1; position: relative; padding-top: 22px; }
.askel:before {
  content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 2px;
  background: var(--rule);
}
.askel:first-child:before { left: 50%; }
.askel:last-child:before  { right: 50%; }
.askel i {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--rule);
}
.askel.tehty:before { background: var(--pine); }
.askel.tehty i      { background: var(--pine); border-color: var(--pine); }
.askel.nyt i        { background: var(--lime); border-color: var(--lime);
                      box-shadow: 0 0 0 4px var(--lime-w); }
.askel.fennoa i      { background: var(--card); border-style: dashed; border-color: var(--pine); }
.askel.fennoa:before { background: repeating-linear-gradient(90deg,
                        var(--rule) 0 4px, transparent 4px 8px); }
.askel span {
  display: block; text-align: center; font-size: 11px; color: var(--faint);
  font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}
.askel.tehty span, .askel.nyt span { color: var(--ink); }

/* Fennoan raja: mihin meidan toimivaltamme loppuu. */
.raja {
  border: 1px dashed #C9D3CC; border-radius: 8px; padding: 12px;
  background: #FBFCFB; font-size: 13px; color: var(--muted); margin-top: 12px;
}
.raja b { color: var(--pine); }

/* Numeroidut lohkot kasittelynakymassa. Numero on TOTTA: kasittely etenee tassa
   jarjestyksessa, kuten vanhassakin. Se ei ole koriste. */
.lohko { border-top: 1px solid var(--rule-2); padding: 15px 0; }
.lohko:first-of-type { border-top: 0; padding-top: 2px; }
.lohko-otsikko { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.lohko-otsikko .n {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint);
}

.kentta { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13.5px; }
.kentta > span { color: var(--muted); }
.kentta > b { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }

.jako { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; }
.palkki { flex: 1; height: 6px; background: var(--rule-2); border-radius: 4px; overflow: hidden; }
.palkki i { display: block; height: 100%; background: var(--pine); }

@media (prefers-reduced-motion: reduce) {
  .rivi, .btn { transition: none; }
  .rivi:hover { transform: none; }
}

/* Mielenrauhan merkinnän kuittausruutu — pyöristetty, lime kun valmis.
   Sama tick kuin simulaatiossa: iso kohde peukalolle, selkeä valmis-tila. */
.mr-tick{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:0 0 auto;margin-top:1px;
  border:1.6px solid #CBD3CC;border-radius:6px;background:#fff;cursor:pointer;
  display:grid;place-items:center;transition:.12s;
}
.mr-tick:hover{border-color:var(--lime)}
.mr-tick:checked{background:var(--lime);border-color:var(--lime)}
.mr-tick:checked::after{content:"";width:10px;height:6px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translateY(-1px)}

/* Kortin otsikkorivin ikoninappi (esim. käsittelyhistoria, ratasvalikko oikeassa
   yläkulmassa). Sama koko ja kohdistus kaikissa osioissa. */
.ikoni-nappi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--rule); border-radius: 9px;
  background: #fff; color: var(--ink); cursor: pointer;
}
.ikoni-nappi:hover { background: var(--paper); }

/* RATASVALIKKO: asetuskortin sisältö piiloon, avataan otsikkorivin ratas-ikonista.
   Ei erillistä body-kääreä (div-tasapaino säilyy) — CSS piilottaa otsikkorivin
   lisäksi kaiken kun kortti on suljettu. */
.ratas-otsikko { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card.ratas-suljettu > *:not(.ratas-otsikko) { display: none; }

/* SUOSIKKITÄHTI moduulivalikossa.
   Tähti on oma painikkeensa rivin sisällä: klikkaus ei saa avata moduulia
   (siitä huolehtii stopPropagation), joten se tarvitsee oman kosketusalueen.
   44 px on pienin luotettava kosketuskohde työmaakäsineillä. */
.mm-item { position: relative; padding-right: 44px; }
.mm-tahti {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 16px; line-height: 1;
  color: var(--muted); cursor: pointer; user-select: none;
}
.mm-tahti:hover { background: var(--rule); color: var(--ink); }
.mm-tahti.on { color: var(--brass); }

/* KORTTIMOOTTORIN TYÖKALUT.
   Napit ovat kortin sisällä ylhäällä eivätkä leijuvana kerroksena: leijuva
   peittäisi kortin sisältöä juuri kun käyttäjä yrittää lukea mitä on
   siirtämässä. Näkyvät vain muokkaustilassa. */
.kortti-tyokalut {
  display: flex; gap: 6px; justify-content: flex-end;
  margin: -4px 0 8px; flex-wrap: wrap;
}
.kortti-palkki { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Käyttäjän piilottama kortti. Oma luokka eikä hidden-attribuutti, jotta
   moottori ei taistele sovelluksen oman piilotuslogiikan kanssa. */
.card.kortti-piilossa { display: none; }

/* ═══ HALLINNAN ALAPALKKI JA VALIKKO ═══
   Hallinnassa on yhdeksän osiota. Kapealla näytöllä ne puristuvat
   lukukelvottomiksi tai vierivät piiloon palkin oikeaan reunaan — eli juuri
   ne, joita ei näy, ovat löytymättömissä.

   Ratkaisu: palkkiin jää neljä useimmin käytettyä, loput avautuvat valikosta
   oikeasta alareunasta. Leveällä näytöllä kaikki mahtuvat, joten siellä
   valikkoa ei tarvita. */
/* Kapealla näytöllä palkissa näkyvät vain käyttäjän valitsemat. Leveällä
   kaikki mahtuvat, joten siellä ei piiloteta mitään. */
@media (max-width: 720px) {
  .nav button.palkki-piilossa { display: none; }
}

/* Tähti valikossa: lisää tai poista alapalkista. Oma kosketusalue, jottei
   painallus avaa osiota vahingossa. */
.valikko-tahti {
  margin-left: auto; flex: 0 0 auto;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 15px; color: var(--muted); cursor: pointer;
}
.valikko-tahti:hover { background: var(--rule); color: var(--ink); }
.valikko-tahti.on { color: var(--brass); }

/* VALIKKONAPPI KELLUU — se ei ole alapalkin sisällä.
   Syy: jos alapalkki jää jollain laitteella ruudun ulkopuolelle, palkin sisällä
   oleva nappi katoaa sen mukana — eli juuri silloin kun sitä eniten
   tarvittaisiin. Kiinnitetty ikkunaan eikä asetteluun, joten se näkyy aina.

   Nappi on näkyvissä KAIKILLA leveyksillä: se on ainoa varma reitti jokaiseen
   osioon silloinkin kun palkki pettää. */
#valikko-nappi {
  position: fixed;
  right: 14px; bottom: calc(env(safe-area-inset-bottom) + 78px);
  z-index: 55;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 6px 20px rgba(0,0,0,.32);
  cursor: pointer;
}
#valikko-nappi svg { width: 22px; height: 22px; }
#valikko-nappi:active { transform: scale(.96); }

/* Paneeli avautuu ALHAALTA OIKEALTA, ei keskeltä: sormi ei peitä valintoja
   ja sulkeminen onnistuu samalla peukalolla joka sen avasi. */
#valikkopaneeli {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(21, 24, 27, .45);
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 0 8px calc(env(safe-area-inset-bottom) + 64px) 8px;
}
#valikkopaneeli[hidden] { display: none; }

.valikko-sisalto {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  width: min(320px, 100%); max-height: 70vh; overflow-y: auto; padding: 10px;
}
.valikko-otsikko {
  display: flex; align-items: center; justify-content: space-between;
  padding: 2px 4px 10px; border-bottom: 1px solid var(--rule); margin-bottom: 8px;
}

/* Kohteet ovat 46 px korkeita: työmaakäsineillä pienempään ei osu. */
.valikko-kohde {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: 46px; padding: 8px 10px;
  background: none; border: 0; border-radius: 10px;
  color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.valikko-kohde:hover { background: var(--paper); }
.valikko-kohde.on { background: var(--paper); font-weight: 700; }
.valikko-kohde .i { width: 18px; height: 18px; flex: 0 0 auto; }

/* Kentän otsikko rivin sisällä. Käytetään silloin kun kenttä on toisen solun
   sisällä eikä saa otsikkoa sarakeotsikosta — esim. työtilan tunniste, joka on
   yrityksen nimen alla. Ilman otsikkoa sitä ei voi tunnistaa tunnisteeksi. */
.kentta-otsikko {
  font-family: 'IBM Plex Sans Condensed', sans-serif;
  font-weight: 600; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}

/* ══════════════════════════════════════════════════════════════════════════
   PROJEKTILISTA (1.201.0) — vastaa vanhan ERP:n rakennetta.

   Vanhassa lista on hero + tilavalilehdet + tyokalurivi + kortit. Uudessa oli
   pelkka rivilista, josta ei nahnyt tilaa, kustannuspaikkaa eika aikataulua.
   Luokat on nimetty pj-* jotta ne eivat tormaa vanhojen nakymien .card-tyyleihin.
   ══════════════════════════════════════════════════════════════════════════ */

.pj-hero { background: var(--card, #fff); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.pj-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pj-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pj-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.pj-kpi { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.pj-kpi .l { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6B7A70); }
.pj-kpi .v { font-size: 22px; font-weight: 800; line-height: 1.15; }
.pj-kpi .v.ok { color: var(--pine); }
.pj-kpi .s { font-size: 12px; color: var(--muted, #6B7A70); }

.pj-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 12px; }
.pj-tabs::-webkit-scrollbar { display: none; }
.pj-tab { flex: 0 0 auto; min-width: 132px; text-align: left; background: var(--card, #fff);
  border: 1px solid var(--rule); border-top: 3px solid var(--rule); border-radius: 12px;
  padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; }
.pj-tab.on { box-shadow: 0 1px 0 var(--rule); }
.pj-tab .ico { font-size: 14px; }
.pj-tab .nimi { font-size: 12.5px; font-weight: 700; }
.pj-tab .cnt { font-size: 19px; font-weight: 800; line-height: 1.1; }
.pj-tab .sum { font-size: 11.5px; color: var(--muted, #6B7A70); }
.pj-tab .bar { display: block; height: 4px; border-radius: 99px; background: var(--rule); overflow: hidden; margin-top: 4px; }
.pj-tab .bar i { display: block; height: 100%; }

.pj-tyokalut { margin-bottom: 12px; }
.pj-haku { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; font-size: 15px; }
.pj-nayta { margin: 8px 2px; font-size: 14px; font-weight: 700; }
.pj-nayta .sub { font-weight: 600; }
.pj-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pj-chip { background: var(--card, #fff); border: 1px solid var(--rule); border-radius: 999px;
  padding: 7px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.pj-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pj-kp { border: 1px solid var(--rule); border-radius: 999px; padding: 7px 12px; font-size: 13.5px; font-weight: 700; background: var(--card, #fff); }
.pj-ryhma { display: inline-flex; border: 1px solid var(--rule); border-radius: 999px; overflow: hidden; }
.pj-rtab { background: var(--card, #fff); border: 0; padding: 7px 14px; font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit; color: var(--pine); }
.pj-rtab.on { background: var(--paper); }

.pj-list { display: flex; flex-direction: column; gap: 10px; }
.pj-list.empty { padding: 20px; text-align: center; color: var(--muted, #6B7A70); }
.pj-ryhmalohko { display: flex; flex-direction: column; gap: 10px; margin-bottom: 6px; }
.pj-ryhma-otsikko { font-size: 13px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--muted, #6B7A70); margin-top: 6px; }

.pj-kortti { position: relative; background: var(--card, #fff); border: 1px solid var(--rule);
  border-radius: 14px; overflow: hidden; padding-left: 6px; }
.pj-kortti::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--juova, var(--pine)); }
.pj-sisus { padding: 12px 14px; cursor: pointer; }
.pj-tila { position: absolute; top: 10px; right: 12px; z-index: 2; border: 0; border-radius: 999px;
  font-size: 11px; font-weight: 800; padding: 4px 11px; cursor: pointer; font-family: inherit; }
.pj-ylä { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-right: 120px; }
.pj-nro { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; color: var(--muted, #6B7A70); }
.pj-tyyppi { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  border-radius: 5px; padding: 2px 7px; }
.pj-tyyppi.urakka { background: #FBEEDD; color: #8A4F12; }
.pj-tyyppi.tunti { background: #EEF1F3; color: #42525A; }
.pj-nimi { font-size: 16.5px; font-weight: 800; margin-top: 3px; line-height: 1.25; }
.pj-kp-rivi, .pj-asiakas { font-size: 12px; color: var(--muted, #6B7A70); margin-top: 2px; }
.pj-raha { display: flex; gap: 22px; flex-wrap: wrap; border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 9px; }
.pj-m { display: flex; flex-direction: column; gap: 1px; }
.pj-m .l { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted, #6B7A70); }
.pj-m .v { font-size: 15.5px; font-weight: 800; }
.pj-raha-tyhja { border-top: 1px solid var(--rule); margin-top: 10px; padding-top: 9px; font-size: 13px; color: var(--muted, #6B7A70); }
.pj-aika { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: var(--muted, #6B7A70); }
.pj-aika .rata { flex: 1; height: 6px; border-radius: 99px; background: var(--rule); overflow: hidden; min-width: 60px; }
.pj-aika .rata i { display: block; height: 100%; background: var(--lime-d, #54A924); }
.pj-aika .pct { font-weight: 800; }

@media (max-width: 599px) {
  .pj-ylä { padding-right: 0; }
  .pj-tila { position: static; margin-bottom: 8px; }
  .pj-raha { gap: 14px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROJEKTIN VALILEHDET (1.202.0) — 12 valilehtea kolmessa ryhmassa, kuten vanhassa.
   Valilehti on SUODATIN samassa #pdetail-elementissa: kortit ovat paikoillaan ja
   vain nakyvyys vaihtuu. Siksi tama ei kosketa korttien rakennetta.
   ══════════════════════════════════════════════════════════════════════════ */

.ptab-palkki { position: sticky; top: 0; z-index: 6; background: var(--paper, #F6F5F1);
  border: 1px solid var(--rule); border-radius: 12px; padding: 6px; margin: 12px 0;
  display: flex; flex-direction: column; gap: 4px; }
.ptab-ryhma { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.ptab-ryhma::-webkit-scrollbar { display: none; }
.ptab-ryhma-nimi { flex: 0 0 auto; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--rvari); padding: 0 8px 0 4px; }
.ptab { flex: 0 0 auto; background: transparent; border: 0; border-bottom: 3px solid transparent;
  padding: 8px 11px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit;
  color: var(--muted, #6B7A70); border-radius: 8px 8px 0 0; white-space: nowrap; }
.ptab .ico { margin-right: 5px; }
.ptab:hover { background: rgba(0, 0, 0, .04); }
.ptab.on { color: var(--ink); border-bottom-color: var(--rvari); background: var(--card, #fff); }

/* Piilotus koskee VAIN valilehtikortteja — hero-kortti ja muut ilman data-ptabia
   nakyvat aina. */
#pdetail [data-ptab] { display: none; }
#pdetail [data-ptab].ptab-on { display: block; }

/* ══════════════════════════════════════════════════════════════════════════
   LASKUJEN KIERTO (1.203.0) — vastaa vanhan ostokierto-ui.php:n rakennetta:
   hero-KPI:t, valilehdet joissa lukumaara JA euromaara, haku ja rivi jossa
   toimittajan nimikirjaimet + projekti.
   ══════════════════════════════════════════════════════════════════════════ */

.ok-hero { background: var(--card, #fff); border: 1px solid var(--rule); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.ok-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ok-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.ok-kpi { border: 1px solid var(--rule); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.ok-kpi .l { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #6B7A70); }
.ok-kpi .v { font-size: 22px; font-weight: 800; line-height: 1.15; }
.ok-kpi .v.ok { color: var(--pine); }
.ok-kpi .v.warn { color: var(--brass); }
.ok-kpi .v.neg { color: var(--brick); }
.ok-kpi .s { font-size: 12px; color: var(--muted, #6B7A70); }

.ok-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-bottom: 10px; }
.ok-tabs::-webkit-scrollbar { display: none; }
.ok-tab { flex: 0 0 auto; min-width: 138px; text-align: left; background: var(--card, #fff);
  border: 1px solid var(--rule); border-top: 3px solid var(--rule); border-radius: 12px;
  padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; }
.ok-tab.on { border-top-color: var(--pine); }
.ok-tab .ico { font-size: 14px; }
.ok-tab .nimi { font-size: 12.5px; font-weight: 700; }
.ok-tab .cnt { font-size: 19px; font-weight: 800; line-height: 1.1; }
.ok-tab .sum { font-size: 11.5px; color: var(--muted, #6B7A70); }
.ok-tab .bar { display: block; height: 4px; border-radius: 99px; background: var(--rule); overflow: hidden; margin-top: 4px; }
.ok-tab .bar i { display: block; height: 100%; background: var(--pine); }

.ok-search { width: 100%; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px;
  font-size: 15px; margin-bottom: 10px; }

.rivi.ok-inv { display: flex; align-items: flex-start; gap: 11px; }
.ok-av { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
.ok-inv-main { flex: 1; min-width: 0; }
.ok-proj { font-size: 12px; color: var(--pine); margin-top: 2px; }
.ok-proj.sub { color: var(--muted, #6B7A70); }

/* ══════════════════════════════════════════════════════════════════════════
   OSTOLASKUN LOHKOT (1.204.0) — kayttajakohtainen jarjestys ja nakyvyys.
   Jarjestys tehdaan CSS:n order-arvolla, ei siirtelemalla elementteja: siirtely
   rikkoisi tapahtumankasittelijat ja id-viittaukset (kier-rivit-<id>).
   ══════════════════════════════════════════════════════════════════════════ */

#kier-detail { display: flex; flex-direction: column; }
#kier-detail .ok-blk { order: 0; }
.ok-lohko-ohjaus { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; }
.ok-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Ostolaskun PDF upotettuna (1.208.0). <img> ei osaa piirtaa PDF:aa, joten PDF
   naytetaan kehyksessa — muuten "Laskun kuva" -otsikon alla ei ole kuvaa. */
.lasku-pdf { width: 100%; height: 70vh; min-height: 420px; border: 1px solid var(--rule);
  border-radius: 10px; background: #fff; }
@media (max-width: 599px) { .lasku-pdf { height: 58vh; min-height: 320px; } }