@media (max-width: 980px) {
  .pos-layout { grid-template-columns: 1fr; }
  .cart-panel { position: static; }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow-lg);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open::after {
    content: '';
    position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 50;
  }
  .menu-toggle { display: inline-flex; }
  .page-root { padding: 14px; padding-bottom: 84px; }
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
  .form-row .form-group { min-width: 0; }
  .section-header { flex-direction: column; align-items: stretch; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar > * { width: 100%; }
  .modal-box { max-width: 100%; }
}

@media (max-width: 640px) {
  .topbar { padding: 0 12px; }
  .topbar-title { font-size: 15px; }
  .conn-indicator span.conn-label-full { display: none; }
  .data-table th, .data-table td { padding: 9px 10px; font-size: 13px; }
  .stat-value { font-size: 22px; }
  .cart-item { flex-wrap: wrap; }
}

/* Bottom navigation for small screens, mirrors the sidebar links */
.bottom-nav { display: none; }
@media (max-width: 640px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    z-index: 40;
    justify-content: space-around;
    padding: 6px 2px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav .bn-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10px; color: var(--color-text-muted); text-decoration: none;
    padding: 4px 6px; border-radius: 8px; flex: 1; cursor: pointer; font-weight: 600;
  }
  .bottom-nav .bn-item .bn-icon { font-size: 18px; }
  .bottom-nav .bn-item.active { color: var(--color-primary); }
}

@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .no-print { display: none !important; }
}