/* School Ka Saathi — native app feel (iPhone / iPad / Android). Loaded on every page. */
:root{--pwa-navy:#0f2a4a;--pwa-teal:#0f766e;--pwa-amber:#e8a020;--pwa-safe-top:env(safe-area-inset-top,0px);--pwa-safe-bottom:env(safe-area-inset-bottom,0px);--pwa-safe-left:env(safe-area-inset-left,0px);--pwa-safe-right:env(safe-area-inset-right,0px);--pwa-tabbar-h:62px}

/* ---- feel like an app, not a web page ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,label,.btn,.nav-item,.sks-tab,.month-chip,.card,.page-card,[role=button]{-webkit-tap-highlight-color:transparent}
a,img,.nav-item,.sks-tab,.btn,button{-webkit-touch-callout:none}
img{-webkit-user-drag:none;user-drag:none}
.sidebar,.top-navbar,.sks-tabbar,.btn,button,.nav-item,.month-chip,.badge,.badge-sks,.session-badge,.page-title,.card-header-custom,.sks-ptr{-webkit-user-select:none;user-select:none}
input,textarea,select,[contenteditable],.page-content p,.page-content td,.page-content li{-webkit-user-select:text;user-select:text}
a,button,input,select,textarea,label{touch-action:manipulation}
/* touch feedback without moving anything (scaling made items jump while scrolling on Android) */
@media (hover:none){.btn:active,.sks-tab:active,.page-card a:active,.quick-card:active,.stu-card:active{opacity:.72;transition:opacity .08s}}

/* iPhone: never zoom into a form field */
@supports (-webkit-touch-callout:none){input,select,textarea,.form-control,.form-select{font-size:max(16px,1em)!important}}

/* ---- installed app (standalone) ---- */
/* one scroller only: the page itself. overflow-x:hidden on BOTH html and body turns <body> into a second
   scroll box, which on Android phones locks scrolling and makes fixed bars/buttons jump. clip has no scroll box. */
html,body{overflow-x:hidden}
@supports (overflow:clip){html,body,body.sks-body{overflow-x:clip!important}}
html.pwa-ios.pwa-standalone{overscroll-behavior-y:none}
body.sidebar-open{touch-action:auto!important}
html.pwa-standalone body.sks-body{background:var(--pwa-navy)}
html.pwa-standalone .main-wrapper{background:var(--sks-bg,#eef3f9);min-height:100vh;min-height:100dvh}
html.pwa-standalone .install-button,html.pwa-standalone [data-install]{display:none!important}
/* status bar area (iPhone notch / Dynamic Island) in brand navy */
html.pwa-standalone body::before{content:"";position:fixed;left:0;right:0;top:0;height:var(--pwa-safe-top);background:var(--pwa-navy);z-index:10070;pointer-events:none}
html.pwa-standalone .top-navbar{padding-top:calc(8px + var(--pwa-safe-top))!important;top:0}
html.pwa-standalone .sidebar{padding-top:var(--pwa-safe-top)}
html.pwa-standalone .page-content{padding-left:max(10px,var(--pwa-safe-left))!important;padding-right:max(10px,var(--pwa-safe-right))!important}

/* ---- top bar stays fixed on phones, like a native app ---- */
@media (max-width:991.98px){
 .top-navbar{position:fixed!important;left:0;right:0;top:0;width:100%;background:#fff!important}
 body.sks-body .main-wrapper{padding-top:var(--sks-nav-h,64px)}
}
@media (max-width:991.98px){
 /* rows must reach both edges (max-width:100% cut the right gutter, so cards sat off-centre) */
 .page-content .row{max-width:none!important}
 html.pwa-standalone .page-content{overflow-x:clip}
}
@media print{body.sks-body .main-wrapper{padding-top:0!important}}

/* ---- bottom tab bar (phones) ---- */
.sks-tabbar{display:none}
@media (max-width:991.98px){
 .sks-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:10010;display:flex;align-items:stretch;justify-content:space-around;height:calc(var(--pwa-tabbar-h) + var(--pwa-safe-bottom));padding:0 max(4px,var(--pwa-safe-left)) var(--pwa-safe-bottom) max(4px,var(--pwa-safe-right));background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px);border-top:1px solid rgba(15,42,74,.08);box-shadow:0 -6px 24px rgba(15,23,42,.06)}
 .sks-tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#64748b;text-decoration:none;font-size:10.5px;font-weight:700;letter-spacing:.1px;background:none;border:0;padding:6px 2px;position:relative}
 .sks-tab i{font-size:19px;line-height:1}
 .sks-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sks-tab.active{color:var(--pwa-teal)}
 .sks-tab.active::before{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--pwa-teal)}
 body.has-tabbar .page-content{padding-bottom:calc(var(--pwa-tabbar-h) + var(--pwa-safe-bottom) + 24px)!important}
 body.has-tabbar #sks-helpbot{bottom:calc(var(--pwa-tabbar-h) + var(--pwa-safe-bottom) + 10px)!important}
 body.sidebar-open .sks-tabbar{visibility:hidden}
}
@media print{.sks-tabbar,.sks-ptr,.sks-progress,.sks-toast,.sks-sheet,.sks-backbtn{display:none!important}}

/* ---- back button (installed app has no browser back) ---- */
.sks-backbtn{display:none}
html.pwa-standalone .sks-backbtn.show{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;border-radius:50%;border:0;background:#eef4fb;color:#0f3b78;font-size:16px;flex:0 0 auto}

/* ---- page loading bar + fade ---- */
.sks-progress{position:fixed;left:0;top:var(--pwa-safe-top);height:3px;width:0;background:linear-gradient(90deg,var(--pwa-amber),var(--pwa-teal));z-index:10080;opacity:0;transition:width .3s ease,opacity .2s;pointer-events:none}
.sks-progress.run{opacity:1;width:78%;transition:width 6s cubic-bezier(.1,.6,.2,1),opacity .2s}
.sks-progress.done{opacity:0;width:100%;transition:width .2s,opacity .4s .15s}
@media (prefers-reduced-motion:no-preference){html.pwa-standalone .page-content{animation:sksIn .2s ease-out}}
@keyframes sksIn{from{opacity:.5}to{opacity:1}}

/* ---- pull to refresh ---- */
.sks-ptr{position:fixed;left:50%;top:calc(var(--pwa-safe-top) + 6px);width:40px;height:40px;margin-left:-20px;border-radius:50%;background:#fff;box-shadow:0 6px 18px rgba(15,23,42,.18);display:flex;align-items:center;justify-content:center;color:var(--pwa-teal);z-index:10075;transform:translateY(-70px);opacity:0;pointer-events:none}
.sks-ptr.spin i{animation:sksSpin .8s linear infinite}
@keyframes sksSpin{to{transform:rotate(360deg)}}

/* ---- toast + bottom sheet ---- */
.sks-toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--pwa-tabbar-h) + var(--pwa-safe-bottom) + 14px);z-index:10090;background:#0f172a;color:#fff;border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:12px;font-size:14px;box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:calc(100vw - 24px)}
.sks-toast button{border:0;border-radius:10px;padding:7px 12px;font-weight:800;background:var(--pwa-amber);color:#0f2a4a}
@media (min-width:992px){.sks-toast{bottom:24px}}
.sks-sheet-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:10095}
.sks-sheet{position:fixed;left:0;right:0;bottom:0;z-index:10096;background:#fff;border-radius:22px 22px 0 0;padding:18px 20px calc(18px + var(--pwa-safe-bottom));box-shadow:0 -16px 40px rgba(0,0,0,.2);max-width:560px;margin:0 auto;animation:sksUp .25s ease-out;color:#0f172a}
@keyframes sksUp{from{transform:translateY(100%)}to{transform:none}}
.sks-sheet .grab{width:40px;height:5px;border-radius:3px;background:#cbd5e1;margin:0 auto 14px}
.sks-sheet .head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.sks-sheet .head img{width:52px;height:52px;border-radius:12px}
.sks-sheet h3{font-size:18px;font-weight:800;margin:0}
.sks-sheet p{margin:0;color:#475569;font-size:14px}
.sks-sheet ol{margin:12px 0 14px;padding-left:20px;font-size:15px;line-height:1.9}
.sks-sheet ol i{color:#2563eb}
.sks-sheet .actions{display:flex;gap:10px}
.sks-sheet .actions button{flex:1;border:0;border-radius:12px;padding:12px;font-weight:800;font-size:15px}
.sks-sheet .primary{background:var(--pwa-teal);color:#fff}
.sks-sheet .ghost{background:#eef2f7;color:#334155}

/* ---- offline banner ---- */
.sks-offline{position:fixed;left:0;right:0;top:var(--pwa-safe-top);z-index:10085;background:#b91c1c;color:#fff;text-align:center;font-size:13px;font-weight:700;padding:6px 10px;transform:translateY(-110%);transition:transform .25s}
.sks-offline.show{transform:none}

/* ---- login page inside the installed app ---- */
html.pwa-standalone .login-shell .welcome{padding-top:calc(var(--pwa-safe-top) + 20px)!important}
html.pwa-standalone .login-shell .signin{padding-bottom:calc(var(--pwa-safe-bottom) + 16px)!important}
.login-shell .brand-mark{display:block}
@media (max-width:430px){html.pwa-standalone .top-navbar .session-badge{display:none!important}html.pwa-standalone .page-title{max-width:calc(100vw - 170px)!important}}