/* ── TASK_53: Responsive shell — additive overrides only ────────────────────
   Desktop (≥1024px) is UNTOUCHED. All rules here are scoped inside @media
   blocks. No rule in this file may fire at ≥1024px unless explicitly noted.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Tablet (768–1023px): collapsed icon rail, no bottom bar ──────────────── */
@media (max-width: 1023px) {
  /* Hide the "More" sheet and its overlay on tablet — not needed */
  .mobile-more { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Keep the desktop nav as an icon-only rail */
  #appNav { width: 48px !important; overflow: hidden; }
  #appNav .nav__lbl,
  #appNav .nav__group,
  #appNav .nav__logo-wrap .nav__wordmark,
  #appNav .nav__user-info,
  #appNav .nav__logo-wrap .nav__strapline { display: none !important; }
  #appNav .nav__link { justify-content: center !important; padding: 0 10px !important; }
  #appNav .nav__logo { padding: 8px 0 14px !important; justify-content: center !important; }

  /* Sensei sidebar: slide-out panel (not always visible) */
  #senseiSidebar {
    position: fixed !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(320px, calc(100vw - 60px)) !important;
    height: 100vh !important;
    z-index: 400 !important;
    box-shadow: -4px 0 24px rgba(0,0,0,.14);
    transform: translateX(110%);
    transition: transform 200ms ease;
  }
  #senseiSidebar.ss-open { transform: translateX(0); }

  /* Content: fill remaining space after icon rail */
  #appContent { margin-left: 48px !important; }
}

/* ── Mobile (<768px): hide nav, show bottom tab bar ──────────────────────── */
@media (max-width: 767px) {
  /* Hide desktop left nav */
  #appNav { display: none !important; }

  /* Show our new 4-tab bar — overrides the shell-vnext.css display:none */
  .mobile-bar { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }

  /* Content: full width + bottom padding so tab bar doesn't obscure content */
  #appContent {
    margin-left: 0 !important;
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)) !important;
  }
  #mount {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0)) !important;
  }

  /* Sensei sidebar: full-width sheet from bottom */
  #senseiSidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    height: 88vh !important;
    z-index: 500 !important;
    border-left: none !important;
    border-top: 1px solid var(--br, #e5e5e3) !important;
    border-radius: 16px 16px 0 0 !important;
    transform: translateY(110%);
    transition: transform 220ms ease;
  }
  #senseiSidebar.ss-open { transform: translateY(0) !important; }

  /* Backdrop for Sensei overlay on mobile */
  #mSenseiBackdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 490;
  }
  #mSenseiBackdrop.open { display: block; }

  /* Top bar: simplify (hide extra buttons) */
  .topbar__swatch-row,
  .topbar__theme-toggle,
  .desktop-only { display: none !important; }

  /* Touch targets — 44px minimum on all tab buttons */
  .mobile-tab { min-height: 44px !important; }

  /* Sensei badge dot on tab */
  .m-sensei-badge {
    position: absolute;
    top: 6px;
    right: calc(50% - 14px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E74C3C;
    display: none;
    border: 1.5px solid var(--shell-bg, #0f0f11);
  }
  .m-sensei-badge.visible { display: block; }

  /* Control Tower mobile cards */
  .ct-mobile-cards { display: block !important; }
  .ct-desktop-layout { display: none !important; }

  /* Project detail tab bar: horizontal scroll on mobile */
  .pt-tab-bar {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    flex-wrap: nowrap !important;
  }
  .pt-tab-bar::-webkit-scrollbar { display: none; }
}

/* ── Desktop: ensure mobile-only elements are hidden ─────────────────────── */
@media (min-width: 768px) {
  .ct-mobile-cards { display: none !important; }
  #mSenseiBackdrop { display: none !important; }
}
@media (min-width: 1024px) {
  .ct-desktop-layout { display: block !important; }
}