:root {
  --pwa-safe-top: env(safe-area-inset-top, 0px);
  --pwa-safe-right: env(safe-area-inset-right, 0px);
  --pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --pwa-safe-left: env(safe-area-inset-left, 0px);
}

.pwa-connection-banner, .pwa-install-bar, .pwa-update-bar, .pwa-mobile-nav { display: none; }

@media (max-width: 780px) {
  html { min-height: 100%; background: var(--paper, #f7f9f6); }
  body { min-height: 100dvh; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body.pwa-app-ready { padding-bottom: calc(77px + var(--pwa-safe-bottom)); }
  .app-shell { display: block; min-height: 100dvh; }
  .main { width: 100%; min-width: 0; padding-bottom: calc(24px + var(--pwa-safe-bottom)); }
  .topbar { position: static; z-index: auto; padding-top: max(12px, var(--pwa-safe-top)); backdrop-filter: none; }
  .sidebar { position: fixed; inset: 0 auto 0 0; left: 0; width: min(86vw, 340px); max-width: calc(100vw - 40px); height: 100dvh; box-sizing: border-box; padding-top: max(20px, var(--pwa-safe-top)); padding-bottom: calc(18px + var(--pwa-safe-bottom)); transform: translateX(-105%); transition: transform .2s ease; z-index: 140; }
  .sidebar.open { left: 0; transform: translateX(0); }
  .sidebar-overlay { top: 0; height: 100dvh; z-index: 130 !important; }
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal-backdrop.open { z-index: 120; }
  .modal { width: 100%; max-height: min(88dvh, calc(100dvh - var(--pwa-safe-top) - 8px)); overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(20px + var(--pwa-safe-bottom)); }
  .modal :is(input, select, textarea), .main :is(input, select, textarea) { font-size: 16px; }
  .modal-actions { position: sticky; bottom: calc(var(--pwa-safe-bottom) * -1); padding-bottom: calc(13px + var(--pwa-safe-bottom)); background: var(--paper, #fff); z-index: 2; }
  .form-grid, .compact-form, .password-form-grid, .modal .form-section-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .form-grid .span2, .compact-form .span2, .modal .span2 { grid-column: auto !important; }
  .section-tools, .section-tools > div, .section-tools > .actions, .dashboard-welcome-actions { min-width: 0; }
  .section-tools .btn, .modal-actions .btn, .section-tools .row-btn { min-height: 46px; }
  .section-tools .actions, .qr-heading-actions, .dashboard-welcome-actions { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .section-tools .actions .btn:only-child, .qr-heading-actions .btn:only-child { grid-column: 1 / -1; }
  .panel, .section-tools, .table-wrap { min-width: 0; }

  table[data-pwa-cards="true"] { display: block; width: 100%; min-width: 0; border: 0; background: transparent; }
  table[data-pwa-cards="true"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table[data-pwa-cards="true"] tbody { display: grid; gap: 10px; }
  table[data-pwa-cards="true"] tbody tr { display: block; border: 1px solid var(--line, #d8e2e3); border-radius: 8px; background: #fff; overflow: hidden; }
  table[data-pwa-cards="true"] tbody td { display: grid; grid-template-columns: minmax(92px, 42%) minmax(0, 1fr); align-items: start; gap: 10px; min-height: 42px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line, #d8e2e3); white-space: normal; text-align: right; }
  table[data-pwa-cards="true"] tbody td:last-child { border-bottom: 0; }
  table[data-pwa-cards="true"] tbody td::before { content: attr(data-pwa-label); color: var(--muted, #536a74); font-size: 11px; font-weight: 750; letter-spacing: .02em; text-align: left; }
  table[data-pwa-cards="true"] tbody td[colspan] { display: block; text-align: left; }
  table[data-pwa-cards="true"] tbody td[colspan]::before { display: none; }

  .pwa-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; min-height: calc(66px + var(--pwa-safe-bottom)); padding: 5px max(8px, var(--pwa-safe-right)) calc(5px + var(--pwa-safe-bottom)) max(8px, var(--pwa-safe-left)); background: rgba(16, 47, 58, .97); border-top: 1px solid rgba(215, 247, 140, .44); box-shadow: 0 -10px 28px rgba(12, 33, 55, .18); }
  .pwa-mobile-nav[hidden] { display: none; }
  body.sidebar-visible .pwa-mobile-nav,
  body.sidebar-visible .pwa-connection-banner,
  body.sidebar-visible .pwa-install-bar,
  body.sidebar-visible .pwa-update-bar { display: none !important; }
  .pwa-mobile-nav button { min-width: 0; min-height: 56px; border: 0; border-radius: 8px; background: transparent; color: #c5d9cd; display: grid; align-content: center; justify-items: center; gap: 3px; font: inherit; cursor: pointer; }
  .pwa-mobile-nav button span { font-size: 20px; line-height: 1; color: #a6c7b6; }
  .pwa-mobile-nav button b { overflow: hidden; max-width: 100%; color: inherit; font-size: 9px; font-weight: 750; line-height: 1.05; white-space: nowrap; text-overflow: ellipsis; }
  .pwa-mobile-nav button.active { color: #fff; background: #23574c; }
  .pwa-mobile-nav button.active span { color: #d7f78c; }
  .pwa-mobile-nav .pwa-scan-action { min-height: 62px; margin-top: -20px; border: 3px solid var(--paper, #f7f9f6); border-radius: 999px; background: #087e79; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.24); }
  .pwa-mobile-nav .pwa-scan-action span { color: #d7f78c; font-size: 23px; }
  .pwa-mobile-nav button:focus-visible { outline: 3px solid #d7f78c; outline-offset: -3px; }

  .pwa-connection-banner { position: fixed; left: max(12px, var(--pwa-safe-left)); right: max(12px, var(--pwa-safe-right)); bottom: calc(79px + var(--pwa-safe-bottom)); z-index: 100; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid #c5a552; border-radius: 8px; background: #fff6dc; color: #5e4a1a; box-shadow: 0 8px 22px rgba(12, 33, 55, .14); font-size: 12px; line-height: 1.35; }
  .pwa-connection-banner:not([hidden]) { display: flex; }
  .pwa-connection-banner span:first-child { color: #a36f00; font-size: 20px; }
  .pwa-install-bar, .pwa-update-bar { position: fixed; left: max(12px, var(--pwa-safe-left)); right: max(12px, var(--pwa-safe-right)); bottom: calc(82px + var(--pwa-safe-bottom)); z-index: 102; align-items: center; gap: 10px; padding: 12px; border: 1px solid #9bc9b9; border-radius: 10px; background: #f8fcf8; color: #112f3c; box-shadow: 0 12px 32px rgba(12, 33, 55, .20); }
  .pwa-install-bar:not([hidden]), .pwa-update-bar:not([hidden]) { display: flex; }
  .pwa-install-bar > div { min-width: 0; flex: 1; }
  .pwa-install-bar b, .pwa-install-bar span { display: block; }
  .pwa-install-bar b { font-size: 12px; }
  .pwa-install-bar span, .pwa-update-bar span { margin-top: 2px; color: var(--muted, #536a74); font-size: 10px; line-height: 1.35; }
  .pwa-install-bar .btn, .pwa-update-bar .btn { flex: none; min-height: 40px; padding-inline: 11px; font-size: 10px; white-space: nowrap; }
  .pwa-dismiss-btn { width: 28px; height: 28px; flex: none; border: 0; border-radius: 50%; background: #e7efea; color: #34524d; font-size: 18px; line-height: 1; cursor: pointer; }
  .pwa-update-bar { justify-content: flex-end; }
  .pwa-update-bar span { flex: 1; margin: 0; }
}

@media (max-width: 420px) {
  .pwa-install-bar { align-items: flex-start; flex-wrap: wrap; }
  .pwa-install-bar > div { flex-basis: calc(100% - 40px); }
  .pwa-install-bar .btn { flex: 1; }
  .pwa-update-bar { align-items: center; flex-wrap: wrap; }
  .pwa-update-bar span { flex-basis: calc(100% - 40px); }
  .pwa-update-bar .btn { flex: 1; }
}

@media (min-width: 781px) {
  .pwa-mobile-nav, .pwa-connection-banner, .pwa-install-bar, .pwa-update-bar { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pwa-mobile-nav, .pwa-install-bar, .pwa-update-bar { transition: none; }
}