/* ---------------------------------------------------------------------------
   Local overrides for Postiz, injected by nginx into every HTML response.
   Nothing here is part of the upstream image, so `docker compose pull` cannot
   lose it. Selectors use [class*="..."] rather than escaped Tailwind class
   names (.w-\[80px\]) purely because the escaping is error-prone; they are
   matched against the arbitrary-value classes the app actually ships.
   --------------------------------------------------------------------------- */

/* === 1. De-branding ====================================================== */

/* The 60x60 "P" mark at the top of the left rail is an inline <svg>, so it
   cannot be swapped by replacing a file. Hide it and paint our own mark on
   the rail's flex column instead. */
svg[class*="min-w-[60px]"][class*="min-h-[60px]"] {
  display: none !important;
}
div[class*="w-[64px]"][class*="fixed"] > div[class*="gap-[32px]"]::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  margin: 8px auto 0;
  background: url("/_local/logo.svg") center / contain no-repeat;
}

/* Footer links to the vendor's own site, on the login page and elsewhere. */
a[href*="postiz.com"],
a[href*="gitroom.com"] {
  display: none !important;
}

/* === 2. Phone layout ===================================================== */
/* Desktop is untouched. Everything below only applies on narrow screens. */

@media (max-width: 900px) {
  /* Page shell: reclaim the 12px gutter, and leave room for the bottom bar. */
  div[class*="min-h-screen"][class*="p-[12px]"] {
    padding: 6px 6px 74px !important;
    min-width: 0 !important;
  }

  /* The rail is a fixed 64px column, and it is a CHILD of the 80px spacer
     that holds its place in the flow. So the spacer must be collapsed, not
     hidden: display:none here takes the navigation down with it. */
  div[class*="w-[80px]"][class*="bg-newBgColorInner"] {
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }
  div[class*="w-[64px]"][class*="fixed"] {
    inset: auto 0 0 0 !important;
    inset-inline-start: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 70;
    /* Fallback only. The app has no CSS variables for its theme colours, so
       brand.js copies the real surface colour off the header at runtime and
       sets it inline here; that keeps the bar correct in light AND dark. */
    background: #ffffff;
    border-top: 1px solid rgba(128, 128, 128, 0.25);
    padding-bottom: env(safe-area-inset-bottom); /* iPhone home indicator */
  }
  div[class*="w-[64px]"][class*="fixed"] > div {
    flex-direction: row !important;
    height: auto !important;
    gap: 0 !important;
    padding: 2px 2px !important;
    align-items: center !important;
  }
  /* Both link groups (main nav, and settings pinned to the bottom) sit in a
     single row; settings must not keep its margin-top:auto. */
  div[class*="w-[64px]"][class*="fixed"] > div > div {
    flex-direction: row !important;
    gap: 0 !important;
    flex: 1 1 auto !important;
    justify-content: space-around !important;
    margin: 0 !important;
  }
  div[class*="w-[64px]"][class*="fixed"] a {
    width: auto !important;
    min-width: 0 !important;
    height: 52px !important;
    flex: 1 1 0 !important;
    padding: 4px 2px !important;
  }
  /* Our mark would eat a nav slot down here. */
  div[class*="w-[64px]"][class*="fixed"] > div[class*="gap-[32px]"]::before {
    display: none !important;
  }

  /* The content pane clips its own children (overflow-hidden) while the main
     column renders wider than the pane. Stacking the two columns below fixes
     the width; this makes the pane grow with its content so the PAGE scrolls.
     Setting overflow:auto here instead would trap the calendar in a nested
     scroll box, which on a phone is worse than the clipping was. */
  div[class*="bg-newBgLineColor"][class*="overflow-hidden"] {
    overflow: visible !important;
    height: auto !important;
  }

  /* List (queue) view toolbar: pagination, the All/Scheduled/Draft/Published
     filters and the view toggle sit in one flex-row that does not wrap, so it
     demands 633px and drags the whole page out with it. */
  div[class*="flex-grow"][class*="flex-row"][class*="gap-[10px]"] {
    flex-wrap: wrap !important;
    row-gap: 8px !important;
  }

  /* Flex items default to min-width:auto and refuse to shrink below their
     content, which is how one wide child widens the entire document. Nothing
     in this chain should ever be wider than the screen. */
  div[class*="bg-newBgLineColor"] {
    min-width: 0 !important;
    max-width: 100% !important;
  }
  div[class*="flex-1"][class*="gap-[8px]"] > * {
    min-width: 0 !important;
  }

  /* Header: 80px fixed row with title + icons on one line. Let it wrap. */
  div[class*="h-[80px]"][class*="bg-newBgColorInner"] {
    height: auto !important;
    min-height: 52px !important;
    flex-wrap: wrap !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }
  div[class*="text-[24px]"][class*="font-[600]"] {
    font-size: 18px !important;
  }

  /* Body row: side column beside main. Stack them. */
  div[class~="flex"][class*="flex-1"][class*="gap-[1px]"] {
    flex-direction: column !important;
  }
  div[class*="w-[260px]"] {
    width: 100% !important;
    flex: 0 0 auto !important;
  }
  /* Its child is absolutely positioned inside a zero-width parent, which is
     why "No channels yet" was printed on top of the calendar. */
  div[class*="w-[260px]"] > div[class*="absolute"] {
    position: relative !important;
    height: auto !important;
    width: 100% !important;
  }

  div[class*="p-[20px]"][class*="flex-1"] {
    padding: 10px !important;
  }

  /* Modals are built with min-w-[600px], which is 210px wider than the
     screen. Without this every dialog (Add Channel, Edit Time Slots, the
     post composer) opens partly off the right edge. */
  div[class*="min-w-[600px]"] {
    min-width: 0 !important;
    width: 100% !important;
  }
  div[class*="max-w-[600px]"] {
    max-width: 100% !important;
  }

  /* Dialog chrome: 32px of padding and a 40px gap is a lot of a 390px screen. */
  div[class*="p-[32px]"][class*="rounded-[24px]"] {
    padding: 16px !important;
    gap: 20px !important;
    width: 100% !important;
  }

  /* Add Channel picker. The platform grid is grid-cols-5, so each tile is
     57px wide while the card is a fixed h-[100px]. A label like "Instagram
     (Facebook Business)" then wraps to ~99px of text which, with the icon,
     is taller than the card and centred inside it, so both ends spill out
     over the neighbouring rows. Three columns and a card that can grow. */
  div[class*="grid-cols-5"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }
  div[class*="grid-cols-5"] > * {
    min-width: 0 !important;
  }
  div[class*="bg-newTableHeader"][class*="h-[100px]"] {
    height: auto !important;
    min-height: 108px !important;
    padding: 10px 6px !important;
    gap: 6px !important;
  }
  div[class*="bg-newTableHeader"][class*="h-[100px]"] div[class*="whitespace-pre-wrap"] {
    font-size: 11px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
    width: 100% !important;
  }

  /* Calendar toolbar: date range, Day/Week/Month and Today on one row is
     ~20px too wide, so Today hangs off the edge. Let it wrap. */
  div[class*="md:flex-row"][class*="select-none"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  /* The empty-state artwork is min-w-[100%], so it takes a full screen of
     height and pushes the calendar below the fold. */
  img[alt="No channels"] {
    min-width: 0 !important;
    width: auto !important;
    max-height: 120px !important;
  }

  /* The week grid is [136px repeat(7, minmax(0,1fr))]. On a 350px pane that
     leaves ~28px per day, which is why the weekday headers overprinted each
     other. Give the columns a readable minimum and scroll sideways instead
     of compressing to nothing. */
  div[class*="grid-template-columns:136px"] {
    grid-template-columns: 56px repeat(7, minmax(92px, 1fr)) !important;
    min-width: 700px !important;
  }
  /* "08/06/2026" at 14px does not fit a day column; shrink just the header
     cells rather than widening every column further. Scoped by h-[62px]:
     bg-newTableHeader alone also matches the Add Channel tiles, where
     white-space:nowrap is exactly wrong. */
  div[class*="bg-newTableHeader"][class*="h-[62px]"] > div {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
  div[class*="relative"]:has(> div[class*="grid-template-columns:136px"]),
  div[class*="flex-1"]:has(> div > div[class*="grid-template-columns:136px"]) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Integrations page: a 4-up grid whose cells hold whitespace-pre-wrap text
     that refuses to shrink, so the grid measured 458px inside a 350px pane
     and dragged the whole document out to 482px. Grid items default to
     min-width:auto, which is what stops them shrinking. */
  div[class*="grid-cols-4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }
  div[class*="grid-cols-4"] > * {
    min-width: 0 !important;
  }
  /* These cards carry the class whitespace-pre-wrap but COMPUTE to nowrap,
     so a one-line description renders 326px wide inside a 130px card and
     nothing can shrink it. Force the wrap rather than trusting the class. */
  div[class*="whitespace-pre-wrap"] {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }

  /* Seven labels across 390px: shrink the type so nothing truncates. */
  /* Seven labels across 390px is ~55px each, and "Integrations" does not fit
     at 10px, so the active pill clipped it. */
  div[class*="w-[64px]"][class*="fixed"] a span,
  div[class*="w-[64px]"][class*="fixed"] a div {
    font-size: 9px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.2px !important;
    white-space: nowrap !important;
  }
}