/* ======================================================================
   QWICK -- KOMPONENT: sheet

   JEDINÝ ZDROJ materiálu sheetu. Predtým rozhodovalo o tom, ako sheet
   vyzerá, päť súborov (02, 10, 11, 12 a navyše modul), pričom sa
   navzájom prepisovali cez !important.

   ČO BOLO MŔTVE PRED ZLÚČENÍM
   ---------------------------
   `10-materials` dávalo telu sheetu a `.sheet-content-shield` sklo
   (sklenený štít), ale `11-sheets-and-settings` ich
   o 350 riadkov nižšie prepísalo na `transparent` a `box-shadow:none`.
   To sklo sa nikdy nenakreslilo. Zmazané.

   SKLO JE JEDINÝ MATERIÁL
   -----------------------
   Sivá nepriehľadná výplň (`linear-gradient(165deg,#191920,#0d0d11)`)
   bola z aplikácie odstránená úplne a nemá sa vracať. Každý sheet je
   sklo: škrupina je priehľadný nosič a materiál nesú prvky vnútri -- štít,
   polia, sumáre a karty.

   Neexistuje žiadna nepriehľadná varianta sheetu. Keby niekto potreboval
   čitateľnejší podklad, zosilní sa štít (`--glass-shield`), nie sa vráti
   sivý slab.

   Predtým to bol zoznam ID (`#detailOverlay`, `#entryOverlay`,
   `#customOverlay`), takže každý nový sheet -- a každý sheet modulu --
   musel byť do zoznamu dopísaný. Keď dopísaný nebol, dostal starý sivý
   podklad a modul si musel pravidlo skopírovať. Presne to sa stalo
   detailu jazdy v QWICK TRIPS.

   ROLY
   ----
   .sheet-tall                 výškovo rozbaliteľný sheet
   .qwick-record-sheet-scope   sheet so záznamami: pevná hlavička
   .qwick-record-sheet-scroll  natívny viewport takého sheetu
   ====================================================================== */

.qwick-surface{
  --qwick-sheet-surface:transparent;
}

/* ---- geometria škrupiny ------------------------------------------------ */
.qwick-surface .sheet{
  position:relative;
  width:min(100%,520px);
  max-width:100vw;
  min-width:0;
  max-height:92dvh;
  overflow:auto;
  overflow-x:hidden;
  overscroll-behavior:none;
  touch-action:pan-y;
  border-radius:24px 24px 0 0;
  padding:26px 14px calc(env(safe-area-inset-bottom) + 20px);
  box-sizing:border-box;
}
/* Obranné pravidlo: potomok sheetu sa nesmie roztiahnuť nad jeho šírku ani
   si vynútiť vlastnú minimálnu šírku v mriežke. Je zámerne napísané cez
   `:where()`, takže má nulovú váhu — komponent, ktorý si svoju šírku určuje
   sám, ho prebije poradím, nie silou. Kým malo pravidlo bežnú váhu, muselo
   sa proti nemu bojovať `!important`-om (naposledy tlačidlo Späť
   v nastaveniach tagov). */
:where(.qwick-surface .sheet) > *{
  max-width:100%;
  min-width:0;
}

/* ---- rozbaliteľná geometria --------------------------------------------
   Výška, gesto a vnútorný scroll sú jeden komponent. Kedysi bola výška v
   02-dashboard, vlastníctvo gesta v 04-sheets a skutočný overflow iba na
   #detailScroll v 06-forms. Trips preto dostal rovnakú HTML kostru aj rovnaký
   JavaScript, ale nie scrollovací viewport. */
.qwick-surface .sheet-tall{
  display:flex;
  flex-direction:column;
  height:60dvh;
  max-height:60dvh;
  overflow:hidden;
  transition:height .32s cubic-bezier(.22,1,.36,1),max-height .32s cubic-bezier(.22,1,.36,1);
}
.qwick-surface .sheet.sheet-tall{
  padding-bottom:0;
}
.qwick-surface .sheet-tall.sheet-expanded{
  height:calc(var(--app-viewport-height,100dvh) - env(safe-area-inset-top,0px) - 8px);
  max-height:calc(var(--app-viewport-height,100dvh) - env(safe-area-inset-top,0px) - 8px);
}
.qwick-surface .sheet-tall.sheet-dragging{
  transition:none;
}

/* Každý generický .sheet-scroll ostáva natívnym zvislým viewportom. */
.qwick-surface .sheet-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:none;
  padding-right:2px;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
  scroll-padding-bottom:calc(env(safe-area-inset-bottom,0px) + 20px);
}
.qwick-surface .sheet-scroll > :last-child{
  margin-bottom:0;
}

/* Kým sa vysoký sheet nerozbalí, vertikálne gesto patrí jeho výške. Až po
   commitnutí rozbalenia preberie gesto vnútorný natívny viewport. */
.qwick-surface .sheet-tall:not(.sheet-expanded) .sheet-scroll,
.qwick-surface .sheet-tall.sheet-dragging .sheet-scroll{
  overflow-y:hidden;
  overscroll-behavior-y:none;
  -webkit-overflow-scrolling:auto;
}
.qwick-surface .sheet-tall.sheet-expanded:not(.sheet-dragging) .sheet-scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;
}

@supports not (height:1dvh){
  .qwick-surface .sheet-tall{
    height:60vh;
    max-height:60vh;
  }
  .qwick-surface .sheet-tall.sheet-expanded{
    height:calc(var(--app-viewport-height,100vh) - env(safe-area-inset-top,0px) - 8px);
    max-height:calc(var(--app-viewport-height,100vh) - env(safe-area-inset-top,0px) - 8px);
  }
}
@media (prefers-reduced-motion:reduce){
  .qwick-surface .sheet-tall{
    transition-duration:.01ms;
  }
}

/* Spravca modality fokusuje koren dialogu iba ako bezpecny zaciatok pre Tab.
   Koren nie je ovladaci prvok, preto na nom nema zmysel natívny modry focus
   obrys Safari. Fokus jednotlivych tlacidiel a poli ostava nedotknuty. */
.qwick-surface .sheet[tabindex="-1"]:focus,
.qwick-surface .overlay[data-qwick-modal-dialog][tabindex="-1"]:focus{
  outline:none;
}

/* Sheet a každá jeho hlavička sú jeden súvislý povrch. Hlavička nesmie mať
   vlastný tmavý nádych, tieň ani okraj: oba prvky čítajú ten istý
   materiálový token.

   Vynulovanie rozostrenia tu už nie je potrebné: v aplikácii neostal
   žiadny `backdrop-filter`, ktorý by sa sem mohol dostať kaskádou. */
.qwick-surface .overlay > .sheet,
.qwick-surface .overlay > .sheet > .sheet-head,
.qwick-surface .overlay > .sheet.sheet-tall > .sheet-fixed-head{
  background:var(--qwick-sheet-surface);
  box-shadow:none;
}

/* ---- sheet so záznamami ------------------------------------------------- */
.qwick-surface .qwick-record-sheet-scope > .detail-sheet{
  position:relative;
  width:min(100%,520px);
  max-width:100vw;
  padding:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
  overflow:hidden;
  box-shadow:none;
}

/* Header a viewport sú permanentní flex súrodenci. */
.qwick-surface .sheet-fixed-head{
  flex:0 0 auto;
}
.qwick-surface .qwick-record-sheet-scope .sheet-fixed-head{
  position:relative;
  top:auto;
  left:auto;
  right:auto;
  z-index:40;
  flex:0 0 auto;
  width:100%;
  min-height:0;
  margin:0;
  padding:8px 14px 0;
  overflow:hidden;
  box-sizing:border-box;
  /* Ten istý roh ako karta záznamu. Predtým ho dopisoval JS inline
     (24px v pokoji, 40px v zbalenom stave), takže tvar hlavičky vlastnil
     skript a CSS hodnota sa nikdy nedostala k slovu. Tvar patrí CSS. */
  border-radius:var(--qwick-pill-corner);
  pointer-events:auto;
  isolation:isolate;
  will-change:height;
  --qwick-head-full-height:160px;
  --qwick-head-compact-height:52px;
  height:var(--qwick-head-full-height);
}
.qwick-surface .qwick-record-sheet-scope .detail-sheet .sheet-head{
  position:relative;
  top:auto;
  z-index:1;
  width:100%;
  min-height:52px;
  margin:0;
  padding:6px;
  justify-content:space-between;
  box-shadow:none;
}
.qwick-surface .qwick-record-sheet-scope .detail-sheet .sheet-title{
  top:0;
  margin:0;
  align-self:center;
}
.qwick-surface .qwick-record-sheet-scope .detail-total{
  flex:0 0 auto;
  align-self:center;
  margin:0 0 0 auto;
}
.qwick-surface .qwick-record-sheet-scope .detail-periods{
  display:flex;
  justify-content:center;
  width:100%;
  margin:0;
  padding:0 2px 13px;
  gap:7px;
  overflow:visible;
}
.qwick-surface .qwick-record-sheet-scope .sheet-fixed-head .sheet-head,
.qwick-surface .qwick-record-sheet-scope .sheet-fixed-head .detail-periods{
  transform:translate3d(0,var(--qwick-head-translate,0px),0);
  transition:none;
  will-change:transform;
}
.qwick-surface .qwick-record-sheet-scope .detail-sheet .period-nav{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  z-index:42;
  width:auto;
  height:36px;
  margin:0;
  padding:0;
  gap:10px;
  transform:none;
  transition:none;
  will-change:auto;
}
.qwick-surface .qwick-record-sheet-scope .sheet-scroll-shell{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  width:100%;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
}
.qwick-surface .qwick-record-sheet-scroll{
  --qwick-scroll-counter:0px;
  --qwick-collapse-distance:0px;
  position:relative;
  flex:1 1 auto;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  margin:0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px) + var(--qwick-collapse-distance));
  box-sizing:border-box;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:auto;
  overscroll-behavior:none;
  touch-action:pan-y;
  scroll-padding-top:14px;
  /* Iba horne rohy. Viewport siaha po spodok obrazovky, takze spodne
     zaoblenie nema co zaoblovat -- kreslilo by len odrezany oblúk. */
  border-radius:var(--qwick-pill-corner) var(--qwick-pill-corner) 0 0;
  isolation:isolate;
}
.qwick-surface .qwick-record-sheet-scroll > *{
  transform:translate3d(0,var(--qwick-scroll-counter),0);
  will-change:transform;
}

/* ---- telo sheetu so záznamami ------------------------------------------
   Priehľadné, vždy a v oboch témach. Sheet aj hlavička sú jeden povrch;
   materiál nesú až karty a polia vnútri. Tým nevzniká tmavší pás ani
   vrstvenie blur na blur. */
.qwick-surface .sheet-content-shield,
.qwick-surface .qwick-record-sheet-scope .sheet-scroll,
.qwick-surface .qwick-record-sheet-scope .sheet-content-shield{
  background:transparent;
  box-shadow:none;
}

/* ---- materiál hlavičky a viewportu v tmavých témach ---------------------
   V čiernej a sivej téme nesie rozbaliteľná hlavička a jej scrollovateľná
   oblasť ten istý materiál ako textové pole: priesvitná výplň + okraj +
   tieň, BEZ rozostrenia. Hodnoty sa nekopírujú -- čítajú sa tokeny
   `--glass-field*`, ktorých jediný ďalší konzument je styles/17-field.css.
   Keď sa zmení materiál poľa, zmenia sa aj tieto dva povrchy.

   Rozsah je `.qwick-record-sheet-scope`, teda ROLA rozbalitelného sheetu
   so záznamami -- Moves, Všetky jazdy a jazdy jedného klienta. Editor tagov
   má tiež `.sheet-fixed-head`, ale rolu nenesie, takže ostáva priehľadný,
   a to je zámer: „iba sheety s kolapsovateľnou hlavičkou".

   Škrupina `.detail-sheet` sa NEDOTÝKA a ostáva priehľadná. Hlavička
   a viewport sú jej flex súrodenci s medzerou medzi sebou, takže sú to dva
   samostatné panely, nie jeden materiál prekrytý druhým.

   Svetlá téma tu zámerne nie je. Tokeny sú v nej svetlé a tieto dva povrchy
   v nej ostávajú priehľadné podľa pravidla vyššie.

   Hlavička opakuje celú cestu `> .sheet.sheet-tall >` zámerne: priehľadné
   pravidlo vyššie ju adresuje presne takto a má päť tried. Kratší zápis by
   mal štyri a prehral by aj napriek neskoršiemu poradiu. Toto je dôvod
   dĺžky selektora -- nie ozdoba a nie náhrada za `!important`. */
html[data-qwick-theme="black"] .qwick-surface .qwick-record-sheet-scope > .sheet.sheet-tall > .sheet-fixed-head,
html[data-qwick-theme="black"] .qwick-surface .qwick-record-sheet-scope .qwick-record-sheet-scroll,
html[data-qwick-theme="gray"] .qwick-surface .qwick-record-sheet-scope > .sheet.sheet-tall > .sheet-fixed-head,
html[data-qwick-theme="gray"] .qwick-surface .qwick-record-sheet-scope .qwick-record-sheet-scroll{
  background:var(--glass-field);
  border:1px solid var(--glass-field-edge);
  border-top-color:transparent;
}

/* ---- plochy editora tagov ----------------------------------------------
   Úplne priehľadné -- žiadny nádych, žiadny okraj, žiadny tieň.
   Materiál nesú až prvky v nich: pilulky tagov, polia a tlačidlá.

   Toto NIE JE výnimka. Je to to isté pravidlo ako pre telo sheetu so
   záznamami vyššie: obal je priehľadný, materiál nesie obsah. Kým tu stál
   vlastný podklad, editor tagov mal sivý nádych, ktorý ostatné sheety
   nemali -- a presne to je rozdiel, ktorý zdieľaný zdroj nemá pripúšťať. */
.qwick-surface .tag-editor-overlay #tagSettingsBlock,
.qwick-surface .tag-editor-overlay #tagSettingsMainView,
.qwick-surface .tag-editor-overlay .tag-editor-sheet-body,
.qwick-surface .tag-editor-overlay .tags-fullscreen-sheet,
.qwick-surface .tag-editor-overlay .sheet-fixed-head{
  background:transparent;
  box-shadow:none;
}


/* ---- dátumová pilulka --------------------------------------------------
   Modrá je tu ZÁMERNE natvrdo, nie cez rolu --accent: dátumová pilulka má
   naprieč celým QWICK rovnaký modrý materiál z Qwick 1.0, aj v module,
   kde je akcent zelený. Nemeniť na --accent -- v TRIPS by zozelenela.
   Rozsah .qwick-keyboard-form-panel je tu preto, že pilulka
   klávesnicového formulára je ten istý komponent.

   Ostáva tu už len FARBA TEXTU a to, že pilulka nemá zdvih. Výplň
   a okraj vlastní zdieľaný materiál ovládacieho prvku
   (`styles/21-control-material.css`), ktorý si modrú berie z tej istej
   role `--ice` -- takže sa nedajú rozísť. */
.qwick-surface .overlay .sheet .date-control,
.qwick-surface .qwick-keyboard-form-panel .date-control,
.qwick-surface .qwick-entry-date{
  box-shadow:none;
  color:var(--ice);
}

/* ---- kontajner sumára vnútri sheetu -------------------------------------
   Karta záznamu tu už nestojí: jej materiál vlastní
   styles/19-record-card.css a je to materiál poľa, nie sklo karty.

   Rozostrenie je preč aj tu. Sumár stojí vnútri sheetu, ktorý sa pri
   otváraní a zatváraní posúva -- rozostrenie 60 px sa preto prepočítavalo
   pri každom snímku ťahu prsta. Materiál poľa ho nikdy nepotreboval:
   priesvitná výplň + okraj stačia. */
.qwick-surface .qwick-record-sheet-scope .tag-summary{
  background:var(--glass-field);
  border-color:var(--glass-edge);
}

/* ---- svetlá téma ------------------------------------------------------- */
/* Varianta obsahu komponentu patrí ku komponentu, nie do 12-themes.css. */