/* ==================================================================
hOps — ühtne kujundus v2 (2026-09)
Põhimõte: üks värvide, suuruste ja vahede komplekt (allpool :root).
Kõik plokid kasutavad samu väärtusi — ära kirjuta PHP-sse inline
font-size / color / padding väärtusi, vaid kasuta klasse.
Mõõdud: vahe plokkide vahel 14px · kasti sisu 18px · nurk 10px (kast)
6px (nupp, väli) · nupu ja välja kõrgus 36px (väike 30px)
Kiri: 11 silt · 12 detail · 13 tabel/nupp · 14 põhitekst
16 kasti pealkiri · 22 lehe pealkiri · 24 KPI number
================================================================== */
:root {
/* Bränd */
--navy: #1B2A41; /* logo, lehe pealkirjad, aktiivne menüü */
--aktsent: #245A96; /* lingid ja nupud */
--aktsent-tume: #1B4575;
--aktsent-hele: #E8EFF8; /* toonis nupu taust */
--aktsent-hele-2: #D6E3F3;
/* Neutraalid */
--taust: #F4F6F8; /* lehe taust */
--pind: #FFFFFF; /* kastid */
--pind-2: #F8F9FB; /* tabelipäis, lukus väli */
--joon: #E3E7EC; /* kastide ja ridade jooned */
--joon-tugev: #CFD6DE; /* väljade ääris */
--tekst: #1F2733;
--tekst-2: #4B5563; /* teisene tekst */
--tekst-3: #6B7684; /* sildid, detailid (kontrast >= 4.5:1) */
--tekst-4: #98A2AF; /* ikoonid, kohatäide */
/* Staatused: tekst + taust */
--punane: #B4483C; --punane-t: #FBE7E4;
--kollane: #8A6100; --kollane-t: #FDF1C7;
--oranz: #B85C00; --oranz-t: #FCE6D0;
--roheline: #2F7D58; --roheline-t: #E0F1E7;
--sinine-s: #2A64A8; --sinine-t: #E3ECF8;
--lilla: #6D4AB0; --lilla-t: #EEE7FB;
--hall-s: #5F6B78; --hall-t: #EDF0F3;
/* Mõõdud */
--vahe: 14px;
--vahe-2: 28px;
--kast-pad: 18px;
--r-kast: 10px;
--r-nupp: 6px;
--h-nupp: 36px;
--h-nupp-v: 30px;
--vari: 0 1px 2px rgba(16, 24, 40, .04);
--vari-ule: 0 12px 32px rgba(16, 24, 40, .16);
--fookus: 0 0 0 3px rgba(36, 90, 150, .18);
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
--font-pealkiri: 'Space Grotesk', var(--font);
/* Vanad nimed (kasutusel PHP inline stiilides) — suunatud uutele */
--sinine: var(--aktsent);
--sinine-tume: var(--aktsent-tume);
--hall-taust: var(--taust);
--hall-joon: var(--joon);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; } /* peidetud element jääb peidetuks ka siis, kui klass annab talle display väärtuse */
/* Kerimisriba ruum on alati broneeritud. Ilma selleta on luhike leht (nt
Hooned) 15px laiem kui pikk leht (nt Tegevused) ja keskele joondatud
menuu + sisu hupivad lehte vahetades paar pikslit korvale (Egon 06.10). */
html { scrollbar-gutter: stable; }
body {
margin: 0;
font-family: var(--font);
background: var(--taust);
color: var(--tekst);
font-size: 14px;
line-height: 1.45;
-webkit-font-smoothing: antialiased;
}
a { color: var(--aktsent); text-decoration: none; }
a:hover { color: var(--aktsent-tume); text-decoration: underline; }
input, textarea, select, button { font-family: inherit; font-size: inherit; }
/* ------------------------------------------------------------------
PAIGUTUS: külgmenüü + sisu
------------------------------------------------------------------ */
/* Menuu + sisu on uks keskele joondatud plokk: 232px menuu + 1556px sisu.
Laial ekraanil jaab tyhi ruum vordselt molemale poole, mitte ainult
paremale (Egoni tellimus 06.10). Menuu on sticky, mitte fixed - nii
liigub ta keskjoondusega automaatselt kaasa. */
.layout {
display: flex;
min-height: 100vh;
align-items: flex-start;
max-width: 1788px; /* 232 + 1556 */
margin: 0 auto;
}
.sidebar {
width: 232px;
flex-shrink: 0;
background: var(--pind);
color: var(--tekst);
display: flex;
flex-direction: column;
padding: 18px 0;
position: sticky;
top: 0;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
border-right: 1px solid var(--joon);
z-index: 100;
}
/* Lehte blokeeriv teade (lehe_teade): nupud paremal ja uhes laiuses nagu mujal */
.teate-teod { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.teate-teod .btn { min-width: 140px; flex-shrink: 0; }
.modaal-keha > p:first-child { margin-top: 0; }
/* Vana menyy lukustusnupp on nyyd "tagasi eelmisele lehele" (Egon 06.10):
vaike umarate servadega ruut logo korval, sees ainult nool. */
.sidebar-tagasi {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; flex-shrink: 0; padding: 0;
border: 1px solid var(--joon); border-radius: var(--r-nupp);
background: var(--pind-2); color: var(--tekst-3);
}
.sidebar-tagasi:hover { background: var(--taust); color: var(--tekst); text-decoration: none; }
.sidebar-tagasi svg { display: block; }
/* Logo: alati sõnamärk hOps — kitsas menüüs väike (mahub 64px ribasse), laias suurem */
.sidebar .brand { height: 34px; padding: 0 12px 0 20px; margin-bottom: 12px; display: flex; align-items: center;
justify-content: space-between; gap: 10px; white-space: nowrap; }
.sidebar .brand .hops-logo { font-size: 24px !important; }
.sidebar-label { white-space: nowrap; }
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 0 8px; }
.sidebar-nav a {
display: flex;
align-items: center;
gap: 12px;
height: 38px;
padding: 0 13px;
color: var(--tekst-2);
font-size: 13px;
font-weight: 500;
border-radius: var(--r-nupp);
white-space: nowrap;
}
.sidebar-nav a svg { flex-shrink: 0; color: var(--tekst-4); transition: color .15s; }
.sidebar-nav a:hover { background: var(--taust); text-decoration: none; color: var(--tekst); }
.sidebar-nav a:hover svg { color: var(--tekst-2); }
.sidebar-nav a.aktiivne { background: var(--aktsent-hele); color: var(--navy); font-weight: 600; }
.sidebar-nav a.aktiivne svg { color: var(--aktsent); }
/* Kliendi ja hoone valik on uks ruhm: nad on teineteise kulge ja menuulingid
nende kulge (Egoni soov 07.10). Varem oli brandi ja valikute vahel 36 px,
valikute vahel 14 ja menuuni veel 14 - menuu algas alles 202 px pealt. */
.sidebar-hoone-kontekst { padding: 0 16px; overflow: hidden; }
.sidebar > .sidebar-hoone-kontekst { margin: 6px 0 0; }
.sidebar > .sidebar-hoone-kontekst + .sidebar-hoone-kontekst { margin-top: 2px; }
.sidebar > .sidebar-nav { margin-top: 10px; }
.sidebar-hoone-silt, .sidebar-hoone-vorm { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; color: var(--tekst-2); padding: 3px 0; }
.sidebar-hoone-silt svg, .sidebar-hoone-vorm svg { color: var(--tekst-3); flex-shrink: 0; }
.sidebar-hoone-kontekst select {
flex: 1; width: 100%;
font-size: 12px; font-weight: 600;
height: 32px; padding: 0 8px;
border: 1px solid var(--joon-tugev); border-radius: var(--r-nupp);
background: var(--pind-2); color: var(--tekst-2);
}
.sidebar-user { padding: 14px 20px 0; margin-top: 12px; border-top: 1px solid var(--joon); font-size: 13px; color: var(--tekst-3); overflow: hidden; white-space: nowrap; }
.sidebar-user .roll-badge { margin: 6px 0 10px; display: inline-block; }
.sidebar-logout { display: block; color: var(--aktsent); margin-top: 6px; font-size: 13px; }
.sidebar-logout:hover { color: var(--aktsent-tume); }
/* Menyy on tavalises voos (sticky), seega sisu ei vaja enam margin-left'i. */
.main { flex: 1; min-width: 0; margin-left: 0; }
/* Sisu algab alati samast vasakust servast (ka kitsamad vormilehed) */
.container {
/* Uks laius koigile lehtedele (Egoni tellimus 25.09): 1500px sisu + 2 x 28px
polster. Varem oli see ainult Eelarve lehel ja teised olid kitsamad -
lehte vahetades huppas kaartide serv. */
max-width: 1556px;
margin: 0;
padding: 24px 28px 64px;
}
.container > .tookask-sisu,
.container > .leht { margin-left: 0 !important; margin-right: auto !important; }
/* ------------------------------------------------------------------
KIRI
------------------------------------------------------------------ */
h1 {
font-family: var(--font-pealkiri);
font-size: 22px;
font-weight: 600;
line-height: 1.25;
letter-spacing: -.01em;
margin: 0 0 16px;
color: var(--navy);
text-transform: none;
}
h2 { /* sektsiooni silt kastide kohal */
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--tekst-3);
margin: var(--vahe-2) 0 10px;
}
h3 { /* kasti silt */
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--tekst-3);
margin: 0 0 10px;
}
.muted { color: var(--tekst-3); font-size: 13px; }
.right { text-align: right; }
.mt-0 { margin-top: 0; }
.breadcrumb { font-size: 12px; color: var(--tekst-3); margin-bottom: 6px; }
.breadcrumb a { color: var(--tekst-2); }
/* ------------------------------------------------------------------
KAST ja RUUDUSTIK
------------------------------------------------------------------ */
.card {
background: var(--pind);
border: 1px solid var(--joon);
border-radius: var(--r-kast);
box-shadow: var(--vari);
padding: var(--kast-pad);
margin-bottom: var(--vahe);
min-width: 0;
}
.card > :last-child { margin-bottom: 0; }
.grid { display: grid; gap: var(--vahe); margin-bottom: var(--vahe); }
.grid > .card { margin-bottom: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 800px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
/* Lehe päis: pealkiri vasakul, nupud paremal */
.lehe-pais { display: flex; align-items: center; justify-content: flex-start; gap: var(--vahe); flex-wrap: wrap; margin-bottom: 16px; }
.lehe-pais h1 { margin: 0; }
.lehe-pais > :first-child { margin-right: auto; } /* kõik nupud koos paremale */
.lehe-pais .lehe-pais-tekst { min-width: 0; }
.lehe-pais .lehe-pais-tekst p { margin: 4px 0 0; }
/* ------------------------------------------------------------------
NUPUD — üks kõrgus, üks nurk, tavakiri (mitte SUURTÄHED)
.btn toonis põhinupp (sinine)
.btn-esmane täidetud — lehe/kasti peamine tegevus (max 1 kastis)
.btn-hall teisene
.btn-roheline lõpetamine/kinnitamine
.btn-punane kustutamine
.btn-small väike (tabeliread, kitsad kastid)
------------------------------------------------------------------ */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
height: var(--h-nupp);
padding: 0 16px;
line-height: 1;
background: var(--aktsent-hele);
color: var(--aktsent);
border: 1px solid transparent;
border-radius: var(--r-nupp);
font-size: 13px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
cursor: pointer;
text-decoration: none;
transition: background .12s, color .12s;
}
.btn:hover { background: var(--aktsent-hele-2); color: var(--aktsent-tume); text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: var(--fookus); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-esmane { background: var(--aktsent); color: #fff; }
.btn-esmane:hover { background: var(--aktsent-tume); color: #fff; }
.btn-hall { background: var(--hall-t); color: var(--tekst-2); }
.btn-hall:hover { background: #E1E5EA; color: var(--tekst); }
.btn-punane { background: var(--punane-t); color: var(--punane); }
.btn-punane:hover { background: #F7D5D0; color: #963A30; }
.btn-roheline { background: var(--roheline-t); color: var(--roheline); }
.btn-roheline:hover { background: #CDE8D8; color: #246746; }
.btn-small { height: var(--h-nupp-v); padding: 0 12px; font-size: 12px; }
.btn-lisa { flex-shrink: 0; }
.btn-lisa svg, .btn svg { flex-shrink: 0; }
.icon-btn {
background: transparent; border: none; padding: 5px; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--r-nupp); vertical-align: middle; color: var(--tekst-4);
}
.icon-btn:hover { background: var(--hall-t); color: var(--tekst); }
.icon-btn.icon-muuda { color: var(--tekst-4); }
.icon-btn.icon-kustuta { color: var(--tekst-4); }
.icon-btn.icon-kustuta:hover { color: var(--punane); background: var(--punane-t); }
.rea-toimingud { display: inline-flex; align-items: center; gap: 2px; }
.hover-rida:hover .rea-toimingud .icon-btn { color: var(--tekst-2); }
.toimingu-veerg { width: 32px; text-align: center; white-space: nowrap; }
/* Rea-ikoonid: nähtavad, kuid vaiksed; kustutamine punaseks alles hiire all */
[class$="-toimingud"] { opacity: 1 !important; }
[class$="-toimingud"] .icon-btn { color: var(--tekst-4); }
tr:hover [class$="-toimingud"] .icon-btn { color: var(--tekst-2); }
[class$="-toimingud"] button.icon-btn:hover,
[class$="-toimingud"] .icon-kustuta:hover { color: var(--punane) !important; background: var(--punane-t); }
.manus-kustuta-vorm { opacity: .6 !important; }
.manus-rida:hover .manus-kustuta-vorm { opacity: 1 !important; }
/* ------------------------------------------------------------------
STAATUSED JA MÄRGID
------------------------------------------------------------------ */
.badge {
display: inline-flex; align-items: center; justify-content: center;
height: 22px; padding: 0 10px; min-width: 88px;
border-radius: 999px;
font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}
.staatus-punane { background: var(--punane-t); color: var(--punane); }
.staatus-kollane { background: var(--kollane-t); color: var(--kollane); }
.staatus-oranz { background: var(--oranz-t); color: var(--oranz); }
.staatus-roheline{ background: var(--roheline-t);color: var(--roheline); }
.staatus-sinine { background: var(--sinine-t); color: var(--sinine-s); }
.staatus-hall { background: var(--hall-t); color: var(--hall-s); }
.staatus-lilla { background: var(--lilla-t); color: var(--lilla); }
.badge-intsident { background: var(--lilla-t); color: var(--lilla); }
.badge-vastuvoetud { background: var(--roheline-t); color: var(--roheline); }
.badge-aastahooldus { background: var(--sinine-t); color: var(--sinine-s); }
/* Ootel: plaanitud aeg on kaes, aga keegi ei ole tood toosse votnud (Egon 29.10) */
.badge-ootel { background: var(--oranz-t); color: var(--oranz); }
/* „UUS“ — aktiveerimata koopia. Kaob hetkel, kui kava aktiveeritakse. */
.uus-silt {
display: inline-flex; align-items: center; height: 16px; padding: 0 6px;
margin-left: 6px; vertical-align: middle;
border-radius: 999px; background: var(--sinine-t); color: var(--sinine-s);
font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
line-height: 1; white-space: nowrap;
}
.roll-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; background: var(--hall-t); color: var(--tekst-2); }
.marker {
display: inline-flex; align-items: center; justify-content: center;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 8px; font-size: 9px; font-weight: 700; line-height: 1; letter-spacing: .02em;
flex-shrink: 0; cursor: help; vertical-align: middle; position: relative; top: -1px;
}
.marker-intsident { background: var(--lilla-t); color: var(--lilla); }
.marker-vastuvoetud { background: var(--roheline-t); color: var(--roheline); }
.marker-kinnitamisel { background: var(--hall-t); color: var(--hall-s); }
.marker-lahtine { background: var(--punane-t); color: var(--punane); }
.marker-aastahooldus { background: var(--sinine-t); color: var(--sinine-s); }
/* ------------------------------------------------------------------
VORMID — kõik väljad 36px, sama ääris ja fookus
------------------------------------------------------------------ */
.form-row { margin-bottom: var(--vahe); min-width: 0; }
.form-row label, .silt {
display: block; margin-bottom: 5px;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--tekst-3);
}
.form-row input[type=text], .form-row input[type=email], .form-row input[type=password],
.form-row input[type=date], .form-row input[type=number], .form-row input[type=tel],
.form-row input[type=url], .form-row input[type=search], .form-row select, .form-row textarea,
.modal-sisu input[type=text], .modal-sisu input[type=number], .modal-sisu input[type=date], .modal-sisu select,
.card input[type=text]:not(.pealkirja-otsing), .card input[type=email], .card input[type=date], .card input[type=number], .card select:not(.pealkirja-otsing), .card textarea {
width: 100%;
height: var(--h-nupp);
padding: 0 10px;
border: 1px solid var(--joon-tugev);
border-radius: var(--r-nupp);
background: var(--pind);
color: var(--tekst);
font-size: 14px;
font-family: inherit;
transition: border-color .12s, box-shadow .12s;
}
.form-row textarea, .card textarea { height: auto; min-height: 84px; padding: 8px 10px; line-height: 1.45; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
.card input:not(.pealkirja-otsing):focus, .card select:not(.pealkirja-otsing):focus, .card textarea:focus, .modal-sisu input:focus, .modal-sisu select:focus {
outline: none; border-color: var(--aktsent); box-shadow: var(--fookus);
}
input[readonly], input:disabled, select:disabled, textarea[readonly] { background: var(--pind-2) !important; color: var(--tekst-2); }
.form-row .help { font-size: 12px; color: var(--tekst-3); margin-top: 4px; }
input[type=checkbox], input[type=radio] { accent-color: var(--aktsent); width: 16px; height: 16px; }
/* Failivalik brauseri enda nupu asemel meie nupu stiilis */
input[type=file] { font-size: 13px; color: var(--tekst-3); }
input[type=file]::file-selector-button {
height: var(--h-nupp-v); padding: 0 12px; margin-right: 10px;
border: none; border-radius: var(--r-nupp);
background: var(--hall-t); color: var(--tekst-2);
font: 600 12px var(--font); cursor: pointer;
}
input[type=file]::file-selector-button:hover { background: #E1E5EA; }
form.inline { display: inline; }
/* ------------------------------------------------------------------
TEATED
------------------------------------------------------------------ */
.flash { padding: 10px 14px; border-radius: var(--r-nupp); margin-bottom: 16px; font-size: 14px; }
.flash-ok { background: var(--roheline-t); color: var(--roheline); }
.flash-viga { background: var(--punane-t); color: var(--punane); }
.flash-teated {
position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
z-index: 1100; display: flex; flex-direction: column; gap: 8px; align-items: center;
width: max-content; max-width: calc(100vw - 40px); pointer-events: none;
}
.flash-teated .flash {
margin: 0; padding: 12px 20px; border-radius: 8px; font-weight: 500;
box-shadow: var(--vari-ule); border: 1px solid rgba(0,0,0,.05);
pointer-events: auto; cursor: pointer;
animation: flash-sisse .2s ease-out; transition: opacity .35s, transform .35s;
}
.flash-teated .flash.peidus { opacity: 0; transform: translateY(-8px); }
@keyframes flash-sisse { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@media print { .flash-teated { display: none; } }
/* ------------------------------------------------------------------
TABELID
Tabel elab oma kastis: kui ei mahu, kerib kast (mitte ei lähe üle
ääre). Päis jääb kastis kerides nähtavale.
------------------------------------------------------------------ */
table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--joon); vertical-align: middle; }
th {
background: var(--pind-2);
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--tekst-3); white-space: nowrap;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: #F7F9FC; }
.card:has(> table), .card:has(> form > table), .card:has(> .tabel-keri) {
padding: 0;
/* Kerib leht, mitte kast — nii ei ole kunagi kahte kerimisriba korraga (23.09) */
overflow-x: auto;
overflow-y: visible;
}
.card:has(> table) > :not(table):not(form), .card:has(> form > table) > :not(form) { margin-left: var(--kast-pad); margin-right: var(--kast-pad); }
.card:has(> table) > :not(table):not(form):first-child { margin-top: var(--kast-pad); }
.card:has(> table) > :not(table):not(form):last-child { margin-bottom: var(--kast-pad); }
.card:has(> table) th:first-child, .card:has(> table) td:first-child,
.card:has(> form > table) th:first-child, .card:has(> form > table) td:first-child { padding-left: var(--kast-pad); }
.card:has(> table) th:last-child, .card:has(> table) td:last-child,
.card:has(> form > table) th:last-child, .card:has(> form > table) td:last-child { padding-right: var(--kast-pad); }
table tr:first-child th {
position: sticky !important; top: 0; z-index: 30;
background: var(--pind-2);
box-shadow: inset 0 -1px 0 var(--joon);
}
.eelarve-tabel tr:first-child th.kuu-veerg, .hoolduskava-tabel tr:first-child th.kuu-veerg { background: #F2F5F9; }
.andmetabel { width: 100%; min-width: 0; table-layout: auto; }
/* .eelarve-tabel / .hoolduskava-tabel laius: vt assets/eelarve-tabel.css */
table.andmetabel { display: table; }
.andmetabel th { position: relative; }
.andmetabel th, .andmetabel td { overflow: hidden; text-overflow: ellipsis; }
.andmetabel td { white-space: normal; word-break: normal; overflow-wrap: normal; }
.andmetabel .raha-veerg, .andmetabel .kaetud-veerg, .raha-veerg { text-align: right; white-space: nowrap; }
.hoolduskavad-tabel { table-layout: auto; }
.hoolduskavad-tabel th { position: relative; }
.hoolduskavad-tabel th, .hoolduskavad-tabel td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eelarve-tabel .kuu-veerg, .hoolduskava-tabel .kuu-veerg { font-size: 12px; }
.kokku-rida { background: var(--pind-2); font-weight: 600; }
.kokku-rida td { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--joon-tugev); }
/* Summad: link ilmub alles hiire all */
.eelarve-tabel td a, .hoolduskava-tabel td a { color: inherit; }
.eelarve-tabel td a:hover, .hoolduskava-tabel td a:hover { color: var(--aktsent); }
/* Tabelipäise otsing ja sorteerimine (assets/tabelivaade.js) */
.pais-sisu { display: flex; align-items: center; gap: 4px; }
.pais-nimi { white-space: nowrap; }
.otsingu-kast { position: relative; display: inline-block; width: 100%; }
.pealkirja-otsing {
width: 100%; margin-left: -6px; padding: 3px 20px 3px 6px;
font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
color: var(--tekst-3); border: none; border-bottom: 1px solid transparent; border-radius: 0; background: transparent;
}
.pealkirja-otsing:hover { border-bottom-color: var(--joon-tugev); }
.pealkirja-otsing::placeholder { color: var(--tekst-3); opacity: 1; text-transform: uppercase; }
.pealkirja-otsing:focus { outline: none; border-bottom-color: var(--aktsent); color: var(--tekst); }
select.pealkirja-otsing { padding: 3px 4px; min-width: 90px; cursor: pointer; }
.otsingu-ikoon { position: absolute; right: 7px; top: 50%; width: 8px; height: 8px; border: 1.5px solid var(--tekst-4); border-radius: 50%; transform: translateY(-65%); pointer-events: none; }
.otsingu-ikoon::after { content: ''; position: absolute; width: 1.5px; height: 5px; background: var(--tekst-4); right: -2.5px; bottom: -4px; transform: rotate(45deg); }
.sordi-ikoon { cursor: pointer; color: var(--tekst-4); flex-shrink: 0; user-select: none; font-size: 12px; }
.sordi-ikoon.aktiivne { color: var(--aktsent); }
@media print { .pealkirja-otsing, .sordi-ikoon, .laiuse-kaepide { display: none !important; } }
/* Kasutaja tabelivaade */
.vaate-nupp { display: inline-flex; align-items: center; padding: 4px; border: none; background: transparent; color: var(--tekst-4); border-radius: 4px; cursor: pointer; vertical-align: middle; }
.vaate-nupp:hover { color: var(--aktsent); background: var(--aktsent-hele); }
@media print { .vaate-nupp { display: none; } }
.veeru-rida { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 6px; }
.veeru-rida:hover { background: var(--taust); }
.veeru-rida.lohistan { opacity: .45; }
.veeru-rida.sihtmark { box-shadow: inset 0 2px 0 var(--aktsent); }
.veeru-rida input[type="checkbox"] { margin: 0; cursor: pointer; }
.veeru-pide { color: var(--tekst-4); cursor: grab; user-select: none; letter-spacing: -2px; }
.veeru-nimi { font-size: 13px; color: var(--tekst-2); }
.laiuse-kaepide { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; user-select: none; z-index: 2; }
.laiuse-kaepide:hover { background: linear-gradient(to right, transparent 2px, var(--aktsent-hele-2) 2px, var(--aktsent-hele-2) 4px, transparent 4px); }
/* ------------------------------------------------------------------
SAKID, AVATAV PLOKK, MODAALAKEN
------------------------------------------------------------------ */
.tab-nav { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--joon); }
.tab-nav a { padding: 9px 14px; font-size: 14px; font-weight: 500; color: var(--tekst-2); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-nav a:hover { color: var(--tekst); text-decoration: none; }
.tab-nav a.active { color: var(--navy); border-bottom-color: var(--aktsent); font-weight: 600; }
details.lisa-uus { margin: var(--vahe-2) 0 var(--vahe); }
details.lisa-uus > summary { cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 8px; color: var(--tekst); }
details.lisa-uus > summary::-webkit-details-marker { display: none; }
details.lisa-uus > summary::before { content: "▸"; font-size: 12px; color: var(--tekst-3); display: inline-block; transition: transform .15s; }
details.lisa-uus[open] > summary::before { transform: rotate(90deg); }
details.lisa-uus > summary:hover { color: var(--aktsent); }
details.lisa-uus .card { margin-top: 12px; }
.modal-varjund { position: fixed; inset: 0; background: rgba(16, 24, 40, .45); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-varjund[hidden] { display: none !important; }
.modal-sisu { background: var(--pind); border-radius: 12px; padding: 24px; max-width: 520px; width: 100%; box-shadow: var(--vari-ule); }
.modaal { overflow-y: auto; }
.modaal .modal-sisu { max-height: calc(100vh - 40px); overflow-y: auto; padding: 0; text-align: left; }
.modaal .modal-sisu.modal-lai { max-width: 820px; }
.modaal-pais { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px 14px; background: var(--pind); border-bottom: 1px solid var(--joon); border-radius: 12px 12px 0 0; z-index: 1; }
.modaal-pais h2 { margin: 0; font-size: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--tekst); }
.modaal-keha { padding: 20px 24px 24px; }
.modaal-keha > .form-row:last-of-type { margin-bottom: 0; }
.modaal-sulge { border: none; background: transparent; color: var(--tekst-4); font-size: 22px; line-height: 1; padding: 2px 6px; border-radius: 6px; cursor: pointer; }
/* Kerimisriba ei tohi akna umardatud nurki kinni katta (muidu on vasakud nurgad kumerad, paremad kandilised) */
.modaal .modal-sisu { scrollbar-width: thin; scrollbar-color: var(--joon-tugev) transparent; }
.modaal .modal-sisu::-webkit-scrollbar { width: 10px; }
.modaal .modal-sisu::-webkit-scrollbar-track { background: transparent; }
.modaal .modal-sisu::-webkit-scrollbar-thumb { background: var(--joon-tugev); border-radius: 8px;
border: 3px solid transparent; background-clip: padding-box; }
.modaal .modal-sisu::-webkit-scrollbar-thumb:hover { background: var(--tekst-4); background-clip: padding-box; border: 3px solid transparent; }
.modaal-sulge:hover { background: var(--taust); color: var(--tekst); }
body.modaal-avatud { overflow: hidden; }
/* ------------------------------------------------------------------
SISSELOGIMINE
------------------------------------------------------------------ */
.login-wrap { max-width: 380px; margin: 90px auto; background: var(--pind); padding: 32px; border-radius: 12px; border: 1px solid var(--joon); box-shadow: var(--vari); }
.login-wrap h1 { text-align: center; }
.login-wrap .btn { width: 100%; }
.login-logo { text-align: center; margin-bottom: 26px; }
.login-tunnuslause { margin-top: 8px; font-family: var(--font-pealkiri); font-weight: 600; font-size: 14px; letter-spacing: .01em; color: #8A94A3; }
.login-tunnuslause b { font-weight: 600; color: var(--navy); }
/* ------------------------------------------------------------------
LEHE ERIPLOKID
------------------------------------------------------------------ */
.kinnituste-plokk { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.kinnituste-plokk > div { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.kinnituste-plokk .silt { width: 150px; flex-shrink: 0; margin: 0; }
.roll-valik { width: 100%; height: 30px; padding: 0 6px; font-size: 12px; color: var(--tekst-2); background: var(--pind-2); border: 1px solid var(--joon-tugev); border-radius: var(--r-nupp); cursor: pointer; }
.roll-valik:hover { border-color: var(--aktsent-hele-2); }
.susteem-valik-rida.valitud-susteem, .hk-valik-rida.valitud-susteem { background: var(--aktsent-hele); color: var(--aktsent-tume); font-weight: 600; }
.hk-valik-rida:hover { background: var(--aktsent-hele); }
.kulurea-vorm { display: flex; flex-direction: column; gap: var(--vahe); }
.kulurea-grupp { display: flex; gap: var(--vahe); flex-wrap: wrap; }
.kulurea-grupp .form-row { flex: 1; min-width: 190px; margin: 0; }
.kulurea-vorm input[type="text"], .kulurea-vorm input[type="number"], .kulurea-vorm select { width: 100%; height: var(--h-nupp); }
.kulurea-vorm #prog_maks { background: var(--pind-2); color: var(--tekst-3); }
.kulurea-nupud { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--joon); padding-top: var(--vahe); }
.kulurea-vorm .periood-rida { display: flex; gap: 8px; align-items: center; }
.kulurea-vorm .periood-rida input[type="number"] { width: 90px; }
/* Menüü kohandamine */
.menuu-vaate-nupp { opacity: .7; }
.menuu-vaate-nupp:hover { opacity: 1; }
.menuu-vaate-aken { position: fixed; left: 8px; bottom: 90px; z-index: 120; background: var(--pind); border: 1px solid var(--joon); border-radius: var(--r-kast); box-shadow: var(--vari-ule); padding: 10px 12px; font-size: 12px; min-width: 200px; color: var(--tekst-2); }
.menuu-vaate-read { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; max-height: 300px; overflow-y: auto; }
.menuu-vaate-rida { display: flex; align-items: center; gap: 6px; cursor: grab; padding: 3px 4px; border-radius: 4px; }
.menuu-vaate-rida:hover { background: var(--aktsent-hele); }
.menuu-vaate-rida input { width: auto; }
.menuu-vaate-taasta { color: var(--aktsent); text-decoration: none; font-size: 11px; }
/* Abipaneel */
.abi-nupp { position: fixed; right: 20px; bottom: 20px; z-index: 140; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--navy); color: #fff; font-size: 17px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(16,24,40,.22); }
.abi-nupp:hover { background: var(--aktsent); }
.abi-paneel { position: fixed; right: 20px; bottom: 70px; z-index: 140; width: 340px; max-height: 70vh; display: flex; flex-direction: column; background: var(--pind); border: 1px solid var(--joon); border-radius: 12px; box-shadow: var(--vari-ule); padding: 12px 14px; }
.abi-paneel[hidden] { display: none; }
.abi-pais { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.abi-paneel input { width: 100%; height: 34px; }
.abi-tulemused { overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 10px; }
.abi-kirje { border-bottom: 1px solid var(--joon); padding-bottom: 8px; }
.abi-kirje:last-child { border-bottom: none; }
.abi-grupp { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-4); }
.abi-pealkiri { font-size: 13px; font-weight: 600; color: var(--tekst); margin: 2px 0; }
.abi-tekst { font-size: 12px; color: var(--tekst-3); line-height: 1.45; }
.abi-tekst a { white-space: nowrap; }
.abi-tyhi { font-size: 12px; color: var(--tekst-4); }
.abi-juhend { font-size: 12px; }
@media print { .abi-nupp, .abi-paneel { display: none !important; } }
/* ------------------------------------------------------------------
UUED ÜHISKOMPONENDID (kasuta PHP-s inline stiilide asemel)
------------------------------------------------------------------ */
/* KPI kast: */
.kpi { padding: 14px var(--kast-pad) 16px; }
.kpi h3 { margin-bottom: 6px; }
.kpi-vaartus { font-family: var(--font-pealkiri); font-size: 24px; font-weight: 600; line-height: 1.15; color: var(--navy); font-variant-numeric: tabular-nums; }
.kpi-vaartus small { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--aktsent); margin-left: 4px; }
.kpi-vaartus.pos { color: var(--roheline); }
.kpi-vaartus.neg { color: var(--punane); }
/* Loendi rida kastis:
Pealkiri23.09.2026
…märgid… Töös */
.loend { display: flex; flex-direction: column; }
.loend-rida { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 7px 0; border-bottom: 1px solid var(--joon); color: var(--tekst); text-decoration: none; }
.loend-rida:last-child { border-bottom: none; }
.loend-rida:hover { text-decoration: none; background: linear-gradient(90deg, transparent, #F7F9FC 12%, #F7F9FC 88%, transparent); }
.loend-tekst { min-width: 0; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.loend-detail { display: block; font-size: 12px; font-weight: 400; color: var(--tekst-3); margin-top: 1px; }
.loend-lopp { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.loend-tyhi { color: var(--tekst-3); font-size: 13px; padding: 6px 0; }
/* Kasti päis: silt vasakul, link/nupp paremal */
.kasti-pais { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.kasti-pais h3 { margin: 0; }
.kasti-pais a { font-size: 12px; font-weight: 600; }
/* ------------------------------------------------------------------
LÄBIV LEHE RUUDUSTIK () — 4 võrdset veergu.
Väljad, kastid ja nupud joonduvad üle lehe; nupp on 4. veerus.
------------------------------------------------------------------ */
/* Lehe laius: KOIK lehed on sama laiad nagu Eelarve, et kaartide servad
jaaksid lehte vahetades samale joonele (Egoni tellimus 25.09). Laiuse annab
.container (max-width 1480px) - siin oma piiri ei ole. */
.leht { max-width: 1500px; --l-joon: var(--joon); --l-silt: var(--tekst-3); --l-tekst: var(--tekst); }
.leht h1 { margin: 0 0 4px; }
.leht > p.muted { margin: 0 0 16px; font-size: 13px; }
.leht h2 { margin: 22px 0 8px; }
.leht .card { padding: var(--kast-pad); margin: 0; }
.leht .flash { margin: 0 0 var(--vahe); }
.ruut { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--vahe); align-items: end; }
.ruut + .ruut { margin-top: var(--vahe); }
.r-2 { grid-column: span 2; }
.r-3 { grid-column: span 3; }
.r-4 { grid-column: 1 / -1; }
.r-viimane { grid-column: 4; }
.leht .form-row { margin: 0; min-width: 0; }
.leht .form-row input:not([type=checkbox]):not([type=radio]), .leht .form-row select { width: 100%; height: var(--h-nupp); }
.leht .ruut .btn { width: 100%; height: var(--h-nupp); margin: 0; }
.leht .detail { font-size: 12px; color: var(--tekst-3); margin-top: 2px; }
.leht .hoiatus { color: var(--punane); }
.leht .ylevaade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 0; }
.leht .ylevaade > div { padding: 14px var(--kast-pad); border-right: 1px solid var(--joon); min-width: 0; }
.leht .ylevaade > div:last-child { border-right: none; }
.leht .ylevaade .vaartus { font-size: 16px; font-weight: 600; color: var(--tekst); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leht .rida { padding: 11px 0; border-bottom: 1px solid var(--joon); font-size: 13px; color: var(--tekst); align-items: center; }
.leht .rida:first-child { padding-top: 0; }
.leht .rida + .rida { margin-top: 0; }
.leht .rida > div { min-width: 0; overflow-wrap: anywhere; }
.leht .rida strong { font-weight: 600; }
.leht .nupud { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.leht .nupud form { margin: 0; }
.leht .nupud .btn { width: 100%; height: 34px; }
.leht .card > .ruut:not(.rida):first-child { margin-top: 0; }
.leht .lisa-vorm { margin-top: var(--vahe); }
.leht .card > p.muted:first-child { margin: 0 0 var(--vahe); }
@media (max-width: 800px) {
.ruut, .leht .ylevaade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-3, .r-viimane { grid-column: 1 / -1; }
.leht .ylevaade > div:nth-child(2) { border-right: none; }
.leht .ylevaade > div:nth-child(-n+2) { border-bottom: 1px solid var(--joon); }
}
/* ==================================================================
TÖÖKÄSU LEHT (põhjaleht) — vt KUJUNDUSJUHEND.md 2.8
================================================================== */
.tookask-sisu { max-width: 1500px; margin: 0 !important; display: flex; flex-direction: column; gap: var(--vahe); }
.tookask-sisu > * { margin-top: 0; margin-bottom: 0; }
.tk-pais { display: flex; flex-direction: column; gap: 6px; }
.tk-pealkiri { display: flex; align-items: center; gap: 12px; }
.tk-pealkiri h1 { margin: 0; }
.tk-pealkiri .badge { height: 24px; padding: 0 12px; min-width: 0; }
.tk-meta { font-size: 13px; color: var(--tekst-3); }
.tk-meta strong { color: var(--tekst); font-weight: 600; }
/* Sammuriba */
.sammud { display: flex; align-items: center; padding: 16px 22px; }
.samm { display: flex; align-items: center; gap: 10px; min-width: 0; }
.samm-punkt { width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; border: 1.5px solid var(--joon-tugev); color: var(--tekst-4); box-sizing: border-box; }
.samm-nimi { font-size: 13px; font-weight: 500; color: var(--tekst-3); }
.samm-aeg { font-size: 12px; color: var(--tekst-3); }
.samm.tehtud .samm-punkt { background: var(--roheline); border-color: var(--roheline); color: #fff; }
.samm.tehtud .samm-nimi { color: var(--tekst); }
.samm.praegu .samm-punkt { background: var(--aktsent); border-color: var(--aktsent); color: #fff; box-shadow: 0 0 0 4px var(--aktsent-hele); }
.samm.praegu .samm-nimi { color: var(--navy); font-weight: 600; }
.samm-joon { flex-grow: 1; height: 2px; min-width: 20px; margin: 0 12px; background: var(--joon); }
.samm-joon.tehtud { background: var(--roheline); }
/* Ülaosa: vasak kast = 1 veerg, parem pool = 3 veergu, alumised servad kohakuti */
.tk-ulemine { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: var(--vahe) !important; align-items: stretch; margin: 0 !important; }
.tk-ulemine > .tk-muuda { grid-column: 1; display: flex; flex-direction: column; margin: 0; }
.tk-muuda .tk-valjad { display: flex; flex-direction: column; gap: var(--vahe); flex-grow: 1; }
.tk-muuda .tk-valjad .form-row { margin: 0; }
.tk-muuda > .btn, .tk-muuda form > .btn { width: 100%; margin-top: var(--kast-pad); }
.tk-parem { grid-column: 2 / -1; display: flex; flex-direction: column; gap: var(--vahe); min-width: 0; }
.tk-parem > .card { margin: 0; }
.tk-parem > .card:last-child { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
/* Järgmine samm (parema veeru viimane kast) */
.jargmine-samm { background: #FBFCFE; border-color: var(--aktsent-hele); }
.jargmine-samm .ruut-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--vahe); align-items: center; }
.jargmine-samm .silt-aktsent { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--aktsent); margin-bottom: 4px; }
.jargmine-samm .pealkiri { font-size: 14px; font-weight: 600; }
.jargmine-samm .ruut-3 > :first-child { grid-column: span 2; min-width: 0; }
.jargmine-samm .btn { width: 100%; }
/* Manused tekstilinkidena */
.manused-loend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px; }
.manused-loend a { display: inline-flex; align-items: center; gap: 6px; }
/* Faili lohistusala (asendab brauseri "Choose files") */
.faili-ala { position: relative; height: var(--h-nupp); display: flex; align-items: center; gap: 8px; padding: 0 10px;
border: 1px dashed var(--joon-tugev); border-radius: var(--r-nupp); font-size: 13px; color: var(--tekst-3); cursor: pointer; }
.faili-ala:hover, .faili-ala.lohistan { border-color: var(--aktsent); background: var(--aktsent-hele); }
.faili-ala input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.faili-ala b { color: var(--aktsent); font-weight: 600; }
/* Täislaiad kastid: silt + kirjeldus vasakul, nupp 4. veerus */
.ruut .kirjeldus { grid-column: span 3; min-width: 0; }
.ruut .kirjeldus h3 { margin-bottom: 4px; }
.ruut .kirjeldus p { margin: 0; font-size: 13px; color: var(--tekst-2); }
.ruut > .btn { width: 100%; }
.ruut + .vihje, .card > .vihje { font-size: 12px; color: var(--tekst-3); margin-top: 8px; }
.ruut.keskel { align-items: center; }
.vorm-sisu { display: contents; }
/* ==================================================================
AJUTISED PARANDUSED lehtede oma ümbristele (lisa v2 paigaldusel):
vanad lehed tsentreerisid sisu (margin: 0 auto) — nüüd algavad
kõik samast vasakust servast. Kaob, kui lehe