/*
 * admin-mobile.css — responsive layer over the pinned Decap CMS bundle.
 *
 * Decap 3.12.2 is a desktop-first React/Emotion app. On an iPhone 16
 * (393 CSS px) it renders ~800 px wide, producing three problems a
 * contributor hits immediately:
 *   1. ~407 px of dead horizontal scroll — the app shell carries a
 *      desktop min-width and the entry editor is a fixed side-by-side
 *      react-split-pane (form pane + live-preview iframe).
 *   2. The editor toolbar's Save / Publish / Delete / account controls
 *      overflow off the right edge and can't be reached.
 *   3. Form inputs are 15 px, so iOS Safari zooms the page on focus.
 *
 * We do NOT fork Decap to fix this (see
 * docs/decisions/0002-extend-decap-for-mobile-instead-of-forking.md).
 * Instead we override layout at a mobile breakpoint — the same
 * CSS-on-top approach the inline sidebar-overlay rule already used.
 *
 * Targeting: Emotion class hashes (`css-XXXX-Name`) rotate between Decap
 * versions, but the `-Name` suffix and react-split-pane's structural
 * classes (`.SplitPane` / `.Pane1` / `.Pane2` / `.Resizer`) are stable
 * across the versions we pin against. Every selector is an
 * attribute-substring or library-class match, so if Decap renames a
 * component the rule matches nothing and the layout falls back to
 * upstream defaults (degrades safe — never worse than today). The
 * `!important` flags beat Decap's Emotion + react-split-pane inline
 * styles, which a plain rule would lose specificity to.
 *
 * iOS WebKit compositing footguns (`body::before { position: fixed }`,
 * `@keyframes { transform: scale() }`, `backdrop-filter: blur()`) blank
 * the editor form on real iPhones and are banned by
 * e2e/admin-css-banned-patterns.test.js — keep this file clear of them.
 *
 * Breakpoint: 768 px. Phones in portrait (≤ ~430) and small tablets get
 * the single-column layout; an iPhone in landscape (852) stays wide
 * enough for the upstream side-by-side editor, so it keeps the desktop
 * layout.
 */

@media (max-width: 768px) {
  /* ── 1. Remove the desktop min-width floor ──────────────────────────
   * The shell + editor containers size themselves for the side-by-side
   * panes. Dropping their min-width lets the whole UI reflow to the
   * viewport width instead of forcing a horizontal scrollbar. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  #nc-root,
  [class*="AppWrapper"],
  [class*="AppHeader"],
  [class*="AppMainContainer"],
  [class*="Editor"],
  [class*="Toolbar"],
  [class*="CollectionContainer"],
  [class*="CollectionMain"],
  [class*="CollectionTop"],
  [class*="PreviewPaneContainer"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The top app header (collection nav + quick-add + account avatar) and
   * the per-collection header (title + "New <entry>") are single-row
   * desktop flex bars whose right-hand controls otherwise slide off the
   * screen. Let them wrap so the avatar/quick-add and the New button
   * stay on-screen. */
  [class*="AppHeader"],
  [class*="AppHeaderContent"],
  [class*="AppHeaderActions"],
  [class*="CollectionTop"] {
    flex-wrap: wrap !important;
    height: auto !important;
  }
  /* The sticky header wrapper has a fixed 56px height; once its controls
   * wrap to extra rows, the overflow spills onto the content below (the
   * account avatar lands on the collection list). Let it grow. */
  [class*="AppHeader"] {
    min-height: 0 !important;
  }

  /* ── 2. Stop iOS Safari's focus-zoom ────────────────────────────────
   * iOS zooms the viewport whenever a focused field's font-size is
   * < 16 px. Decap's inputs/textareas are 15 px. */
  [class*="AppMainContainer"] input,
  [class*="AppMainContainer"] textarea,
  [class*="AppMainContainer"] select,
  [class*="AppMainContainer"] [role="textbox"] {
    font-size: 16px !important;
  }

  /* ── 3. Put the editor into normal document flow ────────────────────
   * Decap fills the screen with an absolutely-positioned, fixed-height
   * (100vh) editor container whose panes scroll internally. On a phone
   * that traps the form in a ~393px box and parks the toolbar's top half
   * behind the sticky app header. Drop the editor into normal flow so
   * the whole page scrolls and the toolbar sits below the header. */
  [class*="EditorContainer"] {
    position: static !important;
    height: auto !important;
  }

  /* ── 4. Collapse the side-by-side editor to a single column ─────────
   * Decap renders <SplitPane>{form}{preview-iframe}</SplitPane>: the
   * form is `.Pane1`, the live-preview iframe is `.Pane2`. The repo
   * already ships /preview/ as the editor's WYSIWYG (opened in a second
   * tab), so the inline preview pane is redundant on a phone and only
   * adds horizontal scroll. Give the form the full width, let it size to
   * its content, and drop the preview pane + drag handle. */
  .SplitPane,
  .SplitPane .Pane1 {
    position: static !important;
    height: auto !important;
  }
  .SplitPane .Pane1 {
    width: 100% !important;
    left: 0 !important;
    flex: 1 1 100% !important;
  }
  .SplitPane .Pane2,
  .Resizer {
    display: none !important;
  }

  /* ── 5. Make the editor toolbar reachable ───────────────────────────
   * The toolbar is laid out for desktop width, so on a phone its Save /
   * Publish / Delete controls overflow off the right edge. Let it wrap
   * to as many rows as it needs, with each control in normal flow. */
  [class*="ToolbarContainer"] {
    position: static !important;
    height: auto !important;
    flex-wrap: wrap !important;
    row-gap: 0.4rem;
  }
  /* Each toolbar section (back link, Save/Publish/Delete, status) takes
   * its own full-width row; sections and their sub-sections wrap their
   * buttons, so nothing is squeezed into a sliver. */
  [class*="ToolbarContainer"] [class*="ToolbarSection"],
  [class*="ToolbarContainer"] [class*="ToolbarSubSection"] {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    justify-content: flex-start !important;
    gap: 0.4rem;
  }
  [class*="ToolbarContainer"] [class*="ToolbarSection"] {
    flex: 1 1 100% !important;
  }
  /* Buttons size to their full label (no shrink, no ellipsis) and wrap
   * as whole units, instead of all collapsing onto one row until "Save"
   * truncates to "S." and "Delete published entry" to "Delete …". */
  [class*="ToolbarContainer"] button,
  [class*="ToolbarContainer"] [class*="ToolbarButton"],
  [class*="ToolbarContainer"] [class*="ToolbarDropdown"] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  /* ── 6. Stack the collection list (sidebar over entries) ────────────
   * The collection screen is a desktop two-column flex row (collection
   * nav + entries). Stack it so the entries column isn't pushed off the
   * right edge. */
  [class*="CollectionContainer"] {
    display: block !important;
  }
  /* The entries column (header + controls + cards) right-aligns and
   * collapses to content width on a phone (its flow column aligns its
   * items to the end). Force it to a full-width, left-aligned single
   * column. */
  [class*="CollectionMain"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    /* Desktop reserves ~280px of left padding for the side rail; with
     * the nav stacked above, that gutter would crush the entries into a
     * sliver on the right. */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* The descendant prefix lifts these to two-class specificity so they
   * beat Decap's own single-class Emotion rules, which would otherwise
   * win the tie on source order (Emotion injects its <style> at runtime,
   * after this linked sheet). */
  [class*="CollectionMain"] > *,
  [class*="CollectionContainer"] [class*="CollectionTopContainer"],
  [class*="CollectionContainer"] [class*="CollectionControlsContainer"],
  [class*="CollectionContainer"] [class*="CardsGrid"] {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }

  /* Collection nav sidebar: was an inline rule in admin/index*.html.
   * Stack it above the entries with a bounded height instead of letting
   * it overlap the content as a side rail. */
  aside[class*="SidebarContainer"] {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    max-height: 35vh;
    overflow-y: auto;
    border-bottom: 1px solid #d0d7de;
  }

  /* ── 7. Media library modal ─────────────────────────────────────────
   * The media-library modal (`StyledModal` card → `LibraryTop` header
   * with the title + Copy Path / Download / Delete / Upload buttons,
   * then `CardGridContainer`) is sized for desktop: the header's
   * non-wrapping button row has a ~500px min-content width that
   * overflows the card and runs the action buttons off the right edge
   * of the phone (they become unreachable). Widen the card to the
   * viewport and wrap the header + button rows so every control stays
   * on-screen. `StyledModal` is Decap's generic modal card, so this also
   * fits other dialogs (e.g. delete confirmations) to the phone. */
  [class*="StyledModal"] {
    width: calc(100vw - 1.5rem) !important;
    max-width: calc(100vw - 1.5rem) !important;
    min-width: 0 !important;
    /* Keep Decap's grid layout. The header row is a FIXED height
     * (`grid-template-rows: 120px auto`) sized for one button row; once
     * the buttons wrap it clips them, and the wrapped row renders behind
     * the asset grid (Delete disappears). Make the header track `auto`
     * so it grows to its content, and keep the body track filling the
     * rest — the asset grid is a react-window list whose height comes
     * from that body track, so dropping the grid (display:block) would
     * collapse it to 0 and show no images. */
    grid-template-rows: auto minmax(0, 1fr) !important;
  }
  [class*="LibraryTop"],
  [class*="RowContainer"],
  [class*="CardGridContainer"],
  [class*="SearchContainer"] {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* The header has a fixed one-row height; once the buttons wrap to a
   * second row, the extra row overflows the (grid) cell and is hidden
   * behind the search bar — so "Delete selected" disappears. Let the
   * header grow to fit the wrapped rows. */
  [class*="LibraryTop"] {
    height: auto !important;
    min-height: 0 !important;
  }
  [class*="RowContainer"],
  [class*="ButtonsContainer"] {
    flex-wrap: wrap !important;
    row-gap: 0.5rem;
  }
  /* Action buttons keep their natural width and wrap as whole units
   * (Copy Path / Download / Delete / Upload), rather than being clipped. */
  [class*="ButtonsContainer"] > * {
    flex: 0 0 auto !important;
  }
}