.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.
 * The `top` value is overridden in px by the Stimulus controller once the
 * header row height is known. 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: 0;
  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;
}

input.data-table__filter-control {
  min-width: 110px;
}

/* Filter toggle / reset buttons embedded in the first column header/filter cell */
.data-table__col-header-with-toggle {
  position: relative;
  text-align: center;
}

/* Pin the button to the left edge without affecting the label's centring */
.data-table__col-header-with-toggle>.data-table__filter-toggle-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.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: 0.95em;
  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-flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 0.2em;
  color: #fff;
  font-size: 0.95em;
  font-weight: 700;
  line-height: 1;
}

.data-table__boolean-badge--true {
  background: #198754;
}

.data-table__boolean-badge--false {
  background: #dc3545;
}

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