/* ======================================================================
   07. DATEPICKER
   Vlastny iOS-style kalendar (zdielany oboma formularmi)

   Poradie suborov v index.html je zavazne -- kaskada od neho zavisi.
   Tento subor obsahuje povodne sekcie 27-27.
   ====================================================================== */

/* ======================================================================
   27. [GLOBAL]  qwick-custom-ios-datepicker-style
   HIGH RISK -- shared custom iOS-style date picker CSS (despite
   "qwick-" prefix, used by both screens); do not modify without full
   state verification
   ====================================================================== */
/* Canonical QWICK calendar styling shared by every date field. */
#qwickDatePickerOverlay{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding:calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 18px);
  opacity:0;visibility:hidden;pointer-events:none;background:transparent;
  /* Open/close uses a fixed clipping shell above the app. The underlying
     application layout never participates in the morph. */
  transition:none;
  -webkit-tap-highlight-color:transparent;
}
#qwickDatePickerOverlay.open{opacity:1;visibility:visible;pointer-events:auto;transition:none;}

/* KALENDAR NEMA ZAVOJ. Plochu za sebou nestmavuje -- prevezme popredie tym,
   ze to, z coho bol otvoreny, USTUPI UPLNE.

   Su dva pripady a oba koncia rovnako, len ich drzi iny stav:

     sheet      (Pouzit obdobie, detail a uprava zaznamu)
                hostitelsky prekryv dostane `date-picker-underlay`
                a jeho sheet odfaduje na nulu -- pravidlo nizsie

     formular   (Qwick Entry)
                to uz vlastni `date-picker-active`
                (`styles/02-dashboard.css`),
                lebo klavesnicovy formular odovzdava popredie sam

   V oboch pripadoch zostane na obrazovke IBA kalendar -- nad dashboardom,
   ktory je uz rozostreny z otvoreneho sheetu (`body.modal-open`). Ziadne
   dalsie rozostrenie sa nepridava: rozostrovat uz raz rozostreny obraz je
   praca navyse, ktoru nevidno.

   Stmavenie sa nevratilo ani tu. Zrusene su aj `#qwickDatePickerBackdrop`
   a stavove triedy, ktore vyberali, KTORU plochu zatmavit
   (`date-picker-*-backdrop`, `qwick-date-background-active`,
   `qwick-date-card-context`). */
/* Sheet ustupi UPLNE, nie iba ciastocne. Ciastocny ustup by znamenal dva
   citatelne prvky naraz a kalendar by prestal byt jediny popredny.
   Specificita je o triedu vyssia nez u pravidla, ktore sheetu vlastni
   prechod (`04-sheets.css`), a subor sa nacitava az za nim -- odfadovanie
   preto dostane ten isty cas ako kazdy iny odchod sheetu. */
.qwick-surface .overlay.date-picker-underlay.open > .sheet{
  opacity:0;
  pointer-events:none;
}
/* Skorupka je RAM TLACIDLA DATUM, ktory rastie. Sirku aj farbu okraja jej
   pocas morfu zapisuje skript z computed style samotneho tlacidla, takze
   material (styles/21-control-material.css) ostava jedinym zdrojom; tu
   stoji len zaloha rovnakej hodnoty, aby skorupka nikdy nemala okraj
   inej hrubky, nez ma karta na konci. */
.qwick-date-picker-morph-shell{
  position:fixed;z-index:4;box-sizing:border-box;overflow:hidden;pointer-events:none;
  border:1.5px solid var(--ice);isolation:isolate;
  background:transparent;
  box-shadow:none;
  will-change:left,top,width,height,border-radius;
  contain:layout paint style;
}
.qwick-date-picker-morph-material{
  position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  will-change:opacity;transform:translateZ(0);
}
/* Vypln ciela prechodu. Predtym ju zapisoval inline skript, takze o nej
   komponent nevedel a v DevTools nebola vidiet. */
.qwick-date-picker-morph-material-target{
  /* Iba výplň. Rozostrenie tu bolo 26 px a prepočítavalo sa počas celého
     morfu (mení sa left/top/width/height), čo je presne ten druh práce,
     ktorý robil pohyb trhaným. */
  background:linear-gradient(180deg,rgba(68,68,76,.47),rgba(48,48,56,.52));
}
.qwick-date-picker-morph-card{
  z-index:1;overflow:visible;will-change:left,top,opacity;
}

/* Rozbaleny kalendar stoji VO VNUTRI okraja tlacidla, z ktoreho vyrastol:
   ten istý 1,5px `--ice` ako nesie skorupka pocas morfu a datumova pilulka
   v pokoji. `box-sizing:border-box` znamena, ze okraj nic neposunie --
   pri vymene skorupky za skutocnu kartu sa geometria nezmeni o pixel. */
#qwickDatePickerCard,.qwick-date-picker-morph-card{
  position:relative;z-index:2;isolation:isolate;width:min(calc(100vw - 40px),420px);box-sizing:border-box;
  padding:18px 18px 14px;border-radius:var(--qwick-pill-corner);border:1.5px solid var(--ice);
  background:transparent;
  box-shadow:none;
  overflow:visible;transform-origin:50% 50%;opacity:1;transform:none;transition:none;
}
/* Vrstva výplne. Vlastnú vrstvu si drží aj bez rozostrenia: karta má
   `overflow:visible`, takže bez tejto orezanej vrstvy by sa po morfe
   ukázal jej pravouhlý podklad.
   Rozostrenie (26 px) je preč a nevracia sa: prepočítavalo sa počas celého
   morfu, ktorý mení `left/top/width/height`. */
.qwick-date-picker-glass{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  border-radius:inherit;background:linear-gradient(180deg,rgba(68,68,76,.47),rgba(48,48,56,.52));
  box-shadow:none;
}
#qwickDatePickerCard > .qwick-date-picker-head,
#qwickDatePickerCard > .qwick-date-picker-main,
#qwickDatePickerCard > .qwick-date-picker-foot{position:relative;z-index:1;}
/* During the morph the shell's target material is the only glass surface. */
.qwick-date-picker-morph-card > .qwick-date-picker-glass{display:none;}
#qwickDatePickerCard::before,.qwick-date-picker-morph-card::before{content:none;}
.qwick-date-picker-head{height:44px;display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 8px;}
.qwick-date-picker-month-wrap{
  min-width:0;height:40px;display:flex;align-items:center;gap:7px;padding:0 2px 0 1px;margin:0;border:0;background:transparent;
  color:inherit;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transform:none;filter:none;opacity:1;transition:none;box-shadow:none;
}
.qwick-date-picker-month-wrap:active,.qwick-date-picker-month-wrap.is-pressed,.qwick-date-picker-month-wrap:focus-visible{transform:none;filter:none;opacity:1;box-shadow:none;}
.qwick-date-picker-month{color:#fff;font-size:20.5px;font-weight:690;letter-spacing:-.04px;line-height:1;white-space:nowrap;transition:color .11s ease;}
.qwick-date-picker-month-chevron{width:12px;height:12px;flex:0 0 12px;overflow:visible;transform:none;transition:none;}
.qwick-date-picker-month-chevron path{fill:none;stroke:#409cff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;transform:rotate(0deg);transition:transform .19s cubic-bezier(.32,.72,.35,1);}
#qwickDatePickerCard.month-year-turning .qwick-date-picker-month-chevron path,#qwickDatePickerCard.month-year-open .qwick-date-picker-month-chevron path{transform:rotate(90deg);}
#qwickDatePickerCard.month-year-open .qwick-date-picker-month{color:#409cff;}
.qwick-date-picker-nav{display:flex;align-items:center;gap:20px;padding-right:2px;opacity:1;transform:translateY(0);transition:opacity .14s ease,transform .14s ease;}
#qwickDatePickerCard.month-year-open .qwick-date-picker-nav{opacity:0;pointer-events:none;transform:translateY(-2px);}
.qwick-date-picker-nav-btn{position:relative;width:30px;height:40px;border:0;padding:0;margin:0;background:transparent;color:#fff;appearance:none;-webkit-appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .09s cubic-bezier(.2,.8,.2,1),opacity .09s ease;}
.qwick-date-picker-nav-btn svg{position:absolute;width:21px;height:25px;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;}
.qwick-date-picker-nav-btn path{fill:none;stroke:currentColor;stroke-width:4.15;stroke-linecap:round;stroke-linejoin:round;}
.qwick-date-picker-nav-btn:active{transform:scale(1.08);}
.qwick-date-picker-main{position:relative;height:282px;overflow:visible;}
.qwick-date-picker-calendar-view,.qwick-date-picker-monthyear-view{position:absolute;inset:0;transition:opacity .18s ease,transform .20s cubic-bezier(.2,.75,.2,1);}
.qwick-date-picker-calendar-view{opacity:1;transform:scale(1);pointer-events:auto;overflow:visible;}
#qwickDatePickerCard.month-year-open .qwick-date-picker-calendar-view{opacity:0;transform:scale(.985);pointer-events:none;}
.qwick-date-picker-weekdays,.qwick-date-picker-days{width:calc(100% + 22px);margin-left:-11px;margin-right:-11px;padding:0;box-sizing:border-box;}
.qwick-date-picker-weekdays,.qwick-date-picker-days-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));}
.qwick-date-picker-weekdays{height:34px;align-items:center;margin-top:0;margin-bottom:0;}
.qwick-date-picker-weekdays span{height:34px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.86);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",sans-serif;font-size:14px;font-weight:700;letter-spacing:.08px;line-height:1;}
.qwick-date-picker-days{position:relative;height:248px;overflow:visible;touch-action:none;-webkit-user-select:none;user-select:none;}
#qwickDatePickerCard.month-sliding .qwick-date-picker-days{overflow:hidden;}
.qwick-date-picker-days-grid{position:absolute;inset:0;padding:0;box-sizing:border-box;grid-auto-rows:41.333px;column-gap:0;row-gap:0;align-items:center;will-change:transform;transition:none;}
.qwick-date-picker-days-grid:not(:last-child){pointer-events:none;}
.qwick-date-picker-day,.qwick-date-picker-blank{width:100%;height:41.333px;min-width:0;}
.qwick-date-picker-day{
  position:relative;z-index:1;isolation:isolate;display:flex;align-items:center;justify-content:center;overflow:visible;pointer-events:auto;touch-action:none;
  padding:0;margin:0;border:0;background:transparent;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",sans-serif;
  font-size:21px;font-weight:400;letter-spacing:-.22px;font-variant-numeric:tabular-nums;line-height:1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;transition:transform .09s ease-out;
}
.qwick-date-picker-day:focus{outline:none;}
.qwick-date-picker-day::before{content:"";position:absolute;left:50%;top:50%;width:40px;height:40px;border-radius:50%;transform:translate(-50%,-50%) scale(.86);opacity:0;z-index:-1;transition:opacity .11s ease,transform .14s cubic-bezier(.2,.8,.2,1);}
/* Klavesnica dostane kruhovy indikator v jazyku kalendara. Vybrany den uz
   vlastny kruh ma, preto sa na nom nekresli druhy obrys. Natívny hranaty
   outline Safari tak nemoze presahovat mimo bunky. */
.qwick-date-picker-day::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;border-radius:50%;transform:translate(-50%,-50%);box-shadow:none;opacity:0;pointer-events:none;}
.qwick-date-picker-day:focus-visible:not(.selected)::after{opacity:1;}
.qwick-date-picker-day.selected:not(.today){color:#08090b;font-weight:600;}
.qwick-date-picker-day.selected:not(.today)::before{background:#fff;opacity:1;transform:translate(-50%,-50%) scale(1);}
.qwick-date-picker-day.today:not(.selected){color:#409cff;font-weight:500;}
.qwick-date-picker-day.today:not(.selected)::before{background:rgba(64,156,255,.18);opacity:1;transform:translate(-50%,-50%) scale(1);}
.qwick-date-picker-day.today.selected{color:#fff;font-weight:600;}
.qwick-date-picker-day.today.selected::before{background:#409cff;opacity:1;transform:translate(-50%,-50%) scale(1);}
.qwick-date-picker-day.selected,.qwick-date-picker-day.today{z-index:20;}
.qwick-date-picker-day:active{transform:scale(.94);}

/* Full two-column ios-style-picker wheel shared by the global date picker. */
.qwick-date-picker-monthyear-view{opacity:0;transform:scale(.985);pointer-events:none;display:flex;align-items:stretch;justify-content:space-between;gap:0;padding:0 24px;box-sizing:border-box;perspective:2000px;overflow:hidden;isolation:isolate;}
#qwickDatePickerCard.month-year-open .qwick-date-picker-monthyear-view{opacity:1;transform:scale(1);pointer-events:auto;}
.qwick-date-picker-monthyear-view::before{content:"";position:absolute;z-index:1;left:6px;right:6px;top:50%;height:11.25%;transform:translateY(-50%);border-radius:999px;background:rgba(255,255,255,.115);border:1px solid rgba(255,255,255,.055);border-top-color:transparent;box-shadow:inset 0 -1px 0 rgba(0,0,0,.05);pointer-events:none;}
.qwick-date-picker-wheel{position:relative;z-index:2;flex:1 1 0;min-width:0;height:100%;align-self:stretch;overflow:visible;padding:0;margin:0;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-mask-image:none;mask-image:none;}
.qwick-date-picker-wheel + .qwick-date-picker-wheel{margin-left:8px;}
.qwick-date-picker-wheel::-webkit-scrollbar{display:none;}
.ios-style-picker{position:relative;z-index:2;height:100%;text-align:center;overflow:hidden;font-size:18px;color:#ddd;background:transparent;touch-action:none;}
.ios-style-picker::before,.ios-style-picker::after{content:none;display:none;}
.ios-style-picker__option-list{position:absolute;top:50%;left:0;width:100%;height:0;margin:0 auto;padding:0;display:block;list-style:none;transform-style:preserve-3d;-webkit-font-smoothing:subpixel-antialiased;color:rgba(255,255,255,.34);pointer-events:none;will-change:transform;}
.ios-style-picker__option-item{position:absolute;left:0;width:100%;margin:0;padding:0;list-style:none;text-align:center;white-space:nowrap;-webkit-font-smoothing:subpixel-antialiased;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;}
.ios-style-picker__highlight{position:absolute;z-index:2;left:0;top:50%;transform:translate3d(0,-50%,0);width:100%;background:transparent;border:0;border-radius:0;font-size:20px;overflow:hidden;pointer-events:none;}
.ios-style-picker__highlight-list{position:absolute;left:0;width:100%;margin:0;padding:0;list-style:none;color:#fff;pointer-events:none;will-change:transform;}
.ios-style-picker__highlight-item{width:100%;margin:0;padding:0;list-style:none;text-align:center;white-space:nowrap;pointer-events:none;}

.qwick-date-picker-foot{position:relative;z-index:300;isolation:isolate;min-height:60px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:8px;padding:0 4px 2px 8px;overflow:visible;pointer-events:none;}
.qwick-date-picker-reset,.qwick-date-picker-confirm{position:relative;z-index:320;pointer-events:auto;overflow:visible;touch-action:manipulation;appearance:none;-webkit-appearance:none;-webkit-tap-highlight-color:transparent;}
.qwick-date-picker-reset{height:48px;min-width:126px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.13);border-top-color:transparent;background:linear-gradient(180deg,rgba(100,100,109,.58),rgba(73,73,82,.52));color:#fff;font-size:17px;font-weight:740;line-height:1;transform-origin:50% 50%;transition:transform .105s cubic-bezier(.2,.82,.2,1),filter .105s ease;}
.qwick-date-picker-confirm{width:50px;height:50px;flex:0 0 50px;border:0;border-radius:50%;padding:0;background:linear-gradient(180deg,#4aa4ff,#338df0);transform-origin:50% 50%;transition:transform .105s cubic-bezier(.2,.82,.2,1),filter .105s ease;}
.qwick-date-picker-confirm svg{position:absolute;z-index:2;width:31px;height:31px;left:50%;top:50%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;}
.qwick-date-picker-confirm path{fill:none;stroke:#fff;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;}
.qwick-date-picker-reset:active{transform:scale(1.22);filter:brightness(1.035);}
.qwick-date-picker-confirm:active{transform:scale(1.28);filter:brightness(1.04);}
@media (max-height:700px){
  #qwickDatePickerCard,.qwick-date-picker-morph-card{padding-top:16px;padding-bottom:12px;}
  .qwick-date-picker-head{margin-bottom:6px;}
  .qwick-date-picker-main{height:258px;}
  .qwick-date-picker-days{height:224px;width:calc(100% + 16px);margin-left:-8px;margin-right:-8px;}
  .qwick-date-picker-weekdays{width:calc(100% + 16px);margin-left:-8px;margin-right:-8px;}
  .qwick-date-picker-days-grid{grid-auto-rows:37.333px;}
  .qwick-date-picker-day,.qwick-date-picker-blank{height:37.333px;}
  .qwick-date-picker-day{font-size:19.5px;}
  .qwick-date-picker-day::before{width:36px;height:36px;}
  .qwick-date-picker-foot{min-height:56px;margin-top:2px;}
  .qwick-date-picker-reset{height:45px;}
  .qwick-date-picker-confirm{width:48px;height:48px;flex-basis:48px;}
}
@media (prefers-reduced-motion:reduce){
  #qwickDatePickerOverlay,#qwickDatePickerCard,.qwick-date-picker-day::before,.qwick-date-picker-month-chevron path,.qwick-date-picker-calendar-view,.qwick-date-picker-monthyear-view,.qwick-date-picker-reset,.qwick-date-picker-confirm{transition-duration:.01ms;}
}