/* ==========================================================================
   Arvete haldus — Erply-laadne kasutajaliides
   ========================================================================== */
:root {
  /* NB! Värvid tulevad seadetest (Seaded → Välimus) ja pannakse siia peale
     JavaScriptiga. Siin on vaikepalett — sama kood läheb nii Candledusti kui
     VIVIN-i serverisse, nii et ettevõtte oma värv ei tohi olla koodis kinni. */
  --tume:        #232f3e;   /* ülemine menüüriba */
  --tume-hover:  #33414f;
  --tume-tekst:  #ffffff;   /* menüüriba tekst — hele riba puhul tume */
  --tume-tekst2: #c9d1d9;   /* teisejärguline tekst menüüribal */
  --kollane:     #f2c94c;   /* olekuriba ja tegevusnupud */
  --kollane-tume:#e0b73c;
  --kollane-tekst:#2b2b2b;  /* tekst kollasel/pronksil nupul */
  --kollane-tekst2:#6d5a12; /* teisejärguline tekst olekuribal */
  --sinine:      #4a90c2;   /* aktiivne valik vasakus paneelis */
  --sinine-tume: #3a7ba6;
  --sinine-hele: #eaf3f9;
  --hall-paneel: #ececec;   /* vasak filtripaneel */
  --hall-aare:   #d8d8d8;
  --hall-tekst:  #7a7a7a;
  --tekst:       #2b2b2b;
  --taust:       #ffffff;
  --roheline:    #2e7d52;
  --roheline-hele:#e6f4ec;
  --punane:      #c0392b;
  --punane-hele: #fdecea;
  --oranz:       #b26a00;
  --oranz-hele:  #fdf3e3;
  --lilla:       #6b4fa8;
  --lilla-hele:  #f0ebfa;
  --raadius:     4px;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--tekst);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Ülemine menüüriba
   ========================================================================== */
.ylariba {
  background: var(--tume);
  color: var(--tume-tekst);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 18px;
  height: 54px;
  position: sticky; top: 0; z-index: 60;
}
.ylariba .logo {
  font-weight: 700; font-size: 19px; letter-spacing: 1.2px;
  margin-right: 14px; white-space: nowrap; color: var(--tume-tekst);
}
.ylariba .otsinupp {
  background: none; border: 0; color: var(--tume-tekst2); font-size: 17px;
  padding: 8px 12px; cursor: pointer; border-radius: 3px;
}
.ylariba .otsinupp:hover { background: var(--tume-hover); color: var(--tume-tekst); }

.peamenyy { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.peamenyy button {
  background: none; border: 0; color: var(--tume-tekst2); font-family: inherit;
  font-size: 14.5px; padding: 17px 15px; cursor: pointer; white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.peamenyy button:hover { color: var(--tume-tekst); background: var(--tume-hover); }
.peamenyy button.aktiivne {
  color: var(--tume-tekst); font-weight: 600; border-bottom-color: var(--kollane);
}
.peamenyy .marge {
  background: #e0523f; color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 1px 6px; border-radius: 9px; margin-left: 6px; vertical-align: 1px;
}

.ylariba .parem { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.ylariba .ikoonnupp {
  background: none; border: 0; color: var(--tume-tekst2); font-size: 16px;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
}
.ylariba .ikoonnupp:hover { background: var(--tume-hover); color: var(--tume-tekst); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid currentColor;
  color: var(--tume-tekst); background: none; font-size: 12px; font-weight: 700;
  cursor: pointer; letter-spacing: .5px;
}
.avatar:hover { background: var(--tume-hover); }

/* kasutajamenüü */
.ripp {
  position: absolute; top: 50px; right: 14px; background: #fff;
  border: 1px solid var(--hall-aare); border-radius: 4px; min-width: 210px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 200; overflow: hidden;
}
.ripp .pais { padding: 11px 14px; border-bottom: 1px solid #eee; background: #fafafa; }
.ripp .pais b { display: block; font-size: 13.5px; }
.ripp .pais span { font-size: 11.5px; color: var(--hall-tekst); }
.ripp button {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  background: none; border: 0; font-family: inherit; font-size: 13.5px;
  cursor: pointer; color: var(--tekst);
}
.ripp button:hover { background: #f3f4f6; }

/* ==========================================================================
   Kollane olekuriba (alamvaated)
   ========================================================================== */
.olekuriba {
  background: var(--kollane);
  display: flex; align-items: center; gap: 0;
  padding: 0 22px; min-height: 40px; flex-wrap: wrap;
  position: sticky; top: 54px; z-index: 55;
}
.olekuriba button {
  background: none; border: 0; font-family: inherit; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--kollane-tekst2); padding: 11px 14px; white-space: nowrap;
}
.olekuriba button:hover { color: var(--kollane-tekst); }
.olekuriba button.aktiivne { color: var(--kollane-tekst); text-shadow: 0 1px 1px rgba(0,0,0,.10); }
.olekuriba .nool { color: var(--kollane-tekst2); font-size: 12px; user-select: none; }
.olekuriba .versioon {
  margin-left: auto; font-size: 12.5px; font-weight: 700;
  color: var(--kollane-tekst2); padding: 11px 0;
}

/* ==========================================================================
   Paigutus: vasak filtripaneel + sisu
   ========================================================================== */
.kere { display: flex; align-items: flex-start; min-height: calc(100vh - 94px); }

.filtripaneel {
  width: 236px; flex: 0 0 236px; background: var(--hall-paneel);
  align-self: stretch; padding-bottom: 30px;
}
.filtripaneel .rypm { padding: 14px 16px 7px; display: flex; align-items: center; gap: 8px; }
.filtripaneel .rypm .ruudud {
  display: grid; grid-template-columns: 6px 6px; grid-gap: 2px;
}
.filtripaneel .rypm .ruudud i { width: 6px; height: 6px; background: #2b2b2b; display: block; }
.filtripaneel .rypm b { font-size: 14px; font-weight: 700; }
.filtripaneel .valik {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 26px; font-size: 14px; cursor: pointer; color: #333;
  border: 0; background: none; width: 100%; text-align: left; font-family: inherit;
}
.filtripaneel .valik:hover { background: #e0e0e0; }
.filtripaneel .valik.aktiivne { background: var(--sinine); color: #fff; }
.filtripaneel .valik .arv {
  margin-left: auto; font-size: 11.5px; color: var(--hall-tekst);
  font-variant-numeric: tabular-nums;
}
.filtripaneel .valik.aktiivne .arv { color: rgba(255,255,255,.85); }
.filtripaneel .lahutaja { height: 10px; }

.sisuala { flex: 1; min-width: 0; padding: 22px 26px 60px; background: #fff; }

/* ==========================================================================
   Lehe pealkiri ja tegevused
   ========================================================================== */
.lehepais { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.lehepais h1 { margin: 0; font-size: 30px; font-weight: 400; letter-spacing: -.3px; }
.lehepais .parem { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.ringnupp {
  width: 30px; height: 30px; border-radius: 50%; background: #4a4a4a; color: #fff;
  border: 0; font-size: 14px; line-height: 1; cursor: pointer; letter-spacing: 1px;
}
.ringnupp:hover { background: #2b2b2b; }

/* ==========================================================================
   Nupud
   ========================================================================== */
button, .nupp {
  font-family: inherit; font-size: 13.5px;
  padding: 7px 16px; border-radius: 3px; border: 1px solid var(--hall-aare);
  background: #fff; color: var(--tekst); cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
button:hover, .nupp:hover { background: #f4f4f4; }
button:disabled { opacity: .5; cursor: not-allowed; }

button.esmane, .nupp.esmane {
  background: var(--kollane); border-color: var(--kollane); color: var(--kollane-tekst);
  font-weight: 600;
}
button.esmane:hover, .nupp.esmane:hover { background: var(--kollane-tume); }

button.sinine { background: var(--sinine); border-color: var(--sinine); color: #fff; }
button.sinine:hover { background: var(--sinine-tume); }
button.roheline { background: var(--roheline); border-color: var(--roheline); color: #fff; }
button.roheline:hover { background: #24603f; }
button.oht { background: #fff; border-color: #e6b0aa; color: var(--punane); }
button.oht:hover { background: var(--punane-hele); }
button.vaike { padding: 4px 10px; font-size: 12.5px; }
button.puhas { border-color: transparent; background: transparent; }
button.puhas:hover { background: #f0f0f0; }

/* ==========================================================================
   Vormid — Erply suured ümarad väljad
   ========================================================================== */
label {
  display: block; font-size: 11.5px; font-weight: 600; color: var(--hall-tekst);
  margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px;
}
input, select, textarea {
  width: 100%; padding: 11px 14px; font-family: inherit; font-size: 14px;
  border: 1px solid #dcdcdc; border-radius: 22px; background: #fff; color: var(--tekst);
}
textarea { border-radius: 10px; resize: vertical; min-height: 70px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--sinine); box-shadow: 0 0 0 3px rgba(74,144,194,.14);
}
input[readonly] { background: #f6f6f6; color: var(--hall-tekst); }
input::placeholder { color: #b3b3b3; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'%3E%3Cpath fill='%23555' d='M5 0L9 5H1zM5 16L1 11h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  background-size: 9px 14px; padding-right: 34px;
}

.valjad { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.valjad.kaks { grid-template-columns: 1fr 1fr; }
.valjad.kolm { grid-template-columns: repeat(3, 1fr); }
.vali { margin-bottom: 14px; }
.markeri-rida { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.markeri-rida input[type=checkbox] { width: 16px; height: 16px; margin: 0; border-radius: 3px; }
.markeri-rida label {
  margin: 0; font-weight: 400; color: var(--tekst); font-size: 13.5px;
  text-transform: none; letter-spacing: 0;
}
.abi { font-size: 11.5px; color: #9a9a9a; margin-top: 5px; line-height: 1.45; }
fieldset { border: 1px solid #e5e5e5; border-radius: 6px; padding: 16px; margin: 0 0 18px; }
legend {
  font-size: 11.5px; font-weight: 700; color: var(--hall-tekst);
  text-transform: uppercase; letter-spacing: .6px; padding: 0 7px;
}

/* otsinguplokk kahes veerus, nagu Erplys */
.otsiplokk { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 26px; margin-bottom: 8px; }
.otsiplokk .vali { margin: 0; }
.otsiplokk-jalus { display: flex; justify-content: flex-end; gap: 9px; margin: 14px 0 22px; }
@media (max-width: 1100px) { .otsiplokk { grid-template-columns: 1fr; } }

/* ==========================================================================
   Tabelid
   ========================================================================== */
.tabelikest { border: 1px solid #e8e8e8; border-radius: 5px; overflow: auto; max-height: 70vh; }
/* Vana kirjapilt on koodis mitmes kohas — vähemalt kerimine peab töötama,
   muidu jääb pikk tabel max-height'i taha kinni. */
.tabeli-kest { overflow: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; padding: 10px 13px; background: #f7f7f7;
  border-bottom: 1px solid #e0e0e0; font-weight: 700; font-size: 11.5px;
  color: #6b6b6b; text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
tbody td { padding: 10px 13px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
tbody tr:hover { background: #fbfbf5; }
tbody tr.klikitav { cursor: pointer; }
tfoot td { padding: 10px 13px; background: #f7f7f7; border-top: 1px solid #e0e0e0; }
td.number, th.number { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.kesk, th.kesk { text-align: center; }
.tyhi { padding: 54px 20px; text-align: center; color: #a8a8a8; }
.tyhi .suur { font-size: 34px; margin-bottom: 10px; opacity: .45; }

/* ==========================================================================
   Näidikud
   ========================================================================== */
.naidikud { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 20px; }
.naidik { background: #fff; border: 1px solid #e8e8e8; border-radius: 5px; padding: 15px 17px; }
.naidik .silt { font-size: 11px; color: var(--hall-tekst); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.naidik .vaartus { font-size: 26px; font-weight: 400; margin-top: 8px; letter-spacing: -.5px; }
.naidik .lisa { font-size: 12px; color: var(--hall-tekst); margin-top: 5px; }
.naidik.roheline .vaartus { color: var(--roheline); }
.naidik.punane .vaartus { color: var(--punane); }
.naidik.sinine .vaartus { color: var(--sinine); }

/* ==========================================================================
   Sildid
   ========================================================================== */
.silt-mark {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; line-height: 1.5;
  text-transform: uppercase; letter-spacing: .3px;
}
.s-hall     { background: #eee; color: #666; }
.s-sinine   { background: var(--sinine-hele); color: var(--sinine-tume); }
.s-roheline { background: var(--roheline-hele); color: var(--roheline); }
.s-punane   { background: var(--punane-hele); color: var(--punane); }
.s-kollane  { background: var(--oranz-hele); color: var(--oranz); }
.s-lilla    { background: var(--lilla-hele); color: var(--lilla); }

/* ==========================================================================
   Modaal
   ========================================================================== */
.modaal-taust {
  position: fixed; inset: 0; background: rgba(35,47,62,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 18px; overflow-y: auto; z-index: 300;
}
.modaal { background: #fff; border-radius: 6px; width: 100%; max-width: 940px;
          box-shadow: 0 18px 44px rgba(0,0,0,.28); margin: auto; }
.modaal.kitsas { max-width: 560px; }
.modaal.lai { max-width: 1160px; }
.modaal-pais {
  padding: 15px 20px; border-bottom: 1px solid #e8e8e8;
  display: flex; align-items: center; gap: 12px;
}
.modaal-pais h2 { margin: 0; font-size: 20px; font-weight: 400; }
.modaal-keha { padding: 20px; max-height: 74vh; overflow-y: auto; }
.modaal-jalus {
  padding: 13px 20px; border-top: 1px solid #e8e8e8; background: #fafafa;
  display: flex; gap: 9px; justify-content: flex-end; border-radius: 0 0 6px 6px;
}
.modaal-jalus .vasak { margin-right: auto; }

/* ==========================================================================
   Ridade redaktor
   ========================================================================== */
.read-tabel input, .read-tabel select {
  padding: 6px 10px; font-size: 13px; border-radius: 3px;
}
.read-tabel select { background-position: right 8px center; padding-right: 26px; }
.read-tabel td { padding: 5px 6px; }
.read-tabel .kitsas { width: 96px; }
.read-tabel .kitsam { width: 74px; }

/* ==========================================================================
   Teated
   ========================================================================== */
#teated { position: fixed; bottom: 22px; right: 22px; z-index: 400;
          display: flex; flex-direction: column; gap: 9px; max-width: 430px; }
.teade {
  background: var(--tume); color: var(--tume-tekst); padding: 13px 16px; border-radius: 4px;
  font-size: 13.5px; box-shadow: 0 8px 22px rgba(0,0,0,.26);
  animation: sisse .18s ease-out; line-height: 1.45;
}
.teade.ok { background: var(--roheline); }
.teade.viga { background: var(--punane); }
.teade.hoiatus { background: var(--oranz); }
@keyframes sisse { from { opacity: 0; transform: translateY(8px); } }

/* ==========================================================================
   Muu
   ========================================================================== */
.laadimine { padding: 46px; text-align: center; color: #a8a8a8; }
.spinner {
  width: 24px; height: 24px; border: 3px solid #e4e4e4;
  border-top-color: var(--sinine); border-radius: 50%;
  animation: pyorle .7s linear infinite; margin: 0 auto 13px;
}
@keyframes pyorle { to { transform: rotate(360deg); } }
.riba { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.hall { color: var(--hall-tekst); }
.nork { color: #b0b0b0; }
.vaike-tekst { font-size: 12px; }
.paks { font-weight: 700; }
.pdf-raam { width: 100%; height: 66vh; border: 1px solid #e5e5e5; border-radius: 4px; }
.edenemisriba { height: 8px; background: #eee; border-radius: 4px; overflow: hidden; }
.edenemisriba i { display: block; height: 100%; background: var(--sinine); transition: width .3s; }

.diagramm { display: flex; align-items: flex-end; gap: 6px; height: 190px; padding-top: 10px; }
.diagramm .veerg { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
                   align-items: center; gap: 4px; height: 100%; }
.diagramm .tulp { width: 100%; display: flex; gap: 2px; align-items: flex-end; height: 100%; }
.diagramm .tulp span { flex: 1; border-radius: 2px 2px 0 0; min-height: 2px; }
.diagramm .myyk { background: var(--sinine); }
.diagramm .ost { background: #a9cde4; }
.diagramm .nimi { font-size: 10.5px; color: #a0a0a0; white-space: nowrap; }
.legend { display: flex; gap: 18px; font-size: 12px; color: var(--hall-tekst); margin-top: 11px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.jaotus { display: grid; grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
.kaart { background: #fff; border: 1px solid #e8e8e8; border-radius: 5px; margin-bottom: 20px; }
.kaart-pais { padding: 13px 16px; border-bottom: 1px solid #eee; display: flex;
              align-items: center; gap: 10px; flex-wrap: wrap; }
.kaart-pais h2 { margin: 0; font-size: 15px; font-weight: 700; }
.kaart-pais .parem { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.kaart-keha { padding: 16px; }
.kaart-keha.tihe { padding: 0; }

.tootepilt { width: 46px; height: 46px; object-fit: contain; border: 1px solid #eee;
             border-radius: 4px; background: #fafafa; }

@media (max-width: 1080px) { .jaotus { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .filtripaneel { display: none; }
  .peamenyy button { padding: 17px 10px; font-size: 13.5px; }
  .sisuala { padding: 16px 14px 50px; }
  .valjad, .valjad.kaks, .valjad.kolm { grid-template-columns: 1fr; }
}


/* ---------- Moodulivahetaja (VIVIN platvorm) ---------- */
.moodulinupp {
  background: none; border: 1px solid #46566a; color: #cdd4dd;
  font-size: 13px; padding: 6px 12px; border-radius: 3px; margin-right: 8px;
}
.moodulinupp:hover { background: var(--tume-hover); color: var(--tume-tekst); border-color: currentColor; }
.moodulid-ripp {
  position: absolute; top: 50px; right: 96px; background: #fff;
  border: 1px solid var(--hall-aare); border-radius: 4px; min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 200; overflow: hidden;
}
.moodulid-ripp .pais {
  padding: 9px 14px; background: #fafafa; border-bottom: 1px solid #eee;
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--hall-tekst); font-weight: 700;
}
.moodulid-ripp a, .moodulid-ripp button {
  display: block; width: 100%; text-align: left; padding: 10px 14px;
  background: none; border: 0; font-family: inherit; font-size: 13.5px;
  cursor: pointer; color: var(--tekst); text-decoration: none;
}
.moodulid-ripp a:hover, .moodulid-ripp button:hover { background: #f3f4f6; }
.moodulid-ripp .praegune { background: var(--sinine-hele); font-weight: 600; }
/* Ettevõttevahetaja: sama välimus, aga nimi nupul, et oleks alati näha,
   millise ettevõtte arveid parasjagu tehakse. */
.ettevotenupp { font-weight: 600; color: #fff; border-color: #6b7c91; }
.ettevotted-ripp small { font-weight: 400; }


/* ---------- Hulgivalik tabelites ---------- */
.valikuriba {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--sinine); color: #fff; border-radius: 6px;
}
.valikuriba .arv { font-weight: 700; margin-right: auto; }
.valikuriba button { padding: 5px 12px; font-size: 13px; }
tr.valitud > td { background: #eaf2fb !important; }
td.valikulahter, th.valikulahter { width: 34px; text-align: center; padding-right: 0; }
.valikulahter input,
th.valikulahter .paisisu input { width: 16px; height: 16px; min-width: 16px;
  margin: 0; padding: 0; cursor: pointer; }
th.valikulahter .paisisu { display: flex; justify-content: center; overflow: visible; }

/* ==========================================================================
   Otsitav rippmenüü
   ========================================================================== */
.otsitav { position: relative; }

/* Algne <select> jääb DOM-i (kogu skript loeb selle .value-t), aga peitu. */
.otsitav-peidus {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
}

.otsitav-sisend {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%23777' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.6'/%3E%3Cpath d='M10.5 10.5L14 14' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  background-size: 14px 14px; padding-right: 34px;
}
.otsitav-sisend::placeholder { color: var(--hall-tekst); }
.otsitav-sisend:disabled { background-color: #f5f5f5; color: var(--hall-tekst); }

.otsitav-nimekiri {
  position: fixed; z-index: 4000; overflow-y: auto;
  background: #fff; border: 1px solid var(--hall-aare); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
  padding: 4px; font-size: 13.5px;
}
.otsitav-rida {
  padding: 8px 11px; border-radius: 6px; cursor: pointer;
  /* Tootenimed erinevad sageli ainult lopust („… 50ml EST" vs „… 50ml ENG").
     Kolme punktiga ara loigatuna ei saa neil vahet teha, seepärast murrame
     pika nime teisele reale, mitte ei kaota selle loppu. */
  white-space: normal; overflow-wrap: anywhere; line-height: 1.35;
}
.otsitav-rida.aktiivne { background: var(--sinine-hele); }
.otsitav-rida.valitud  { font-weight: 600; }
.otsitav-veel {
  padding: 8px 11px; color: var(--hall-tekst); font-size: 12.5px;
}

.otsitav-lisa {
  margin-top: 4px; padding: 9px 11px; cursor: pointer;
  border-top: 1px solid var(--hall-aare);
  color: var(--sinine-tume); font-weight: 600; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.otsitav-lisa:hover { background: var(--sinine-hele); }

/* Manuse lohistusala ostuarve kaardil */
.lohistusala {
  border: 2px dashed var(--joon, #d9dde3);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  cursor: pointer;
  color: #6b7280;
  font-size: 13px;
  transition: border-color .15s ease, background .15s ease;
}
.lohistusala:hover { border-color: #9aa4b2; background: #fafbfc; }
.lohistusala.ripub { border-color: var(--roheline, #2f855a); background: #f0fbf4; }
.lohistusala.laeb  { border-style: solid; color: #111; }

/* ---------- Ridade valimine linnukesega (ostuarved) ---------- */
th.linnuke, td.linnuke {
  width: 34px; padding-left: 12px; padding-right: 0; text-align: center;
}
th.linnuke input, td.linnuke input { cursor: pointer; margin: 0; }
td.linnuke input:disabled { cursor: not-allowed; opacity: .35; }

.valiku-riba {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 10px; padding: 9px 14px;
  background: var(--kollane-hele, #fdf6e3);
  border: 1px solid var(--kollane, #e3c04b); border-radius: 8px;
  font-size: 14px;
}
.valiku-riba .hall { color: #666; }

/* ---------- Sildiread (hinnakirja kliendid, pakkumise valikud) ---------- */
.sildiread { display: flex; flex-wrap: wrap; gap: 6px; }
.sildike {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px 4px 10px; border-radius: 999px;
  background: #eef2f7; border: 1px solid #d7dee8;
  font-size: 13px; line-height: 1.4;
}
.sildike.s-kollane { background: #fdf6e3; border-color: #e3c04b; }
.sildike button { border: 0; background: none; cursor: pointer; color: #888;
                  font-size: 12px; padding: 0 2px; line-height: 1; }
.sildike button:hover { color: var(--punane, #c0392b); }

/* ---------- Pakkumise tooteread ---------- */
.pakk-pilt {
  width: 46px; height: 46px; object-fit: cover; border-radius: 6px;
  background: #f1f3f5; border: 1px solid #e5e8ec;
}
.pakk-pilt-tyhi {
  width: 46px; height: 46px; border-radius: 6px; background: #f1f3f5;
  border: 1px dashed #d7dee8;
}
.pakk-info { font-size: 11.5px; color: #777; line-height: 1.5; }
.kasitsi-hind { background: #fdf6e3 !important; font-weight: 600; }
.riba.pysti { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.riba.pysti button { width: 100%; }

/* ---------- Pakkumise kollektsioonirida ---------- */
tr.kollektsioonirida > td { background: #fcfaf4; }
.kiibiplokk { margin: 6px 0 2px; }
.kiibisilt {
  display: block; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: #8a8a8a; margin-bottom: 4px;
}
.kiibisilt button { font-size: 10.5px; color: #999; text-decoration: underline; }
.valikukiip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; cursor: pointer;
  background: #eef2f7; border: 1px solid #d7dee8; color: #24303f;
  font-size: 12px; line-height: 1.5; user-select: none;
}
.valikukiip img {
  width: 20px; height: 20px; object-fit: cover; border-radius: 3px;
  background: #fff;
}
.valikukiip:hover { border-color: #9fb0c4; }
.valikukiip.vali {
  background: #fff; color: #b6bcc4; border-style: dashed;
  text-decoration: line-through;
}
.valikukiip.vali img { opacity: .35; }
.jrk-nupud { white-space: nowrap; text-align: right; }
.jrk-nupud button { padding: 2px 4px; font-size: 13px; }
.jrk-nupud button[disabled] { opacity: .25; cursor: default; }

/* ---------- Tellimuse lugeja ---------- */
tr.ebakindel > td { background: #fdf6e3; }
tr.leidmata > td { background: #fdecea; }


/* --- Tootegruppide puu: lohistamise siht --- */
tr.sihtrida > td {
  background: #fdf6e6 !important;
  box-shadow: inset 0 -2px 0 #d4a24a;
}
tr[draggable="true"] { cursor: grab; }
tr[draggable="true"]:active { cursor: grabbing; }


/* --- Tootenimekirja grupilahter: rippmenüü peab ridade sisse ära mahtuma --- */
td.grupilahter { padding: 4px 6px; overflow: visible; }
td.grupilahter select {
  width: 100%;
  min-width: 0;
  padding: 3px 20px 3px 6px;
  font-size: 12px;
  color: #6b6b6b;
  background-color: transparent;
  background-position: right 6px center;
  background-size: 7px 11px;
  border-color: transparent;
  text-overflow: ellipsis;
}
tr:hover td.grupilahter select,
td.grupilahter select:focus { border-color: var(--hall-aare); background-color: #fff; }

/* --- Muudetava laiusega tabel + peidetavad veerud --- */
table.laiusega { table-layout: fixed; width: 100%; }
table.laiusega thead th { position: relative; overflow: hidden; }
table.laiusega thead th .paisisu {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.laiusega tbody td,
table.laiusega tfoot td { overflow: hidden; text-overflow: ellipsis; }
table.laiusega tbody td { overflow-wrap: anywhere; }
table.laiusega td.grupilahter { overflow: hidden; }

.veerusakk {
  position: absolute; top: 0; right: -4px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 3; user-select: none;
}
.veerusakk::after {
  content: ""; position: absolute; top: 22%; bottom: 22%; left: 4px;
  width: 1px; background: #d9d9d9;
}
.veerusakk:hover::after { top: 0; bottom: 0; width: 2px; background: var(--sinine); }
body.veerulohistus { cursor: col-resize; user-select: none; }
body.veerulohistus * { cursor: col-resize !important; }

.veeruvalik { display: grid; gap: 2px; }
.veeruvalik label {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0;
  border-radius: 5px; cursor: pointer; font-size: 13.5px; font-weight: 400;
  color: var(--tekst); text-transform: none; letter-spacing: 0;
}
.veeruvalik label input[type=checkbox] {
  width: 16px; height: 16px; min-width: 16px; flex: none;
  margin: 0; padding: 0; border-radius: 3px; cursor: pointer;
}
.veeruvalik label:hover { background: #f7f7f2; }
.veeruvalik label.lukus { opacity: .55; cursor: default; }
.veeruvalik label.lukus input { cursor: default; }
.veeruvalik label .abi { margin: 0 0 0 auto; font-size: 11px; }

/* --- Inventuuri loendusleht --- */
table.inventuur tbody tr.erineb { background: #fffaf0; }
/* Müügiaruandes: rida, kus kauplus teatas rohkem, kui laoseisus on. */
table.read-tabel tbody tr.erineb { background: #fffaf0; }
table.inventuur tbody tr.erineb:hover { background: #fff5e3; }
td.loenduslahter { padding: 3px 8px; }
td.loenduslahter input {
  width: 100%; padding: 5px 9px; text-align: right; border-radius: 4px;
  font-size: 14px; font-variant-numeric: tabular-nums;
  border: 1px solid #ddd; background: #fff;
}
td.loenduslahter input:focus {
  border-color: var(--sinine); box-shadow: 0 0 0 3px rgba(74,144,194,.16);
  background: #fbfdff;
}
td.pluss  { color: var(--roheline); font-weight: 700; }
td.miinus { color: var(--punane);   font-weight: 700; }
tr.erineb td.paks { color: var(--oranz); }

/* --- Mitteaktiivne rida (nt kasutusest väljas ladu) --- */
tbody tr.kahvatu td { opacity: .62; }
tbody tr.kahvatu:hover td { opacity: 1; }

/* ---------- Tellimisvormi kliendid ----------
   Aktiveerimata klient peab silma jääma ja maksetingimuse valik peab olema
   lahti, mitte akna taga peidus — seepärast suured valikukaardid. NB!
   üldine `label` on siin suurtähtedega väikefont ja `input` on 100% lai,
   seepärast tuleb mõlemad siin tagasi tavaliseks keerata. */
.ootel-kaart { border-left: 4px solid var(--oranz); }
.ootel-kaart .kaart-pais { background: var(--oranz-hele); }
.makse-valik { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
               margin: 4px 0 16px; }
.makse-valik label {
  display: block; border: 2px solid #e2e2e2; border-radius: 6px;
  padding: 13px 15px; cursor: pointer; background: #fff; margin: 0;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 14px; color: var(--tekst);
}
.makse-valik label:hover { border-color: #c9c9c9; }
.makse-valik label.valitud { border-color: var(--oranz); background: var(--oranz-hele); }
.makse-valik input[type=radio] {
  width: 15px; height: 15px; margin: 0 9px 0 0; padding: 0;
  vertical-align: -2px; accent-color: var(--oranz);
}
.makse-valik b { font-size: 14.5px; font-weight: 700; color: var(--tekst); }
.makse-valik .selgitus { display: block; margin: 7px 0 0 24px; font-size: 12px;
                         color: #6b6b6b; line-height: 1.5; text-transform: none; }
.makse-ripp { width: auto; min-width: 118px; padding: 6px 30px 6px 10px;
              font-size: 12.5px; border-radius: 5px; }
.makse-ripp.ettemaks { border-color: var(--oranz); background-color: var(--oranz-hele);
                       color: var(--oranz); font-weight: 600; }
.ootel-kaart .vaike-tekst.hall { text-transform: uppercase; letter-spacing: .5px;
                                 font-size: 11px; }
@media (max-width: 760px) { .makse-valik { grid-template-columns: 1fr; } }