/* ═══════════════════════════════════════════════════════════════════════════
 *  ClearLoud — izgled mreže mjeseca, jedan za izlog i za osoblje (`REZ-05`)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Isti razlog kao `kalendar.js`: sklop koji dva zaslona crtaju isto mora biti
 * jedan sklop. Do `REZ-05` je ovo stajalo u `izlog.css`, jer je mreža bila
 * samo gostova.
 *
 * Boje dolaze iz promjenljivih (`--ploha`, `--rub`, `--boja`, `--tekst`,
 * `--slabo`), a **oba** zaslona ih već imaju — svaki sa svojim vrijednostima.
 * Zato ovaj spis ne nosi ni jednu boju: mreža na ekranu osoblja poprima
 * njegovu paletu bez ijedne izmjene, i tamna tema radi na oba jer je već
 * rješena ondje gdje se promjenljive postavljaju.
 *
 *   Sklop koji ne imenuje boje nasljeđuje temu zaslona na koji dođe.
 */
/* ── Kalendar rezervacija (`REZ-04`) ─────────────────────────────────────
   Zatraženo: „biraj datum plus vrijeme". Do ovog kruga je termin bio jedan
   ravan popis od dvadeset i četiri stavke, i to popis **jednog** dana.

   Mreža je `grid` sa **sedam** stupaca i `1fr`, ne `flex-wrap`: kalendar u
   kojem stupci nisu poravnani nije kalendar — ponedjeljak mora stajati pod
   ponedjeljkom u svakom redu. `aspect-ratio: 1` drži ćelije kvadratnima na
   svakoj širini, pa se mreža skalira bez ijedne točke prekida. */
.kalendar { margin: .35rem 0 .75rem; }
.kal-vrh {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .4rem;
}
.kal-mjesec { font-size: .95rem; text-transform: capitalize; }
.kal-strelica {
  /* 44px je najmanja meta za prst — ista brojka kao `.polje input`. */
  min-width: 44px; min-height: 44px;
  background: var(--ploha); color: var(--tekst);
  border: 1px solid var(--rub); border-radius: 8px;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.kal-dani, .kal-mreza {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .15rem;
}
.kal-ime-dana {
  text-align: center; font-size: .7rem; color: var(--slabo);
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: .15rem;
}
.kal-praznina { aspect-ratio: 1; min-height: 44px; }
/* ── Nalaz iz probe: ćelija je bila 39px ────────────────────────────────
   Ostatak projekta drži **44px** kao najmanju metu za prst (`.polje input`,
   `.kal-strelica`), a mreža je na 390px zaslona mjerila **39×39**. Pogrešan
   dodir ovdje ne promašuje gumb nego pomiče izbor na **susjedni dan**, pa je
   to za rezervaciju stvarna greška, ne nespretnost.

   Prva procjena je bila da se do 44 ne dade doći: sedam stupaca je sedam
   stupaca, a manje od sedam nije kalendar. Ali širinu nije jela mreža — jeli su
   je `padding` odsjeka i razmak: odsjek termina u načinu rezervacije **nema
   okvir** (`REZ-03`), pa je vodoravni `padding` odmicao od ruba kojeg nema.
   S njim i razmakom stisnutim na .15rem, ćelija je **44×44** na istom zaslonu.

     Piksel koji ne drži ništa drži metu za prst.

   `min-height: 44px` ostaje uz `aspect-ratio: 1` kao pod: na užem zaslonu od
   390 (320px, stari iPhone SE) kvadrat pada pod 44, a visina ne. */
.kal-dan {
  aspect-ratio: 1; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ploha); color: var(--tekst);
  border: 1px solid var(--rub); border-radius: 8px;
  font-size: .9rem; cursor: pointer; padding: 0;
}
.kal-dan:focus-visible, .kal-sat:focus-visible, .kal-strelica:focus-visible {
  outline: 2px solid var(--boja); outline-offset: 1px;
}
/* Nedostupan dan **ostaje čitljiv**: gost mora vidjeti da 7. postoji i da je
   zatvoren, jer inače broji dane od zadnjeg vidljivog. Zato `opacity` ide na
   .45 a ne niže, i rub blijedi umjesto da nestane — dan bez ruba se čita kao
   praznina u mjesecu, dakle kao greška u crtanju. */
.kal-dan[disabled] {
  opacity: .45; cursor: not-allowed;
  background: transparent; border-color: transparent;
  text-decoration: line-through;
}
.kal-dan.izabran {
  background: var(--boja); color: #fff; border-color: var(--boja);
  font-weight: 700;
}
/* Sati su `flex-wrap`, a ne mreža: broj termina po danu nije stalan (lokal
   otvoren 09–23 ima dvadeset osam, subota do 02 ima trideset i četiri), pa bi
   mreža imala prazne ćelije na kraju svakog dana. Ono što ovdje treba biti
   poravnano je **visina reda**, ne stupci. */
.kal-sati {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem;
}
.kal-sat {
  min-height: 40px; padding: .35rem .6rem;
  background: var(--ploha); color: var(--tekst);
  border: 1px solid var(--rub); border-radius: 999px;
  font-size: .9rem; cursor: pointer;
}
.kal-sat.izabran {
  background: var(--boja); color: #fff; border-color: var(--boja);
  font-weight: 600;
}
.kal-pomoc { margin: .4rem 0 0; }
/* Polje `<select>` ostaje u stablu kao **vlasnik vrijednosti** i kao ono što
   radi bez JavaScripta, ali se uz mrežu ne pokazuje: dva izbora istog termina
   jedan pod drugim su pitanje na koje gost ne zna koji je odgovor pravi.

   Skriva se **tek kad mreža stoji** (`.kalendar:not([hidden])`), pa gost bez
   JavaScripta — kojem `hidden` s poslužitelja nikad ne padne — i dalje vidi
   polje. Ovo je jedini razlog zašto je uvjet susjedni selektor, a ne razred na
   `body`. */
.kalendar:not([hidden]) ~ #termin-polje { display: none; }