/**
 * STEM System — базовые стили
 * Объединяет: overflow fix, iOS/Safari fix для input
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --stem-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

/* Фон на html, чтобы в щелях/оверскролле не светил дефолтный белый; без min-height: dvh на body (на iOS давало «полосу») */
html { overflow-x: hidden; width: 100%; margin: 0; padding: 0; font-family: var(--stem-font); background-color: #f3f4f6; }
body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; font-family: var(--stem-font); }

/* iOS/Safari fix: inputs losing focus when tapped on Apple devices
   - font-size 16px prevents auto-zoom which causes layout shift and focus loss
   - transform creates stacking context for fixed elements
   - touch-action removes 300ms delay
   - applies to touch devices (iPhone, iPad, Mac trackpad) */
@media (hover: none) and (pointer: coarse) {
  input[type="text"], input[type="number"], input[type="tel"], input[type="search"],
  input[type="email"], input[type="password"], textarea {
    font-size: 16px !important;
  }
  .barcode-input-wrap input, .barcode-footer input, .scan-barcode-bar input,
  .order-card-scan input, .scan-input, .scan-section input,
  #barcodeInput, #scanBarcodeInput, #orderCardBarcodeInput, #scanInput,
  .form-input, .api-card input { font-size: 16px !important; }
}
.barcode-footer, .scan-barcode-bar, .barcode-input-wrap, .scan-section {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
input[type="text"], input[type="number"], input[type="tel"], input[type="search"],
input[type="email"], input[type="password"], textarea {
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}

/* PWA + моб. Safari: растягиваем фон #f3f4f6 на весь визуальный вьюпорт, без белой «каймы» снизу/по бокам */
html {
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  background-attachment: scroll;
}
/* 100svh убран: в PWA/полноэкране он короче видимой области → снизу светлая полоса. lvh + dvh заполняют экран. */
body {
  min-height: 100%;
  min-height: 100dvh;
  min-height: 100lvh;
  min-height: -webkit-fill-available;
  background-attachment: scroll;
}
@media (display-mode: standalone) {
  html,
  body {
    min-height: 100%;
    min-height: 100dvh;
    min-height: 100lvh;
    min-height: -webkit-fill-available;
  }
  /* Слой «под» контент, но с тем же фоном, чтобы не просвечивал #fff */
  html {
    position: relative;
  }
  html::after {
    content: '';
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    /* iPhone: слой заканчивался по layout viewport, зона под home indicator оставалась системной/белой — уводим низ на safe-area */
    bottom: calc(-1 * env(safe-area-inset-bottom, 0px));
    z-index: -1;
    background-color: #f3f4f6;
    pointer-events: none;
  }
}