/* ChatMe – põhistiil. Värvid prototüübist (armastusesaal-romantiline-v6-irc-haldus.html). */
:root {
  --taust: #10071b;
  --paneel: #190c29;
  --aar: #6a285f;
  --roosa: #fa4fa8;
  --tuhm: #b8a2c5;
  --tekst: #f8e9f9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--tekst);
  background: radial-gradient(ellipse at 60% 10%, #291034 0, #11091e 48%, #0c0616 100%);
  background-color: var(--taust);
}

a { color: var(--roosa); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--roosa); outline-offset: 2px; }

/* Ajutine avaleht */
.tervitus {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 16px;
}
.sudamemark {
  font-size: 72px;
  color: var(--roosa);
  filter: drop-shadow(0 0 8px #fa3fa2);
}
.tervitus h1 { margin: 6px 0; font-size: 34px; letter-spacing: -.4px; }
.loosung { margin: 0 0 18px; color: #e3d1e9; }
.vaike { margin: 4px 0; font-size: 14px; color: var(--tuhm); }

/* ---------------------------------------------------------------
   Vormid ja kaardid (registreerimine, sisselogimine, konto)
   Stiil prototüübi modaalidest ja profiililehest (.fp-card, .fp-action.hot)
   --------------------------------------------------------------- */
.leht-kesk {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.kaart {
  width: 100%;
  max-width: 440px;
  background: #1c0d2b;
  border: 1px solid #6b2b65;
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 12px 40px #0008, inset 0 0 24px #9b2b8722;
}
.kaart-brand { text-align: center; margin-bottom: 18px; }
.kaart-brand .sudamemark { font-size: 46px; }
.kaart-brand h1 { margin: 2px 0 4px; font-size: 24px; }
.kaart-brand p { margin: 0; color: var(--tuhm); font-size: 14px; }
.kaart-brand .kaart-tagasi { margin-top: 8px; font-size: 13px; }

.vorm { display: grid; gap: 14px; }
.vorm label { display: grid; gap: 6px; font-size: 14px; color: #dec4e2; }
.vorm input[type=text],
.vorm input[type=email],
.vorm input[type=password],
.vorm input[type=date],
.vorm select,
.vorm textarea {
  width: 100%;
  font: inherit;
  color: #fff;
  background: #180b24;
  border: 1px solid #79416f;
  border-radius: 10px;
  padding: 11px 12px;
}
.vorm textarea { resize: vertical; min-height: 110px; line-height: 1.45; }
.vorm h2 { margin: 10px 0 0; font-size: 17px; color: #f8e9f9; }
.vorm input:focus,
.vorm select:focus,
.vorm textarea:focus { outline: 2px solid var(--roosa); outline-offset: 1px; border-color: var(--roosa); }
.vorm [aria-invalid=true] { border-color: #ff6b6b; }
.vorm .vihje { font-size: 12px; color: var(--tuhm); }
.vorm .valja-viga { font-size: 13px; color: #ff9b9b; }
.vorm .linnuke { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; }
.vorm .linnuke input { margin-top: 3px; accent-color: var(--roosa); }

.nupp {
  font: inherit;
  cursor: pointer;
  border: 1px solid #7b3470;
  background: #391a46;
  color: #fff;
  border-radius: 11px;
  padding: 12px 17px;
  text-decoration: none;
  text-align: center;
  transition: filter .2s, transform .2s;
}
.nupp:hover { filter: brightness(1.17); transform: translateY(-1px); }
.nupp-pea { background: linear-gradient(#fa6ab7, #cf267d); border-color: #fa8acb; font-weight: 600; }
.nupp:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.teade { border-radius: 10px; padding: 11px 13px; font-size: 14px; margin-bottom: 14px; }
.teade-viga { background: #4a1426; border: 1px solid #a3354f; color: #ffd5dc; }
.teade-ok { background: #173a2a; border: 1px solid #2f7a55; color: #d4f5e3; }
.teade-info { background: #2a1838; border: 1px solid #6b2b65; color: #ecd9f2; }

.kaart-jalus { margin-top: 18px; text-align: center; font-size: 14px; color: var(--tuhm); }

@media (max-width: 480px) {
  .kaart { padding: 22px 16px; border-radius: 14px; }
}

/* Mesipott (robotitele mõeldud väli) – peidetud ka ekraanilugeja eest */
.peidetud { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.nupurida { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 6px 0 14px; }

/* Profiil */
.profiil-andmed { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0 0 14px; font-size: 14px; }
.profiil-andmed dt { color: var(--tuhm); }
.profiil-andmed dd { margin: 0; }
.profiil-bio { white-space: normal; line-height: 1.55; overflow-wrap: anywhere; }

/* Kanalid */
.kaart-lai { max-width: 640px; }
.kanalite-nimekiri { list-style: none; padding: 0; margin: 0 0 14px; }
.kanalite-nimekiri li { border-bottom: 1px solid #3a1f47; padding: 9px 0; }
.kanalite-nimekiri li p { margin: 4px 0 0 30px; }
.kanalite-nimekiri a { display: flex; gap: 8px; align-items: center; text-decoration: none; color: #f8e9f9; }
.kanal-rida { display: flex; gap: 10px; align-items: center; }
.kanal-rida > a:first-child { flex: 1; min-width: 0; }
.kanalite-nimekiri a.kanal-jutt { flex: none; padding: 6px 9px; border: 1px solid #50265d; border-radius: 9px; background: #31183f; }
.kanalite-nimekiri a.kanal-jutt:hover { background: #663061; }
.kanalite-nimekiri a:hover .kanal-nimi { color: var(--roosa); }
.kanal-ikoon { width: 22px; text-align: center; }
.kanal-nimi { font-weight: 600; }
.kanal-liikmeid { margin-left: auto; font-size: 13px; color: var(--tuhm); }
.silt { font-size: 11px; padding: 2px 7px; border-radius: 9px; border: 1px solid #6b2b65; color: #ecd9f2; }
.silt-liige { border-color: #2f7a55; color: #d4f5e3; }
.liikmed { list-style: none; padding: 0; margin: 0 0 14px; columns: 2; font-size: 14px; }
.liikmed li { padding: 3px 0; break-inside: avoid; }
.roll-mark { display: inline-block; width: 14px; color: var(--roosa); font-weight: 700; }

/* Konto leht: kutsete nimekiri */
.kutsed { list-style: none; padding: 0; margin: 0 0 14px; font-size: 14px; color: var(--tuhm); }
.kutsed li { padding: 7px 0; border-bottom: 1px solid #3a1f47; }
.rida-vorm { display: inline; }
.nupp-link { font: inherit; background: none; border: 0; padding: 0; color: var(--roosa); cursor: pointer; text-decoration: underline; }

/* Tekstilehed (tingimused, privaatsus) */
.tekstileht {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  line-height: 1.65;
  color: #e3d1e9;
}
.tekstileht h1 { color: var(--tekst); margin: 8px 0 4px; }
.tekstileht h2 { color: #ff8acc; font-size: 18px; margin: 26px 0 8px; }
.tekstileht ul { padding-left: 20px; }

/* Operaatori kontode vaade */
.kaart-oper { max-width: 760px; }
.oper-otsing { grid-template-columns: 1fr auto; align-items: end; margin: 6px 0 14px; }
.oper-kontod li { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid #3a1d45; }
.oper-kontod .silt { margin-left: 4px; }
.oper-kast { margin: 0 0 14px; padding: 10px 12px; border: 1px solid #6b2b65; border-radius: 10px; }
.oper-kast summary, .oper-kanalid summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.oper-kanalid li { padding: 10px 0; border-bottom: 1px solid #3a1d45; }
.oper-kanalid details[open] > summary { margin-bottom: 8px; }
.oper-kanalid .vorm { margin: 10px 0; padding: 10px 12px; background: #ffffff06; border-radius: 10px; }
.oper-oht { border: 1px solid #a3354f; }
.green { color: #24ef86; }
.silt-oht { border-color: #a3354f; color: #ffd5dc; background: #4a1426; }
.oper-toiming { margin: 8px 0; padding: 10px 12px; background: #ffffff06; border-radius: 10px; }
.toendid li { display: grid; gap: 2px; padding: 8px 0; }
.toend-siht { color: #ff83c5; }

/* Profiilipilt */
.profiilipilt { display: block; width: 160px; height: 160px; margin: 0 auto 10px; border-radius: 50%; object-fit: cover;
  border: 2px solid #f784c0; box-shadow: 0 0 18px #d72a8059; background: #281532; }
.pildi-rida { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; flex-wrap: wrap; }
.pildi-rida .profiilipilt { width: 120px; height: 120px; margin: 0; }
.profiilipilt.tuhi { display: grid; place-items: center; font-size: 48px; color: #fff;
  background: linear-gradient(145deg, #a63c95, #492a82); }
.pildi-vormid { flex: 1; min-width: 220px; }
.pildi-vormid input[type=file] { color: var(--tuhm); }

/* Galerii */
.galerii { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 14px 0; }
.galerii img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid #6b2b65; display: block; }
.galerii a:hover img { border-color: #f784c0; }
.galerii-rida { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #3a1d45; flex-wrap: wrap; }
.galerii-rida img { border-radius: 8px; object-fit: cover; }
.galerii-vorm { flex: 1; min-width: 200px; gap: 8px; }
.galerii-nupud { display: flex; gap: 10px; align-items: center; font-size: 18px; }
.galerii-nupud form { display: inline; }
.kaebuse-pildid { border: 1px solid #4d2451; border-radius: 10px; padding: 8px 12px; display: grid; gap: 6px; }
.kaebuse-pildid legend { font-size: 14px; color: var(--tuhm); padding: 0 4px; }
.kaebuse-pildid .linnuke { display: flex; align-items: center; gap: 8px; }
.kaebuse-pildid img { border-radius: 6px; object-fit: cover; }
.oper-pildid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 14px; }
.oper-pilt img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; border: 1px solid #6b2b65; display: block; }
.oper-pilt.tagasi-lykatud img { opacity: .45; filter: grayscale(.7); }
.oper-pilt .vorm { gap: 6px; margin-top: 6px; }
.toend-pilt { display: block; max-width: 260px; max-height: 260px; border-radius: 10px; border: 1px solid #a3354f; margin-top: 4px; }

/* PWA paigaldusnupp ja juhend (pwa.js) */
.nupp[hidden], [data-paigalda-juhend][hidden] { display: none; }

/* Control Center: seaded */
.seaded-ruhm { margin-bottom: 10px; }
.seaded-ruhm summary { cursor: pointer; font-weight: 650; }
.vorm.seade { border-top: 1px solid #3d1d45; padding-top: 10px; margin-top: 10px; scroll-margin-top: 80px; }
.vorm.seade.esile { border: 1px solid var(--pink, #fa4fa8); border-radius: 10px; padding: 10px; }
.seade-pais { display: flex; flex-direction: column; gap: 2px; }
.seade-pais code { color: #ff9bd0; font-size: 13px; }
.seade-rida { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.seade-rida label { flex: 1 1 180px; }
.seade-rida button { flex: 0 0 auto; }

/* ---------------------------------------------------------------- 📊 Statistika (/oper/statistika)
   Seeriavärvid kontrollitud tumedal kaardil #1c0d2b (heledus, CVD ja kontrast, kõik paarid):
   1 roosa #ec3f9c, 2 sinine #3987e5, 3 merevaik #c98500. Tekst kasutab teksti värve, mitte seeria värvi. */
.kaart-stat {
  max-width: 960px;
  min-width: 0;
  --s1: #ec3f9c;
  --s2: #3987e5;
  --s3: #c98500;
  --vork: #2f1a40;
  --telg: #5a3768;
  --hea: #0ca30c;
  --halb: #e66767;
}
/* Keskendava ruudustiku veerg ei kasva üle ekraani – laiad tabelid keritakse oma kastis */
.leht-kesk:has(> .kaart-stat) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.kaart-stat h2 { font-size: 17px; margin: 0 0 2px; }
.stat-filtrid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 6px 0 16px; }
.stat-filtrid .valikrida { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.stat-nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.stat-nav .stat-periood { flex: 1; text-align: center; }
.stat-periood { font-size: 15px; }
.nupp-keelatud { opacity: .35; pointer-events: none; }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.stat-tile { min-width: 0; }
.stat-tile { padding: 12px 14px; border: 1px solid #ffffff1a; border-radius: 12px; background: #ffffff05; }
.tile-silt { font-size: 13px; color: var(--tuhm); }
.tile-arv { font-size: 30px; font-weight: 600; margin: 2px 0; }
.tile-delta { font-size: 13px; }
.tile-alla { margin-top: 4px; }
.delta-hea { color: var(--hea); }
.delta-halb { color: var(--halb); }
.delta-null { color: var(--tuhm); }
.stat-seis { margin: 10px 0 18px; }

.stat-graafik { min-width: 0; margin: 0 0 18px; padding: 12px 14px; border: 1px solid #ffffff1a; border-radius: 12px; }
.stat-graafik figcaption { margin-bottom: 8px; }
.stat-graafik figcaption p { margin: 0; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; list-style: none; margin: 6px 0 0; padding: 0; font-size: 13px; color: var(--tekst); }
.legend li { display: flex; align-items: center; gap: 6px; }
.vott { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.vott.v1, .stat-graafik path.v1, .joonvoti.v1 { background: var(--s1); fill: var(--s1); }
.vott.v2, .stat-graafik path.v2, .joonvoti.v2 { background: var(--s2); fill: var(--s2); }
.vott.v3, .stat-graafik path.v3, .joonvoti.v3 { background: var(--s3); fill: var(--s3); }

.joonis { position: relative; width: 100%; min-height: 220px; outline-offset: 4px; }
.joonis svg { display: block; width: 100%; height: auto; }
.joonis:focus-visible { outline: 2px solid var(--roosa); }
.joonis .vork { stroke: var(--vork); stroke-width: 1; }
.joonis .telg { stroke: var(--telg); stroke-width: 1; }
.joonis .telje-silt { fill: var(--tuhm); font-size: 11px; font-variant-numeric: tabular-nums; }
.joonis .tabamine { fill: transparent; cursor: crosshair; }
.joonis .tulp.valitud path { filter: brightness(1.25); }
.stat-vihje {
  position: absolute; z-index: 2; pointer-events: none; min-width: 140px; padding: 8px 10px;
  background: #120820; border: 1px solid #ffffff1f; border-radius: 10px; box-shadow: 0 8px 24px #0009; font-size: 13px;
}
.vihje-pealkiri { color: var(--tuhm); margin-bottom: 4px; }
.vihje-rida { display: flex; align-items: center; gap: 8px; }
.vihje-rida strong { font-variant-numeric: tabular-nums; }
.vihje-kokku { border-top: 1px solid #ffffff1a; margin-top: 4px; padding-top: 4px; }
.joonvoti { width: 12px; height: 2px; border-radius: 1px; background: transparent; flex: none; }

.stat-tabel { margin-top: 8px; font-size: 13px; }
.stat-tabel summary { cursor: pointer; color: var(--tuhm); }
.tabeli-kerimine { overflow-x: auto; }
.kaart-stat table { width: 100%; border-collapse: collapse; margin-top: 6px; }
.kaart-stat th, .kaart-stat td { padding: 5px 8px; border-bottom: 1px solid #ffffff12; text-align: left; font-weight: 400; }
.kaart-stat thead th { color: var(--tuhm); font-size: 12px; }
.kaart-stat .nr { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-vordlus tr.vahe th { padding-top: 14px; color: var(--tuhm); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }

.stat-osa { margin: 0 0 18px; }
.stat-ribad { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.stat-ribad li { display: grid; grid-template-columns: minmax(110px, 200px) 1fr; column-gap: 12px; align-items: center; }
.riba-nimi { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.riba-rada { display: flex; align-items: center; gap: 8px; min-width: 0; }
.riba-taide { height: 14px; width: 0; background: var(--s1); border-radius: 0 4px 4px 0; flex: none; max-width: calc(100% - 56px); }
.riba-arv { font-variant-numeric: tabular-nums; white-space: nowrap; }
.riba-lisa { grid-column: 2; }
@media (max-width: 560px) {
  .stat-filtrid { flex-direction: column; align-items: stretch; }
  .stat-ribad li { grid-template-columns: 1fr; }
  .stat-graafik { padding: 10px 8px; }
  .kaart-stat th, .kaart-stat td { padding: 5px 4px; font-size: 13px; }
  .tile-arv { font-size: 26px; }
  .riba-lisa { grid-column: 1; }
}

/* 📊 Praegu (reaalajas) */
.stat-praegu { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #ffffff1a; border-radius: 12px; background: #ffffff04; }
.praegu-pais { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.praegu-pais h2 { display: flex; align-items: center; gap: 8px; }
.elus { width: 9px; height: 9px; border-radius: 50%; background: var(--hea); box-shadow: 0 0 0 3px #0ca30c33; }
@media (prefers-reduced-motion: no-preference) {
  .elus { animation: elus 2.4s ease-in-out infinite; }
  @keyframes elus { 50% { box-shadow: 0 0 0 6px #0ca30c00; } }
}
.praegu-read { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 12px; }
.praegu-read h3 { margin: 0 0 6px; font-size: 14px; color: var(--tuhm); font-weight: 500; }
.praegu-kanalid, .praegu-kontrollid { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.praegu-kanalid li { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.praegu-kanalid strong { font-variant-numeric: tabular-nums; }
.praegu-kontrollid li { display: flex; gap: 8px; align-items: flex-start; }
.kontroll-viga { color: var(--halb); }
.kontroll-tundmatu { color: var(--tuhm); }
.kontroll-ikoon { flex: none; }