/* Mobile fixes for Postiz (social.petalsforher.com).
 *
 * Postiz runs as the stock upstream image, so we cannot edit its components. Caddy injects
 * this file into every Postiz HTML page (see deploy/Caddyfile), and these rules override the
 * app's desktop-first layout at phone widths. Everything is inside a max-width media query,
 * so the desktop UI is untouched on larger screens.
 *
 * Postiz's markup is Tailwind with a custom theme (bg-newBgColorInner, bg-newBgLineColor,
 * w-[260px], grid-template-columns:136px..., bg-popup, ...). We target those stable class
 * fragments with [class*="..."] substring selectors rather than the hashed utility soup.
 *
 * Verified at 375px against ghcr.io/gitroomhq/postiz-app:v2.23.0 on the live instance:
 * calendar, the create-post editor, settings and analytics all fit with no horizontal clip.
 * If a future Postiz upgrade renames these classes, the rules simply stop applying (the
 * desktop layout returns) rather than breaking the page.
 */

@media (max-width: 768px) {
  /* Last-resort guard: never let the whole page scroll sideways. */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* The core bug: flex items default to min-width:auto, so Postiz's panels refuse to
   * shrink below their desktop content size and get clipped by an overflow-hidden parent.
   * Letting them shrink is what makes almost every screen fit. */
  [class*="bg-newBgColorInner"],
  [class*="bg-newBgLineColor"],
  .flex-1,
  .flex.flex-col,
  .flex.flex-row {
    min-width: 0 !important;
  }

  /* ---- The two-column app shell (calendar, settings, ...) ----
   * Postiz lays its pages out as [left column | content] in a `flex gap-[1px]` row.
   * Stack them so each gets the full width. */
  .flex.flex-1[class*="gap-[1px]"] {
    flex-direction: column !important;
  }

  /* The calendar's channels column is a fixed 260px panel whose inner card is
   * position:absolute (for its collapse animation) — put it back in normal flow. */
  [class*="w-[260px]"] {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  [class*="w-[260px]"] > [class*="bg-newBgColorInner"] {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
  }

  /* Trim the desktop 20px panel padding so content gets more of the narrow screen. */
  [class*="bg-newBgLineColor"] [class*="bg-newBgColorInner"] {
    padding: 12px !important;
  }

  /* The week/month calendar grid (136px time column + 7 day columns) can't fit a phone,
   * so give the content column horizontal scroll and the grid a readable min width,
   * instead of crushing the columns until the headers overlap. */
  [class*="bg-newBgColorInner"].flex-1 {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [class*="grid-template-columns:136px"] {
    min-width: 560px;
  }

  /* ---- The create-post editor modal ----
   * Desktop shows two 580px panes (editor + preview) side by side in a centered dialog.
   * Make the dialog full-screen, stack the panes, and let the footer wrap. */
  .bg-popup [class*="p-[40px]"] {
    padding: 0 !important;
  }
  .bg-popup [class*="rounded-[20px]"] {
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  .bg-popup [class*="rounded-[20px]"] > .flex-1.flex {
    flex-direction: column !important;
  }
  [class*="w-[580px]"] {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* The editor's bottom action bar (date, tags, save as draft, repeat, schedule) is a
   * fixed-height no-wrap row that overflows — let it grow and wrap. */
  .bg-popup [class*="h-[84px]"] {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .bg-popup [class*="justify-end"][class*="gap-[8px]"] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }
}