/* Objektijuht. Kerge välimus: süsteemifont, kaalud 400 ja 500, ikoonijoon 1,5. Värv tuleb töödest, kest on neutraalne. */
:root {
  --taust: #f5f6f7; --pind: #fff; --joon: #e3e6ea; --joon2: #eef0f2; --tekst: #16181d; --hall: #5f6672; --hele: #98a0ab;
  --must: #16181d; --punane: #e5484d; --oht: #c2413b; --r: 10px;
  --nimi-l: 190px; --aeg-l: 92px;
  font: 400 14px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--tekst); background: var(--taust);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body, #juur { margin: 0; height: 100%; }
h1, h2, h3, p, ul, dl, dd, fieldset { margin: 0; padding: 0; }
h1 { font-size: 20px; font-weight: 500; }
h2 { font-size: 16px; font-weight: 500; }
h3 { font-size: 12px; font-weight: 500; color: var(--hall); margin: 16px 0 6px; }
ul { list-style: none; }
b { font-weight: 500; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--must); outline-offset: 2px; }
.ik { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tapp { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--v); flex: none; }
.tyhi { color: var(--hall); padding: 18px 0; }

/* ---------- nupud ja väljad ---------- */
.nupp { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 9px; background: var(--must); color: #fff; font-weight: 500; white-space: nowrap; }
.nupp:disabled { opacity: .5; cursor: default; }
.nupp--teine { background: var(--joon2); color: var(--tekst); }
.nupp--oht { background: none; color: var(--oht); padding-left: 4px; padding-right: 4px; }
.nupp--lai { width: 100%; }
.tekstinupp { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 8px; border-radius: 8px; color: var(--hall); }
.tekstinupp:hover { background: var(--joon2); color: var(--tekst); }
.ikn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--hall); flex: none; }
.ikn:hover { background: var(--joon2); color: var(--tekst); }
.ikn.on { background: var(--must); color: #fff; }
.valik { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--joon2); }
.valik button { border: 0; background: none; padding: 5px 13px; border-radius: 7px; color: var(--hall); }
.valik .on { background: #fff; color: var(--tekst); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.vali { display: grid; gap: 5px; font-size: 13px; color: var(--hall); min-width: 0; }
.vali input, .vali select, .vali textarea, .uusmark select, .uusmark textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--joon); border-radius: 9px; background: #fff; color: var(--tekst); font-size: 14px; }
.vali textarea, .uusmark textarea { resize: vertical; min-height: 64px; }
.vali input:focus, .vali select:focus, .vali textarea:focus, .uusmark textarea:focus { outline: none; border-color: var(--must); }
.kaks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seotud { border: 0; border-top: 1px solid var(--joon2); padding-top: 12px; display: grid; gap: 8px; min-width: 0; }
.seotud legend { font-size: 13px; color: var(--hall); padding: 0 8px 0 0; }
.seotud [data-read] { display: grid; gap: 10px; }
.seotud .tekstinupp { justify-self: start; margin-left: -8px; }
.srida { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr; gap: 8px; padding: 10px; border-radius: 10px; background: #fafbfc; border: 1px solid var(--joon2); align-items: end; }
.srida .ikn { justify-self: end; }
.lo__vihjet { display: inline-flex; align-items: center; gap: 5px; }
.linnuke { display: inline-flex; align-items: center; gap: 9px; justify-self: start; cursor: pointer; }
.linnuke input { width: 18px; height: 18px; margin: 0; accent-color: var(--must); }
/* tööliigi värvi täpp töökaardi vormis sildi „Tööliik“ järel */
.vali__varv { margin-right: auto; }

/* ---------- sisselogimine ---------- */
.sis { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.sis__kast { width: min(360px, 100%); display: grid; gap: 18px; padding: 28px 24px; background: var(--pind); border: 1px solid var(--joon); border-radius: 16px; }
.sis__vorm { display: grid; gap: 12px; }
.sis__info { color: var(--hall); }
.sis__kast > .dlg__viga { padding: 0; }
.nupud { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.kuu { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 6px; }
.kuu h3 { margin: 0; }
.kuu h3::first-letter { text-transform: uppercase; }
.np { display: block; color: var(--hele); }
.kone { display: grid; gap: 6px; }
.kone .nupp { justify-self: start; }
.kone .kuulab { background: var(--punane, #c2413b); color: #fff; }
.kone p { margin: 0; color: var(--hall); }
.ta__minu { display: grid; gap: 10px; max-width: 420px; margin-bottom: 8px; }
.ta__seis { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.ta__kuu { display: flex; align-items: center; gap: 6px; }
.ta__kuu h3 { min-width: 9.5em; text-align: center; }
.ta__tool li { flex-wrap: wrap; }
[data-punktid] { counter-reset: punkt; }
.oh__punkt { counter-increment: punkt; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 10px 0 10px 10px; margin-left: -10px; border-top: 1px solid var(--joon2); border-left: 2px solid transparent; }
.oh__punkt:first-child { border-top: 0; }
.oh__punkt.on-puudus { border-left-color: var(--punane); }
.oh__kys { display: flex; align-items: baseline; gap: 8px; min-width: 0; line-height: 1.4; }
.oh__kys > span:not(.oh__nr) { overflow-wrap: anywhere; }
.oh__kys > input { flex: 1; min-width: 0; }
.oh__nr { flex: none; min-width: 1.6em; color: var(--hele); font-variant-numeric: tabular-nums; }
.oh__nr::before { content: counter(punkt) "."; }
.oh__markus { grid-column: 1 / -1; padding-left: calc(1.6em + 8px); }
.oh__olek { display: flex; gap: 4px; }
.oh__olek label { cursor: pointer; }
.oh__olek input { position: absolute; opacity: 0; pointer-events: none; }
.oh__olek span { display: block; padding: 5px 9px; border: 1px solid var(--joon); border-radius: 999px; white-space: nowrap; }
.oh__olek input:checked + span { background: var(--must); border-color: var(--must); color: #fff; }
.oh__olek .oh__puudus input:checked + span { background: var(--punane, #c2413b); border-color: var(--punane, #c2413b); }
.oh__olek input:focus-visible + span { outline: 2px solid var(--must); outline-offset: 2px; }
.oh__osalejad { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.oh__foto { max-width: 100%; max-height: 260px; border-radius: 8px; display: block; }
@media (max-width: 720px) { .oh__punkt { grid-template-columns: 1fr; } .oh__olek { padding-left: calc(1.6em + 8px); } }
.pr__konto { display: flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--hall); }
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo__mark { width: 26px; height: 26px; flex: none; }
.logo__mark rect { fill: var(--must); }
.logo__mark path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.logo__mark circle { fill: #fff; }
.logo__nimi { font-size: 17px; font-weight: 500; letter-spacing: -.01em; }

/* ---------- kest ---------- */
.pais { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px 0 16px; background: var(--pind); border-bottom: 1px solid var(--joon); }
/* päis kohandub ekraaniga: projekti nimi lüheneb esimesena, kasutaja nimi ja roll jäävad alati tervena näha */
.pais__projekt { flex: 0 1 auto; min-width: 48px; border: 0; background: none; padding: 6px 10px; border-radius: 8px; color: var(--hall); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pais > .logo { flex: none; }
.pais > .ikn { flex: none; }
button.pais__projekt:hover { background: var(--joon2); color: var(--tekst); }
.pais__vahe { flex: 1; }
/* näidis (?naidis): silt ja vaate vahetus päises */
.naidis__silt { flex: none; padding: 3px 9px; border-radius: 999px; background: #fff4d6; color: #7a5200; font-size: 12px; font-weight: 500; cursor: help; }
.naidis__vaade { flex: none; display: flex; align-items: center; gap: 8px; color: var(--hall); font-size: 13px; }
.naidis__vaade select, .naidis__vaade .vk { min-width: 150px; }
.naidis__vaade select { min-height: 34px; padding: 5px 10px; border: 1px solid var(--joon); border-radius: 9px; background: #fff; }
.naidis__laeb { text-align: center; }
@media (max-width: 720px) { .naidis__vaade > span { display: none; } .naidis__vaade select, .naidis__vaade .vk { min-width: 124px; } }
/* keele valik (keel.js): päises nime ees, sisselogimise lehel paremas ülanurgas */
.keel { flex: none; display: flex; }
.keel select { min-height: 32px; padding: 4px 8px; border: 1px solid var(--joon); border-radius: 9px; background: #fff; font-size: 13px; color: var(--hall); }
.keel select, .keel .vk { min-width: 64px; }
.sis { position: relative; }
.sis > .keel { position: absolute; top: 14px; right: 14px; }
.pais__kes { flex: none; color: var(--hall); white-space: nowrap; }
.pais__kes b, .pais__kes small, .pais__kes i { font: inherit; font-style: normal; }
/* läpaka laiusel on nimi ja roll kahel real: võtab vähem ruumi ega jää projekti nime taha */
@media (max-width: 1280px) {
  .pais__kes { display: grid; justify-items: end; line-height: 1.2; font-size: 13px; }
  .pais__kes i { display: none; }
  .pais__kes small { font-size: 11px; color: var(--hele); }
}
.app { height: 100%; display: grid; grid-template: 52px minmax(0, 1fr) / 212px minmax(0, 1fr); }
.app > .pais { grid-column: 1 / -1; }
.menyy { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: var(--pind); border-right: 1px solid var(--joon); overflow-y: auto; min-height: 0; }
.menyy a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--hall); }
.menyy a:hover { background: var(--joon2); color: var(--tekst); }
.menyy a.on { background: var(--joon2); color: var(--tekst); font-weight: 500; }
/* kokkuklapitav menüü: nupp all; kokku = ainult ikoonid (nimi tuleb hiire all title-ist), arvud ikooni nurgas */
.menyy__klapp { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: var(--hele); font: inherit; text-align: left; cursor: pointer; }
.menyy__klapp:hover { background: var(--joon2); color: var(--tekst); }
.app { transition: grid-template-columns .16s ease; }
@media (min-width: 861px) {
  .app--kokku { grid-template-columns: 60px minmax(0, 1fr); }
  .app--kokku .menyy { padding: 12px 8px; scrollbar-width: none; }
  .app--kokku .menyy a, .app--kokku .menyy__klapp { position: relative; justify-content: center; padding: 9px 0; }
  .app--kokku .menyy a > span, .app--kokku .menyy__klapp > span { display: none; }
  .app--kokku .menyy a .marg { position: absolute; top: 1px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; margin: 0; }
}
.sisu { position: relative; overflow: auto; overscroll-behavior: contain; padding: 16px; display: grid; gap: 14px; align-content: start; }
.app { overflow: hidden; }
.plokk { background: var(--pind); border: 1px solid var(--joon); border-radius: 14px; padding: 14px 16px; min-width: 0; }
.pea { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* uued lehed: ülevaate kaardid, arvuread, loendid */
.kaardid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; align-items: start; }
.kaardid .plokk { display: grid; gap: 8px; }
.kaardid--sees { gap: 8px 28px; }
.hall { color: var(--hall); }
.arvud { display: grid; }
.arvud__rida { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--joon2); color: var(--hall); }
.arvud__rida:last-child { border-bottom: 0; }
.arvud__rida b { color: var(--tekst); font-variant-numeric: tabular-nums; }
a.arvud__rida:hover span { color: var(--tekst); }
.arvud__rida.yle b { color: var(--oht); }
.loend li { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--joon2); }
.loend li:last-child { border-bottom: 0; }
.loend li[data-too] { cursor: pointer; }
.loend li > span:first-child { color: var(--hall); font-variant-numeric: tabular-nums; }
td.arv, th.arv { text-align: right; font-variant-numeric: tabular-nums; }
td.murdub { white-space: normal; min-width: 180px; }
tr.kokku td { border-top: 1px solid var(--joon); border-bottom: 0; }
.kiip { display: inline-flex; align-items: center; gap: 6px; margin: 2px 4px 2px 0; padding: 3px 10px; border: 1px solid var(--joon); border-radius: 999px; background: #fff; }
.kiip:hover { border-color: var(--must); }
.link { text-decoration: underline; text-underline-offset: 3px; }
.fotod { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.fotod figure { margin: 0; display: grid; gap: 6px; align-content: start; }
.fotod img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--joon2); }
.fotod figcaption { display: grid; gap: 2px; justify-items: start; }
.fotod figcaption .tekstinupp { padding: 0; color: var(--tekst); }
.fotod small { color: var(--hele); }
.seaded { display: grid; gap: 12px; max-width: 620px; }
.seaded .nupp { justify-self: start; }
.vilgub { display: inline-grid; vertical-align: -3px; animation: vilgu 1s steps(2, jump-none) infinite; }
@media (prefers-reduced-motion: reduce) { .vilgub { animation: none; } }
@media print {
  .pais, .menyy, .nupp, .teade, .plokk:not(.prinditav) { display: none !important; }
  .app, .sisu { display: block; height: auto; overflow: visible; }
  html, body, #juur { height: auto; background: #fff; }
}
.pr { min-height: 100%; }
.pr__sisu { width: min(1100px, 100%); margin: 0 auto; padding: 24px 16px; }
.pr__loend { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pkaart { display: grid; gap: 4px; padding: 16px; background: var(--pind); border: 1px solid var(--joon); border-radius: 14px; color: var(--hall); }
.pkaart b { color: var(--tekst); font-size: 16px; }
.pkaart:hover { border-color: var(--hele); }

/* ---------- ajakava: kihid, Gantt, ajajoon ---------- */
/* seade on tagastamata: märkus lehe ülaosas */
.yleaja { display: grid; gap: 8px; }
.yleaja__rida { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border: 1px solid color-mix(in srgb, var(--punane) 45%, #fff); border-radius: 12px; background: color-mix(in srgb, var(--punane) 7%, #fff); }
.yleaja__rida > .ik { color: var(--punane); width: 20px; height: 20px; }
.yleaja__rida span { flex: 1; min-width: 200px; }
.yle { color: var(--oht) !important; font-weight: 500; }
.marg { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--punane); color: #fff; font-size: 11px; font-style: normal; font-weight: 500; margin-left: auto; }
/* tagastamata seadme ikoon on punane, aga paigal: vilguvad ainult hoiatus ja seisak (founder 2026-11-12) */
.silt__yle { display: grid; color: var(--punane); }
.silt.on .silt__yle { color: #fff; }
.aj__pea { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.lylitid { display: flex; gap: 6px; flex-wrap: wrap; }
.lyliti { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 1px solid var(--joon); border-radius: 999px; background: #fff; color: var(--hall); }
.lyliti.on { border-color: var(--must); color: var(--tekst); box-shadow: inset 0 0 0 .5px var(--must); }

.g { border: 1px solid var(--joon); border-radius: var(--r); overflow: hidden; font-size: 13px; }
.g__pais, .g__rida { display: grid; grid-template-columns: var(--nimi-l) var(--aeg-l) minmax(0, 1fr); align-items: center; }
.g__pais { background: #fafbfc; border-bottom: 1px solid var(--joon); color: var(--hall); font-size: 12px; }
.g__pais > span { padding: 6px 10px; }
.g__nadalad { display: grid; grid-template-columns: repeat(var(--n), 1fr); position: relative; }
.g__nadalad::after { content: ''; position: absolute; bottom: -1px; left: calc(var(--f) * 100%); translate: -50% 0; border: 5px solid transparent; border-top-color: var(--punane); border-bottom: 0; }
.g__nadal { display: grid; padding: 4px 6px; border-left: 1px solid var(--joon2); line-height: 1.25; white-space: nowrap; overflow: hidden; }
.g__nadal small { font-size: 11px; color: var(--hele); }
.g__nadal em { font-style: normal; }
.g--kuu .g__nadal { text-align: center; padding: 6px 0; }
.g__keha { max-height: 184px; overflow-y: auto; }
.g__rida { width: 100%; min-height: 30px; border: 0; border-bottom: 1px solid var(--joon2); background: none; text-align: left; padding: 0; }
.g__rida:last-child { border-bottom: 0; }
button.g__rida:hover { background: #fafbfc; }
.g__rida.on { background: #f1f2f4; }
.g__nimi { display: flex; align-items: center; gap: 7px; padding: 0 10px; min-width: 0; }
.g__nimi b { color: var(--hall); font-size: 12px; min-width: 38px; }
.g__nimi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g__aeg { padding: 0 10px; color: var(--hall); font-size: 12px; white-space: nowrap; }
.g__rada { position: relative; align-self: stretch; min-height: 30px;
  background:
    linear-gradient(var(--punane), var(--punane)) no-repeat calc(var(--f) * 100%) 0 / 1.5px 100%,
    repeating-linear-gradient(to right, var(--joon2) 0 1px, transparent 1px calc(100% / var(--n))); }
.g__riba { position: absolute; top: 8px; bottom: 8px; min-width: 3px; border-radius: 4px; background: color-mix(in srgb, var(--v) 30%, #fff); overflow: hidden; }
.g__riba i { display: block; height: 100%; background: var(--v); }
.g__riba--moodas { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--v) 70%, #fff) 0 2px, color-mix(in srgb, var(--v) 14%, #fff) 2px 6px); }
.g__riba--moodas i { display: none; }
.g__riba--tehtud { opacity: .75; }
/* pikendatud osa (ülevaatus ei lasknud läbi): töö värvi triibud, mitte täis */
.g__pikendus { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(45deg, var(--v) 0 2.5px, #fff 2.5px 6px); border-left: 1.5px solid #fff; }
/* seisak: riba ei ole täis, vaid töö värvi triipudega ja punase piirjoonega */
.g__riba--seisak { background: repeating-linear-gradient(45deg, var(--v) 0 3px, color-mix(in srgb, var(--v) 16%, #fff) 3px 8px); outline: 2px solid var(--punane); outline-offset: -1px; }
.g__riba--seisak i { display: none; }
.g__prob { display: inline-grid; flex: none; }
.g__prob--vilgub { animation: vilgu 1s steps(2, jump-none) infinite; }
.g__prob .ik { width: 14px; height: 14px; }
/* iga lahendamata probleem (hoiatus, küsimus, seisak) vilgub: joonisel tsooni sees, Ganttis nime kõrval, töökaardil */
.silt__sees .m--vilgub, .mrk--probleem > .ik { animation: vilgu 1s steps(2, jump-none) infinite; }
.m--tarne { color: var(--hall); }
.paigal { display: inline-grid; vertical-align: -3px; }
@media (prefers-reduced-motion: reduce) { .g__prob--vilgub, .silt__sees .m--vilgub, .mrk--probleem > .ik { animation: none !important; } }
.g__lopp { position: absolute; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: var(--v); color: var(--v); }
.g__lopp .ik { position: absolute; left: 3px; top: -1px; width: 12px; height: 12px; stroke-width: 2; }
.g__rent { position: absolute; bottom: 3px; height: 4px; min-width: 4px; border-radius: 2px; background: #3b414b; }
.g__rent--tagasi { background: #b6bcc6; }
.g__rent--yle { background: var(--punane); height: 6px; bottom: 2px; animation: vilgu 1s steps(2, jump-none) infinite; }
@keyframes vilgu { 50% { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .g__rent--yle { animation: none !important; } }
.g__tarne { position: absolute; top: 50%; width: 9px; height: 9px; translate: -50% -50%; rotate: 45deg; background: #3b414b; border: 1.5px solid #fff; border-radius: 2px; }

.joon { margin-top: 12px; }
.joon__pea { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 8px; position: relative; }
.joon__pea .tekstinupp { position: absolute; right: 0; }
.luup { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 16px; border: 1px solid var(--must); border-radius: 999px; background: #fff; white-space: nowrap; }
.luup .ik { align-self: center; }
.luup span { color: var(--hall); font-size: 12px; }
.paevad { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 3px; align-items: end; }
.p { display: grid; justify-items: center; gap: 1px; padding: 5px 0 6px; border: 1px solid transparent; border-radius: 9px; background: none; min-width: 0; color: var(--hall); }
.p:hover { background: var(--joon2); }
.p__np { font-size: 11px; color: var(--hele); }
.p__kp { font-size: 12px; }
.p--nv .p__np, .p--nv .p__kp { color: var(--hele); }
.p--tana .p__kp { color: var(--punane); }
.p__m { display: grid; gap: 2px; width: 70%; min-height: 22px; align-content: start; margin-top: 3px; }
.p__m i { display: block; height: 3px; border-radius: 2px; background: var(--v); }
.p__m .lopp { position: relative; width: 60%; margin-left: 40%; }
.p__m .lopp::after { content: ''; position: absolute; right: 0; top: -3px; width: 2px; height: 9px; border-radius: 1px; background: var(--v); }
.p__m .rent { background: #3b414b; }
.p__m .tarne { width: 6px; height: 6px; margin: 1px auto; rotate: 45deg; border-radius: 1px; background: #3b414b; }
.p--luup { border-color: var(--must); background: #fff; color: var(--tekst); padding: 9px 0 10px; box-shadow: 0 4px 14px rgb(16 18 22 / .10); }
.p--luup .p__kp { font-size: 15px; font-weight: 500; color: var(--tekst); }
.p--luup .p__np { color: var(--hall); }
.paevad--kuu { gap: 1px; }
.paevad--kuu .p__kp { font-size: 11px; }
.paevad--kuu .p--luup .p__kp { font-size: 13px; }
.joon__kuu { text-align: center; color: var(--hele); font-size: 12px; margin-top: 4px; }

/* ---------- joonis ---------- */
.jn__pea { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sakid, .riistad { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sakk { border: 0; background: none; padding: 7px 13px; border-radius: 8px; color: var(--hall); }
.sakk:hover { background: var(--joon2); }
.sakk.on { background: var(--must); color: #fff; }
.riistad__silt { color: var(--hall); font-size: 13px; margin: 0 2px 0 8px; }
.ootel { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 6px 6px 6px 14px; border-radius: 10px; background: var(--must); color: #fff; }
.ootel .tekstinupp { color: #c9ced6; }
.ootel .tekstinupp:hover { background: rgb(255 255 255 / .12); color: #fff; }
/* Rida, mitte ruudustik: kui tööde nimekiri või töökaart on peidus, võtab joonis kogu vaba laiuse. */
.jn__keha { display: flex; gap: 12px; align-items: flex-start; }
.jn__kihid { flex: none; width: 196px; }
.jn__keha > .lo { flex: 1 1 0; min-width: 0; }
.jn__keha > .kaart { flex: none; width: 320px; }
.jn__kihid h3 { margin-top: 2px; }
.kiht { display: flex; align-items: center; border-radius: 8px; }
.kiht.on { background: var(--joon2); }
.kiht .ikn { width: 30px; height: 30px; }
.kiht__nimi { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; border: 0; background: none; padding: 6px 6px 6px 2px; text-align: left; }
.kiht__nimi span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiht__nimi small { color: var(--hele); font-size: 11px; }

.lo { position: relative; min-height: 320px; max-height: calc(100dvh - 76px); border: 1px solid var(--joon); border-radius: var(--r); background: #fafbfc; overflow: hidden; outline: none; }
.lo__keri { position: absolute; inset: 0; overflow: auto; display: grid; }
.lo__sisu { position: relative; margin: auto; width: 100%; }
.lo__pilt { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.lo__kiht { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lo__sildid, .lo__pinnid { position: absolute; inset: 0; pointer-events: none; }
/* nõel: foto või akti asukoht joonisel */
.pin { position: absolute; translate: -50% -50%; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1.5px solid currentColor; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(16 18 22 / .22); pointer-events: auto; }
.pin .ik { width: 12px; height: 12px; }
.pin.on { width: 28px; height: 28px; box-shadow: 0 0 0 3px rgb(16 18 22 / .14), 0 1px 4px rgb(16 18 22 / .22); }
.pin.on .ik { width: 15px; height: 15px; }
.lo--joonista .pin { pointer-events: none; }
/* suurendatud joonist saab hiirega haarata ja nihutada */
.lo--suur .lo__keri { cursor: grab; }
.lo--lohista .lo__keri, .lo--lohista .lo__keri * { cursor: grabbing !important; user-select: none; }
.lo__nupud { position: absolute; left: 10px; bottom: 10px; display: grid; background: #fff; border: 1px solid var(--joon); border-radius: 10px; padding: 2px; }
.lo__juhis { position: absolute; left: 50%; top: 10px; translate: -50% 0; max-width: calc(100% - 20px); padding: 6px 12px; border-radius: 999px; background: var(--must); color: #fff; font-size: 13px; pointer-events: none; }
.lo__tyhi { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--hall); }
.lo--tyhi { height: 300px; }
.lo--tyhi .lo__nupud { display: none; }
.lo__vihje { position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 2px; max-width: 260px; padding: 9px 12px; border-radius: 10px; background: var(--must); color: #fff; font-size: 12.5px; pointer-events: none; }
.lo__vihje span { color: #c9ced6; }
.lo__vihjemitu { color: #fff !important; font-weight: 500; }
.lo__vihjeteine { display: grid; gap: 2px; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgb(255 255 255 / .18); }
.lo__vihjem { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.lo__vihjem span { display: inline-flex; align-items: center; gap: 4px; }

.z { fill: var(--v); fill-opacity: .17; stroke: var(--v); stroke-width: 2px; vector-effect: non-scaling-stroke; cursor: pointer; }
.z--joon { fill: none; stroke-width: 4px; stroke-linejoin: round; stroke-linecap: round; }
.z__tabamus { fill: none; stroke: transparent; stroke-width: 18px; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: stroke; }
.z--tulekul1 { stroke-dasharray: 11 6; fill-opacity: .10; }
.z--tulekul2 { stroke-dasharray: 5 5; fill-opacity: .07; }
.z--tulekul3 { stroke-dasharray: .5 6; stroke-linecap: round; fill-opacity: .05; }
/* möödas: viirutus (muster tuleb joonis.js-ist, fill:url), kuupäevata: õhuke täisjoon */
.z--moodas { fill-opacity: 1; stroke-opacity: .65; stroke-width: 1.25px; }
.z--joon.z--moodas { stroke-opacity: .45; stroke-dasharray: 2 5; }
.z--ajata { fill-opacity: .10; stroke-width: 1.25px; }
/* tehtud töö: hall ja õhuke (värv tuleb joonis.js-ist), et käivad tööd jääksid esile */
.z--tehtud { stroke-width: 1.25px; stroke-opacity: .8; }
.z--tehtud:not(.z--moodas) { fill-opacity: .08; }
.z--joon.z--tehtud { stroke-width: 2.5px; stroke-opacity: .6; }
.silt--tehtud { opacity: .7; }
.silt--tehtud .silt__nimi, .silt--tehtud .silt__saba b { color: var(--hall); }
.z--joon.z--tulekul1, .z--joon.z--tulekul2, .z--joon.z--tulekul3, .z--joon.z--moodas { fill: none; stroke-width: 3px; }
.z.on { stroke-width: 3.5px; fill-opacity: .30; }
.z--joon.on { fill: none; stroke-width: 6px; }
.must-kuju { fill: none; stroke: var(--must); stroke-width: 1.5px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
rect.must-kuju, .must-kuju--pind { fill: rgb(22 24 29 / .06); }
.must-punkt { fill: none; stroke: var(--must); stroke-width: 8px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.must-punkt--algus { stroke: var(--punane); stroke-width: 13px; }
.lo--joonista .lo__sisu { cursor: crosshair; touch-action: none; }
.lo--joonista .z, .lo--joonista .z__tabamus, .lo--joonista .silt { pointer-events: none; }

.silt { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 3px; padding: 0; border: 0; background: none; pointer-events: auto; }
.silt__saba { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--v); border-radius: 7px; background: #fff; font-size: 12px; white-space: nowrap; box-shadow: 0 1px 3px rgb(16 18 22 / .10); color: var(--hall); }
.silt__saba b { color: var(--v); }
.silt__saba .ik { width: 13px; height: 13px; }
.silt__saba > .ik:first-child { color: var(--v); stroke-width: 2.2; }
.silt.on .silt__saba > .ik:first-child { color: #fff; }
.silt__nimi { color: var(--tekst); max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.silt__sees { display: flex; gap: 3px; }
.silt--moodas { opacity: .6; }
.silt.on .silt__saba { background: var(--v); color: #fff; }
.silt.on .silt__saba b, .silt.on .silt__nimi { color: #fff; }
.m { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; background: #fff; box-shadow: 0 1px 3px rgb(16 18 22 / .14); }
.m .ik { width: 14px; height: 14px; }
.m--hoiatus { color: #b96f00; } .m--kysimus { color: #2c6cd0; } .m--seisak { color: #c2413b; } .m--akt { color: #2a8a53; } .m--foto, .m--markus { color: var(--hall); } .m--ettepanek { color: #0e7c86; }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin-top: 10px; font-size: 12px; color: var(--hall); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend__vahe { flex: 1; }
.lj { display: inline-block; width: 26px; height: 0; border-top: 2px solid var(--hall); }
.lj--t1 { border-top-style: dashed; }
.lj--t1, .lj--t2, .lj--t3 { border-top: 0; height: 2px; }
.lj--t1 { background: repeating-linear-gradient(to right, var(--hall) 0 9px, transparent 9px 13px); }
.lj--t2 { background: repeating-linear-gradient(to right, var(--hall) 0 4px, transparent 4px 8px); }
.lj--t3 { background: repeating-linear-gradient(to right, var(--hall) 0 2px, transparent 2px 7px); }
.lj--moodas { width: 20px; height: 12px; border: 1px solid var(--hall); background: repeating-linear-gradient(45deg, var(--hall) 0 1.5px, transparent 1.5px 5px); }
.lj--ajata { width: 20px; height: 12px; border: 1px solid var(--hall); background: color-mix(in srgb, var(--hall) 12%, #fff); }

/* ---------- töökaardi paneel ---------- */
.kaart { border: 1px solid var(--joon); border-radius: var(--r); padding: 12px 14px; max-height: calc(100dvh - 76px); overflow: auto; min-width: 0; }
.kaart header { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.kaart header .tapp { margin-top: 5px; }
.kaart header div { flex: 1; display: grid; min-width: 0; }
.kaart header span { color: var(--hall); font-size: 12.5px; }
.kaart header .ikn { width: 30px; height: 30px; margin-top: -4px; }
.kaart__tsoonita { display: grid; gap: 8px; justify-items: start; margin-bottom: 12px; padding: 10px 12px; border-radius: 10px; background: var(--joon2); color: var(--hall); }
.kaart__tsoonid + .tekstinupp { margin-left: -8px; }
.puudub { color: var(--hele); }
.kaart__olek { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; color: var(--hall); }
.kaart__olek b { color: var(--tekst); }
/* märkide loendur edenemise riba all ja „Tehtud“ kasti kohal: ikoon, nimi, arv */
.kaart__loendur { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; margin-top: 8px; }
.mloend { display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; padding: 5px 4px; border: 1px solid var(--joon2); border-radius: 8px; font-size: 13px; }
.mloend .ik { width: 16px; height: 16px; }
.mloend b { color: var(--tekst); font-variant-numeric: tabular-nums; }
.mloend--null { opacity: .45; }
.mloend--probleem { border-color: currentColor; }
.mloend--probleem .ik { animation: vilgu 1s steps(2, jump-none) infinite; }
@media (prefers-reduced-motion: reduce) { .mloend--probleem .ik { animation: none; } }
.kaart__kastid { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 6px; }
.kaart__kastid .linnuke { color: var(--tekst); }
.kaart__ylevaatus { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ootab { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 9px 12px 9px 14px; border: 1px solid var(--joon); border-radius: 12px; background: var(--pind); color: var(--hall); }
.ootab__too { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--joon); border-radius: 999px; background: #fff; color: var(--tekst); }
.ootab__too:hover { border-color: var(--must); }
/* kaetud tööde akt: töökaardi nimekiri ja vormi read */
.kaart__aktid li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; margin: 0 -6px; border-radius: 8px; cursor: pointer; }
.kaart__aktid li:hover { background: var(--joon2); }
.kaart__aktid li span { flex: 1; }
.kaart__aktid small { color: var(--hall); }
.kaart__aktid + .tekstinupp { margin-left: -8px; }
.akt__olek { color: var(--hall); }
.sammud { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--hall); }
.allkirjad li { display: flex; align-items: center; gap: 8px; padding: 5px 0; flex-wrap: wrap; }
.allkirjad small { color: var(--hele); }
.allkiri__lisa { justify-self: start; cursor: pointer; }
.akt__tagasi { display: flex; gap: 8px; padding: 9px 12px; border-radius: 10px; background: color-mix(in srgb, var(--punane) 8%, #fff); color: var(--oht); }
.arida { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--joon2); border-radius: 10px; background: #fafbfc; }
.arida + .arida { margin-top: 8px; }
.arida--foto { grid-template-columns: 96px minmax(0, 1fr) auto; }
.arida--foto img { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.arida--foto .vali:first-child { grid-column: 1 / 3; }
.arida--foto .vali:first-child + .vali { grid-column: 1 / 3; }
.arida input[type=file] { padding: 6px; font-size: 12.5px; }
.arida__fail { font-size: 13px; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linnuke--pikk { align-items: flex-start; }
.linnuke--pikk span { color: var(--tekst); }
.dlg footer { flex-wrap: wrap; }
.kaart__lukus { grid-column: 1 / -1; margin-top: 4px; font-size: 12.5px; color: var(--hall); }
.kaart dd small { display: block; color: var(--hele); font-size: 12px; }
.vali > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vali__lisa { padding: 0 4px; margin: -3px -4px; font-size: 12.5px; }
.linnuke--reas { align-self: end; min-height: 40px; }
.riba { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--v) 22%, #fff); overflow: hidden; }
.riba i { display: block; height: 100%; background: var(--v); }
.kaart dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 12px; }
.kaart dt { color: var(--hall); }
.kaart__kirj { margin-top: 10px; white-space: pre-wrap; }
/* valveseadme (kaamera) kaart: sama paneel mis töökaardil */
.kaart header .elik { width: 22px; height: 22px; margin-top: 1px; }
.kaart__seade { display: grid; gap: 6px; justify-items: start; }
.kaart__seadenupud { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 10px; }
/* töökaardil selle nädala plaan */
.kaart__plaan { margin: 4px 0 0; padding-left: 18px; }
.kaart__plaan li { margin: 2px 0; }
.kaart__tarned li, .kaart__tsoonid li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.kaart__tarned li { flex-wrap: wrap; row-gap: 5px; }
.kaart__tarned .kaart__tnimi, .kaart__tsoonid span { flex: 1; min-width: 0; }
.kaart__tarned small, .kaart__tarned li > span:first-of-type { color: var(--hall); }
.kaart__tarned li > span:first-of-type { white-space: nowrap; }
.kaart__tarned span small { display: block; }
.kaart__tarned li[data-tarne] { cursor: pointer; border-radius: 8px; margin: 0 -6px; padding: 5px 6px; }
.kaart__tarned li[data-tarne]:hover { background: var(--joon2); }
.kaart__tarned + .tekstinupp, h3 + .tekstinupp { margin-left: -8px; }
.mrk { display: flex; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--joon2); }
.mrk > .ik { margin-top: 2px; }
.mrk div { flex: 1; min-width: 0; }
.mrk p { color: var(--tekst); overflow-wrap: anywhere; }
.mrk small { color: var(--hele); font-size: 11.5px; }
/* ettepanek kliendile: saatmise read märgi all, kliendi vaates eestikeelne originaal kokkupandult */
small.mrk__saadetud { display: flex; align-items: flex-start; gap: 5px; margin-top: 3px; color: #0e7c86; font-size: 11.5px; }
small.mrk__saadetud .ik { width: 12px; height: 12px; flex: none; margin-top: 2px; }
small.mrk__saadetud--ei { color: var(--hele); }
.mrk__orig { margin: 4px 0 2px; font-size: 12.5px; color: var(--hall); }
.mrk__orig summary { cursor: pointer; color: var(--hele); }
.mrk__orig p { margin-top: 4px; color: var(--hall); }
/* saatmise aken: ettepaneku tekst ja kirja eelvaade */
.ettep__tekst { padding: 10px 12px; border-left: 3px solid #0e7c86; background: var(--joon2); border-radius: 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kiri { display: grid; gap: 6px; min-height: 60px; padding: 12px; border: 1px solid var(--joon); border-radius: 10px; font-size: 13px; }
.kiri__rida { display: grid; grid-template-columns: 64px 1fr; gap: 8px; }
.kiri__rida b { font-weight: 500; color: var(--hall); }
.kiri__rida span { overflow-wrap: anywhere; }
.kiri__tekst { margin: 4px 0 0; max-height: 300px; overflow: auto; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tekst); }
.kiri__puudu { color: var(--oht); }
.mrk img { display: block; max-width: 100%; max-height: 140px; border-radius: 8px; margin-bottom: 4px; }
.mrk .ikn { width: 28px; height: 28px; }
.mrk--lahendatud { opacity: .5; }
.uusmark { display: grid; gap: 8px; margin-top: 10px; }
.uusmark .nupp { justify-self: start; }

/* ---------- tabelid ja logi ---------- */
.tabel { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 400; font-size: 12px; color: var(--hall); padding: 6px 10px; border-bottom: 1px solid var(--joon); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--joon2); white-space: nowrap; }
td .tapp { margin-right: 8px; }
tbody tr[data-too], tbody tr[data-tarne], tbody tr[data-liige] { cursor: pointer; }
tbody tr:hover { background: #fafbfc; }
.logi li { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--joon2); }
.logi time { color: var(--hall); font-size: 12.5px; white-space: nowrap; }
.logi small { display: block; color: var(--hall); }
.logi__nimi { color: var(--tekst); }
.logi + .nupp { margin-top: 12px; }

/* ---------- dialoog ja teade ---------- */
.dlg { width: min(580px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 16px; color: var(--tekst); box-shadow: 0 24px 70px rgb(16 18 22 / .28); }
.dlg.dlg--lai { width: min(760px, calc(100vw - 24px)); }
/* ehituspäeviku kanne: lai vorm plokkidena (üldandmed ja ilm, tööd, materjalid, märkused) */
.dlg.dlg--paevik { width: min(1040px, calc(100vw - 24px)); }
.dlg--paevik .dlg__sisu { gap: 14px; background: var(--taust); padding-top: 12px; padding-bottom: 14px; }
.pv__plokk { display: grid; gap: 12px; padding: 16px; background: var(--pind); border: 1px solid var(--joon); border-radius: 12px; }
.pv__plokk > h3 { margin: 0; font-size: 14px; font-weight: 500; color: var(--tekst); }
.pv__pea { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pv__pea > .vali { width: 200px; }
.pv__pea .akt__olek { margin: 0; }
.pv__ilmad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: stretch; }
.pv__ilm { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border: 1px solid var(--joon); border-radius: 10px; background: #fff; color: var(--hall); font-size: 12.5px; cursor: pointer; }
.pv__ilm input { position: absolute; opacity: 0; pointer-events: none; }
.pv__ilm .ik { width: 22px; height: 22px; }
.pv__ilm:hover { border-color: var(--hele); }
.pv__ilm:has(input:checked) { border-color: var(--must); color: var(--tekst); box-shadow: inset 0 0 0 1px var(--must); }
.pv__ilm:has(input:focus-visible) { outline: 2px solid var(--must); outline-offset: 2px; }
.pv__ilm:has(input:disabled) { cursor: default; }
.pv__uuenda { align-self: center; }
.pv__arvud { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pv__yhik { position: relative; display: block; }
.pv__yhik input { padding-right: 40px; }
.pv__yhik i { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 13px; color: var(--hele); pointer-events: none; }
.pv__tood { display: grid; gap: 6px; }
.pv__too { display: grid; grid-template-columns: auto minmax(0, 1fr) 190px; align-items: center; gap: 10px; padding: 6px 6px 6px 10px; border: 1px solid var(--joon2); border-radius: 10px; }
.pv__tnimi { display: grid; min-width: 0; }
.pv__tnimi b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv__tnimi small { color: var(--hele); font-size: 12px; }
.pv__nupud { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
/* jalus samas toonis mis vormi taust (enne oli valge riba hallil taustal) */
.dlg--paevik footer { background: var(--taust); border-top: 1px solid var(--joon); }
/* töö rida: nimi, olek; all kirjeldus kogu laiuses; muu töö: nimi + eemalda, all kirjeldus */
.pv__too { row-gap: 6px; }
/* töö olek (ajakavast eeltäidetud, kande tegija valib) ja kirjeldus töökaardilt */
.pv__olek { justify-self: end; padding: 4px 10px; border-radius: 999px; background: var(--joon2); color: var(--tekst); font-size: 12.5px; white-space: nowrap; }
/* valik: valikud.js teeb sellest nupu ja võtab värvi, ümaruse ja kõrguse siit */
select.pv__olek { border: 0; min-height: 30px; padding: 4px 10px 4px 11px; font: inherit; font-size: 12.5px; cursor: pointer; }
.pv__olek--alustati { background: #e8f0fd; color: #2c6cd0; }
.pv__olek--lopetati { background: #e6f4ec; color: #1f7a45; }
.pv__olek--pikendati { background: #fff3e0; color: #b96f00; }
.pv__olek--seisak { background: #fdecea; color: #c2413b; }
.pv__olek--ei { color: var(--hele); }
.pv__tkirj { grid-column: 2 / -1; margin: 0; color: var(--hall); font-size: 13px; overflow-wrap: anywhere; }
/* nädalaplaani read päeva kandes: klõps tõmbab maha (sel päeval ei tehtud) */
.pv__plaan { grid-column: 2 / -1; margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.pv__prida { display: block; width: 100%; text-align: left; padding: 3px 8px; border-radius: 7px; font-size: 13.5px; color: var(--tekst); overflow-wrap: anywhere; }
button.pv__prida { background: none; border: 0; cursor: pointer; font: inherit; font-size: 13.5px; }
button.pv__prida:hover { background: var(--joon2); }
.pv__prida--maha { color: var(--hele); text-decoration: line-through; }
.pv__too .pv__kirj { grid-column: 1 / -1; }
.pv__kirj { display: grid; gap: 3px; font-size: 12px; color: var(--hall); }
.pv__kirj textarea, .pv__kirj input { width: 100%; min-height: 34px; padding: 7px 10px; border: 1px solid var(--joon); border-radius: 8px; background: #fff; color: var(--tekst); font: inherit; font-size: 13.5px; }
.pv__kirj textarea { resize: none; overflow: hidden; line-height: 1.4; }
.pv__kirj textarea:focus, .pv__kirj input:focus { outline: none; border-color: var(--must); }
.pv__too--muu { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 6px 8px 10px; }
.pv__too--muu .pv__muunimi { grid-column: 1; }
.pv__too--muu .ikn { grid-column: 2; align-self: end; }
.pv__alumine { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: 12px; }
.pv__jaatmed { align-content: start; }
.pv__jaatmed .linnuke { color: var(--tekst); }
/* omanikujärelevalve kinnitus: kande aknas plokk, nimekirjas lahter, kuu pealkirjas loendur */
.pv__kinnitus p { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--hall); }
.pv__kinnitus .nupp, .pv__kinnitus .tekstinupp { justify-self: start; }
.pv__kinnitus--on { border-color: #b7dfc6; background: #f3fbf6; }
.pv__kinnitus--on p { color: #1f7a45; }
.kinnitus { display: inline-flex; align-items: center; gap: 5px; color: var(--hele); white-space: nowrap; font-size: 12.5px; }
.kinnitus--on { color: #1f7a45; }
.kinnitus .ik { width: 14px; height: 14px; }
.kinnitus__nupp { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.kinnitus__muudetud { display: block; color: #b96f00; font-size: 11.5px; }
.kuu__kinnitus { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--hele); font-size: 12.5px; }
.kuu__kinnitus .ik { width: 14px; height: 14px; }
.kuu__kinnitus--koik { color: #1f7a45; }
@media (max-width: 760px) {
  .pv__ilmad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pv__ilm { font-size: 11px; padding: 8px 2px; }
  .pv__uuenda { grid-column: 1 / -1; justify-self: start; }
  .pv__arvud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv__too { grid-template-columns: auto minmax(0, 1fr); }
  .pv__too--muu { grid-template-columns: minmax(0, 1fr) auto; }
  .pv__olek { grid-column: 2; justify-self: start; }
  .pv__tkirj, .pv__plaan { grid-column: 2; }
  .pv__alumine { grid-template-columns: minmax(0, 1fr) 110px; }
  .dlg--paevik .kaks { grid-template-columns: 1fr; }
}
.dlg::backdrop { background: rgb(16 18 22 / .45); }
.dlg__vorm { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.dlg header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 8px 20px; }
/* position: relative: valikud.js peidetud päris select (position: absolute) jääb keritava ala sisse; muidu venitas see akna
   kerimisala jalusest allapoole ja jaluse alla tekkis valge riba */
.dlg__sisu { position: relative; display: grid; gap: 12px; padding: 6px 20px 10px; overflow: auto; }
.dlg__sisu [data-uus] { display: grid; gap: 12px; }
.dlg__viga { color: var(--oht); padding: 0 20px; font-size: 13px; }
.sis__vorm .dlg__viga { padding: 0; }
.dlg footer { display: flex; align-items: center; gap: 8px; padding: 12px 20px 16px; }
.dlg footer span { flex: 1; }
.suurkood { font-size: 30px; letter-spacing: .12em; text-align: center; padding: 14px 0; font-variant-numeric: tabular-nums; }
.teade { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 2147483600; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 10px; background: var(--must); color: #fff; box-shadow: 0 10px 30px rgb(16 18 22 / .25); }

/* ---------- kitsas ekraan ---------- */
@media (max-width: 1180px) {
  .jn__keha { flex-direction: column; align-items: stretch; }
  .jn__keha > .lo { flex: none; }
  .jn__keha > .kaart { width: auto; }
  .jn__kihid { width: auto; display: flex; flex-wrap: wrap; gap: 4px; }
  .jn__kihid h3 { display: none; }
  .kiht { border: 1px solid var(--joon); border-radius: 999px; padding-right: 6px; }
  .kiht__nimi small { display: none; }
  .kaart { max-height: none; }
}
@media (max-width: 860px) {
  :root { --nimi-l: 128px; }
  .app { grid-template: 52px minmax(0, 1fr) auto / minmax(0, 1fr); }
  .menyy { grid-row: 3; flex-direction: row; justify-content: flex-start; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--joon); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .menyy a { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 11px; flex: 1 0 74px; min-width: 0; text-align: center; }
  .menyy a span { font-size: 0; }
  .menyy a span::before { content: attr(data-lyh); font-size: 11px; }
  .menyy a { position: relative; }
  .menyy a .marg { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
  .menyy__klapp { display: none; }
  .menyy a.on { background: none; }
  .sisu { padding: 10px; gap: 10px; }
  .plokk { padding: 12px; border-radius: 12px; }
  .pais__kes { display: none; }
  .g__pais, .g__rida { grid-template-columns: var(--nimi-l) minmax(0, 1fr); }
  .g__aeg, .g__nadal em { display: none; }
  .g__nadal { text-align: center; padding: 6px 0; }
  .g__nimi b { min-width: 34px; }
  .g__nadal small { display: none; }
  .paevad:not(.paevad--kuu) { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .paevad:not(.paevad--kuu) .p:nth-child(-n+4), .paevad:not(.paevad--kuu) .p:nth-last-child(-n+4) { display: none; }
  .paevad--kuu .p__np { display: none; }
  .joon__pea .tekstinupp { position: static; }
  .luup span { display: none; }
  .lo { min-height: 200px; max-height: calc(100dvh - 140px); }
  .silt__nimi { display: none; }
  .legend__vahe { display: none; }
  .kaks { grid-template-columns: 1fr; }
  .srida { grid-template-columns: 1fr 1fr; }
  .logi li { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- eelarve ---------- */
.kolm { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.neli { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .neli { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- koosoleku protokoll ---------- */
.ko__pea { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; }
.ko__o, .ko__p { display: grid; gap: 6px; align-items: start; }
.ko__o { grid-template-columns: 78px minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr) auto 34px; }
.ko__p { grid-template-columns: 62px minmax(0, 1fr) minmax(0, 150px) minmax(0, 118px) auto 34px; }
[data-osalejad] { display: grid; gap: 6px; }
.ko__o input, .ko__p input, .ko__p textarea { width: 100%; min-width: 0; min-height: 38px; padding: 8px 9px; border: 1px solid var(--joon); border-radius: 8px; background: #fff; font: inherit; }
.ko__p textarea { resize: vertical; line-height: 1.4; }
.ko__o input:focus, .ko__p input:focus, .ko__p textarea:focus { outline: none; border-color: var(--must); }
.ko__o--pea, .ko__p--pea { font-size: 12px; color: var(--hall); }
.ko__o--pea span, .ko__p--pea span { padding-left: 2px; }
.ko__osales, .ko__tehtud { min-height: 38px; font-size: 13px; color: var(--hall); gap: 6px; }
.ko__o .ikn, .ko__p .ikn { width: 34px; height: 38px; }
@media (max-width: 760px) {
  .ko__pea { grid-template-columns: minmax(0, 1fr) 96px; }
  .ko__o--pea, .ko__p--pea { display: none; }
  .ko__o { grid-template-columns: 70px minmax(0, 1fr) 34px; padding-bottom: 8px; border-bottom: 1px solid var(--joon2); }
  .ko__o [data-o="asutus"], .ko__o [data-o="telefon"], .ko__o [data-o="email"] { grid-column: 1 / -1; }
  .ko__o .ko__osales { grid-column: 1 / 3; grid-row: 2; }
  .ko__o .ikn { grid-column: 3; grid-row: 1; }
  .ko__p { grid-template-columns: 62px minmax(0, 1fr) 34px; padding-bottom: 8px; border-bottom: 1px solid var(--joon2); }
  .ko__p [data-p="tekst"] { grid-column: 1 / -1; grid-row: 2; }
  .ko__p [data-p="taitja"] { grid-column: 2; grid-row: 1; }
  .ko__p .ikn { grid-column: 3; grid-row: 1; }
  .ko__p [data-p="tahtaeg"] { grid-column: 1 / 3; grid-row: 3; }
  .ko__p .ko__tehtud { grid-column: 1 / -1; grid-row: 4; }
}
.ee__kokku { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ee__kokku small { color: var(--hall); font-size: 11.5px; }
.ee__kokku > * { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--joon); border-radius: 10px; background: var(--pind); text-align: left; font: inherit; color: inherit; }
.ee__kokku span { color: var(--hall); font-size: 12px; }
.ee__kokku b { font-size: 16px; font-variant-numeric: tabular-nums; }
.ee__kokku b.yle, .ee__sidumata b { color: var(--oht); }
.ee__kokku button:hover { background: var(--joon2); }
.ee__riba { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.ee__otsi { position: relative; display: flex; align-items: center; flex: 1; min-width: 180px; max-width: 320px; }
.ee__otsi .ik { position: absolute; left: 11px; color: var(--hele); pointer-events: none; }
.ee__otsi input { width: 100%; min-height: 38px; padding: 8px 11px 8px 34px; border: 1px solid var(--joon); border-radius: 9px; background: #fff; }
.ee__otsi input:focus { outline: none; border-color: var(--must); }
.ee__riba select { min-height: 38px; min-width: 220px; padding: 8px 11px; border: 1px solid var(--joon); border-radius: 9px; background: #fff; }
.ee__tabel td { vertical-align: top; }
.ee__tabel tbody tr[data-rida], tbody tr[data-naita] { cursor: pointer; }
.ee__tabel td.murdub { min-width: 150px; overflow-wrap: anywhere; }
/* tabel mahub alati laiusesse: nimetus murdub, töökaardi nimi lüheneb, kitsamal ekraanil jäävad kogus ja ühikuhind ära */
.ee__tabel th, .ee__tabel td { padding-left: 8px; padding-right: 8px; }
/* jaotise pealkiri ja kokkuvõtte rea nimi murduvad: pikk pealkiri ei tohi tabelit laiaks venitada */
.ee__tabel tr.ee__jaotis td:first-child, .ee__tabel tfoot td:first-child { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.ee__tabel .ee__nr { width: 1%; color: var(--hall); }
.ee__tabel .ee__tk { width: 1%; }
.ee__too { max-width: 150px; gap: 5px; }
.ee__too b { font-weight: 400; }
.ee__too span { overflow: hidden; text-overflow: ellipsis; }
.ee__tk .tekstinupp { max-width: 150px; }
@media (max-width: 1500px) { .ee__too, .ee__tk .tekstinupp { max-width: 112px; } }
/* kitsenedes kaob esmalt eraldi koguse tulp (kogus on hetkeseisu lahtris niikuinii näha), siis tegelik kulu, siis töökaardi nimi */
@media (max-width: 1300px) { .ee__tabel .ee__lai { display: none; } }
@media (max-width: 720px) {
  .ee__tabel { font-size: 12px; }
  .ee__tabel th, .ee__tabel td { padding: 8px 4px; }
  .ee__tabel td.murdub { min-width: 84px; }
  .ee__tabel:not(.ee__tabel--tood) .ee__too span, .ee__tabel:not(.ee__tabel--tood) .ee__too b { display: none; }
  .ee__tabel .ee__lai2 { display: none; }
  .ee__tabel--tood .ee__too { max-width: 92px; }
  .ee__tabel--tood .ee__too b { display: none; }
  .ee__tabel--tood td .tapp { margin-right: 4px; }
  .ee__tabel tr.ee__jaotis td:nth-child(1), .ee__tabel tfoot td:nth-child(1) { white-space: normal; overflow-wrap: anywhere; }
  .ee__tabel th, .ee__tabel td { padding-left: 3px; padding-right: 3px; }
  /* Nr-tulp tõmbub nulli (mitte display: none): jaotise ja kokkuvõtte rea ühendatud lahter jääb muidu ühe tulba võrra nihkesse */
  .ee__tabel th.ee__nr, .ee__tabel td.ee__nr { width: 0; max-width: 0; padding: 0; font-size: 0; overflow: hidden; }
  .ee__tabel th { white-space: normal; vertical-align: bottom; }
  .ee__tabel th.ee__tk { font-size: 0; }
  .ee__tk .tekstinupp { font-size: 0; gap: 0; padding: 2px; }
  .ee__tk .puudub { font-size: 0; }
  .ee__tk .puudub::before { content: '–'; font-size: 12px; }
  .ee__tabel td .tapp { margin-right: 0; }
  .ee__tabel tr > :nth-child(2) { padding-left: 2px; }
  .ee__jaotis .tekstinupp { font-size: 12px; }
}
tr.ee__jaotis td { background: var(--taust); font-weight: 500; padding-top: 8px; padding-bottom: 8px; }
tr.ee__jaotis .tekstinupp { padding: 2px 6px; font-weight: 400; }
.ee__too { display: inline-flex; align-items: center; white-space: nowrap; min-width: 0; }
.tabel tfoot td { font-weight: 500; border-top: 1px solid var(--joon); border-bottom: 0; }
.ee__all { margin-top: 12px; color: var(--hall); font-size: 13px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ee__tyhi { display: grid; justify-items: start; gap: 12px; padding: 12px 0 6px; color: var(--hall); max-width: 560px; }
.ee__veerud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.ee__leitud { color: var(--hall); }
.ee__leitud b { color: var(--tekst); }
.ee__eel { display: grid; gap: 12px; }
.ee__eel select { min-height: 36px; padding: 6px 9px; border: 1px solid var(--joon); border-radius: 8px; background: #fff; max-width: 100%; }
.ee__eel td.murdub { white-space: normal; min-width: 200px; }
@media (max-width: 720px) {
  .ee__kokku { grid-template-columns: 1fr 1fr; }
  .ee__veerud, .kolm { grid-template-columns: 1fr 1fr; }
  .ee__riba select { min-width: 0; flex: 1; }
}

/* ---------- elemendid joonisel (radiaator, aed, värav, parkimine …) ---------- */
.lo__elemendid { position: absolute; inset: 0; pointer-events: none; }
.el { fill: none; stroke: var(--v); stroke-width: 2.5px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.el--ala { fill: var(--v); fill-opacity: .08; stroke-width: 1.5px; stroke-dasharray: 6 3; }
.el--aed { stroke-dasharray: 12 5 2 5; }
.el--tee { stroke-width: 3px; stroke-dasharray: 1 7; }
.el--joon.on { stroke-width: 5px; filter: drop-shadow(0 0 2px rgb(16 18 22 / .55)); }
.el--ala.on { stroke: var(--must); stroke-width: 2.5px; stroke-dasharray: none; fill-opacity: .16; }
.el__tabamus { fill: none; stroke: transparent; stroke-width: 16px; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.elm { position: absolute; translate: -50% -50%; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1.5px solid var(--v); border-radius: 6px; background: #fff; color: var(--v); box-shadow: 0 1px 3px rgb(16 18 22 / .2); pointer-events: auto; touch-action: none; }
.elm .ik { width: 13px; height: 13px; }
.elm span { position: absolute; left: calc(100% + 5px); top: 50%; translate: 0 -50%; padding: 1px 6px; border-radius: 5px; background: rgb(255 255 255 / .92); color: var(--tekst); font-size: 11.5px; white-space: nowrap; pointer-events: none; }
.elm.on, .elsilt.on { box-shadow: 0 0 0 2.5px var(--must); }
.elm--liigub { cursor: grabbing; z-index: 2; box-shadow: 0 4px 12px rgb(16 18 22 / .3); }
/* valveseade, millel on aadress (kaamera): roheline täpp all paremal */
.elm--link::before { content: ''; position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: #2f9e58; border: 1.5px solid #fff; }
.elsilt { position: absolute; translate: -50% -50%; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border: 1px solid var(--v); border-radius: 6px; background: #fff; color: var(--v); font-size: 11.5px; white-space: nowrap; pointer-events: auto; }
.elsilt .ik { width: 13px; height: 13px; }
.elsilt span { color: var(--tekst); }
.elnool { position: absolute; width: 0; height: 0; translate: -100% -50%; transform-origin: 100% 50%; border-left: 12px solid var(--v); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.lo--joonista .elm, .lo--joonista .elsilt, .lo--joonista .el__tabamus { pointer-events: none; }
.must-kuju--valik { stroke: #2f7de1; fill: #2f7de1; fill-opacity: .08; }
/* tööriistariba: elemendi valik */
.riistad { position: relative; }
.elnupp { border: 1px solid var(--joon); padding: 5px 10px; }
.elnupp.on { background: var(--must); border-color: var(--must); color: #fff; }
.elmenyy { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(430px, calc(100vw - 40px)); max-height: min(70vh, 520px); overflow: auto; padding: 8px 12px 12px; background: #fff; border: 1px solid var(--joon); border-radius: 12px; box-shadow: 0 12px 40px rgb(16 18 22 / .16); }
.elmenyy h3 { margin: 8px 0 4px; }
.elmenyy__read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
.elmenyy button { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 8px; border: 0; border-radius: 8px; background: none; text-align: left; }
.elmenyy button:hover { background: var(--joon2); }
.elmenyy button .ik { color: var(--v); }
.elmenyy button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* valitud elementide riba */
.elvalik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 6px 8px 6px 14px; border: 1px solid var(--joon); border-radius: 10px; background: var(--taust); }
.elvalik__siht { display: inline-flex; align-items: center; gap: 8px; color: var(--hall); }
.elvalik select { min-height: 34px; padding: 5px 9px; border: 1px solid var(--joon); border-radius: 8px; background: #fff; }
.elvalik .nupp { min-height: 34px; padding: 6px 12px; }
.elvalik__vahe { flex: 1; }
/* vasak paneel: päis ühe silmaga, töö olek ja teostaja, elemendirühmad */
.kihid__pea { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; margin-top: 10px; }
.kihid__pea:first-child { margin-top: 0; }
.kihid__pea h3 { margin: 0 0 0 2px; }
.kihid__pea .ikn { width: 30px; height: 30px; }
.kiht__nimi .kiht__tekst { display: grid; white-space: normal; }
.kiht__tekst b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiht__olek { font-style: normal; font-size: 11px; color: var(--hall); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiht__olek--toos { color: #1d7a41; }
.kiht__olek--seisak { color: var(--oht); }
.elik { display: inline-grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--v); }
.elik .ik { width: 15px; height: 15px; }

/* ---------- töö olek ---------- */
.olekud { grid-column: 1 / -1; display: flex; padding: 3px; margin-top: 6px; border-radius: 9px; background: var(--joon2); }
.olekud button { flex: 1; border: 0; background: none; padding: 6px 4px; border-radius: 7px; color: var(--hall); font-size: 13px; white-space: nowrap; }
.olekud button:hover { color: var(--tekst); }
.olekud button.on { background: #fff; color: var(--tekst); font-weight: 500; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.olekud .olekud__toos.on { background: #2f9e58; color: #fff; }
.olekud .olekud__seisak.on { background: var(--punane); color: #fff; }
.olekud .olekud__tehtud.on { background: var(--must); color: #fff; }
.olek { display: inline-flex; padding: 2px 10px; border-radius: 999px; background: var(--joon2); font-size: 12.5px; white-space: nowrap; }
.olek--toos { background: #e3f4e9; color: #1d7a41; }
.olek--seisak { background: #fde8e8; color: var(--oht); }
.olek--labi { background: var(--must); color: #fff; }
.kaart header .kaart__kes { color: var(--tekst); }

/* ---------- töökaardi täisvaade ---------- */
.tk__leht { display: grid; gap: 14px; min-width: 0; }
.tk__tagasi { margin: -4px 0 8px -8px; }
.tk__pea { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.tk__pea > div { flex: 1; min-width: 200px; }
.tk__pea > .tapp { width: 12px; height: 12px; margin-top: 8px; }
.tk__olek { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.tk__olek .olekud { margin: 0 0 0 auto; flex: 0 1 400px; }
.tk__kirj { margin-top: 10px; color: var(--hall); white-space: pre-wrap; }
.tk__pilt { display: block; max-width: 160px; max-height: 110px; margin-bottom: 4px; border-radius: 6px; }
.tk__liik { display: inline-flex; align-items: center; gap: 5px; }
.tk__leht .arvud__rida b { font-weight: 400; text-align: right; }
.tk__leht tbody tr[data-akt] { cursor: pointer; }
@media (max-width: 720px) { .tk__olek .olekud { margin-left: 0; flex-basis: 100%; } .elmenyy { left: 0; right: auto; } }
/* kitsal ekraanil on vasak paneel kiipide rida: rühma päis (silm + nimi) omal real */
@media (max-width: 1180px) {
  .jn__kihid .kihid__pea { flex-basis: 100%; margin-top: 4px; }
  .jn__kihid .kihid__pea h3 { display: block; }
  .jn__kihid .kiht__nimi small { display: inline; }
  .jn__kihid .kiht__nimi .tapp + .kiht__tekst + small { display: none; }
}

/* ---------- eelarve hetkeseis ja rahaakt ---------- */
.ee__nimi { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.ee__tabel .ee__hetk { width: 168px; min-width: 150px; white-space: normal; }
.ee__tabel td.ee__hetk[data-hetk], .ee__tabel td.ee__hetk[data-hetk-jaotis] { cursor: pointer; }
.ee__tabel td.ee__hetk[data-hetk]:hover, .ee__tabel td.ee__hetk[data-hetk-jaotis]:hover { background: var(--joon2); }
.ee__edenemine { display: flex; align-items: center; gap: 7px; }
.ee__edenemine .riba { flex: 1; height: 6px; }
.ee__edenemine b { flex: none; min-width: 40px; text-align: right; font-weight: 400; font-size: 12px; color: var(--hall); font-variant-numeric: tabular-nums; }
.ee__tehtud { display: block; margin-top: 3px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ee__tehtud span { white-space: nowrap; }
.ee__hetk small { display: block; font-size: 11px; color: var(--hall); white-space: nowrap; }
tr.ee__jaotis .ee__tehtud, .ee__tabel tfoot .ee__tehtud { font-weight: 500; }
.ee__tabel .ee__valik { width: 1%; text-align: center; padding-left: 4px; padding-right: 4px; }
.ee__valik input { width: 16px; height: 16px; margin: 0; vertical-align: middle; accent-color: var(--must); cursor: pointer; }
.ee__valik input:disabled { cursor: default; opacity: .35; }
.ee__akt { position: sticky; top: -8px; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 8px 8px 14px; border-radius: 10px; background: var(--must); color: #fff; }
.ee__akt b { font-weight: 500; }
.ee__aktvahe { flex: 1; }
.ee__akt .tekstinupp { color: #c9ced6; }
.ee__akt .tekstinupp:hover { background: rgb(255 255 255 / .12); color: #fff; }
.ee__akt .nupp { min-height: 34px; padding: 6px 12px; background: #fff; color: var(--must); }
.ee__liugur { width: 100%; accent-color: var(--must); }
.ee__hetksumma { color: var(--hall); }
.ee__hetksumma b { color: var(--tekst); font-size: 16px; }
.akt__sakid { margin-bottom: 12px; }
.ra__tabel td.murdub { white-space: normal; min-width: 180px; }
.ra__kokku { max-width: 360px; margin-left: auto; }
.ra__tasuda b { font-size: 16px; }
@media (max-width: 1100px) { .ee__tabel .ee__keskm { display: none; } }
@media (max-width: 1040px) { .ee__tabel:not(.ee__tabel--tood) .ee__too span { display: none; } }
@media (max-width: 980px) {
  .ee__tabel th.ee__nr, .ee__tabel td.ee__nr { width: 0; max-width: 0; padding: 0; font-size: 0; overflow: hidden; }
  .ee__tabel .ee__hetk { width: 124px; min-width: 116px; }
  .ee__tabel td.murdub { min-width: 130px; }
}
@media (max-width: 720px) {
  .ee__tabel .ee__hetk { width: 84px; min-width: 80px; }
  .ee__tabel td.murdub { min-width: 76px; }
  .ee__tabel .ee__valik { padding-left: 1px; padding-right: 1px; }
  .ee__tabel .ee__tk { display: none; }
  .ee__tehtud { font-size: 11px; }
  .ee__tehtud span { white-space: normal; }
  .ee__edenemine b { min-width: 30px; font-size: 11px; }
  .ee__hetk small { display: none; }
  .ee__akt { top: -4px; }
}
/* väike telefon (360 px) */
@media (max-width: 380px) {
  .ee__tabel .ee__hetk { width: 72px; min-width: 70px; }
  .ee__tabel td.murdub { min-width: 68px; }
}

/* ---------- rahaakt = teostatud tööde akt: kogu eelarve tabel viie tulbarühmaga, reserv ---------- */
.ee__osa { display: block; font-size: 11px; color: var(--hall); }
tr.ee__reserv { cursor: pointer; }
tr.ee__reserv .ik { width: 13px; height: 13px; margin-left: 4px; color: var(--hele); vertical-align: -2px; }
tr.ee__reserv:hover td { background: var(--joon2); }
.ra__osapooled { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.ra__osapooled > div { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--joon); border-radius: 10px; min-width: 0; }
.ra__osapooled span { font-size: 12px; color: var(--hall); }
.ra__osapooled small { color: var(--hall); overflow-wrap: anywhere; }
.ra__filter { margin-bottom: 10px; }
.ra__akt th.ra__ryhm { text-align: center; color: var(--tekst); font-weight: 500; border-left: 1px solid var(--joon); }
.ra__akt td.ra__v:nth-child(odd), .ra__akt td.ra__a:nth-child(odd), .ra__akt td.ra__k:nth-child(odd), .ra__akt td.ra__j:nth-child(odd),
.ra__akt thead tr:last-child th:nth-child(odd):not(:first-child) { border-left: 1px solid var(--joon2); }
.ra__akt td.ra__a, .ra__akt th.ra__a { background: #f6f8ff; }
.ra__akt tr.ra__sees td.ra__a { background: #e8eeff; }
.ra__akt td.ra__j { color: var(--hall); }
.ra__akt tfoot td.ra__j { color: var(--tekst); }
.ra__akt tr.ra__kasutus td { font-weight: 400; border-top: 0; }
.ra__akt tr.ra__lopp td { font-size: 13.5px; border-top: 2px solid var(--must); }
.ra__akt td.murdub { min-width: 130px; }
.ra__akt tfoot td { white-space: nowrap; }
.ra__akt tfoot td:first-child { white-space: normal; }
.ra__akt { font-size: 12.5px; }
.ra__akt th, .ra__akt td { padding-left: 6px; padding-right: 6px; }
.ra__akt td:nth-child(3) { white-space: normal; }
.ra__nimekiri tbody tr { cursor: pointer; }
.ra__valik td.murdub { white-space: normal; min-width: 180px; }
.ra__reserv { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .6fr) auto; gap: 8px; align-items: end; margin-bottom: 8px; }
@media (max-width: 1300px) { .ra__akt .ra__k { display: none; } }
@media (max-width: 1180px) { .ra__akt .ra__v { display: none; } }
@media (max-width: 980px) { .ra__akt th.ee__nr, .ra__akt td.ee__nr { width: 0; max-width: 0; padding: 0; font-size: 0; overflow: hidden; } .ra__akt td.murdub { min-width: 110px; } }
@media (max-width: 720px) {
  .ra__osapooled { grid-template-columns: 1fr; }
  .ra__reserv { grid-template-columns: 1fr 1fr; }
}

/* ---------- tarne staatus ühe vajutusega (töökaart, tarnete leht, töökaardi täisvaade) ---------- */
.tolek { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.tolek button { border: 1px solid var(--joon); background: #fff; padding: 2px 9px; border-radius: 999px; font-size: 12px; color: var(--hall); white-space: nowrap; }
.tolek button:hover { border-color: var(--must); color: var(--tekst); }
.tolek button.on { background: var(--must); border-color: var(--must); color: #fff; }
.tolek .tolek__teel.on { background: #2f7de1; border-color: #2f7de1; }
.tolek .tolek__kohal.on, .tolek .tolek__tagastatud.on { background: #2f9e58; border-color: #2f9e58; }
.tolek .tolek__hilineb.on, .tolek--yle .tolek__rendis.on { background: var(--punane); border-color: var(--punane); }
.kaart__tarned .tolek { flex-basis: 100%; padding-left: 28px; }
.kaart__tarned .tolek__tekst { color: var(--hall); }
/* näidise päis väikesel telefonil: logo nimi ära, et vaate valik mahuks */
@media (max-width: 480px) {
  .pais:has(.naidis__silt) .logo__nimi { display: none; }
  .pais:has(.naidis__silt) { gap: 8px; padding: 0 10px; }
  .naidis__vaade select, .naidis__vaade .vk { min-width: 108px; }
}

/* ---------- töökaardiga seotud elemendid ---------- */
.elm.el--too::after, .elsilt.el--too::after { content: ''; position: absolute; right: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--t); border: 1.5px solid #fff; }
.elsilt.el--too { position: absolute; }
.elm.el--valitud, .elsilt.el--valitud { box-shadow: 0 0 0 2.5px var(--t); }
.elm.on.el--valitud, .elsilt.on.el--valitud { box-shadow: 0 0 0 2.5px var(--must); }
.elmenyy__too { display: flex; margin: 2px 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--joon2); font-size: 13px; color: var(--hall); }
.elmenyy__too b { font-weight: 500; color: var(--tekst); white-space: nowrap; }
.elmenyy__too .tapp { margin-right: 5px; }
.elnupp__too { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; color: var(--hall); font-size: 12px; }
.kaart__elemendid { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.kaart__elemendid li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: 8px; cursor: pointer; }
.kaart__elemendid li:hover { background: var(--joon2); }
.kaart__elemendid span { flex: 1; min-width: 0; }
.kaart__elemendid small { color: var(--hall); white-space: nowrap; }
.tk__el { display: inline-flex; align-items: center; gap: 8px; }
tr[data-naita-el] { cursor: pointer; }

/* ---------- koosoleku osalejad: projekti osapooled valitakse klõpsuga, külaline = nimi + e-post ---------- */
.ko__kiibid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ko__kiip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px 5px 8px; border: 1px solid var(--joon); border-radius: 999px; background: #fff; color: var(--tekst); font: inherit; font-size: 13px; cursor: pointer; }
.ko__kiip .ik { width: 14px; height: 14px; color: transparent; }
.ko__kiip small { color: var(--hall); }
.ko__kiip:hover { background: var(--joon2); }
.ko__kiip.on { background: var(--must); border-color: var(--must); color: #fff; }
.ko__kiip.on .ik { color: #fff; }
.ko__kiip.on small { color: #c9ced6; }
/* külaline: lühend, nimi, „Külaline“ asutuse tulbas, e-post üle telefoni ja e-posti tulba (sama ruudustik mis osapoolel) */
.ko__o--kylaline [data-o="lyhend"] { grid-column: 1; }
.ko__o--kylaline [data-o="nimi"] { grid-column: 2; }
.ko__o--kylaline .ko__silt { grid-column: 3; }
.ko__o--kylaline [data-o="email"] { grid-column: 4 / 7; }
.ko__o--kylaline .ikn { grid-column: 7; }
.ko__silt { align-self: center; padding: 3px 0; font-size: 12px; color: var(--hall); }
.ko__nupud { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }
.ko__saadetud { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: #1f7a45; font-size: 11.5px; }
.ko__saadetud .ik { width: 12px; height: 12px; }
.ko__saajad { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ko__saajad li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--joon2); border-radius: 9px; }
.ko__saajad li .ik { width: 14px; height: 14px; color: var(--hele); }
.ko__saajad li small { color: var(--hele); overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .ko__o--kylaline .ko__silt { display: none; }
  .ko__o--kylaline [data-o="lyhend"] { grid-column: 1; grid-row: 1; }
  .ko__o--kylaline [data-o="nimi"] { grid-column: 2; grid-row: 1; }
  .ko__o--kylaline [data-o="email"] { grid-column: 1 / -1; grid-row: 2; }
  .ko__o--kylaline .ikn { grid-column: 3; grid-row: 1; }
  .ko__saajad li { grid-template-columns: auto minmax(0, 1fr); }
  .ko__saajad li small { grid-column: 2; }
}

/* ---------- korterid ja ruumid ---------- */
/* Ala joonisel: ainult piirjoon (klõps ala sees läheb tööde tsoonidele), nimi ala ülemises vasakus nurgas. */
.el--ruum { fill: none; stroke: var(--must); stroke-width: 1.5px; stroke-dasharray: 2 5; }
.el--ruum.on { fill: var(--must); fill-opacity: .06; stroke-width: 2.5px; stroke-dasharray: none; }
.elsilt--ruum { translate: 5px 5px; padding: 1px 7px; border: 1px solid var(--must); border-radius: 5px; background: #fff; color: var(--tekst); font-weight: 500; }
/* Vasak paneel: korter või ruum on kategooria, mille all on selle sees olevad tööd ja elemendid; ruum korteri sees on taandega. */
.ruum { padding-left: calc(var(--tase, 0) * 14px); }
.ruum__nool .ik { transition: rotate .15s; }
.ruum__nool { color: var(--hele); }
.ruum__nool--lahti .ik { rotate: 90deg; }
.ruum__sees { display: grid; padding: 0 0 4px 30px; }
.ruum__sees .kiht__nimi { width: 100%; padding: 4px 6px; border-radius: 8px; font-size: 13px; }
.ruum__sees .kiht__nimi:hover, .ruum__sees .kiht__nimi.on { background: var(--joon2); }
@media (max-width: 1180px) {
  .ruum { display: contents; }
  .ruum__sees, .ruum__nool { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ruum__nool .ik { transition: none; } }

/* ---------- nädalaplaan (nadalaplaan.js) ---------- */
.np__nav { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.np__nav b { font-weight: 500; white-space: nowrap; }
.np { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 12px; }
.np__too { border: 1px solid var(--joon); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.np__too header { display: flex; align-items: flex-start; gap: 8px; }
.np__too header .tapp { margin-top: 5px; }
.np__too header div { display: grid; min-width: 0; }
.np__too header span { color: var(--hall); font-size: 12.5px; }
.np__too textarea { width: 100%; resize: vertical; }
.np__read { margin: 0; padding-left: 18px; }
.np__read li { margin: 2px 0; }
.np__all { display: flex; justify-content: flex-end; margin-top: 12px; }

/* teleka vaade (#/p/<id>/telekas): joonis ja Gantt korraga, suurem kiri, menüüd pole */
.tv { --nimi-l: 230px; --aeg-l: 100px; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); background: var(--taust); }
.tv--peida, .tv--peida * { cursor: none !important; }
.tv__pea { display: flex; align-items: center; gap: 14px; height: 64px; padding: 0 16px 0 20px; background: var(--pind); border-bottom: 1px solid var(--joon); }
.tv__pea > .logo, .tv__pea > .ikn { flex: none; }
.tv__projekt { min-width: 0; font-size: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv__vahe { flex: 1; }
.tv__kp { color: var(--hall); font-size: 16px; white-space: nowrap; }
.tv__kell { font-size: 26px; font-variant-numeric: tabular-nums; }
.tv__keha { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; padding: 14px; min-height: 0; }
.tv__joonis, .tv__aj { display: flex; flex-direction: column; min-height: 0; padding: 12px; background: var(--pind); border: 1px solid var(--joon); border-radius: 14px; }
.tv__sakid { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tv__valitud { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 500; }
.tv__joonis .lo { flex: 1; min-height: 0; max-height: none; }
.tv__joonis .lo__nupud { display: none; }
.tv__aj .aj__pea, .tv__aj .joon { display: none; }
.tv__aj .g { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 15px; }
.tv__aj .g__keha { flex: 1; max-height: none; scrollbar-width: none; }
.tv__aj .g__keha::-webkit-scrollbar { display: none; }
.tv__aj .g__rida, .tv__aj .g__rada { min-height: 42px; }
.tv__aj .g__riba { top: 11px; bottom: 11px; }
.tv__aj .g__nimi b, .tv__aj .g__aeg { font-size: 13px; }
.tv__aj .g__pais { font-size: 13px; }
/* püstine ekraan: joonis üleval, Gantt all; telefonis kerib kogu leht */
@media (max-aspect-ratio: 5/4) { .tv__keha { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (max-width: 760px) {
  .tv { --nimi-l: 150px; --aeg-l: 80px; height: auto; min-height: 100%; }
  .tv__pea { height: 56px; gap: 10px; padding: 0 10px 0 14px; }
  .tv__kp, .tv__projekt { display: none; }
  .tv__keha { grid-template-rows: none; padding: 10px; }
  .tv__joonis .lo { flex: none; height: 60vh; }
  .tv__aj .g__keha { max-height: none; }
}

/* reservajad kliendi juures (ajad.js): töökaardil, lehel „Tööde ajad“ ja kliendi aja valikus */
.aeg__list { display: grid; gap: 4px; margin-bottom: 6px; }
.aeg__list li { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; padding: 7px 9px; border: 1px solid var(--joon2); border-radius: 9px; }
.aeg__list li[data-aeg] { cursor: pointer; }
.aeg__list li[data-aeg]:hover { background: #fafbfc; }
.aeg__list li > .ik { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--hall); }
.aeg__aeg { display: grid; min-width: 0; }
.aeg__aeg small { color: var(--hall); font-size: 12px; }
.aeg__valinud { display: flex; flex-wrap: wrap; width: 100%; padding-left: 24px; font-size: 12.5px; }
.aeg__klient { display: grid; gap: 8px; justify-items: start; }
.aeg__too { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.aeg__too small { color: var(--hall); }
.aeg__valikud { display: grid; gap: 6px; }
.aeg__valik { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--joon); border-radius: 10px; cursor: pointer; }
.aeg__valik:has(input:checked) { border-color: var(--must); box-shadow: inset 0 0 0 .5px var(--must); }
.aeg__valik input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--must); }
.aeg__valik > span { display: grid; }
.aeg__valik small { color: var(--hall); font-size: 12.5px; }
.aeg__valik--tais { opacity: .5; cursor: not-allowed; }
.aeg__kaardid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 12px; }
.aeg__kaart { display: grid; align-content: start; justify-items: start; gap: 6px; padding: 14px; border: 1px solid var(--joon); border-radius: var(--r); }
.aeg__pea { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.aeg__pea small { color: var(--hall); }
.aeg__kaart .nupp { margin-top: 4px; }

/* kirjad klientidele (kirjad.js) */
.kiri__mallid { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.kiri__kohad { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin: -2px 0 12px; color: var(--hall); font-size: 13px; }
.kiri__kohad > span { margin-right: 4px; }
.kiri__manused { display: grid; justify-items: start; gap: 6px; margin-bottom: 12px; }
.kiri__failid { display: grid; gap: 4px; width: 100%; }
.kiri__failid li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kiri__failid li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kiri__failid a { display: inline-flex; align-items: center; gap: 6px; }
.kiri__failid small { color: var(--hele); }
.kiri__failid .ik { flex: none; width: 15px; height: 15px; color: var(--hall); }
.kiri__saajad { display: grid; gap: 8px; margin-bottom: 12px; padding: 10px 12px 12px; border: 1px solid var(--joon); border-radius: var(--r); }
.kiri__saajad legend { padding: 0 4px; color: var(--hall); font-size: 12px; }
.kiri__koik small { margin-left: 4px; color: var(--hele); }
.kiri__saajalist { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; max-height: 190px; overflow: auto; }
.kiri__saajalist small { color: var(--hele); }
.kiri__eelpea { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.kiri__eelpea select { min-height: 36px; padding: 6px 10px; border: 1px solid var(--joon); border-radius: 9px; background: #fff; }
.kiri__eelpea small { color: var(--hall); }
.kiri__eel { max-height: 380px; margin: 10px 0 0; padding: 12px 14px; overflow: auto; border-radius: 10px; background: var(--taust); font: inherit; font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.kiri { display: grid; gap: 8px; padding: 14px 0; border-top: 1px solid var(--joon2); }
.pea + .kiri { border-top: 0; }
.kiri header { display: grid; }
.kiri header small { color: var(--hall); }
.kiri__tekst { max-width: 72ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.kiri__originaal summary { color: var(--hall); font-size: 13px; cursor: pointer; }
.kiri__originaal .kiri__tekst { margin-top: 8px; color: var(--hall); }
.kiri__said { display: grid; gap: 4px; }
.kiri__said li { display: flex; justify-content: space-between; gap: 10px; }
.kiri__said small { display: inline-flex; align-items: center; gap: 4px; color: var(--hall); }
.kiri__said .ik { width: 14px; height: 14px; color: #1f7a45; }

/* korruse plaanid (põrandaplaan, elektriplaan, kütteplaan …) korruse sakkide all ja teine joonis all (joondus) */
.sakk small { margin-left: 6px; color: var(--hele); font-size: 11.5px; }
.sakk.on small { color: inherit; opacity: .7; }
.plaanid { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.plaan { padding: 4px 11px; border: 1px solid var(--joon); border-radius: 999px; background: #fff; color: var(--hall); font-size: 13px; }
.plaan:hover { border-color: var(--hele); color: var(--tekst); }
.plaan.on { border-color: var(--must); color: var(--tekst); box-shadow: inset 0 0 0 .5px var(--must); }
.plaanid__vahe { flex: 1; }
.plaanid__alus { display: inline-flex; align-items: center; gap: 8px; color: var(--hall); font-size: 13px; }
.plaanid__alus select { min-height: 32px; padding: 4px 10px; border: 1px solid var(--joon); border-radius: 9px; background: #fff; font-size: 13px; }
/* teine joonis all: sinakas, läbipaistev, joonte peal näha (multiply), punktid ja kujundid jäävad üles */
.lo__alus { position: absolute; left: 0; top: 0; height: auto; max-width: none; transform-origin: 0 0; opacity: .55; mix-blend-mode: multiply;
  filter: sepia(1) saturate(5) hue-rotate(180deg); pointer-events: none; user-select: none; }
/* joonduspunkt: sihik numbriga */
.jp { position: absolute; width: 26px; height: 26px; translate: -50% -50%; border: 2px solid var(--punane); border-radius: 50%; pointer-events: none; }
.jp::before, .jp::after { content: ''; position: absolute; background: var(--punane); }
.jp::before { left: 50%; top: -7px; bottom: -7px; width: 2px; translate: -50% 0; }
.jp::after { top: 50%; left: -7px; right: -7px; height: 2px; translate: 0 -50%; }
.jp b { position: absolute; left: 100%; top: -14px; margin-left: 6px; padding: 0 5px; border-radius: 6px; background: var(--punane); color: #fff; font-size: 12px; line-height: 18px; }

/* profiil ja isikuandmete töötlemise teave */
a.pais__kes:hover b { text-decoration: underline; }
.profiil { display: grid; gap: 12px; max-width: 860px; }
.profiil > .tekstinupp { justify-self: start; }
.profiil__vorm { display: grid; gap: 12px; }
.profiil__vorm .nupp { justify-self: start; }
.profiil__dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.profiil__dl dt { color: var(--hall); }
.profiil__dl dd { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.profiil__projektid { display: grid; gap: 6px; }
.profiil__projektid li { display: flex; justify-content: space-between; gap: 12px; }
.profiil__projektid li span { color: var(--hall); }
.profiil__nupud { justify-content: flex-start; margin-top: 12px; flex-wrap: wrap; }
.profiil .link .ik, .sis__ak .ik { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.sis__ak { justify-self: center; margin-top: 4px; color: var(--hall); font-size: 13px; }
.sis--ak { align-items: start; overflow: auto; padding: 32px 16px; }
.sis__kast--lai { width: min(760px, 100%); }
.ak { display: grid; gap: 18px; max-width: 72ch; }
.ak h1 { font-size: 22px; }
.ak__plokk h2 { margin-bottom: 6px; }
.ak__plokk ul { display: grid; gap: 6px; padding-left: 18px; list-style: disc; }
.ak__plokk li { line-height: 1.5; }

/* ettepanek kliendile kogu kirjana (reavahetused alles) */
.mrk__kiri { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- makse (wpilot.eu): paketid, päise silt, Seaded → Makse, projektikaardi rida ---------- */
.paketid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pakett { position: relative; display: grid; align-content: start; gap: 2px; padding: 12px; border: 1px solid var(--joon); border-radius: 10px; background: #fff; color: var(--hall); cursor: pointer; }
.pakett input { position: absolute; opacity: 0; pointer-events: none; }
.pakett b { color: var(--tekst); font-size: 14px; }
.pakett strong { color: var(--tekst); font-size: 20px; font-weight: 500; margin-top: 4px; }
.pakett span { font-size: 12px; }
.pakett small { font-size: 12px; margin-top: 6px; }
.pakett:hover { border-color: var(--hele); }
.pakett:has(input:checked) { border-color: var(--must); box-shadow: inset 0 0 0 1px var(--must); }
.pakett:has(input:focus-visible) { outline: 2px solid var(--must); outline-offset: 2px; }
.pakett__km { font-size: 12px; color: var(--hall); }
.makse__silt { flex: none; border: 0; padding: 3px 10px; border-radius: 999px; background: #fdecec; color: #a3261f; font-size: 12px; font-weight: 500; white-space: nowrap; }
.makse__silt--peagi { background: #fff4d6; color: #7a5200; }
.makse__seis { color: var(--hall); }
.plokk.makse { display: grid; gap: 10px; }
.makse__nupud { display: flex; flex-wrap: wrap; gap: 8px; }
.pkaart__makse { font-size: 13px; }
.pkaart__makse--lopp { color: var(--oht); }
/* kitsal ekraanil üks kaart reas: nimi ja hind üleval, säästu tekst ja „projekt kuus“ all */
@media (max-width: 560px) {
  .paketid { grid-template-columns: 1fr; }
  .pakett { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 12px; }
  .pakett b { grid-area: 1 / 1; align-self: center; }
  .pakett strong { grid-area: 1 / 2; margin: 0; text-align: right; font-size: 18px; }
  .pakett span { grid-area: 2 / 2; text-align: right; align-self: start; }
  .pakett small { grid-area: 2 / 1; margin: 0; }
}