@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src:
    url("../vendor/font/roboto/Roboto-Light.woff2") format("woff2"),
    url("../vendor/font/roboto/Roboto-Light.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url("../vendor/font/roboto/Roboto-Regular.woff2") format("woff2"),
    url("../vendor/font/roboto/Roboto-Regular.woff") format("woff");
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url("../vendor/font/roboto/Roboto-Bold.woff2") format("woff2"),
    url("../vendor/font/roboto/Roboto-Bold.woff") format("woff");
}

body {
  color: #212529;
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 300;
}

/*
 * Masthead + footer match beaufortcountysc.gov, which renders its navbar and
 * footer with MDB's "special-color-dark" (#263238) on Roboto.
 */
.site-masthead {
  background-color: #263238;
  color: #fff;
}

.masthead-inner {
  align-items: center;
  display: flex;
  gap: 0.55rem;
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.county-seal {
  flex: 0 0 auto;
  height: 32px;
  width: auto;
}

.masthead-eyebrow {
  color: #cfd8dc;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pushed to the far end of the masthead flex row, away from the seal. */
.masthead-back {
  color: #cfd8dc;
  font-size: 0.8rem;
  margin-left: auto;
  text-decoration: underline;
  white-space: nowrap;
}

.masthead-back:hover,
.masthead-back:focus {
  color: #fff;
}

/* Detention-center banner band: the county's official DC masthead graphic. */
.dc-banner-band {
  background-color: #fff;
  border-bottom: 3px solid #263238;
}

.dc-banner-inner {
  padding-bottom: 1rem;
  padding-top: 1rem;
  text-align: center;
}

.dc-banner-heading {
  margin: 0;
}

.dc-banner {
  height: auto;
  max-width: 100%;
}

.dc-subtitle {
  color: #263238;
  display: block;
  font-size: 1.15rem;
  font-weight: 400;
  margin-top: 0.35rem;
}

.savin-link {
  margin-top: 0.75rem;
}

/* One link that reads clearly as a button: the SC SAVIN logo above a green
   action label. Hover/focus lifts the whole card. */
.savin-link-wrap {
  align-items: stretch;
  border: 1px solid #ced4da;
  border-radius: 0.4rem;
  color: inherit;
  display: inline-flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 240px;
  padding: 0.5rem;
  text-decoration: none;
}

.savin-link-wrap:hover,
.savin-link-wrap:focus {
  border-color: #1b5e20;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.savin-link-wrap:focus {
  outline: 2px solid #1b5e20;
  outline-offset: 2px;
}

.savin-logo {
  border-radius: 0.25rem;
  display: block;
  height: auto;
  max-width: 100%;
}

.savin-button {
  background-color: #2e7d32;
  border-radius: 0.25rem;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 400;
  padding: 0.4rem 0.8rem;
  text-align: center;
}

.savin-link-wrap:hover .savin-button,
.savin-link-wrap:focus .savin-button {
  background-color: #1b5e20;
}

.site-footer {
  background-color: #263238;
  color: #cfd8dc;
  font-size: 0.85rem;
  margin-top: 2.5rem;
  padding: 1.25rem 0;
}

.site-footer-note {
  color: #90a4ae;
}

/* Mirrors the copyright strip on the county's main site. */
.site-footer-copyright {
  border-top: 1px solid #37474f;
  color: #90a4ae;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
}

.site-footer-copyright a {
  color: #cfd8dc;
  text-decoration: underline;
}

.site-footer-copyright a:hover,
.site-footer-copyright a:focus {
  color: #fff;
}

/*
 * Skip link: the roster switcher sits between the banner and the table on every
 * view, so keyboard users need a way past it (WCAG 2.4.1). Off-screen until
 * focused, then pinned to the top-left.
 */
.skip-link {
  background-color: #0d47a1;
  border-radius: 0 0 0.25rem 0;
  color: #fff;
  left: -9999px;
  padding: 0.6rem 1rem;
  position: absolute;
  top: 0;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
  color: #fff;
  outline: 2px solid #fff;
  outline-offset: -4px;
  text-decoration: underline;
}

/*
 * Roster switcher: one segmented bar instead of six wrapped full-length links.
 * The county's own wording is too long to fit six abreast, so each segment
 * shows a short label and the <h2> below restates the full label. Segments
 * share a single outer border, so the group reads as one control.
 */
.roster-switch {
  margin-bottom: 1.25rem;
}

.roster-switch-list {
  /* #78909c clears the 3:1 non-text contrast floor for a control boundary
     (3.35:1 on white); the lighter greys Bootstrap ships are ~1.5:1. */
  border: 1px solid #78909c;
  border-radius: 0.35rem;
  display: inline-flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.roster-switch-item {
  display: flex;
}

.roster-switch-item + .roster-switch-item {
  border-left: 1px solid #78909c;
}

.roster-switch-link {
  color: #263238;
  display: block;
  /* Fill the segment so the active fill spans the whole row once the bar
     stacks. The list is inline-flex, so there is no slack to grow into while
     the segments are still side by side. */
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.5rem 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}

.roster-switch-item:first-child .roster-switch-link {
  border-radius: 0.3rem 0 0 0.3rem;
}

.roster-switch-item:last-child .roster-switch-link {
  border-radius: 0 0.3rem 0.3rem 0;
}

.roster-switch-link:hover {
  /* Dark ink on the hover fill, not blue: #1a6fd6 on #eceff1 is only 4.2:1. */
  background-color: #eceff1;
  color: #263238;
  text-decoration: underline;
}

.roster-switch-link-current,
.roster-switch-link-current:hover {
  /* #1a6fd6 (not the county primary #4285f4) so #fff label text clears WCAG AA
     contrast (4.9:1); #4285f4 with white is only 3.6:1. */
  background-color: #1a6fd6;
  color: #fff;
}

/*
 * Bootstrap 4 replaces the native focus ring on form controls and pagination
 * with a 25%-opacity box-shadow. A box-shadow is not rendered in forced-colors
 * mode, which leaves those controls with no focus indicator at all, so put a
 * real outline back everywhere (WCAG 2.4.7). outline-offset keeps the ring on
 * the page background rather than on a filled segment, where a dark-on-blue
 * ring would be hard to see.
 *
 * .dt-column-order is the sort control DataTables 3 puts inside each sortable
 * th; it carries the role="button" and tabindex, so it is what receives focus —
 * the th itself no longer does.
 */
.roster-switch-link:focus,
.roster-scroll:focus,
.dt-container .dt-column-order:focus,
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus,
.dt-container .page-link:focus {
  outline: 2px solid #0d47a1;
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

@media (max-width: 767.98px) {
  /* Stacked full-width segments below the breakpoint where the bar fits. */
  .roster-switch-list {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .roster-switch-item + .roster-switch-item {
    border-left: 0;
    border-top: 1px solid #78909c;
  }

  .roster-switch-link {
    white-space: normal;
  }

  .roster-switch-item:first-child .roster-switch-link {
    border-radius: 0.3rem 0.3rem 0 0;
  }

  .roster-switch-item:last-child .roster-switch-link {
    border-radius: 0 0 0.3rem 0.3rem;
  }
}

.roster-heading {
  color: #263238;
  font-size: 1.35rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

.roster-meta {
  color: #455a64;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

/* The count line sits directly above the hint line, so it keeps only enough
   bottom margin to separate the two; the hint carries the gap to the table. */
.roster-meta-counts {
  margin-bottom: 0.15rem;
}

.roster-meta-updated {
  white-space: nowrap;
}

.roster-meta-glyph {
  font-weight: 700;
}

@media (max-width: 575.98px) {
  .masthead-eyebrow {
    font-size: 0.72rem;
  }

  .dc-subtitle {
    font-size: 1rem;
  }

  .roster-heading {
    font-size: 1.15rem;
  }
}

.table {
  width: 100%;
}

.table th {
  font-size: 0.9rem;
  font-weight: 400;
}

.table td {
  font-size: 0.9rem;
  font-weight: 300;
  vertical-align: middle;
}

.table-hover tbody tr {
  transition: background-color 0.15s ease-in-out;
}

.clickable-row {
  cursor: pointer;
}

/*
 * #0d47a1 rather than the county primary #4285f4: the glyph is 16px bold, so it
 * needs 4.5:1, and #4285f4 on white is 3.6:1. #0d47a1 also stays above 4.5:1
 * against the .table-hover row-hover tint that slides in behind it (7.3:1),
 * which #1a6fd6 would not (4.1:1).
 */
.details-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid #0d47a1;
  border-radius: 0.2rem;
  color: #0d47a1;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 700;
  height: 2rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  width: 2rem;
}

.details-toggle:hover {
  background: #0d47a1;
  color: #fff;
}

/*
 * Keep a real outline on focus (in addition to the fill) so the keyboard focus
 * position stays visible in Windows High Contrast / forced-colors mode, where
 * author background colors are overridden.
 */
.details-toggle:focus {
  background: #0d47a1;
  color: #fff;
  outline: 2px solid #0d47a1;
  outline-offset: 2px;
}

.arrest-section + .arrest-section {
  border-top: 1px solid #dee2e6;
  margin-top: 1rem;
  padding-top: 0.75rem;
}

/*
 * flow-root, not overflow:auto, to contain the floated image panel. overflow
 * also turns the panel into a scroll container, and a scroll container that is
 * not focusable is unreachable by keyboard (WCAG 2.1.1).
 *
 * The details row is a cell of the roster table, so it inherits the table's
 * full width — which is wider than the scroll window. Left alone, the
 * right-floated mugshot and SAVIN link land past the right edge and can only be
 * seen by scrolling sideways. app.js caps the panel at the scroll window's
 * measured width; a CSS viewport cap cannot do it, because .container stops at a
 * breakpoint width rather than tracking 100vw.
 */
.inmate-details {
  display: flow-root;
  min-height: 12rem;
}

.inmate-details p {
  margin-bottom: 0.5rem;
}

.inmate-image-panel {
  float: right;
  margin: 0 0 1rem 1rem;
  text-align: center;
  width: 240px;
}

/* Mugshots are ~4:3 landscape; show them at their natural aspect ratio rather
   than cropping to a portrait box. */
.inmate-image {
  border: 1px solid #ced4da;
  display: block;
  height: auto;
  width: 100%;
}

.image-placeholder {
  align-items: center;
  background: #f1f3f5;
  border: 1px solid #ced4da;
  color: #5f6368;
  display: flex;
  font-size: 0.85rem;
  height: 180px;
  justify-content: center;
  padding: 0.75rem;
  width: 100%;
}

.charge-table {
  clear: both;
}

/*
 * Bootstrap 4 outlines form controls in #ced4da, which is 1.5:1 against white —
 * well under the 3:1 that a control boundary needs (WCAG 1.4.11). #6c757d is
 * 4.7:1.
 */
.dt-container .dt-search input,
.dt-container .dt-length select {
  border-color: #6c757d;
}

/*
 * Bootstrap 4 paginates in #007bff, which is 3.98:1 against white and fails the
 * 4.5:1 floor for body-size text both as a link colour and as the active fill.
 * #0d47a1 also survives the #e9ecef hover tint (7.3:1).
 */
.dt-container .page-link {
  color: #0d47a1;
}

.dt-container .page-item.active .page-link {
  background-color: #1a6fd6;
  border-color: #1a6fd6;
  color: #fff;
}

/*
 * DataTables lays its controls out in Bootstrap .row elements nested inside
 * .table-responsive. The rows' negative gutters push past the scroll container
 * and inset the table relative to the page heading. Flatten them so the table
 * and its controls line up with the rest of the column.
 */
.table-responsive .dt-container > .row {
  margin-left: 0;
  margin-right: 0;
}

.table-responsive .dt-container > .row > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/*
 * Below 768px the DataTables Bootstrap integration centres the length and
 * search controls, and Bootstrap's col-12 gives each one a full-width row of
 * its own. The result is two centred controls stacked above a left-aligned
 * heading and table. Align them left instead, so the whole column shares one
 * edge.
 */
@media screen and (max-width: 767.98px) {
  div.dt-container div.dt-length,
  div.dt-container div.dt-search {
    text-align: left;
  }

  /*
   * Let the two controls share a line when they fit and wrap when they do not,
   * rather than always taking a row each. Scoped with :has() to the row holding
   * the length control, so the info/paging row below the table keeps its own
   * layout. A browser without :has() support simply drops this rule and gets
   * the left-aligned stack above, which is still correct.
   */
  .dt-container .dt-layout-row:has(.dt-length) {
    align-items: center;
    column-gap: 1rem;
    display: flex;
    flex-wrap: wrap;
  }

  .dt-container .dt-layout-row:has(.dt-length) > .dt-layout-cell {
    flex: 0 1 auto;
    max-width: 100%;
    width: auto;
  }

  /* Keep the input inside the viewport when it shares the line. */
  .dt-container div.dt-search input {
    max-width: 100%;
  }
}

/*
 * The trailing "Search Details" column is a search index for DataTables, not
 * content. DataTables detaches it on init (columnDefs visible:false); hiding it
 * up front keeps a wall of concatenated text from flashing into view first, and
 * keeps it out of the no-JS rendering. Once DataTables has removed it there are
 * only 12 columns, so this selector then matches nothing.
 */
#inmateTable thead th:nth-child(13),
#inmateTable tbody td:nth-child(13) {
  display: none;
}

@media (max-width: 575.98px) {
  .inmate-image-panel {
    float: none;
    margin: 0 0 1rem;
  }
}