/* Small, deliberate overrides. Bootstrap does the heavy lifting. */
:root { --mhg-navy: #16283f; --mhg-accent: #b48b3c; }

body { background-color: #f5f6f8; }

.navbar-mhg { background-color: var(--mhg-navy); }
.navbar-mhg .navbar-brand,
.navbar-mhg .nav-link { color: #ffffff; }
.navbar-mhg .nav-link.active { color: var(--mhg-accent); font-weight: 600; }

.portal-badge { background-color: var(--mhg-accent); color: #16283f; }

.card { border: 1px solid #e3e6ea; }
.card-header { background-color: #ffffff; font-weight: 600; }

.stat-card .display-6 { font-weight: 600; }

.message-row { max-width: 42rem; }
.message-outbound { margin-left: auto; background-color: #e8f0fe; }
.message-inbound { background-color: #ffffff; }
.message-note { background-color: #fff8e1; border-left: 4px solid var(--mhg-accent); }

.table-responsive { -webkit-overflow-scrolling: touch; }

@media (max-width: 576px) {
  .btn-mobile-block { width: 100%; }
}

/* Utility classes replacing inline style attributes.
   The Content-Security-Policy is style-src 'self' with no 'unsafe-inline', so a
   style="..." attribute in markup is blocked by the browser. Anything dynamic
   therefore has to be expressed as a class. */
.scroll-panel-sm { max-height: 9rem; overflow-y: auto; }
.scroll-panel-lg { max-height: 26rem; overflow-y: auto; }
.truncate-wide { max-width: 42rem; }
.col-select { width: 2.5rem; }

/* Profile completeness, in 5% steps (see PortalDashboardView.completeness_step). */
.pw-0   { width: 0; }
.pw-5   { width: 5%; }
.pw-10  { width: 10%; }
.pw-15  { width: 15%; }
.pw-20  { width: 20%; }
.pw-25  { width: 25%; }
.pw-30  { width: 30%; }
.pw-35  { width: 35%; }
.pw-40  { width: 40%; }
.pw-45  { width: 45%; }
.pw-50  { width: 50%; }
.pw-55  { width: 55%; }
.pw-60  { width: 60%; }
.pw-65  { width: 65%; }
.pw-70  { width: 70%; }
.pw-75  { width: 75%; }
.pw-80  { width: 80%; }
.pw-85  { width: 85%; }
.pw-90  { width: 90%; }
.pw-95  { width: 95%; }
.pw-100 { width: 100%; }

/* Choice groups rendered by {% check_group %}: flow long lists into columns so
   a full capability list stays scannable. */
.check-group .form-check { break-inside: avoid; }
@media (min-width: 576px) { .checkbox-list-columns { columns: 2; } }



/* Contractor photos. Fixed boxes so a portrait or a landscape shot both sit
   sensibly without the layout jumping. */
.contractor-photo { width: 96px; height: 96px; object-fit: cover; }
.contractor-photo-sm { width: 56px; height: 56px; object-fit: cover; }
.contractor-photo-empty { width: 96px; height: 96px; border: 1px dashed #c8ccd2; background: #fff; }

/* ---------------------------------------------------------------------------
   Response heat map (project page)

   A grid of one tile per contractor, RAG-coloured by where they got to. With a
   hundred contractors a table is unreadable; this is meant to be scanned in a
   second and clicked into.

   Colour is deliberately not the only channel — each state also has a glyph —
   because red/green is precisely the pair a colour-blind operator cannot
   separate. Contrast is kept above 4.5:1 against the tile text.
   --------------------------------------------------------------------------- */
.rag-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rag-tile {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, .12);
  transition: transform .08s ease-in-out;
}
.rag-tile:hover,
.rag-tile:focus-visible {
  transform: scale(1.12);
  z-index: 2;
  outline: 2px solid #16283f;
  outline-offset: 1px;
}

.rag-initials { font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.rag-glyph {
  position: absolute;
  top: 1px;
  right: 3px;
  font-size: .6rem;
  line-height: 1;
  opacity: .85;
}

/* Selected and assigned are internal decisions layered on top of a response. */
.rag-selected { box-shadow: inset 0 0 0 2px #16283f; }
.rag-assigned { box-shadow: inset 0 0 0 3px #b48b3c; }

.rag-green      { background-color: #198754; color: #fff; }
.rag-amber      { background-color: #ffc107; color: #3d2f00; }
.rag-amber-dark { background-color: #fd7e14; color: #2b1400; }
.rag-red        { background-color: #dc3545; color: #fff; }
.rag-failed     { background-color: #6c1d24; color: #fff; }
.rag-grey       { background-color: #cfd4da; color: #33393f; }
.rag-empty      { background-color: #fff; color: #6c757d; border-style: dashed; }

.rag-legend { display: flex; flex-wrap: wrap; gap: .35rem .75rem; }
.rag-legend-item {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .8125rem;
  text-decoration: none;
  color: inherit;
  padding: .15rem .4rem;
  border-radius: 4px;
  border: 1px solid transparent;
}
.rag-legend-item:hover { background-color: #eef0f3; }
.rag-legend-active { border-color: #16283f; background-color: #eef0f3; font-weight: 600; }
.rag-legend-zero { opacity: .45; }

.rag-swatch {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .6rem;
  border: 1px solid rgba(0, 0, 0, .12);
}

@media (max-width: 576px) {
  .rag-tile { width: 38px; height: 38px; }
  .rag-initials { font-size: .7rem; }
}

/* Searchable choice pickers (capabilities, contractor groups). Sized so a long
   list scrolls inside the card rather than pushing the page around. */
.choice-picker-search { max-width: 16rem; }
.choice-picker-list { max-height: 16rem; overflow-y: auto; padding-right: .25rem; }
.choice-picker-columns { columns: 2; }
@media (max-width: 767px) { .choice-picker-columns { columns: 1; } }
.choice-group { break-inside: avoid; margin-bottom: .5rem; }
.choice-group-heading {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: .15rem;
}
.choice-picker .form-check { break-inside: avoid; }

.portal-badge { background-color: #e7edf5; color: #16283f; border: 1px solid #ccd8e6; }