/* Logged-in application shell. Public pages retain the existing site header. */
body.cdm-app-shell {
  --cdm-sidebar-width: 244px;
  --cdm-app-header-height: 62px;
  --cdm-content-gutter: 32px;
  --cdm-control-radius: 8px;
  --cdm-app-navy: #173a5d;
  --cdm-app-blue: #176a9d;
  --cdm-app-blue-soft: #eaf4fa;
  --cdm-app-border: #d8e2ea;
  --cdm-sidebar-bg: #14293f;
  --cdm-sidebar-text: #c6d5e3;
  --cdm-sidebar-text-strong: #ffffff;
  --cdm-sidebar-icon: #8ba6bf;
  --cdm-sidebar-hover: rgba(255, 255, 255, .08);
  --cdm-sidebar-active: rgba(255, 255, 255, .14);
  --cdm-sidebar-rule: rgba(255, 255, 255, .12);
  --cdm-app-muted: #647789;
  min-height: 100vh;
  padding-left: var(--cdm-sidebar-width);
  display: flex;
  flex-direction: column;
  background: #f6f8fa;
}

body.cdm-app-shell > #header {
  left: var(--cdm-sidebar-width);
  right: 0;
  height: var(--cdm-app-header-height);
  padding: 0;
  background: #fff;
  border-bottom: 1px solid var(--cdm-app-border);
  box-shadow: none;
  z-index: 996;
}

body.cdm-app-shell > #header.sticked {
  box-shadow: none;
}

body.cdm-app-shell > section:first-of-type {
  width: 100%;
  flex: 1 0 auto;
  padding: 32px 0 40px;
}

body.cdm-app-shell > section:first-of-type > .container {
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  padding-right: var(--cdm-content-gutter);
  padding-left: var(--cdm-content-gutter);
}

/* Most legacy pages leave an empty main element between their real content
   and footer. It used to contribute a 22px band that made page bottoms vary. */
body.cdm-app-shell > #main:not(:has(*)) {
  display: none;
}

body.cdm-app-shell > #footer {
  width: 100%;
  flex: 0 0 auto;
  margin-top: auto;
  border-top: 1px solid var(--cdm-app-border);
}

body.cdm-app-shell > #footer .footer-legal {
  padding: 18px 0;
  background: var(--cdm-sidebar-bg);
}

body.cdm-app-shell > #footer .container {
  width: 100%;
  max-width: none;
  padding-right: var(--cdm-content-gutter);
  padding-left: var(--cdm-content-gutter);
}

body.cdm-app-shell .section-header {
  padding-bottom: 22px;
  text-align: left;
}

body.cdm-app-shell .section-header h2 {
  margin: 0;
  color: var(--cdm-app-navy);
  font-family: var(--font-secondary);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.15;
}

body.cdm-app-shell .section-header p {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--cdm-app-muted);
  line-height: 1.55;
}

body.cdm-app-shell .section-header p:empty {
  display: none;
}

body.cdm-app-shell .about .nav-pills {
  gap: 28px;
}

body.cdm-app-shell .about .nav-pills li + li {
  margin-left: 0;
}

body.cdm-app-shell .about .form-control,
body.cdm-app-shell .about .form-select,
body.cdm-app-shell .about .btn,
body.cdm-app-shell .modal-content {
  border-radius: var(--cdm-control-radius);
}

body.cdm-app-shell .about .form-control,
body.cdm-app-shell .about .form-select {
  border-color: #bdcad4;
}

.cdm-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 998;
  width: var(--cdm-sidebar-width);
  display: flex;
  flex-direction: column;
  background: var(--cdm-sidebar-bg);
  border-right: 1px solid var(--cdm-sidebar-rule);
  color: var(--cdm-sidebar-text);
}

.cdm-sidebar-brand {
  min-height: 96px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--cdm-sidebar-rule);
}

/* The mark is dark line art, so it needs a light ground. Insetting that ground
   and rounding it makes it read as a plate sitting on the rail rather than a
   band cut through it. A reversed logo would remove the need for it entirely. */
.cdm-sidebar-brand a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
}

.cdm-sidebar-brand img {
  display: block;
  width: 156px;
  height: 72px;
}

.cdm-sidebar-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 12px;
  scrollbar-width: thin;
}

.cdm-sidebar-link,
.cdm-sidebar-account,
.cdm-sidebar-logout {
  color: var(--cdm-sidebar-text);
  text-decoration: none;
}

.cdm-sidebar-link {
  min-height: 38px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 7px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cdm-sidebar-link + .cdm-sidebar-link {
  margin-top: 2px;
}

.cdm-sidebar-link i {
  width: 20px;
  flex: 0 0 20px;
  color: var(--cdm-sidebar-icon);
  font-size: 17px;
  text-align: center;
}

.cdm-sidebar-link:hover,
.cdm-sidebar-link:focus-visible {
  color: var(--cdm-sidebar-text-strong);
  background: var(--cdm-sidebar-hover);
}

.cdm-sidebar-link.is-active {
  color: var(--cdm-sidebar-text-strong);
  background: var(--cdm-sidebar-active);
  font-weight: 700;
}

.cdm-sidebar-link.is-active i {
  color: #7cc4f0;
}

.cdm-sidebar-section-label {
  margin: 14px 12px 6px;
  color: var(--cdm-sidebar-icon);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cdm-sidebar-footer {
  flex: 0 0 auto;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--cdm-sidebar-rule);
}

.cdm-sidebar-account {
  margin-top: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 7px;
}

.cdm-sidebar-account:hover,
.cdm-sidebar-account:focus-visible,
.cdm-sidebar-account.is-active {
  color: var(--cdm-sidebar-text-strong);
  background: var(--cdm-sidebar-hover);
}

.cdm-user-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  background: var(--cdm-app-blue);
  font-size: 14px;
  font-weight: 700;
}

.cdm-user-details {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.cdm-user-details strong {
  overflow: hidden;
  color: var(--cdm-sidebar-text-strong);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cdm-user-details small {
  margin-top: 2px;
  color: var(--cdm-sidebar-icon);
  font-size: 12px;
}

.cdm-sidebar-logout {
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--cdm-sidebar-text);
  border-radius: 7px;
  font-size: 14px;
}

.cdm-sidebar-logout:hover,
.cdm-sidebar-logout:focus-visible {
  color: var(--cdm-sidebar-text-strong);
  background: var(--cdm-sidebar-hover);
}

.cdm-app-topbar {
  width: 100%;
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.cdm-app-topbar-title {
  display: none;
  color: var(--cdm-app-navy);
  font-family: var(--font-secondary);
  font-size: 19px;
  font-weight: 600;
}

.cdm-sidebar-toggle,
.cdm-sidebar-scrim {
  display: none;
}

@media (min-width: 1024px) {
  body.cdm-app-shell > #header {
    position: static !important;
    width: 0;
    height: 0;
    min-height: 0;
    overflow: visible;
    border: 0;
    background: transparent;
  }

  body.cdm-app-shell > #header .cdm-app-topbar {
    display: none;
  }
}

body.cdm-app-table .section-header {
  padding-bottom: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-align: left;
}

body.cdm-app-table .section-header h2 {
  margin: 0;
  font-size: 38px;
  line-height: 1.1;
}

body.cdm-app-table #about {
  padding-top: 32px;
  padding-bottom: 40px;
}

body.cdm-app-shell .about .cdm-add-record-button.cdm-add-record-button,
.cdm-add-record-button.cdm-add-record-button,
.referral-new-button {
  min-height: 44px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--cdm-app-blue);
  border-radius: 7px;
  color: #fff;
  background: var(--cdm-app-blue);
  cursor: pointer;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

body.cdm-app-shell .about .cdm-add-record-button i,
body.cdm-app-shell .about .cdm-add-record-button i::before,
body.cdm-app-shell .about .cdm-add-record-button svg,
.cdm-add-record-button i,
.cdm-add-record-button i::before,
.cdm-add-record-button svg {
  color: currentColor !important;
}

.cdm-add-record-button svg {
  fill: currentColor;
  stroke: currentColor;
}

body.cdm-app-shell .about .cdm-add-record-button.cdm-add-record-button:hover,
body.cdm-app-shell .about .cdm-add-record-button.cdm-add-record-button:focus-visible,
.cdm-add-record-button.cdm-add-record-button:hover,
.cdm-add-record-button.cdm-add-record-button:focus-visible,
.referral-new-button:hover,
.referral-new-button:focus-visible {
  color: #fff;
  border-color: #115b88;
  background: #115b88;
}

body.cdm-app-shell .about .cdm-add-record-button.cdm-add-record-button:focus-visible,
.cdm-add-record-button.cdm-add-record-button:focus-visible {
  box-shadow: 0 0 0 3px rgba(23, 98, 153, .2);
  outline: none;
}

body.cdm-app-shell .about .cdm-add-record-button.cdm-add-record-button:disabled,
body.cdm-app-shell .about .cdm-add-record-button.cdm-add-record-button.disabled,
.cdm-add-record-button.cdm-add-record-button:disabled,
.cdm-add-record-button.cdm-add-record-button.disabled {
  background: #8aa5b8;
  border-color: #8aa5b8;
  cursor: not-allowed;
  opacity: .7;
}

body.cdm-app-shell .about .cdm-add-record-button.cdm-add-record-button--compact,
.cdm-add-record-button.cdm-add-record-button--compact {
  min-height: 38px;
  padding: 8px 12px;
}

/* Keep the wide referral index contained within the application workspace. */
body.cdm-app-table #about {
  width: 100%;
  max-width: calc(100vw - var(--cdm-sidebar-width));
  overflow: visible;
}

body.cdm-app-table #about > .container,
body.cdm-app-table #about .row,
body.cdm-app-table #about .col-lg-12,
body.cdm-app-table #about .tab-content,
body.cdm-app-table #about .tab-pane {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.cdm-app-table #about > .container {
  max-width: none;
  padding-right: var(--cdm-content-gutter);
  padding-left: var(--cdm-content-gutter);
}

body.cdm-app-table #about .row {
  margin-right: 0;
  margin-left: 0;
}

body.cdm-app-table #about .col-lg-12 {
  padding-right: 0;
  padding-left: 0;
}

body.cdm-app-table #about .nav-pills {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

body.cdm-referral-summary #about .referral-filter-tabs {
  align-items: center;
  gap: 24px;
  margin: 0;
}

body.cdm-referral-summary #about .section-header {
  padding-bottom: 14px;
}

body.cdm-referral-summary #about .referral-tabs-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  width: 100%;
  border-bottom: 1px solid rgba(var(--color-secondary-rgb), 0.2);
}

body.cdm-referral-summary #about .referral-tabs-row .referral-filter-tabs {
  flex: 1 1 auto;
  min-width: 0;
  border-bottom: 0;
}

body.cdm-referral-summary #about .referral-tabs-row .referral-new-button {
  flex: 0 0 auto;
  min-height: 38px;
  margin-bottom: 5px;
  padding: 8px 14px;
}

body.cdm-referral-summary #about .referral-summary-flash {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 0 14px;
  padding: 8px 12px;
  border: 1px solid #b7dfc5;
  border-radius: 7px;
  color: #216e3a;
  background: #edf8f1;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  opacity: 1;
  transition: opacity .2s ease, transform .2s ease;
}

body.cdm-referral-summary #about .referral-summary-flash.is-hiding {
  opacity: 0;
  transform: translateY(-4px);
}

body.cdm-referral-summary #about .referral-filter-tabs li + li {
  margin-left: 0;
}

body.cdm-referral-summary #about .referral-filter-tabs .nav-link {
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
}

body.cdm-app-table #about .tab-pane.active {
  position: relative;
  padding-top: 18px;
  overflow: visible;
}

body.cdm-app-table #about .tab-pane > br:first-child {
  display: none;
}

body.cdm-app-table #about .dt-container > .dt-layout-row:first-child {
  margin: 0 0 8px;
  padding-left: 0;
  align-items: center;
  justify-content: space-between;
}

/* DataTables gives every layout row .75em vertical margin; drop the table
   row's top margin so the controls sit close to the header they filter. */
body.cdm-app-table #about .dt-container > .dt-layout-row.dt-layout-table {
  margin-top: 0;
}

/* Column headers wrap to three lines at their longest ("LSP Report Due Date"),
   and middle alignment then floats every short label down the tall row. Top
   alignment keeps the labels next to the controls above them. */
body.cdm-app-table #about table.dataTable > tbody > tr > td {
  vertical-align: middle;
}

body.cdm-app-table #about table.dataTable > thead > tr > th {
  padding-top: 8px;
  padding-bottom: 8px;
  vertical-align: middle;
}

/* Rating scale links are long unbroken URLs with no natural break point, so
   they paint outside their cell and run off the right of the table. Give the
   URL a break opportunity; it wraps into the row's spare vertical space
   instead. max-width on a td is ignored under auto table layout, so the cap
   lives on the block wrapper inside the cell. */
body.cdm-app-table #about table.dataTable td.rating-link-cell {
  white-space: normal;
}

body.cdm-app-table #about table.dataTable td.rating-link-cell .rating-link-text {
  display: block;
  max-width: 280px;
  overflow-wrap: anywhere;
}

/* Open and Copy are one control pair, so they share a colour and hover
   treatment rather than inheriting the default link blue and Bootstrap's. */
body.cdm-app-table #about .rating-link-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  white-space: nowrap;
}

body.cdm-app-table #about .rating-link-open,
body.cdm-app-table #about .rating-link-copy {
  padding: 3px 6px;
  border: 0;
  border-radius: 5px;
  color: var(--cdm-app-blue);
  background: transparent;
  font-size: 14px;
  line-height: 1.2;
  text-decoration: none;
}

body.cdm-app-table #about .rating-link-open {
  font-weight: 650;
}

body.cdm-app-table #about .rating-link-copy {
  display: inline-flex;
  align-items: center;
}

body.cdm-app-table #about .rating-link-open:hover,
body.cdm-app-table #about .rating-link-open:focus-visible,
body.cdm-app-table #about .rating-link-copy:hover,
body.cdm-app-table #about .rating-link-copy:focus-visible {
  color: #115b88;
  background: var(--cdm-app-blue-soft);
}

body.cdm-app-table #about .rating-link-open:hover {
  text-decoration: underline;
}

/* Keeps the URL in the table's search index and in the accessibility tree
   without letting it set the column width. */
body.cdm-app-table #about .rating-link-url-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* DataTables reserves 30px on every sortable header for the sort arrow, which
   across eleven columns is a meaningful share of the table's width. */
body.cdm-app-table #about table.dataTable > thead > tr > th.dt-orderable-asc,
body.cdm-app-table #about table.dataTable > thead > tr > th.dt-orderable-desc,
body.cdm-app-table #about table.dataTable > thead > tr > th.dt-ordering-asc,
body.cdm-app-table #about table.dataTable > thead > tr > th.dt-ordering-desc {
  padding-right: 20px;
}

body.cdm-app-table #about table.dataTable > thead > tr > th span.dt-column-order {
  right: 6px;
}

body.cdm-app-table #about .dt-container {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

body.cdm-app-table #about .dt-layout-row,
body.cdm-app-table #about .dt-layout-cell {
  min-width: 0;
  max-width: 100%;
}

body.cdm-app-table #about .dt-layout-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* The referral index carries thirteen columns and needs a floor to stay
   legible; it scrolls inside its container rather than cramming. Other table
   pages size to their own content, so this is deliberately not shared. */
body.cdm-referral-summary #about table.dataTable {
  min-width: 1500px;
}

@media (max-width: 1023px) {
  body.cdm-app-shell {
    padding-left: 0;
  }

  body.cdm-app-shell > #header {
    left: 0;
  }

  body.cdm-app-table #about {
    max-width: 100vw;
  }

  body.cdm-app-shell > section:first-of-type,
  body.cdm-app-shell > main:first-of-type {
    padding-top: calc(var(--cdm-app-header-height) + 24px);
  }

  .cdm-sidebar {
    width: min(86vw, 280px);
    transform: translateX(-102%);
    transition: transform 0.2s ease;
    box-shadow: 8px 0 30px rgba(24, 50, 70, 0.18);
  }

  .cdm-sidebar-toggle {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cdm-app-border);
    border-radius: 7px;
    color: var(--cdm-app-navy);
    background: #fff;
    font-size: 23px;
  }

  .cdm-app-topbar {
    padding: 0 18px;
  }

  .cdm-app-topbar-title {
    display: block;
  }

  .cdm-sidebar-scrim {
    position: fixed;
    inset: 0;
    z-index: 997;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(17, 35, 51, 0.42);
  }

  body.cdm-sidebar-open {
    overflow: hidden;
  }

  body.cdm-sidebar-open .cdm-sidebar {
    transform: translateX(0);
  }

  body.cdm-sidebar-open .cdm-sidebar-scrim {
    display: block;
  }
}

@media (max-width: 767px) {
  body.cdm-app-shell {
    --cdm-content-gutter: 22px;
  }

  body.cdm-app-table #about {
    padding-top: calc(var(--cdm-app-header-height) + 24px);
  }

  body.cdm-app-table .section-header {
    align-items: flex-start;
  }

  body.cdm-referral-summary #about .referral-filter-tabs {
    gap: 20px;
  }
}

@media (max-width: 575px) {
  .cdm-app-topbar-title {
    font-size: 17px;
  }

  body.cdm-app-table .section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .cdm-add-record-button,
  .referral-new-button {
    justify-content: center;
  }

  body.cdm-referral-summary #about .referral-tabs-row {
    align-items: stretch;
    flex-direction: column-reverse;
    gap: 10px;
  }

  body.cdm-referral-summary #about .referral-tabs-row .referral-new-button {
    align-self: flex-start;
  }
}

@media print {
  body.cdm-app-shell {
    padding-left: 0;
    background: #fff;
  }

  body.cdm-app-shell > #header,
  .cdm-sidebar,
  .cdm-sidebar-scrim {
    display: none !important;
  }

}

/* Pending list: an approved account stays inactive until its owner sets a
   password, so both states appear here and need telling apart. */
.user-request-state {
  margin-top: 3px;
  color: var(--cdm-app-muted);
  font-size: 12px;
  font-weight: 600;
}

/* One line, not two. Two stacked lines tripled the row height, which left the
   role and district controls centered in a large empty band and reading as
   misaligned even though they were centered. */
.user-requested-role {
  color: var(--cdm-app-muted);
  font-weight: 400;
}

/* File Log. The server information table was full width with right-aligned
   labels, which stranded them in the middle of the page. */
body.cdm-app-table #about .file-log-server-info {
  width: auto;
  min-width: 0;
}

body.cdm-app-table #about .file-log-label {
  padding-right: 24px;
  text-align: left;
  white-space: nowrap;
}