/*
 * DGS integration layer for the official HEARTS360 preflight.css/template.css.
 * Keep shared typography, spacing, colours, cards and responsive grid in the
 * upstream styles; this file only covers dynamic/public-dashboard components.
 */

button,
input,
select {
  font: inherit;
}

.service-region .hover-button {
  cursor: default;
  white-space: nowrap;
}

.banner .banner-body > h1 {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  line-height: 1.2;
}

.banner .banner-body > h1 .logo {
  padding: 0;
}

.banner .banner-body > h1 .logo svg {
  display: block;
  width: 22px;
  height: 22px;
}

.facility-navigation {
  position: relative;
  z-index: 30;
}

.facility-navigation > ul {
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
}

.facility-navigation .nav-filter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(620px, 100%);
  padding: 7px 0 5px;
}

.nav-filter-item > label {
  flex: 0 0 auto;
  color: #222;
  font-size: .85rem;
  font-weight: 700;
  white-space: nowrap;
}

.public-data-label {
  color: #777;
  font-size: .78rem;
  white-space: nowrap;
}

.facility-select-wrap {
  position: relative;
  width: min(420px, 100%);
}

.facility-select-wrap > .select2-container {
  display: block;
  width: 100%;
  position: relative;
}

.facility-select-wrap .select2-selection--single {
  height: 36px;
  border: 1px solid #aaa;
  border-radius: 4px;
  color: #222;
  background: #fff;
}

.facility-select-wrap .select2-selection--single .select2-selection__rendered {
  padding-right: 36px;
  padding-left: 11px;
  color: #222;
  line-height: 34px;
}

.facility-select-wrap .select2-selection--single .select2-selection__arrow {
  width: 32px;
  height: 34px;
}

.facility-select-wrap .select2-container--open .select2-selection--single,
.facility-select-wrap .select2-selection--single:focus {
  border-color: #0075eb;
  outline: 2px solid rgba(0, 117, 235, .25);
  outline-offset: 1px;
}

.facility-select-wrap .select2-container--disabled .select2-selection--single {
  color: #777;
  background: #eee;
  cursor: wait;
}

.facility-select-wrap .select2-dropdown {
  top: 100%;
  width: 100%;
  z-index: 40;
  margin: 0;
  border: 1px solid #aaa;
  border-radius: 4px;
  color: #222;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.facility-select-wrap .select2-search--dropdown {
  padding: 7px;
}

.facility-select-wrap .select2-search__field {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
}

.facility-select-wrap .select2-search__field:focus {
  border-color: #0075eb;
  outline: 2px solid rgba(0, 117, 235, .2);
}

.facility-select-wrap .select2-results__options {
  display: block;
  max-width: none;
  max-height: 300px;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
}

.facility-select-wrap .select2-results__option {
  display: block;
  padding: 7px 11px;
}

.facility-select-wrap .select2-results__option--highlighted[aria-selected],
.facility-select-wrap .select2-results__option[aria-selected="true"] {
  color: #fff;
  background: #0075eb;
}

main.main {
  padding-bottom: 64px;
}

.header {
  margin-bottom: 4px;
}

.header h1 {
  margin: 0;
}

.date-updated {
  color: #666;
}

.status-message {
  padding: 10px 12px;
  border: 1px solid rgba(255, 51, 85, .35);
  border-radius: 6px;
  color: #a30021;
  background: rgba(255, 51, 85, .08);
}

.card {
  overflow: visible;
}

.card .heading {
  min-width: 0;
}

.card .heading h3 {
  margin-top: 0;
}

.card .heading > p {
  color: #666;
  font-size: .9rem;
}

.card .large-num {
  margin: 12px 0 0;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.15;
}

.card .detail {
  color: #666;
  font-size: .9rem;
}

button.info {
  padding: 0;
  border: 0;
  font-family: var(--system-ui);
}

.info .info-hover-text {
  z-index: 60;
}

.info .info-hover-text.info-wide {
  width: 310px;
}

.info:hover .info-hover-text,
.info:focus .info-hover-text,
.info:focus-visible .info-hover-text {
  display: flex;
  opacity: 1;
}

.info:focus-visible {
  outline: 3px solid rgba(0, 117, 235, .45);
  outline-offset: 2px;
}

.coverage {
  align-items: flex-end;
  min-height: 312px;
  margin-top: 12px;
  text-align: center;
}

.coverage-column {
  min-width: 0;
}

.coverage-column:last-child {
  border-right: 0;
}

.coverage-column > p {
  margin: 3px 0;
}

progress.coverage-bar {
  display: block;
  width: 58px;
  height: 230px;
  margin: 0 auto 7px;
  border: 0;
  border-radius: 3px 3px 0 0;
  appearance: none;
  direction: rtl;
  writing-mode: vertical-rl;
  overflow: hidden;
  background: #dae0e1 !important;
}

progress.coverage-bar::-webkit-progress-bar {
  background: #dae0e1;
}

progress.coverage-bar.registrations-bg::-webkit-progress-value {
  background: #007ee4;
}

progress.coverage-bar.under-care-bg::-webkit-progress-value {
  background: #b51bdc;
}

progress.coverage-bar.bp-controlled-bg::-webkit-progress-value {
  background: #3bb231;
}

progress.coverage-bar.registrations-bg::-moz-progress-bar { background: #007ee4; }
progress.coverage-bar.under-care-bg::-moz-progress-bar { background: #b51bdc; }
progress.coverage-bar.bp-controlled-bg::-moz-progress-bar { background: #3bb231; }

.heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.screening {
  color: #34aea0;
}

.table-container {
  min-width: 0;
  overflow-x: auto;
}

.table-container th.number,
.table-container td:not(:first-child) {
  text-align: right;
}

.demographic-table {
  min-width: 680px;
}

.demographic-cell {
  position: relative;
  min-width: 170px;
  overflow: hidden;
}

.demographic-bar {
  position: absolute;
  inset: 5px;
  z-index: 0;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border: 0;
  appearance: none;
  opacity: .55;
}

.demographic-bar::-webkit-progress-bar {
  background: transparent;
}

.demographic-bar.female::-webkit-progress-value {
  border-radius: 3px;
  background: thistle;
}

.demographic-bar.female::-moz-progress-bar {
  border-radius: 3px;
  background: thistle;
}

.demographic-bar.male::-webkit-progress-value {
  border-radius: 3px;
  background: lightsteelblue;
}

.demographic-bar.male::-moz-progress-bar {
  border-radius: 3px;
  background: lightsteelblue;
}

.demographic-value {
  position: relative;
  z-index: 1;
  color: rgba(0, 0, 0, .65);
}

.cohort-pending {
  border: 2px solid #f1f1f1;
  color: #777;
  text-shadow: none !important;
}

.cohort-height-0 { height: 0%; }
.cohort-height-1 { height: 1%; }
.cohort-height-2 { height: 2%; }
.cohort-height-3 { height: 3%; }
.cohort-height-4 { height: 4%; }
.cohort-height-5 { height: 5%; }
.cohort-height-6 { height: 6%; }
.cohort-height-7 { height: 7%; }
.cohort-height-8 { height: 8%; }
.cohort-height-9 { height: 9%; }
.cohort-height-10 { height: 10%; }
.cohort-height-11 { height: 11%; }
.cohort-height-12 { height: 12%; }
.cohort-height-13 { height: 13%; }
.cohort-height-14 { height: 14%; }
.cohort-height-15 { height: 15%; }
.cohort-height-16 { height: 16%; }
.cohort-height-17 { height: 17%; }
.cohort-height-18 { height: 18%; }
.cohort-height-19 { height: 19%; }
.cohort-height-20 { height: 20%; }
.cohort-height-21 { height: 21%; }
.cohort-height-22 { height: 22%; }
.cohort-height-23 { height: 23%; }
.cohort-height-24 { height: 24%; }
.cohort-height-25 { height: 25%; }
.cohort-height-26 { height: 26%; }
.cohort-height-27 { height: 27%; }
.cohort-height-28 { height: 28%; }
.cohort-height-29 { height: 29%; }
.cohort-height-30 { height: 30%; }
.cohort-height-31 { height: 31%; }
.cohort-height-32 { height: 32%; }
.cohort-height-33 { height: 33%; }
.cohort-height-34 { height: 34%; }
.cohort-height-35 { height: 35%; }
.cohort-height-36 { height: 36%; }
.cohort-height-37 { height: 37%; }
.cohort-height-38 { height: 38%; }
.cohort-height-39 { height: 39%; }
.cohort-height-40 { height: 40%; }
.cohort-height-41 { height: 41%; }
.cohort-height-42 { height: 42%; }
.cohort-height-43 { height: 43%; }
.cohort-height-44 { height: 44%; }
.cohort-height-45 { height: 45%; }
.cohort-height-46 { height: 46%; }
.cohort-height-47 { height: 47%; }
.cohort-height-48 { height: 48%; }
.cohort-height-49 { height: 49%; }
.cohort-height-50 { height: 50%; }
.cohort-height-51 { height: 51%; }
.cohort-height-52 { height: 52%; }
.cohort-height-53 { height: 53%; }
.cohort-height-54 { height: 54%; }
.cohort-height-55 { height: 55%; }
.cohort-height-56 { height: 56%; }
.cohort-height-57 { height: 57%; }
.cohort-height-58 { height: 58%; }
.cohort-height-59 { height: 59%; }
.cohort-height-60 { height: 60%; }
.cohort-height-61 { height: 61%; }
.cohort-height-62 { height: 62%; }
.cohort-height-63 { height: 63%; }
.cohort-height-64 { height: 64%; }
.cohort-height-65 { height: 65%; }
.cohort-height-66 { height: 66%; }
.cohort-height-67 { height: 67%; }
.cohort-height-68 { height: 68%; }
.cohort-height-69 { height: 69%; }
.cohort-height-70 { height: 70%; }
.cohort-height-71 { height: 71%; }
.cohort-height-72 { height: 72%; }
.cohort-height-73 { height: 73%; }
.cohort-height-74 { height: 74%; }
.cohort-height-75 { height: 75%; }
.cohort-height-76 { height: 76%; }
.cohort-height-77 { height: 77%; }
.cohort-height-78 { height: 78%; }
.cohort-height-79 { height: 79%; }
.cohort-height-80 { height: 80%; }
.cohort-height-81 { height: 81%; }
.cohort-height-82 { height: 82%; }
.cohort-height-83 { height: 83%; }
.cohort-height-84 { height: 84%; }
.cohort-height-85 { height: 85%; }
.cohort-height-86 { height: 86%; }
.cohort-height-87 { height: 87%; }
.cohort-height-88 { height: 88%; }
.cohort-height-89 { height: 89%; }
.cohort-height-90 { height: 90%; }
.cohort-height-91 { height: 91%; }
.cohort-height-92 { height: 92%; }
.cohort-height-93 { height: 93%; }
.cohort-height-94 { height: 94%; }
.cohort-height-95 { height: 95%; }
.cohort-height-96 { height: 96%; }
.cohort-height-97 { height: 97%; }
.cohort-height-98 { height: 98%; }
.cohort-height-99 { height: 99%; }
.cohort-height-100 { height: 100%; }

.noscript {
  margin: 0;
  padding: 12px;
  color: #fff;
  background: #a30021;
  text-align: center;
}

@media screen and (max-width: 879px) {
  .facility-navigation > ul {
    display: block;
    padding-block: 6px;
  }

  .facility-navigation .nav-filter-item {
    width: 100%;
  }

  .public-data-label {
    display: none;
  }

}

@media screen and (max-width: 659px) {
  .banner .banner-body {
    grid-template-columns: 1fr;
  }

  .service-region {
    grid-column: 1;
    max-width: 100%;
  }

  .service-region .hover-button {
    white-space: normal;
  }

  .banner .banner-body > h1 {
    justify-content: center;
  }

  .facility-navigation .nav-filter-item {
    display: block;
  }

  .nav-filter-item > label {
    display: block;
    margin-bottom: 5px;
  }

  .facility-select-wrap {
    width: 100%;
  }

  .heading-row {
    display: block;
  }

  progress.coverage-bar {
    width: 42px;
    height: 190px;
  }

  .info .info-hover-text,
  .info .info-hover-text.info-wide {
    right: -8px;
    width: min(280px, calc(100vw - 48px));
  }

  .info .info-hover-text::after {
    right: 14px;
    top: -6px;
    transform: none;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #222;
    border-left: 6px solid transparent;
    border-top: 0;
  }
}