/**
 * Bottom Navigation Bar — Mobile Only
 * Owns: Fixed bottom tab bar with 5 tabs (Home, Inspect, Photos, Review, More).
 * Does NOT own: Page content, camera logic, report logic, inspection workflow.
 */

/* ── Bottom Nav Container ──────────────────────────────────────────────────── */
.ibos-bottom-nav {
  display: none; /* hidden on desktop by default */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* WHY: Pages style their top header with a bare `nav {}` selector that sets
     top: 0, padding, width, background, etc. Since this element is also a <nav>,
     those rules leak in and stretch it to a full-screen overlay. Reset every
     property that page-level nav styles might set. */
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  /* WHY: safe-area-inset-bottom handles iPhone X+ notch/home bar area */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  margin: 0;
  z-index: 9000;
  background: #ffffff !important;
  color: #8099A6;
  border-top: 1px solid #E0E0E0;
  border-bottom: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  /* Reset inherited box model from page-level nav */
  max-width: none;
  min-height: 0;
  overflow: visible;
  transform: none;
  flex-direction: row;
  /* CRITICAL: Explicitly enable pointer events and touch handling for iOS Safari */
  pointer-events: auto !important;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  .ibos-bottom-nav {
    display: flex;
    align-items: stretch;
  }

  /* WHY: Prevent page content from hiding behind the fixed bottom nav.
     68px = 56px nav height + ~12px safe-area. Pages with their own bottom
     bars (report.html action bar) handle their own additional offset. */
  body.has-bottom-nav {
    padding-bottom: 68px !important;
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Tab Items ─────────────────────────────────────────────────────────────── */
.ibos-bottom-nav__tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 0 4px;
  min-height: 56px;
  text-decoration: none;
  color: #8099A6;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  background: none;
  border: none;
  outline: none;
  position: relative;
  /* CRITICAL: Ensure tap events work on iOS Safari */
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.ibos-bottom-nav__tab svg {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ibos-bottom-nav__tab span {
  line-height: 1;
}

/* ── Active State ──────────────────────────────────────────────────────────── */
.ibos-bottom-nav__tab.active {
  color: #1976D2;
}

.ibos-bottom-nav__tab.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: #1976D2;
  border-radius: 0 0 2px 2px;
}

/* ── Disabled State ────────────────────────────────────────────────────────── */
/* WHY: When no inspection is selected, Inspect/Photos/Review tabs have nowhere
   to go. Greying them out is better than silently routing to /admin. */
.ibos-bottom-nav__tab.disabled {
  color: #C8D3DA;
  pointer-events: none;
  opacity: 0.5;
}
.ibos-bottom-nav__tab.disabled::before {
  display: none; /* No active indicator on disabled tabs */
}

/* ── Tap Feedback ──────────────────────────────────────────────────────────── */
/* WHY: iOS Safari needs visible feedback since we disabled -webkit-tap-highlight-color.
   The background pulse confirms touch registration for the user. */
.ibos-bottom-nav__tab:active:not(.disabled) {
  background: rgba(25, 118, 210, 0.08);
  opacity: 0.7;
  transition: none; /* Instant feedback, no delay */
}

/* ── More Menu Overlay ─────────────────────────────────────────────────────── */
.ibos-more-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 8999;
  background: rgba(0,0,0,0.4);
  -webkit-tap-highlight-color: transparent;
  pointer-events: none; /* Don't block clicks on nav when hidden */
}

.ibos-more-overlay.open {
  display: block;
  pointer-events: auto; /* Capture clicks when visible */
}

.ibos-more-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9001;
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  padding: 8px 0;
  padding-bottom: env(safe-area-inset-bottom, 8px);
  transform: translateY(100%);
  transition: transform 0.25s ease;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  max-height: 60vh;
  overflow-y: auto;
}

.ibos-more-overlay.open .ibos-more-sheet {
  transform: translateY(0);
}

.ibos-more-sheet__handle {
  width: 36px;
  height: 4px;
  background: #E0E0E0;
  border-radius: 2px;
  margin: 4px auto 8px;
}

.ibos-more-sheet__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  text-decoration: none;
  color: #1F2933;
  font-size: 15px;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}

.ibos-more-sheet__item:active {
  background: #F4F6F8;
}

.ibos-more-sheet__item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.ibos-more-sheet__divider {
  height: 1px;
  background: #E0E0E0;
  margin: 4px 16px;
}

/* ── Page-specific toolbar offsets ─────────────────────────────────────────
   WHY: inspect.html and report.html have their own fixed-bottom toolbars.
   Lift them above the bottom nav so both are usable on mobile. */
@media (max-width: 768px) {
  /* inspect.html bottom toolbar */
  body.has-bottom-nav .toolbar {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* report.html mobile action bar */
  body.has-bottom-nav .mobile-action-bar {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* Extra body padding for pages with BOTH a page toolbar + the nav bar */
  body.has-bottom-nav.has-page-toolbar {
    padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px)) !important;
  }
}