/* =========================================================
   Field Offline UI styles — PR373 Mobile Offline Mode
   Brand: #FF6B00 (orange), #1A1A2E (ink). No emoji assets.
   ========================================================= */

/* Offline banner (spec 8.1): fixed top, full width, 36px, orange,
   white 14px bold, no dismiss. Mobile only (deliverable 11). */
.villa-offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 36px;
  line-height: 36px;
  background: #FF6B00;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  z-index: 99999;
}

/* Body shifts down 36px when banner is present (spec 8.1). */
.villa-offline-shifted .main,
.villa-offline-shifted main,
body.villa-offline-shifted {
  margin-top: 36px;
}

/* Banner is mobile-only: hidden above the mobile breakpoint. */
@media (min-width: 721px) {
  .villa-offline-banner { display: none !important; }
}

/* Sync status indicator (spec 8.2). */
.villa-sync-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  font-size: 14px;
  vertical-align: middle;
}
.villa-sync-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 107, 0, 0.25);
  border-top-color: #FF6B00;
  border-radius: 50%;
  animation: villa-sync-spin 0.8s linear infinite;
}
@keyframes villa-sync-spin {
  to { transform: rotate(360deg); }
}
.villa-sync-complete { color: #2E7D32; }
.villa-sync-partial,
.villa-sync-error { color: #B71C1C; }

/* Pending actions badge (spec 8.3): circular 18px, orange, white
   11px bold. */
.villa-pending-badge {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #FF6B00;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  text-align: center;
  margin-left: 6px;
  vertical-align: middle;
}

/* Clear-offline-data confirm modal (spec 8.4) — destructive, red. */
.villa-clear-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
}
.villa-clear-modal {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 20px;
  max-width: 360px;
  width: 90%;
  color: #1A1A2E;
}
.villa-clear-title { margin: 0 0 8px; font-size: 18px; }
.villa-clear-body { margin: 0 0 16px; font-size: 14px; line-height: 1.4; }
.villa-clear-actions { display: flex; gap: 12px; justify-content: flex-end; }
.villa-clear-cancel {
  background: #FFFFFF;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}
/* Destructive action: red border + red text (spec 8.4). */
.villa-clear-confirm {
  background: #FFFFFF;
  border: 1px solid #B71C1C;
  color: #B71C1C;
  border-radius: 6px;
  padding: 8px 14px;
  font-weight: bold;
  cursor: pointer;
}
.villa-clear-confirm:hover { background: #B71C1C; color: #FFFFFF; }

/* Take Photo button (spec 6.1): full-width orange. */
.villa-take-photo-btn {
  display: block;
  width: 100%;
  background: #FF6B00;
  color: #FFFFFF;
  border: none;
  border-radius: 6px;
  padding: 14px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
}