/* Field Mode — High contrast, large targets for outdoor/glove use */

[data-field-mode="true"] .btn {
  min-height: var(--touch-field);
  font-size: var(--text-md);
}

[data-field-mode="true"] .form-input,
[data-field-mode="true"] .form-select,
[data-field-mode="true"] .form-textarea {
  min-height: var(--touch-field);
  font-size: var(--text-md);
  border-width: 2px;
}

[data-field-mode="true"] .animal-card {
  padding: var(--space-5);
}

[data-field-mode="true"] .sidebar-item {
  min-height: var(--touch-field);
  font-size: var(--text-base);
}

[data-field-mode="true"] .tab {
  min-height: var(--touch-field);
  font-size: var(--text-base);
}

[data-field-mode="true"] .bottom-nav-item {
  min-height: calc(var(--bottom-nav-height) + 8px);
}

[data-field-mode="true"] .badge {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

[data-field-mode="true"] .kpi-card .kpi-value {
  font-size: var(--text-3xl);
}

[data-field-mode="true"] .form-label {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

[data-field-mode="true"] .agenda-time {
  font-size: var(--text-lg);
}

[data-field-mode="true"] .voice-fab {
  width: 72px;
  height: 72px;
}
[data-field-mode="true"] .voice-fab svg { width: 32px; height: 32px; }

/* ─── Bright sunlight mode ─────────────────────────────────────
   Triggered when ambient light > 8000 lux, OR forced manually
   via settings. Desaturates muted colors, fattens borders, kills
   shadows, and forces max contrast on primary CTAs (black on
   saturated yellow). Goal: legibility on a phone screen at noon
   in an open field with gloves on.
*/
[data-light="bright"] {
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
}

[data-light="bright"] body,
[data-light="bright"] .app-shell {
  background: #FFFFFF;
}

[data-light="bright"] .btn,
[data-light="bright"] .form-input,
[data-light="bright"] .form-select,
[data-light="bright"] .form-textarea,
[data-light="bright"] .card {
  border-width: 3px !important;
  box-shadow: none !important;
  border-color: #000 !important;
}

[data-light="bright"] .btn-primary {
  background: #FFEB3B !important;
  color: #000 !important;
  border: 3px solid #000 !important;
  font-weight: 800 !important;
  text-shadow: none !important;
}

[data-light="bright"] .btn-secondary {
  background: #FFFFFF !important;
  color: #000 !important;
  border: 3px solid #000 !important;
}

[data-light="bright"] .text-muted,
[data-light="bright"] .text-secondary {
  color: #000 !important;
}

[data-light="bright"] .badge {
  border: 2px solid #000 !important;
  font-weight: 800 !important;
}