/*
 * mobile.css — Shared responsive stylesheet
 * RepairManagementSystem v6.0
 * Covers: tablet (≤1024px), mobile (≤767px), small mobile (≤480px)
 */

/* ── Tablet ≤1024px ── */
@media(max-width:1024px){
  html,body{overflow:auto!important}
  .mxm-shell{flex-direction:column;height:auto;min-height:100vh;overflow:auto}
  .mxm-sidebar{
    position:fixed;z-index:300;height:100vh;
    width:240px!important;min-width:240px!important;
    transform:translateX(-260px);
    transition:transform .22s cubic-bezier(.4,0,.2,1)
  }
  .mxm-sidebar.mobile-open,.mxm-sidebar.open{
    transform:translateX(0);
    box-shadow:6px 0 32px rgba(0,0,0,.35)
  }
  .mxm-main{margin-left:0!important;width:100%!important}
  .mxm-topbar{padding:0 12px;gap:8px;position:sticky;top:0;z-index:200}
  .tb-menu-btn{display:flex!important}

  .sidebar-overlay,#sidebarOverlay{
    display:block!important;position:fixed;inset:0;
    background:rgba(0,0,0,.45);z-index:299;
    opacity:0;pointer-events:none;transition:opacity .2s
  }
  .sidebar-overlay.active,#sidebarOverlay.active{opacity:1;pointer-events:auto}

  /* Tables → horizontal scroll */
  .mxm-table-wrap,.table-wrap,.data-table-wrap,.tbl-wrap,.ent-table-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch
  }
  table{min-width:600px}

  /* Charts grids → stack */
  .wo-charts-row,.chart-row-3,.chart-row-4,.chart-row-2,
  .grid-2,.grid-3,.cc-grid-2,.cc-grid-3,.cc-grid-4,
  .ov-main,.sys-grid,.wo-sys-grid{
    grid-template-columns:1fr!important
  }

  /* Modals */
  .mxm-modal-wrap{padding:8px}
  .mxm-modal{width:100%!important;max-width:100%!important;max-height:90vh;overflow-y:auto;border-radius:4px}

  /* Quick filter */
  .qf-panel{display:none}

  /* Workorder system grid */
  .wo-sys-grid{grid-template-columns:1fr!important}

  /* KPI strips → 3 cols on tablet */
  .kpi-strip-6,.kpi-strip-5{grid-template-columns:repeat(3,1fr)!important}
  .kpi-strip-8,.kpi-strip-10{grid-template-columns:repeat(4,1fr)!important}
}

/* ── Mobile ≤767px ── */
@media(max-width:767px){
  :root{--topbar-h:48px!important}
  body{font-size:14px}

  /* Topbar */
  .mxm-topbar{padding:0 8px;gap:6px;height:48px!important;min-height:48px!important}
  .tb-title-sub,.tb-sub,.tb-plant-select,.tb-date-label,.tb-username,.tb-role{display:none!important}
  .tb-title{font-size:.78rem;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tb-icon-btn{width:34px;height:34px}
  .tb-right .date-filter-group,.tb-right .tb-btn{display:none!important}

  /* Content */
  .mxm-content,.page-content,.content-area{padding:10px 8px!important}

  /* KPI */
  .kpi-strip-4,.kpi-strip-5,.kpi-strip-6,.kpi-strip-8,.kpi-strip-10{
    grid-template-columns:repeat(2,1fr)!important
  }
  .kpi-row,.kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .ks-strip{grid-template-columns:repeat(2,1fr)!important;gap:4px!important}
  .kpi-card,.kpi-block,.kc{padding:10px 10px 8px!important}
  .kpi-label,.kc-label{font-size:.62rem!important}
  .kc-value{font-size:1.3rem!important}

  /* Page toolbar */
  .page-toolbar{flex-wrap:wrap!important;gap:6px!important;padding:8px 10px!important}
  .filter-select{min-width:0!important;flex:1}
  .search-wrap{min-width:160px!important;max-width:100%!important;flex:1}

  /* Tabbar */
  .dash-tabbar{overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .dash-tab{font-size:.72rem;padding:0 10px}

  /* System cards */
  .sys-card,.sys-card-v2{min-width:calc(50% - 4px);flex:1}
  .wo-sum-strip{flex-wrap:wrap}
  .wo-sum-card{min-width:calc(33% - 2px)}

  /* Charts */
  canvas{max-width:100%!important}
  .chart-container,.chart-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wo-charts-row{grid-template-columns:1fr!important}
  .trend-kpi-strip{grid-template-columns:repeat(2,1fr)!important}
  .trend-kpi-cell:nth-child(2){border-right:none!important}
  .trend-kpi-cell:nth-child(3){border-top:1px solid #e2e8f0}

  /* Overview stacking */
  .ov-main{grid-template-columns:1fr!important}
  .ov-col-stack,.cc-grid-24,.cc-grid-42,.cc-grid-13,.cc-grid-31,.cc-grid-23{
    grid-template-columns:1fr!important
  }

  /* Modals → bottom sheet */
  .mxm-modal-wrap,.modal-overlay{padding:0!important;align-items:flex-end!important}
  .mxm-modal,.modal-panel,.modal-box{
    width:100%!important;max-width:100%!important;
    max-height:92vh!important;
    border-radius:8px 8px 0 0!important;
    overflow-y:auto!important;margin:0!important
  }
  .modal-header,.mxm-modal-hdr{padding:14px 16px 10px!important}
  .modal-body,.mxm-modal-body{padding:12px 16px!important}
  .modal-footer,.mxm-modal-ftr{
    padding:10px 16px 16px!important;flex-wrap:wrap;gap:8px
  }
  .modal-footer .btn,.mxm-modal-ftr .btn{flex:1;min-width:100px;justify-content:center}

  /* Forms */
  input,select,textarea{font-size:16px!important;min-height:40px;padding:8px 10px!important}
  label{font-size:.8rem}
  .form-group,.form-row{margin-bottom:10px!important}
  .form-grid,.form-grid-2,.form-grid-3,.mf-row{grid-template-columns:1fr!important}

  /* Tables */
  .mxm-table-wrap,.table-wrap,.tbl-wrap,.ent-table-wrap{
    overflow-x:auto;-webkit-overflow-scrolling:touch
  }
  table{min-width:520px;font-size:.78rem}
  th,td{padding:7px 8px!important;white-space:nowrap}
  .ent-table td,.ent-table th{font-size:.68rem!important;padding:6px 7px!important}

  /* Pagination */
  .pagination{flex-wrap:wrap;gap:4px}

  /* Filter bar */
  .filter-bar,.search-bar{flex-wrap:wrap;gap:6px}
  .filter-bar input,.search-bar input{width:100%!important;min-width:0}

  /* Sidebar nav */
  .mxm-sidebar{width:260px!important;min-width:260px!important}
  .nav-item{padding:11px 16px!important;font-size:.88rem}

  /* Badges */
  .badge,.status-badge,.tag,.bs,.sc,.pc{font-size:.65rem!important;padding:2px 6px!important}

  /* Section headers */
  .section-title,.wo-chart-title,.panel-title{font-size:.78rem!important}

  /* Buttons */
  .btn-row,.action-row{flex-wrap:wrap;gap:6px}
  .btn,.mxm-btn{min-height:38px;padding:0 12px;font-size:.82rem}

  /* Inventory specific */
  .inv-kpi-row{grid-template-columns:repeat(2,1fr)!important}
  .abc-grid,.cc-grid{grid-template-columns:1fr!important}

  /* Recent repairs table */
  .ent-table-wrap{overflow-x:auto}

  /* Monthly completion table */
  .mom-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── Small Mobile ≤480px ── */
@media(max-width:480px){
  :root{--topbar-h:44px!important}

  .mxm-topbar{padding:0 6px!important;height:44px!important;min-height:44px!important}
  .tb-title{display:none!important}
  .mxm-content,.page-content{padding:8px 6px!important}

  .kpi-strip-4,.kpi-strip-5,.kpi-strip-6,.kpi-strip-8,.kpi-strip-10{
    grid-template-columns:repeat(2,1fr)!important
  }
  .kpi-row,.kpi-grid,.ks-strip{grid-template-columns:1fr!important}
  .kc-value{font-size:1.1rem!important}
  .kc-label{font-size:.55rem!important}

  table{min-width:440px;font-size:.72rem}
  .mxm-modal,.modal-panel,.modal-box{max-height:95vh!important}

  /* System cards */
  .sys-card,.wo-sum-card{min-width:100%}

  /* Workorder KPI strip */
  .wo-sum-strip{flex-direction:column}
  .wo-sum-card{width:100%}

  /* Import zone */
  .import-drop-zone{padding:20px 12px!important}

  /* Quick actions bar */
  .mxm-qbar{gap:2px;padding:0 8px}
  .qbar-btn{font-size:.65rem;padding:5px 10px}
}

/* ── Touch devices — larger tap targets ── */
@media(hover:none) and (pointer:coarse){
  .nav-item{padding:13px 16px!important}
  .btn,.mxm-btn{min-height:42px}
  th{user-select:none}
  input[type=checkbox],input[type=radio]{width:18px;height:18px}
  .qbar-btn{padding:8px 14px!important;min-height:40px}
  .dash-tab{min-height:38px}
}

/* ── Collapsed sidebar offset ── */
.mxm-shell:has(.mxm-sidebar.collapsed) .mxm-main{margin-left:48px}