/* Podium Safety palette — docs/podium-safety-color-palette-appendix.md.
   Loaded after Bootstrap so these custom properties + overrides win via cascade order.
   Neutral, independent identity — not Podium's brand, not any client's brand (Section 1). */

:root {
  --ps-primary: #042C53;
  --ps-primary-tint: #E6F1FB;
  --ps-text: #1A1A1A;
  --ps-text-muted: #6B6B6B;
  --ps-bg: #FFFFFF;
  /* Bootstrap's default form-control border (#dee2e6, ~1.2:1 against white) washes out in direct
     sun — this is a deliberately dark, high-contrast border for outdoor readability
     (docs/SPEC-internal.md Section 9), not a design preference. */
  --ps-border: #495057;

  /* Severity scale — Section 3. Always paired with a text label, never colour alone. */
  --ps-severity-near-miss: #2E7D32;
  --ps-severity-minor: #C9971F;
  --ps-severity-moderate: #D9691E;
  --ps-severity-serious: #C42B2B;
  --ps-severity-critical: #7A1620;

  --bs-primary: var(--ps-primary);
  --bs-primary-rgb: 4, 44, 83;
  --bs-body-color: var(--ps-text);
  --bs-body-bg: var(--ps-bg);
  --bs-link-color: var(--ps-primary);
}

body {
  background-color: var(--ps-bg);
  color: var(--ps-text);
}

.text-muted {
  color: var(--ps-text-muted) !important;
}

.btn-primary {
  --bs-btn-bg: var(--ps-primary);
  --bs-btn-border-color: var(--ps-primary);
  --bs-btn-hover-bg: #03213e;
  --bs-btn-hover-border-color: #03213e;
  --bs-btn-active-bg: #021728;
  --bs-btn-active-border-color: #021728;
}

.navbar-ps {
  background-color: var(--ps-primary);
}

.callout-tint {
  background-color: var(--ps-primary-tint);
  color: var(--ps-primary);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
}

/* Severity badges/tiles — single source of truth for the colour scale wherever severity appears
   (worker picker, KPI tiles, incident list badges, charts). White text on every step (Section 3). */
.severity-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: #fff;
  border-radius: 0.375rem;
  padding: 0.35rem 0.75rem;
  font-weight: 600;
}

.severity-near-miss { background-color: var(--ps-severity-near-miss); }
.severity-minor { background-color: var(--ps-severity-minor); }
.severity-moderate { background-color: var(--ps-severity-moderate); }
.severity-serious { background-color: var(--ps-severity-serious); }
.severity-critical { background-color: var(--ps-severity-critical); }

/* Large touch targets, one-handed use, outdoor glare/gloves (docs/SPEC-internal.md Section 9). */
.btn, .form-control, .form-select, .form-check-input {
  min-height: 3rem;
  font-size: 1.05rem;
}

/* High-contrast borders throughout the public form — Bootstrap's default (#dee2e6) is barely
   visible against white in direct sun. */
.form-control, .form-select {
  border-width: 2px;
  border-color: var(--ps-border);
}

.form-check-input {
  min-height: 1.5rem;
  width: 1.5rem;
  height: 1.5rem;
  border-width: 2px;
  border-color: var(--ps-border);
}

/* Severity picker — each option is a bordered card coloured to match its severity (not just a
   small swatch next to a plain radio), so the colour is on the thing you're actually tapping and
   the option is readable as a solid high-contrast block in bright sun. Colour still isn't the
   only signal — the worker-facing label text is always shown too (Section 3 of the palette
   appendix: never colour alone). */
.severity-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.severity-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  border: 3px solid var(--severity-color);
  border-radius: 0.5rem;
  padding: 0.85rem 1rem;
  cursor: pointer;
  background-color: var(--ps-bg);
  transition: background-color 0.1s ease-in-out;
}

.severity-option .form-check-input {
  margin: 0;
  flex-shrink: 0;
  border-color: var(--severity-color);
}

.severity-option-label {
  font-size: 1.05rem;
}

/* Progressive enhancement: fills solid with the severity colour once selected. Falls back
   gracefully to just the coloured border + native radio dot on browsers without :has(). */
.severity-option:has(.form-check-input:checked) {
  background-color: var(--severity-color);
}

.severity-option:has(.form-check-input:checked) .severity-option-label {
  color: #fff;
  font-weight: 600;
}

.btn-lg-touch {
  min-height: 3.75rem;
  font-size: 1.15rem;
}

/* The large-touch-target rule above is for the public reporting form; the admin dashboard is a
   desktop/tablet tool used by staff, not a gloved worker outdoors, so compact controls there
   (navbar buttons, table action buttons) opt back out. */
.navbar .btn, .btn-sm {
  min-height: auto;
  font-size: 0.875rem;
}

.report-wizard-step {
  display: none;
}

.report-wizard-step.active {
  display: block;
}

.anonymity-fork .btn {
  min-height: 4rem;
}

@media (max-width: 576px) {
  .container-narrow {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.container-narrow {
  max-width: 640px;
}

/* Honeypot field — off-screen, not display:none (some bots skip that specifically), never
   reachable by a real user (tabindex -1, aria-hidden). See ReportController.Submit. */
.honeypot-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}