/* 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;
  --bg: #FFFFFF; --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;
  --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;
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px;
  --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. */
body.with-sidebar { padding-left: var(--sb-w); }
html.sb-collapsed body.with-sidebar { padding-left: var(--sb-w-mini); }
@media (prefers-reduced-motion: no-preference) {
  body.with-sidebar { transition: padding-left var(--dur-moderate) var(--spring-moderate); }
  .sidebar { transition: width var(--dur-moderate) var(--spring-moderate); }
}

.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); }
/* 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; }

/* ---- Telefoni ülariba (≤720px) ---- */
.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: 720px) {
  body.with-sidebar, html.sb-collapsed body.with-sidebar { padding-left: 0; }
  .sidebar { display: none; }
  .app-header { display: block; }
}
@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-size: 24px; font-weight: 700; margin: 0 0 8px; color: var(--text-primary); letter-spacing: -0.01em; }
h2 { font-size: 17px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }
h3 { font-weight: 600; color: var(--text-primary); }
.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));
  }
}

.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; }

.btn {
  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 var(--border);
  background: var(--surface-raised); color: var(--text-primary); text-decoration: none;
  transition: background var(--dur-fast) var(--spring-moderate),
              border-color var(--dur-fast) var(--spring-moderate),
              transform var(--dur-fast) var(--spring-moderate);
  cursor: pointer; line-height: 1.4;
}
.btn:hover { background: var(--surface); border-color: var(--border-hover); }
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: var(--cta-bg); color: var(--cta-fg);
  border-color: var(--cta-bg); font-weight: 600;
}
.btn-primary:hover { background: var(--cta-bg); filter: brightness(1.15); border-color: var(--cta-bg); }
.btn-mint { background: var(--modena-mint); color: var(--text-primary); border-color: transparent; }
.btn-mint:hover { background: var(--modena-mint); filter: brightness(0.96); border-color: transparent; }
.btn-danger-link { background: none; color: var(--error); padding: 6px 10px; border: 0; }
.btn-danger-link:hover { text-decoration: underline; background: var(--error-dim); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 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);
}
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; }
}