/* Helm — brutalist construction theme.
   Hi-vis safety yellow, caution orange, concrete grey and hard black ink.
   Thick borders, hard offset shadows, square corners, uppercase industrial type.
   Layered on top of Bootstrap: overrides visuals only, keeps all the classes. */

:root {
  --hi-vis: #ffd400;
  --caution: #ff6a00;
  --ink: #111111;
  --concrete: #d7d3c8;
  --concrete-dark: #b9b4a7;
  --steel: #4a4a4a;
  --paper: #f4f2ec;
  --danger: #e4002b;

  /* Bend Bootstrap's own tokens toward the theme. */
  --bs-body-bg: var(--concrete);
  --bs-body-color: var(--ink);
  --bs-body-font-weight: 500;
  --bs-primary: var(--hi-vis);
  --bs-border-color: var(--ink);
}

* {
  border-radius: 0 !important;
}

/* Spinners must stay round to read as spinning. */
.spinner-border,
.spinner-grow {
  border-radius: 50% !important;
}

body,
body.bg-body-tertiary {
  background-color: var(--concrete) !important;
  color: var(--ink);
  /* Subtle blueprint grid on the concrete. */
  background-image:
    linear-gradient(rgba(17, 17, 17, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17, 17, 17, 0.04) 1px, transparent 1px);
  background-size: 28px 28px;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.btn,
.card-header,
.nav-link,
th {
  font-family: "Arial Black", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
}

/* ---- Hazard stripe accent, reusable ---- */
.hazard {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--hi-vis) 0 22px,
    var(--ink) 22px 44px
  );
  border-bottom: 3px solid var(--ink);
}

/* ---- Navbar ---- */
.navbar {
  background-color: var(--hi-vis) !important;
  border-bottom: 4px solid var(--ink) !important;
}
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text {
  color: var(--ink) !important;
}
.navbar .navbar-brand {
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}
.navbar .nav-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 4px;
}
/* Primary action in the bar is yellow-on-yellow otherwise — flip it to ink. */
.navbar .btn-primary,
.navbar .btn-primary:hover,
.navbar .btn-primary:focus {
  background-color: var(--ink) !important;
  color: var(--hi-vis) !important;
}
.navbar-toggler {
  border: 3px solid var(--ink) !important;
}
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23111' stroke-width='3' stroke-linecap='square' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* ---- Cards ---- */
.card {
  background-color: var(--paper);
  border: 3px solid var(--ink) !important;
  box-shadow: 8px 8px 0 var(--ink);
}
.card-header {
  background-color: var(--ink) !important;
  color: #fff !important;
  border-bottom: 3px solid var(--ink) !important;
}
.card-header.bg-warning-subtle {
  background-color: var(--hi-vis) !important;
  color: var(--ink) !important;
}
.card.border-warning {
  border-color: var(--ink) !important;
  box-shadow: 8px 8px 0 var(--caution);
}

/* ---- Buttons ---- */
.btn {
  border: 3px solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 0.04s ease, box-shadow 0.04s ease;
}
.btn:active {
  /* Press it down onto its shadow. */
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}
.btn-primary,
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--hi-vis) !important;
  color: var(--ink) !important;
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark {
  background-color: var(--paper) !important;
  color: var(--ink) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-dark:hover {
  background-color: var(--hi-vis) !important;
  color: var(--ink) !important;
}
.btn-outline-danger,
.btn-danger {
  background-color: var(--paper) !important;
  color: var(--danger) !important;
}
.btn-outline-danger:hover,
.btn-danger:hover {
  background-color: var(--danger) !important;
  color: #fff !important;
}
.btn-link {
  box-shadow: none !important;
  border-color: transparent !important;
  color: var(--ink) !important;
  text-decoration: underline;
  text-decoration-thickness: 3px;
}
.btn-link:active {
  transform: none;
}

/* ---- Forms ---- */
.form-control,
.form-select {
  border: 3px solid var(--ink) !important;
  background-color: #fff !important;
  color: var(--ink) !important;
  font-weight: 600;
}
.form-control:focus,
.form-select:focus {
  box-shadow: 4px 4px 0 var(--hi-vis) !important;
  border-color: var(--ink) !important;
}
.form-label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.form-check-input {
  border: 3px solid var(--ink) !important;
}
.form-check-input:checked {
  background-color: var(--ink) !important;
}

/* ---- Tables ---- */
.table {
  border: 3px solid var(--ink);
  --bs-table-bg: var(--paper);
}
.table > thead th {
  /* Bootstrap paints each cell's own background, so colour the th directly
     (not just the thead) or the dark header is hidden behind a light cell. */
  background-color: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink);
}
.table > tbody td {
  border-color: var(--concrete-dark);
}

/* ---- Lists ---- */
.list-group {
  border: 3px solid var(--ink);
}
.list-group-item {
  background-color: var(--paper);
  border-color: var(--concrete-dark) !important;
  border-left: none;
  border-right: none;
}
.list-group-item-action:hover {
  background-color: var(--hi-vis);
}

/* ---- Alerts / notices ---- */
.alert {
  border: 3px solid var(--ink) !important;
  box-shadow: 5px 5px 0 var(--ink);
  font-weight: 600;
}
.alert-warning {
  background-color: var(--hi-vis) !important;
  color: var(--ink) !important;
}
.alert-danger {
  background-color: var(--caution) !important;
  color: var(--ink) !important;
}

/* ---- Badges ---- */
.badge {
  border: 2px solid var(--ink);
  font-weight: 800;
  letter-spacing: 0.03em;
}
.badge.text-bg-secondary {
  background-color: var(--ink) !important;
  color: var(--hi-vis) !important;
}
.badge.text-bg-warning {
  background-color: var(--hi-vis) !important;
  color: var(--ink) !important;
}
.badge.text-bg-danger {
  background-color: var(--caution) !important;
  color: var(--ink) !important;
}
.badge.text-bg-primary {
  background-color: var(--hi-vis) !important;
  color: var(--ink) !important;
}
.badge.text-bg-light,
.badge.text-bg-info {
  background-color: #fff !important;
  color: var(--ink) !important;
}

/* QR code stays crisp and framed. */
img {
  border-color: var(--ink) !important;
}