/* Final responsive overrides; desktop tables and printed reports stay tabular. */
aside{overflow-y:auto}
aside .bottom{position:static;margin-top:28px}
@media screen and (max-width:800px){
 html,body{width:100%;margin:0}
 body{overflow-wrap:anywhere}
 aside{position:static;width:100%;height:auto;padding:16px;overflow:visible}
 aside h2{font-size:26px;margin:0 0 14px}
 nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}
 nav button,nav .general-report-button{width:100%;min-width:0;margin:0;padding:12px 10px;min-height:48px;white-space:normal;overflow-wrap:anywhere;font-size:14px;line-height:1.4}
 nav .general-report-button{grid-column:1 / -1}
 main{width:100%;max-width:100%;min-width:0;margin:0;padding:16px}
 main header{width:100%;align-items:stretch;gap:12px}
 h1{font-size:25px;line-height:1.25}
 h3{line-height:1.4}
 main header>*,.panel,.stat,.row>*,.filters>*,.section-top>*{min-width:0;max-width:100%}
 .panel{padding:16px;margin:16px 0}
 .row,.filters,.section-top,.session-bar{gap:10px}
 .section-top{flex-direction:column;align-items:stretch}
 .filters,.row{flex-wrap:wrap}
 .filters>*{width:100%}
 .row>.field,.row>label{flex:1 1 100%}
 .row>button,.section-top button{white-space:normal;max-width:100%}
 input,select,textarea,button{font-size:16px}
 input,select,textarea{box-sizing:border-box;min-width:0;max-width:100%}
 select{width:100%;text-overflow:ellipsis}
 button{min-height:44px;white-space:normal;overflow-wrap:anywhere}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .stat{padding:12px}
 .stat strong{font-size:25px;overflow-wrap:anywhere}
 .subject-grid,.criteria-grid{grid-template-columns:minmax(0,1fr)}
 .scroll{overflow:visible;width:100%;max-width:100%}
 /* Each record is one card, with its original column names above the values. */
 .scroll table,.scroll table.student-roster{display:block;width:100%!important;min-width:0!important;max-width:100%;table-layout:auto;white-space:normal}
 .scroll thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .scroll tbody{display:block;width:100%}
 .scroll tbody>tr{display:block;margin:0 0 16px;border:1px solid #dce4ef;border-radius:10px;background:#fff;padding:6px 12px;width:100%;min-width:0}
 .scroll tbody>tr:last-child{margin-bottom:0}
 .scroll tbody>tr>td,.scroll table.student-roster td{display:block;width:100%!important;min-width:0!important;max-width:100%;padding:10px 0;border:0;border-bottom:1px solid #edf1f6;white-space:normal!important;overflow-wrap:anywhere;text-align:left;font-size:16px}
 .scroll tbody>tr>td:last-child{border-bottom:0}
 .scroll td[data-label]::before{content:attr(data-label);display:block;color:#52657b;font-size:14px;font-weight:600;line-height:1.4;margin-bottom:6px}
 .scroll td input,.scroll td select,.scroll td textarea,.credential-table input{width:100%!important;min-width:0!important;max-width:100%!important;min-height:44px;font-size:16px}
 .scroll td button{max-width:100%;margin:4px 0}
 .record-actions,.record-actions .hint{width:100%;min-width:0!important;max-width:100%!important}
 dialog,dialog:has(.stats),dialog:has(.scroll),dialog:has(.criteria-grid){box-sizing:border-box;width:calc(100% - 24px)!important;max-width:calc(100% - 24px)!important;max-height:calc(100dvh - 32px);padding:18px;margin:auto;overflow-y:auto}
 dialog td{min-width:0!important}
 dialog label{max-width:100%;overflow-wrap:anywhere}
 dialog input,dialog select,dialog textarea{width:100%;min-width:0;font-size:16px}
 #loginGate{padding:16px;min-height:100dvh}
 .login-card{min-width:0;padding:22px;max-width:450px}
 #storageStatus{overflow-wrap:anywhere;font-size:14px}
}
@media screen and (max-width:360px){
 main{padding:12px}
 .panel{padding:12px}
 nav{grid-template-columns:minmax(0,1fr)}
 .stats{grid-template-columns:minmax(0,1fr)}
}