/* Mobile & tablet layer (<= 900px). Desktop (> 900px) is untouched: it keeps its own sidebar.
   Pieces: top bar with ☰ · slide-in menu (all options) · bottom navigation · tidy dashboard/shop on small screens. */

/* these exist only on small screens */
.mn-burger, .mn-actions, .mn-overlay, .mn-drawer, .mn-bottom, .sh-mbar { display: none; }
body.mn-lock { overflow: hidden; }

@media (max-width: 900px) {
  .wrap, .container { padding-left: 1rem; padding-right: 1rem; }

  /* ---------- top bar ---------- */
  .navbar { height: auto; min-height: 3.7rem; padding: .4rem .85rem; gap: .35rem; justify-content: flex-start; }
  .nav-links { margin-left: auto; }
  .mn-burger { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; margin-right: .2rem;
    border: 1px solid #e5e9f0; background: #fff; border-radius: 12px; color: #0f1f2e; cursor: pointer; box-shadow: 0 1px 2px rgba(16,24,40,.05); transition: transform .15s, background .15s; }
  .mn-burger:active { transform: scale(.93); background: #f1f4f8; }
  body.exam-mode .mn-burger { display: none; }
  body.has-mn:not(.exam-mode) .nav-links { display: none; }
  body.has-mn:not(.exam-mode) .mn-actions { display: flex; }
  .mn-actions { margin-left: auto; align-items: center; gap: .5rem; }
  body:not(.has-store) #mnCart { display: none; }
  .mn-iconbtn { position: relative; width: 42px; height: 42px; display: inline-grid; place-items: center; border: 1px solid #e5e9f0; background: #fff; color: #0f1f2e; border-radius: 12px; cursor: pointer; }
  .mn-iconbtn:active { transform: scale(.93); }
  .mn-avatar { width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; font: 800 1rem/1 "Plus Jakarta Sans", "Anek Bangla", sans-serif; color: #fff;
    background: linear-gradient(135deg, #0f766e, #14b8a6); box-shadow: 0 3px 10px rgba(15,118,110,.35); }
  .mn-dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #e5484d; color: #fff;
    font: 700 .68rem/18px "Plus Jakarta Sans", sans-serif; font-style: normal; text-align: center; box-shadow: 0 0 0 2px #fff; }
  .mn-dot.hidden { display: none; }

  /* ---------- slide-in menu ---------- */
  .mn-overlay { display: block; position: fixed; inset: 0; z-index: 8990; background: rgba(15,23,42,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; }
  .mn-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .mn-drawer { display: flex; flex-direction: column; position: fixed; z-index: 9000; top: 0; left: 0; bottom: 0; width: min(86vw, 330px); background: #fff;
    border-radius: 0 22px 22px 0; box-shadow: 18px 0 50px rgba(15,23,42,.25); transform: translateX(-104%); visibility: hidden;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s; overscroll-behavior: contain; }
  .mn-drawer.open { transform: none; visibility: visible; transition-delay: 0s; }
  .mn-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex: none;
    padding: calc(1rem + env(safe-area-inset-top)) 1rem 1.1rem 1.1rem; color: #fff; border-radius: 0 22px 0 0;
    background: radial-gradient(circle at 85% 0, rgba(255,255,255,.18), transparent 45%), linear-gradient(135deg, #0f766e, #115e59); }
  .mn-user { display: flex; align-items: center; gap: .75rem; min-width: 0; }
  .mn-user > div { display: flex; flex-direction: column; min-width: 0; }
  .mn-user b { font: 700 1rem/1.3 "Plus Jakarta Sans", "Anek Bangla", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mn-user small { opacity: .8; font-size: .76rem; }
  .mn-av { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 1.2rem/1 "Plus Jakarta Sans", sans-serif;
    background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.55); }
  .mn-x { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); color: #fff; cursor: pointer; }
  .mn-scroll { flex: 1; overflow-y: auto; padding: .4rem .7rem calc(1rem + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
  .mn-group { font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8896a6; padding: .95rem .6rem .35rem; }
  .mn-list { display: flex; flex-direction: column; gap: .15rem; }
  .mn-item { display: flex; align-items: center; gap: .8rem; width: 100%; padding: .55rem .6rem; border: 0; background: none; border-radius: 12px; text-align: left; cursor: pointer;
    font: 600 .95rem/1.3 "Hind Siliguri", "Anek Bangla", "Plus Jakarta Sans", sans-serif; color: #33475b; transition: background .15s; min-height: 46px; }
  .mn-item:hover, .mn-item:focus-visible { background: #f1f4f8; outline: none; }
  .mn-item:active { background: #e8edf3; }
  .mn-ico { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #f1f4f8; color: #5b6b7b; }
  .mn-ico .ic { width: 19px; height: 19px; }
  .mn-lbl { flex: 1; min-width: 0; }
  .mn-item.on { background: rgba(15,118,110,.09); color: #115e59; }
  .mn-item.on .mn-ico { background: #0f766e; color: #fff; }
  .mn-item.danger { color: #c93b40; }
  .mn-item.danger .mn-ico { background: #fdecec; color: #c93b40; }
  .mn-badge { flex: none; min-width: 22px; padding: .1rem .45rem; border-radius: 999px; background: #e5484d; color: #fff; font-size: .72rem; font-weight: 700; text-align: center; }
  .mn-sep { height: 1px; background: #e5e9f0; margin: .8rem .4rem .5rem; }
  .mn-cta { display: grid; gap: .6rem; padding: 1rem .5rem; }
  .mn-cta .btn { width: 100%; min-height: 46px; border-radius: 999px; font-weight: 700; }
  .mn-cta .btn:not(.secondary) { background: #0f766e; color: #fff; border: 0; box-shadow: 0 6px 16px rgba(15,118,110,.3); }
  .mn-cta .btn.secondary { background: #fff; color: #0f1f2e; border: 1.5px solid #cfd8e3; box-shadow: none; }

  /* ---------- bottom navigation (students, on the dashboard) ---------- */
  body.has-mn.dash-mode .mn-bottom { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
    padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid #e5e9f0; box-shadow: 0 -8px 26px rgba(15,23,42,.08); }
  body.has-mn.dash-mode { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.has-mn.dash-mode .dash-tabs { display: none; }           /* the scrolling strip is replaced by the menu + bottom bar */
  body.has-mn.dash-mode .sc-root { bottom: calc(84px + env(safe-area-inset-bottom)); }   /* keep the support chat button above the bar */
  .mn-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; padding: .35rem .1rem; min-height: 54px;
    border: 0; background: none; border-radius: 14px; cursor: pointer; color: #7a8a9b; font: 600 .68rem/1.1 "Hind Siliguri", "Anek Bangla", "Plus Jakarta Sans", sans-serif; transition: color .15s; }
  .mn-tab .ic { width: 22px; height: 22px; stroke-width: 1.9; }
  .mn-tab span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mn-tab.on { color: #0f766e; }
  .mn-tab.on::before { content: ""; position: absolute; top: -.3rem; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: #0f766e; }
  .mn-tab:active { background: #f1f4f8; }
  .mn-tab .mn-dot { top: 1px; right: calc(50% - 22px); }

  /* ---------- dashboard, tidier on small screens ---------- */
  body.dash-mode .dash-head { margin: 1rem 0 .9rem; align-items: flex-start; }
  /* on every tab except the overview, skip the big greeting + KPI cards so the page content starts right under the top bar */
  body.has-mn.dash-mode:not([data-tab="overview"]) .dash-stats,
  body.has-mn.dash-mode:not([data-tab="overview"]) .dash-head .dh-eyebrow,
  body.has-mn.dash-mode:not([data-tab="overview"]) .dash-head p,
  body.has-mn.dash-mode:not([data-tab="overview"]) .dh-refresh { display: none; }
  body.has-mn.dash-mode:not([data-tab="overview"]) .dash-head { margin: .8rem 0 .6rem; }
  body.has-mn.dash-mode:not([data-tab="overview"]) .dash-head h1 { font-size: 1.15rem; }
  body.mn-lock .sc-root { opacity: 0; pointer-events: none; }   /* the support chat button must not float over the open menu */
  body.dash-mode .card { padding: 1.05rem; }
}

@media (max-width: 700px) {
  body.dash-mode .dash-head { flex-direction: column; gap: .6rem; }
  body.dash-mode .dash-head h1 { font-size: 1.35rem; }
  body.dash-mode .dash-stats { gap: .65rem; }
  body.dash-mode .dash-stat { padding: .8rem; }
  body.dash-mode .dash-stat .ds-num { font-size: 1.4rem; }
  body.dash-mode .card table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.dash-mode .btn { min-height: 44px; }
  body.dash-mode input:not([type=checkbox]):not([type=radio]), body.dash-mode select, body.dash-mode textarea { font-size: 16px; }   /* no zoom-in on iPhone */
  .sh-tabs { flex: 1; }
  .sh-tabs button { flex: 1; }
}

/* ---------- book store on tablets / phones ---------- */
@media (max-width: 860px) {
  .sh-detail { gap: 1rem; }
  .sh-dcover { margin: 0 auto; width: min(70%, 260px); }
  .sh-dmain { text-align: left; }
  /* the main action of a screen sticks above the bottom bar, always in thumb reach */
  .sh-mbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; position: fixed; z-index: 880; left: 0; right: 0;
    bottom: calc(64px + env(safe-area-inset-bottom)); padding: .6rem 1rem; background: #fff; border-top: 1px solid #e5e9f0; box-shadow: 0 -8px 22px rgba(15,23,42,.1); }
  .sh-mbar div { display: flex; flex-direction: column; line-height: 1.2; }
  .sh-mbar small { color: #8896a6; font-size: .72rem; }
  .sh-mbar b { font-size: 1.2rem; color: #0f766e; }
  .sh-mbar .btn { flex: 1; max-width: 220px; min-height: 46px; }
  .sh-sumbox [data-sh="checkout"], .sh-sumbox [data-sh="place"] { display: none; }
  .sh-buy { position: fixed; z-index: 880; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom)); margin: 0; padding: .6rem .9rem; flex-wrap: nowrap; gap: .5rem;
    background: #fff; border-top: 1px solid #e5e9f0; box-shadow: 0 -8px 22px rgba(15,23,42,.1); }
  .sh-buy .btn { flex: 1; padding: .6rem .4rem; font-size: .84rem; min-height: 44px; }
  .sh-body:has(.sh-mbar), .sh-body:has(.sh-buy) { padding-bottom: 88px; }
  body.has-mn.dash-mode:has(.sh-mbar) .sc-root, body.has-mn.dash-mode:has(.sh-buy) .sc-root { bottom: calc(142px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px) {
  .sh-order footer { flex-direction: column; align-items: stretch; }
  .sh-oacts .btn { flex: 1; }
  .sh-oi { flex-wrap: wrap; }
  .sh-dl { width: 100%; }
  .sh-form { padding: 1rem; }
  .sh-line { padding: .6rem; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) { .mn-drawer, .mn-overlay, .mn-burger { transition: none; } }