/* School ERP - responsive app layer v2 (all Android sizes: 320px phones -> tablets). Loaded LAST on every page. */
/* SCROLL SAFETY: html must stay overflow:visible so body's overflow-x:hidden is handed to the viewport.
   (html + body both hidden made body its own scroll box and froze vertical scrolling in the Android app.) */
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden;min-height:100vh;min-height:100dvh;overflow-wrap:anywhere;
  padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);padding-bottom:env(safe-area-inset-bottom)}
/* login/offline pages: auto margins center the box, and let it scroll from the top when the keyboard shrinks the screen */
.login-box{margin:auto}
button,a,[onclick],select{touch-action:manipulation}
img,video,canvas,svg{max-width:100%;height:auto}
.main,.card,.tl-outer,.mcal-card,.br-card,.ci,.ov-card,.mcal-grid>*,.srow>*,.fr>*,.crow>*{min-width:0;max-width:100%}
.br-grid{grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr))}
.status-panels-container{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important}
.tw,.table-wrap,.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* popups: never taller/wider than the visible screen (dvh = excludes Android browser bars) */
.modal,.cf-card,.mg-card,.ta-card,.ma-card,.sylmod-box{max-height:92vh;max-height:92dvh;max-width:100%}
#toast{max-width:calc(100vw - 24px)}

/* ---- tablets / small laptops ---- */
@media(max-width:1000px){.tl-wrap{grid-template-columns:repeat(6,minmax(0,1fr))!important}}

/* ---- phones ---- */
@media(max-width:720px){
  /* headers (HOD, Teacher): row 1 = title, row 2 = swipeable action pills */
  .topbar{height:auto!important;min-height:52px;flex-wrap:wrap;gap:6px 10px;padding:calc(8px + env(safe-area-inset-top)) 12px 8px!important}
  .topbar>*{min-width:0}
  .topbar .tb-l{flex:1 1 100%}
  .topbar .tb-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar .tb-r{flex:1 1 100%;gap:8px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .topbar .tb-r::-webkit-scrollbar{display:none}
  .topbar .tb-ts{display:none}
  .topbar button,.topbar .tb-btn{flex:0 0 auto;white-space:nowrap;min-height:40px;padding:8px 14px!important;font-size:13px!important;border-radius:999px!important}
  /* Admin header: brand + user on top, menu row below */
  .tb{flex-wrap:wrap;gap:6px 10px;padding:calc(8px + env(safe-area-inset-top)) 12px 6px!important}
  .tb-brand{order:1;min-width:0}
  .tb-user{order:2;margin-left:auto}
  .tb-nav{order:3;flex:1 1 100%!important}
  .ni{padding:10px 12px;min-height:40px}
  /* spacing */
  .main{padding:12px 12px calc(16px + env(safe-area-inset-bottom))!important}
  .card,.tl-outer,.mcal-card{padding:12px!important}
  .ph h1{font-size:19px}
  /* timeline: 4 months per row, 3 rows, no sideways scroll */
  .tl-wrap{grid-template-columns:repeat(4,minmax(0,1fr))!important;overflow:visible!important}
  .tl-cell{min-width:0!important;padding:8px 4px!important}
  .tl-st{font-size:7.5px!important;white-space:normal}
  /* cards */
  .br-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .br-card{padding:12px}
  .br-name{white-space:normal!important;line-height:1.3;font-size:10.5px}
  .mcal-grid,.srow,.crow,.ov-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .fr.c2,.fr.c3,.fr.c4,.fr.c5,.fr.c6,.sylmod-filters,.cf-row{grid-template-columns:1fr!important}
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* forms: 16px stops Android/Chrome auto-zoom, 44px = comfortable tap */
  input,select,textarea{font-size:16px!important;max-width:100%}
  input:not([type=checkbox]):not([type=radio]),select{min-height:44px}
  /* popups become bottom sheets */
  .sylmod-bg,.mg-ov,.ta-ov,.ma-ov,.cf-ov,.mbg,.mo{align-items:flex-end!important;padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important}
  .modal,.cf-card,.mg-card,.ta-card,.ma-card,.sylmod-box{width:100%!important;border-radius:16px 16px 12px 12px;padding-left:14px;padding-right:14px}
  #toast{left:12px!important;right:12px!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;text-align:center}
  .login-box{padding:28px 20px!important}
}
/* very small phones (320-360px) */
@media(max-width:360px){
  .tl-cell .tl-p{font-size:14px}
  .br-pct{font-size:22px!important}
  .mcal-grid,.srow,.crow,.ov-grid{gap:6px!important}
}
/* landscape phones: keep header slim */
@media(max-height:480px) and (orientation:landscape){.topbar,.tb{position:static!important}}
/* installed app: behave like an app (UI not selectable, text/inputs still are) */
@media(display-mode:standalone){body{-webkit-user-select:none;user-select:none}input,textarea,[contenteditable],td,th,p,pre{-webkit-user-select:text;user-select:text}}