/**
 * 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;
}

/*
 * Equipment picker (Home → Inspect / Change usual truck)
 * Nested scroll inside a transformed fixed dialog is flaky on iOS;
 * force a flex column + pan-y touch scrolling on the list.
 */
.et-equip-picker-dialog {
  max-height: calc(var(--app-height) - 1.25rem) !important;
  width: min(100vw - 1.5rem, 28rem) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  overflow: hidden !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px)) !important;
}

.et-equip-picker-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding-bottom: 0.5rem;
}

.et-equip-picker-list > button {
  flex-shrink: 0;
  touch-action: manipulation;
}

/* 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;
}

/* ========== Profile page — clean account layout ========== */
.et-profile-page {
  min-height: 100%;
  background:
    radial-gradient(900px 480px at 8% -12%, hsl(var(--primary) / 0.10), transparent 55%),
    radial-gradient(700px 400px at 100% 0%, hsl(var(--accent) / 0.07), transparent 50%),
    hsl(var(--background));
}
.et-profile-inner {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem 1rem 2.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.et-profile-header {
  margin-bottom: 0.15rem;
}
.et-profile-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.15rem;
}
.et-profile-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.15;
  font-family: "Barlow Semi Condensed", Barlow, sans-serif;
}
.et-profile-lead {
  margin: 0.35rem 0 0;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}
.et-profile-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.15rem;
}
.et-profile-section-desc {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
}
.et-profile-section-head {
  margin-bottom: 0.75rem;
}
.et-profile-section {
  padding: 1rem;
  border-radius: 0.85rem;
  border: 1px solid hsl(var(--border) / 0.95);
  background: hsl(var(--card) / 0.92);
  box-shadow: 0 8px 28px rgb(0 0 0 / 0.04);
}
.et-profile-section--danger {
  border-color: hsl(var(--destructive) / 0.22);
  background: hsl(var(--card) / 0.95);
}
.et-profile-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 0.85rem;
  border: 1px solid hsl(var(--border) / 0.95);
  background: linear-gradient(145deg, hsl(var(--card) / 0.98), hsl(var(--card) / 0.82));
  box-shadow: 0 10px 32px rgb(0 0 0 / 0.05);
}
.et-profile-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -40% auto;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: hsl(var(--primary) / 0.08);
  pointer-events: none;
}
.et-profile-links {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 360px) {
  .et-profile-links {
    grid-template-columns: 1fr;
  }
}
.et-profile-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.65rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.65);
  color: hsl(var(--foreground));
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.et-profile-tile:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.05);
}
.et-profile-tile--primary {
  border-color: hsl(var(--primary) / 0.35);
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}
.et-profile-tile--accent {
  border-color: transparent;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.et-profile-choice-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.et-profile-choice {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.8rem;
  border-radius: 0.65rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.55);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.et-profile-choice:hover {
  border-color: hsl(var(--primary) / 0.4);
}
.et-profile-choice--active {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.06);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.15);
}
.et-profile-choice-check {
  display: flex;
  height: 1.65rem;
  width: 1.65rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 0.45rem;
  border: 1px solid hsl(var(--border));
  font-size: 0.8rem;
  font-weight: 700;
  background: hsl(var(--background));
}
.et-profile-choice-check--on {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.et-profile-signout {
  margin-top: 0.15rem !important;
  border-radius: 0.65rem !important;
}
/* legacy panel class (if any leftovers) */
.et-profile-panel {
  margin-top: 0;
  padding: 1rem;
  border-radius: 0.85rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / 0.92);
}
.et-profile-panel h2 {
  margin: 0 0 0.75rem;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: "Barlow Semi Condensed", Barlow, sans-serif;
}

/* Attention helpers */
.et-attn-urgent { border-color: hsl(var(--status-open) / 0.4) !important; }