/*
 * Forms on Industry-styled pages are still rendered by crispy-forms with
 * the crispy-bootstrap5 template pack (django-crispy-forms' TEMPLATE_PACK
 * setting is global -- swapping it would affect every form in the app, not
 * just these pages). That pack always emits Bootstrap classes
 * (.form-control, .form-label, .form-check, .invalid-feedback, ...), which
 * have no meaning without Bootstrap's CSS loaded. Rather than fork crispy's
 * templates, this maps those Bootstrap classes onto Industry's existing
 * tokens/components so any crispy-rendered form looks correct on an
 * Industry page with zero Bootstrap CSS loaded.
 */

.form-control,
.form-select {
  display: block;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.form-control:hover,
.form-select:hover {
  border-color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.form-control:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-accent);
}
textarea.form-control {
  min-height: 90px;
  resize: vertical;
}

.form-label,
label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.form-text {
  font-size: 12px;
  /* 55% fails WCAG 2.2 AA (see contrast-fixes.css) -- 75% matches the
     design system's own .text-muted fix for the same reason. */
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.form-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  margin-bottom: var(--space-2);
}
.form-check-input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-accent);
}
.form-check-label {
  margin: 0;
  font-size: inherit;
  color: var(--color-text);
}

.mb-3,
.mb-2 {
  margin-bottom: var(--space-3);
}

.invalid-feedback,
.errorlist {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  color: #a4302f; /* darkened from a standard danger red for 4.5:1 on --color-bg */
  list-style: none;
  padding: 0;
}
.is-invalid {
  border-color: #a4302f !important;
}

.alert {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: 13.5px;
  margin-bottom: var(--space-4);
}
.alert-danger {
  border-color: #a4302f;
  color: #a4302f;
}
.alert-success {
  border-color: var(--color-accent-700);
  color: var(--color-accent-800);
}

/* crispy-bootstrap5 buttons already carry .btn.btn-primary -- Industry's
   own .btn/.btn-primary rules (loaded after this file) win by source order. */

/* Bootstrap's screen-reader-only utility -- used on the response-matrix
   (candidate_test_wizard_question.html) to give each radio its own
   row+column accessible name without showing duplicate visible text.
   Standard clip-based sr-only implementation (same as Bootstrap 5's own). */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.d-none {
  display: none !important;
}

.progress {
  height: 1.4rem;
  border: 1px solid var(--color-divider);
  overflow: hidden;
  font-size: 12px;
}
.progress-bar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* var(--color-accent-700), not the raw accent step -- white text at
     14px on var(--color-accent) alone is 2.9:1, fails 4.5:1; -700 clears
     it (see contrast-fixes.css for the same reasoning applied elsewhere). */
  background: var(--color-accent-700);
  color: var(--color-bg);
}

/*
 * The rest of this file backs Bootstrap classes used by the candidate
 * practice-question templates (fault_finding_practice.html and its 5
 * siblings), which weren't rewritten to Industry markup directly -- their
 * JS toggles Bootstrap class names directly (e.g. classList.toggle("d-none")),
 * so backing those exact classes here is lower-risk than renaming classes
 * throughout the JS.
 */

.alert-info {
  border-color: var(--color-accent-700);
  color: var(--color-accent-800);
}
.alert-warning {
  /* Darkened from a plain amber so this text still clears 4.5:1 on
     --color-bg, same reasoning as the assessment timer's warning state. */
  border-color: #7a5b00;
  color: #7a5b00;
}

.btn-success {
  background: var(--color-accent-700);
  color: var(--color-bg);
  border-color: var(--color-accent-700);
}
.btn-success:hover {
  background: var(--color-accent-800);
}
.btn-outline-secondary {
  border-color: var(--color-divider);
  color: var(--color-text);
}
.btn-outline-secondary:hover {
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
}

.h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.h5 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
}
.fw-bold {
  font-weight: 700;
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-4 {
  margin-top: 1.5rem;
}
.py-4 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding-inline: 1rem;
}