/* ADAMEHR_PANEL_RESPONSIVE_0176 */

/* Robust responsive shell for narrow desktop windows, tablets and phones. */
.adamehr-mobile-nav-toggle,
.adamehr-mobile-nav-close,
.adamehr-mobile-nav-backdrop{display:none}

@media (max-width:1180px){
  .shell{grid-template-columns:220px minmax(0,1fr)}
  .content{padding:20px}
  .topbar{padding:10px 18px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Use drawer navigation much earlier than mobile width. This also fixes small
   browser windows where the classic 252px sidebar consumed most of the page. */
@media (max-width:1024px){
  html,body{width:100%;max-width:100%;overflow-x:hidden!important}
  body.adamehr-mobile-nav-open{overflow:hidden!important}

  .shell{display:block!important;width:100%!important;max-width:100%!important;min-height:100vh!important;overflow:visible!important}
  .main{display:flex!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:visible!important}
  .content,.content>*{min-width:0!important;max-width:100%!important}

  .sidebar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:auto!important;
    bottom:0!important;
    z-index:1200!important;
    width:min(78vw,272px)!important;
    max-width:272px!important;
    min-width:0!important;
    height:100dvh!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain;
    padding:14px 12px 18px!important;
    transform:translate3d(105%,0,0)!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:transform .22s ease,visibility .22s ease,box-shadow .22s ease!important;
    box-shadow:none!important;
  }
  .sidebar.adamehr-mobile-nav-open{
    transform:translate3d(0,0,0)!important;
    visibility:visible!important;
    pointer-events:auto!important;
    box-shadow:-18px 0 52px rgba(6,24,46,.32)!important;
  }

  .adamehr-mobile-nav-backdrop{
    display:block!important;
    position:fixed!important;
    inset:0!important;
    z-index:1190!important;
    width:100vw!important;
    height:100dvh!important;
    border:0!important;
    padding:0!important;
    margin:0!important;
    background:rgba(9,25,45,.52)!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transition:opacity .2s ease,visibility .2s ease!important;
  }
  .adamehr-mobile-nav-backdrop.is-visible{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }

  .sidebar-brand{position:relative!important;padding-left:44px!important;padding-right:8px!important}
  .adamehr-mobile-nav-close{
    display:grid!important;
    place-items:center!important;
    position:absolute!important;
    left:0!important;
    right:auto!important;
    top:4px!important;
    width:34px!important;
    height:34px!important;
    padding:0!important;
    border:1px solid rgba(255,255,255,.16)!important;
    border-radius:10px!important;
    background:rgba(255,255,255,.08)!important;
    color:#fff!important;
    font-size:20px!important;
    line-height:1!important;
  }

  .topbar{
    position:sticky!important;
    top:0!important;
    z-index:80!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:9px!important;
    min-height:60px!important;
    padding:8px 12px!important;
    width:100%!important;
    max-width:100%!important;
  }
  .topbar>div:first-of-type{min-width:0!important}
  .topbar h2{font-size:14.5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .topbar p{display:none!important}

  .adamehr-mobile-nav-toggle{
    display:grid!important;
    place-items:center!important;
    grid-column:1!important;
    grid-row:1!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    padding:0!important;
    border:1px solid #dbe5eb!important;
    border-radius:11px!important;
    background:#fff!important;
    color:#14314e!important;
    box-shadow:0 5px 15px rgba(13,36,68,.08)!important;
    font-size:21px!important;
    line-height:1!important;
  }

  .topbar-actions{
    grid-column:3!important;
    grid-row:1!important;
    width:auto!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    overflow:visible!important;
    padding:0!important;
  }
  .school-switch{min-width:0!important;max-width:210px!important}
  .school-switch>button{min-width:0!important;max-width:210px!important;min-height:40px!important;padding:0 9px!important}
  .school-switch>button span:first-child{min-width:0!important}
  .school-switch>button b{display:block!important;max-width:145px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .school-switch>button small{display:none!important}
  .switch-menu{position:fixed!important;top:60px!important;right:10px!important;left:10px!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:58dvh!important;overflow-y:auto!important;z-index:1300!important}
  .avatar{width:38px!important;height:38px!important;min-width:38px!important;border-radius:10px!important}
  #btn-logout{min-height:38px!important;padding:0 10px!important;white-space:nowrap!important}

  .content{padding:12px 10px 22px!important;gap:12px!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:hidden!important}
  .card{padding:14px!important;border-radius:14px!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow:hidden!important}
  .card>header{gap:8px!important;margin-bottom:11px!important;flex-wrap:wrap!important}

  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr!important;gap:8px!important;width:100%!important;min-width:0!important}
  .stat{padding:11px 12px!important;min-width:0!important}
  .stat b{font-size:20px!important}
  .module-list{grid-template-columns:1fr!important}
  .module-row{min-width:0!important}

  .demo-banner{padding:8px 10px!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important}

  .table-wrap,
  .student-table-wrap,
  .simple-staff-table-wrap,
  .adamehr-responsive-table-wrap,
  [class*="table-wrap"]{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
  }
  table{width:max-content!important;min-width:680px!important;max-width:none!important}

  .simple-staff-actions{flex-wrap:wrap!important;gap:5px!important}
  .simple-staff-actions button{min-height:32px!important;padding:0 8px!important}

  .simple-staff-modal,
  .student-modal,
  [class*="modal-dialog"]{
    position:relative!important;
    max-width:calc(100vw - 16px)!important;
    width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
    margin:8px!important;
  }
  .simple-staff-modal-body,
  .student-modal-body,
  [class*="modal-body"]{
    max-width:100%!important;
    max-height:calc(100dvh - 82px)!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
  }

  /* Guard against page-specific fixed/min widths leaking into narrow layouts. */
  .content section,
  .content article,
  .content form,
  .content fieldset,
  .content .simple-staff-permission-editor,
  .content .simple-staff-permission-groups{
    max-width:100%!important;
    min-width:0!important;
  }
}

@media (max-width:640px){
  .topbar{grid-template-columns:42px minmax(0,1fr) auto!important;padding:7px 9px!important}
  .topbar-actions{gap:4px!important}
  .school-switch{max-width:150px!important}
  .school-switch>button{max-width:150px!important}
  .school-switch>button b{max-width:102px!important;font-size:11.5px!important}
  .avatar{display:none!important}
  #btn-logout{min-height:36px!important;padding:0 8px!important;font-size:12px!important}
  .content{padding:9px 7px 18px!important}
  .card{padding:11px!important}
  .sidebar{width:min(76vw,252px)!important;max-width:252px!important}
  .nav-item{min-height:41px!important;padding:9px 10px!important;font-size:12.5px!important}
  .btn{min-height:39px!important;padding-inline:12px!important;font-size:12.5px!important}
  .field input,.field select{min-height:43px!important}
  .simple-staff-permission-list{grid-template-columns:1fr!important}
  .adamehr-permission-toolbar{position:static!important}
}

@media (max-width:420px){
  .topbar{grid-template-columns:40px minmax(0,1fr)!important}
  .topbar-actions{grid-column:1/-1!important;grid-row:2!important;width:100%!important;justify-content:stretch!important}
  .school-switch{max-width:none!important;flex:1!important}
  .school-switch>button{width:100%!important;max-width:none!important}
  .school-switch>button b{max-width:60vw!important}
  #btn-logout{flex:0 0 auto!important}
  .sidebar{width:min(82vw,248px)!important;max-width:248px!important}
  .auth{padding:12px 8px!important}
  .auth-card{padding:20px 14px 18px!important;border-radius:18px!important}
  .auth-brand img{width:60px!important;height:60px!important}
  .otp-row{gap:4px!important}
  .otp-row input{min-height:46px!important;font-size:18px!important;border-radius:9px!important}
}

@media (prefers-reduced-motion:reduce){
  .sidebar,.adamehr-mobile-nav-backdrop{transition:none!important}
}