/* Mobile / small-screen layout. Loaded only on screens up to 820px wide (see <link> in index.html). */
:root{--safe-b:env(safe-area-inset-bottom,0px)}
html{-webkit-text-size-adjust:100%}
body{font-size:14.5px;-webkit-tap-highlight-color:transparent}
input,select,textarea{font-size:16px!important;min-height:44px}  /* 16px stops iPhones zooming in on focus */
input[type=checkbox],input[type=radio]{min-height:0;width:20px;height:20px}
label{margin:12px 0 4px}
.btn{min-height:44px;padding:10px 16px}.btn.sm{min-height:36px;padding:6px 12px}.btn.edit{font-size:15px!important;padding:10px 16px!important}
.toast{left:12px;right:12px;bottom:calc(12px + var(--safe-b));max-width:none}

/* ---- app shell: sidebar becomes a sticky top bar with a scrolling menu ---- */
.app{flex-direction:column}
.side,.side.mini{width:100%!important;position:sticky;top:0;z-index:30;border-right:0!important;border-bottom:1px solid #dfe3e8;background:var(--bg)}
.side .sl{height:auto!important;padding:8px 12px 4px!important;justify-content:center}
.side .sl .lg{width:auto!important;max-width:70%}.side .sl .lg img,.side .sl .lg .ph{height:42px!important;width:170px!important;object-position:center}
.side .tg{display:none!important}
.side.mini .lg,.side.mini .lb{display:block!important}
.side nav{display:flex;gap:6px;overflow-x:auto;padding:4px 10px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.side nav::-webkit-scrollbar{display:none}
.side .mi,.side.mini .mi{flex:none;height:38px!important;margin:0!important;padding:0 14px!important;font-size:14px!important;gap:8px!important;border-radius:19px!important;background:#fff;box-shadow:0 1px 3px #0001}
.side .mi.on{background:var(--blue)!important;color:#fff!important}
.side .mi .ic{width:17px!important;height:17px!important}.side .mi .chev{display:none!important}

.main{padding:0 12px calc(20px + var(--safe-b))!important}
.top{height:auto!important;padding:12px 0;gap:10px;align-items:flex-start!important}
.top h2{font-size:15px!important;line-height:1.35}.top h2 .w1{font-size:17px!important;display:block}
.dd{top:60px!important;left:0;right:0;min-width:0;max-width:none}
.card{padding:16px!important;margin-bottom:14px}
.card.prof{padding:18px 14px!important}.prof h3{font-size:18px!important}
.prof .row.sb{flex-wrap:wrap;gap:8px}
.prof .kv{height:auto!important;min-height:36px;font-size:15px!important;flex-wrap:wrap;padding:4px 0;word-break:break-word}.prof .kv b{margin-right:8px!important}
.kv b{min-width:0}
.fy{height:auto!important;padding:16px 0!important;margin-bottom:14px!important}.fy h4{font-size:17px!important}.fy h2{font-size:26px!important}
.stat{height:auto!important;padding:14px 16px!important;margin-bottom:12px!important}.stat b{font-size:20px!important}.stat span{font-size:14px!important}
.notice{padding:12px 14px;font-size:14px}

/* ---- layout grids ---- */
.g2,.f4,.f3,.f2{grid-template-columns:1fr!important;gap:0 14px}
.g2{gap:14px!important}
.brand{grid-template-columns:1fr}
.row{flex-wrap:wrap}.row.sb{gap:10px}
.dtc{flex-direction:column;align-items:stretch}.dtc select,.dtc input,.dtc .btn{width:100%}

/* ---- tables scroll sideways inside their own box ---- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
table{font-size:13px}th{font-size:11px;padding:9px 7px;white-space:nowrap}td{padding:8px 7px}
.acts .btn.sm{white-space:nowrap}

/* ---- pop-up forms fill the screen ---- */
.mbg{padding:0!important;align-items:stretch}
.modal{max-width:none!important;min-height:100%;border-radius:0!important;padding:54px 14px 24px!important}
.modal h3{font-size:20px!important;margin-bottom:14px}
.x{right:10px!important;top:8px!important}
.rad{flex-direction:column;gap:8px}.rad label{padding:12px}

/* ---- login page ---- */
.hw{width:96%!important;padding-top:10px!important;gap:14px!important}
.hr2{padding:24px 18px 32px!important}
.hr2 input:not([type=checkbox]){height:46px!important}.hr2 .btn{height:46px!important}
.hph{margin-left:0!important;width:100%!important}.slg{margin:16px 0 0!important;width:100%!important;font-size:18px!important}
.lgr{margin-top:14px!important;justify-content:center}

/* ---- never let the page itself scroll sideways ---- */
html,body{overflow-x:hidden;max-width:100%}
.app,.main,.card{min-width:0;max-width:100%}
.card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.card .tw table{display:table}