/* ============================================================================
   mobile.css — الشريط السفلي الاحترافي (الميزة 3) + استجابة التخطيط العام.
   قواعد الشريط:
   - لا bottom ثابتًا: safe-area-inset + --bottom-nav-offset من visualViewport.
   - يختفي عند فتح لوحة المفاتيح خارج وضع الرصد (body.mobile-keyboard).
   - يدعم 1–7 أزرار: حتى 4 صف مريح، 5+ (bn-many) يضيق تلقائيًا،
     وفي أضيق الشاشات dock قابل للانزلاق — لا تُخفى أي وظيفة.
   ============================================================================ */

.bottomnav{
  position:fixed;left:8px;right:8px;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));
  bottom:14px;bottom:calc(var(--bottom-nav-offset,0px) + max(env(safe-area-inset-bottom),6px) + 6px);
  z-index:300;display:none;align-items:stretch;justify-content:space-between;gap:5px;
  min-height:68px;padding:7px;border:1px solid var(--border-2);border-color:color-mix(in srgb,var(--accent) 24%,var(--border));
  border-radius:22px 22px 16px 16px;
  background:var(--glass);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 88%,transparent),color-mix(in srgb,var(--surface-2) 94%,transparent));
  backdrop-filter:blur(20px) saturate(1.18);-webkit-backdrop-filter:blur(20px) saturate(1.18);
  box-shadow:0 -18px 44px rgba(0,0,0,.42),0 0 0 1px rgba(255,255,255,.03) inset;
  transform:translateY(0);opacity:1;transition:transform .18s ease,opacity .18s ease,bottom .18s ease;
}
.bottomnav::before{content:"";position:absolute;inset-inline:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent-line),transparent);pointer-events:none;}
.bottomnav button{
  position:relative;flex:1 1 0;min-width:0;min-height:52px;padding:8px 4px 7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:transparent;color:var(--muted);box-shadow:none;border:1px solid transparent;border-radius:16px;
  font-family:'Reem Kufi';font-weight:700;font-size:11px;line-height:1.05;overflow:hidden;
  transition:background .16s ease,color .16s ease,border-color .16s ease,transform .12s ease;
}
.bottomnav button .ic{font-size:22px;line-height:1;filter:saturate(.9);transition:transform .16s ease,filter .16s ease;}
.bottomnav button .bn-label{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bottomnav button:hover{filter:none;background:var(--surface-3);color:var(--text);}
.bottomnav button:active{transform:translateY(1px) scale(.98);}
.bottomnav button.active{color:var(--accent);background:var(--accent-soft);background:linear-gradient(180deg,var(--accent-soft),rgba(46,230,166,.06));border-color:var(--accent-line);}
.bottomnav button.active::before{content:"";position:absolute;top:5px;width:24px;height:3px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent-soft);}
.bottomnav button.active .ic{filter:saturate(1.18);transform:translateY(-1px);}

/* 5 أزرار فأكثر: تكثيف تلقائي (تضبطه mobile-nav.js عبر bn-many) */
.bottomnav.bn-many{gap:4px;padding:6px;}
.bottomnav.bn-many button{font-size:10.5px;padding:7px 2px 6px;min-height:50px;border-radius:14px;}
.bottomnav.bn-many button .ic{font-size:20px;}

/* لوحة المفاتيح مفتوحة (خارج وضع الرصد) ⇒ إخفاء الشريط */
body.mobile-keyboard:not(.grading) .bottomnav{transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;}
/* أثناء الرصد يحل gradeHelper محل الشريط */
body.grading .bottomnav{display:none!important;}

/* =============================== استجابة التخطيط العام =============================== */
@media (max-width:860px){
  .wrap{padding:14px 12px 18px;}
  header{padding:9px 12px;}
  .htext h1{font-size:15px;}
  .uinfo .nm{display:none;}
  .uinfo .badge{font-size:10.5px;padding:3px 10px;}
  .hctrl{gap:6px;flex-wrap:nowrap;}
  .iconbtn{width:38px;height:38px;font-size:15px;}
  .tabs{display:none;}
  body.authed .bottomnav{display:flex;}
  body.authed:not(.grading) #appShell{padding-bottom:calc(var(--bottom-nav-height,76px) + var(--bottom-nav-offset,0px) + max(env(safe-area-inset-bottom),8px) + 28px);}
  .row{flex-direction:column;align-items:stretch;}
  .row>div{min-width:0;width:100%;}
  .card{padding:16px;}
  .adminbar{flex-direction:column;align-items:stretch;}
  .adminbar button{width:100%;}
  #adminState{margin:0;}
  .kpis{grid-template-columns:repeat(2,1fr);gap:11px;}
  .subjgrid{grid-template-columns:1fr;}
}

/* شاشات صغيرة جدًا (حتى 320px): dock قابل للانزلاق — كل الوظائف تبقى */
@media (max-width:380px){
  .kpis{grid-template-columns:1fr;}
  .bottomnav{left:6px;right:6px;gap:3px;min-height:64px;padding:6px;border-radius:19px 19px 14px 14px;}
  .bottomnav button{min-height:50px;padding:7px 3px 6px;font-size:10.5px;border-radius:14px;}
  .bottomnav button .ic{font-size:20px;}
  .bottomnav.bn-many{overflow-x:auto;justify-content:flex-start;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
  .bottomnav.bn-many::-webkit-scrollbar{height:0;}
  .bottomnav.bn-many button{flex:1 0 60px;min-width:60px;scroll-snap-align:center;}
}
@media (max-width:330px){
  .bottomnav{left:5px;right:5px;}
  .bottomnav button{font-size:10px;}
  .bottomnav button .ic{font-size:19px;}
  .bottomnav.bn-many button{flex:1 0 56px;min-width:56px;}
}