/* ============================================================================
   LiteLLM Admin UI — mobile responsiveness overrides
   ----------------------------------------------------------------------------
   Injected by nginx for litellm1.neyobytes.com (see
   /etc/nginx/sites-available/litellm1.neyobytes.com.conf).

   Lives OUTSIDE the litellm package, so it survives `pip install -U litellm`.

   The UI has TWO different layouts (depending on route):
     - /ui/models-and-endpoints  → `<main class="flex-1">`
     - /ui/?page=models          → `<div class="flex flex-1">` + tremor TabGroup
   Selectors below cover both. Only styles phone-width screens (<= 768px).
   ========================================================================== */

@media (max-width: 768px) {

  html, body { max-width: 100%; }

  /* ---- 1. Layout roots: stop min-content from stretching the page ---- */
  main.flex-1,
  div.flex.flex-1 {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* The direct content wrapper inside the flex-1 root */
  main.flex-1 > div,
  div.flex.flex-1 > div {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* tremor layout chain (query-route) */
  .tremor-Grid-root,
  .tremor-Col-root,
  .tremor-TabGroup-root,
  .tremor-TabPanels-root,
  .tremor-TabPanel-root {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ---- 2. Tables own their horizontal scrolling (not the page) ---- */
  .tremor-Table-root,
  div.overflow-x-auto,
  div.custom-border {
    max-width: 100% !important;
    width: 100% !important;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- 3. Tab strip: scroll horizontally instead of clipping ---- */
  .tremor-TabList-root {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: auto !important;
  }
  .tremor-TabList-root > .flex {
    width: max-content !important;
    min-width: max-content !important;
    flex-wrap: nowrap !important;
  }

  /* ---- 4. Fixed-width controls become fluid (search / selects) ---- */
  main.flex-1 .w-64,
  main.flex-1 .w-72,
  main.flex-1 .w-80,
  main.flex-1 .w-48,
  main.flex-1 .w-96,
  main.flex-1 .min-w-\[10rem\],
  div.flex.flex-1 .w-64,
  div.flex.flex-1 .w-72,
  div.flex.flex-1 .w-80,
  div.flex.flex-1 .w-48,
  div.flex.flex-1 .w-96,
  div.flex.flex-1 .min-w-\[10rem\] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ---- 5. Filter/header rows wrap instead of overflowing ---- */
  main.flex-1 .flex.items-center.justify-between,
  main.flex-1 .flex.items-center.gap-4,
  div.flex.flex-1 .flex.items-center.justify-between,
  div.flex.flex-1 .flex.items-center.gap-4 {
    flex-wrap: wrap !important;
    gap: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* ---- 5b. "Missing a provider?" banner: grid layout (mobile) ---- */
  /* The banner is flex (icon | text | Request Provider | close). As a
     wrapped flex row its .flex-1.min-w-0 text collapses to ~3px (flex-basis
     0%), wrapping the heading char-by-char. Re-lay it as a grid.
     Targeted by its unique .border-blue-100 class (no :has(), so it also
     works on Safari < 15.4). */
  .bg-blue-50.border-blue-100 {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) 28px !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 10px !important;
  }
  .bg-blue-50.border-blue-100 > .w-10 {           /* icon */
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
  }
  .bg-blue-50.border-blue-100 > .flex-1.min-w-0 { /* message */
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: 0 !important;
  }
  .bg-blue-50.border-blue-100 > a {               /* Request Provider */
    grid-column: 2 / 4 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .bg-blue-50.border-blue-100 > button {          /* close X */
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  /* ---- 6. Multi-column grids stack ---- */
  main.flex-1 .grid-cols-2,
  main.flex-1 .grid-cols-3,
  main.flex-1 .grid-cols-4,
  div.flex.flex-1 .grid-cols-2,
  div.flex.flex-1 .grid-cols-3,
  div.flex.flex-1 .grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* ---- 7. Trim heavy padding / margins in the content area ---- */
  main.flex-1 .p-8,
  div.flex.flex-1 .p-8  { padding: 12px !important; }
  main.flex-1 .p-6,
  div.flex.flex-1 .p-6  { padding: 14px !important; }
  main.flex-1 .px-6,
  div.flex.flex-1 .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
  main.flex-1 .py-4,
  div.flex.flex-1 .py-4 { padding-top: 10px !important; padding-bottom: 10px !important; }
  main.flex-1 .mx-4,
  div.flex.flex-1 .mx-4 { margin-left: 0 !important; margin-right: 0 !important; }

  /* ---- 8. Top nav: drop marketing links, shrink logo, tighten gaps ---- */
  nav .max-w-48 { max-width: 110px !important; }
  nav .space-x-5 > * + * { margin-left: 8px !important; }

  nav .space-x-5 > a,               /* Slack, GitHub, Docs */
  nav .space-x-5 > button:first-of-type, /* Blog */
  nav .ant-tag /* version badge */ {
    display: none !important;
  }

  /* ---- 9. Comfortable touch targets ---- */
  nav .ant-btn,
  main.flex-1 .ant-btn,
  div.flex.flex-1 .ant-btn {
    min-height: 40px;
  }

  /* ---- 10. Table footer: "Showing X-Y" + pagination wraps ---- */
  /* Logs footer holds "Showing 1 - 50 of N results" and the
     "Page X of Y  Previous  Next" controls in one nowrap row (462px),
     which overflows the card on phones. Wrap onto separate lines and let
     the nested pagination row wrap again on narrow phones. */
  .tremor-TabPanel-root .flex.flex-col > .flex.items-center.space-x-4 {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
    column-gap: 8px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* reset Tailwind space-x sibling margins so wrapping uses gap instead */
  .tremor-TabPanel-root .flex.flex-col > .flex.items-center.space-x-4 > * {
    margin-left: 0 !important;
  }
  .tremor-TabPanel-root .flex.flex-col > .flex.items-center.space-x-4 .whitespace-nowrap {
    white-space: normal !important;
  }

  /* nested pagination row: "Page X of Y  Previous  Next" */
  .tremor-TabPanel-root .flex.flex-col > .flex.items-center.space-x-4 > .flex.items-center.space-x-2 {
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .tremor-TabPanel-root .flex.flex-col > .flex.items-center.space-x-4 > .flex.items-center.space-x-2 > * {
    margin-left: 0 !important;
  }
  /* page label sits on its own line above Previous/Next on narrow phones */
  .tremor-TabPanel-root .flex.flex-col > .flex.items-center.space-x-4 > .flex.items-center.space-x-2 > span:first-child {
    flex-basis: 100% !important;
    min-width: 0 !important;
  }

  /* ---- 11. "Quick feedback" popup: fit within the viewport ---- */
  .fixed.bottom-6.right-6.z-40 {
    max-width: calc(100vw - 32px) !important;
  }
}