/* ──────────────────────────────────────────────────────────
   app.css · Socialy-specific doplňky
   Načítá se POSLEDNÍ (po mediaface-admin.css). Nepřepisuj tu
   tokeny ani komponenty z design systému — jen nové, appce
   vlastní věci, které v /design nejsou.
   ──────────────────────────────────────────────────────── */

.tagline-lockup {
  display: block;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-weight: 500;
  font-size: 0.18em;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-top: 6px;
}

.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
}

.auth-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 32px 28px;
  position: relative;
  z-index: 1;
}

.auth-card__brand {
  margin-bottom: 26px;
}

/* Native checkboxes on the access-assignment screens (social_accounts / access) — the
   design system's .cbx is a JS-driven div, but these forms are plain server-rendered POSTs,
   so a styled native checkbox is the simpler fit. Token-driven, no new hex. */
input[type="checkbox"] {
  accent-color: var(--c-signal);
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.flash-banner {
  max-width: 1380px;
  margin: 18px 32px 0;
}
@media (max-width: 720px) {
  .flash-banner { margin: 14px 18px 0; }
}

/* ── Upload form (Fáze 4) ────────────────────────────────── */

/* gideon-admin.css's .filedrop never sets display, and <label> defaults to display:inline —
   its border/padding then only wraps the first line-box fragment (the icon), leaving the
   text visually spilling outside it. Force block layout here rather than editing the
   vendored file. */
.filedrop {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* account picker: native checkbox inside a .choice card, coral highlight when checked.
   Progressive enhancement — without :has() support the checkbox itself still works fine. */
.choice input[type="checkbox"] { margin: 0; }
.choice:has(input[type="checkbox"]:checked) {
  border-color: var(--c-signal);
  background: color-mix(in srgb, var(--c-signal) 7%, transparent);
}
.acct-group { margin-bottom: 18px; }
.acct-group:last-child { margin-bottom: 0; }
.acct-group__label {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.acct-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.acct-grid .choice { flex: 1 1 220px; }

/* media preview grid */
.media-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.media-item {
  border: 1px solid var(--line-2);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
}
.media-item img, .media-item video {
  width: 100%;
  height: 110px;
  object-fit: cover;
  background: var(--bg-2);
  display: block;
}
.media-item__placeholder {
  width: 100%;
  height: 110px;
  background: var(--bg-2);
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  text-align: center;
  padding: 0 8px;
}
.media-item__placeholder svg { width: 20px; height: 20px; opacity: .6; }
.media-item__meta {
  font-size: 11px;
  color: var(--text-3);
  padding: 8px 9px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-item__actions {
  display: flex;
  gap: 6px;
  padding: 8px 9px 9px;
  margin-top: auto;
}
.mi-btn {
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--text-2);
  border-radius: 7px;
  width: 26px;
  height: 26px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.mi-btn:hover { background: var(--surface-3); }
.mi-btn--danger { color: var(--c-danger); margin-left: auto; }

/* Existující média na editaci postu: pořadí se místo <select>u určuje přetažením
   za úchyt (viz upload.js). `--shadow-drag` je existující token z design systému,
   dřív se nikde v appce nepoužíval. */
.file__handle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-3);
  cursor: grab;
  touch-action: none;
}
.file__handle svg { width: 16px; height: 16px; }
.file__handle:active { cursor: grabbing; }
.file__pos {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-3);
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.file.is-dragging {
  position: relative;
  z-index: 5;
  box-shadow: var(--shadow-drag);
  background: var(--surface-3);
}

/* ── Rychlé nahrání (quick-upload) ───────────────────────── */
/* Full-viewport, non-scrolling app-shell: fixed-size topbar/accounts/capture-row/actions,
   only the middle zone (preview + caption) scrolls internally if content overflows. Height
   uses 100dvh where supported (accounts for mobile browser chrome) with a 100vh fallback. */

.quick-page {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  box-sizing: border-box;
  background: var(--bg);
}
.quick-form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.quick-topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.quick-topbar h1 { font-size: 18px; font-weight: 700; margin: 0; }
.quick-back {
  color: var(--text-3);
  text-decoration: none;
  font-size: 13px;
  flex: none;
}

.quick-flash { flex: none; margin-bottom: 10px; }

.quick-accounts {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.quick-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 13px;
  cursor: pointer;
}
.quick-chip input[type="checkbox"] { width: 15px; height: 15px; margin: 0; }
.quick-chip:has(input:checked) {
  border-color: var(--c-signal);
  background: color-mix(in srgb, var(--c-signal) 8%, var(--surface));
}

.quick-capture-row { flex: none; display: flex; gap: 10px; margin-bottom: 12px; }
.quick-cta {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 22px 12px;
  border-radius: 18px;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: filter .15s;
}
.quick-cta svg { width: 30px; height: 30px; }
.quick-cta--camera { background: var(--c-signal); color: #fff; }
.quick-cta--gallery { background: var(--surface); color: var(--text); border: 1.5px dashed var(--line-3); }
.quick-cta:hover, .quick-cta:active { filter: brightness(0.96); }
.quick-cta.is-busy { opacity: .6; pointer-events: none; }

.quick-scroll-zone { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.quick-scroll-zone .media-preview { margin-top: 0; }
.quick-caption { width: 100%; margin-top: 12px; min-height: 64px; box-sizing: border-box; }

.quick-actions { flex: none; display: flex; gap: 10px; padding-top: 12px; }
.quick-action { flex: 1 1 50%; justify-content: center; }

/* ── Admin logs / diagnostics (Fáze 8) ──────────────────── */

.log-viewer {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  max-height: 70vh;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}

.diag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.diag-row:last-child { border-bottom: 0; }
.diag-row .k { color: var(--text-3); }
.diag-row .v { font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.diag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.diag-dot--ok { background: var(--c-ok); }
.diag-dot--warn { background: var(--c-warn); }
.diag-dot--danger { background: var(--c-danger); }

/* ── Overflow fixes ──────────────────────────────────────────
   Přetékající boxy a texty napříč appkou — tři opakující se vzory nalezené auditem
   (headless prohlížeč, DOM scan scrollWidth > clientWidth na všech views a šířkách):

   1) `.spec .row .v` (klíč/hodnota bloky — "Informace" panely na detailu postu, uživatele,
      účtu, profilu, nastavení) mělo `white-space: nowrap` bez overflow/wrap zábrany — delší
      hodnota (dlouhý e-mail, timestamp, chybová hláška) fyzicky přetekla mimo panel, protože
      `.spec .row` je jen dvousloupcový grid uvnitř `.grid-2` panelu, ne plná šířka stránky —
      a `.spec` sám je navíc dvousloupcová grid (dvě `.row` vedle sebe), takže jedna `.row`
      má reálně k dispozici jen čtvrtinu šířky stránky, ne polovinu. `.k` měl `flex: none`
      (nikdy se nezmenší, nikdy nezalomí) — u delšího popisku ("PNG ikony (192/512)") to
      samo o sobě přeteklo i s opraveným `.v`. */
.spec .row { flex-wrap: wrap; }
.spec .row .k { flex-shrink: 1; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.spec .row .v { white-space: normal; overflow-wrap: anywhere; }

/* Diagnostika (`/diagnostics`) používá stejný vzor pod jiným jménem třídy (`.diag-row`,
   ne `.spec .row`) — stejná příčina, stejná oprava. */
.diag-row { flex-wrap: wrap; }
.diag-row .k { flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; }
.diag-row .v { overflow-wrap: anywhere; }

/* 2) `.tbl-wrap` má z hatch-admin.css `overflow: hidden` a horizontální scroll (overflow-x:
      auto) dostane vendored pravidlo jen ≤760px. Tabulky s víc sloupci (Uživatelé, Příspěvky,
      API logy, Historie postů) ale mají přirozenou min. šířku větší než ~700–900px i na
      tabletu/menším notebooku (761–~1150px) — sloupce se tam neviditelně OŘÍZNOU, ne
      zobrazí se scrollbar. Scroll platí vždy, ne jen pod 760px — na desktopu se stejně
      nikdy neprojeví, protože se tam tabulka do 100 % šířky vejde. */
.tbl-wrap { overflow-x: auto; }

/* 3) `.savebar` (gideon-admin.css) bleeduje `margin: 0 -32px` na to, že jeho rodič je přímo
      `.page` (32px padding) — sedí to na `/upload` a podobných plnošířkových formulářích.
      Ale ve všech `.formwrap` formulářích (users, social-accounts, profile, settings,
      access, posts/schedule|edit — `.formwrap { max-width: 760px }`) je `.savebar` vnořený
      hlouběji, takže bleed přetekl o pevných 32px (18px na mobilu) mimo skutečný okraj
      formuláře — vizuálně "uletí" tlačítka mimo box, který nad nimi vidíš. Uvnitř
      `.formwrap` bleed nedává smysl (formulář stejně nejede od kraje po kraj), takže ho tam
      rušíme úplně. Stejný problém má formulář v `/profile` — `.savebar` sedí uvnitř
      `.panel` karty (poloviční šířka `.grid-2`), tam je bleed ještě víc mimo místo. */
.formwrap .savebar, .panel .savebar { margin: 0; padding: 16px 0; }

/* Bez podbarvení jen na `/profile` (savebar vnořený v `.panel`) — všude jinde (např.
   posts/{id}/edit) dělá průhledné pozadí problém, takže tam zůstává vendored tónovaný
   podklad z mediaface.css beze změny. */
.panel .savebar { background: transparent; backdrop-filter: none; }

/* ── Cílové účty: platforma jako barevný obrys ─────────────────
   `/posts` a podobné výpisy dřív psaly "Label · Facebook/Instagram" do jednoho
   `.tag` — u delšího labelu se text lámal přes řádek uvnitř tagu. Teď nese
   platformu jen barva obrysu (bez textu), label zůstane krátký a nezalomí se. */
.tag--platform { white-space: nowrap; }
.tag--platform.tag--fb { border-color: #1877F2; color: #1877F2; }
.tag--platform.tag--ig {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(135deg, #FEDA77, #F58529, #DD2A7B, #8134AF, #515BD4) border-box;
}

/* ── Řádkové akce (.rowact) přes <a>, ne <button> ────────────
   mediaface.css styluje jen `.tbl .rowact button svg` (30×30 tlačítko + 15×15 ikona) —
   `/users` a `/social-accounts` ale mají akce jako obyčejné `<a>` odkazy (Detail/Upravit/
   Heslo), na které se to pravidlo vůbec netrefí. Bez vlastní šířky/výšky SVG nemá žádný
   intrinzní rozměr a vykreslí se jako 0×0 — ikony byly efektivně neviditelné. */
.tbl .rowact a {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--text-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.tbl .rowact a:hover { background: var(--surface-3); color: var(--text); }
.tbl .rowact a svg { width: 15px; height: 15px; }

/* Stejný důvod, jiné místo: `icon('check')` volané přímo v `<td>` (tabulky oprávnění na
   `/social-accounts/{id}` a `/users/{id}`, sloupec "V pořádku" v náhledu publikace na
   `/posts/{id}`) nemá žádného obalujícího rodiče se svým `svg` pravidlem — bez rozměru
   se ikona vykreslila ve výchozí (velké) velikosti prohlížeče. */
.tbl td svg { width: 16px; height: 16px; }

/* ── Návod „Připojení Meta účtu" (partials/meta_guide_modal.php) ──────────── */
.guide-flow { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-bottom: 16px; }
.guide-flow__head {
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-steps { list-style: none; margin: 0; padding: 2px 14px; counter-reset: gstep; }
.guide-steps > li {
  counter-increment: gstep;
  position: relative;
  padding: 11px 0 11px 33px;
  border-bottom: 1px dashed var(--line);
}
.guide-steps > li:last-child { border-bottom: none; }
.guide-steps > li::before {
  content: counter(gstep);
  position: absolute;
  left: 0;
  top: 11px;
  width: 21px;
  height: 21px;
  border-radius: 6px;
  background: var(--surface-3);
  color: var(--text-2);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-steps .t { font-weight: 600; font-size: 13.5px; color: var(--text); }
.guide-steps .d { font-size: 12.5px; color: var(--text-2); margin-top: 3px; line-height: 1.55; }
.guide-steps .d .tag { margin: 2px 3px 2px 0; }
.guide-err { border-left: 3px solid var(--c-danger); background: var(--surface-2); border-radius: 0 10px 10px 0; padding: 10px 14px; margin-bottom: 10px; }
.guide-err__msg { font-family: "JetBrains Mono", monospace; font-size: 11.5px; color: var(--c-danger); }
.guide-err__fix { font-size: 12.5px; color: var(--text-2); margin-top: 5px; line-height: 1.5; }

/* ── Mobile-first fixes ──────────────────────────────────────
   Vendored CSS (gideon/hatch) už responzivitu z velké části řeší (off-canvas sidebar
   ≤880px, kolabující gridy, .tbl-wrap scroll ≤760px). Tady jsou jen opravy míst, kde
   appka na mobilu reálně praská — žádný vendored soubor se needituje. */

/* Vendored pravidlo `table.tbl { min-width:700px }` (≤760px) platí paušálně — i pro úzké
   tabulky VOLNĚ v panelu (dashboard, detail postu/uživatele/účtu), které žádný scroll
   wrapper nemají, takže rozstřelí celou stránku do horizontálního scrollu. Reset + obnova
   jen tam, kde scroll kontejner opravdu existuje: */
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  table.tbl { min-width: 0; }
  .tbl-wrap table.tbl { min-width: 700px; }
  .tbl-scroll table.tbl { min-width: 560px; }
}

/* Manager dashboard má 4 stat karty — dřív vynucené inline stylem, který přepisoval
   vendored breakpointy (inline > media query). Teď modifikátor se stejnými zlomy. */
.stats--4 { grid-template-columns: repeat(4, 1fr); }
.stats--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1080px) { .stats--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .stats--4, .stats--2 { grid-template-columns: 1fr; } }

/* Akce v hlavičce detailu (post/uživatel/účet) — až 5 tlačítek; flex + wrap na řádku,
   na mobilu vlastní plnoformátový řádek. display:contents na inline formulářích udělá
   z jejich tlačítek přímé flex položky (!important přebíjí inline style="display:inline"
   ve views — jediné místo, kde se tomu nejde vyhnout bez editace všech detail views). */
.dethead .actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dethead .actions form { display: contents !important; }
@media (max-width: 720px) {
  .dethead { flex-wrap: wrap; }
  .dethead .actions { flex-basis: 100%; }
  .dethead .actions .b { flex: 1 1 auto; }
}

@media (max-width: 720px) {
  /* .page padding klesá z 32px na 18px, ale .savebar má margin:0 -32px natvrdo —
     přetékal o 14px na každou stranu a dělal horizontální scroll. */
  .savebar { margin: 0 -18px; padding: 14px 18px; }

  /* Velké nadpisy žerou na telefonu příliš místa. */
  .pagehead h1 { font-size: 26px; }
  .dethead h1 { font-size: 22px; }
  .dethead .av-lg { width: 48px; height: 48px; font-size: 16px; border-radius: 13px; }

  /* iOS Safari zoomuje na focus u inputů s font-size < 16px. */
  .in, .search input { font-size: 16px; }

  /* Filtry v toolbaru: desktopové inline max-width (200px apod.) na mobilu uvolnit
     na plnou šířku (!important kvůli inline stylům ve views). */
  .toolbar .in { max-width: none !important; }

  /* Řádek stávajícího média v editaci postu (thumb + název + pozice + odebrat)
     se na úzkém displeji nevejde na jeden řádek. */
  .file { flex-wrap: wrap; }
  .file .meta { min-width: 0; }

  /* Breadcrumb v adminbaru: dlouhý název stránky ať se ořízne, ne přeteče. */
  .adminbar .crumb b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Potvrzovací modál publikace: obsah ať scrolluje uvnitř, ne pod okrajem. */
  .detail-modal { width: calc(100vw - 20px); max-height: 94vh; }
}
.detail-modal .panel__body { overflow-y: auto; }

/* ── Mobilní karty místo tabulek ─────────────────────────────
   Na ≤760px se řádky tabulek s hlavičkou překlopí na svislé karty (popisek sloupce nad
   hodnotou) — žádný horizontální scroll. Funguje ve spolupráci s app.js, který zkopíruje
   texty <th> do data-label na buňkách; card režim se zapne JEN u tabulek, kde se to povedlo
   (`table.tbl:has(td[data-label])`). Bez JS nebo bez podpory :has() (starší prohlížeče)
   zůstává scroll fallback z bloku výše — nic se nerozbije, jen to není tak pohodlné. */
@media (max-width: 760px) {
  table.tbl:has(td[data-label]),
  .tbl-wrap table.tbl:has(td[data-label]),
  .tbl-scroll table.tbl:has(td[data-label]) { display: block; min-width: 0; }

  table.tbl:has(td[data-label]) thead { display: none; }
  table.tbl:has(td[data-label]) tbody { display: block; }

  table.tbl:has(td[data-label]) tbody tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }
  table.tbl:has(td[data-label]) tbody tr:last-child { border-bottom: 0; }
  table.tbl:has(td[data-label]) tbody tr:last-child td { border-bottom: 0; }

  table.tbl:has(td[data-label]) td {
    display: block;
    border-bottom: 0;
    padding: 6px 18px;
    max-width: none !important; /* přebíjí inline max-width z desktopového rozvržení buněk */
    overflow-wrap: anywhere;    /* dlouhé e-maily/ID/chybové hlášky nikdy nepřetečou kartu */
  }
  table.tbl:has(td[data-label]) td.r { text-align: left; } /* zarovnání vpravo ve sloupci nedává v kartě smysl */

  table.tbl:has(td[data-label]) td::before {
    content: attr(data-label);
    display: block;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: 3px;
  }
  /* Buňky bez popisku: akční sloupce (prázdný <th>) a colspan empty-state — žádný label. */
  table.tbl:has(td[data-label]) td:not([data-label])::before { content: none; }
  table.tbl:has(td[data-label]) td[colspan] { padding: 0; }
}

/* Vendored `.tbl .rowact { opacity: 0 }` ukazuje akce řádku jen na :hover — na dotykových
   zařízeních žádný hover není, takže Detail/Upravit ikony byly úplně neviditelné. */
@media (hover: none) {
  .tbl .rowact { opacity: 1; }
}

/* ── Globální hledání (⌘K) ───────────────────────────────── */

.search-result {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.search-result:hover, .search-result.is-active { background: var(--surface-2); }
.search-result__label { font-size: 14px; font-weight: 500; }
.search-result__sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

#search-modal-results:empty { padding-bottom: 4px; }

@media (max-width: 640px) {
  #search-modal-box { width: calc(100vw - 24px); top: 8%; }
}