:root {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --uniqa-navy: #002F5F;
  --uniqa-navy-dark: #001E50;
  --uniqa-blue: #0050C8;
  --uniqa-blue-50: #EBF2FB;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

pre, code {
  font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
}

.field label {
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
  margin-bottom: 0.25rem;
}

.field input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid rgb(226 232 240);
  background: white;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: rgb(15 23 42);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.field input:focus {
  outline: none;
  border-color: var(--uniqa-blue);
  box-shadow: 0 0 0 3px rgba(0, 80, 200, 0.12);
  cursor: text;
}

.field.missing input {
  border-color: rgb(252 211 77);
  background: rgb(255 251 235);
}

.field.missing label::after {
  content: ' · missing';
  color: rgb(180 83 9);
  font-weight: 600;
}

/* Hide claim-only / invoice-only fields based on detected type */
body[data-doc-type="invoice"] .claim-only { display: none; }
body[data-doc-type="claim_form"] .invoice-only { display: none; }

/* Mode switching: header nav toggles which top-level section is visible */
.mode-extract-only,
.mode-classify-only,
.mode-summarize-only { display: none; }
body.mode-extract .mode-extract-only { display: block; }
body.mode-classify .mode-classify-only { display: block; }
body.mode-summarize .mode-summarize-only { display: block; }

.mode-nav-link.active {
  background: var(--uniqa-navy);
  color: white;
}
.mode-nav-link.active:hover {
  background: var(--uniqa-navy-dark);
}

/* Priority badges */
.priority-high { background: #FEE2E2; color: #991B1B; }
.priority-medium { background: #FEF3C7; color: #92400E; }
.priority-low { background: #D1FAE5; color: #065F46; }

.tab-btn {
  cursor: pointer;
  background: transparent;
}

.loader {
  width: 36px;
  height: 36px;
  border: 3px solid rgb(226 232 240);
  border-top-color: var(--uniqa-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

#dropzone.drag-over {
  border-color: var(--uniqa-blue);
  background: var(--uniqa-blue-50);
}

.line-item-row input {
  width: 100%;
  border-radius: 0.375rem;
  border: 1px solid transparent;
  background: transparent;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  color: rgb(15 23 42);
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
}

.line-item-row input:hover {
  background: rgb(248 250 252);
}

.line-item-row input:focus {
  outline: none;
  background: white;
  border-color: var(--uniqa-blue);
  box-shadow: 0 0 0 3px rgba(0, 80, 200, 0.1);
  cursor: text;
}

/* Time-saved pill flash on increment */
#savings-pill.bumped {
  animation: bump 0.6s ease;
}
@keyframes bump {
  0% { transform: scale(1); }
  30% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.18); }
  100% { transform: scale(1); }
}