.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;
}

/* 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: #0d9488;
}

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

.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;
}

.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;
}