/* ================================================================
   OctaDeploy · Mobile TopBar fix
   Bug: the project-search input has a fixed w-64 (256px) with no
   responsive class, so on narrow viewports it — together with the
   "Deploy app" button right after it — overflows the header and gets
   clipped by the parent's overflow-hidden. Result: "Deploy app" (the
   primary CTA) renders off-screen and is completely untappable on
   mobile. Hiding the search below the sidebar's own lg: breakpoint
   frees enough width for the button to stay on-screen and reachable.

   Matched on the input's own w-64 class, NOT its placeholder text —
   the placeholder is localized ("Pretraži projekte..." / "Search
   projects..." / German equivalent depending on account language),
   so a text-based selector only fixed this for Bosnian-language
   accounts and silently did nothing for EN/DE users.

   padding-left is bumped further than padding-right because the
   mobile menu toggle is `position: fixed; left: 1rem` — fixed to the
   viewport, not laid out inside the header — so it sits OVER the
   header's left edge instead of pushing content aside. At the
   original px-8 padding the "Dashboard / Overview" breadcrumb started
   at the same x as the button and its first ~40px ("Dash") rendered
   underneath it, leaving only "board / Overview" visible.
================================================================ */
@media (max-width: 1023px) {
  header .relative.mr-4:has(input.w-64) {
    display: none !important;
  }
  header {
    padding-left: 4rem !important;
    padding-right: 1rem !important;
  }
}

/* ================================================================
   Data tables clipped instead of scrollable
   Bug: several admin tables (Users, Domains, ...) wrap their <table>
   in a rounded-corner card using overflow-hidden (meant to clip the
   corners), but the table itself is wider than a mobile viewport.
   With overflow-hidden there's no way to scroll to the clipped
   columns — they're just gone (e.g. Role/actions on /users). The
   Applications list already gets this right with overflow-x-auto;
   apply the same fix to every overflow-hidden card that wraps a
   table directly, site-wide, without touching unrelated cards used
   purely for image/rounded-corner clipping (which never contain a
   <table>).
================================================================ */
main .overflow-hidden:has(> table) {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ================================================================
   App-detail tab strip dragging the whole page sideways
   Bug: the tab row (Overview / Logs / Deployments / Database / File
   Manager / Backup / Settings) is a nowrap flex row ~673px wide with
   overflow-x: visible, so on a phone it spills past every ancestor up
   to <main>. <main> is overflow-y-auto, which per spec computes its
   overflow-x to auto — so the ENTIRE page became horizontally
   scrollable, and one stray swipe shifted the title, repo URL, action
   buttons and cards off the left edge (they looked "scattered", but
   were just scrolled). Letting the strip wrap keeps every tab
   reachable and stops the spill at its source; this is the same
   treatment the app's other tab strip already uses (-mb-px flex
   flex-wrap), which is why that one never had the problem. No-op on
   desktop, where the row fits on one line anyway.
================================================================ */
main nav.-mb-px:not(.flex-wrap) {
  flex-wrap: wrap;
}

/* ================================================================
   App-detail tab panels overflowing on phones
   Same root cause as the tab strip above, in four more places — a
   nowrap flex row whose content is simply wider than a phone, with
   nothing allowed to shrink or wrap, so it spills out to <main> and
   makes the whole page drag sideways:

     Database      406px — two <code> chips (container + network name)
                           inline in a nowrap notice row
     File Manager  464px — the Upload / Download ZIP / Upload ZIP /
                           Refresh toolbar, pinned by shrink-0
     Backup        399px — the Refresh + Create backup button pair
     Settings      450px — the owner <select>, held open at 388px by
                           its longest option ("Admin (habetech@…)")

   Overview, Logs and Deployments were already clean.

   Three rules cover all four. They are deliberately narrow in effect:
   flex-wrap only does anything once a row would otherwise overflow,
   and min-width:0 only lets a flex child shrink to the width its
   parent already grants it — both are no-ops wherever content fits,
   which is why desktop is untouched. flex-col rows are excluded so
   stacked layouts don't start wrapping sideways.
================================================================ */
@media (max-width: 1023px) {
  main div.flex:not(.flex-col) {
    flex-wrap: wrap;
  }
  /* A button toolbar marked shrink-0 refuses to narrow, so its own flex-wrap never
     engages and it stays at max-content width (the File Manager toolbar sat at 431px
     inside a 343px card). Released only for rows that actually hold buttons — the
     shrink-0 on things like avatar circles is protecting a fixed size and must stand. */
  main div.flex.shrink-0:has(> button) {
    flex-shrink: 1;
    min-width: 0;
  }
  /* Flex/grid children default to min-width:auto, i.e. never smaller than their
     content — that is what keeps the owner <select> at 388px inside a 343px row. */
  main .flex-1,
  main select,
  main input {
    min-width: 0;
  }
  /* Long unbreakable identifiers (container names, repo URLs, DB hosts) wrap
     instead of forcing their row wider than the screen. */
  main code,
  main .font-mono {
    overflow-wrap: anywhere;
  }
}

/* ================================================================
   Backup tab was the only screen painted in blue
   Every primary action in the app is indigo-600 (Deploy app, Save,
   Redeploy…) and the accent scale in light.css is built on it, but
   the Backup tab's "Create backup" button and its info panel used
   blue-600/blue-500. The two hues are close enough that they don't
   read as a deliberate second accent — just as a screen that doesn't
   match the rest. Remapped onto the same indigo ramp; the semantic
   colors elsewhere (emerald = running/success, rose = delete) are
   left alone, since those carry meaning rather than brand.
================================================================ */
main .bg-blue-600 { background-color: #4f46e5; }        /* indigo-600 */
main .hover\:bg-blue-500:hover { background-color: #6366f1; } /* indigo-500 */
main .bg-blue-500\/10 { background-color: rgba(99, 102, 241, .10); }
main .border-blue-500\/20 { border-color: rgba(99, 102, 241, .20); }