/* GENEREERITUD — ära muuda. Allikas: packages/design/mxr-shell.css
   Muuda seal ja jooksuta: bash packages/design/sync.sh */

/* ═══════════════════════════════════════════════════════════════════════════
   MXR — JAGATUD KUJUNDUSALUS

   ÜKS ALLIKAS. Seda faili muudetakse ainult siin (packages/design/) ja
   levitatakse skriptiga `bash packages/design/sync.sh`. Koopiad äppide sees
   kannavad päisekommentaari „GENEREERITUD" ja neid EI muudeta käsitsi.

   Miks see olemas on: sama shell ja samad kontrollid olid neljas eri koopias,
   mis olid aja jooksul lahku triivinud. Liidesaudit (docs/MXR-UX-AUDIT) loendas
   21 erinevat fondisuurust, 17 nurgaraadiust, 13 murdepunkti ja neli erinevat
   vormivälja kõrgust. Iga parandus tuli teha neli korda ja üks jäi alati tegemata.
   ═══════════════════════════════════════════════════════════════════════════ */

/* JUURSKAALA — üks koht, kust kogu tüpograafia sõltub.
   81.25% × 16px (brauseri vaikeväärtus) = 13px, seega vaikeseadetel ei muutu
   MITTE MIDAGI. Varem oli igas äpis `html { font-size: 13px }`, mis eiras
   kasutaja brauseri fondiseadet täielikult — nägemispuudega inimese jaoks
   tähendas see, et suurem font lihtsalt ei mõjunud. Protsent järgib seda. */
html {
  /* Kasutaja enda tekstisuurus. `--tekst-skaala` on kordaja, mille rakendus
     seab kasutaja valiku järgi (vt lib/tekstiSkaala.ts). Vaikimisi 1.
     Brauseri oma fondiseade kandub EDASI, sest alus on protsent, mitte px —
     need kaks korrutuvad, ei võitle. */
  font-size: calc(81.25% * var(--tekst-skaala, 1));
}

:root {
  /* ── Tüpograafia: 7 astet. Muid suurusi ei kasutata. ──────────────────────
     Auditis oli neid 21, sh 7px, 8.5px, 9.5px, 10.5px, 13.5px, 14.5px.
     Poolik piksel ümardatakse eri kohtades erinevalt → tekst „hüpleb". */
  /* TÜPOGRAAFIA ON rem-IDES, MITTE px-IDES.
     Juurskaala all (html { font-size: 81.25% }) on 1rem = 13px, seega need
     väärtused on vaikeseadetel TÄPSELT samad, mis varem px-ides. Vahe tuleb
     siis, kui kasutaja on brauseris fondi suuremaks keeranud — px eirab seda
     valikut täielikult, rem järgib. */
  --fs-xs:  0.8462rem;  /* 11px — sildid, märgised */
  --fs-sm:  0.9231rem;  /* 12px — abitekst */
  --fs-md:  1rem;      /* 13px — baastekst, tabelid */
  --fs-lg:  1.1538rem;  /* 15px — rõhutatud tekst */
  --fs-xl:  1.3077rem;  /* 17px — h3 */
  --fs-2xl: 1.6154rem;  /* 21px — h2 */
  --fs-3xl: 2rem;      /* 26px — h1 */

  /* ── Vahemikud: 6 astet ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;
  --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* ── Nurgad ── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;

  /* ── KONTROLLID: üks kõrgus kogu süsteemis ────────────────────────────────
     Auditi peamine leid. Ripploend, kuupäevaväli, tekstiväli ja nupp olid
     kõik eri kõrgusega, sest neid defineeriti neljas kohas eri väärtustega. */
  /* Kontroll KASVAB tekstiga kaasa, aga ei kahane kunagi alla ergonoomilise
     miinimumi: 40px on puutesihtmärgi alampiir ja 16px on piir, millest
     allpool iOS Safari sisendile klõpsates lehe suumib. `max()` hoiab mõlemat. */
  --control-fs: max(16px, 1.2308rem);
  --control-h:  max(40px, calc(var(--control-fs) * 2.5));
  --control-px: 12px;

  /* ── Paigutus ── */
  --content-max: 1440px;

  /* ── Kihid. Auditis olid z-indeksid 2, 20, 21, 25, 30, 60, 200 laiali. ── */
  --z-nav: 100; --z-sticky: 200; --z-overlay: 900; --z-modal: 1000;
}

/* ═══ KONTROLLID ═══════════════════════════════════════════════════════════
   `appearance: none` on siin KÕIGE tähtsam rida. Ilma selleta eirab Safari
   (ja Firefox) ripploendil paddingut ja renderdab natiivse ~28px kasti, samal
   ajal kui kõrvalolev kuupäevaväli võtab CSS-i paddingu ja on ~48px. Sama rida,
   kaks kõrgust — täpselt see, mis ekraanipildil paistis. */

input:not([type='checkbox']):not([type='radio']):not([type='range']),
select,
textarea {
  height: var(--control-h);
  padding: 0 var(--control-px);
  font-family: inherit;
  font-size: var(--control-fs);
  line-height: 1.2;
  border-radius: var(--r-sm);
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  /* ÄÄRISE MÕÕT KUULUB SIIA, VÄRV MITTE.
     `appearance: none` võtab ära natiivse tausta, aga MITTE natiivset äärist.
     Kui äpp ei anna välja äärist ise, jääb brauseri oma: `2px inset` hallikas.
     Mõõdetud: `.field` sees oli väli `1px solid`, aga sama väli paneelis
     (kus `.panel input` määrab ainult `border-color`) oli `2px inset` — kaks
     eri ääristüüpi kõrvuti, sama vormi sees. Ja `/rajad` otsinguväli, mis ei
     ole kummaski, oli täies ulatuses brauseri oma: taust rgb(59,59,59).
     Siin ainult mõõt; värvi annab äpp, sest see sõltub kontekstist
     (tume leht vs hele kaart) ja alus on teadlikult värvivaba. */
  border-width: 1px;
  border-style: solid;
}

textarea {
  height: auto;
  min-height: calc(var(--control-h) * 2);
  padding: 10px var(--control-px);
  line-height: 1.5;
  resize: vertical;
}

/* Ripploendi nool joonistame ise, sest natiivse peitsime ära. */
select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a7d85' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--control-px) center;
  cursor: pointer;
}

/* iOS lisab kuupäevaväljale oma sisepolstri, mis lõhub joonduse. */
input[type='date'],
input[type='time'],
input[type='datetime-local'] { min-height: var(--control-h); }

/* ═══ VORMIVÄLI — üks muster kõikjal ═══════════════════════════════════════ */
.field { display: grid; gap: 6px; min-width: 0; }
.field > span,
.field-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ FILTRIRIBA — fikseeritud veerud, mitte auto-fit ══════════════════════
   `auto-fit` muudab veergude arvu PIDEVALT akna laiusega, nii et väljad ei
   joondu ridade vahel. Fikseeritud veerud muutuvad ainult murdepunktil. */
.filters {
  display: grid;
  /* Oli --sp-3 (12px). Ridade vahel tekkis rohkem tühja kõrgust kui väljadel
     endil — Elini „palju kasutut ruumi, sh kastide vahel kõrguses". */
  gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .filters { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* ═══ SISU LAIUS ══════════════════════════════════════════════════════════
   Ilma ülempiirita venib filtririba 27-tollisel ekraanil 2000px laiaks ja
   sama leht näeb 1280px ja 1920px juures täiesti eri välja. */
.main-inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

/* ═══ KÜLGRIBA: kerimine ja päris kõrgus ═══════════════════════════════════
   `100vh` on mobiilis vale (iOS-i aadressiriba). Ja ilma `overflow`-ita lõikab
   külgriba admini 17 menüükirjet madalal ekraanil lihtsalt ära. */
.shell { min-height: 100dvh; }
.sidebar { height: 100dvh; }
.side-nav { flex: 1; min-height: 0; overflow-y: auto; }

/* Töölaual on mobiili „Rohkem"-nupp ja alt avanev leht peidus; rollijaotise
   ümbris ei tohi külgriba flex-vahesid lõhkuda. */
.nav-more, .nav-leht, .nav-kate { display: none; }
.side-nav-jaotis { display: contents; }

/* ═══ MOBIILIPÄIS — üks lahendus, mitte neli ═══════════════════════════════
   Auditis oli igas äpis oma: flex-wrap (viimane rida venis servadesse),
   CSS-grid, horisontaalne kerimine (ikoonid jäid ekraanist välja), ja koopia.
   13.09.2026 tuli see uuesti välja: kalendris oli juba „4 esmast + Rohkem",
   avaleht ja galerii näitasid Rivo telefonis endiselt 10 nimeta ikooni.
   Nüüd elab riba kood packages/jagatud/SideNav.tsx-is ja stiil SIIN.
   `.sidebar .side-nav` (mitte paljas `.side-nav`): äpi enda töölaua-reegel
   tuleb @import-i JÄREL ja võidaks sama spetsiifilisusega mobiilireegli.

   NELI ESMAST + „ROHKEM" = ÜKS RIDA. Mõõdetud 390 px ekraanil: kogu loend
   murdus 3 reale tavakasutajal ja 4 peatreeneril, ~240 px iga lehe ülaservast.
   Puutesihtmärk oli korras (71 × 59 px) — ära söödud oli RUUM. Viis võrdset
   lahtrit: 390 px juures ~74 px lahter, üle 44 px soovituse. */
@media (max-width: 899px) {
  .shell { flex-direction: column; }
  .sidebar { position: static; width: 100%; height: auto; flex-direction: column; align-items: stretch; }
  .sidebar .side-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 0 var(--sp-2) var(--sp-2);
    overflow: visible;
  }
  /* Mitte-esmased punktid ja rollide jaotised kolivad „Rohkem" lehele. */
  .sidebar .side-nav .nav-muu, .sidebar .side-nav .side-nav-sep, .sidebar .side-nav .side-nav-jaotis { display: none; }
  /* Mobiilis on ikoonid PLUS nimi — pelgalt ikoonid ei ole äratuntavad
     (Trennipäevik/Harjutused vms sarnanevad) ja tabe „ei leitud üles". */
  .sidebar .side-nav a {
    flex-direction: column;
    gap: 3px;
    min-height: 44px;          /* puutesihtmärgi miinimum */
    justify-content: center;
    padding: 6px 2px;
    min-width: 0;
    white-space: nowrap;
  }
  .sidebar .side-nav a span.lbl {
    display: block;
    font-size: var(--fs-xs);   /* oli 9px — praktiliselt loetamatu */
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .sidebar .side-nav a svg { width: 20px; height: 20px; }
  .sidebar .nav-more {
    display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
    min-height: 44px; padding: 6px 2px; min-width: 0; border: 0; background: transparent; cursor: pointer;
    color: var(--side-fg, #c9ccd2); font: inherit; border-radius: var(--control-r, 10px);
  }
  .sidebar .nav-more svg { width: 20px; height: 20px; }
  .sidebar .nav-more .lbl { display: block; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .01em; }
  .sidebar .nav-more.on { color: #0a0e1a; background: var(--accent, #7cc6ba); }

  /* Alt üles libisev leht. `visibility` on `opacity` kõrval olemas selleks, et
     suletud leht ei püüaks puudutusi kinni — läbipaistev, aga klikitav kate
     on halvem kui nähtav viga, sest keegi ei saa aru, miks nupud ei tööta. */
  .nav-kate {
    display: block; position: fixed; inset: 0; z-index: 60;
    background: rgba(0,0,0,.5); opacity: 0; visibility: hidden;
    transition: opacity .18s ease, visibility 0s linear .18s;
  }
  .nav-kate.on { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
  .nav-leht {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 61;
    background: var(--sidebar, #10131f); border-top-left-radius: 16px; border-top-right-radius: 16px;
    box-shadow: 0 -8px 30px rgba(0,0,0,.45);
    /* `visibility` EI OLE siin ilustus. Ainult `translateY(100%)` viib lehe
       silmist ära, aga lingid jäävad tabeldusjärjekorda: kasutaja, kes liigub
       klahviga, kukub suletud menüü sisse ega saa aru, kus ta on.
       `visibility` on DISKREETNE omadus: nulliline kestus mõlemas suunas ja
       viivitus ainult SULGEMISEL — avades kohe nähtav, sulgedes kaob alles
       siis, kui ta on päriselt alla libisenud. */
    transform: translateY(100%); visibility: hidden; pointer-events: none;
    transition: transform .2s ease, visibility 0s linear .2s;
    max-height: 76dvh; overflow-y: auto;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }
  .nav-leht.on { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .2s ease, visibility 0s; }
  .nav-leht-pea {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 8px; font-weight: 800; color: #fff;
  }
  .nav-leht-sulge {
    border: 1px solid rgba(255,255,255,.18); background: transparent; color: var(--side-fg, #c9ccd2);
    font: inherit; font-weight: 700; padding: 6px 14px; border-radius: var(--control-r, 10px); cursor: pointer;
  }
  /* Sama ruudustik mis ribal — nii ei hüppa ikoonid lehte avades teise mõõtu. */
  .nav-leht-sisu { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 0 6px 6px; }
  .nav-leht-jaotis { display: contents; }
  .nav-leht-sisu a { display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
    padding: 10px 2px; min-width: 0; white-space: nowrap; border-radius: var(--control-r, 10px); color: var(--side-fg, #c9ccd2); text-decoration: none; }
  .nav-leht-sisu a svg { width: 20px; height: 20px; }
  .nav-leht-sisu a .lbl { display: block; font-size: var(--fs-xs); font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav-leht-sisu a.active { color: #0a0e1a; background: var(--accent, #7cc6ba); }
  /* Vahepealkiri võtab terve rea — muidu satuks „Haldus" ikooni lahtrisse. */
  .nav-leht-sep {
    grid-column: 1 / -1; padding: 12px 8px 4px; font-size: var(--fs-xs); font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em; color: var(--muted, #b7bfcc);
  }
  /* Lehe SEES on kõik nähtaval, ka need, mis ribal on peidus. */
  .nav-leht-sisu .nav-muu { display: flex; }

  /* Ruumi rollivahetajale reserveeritakse AINULT siis, kui ta on olemas.
     Varem oli see tingimusteta ja tavakasutaja nägi 104px tühja tumedat ala. */
  .shell:has(.viewas) { position: relative; padding-bottom: 104px; }
  .shell:has(.viewas) .side-user-wrap { position: absolute; inset: auto 0 0 0; background: var(--sidebar); }
}

/* ═══ LIGIPÄÄSETAVUS ══════════════════════════════════════════════════════ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent, #7cc6ba);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}