/* ==========================================================================
   CleanWise müügitoru
   Brändivärvid on ühes kohas — muuda neid ja kogu liides muutub kaasa.
   ========================================================================== */

/* CleanWise'i ametlik palett (stiilijuhis 2024):
   #26B3E8 helesinine · #1C3244 tumesinine · #F0F3FA hele taust
   #8CE2F9 hele sinine · #14357F sügavsinine · #000000 must

   Iga värv siin all on kas otse stiilijuhisest või sellest arvutatud
   (tumedam variant nupu vajutamiseks, hele variant sildi taustaks).
   Muid siniseid programmis ei ole. */

/* Stiilijuhise font on Inter.

   Fondifaili ei tõmmata Google'i serverist: turvareegel (CSP default-src
   'self') lubab ainult oma serverit ja avalikul tagasiside lehel ei ole ilus
   saata kliendi brauserit võõrasse majja. Siin all otsitakse Interit ainult
   kasutaja enda arvutist. Kui teda seal ei ole, kasutatakse süsteemi oma
   fonti — Windowsis Segoe UI, mis on Interile väga lähedane.

   Kui tahad päris Interit kõigile: lae alla
   https://fonts.google.com/specimen/Inter ja pane failid
   Inter-Regular.woff2, Inter-Medium.woff2 ja Inter-Bold.woff2 kausta
   assets/fonts. Programm märkab neid ise ja hakkab kasutama — vt
   assets/fonts/LOE-MIND.txt. */
@font-face {
    font-family: "InterCW";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local("Inter"), local("Inter Regular"), local("Inter-Regular");
}
@font-face {
    font-family: "InterCW";
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    src: local("Inter Medium"), local("Inter-Medium"), local("Inter");
}
@font-face {
    font-family: "InterCW";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local("Inter Bold"), local("Inter-Bold"), local("Inter");
}

:root {
    --brand:        #26B3E8;   /* stiilijuhis: põhiline helesinine */
    --brand-dark:   #1C87B4;   /* sama, tumedam — nupu hover */
    --brand-soft:   #8CE2F9;   /* stiilijuhis: hele sinine */
    --brand-light:  #E4F5FD;   /* õhuke taust siltidele */
    --navy:         #1C3244;   /* stiilijuhis: tumesinine */
    --navy-2:       #24405A;   /* navy heledam — päise pinnad */
    --deep:         #14357F;   /* stiilijuhis: sügavsinine, linkidele */

    --ink:          #1C3244;
    --ink-2:        #3C5468;
    --muted:        #6B7F91;
    --line:         #DDE4EE;
    --line-soft:    #EDF1F8;
    --bg:           #F4F6FB;   /* stiilijuhise hele taust, veidi vaiksem */
    --surface:      #ffffff;

    --ok:           #16a34a;
    --ok-soft:      #f0fdf4;
    --warn:         #f59e0b;
    --warn-soft:    #fffbeb;
    --danger:       #dc2626;
    --danger-soft:  #fef2f2;

    /* Logo ja ikoon on pehmelt ümarad — sama joon käib läbi kogu liidese. */
    --radius-sm:    8px;
    --radius:       10px;
    --radius-lg:    14px;
    --radius-pill:  999px;

    /* Varjud on kahekihilised: terav joon serva ümber ja pehme laik alla.
       Ühekihiline vari näeb välja nagu kleeps, kahekihiline nagu paber. */
    --shadow-sm:    0 1px 2px rgba(28, 50, 68, .05);
    --shadow:       0 1px 2px rgba(28, 50, 68, .05), 0 6px 18px rgba(28, 50, 68, .07);
    --shadow-lg:    0 2px 4px rgba(28, 50, 68, .06), 0 18px 50px rgba(28, 50, 68, .18);

    --sidebar-w:    228px;
    --appbar-h:     56px;

    --font: "InterCW", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Numbrid tabelis peavad olema üksteise all ühel joonel. Ilma selleta
       ei saa summade veergu silmaga võrrelda — „1 103,60" ja „421,60" ei
       lähe kohakuti, kui iga number on oma laiusega. */
    --num: var(--font);
}

/* Ikoon teksti kõrval. Joon ei tohi kunagi olla jämedam kui kirja tüvi,
   muidu tõmbab ikoon tähelepanu sõnalt ära. */
.ico {
    flex: none;
    display: block;
    vertical-align: -.2em;
}

/* Ainult ekraanilugejale. Ikoonnupul peab jääma sõnaline nimi alles —
   ilma selleta on ta pimeda inimese jaoks lihtsalt „nupp".

   NB: `position: absolute` otsib endale lähima paigutatud esivanema. Kui
   seda ei ole, satub silt lehe enda koordinaatidesse — ja kerivas tabelis
   tähendas see, et nähtamatu ühepikslise sildi asukoht kuskil tabeli
   paremas servas venitas TERVE LEHE külgsuunas kerima. Seetõttu on igal
   nupul all `position: relative`. */
.vh {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

* { box-sizing: border-box; }

/* Lingid stiilijuhise sügavsinises. Helesinine ei loeks valgel taustal
   piisavalt hästi — sügavsinine on selleks paletis olemas. */
a { color: var(--deep); }
a:hover { color: var(--navy); }
.btn, .navlink, .brand { color: inherit; }


html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }

/* ---------- Nupud ---------- */

.btn {
    position: relative;   /* peidetud .vh-silt jääb nupu sisse — vt .vh */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius);
    font: inherit;
    font-weight: 550;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background .12s ease, border-color .12s ease, color .12s ease,
                box-shadow .12s ease, transform .06s ease;
}
/* Vajutus peab olema tunda. Üks piksel allapoole ütleb „sain kätte"
   kiiremini kui ükski värvimuutus. */
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}

.btn-primary        { background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover  { background: var(--brand-dark); color: #fff; }

.btn-ghost          { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn-ghost:hover    { background: var(--line-soft); border-color: #C6D2E4; color: var(--ink); }

.btn-danger-ghost       { background: transparent; color: var(--danger); border-color: transparent; }
.btn-danger-ghost:hover { background: var(--danger-soft); color: var(--danger); }

.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Väike nupp nimekirja reale. Tavaline nupp on real liiga jäme: kümne rea
   peale tekib neist sein ja päris sisu jääb nende vahele. */
.btn-sm {
    padding: 5px 10px;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    gap: 5px;
}

/* Ainult ikoon. Nimi elab `title`-is ja peidetud `.vh`-sildis — ilma
   nendeta ei tea ei hiirega uurija ega ekraanilugeja, mida nupp teeb. */
.btn-ico {
    padding: 0;
    width: 30px; height: 30px;
    border-radius: var(--radius-sm);
    gap: 0;
}

/* hidden peab võitma iga display-reegli.
   Ilma selleta jäid „Tee arve" ja „Tee leping" nähtavaks ka veel
   salvestamata tehingul, kus neil pole midagi kaasa võtta —
   vajutus ei teinud lihtsalt mitte midagi. */
[hidden] { display: none !important; }

.icon-btn {
    background: none;
    border: 0;
    font-size: 24px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 8px;
}
.icon-btn:hover { background: var(--line-soft); color: var(--ink); }

/* ==========================================================================
   RAAMISTIK: külgmenüü vasakul, õhuke riba ülal

   Enne olid menüü ja päis kaks tumedat riba üksteise all. Nad võtsid iga
   lehe ülaservast sada pikslit, kaheksa menüüpunkti ei mahtunud sülearvuti
   laiusele ühte ritta ja uue punkti lisamine tegi olukorra iga kord
   hullemaks. Püsimenüü vasakus veerus ei saa kunagi otsa: üheksas punkt
   läheb lihtsalt eelmise alla.

   Külgmenüü on `position: fixed` ja `body` saab vasakult sama laiuse jagu
   sisepolsterdust. Nii ei pea ükski leht midagi ümber ega kinni panema —
   vastasel korral peaks iga lehe lõppu käima uus sulgev funktsioon ja üks
   unustatud leht tähendaks katkist HTML-i.
   ========================================================================== */

body { padding-left: var(--sidebar-w); }

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-w);
    z-index: 40;
    display: flex;
    flex-direction: column;
    background: var(--navy);
    /* Tumeda veeru parem serv on tume, mitte hele: hele joon tumeda ja
       heleda pinna vahel näeb välja nagu kriips, mis sinna ei kuulu. */
    border-right: 1px solid rgba(0,0,0,.18);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-brand {
    display: block;
    padding: 18px 18px 14px;
    flex: none;
}
.sidebar-brand img { display: block; height: 22px; width: auto; }

.mainnav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    flex: 1;
}

/* Vahepealkiri ütleb, mis järjekorras töö käib. Ta on tahtlikult vaikne —
   pealkiri, mis on sama vali kui menüüpunkt, teeb nimekirja pikemaks,
   mitte selgemaks. */
.nav-grupp {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    font-weight: 650;
    color: rgba(255,255,255,.38);
    padding: 14px 10px 5px;
}
.mainnav > .nav-grupp:first-child { padding-top: 4px; }

.navlink {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    color: rgba(255,255,255,.74);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 550;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}
.navlink .ico { opacity: .8; }
.navlink:hover { background: rgba(255,255,255,.08); color: #fff; }
.navlink:hover .ico { opacity: 1; }

/* Aktiivne punkt on värviline plokk, mitte ainult heledam kiri. Kui
   erinevus on ainult toonis, otsib inimene iga kord uuesti. */
.navlink.is-active {
    background: var(--brand);
    color: #fff;
}
.navlink.is-active .ico { opacity: 1; }

.sidebar-foot {
    flex: none;
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,.10);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ---------- Ülemine riba ---------- */

.appbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 22px;
    height: var(--appbar-h);
    background: rgba(255,255,255,.88);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
}

.appbar-title {
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.015em;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.appbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-left: auto;
}

/* Menüünupp on ainult telefonis. Lauaarvutis on menüü niikuinii näha ja
   nupp oleks seal ainult üks arusaamatu ruut. */
.nav-nupp {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    margin-left: -8px;
    border-radius: var(--radius-sm);
    color: var(--ink-2);
    cursor: pointer;
}
.nav-nupp:hover { background: var(--line-soft); color: var(--ink); }

.nav-vari { display: none; }
.navtog { display: none; }

/* ---------- Kasutaja ---------- */

.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    color: var(--ink-2);
    font-weight: 550;
    font-size: 12.5px;
    white-space: nowrap;
}
.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .02em;
}

/* ---------- Lehepõhine tööriistariba ---------- */

.pagebar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    position: sticky;
    top: var(--appbar-h);
    z-index: 20;
}
.pagebar h1 {
    font-size: 14px;
    font-weight: 650;
    margin: 0 6px 0 0;
    white-space: nowrap;
}
.pagebar .spacer { flex: 1; }

/* ---------- Kitsam ekraan: menüü läheb peitu ---------- */

@media (max-width: 1000px) {
    body { padding-left: 0; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--shadow-lg);
    }
    .navtog:checked ~ .sidebar { transform: none; }

    .nav-nupp { display: inline-flex; }

    /* Tumendus ilmub alles avatud menüü taha. Ilma selleta püüaks ta
       nähtamatult kinni iga vajutuse terve lehe peal. */
    .navtog:checked ~ .nav-vari {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(15, 23, 42, .45);
    }

    .appbar { padding: 0 14px; }
    .pagebar { position: static; padding: 10px 14px; }
}

@media (max-width: 620px) {
    /* Telefonis on nimi üleliigne — initsiaalidest piisab ja riba jääb
       ühele reale. Terve nimi on ikka veel hiire all (title). */
    .user-chip { padding: 3px; border: 0; background: transparent; }
    .user-nimi { display: none; }
    .appbar-title { font-size: 15px; }
}
/* ---------- Logo mujal kui päises ---------- */

/* Kasutusel sisselogimise, paigalduse ja „andmebaas vajab uuendamist"
   lehtedel. Vana .topbar ja .brand-mark said otsa, kui päisesse tuli päris
   logo — need read kadusid siit koos nendega ära. */

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ink);
}



/* Otsingukast. Luup on taustapildina sees (data-URL, mitte eraldi fail —
   turvareegel lubab ainult oma serverit ja üks pisike ikoon ei vääri
   omaette päringut). */
.search {
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 340px;
    padding: 8px 12px 8px 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface) no-repeat 11px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7F91' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M20 20l-3.7-3.7'/%3E%3C/svg%3E");
    transition: border-color .12s ease, box-shadow .12s ease;
}
.search:hover { border-color: #C6D2E4; }
.search:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Rippmenüü tööriistaribal. Brauseri oma nool on igal platvormil isemoodi
   ja enamasti inetu — joonistame selle ise samasse joonestiili. */
.select-inline {
    padding: 8px 30px 8px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font: inherit;
    font-weight: 500;
    background: var(--surface) no-repeat right 10px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7F91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    color: var(--ink-2);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.select-inline:hover { border-color: #C6D2E4; }
.select-inline:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* ---------- Kokkuvõtte riba ---------- */

/* Näitajate riba.

   Enne olid need ragised kastid, mille laius sõltus sildi pikkusest —
   „TUNDE KOKKU" kõrval seisis poole kitsam „PALGAKULU" ja rida nägi välja
   nagu tabelist välja kukkunud lahtrid. Nüüd on nad ühesugune ruudustik:
   ühtlane laius, ühtlane kõrgus, ühtlane vahe. */
.summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    padding: 18px 22px 0;
    /* Sama veerg mis .page all — muidu ulatuvad näitajad laial ekraanil
       kaugele nimekirja servadest välja ja rida ei ole enam sama lehe osa. */
    max-width: 1080px;
    margin: 0 auto;
}
/* Paneeli või lehe sees on näitajad juba ümbritseva polsterduse sees ja
   teist korda tsentreerida ei ole vaja. */
.panel .summary,
.page .summary { padding: 0; margin: 0 0 4px; max-width: none; }

.stat {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 13px 16px;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.stat .stat-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 600;
}
.stat .stat-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    margin-top: 3px;
    font-variant-numeric: tabular-nums;
}
.stat.is-won .stat-value  { color: var(--ok); }

/* Klõpsatav näitaja tõstab ennast hiire all. Kui ta seda ei teeks, ei
   arvaks keegi, et sealt kuskile pääseb. */
a.stat:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
a.stat::after {
    content: "";
    position: absolute;
    top: 14px; right: 14px;
    width: 14px; height: 14px;
    opacity: 0;
    transition: opacity .12s ease;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2326B3E8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 6 6 6-6 6'/%3E%3C/svg%3E");
}
a.stat:hover::after { opacity: 1; }

/* ---------- Tahvel ---------- */

.board {
    display: flex;
    gap: 14px;
    padding: 14px 20px 24px;
    overflow-x: auto;
    align-items: flex-start;
    min-height: calc(100vh - 140px);
}

.board-loading { color: var(--muted); padding: 24px; }

.column {
    flex: 0 0 288px;
    background: #E6EBF4;   /* hele taust, tume ots — sama pere mis --bg */
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 170px);
}

.column-head {
    padding: 12px 14px 10px;
    border-bottom: 1px solid rgba(15,23,42,.06);
    position: sticky;
    top: 0;
}

.column-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
}

.dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: none;
}

.column-count {
    margin-left: auto;
    background: rgba(15,23,42,.08);
    color: var(--ink-2);
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11.5px;
    font-weight: 600;
}

.column-sum { font-size: 12px; color: var(--muted); margin-top: 3px; }

.column-body {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    min-height: 60px;
}

.column.drag-over { background: var(--brand-light); }
.column.drag-over .column-body { outline: 2px dashed var(--brand); outline-offset: -6px; border-radius: 10px; }

/* ---------- Kaardid ---------- */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 12px;
    box-shadow: var(--shadow-sm);
    cursor: grab;
    transition: box-shadow .12s ease, transform .12s ease, border-color .12s ease;
}
.card:hover { box-shadow: var(--shadow); border-color: #cbd5e1; }
.card:active { cursor: grabbing; }
.card.dragging { opacity: .45; transform: rotate(1.5deg); }

.card-title {
    font-weight: 600;
    font-size: 13.5px;
    margin-bottom: 3px;
    word-break: break-word;
}

/* Kliendi nimi kaardil. Varem oli see hall pisikiri, kus lisaks kliendile
   seisis ka objekti aadress — koos ei olnud kumbki loetav. Nüüd on siin
   ainult klient ja ta on nii suur ja tume, et teda saab tahvlilt lugeda
   ilma kaardi kohale kummardumata. */
.card-sub {
    font-size: 13px;
    font-weight: 550;
    color: var(--ink-2);
    margin-bottom: 8px;
    word-break: break-word;
}

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 7px;
}

.tag {
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--line-soft);
    color: var(--ink-2);
    white-space: nowrap;
}
.tag.tag-area { background: #E9EEF9; color: var(--deep); }
.tag.tag-service { background: var(--brand-light); color: var(--brand-dark); }

/* --- Järgmise sammu tähtaeg --- */

.card-due {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 7px;
    padding: 5px 8px;
    border-radius: 7px;
    background: var(--line-soft);
    border-left: 3px solid #9FB0BF;
}

.card-due .due-chip {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ink-2);
}

.card-due .due-note {
    font-size: 11.5px;
    color: var(--muted);
    word-break: break-word;
}

.card-due.is-overdue { background: #fef2f2; border-left-color: var(--danger); }
.card-due.is-overdue .due-chip { color: #b91c1c; }

.card-due.is-today   { background: #fffbeb; border-left-color: var(--warn); }
.card-due.is-today .due-chip { color: #b45309; }

.card-due.is-soon    { background: #E9EEF9; border-left-color: var(--deep); }
.card-due.is-soon .due-chip { color: var(--deep); }

.stat.is-overdue .stat-value { color: var(--danger); }
.stat.is-today .stat-value   { color: #b45309; }
.stat.is-warn { background: #fffbeb; border-color: #fde68a; }

.card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
    padding-top: 7px;
}

.card-amount { font-weight: 650; font-size: 13px; }
.card-owner  { font-size: 11px; color: var(--muted); }

.column-empty {
    text-align: center;
    color: #9FB0BF;
    font-size: 12px;
    padding: 16px 6px;
    border: 1px dashed rgba(15,23,42,.12);
    border-radius: 8px;
}

/* ---------- Modaal ---------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 16px;
    overflow-y: auto;
    z-index: 50;
}
.modal-backdrop[hidden] { display: none; }

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 660px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
}
.modal-head h2 { font-size: 16px; }

.modal-body {
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}

.modal-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
}
.modal-foot .spacer { flex: 1; }

.field { display: flex; flex-direction: column; gap: 4px; }
.field.span2 { grid-column: 1 / -1; }

.field label,
.auth-card label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-2);
}

.field input,
.field select,
.field textarea,
.auth-card input {
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    background: #fff;
    color: var(--ink);
    width: 100%;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #C6D2E4; }

/* Fookusering on varjuna, mitte `outline`-ina: outline lõikab ümara nurga
   ruudukesega ära ja kast näeb fookuses viltu välja. */
.field input:focus,
.field select:focus,
.field textarea:focus,
.auth-card input:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.field textarea { resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #A9B7C8; }

/* Värvivalik on brauseri oma kast ja igal platvormil isemoodi. Ümar serv
   ja ühtlane kõrgus panevad ta vähemalt sama joonestikku teistega. */
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    height: 36px;
    width: 46px;
    cursor: pointer;
    background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }

.form-section {
    grid-column: 1 / -1;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    border-top: 1px solid var(--line-soft);
    padding-top: 12px;
    margin-top: 2px;
}

.form-error {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--danger);
    font-size: 13px;
}

/* ---------- Järgmise sammu kast ----------
   Tehing ilma järgmise sammuta jääb seisma. Kast on sellepärast vormil
   ainus värviline plokk: silm läheb sinna ka siis, kui kiirustatakse.
   Värv on stiilijuhise helesinine, mitte hoiatuskollane — see ei ole
   viga, vaid koht, mis tuleb ära täita. */
.stepbox {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
    padding: 14px 16px 16px;
    margin-top: 6px;
    background: var(--brand-light);
    border: 1px solid var(--brand-soft);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
}

/* Pealkiri kasti sees ei vaja enam eraldusjoont — kast ise eraldab. */
.stepbox .form-section {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
    color: var(--navy);
}

.stepbox .field input,
.stepbox .field select { background: #fff; }
.stepbox .hint { color: var(--ink-2); }

/* Kuupäevata samm ei jõua kellegi töölauale. Kast ütleb seda ise välja,
   enne kui inimene salvestab. */
.stepbox.is-missing {
    border-color: var(--warn);
    border-left-color: var(--warn);
    background: #FFF8EA;
}

.stepwarn {
    grid-column: 1 / -1;
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    background: #FDF0D5;
    border: 1px solid var(--warn);
    color: #7A4E00;
    font-size: 13px;
}

.history {
    list-style: none;
    margin: 0;
    padding: 8px 10px;
    background: var(--bg);
    border-radius: 8px;
    max-height: 150px;
    overflow-y: auto;
    font-size: 12px;
    color: var(--ink-2);
}
.history li { padding: 3px 0; }
.history .when { color: var(--muted); }

/* ---------- Sisselogimine / paigaldus ---------- */

/* Sisselogimine ja paigaldus: stiilijuhise tumesinine ja tema muster.
   Muster on sama W, mis stiilijuhises — nõrgalt, et ta kirja ei segaks. */
.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: var(--navy) url("muster.svg") repeat;
    background-size: 240px 200px;
    padding: 24px;
}

.auth-card {
    background: var(--surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 30px;
    width: 100%;
    max-width: 380px;
}

.auth-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 22px;
}
.auth-brand img    { display: block; width: 188px; height: auto; }
.auth-brand strong { display: block; font-size: 16px; }
.auth-brand span   { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

.auth-card label { display: block; margin-bottom: 14px; }
.auth-card label input { margin-top: 4px; }
.auth-card small { display: block; margin-top: 4px; font-weight: 400; color: var(--muted); font-size: 11.5px; }

.alert {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
}
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert-ok    { background: #f0fdf4; color: #14532d; border: 1px solid #bbf7d0; }
.alert p     { margin: 6px 0 0; }

/* ---------- Seaded ---------- */

/* Sisu veerg. 900 px oli liiga kitsas juba siis, kui päis võttis terve
   ekraani laiuse — külgmenüü kõrval jäi sellest laiast ekraanist kaks
   kolmandikku lihtsalt tühjaks. */
.page {
    max-width: 1080px;
    margin: 0 auto;
    padding: 22px 22px 72px;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 20px 22px;
    margin-bottom: 18px;
}
.panel > h2 {
    font-size: 15.5px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 9px;
}
.panel > h2 .ico { color: var(--muted); }
.panel > p.hint { color: var(--muted); font-size: 12.5px; margin: 0 0 16px; }

/* Paneeli oma tööriistariba: pealkiri vasakul, nupp paremal. Enne seisis
   „+ Lisa" nupp pealkirja all omaette real ja lükkas kogu sisu allapoole. */
.panel-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
}
.panel-head > div { flex: 1; min-width: 0; }
.panel-head h2 { margin-bottom: 4px; }
.panel-head p.hint { margin: 0; }

/* ---------- Tabelid ---------- */

.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
    text-align: left;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 13px;
    vertical-align: middle;
}
.table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    font-weight: 650;
    padding-top: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
/* Esimene ja viimane veerg lähevad paneeli servani välja — nii on rida
   terve laiuse pealt hiirega tabatav ja ei jää servast rippuma. */
.table th:first-child, .table td:first-child { padding-left: 2px; }
.table th:last-child,  .table td:last-child  { padding-right: 2px; }
.table tbody tr:last-child > td { border-bottom: 0; }

/* Vahelduv taust + hiire alla esiletõst. Kahekümne rea pealt on see ainus
   asi, mis hoiab silma õigel real, kui vaadata veergu paremas servas. */
.table tbody tr:nth-child(even) > td { background: #FAFBFE; }
.table tbody tr:hover > td { background: var(--brand-light); }

.table tr.is-inactive td { opacity: .5; }

/* Summad ja kogused paremale, ühtlase laiusega numbritega. Vasakule
   joondatud summade veergu ei saa silmaga võrrelda. */
.table th.num, .table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.table td.num { font-weight: 550; }

/* Rea peamine sisu: nimi paksult, lisainfo tema all vaikselt. Kaks veergu
   ühe asemel tähendaks kaht korda rohkem laiust sama info kohta. */
.cell-main   { font-weight: 600; color: var(--ink); }
.cell-sub    { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.cell-nowrap { white-space: nowrap; }

/* Nimekirja rea nupud. Osa neist on linke, osa POST-vorme (kustutamine) —
   vorm on plokkelement ja lükkaks rea paigast, kui teda siin ei taltsutaks.
   align-items hoiab nupud ühel joonel ka siis, kui mõni neist puudub. */
.row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    white-space: nowrap;
}
.row-actions form { display: contents; }

/* Rea nupud on vaikselt hallid ja saavad värvi alles siis, kui hiir on
   real. Ilma selleta on kahekümne rea tabel enne kõike muud sein nuppe. */
.table tbody .row-actions .btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}
.table tbody tr:hover .row-actions .btn-ghost {
    border-color: var(--line);
    background: var(--surface);
    color: var(--ink-2);
}
.table tbody .row-actions .btn-ghost:hover {
    border-color: #C6D2E4;
    background: var(--line-soft);
    color: var(--ink);
}
.table tbody .row-actions .btn-danger-ghost:hover { background: var(--danger-soft); color: var(--danger); }

/* Tühi nimekiri. Tühi kast ilma seletuseta paneb inimese mõtlema, kas
   programm on katki — üks lause ütleb, et ta lihtsalt ei ole veel midagi
   sisestanud, ja näitab, kust alustada. */
.tyhi {
    text-align: center;
    padding: 34px 20px;
    color: var(--muted);
}
.tyhi .ico { margin: 0 auto 10px; color: #B6C4D6; }
.tyhi strong { display: block; color: var(--ink-2); font-size: 14px; margin-bottom: 4px; }
.tyhi p { margin: 0 auto; max-width: 420px; font-size: 12.5px; }
.tyhi .btn { margin-top: 14px; }
/* ---------- Dokumendi read ja alamread ----------
   Alamrida on taande all olev rida, mis kuulub eelmise pärisrea juurde.
   Taane on ainus asi, mis kasutajale ütleb, et selle rea hinda kokku ei
   liideta — seepärast peab ta olema selgelt näha, mitte vihjeks jääv. */
.line-row.is-sub > td:first-child { padding-left: 30px; position: relative; }
.line-row.is-sub > td:first-child::before {
    content: "└";
    position: absolute;
    left: 12px;
    top: 9px;
    color: var(--muted);
}
.line-row.is-sub input { background: var(--line-soft); }
.line-row.is-sub .l-sum { color: var(--muted); font-style: italic; }

.line-buttons { display: flex; gap: 8px; margin-top: 10px; }

/* Pakkumise ridade valik lepingu vormil. Pakkumisel on read valikud, mitte
   ostukorv — lepingusse käivad neist ainult need, milles kokku lepiti. */
.quote-pick {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--brand-light);
    border: 1px solid var(--brand-soft);
    border-radius: var(--radius);
}
.quote-pick h3 { font-size: 13px; margin-bottom: 2px; }
.quote-pick .hint { margin: 0 0 10px; }

.qp-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 5px 0;
    cursor: pointer;
    border-top: 1px solid var(--brand-soft);
}
.qp-row:first-of-type { border-top: 0; }
.qp-row span { display: flex; flex-direction: column; gap: 1px; }
.qp-row strong { font-weight: 550; font-size: 13px; }
.qp-row small { color: var(--ink-2); }
.qp-row.is-lisatud { opacity: .45; }
.qp-row.is-lisatud::after { content: "lisatud"; margin-left: auto; font-size: 11px; color: var(--muted); }

.quote-pick .btn { margin-top: 10px; }

/* Lepingu objektiread. Varem oli siin linnukeste sein kõigi objektidega —
   saja maja juures oli õige leidmine aeglasem kui terve lepingu täitmine. */
.obj-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    margin-bottom: 8px;
}
.obj-row .pick-mark { grid-column: 1 / -1; margin: 0; }
.obj-row .obj-name { width: 100%; }

.row-actions .row-form,
.row-actions .row-off { display: contents; }

/* Keelatud nupp ei kao ära, vaid jääb halliks. Kadumine nihutaks ülejäänud
   nupud paigast ja kasutaja ei saaks kunagi teada, MIKS teda kustutada ei
   saa — põhjus seisab .row-off vihjes. */
.row-actions .btn[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

.stage-row { cursor: grab; }
.stage-row.dragging { opacity: .4; }

.inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.inline-form .field { flex: 1 1 150px; }
.inline-form input[type="color"] { padding: 2px; height: 36px; width: 52px; }

/* Staatusesilt.

   Punkt sildi ees teeb kogu vahe. Värv üksi ei tööta: punane ja roheline
   on igal kaheksandal mehel sama toon, ja mustvalgel väljatrükil on nad
   mõlemad hall. Punkt + sõna töötavad alati. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px 3px 8px;
    border-radius: var(--radius-pill);
    background: var(--line-soft);
    color: var(--ink-2);
    white-space: nowrap;
    line-height: 1.35;
}
.badge::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .75;
    flex: none;
}
.badge-admin { background: var(--brand-light); color: var(--brand-dark); }
.badge-won   { background: var(--ok-soft); color: #15803d; }
.badge-lost  { background: var(--danger-soft); color: #b91c1c; }

/* ---------- Arved ---------- */

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
}
.grid2 .span2 { grid-column: 1 / -1; }

/* Kolm rippmenüü nimekirja kõrvuti — nii näeb korraga, mis kuskil valikus on. */
.valikud-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 14px;
}
.valikud-grid .span2 { grid-column: 1 / -1; }
.valikud-grid textarea { font-family: inherit; line-height: 1.5; }
@media (max-width: 900px) {
    .valikud-grid { grid-template-columns: 1fr; }
}

.tpl-field textarea {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    line-height: 1.45;
    resize: vertical;
}
.tpl-field textarea:focus { outline: 2px solid var(--brand); outline-offset: -1px; }

.tpl-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.tpl-bar .tpl-select { flex: 0 1 260px; }

#lineTable input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
}
#lineTable input:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
#lineTable .l-qty, #lineTable .l-price { text-align: right; }
#lineTable td { padding: 5px 6px; }

.totals-box {
    margin-top: 16px;
    margin-left: auto;
    width: 320px;
    max-width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}
.totals-box > div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}
.totals-box .big {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 8px;
    font-size: 15px;
}
.totals-box .big strong { color: var(--navy); }
.totals-box input {
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font: inherit;
}

/* --- Kataloogi automaatvalik --- */

.kat-wrap { position: relative; }

.kat-suggest {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow);
    max-height: 300px;
    overflow-y: auto;
    z-index: 60;
}
.kat-suggest[hidden] { display: none; }

.kat-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--line-soft);
}
.kat-item:last-child { border-bottom: 0; }
.kat-item strong { display: block; font-size: 13px; font-weight: 600; }
.kat-item small  { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.kat-item:hover,
.kat-item.is-active { background: var(--brand-light); }

.kat-empty { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }

/* --- Koristuspäevade valik --- */

.daypicker { display: flex; gap: 6px; flex-wrap: wrap; }

.daybox { position: relative; cursor: pointer; }
.daybox input { position: absolute; opacity: 0; width: 0; height: 0; }
.daybox span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
    font-weight: 650;
    font-size: 13px;
    color: var(--ink-2);
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.daybox:hover span { border-color: var(--brand); }
.daybox input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.daybox input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; }

/* --- Objektide valik lepingul --- */

.objpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }

.objbox { position: relative; cursor: pointer; }
.objbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.objbox span {
    display: block;
    padding: 9px 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--surface);
}
.objbox span strong { display: block; font-size: 13px; font-weight: 600; }
.objbox span small  { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.objbox:hover span { border-color: var(--brand); }
.objbox input:checked + span { border-color: var(--brand); background: var(--brand-light); }

/* --- Arveteksti eelvaade --- */

.preview-box {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    padding: 12px 14px;
    margin-top: 10px;
}
.preview-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin-bottom: 6px;
}
.preview-box pre {
    margin: 0;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--ink-2);
}

.badge-active     { background: #f0fdf4; color: #15803d; }
.badge-ended      { background: var(--line-soft); color: var(--ink-2); }
.badge-terminated { background: #fef2f2; color: #b91c1c; }

.badge-draft     { background: var(--line-soft); color: var(--ink-2); }
.badge-sent      { background: var(--brand-light); color: var(--brand-dark); }
.badge-paid      { background: #f0fdf4; color: #15803d; }
.badge-cancelled { background: #fef2f2; color: #b91c1c; }

/* ---------- Toast ---------- */

.toast {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: #fff;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
}
.toast[hidden] { display: none; }
.toast.is-error { background: var(--danger); }

/* ---------- Mobiil ---------- */

@media (max-width: 720px) {
    .modal-body { grid-template-columns: 1fr; }
    .board { padding: 12px; }
    .column { flex: 0 0 84vw; }
    .summary { padding: 12px 12px 0; }
}

.kat-empty.kat-warn {
    background: #FFFBEB;
    color: #92400E;
    font-weight: 550;
    border-radius: 10px;
}

/* --- Automaatvaliku silt: kas see kirje on juba olemas või tekib uus --- */

.kat-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    vertical-align: middle;
    background: var(--line-soft);
    color: var(--ink-2);
}
.kat-item strong .kat-badge { font-weight: 600; }

.pick-mark { margin: 4px 0 0; min-height: 15px; }
.pick-mark.is-linked { color: #15803d; }
.pick-mark.is-new    { color: #92400E; }

.tag.tag-warn { background: #FFFBEB; color: #92400E; }

/* --- Pakkumiste staatused --- */

.badge-accepted { background: #f0fdf4; color: #15803d; }
.badge-rejected { background: #fef2f2; color: #b91c1c; }
.badge-expired  { background: #FFFBEB; color: #92400E; }

.stat.is-warn .stat-value { color: #92400E; }

/* ---------- Pakkumise liigi valik ---------- */

.typepick { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

.typebox { flex: 1 1 300px; cursor: pointer; position: relative; }
.typebox input { position: absolute; opacity: 0; width: 0; height: 0; }
.typebox > span {
    display: block;
    padding: 14px 16px;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    transition: border-color .12s, background .12s;
}
.typebox strong { display: block; font-size: 13.5px; margin-bottom: 3px; }
.typebox small  { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.typebox:hover > span { border-color: var(--brand); }
.typebox.is-on > span { border-color: var(--brand); background: var(--brand-light); }

.badge-type { background: var(--line-soft); color: var(--ink-2); }

/* ---------- Teenuseread linnukestega ---------- */

.svc-block { margin-bottom: 22px; }
.svc-block:last-of-type { margin-bottom: 6px; }

.svc-list { display: flex; flex-direction: column; gap: 4px; }

.svc-row { display: flex; align-items: center; gap: 8px; }

.svc-check { position: relative; flex: 0 0 auto; cursor: pointer; line-height: 0; }
.svc-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.svc-check > span {
    display: block;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
}
.svc-check > span::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    margin: 2px 0 0 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}
.svc-check input:checked + span { background: var(--brand); border-color: var(--brand); }
.svc-check input:checked + span::after { opacity: 1; }
.svc-check input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.svc-row input[type=text] {
    flex: 1 1 auto;
    padding: 6px 10px;
    font-size: 12.5px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--ink-2);
    font-family: inherit;
}
.svc-row input[type=text]:hover  { border-color: var(--line); background: var(--surface); }
.svc-row input[type=text]:focus  { border-color: var(--brand); background: var(--surface); color: var(--ink); }
.svc-row input:checked ~ input[type=text] { color: var(--ink); }

.svc-add { margin-top: 8px; font-size: 12px; padding: 5px 11px; }

.svc-head {
    display: flex;
    gap: 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    margin-bottom: 6px;
}
.svc-head-def { flex: 0 0 auto; width: 68px; }

.svc-used {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: right;
    font-size: 11.5px;
    color: var(--muted);
}

/* Hinnarea alamärkus */
.l-note { margin-top: 5px; font-size: 12px; }

.inline-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.inline-check input { width: auto; }

.alert-warn { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }

/* ---------- Kaks tekstivälja kõrvuti ----------
   Kitsal ekraanil lähevad nad automaatselt üksteise alla: 340 px on
   miinimum, millest kitsamas veerus ei ole tekstivälja enam mõtet. */

.textpair {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 6px;
}

.textpair-col {
    flex: 1 1 340px;
    min-width: 0;
}

.textpair-col .form-section {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.textpair-col .tpl-field textarea { min-height: 150px; }

/* Nuppude rida. Eraldi klass, sest .field on veerg — inline display:flex
   üksi ei muudaks suunda ja nupud jääksid üksteise alla. */
.btnrow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    grid-column: 1 / -1;
}

/* ==========================================================================
   Tagasiside

   Kaart, mitte tabelirida: kliendi kirjutatu on siin kõige tähtsam ja peab
   olema loetav täies pikkuses. Tabel kärbiks selle kolme sõna peale ära.
   ========================================================================== */

.fb-card { margin-bottom: 14px; }

.fb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.fb-addr { font-size: 15px; }

.fb-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.fb-meta a { color: var(--muted); }

.fb-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.fb-rating {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--ink-2);
    white-space: nowrap;
}

.fb-rating.fb-r5, .fb-rating.fb-r4 { background: #f0fdf4; color: #15803d; }
.fb-rating.fb-r3                   { background: #fffbeb; color: #b45309; }
.fb-rating.fb-r2, .fb-rating.fb-r1 { background: #fef2f2; color: #b91c1c; }

.badge-new  { background: #fffbeb; color: #b45309; }
.badge-seen { background: var(--line-soft); color: var(--ink-2); }
.badge-done { background: #f0fdf4; color: #15803d; }

.fb-callback {
    margin-top: 10px;
    padding: 7px 11px;
    border-radius: 8px;
    background: #fef2f2;
    color: #991b1b;
    font-size: 13px;
    font-weight: 500;
}

/* Kliendi tekst — nii nagu ta selle kirjutas, ilma kärpimata */
.fb-msg {
    margin-top: 12px;
    padding: 13px 15px;
    background: var(--line-soft);
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.6;
    white-space: normal;
    overflow-wrap: anywhere;
}

.fb-pics { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

.fb-pics img {
    width: 108px;
    height: 108px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--line);
    display: block;
}

.fb-actions { margin-top: 14px; }

.fb-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.fb-buttons .spacer { flex: 1; }

/* ---------- QR-koodi kaart ---------- */

.qr-card { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.qr-card.is-off { opacity: .55; }

.qr-pic {
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 6px;
    line-height: 0;
}

.qr-body { flex: 1 1 340px; min-width: 0; }

.qr-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; }

.qr-meta { color: var(--muted); font-size: 12.5px; margin: 4px 0 8px; }

.qr-link {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--ink-2);
    background: var(--line-soft);
    padding: 7px 10px;
    border-radius: 7px;
    margin-bottom: 12px;
    overflow-wrap: anywhere;
}

/* ==========================================================================
   Kaks ettevõtet

   Lüliti päises näitab, kumma firma all parasjagu töötatakse. Värviline täpp
   on selleks, et seda näeks silmanurgast — vale firma all tehtud arve on
   tüütu parandada.
   ========================================================================== */

/* Firmalüliti ülemisel ribal.

   Värviline punkt on siin tähtsam kui nimi: nimed on peaaegu ühesugused
   („CW OÜ" ja „CW Puhastus") ja ühe pilguga vaadates on värv see, mis
   ütleb, kumma firma all sa parasjagu dokumente teed. */
.cswitch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 11px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    background: var(--surface);
    transition: border-color .12s ease;
}
.cswitch:hover { border-color: #C6D2E4; }
.cswitch:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

.cswitch-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ctag, var(--brand));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ctag, var(--brand)) 20%, transparent);
    flex: none;
}

.cswitch select {
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    background: transparent no-repeat right 2px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7F91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    border: 0;
    padding: 2px 20px 2px 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.cswitch select option { color: var(--ink); background: #fff; }
.cswitch select:focus { outline: 0; }

/* Firma märk nimekirjades */
.ctag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ctag, var(--brand)) 14%, #fff);
    color: var(--ctag, var(--brand-dark));
    border: 1px solid color-mix(in srgb, var(--ctag, var(--brand)) 35%, #fff);
    white-space: nowrap;
}

/* Väli, mida enam muuta ei saa (nt firma pärast numbri andmist) */
.lockfield {
    padding: 9px 12px;
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    background: var(--line-soft);
    font-size: 13.5px;
    color: var(--ink-2);
}

.lockfield span {
    display: block;
    font-size: 11.5px;
    color: var(--muted);
    margin-top: 2px;
}

/* Firmade haldus */
.firm-card { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.firm-card .field { flex: 1 1 200px; }

.cfilter { display: inline-flex; }
.cfilter .select-inline { min-width: 120px; }

/* Punane märkus vormiväljal (nt puuduvad firma andmed) */
.field .err {
    display: block;
    color: var(--danger);
    font-size: 12.5px;
    margin-top: 4px;
}
.field .err a { color: var(--danger); }

/* ==========================================================================
   Numbrijadad
   ========================================================================== */

.seqrow {
    border-top: 1px solid var(--line-soft);
    padding: 18px 0 4px;
}
.seqrow:first-of-type { border-top: 0; padding-top: 4px; }

.seqrow-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2px;
}
.seqrow-head h3 { font-size: 15px; }

/* Näidis on siin lehe kõige tähtsam asi: ilma temata ei tea keegi, mida
   „aasta ees, eraldaja kriips, kolm kohta" päriselt tähendab. */
.seqrow-sample {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--muted);
}
.seqrow-sample strong {
    display: inline-block;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--navy);
    background: var(--brand-light);
    border: 1px solid color-mix(in srgb, var(--brand) 30%, #fff);
    border-radius: var(--radius-pill);
    padding: 2px 12px;
    margin-left: 4px;
}

.seqrow .seq-grid { margin-top: 10px; }
.seq-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.seqrow .btnrow { margin: 10px 0 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--ink-2);
}
.check input { width: auto; }

/* ==========================================================================
   Järgmine samm kaardil — Karel palus, et see silma jääks
   ========================================================================== */

/* Sildist üksi ei piisa, kui tulbas on kümme kaarti. Kaardi vasakusse serva
   tuleb värviline riba, mis on üle terve tulba ühe pilguga näha: punane =
   tähtaeg möödas, kollane = täna, sinine = lähipäevil. */
.card.has-due {
    border-left-width: 4px;
    border-left-style: solid;
}

.card.due-is-overdue { border-left-color: var(--danger); background: #fffafa; }
.card.due-is-today   { border-left-color: var(--warn);   background: #fffdf7; }
.card.due-is-soon    { border-left-color: var(--deep);   background: #fbfcfe; }

/* Kaugem tähtaeg: riba on, aga vaikne. Nii on näha, et samm on olemas,
   ilma et ta täna tähelepanu nõuaks. */
.card.due-is-later   { border-left-color: var(--line); }

/* Tähtaeg möödas on ainus, mis päriselt kisendab: kerge varjund ja tugevam
   serv. Ülejäänud jäävad rahulikuks, muidu kaob mõte ära. */
.card.due-is-overdue {
    box-shadow: 0 1px 2px rgba(220, 38, 38, .10);
}
.card.due-is-overdue:hover {
    box-shadow: 0 4px 14px rgba(220, 38, 38, .16);
}

/* Kes selle sammu ära teeb */
.card-due .due-who {
    font-size: 11px;
    color: var(--muted);
    font-weight: 550;
}
.card-due .due-who::before { content: "→ "; }

/* ==========================================================================
   Vaate lüliti: tahvel või nimekiri
   ========================================================================== */

.viewswitch {
    display: inline-flex;
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 2px;
    flex: none;
}

.vs-btn {
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    color: var(--ink-2);
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    white-space: nowrap;
}
.vs-btn:hover { color: var(--ink); }

.vs-btn.is-active {
    background: var(--surface);
    color: var(--navy);
    box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Nimekirjavaade
   ========================================================================== */

.listview {
    padding: 14px 20px 28px;
}

.list-table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.list-table tbody tr { cursor: pointer; }
.list-table tbody tr:hover { background: var(--line-soft); }

.list-table .dot { display: inline-block; vertical-align: middle; margin-right: 4px; }
.list-table .ta-r { text-align: right; white-space: nowrap; }
.list-table .list-note { color: var(--muted); font-size: 12.5px; }
.list-table .list-tyhi { color: var(--muted); }

/* Tähtaja silt tabelis */
.list-table .due-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--line-soft);
    color: var(--ink-2);
    white-space: nowrap;
}
.list-table .due-chip.is-overdue { background: #fef2f2; color: #b91c1c; }
.list-table .due-chip.is-today   { background: #fffbeb; color: #b45309; }
.list-table .due-chip.is-soon    { background: #E9EEF9; color: var(--deep); }

@media (max-width: 900px) {
    .listview { padding: 12px; }
    .list-table { display: block; overflow-x: auto; }
}

/* ==========================================================================
   Töölaud
   ========================================================================== */

.tl-ruhm > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tl-arv {
    background: var(--line-soft);
    color: var(--ink-2);
    border-radius: var(--radius-pill);
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 600;
}

.tl-ruhm.is-overdue > h2 { color: #b91c1c; }
.tl-ruhm.is-overdue .tl-arv { background: #fef2f2; color: #b91c1c; }
.tl-ruhm.is-today > h2 { color: #b45309; }
.tl-ruhm.is-today .tl-arv { background: #fffbeb; color: #b45309; }

/* Üks töö: kuupäev vasakul, sisu keskel, nupud paremal */
.tl-too {
    display: grid;
    grid-template-columns: 130px 1fr auto;
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-top: 1px solid var(--line-soft);
}
.tl-too:first-of-type { border-top: 0; }

.tl-millal .due-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--line-soft);
    color: var(--ink-2);
}
.tl-millal .due-chip.is-overdue { background: #fef2f2; color: #b91c1c; }
.tl-millal .due-chip.is-today   { background: #fffbeb; color: #b45309; }
.tl-millal .due-chip.is-soon    { background: #E9EEF9; color: var(--deep); }

.tl-sisu h3 { font-size: 15px; margin-bottom: 4px; }
.tl-sisu h3 em { color: var(--muted); font-weight: 400; }

.tl-tehing {
    margin: 0 0 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tl-etapp { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }

/* Kolm rida, ilma siltideta: klient, ülejäänu, kontaktid.
   Sildid võtsid varem poole laiusest ja silm käis siksakis. */
.tl-klient {
    margin: 0 0 3px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

.tl-muu {
    margin: 0 0 3px;
    font-size: 13px;
    color: var(--ink-2);
}

.tl-kontakt {
    margin: 0;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    color: var(--muted);
}

.tl-hall { color: var(--muted); font-weight: 400; }

.tl-margkus {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--ink-2);
    background: var(--line-soft);
    border-radius: var(--radius);
    padding: 8px 10px;
    max-width: 70ch;
}

.tl-teod { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 820px) {
    .tl-too { grid-template-columns: 1fr; gap: 8px; }
    .tl-teod { flex-direction: row; }
}

/* ==========================================================================
   TÖÖAEG
   Töötaja kell on telefonis, üks käsi vaba ja kiirustades. Seepärast on
   nupud suured ja seis kirjas sõnadega, mitte ikooniga.
   ========================================================================== */

.tv-kell {
    text-align: center;
    padding: 26px 20px 24px;
}

.tv-seis {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
}

/* Jooksev tundide arv. Suur sellepärast, et see on ainus number, mida
   töötaja päeva jooksul vaatab. */
.tv-arv {
    margin: 6px 0 2px;
    font-size: 46px;
    line-height: 1.05;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand-dark);
}

.tv-kell .hint { margin: 0 0 18px; }

.tv-kell.is-working { border-top: 3px solid var(--ok); }
.tv-kell.is-paused  { border-top: 3px solid var(--warn); }
.tv-kell.is-paused .tv-seis { color: #92400e; }

/* Pöidlaga vajutatav nupp. 52 px on umbes see, mida telefonis ei ole
   võimalik mööda panna. */
.btn-suur {
    min-height: 52px;
    padding: 0 26px;
    font-size: 17px;
    font-weight: 600;
}

.tv-nupud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.tv-nupud form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
/* Märkuse väli on nupu kõrval, aga ta on lisavõimalus, mitte tee edasi:
   nupp peab jääma suureks ja väli tema kõrvale vaikselt ära. */
.tv-nupud input[type="text"] {
    flex: 1 1 240px;
    min-height: 44px;
}

/* Unustatud lõpetamine. Punane serv, sest seda ei tohi mööda kerida:
   pooleli päev ei lähe tundide summasse ja uut alustada ei saa. */
.tv-unustatud {
    border-left: 4px solid var(--danger);
    background: #fffafa;
}
.tv-unustatud h2 { color: var(--danger); }

/* Üherealine vorm: kellaajad ja nupp kõrvuti, telefonis üksteise alla. */
.tv-rida {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}
.tv-rida label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
}
.tv-rida input[type="time"],
.tv-rida input[type="date"],
.tv-rida input[type="month"] { min-height: 40px; }

@media (max-width: 640px) {
    .tv-arv { font-size: 40px; }
    .tv-nupud form,
    .tv-nupud { width: 100%; }
    .tv-nupud .btn-suur { width: 100%; }
    .tv-rida label { flex: 1 1 130px; }
}

/* Lai tabel telefonis: kerib omaenda kastis, mitte ei lükka kogu lehte
   laiemaks. Ilma selleta läks päis paremalt servast välja ja menüü jäi
   poolikuks — just see juhtus tööaja lehel. */
/* Nimekirjatabel kerib telefonis OMA kastis, mitte terve leht.

   Kui kerib leht, kaob menüü ja päis vasakule välja ja inimene arvab, et
   programm on katki. Kui kerib tabel, jääb kõik muu paigale ja näha on
   ainult see, et tabelil on rohkem veerge kui ekraanil ruumi. */
.tabel-kerib {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Ilma selleta lõikab kerimiskast ümara nurga sirgeks. */
    border-radius: var(--radius-sm);
    /* Paneeli polsterdus on tabeli servades juba olemas; kerimiskast tohib
       minna serva, et kerimine tunduks loomulik. */
    margin: 0 -2px;
    padding: 0 2px;
}
.tabel-kerib > .table { min-width: 520px; }

/* Peenike kerimisriba, mis ei varjaks viimast rida. */
.tabel-kerib::-webkit-scrollbar { height: 8px; }
.tabel-kerib::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: var(--radius-pill);
}
.tabel-kerib::-webkit-scrollbar-track { background: transparent; }

/* ==========================================================================
   KASUTAJATE NIMEKIRI (Seaded)
   Rida on lugemisvaade, muutmine käib eraldi vormil sama rea all. Varem oli
   igal real viis lahtist kasti kõrvuti ja iga uus veerg lükkas nupud
   paneelist välja.
   ========================================================================== */

.table-users td { vertical-align: top; padding-top: 11px; padding-bottom: 11px; }

.u-nimi {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    font-weight: 600;
    color: var(--ink);
}
.u-mail {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.u-vaike { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* Arvuveerg paremale ja tabelinumbritega — nii on tunnitasusid võimalik
   veeruna võrrelda, mitte ainult ükshaaval lugeda.
   NB: `.table th, .table td` on sama kaaluga valija ja seab text-align: left.
   Ilma tabeli nimeta ees jääks see rida mõjuta. */
.table th.tv-num,
.table td.tv-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.badge-worker { background: #EEF6FF; color: #14357F; }

/* Keelatud nupp peab ikka nupu moodi välja nägema. btn-danger-ghost on
   ilma äärisega ja poolläbipaistvana jäi temast järele lahtine punane
   tekst, mis paistis pigem veateatena kui nupuna. */
.row-off .btn[disabled] { border-color: var(--line-soft); }

/* Muudetav rida saab vasakule serva riba, et vorm ja tema rida käiksid
   silmaga kokku. */
.table-users tr.is-editing > td { background: var(--bg); }
.table-users tr.is-editing > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

.u-vorm-rida > td { background: var(--bg); padding: 0 10px 18px; }

/* Vorm ise: võrdsed veerud, mis kitsamal ekraanil ise ümber murduvad.
   Ükski väli ei ole enam rea laiuse peale kinni seotud. */
.u-vorm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px 16px;
    align-items: start;
}
.u-vorm .field { display: flex; flex-direction: column; gap: 4px; }
.u-vorm .field > label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    font-weight: 600;
}
.u-vorm .field > .hint { font-size: 11.5px; margin: 0; }
.u-vorm input,
.u-vorm select { width: 100%; }

/* Nupud lähevad omaette ritta, üle kogu vormi laiuse. Muidu satuks
   „Salvesta" juhuslikult mõne välja kõrvale ja rida näeks katki välja. */
.u-vorm-teod {
    grid-column: 1 / -1;
    display: flex;
    gap: 8px;
    align-items: center;
    padding-top: 2px;
}

/* Rollide selgitus ja uue kasutaja vorm on omaette plokid sama paneeli sees:
   pealkiri annab neile piiri, mida lahtised väljad ise ei anna. */
.u-rollid,
.u-uus {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
}
.u-rollid h3,
.u-uus h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 12px;
}

.u-rollid dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    margin: 0;
    align-items: baseline;
}
.u-rollid dt { margin: 0; }
.u-rollid dd {
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-2);
}
.u-rollid > .hint { margin: 14px 0 0; }

@media (max-width: 640px) {
    .u-rollid dl { grid-template-columns: 1fr; gap: 4px; }
    .u-rollid dd { margin-bottom: 8px; }
    .u-vorm-teod .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   TÖÖLAUD
   Kaks veergu: vasakul minu päev (tööd ja märkmed kuupäeva järgi), paremal
   kitsam tulp kokkuvõtetega. Kitsal ekraanil lähevad nad üksteise alla.
   ========================================================================== */

/* Töölaud on ainus kahe veeruga leht. 900 px on ühe veeru jaoks paras, aga
   kahe peale jagatuna jäi tööde kaart nii kitsaks, et pealkiri murdus kolme
   ritta. Laiem leht ainult siin — ülejäänud programm jääb endiseks. */
.page.page-lai { max-width: 1320px; }

.desk {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    align-items: start;
}
.desk-main > .panel:first-child,
.desk-korval > .panel:first-child { margin-top: 0; }

@media (max-width: 1100px) {
    .desk { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Kokkuvõtterida ----------
   Number, pealkiri ja üks selgitav rida. Terve plokk on link: number, mida
   ei saa kontrollida, on halvem kui numbri puudumine. */
.desk-rida {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    color: var(--ink);
    transition: background .12s ease, border-color .12s ease;
}
.desk-rida:hover { background: var(--bg); color: var(--ink); }
.desk-rida:last-child { margin-bottom: 0; }

.desk-rida.is-overdue { border-left-color: var(--danger); background: #fffafa; }
.desk-rida.is-warn    { border-left-color: var(--warn);   background: #fffdf7; }

.desk-arv {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 34px;
    text-align: center;
    color: var(--ink);
}
.desk-rida.is-overdue .desk-arv { color: var(--danger); }
.desk-rida.is-warn .desk-arv    { color: #b45309; }

.desk-tekst { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.desk-tekst strong { font-size: 13px; font-weight: 600; }
.desk-tekst small  { font-size: 11.5px; color: var(--muted); }

/* ---------- Kes on tööl ---------- */

.desk-tool h3,
.desk-toru h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 10px;
}
.desk-tool h3 .hint,
.desk-toru h3 .hint { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.desk-toru { margin-top: 18px; }

.desk-inimesed { list-style: none; margin: 0 0 12px; padding: 0; }
.desk-inimesed li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
}
.desk-nimi { font-weight: 550; }
.desk-kell { margin-left: auto; font-size: 12px; color: var(--muted); }

.desk-tapp {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: none;
}
.desk-tapp.is-tool { background: var(--ok); }
.desk-tapp.is-paus { background: var(--warn); }

/* ---------- Müügitoru seis ---------- */

.desk-etapid { list-style: none; margin: 0; padding: 0; }
.desk-etapid a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px solid var(--line-soft);
}
.desk-etapid li:last-child a { border-bottom: 0; }
.desk-etapid a:hover .desk-etapp-nimi { color: var(--deep); }
.desk-etapp-nimi  { flex: 1; min-width: 0; }
.desk-etapp-arv   { font-weight: 650; font-variant-numeric: tabular-nums; }
.desk-etapp-summa { min-width: 92px; text-align: right; font-size: 12px; color: var(--muted);
                    font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MÄRKMED
   Üks rida = üks märge. Linnuke vasakul, tekst keskel, ristike paremal.
   ========================================================================== */

.mk-plokk + .mk-plokk {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
}
.mk-plokk h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted);
    margin: 0 0 3px;
}
.mk-plokk > .hint { margin: 0 0 10px; font-size: 11.5px; }
.mk-tyhi { margin: 0 0 10px; }

.mk-list { list-style: none; margin: 0 0 10px; padding: 0; }

.mk-rida {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 4px;
    border-radius: 8px;
}
.mk-rida:hover { background: var(--bg); }
.mk-rida.is-overdue .mk-taht { color: var(--danger); font-weight: 600; }
.mk-rida.is-today .mk-taht   { color: #b45309; font-weight: 600; }

/* Linnukese kast on nupp, mitte märkeruut: ilma JavaScriptita peab vajutus
   vormi ära saatma ja märkeruut seda ise ei tee. */
.mk-tick { display: flex; }
.mk-box {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    padding: 0;
    border: 1.5px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    flex: none;
    transition: border-color .12s ease, background .12s ease;
}
.mk-box:hover { border-color: var(--brand); }
.mk-box.is-checked { background: var(--brand); border-color: var(--brand); }

.mk-sisu { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mk-tekst { font-size: 13px; overflow-wrap: anywhere; }
.mk-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--muted);
}
.mk-autor::before { content: "· "; }

.mk-rida.is-done .mk-tekst { text-decoration: line-through; color: var(--muted); }

.mk-del { display: flex; }
.mk-del .icon-btn { font-size: 18px; padding: 0 5px; line-height: 1.2; opacity: 0; }
.mk-rida:hover .mk-del .icon-btn { opacity: 1; }
/* Puutetundlikul ekraanil ei ole hover'it — seal peab ristike kogu aeg
   nähtav olema, muidu ei saa telefonis märget üldse ära võtta. */
@media (hover: none) {
    .mk-del .icon-btn { opacity: 1; }
}

/* Uue märkme rida: tekst võtab kogu ruumi, kuupäev ja nupp tema kõrvale.
   Enter tekstiväljas saadab vormi ära — nii nagu nimekirjas kirjutades ootad. */
.mk-uus {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.mk-uus input[type="text"] { flex: 1 1 100%; min-width: 0; }
.mk-uus input[type="date"] { flex: 0 0 auto; }
.mk-uus .btn { flex: 0 0 auto; }

.mk-tehtud { margin-top: 12px; }
.mk-tehtud summary {
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    padding: 4px 0;
}
.mk-tehtud summary:hover { color: var(--ink-2); }

/* Töölaual töö kõrval seisev märge: sama kaart, aga vaiksem — märge ei ole
   tehing ja ei tohi tehingu moodi välja näha. */
.tl-too.is-marge .tl-sisu h3 { font-weight: 600; }
.tl-too.is-marge { background: #FCFDFF; }

/* Klõpsatav näitajakast. Ta on link, aga peab välja nägema nagu kast —
   allajoonitud number näeb välja nagu viga, mitte nagu nupp. */
a.stat {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}
a.stat:hover { border-color: var(--brand); box-shadow: var(--shadow); }
a.stat .stat-label,
a.stat .stat-value { text-decoration: none; }
a.stat.is-overdue .stat-value { color: var(--danger); }

/* Uue märkme rida: tekst omaette reale, kuupäev ja nupp tema alla kõrvuti.
   Kolme asja ühte 380 px tulpa ei mahu ja nupp jäi üksinda kolmandale reale
   rippuma. */
.mk-uus input[type="date"] { flex: 1 1 auto; min-width: 0; }

/* ==========================================================================
   Kokkuklapitav „lisa uus" plokk

   Klientide leht algas suure tühja vormiga ja nimekiri — see, mille pärast
   lehele tullakse — algas alles ekraani alumisest servast. Uut klienti
   lisatakse korra nädalas, nimekirja vaadatakse iga päev.
   ========================================================================== */

.lisaplokk { padding: 0; overflow: hidden; }

.lisaplokk > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .12s ease;
}
.lisaplokk > summary::-webkit-details-marker { display: none; }
.lisaplokk > summary:hover { background: var(--line-soft); }

.lisaplokk-ikoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--brand-light);
    color: var(--brand-dark);
}
.lisaplokk-tekst { flex: 1; min-width: 0; }
.lisaplokk-tekst strong { display: block; font-size: 14px; font-weight: 650; }
.lisaplokk-tekst small  { display: block; font-size: 12px; color: var(--muted); margin-top: 1px; }

/* Nool keerab end lahtioleku märgiks ümber. Ilma temata ei ole aru saada,
   kas plokk on kokku klapitud või lihtsalt tühi. */
.lisaplokk-nool {
    flex: none;
    color: var(--muted);
    display: inline-flex;
    transition: transform .18s ease;
}
.lisaplokk[open] > summary .lisaplokk-nool { transform: rotate(180deg); }
.lisaplokk[open] > summary { border-bottom: 1px solid var(--line-soft); }

.lisaplokk-sisu { padding: 18px 20px 20px; }

/* ==========================================================================
   Kohapeal muudetav rida (müügitoru etapid seadetes)

   Iga rea peal seisis kolm lahtist sisestuskasti ja „Salvesta" nupp. Kuus
   etappi tegid neist kastidest terve seina ja ükski neist ei öelnud, kas
   seal juba midagi on. Nüüd näeb rida välja nagu rida ja muutub kastiks
   alles siis, kui teda puudutada.
   ========================================================================== */

.kohapeal input[type="text"],
.kohapeal input:not([type]),
.kohapeal select {
    border-color: transparent;
    background: transparent;
    font-weight: 550;
    transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.table tbody tr:hover .kohapeal input[type="text"],
.table tbody tr:hover .kohapeal input:not([type]),
.table tbody tr:hover .kohapeal select {
    border-color: var(--line);
    background: var(--surface);
}
.kohapeal input:focus,
.kohapeal select:focus {
    border-color: var(--brand);
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}

/* Lehed ilma külgmenüüta: sisselogimine, paigaldus ja avalik tagasiside
   vorm. Ilma selle reata lükkaks külgmenüü jaoks jäetud vasak veer nende
   sisu paremale, kus ei ole midagi. */
body.auth-page,
body.plain { padding-left: 0; }

/* ==========================================================================
   Miski ei tohi lehte külgsuunas venitada

   Tabelid kerivad oma kastis (.tabel-kerib). Ülejäänud pikk sisu — pikk
   registrikood, pikk e-posti aadress, näidisfaili rida — peab murduma.
   Kui leht ise kerib külge, kaob menüü vasakule välja ja inimene arvab,
   et programm on katki.
   ========================================================================== */

/* Pikk näidistekst (kataloogi importimise näidisrida) kerib oma kastis. */
.preview-box { overflow-x: auto; }
.preview-box pre { white-space: pre; }

/* Pealkiri, kus on firma nimi ja silt kõrvuti, peab kitsal ekraanil
   murduma, mitte paneelist välja ronima. */
.panel > h2,
.panel-head h2 { flex-wrap: wrap; overflow-wrap: anywhere; }

/* Nimekirjades on aadresse ja e-posti aadresse, mis ei sisalda tühikut.

   NB: `break-word`, MITTE `anywhere`. Vahe on selles, et `anywhere` lubab
   brauseril tabeli veergu arvutades eeldada murdmist — ja siis murdis ta
   kuupäeva „15.09.20 / 26" pooleks, sest nii mahtus veerg kitsamaks.
   `break-word` murrab alles siis, kui sõna päriselt üle ääre läheks. */
.table td { overflow-wrap: break-word; }

/* Rea nupud on väikesed. Tavaline nupukõrgus teeb kahekümne rea pealt
   nimekirjast trepi, kus päris sisu jääb nuppude vahele ära. */
.row-actions .btn {
    padding: 5px 9px;
    font-size: 12.5px;
    border-radius: var(--radius-sm);
    gap: 5px;
}
.row-actions .ico { opacity: .7; }
.row-actions .btn:hover .ico { opacity: 1; }

/* ==========================================================================
   Arhiiv (müügitoru kolmas vaade)
   ========================================================================== */

/* „Otsisid ja ei leidnud, aga teisel pool on" — riba tahvli kohal.

   See on kogu arhiivi juures kõige tähtsam tükk. Ilma temata otsid kliendi
   nime, ei leia ja järeldad, et sa ei ole teda kunagi sisestanud. */
.vihje {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    max-width: 1080px;
    margin: 14px auto 0;
    padding: 10px 14px;
    background: var(--warn-soft);
    border: 1px solid #FDE68A;
    border-radius: var(--radius);
    font-size: 13px;
    color: #92400E;
}
.vihje span { flex: 1; min-width: 200px; }
.vihje .btn { background: var(--surface); border-color: #FDE68A; color: #92400E; }
.vihje .btn:hover { background: #FEF3C7; color: #78350F; }

/* Arhiivi nimekiri. Rida on klõpsatav (avab tehingu), nupud reas ei tohi
   seda avada — vt renderArhiiv(). */
.arhiiv-table tbody tr { cursor: pointer; }
.arhiiv-table .row-actions { justify-content: flex-end; }

/* Kolmas nupp vaate lülitis ei tohi teisi kitsamaks suruda. */
.viewswitch { flex: none; }

/* ==========================================================================
   OBJEKTI ÜLEVAATUS

   Vorm täidetakse TELEFONIS, objektil seistes, ühe käega. Iga otsus siin
   käib selle järgi: linnukese tabamisala on terve rida, mitte ruuduke;
   modaal läheb telefonis üle terve ekraani; nupud on all püsivas ribas,
   et neid ei peaks pika vormi lõpust otsima.
   ========================================================================== */

/* Modaal, mis ei ole kahes veerus. Ülevaatuse vorm on nimekiri, mitte
   andmevorm — kaks veergu teeksid temast telefonis kaose. */
.modal-lai   { max-width: 880px; }
.modal-kitsas { max-width: 460px; }
.modal-lai > form > .modal-body,
.modal-kitsas > .modal-body { display: block; }

.modal-lai .modal-body { max-height: calc(100vh - 190px); overflow-y: auto; }

/* ---------- Vormi valik ---------- */

.vormivalik { display: grid; gap: 10px; }

.vormikaart {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    gap: 2px 14px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    background: var(--surface);
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.vormikaart:hover {
    border-color: var(--brand);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
    color: inherit;
}
.vormikaart-ikoon {
    grid-row: 1 / 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px; height: 44px;
    border-radius: var(--radius);
    background: var(--brand-light);
    color: var(--brand-dark);
}
.vormikaart strong { font-size: 14.5px; }
.vormikaart small  { font-size: 12.5px; color: var(--muted); }

/* ---------- Vormi jaod ---------- */

.insp-jagu {
    border-top: 1px solid var(--line-soft);
    padding: 18px 0 4px;
}
.insp-jagu:first-of-type { border-top: 0; padding-top: 0; }
.insp-jagu > h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
    margin-bottom: 12px;
}

/* Sisemine jagu on nähtavalt teist värvi. Inimene peab ühe pilguga nägema,
   et see osa ei lähe kliendile — mitte lootma, et ta mäletab. */
.insp-jagu.is-sisemine {
    background: var(--warn-soft);
    border: 1px solid #FDE68A;
    border-radius: var(--radius);
    padding: 16px 16px 6px;
    margin: 18px 0 4px;
}
.insp-jagu.is-sisemine > h3 { color: #92400E; }

.insp-lukk {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    color: #92400E;
    margin: 0 0 12px;
}
.insp-lukk .ico { flex: none; margin-top: 1px; }

/* ---------- Read ---------- */

.insp-read { display: grid; gap: 2px; }

.insp-rida {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    min-height: 44px;                 /* sõrmega tabatav */
}
.insp-rida:hover { background: var(--line-soft); }

/* Linnukese tabamisala on TERVE RIDA. Telefonis 16-pikslise ruudukese
   tabamine on tüütu ja objektil seistes lausa võimatu. */
.insp-linnuke { cursor: pointer; user-select: none; }
.insp-linnuke input[type="checkbox"] {
    flex: none;
    width: 22px; height: 22px;
    accent-color: var(--brand);
    cursor: pointer;
}
.insp-linnuke:has(input:checked) { background: var(--brand-light); }
.insp-linnuke:has(input:checked) .insp-silt { font-weight: 600; color: var(--navy); }

.insp-silt { flex: 1; font-size: 13.5px; line-height: 1.35; }

.insp-vali {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 220px;
}
.insp-vali input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font: inherit;
    background: #fff;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.insp-vali input:hover { border-color: #C6D2E4; }
.insp-vali input:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.insp-uhik { font-size: 12.5px; color: var(--muted); flex: none; }

/* ---------- Pildid ---------- */

.insp-pildid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}
.insp-pilt { margin: 0; }
.insp-pilt img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    display: block;
}

.insp-lisapilt {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
/* <label for=…> näeb välja nagu nupp, aga on silt: ta avab peidetud
   failivalija. Telefonis pakub see ise kaamerat ja galeriid. */
.insp-lisapilt label.btn { cursor: pointer; }

/* ---------- Telefon ---------- */

@media (max-width: 720px) {
    /* Modaal üle TERVE ekraani. Taustal olev polsterdus jätaks ülaserva
       riba, kust paistab leht, mille peal ollakse — telefonis näeb see
       välja nagu pooleldi avanenud aken, mitte nagu vorm. */
    .modal-backdrop:has(> .modal-lai),
    .modal-backdrop:has(> .modal-kitsas) { padding: 0; }

    .modal-lai, .modal-kitsas {
        max-width: none;
        width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }
    .modal-lai .modal-body { max-height: none; flex: 1; }

    /* Väärtusväli läheb sildi alla — kõrvuti jääks mõlemale liiga kitsaks. */
    .insp-rida:not(.insp-linnuke) { flex-direction: column; align-items: stretch; gap: 6px; }
    .insp-vali { flex: 1 1 auto; }

    /* Nupud all püsivas ribas: pika vormi lõpust ei pea neid otsima. */
    .modal-lai .modal-foot {
        position: sticky;
        bottom: 0;
        background: var(--surface);
        flex-wrap: wrap;
        padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
    .modal-lai .modal-foot .btn { flex: 1 1 auto; }
    .modal-lai .modal-foot .spacer { display: none; }
}