/*
 * SCHS Dashboard Responsive Framework
 * Use on all current and future dashboard pages.
 */

:root{
  --schs-mobile-header-height:64px;
}

/* General responsive safety */
html{
  -webkit-text-size-adjust:100%;
}

body{
  overflow-x:hidden;
}

img,
svg,
video,
canvas{
  max-width:100%;
}

table{
  width:100%;
}

input,
select,
textarea,
button{
  max-width:100%;
}

/* Standard dashboard layout */
.shell,
.app-shell{
  min-width:0;
}

.main,
.content,
.card,
.card-body,
.card-head,
.topbar{
  min-width:0;
}

/* Prevent long text from breaking layouts */
.card,
.card *,
.profile,
.profile *,
.page-title,
.page-title *,
.welcome,
.welcome *,
td,
th{
  overflow-wrap:anywhere;
}

/* Responsive grids */
.apps,
.kpi-grid,
.grid,
.form-grid,
.cards-grid{
  min-width:0;
}

@media(max-width:1180px){
  .apps{
    grid-template-columns:repeat(2,minmax(220px,1fr))!important;
  }

  .kpi-grid{
    grid-template-columns:repeat(2,minmax(180px,1fr))!important;
  }
}

@media(max-width:900px){
  /* Main dashboard/admin layout becomes single column */
  .shell,
  .app-shell,
  body.schs-menu-collapsed .shell,
  body.schs-menu-collapsed .app-shell{
    grid-template-columns:1fr!important;
  }

  .main{
    padding:0 18px 28px!important;
  }

  .topbar{
    min-height:auto!important;
    margin:0 -18px 18px!important;
    padding:14px 18px!important;
    display:flex!important;
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:14px!important;
  }

  .topbar .actions,
  .actions{
    width:100%!important;
    display:flex!important;
    flex-wrap:wrap!important;
    gap:10px!important;
  }

  .search,
  input[type="search"]{
    width:100%!important;
    max-width:none!important;
  }

  .profile{
    width:100%!important;
  }

  .section-head,
  .card-head,
  .toolbar,
  .filters{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:10px!important;
  }

  .filters{
    width:100%!important;
  }

  .filters > *,
  .toolbar > *,
  .section-head select,
  .section-head button{
    width:100%!important;
  }

  /* Sidebar becomes off-canvas */
  .sidebar{
    position:fixed!important;
    top:0!important;
    left:0!important;
    z-index:1000!important;
    width:min(292px,86vw)!important;
    height:100vh!important;
    transform:translateX(-105%)!important;
    transition:transform .22s ease!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  .sidebar.open,
  body.schs-mobile-menu-open .sidebar{
    transform:translateX(0)!important;
  }

  body.schs-mobile-menu-open::after{
    content:""!important;
    position:fixed!important;
    inset:0!important;
    z-index:900!important;
    background:rgba(2,8,23,.48)!important;
  }

  .mobile-menu{
    display:inline-flex!important;
  }

  .schs-menu-toggle{
    display:grid!important;
  }

  /* Tables scroll instead of squeezing */
  table{
    min-width:760px;
  }

  .table-wrap,
  .table-container,
  .card:has(table),
  .card-body:has(table){
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }

  /* Login page */
  .login-shell{
    grid-template-columns:1fr!important;
  }

  .login-panel{
    min-height:100vh!important;
    padding:28px!important;
  }

  .login-visual{
    display:none!important;
  }
}

@media(max-width:680px){
  .apps,
  .kpi-grid,
  .grid,
  .form-grid,
  .cards-grid{
    grid-template-columns:1fr!important;
  }

  .content{
    padding:0!important;
  }

  .page-title h1,
  .welcome h2{
    font-size:20px!important;
  }

  .card-body{
    padding:15px!important;
  }

  .card-head{
    padding:15px!important;
  }

  .card-body{
    grid-template-columns:48px minmax(0,1fr)!important;
  }

  .icon{
    width:46px!important;
    height:46px!important;
  }

  .profile span,
  .profile-email{
    font-size:11.5px!important;
  }

  .footer{
    flex-direction:column!important;
    gap:6px!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }
}

@media(max-width:480px){
  body{
    font-size:13.5px!important;
  }

  .main{
    padding:0 14px 24px!important;
  }

  .topbar{
    margin-left:-14px!important;
    margin-right:-14px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }

  .login-panel{
    padding:22px!important;
  }

  .login-card{
    padding:16px!important;
  }

  .logo,
  .crest,
  .crest img{
    width:88px!important;
    height:88px!important;
  }

  .school-name{
    font-size:16px!important;
  }

  .login-panel h1{
    font-size:23px!important;
  }

  .card-footer{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}

/* Future-page helper classes */
.schs-responsive-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(220px,1fr));
  gap:14px;
}

.schs-responsive-two{
  display:grid;
  grid-template-columns:repeat(2,minmax(240px,1fr));
  gap:14px;
}

.schs-table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

@media(max-width:900px){
  .schs-responsive-grid,
  .schs-responsive-two{
    grid-template-columns:1fr!important;
  }
}