/* MIBS responsive pass — shared mobile rules for panel, login, and exam screens */
html,body{max-width:100%;overflow-x:hidden}
img,video,canvas,svg{max-width:100%}
button,input,select,textarea{font:inherit}
@media(max-width:900px){
 .app-shell{min-height:100vh}
 .topbar{min-height:64px;padding:9px 12px;gap:9px;flex-wrap:nowrap}
 .topbrand{min-width:0;gap:9px}
 .banner-box{width:42px!important;height:42px!important;flex:0 0 42px}
 .admin-title{min-width:0}
 .admin-title b{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw;display:block}
 .admin-title small{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:36vw;display:block}
 .topactions{gap:7px;min-width:0}
 .server-online{display:none!important}
 .userchip{padding:5px 8px!important;min-width:0}
 .userchip>div:last-child{min-width:0;max-width:25vw}
 .userchip b,.userchip small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
 .topactions #logout{padding:8px 10px!important;font-size:10px!important}
 .layout{display:block!important}
 .sidebar{position:fixed!important;z-index:1000;left:0;top:0;bottom:0;width:min(300px,86vw)!important;height:100dvh!important;overflow-y:auto;transform:translateX(-105%);transition:transform .22s ease;box-shadow:12px 0 34px rgba(10,25,45,.18)}
 .sidebar.mobile-open{transform:translateX(0)}
 .mobile-menu-overlay{display:none;position:fixed;inset:0;z-index:999;background:rgba(5,15,30,.48)}
 .sidebar.mobile-open~.mobile-menu-overlay{display:block}
 .main{width:100%!important;min-width:0!important;padding:16px 13px 88px!important;margin:0!important}
 .fixed-footer{padding:10px 12px!important;gap:6px;font-size:9px!important}
 .fixed-footer span:last-child{max-width:58%;text-align:right}
 .panel,.exam-list-panel,.ops-panel{max-width:100%;min-width:0}
 .panel-head,.exam-list-head{align-items:flex-start!important;flex-wrap:wrap;gap:10px!important}
 .toolbar,.exam-table-tools,.supervisor-list-tools{width:100%;flex-wrap:wrap}
 .toolbar .btn,.exam-table-tools .btn,.supervisor-list-tools .btn{flex:1 1 auto}
 .table-wrap{width:100%;max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch}
 table.table{min-width:680px}
 .formgrid,.supervisor-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .field{min-width:0}
 .field input,.field select,.field textarea,.formgrid input,.formgrid select,.formgrid textarea{max-width:100%;min-width:0}
 .modal-back{padding:12px!important;align-items:flex-end!important}
 .modal{width:100%!important;max-width:680px!important;max-height:92dvh!important;overflow-y:auto!important;margin:0 auto!important;border-radius:18px 18px 12px 12px!important}
 .exam-page-hero,.ops-hero{gap:15px;flex-wrap:wrap}
 .exam-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .mibs-dashboard{width:100%;min-width:0}
 .dash-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .dash-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .school-page,.ops-page,.exam-page{max-width:100%;min-width:0}
}
@media(max-width:600px){
 .topbar{padding:8px 9px!important}
 .mobile-menu-btn{width:36px;height:36px;flex:0 0 36px;padding:0!important}
 .banner-box{display:none!important}
 .admin-title b{font-size:11px!important;max-width:37vw}
 .admin-title small{max-width:37vw;font-size:8px!important}
 .userchip{gap:5px!important;padding:4px 6px!important}
 .userchip .avatar{width:29px!important;height:29px!important;font-size:11px!important}
 .userchip>div:last-child{max-width:22vw}
 .userchip b{font-size:9px!important}
 .userchip small{font-size:8px!important}
 .topactions #logout{font-size:0!important;min-width:34px;width:34px;height:34px;padding:0!important}
 .topactions #logout:after{content:"↪";font-size:16px}
 .main{padding:12px 10px 82px!important}
 .fixed-footer{font-size:8px!important}
 .fixed-footer span:first-child{white-space:nowrap}
 .fixed-footer span:last-child{max-width:62%;line-height:1.35}
 .formgrid,.supervisor-form-grid{grid-template-columns:1fr!important;gap:10px!important}
 .field input,.field select,.field textarea,.formgrid input,.formgrid select,.formgrid textarea{width:100%!important;min-height:43px;font-size:16px!important}
 .field textarea{min-height:100px}
 .panel{border-radius:13px!important}
 .panel-head{padding:14px!important}
 .panel-head .toolbar{display:grid!important;grid-template-columns:1fr 1fr;gap:7px}
 .panel-head .toolbar .btn{width:100%;min-width:0;white-space:normal}
 .exam-page-hero,.ops-hero{padding:19px!important;border-radius:15px!important}
 .exam-page-hero h1,.ops-hero h1{font-size:23px!important}
 .exam-page-hero p,.ops-hero p{font-size:11px!important;line-height:1.65}
 .exam-create-btn,.exam-hero-actions{width:100%}
 .exam-stat-grid{gap:8px!important}
 .exam-stat-card{min-width:0;padding:12px!important}
 .exam-stat-card strong{font-size:22px!important}
 .exam-stat-card small{font-size:10px!important}
 .exam-table{min-width:720px}
 .exam-table-foot{gap:8px;flex-wrap:wrap;padding:11px!important}
 .exam-search{width:100%;max-width:none!important}
 .exam-search input{min-width:0;width:100%}
 .staff-actions{flex-wrap:wrap}
 .staff-actions .btn{flex:1}
 .mibs-dashboard{padding-bottom:8px}
 .dash-welcome{padding:18px!important}
 .dash-welcome h1{font-size:23px!important}
 .dash-welcome p{font-size:11px!important}
 .dash-section-title{margin:20px 2px 11px!important}
 .dash-metrics{gap:8px!important}
 .dash-metric{padding:11px 9px!important;gap:8px!important}
 .dash-metric-icon{width:33px!important;height:33px!important}
 .dash-metric strong{font-size:21px!important}
 .dash-actions{grid-template-columns:1fr!important}
 .modal{padding:16px!important}
 .modal-head h2{font-size:18px!important}
 .mibs-panel-login{min-height:100dvh}
 .mibs-split-login{display:flex!important;flex-direction:column!important}
 .mibs-visual-panel{min-height:190px!important;height:190px!important;max-height:190px!important;padding:18px!important}
 .mibs-visual-copy{margin-top:22px!important}
 .mibs-visual-copy h1{font-size:25px!important}
 .mibs-visual-copy p{display:none!important}
 .mibs-visual-bottom{display:none!important}
 .mibs-form-panel{width:100%!important;min-height:calc(100dvh - 190px);padding:22px 16px!important}
 .mibs-form-inner{width:100%!important;max-width:440px!important;margin:0 auto}
 .mibs-role-choice{grid-template-columns:1fr!important;gap:8px!important}
 .mibs-role-choice button{min-height:58px!important}
 .mibs-login-submit{min-height:48px!important}
 .login-shell{min-height:100dvh;display:flex!important;flex-direction:column!important}
 .login-brand,.login-panel{width:100%!important;min-width:0!important}
 .login-brand{padding:25px 18px!important}
 .login-brand h1{font-size:25px!important}
 .login-panel{padding:20px 14px!important}
 .login-card{width:100%!important;max-width:460px!important}
 /* Student exam workspace */
 .exam{padding:0 9px!important;margin:10px auto!important}
 .top{padding:9px!important;gap:8px!important;flex-wrap:wrap}
 .brand{min-width:0;flex:1}
 .brand b{max-width:55vw!important;font-size:11px!important}
 .timer{font-size:15px!important;padding:7px 9px!important}
 .hero{padding:13px!important;align-items:flex-start!important;flex-wrap:wrap}
 .hero h1{font-size:17px!important}
 .layout{grid-template-columns:1fr!important}
 .q,.navbox{padding:14px!important}
 .q{min-height:0!important}
 .qbody{font-size:15px!important;overflow-wrap:anywhere}
 .choice{padding:10px!important;gap:8px!important}
 .numbers{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:5px!important}
 .num{min-height:38px}
 .actions{gap:7px!important;flex-wrap:wrap}
 .actions .btn{flex:1;min-width:100px}
}
@media(max-width:360px){
 .topactions .userchip>div:last-child{display:none}
 .topactions #logout{width:32px;min-width:32px}
 .exam-stat-grid,.dash-metrics{grid-template-columns:1fr 1fr!important}
 .dash-metric{align-items:flex-start!important}
 .mibs-visual-panel{height:160px!important;min-height:160px!important}
 .mibs-form-panel{min-height:calc(100dvh - 160px)}
}
/* MOBILE SIDEBAR LAYERING FIX — keep navigation above page content */
@media(max-width:900px){
 html,body,#app{overflow-x:hidden!important}
 .app-shell{position:relative!important;isolation:isolate!important}
 .topbar{z-index:1300!important}
 .layout{position:relative!important;isolation:auto!important;overflow:visible!important}
 .sidebar{
  position:fixed!important;left:0!important;top:68px!important;bottom:42px!important;
  width:min(300px,86vw)!important;height:auto!important;max-height:calc(100dvh - 110px)!important;
  overflow-y:auto!important;overflow-x:hidden!important;
  z-index:1500!important;display:block!important;
  transform:translate3d(-105%,0,0)!important;visibility:hidden!important;
  transition:transform .22s ease,visibility .22s ease!important;
  -webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;
 }
 .sidebar.mobile-open{
  left:0!important;transform:translate3d(0,0,0)!important;
  visibility:visible!important;z-index:1500!important;
 }
 .mobile-menu-overlay{
  position:fixed!important;left:0!important;right:0!important;top:68px!important;bottom:42px!important;
  z-index:1400!important;display:block!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  background:rgba(5,15,30,.52)!important;
 }
 .sidebar.mobile-open~.mobile-menu-overlay{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;
 }
 .main{position:relative!important;z-index:1!important;left:0!important;width:100%!important}
 .fixed-footer{z-index:1300!important}
}
@media(max-width:600px){
 .sidebar{top:64px!important;bottom:40px!important;max-height:calc(100dvh - 104px)!important}
 .mobile-menu-overlay{top:64px!important;bottom:40px!important}
}
/* GLOBAL MOBILE DRAWER FIX v3 — enforce one stacking order on every panel view */
@media(max-width:900px){
 .app-shell{isolation:isolate!important;overflow:visible!important}
 .app-shell>.topbar{position:fixed!important;z-index:6000!important}
 .app-shell>.layout{position:relative!important;z-index:auto!important;isolation:auto!important;overflow:visible!important;transform:none!important;filter:none!important;contain:none!important}
 .app-shell>.layout>.sidebar{position:fixed!important;inset:68px auto 42px 0!important;width:min(300px,86vw)!important;height:auto!important;max-height:none!important;z-index:5000!important;display:block!important;overflow-x:hidden!important;overflow-y:auto!important;transform:translate3d(-105%,0,0)!important;visibility:hidden!important;pointer-events:none!important;background:#07111f!important}
 .app-shell>.layout>.sidebar.mobile-open{left:0!important;inset-inline-start:0!important;transform:translate3d(0,0,0)!important;visibility:visible!important;pointer-events:auto!important;z-index:5000!important}
 .app-shell>.layout>.mobile-menu-overlay{position:fixed!important;inset:68px 0 42px!important;z-index:4990!important;display:block!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}
 .app-shell>.layout>.sidebar.mobile-open~.mobile-menu-overlay{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
 .app-shell>.layout>.main{position:relative!important;z-index:0!important;isolation:auto!important;transform:none!important;filter:none!important;contain:none!important;left:0!important;width:100%!important;min-width:0!important}
 .app-shell>.fixed-footer{position:fixed!important;z-index:6000!important}
}
@media(max-width:600px){
 .app-shell>.layout>.sidebar{inset:64px auto 40px 0!important;width:min(300px,88vw)!important}
 .app-shell>.layout>.mobile-menu-overlay{inset:64px 0 40px!important}
}

/* MOBILE PAGE SCROLL FIX */
@media(max-width:900px){
 html{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-y:auto!important}
 body{height:auto!important;min-height:100vh!important;overflow-x:hidden!important;overflow-y:auto!important;position:relative!important;touch-action:pan-y!important}
 #app{height:auto!important;min-height:100vh!important;overflow-x:hidden!important;overflow-y:visible!important}
 .app-shell{height:auto!important;min-height:100vh!important;overflow:visible!important}
 .layout{height:auto!important;min-height:calc(100vh - 68px)!important;overflow:visible!important}
 .main{height:auto!important;min-height:calc(100vh - 110px)!important;overflow:visible!important;overscroll-behavior-y:auto!important;touch-action:pan-y!important}
 }