@media screen and (max-width: 767px) {
  /* Layout */
  body .page-container{padding:12px !important}
  body .page-header{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;margin-bottom:14px !important}
  body .page-header h2{font-size:18px !important}
  body .card{padding:12px !important;border-radius:8px !important;margin-bottom:12px !important}

  /* Topbar */
  body .topbar{padding:0 10px !important;gap:6px !important;height:56px !important}
  body .topbar-logo{height:34px !important}
  body .brand-name{display:none !important}
  body .user-details{display:none !important}
  body .user-avatar{width:32px !important;height:32px !important;font-size:13px !important}
  body .topbar-user{margin-left:0 !important;gap:2px !important}
  body .topbar-unit-select{width:90px !important}
  body .expand-icon{font-size:18px !important;width:18px !important;height:18px !important}
  body .settings-btn,body .logout-btn{min-width:36px !important;padding:0 !important}

  /* Forms */
  body .form-grid,
  body .header-grid,
  body .form-grid.header-grid{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}
  body .form-actions{display:flex !important;flex-direction:column !important;gap:8px !important}
  body .form-actions button{width:100% !important}
  body .mat-mdc-form-field{width:100% !important}

  /* Filter bars */
  body .filter-bar{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:8px !important}
  body .filter-field,body .col-filter-field{width:100% !important}
  body .load-btn,body .download-btn{width:100% !important;margin-top:0 !important}
  body .col-filter-bar{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:8px !important;padding:10px 12px !important}

  /* Tables */
  body .table-container{border-radius:8px !important;margin:0 -12px !important;width:calc(100% + 24px) !important}
  body .table-container table{min-width:500px !important}
  body .table-container th.mat-header-cell,
  body .table-container td.mat-mdc-cell,
  body .table-container td.mat-cell{padding:6px 8px !important;font-size:12px !important}
  body .action-cell{gap:0 !important}
  body .action-cell button{min-width:32px !important;padding:0 4px !important}

  /* KPI cards */
  body .kpi-grid{grid-template-columns:1fr 1fr !important;gap:10px !important;margin-bottom:14px !important}
  body .kpi-card{padding:12px 14px !important}
  body .kpi-card .kpi-label{font-size:11px !important;margin-bottom:4px !important}
  body .kpi-card .kpi-value{font-size:20px !important}
  body .kpi-card .kpi-sub{font-size:11px !important}

  /* Material Received / Issued line items */
  body .line-row,body .line-row-1,body .line-row-2{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}
  body .line-item-block{padding:12px !important;margin-bottom:12px !important}
  body .line-item-header{flex-wrap:wrap !important;gap:8px !important}
  body .lines-header{display:flex !important;flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
  body .line-total{min-width:auto !important;width:100% !important}
  body .file-upload-field{width:100% !important}
  body .file-upload-field button{width:100% !important;max-width:100% !important}
  body .mrir-note{width:100% !important;flex-wrap:wrap !important}
  body .calculated-field{width:100% !important}
  body .calculated-field .calc-value{font-size:18px !important}

  /* Home page modules */
  body .home-page{padding:20px 16px 32px !important}
  body .module-grid{display:grid !important;grid-template-columns:1fr !important;gap:12px !important}
  body .module-card{display:flex !important;flex-direction:row !important;align-items:center !important;text-align:left !important;gap:16px !important;padding:16px !important}
  body .module-icon-wrap{width:48px !important;height:48px !important;min-width:48px !important;border-radius:12px !important;margin:0 !important}
  body .module-icon{font-size:24px !important;width:24px !important;height:24px !important}
  body .module-label{font-size:15px !important;margin-bottom:2px !important}
  body .module-desc{font-size:12px !important}

  /* Sub-module home (inventory-home, production-home) */
  body .sub-module-grid,body .submenu-grid{display:grid !important;grid-template-columns:1fr !important;gap:12px !important}

  /* Tabs */
  body .tab-header{justify-content:center !important}
  body .add-btn{width:100% !important}
  body .mat-mdc-tab-labels{gap:0 !important}
  body .mat-mdc-tab{min-width:0 !important;padding:0 12px !important;font-size:13px !important}

  /* Dialogs */
  body .mat-mdc-dialog-surface{border-radius:12px !important;margin:8px !important}
  body .mat-mdc-dialog-container .mdc-dialog__surface{max-height:90vh !important}

  /* Invoice tracker steps */
  body .journey-steps,body .step-list{flex-direction:column !important;gap:8px !important}

  /* Master data */
  body .master-tabs .mat-mdc-tab{min-width:0 !important;padding:0 8px !important;font-size:12px !important}

  /* User management */
  body .user-list,body .permission-grid{overflow-x:auto !important}
  body .perm-table{min-width:500px !important}

  /* Production forms */
  body .shift-selector{flex-direction:column !important;gap:8px !important}
  body .production-form-grid{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}

  /* Analytics charts */
  body .chart-container{min-height:250px !important}
  body .chart-filters{flex-direction:column !important;gap:8px !important}

  /* PO Generator */
  body .po-preview{overflow-x:auto !important}
  body .po-form-grid{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}

  /* Scrap / Al-coil */
  body .scrap-form-grid,body .coil-form-grid{display:grid !important;grid-template-columns:1fr !important;gap:8px !important}

  /* Pending dashboard */
  body .pending-grid{grid-template-columns:1fr !important}

  /* Login page */
  body .login-card{margin:16px !important;padding:24px 16px !important}
}

@media screen and (max-width: 480px) {
  body .kpi-grid{grid-template-columns:1fr !important}
  body .kpi-card .kpi-value{font-size:18px !important}
  body .page-header h2{font-size:16px !important}
  body .topbar-unit-select{width:80px !important}
  body .table-container table{min-width:400px !important}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  body .page-container{padding:16px !important}
  body .topbar{padding:0 16px !important;gap:10px !important}
  body .topbar-unit-select{width:140px !important}
  body .user-details{display:none !important}
  body .kpi-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr)) !important;gap:14px !important}
  body .kpi-card{padding:14px 16px !important}
  body .kpi-card .kpi-value{font-size:22px !important}
  body .form-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr)) !important}
  body .table-container table{min-width:700px !important}
}