/* 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}
  .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:428px){
  .work-calendar thead th:first-child,
  .work-calendar tbody th{min-width:112px!important}
  .work-calendar thead th{min-width:44px!important;padding:6px 2px!important;overflow:visible!important}
  .work-calendar thead th b{font-size:13px;line-height:1.15}
  .work-add,.availability-add-cell{min-width:44px;min-height:44px}
  .work-modal-backdrop,.availability-dialog{z-index:20000}
  .work-filter>div{z-index:80}
  .work-modal,.availability-dialog{max-height:calc(100dvh - 16px)!important;overflow:auto}
  input[type="time"]{min-height:44px}
}
@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}
}