@media (max-width: 768px) {
  [hidden] { display:none !important; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { max-width: 100%; min-width: 0 !important; }
  body { overflow-x: auto; }
  img, svg, canvas, video { max-width: 100%; }

  .app,
  .app-shell,
  .wrap,
  .container,
  .page,
  .page-shell,
  .dashboard-container,
  .main-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .app,
  .wrap,
  .container,
  .page,
  .main-container { padding-left: 10px !important; padding-right: 10px !important; }

  header,
  .header,
  .page-header,
  .topbar,
  .hero,
  .hero-inner,
  .header-content,
  .panel-title,
  .section-head,
  .section-header,
  .toolbar,
  .toolbar-card {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .hero,
  .hero-inner,
  .header-content,
  .topbar,
  .page-header {
    grid-template-columns: minmax(0, 1fr) !important;
    flex-wrap: wrap !important;
  }

  h1 { font-size: clamp(24px, 8vw, 34px) !important; line-height: 1.1 !important; overflow-wrap: anywhere; }
  h2 { font-size: clamp(18px, 6vw, 25px) !important; overflow-wrap: anywhere; }
  p, span, strong, label { overflow-wrap: anywhere; }

  input,
  select,
  textarea,
  button,
  .btn {
    max-width: 100% !important;
    min-height: 44px;
    font-size: 16px;
  }
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { width: 100% !important; min-width: 0 !important; }
  input[type="checkbox"],input[type="radio"] { width:22px !important;height:22px !important;min-height:22px !important;flex:0 0 22px; }

  .filters,
  .filter-grid,
  .filters-grid,
  .form-grid,
  .fields-grid,
  .user-head,
  .permission-groups,
  .permission-row,
  .schedule,
  .credentials,
  .receiving-grid,
  .receiving-metrics,
  .summary-grid,
  .mini-grid,
  .grid aside {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .kpis,
  .kpi-grid,
  .cards,
  .cards-grid,
  .status-grid,
  .metrics-grid,
  .stats-grid,
  .import-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .actions,
  .hero-actions,
  .header-actions,
  .modal-actions,
  .operation-actions,
  .button-row,
  .toolbar-actions {
    width: 100% !important;
    min-width: 0 !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:8px !important;
  }
  .actions > *,
  .hero-actions > *,
  .header-actions > *,
  .modal-actions > *,
  .button-row > *,
  .toolbar-actions > * { width:100% !important; justify-content:center; }

  .panel,
  .card,
  .section-card,
  .filter-card,
  .toolbar-card,
  .metric,
  .kpi { max-width:100% !important; min-width:0 !important; }

  .table-wrap,
  .table-container,
  .table-responsive,
  .ranking-table-wrap,
  .details-table-wrap,
  .data-table-wrap,
  .list-wrap {
    width:100% !important;
    max-width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  table { max-width:none; }
  th, td { white-space:nowrap; }

  .modal-overlay { padding:8px !important; align-items:flex-start !important; overflow-y:auto !important; }
  .modal-card,
  .modal-content,
  .dialog,
  [role="dialog"] {
    width:calc(100vw - 16px) !important;
    max-width:calc(100vw - 16px) !important;
    max-height:calc(100dvh - 16px) !important;
    margin:0 !important;
    overflow-y:auto !important;
  }

  .toast,
  .notification,
  .alert-fixed { left:8px !important; right:8px !important; width:auto !important; max-width:none !important; }
  .jt-user-card { position:static !important; width:100% !important; min-width:0 !important; margin:10px 0 0 !important; }
  .app-header {
    position:static !important;height:auto !important;min-height:0 !important;
    padding:10px !important;gap:10px !important;align-items:stretch !important;
    flex-direction:column !important
  }
  .app-header h1 { font-size:18px !important; }
  .app-header .brand-section { min-width:0; }
  .app-header .header-actions { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  .app-container { margin-top:0 !important;padding-top:10px !important; }
}

@media (max-width: 480px) {
  .kpis,
  .kpi-grid,
  .cards,
  .cards-grid,
  .status-grid,
  .metrics-grid,
  .stats-grid,
  .import-summary-grid { grid-template-columns:minmax(0,1fr) !important; }
  .app,
  .wrap,
  .container,
  .page,
  .main-container { padding-left:7px !important; padding-right:7px !important; }
  .app-header .header-actions { grid-template-columns:minmax(0,1fr) !important; }
}