/* PishkhanPlus 2.40.0 — responsive layout hardening for iPhone, Android and narrow tablets.
   Loaded last so legacy module styles cannot force desktop widths on touch devices. */
:root{--p2393-safe-b:env(safe-area-inset-bottom,0px);--p2393-safe-t:env(safe-area-inset-top,0px)}
html{width:100%;max-width:100%;overflow-x:hidden}
body{width:100%;max-width:100%;min-width:0;overflow-x:hidden}
#app,.work,#page{min-width:0;max-width:100%}
#page :where(*, *::before, *::after){box-sizing:border-box}
#page :where(.box,.kpi,.ph,.viz,.g2,.g3,.cols,.grid,.bar,.board,.kc,.card,.tile){min-width:0;max-width:100%}
#page :where(img,svg,canvas,video){max-width:100%;height:auto}
#page :where(input,select,textarea,button){max-width:100%;font:inherit}
#page :where(.tw,.table-wrap,.tbl-wrap,.table-responsive,.g-wrap){max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
#page .g{width:100%;min-width:640px}
#layer{max-width:100vw}
#layer :where(.dlg,.wiz,.pal,.coach,.pop){box-sizing:border-box;min-width:0;max-width:calc(100vw - 24px)}
@media (max-width: 900px){
  #page .kpis{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  #page .c3,#page .c21,#page .c12{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #page .ph{align-items:flex-start}
}
@media (max-width: 760px), (pointer:coarse) and (hover:none){
  html,body{width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;overflow:hidden!important;overscroll-behavior:none}
  body{padding:0!important}
  #app.app{display:flex!important;flex-direction:column!important;width:100%!important;max-width:100%!important;min-width:0!important;height:100vh!important;height:100dvh!important;min-height:0!important;overflow:hidden!important;padding:0!important;margin:0!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
  #app>.side{display:none!important}
  #app>.work{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:100%!important;overflow:hidden!important;padding:0!important;margin:0!important}
  #app>.work>.topbar{display:flex!important;flex:0 0 auto!important;flex-direction:column-reverse!important;width:100%!important;max-width:100%!important;min-width:0!important;gap:0!important;padding-top:var(--p2393-safe-t);border-radius:0 0 14px 14px!important}
  #app .tabs{display:flex!important;flex:0 0 auto!important;width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important;padding:4px 9px 0!important}
  #app .tab{flex:0 0 auto!important;max-width:72vw!important;min-height:38px!important;padding:7px 10px!important}
  #app .cmd{display:flex!important;flex:0 0 auto!important;width:auto!important;max-width:none!important;min-width:0!important;margin:6px 9px!important;min-height:40px!important}
  #app .cmd span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  #app #page.page,#app main#page{display:block!important;position:relative!important;flex:1 1 auto!important;width:100%!important;max-width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;overflow-x:hidden!important;overflow-y:auto!important;padding:10px 10px calc(100px + var(--p2393-safe-b))!important;margin:0!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important}
  #app>#status,.status{display:none!important}
  #mnav.mnav{display:grid!important;position:fixed!important;inset-inline:8px!important;bottom:calc(7px + var(--p2393-safe-b))!important;z-index:9999!important;width:auto!important;max-width:none!important;margin:0!important;padding:5px!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:3px!important;border-radius:17px!important}
  #mnav :where(button,a){min-width:0!important;min-height:46px!important;padding:5px 3px!important;white-space:normal!important}
  #page>*{min-width:0!important;max-width:100%!important}
  #page .ph{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:9px!important;padding:11px!important;margin-bottom:10px!important;border-radius:14px!important}
  #page .ph>div{width:100%!important;max-width:100%!important;min-width:0!important}
  #page .ph h1{font-size:17px!important;line-height:1.55!important}
  #page .ph .sub{font-size:11px!important;line-height:1.7!important}
  #page .ph>.bar,#page .ph .bar{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;justify-content:stretch!important;gap:6px!important;width:100%!important}
  #page .ph .bar .btn{display:flex!important;justify-content:center!important;min-width:0!important;width:100%!important;min-height:40px!important;padding:7px 6px!important;white-space:normal!important;line-height:1.45!important;font-size:11.5px!important}
  #page .kpis{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:1px!important;width:100%!important;max-width:100%!important;margin:0 0 10px!important}
  #page .kpi{min-width:0!important;padding:9px!important;overflow:hidden!important}
  #page .kpi .k{font-size:10px!important;line-height:1.55!important;overflow-wrap:anywhere!important}
  #page .kpi .v{font-size:17px!important;line-height:1.5!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  #page .kpi .d{font-size:9.5px!important;line-height:1.5!important;overflow-wrap:anywhere!important}
  #page .cols,#page .c2,#page .c3,#page .c21,#page .c12,#page .g2,#page .g3,#page .grid2,#page .grid3{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;width:100%!important;max-width:100%!important}
  #page .box{width:100%!important;max-width:100%!important;min-width:0!important;margin-inline:0!important;border-radius:13px!important;overflow:hidden!important}
  #page .box-h{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important;padding:9px 10px!important}
  #page .box-b{min-width:0!important;max-width:100%!important;padding:10px!important}
  #page .bar{display:flex!important;flex-wrap:wrap!important;gap:6px!important;min-width:0!important;max-width:100%!important}
  #page .bar>.btn{min-height:38px!important;max-width:100%!important;white-space:normal!important;line-height:1.4!important}
  #page .board{display:grid!important;grid-auto-flow:column!important;grid-auto-columns:minmax(78vw,1fr)!important;grid-template-columns:none!important;gap:7px!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
  #page .kc{min-width:0!important;padding:9px!important}
  #page .tw,#page .table-wrap,#page .tbl-wrap,#page .table-responsive,#page .g-wrap{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important}
  #page table{max-width:none!important}
  #page .g{width:max-content!important;min-width:640px!important;max-width:none!important;font-size:11px!important}
  #page .g th,#page .g td{padding:7px 8px!important;white-space:nowrap!important}
  #page .g tbody tr{min-height:38px}
  #page :where(.chart,svg,canvas){max-width:100%!important}
  #page .chart{overflow-x:auto!important;overflow-y:hidden!important}
  #page .chart svg{width:100%!important;height:auto!important;max-height:230px!important}
  #page :where(input:not([type=checkbox]):not([type=radio]),select,textarea,.field){width:100%!important;max-width:100%!important;min-width:0!important;min-height:42px!important;font-size:16px!important;box-sizing:border-box!important}
  #page :where(button,.btn,a.btn){min-height:38px!important;touch-action:manipulation!important}
  #layer{position:fixed!important;inset:0!important;width:100%!important;max-width:100vw!important;height:100%!important;height:100dvh!important;overflow:hidden!important;z-index:10000!important;pointer-events:none!important}
  /* The layer is non-interactive by default so empty modal backdrops do not block the app.
     Login is a direct child (not .dlg/.wiz), therefore it must explicitly restore hit-testing
     or touch users can focus the PIN through autofocus but cannot tap the form/submit button. */
  #layer.is-login-layer>.login.login-pro{pointer-events:auto!important;touch-action:pan-y!important}
  #layer.is-login-layer>.login.login-pro :where(input,button){pointer-events:auto!important;touch-action:manipulation!important}
  #layer>.scrim{position:fixed!important;inset:0!important;pointer-events:auto!important}
  #layer>.dlg,#layer>.wiz,#layer>.pal,#layer>.coach,#layer>.pop{position:fixed!important;top:max(6px,var(--p2393-safe-t))!important;bottom:max(6px,var(--p2393-safe-b))!important;left:6px!important;right:6px!important;width:auto!important;max-width:none!important;max-height:none!important;height:auto!important;min-width:0!important;margin:0!important;border-radius:16px!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;pointer-events:auto!important}
  #layer>.dlg{display:flex!important;flex-direction:column!important}
  #layer>.dlg>.dlg-h{position:sticky!important;top:0!important;z-index:5!important;flex:0 0 auto!important;padding:10px 12px!important}
  #layer>.dlg>form{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:9px!important;padding:10px 12px calc(16px + var(--p2393-safe-b))!important;min-width:0!important}
  #layer>.dlg form>.fl,#layer>.dlg form>.fl.w{grid-column:1!important;min-width:0!important;width:100%!important}
  #layer>.dlg .facts{display:flex!important;flex-wrap:wrap!important;gap:7px!important}
  #layer>.dlg .facts .btn{flex:1 1 130px!important;min-height:40px!important;white-space:normal!important}
  #layer>.wiz{padding:10px!important}
  #layer .wiz :where(.bar,.actions,.dlg-f){flex-wrap:wrap!important;gap:6px!important}
  #layer .wiz :where(button,.btn){min-height:40px!important;white-space:normal!important}
  #page .pp-share-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  #page .pp-share-tools .btn{width:100%!important;justify-content:center!important}
}
@media(max-width:430px){
  #page .ph .bar{grid-template-columns:minmax(0,1fr)!important}
  #page .kpi .v{font-size:15px!important}
  #mnav :where(button,a){font-size:10px!important}
}
@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
  #app #page.page{padding-bottom:calc(82px + var(--p2393-safe-b))!important}
  #mnav.mnav{inset-inline:5px!important;bottom:3px!important}
  #layer>.dlg,#layer>.wiz{top:4px!important;bottom:4px!important}
}
/* Print: allow wide documents to paginate; don't inherit the mobile viewport clipping. */
@media print{
  html,body,#app,#app>.work,#page{display:block!important;width:auto!important;height:auto!important;max-width:none!important;min-width:0!important;overflow:visible!important;position:static!important}
  #mnav,.topbar,.side,.status,.no-print{display:none!important}
  #page{padding:0!important;margin:0!important}
  #page .box,#page .kpi{break-inside:avoid;box-shadow:none!important}
  #page .tw,#page .table-wrap,#page .tbl-wrap,#page .table-responsive{overflow:visible!important}
  #page table{width:100%!important;min-width:0!important;table-layout:auto!important}#page .g{min-width:0!important}
  #page th,#page td{white-space:normal!important;overflow-wrap:anywhere!important}
  #layer{position:static!important;overflow:visible!important}
}