.internal_email.unread td {
  font-weight: bold;
}

.sortable-column {
  color: #337ab7;
}

.good-width {
  min-width: 500px;
}

.typeahead__query,
.typeahead__container {
  font-size: 1.5rem;
}

.form-group.extended,
.form-group.extended .input-group {
  width: 100%;
}

.form-group.extended .input-group-addon {
  width: 20%;
}

.form-group.extended .form-control {
  width: 75%;
}

div.dt-buttons {
  margin-top: 40px;
  clear: left;
}

.dt-button {
  color: #fff;
  background-color: #337ab7;
  border-color: #2e6da4;
}

.filter-actions {
  margin-top: 15px;
  padding-bottom: 1rem;
  border-bottom: 2px solid #dee2e6;
}

.filter-actions .btn {
  min-width: 140px;
  font-weight: 500;
}

.export-section {
  background-color: #f8f9fa;
  padding: 1rem;
  border-radius: 4px;
  margin-top: 1.5rem !important;
}

.export-section::before {
  content: "Export Options";
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.export-actions .btn {
  min-width: 140px;
  font-weight: 500;
}

.clear-btn {
  border: 1px solid #0d6efd;
  color: #0d6efd;
  background-color: transparent;
  transition: all 0.15s ease-in-out;
}

.clear-btn:hover {
  background-color: #0d6efd;
  color: #fff;
}

.custom-tabs {
  border-bottom: 1px solid #b0bec5;
}

.custom-tabs .nav-link {
  border: 1px solid #b0bec5;
  border-bottom: none;
  color: #337ab7;
  font-weight: normal;
  background-color: #f4f6f8;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Reserve bold width so tabs don't shift size when becoming active */
.custom-tabs .nav-link::after {
  content: attr(data-tab-text);
  font-weight: bold;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.custom-tabs .nav-link:hover {
  background-color: #d6dfe6;
  border-color: #b0bec5;
  color: #337ab7;
}

.custom-tabs .nav-link.active {
  font-weight: bold;
  color: #212529 !important;
  background-color: #ffffff;
  border-color: #b0bec5;
  border-bottom: 1px solid #ffffff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

/* Bootstrap 3 tab pattern (li.active > a) */
.custom-tabs>li>a {
  color: #337ab7;
  font-weight: normal;
  background-color: #f4f6f8;
  border: 1px solid #b0bec5;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Reserve bold width so tabs don't shift size when becoming active */
.custom-tabs>li>a::after {
  content: attr(data-tab-text);
  font-weight: bold;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.custom-tabs>li>a:hover {
  background-color: #d6dfe6;
  border-color: #b0bec5;
  color: #337ab7;
}

.custom-tabs>li.active>a,
.custom-tabs>li.active>a:hover,
.custom-tabs>li.active>a:focus {
  font-weight: bold;
  color: #212529 !important;
  background-color: #ffffff;
  border-color: #b0bec5;
  border-bottom: 1px solid #ffffff;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.custom-tabs~.tab-content {
  padding: 1rem;
}

.tab-content-bordered .custom-tabs~.tab-content {
  border: 1px solid #b0bec5;
  border-top: none;
  border-radius: 0 0 6px 6px;
}

.custom-tabs~.tab-content::after {
  content: "";
  display: block;
  clear: both;
}

/* jQuery UI autocomplete — override default orange hover with the site's blue.
   jQuery UI 1.11.x applies state classes to the <a> inside .ui-menu-item;
   jQuery UI 1.12.x+ wraps item content in .ui-menu-item-wrapper instead.
   Both selectors are included so the override works regardless of which
   version renders the DOM (CDN loads 1.12.1, local asset is 1.11.1). */
.ui-autocomplete .ui-menu-item a.ui-state-focus,
.ui-autocomplete .ui-menu-item a.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-focus {
  background: #337ab7;
  border-color: #2e6da4;
  color: #fff;
}

/* Always show a vertical scrollbar track so the page never shifts horizontally
   when switching between tab panels of different heights. */
html {
  overflow-y: scroll;
}

/* Organization show page: horizontal tab strip */
.org-panel-tabs {
  display: flex;
  flex-wrap: wrap;
}

.org-panel-tabs>li>a {
  white-space: nowrap;
}

/* ── Scrollable table panels with sticky header ───────────────────────────── */
/*
 * Generic wrapper for any scrollable table. Admin panel embedded tables rely
 * on the 450px default max-height; DataTable tables override it via an inline
 * style set by the scroll_height partial local (default 750px).
 */
.scrolled-table-container {
  max-height: 450px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #dee2e6;
  border-radius: 3px;
}

/* Sticky header row: suppress Bootstrap's border-bottom (which scrolls away
 * under border-collapse: collapse) and replace it with an inset shadow that
 * stays anchored to the sticky cell. */
.scrolled-table-container thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: #fff;
  border-bottom: none;
  box-shadow: inset 0 -2px 0 0 #dee2e6;
}

/* Sticky filter row (DataTable only): pinned just below the header row.
 * --dt-header-height is set once by the Stimulus controller (and updated only
 * when the header row actually resizes via ResizeObserver). Using a custom
 * property avoids touching every cell on every filter toggle, making the
 * show/hide instant regardless of column count. Harmless for non-DataTable
 * tables — when there is only one <thead> row, tr:last-child === tr:first-child
 * and the same properties are applied twice with no visible effect. */
.scrolled-table-container thead tr:last-child th {
  position: sticky;
  top: var(--dt-header-height, 0px);
  z-index: 2;
  background-color: #fff;
  border-bottom: none;
}

/* Seal the hairline gap that border-collapse: collapse leaves between two
 * sticky <tr> elements. The ::before pseudo-element extends the filter cell's
 * opaque background 4px upward, covering the seam without affecting layout.
 * Invisible for single-row thead tables. */
.scrolled-table-container thead tr:last-child th::before {
  content: "";
  position: absolute;
  inset: -4px 0 auto 0;
  height: 4px;
  background-color: #fff;
  z-index: 1;
}

/* When the DataTable filter row is open, move the dividing shadow down to the
 * bottom of the filter row so it always sits at the boundary between the
 * frozen area and the scrolling tbody. */
.scrolled-table-container--filters-open thead tr:first-child th {
  box-shadow: none;
}

.scrolled-table-container--filters-open thead tr:last-child th {
  box-shadow: inset 0 -2px 0 0 #dee2e6;
}

/* Remove margin-bottom on an enclosed DataTable so the wrapper border hugs it */
.scrolled-table-container .data-table {
  margin-bottom: 0;
}

.data-table {
  margin-bottom: 0;
  /* Fixed layout: column widths come from the header <th> widths only, never
     from cell content. This gives two benefits:
     1. Toggling the filter row (display:none ↔ table-row) never triggers a
        column-width recalculation, making show/hide instant even on wide tables.
     2. Column widths are identical on every page of results because the header
        row is the same HTML every render — content differences don't affect layout.
     All column display[:width] values should be percentages summing to ~100%;
     the unspecified actions column receives the remaining space automatically. */
  table-layout: fixed;
  width: 100%;
  /* explicit — ensures Bootstrap's 100% width isn't overridden */
}

/* Long cell content wraps within its fixed-width column rather than expanding it. */
.data-table>tbody>tr>td {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Status pills.

   A small tinted label for state that is not a control. Bootstrap 3 has no equivalent: its
   .label is a solid block at button weight, and its .badge is a single grey pill for counts
   that hides itself when empty. The contextual pill is a Bootstrap 4 component, and this
   app is pinned to 3.4.1.

   Unprefixed because nothing here is specific to the screens that happen to use it today -
   five tones and a radius - and because the shared components in this file are named for
   what they are rather than where they were first needed.

   font-size: inherit is load-bearing. At a fixed smaller size a pill reads as a different
   class of information from the plain values beside it, which it is not: "8m ago" is the
   same fact whether or not it carries a health colour. Padding is tight so that matching
   the text size does not also make rows taller. */
.status-pill {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 10px;
  font-size: inherit;
  font-weight: 600;
  line-height: 1.3;
  padding: 0 6px;
  white-space: nowrap;
}

/* A pill inside a heading takes a fraction of the heading rather than inheriting it whole.
   font-size: inherit is what makes a pill match the text beside it in a table cell; in an
   <h2> the same rule would render it at heading size, turning a status into a banner. 75%
   is what Bootstrap's .label used here, so a page-title badge keeps the size it had before
   it became a pill. */
h1 .status-pill,
h2 .status-pill,
h3 .status-pill,
h4 .status-pill {
  font-size: 75%;
  vertical-align: middle;
}

/* Every pill carries a border a shade or two darker than its own fill rather than a common
   grey. The table stripes between #fff and #f9f9f9, and the paler fills - warning and
   neutral especially - sat close enough to both to lose their edge on one row and not the
   other. A tone-matched border defines the shape on either stripe without reading as an
   outline bolted onto the colour. The warning fill is also stronger than Bootstrap's
   #fcf8e3, which is barely a tint at this size. */
.status-pill--success {
  background: #dff0d8;
  border-color: #a3d39c;
  color: #3c763d;
}

.status-pill--warning {
  background: #fcefc7;
  border-color: #dfbf6a;
  color: #7a5c1e;
}

.status-pill--danger {
  background: #f2dede;
  border-color: #dca7a7;
  color: #a94442;
}

.status-pill--info {
  background: #d9edf7;
  border-color: #9acfea;
  color: #31708f;
}

.status-pill--neutral {
  background: #ececec;
  border-color: #b9b9b9;
  color: #595959;
}

/* Prism operations dashboard (SCP-2802).

   Cells only, never headers. The table is table-layout: fixed, so a nowrap header that does
   not fit is clipped rather than wrapped - which truncated "Last Activity" - and a nowrap
   cell that does not fit overflows into its neighbour and widens the scroll container.
   Column widths are sized for the longest value each of these can hold.

   Deliberately no rules for action controls: Phase 1 renders none. */
.prism-work-orders__timestamp {
  white-space: nowrap;
}

/* "Prism Status" breaks at its own space so the sort indicator sits beside "Status"
   instead of being orphaned on a line of its own. Constraining the header link is the only
   lever available: the label is a bare text node, and DataTable::Column joins it to the
   icon with a non-breaking space, so there is no element to break between. The max-width is
   narrower than the full label but wider than its second word plus the icon.

   The two poll headers carried the same rule while they were 6% wide. At 7% they hold
   their label and icon on one line, so it was removed rather than left inert. */
.prism-work-orders__header--stacked > a {
  display: inline-block;
  max-width: 5.2em;
}

/* Failure reasons are coloured text rather than pills. Humanized reasons run to about
   thirty characters, which no pill in this table could hold on one line. */
.prism-work-orders__failure--danger {
  color: #a94442;
}

.prism-work-orders__failure--warning {
  color: #8a6d3b;
}

.prism-operations-health {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 20px 0;
}

.prism-operations-health__card {
  align-items: flex-start;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 14px;
}

.prism-operations-health__label {
  color: #555;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
}

.prism-operations-health__card strong {
  font-size: 24px;
  line-height: 1.1;
}

@media (max-width: 767px) {
  .prism-operations-health {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Vertical column separators — subtler than Bootstrap's horizontal row borders (#ddd),
   but still visible against the striped row background (#f9f9f9) */
.data-table>thead>tr>th:not(:last-child),
.data-table>tbody>tr>td:not(:last-child) {
  border-right: 1px solid #e8e8e8;
}

/* Thin separator between stacked values in a table cell (e.g. "Ship Org / Loc").
   Matches Bootstrap's row border color (#ddd) so it reads consistently on both
   striped and white rows. 90% width centered; 1px margins minimise row-height impact. */
.cell-divider {
  border: 0;
  border-top: 1px solid #ddd;
  width: 90%;
  margin: 1px auto;
}

input.data-table__filter-control {
  /* min-width removed: column widths are locked by _lockColumnWidths() in JS,
     so filter inputs adapt to the locked column width instead of fighting it. */
  min-width: 0;
}

/* Date-range filter: two date inputs stacked vertically in one filter cell */
.data-table__date-range {
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* min-width removed: same reason as above — locked column width governs. */
  min-width: 0;
}

.data-table__filter-control--date {
  min-width: 0;
  width: 100%;
  padding-right: 4px;
}

/* Left-align all DataTable column headers.
   bootstrap-3_ce.scss:407 applies `text-align: center` to thead > tr:first-child > th with
   specificity (0,3,3) — high enough that no reasonable selector chain beats it cleanly.
   !important is appropriate here: left-aligning DataTable headers is an intentional design
   decision that must win regardless of Bootstrap customizations. */
.data-table>thead>tr>th {
  text-align: left !important;
}

/* Filter toggle button + column label sit side-by-side in the first header cell */
.data-table__col-header-with-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* When filters are toggleable, offset the first column's body cells to align
   with the label (which is inset by the toggle button + gap). */
.data-table>tbody>tr>td.data-table__cell--first-with-toggle {
  padding-left: 32px;
}

/* Filter row: vertically center cells (so the reset button aligns with adjacent inputs
   even when the first column has no filter of its own), and eliminate the top padding
   so the inputs sit immediately beneath the column labels. The row is hidden with
   display:none (set by the Stimulus controller) so these styles cost nothing when hidden. */
.data-table>thead>tr[data-data-table-filters-target="filterRow"]>th {
  vertical-align: middle;
  padding-top: 0;
}


.data-table__col-filter-with-reset {
  display: flex;
  align-items: center;
  gap: 5px;
}

.data-table__col-filter-with-reset .data-table__filter-control-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.data-table__filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: none;
  border: 1px solid #ccc;
  padding: 3px 5px;
  cursor: pointer;
  color: #888;
  border-radius: 3px;
  line-height: 1;
  font-size: 11px;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.data-table__filter-toggle-btn:hover {
  color: #333;
  border-color: #aaa;
  background: rgba(0, 0, 0, 0.05);
}

.data-table__filter-toggle-btn[aria-expanded="true"] {
  color: #337ab7;
  border-color: #337ab7;
}

.data-table__filter-toggle-btn--reset:hover {
  color: #c0392b;
  border-color: #c0392b;
}

/* Sortable column header links should look like normal text, not hyperlinks */
.data-table th a,
.data-table th a:hover,
.data-table th a:visited {
  color: inherit;
  text-decoration: none;
}

/* Sort direction icons on sortable column headers */
.data-table__sort-icon {
  font-size: 1em;
  vertical-align: middle;
}

.data-table__sort-icon--inactive {
  opacity: 0.55;
}

.data-table__sort-icon--active {
  opacity: 1;
}

.data-table__status {
  min-height: 20px;
  margin-bottom: 6px;
  color: #6c757d;
  font-size: 12px;
  visibility: hidden;
}

.data-table__status.is-active {
  visibility: visible;
}

.data-table__boolean-badge {
  display: inline-block;
  font-size: 1.2em;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 0.07em currentColor;
}

.data-table__boolean-badge--true {
  font-size: 1.3em;
  color: #16a34a;
}

.data-table__boolean-badge--false {
  color: #e11d48;
}

.data-table-page__actions {
  margin-top: 15px;
  margin-bottom: 0;
}

.data-table-page__action-group {
  margin-bottom: 10px;
}

.data-table-page__inline-controls .form-control,
.data-table-page__inline-controls .btn,
.data-table-page__action-group .btn {
  margin-right: 8px;
  margin-bottom: 8px;
}

.data-table-page__inline-controls .btn:last-child,
.data-table-page__action-group .btn:last-child {
  margin-right: 0;
}

/* Bootstrap's default .disabled opacity is too subtle on light .btn-default
 * buttons to read as "disabled" at a glance, so give export buttons an
 * explicit greyed-out treatment while a download is in flight. */
.data-table-page__action-group .btn.disabled {
  color: #999;
  background-color: #e6e6e6;
  border-color: #ccc;
  opacity: 1;
  box-shadow: none;
  cursor: not-allowed;
}

.data-table-page__secondary-actions {
  text-align: right;
}

/* ── Clearable date input (×  button beside the calendar icon) ───────────────
 * Used on devices/edit and anywhere a date field needs an inline clear control.
 * The <style> block in _device_expiration_edit_form.html.erb defines the same
 * rules so that partial still works standalone; these global definitions make
 * the classes available on any page without duplicating the script. */
.clear-date-wrapper {
  position: relative;
  width: 175px;
  /* explicit width so flex containers don't shrink this below the × button position */
}

/* When a floating/outlined label is placed inside the wrapper the label protrudes
 * ~8px above the top border. margin-top reserves that space so the label isn't
 * cropped by the flex row and stays visually within the row's content area. */
.clear-date-wrapper--labeled {
  margin-top: 8px;
}

/* Outlined-style label: sits centred on the top border of the date input,
 * mimicking the Material Design outlined text-field pattern. */
.clear-date-label {
  position: absolute;
  top: -5px;
  left: 10px;
  background: #fff;
  padding: 0 3px;
  font-size: 11px;
  font-weight: 500;
  color: #a3a3a3;
  line-height: 1;
  pointer-events: none;
  z-index: 1;
}

.clear-date-btn {
  display: none;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #5886AC;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  z-index: 1;
}

.clear-date-btn:hover {
  color: #256393;
}