/* Mobile-first touch and layout helpers for Clothing POS */

[x-cloak] { display: none !important; }

.touch-btn {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

.touch-row {
  min-height: 48px;
}

.touch-input {
  min-height: 44px;
  font-size: 16px !important;
  touch-action: manipulation;
}

@media (max-width: 767px) {
  html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }

  body {
    -webkit-tap-highlight-color: rgba(37, 99, 235, 0.12);
  }

  /* Prevent iOS zoom on focus */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }

  main input:not([type="checkbox"]):not([type="radio"]),
  main select,
  main textarea {
    min-height: 44px;
  }

  /* Room for fixed bottom nav */
  body.has-mobile-nav main {
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Long forms with their own sticky save bar (no bottom nav) */
  body.has-form-footer main {
    padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
  }

  /* Sticky form action bar — sits at bottom, above everything */
  .form-sticky-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 45;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.1);
    padding: 0.75rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
  }

  .form-sticky-bar .touch-btn {
    min-height: 48px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Page titles stack cleanly */
  .page-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem;
  }

  .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .page-header-actions > * {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
  }

  main a.rounded-xl,
  main button.rounded-xl {
    min-height: 44px;
  }

  main .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-left: -0.25rem;
    margin-right: -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }

  main .divide-y > a,
  main .divide-y > div[class*="py-3"] {
    min-height: 52px;
  }

  .modal-sheet {
    margin: 0;
    max-height: min(92vh, 100dvh);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  /* Quantity / matrix cells on product form */
  .matrix-input {
    min-width: 3rem;
    min-height: 44px;
    padding: 0.5rem 0.25rem;
    text-align: center;
    font-size: 16px !important;
  }

  /* Size chart tables — easier row tap */
  .size-chart-table input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* Horizontal scroll hint for wide tables */
  .scroll-hint-x {
    position: relative;
  }

  .scroll-hint-x::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 2rem;
    pointer-events: none;
    background: linear-gradient(to left, rgba(248, 250, 252, 0.95), transparent);
  }

  /* Focused fields scroll above sticky bar */
  main input:focus,
  main select:focus,
  main textarea:focus {
    scroll-margin-bottom: calc(7rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (min-width: 768px) {
  .mobile-only {
    display: none !important;
  }

  .form-sticky-bar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 1rem;
    border-radius: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
  }
}

@media (max-width: 767px) {
  .desktop-only {
    display: none !important;
  }
}