/* Mobile-first: default styles for <480px (portrait phone) */

/* >= 481px: landscape phone / small tablet */
@media (min-width: 481px) {
  :root { --header-height: 60px; }
}

/* >= 769px: tablet portrait / small desktop */
@media (min-width: 769px) {
  :root {
    --sidebar-width: 240px;
    --header-height: 64px;
  }
  .hide-desktop { display: none !important; }
}

/* < 769px: mobile */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .modal-box { width: 95%; max-height: 90vh; border-radius: var(--radius) var(--radius) 0 0; }
  .modal-overlay { align-items: flex-end; }
  .table thead { display: none; }
  .table tr { display: block; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px; }
  .table td { display: block; padding: 4px 0; border: none; }
  .table td::before { content: attr(data-label); font-weight: 500; color: var(--text-secondary); margin-right: 8px; }
}

/* >= 1025px: desktop */
@media (min-width: 1025px) {
  :root { --sidebar-width: 260px; }
}

/* Landscape orientation for POS (compact) */
@media (orientation: landscape) and (max-height: 600px) {
  :root {
    --header-height: 44px;
  }
  .pos-service-btn { width: 72px; height: 72px; font-size: 12px; }
  .pos-cart-item { padding: 6px 0; }
}