/* ============================================================================
   Veriax — Mobile / responsive layer
   NEW: not part of the original desktop-first prototype. Layers on top of
   styles.css without touching it. Activates at <= 820px (tablet + phone).
   Strategy:
     · left rail + settings sidebar  -> off-canvas drawers (hamburger)
     · directory folder tree         -> full-width stacked panel
     · multi-column card/catalog grids already auto-collapse to 1 col
     · fixed-column tables           -> horizontal scroll
     · modals / filter panel         -> near full-width
     · kebab (⋮) buttons             -> always visible (no hover on touch)
   The action model is unchanged: the ⋮ button fires the SAME menu as
   right-click, so every action stays reachable by touch.
   ============================================================================ */

/* Injected chrome is hidden on desktop. */
#m-topbar,
#m-scrim { display: none; }

@media (max-width: 820px) {
  /* ---- Injected mobile top app-bar (built by mobile.js) ---- */
  #m-topbar {
    position: fixed; top: 0; left: 0; right: 0; height: 48px; z-index: 350;
    display: flex; align-items: center; gap: 10px; padding: 0 10px;
    background: color-mix(in srgb, var(--bg-sidebar, #0c0c13) 90%, transparent);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border, #20202b);
  }
  #m-topbar .m-burger {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    background: transparent; border: 1px solid var(--border, #20202b);
    border-radius: 9px; color: var(--text, #e9e9f0); cursor: pointer;
  }
  #m-topbar .m-burger:active { background: var(--bg-card, #14141d); }
  #m-topbar .m-title {
    font-size: 15px; font-weight: 600; color: var(--text, #e9e9f0);
    letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  #m-topbar .m-title small { color: var(--text-faint, #6b6b78); font-weight: 500; }

  /* ---- Scrim behind the drawers ---- */
  #m-scrim {
    display: block; position: fixed; inset: 48px 0 0 0; z-index: 290;
    background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  html[data-mnav="open"] #m-scrim { opacity: 1; pointer-events: auto; }

  /* ---- Shell: single column, content fills below the top bar ---- */
  .app,
  .app.with-sidetree,
  .app.no-sidetree {
    grid-template-columns: 1fr !important;
    height: calc(100vh - 48px);
    margin-top: 48px;
  }
  .main { grid-column: 1 / -1 !important; min-width: 0; }

  /* ---- Rail + settings sidebar become off-canvas drawers ---- */
  .rail,
  .side {
    position: fixed; top: 48px; bottom: 0; z-index: 300;
    transition: transform .22s ease;
    box-shadow: 14px 0 44px rgba(0, 0, 0, .5);
  }
  /* Closed: each drawer is pushed fully off-screen left. The sidebar starts at
     left:56px, so its hide transform must clear that offset too. */
  .rail { left: 0; transform: translateX(-110%); }
  .side { left: 56px; width: min(280px, 76vw); transform: translateX(calc(-100% - 60px)); }
  html[data-mnav="open"] .rail,
  html[data-mnav="open"] .side { transform: translateX(0); }

  /* ---- Directory folder tree: full-width panel stacked above content ---- */
  .tree {
    width: auto !important;
    max-height: 38vh;
    border-right: 0;
    border-bottom: 1px solid var(--border-faint, #1a1a24);
  }

  /* ---- Tables: scroll horizontally instead of clipping ---- */
  .list-view { overflow-x: auto !important; }
  .list-view .list-row { min-width: 660px; }

  /* ---- Toolbars wrap; tighten page padding ---- */
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .ae-page { padding: 16px 14px 96px !important; }
  .ae-head { gap: 10px; }
  .ae-head-title { font-size: 18px; }

  /* Sticky chrome/footer bleed to the page edge via negative margins sized for
     the desktop 36px padding. Re-size them to the mobile 14px padding so the
     breadcrumb + tabs aren't clipped off the left edge. */
  .ae-chrome   { margin: -16px -14px 18px !important; padding: 14px 14px 0 !important; }
  .ae-formfoot { margin: 18px -14px -96px !important; padding: 12px 14px !important; }
  .cap-shared-hint { margin-left: -14px !important; margin-right: -14px !important; }

  /* ---- Modals & filter panel near full-width ---- */
  .modal { width: calc(100vw - 20px) !important; }
  .filter-panel { width: min(86vw, 380px) !important; }

  /* ---- Kebab (⋮) always visible/tappable on touch ---- */
  .kebab-btn { opacity: 1 !important; }

  /* ---- Generous tap targets ---- */
  .side-item, .rail-btn, .view-switch button { min-height: 40px; }
}

/* Very small phones: hide the secondary top-bar label only (keep horizontal
   padding at 14px so the chrome bleed stays aligned). */
@media (max-width: 420px) {
  #m-topbar .m-title small { display: none; }
}