/* ===========================================================================
   MVR 18.0.0 — MOBILE
   ---------------------------------------------------------------------------
   Load LAST on every page.

   The panel was built for a wide desktop grid. On a phone the sidebar overlaid
   the content, the announcements composer ran off-screen, and tap targets were
   below the 44px minimum, so buttons were hard to hit.
   =========================================================================== */

@media (max-width: 860px) {

  /* -------------------------------------------------------------------------
     SHELL
     The sidebar becomes an off-canvas drawer instead of a permanent column.
     ------------------------------------------------------------------------- */
  .app{
    display:block;
    min-height:100vh;
  }

  .sidebar{
    position:fixed;
    inset:0 auto 0 0;
    z-index:8000;
    width:min(280px, 84vw);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:0 0 40px rgba(0,0,0,.6);
  }
  .sidebar.open{ transform:translateX(0); }

  /* _shell.js already creates .mobile-sidebar-shade and wires it to close the
     drawer. Styling that element rather than adding a second overlay of our
     own, which would sit on top and swallow the taps. */
  .mobile-sidebar-shade{
    position:fixed;
    inset:0;
    z-index:7900;
    display:none;
    border:0;
    padding:0;
    background:rgba(2,7,15,.6);
  }
  .mobile-sidebar-shade.show{ display:block; }

  .content{
    margin:0;
    padding:0;
    width:100%;
  }

  .page{
    padding:70px 14px 40px;
    max-width:100%;
    box-sizing:border-box;
  }

  /* The hamburger was scrolling away with the page. */
  .mobile-bar{
    position:fixed;
    top:10px; left:10px;
    z-index:8100;
    width:42px; height:42px;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
    background:var(--mvr-surface-15);
    border:1px solid var(--mvr-surface-26);
    border-radius:10px;
  }

  [dir="rtl"] .sidebar{
    inset:0 0 0 auto;
    transform:translateX(100%);
  }
  [dir="rtl"] .sidebar.open{ transform:translateX(0); }

  [dir="rtl"] .mobile-bar{ left:auto; right:10px; }

  /* -------------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------------- */
  .cfg-head h1{ font-size:22px; line-height:1.25; }
  .eyebrow{ font-size:10px; }
  h1{ font-size:22px; }
  h2{ font-size:18px; }

  /* -------------------------------------------------------------------------
     GRIDS
     ------------------------------------------------------------------------- */
  .cfg-grid{
    grid-template-columns:1fr !important;

    gap:12px;
  }

  .cfg-card{ padding:16px; }

  /* The two-line reservation is only there to align cards side by side. In a
     single column it is just wasted space. */
  .cfg-cardsub{ min-height:0; margin-bottom:10px; }

  /* -------------------------------------------------------------------------
     DETECTION ROWS
     The row is flex-wrap, so on a phone the name simply takes the full width
     and the controls fall onto the line beneath it.
     ------------------------------------------------------------------------- */
  .cfg-grid .cfg-row,
  .cfg-grid .cfg-opt{
    padding:12px 6px;
    gap:10px;
  }

  .cfg-grid .cfg-row .cfg-name,
  .cfg-grid .cfg-opt .cfg-name{
    flex:1 1 100%;
    font-size:14px;
    /* A long pill such as EXPERIMENTAL will not fit beside the label at
       phone widths, so the pill wraps under it instead of pushing the text
       out of its box. */
    flex-wrap:wrap;
    row-gap:4px;
  }

  .cfg-grid .cfg-row select,
  .cfg-grid .cfg-opt select{
    flex:1 1 auto;
    width:auto;
    min-width:96px;
    height:40px;
    font-size:14px;
  }

  .cfg-grid .cfg-slot-empty{ display:none; }

  .cfg-grid .cfg-row .cfg-toggle,
  .cfg-grid .cfg-opt .cfg-toggle,
  .cfg-grid .switch{ margin-left:auto; }

  /* Below the 44px recommended minimum, these were genuinely hard to hit. */
  .cfg-edit{ width:36px !important; height:36px !important; }

  /* -------------------------------------------------------------------------
     TOOLBAR
     ------------------------------------------------------------------------- */
  .cfg-bar{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .cfg-searchwrap{ width:100%; }
  .cfg-searchwrap input{ width:100%; height:42px; font-size:16px; }

  .cfg-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .cfg-spacer{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:0;
  }
  .cfg-btn{ min-height:42px; font-size:13px; }

  .cfg-tabs{
    display:flex;
    gap:6px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .cfg-tabs::-webkit-scrollbar{ display:none; }
  .cfg-tabs > *{ flex:0 0 auto; }

  /* -------------------------------------------------------------------------
     ANNOUNCEMENTS
     The composer sat in the desktop grid and overflowed horizontally.
     ------------------------------------------------------------------------- */
  .panel{
    padding:16px;
    margin-bottom:14px;
    border-radius:12px;
  }

  .ann-preview{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    overflow-wrap:anywhere;
    font-size:14px;
  }

  .ann-swatches{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }
  .ann-swatches > *{
    width:38px; height:38px;
    flex:0 0 auto;
  }

  /* 16px prevents iOS Safari zooming in on focus, which was shifting the
     whole layout sideways. */
  .input, .textarea, .select,
  input[type=text], input[type=number], input[type=url], textarea, select{
    width:100%;
    max-width:100%;
    font-size:16px;
    box-sizing:border-box;
  }
  .textarea, textarea{ min-height:120px; }

  .btn{ min-height:44px; padding:0 16px; }
  .btn.small{ min-height:38px; }

  /* -------------------------------------------------------------------------
     TABLES
     Horizontally scrollable rather than squeezed unreadable.
     ------------------------------------------------------------------------- */
  table{ display:block; overflow-x:auto; white-space:nowrap; }

  /* -------------------------------------------------------------------------
     MODAL / SAVE BAR
     ------------------------------------------------------------------------- */
  .cfg-modal-backdrop{ padding:12px; align-items:flex-end; }
  .cfg-modal{
    width:100%;
    max-height:88vh;
    border-radius:16px 16px 0 0;
  }
  .cfg-field textarea{ min-height:130px; font-size:14px; }

  .cfg-savebar{
    left:10px; right:10px; bottom:10px;
    flex-direction:column;
    gap:10px;
    padding:14px;
    border-radius:12px;
  }
  .cfg-savebar-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }

  .cfg-toast{
    left:12px; right:12px;
    bottom:auto; top:64px;
    text-align:center;
  }
}

/* Very narrow phones. */
@media (max-width: 380px){
  .page{ padding:66px 10px 32px; }
  .cfg-card{ padding:13px; }
  .cfg-actions{ grid-template-columns:1fr; }
  .cfg-spacer{ grid-template-columns:1fr; }
}