/* FIT Center — mobile redesign for Postiz (injected via nginx, no rebuild).
   Everything is gated to <=900px so the desktop layout is untouched. */

/* Injected floating buttons are hidden on desktop. */
#fit-rail-toggle, #fit-ch-toggle { display: none; }

@media (max-width: 900px) {
  /* ---------- 1) Reclaim space: trim the big outer paddings & gaps ---------- */
  .min-h-screen.p-\[12px\] { padding: 4px !important; }
  .flex-1.flex.gap-\[8px\] { gap: 3px !important; }
  .bg-newBgColorInner.flex-1.flex-col.flex.p-\[20px\].gap-\[12px\] {
    padding: 8px !important;
    gap: 6px !important;
  }

  /* ---------- 2) Header: shorter, with room for the two toggles ---------- */
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] {
    height: 56px !important;
    min-height: 56px !important;
    padding-inline-start: 90px !important;
    padding-inline-end: 8px !important;
    gap: 8px !important;
  }
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] .text-\[24px\] { font-size: 17px !important; }
  .bg-newBgColorInner.h-\[80px\].px-\[20px\] .gap-\[20px\] { gap: 9px !important; }

  /* ---------- 3) Left icon-rail: hidden by default, drawer when open ------- */
  body:not(.fit-rail-open) div:has(> #left-menu) {
    width: 0 !important; min-width: 0 !important; overflow: hidden !important;
  }
  body:not(.fit-rail-open) #left-menu { display: none !important; }
  body.fit-rail-open #left-menu {
    display: flex !important;
    z-index: 1000;
    background: var(--newBgColorInner, #15151f);
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
    border-radius: 0 12px 12px 0;
  }

  /* ---------- 4) Channels column: hidden by default, drawer when open ------ */
  body:not(.fit-ch-open) div.flex.relative.flex-col.w-\[260px\],
  body:not(.fit-ch-open) div.flex.relative.flex-col.w-\[100px\] {
    display: none !important;
  }
  body.fit-ch-open div.flex.relative.flex-col.w-\[260px\] {
    display: flex !important;
    position: fixed !important;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(86vw, 300px) !important;
    height: 100% !important;
    z-index: 1000;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
  }

  /* ---------- 5) Filters bar: row + wrap instead of a tall stacked column -- */
  .flex.flex-col.md\:flex-row.gap-\[8px\].items-center {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .min-w-\[200px\] { min-width: 0 !important; }
  .min-w-\[200px\] .text-\[14px\] { font-size: 13px !important; white-space: nowrap; }
  .w-\[74px\] { width: 56px !important; }

  /* ---------- 6) The two floating toggle buttons (rail + channels) -------- */
  #fit-rail-toggle, #fit-ch-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 13px;
    z-index: 1001;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  #fit-rail-toggle { inset-inline-start: 10px; }
  #fit-ch-toggle  { inset-inline-start: 50px; }
  #fit-rail-toggle:active, #fit-ch-toggle:active { background: rgba(255, 255, 255, .2); }
  #fit-rail-toggle svg, #fit-ch-toggle svg { width: 20px; height: 20px; display: block; }

  /* ---------- 7) Week grid: thin time column, WIDER day columns + h-scroll - */
  [class*="grid-template-columns:136px"] {
    grid-template-columns: 46px repeat(7, minmax(118px, 1fr)) !important;
    gap: 3px !important;
  }
  [class*="grid-template-columns:136px"] > .pe-4 {
    padding: 2px 1px !important;
    font-size: 10px !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  /* ---------- 8) Post edit/preview modal: fit the phone, keep NATIVE scroll -
     We deliberately do NOT flatten the inner scrollers into one page: the
     per-channel settings panel needs a definite-height ancestor for its own
     scroll area, and flattening it stops "Settings" from opening. So instead we
     keep Postiz's native model (each section scrolls) and just make it fit. --- */
  /* let the modal fit the screen width (it forces min 600px on desktop) */
  .min-w-\[600px\] { min-width: 0 !important; }
  .h-full.flex-1.p-\[40px\].flex.relative { padding: 6px !important; }
  /* stack "Create Post" (editor) over "Post Preview"; each keeps its own scroll */
  .bg-newBgColorInner.rounded-\[20px\].flex-col > .flex-1.flex {
    flex-direction: column !important;
  }
  .bg-newBgColorInner.rounded-\[20px\].flex-col > .flex-1.flex > * {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    min-height: 0 !important;
  }
  .w-\[580px\] { width: 100% !important; }
  /* trim the 65px section headers */
  .bg-newBgColorInner.rounded-\[20px\].flex-col .h-\[65px\] {
    height: 48px !important;
    font-size: 16px !important;
  }

  /* ---------- 8b) Modal footer: rows — [Delete | Date] / [Draft | Update] - */
  .h-\[84px\].py-\[20px\].border-t {
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: wrap !important;
    padding: 8px !important;
    gap: 8px !important;
  }
  /* tags + repeat group on its own row */
  .h-\[84px\].py-\[20px\].border-t > .flex-1.flex.ps-\[20px\] {
    flex: 1 1 100% !important;
    padding-inline-start: 0 !important;
    justify-content: center;
  }
  /* action group becomes a 2x2 grid: Delete, Date / Save as Draft, Update */
  .h-\[84px\].py-\[20px\].border-t > .pe-\[20px\].flex.items-center.justify-end {
    flex: 1 1 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding-inline-end: 0 !important;
  }
  .h-\[84px\].py-\[20px\].border-t > .pe-\[20px\].flex.items-center.justify-end > * {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
  }
  .h-\[84px\].py-\[20px\].border-t .min-w-\[180px\] { min-width: 0 !important; width: 100% !important; }

  /* hide our floating toggles while any modal/popup is open */
  body:has(.bg-popup) #fit-rail-toggle,
  body:has(.bg-popup) #fit-ch-toggle { display: none !important; }

  /* ---------- 9) Hide the floating assistant bubble + Discord widget ------ */
  .copilotKitButton,
  div.copilotKitButton,
  #support-discord { display: none !important; }

  /* ---------- 10) DAY view: was a collapsed absolute box (icons overlapped,
     no scroll). Make it flow with its own vertical scroll. ----------------- */
  .flex.flex-col.gap-\[10px\].flex-1.relative > .absolute.start-0.top-0.w-full.h-full {
    position: relative !important;
    height: auto !important;
    max-height: calc(100dvh - 150px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}