/* EduSmart360 Frontend Rebuild — responsive workspace authority.
   This layer adapts content density, overflow, safe areas and touch ergonomics only.
   Authenticated shell placement/drawer geometry belongs solely to premium-shell-v425.css. */

:root{
  --es360-content-max:1500px;
  --es360-touch:44px;
  --es360-safe-top:env(safe-area-inset-top,0px);
  --es360-safe-right:env(safe-area-inset-right,0px);
  --es360-safe-bottom:env(safe-area-inset-bottom,0px);
  --es360-safe-left:env(safe-area-inset-left,0px);
}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{min-width:320px;max-width:100vw;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,input,select,textarea{max-width:100%}
.app,.main,.page,.card,.g2>*,.g3>*,.g4>*,.g24>*,.audit-grid>*,.billing-grid>*{min-width:0}
.main>.page{width:min(100%,var(--es360-content-max));margin-inline:auto}

.responsive-table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.responsive-table-wrap>.tbl{min-width:680px}
.tbl th,.tbl td{overflow-wrap:normal;word-break:normal}
.tabs{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
.tab{min-width:max-content}
.sb,.as-topbar,.billing-toolbar,.billing-section-head,.ct{min-width:0}
.btn,.tb-btn,.mi,.tab,.as-btn{touch-action:manipulation}
.mbox,.es360-dialog-panel{overscroll-behavior:contain}
.toast{max-width:min(440px,calc(100vw - 32px));overflow-wrap:anywhere}
.es360-dialog-message,.es360-dialog-details,.billing-plan-description,.billing-copy,.billing-wrap,.ec,.ec *{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.es360-dialog-message,.es360-dialog-details{overflow-x:hidden}
.es360-persistent-scroll-frame{width:100%;max-width:100%;min-width:0;overflow:hidden}
.es360-scroll-viewport{max-height:430px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.es360-scroll-viewport>.tbl{min-width:1050px}
.es360-persistent-scrollbar{height:18px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain}
.es360-persistent-scrollbar.is-hidden{display:none}
.es360-persistent-scroll-track{height:1px}
.es360-school-card-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 14px}
.es360-school-card-details>div{min-width:0;display:flex;flex-direction:column;gap:3px}
.es360-school-card-details b,.es360-school-archive-note{overflow-wrap:anywhere;word-break:break-word}

@media (max-width:1199px){
  .g4,.g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .audit-grid{grid-template-columns:minmax(180px,240px) minmax(0,1fr)}
  .audit-grid>*:last-child{grid-column:1/-1}
  .billing-wide{min-width:900px}
}

@media (max-width:1023px){
  .main>.page{padding:26px max(20px,var(--es360-safe-right)) calc(38px + var(--es360-safe-bottom)) max(20px,var(--es360-safe-left))}
  .g24,.audit-grid{grid-template-columns:1fr}
  .audit-grid>*{grid-column:auto}
  .mbox{width:min(680px,100%);max-width:100%}
  .observer-banner.on{position:relative;z-index:1;width:auto;margin:16px 20px 0}
}

@media (max-width:767px){
  .main>.page{padding:22px max(16px,var(--es360-safe-right)) calc(30px + var(--es360-safe-bottom)) max(16px,var(--es360-safe-left))}
  .g2,.g3,.g4,.g24,.frow,.frow3{grid-template-columns:1fr;gap:12px}
  .ct,.billing-section-head{align-items:flex-start}
  .sb,.billing-toolbar,.as-topbar{display:grid;grid-template-columns:1fr}
  .sb>*,.billing-toolbar>*,.billing-toolbar .grow,.billing-toolbar .fg,.as-topbar>*{width:100%;min-width:0}
  .si{min-width:0}
  .tabs{justify-content:flex-start;scroll-snap-type:x proximity}.tab{flex:0 0 auto;scroll-snap-align:start}
  .btn{min-height:var(--es360-touch);justify-content:center}
  .tb-btn{width:var(--es360-touch);height:var(--es360-touch)}
  .responsive-table-wrap>.tbl{min-width:620px}.billing-wide{min-width:850px}
  .ag{grid-template-columns:1fr}.as-card{min-height:0}.cal-grid,.cal-hdr,.chart-wrap{min-width:420px}
  .toast{left:12px;right:12px;bottom:calc(12px + var(--es360-safe-bottom));max-width:none;text-align:center}
  .observer-banner.on{grid-template-columns:42px minmax(0,1fr);gap:10px;margin:14px 16px 0;padding:12px;border-radius:14px}
  .observer-content{min-width:0}.observer-copy{line-height:1.45}.observer-exit{grid-column:1/-1;width:100%;min-height:44px}
}

@media (max-width:767px){
  body.es360-phone{padding-bottom:calc(var(--es360-mobile-nav-h) + var(--es360-safe-bottom))}
  body.es360-phone .app{padding-bottom:0}
  body.es360-phone .main>.page{padding:20px 16px calc(28px + var(--es360-mobile-nav-h) + var(--es360-safe-bottom))}
  body.es360-phone .pt{font-size:21px;line-height:1.25;letter-spacing:0;margin-bottom:3px}
  body.es360-phone .ps{font-size:12.5px;line-height:1.5;margin:0 0 18px}
  body.es360-phone #dash-school:empty{display:none}
  body.es360-phone #dash-school{margin-top:-2px}
  body.es360-phone .g4{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;margin-bottom:16px}
  body.es360-phone .g3{grid-template-columns:1fr;gap:10px}
  body.es360-phone .sc{min-height:0;padding:15px 14px;border-radius:14px}
  body.es360-phone .sc-ic{right:13px;top:13px;width:34px;height:34px}
  body.es360-phone .sc-l{max-width:calc(100% - 48px);font-size:11.5px;line-height:1.3}
  body.es360-phone .sc-n{margin-top:4px;font-size:26px;line-height:1.05;letter-spacing:0}
  body.es360-phone .sc-tr{margin-top:5px;font-size:10.5px;line-height:1.3}
  body.es360-phone .pbw{margin-top:10px}
  body.es360-phone .g24{gap:10px}
  body.es360-phone .card{border-radius:14px;padding:16px}
  body.es360-phone .ct{margin-bottom:10px}
  body.es360-phone .sb{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
  body.es360-phone .observer-banner.on{grid-template-columns:38px minmax(0,1fr);gap:10px;width:auto;margin:12px 12px 0;padding:12px;border-radius:14px;box-shadow:var(--edl-shadow-1)}
  body.es360-phone .observer-icon{width:38px;height:38px;border-radius:10px}
  body.es360-phone .observer-exit{grid-column:1/-1;width:100%;justify-content:center}
}

@media (max-width:480px){
  .main>.page{padding:18px 12px calc(24px + var(--es360-safe-bottom))}
  .ct{flex-direction:column}.ct>*{width:100%}
  .btn{width:100%}
  .modal{padding:0;align-items:flex-end}
  .mbox,.es360-dialog-panel{width:100%;max-width:none;max-height:calc(100dvh - var(--es360-safe-top))}
  .es360-dialog-actions{display:grid;grid-template-columns:1fr}.es360-dialog-actions button{width:100%}
  .frow,.frow3{display:grid;grid-template-columns:1fr}
  .as-card-actions,.as-card-status-row{grid-template-columns:1fr 1fr}
  .billing-plan-grid,.es360-school-card-details{grid-template-columns:1fr}
  .responsive-table-wrap{width:calc(100% + 4px);margin-inline:-2px}.responsive-table-wrap>.tbl{min-width:560px}
  body.es360-phone .main>.page{padding:18px 12px calc(26px + var(--es360-mobile-nav-h) + var(--es360-safe-bottom))}
  body.es360-phone .g4{grid-template-columns:1fr 1fr;gap:8px}
  body.es360-phone .sc{min-height:144px;padding:16px 14px 14px}
  body.es360-phone .sc-n{font-size:34px}
  body.es360-phone .observer-banner.on{grid-template-columns:34px minmax(0,1fr);margin:10px 12px 0;padding:11px}
  body.es360-phone .observer-icon{width:34px;height:34px}
  body.es360-phone .observer-title{font-size:9px}
  body.es360-phone .observer-copy{font-size:11.5px}
}

@media (max-width:374px){body.es360-phone .g4{grid-template-columns:1fr}body.es360-phone .sc{min-height:128px}}
@media (max-height:520px) and (orientation:landscape) and (max-width:1023px){.mbox,.es360-dialog-panel{max-height:96dvh}}
@media (min-width:1920px){:root{--es360-content-max:1680px}.main>.page{padding-inline:54px}}
@media (hover:none),(pointer:coarse){.btn,.mi,.tab,.tb-btn,.as-btn,.cbtn{min-height:var(--es360-touch)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;scroll-behavior:auto;transition-duration:.01ms}}