/* Modena Helpdesk — design tokens align with modena-prototype.vercel.app */
:root {
  color-scheme: light;
  --modena: #062429; --modena-deep: #062429; --modena-darker: #04191C;
  --modena-accent: #FFE66D; --modena-mint: #DFFAF2; --modena-mint-light: #dff7f2;
  /* Kogu palett tuleb ühest tindist. Tumedas režiimis pöörab --ink-rgb ümber ja
     kõik alfa-põhised tokenid (tekst, jooned, varjud) tulevad automaatselt kaasa. */
  --ink-rgb: 6,36,41;
  /* Lehe põhi on jahe hall (#F2F4F5) ja kaardid valged — sama suhe mis
     DataHubis. Valge kaart valgel lehel vajas iga serva jaoks joont ja leht
     luges lamedana; halli peal tõuseb kaart ise esile ja jooni läheb vähem
     vaja. Tumedas teemas teeb sama töö dark.css. */
  --bg: #F2F4F5; --surface: #F1F2F3; --surface-soft: #F5F5F4;
  /* Kaardi/paneeli pind lehe põhja peal. Heledas on need sama valged, tumedas
     tõuseb kaart põhjast pooltooni võrra esile. */
  --surface-raised: #FFFFFF;
  /* Dokumendiplaat (skannitud PDF/PNG lightboxis) — jääb valgeks mõlemas teemas. */
  --surface-doc: #FFFFFF;
  /* Pööratud pind: valitud kiip, primaarnupp. Heledas tume tint valgel kirjal,
     tumedas hele plaat tumeda kirjaga — alati lehe suhtes maksimaalne kontrast. */
  --invert-bg: #062429; --invert-fg: #FFFFFF;
  /* Kiri värvilisel täidisel (staatusevärvid, toastid) — püsib valge mõlemas teemas. */
  --on-status: #FFFFFF;
  /* Primaartegevus: heledas tume tint + sidrunkollane kiri. Tumedas pöörab ümber —
     kollane täidis tumeda kirjaga, sest tume nupp kaoks tumedal lehel ära. */
  --cta-bg: #062429; --cta-fg: #FFE66D;
  /* Valitud kiip / tooltip / märgis: alati lehe suhtes pööratud pind. */
  --sel-bg: #062429; --sel-fg: #FFFFFF; --sel-fg-rgb: 255,255,255;
  /* Sisuplokid, mis on meelega rasked (koolituse hoiatused, koodiplokk). Need
     jäävad tumedaks ka tumedas teemas, ainult toon nihkub põhjast lahku. */
  --ink-block-bg: #062429; --ink-block-fg: #DFFAF2;
  /* Kiri püsivalt tumedal brändipinnal (login-lehe parem pool). */
  --on-brand: #FFFFFF;
  /* Kiri musta loori peal (pildi lightbox). */
  --on-scrim: #FFFFFF;
  /* Väikesed dekoratiivsed märgid (laadimistäpp), mis vajavad põhja vastu kontrasti. */
  --accent-dot: #062429;
  /* Kiri sidrunkollasel täidisel on tume tint mõlemas teemas — see ei pöördu,
     sest ka tumedas jääb nupp kollaseks. */
  --on-citron: #062429;
  /* Tealine rõhk (rollikiibid) — oma token, sest ta ei kuulu ok/warn/error peresse. */
  --tint-teal-bg: rgba(31,139,152,0.12); --tint-teal-fg: #12626C;
  /* Modena Capital (investorid) — teine teadmusbaas ja teine toode. Violett on
     valitud sellepärast, et ta ei klapi ühegi seisumärgisega: kiip peab ütlema
     „teine bränd", mitte „teine staatus". */
  --tint-violet-bg: rgba(124,92,191,0.14); --tint-violet-fg: #5B3FA0;
  --cta-fg-rgb: 255,230,109;
  --on-brand-rgb: 255,255,255;
  /* Kaardipinna RGB — vaja üleminekute ja poolläbipaistvate ribade jaoks. */
  --surface-raised-rgb: 255,255,255;
  /* Fookusrõngas: heledas brändi tint, tumedas hele mint, et see tumedal põhjal välja paistaks. */
  --focus-ring: #062429;
  --slate-50: #F8FAFB; --slate-100: #F1F2F3;
  --slate-200: rgba(var(--ink-rgb), 0.10); --slate-300: rgba(var(--ink-rgb), 0.18);
  --slate-400: rgba(var(--ink-rgb), 0.40); --slate-500: rgba(var(--ink-rgb), 0.55);
  --slate-600: rgba(var(--ink-rgb), 0.70); --slate-700: rgba(var(--ink-rgb), 0.82); --slate-800: rgba(var(--ink-rgb), 0.92);
  --text-primary: #062429; --text-secondary: rgba(var(--ink-rgb), 0.72);
  /* 0.62 ≈ 4.6:1 ja 0.56 ≈ 4.0:1 valgel — loetav ka väikeses kirjas ja päikese käes. */
  --text-tertiary: rgba(var(--ink-rgb), 0.62); --text-label: rgba(var(--ink-rgb), 0.56);
  --border: rgba(var(--ink-rgb), 0.08); --border-soft: rgba(var(--ink-rgb), 0.06); --border-hover: rgba(var(--ink-rgb), 0.16);
  --success: #10B981; --success-dim: rgba(16,185,129,0.12);
  --warning: #F59E0B; --warning-dim: rgba(251,191,36,0.14);
  --error: #EF4444; --error-dim: rgba(239,68,68,0.10);
  /* Täisvärvi täidised (toast, märgutuli) — kannavad alati --on-status kirja. */
  --success-solid: #0F5E3D; --warning-solid: #B45309;
  --error-solid: #DC2626; --error-solid-strong: #B91C1C;
  /* Toonitud teatekastid: pehme taust + tume kiri + joon. Tumedas teemas muutub
     taust läbipaistvaks värviuduks ja kiri heledaks — kolmik käib alati koos. */
  --tint-ok-bg: #DCFCE7;   --tint-ok-fg: #0F5E3D;   --tint-ok-line: #9FD6BA;
  --tint-warn-bg: #FEF3C7; --tint-warn-fg: #92400E; --tint-warn-line: #E9D67A;
  --tint-error-bg: #FEE2E2;--tint-error-fg: #991B1B;--tint-error-line: #F3D5D2;
  --tint-info-bg: #DBEAFE; --tint-info-fg: #1E40AF; --tint-info-line: #BFD8F5;
  /* Loputus, mitte toon: terve kaardi taust, mis peab jääma vaevumärgatavaks.
     Täistoon (--tint-*-bg) muudaks tumedas kogu kaardi kollaseks. */
  --tint-warn-wash: #FFFDF3;
  /* Nurgad järgivad DataHubi: kaart 16px (rounded-2xl), suured plokid 20/28px.
     Väike 8px jääb nuppudele ja kiipidele, muidu läheks nupp kapsliks. */
  --radius-sm: 8px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 9999px;
  /* Pealkirjade kiri. Manrope on sama display-font mis DataHubis ja modena.ee-l;
     sisu ja numbrid jäävad Interisse, sest seal loeb tabelinumbri joondus. */
  --font-display: 'Manrope', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --shadow-sm: 0 1px 3px rgba(var(--ink-rgb), 0.06), 0 1px 2px rgba(var(--ink-rgb), 0.04);
  --shadow-md: 0 4px 16px rgba(var(--ink-rgb), 0.06), 0 2px 6px rgba(var(--ink-rgb), 0.04);
  --shadow-lg: 0 12px 32px rgba(var(--ink-rgb), 0.10), 0 4px 12px rgba(var(--ink-rgb), 0.06);
  --shadow-focus: 0 0 0 3px rgba(var(--ink-rgb), 0.10);
  --spring-fast: cubic-bezier(0.22, 1, 0.36, 1);
  --spring-moderate: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-fast: 120ms; --dur-moderate: 200ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Inter', 'Inter Display', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss03";
}

a { color: inherit; }
button { font-family: inherit; cursor: pointer; }

/* ---- Külgmenüü (≥721px) ----
   Peamenüü seisab vasakus servas ja voldib kokku 64px ikooniribaks. Olek elab
   <html class="sb-collapsed"> peal — selle seab enne esimest joonistust
   header.php-s olev skript (localStorage 'hd.sidebar'), hiljem toggle-nupp.
   Telefonil (≤720px) menüü kaob ja asemel on footer.php ribamenüü + ☰-leht. */
:root { --sb-w: 244px; --sb-w-mini: 64px; }
/* Ainult lehtedel, mis külgmenüü renderdavad (header.php); login-leht laeb sama
   CSS-i, aga menüüta. */
/* Vana intraneti külgmenüü on eemaldatud; menüü on nüüd Inboxi veerg
   (assets/css/inbox.css → .hd-views). Reeglid on siit maas, et kaks menüü
   paigutust ei võitleks omavahel. */

.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  width: var(--sb-w);
  display: flex; flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--border-soft);
  color: var(--text-primary);
  overflow: visible;
}
html.sb-collapsed .sidebar { width: var(--sb-w-mini); }
/* Sildid kaovad kokkuvolditult; laius jääb, et ikoonid ei nihkuks. */
html.sb-collapsed .sb-label { display: none; }

.sb-top {
  display: flex; align-items: center; gap: 6px;
  height: 60px; padding: 0 10px 0 16px; flex: none;
}
html.sb-collapsed .sb-top {
  flex-direction: column; justify-content: center; gap: 4px;
  height: auto; padding: 12px 0 6px;
}
/* Logo on SVG (sõnamärk ja "m"-märk modena.ee vektorist). Kokkuvoldituna jääb
   ainult märk. */
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text-primary); white-space: nowrap; min-width: 0;
}
.brand .brand-wordmark { height: 19px; width: auto; display: block; }
.brand .brand-mark { display: none; width: 26px; height: auto; }
.brand .sub { color: var(--text-tertiary); font-size: 13px; font-weight: 400; padding-top: 2px; }
.sb-top .brand { flex: 1; min-width: 0; overflow: hidden; }
html.sb-collapsed .sb-top .brand { flex: none; }
html.sb-collapsed .brand .brand-mark { display: block; }

.sb-toggle {
  flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: none; background: transparent; color: var(--text-tertiary);
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  transition: background var(--dur-fast) var(--spring-moderate), color var(--dur-fast) var(--spring-moderate);
}
.sb-toggle svg { width: 18px; height: 18px; }
.sb-toggle:hover { background: var(--surface); color: var(--text-primary); }
.sb-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
html.sb-collapsed .sb-toggle svg { transform: scaleX(-1); }

.btn-new {
  background: var(--modena-accent); color: var(--on-citron);
  border: none; padding: 8px 16px; border-radius: var(--radius-pill);
  font-weight: 600; font-size: 13px;
  transition: filter var(--dur-fast) var(--spring-moderate),
              transform var(--dur-fast) var(--spring-moderate);
}
.btn-new:hover { filter: brightness(0.95); }
.btn-new:active { transform: scale(0.98); }
.sb-new {
  margin: 6px 12px 10px; padding: 10px 14px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap;
}
.sb-plus { font-size: 18px; line-height: 1; font-weight: 700; }
html.sb-collapsed .sb-new {
  width: 40px; height: 40px; padding: 0; margin: 6px auto 10px; border-radius: 50%;
}

.sb-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sb-nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-moderate) var(--spring-moderate),
              color var(--dur-moderate) var(--spring-moderate);
}
.sb-nav a.active { background: var(--surface); color: var(--text-primary); font-weight: 600; }
.sb-nav a:hover:not(.active) { background: rgba(var(--ink-rgb), 0.05); color: var(--text-primary); }
.sb-nav a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
.sb-icon { width: 20px; height: 20px; flex: none; color: var(--text-tertiary); }
.sb-nav a.active .sb-icon, .sb-nav a:hover .sb-icon { color: var(--text-primary); }
/* ---------------------------------------------------------------------------
   Lugemata kirjade märk kõrvalribal

   Number seisab Inboxi rea peal ja on ise nupp: klõps avab lühikese nimekirja,
   kust saab kirja ühe klõpsuga lahti. Ta ei ole lingi sees — pesastatud
   klikitavad elemendid on vigane HTML — vaid tema kõrval samas reas.
   --------------------------------------------------------------------------- */
.sb-row { position: relative; display: block; }
.sb-badge {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  min-width: 20px; height: 20px; padding: 0 6px;
  border: 0; border-radius: var(--radius-pill, 999px);
  background: var(--error, #C0392B); color: #fff;
  font: inherit; font-size: 11.5px; font-weight: 700; line-height: 20px;
  text-align: center; cursor: pointer;
}
.sb-badge:hover { filter: brightness(1.12); }
.sb-badge:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Kokkuvolditud ribal ei ole silti ega ruumi rea servas — märk läheb ikooni
   nurka, nagu telefonirakenduses. */
html.sb-collapsed .sb-badge {
  right: 6px; top: 4px; transform: none;
  min-width: 17px; height: 17px; padding: 0 4px; font-size: 10.5px; line-height: 17px;
}

/* Rippnimekiri. Läheb <body> külge, mitte kõrvalriba sisse: nav on
   kerimiskonteiner ja lõikaks paneeli ära. */
.hd-unread-pop {
  position: fixed; z-index: 200; width: 340px; max-width: calc(100vw - 24px);
  background: var(--surface-raised, #fff); border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.14));
  padding: 6px; max-height: 70vh; overflow-y: auto;
}
.hd-unread-pop h3 {
  margin: 4px 8px 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-tertiary);
}
.hd-unread-pop a.hd-unread-item {
  display: block; padding: 8px 10px; border-radius: var(--radius-sm, 8px);
  color: var(--text-primary); text-decoration: none;
}
.hd-unread-pop a.hd-unread-item:hover { background: rgba(var(--ink-rgb), .05); }
.hd-unread-sub {
  display: flex; gap: 8px; margin-top: 2px;
  font-size: 12px; color: var(--text-tertiary);
}
.hd-unread-sub b { font-weight: 600; color: var(--text-secondary); }
.hd-unread-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.hd-unread-foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 6px; padding: 8px 10px 4px;
}
.hd-unread-foot button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--link, #0E5C66); text-decoration: underline;
}
.hd-unread-empty { padding: 10px; font-size: 13px; color: var(--text-tertiary); }

/* Kokkuvolditult ei tohi nav olla kerimiskonteiner, muidu lõikab ta tooltip'id ära. */
html.sb-collapsed .sb-nav { padding: 0 12px; overflow: visible; }
html.sb-collapsed .sb-nav a { justify-content: center; padding: 10px 0; }

/* Kokkuvolditult näitab hover sildi paremal pool. */
html.sb-collapsed [data-tip] { position: relative; }
html.sb-collapsed [data-tip]:hover::after,
html.sb-collapsed [data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
  background: var(--sel-bg); color: var(--sel-fg);
  padding: 5px 10px; border-radius: 6px; font-size: 12px; font-weight: 500;
  white-space: nowrap; pointer-events: none; z-index: 60;
  box-shadow: var(--shadow-md);
}
html.sb-collapsed .sb-nav a[data-tip]:hover::after { left: calc(100% + 14px); }

/* Sisseloginud kasutaja püsib menüü all servas; dropdown avaneb ülespoole. */
.sb-foot { flex: none; padding: 10px 12px 12px; border-top: 1px solid var(--border-soft); }
.sb-foot .user-menu > button {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-sm); text-align: left;
}
.sb-who { flex: 1; min-width: 0; line-height: 1.25; display: flex !important; flex-direction: column; }
html.sb-collapsed .sb-who { display: none !important; }
.sb-who strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-who span { font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-caret { width: 16px; height: 16px; flex: none; color: var(--text-tertiary); }
.sb-foot .user-menu .dropdown {
  top: auto; bottom: calc(100% + 6px); left: 0; right: 0; min-width: 0; margin-top: 0;
}
html.sb-collapsed .sb-foot { padding: 10px 8px 12px; }
html.sb-collapsed .sb-foot .user-menu > button { justify-content: center; padding: 8px 0; }
html.sb-collapsed .sb-foot .user-menu .dropdown {
  left: calc(100% + 10px); right: auto; bottom: 0; min-width: 240px;
}
html.sb-collapsed .sb-foot .user-menu > button[aria-expanded="true"][data-tip]::after { display: none; }

/* ---- Mobiili/tahvli ülariba ----
   .app-header on nüüd Inboxi enda asi (vt views/layout/header.php) ja tema
   ainus klient on .hd-views sahtel (inbox.css), mis läheb sahtlisse
   ≤1099px juures. Breakpoint SIIN peab klappima SEALSEGA — muidu jääb
   vahemik (nt 721–1099px: tahvel, aken pole maksimeeritud, FullHD 150%
   Windowsi skaleeringuga jne) ilma igasuguse menüüta: külgveerg on juba
   peidus, aga avamisnuppu veel ei näidata. Vt ka .sidebar/.with-sidebar
   allpool — need on vana eemaldatud intraneti jäänuk, keegi enam ei
   kasuta neid klasse, aga õigsuse mõttes on nad 720px peal alles jäetud. */
.app-header {
  display: none;
  position: sticky; top: 0; z-index: 40;
  background: rgba(var(--surface-raised-rgb), 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-soft);
}
.app-header { padding-top: env(safe-area-inset-top, 0px); }
.app-header .inner {
  padding: 0 16px; height: 52px;
  display: flex; align-items: center; gap: 20px;
}
@media (max-width: 1099px) {
  .app-header { display: block; }
}
@media (max-width: 720px) {
  body.with-sidebar, html.sb-collapsed body.with-sidebar { padding-left: 0; }
  .sidebar { display: none; }
}
@media print {
  .sidebar { display: none !important; }
  body.with-sidebar, html.sb-collapsed body.with-sidebar { padding-left: 0; }
}
.spacer { flex: 1; }
.user-menu { position: relative; }
.user-menu > button {
  background: transparent; color: var(--text-primary); border: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 6px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500;
  transition: background var(--dur-fast) var(--spring-moderate);
}
.user-menu > button:hover { background: var(--surface); }
.dropdown {
  position: absolute; right: 0; top: 100%; margin-top: 6px;
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 220px; padding: 6px;
}
.dropdown a, .dropdown button {
  display: block; padding: 8px 12px; font-size: 13px; border-radius: 8px;
  text-decoration: none; color: var(--text-primary);
  background: transparent; border: none; width: 100%; text-align: left;
  transition: background var(--dur-fast) var(--spring-moderate);
}
.dropdown a:hover, .dropdown button:hover { background: var(--surface); }
.dropdown .divider { height: 1px; background: var(--border-soft); margin: 4px 0; }

/* ---- Common ---- */
.container { max-width: 1640px; margin: 0 auto; padding: 28px 20px; }
/* Laual on ruumi: laiem sisepolsterdus ja sisu kasutab kuni 1640px. */
@media (min-width: 1100px) { .container { padding: 32px 36px; } .container-narrow { max-width: 800px; padding: 32px 24px; } }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 28px 20px; }
.container-board { max-width: 100%; }
h1 {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  margin: 0 0 8px; color: var(--text-primary); letter-spacing: -0.02em;
}
h2 {
  font-family: var(--font-display); font-size: 17px; font-weight: 600;
  color: var(--text-primary); letter-spacing: -0.01em;
}
h3 { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; }
.muted { color: var(--text-tertiary); font-size: 13px; }

/* ---- Laadimine ----
   Ootamise ajal ei ole midagi lugeda, seega läheb näidik sinna, kuhu silm
   niikuinii vaatab: sisualale keskele. loader_html() (PHP) ja loadingHtml()
   (app.js) annavad mõlemad selle sama märgistuse. */
.loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; min-height: 46vh; padding: 40px 20px; text-align: center;
}
.loading-text { color: var(--text-tertiary); font-size: 13px; }
/* Näidik ise: mööda ringi jooksev mint → kollane → tume kaar (Modena värvid),
   taga pehme pulss ja keskel väike täpp. Kaar on tehtud conic-gradient'ist,
   mille keskosa on maskiga välja lõigatud — nii jääb joon igal suurusel ühtlane. */
.loading-orb {
  position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%;
  --loading-ring: 5px;
  animation: loading-halo 1.9s var(--spring-moderate) infinite;
}
.loading-orb::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    conic-gradient(from 90deg,
      rgba(var(--ink-rgb), 0) 0deg,
      var(--modena-mint) 130deg,
      var(--modena-accent) 245deg,
      var(--modena) 335deg,
      rgba(var(--ink-rgb), 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--loading-ring)), #000 calc(100% - var(--loading-ring)));
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--loading-ring)), #000 calc(100% - var(--loading-ring)));
  animation: loading-spin .9s linear infinite;
}
.loading-orb::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dot);
  animation: loading-dot 1.9s var(--spring-moderate) infinite;
}
/* Väiksem variant kaardi või nimekirja sees, kus terve ekraani kõrgust ei ole. */
.loading-sm { min-height: 0; padding: 26px 16px; gap: 10px; }
.loading-sm .loading-orb { width: 28px; height: 28px; --loading-ring: 3px; animation: none; }
.loading-sm .loading-orb::after { display: none; }

@keyframes loading-spin { to { transform: rotate(360deg); } }
@keyframes loading-halo {
  0%   { box-shadow: 0 0 0 0 rgba(var(--ink-rgb), .08); }
  70%  { box-shadow: 0 0 0 18px rgba(var(--ink-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--ink-rgb), 0); }
}
@keyframes loading-dot {
  0%, 100% { transform: scale(1);   opacity: .55; }
  50%      { transform: scale(1.5); opacity: .2; }
}
/* Kes animatsiooni ei soovi, näeb terve ringi — see ei liigu ega vilgu. */
@media (prefers-reduced-motion: reduce) {
  .loading-orb, .loading-orb::before, .loading-orb::after { animation: none; }
  .loading-orb::before {
    background: conic-gradient(var(--modena-mint), var(--modena-accent), var(--modena), var(--modena-mint));
  }
}

/* Kaart tõuseb hallilt lehelt pehme varjuga (DataHubi shadow-sm), mitte
   tugevama joonega. Üks reegel katab kõigi moodulite kaardid, nii et nad ei
   triivi eri lehtedel laiali. Tahvli .task-card jääb välja: seal on varjul juba
   oma töö (lohistamine ja hover), kaks varju kihiks üksteise peale. Inboxi
   .hd-card jääb samuti välja: nimest hoolimata on see nimekirja rida, mitte
   kaart, ja rea kohal oleks vari müra. */
.card, .dash-card, .emp-card, .admin-card, .pol-card, .training-card {
  box-shadow: var(--shadow-sm);
}

.card {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  transition: border-color var(--dur-moderate) var(--spring-moderate),
              box-shadow var(--dur-moderate) var(--spring-moderate);
}
.card + .card { margin-top: 12px; }

/* ===========================================================================
   NUPUD — üks kuju, üks loogika, kogu rakenduse peale.

   KUJU EI SÕLTU `.btn` KLASSIST. Varem andis `.btn` kuju ja `.btn-primary`
   ainult värvi, seega `class="btn-primary"` üksinda renderdus brauseri
   toornupuna: kandiline, vale kõrgusega ja vale kirjaga. Neid oli rakenduses
   22 tükki. Nüüd loetleb kujureegel kõik variandid, nii et üksik värviklass
   annab ikka terve nupu ja järgmine arendaja ei saa sama viga korrata.

   Variandid:
     .btn           — neutraalne (ääris + heleda pinna taust)
     .btn-primary   — põhitegevus lehel (üks, mitte viis)
     .btn-mint      — pehme rõhuasetus
     .is-danger     — pöördumatu tegevus; käib KOOS mõne ülaoleva klassiga
     .btn-danger-link — tekstilink, MITTE nupp: ta ei kuulu kujureeglisse, sest
                        `button.btn-danger-link` (0,1,1) kirjutaks tema enda
                        reegli (0,1,0) polsterduse ja ääre üle ning muudaks
                        vasakule joondatud lingi keskjoondatud nupuks

   Kuju on pill (--radius-pill). Kandilisi nurki nupul ei ole kuskil: ikoonid
   on ring (.hd-icon-btn, inbox.css), tekstinupud on pill. Nurgelist raadiust
   kannavad ainult READ (menüü, sahtel, sakk) — need ei ole nupud.
   =========================================================================== */
.btn, .btn-primary, .btn-mint {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border-radius: var(--radius-pill);
  font-size: 13px; font-weight: 500; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.4;
  font-family: inherit;
  /* Ei kahane ega murdu poolelt sõnalt: nupp on üks tervik. */
  white-space: nowrap; flex: none;
  transition: background var(--dur-fast) var(--spring-moderate),
              border-color var(--dur-fast) var(--spring-moderate),
              filter var(--dur-fast) var(--spring-moderate),
              transform var(--dur-fast) var(--spring-moderate);
}
.btn { border-color: var(--border); background: var(--surface-raised); color: var(--text-primary); }
.btn:hover { background: var(--surface); border-color: var(--border-hover); }

.btn-primary {
  background: var(--cta-bg); color: var(--cta-fg);
  border-color: var(--cta-bg); font-weight: 600;
}
/* Taust ja ääris tuleb SIIN uuesti välja öelda. `class="btn btn-primary"` on
   kirjutatud 35 kohas ja nende peal kehtib ka `.btn:hover`, mis vahetaks CTA
   täidise kahvatu neutraalse pinna vastu — nupp muutuks hõljutamisel halliks.
   Sama kehtib mint-variandi kohta. */
.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--cta-bg); border-color: var(--cta-bg); filter: brightness(1.15);
}

.btn-mint { background: var(--modena-mint); color: var(--text-primary); }
.btn-mint:hover, .btn.btn-mint:hover {
  background: var(--modena-mint); border-color: transparent; filter: brightness(0.96);
}

/* Ohtlik tegevus: punane, aga ainult siis, kui see on päriselt pöördumatu.
   Käib iga variandi peale — .btn.is-danger on ääristatud, .btn-primary.is-danger
   on täidetud. */
/* Ääris peab paistma: --error-dim on 0.10 läbipaistvusega täidisevärv ja
   ääre jaoks kaob ta ära. color-mix hoiab tooni teemaga kaasas. */
.btn.is-danger { color: var(--error); border-color: color-mix(in srgb, var(--error) 38%, transparent); }
.btn.is-danger:hover { background: var(--error-dim, rgba(239,68,68,.12)); border-color: var(--error); }
.btn-primary.is-danger { background: var(--error); border-color: var(--error); color: #fff; }
.btn-primary.is-danger:hover { filter: brightness(1.08); }

.btn-danger-link { background: none; color: var(--error); padding: 6px 10px; border: 0; }
.btn-danger-link:hover { text-decoration: underline; background: var(--error-dim); }

/* SUURUSSKAALA. Kolm sammu ja mitte rohkem; kõik kannavad sama kuju ja sama
   tagasisidet. Varem kirjutati suurust `style="padding:3px 8px"` inline üle
   kaheksas kohas, mistõttu nupukõrgusi oli lehel viis (23/27/28/34/36px) ja
   ükski neist ei olnud teadlik valik. */
.btn-sm, .btn-primary.btn-sm, .btn-mint.btn-sm { padding: 5px 12px; font-size: 12.5px; }
.btn-xs, .btn-primary.btn-xs, .btn-mint.btn-xs { padding: 3px 10px; font-size: 11.5px; }

/* Vajutuse tagasiside on kõigil sama — nupp peab käe all natuke järele andma. */
.btn:active, .btn-primary:active, .btn-mint:active { transform: scale(0.97); }
.btn:disabled, .btn-primary:disabled, .btn-mint:disabled {
  opacity: 0.5; cursor: not-allowed; transform: none; filter: none;
}
/* Fookuserõngas on klaviatuuriga liikujale ainus vihje, kus ta on. */
.btn:focus-visible, .btn-primary:focus-visible, .btn-mint:focus-visible,
.btn-danger-link:focus-visible {
  outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-primary, .btn-mint { transition: none; }
  .btn:active, .btn-primary:active, .btn-mint:active { transform: none; }
}

input[type=text], input[type=email], input[type=date], input[type=password],
input[type=search], input[type=number], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-md); font-size: 14px; background: var(--surface-raised);
  font-family: inherit; color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--spring-moderate),
              box-shadow var(--dur-fast) var(--spring-moderate);
}
/* Märkeruut ja raadionupp kannavad brändi tinti, mitte brauseri sinist —
   sinine oli ainus mittebrändivärv näiteks profiili teavituste tabelis. */
input[type=checkbox], input[type=radio] { accent-color: var(--text-primary); }
input:hover, select:hover, textarea:hover { border-color: var(--border-hover); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--text-primary);
  box-shadow: var(--shadow-focus);
}
label { font-size: 12px; font-weight: 500; color: var(--text-secondary); display: block; margin-bottom: 6px; letter-spacing: 0.01em; }
.field + .field { margin-top: 14px; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }

/* ---- Avatar ---- */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--on-status); font-weight: 600;
  flex-shrink: 0; vertical-align: middle;
}
.avatar.xs { width: 20px; height: 20px; font-size: 10px; }
.avatar.sm { width: 28px; height: 28px; font-size: 12px; }
.avatar.md { width: 36px; height: 36px; font-size: 14px; }
.avatar.lg { width: 48px; height: 48px; font-size: 16px; }
img.avatar { object-fit: cover; border: 1px solid var(--slate-200); background: var(--surface-raised); }

/* ---- Login ----
   Sisselogimislehel on oma fail: assets/css/login.css. Ta ei jaga ühtegi
   klassi ülejäänud rakendusega, seega siia ei ole midagi jätta. */

/* Mobile fix: prevent iOS Safari auto-zoom on form fields by ensuring 16px+ */
@media (max-width: 720px) {
  input[type=text], input[type=email], input[type=date], input[type=number],
  input[type=password], input[type=search], select, textarea {
    font-size: 16px;
  }
}

/* ---- Shared bits that outlived the old board ---- */
/* The board's own styles now live entirely in board.css. These three survived
   because other pages use them: /reports + /my-time filter rows, the admin
   notification list toggle, and the monospace ticket code in the task detail,
   dashboard and client views. */
.toolbar {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 20px;
}
.toolbar input[type=text] { width: 240px; max-width: 100%; }

.btn-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-raised); border: 1px solid var(--slate-300);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500; color: var(--text-primary);
  cursor: pointer; line-height: 1.4;
}
.btn-toggle:hover { background: var(--slate-50); border-color: var(--slate-400); }
.btn-toggle.active {
  background: var(--cta-bg); color: var(--cta-fg);
  border-color: var(--cta-bg);
}
.btn-toggle .badge {
  background: var(--modena-accent); color: var(--text-primary);
  border-radius: 999px; padding: 1px 7px;
  font-size: 11px; font-weight: 700;
}
.btn-toggle svg { flex-shrink: 0; }

.task-code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; font-weight: 600;
  color: var(--slate-500); letter-spacing: 0.04em;
  margin-bottom: 4px; display: inline-block;
}


/* ---------- Koolitused ---------- */
.training-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  text-decoration: none; color: inherit; transition: border-color .12s, background .12s;
}
.training-card:hover { border-color: var(--border-hover); background: var(--surface); }
.training-no {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: var(--modena-mint, #E8F5F1); color: var(--text-primary);
}
.training-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.training-title { font-weight: 600; font-size: 15px; }
.training-go { margin-left: auto; color: var(--text-tertiary); font-size: 18px; }
.training-title { text-decoration: none; color: inherit; }
.training-title:hover { text-decoration: underline; }
.training-status-btn { margin-left: auto; flex: none; gap: 8px; white-space: nowrap; }
.training-count {
  font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 99px;
  background: var(--modena-mint, #DFFAF2); color: var(--text-primary);
}

/* ---------- Teams admin ---------- */
.tg-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.tg-dot-on { background: var(--success); }
.tg-dot-off { background: var(--warning); }

.tg-events { display: flex; flex-direction: column; gap: 2px; }
.tg-event {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border-radius: 10px; cursor: pointer;
}
.tg-event:hover { background: var(--surface); }
.tg-event input { margin-top: 3px; }
.tg-event-main { display: flex; gap: 10px; align-items: flex-start; flex: 1; min-width: 0; cursor: pointer; }
.tg-edit { flex: none; align-self: center; white-space: nowrap; }
.tg-custom-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #FFE66C66; color: var(--text-primary); font-size: 11px; font-weight: 500; vertical-align: middle;
}
/* Klassi display-reegel võidaks muidu UA [hidden]-i — JS lülitab neid .hidden atribuudiga. */
.tg-custom-badge[hidden], .modal .btn[hidden] { display: none !important; }
.tg-editor-wrap { border: 1px solid var(--slate-300); border-radius: 6px; background: var(--surface-raised); overflow: hidden; }
.tg-editor-wrap:focus-within { border-color: var(--text-primary); box-shadow: 0 0 0 3px rgba(1,43,50,.08); }
.tg-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px 8px;
  background: var(--slate-50); border-bottom: 1px solid var(--slate-200);
}
.tg-toolbar button[data-cmd] {
  min-width: 30px; height: 28px; padding: 0 8px; border: 1px solid transparent; border-radius: 5px;
  background: transparent; color: var(--text); font-size: 13px; cursor: pointer;
}
.tg-toolbar button[data-cmd]:hover { background: var(--surface-raised); border-color: var(--slate-300); }
.tg-toolbar-sep { width: 1px; height: 20px; background: var(--slate-300); margin: 0 6px; }
.tg-editor {
  min-height: 150px; max-height: 360px; overflow: auto; padding: 12px 14px; outline: none;
  color: var(--text-primary); font-size: 14px; line-height: 1.55;
}
.tg-editor p, .tg-preview p { margin: 0 0 8px; }
.tg-editor p:last-child, .tg-preview p:last-child { margin-bottom: 0; }
.tg-editor ul, .tg-preview ul { margin: 0 0 8px; padding-left: 22px; }
.tg-editor a, .tg-preview a { color: var(--tint-info-fg); }
.tg-chip {
  display: inline-block; padding: 0 6px; border-radius: 4px; background: #FFE66C; color: var(--on-citron);
  font-family: ui-monospace, monospace; font-size: 11px; line-height: 18px; vertical-align: baseline;
  white-space: nowrap; user-select: all; cursor: default;
}
.tg-chip-btn { border: 1px solid var(--tint-warn-line); cursor: pointer; user-select: none; }
.tg-chip-btn:hover { background: #FFDD33; }
.tg-preview {
  border: 1px dashed var(--slate-300); border-radius: 6px; padding: 12px 14px; background: var(--slate-50);
  color: var(--text-primary); font-size: 14px; line-height: 1.55; min-height: 60px; overflow: auto;
}
.tg-event-label { display: block; font-size: 14px; font-weight: 500; }
.tg-event-desc { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; }

.tg-post {
  border-left: 3px solid var(--modena-mint); background: var(--surface);
  border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 8px;
}
.tg-post.is-failed { border-left-color: var(--error); }
.tg-post-head { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; }
.tg-post-event { font-weight: 600; }
.tg-post-time { color: var(--text-tertiary); white-space: nowrap; }
.tg-post-body { font-size: 13px; color: var(--text-secondary); margin-top: 4px; line-height: 1.5; }
.tg-post-err { font-size: 12px; color: var(--error); margin-top: 4px; }

/* ------------------------------------------- Teavituste ulatus (profiil) ---
   Rida = sündmus, paremal kaks lülitit: e-kiri ja rakenduse teade. Lülitid on
   nii laiad kui puudutamiseks vaja, sest seda lehte avatakse telefonist. */
.np-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.np-row {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 14px;
}
.np-row + .np-row { border-top: 1px solid var(--border-soft); }
.np-what { flex: 1 1 auto; min-width: 0; }
.np-label { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); }
.np-desc { display: block; font-size: 12px; color: var(--text-tertiary); margin-top: 2px; line-height: 1.45; }
.np-channels { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.np-channels label {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 5px 10px; font-size: 14px; line-height: 1;
  min-height: 32px;
}
.np-channels label:hover { border-color: var(--text-primary); }
.np-channels label:has(input:checked) { border-color: var(--text-primary); background: var(--slate-50); }
.np-channels label:not(:has(input:checked)) span { opacity: 0.35; filter: grayscale(1); }
.np-off {
  margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--tint-warn-bg); color: var(--tint-warn-fg); font-size: 13px;
}
.np-saved { margin: 10px 0 0; min-height: 16px; font-size: 12px; color: var(--text-tertiary); }
@media (max-width: 520px) {
  .np-row { flex-wrap: wrap; }
  .np-channels { margin-left: auto; }
}