/* ============================================================================
   MyChefVision — app responsive layer
   ============================================================================

   The marketing site already stacks properly (style.css § "COMPREHENSIVE
   MOBILE RESPONSIVE LAYER"). The signed-in shells do not: dashboard, admin and
   chef-app pages declare their column layouts as inline `style="display:grid;
   grid-template-columns:2fr 1fr"` attributes, and an inline declaration beats
   every plain stylesheet rule. So a `1fr 320px` split stays a `1fr 320px`
   split at 360px wide and the right-hand rail runs off the screen.

   This file fixes that centrally instead of rewriting ~90 inline styles by
   hand. Two properties keep it reviewable:

     · Every layout-changing rule lives inside a media query, so a desktop
       viewport renders as before. The only unconditional rules are the four
       containment guards — § 1's `min-width: 0`, § 4's `.rt-scroll`, § 7d's
       mega-menu clamp and § 8's replaced-element `max-width` — which stop a
       box from exceeding its parent and have no effect until one would.
     · `!important` appears only where a rule has to outrank an inline `style`
       attribute — that is the whole point of the file, not sloppiness.

   Opting out: add `data-keep-cols` to any grid that is meant to stay N-across
   at every width (heatmaps, podiums — layouts where stacking destroys the
   meaning rather than just the comfort).

   -- Breakpoint reasoning ---------------------------------------------------

   The dashboard/admin shells dock a 260px sidebar until 900px, below which it
   slides off-canvas and the page gets the viewport back. So the content column
   is at its *narrowest just above 900px*, not at the bottom of the range:

       viewport 1104px  ->  content ~780px   (1104 - 260 sidebar - 64 padding)
       viewport  901px  ->  content ~577px
       viewport  899px  ->  content ~867px   <- wider again, sidebar is gone
       viewport  812px  ->  content ~780px

   That is why the collapse rules come in pairs: one for the docked-sidebar
   band (901-1104px) scoped to `.page`, one global for the off-canvas band.
   780px is where a `2fr 1fr` split leaves its rail under ~260px and stops
   being usable; 660px is where a four-up tile row drops under ~150px a tile.
   ========================================================================== */


/* ============================================================================
   1 · Overflow guards
   ========================================================================== */

/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content — the usual reason a long word or a wide table pushes a
   whole page sideways instead of scrolling inside its own box. */
.page > *,
.app-body > *,
.card,
.grid > *,
[style*="display:grid"] > *,
[style*="display: grid"] > * {
  min-width: 0;
}

@media (max-width: 900px) {
  /* Unbreakable strings — API tokens, camera RTSP URLs, model checkpoint
     names, e-mail addresses — are the other common source of sideways drift. */
  .page,
  .app-body {
    overflow-wrap: break-word;
  }
  .page code,
  .page pre,
  .page .mono,
  .page [style*="monospace"] {
    overflow-wrap: anywhere;
  }
}


/* ============================================================================
   2 · Inline grid collapse — splits, rails and two-up forms
   ============================================================================
   Anything that is not a `repeat()` tile row: `2fr 1fr`, `1fr 320px`,
   `1.4fr 1fr`, `1fr 1fr`, `auto 1fr`. These are content+rail or label+field
   layouts, and below ~780px of content they all want to be one column.
   `auto-fit`/`auto-fill` tracks already reflow on their own, so they are
   excluded rather than overridden. */

@media (min-width: 901px) and (max-width: 1104px) {
  .page [style*="grid-template-columns"]:not([style*="repeat"]):not([style*="auto-fit"]):not([style*="auto-fill"]):not([data-keep-cols]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 812px) {
  [style*="grid-template-columns"]:not([style*="repeat"]):not([style*="auto-fit"]):not([style*="auto-fill"]):not([data-keep-cols]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* ============================================================================
   3 · Inline grid collapse — repeat() tile rows
   ============================================================================
   Four-up and wider stat/filter/action rows step down. Two- and three-up rows
   are left alone: they are compact stat cells that still read fine at 110px a
   piece, and collapsing a three-up leaves an orphan.
   The selectors enumerate `repeat(4` … `repeat(8` rather than matching any
   `repeat(`, so dense calendar rows like `repeat(10, …)` keep every column. */

/* Four-up rows: a tile stops being readable under ~150px, so 4 across needs
   about 660px of content width. */
@media (min-width: 901px) and (max-width: 984px) {
  .page [style*="grid-template-columns"][style*="repeat(4"]:not([data-keep-cols]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Five- to eight-up rows — filter bars, mostly. Six 150px fields want ~900px
   of content, which a docked sidebar does not leave until about 1224px of
   viewport, so these step down much earlier and in two stages. */
@media (min-width: 901px) and (max-width: 1224px) {
  .page [style*="grid-template-columns"][style*="repeat(5"]:not([data-keep-cols]),
  .page [style*="grid-template-columns"][style*="repeat(6"]:not([data-keep-cols]),
  .page [style*="grid-template-columns"][style*="repeat(7"]:not([data-keep-cols]),
  .page [style*="grid-template-columns"][style*="repeat(8"]:not([data-keep-cols]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  [style*="grid-template-columns"][style*="repeat(5"]:not([data-keep-cols]),
  [style*="grid-template-columns"][style*="repeat(6"]:not([data-keep-cols]),
  [style*="grid-template-columns"][style*="repeat(7"]:not([data-keep-cols]),
  [style*="grid-template-columns"][style*="repeat(8"]:not([data-keep-cols]) {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 692px) {
  [style*="grid-template-columns"][style*="repeat(4"]:not([data-keep-cols]),
  [style*="grid-template-columns"][style*="repeat(5"]:not([data-keep-cols]),
  [style*="grid-template-columns"][style*="repeat(6"]:not([data-keep-cols]),
  [style*="grid-template-columns"][style*="repeat(7"]:not([data-keep-cols]),
  [style*="grid-template-columns"][style*="repeat(8"]:not([data-keep-cols]) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  /* A `grid-column: span 2` child inside a row that just became two columns
     would otherwise take the whole row and strand its neighbour. */
  [style*="grid-template-columns"][style*="repeat("] > [style*="grid-column:span 2"],
  [style*="grid-template-columns"][style*="repeat("] > [style*="grid-column: span 2"] {
    grid-column: 1 / -1 !important;
  }
}

/* Button pairs inside a filter cell push out of the cell they sit in. Wrap the
   row rather than let a button shrink: `.btn` is `white-space: nowrap`, so
   shrinking spills the label instead of containing it. */
@media (max-width: 1224px) {
  [style*="display:flex"]:has(> .btn),
  [style*="display: flex"]:has(> .btn) {
    flex-wrap: wrap;
  }
}


/* ============================================================================
   4 · Wide tables
   ============================================================================
   responsive.js wraps every table that has no scrollable ancestor in
   `.rt-scroll`, so a 960px-wide stock table scrolls inside its card instead of
   widening the page. The wrapper is inert above the breakpoint. */

.rt-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

@media (max-width: 900px) {
  /* Cells keep their inline min-widths — the point is to scroll the table, not
     to crush it into an unreadable column of wrapped fragments. */
  .rt-scroll > table {
    max-width: none;
  }
  /* A sticky first column is what makes a scrolled row readable; several
     tables already ask for it, so make sure it survives inside the wrapper. */
  .rt-scroll th[style*="position:sticky"],
  .rt-scroll td[style*="position:sticky"] {
    z-index: 1;
  }
}


/* ============================================================================
   5 · Header and action rows
   ============================================================================
   `display:flex; justify-content:space-between` is the house pattern for
   "title on the left, buttons on the right". It is also the pattern that
   overflows first, because neither side is allowed to wrap. */

/* Tab strips scroll rather than wrap — a wrapped tab row reads as two separate
   controls, and the underline that marks the active tab stops lining up with
   the content below. This is the treatment video-analysis.css already gives
   `.va-tabs`; `.tab-nav` never got it. */
@media (max-width: 900px) {
  .tab-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .tab-nav .tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media (max-width: 640px) {
  [style*="display:flex"][style*="justify-content:space-between"]:not([style*="flex-direction:column"]),
  [style*="display: flex"][style*="justify-content: space-between"]:not([style*="flex-direction: column"]) {
    flex-wrap: wrap;
  }
  .card-head {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  /* Button clusters go full-width rather than shrinking below a tap target. */
  .page-header > div:last-child:not(:only-child) {
    width: 100%;
  }
  .page-header .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}


/* ============================================================================
   6 · Topbar — keep the shell's controls reachable on a phone
   ============================================================================
   § 7 hides `.topbar-search` and the branch `<select>` below 900px, as the
   original (dead) style.css block intended. On its own that would remove
   search and the outlet switcher from mobile entirely rather than adapt them,
   so the dashboard drawer carries both — see the `.drawer-tools` block in
   partials/dashboard-sidebar.blade.php. The admin topbar's search box is a
   placeholder wired to nothing, so the admin drawer has no counterpart. */

@media (max-width: 900px) {
  .drawer-tools {
    display: block;
    padding: 0 0.25rem 1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .drawer-tools .drawer-tools__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 0.4rem;
  }
  .drawer-tools input,
  .drawer-tools select {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 16px; /* < 16px makes iOS zoom the whole shell on focus */
  }
  .drawer-tools input::placeholder {
    color: rgba(255, 255, 255, 0.4);
  }
  .drawer-tools select option {
    color: #1a0a00;
  }
  .drawer-tools form + form {
    margin-top: 0.5rem;
  }
}

/* Above the drawer breakpoint the topbar owns these controls. */
@media (min-width: 901px) {
  .drawer-tools {
    display: none;
  }
}


/* ============================================================================
   7 · Shell below the sidebar breakpoint
   ============================================================================
   These rules were originally in style.css next to the `.sidebar` off-canvas
   block, ~90 lines ABOVE the components they target, so a later
   same-specificity base rule quietly beat every one of them: the topbar search
   never hid, `.page` kept its 2rem desktop padding, and the account chip was
   pushed off the right edge of every dashboard and admin page on a phone.
   admin-premium.css re-declares `.topbar-search` too, so the fix has to live
   in the last stylesheet the shells load — this one. */

@media (max-width: 900px) {
  .topbar {
    padding: 0.625rem 1rem;
    gap: 0.5rem;
  }
  /* Search and the branch switcher move into the drawer (see § 6). */
  .topbar-search {
    display: none;
  }
  .topbar-actions {
    gap: 0.4rem;
    min-width: 0;
  }
  .topbar-actions select {
    display: none;
  }
  .user-chip span:not(.avatar) {
    display: none;
  }
  .user-chip {
    min-width: 0;
  }
  /* Admin topbar: the role badge and the name/role stack are the two widest
     things in the row and neither survives a 360px viewport. The chevron stays
     — it is the only thing left marking the avatar as a menu, and at 15px it
     costs nothing. */
  .admin-pill,
  .user-chip__meta {
    display: none;
  }
  .page {
    padding: 1rem;
    max-width: 100%;
  }
  .page-title {
    font-size: 1.25rem;
  }
  .stat-card .value {
    font-size: 1.25rem;
  }
  /* The off-canvas drawer must not exceed the phone it is opening on. */
  .sidebar {
    width: min(260px, 84vw);
  }
}

@media (max-width: 640px) {
  .page {
    padding: 0.875rem;
  }
  /* Tap targets — 44px is the smallest reliably hittable control. */
  .btn,
  .sidebar-toggle,
  .nav-item {
    min-height: 44px;
  }
  .btn-sm {
    min-height: 38px;
  }
  .card {
    padding: 1rem;
  }
  .card-head {
    padding: 0.875rem 1rem;
  }
  .page-title {
    font-size: 1.15rem;
  }
  /* Action clusters beside a page title are the last thing with room; let them
     wrap onto their own line rather than run off the edge. `flex-wrap` is
     inert on the non-flex title block, so this can be a blanket child rule. */
  .page-header > * {
    flex-wrap: wrap;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .table {
    font-size: 0.75rem;
  }
  .table th,
  .table td {
    padding: 0.5rem 0.625rem;
  }
}


/* ============================================================================
   7b · Public site header
   ============================================================================
   Between the logo, the demo CTA and the drawer toggle the header row needs
   ~414px at its current sizes, so it overflows every phone. restaurant-theme's
   `.site-header .hd-logo img { height:36px !important }` outranks style.css's
   ≤480 rule, so the small-screen sizing has to be re-asserted at the same
   specificity from here. */

@media (max-width: 480px) {
  .site-header .hd-logo img {
    height: 26px !important;
  }
  .hd-logo {
    padding: 0.25rem 0.5rem !important;
  }
  .hd-inner {
    padding: 0.5rem 0.75rem !important;
    gap: 0.5rem !important;
  }
  .hd-right {
    gap: 0.35rem;
    min-width: 0;
  }
  .hd-cta {
    padding: 0.45rem 0.7rem !important;
    font-size: 0.7rem !important;
  }
}


/* ============================================================================
   7c · Auth screen logo
   ============================================================================
   restaurant-theme.css opts every `logo-mcv*` image out of the global
   `max-width:100%` with `width:auto !important`, so on the sign-in screen the
   mobile logo fell back to its 720px HTML width attribute and hung ~390px off
   a phone. Re-assert a real width at the same weight. */

@media (max-width: 900px) {
  .auth-logo-mobile img {
    width: clamp(180px, 55vw, 260px) !important;
    max-width: 100% !important;
    height: auto !important;
  }
}


/* ============================================================================
   7d · Public header — the band where the full nav still shows
   ============================================================================
   `.hd-nav` switches on at 1000px, but logo + nav + two sign-in links + CTA
   need roughly 1240px. Between those two figures the header row overflowed and
   the mega-menu opened past the right edge. Hand this band back to the drawer,
   which already works. */

@media (min-width: 1000px) and (max-width: 1239px) {
  .hd-nav {
    display: none !important;
  }
  .hd-menu-toggle {
    display: inline-flex !important;
  }
  .hd-signin--staff {
    display: none !important;
  }
}

/* Wherever it does open, the mega panel stays inside the viewport. */
.hd-dropdown,
.hd-mega {
  max-width: calc(100vw - 2rem);
}


/* ============================================================================
   7e · Info tips
   ============================================================================
   The explainer bubble is absolutely positioned against its trigger and is up
   to 340px wide, so a tip anywhere right of centre hangs off the page. On a
   phone there is no room to be clever about which side it opens on — dock it
   to the bottom of the viewport instead. */

@media (max-width: 700px) {
  .info-tip-bubble {
    position: fixed;
    top: auto;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    width: auto;
    max-width: none;
  }
}

@media (max-width: 400px) {
  .page {
    padding: 0.75rem;
  }
  .card {
    padding: 0.875rem;
    border-radius: 0.625rem;
  }
  /* No further column collapse here. A blanket drop to one column at this
     width turned the chef app's four quick-action tiles into a four-high
     stack, when 2x2 at ~140px a tile reads perfectly well — the tiles are an
     icon over a one-word label, not cards. § 3 already takes every row down to
     two across at 692px, and two is the floor. */
}


/* ============================================================================
   8 · Media and embeds
   ========================================================================== */

video,
canvas,
iframe,
embed,
object {
  max-width: 100%;
}

@media (max-width: 900px) {
  /* Camera tiles and clip players are given fixed pixel heights in a few
     places; let them scale with their box instead. */
  .page video,
  .app-body video {
    height: auto;
  }
}


/* ============================================================================
   9 · Print — reports and audit packs are printed from the browser
   ========================================================================== */

@media print {
  .sidebar,
  .topbar,
  .sidebar-toggle,
  .bottom-nav,
  .notif-bell,
  .app-logout {
    display: none !important;
  }
  .main {
    margin-left: 0 !important;
  }
  .page {
    padding: 0;
    max-width: 100%;
  }
  .rt-scroll {
    overflow: visible;
  }
  .card {
    break-inside: avoid;
  }
}


/* ============================================================================
   10 · iOS form zoom guard (dashboard / admin / chef / auth)
   ============================================================================
   Focusing an input under 16px zooms the whole Safari viewport. style.css
   already bumps this inside ≤768px; the signed-in shells often sit wider than
   that with the sidebar collapsed, and drawer tools already use 16px. Match
   the rest of the form chrome here so phones never zoom mid-flow.
   ========================================================================== */

@media (max-width: 900px) {
  .page .input,
  .page .select,
  .page .textarea,
  .app-body .input,
  .app-body .select,
  .app-body .textarea,
  .auth-form-wrap .input,
  .auth-panel .input,
  .topbar-search input,
  .form-block input,
  .form-block select,
  .form-block textarea,
  .search-mob input {
    font-size: 16px !important;
  }
}