/* PR151 — Field Mobile Mode styles.
 *
 * All rules scoped under .villa-field-mode so they cannot pollute the
 * desktop / office portal. Safe-area-inset aware for iOS notch + Android
 * gesture bar. Tap targets >=48px per Material / iOS guidelines.
 */

/* Big tap targets everywhere in field mode. */
.villa-field-mode .tap-target,
.villa-field-mode button,
.villa-field-mode .villa-field-card,
.villa-field-mode .villa-field-tab,
.villa-field-mode .villa-field-jobtab,
.villa-field-mode .villa-field-settings-option,
.villa-field-mode .villa-field-camera-fab {
  min-height: 48px;
}

/* Larger base text in field mode for readability outdoors. */
.villa-field-mode {
  font-size: 17px;
  -webkit-tap-highlight-color: rgba(255,107,0,0.2);
}

/* Hide desktop chrome that we replace with the bottom nav. */
.villa-field-mode .villa-desktop-only {
  display: none !important;
}

/* Home grid: 1 column on phones, 2 on tablets/landscape. */
.villa-field-home {
  padding: 16px 12px calc(96px + env(safe-area-inset-bottom, 0px));
  max-width: 720px;
  margin: 0 auto;
}
.villa-field-home-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #141310;
}
.villa-field-home-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 480px) {
  .villa-field-home-grid { grid-template-columns: 1fr 1fr; }
}

/* Each big card — min 88px tall, full width. */
.villa-field-mode .villa-field-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 88px;
  padding: 16px 56px 16px 18px;
  text-align: left;
  background: #ffffff;
  border: 1px solid #d8e8e5;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(20,19,16,0.04);
  cursor: pointer;
}
.villa-field-mode .villa-field-card:active {
  background: #FFF0E5;
  transform: scale(0.99);
}
.villa-field-card-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #141310;
}
.villa-field-card-hint {
  font-size: 14px;
  color: #4a6b65;
  margin-top: 4px;
}
.villa-field-card-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 14px;
  background: #e76f51;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.villa-field-clock-status {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #FFF0E5;
  color: #D95A00;
  font-size: 12px;
  font-weight: 600;
}

/* Bottom navigation — fixed, safe-area aware. */
.villa-field-bottomnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  background: #ffffff;
  border-top: 1px solid #d8e8e5;
  z-index: 1000;
}
.villa-field-mode .villa-field-tab {
  flex: 1 1 0;
  min-height: 56px;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: 0;
  color: #4a6b65;
  font-size: 12px;
  cursor: pointer;
}
.villa-field-tab-icon { font-size: 22px; line-height: 1; }
.villa-field-tab-label { font-size: 11px; }
.villa-field-mode .villa-field-tab.is-active {
  color: #FF6B00;
  border-bottom: 3px solid #FF6B00;
}

/* Job view */
.villa-field-jobview {
  padding: 16px 12px calc(96px + env(safe-area-inset-bottom, 0px));
}
.villa-field-jobview-head h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #141310;
}
.villa-field-jobview-sub {
  color: #4a6b65;
  font-size: 14px;
  margin-bottom: 12px;
}
.villa-field-jobtabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}
.villa-field-mode .villa-field-jobtab {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: 999px;
  background: #f4f7f6;
  border: 1px solid #d8e8e5;
  color: #141310;
  font-weight: 600;
}

/* Floating "Take Photo" action button. */
.villa-field-mode .villa-field-camera-fab {
  position: fixed;
  right: 16px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 1001;
  padding: 14px 18px;
  background: #FF6B00;
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(20,19,16,0.18);
  cursor: pointer;
}

/* Settings toggle */
.villa-field-settings-toggle {
  border: 1px solid #d8e8e5;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
}
.villa-field-settings-toggle legend {
  font-weight: 700;
  color: #141310;
  padding: 0 6px;
}
.villa-field-settings-hint {
  color: #4a6b65;
  font-size: 13px;
  margin: 4px 0 10px;
}
.villa-field-settings-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 6px;
  cursor: pointer;
}
.villa-field-settings-option input { transform: scale(1.2); }

/* PR150.5 baseline repair — when Field Mode is active, the bottom-nav
 * (z-index:1000) sits flush at bottom:0 and was covering the legacy round
 * Lily FAB at right:22 bottom:22 (z-index:140), causing the bottom-nav to
 * intercept pointer events when users tap the FAB. Lift the FAB above the
 * bottom-nav in field mode, and shift its anchor up by the nav's min-height
 * (56px) + safe-area inset so it sits cleanly above the nav rather than
 * floating over the tabs. The legacy FAB remains the user's familiar entry
 * point; the bottom-nav's Lily tab is the additional, canonical option. */
.villa-field-mode .lily-fab {
  z-index: 1100;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}
.villa-field-mode .lily-modal {
  z-index: 1100;
  bottom: calc(146px + env(safe-area-inset-bottom, 0px));
}