/* banda!cz jako aplikace v telefonu (PWA) — sdílené na webu klubu, portálu i v administraci (assets/js/pwa.js).
   Barvy lišty a okna jsou barvy banda!cz (aplikace je banda!cz), panel na webu klubu bere barvy klubu. */

/* co je jen v aplikaci na ploše / jen mimo ni: media query display-mode (bez JavaScriptu, bez probliknutí);
   starší iPhony ho neznají — tam dá <html> třídu pwa-app assets/js/pwa.js podle navigator.standalone */
@media not all and (display-mode: standalone) { html:not(.pwa-app) .pwa-jen-app { display: none !important; } }
@media (display-mode: standalone) { .pwa-mimo-app { display: none !important; } }
.pwa-app .pwa-mimo-app { display: none !important; }
/* tlačítka, která pwa.js ukazuje / schovává atributem hidden — .c-btn a .btn jinak display přebijí */
[data-push-panel] [hidden], [data-pwa-instalovat][hidden] { display: none !important; }
/* kabát aplikace (horní a spodní lišta, panel Více) — na webu schovaný, v aplikaci ho ukáže assets/css/app.css */
.app-top, .app-tab, .app-vice, .app-vice-pozadi, .app-vice-cb, .app-bandy, .app-bandy-pozadi, .app-bandy-cb { display: none; }

/* karta „Nainstalovat" na první stránce po přihlášení (mobil v prohlížeči) — vyjede zespodu */
.pwa-sheet { position: fixed; inset: 0; margin: auto auto 0; width: 100%; max-width: 520px; max-height: none; overflow: visible;
  border: 0; border-radius: 26px 26px 0 0; padding: 22px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: #FFF8ED;
  color: #191411; box-shadow: 0 -10px 40px rgba(0, 0, 0, .25); font: 16px/1.45 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.pwa-sheet[open] { animation: pwa-sheet-vyjed .3s ease-out; }
.pwa-sheet::backdrop { background: rgba(25, 15, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body:has(.pwa-sheet[open]) { overflow: hidden; }
.pwa-sheet-maskot { position: absolute; right: 0; top: 16px; width: 66px; height: auto; pointer-events: none; }   /* gekon se drží pravé hrany */
.pwa-sheet-hlava { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding-right: 64px; }
.pwa-sheet-hlava img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 4px 14px rgba(25, 20, 17, .18); flex: 0 0 auto; }
.pwa-sheet h2 { display: block; margin: 0; padding: 0; border: 0; font-size: 1.35rem; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.pwa-sheet-hlava p { margin: 2px 0 0; color: #5C5046; }
.pwa-sheet-body { list-style: none; margin: 0 0 18px; padding: 0; }
.pwa-sheet-body li { position: relative; padding: 5px 0 5px 30px; }
.pwa-sheet-body li::before { content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: #FFD600 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23191411' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.pwa-sheet .pwa-sheet-tl { display: block; width: 100%; padding: 14px 22px; font-size: 1.05rem; }
.pwa-sheet .pwa-sheet-tl:hover { background: #FFE55C; }
.pwa-sheet-dalsi { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 10px 0 0; color: #5C5046; }
.pwa-sheet-dalsi button { border: 0; background: transparent; padding: 8px 10px; border-radius: 999px; font: inherit; font-weight: 600; color: #5C5046; cursor: pointer; }
.pwa-sheet-dalsi button:hover { background: #F1E4CF; color: #191411; }
.pwa-sheet :focus-visible { outline: 3px solid #191411; outline-offset: 2px; }
.pwa-sheet:focus { outline: none; }   /* fokus po otevření je na kartě, ne na tlačítku (bez rámečku) */
@keyframes pwa-sheet-vyjed { from { transform: translateY(100%); } }

/* lišta „Přidat na plochu" / „Zapnout upozornění" */
.pwa-lista { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 1000;
  display: flex; align-items: center; gap: 12px; max-width: 560px; margin: 0 auto; padding: 12px 10px 12px 14px;
  background: #191411; color: #FFF8ED; border-radius: 18px; box-shadow: 0 10px 30px rgba(25, 20, 17, .35);
  font: 15px/1.35 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; animation: pwa-vyjed .35s ease-out; }
.pwa-lista img { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto; }
.pwa-lista-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.pwa-lista-text b { font-weight: 800; }
.pwa-lista-text span { color: #D9CFC2; font-size: 13px; }
.pwa-lista-tl { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 10px 16px; background: #FFD600; color: #191411;
  font: inherit; font-weight: 800; cursor: pointer; }
.pwa-lista-tl:hover { background: #FFE55C; }
.pwa-lista-x { flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #D9CFC2;
  font-size: 24px; line-height: 1; cursor: pointer; }
.pwa-lista-x:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.pwa-lista :focus-visible { outline: 3px solid #FFD600; outline-offset: 2px; }
body.pwa-s-listou { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }   /* lišta nepřekryje konec stránky */
@keyframes pwa-vyjed { from { transform: translateY(24px); opacity: 0; } }

/* bez signálu (a krátká potvrzení) */
.pwa-offline { position: fixed; left: 0; right: 0; top: 0; z-index: 1001; padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px;
  background: #FFD600; color: #191411; text-align: center; font: 600 13px/1.3 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.pwa-offline.pwa-ok { top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; max-width: 560px;
  margin: 0 auto; border-radius: 14px; padding: 12px 14px; background: #191411; color: #FFF8ED; }

/* okno s návodem pro iPhone — jako ostatní modály (zatmavené a rozostřené pozadí, bílá karta) */
.pwa-dialog { border: 0; border-radius: 20px; padding: 26px 22px 22px; width: calc(100% - 32px); max-width: 420px; background: #fff;
  color: #191411; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); font: 16px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.pwa-dialog::backdrop { background: rgba(25, 15, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body:has(.pwa-dialog[open]) { overflow: hidden; }
.pwa-dialog h2 { display: block; font-size: 1.3rem; line-height: 1.25; margin: 12px 0; padding: 0; border: 0; letter-spacing: -0.01em; }   /* club.css h2 má žlutou čáru */
.pwa-dialog:focus { outline: none; }   /* fokus po otevření je na okně, bez rámečku */
.pwa-dialog-ikona { display: block; width: 64px; height: 64px; border-radius: 16px; }
.pwa-dialog-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent;
  font-size: 26px; line-height: 1; color: #5C5046; cursor: pointer; }
.pwa-dialog-x:hover { background: #F1E4CF; }
.pwa-kroky { margin: 0 0 14px; padding-left: 1.3em; }
.pwa-kroky li { margin: 0 0 8px; }
.pwa-kroky svg { vertical-align: -4px; }
.pwa-dialog-pozn { font-size: .88rem; color: #5C5046; margin: 0 0 16px; }
/* doporučení Chrome ve Firefoxu (návod i karta) */
.pwa-dialog-tip, .pwa-sheet-tip { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: #FFF0A8; color: #191411; font-size: .92rem; line-height: 1.4; }
.pwa-tl { border: 0; border-radius: 999px; padding: 11px 22px; background: #FFD600; color: #191411; font: inherit; font-weight: 800; cursor: pointer; }

/* „Zůstat přihlášen v tomto zařízení" (přihlášení na webu klubu i do administrace) */
label.pwa-zustat { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 12px 0 4px; font-weight: 500; cursor: pointer; }
label.pwa-zustat input { width: auto; margin: 0; flex: 0 0 auto; }
label.pwa-zustat small { flex-basis: 100%; padding-left: 26px; font-size: .8rem; font-weight: 400; color: var(--muted, #7a6a45); }

/* panel „Upozornění na tomto zařízení" (Můj profil, Aplikace do telefonu) */
/* ikona vlevo, text vedle ní, tlačítka pod tím přes celou šířku panelu (vnitřní div se „rozpustí“) */
.pwa-panel { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px; margin: 0 0 16px;
  background: var(--panel, #fff); border: 1px solid var(--line, #EADCC6); border-radius: 14px; }
.pwa-panel > div { display: contents; }
.pwa-panel > img { grid-row: 1; border-radius: 11px; }
.pwa-panel-text { grid-column: 2; grid-row: 1; align-self: center; }
.pwa-hlaska { grid-column: 2; }
.pwa-panel-text { margin: 0 0 4px; font-weight: 600; }
.pwa-panel[data-stav="zapnuto"] .pwa-panel-text::before { content: "✓ "; color: #1f7a3a; }
.pwa-panel-tl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pwa-panel-tl:not(:has(button:not([hidden]))) { display: none; }
.pwa-panel-tl button { cursor: pointer; }
@media (max-width: 560px) { .pwa-panel-tl { flex-direction: column; align-items: stretch; } .pwa-panel-tl button { width: 100%; } }
.pwa-hlaska { margin: 0; font-size: .9rem; color: var(--muted, #5C5046); }
.pwa-hlaska:empty { display: none; }
.pwa-hlaska-chyba { color: #b3261e; }

/* Můj profil → Upozornění v telefonu */
.pwa-profil h3 { font-size: 1rem; margin: 20px 0 8px; }
.pwa-volby-seznam label span { display: flex; flex-direction: column; }
.pwa-volby-seznam small { color: var(--muted, #7a6a45); font-size: .84rem; }
.pwa-volby .c-btn { margin-top: 4px; }
.pwa-zarizeni { list-style: none; margin: 0 0 10px; padding: 0; }
.pwa-zarizeni li { padding: 8px 0; border-bottom: 1px solid var(--line, #EADCC6); }
.pwa-zarizeni small { color: var(--muted, #7a6a45); }

/* stránka Aplikace do telefonu (web klubu) */
.pwa-hero { display: flex; gap: 20px; align-items: center; }
.pwa-hero-maskot { width: 120px; height: auto; flex: 0 0 auto; }
.pwa-hero-tl { margin: 14px 0 0; }
.pwa-hero-tl .c-btn { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.pwa-hotovo { margin: 12px 0 0; font-weight: 600; }
.pwa-navod { margin-bottom: 24px; }
.pwa-karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 16px; }
.pwa-karta { background: var(--panel, #fff); border: 1px solid var(--line, #EADCC6); border-radius: 14px; padding: 16px 18px 20px; margin-bottom: 16px; }
.pwa-karty .pwa-karta { margin-bottom: 0; }
.pwa-karta h2 { font-size: 1.15rem; margin: 0 0 10px; }
.pwa-karta .c-hint { margin: 10px 0 0; }
.pwa-karta .pwa-panel { margin-bottom: 10px; }
.pwa-umi ul { margin: 0; padding-left: 1.2em; }
.pwa-umi li { margin: 0 0 6px; }
@media (max-width: 560px) { .pwa-hero { gap: 14px; } .pwa-hero-maskot { width: 80px; } }

/* portál: výběr bandy v aplikaci (/app) */
.app-vyber { padding: 40px 0 64px; }
.app-vyber-in { display: flex; gap: 32px; align-items: flex-start; }
.app-vyber-maskot { width: 190px; height: auto; flex: 0 0 auto; }
.app-vyber-obsah { flex: 1 1 auto; min-width: 0; max-width: 620px; }
.app-vyber h1 { font-size: 2.2rem; }
.app-vyber .perex { margin: 10px 0 22px; color: var(--text-2, #4A3F36); }
.app-kluby { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.app-kluby a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #fff; border: 1px solid var(--linka, #EADCC6);
  border-radius: 16px; color: var(--kava, #191411); text-decoration: none; }
.app-kluby a:hover { border-color: var(--kava, #191411); color: var(--kava, #191411); }
.app-klub-logo { width: 48px; height: 48px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: 12px; background: var(--krem-2, #F1E4CF); }
.app-klub-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.app-klub-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.app-klub-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-klub-text small { color: var(--text-3, #5C5046); }
.app-klub-stav { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-top: 2px; font-size: .85rem; font-weight: 700; color: var(--text-3, #5C5046); }
.app-klub-stav i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--linka-2, #E2D2B8); box-shadow: inset 0 0 0 1.5px #8C7F72; }
.app-klub-stav.je { color: #1C7A34; }
.app-klub-stav.je i { background: #1C7A34; box-shadow: none; }
.app-klub-stav.sleduje { color: #6B5200; }
.app-klub-stav.sleduje i { background: #FFD600; box-shadow: inset 0 0 0 1.5px #7A5E00; }
.app-ucty { margin: -8px 0 22px; padding: 12px 14px; border-radius: 14px; background: var(--zluta-b, #FFF0A8); color: var(--kava, #191411); font-size: .95rem; }
.app-ucty summary { cursor: pointer; list-style: none; }
.app-ucty summary::-webkit-details-marker { display: none; }
.app-ucty-proc { margin-left: 4px; color: var(--cervena-text, #C0301A); font-weight: 700; text-decoration: underline; }
.app-ucty[open] .app-ucty-proc { display: none; }
.app-ucty p { margin: 6px 0 0; }
.app-klub-sipka { font-size: 1.6rem; line-height: 1; color: var(--cervena-text, #C0301A); }
.app-hledat label { display: block; font-weight: 700; margin-bottom: 6px; }
.app-hledat-radek { display: flex; gap: 10px; }
.app-hledat input { flex: 1 1 auto; min-width: 0; font: inherit; padding: 12px 14px; border: 1px solid var(--linka-2, #E2D2B8); border-radius: 12px; background: #fff; color: inherit; }
.app-nic, .app-pozn { margin-top: 18px; color: var(--text-2, #4A3F36); }
@media (max-width: 700px) {
  .app-vyber { padding-top: 24px; }
  .app-vyber-in { flex-direction: column; align-items: stretch; gap: 8px; }
  .app-vyber-maskot { width: 110px; align-self: center; }
  .app-vyber h1 { font-size: 1.8rem; }
}
/* výběr bandy v nainstalované aplikaci (majitel 3. 10.): kabát aplikace — jen logo banda!cz, žádné menu, tlačítka ani patička
   portálu, ať se z aplikace jedním klepnutím neodejde na web (jediná cesta ven je „Založ bandu“ pro nové týmy) */
@media (display-mode: standalone) {
  body:has(.app-vyber) :is(.pruh, .menu-tlacitko, .menu, .hlavicka-akce, .paticka, .preskocit) { display: none !important; }
  body:has(.app-vyber) .hlavicka { top: 0; }   /* bez pruhu se hlavička lepí až úplně nahoru (portal.css .bhp) */
  body:has(.app-vyber) .hlavicka-in { justify-content: center; }
  body:has(.app-vyber) .logo { pointer-events: none; }
  body:has(.app-vyber) main { margin-bottom: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
}
.pwa-app body:has(.app-vyber) :is(.pruh, .menu-tlacitko, .menu, .hlavicka-akce, .paticka, .preskocit) { display: none !important; }
.pwa-app body:has(.app-vyber) .hlavicka { top: 0; }
.pwa-app body:has(.app-vyber) .hlavicka-in { justify-content: center; }
.pwa-app body:has(.app-vyber) .logo { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pwa-lista, .pwa-sheet[open] { animation: none; } }