/* Sigma OS Mobile V2 — isolated responsive layer; desktop core untouched */
@media (max-width: 820px){
 html,body{max-width:100%;overflow-x:hidden}
 body{font-size:14px}
 #root{min-width:0;width:100%}
 .app,.shell,.main,.content,#body{min-width:0!important;width:100%!important;max-width:100%!important}
 .sidebar{width:100%!important;max-width:100%!important;position:relative!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;border-right:0!important}
 .brand{padding:14px 16px!important}
 .brand img{max-width:54px!important;height:auto!important}
 /* Wrap navigation into multiple rows on phones so no module is hidden off-screen. */
 .nav{display:flex!important;flex-wrap:wrap!important;overflow:visible!important;height:auto!important;max-height:none!important;gap:7px!important;padding:8px 12px 12px!important}
 .nav button,.nav a{display:flex!important;visibility:visible!important;opacity:1!important;flex:1 1 calc(50% - 7px)!important;max-width:calc(50% - 4px)!important;white-space:normal!important;min-height:44px!important;padding:10px 12px!important;border-radius:12px!important;align-items:center!important;justify-content:flex-start!important}
 .topbar,.top,.header{height:auto!important;min-height:58px!important;padding:10px 12px!important;gap:8px!important;flex-wrap:wrap!important}
 .top-actions{display:flex!important;width:100%!important;overflow-x:auto!important;gap:7px!important;padding-bottom:2px!important;scrollbar-width:none}
 .top-actions::-webkit-scrollbar{display:none}
 .top-actions .btn{flex:0 0 auto!important;min-height:42px!important}
 #body,.content{padding:12px!important}
 .hero,.panel,.card,.payroll-card{border-radius:16px!important}
 .hero{padding:16px!important}
 .hero h1,.hero h2{font-size:24px!important;line-height:1.15!important}
 .quick{display:flex!important;overflow-x:auto!important;gap:8px!important;padding-bottom:4px!important}
 .quick .btn{flex:0 0 auto!important;min-height:44px!important}
 .grid,.grid2,.grid3,.grid4,.kpi-grid,.stats,.payroll-kpis,.pd-two,.pd-info,.form2{grid-template-columns:1fr!important}
 .span2,.span3,.span4{grid-column:auto!important}
 .kpi,.payroll-kpi{min-width:0!important;padding:14px!important}
 .kpi b,.payroll-kpi b{font-size:22px!important}
 table,.payroll-table{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;white-space:nowrap}
 th,td{padding:10px 9px!important}
 .btn,button,input,select,textarea{font-size:16px}
 .btn,button{min-height:42px}
 input,select,textarea{width:100%!important;max-width:100%!important;min-height:44px!important;box-sizing:border-box!important}
 textarea{min-height:100px!important}
 .modal{padding:0!important;align-items:stretch!important}
 .modalbox,.modalbox.sd-editor,.modalbox.sd-preview{width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;overflow-y:auto!important;padding:14px!important;box-sizing:border-box!important}
 .modalbox>.ph{position:sticky;top:-14px;z-index:5;padding:12px 0;background:inherit}
 .ph,.payroll-head{gap:10px!important;align-items:flex-start!important;flex-wrap:wrap!important}
 .payroll-tabs{display:flex!important;overflow-x:auto!important;white-space:nowrap!important;scrollbar-width:none}
 .payroll-tabs::-webkit-scrollbar{display:none}
 .payroll-tabs button{flex:0 0 auto!important;min-height:42px!important}
 .payroll-doc,.payroll-letter,.sd-doc{width:210mm!important;max-width:none!important;transform-origin:top left}
 .sd-preview{overflow:auto!important}
 .sd-preview .payroll-doc,.sd-preview .payroll-letter,.sd-preview .sd-doc{zoom:.43}
 .chart-wrap,canvas{max-width:100%!important}
 .toolbar,.actions,.filters{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
 .toolbar>* ,.filters>*{flex:1 1 140px!important}
}
@media (max-width:480px){
 #body,.content{padding:9px!important}
 .hero{padding:14px!important}
 .panel,.card,.payroll-card{padding:12px!important}
 .nav button,.nav a{flex-basis:calc(50% - 7px)!important;font-size:13px!important}
 .sd-preview .payroll-doc,.sd-preview .payroll-letter,.sd-preview .sd-doc{zoom:.32}
 .topbar h1,.top h1,.header h1{font-size:18px!important}
}
@media (orientation:landscape) and (max-height:520px){.modalbox,.modalbox.sd-editor,.modalbox.sd-preview{height:100dvh!important;max-height:100dvh!important}}