/* Mobile MVP: usable navigation, forms and analytics on touch screens. */
html{-webkit-text-size-adjust:100%}
button,input,select,textarea{font-size:16px;touch-action:manipulation}
@media(max-width:760px){
  body{overflow-x:hidden}
  .app-shell{display:block;min-width:0}
  .sidebar{position:sticky!important;top:0;z-index:90;width:100%!important;height:auto!important;padding:6px 8px!important;background:var(--panel);border-bottom:1px solid var(--line);overflow:hidden!important}
  .sidebar .brand,.side-data,.nav-group-toggle{display:none!important}
  .sidebar nav{display:flex!important;gap:6px;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x proximity;padding:2px 0 6px;scrollbar-width:none}
  .sidebar nav::-webkit-scrollbar{display:none}
  .nav-group,.nav-group-items,.nav-group.open>.nav-group-items{display:contents!important}
  .nav-item,.nav-group .nav-item{flex:0 0 auto;min-width:52px;min-height:46px;padding:8px 10px!important;border-radius:10px;scroll-snap-align:start;justify-content:center;font-size:0!important}
  .nav-item span,.nav-group .nav-item span{font-size:18px!important;margin:0!important}
  .nav-item.active{min-width:max-content;font-size:12px!important;gap:7px;padding-inline:13px!important}
  .main{width:100%;min-width:0;padding:12px 10px 48px!important}
  .topbar{position:sticky;top:60px;z-index:75;background:var(--bg);padding:7px 0 10px!important;gap:8px}
  .topbar h1{font-size:21px!important;line-height:1.15;margin:0}
  .top-actions{gap:6px}.header-brand{display:none!important}
  .icon-btn,.ghost-btn,.primary-btn,.secondary-btn{min-height:44px}
  .filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;padding:10px!important;overflow:visible!important}
  .filters label{min-width:0!important;width:100%}.filters select{width:100%;min-height:44px}
  .filters label:last-child:nth-child(odd){grid-column:1/-1}
  .kpi-grid,.dashboard-grid,.insights,.hr-form,.task-form,.training-form,.settings-grid{grid-template-columns:1fr!important}
  .kpi,.panel{min-width:0;padding:14px!important;border-radius:12px!important}
  .kpi-value{font-size:25px!important;overflow-wrap:anywhere}
  .panel-head{align-items:flex-start;gap:8px;flex-wrap:wrap}
  .table-wrap,.timesheet-matrix-wrap,.task-calendar,.monthly-matrix-wrap{width:100%;max-width:100%;overflow:auto!important;-webkit-overflow-scrolling:touch}
  table{font-size:12px}th,td{padding:9px 8px!important}
  .modal,.dialog,.drawer,.login-card{width:calc(100vw - 20px)!important;max-width:none!important;max-height:calc(100dvh - 20px)!important;overflow:auto}
  .login-panel{padding:10px!important}.login-card{padding:22px!important}.login-form input{min-height:48px}
  .user-form-v2,.finance-form,.quality-form{grid-template-columns:1fr!important}
  .user-form-v2>*{grid-column:auto!important}
  .user-action-grid{grid-template-columns:1fr!important}.user-action-grid button{width:100%}
  .chart{min-width:0!important;overflow-x:auto!important}.chart svg{min-width:620px}
  .donut-chart svg{min-width:0}
  .panel:hover,.kpi:hover{transform:none!important}
}
@media(max-width:420px){
  .filters{grid-template-columns:1fr}
  .filters label:last-child:nth-child(odd){grid-column:auto}
  .main{padding-inline:8px!important}
  .topbar h1{font-size:19px!important}
}