/* ════════════════════════════════════════════════════════════
   16-admin-mobile.css

   Admin panel na mobilu + prepinac jazyka. Zamerne az tady: prebijici pravidla
   maji stejnou specificitu jako puvodni, takze rozhoduje poradi.

   Cast verejneho stylu. Soubory se nactou v poradi podle nazvu
   (`assets.PUBLIC_CSS`) a kaskada zavisi na tom poradi - nemenit ho
   a nove pravidlo psat do souboru, kam patri obsahove.
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   ADMIN PANEL — MOBIL
   Admin se obsluhuje od pultu i z telefonu (obsluha odbavuje partu a
   zaroven ji odklika "Dorazili"). Panel byl ale kreslen na 1000px shell,
   takze na telefonu se rozpadal. Tenhle blok je zamerne az na konci
   souboru: prebijici pravidla maji stejnou specificitu jako puvodni
   (napr. `.admin-tab { padding }` nize v souboru), takze rozhoduje poradi.

   Tri veci, ktere se tu resi a nejsou zjevne:
   1) Formularova pole MIMO <form> (filtry, hledani, DB heslo, logy) nedostala
      globalni `form input` styl → mela vychozi vzhled prohlizece a font pod
      16px. Pod 16px iOS Safari pri focusu priblizi stranku a uz neoddali.
   2) Zalozek je deset. Zalomeny pill-container (border-radius: 999px) na tri
      radky vypada rozbite, proto je z nej na mobilu vodorovny pas se snapem,
      prilepeny pod horni listu — prepnuti zalozky nesmi vyzadovat scroll nahoru.
   3) Prvky s inline stylem `display:flex` z JS (zavrene dny, karty akci a
      krouzku) nejde prepsat na `display:block`, ale `flex-wrap` inline neni,
      takze zalomeni projde.
   ════════════════════════════════════════════════════════════ */

/* ── 1. Pole mimo <form>: sjednotit vzhled a font ≥16px ── */
.admin-filters input, .admin-filters select,
.admin-search input,
.res-admin select, .res-admin textarea,
.slot-row-ctrl .a-status, .slot-row-ctrl .a-note,
.booking-bulk .bulk-status,
.res-actions .q-note,
.admin-modal-check input {
  font-family: var(--font); font-size: 16px;
}

/* ── 5. Shell, sekce, formuláře ── */
@media (max-width: 620px) {
  /* Vyjimka: seznam tabulek DB je jen rada nazvu, mrizka by je roztahla. */
  #db-tables-bar { display: flex; flex-wrap: wrap; }
  #db-tables-bar > button { width: auto; }
}

/* ── 6. Karty rezervací ── */
@media (max-width: 620px) {

  .slot-row-ctrl { flex-direction: column; align-items: stretch; }
  .slot-row-ctrl .a-status, .slot-row-ctrl .a-note { width: 100%; min-width: 0; }
  .slot-row-ctrl .btn-finish { width: 100%; }
}
#tetris-board { width: 100%; height: auto; }

/* ── 12. Přihlášení do adminu: karta se nesmí lepit na okraje ── */
body > .lf-wrap { padding-inline: 1rem; }

/* ── 13. Dvojjazyčnost: přepínač CZ/EN a nabídka anglické verze ── */

/* Přepínač v hlavičce. Aktuální jazyk je zvýrazněný, druhý ztlumený —
   jedním pohledem je vidět, kde jsem, i kam kliknutí povede. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line);
  font-size: 0.8rem; font-weight: 600; letter-spacing: .02em;
  color: var(--muted); text-decoration: none;
  transition: border-color var(--d-hover) var(--ease-out),
              color var(--d-hover) var(--ease-out);
}
.lang-switch:hover, .lang-switch:focus-visible {
  color: var(--text); border-color: var(--line-strong);
}
.lang-switch-on { color: var(--accent); }
.lang-switch-sep { opacity: .45; }
.lang-switch-off { opacity: .75; }

/* V mobilním menu je přepínač plnohodnotná položka, ne drobná pilulka. */
.nav-mobile .lang-switch {
  margin-top: .75rem;
  font-size: 1.1rem; padding: 10px 18px;
}

/* Nabídka anglické verze. Sedí dole, ne nahoře: hlavička je position:fixed
   a pruh nad ní by ji musel odsazovat — dolní pás se s ní nepotká vůbec. */
.lang-hint {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  z-index: 99; max-width: calc(100% - 2rem);
  display: flex; align-items: center; gap: .85rem;
  padding: .6rem .7rem .6rem 1rem;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: rgba(8, 8, 10, 0.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  font-size: 0.85rem; color: var(--muted);
}
.lang-hint[hidden] { display: none; }
.lang-hint-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-hint-cta {
  flex: none;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: filter var(--d-hover) var(--ease-out);
}
.lang-hint-cta:hover { filter: brightness(1.08); }
.lang-hint-close {
  flex: none;
  width: 26px; height: 26px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--faint); font-size: 1.15rem; line-height: 1; cursor: pointer;
  transition: color var(--d-hover) var(--ease-out);
}
.lang-hint-close:hover { color: var(--text); }

@media (max-width: 560px) {
  .lang-hint { gap: .5rem; padding-left: .85rem; font-size: 0.8rem; }
  /* Na úzkém displeji nese sdělení už samo tlačítko. */
  .lang-hint-text { display: none; }
}

/* Poznámka pod právními odkazy v anglické verzi. */
.footer-legal-note {
  max-width: var(--maxw); margin: .6rem auto 0;
  font-size: 0.76rem; color: var(--faint);
}