/* Rapid Field - Main Styles (extracted from monolithic index.html) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Space+Grotesk:wght@500;600&display=swap');

:root {
  --navy: #0F2744;
  --blue: #2563EB;
}

body {
  font-family: 'Inter', system_ui, sans-serif;
}

.font-display {
  font-family: 'Space Grotesk', 'Inter', system_ui, sans-serif;
  font-weight: 600;
}

.app-container {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  background: #f8fafc;
  position: relative;
  overflow: hidden;
}

.mobile-header {
  background: linear-gradient(180deg, #0F2744 0%, #0F2744 100%);
  padding-top: env(safe-area-inset-top);
}

.nav-tab {
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-tab.active {
  color: #2563EB;
  position: relative;
}

.nav-tab.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  background: #2563EB;
  border-radius: 3px;
}

.section-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15, 39, 68, 0.08);
}

.job-card {
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.job-card:active {
  transform: scale(0.985);
}

.measurement-row {
  transition: background 0.1s ease;
}

.photo-thumb {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.modal {
  animation: modalEnter 0.2s cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes modalEnter {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.big-button {
  height: 56px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 14px;
}

.input {
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
}

.data-table th {
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
}

.stat-pill {
  background: #f1f5f9;
  border-radius: 9999px;
  padding: 2px 12px;
  font-size: 13px;
  font-weight: 600;
}

.field-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #475569;
  margin-bottom: 4px;
  display: block;
}

.empty-state {
  border: 2px dashed #e2e8f0;
  border-radius: 16px;
}

.price-item {
  transition: all 0.1s ease;
}

.price-item:active {
  background-color: #f8fafc;
}

.app-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

.measure-input {
  font-size: 15px;
  height: 44px;
}

.rapid-logo {
  letter-spacing: -1.5px;
}

/* Additional styles added during development */
.toast {
  animation: toastIn 0.2s ease forwards;
}

@keyframes toastIn {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.live-indicator {
  animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}