/* Global form-control sizing to prevent iOS Safari auto-zoom on focus */
html { -webkit-text-size-adjust: 100%; }
input, select, textarea, [contenteditable="true"] {
  font-size: 16px !important;
}

/* Remove iOS Safari gray tap highlight that can blend with
   our bottom gradient on double-tap */
button, a, [role="button"], .btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Prevent iOS touch-callout magnification on drag handles */
.drag-handle,
.drag-handle img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Application max-width for mobile-first layout */
:root {
  --app-max-width: 430px; /* ~iPhone 14/15 Pro Max width */
}

/* Constrain page width even on desktop */
body {
  max-width: var(--app-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Utility: center fixed full-width bars to app width */
.app-fixed {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
}

/* Use the small viewport height to avoid iOS Safari toolbars overlapping content */
.min-h-svh { min-height: 100svh; }

/* Prevent unintended horizontal scrolling on small screens */
html, body { overflow-x: hidden; background-color: #fff; }

/* Toast containers aligned to app width */
.app-toast {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: calc(min(100vw, var(--app-max-width)) - 2rem); /* mimic left-4 right-4 gutters */
}

/* FAB aligned to right edge of app width */
.app-fab {
  right: max(1.5rem, calc((100vw - var(--app-max-width)) / 2 + 1.5rem)) !important; /* right-6 inside app */
}

/* Bottom sheet content centered to app width when inside a full-width overlay */
.app-sheet {
  width: 100%;
  max-width: var(--app-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Absolutely positioned bottom sheet that was using inset-x-0 */
.app-bottom-sheet {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
}

/* Invoice input error styles */
.input-error {
  background-color: #FDF2F2 !important; /* Error 50 */
  border-color: #F05252 !important;     /* Error 500 */
  color: #C81E1E !important;            /* Error 700 */
}
.input-error:focus {
  border-color: #F05252 !important;
}

/* Disabled primary Save button (Update Location / Manual Address) */
#btn-save:disabled {
  background-color: #E5E7EB !important; /* Primary 200 */
  color: #9CA3AF !important;            /* Primary 400 */
  cursor: not-allowed;
}

/* Mobile-first app width cap */
:root {
  --app-max-width: 430px; /* match Add Stops actions width */
}

/* Constrain page content blocks (used on <main>) */
.app-container {
  max-width: var(--app-max-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Center fixed bottom bars to the same width */
.app-fixed {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--app-max-width);
}