/**
 * EquipTrak — iPhone / small-screen viewport fixes
 * Loaded after the main Tailwind bundle so overrides win.
 * Safe for all viewports; desktop layout unchanged at lg+.
 */

:root {
  /* Set by the visualViewport script in index.html; falls back to modern units */
  --app-height: 100dvh;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  /* Tab bar row is h-16 (4rem); FAB sticks up ~1.25rem above it */
  --tab-bar-height: 4rem;
  --tab-bar-total: calc(var(--tab-bar-height) + var(--safe-bottom));
  --content-bottom-pad: calc(5.25rem + var(--safe-bottom));
}

html {
  height: 100%;
  height: -webkit-fill-available;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  /* Stop iOS rubber-band from exposing empty chrome behind the app */
  background-color: hsl(var(--background));
}

body,
#root {
  height: 100%;
  height: var(--app-height);
  max-height: var(--app-height);
  overflow: hidden;
  position: relative;
}

/* --- Tailwind utility overrides used by the app shell --- */

/* Main app shell + full-screen auth */
.h-\[100dvh\] {
  height: var(--app-height) !important;
  max-height: var(--app-height) !important;
}

.min-h-\[100dvh\] {
  min-height: var(--app-height) !important;
}

.min-h-screen {
  min-height: var(--app-height) !important;
}

.h-svh {
  height: var(--app-height) !important;
}

.min-h-svh {
  min-height: var(--app-height) !important;
}

/* Mobile-only: tab bar is hidden at lg (1024px+), so do not force bottom pad on desktop */
@media (max-width: 1023px) {
  /* Main content area: reserve space for tab bar + raised FAB + home indicator */
  .pb-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\],
  .pb-\[calc\(5\.25rem\+env\(safe-area-inset-bottom\)\)\] {
    padding-bottom: var(--content-bottom-pad) !important;
  }

  /* Fixed action bars that sit above the tab bar (forms, job create, etc.) */
  .bottom-\[calc\(4rem\+env\(safe-area-inset-bottom\)\)\],
  .bottom-\[calc\(5\.25rem\+env\(safe-area-inset-bottom\)\)\] {
    bottom: var(--content-bottom-pad) !important;
  }

  /* Sticky page headers: clear Dynamic Island / status bar when inset applies */
  .sticky.top-0 {
    top: var(--safe-top);
    padding-top: max(1rem, var(--safe-top)) !important;
  }

  /* Bottom tab bar: horizontal safe areas (landscape / Dynamic Island) */
  .pb-safe.fixed.inset-x-0.bottom-0 {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    background-clip: padding-box;
  }
}

/* Auth / centered screens: allow scroll when keyboard or short viewports */
.min-h-\[100dvh\].flex.flex-col,
.min-h-screen.flex.flex-col {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Prefer top-aligned when content is taller than the viewport */
  justify-content: safe center;
  padding-top: max(1.25rem, var(--safe-top));
  padding-bottom: max(1.25rem, var(--safe-bottom));
  padding-left: max(1.25rem, var(--safe-left));
  padding-right: max(1.25rem, var(--safe-right));
  box-sizing: border-box;
}

/* Prevent wide children from forcing horizontal page scroll on ~390–402px phones */
#root {
  max-width: 100vw;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Leaflet map containers: stay within the shell */
.leaflet-container {
  width: 100% !important;
  max-width: 100%;
  height: 100% !important;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

/* Dialogs / lightboxes that go full-viewport on mobile */
.h-\[100dvh\].w-screen {
  height: var(--app-height) !important;
  max-height: var(--app-height) !important;
  width: 100% !important;
  max-width: 100vw !important;
}

/* Comfortable form bottom space on pages that use pb-28 above the tab bar */
@media (max-width: 1023px) {
  .pb-28 {
    padding-bottom: calc(7rem + var(--safe-bottom)) !important;
  }

  /* Slightly tighter horizontal padding on very narrow widths without crushing touch targets */
  @media (max-width: 390px) {
    .px-5 {
      padding-left: 1rem !important;
      padding-right: 1rem !important;
    }
  }

  /* Make sure list/page scroll regions can shrink inside the flex shell */
  .h-full.overflow-y-auto,
  .h-full.overflow-hidden {
    min-height: 0;
    max-height: 100%;
  }

  /*
   * Horizontal filter chip rows (equipment status/type, etc.)
   * Must swipe sideways on iOS without fighting the page scroll.
   */
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    max-width: 100%;
  }
}

/* Keyboard open: visualViewport script shrinks --app-height; keep fixed bars usable */
@supports (height: 100dvh) {
  @media (max-width: 1023px) {
    input,
    textarea,
    select {
      font-size: 16px; /* prevents iOS zoom-on-focus which breaks layout */
    }
  }
}

/* ---------- Photo viewer close (mobile + dark fullscreen dialogs) ----------
   Default Radix/shadcn X is low-opacity muted ink — invisible on bg-black/95.
   Job & equipment viewers also get an explicit white "Close" button in the footer. */

.et-dialog-close {
  z-index: 60 !important;
  opacity: 1 !important;
  color: #fff !important;
}

.et-dialog-close svg {
  width: 1.35rem !important;
  height: 1.35rem !important;
  color: #fff !important;
  stroke: currentColor !important;
}

/* Fullscreen photo dialog: park the X below the notch / status bar on phones */
@media (max-width: 1023px) {
  .bg-black\/95 > .et-dialog-close,
  .bg-black\/95 > button.et-dialog-close {
    top: max(0.75rem, env(safe-area-inset-top, 0px)) !important;
    right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    background: rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4), 0 4px 16px rgba(0, 0, 0, 0.45) !important;
  }

  /* Explicit footer Close control — large, high contrast */
  .et-photo-close {
    background: #fff !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    min-height: 44px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
  }

  /* Extra bottom inset so footer Close clears the home indicator */
  .bg-black\/95 .pb-6 {
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Company place pins on main map */
.et-place-pin {
  background: transparent !important;
  border: none !important;
}