/* ========== RESPONSIVE ========== */

/* iPad & Desktop */
@media (min-width: 768px) {
  .app {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .vs-viewport {
    height: calc(100vh - var(--header-height) - 180px);
  }

  .product-card {
    margin: 8px 0;
  }

  .pc-input-row {
    max-width: 400px;
  }
}

/* Mobile */
body.mobile-mode .top-header {
  padding: 6px 12px;
  padding-top: max(6px, env(safe-area-inset-top));
}

body.mobile-mode .brand {
  font-size: 14px;
}

body.mobile-mode .search-bar {
  padding: 6px 12px;
}

body.mobile-mode .search-input {
  padding: 8px 36px 8px 32px;
  font-size: 14px;
}

body.mobile-mode .filter-bar {
  padding: 4px 12px;
}

body.mobile-mode .stats-bar {
  padding: 4px 12px;
  font-size: 11px;
  gap: 10px;
}

body.mobile-mode .product-card {
  padding: 10px 12px;
  margin: 6px 12px;
  border-radius: 14px;
}

body.mobile-mode .pc-name-ar {
  font-size: 13px;
}

body.mobile-mode .pc-qty-input {
  flex: 0 0 60px;
  padding: 6px 8px;
  font-size: 14px;
}

body.mobile-mode .pc-unit-select {
  padding: 6px 8px;
  font-size: 12px;
}

body.mobile-mode .pc-add-btn {
  width: 38px;
  font-size: 18px;
}

body.mobile-mode .vs-viewport {
  height: calc(100vh - var(--header-height) - 180px);
}

/* PWA mode */
@media (display-mode: standalone) {
  .top-header {
    padding-top: max(16px, env(safe-area-inset-top));
  }
}

/* Landscape */
@media (orientation: landscape) and (max-height: 500px) {
  .top-header {
    padding: 4px 12px;
    padding-top: max(4px, env(safe-area-inset-top));
  }

  .brand { font-size: 13px; }
  .search-bar { padding: 4px 12px; }
  .filter-bar { padding: 2px 12px; }
  .stats-bar { padding: 2px 12px; }

  .vs-viewport {
    height: calc(100vh - 160px);
  }

  .pc-input-row {
    margin-top: 4px;
  }
}

/* Display mode classes */
html.display-ipad .app {
  max-width: 100%;
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

html.display-ipad .product-card {
  margin: 8px 0;
}

html.display-ipad .vs-viewport {
  height: calc(100vh - var(--header-height) - 160px);
}

/* LTR overrides */
html[dir="ltr"] .product-card {
  text-align: left;
}

html[dir="ltr"] .pc-status {
  direction: ltr;
}

html[dir="ltr"] .pc-meta {
  direction: ltr;
}