/*
 * _shared/responsive.css
 * ----------------------
 * Sdílené mobile breakpointy nad rámec theme-specific CSS. Linkuje se
 * v base.php PO theme stylesheetu, aby cascade vyhrávala.
 *
 * Strategie (vrstva 1 — header + base layout + nejnutnější fixy):
 *   - ≤720px: skrýt inline auth-link buttons (Pošta / Spravovat / Uživatelé /
 *     DB / Docs), které stejně dubluje user-menu dropdown. User-menu dropdown
 *     se přepíná na position: fixed, kotvený k viewportu (jinak by ho
 *     `min-width: 14rem` rozšířil mimo pravou hranu — relative anchor je
 *     k avataru, který je vpravo).
 *   - ≤480px: dropdown roztáhnout přes celou šířku, pro pohodlné klikání;
 *     site-main bez box-shadow / radius (visuálně se „přilepí" k okrajům
 *     a content využije celé šířky displeje).
 *   - .cred-list (TOTP / passkeys v /security): na malém displeji nahradit
 *     textová tlačítka „Přejmenovat" / „Smazat" za pouhé ikony — tabulkový
 *     layout se vejde i s dlouhými názvy. Ikony zůstávají i na desktopu
 *     (text vedle nich) pro vizuální konzistenci.
 *   - .role-matrix (/users/{id}): scrollovatelný wrapper, aby action buttons
 *     nešikmočily layout. Stack-as-rows pattern by vyžadoval data-label
 *     attribute v každém <td>; horizontal scroll je jednodušší a stejně
 *     použitelný.
 *   - .profile-section input[type=file]: stylizace ::file-selector-button
 *     pro vizuální paritu s tlačítkem „Nahrát" a „Smazat fotku".
 */

/* ==========================================================================
   GLOBÁLNĚ (žádný breakpoint) — strukturální ochrany proti přetečení
   ========================================================================== */

/* Dlouhé maily nesmí vytvořit horizontal scroll. */
.profile-email,
.user-menu-email {
  word-break: break-all;
}

/* Obrázky v contentu nesmí přesáhnout svou buňku. */
.site-main img {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   Mail compose WYSIWYG editor (3.10)
   --------------------------------------------------------------------------
   Toolbar + contenteditable. Univerzální napříč themes (mail je per-tenant
   v každém theme, ale styling je generický). Loaduje se v base.php po theme
   stylesheetu, takže přebíjí default theme rendering pokud potřeba.
   ========================================================================== */

.mail-compose-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
  background: #f8f8f8;
  border: 1px solid var(--border, #d4d4d4);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  flex-wrap: wrap;
}
.mail-compose-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.85rem;
  padding: 0 0.5rem;
  background: #fff;
  border: 1px solid var(--border, #d4d4d4);
  border-radius: 3px;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--fg, #1d1d1d);
}
.mail-compose-tool:hover {
  background: #eef3f9;
  border-color: var(--accent, #2c5aa0);
}
.mail-compose-tool:active {
  background: #e2e9f3;
}
.mail-compose-tool-sep {
  display: inline-block;
  width: 1px;
  height: 1.2rem;
  background: var(--border, #d4d4d4);
  margin: 0 0.2rem;
}
.mail-compose-body-editor {
  min-height: 14rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border, #d4d4d4);
  border-radius: 0 0 4px 4px;
  background: #fff;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.mail-compose-body-editor:focus {
  outline: 2px solid var(--accent, #2c5aa0);
  outline-offset: -2px;
  border-color: var(--accent, #2c5aa0);
}
/* Tagy uvnitř editoru — nech browser default vykreslení (b, i, u, ul, li,
   blockquote, a). Nepatříme do interní semantiky — co user vidí, to se
   pošle (modulo sanitizer whitelist). */
.mail-compose-body-editor p { margin: 0 0 0.5rem; }
.mail-compose-body-editor ul,
.mail-compose-body-editor ol { margin: 0.4rem 0; padding-left: 1.5rem; }
.mail-compose-body-editor blockquote {
  margin: 0.5rem 0;
  padding: 0 0.75rem;
  border-left: 3px solid var(--border, #d4d4d4);
  color: var(--muted, #666);
}
.mail-compose-body-editor a { color: var(--accent, #2c5aa0); }
/* Placeholder pomocí ::before — prázdný editor (jen <br>) ukáže hint. */
.mail-compose-body-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--muted, #666);
  pointer-events: none;
}

/* Mail sidebar — unread count badge (per-folder counts).
   `.mail-folder-unread` bublina vedle názvu složky v _sidebar.php. Server
   jí naplní (z STATUS UNSEEN), prázdné folders bublinu nemají vůbec.

   Layout: <a> je flex (kvůli vertikálnímu zarovnání ikony + textu + badge).
   Žádný justify-content — children flow naturally vlevo (::before ikona,
   text label). Badge má `margin-left: auto`, který v flex kontextu znamená
   „push co nejvíc doprava" — sedí na konci řádku.
   `gap` nepoužíváme, ::before si nese margin-right z theme CSS sám. */
.mail-folder > a {
  display: flex;
  align-items: center;
}
.mail-folder-unread {
  display: inline-block;
  min-width: 1.4rem;
  margin-left: auto;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--accent, #2c5aa0);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* Aktuálně vybraná složka má bg=accent (.is-current > a) a tedy modré
   pozadí; bublina by zmizela. Změníme barvu na inverted. */
.mail-folder.is-current > a .mail-folder-unread {
  background: rgba(255, 255, 255, 0.92);
  color: var(--accent, #2c5aa0);
}

/* Draft auto-save status pill (3.7c-4) — viditelná indikace, jestli je
   rozepsaný stav uložený. Stavy:
     idle    — start (neukázáno, hidden=true)
     dirty   — user napsal změnu, debounce běží (5s)
     saving  — fetch /mail/compose/draft probíhá
     saved   — server vrátil ok, ukáž čas
     error   — fetch selhal nebo server vrátil chybu
*/
.mail-compose-draft-status {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.3;
  margin: 0.5rem 0;
  background: #f0f0f0;
  color: var(--muted, #666);
  border: 1px solid var(--border, #d4d4d4);
}
.mail-compose-draft-status[data-state="saving"] {
  background: #fef9e7;
  color: #8a6d00;
  border-color: #e8d77a;
}
.mail-compose-draft-status[data-state="saved"] {
  background: #e7f5e9;
  color: #1f5a2c;
  border-color: #b6dcb8;
}
.mail-compose-draft-status[data-state="error"] {
  background: #fdf3f3;
  color: #c33;
  border-color: #e0b4b4;
}

/* ==========================================================================
   Vrstva 2 — články + galerie (vodaci-style content)
   --------------------------------------------------------------------------
   Třídy .article-grid, .article-card, .gallery, .article-body, .article-header
   jsou definované v jednotlivých theme CSS (zatím jen vodaci). Tyto rules
   override-ují breakpoint-specific chování. Bez matchnutých selektorů
   se neaplikují na ostatních themes (no-op pro auth/breke/kohutova/petr-kohut).
   ========================================================================== */

/* Article body — ochrana před horizontálním overflow z dlouhých URL,
   code bloků, tabulek (markdown content je user-supplied, takže nikdy
   nevíme co tam přijde). */
.article-body {
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.article-body pre {
  overflow-x: auto;
  max-width: 100%;
}
.article-body table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}

/* /me Profilová fotka: sjednocení tlačítek (file input ::file-selector-button,
   .btn / .btn-primary / .btn-danger) na vizuálně stejnou výšku. Trade-off:
   theme CSS nemá konzistentní border (.btn-primary je solid fill, .btn-danger
   outline 1px — výška se liší o 2px). Tady to vyrovnáme přidáním 1px
   transparent borderu k solid tlačítkům (box-sizing: border-box dělá zbytek). */
.profile-section input[type="file"] {
  font-size: 0.95rem;
}
.profile-section input[type="file"]::file-selector-button {
  font: inherit;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  margin-right: 0.6rem;
  border: 1px solid var(--border, #d4d4d4);
  background: #f0f0f0;
  color: #333;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}
.profile-section input[type="file"]::file-selector-button:hover {
  background: #e8e8e8;
}
/* Solid-fill tlačítka v profile-section dostanou transparent border, aby
   matchovala outline tlačítka pixel-perfectně. Selektor `.btn-primary, .btn`
   pokrývá Nahrát napříč tématy; `.btn-danger:not([class*="btn-mini"])`
   chrání security list před přepsáním (tam je menší varianta záměrně). */
.profile-section .btn,
.profile-section .btn-primary {
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  vertical-align: middle;
}
.profile-section .btn-danger {
  padding: 0.5rem 1rem;
  font-size: 0.95rem;
  vertical-align: middle;
}

/* Profile form — sjednocení gap mezi „Nahrát" a „Smazat fotku" na malém
   displeji (defaultně forms jsou pod sebou s margin, vypadá to nedbale). */
.profile-form {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}

/* Cred-list (TOTP / passkey) buttons — přidáme ikonu před text. Trick:
   ::before s mask-image (stejně jako mail folder ikonky). Text zůstane
   čitelný; na ≤720 níž text schováme a zůstane jen ikona. */
.cred-actions .btn-mini[type="button"]::before,
.cred-actions .btn-mini[type="submit"]::before {
  content: '';
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  margin-right: 0.4em;
  vertical-align: -0.13em;
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
/* Přejmenovat = tužka */
.cred-rename-trigger::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M11 1.5L14.5 5L5 14.5H1.5V11L11 1.5Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M11 1.5L14.5 5L5 14.5H1.5V11L11 1.5Z'/></svg>");
}
/* Smazat = koš (jen pro submit ve forms /delete actions) */
.cred-actions form[action$="/delete"] button::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4H14'/><path d='M12.5 4L12 14H4L3.5 4'/><path d='M6 4V2H10V4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 4H14'/><path d='M12.5 4L12 14H4L3.5 4'/><path d='M6 4V2H10V4'/></svg>");
}

/* Role-matrix scroll wrapper — zatím není v šabloně; níž v ≤720 dáme
   .role-matrix samotnému overflow-x (table je inline element s vlastním
   shrinkováním). */

/* ==========================================================================
   Vrstva 3 — admin tabulky (/users, /db, /users/{id} edit form)
   --------------------------------------------------------------------------
   /users tabulka (.users-table) má 8 sloupců + auto-overflow wrapper. Na ≤720
   ji převádíme na card layout: thead skryté, každý <tr> jako vertikální card
   s avatarem absolute pos vlevo nahoře, ID v pravém horním rohu, jméno + email
   na top, pod tím role / 2FA / mail / časy s ::before labelem.

   /db/table/{name} (.db-rows) má arbitrary sloupce (libovolné DB tabulky).
   Card layout nemá smysl (data jsou neznámá). Na mobile zachováváme
   horizontal scroll, jen přidáme sticky první sloupec, aby identifikátor
   řádku zůstal viditelný při scrollu.

   /users/{id} (.profile-edit-form) má grid 2col (label 10rem + input).
   Na mobile přepneme na stack — label nahoře, input pod ním.
   ========================================================================== */

/* ==========================================================================
   ≤ 720px — tablet portrait, phone landscape
   ========================================================================== */
@media (max-width: 720px) {
  /* Hlavička: skrýt zbytečné inline duplicity admin linků. */
  .site-header .auth-admin {
    display: none;
  }
  .site-header {
    padding: 0.6rem 1rem;
    gap: 0.5rem;
  }
  .site-logo {
    height: 2rem;
  }
  .site-name {
    font-size: 1.05rem;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Dropdown: kotvit k VIEWPORTU, ne k avataru (původní position: absolute
     vůči .user-menu způsobuje overflow doprava — min-width 14rem je větší
     než šířka avatar wrapperu). Fixed + top:3.25rem (pod hlavičkou)
     + right:0.5rem dá pohodlný panel uvnitř viewportu. */
  .user-menu-dropdown {
    position: fixed;
    top: 3.25rem;
    right: 0.5rem;
    left: auto;
    min-width: 14rem;
    max-width: calc(100vw - 1rem);
  }

  .site-main {
    padding: 1.25rem;
    margin: 1rem auto;
  }
  .site-footer {
    padding: 1.25rem 1rem;
  }

  /* Cred-list (TOTP / passkey): skrýt textový label v action buttons,
     zůstane ikona. Label je wrapped v <span class="btn-label"> v security.php
     pro accessibility — aria-label na buttonu zachová screen-reader popisek. */
  .cred-actions .btn-mini .btn-label {
    display: none;
  }
  .cred-actions .btn-mini::before {
    margin-right: 0;
    width: 1.05em;
    height: 1.05em;
    vertical-align: middle;
  }
  .cred-actions .btn-mini {
    padding: 0.4rem 0.55rem;
  }

  /* Role-matrix tabulka: na malém displeji se nevejde 4 sloupce — přes
     .role-matrix-scroll wrapper dovolíme horizontal scroll. Wrapper je
     v user-detail.php (přidán speciálně pro tento účel); table samotná
     zachovává klasický table layout (žádný display: block hack). */
  .role-matrix-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .role-matrix {
    white-space: nowrap;     /* action buttons nesmí wrappovat */
  }
  .role-matrix tbody td:first-child {
    white-space: normal;     /* tenant name může wrappovat */
  }

  /* Profile-form na mobilu zalomit pod sebe (file input + Nahrát = jeden
     řádek; Smazat fotku = další řádek). flex-wrap to už řeší. */
  .profile-form {
    width: 100%;
  }
  .profile-form input[type="file"] {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Galerie článku: 2 sloupce místo auto-fill 200px (které dá 1 col na
     phone portrait). aspect-ratio 1/1 místo fixed 200px height — square
     thumbnails se lépe přizpůsobí narrow viewportu (320×320, 360×360...). */
  .gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
  }
  .gallery img {
    height: auto;
    aspect-ratio: 1 / 1;
  }

  /* Article-grid (home page): zmenšit minmax z 280px na 240px, aby na
     phone landscape (688px) byly stále 2 sloupce, ne wrap. Cover obrázek
     u článku už je responsive aspect-ratio 16/9. */
  .article-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
  }

  /* /users tabulka — card stack. ----------------------------------------- */
  /* Wrapper: shed scroll/border, jen as transparent container. */
  .users-table-wrapper {
    border: none;
    background: transparent;
    overflow-x: visible;
    border-radius: 0;
  }
  .users-table thead { display: none; }
  .users-table,
  .users-table tbody,
  .users-table tr,
  .users-table td {
    display: block;
    width: auto;
  }
  .users-table tr {
    position: relative;
    padding: 0.85rem 1rem 0.85rem 4.5rem;   /* left padding pro avatar */
    border: 1px solid var(--border) !important;
    border-radius: 6px;
    margin: 0.6rem 0;
    background: #fff !important;
  }
  .users-table tr:hover { background: #f4f8fc !important; }
  .users-table td {
    padding: 0;
    border: none !important;
    margin: 0.15rem 0;
  }
  /* Avatar: absolute vlevo nahoře. */
  .users-table .users-avatar-cell {
    position: absolute;
    left: 1rem;
    top: 0.9rem;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0 !important;
    margin: 0;
  }
  .users-table .users-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }
  /* ID: malý text v pravém horním rohu. */
  .users-table .users-id {
    position: absolute;
    right: 1rem;
    top: 0.6rem;
    width: auto;
    font-size: 0.72rem;
    margin: 0;
  }
  /* 3rd <td> (jméno + email + flag). Bez třídy → selektujeme přes pozici. */
  .users-table tr > td:nth-child(3) {
    margin-bottom: 0.4rem;
  }
  /* Role/2FA/mail/časy: každý řádek s labelem před hodnotou. */
  .users-table .users-roles {
    max-width: none;     /* override desktop max-width: 18rem */
    margin-top: 0.2rem;
  }
  .users-table .users-roles::before,
  .users-table .users-2fa::before,
  .users-table .users-mail::before,
  .users-table .users-time-login::before,
  .users-table .users-time-created::before {
    color: var(--muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 0.4rem;
  }
  .users-table .users-roles::before    { content: "Role"; }
  .users-table .users-2fa::before      { content: "2FA"; }
  .users-table .users-mail::before     { content: "Mail"; }
  .users-table .users-time-login::before   { content: "Posl. login"; }
  .users-table .users-time-created::before { content: "Vytvořen"; }
  .users-table .users-mail {
    text-align: left;     /* desktop má text-align: right */
  }

  /* /db/table — sticky první sloupec. background: inherit nefunguje
     v table cells, takže explicit bílá. */
  .db-rows th:first-child,
  .db-rows td:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 1px 0 0 var(--border);
  }
  .db-rows tbody tr:hover td:first-child {
    background: #fafbfd;
  }

  /* Pending OAuth list (.pending-list): na malém displeji actions pod info. */
  .pending-item {
    flex-wrap: wrap;
  }
  .pending-actions {
    width: 100%;
    margin-top: 0.4rem;
  }

  /* /users/{id} profile-edit-form: stack místo 2-col gridu. */
  .profile-edit-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  /* ---------------------------------------------------------------------
     Vodaci /admin/clanek edit form (article-form, field, existing-photos):
     - existing-photos mřížka přepnutá na 2 cols (z auto-fill 170px → 1 col
       na 360px se stretchnutým 110px obrázkem). aspect-ratio 4/3 místo
       fixed 110px height — obrázky se škálují podle dostupné šířky.
     - photo-controls zalomit pod sebe: cover-radio + delete-check pod fotkou
       v jedné řádce (space-between), photo-name na samostatný řádek pod nimi.
     - .article-form textarea: min-height místo rows="14", aby se na phone
       portrait nezabíral celý viewport. resize: vertical zachované.
     - form-actions: button + cancel link full-width pod sebou.
     --------------------------------------------------------------------- */
  .existing-photos {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }
  .photo-item img {
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .photo-controls {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
  }
  .photo-name {
    flex-basis: 100%;
    text-align: left;
    font-size: 0.75rem;
    order: 99;       /* na úplný spodek, pod cover/delete */
  }
  .article-form textarea {
    /* rows="14" by na phone portrait zabíralo > 60vh. Limit: max-height
       50vh, user může resize: vertical zvětšit. */
    min-height: 12rem;
    max-height: 50vh;
  }
  .form-actions {
    flex-wrap: wrap;
  }
  .form-actions .btn-primary,
  .form-actions .btn-cancel {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    min-width: 8rem;
  }
}

/* ==========================================================================
   ≤ 480px — phone portrait
   ========================================================================== */
@media (max-width: 480px) {
  .site-header .site-brand .site-name {
    font-size: 1rem;
  }
  .site-logo {
    height: 1.75rem;
  }

  .site-main {
    padding: 1rem;
    margin: 0.5rem auto;
    box-shadow: none;
    border-radius: 0;
  }

  /* Dropdown plně přes celou šířku viewportu (pod hlavičkou). Stále fixed
     (kotvený k viewportu, ne k avataru). */
  .user-menu-dropdown {
    left: 0.5rem;
    right: 0.5rem;
    max-width: none;
    min-width: 0;
  }

  /* Article header h1: default 2rem je na phone portrait moc. */
  .article-header h1,
  .article-card .card-title {
    font-size: 1.4rem;
    line-height: 1.3;
  }

  /* Galerie: ještě užší gap. */
  .gallery {
    gap: 0.3rem;
  }

  /* Article-form na phone portrait: textarea ještě menší (8rem min). */
  .article-form textarea {
    min-height: 8rem;
  }
}