:root{
  --bg:#E4E7E2; --surface:#fff; --sunk:#F2F3F0; --ink:#15181B; --muted:#5E665F;
  --line:#C8CCC5; --accent:#0E5A4A; --accent-soft:#DBE7E2; --warn:#A8341C; --warn-soft:#F7E7E3;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;line-height:1.45;
     -webkit-text-size-adjust:100%}
.wrap{max-width:900px;margin:0 auto;padding:0 12px}

/* ── sisselogimine ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
            padding:26px 22px;width:100%;max-width:360px}
.login-mark{font-weight:800;letter-spacing:.14em;font-size:12px;text-transform:uppercase;color:var(--muted)}
.login-card h1{font-size:21px;margin:6px 0 18px}
.login-card input{width:100%;padding:11px 10px;border:1px solid var(--line);border-radius:6px;
                  font-size:16px;font-family:var(--ui);margin-bottom:12px;background:#fff;color:var(--ink)}
.login-legal{margin-top:16px;text-align:center;font-size:12px;color:var(--muted)}
.login-legal a{color:var(--muted);text-decoration:none}
.login-legal a:hover{text-decoration:underline}
.login-err{background:var(--warn-soft);color:var(--warn);padding:9px 11px;border-radius:6px;
           font-size:13px;margin-bottom:12px}
.hint{font-size:13px;color:var(--muted);margin:-8px 0 16px}
.lbl{display:block;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
     color:var(--muted);margin-bottom:4px}

/* ── raam ── */
.topbar{background:var(--ink)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;padding:11px 12px;gap:10px}
.brand{color:#fff;font-weight:800;letter-spacing:.14em;font-size:12.5px;text-transform:uppercase;
       overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.who{color:#9AA69F;font-size:12px}
.tabs{background:var(--surface);border-bottom:1px solid var(--line);overflow-x:auto;
      -webkit-overflow-scrolling:touch}
.tabs-in{display:flex;padding:0 12px}
.tab{background:none;border:0;border-bottom:2px solid transparent;padding:12px 11px;font-size:13px;
     font-weight:500;color:var(--muted);white-space:nowrap;cursor:pointer;font-family:inherit}
.tab.on{color:var(--accent);font-weight:700;border-bottom-color:var(--accent)}
main{padding-top:16px;padding-bottom:80px}
.loading{color:var(--muted);font-size:14px;padding:24px 0;text-align:center}

.msg{max-width:900px;width:calc(100% - 24px);margin:12px auto 0;padding:9px 12px;border-radius:6px;
     font-size:13px;background:var(--warn-soft);color:var(--warn);overflow-wrap:anywhere}
.msg.ok{background:var(--accent-soft);color:var(--accent)}

/* ── plokid ── */
.sect{margin-bottom:18px}
.sect-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.sect-title{font-size:11px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;margin-bottom:8px}
.card.pad{padding:12px}
.card-row{padding:10px 12px;border-top:1px solid var(--line)}
.card-row:first-child{border-top:0}
.empty{text-align:center;padding:34px 16px;color:var(--muted);font-size:14px}
.note{background:var(--sunk);color:var(--muted);border-radius:6px;padding:7px 10px;font-size:12px;
      margin-top:8px;overflow-wrap:anywhere}
.note.warn{background:var(--warn-soft);color:var(--warn)}

/* ── vormid ── */
.grid{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:1fr 1fr 1fr 1fr}
.span2{grid-column:1/-1}
.grid > *{min-width:0}   /* võrestiku lahter ei tohi sisu laiuse tõttu ekraanist välja venida */
input,select,textarea{width:100%;padding:9px 8px;border:1px solid var(--line);border-radius:6px;
      font-size:16px;font-family:var(--ui);background:#fff;color:var(--ink)}
textarea{resize:vertical}
input:disabled{background:var(--sunk);color:var(--muted)}
input.n,td.n input{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* iOS Safari annab kuupäevaväljale oma sisemise laiuse, mida width:100% ei kahanda.
   iPadis voolas väli võrestiku lahtrist üle ja kattis naabervälja — pakkumise päises
   jooksid „Kuupäev", „Kehtib kuni" ja „Staatus" üksteise peale. appearance:none võtab
   natiivse kujunduse maha, min-width:0 lubab väljal kahaneda ja ::-webkit-date-and-time-value
   joondab väärtuse vasakule, nagu on kõigil teistel väljadel (natiivselt on see keskel).
   Sama kehtib „datetime-local" välja kohta — see on veel laiem, sest sisaldab ka kellaaega,
   ja töö päises jooksid „Algus" ja „Lõpp" sellepärast üksteise peale. */
input[type="date"],input[type="datetime-local"],input[type="time"]{
      -webkit-appearance:none;appearance:none;min-width:0}
input[type="date"]::-webkit-date-and-time-value,
input[type="datetime-local"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{text-align:left;margin:0}
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{margin-left:auto;flex-shrink:0}

/* ── arvutustabelid (freesimise arvestus) ──
   Tabel, mitte kaardiread: neid numbreid loetakse veergude kaupa ja kaardiread teeksid
   võrdlemise võimatuks. Arvutatavad lahtrid (.calc) ei ole muudetavad ja on hallid, nii
   et pliiatsiga saab puudutada ainult neid lahtreid, mida tohib muuta. */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.calc{width:100%;border-collapse:collapse;font-size:13px}
table.calc th,table.calc td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
table.calc th{background:var(--sunk);text-align:left;font-size:11px;letter-spacing:.04em;
      text-transform:uppercase;color:var(--muted);white-space:nowrap}
table.calc th.n,table.calc td.n{text-align:right}
table.calc th.c,table.calc td.c{text-align:center;width:52px}
table.calc td.x{width:44px;text-align:right}
table.calc th.w,table.calc td.w{min-width:200px}
table.calc td.calc{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
table.calc tfoot td{border-top:2px solid var(--ink);border-bottom:none;font-weight:700;padding-top:7px}
/* lahter on kitsas: sisestusväli täidab selle ära ja jääb ilma oma ääristeta rahulikuks.
   Apple Pencil kirjutab tavalisse tekstivälja (Scribble), seega type on text, mitte number. */
table.calc input[type="text"]{padding:6px 5px;border-color:transparent;background:var(--sunk);
      border-radius:5px;font-size:15px}
table.calc input[type="text"]:focus{border-color:var(--accent);background:#fff}
table.calc td.n input{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
table.calc .empty{padding:14px;text-align:center;color:var(--muted)}

/* objektil kulunud: kitsad veerud ühikule ja sammunuppudele */
table.calc.usg td.u,table.calc.usg th.u{width:46px;color:var(--muted);font-size:12px}
table.calc.usg td.s,table.calc.usg th.s{width:86px;white-space:nowrap;text-align:center}
table.calc.usg td.s .btn{min-width:34px;padding:6px 8px;font-size:16px;line-height:1}

/* rida, mis on plaaniga kooskõlas, on roheka taustaga — objektil näeb ühe pilguga,
   mis on üle käidud ja mis veel mitte */
table.calc.usg tr.ok td{background:var(--accent-soft)}
table.calc.usg tr.nt td{padding-top:0;border-bottom:1px solid var(--line)}
table.calc.usg tr.nt input{font-size:13px;background:#fff;border-color:var(--line)}

/* Freesimise seadmete tabel: korrus, ruum ja rühm peavad olema loetavad. Veerge on palju
   ja brauser pressis need kokku nii, et ruumist jäi järele „19_Tu" — tabel kerib
   horisontaalselt niikuinii, seega on parem anda neile kindel miinimumlaius. */
table.calc.dev th:nth-child(1),table.calc.dev td:nth-child(1){min-width:84px}
table.calc.dev th:nth-child(2),table.calc.dev td:nth-child(2){min-width:124px}
table.calc.dev th:nth-child(3),table.calc.dev td:nth-child(3){min-width:96px}

/* ruumide maatriks: esimene veerg jääb kerimisel paigale, numbriveerud on kitsad */
table.calc.mtx td.rm,table.calc.mtx th.rm{position:sticky;left:0;background:var(--surface);
      min-width:132px;z-index:1;box-shadow:1px 0 0 var(--line)}
table.calc.mtx thead th.rm{background:var(--sunk)}
table.calc.mtx tfoot td.rm{background:var(--surface)}
/* Veerupäis on kitsas ja seadme nimi on sageli üks pikk sõna („Turvapistikupesa").
   Ilma murdmiseta jooksis see lahtrist välja ja kattis iPadis naaberpäise ära.
   Suurtähed ja tähevahe on nende nimede jaoks maas — nii mahub nimi ridadele ära
   ja on ka loetavam; murdmine sõna seest jääb ainult viimaseks abinõuks. */
table.calc.mtx th.n{min-width:72px;max-width:96px;white-space:normal;
      overflow-wrap:anywhere;letter-spacing:0;text-transform:none;
      text-align:center;vertical-align:bottom;font-size:10px;line-height:1.25}
table.calc.mtx td.n input{min-width:44px;text-align:center;padding:6px 3px}
table.calc.mtx tr.free td{background:var(--warn-soft);color:var(--warn)}
table.calc.mtx tr.free td.rm{background:var(--warn-soft)}

/* kokkuvõtterida objektil kulunud plokis: liidab kõrguste read ja näitab, kas need
   annavad plaanitud summa. Lahknevus värvitakse, aga pakkumise summat see ei muuda. */
table.calc.usg tr.sum td{background:var(--sunk);border-top:1px solid var(--ink)}
table.calc.usg tr.sum.off td{background:var(--warn-soft)}
table.calc.usg tr.nt.over td{background:var(--warn-soft)}
table.calc.usg tr.nt td .m{display:block;margin-bottom:4px}

/* ── nupud ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 13px;
     border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--ink);
     font-size:14px;font-weight:600;font-family:inherit;cursor:pointer;text-decoration:none}
.btn-sm{padding:5px 9px;font-size:13px}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-danger{color:var(--warn)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-full{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{padding:4px 10px;border-radius:6px;border:1px solid var(--line);background:var(--surface);
      color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;font-family:inherit}
.chip.on{background:var(--accent-soft);color:var(--accent)}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}
.seg{display:flex;gap:5px}
.seg .chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── tekst ── */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.m{color:var(--muted);font-size:12.5px;overflow-wrap:anywhere}
.b{font-weight:700}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rowt{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.min0{min-width:0}
.tag{display:inline-block;padding:2px 8px;border-radius:5px;background:var(--sunk);color:var(--muted);
     font-size:11px;font-weight:700;margin-top:5px}
.money{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600}
.pos{color:var(--accent)} .neg{color:var(--warn)}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(min-width:620px){ .stat-grid{grid-template-columns:1fr 1fr 1fr} }
.stat-l{font-size:11px;color:var(--muted);font-weight:600}
.stat-v{font-family:var(--mono);font-weight:700;font-size:16px}

/* ── pakkumise plokk ── */
.blk-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
          background:var(--sunk);border-radius:7px 7px 0 0}
.blk-title{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
           background:none;border:0;padding:0;text-align:left;cursor:pointer;font-family:inherit;color:var(--ink)}
/* avatud ploki päis jääb kerides nähtavale, et pika ridade nimekirja juures oleks
   kokkutõmbamise nupp alati käeulatuses */
.blk-head-open{position:sticky;top:0;z-index:3}
.blk-body{padding:12px}
/* töö lehe ploki päises kokkuvõte (nt "3 tk · laekumata 1 240 €") — tavakirjas, et see
   ei võistleks suurtähtedes ploki nimega */
.jsect-meta{font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);font-size:11.5px}
.item{background:var(--sunk);border-radius:6px;padding:9px;margin-bottom:8px}
.suggest{border:1px solid var(--line);border-radius:6px;background:#fff;margin-top:4px;overflow:hidden}
.suggest button{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;
                padding:7px 9px;border:0;border-bottom:1px solid var(--line);background:#fff;
                font-size:12.5px;font-family:inherit;cursor:pointer}
.suggest button:last-child{border-bottom:0}
/* laovalik pakkumise real: kaks rida infot (nimetus + tarnija/kood, hind + laoseis) ja
   kerimisala, sest kataloogis on üle tuhande materjali */
.suggest{max-height:340px;overflow-y:auto}
.suggest button{align-items:flex-start}
.sg-main{min-width:0;flex:1}
.sg-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-sub{display:block;font-size:11px;color:var(--muted);margin-top:1px}
.sg-right{flex-shrink:0;text-align:right;white-space:nowrap}
.sg-note{padding:7px 9px;font-size:11.5px;color:var(--muted);background:var(--sunk)}
.suggest button.sg-more{justify-content:center;font-weight:600;color:var(--accent);background:var(--sunk)}
.sg-bar{display:flex;flex-wrap:wrap;gap:4px;padding:6px;background:var(--sunk);
        border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1}
.sg-bar .chip{display:inline-block;width:auto;border:1px solid var(--line);border-radius:6px;
              font-size:11.5px;padding:3px 8px;text-align:center}
.sg-bar .chip.on{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.terms label{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:6px;cursor:pointer}
.terms label.on{background:var(--accent-soft)}
.terms input{width:auto;margin-top:3px}
.totals div{display:flex;justify-content:space-between;padding:3px 0}
.totals .line{border-top:1px solid var(--line);margin-top:5px;padding-top:8px}
.totals .dash{border-top:1px dashed var(--line);margin-top:7px;padding-top:7px}
.drop{border:1px dashed var(--line);background:var(--sunk);border-radius:7px;padding:14px;
      text-align:center;font-weight:600;color:var(--accent);font-size:14px;cursor:pointer;display:block}
.drop input{display:none}
.drop.drag{border-color:var(--accent);background:var(--sunk2, var(--sunk));box-shadow:inset 0 0 0 2px var(--accent)}

/* ── märkmete manused (töö lehel märkmete all) ── */
.note-tiles{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.note-tile{position:relative;width:104px}
.note-tile>a{display:block;border:1px solid var(--line);border-radius:7px;overflow:hidden;
             background:var(--sunk);text-decoration:none;color:inherit}
.note-tile img{display:block;width:104px;height:104px;object-fit:cover}
.note-doc{width:104px;height:104px;display:flex;flex-direction:column;align-items:center;
          justify-content:center;gap:6px;padding:6px}
.note-doc-ic{font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--accent);
             border:1px solid var(--line);border-radius:4px;padding:3px 7px;background:var(--surface)}
.note-doc-nm{font-size:11px;line-height:1.25;text-align:center;color:var(--muted);
             overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
             word-break:break-word}
.note-x{position:absolute;top:4px;right:4px;border:0;border-radius:5px;background:rgba(21,24,27,.7);
        color:#fff;font-size:13px;line-height:1;padding:4px 7px;cursor:pointer;font-family:inherit}
.note-x.on{background:var(--warn);font-size:11px;font-weight:600}

/* ── mobiil ──
   Kaks võrdset veergu on telefonis liiga kitsad: sildid murduvad, sisestusväljad
   (16px kirja) lähevad üksteise otsa ja rida paistab paigast ära. Kitsal ekraanil
   laotakse vormid ühte veergu ja lubatakse ridadel murduda. */
@media(max-width:600px){
  .g2,.g3{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr 1fr}
  .row,.sect-head,.blk-head{flex-wrap:wrap}
  .row > .money{margin-left:auto}
  /* kaardipäis: nimi murdub oma veerus, summad jäävad paremale kõrvale */
  .rowt{flex-wrap:nowrap}
  .rowt > .min0{flex:1 1 auto}
  .rowt > :last-child{flex-shrink:0}
  .card.pad{padding:11px}
  .card-row{padding:10px}
  .stat-v{font-size:15px}
  .note-tile,.note-tile img,.note-doc{width:88px}
  .note-tile img,.note-doc{height:88px}
}
@media(max-width:400px){
  .btn{padding:8px 10px}
  .btn-sm{padding:5px 7px;font-size:12.5px}
}

/* Vastaspoolte aruande liigivalik: peab mahtuma summa kõrvale ka telefonis,
   seega kitsam ja väiksema kirjaga kui tavaline valikuväli. */
select.party-kind{width:104px;flex:0 0 auto;font-size:11px;padding:2px 4px;height:auto}

/* Pakkumise ploki päises kliendile minev rea tekst. Plokinimi tuleb kinnisest nimekirjast
   ja kordub pakkumises mitu korda, seega ilma selleta ei saa kokkutõmmatud plokke eristada.
   Tavakirjas ja ilma suurtähtedeta, et see ei võistleks plokinimega. */
.blk-row{font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);opacity:.85;font-size:11.5px}