/* Screen-only overrides: desktop layouts and printed output stay unchanged. */
@media screen and (max-width: 760px) {
  .app-shell, .main-shell { width: 100%; min-width: 0; max-width: 100%; }
  #main-content { min-width: 0; padding: 22px 14px; }
  .sidebar { width: min(280px, calc(100vw - 48px)); padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); overscroll-behavior: contain; }
  .sidebar:not(.open) { visibility: hidden; }
  .sidebar.open { visibility: visible; }
  body:has(.sidebar.open) { overflow: hidden; }
  .sidebar > .brand, .workspace-card, .sidebar-bottom { flex-shrink: 0; }
  .workspace-card { margin-top: 24px; margin-bottom: 22px; }
  .workspace-card span:not(.workspace-status), .sidebar-note span { overflow-wrap: anywhere; }
  .nav-link { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  .topbar { height: auto; min-height: 64px; padding: 10px 14px; flex-wrap: wrap; gap: 6px 12px; }
  .topbar-left { flex: 1; min-width: 0; }
  .topbar-right { flex-shrink: 0; margin-left: auto; }
  #breadcrumb-current { min-width: 0; overflow-wrap: anywhere; line-height: 1.5; }
  #menu-button { flex-shrink: 0; }
  .company-context, .package-notice { margin: 14px 14px 0; min-width: 0; }
  .company-context { flex-wrap: wrap; }
  .company-context > div { flex: 1 1 160px; min-width: 0; }
  .company-context strong, .package-notice, .notice, .form-error { overflow-wrap: anywhere; }
  .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 12px; }
  .page-heading > div { min-width: 0; max-width: 100%; }
  .page-heading h1, .page-heading p { overflow-wrap: anywhere; }
  .page-heading h1 { font-size: 24px; line-height: 1.3; }
  .heading-actions { flex-wrap: wrap; max-width: 100%; }
  .button, .button.small, .heading-actions .button, .company-context .button { min-height: 44px; white-space: normal; line-height: 1.4; }
  .icon-button { width: 44px; height: 44px; flex-shrink: 0; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select:not(.select2-hidden-accessible), textarea { min-width: 0; max-width: 100%; font-size: 16px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select:not(.select2-hidden-accessible) { min-height: 44px; }
  textarea { line-height: 1.6; }
  .card, .stack, .dashboard-grid > *, #table-content { min-width: 0; max-width: 100%; }
  .card-heading { flex-wrap: wrap; gap: 10px; padding: 16px; }
  .card-heading > div, .card-heading h2 { min-width: 0; overflow-wrap: anywhere; }
  .card-heading > span { white-space: normal; }
  .card-toolbar { padding: 14px; }
  .search-input { flex: 0 1 auto; width: 100%; max-width: none; min-width: 0; }
  .search-input input { width: 100%; min-height: 44px; font-size: 16px; }
  .search-input > svg { top: 14px; }
  .toolbar-filters { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; width: 100%; }
  .toolbar-filters select { flex: 1 1 170px; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; font-size: 16px; }
  .section-stats { flex-wrap: wrap; gap: 8px 16px; line-height: 1.6; }
  .section-stats > span { min-width: 0; overflow-wrap: anywhere; }
  .table-scroll { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  th, td { padding: 12px 14px; }
  #table-content td:first-child { min-width: 160px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
  .table-primary > div { min-width: 0; }
  .table-primary strong, .table-primary .table-secondary { white-space: normal; overflow-wrap: anywhere; }
  .row-actions { gap: 6px; }
  .table-footer { padding: 14px; gap: 8px 16px; flex-wrap: wrap; line-height: 1.6; }
  .table-footer > span { min-width: 0; overflow-wrap: anywhere; }
  .summary-cards, .summary-cards.cards-2, .summary-cards.cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-cards.cards-1 { grid-template-columns: minmax(0, 1fr); }
  .summary-cards .stat-card { min-width: 0; padding: 16px; }
  .summary-cards .stat-value { font-size: 24px; white-space: normal; overflow-wrap: anywhere; }
  .stat-top { align-items: flex-start; }
  .stat-top > span { min-width: 0; line-height: 1.5; }
  .stat-icon { flex-shrink: 0; }
  .low-stock-item > div, .quick-action > div { min-width: 0; flex: 1; }
  .low-stock-item strong, .quick-action strong, .low-stock-item .table-secondary { overflow-wrap: anywhere; white-space: normal; }
  .low-stock-item > .badge, .quick-action > svg { flex-shrink: 0; }
  .empty-state { padding: 32px 18px; }
  .empty-state h3, .empty-state p { overflow-wrap: anywhere; }
  .empty-state .button { max-width: 100%; }
  .audit-details { min-width: 220px; max-width: 75vw; }
  .table-scroll summary { min-height: 44px; padding: 10px 0; cursor: pointer; }
  .app-footer { padding: 18px 14px max(18px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
  .app-footer > span { min-width: 0; overflow-wrap: anywhere; }
  .toast-region { right: 12px; left: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: none; }
  .toast { max-width: 100%; overflow-wrap: anywhere; }
  .login-content { min-height: 100dvh; padding: max(32px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); flex-direction: column; gap: 28px; }
  .login-form-wrap { width: 100%; min-width: 0; max-width: 380px; margin: auto 0; }
  .login-form-wrap h2 { font-size: 28px; overflow-wrap: anywhere; }
  .login-footer { position: static; width: 100%; max-width: 380px; flex-wrap: wrap; gap: 8px; }
  .login-help { flex-wrap: wrap; line-height: 1.6; text-align: center; }
  .password-recovery-link { display: inline-flex; align-items: center; min-height: 44px; }
}

@media screen and (max-width: 480px) {
  .summary-cards, .summary-cards.cards-2, .summary-cards.cards-3 { grid-template-columns: minmax(0, 1fr); }
  .summary-cards .stat-card { padding: 16px 18px; }
  .summary-cards .stat-value { font-size: 28px; }
  .heading-actions { width: 100%; }
  .heading-actions .button { flex: 1 1 auto; }
}

@media screen and (max-width: 380px) {
  #main-content { padding: 18px 12px; }
  .company-context, .package-notice { margin-left: 12px; margin-right: 12px; }
  .topbar { padding-left: 12px; padding-right: 12px; }
  .page-heading h1 { font-size: 22px; }
  .login-content { padding-left: 16px; padding-right: 16px; }
}