/* Mobile-first overrides for the REB admin panel. Loaded after styles.css. */
.mobile-menu-toggle,.mobile-menu-backdrop{display:none}

@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body.admin-menu-open{overflow:hidden}
  .shell{display:block;min-height:100dvh}
  .main{width:100%;min-width:0}
  .sidebar{
    display:flex!important;position:fixed!important;left:0;top:0;bottom:0;z-index:220;
    width:min(84vw,320px);height:100dvh!important;padding:18px 16px max(16px,env(safe-area-inset-bottom));
    transform:translateX(-105%);transition:transform .22s ease;overflow-y:auto;box-shadow:18px 0 50px rgba(3,14,29,.2)
  }
  body.admin-menu-open .sidebar{transform:translateX(0)}
  .sidebar .nav{grid-template-columns:1fr!important;gap:5px;margin-top:22px}
  .sidebar .nav button{min-height:48px;padding:13px 14px}
  .side-status{margin-top:auto}
  .mobile-menu-backdrop{display:block;position:fixed;inset:0;z-index:210;background:rgba(5,18,35,.46);opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.admin-menu-open .mobile-menu-backdrop{opacity:1;pointer-events:auto}
  .mobile-menu-toggle{
    display:grid;position:fixed;z-index:230;left:14px;top:max(14px,env(safe-area-inset-top));
    width:44px;height:44px;place-items:center;border:1px solid #d9e2ed;border-radius:10px;
    background:#fff;color:#17304f;box-shadow:0 4px 18px rgba(15,31,51,.1);font-size:21px;cursor:pointer
  }
  body.admin-menu-open .mobile-menu-toggle{left:min(calc(84vw - 58px),262px);background:#162b47;color:#fff;border-color:#304966}
  .topbar{position:sticky;top:0;z-index:80;height:auto;min-height:72px;padding:13px 14px 13px 72px;gap:10px}
  .topbar h1{font-size:22px;line-height:1.15;margin-top:3px}
  .topbar .eyebrow{font-size:9px}
  .user{min-width:0}
  .user>div:last-child{display:none}
  .avatar{width:38px;height:38px;flex:0 0 auto}
  .content{padding:14px 12px 36px!important;max-width:none}
  .card{border-radius:11px}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px}
  .kpi{min-height:94px;padding:14px 12px;gap:10px}
  .kpi-icon{width:38px;height:38px;font-size:18px}
  .kpi-value{font-size:24px}
  .dashboard-grid,.cards-layout,.course-layout,.quick-grid{grid-template-columns:1fr!important}
  .dashboard-panel,.course-list,.form-stack,.question-bank,.new-card,.panel{padding:15px}
  .panel-head{gap:10px;align-items:center}
  .panel-head h2,.course-list h2,.form-stack h2,.question-bank h2,.new-card h2,.panel h2{font-size:20px}
  .structure-list{gap:9px}
  .quick-grid{gap:10px}
  .quick-card{padding:14px}
  .toolbar,.ua-toolbar{padding:12px!important;align-items:stretch!important;flex-direction:column!important}
  .toolbar>div,.ua-toolbar-left,.ua-actions{width:100%}
  .ua-actions .btn,.toolbar .btn{min-height:42px}
  .ua-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important}
  .search-wrap,.ua-toolbar-left{align-items:stretch!important;flex-direction:column!important}
  .search-input,.ua-search{width:100%!important;min-width:0!important}
  .found{padding-left:2px}
  .table-card,.table-wrap,.ua-compare-grid{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .data-table{min-width:860px}
  .ua-table{min-width:1120px}
  .user-activity{min-width:620px}
  .table-actions,.ua-actions{white-space:nowrap}
  .course-row{padding:12px}
  .module-row{padding:10px}
  .lesson-chips{gap:5px}
  .lesson-chip{font-size:10px;line-height:1.25;white-space:normal}
  .form-grid.cols,.card-meta-grid{grid-template-columns:1fr!important}
  .cards-toolbar{grid-template-columns:1fr!important;padding:12px}
  .cards-toolbar .count{padding:0!important}
  .question-row{grid-template-columns:30px minmax(0,1fr) 32px;padding-left:0;padding-right:0}
  .option-field{grid-template-columns:34px minmax(0,1fr)}
  .upload-row{grid-template-columns:1fr!important}
  .upload-btn{grid-column:auto!important;width:100%}
  .banner{padding:22px 18px}
  .banner h2{font-size:23px;max-width:85%}
  .banner-mark{right:16px;font-size:30px}
  .reb-import-toolbar{align-items:stretch!important;flex-direction:column!important;padding:14px!important;gap:12px!important}
  .reb-import-page-btn{width:100%;min-height:46px}
  .reb-import-box{width:calc(100vw - 22px)!important;max-height:92dvh;overflow:auto;padding:20px!important;border-radius:14px!important}
  .ua-modal{width:calc(100vw - 16px)!important;max-height:94dvh!important;border-radius:14px!important}
  .ua-modal-head{padding:14px 15px!important}
  .ua-modal-head h2{font-size:20px;line-height:1.15}
  .ua-modal-body{padding:12px!important}
  .ua-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .ua-kpi{padding:12px!important;min-width:0}
  .ua-kpi b{font-size:19px!important}
  .ua-grid2{grid-template-columns:1fr!important}
  .ua-box{padding:12px!important}
  .ua-report-table{min-width:620px}
  .ua-box:has(.ua-report-table){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ua-rating-top{grid-template-columns:38px minmax(0,1fr) 72px!important;gap:6px!important}
  .ua-compare{min-width:760px!important}
  .ua-create{grid-template-columns:1fr!important}
  .ua-report-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:7px!important}
  .ua-report-actions .btn{width:100%}
}

@media (max-width:560px){
  .topbar h1{font-size:20px}
  .content{padding-left:9px!important;padding-right:9px!important}
  .kpi-grid{grid-template-columns:1fr!important}
  .kpi{min-height:82px}
  .dashboard-panel{padding:13px}
  .panel-head{align-items:flex-start;flex-direction:column}
  .link-btn{padding:0}
  .ua-actions{grid-template-columns:1fr!important}
  .ua-kpis{grid-template-columns:1fr!important}
  .ua-report-actions{grid-template-columns:1fr!important}
  .banner h2{font-size:21px}
  .brand-title{font-size:48px}
  .login-pane{padding:16px!important}
  .login-card{padding:24px 18px!important}
  .login-card h1{font-size:28px!important}
  .field input,.field select,.field textarea,.control{font-size:16px}
}

@media (max-width:380px){
  .topbar{padding-right:9px}
  .topbar h1{font-size:18px}
  .mobile-menu-toggle{left:9px}
  .content{padding-left:7px!important;padding-right:7px!important}
}