@charset "UTF-8";

body {
  font-family: 'InterDisplay', sans-serif;
}

/* Navigation */

.navbar .nav-item {
  margin: 0em 0.4em;
  pointer: cursor;
}
.navbar .strike a.dropdown-item {
  text-decoration: line-through;
  opacity: 0.5;
}
.table-container .pagination {
  margin-top: 1em;
}
.table-container .pagination li {
  margin-right: 1em;
}

.d-contents { display: contents; }

.phone-number {
  white-space: nowrap;
}

/* Contact detail: has_mobile / has_laptop = No → show badge struck through */
.contact-device-badge--no {
  text-decoration: line-through;
  opacity: 0.65;
}

.dan-icon {
  font-size: 0.8em;
}

/* Column resize */

.table-container,
.table-wrap,
.stats-table-wrap {
  overflow-x: clip;
}

/* Contact list keeps optional horizontal scroll when columns are widened */
#contactTableWrap,
#contactTableWrap .table-container {
  overflow-x: auto;
}
table[data-col-resize-init] > thead > tr:first-child > th,
table[data-col-resize-init] > tbody > tr > td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table[data-col-resize-init] > thead > tr:first-child > th {
  padding-right: 1.1rem !important;
}
/* Happenings, happening-registrations, contact-notes, user list, event list,
   project list & call list tables: wrap header/cell text instead of
   truncating it. !important because styles.css's ".table-wrap th,
   .table-wrap td" rule (loaded for every table on the site) also sets
   white-space: nowrap.
   Contact list (#contactTableWrap) keeps ellipsis/nowrap — wrapping there
   crushes narrow columns (esp. Phone) into vertical stacks. */
#happenings-table-results table[data-col-resize-init] > thead > tr > th,
#happenings-table-results table[data-col-resize-init] > tbody > tr > td,
#registration-results table[data-col-resize-init] > thead > tr > th,
#registration-results table[data-col-resize-init] > tbody > tr > td,
#contact-notes-table-results table[data-col-resize-init] > thead > tr > th,
#contact-notes-table-results table[data-col-resize-init] > tbody > tr > td,
#user-list-results table[data-col-resize-init] > thead > tr > th,
#user-list-results table[data-col-resize-init] > tbody > tr > td,
#event-list-results table[data-col-resize-init] > thead > tr > th,
#event-list-results table[data-col-resize-init] > tbody > tr > td,
#project-list-results table[data-col-resize-init] > thead > tr > th,
#project-list-results table[data-col-resize-init] > tbody > tr > td,
#callListTableWrap table[data-col-resize-init] > thead > tr > th,
#callListTableWrap table[data-col-resize-init] > tbody > tr > td,
#join-online-table-results table[data-col-resize-init] > thead > tr > th,
#join-online-table-results table[data-col-resize-init] > tbody > tr > td {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word;
}

#join-online-table-results th,
#join-online-table-results td {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  word-break: break-word;
}

#join-online-table-results.event-contact-table-wrap {
  overflow-x: auto;
}

#join-online-table-results table {
  width: auto !important;
  min-width: 100%;
  table-layout: auto !important;
}

/* ...except action columns: stay on one line and never clip icons.
   Matches data-column=actions headers and cells that contain icon buttons
   (including Contact list's actions column named "pk"). */
#happenings-table-results table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#registration-results table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#contact-notes-table-results table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#user-list-results table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#event-list-results table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#project-list-results table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#callListTableWrap table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#join-online-table-results table[data-col-resize-init] > thead > tr > th[data-column="actions"],
#happenings-table-results table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
#registration-results table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
#contact-notes-table-results table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
#user-list-results table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
#event-list-results table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
#project-list-results table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
#callListTableWrap table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
#contactTableWrap table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
.table-wrap table[data-col-resize-init] > tbody > tr > td:has(.conversation-header__icon-btn),
.table-wrap table[data-col-resize-init] > thead > tr > th[data-column="actions"] {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  word-break: normal;
  min-width: max-content;
}

/* All contacts / My address book: denser rows, room for phone numbers,
   and sort arrows that stay attached to the header label. */
#contactTableWrap th,
#contactTableWrap td {
  padding: 0.4rem 0.65rem !important;
}

#contactTableWrap td.phone-number,
#contactTableWrap th.phone-number-col {
  min-width: 8.5rem;
}

/* Selection column: keep it in layout when hidden so col-resize % widths
   don't leave an empty gap (display:none orphans that column's share). */
#contactTableWrap .contact-selection-col {
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
  line-height: 0;
  font-size: 0;
}

body.contact-list--selecting #contactTableWrap .contact-selection-col {
  width: 2.25rem !important;
  min-width: 2.25rem !important;
  max-width: 2.25rem !important;
  padding: 0.4rem 0.35rem !important;
  line-height: normal;
  font-size: inherit;
  overflow: visible !important;
  text-align: center;
}

/* Active selection mode: tint the icon only (no filled background).
   Reinforced in styles.css so it wins over later icon-btn rules. */
body.contact-list--selecting #contactSelectionModeToggle {
  background: transparent !important;
  box-shadow: none !important;
}

body.contact-list--selecting #contactSelectionModeToggle .conversation-bar__icon {
  color: var(--primary-color) !important;
}

.contact-selection-bar {
  border: 1px solid var(--light-gray);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  background: var(--background-color);
}

/* Mass-action modals: select2 needs a real width inside the dialog. */
#contactMassAssignCampaignerModal .select2-container,
#contactMassAddAddressBookModal .select2-container {
  width: 100% !important;
}

/* Select2 results appended to <body> (see forms.js) must sit above
   Bootstrap's modal (1055) and backdrop (1050).
   Not a direct child: AttachBody.render() (select2.full.js) wraps the
   dropdown in a plain, classless <span> before appending it to <body>, and
   AttachBody.position() clones the widget's own .select2-container classes
   onto the dropdown itself (replacing "select2-dropdown"). So the real
   target here is a grandchild of <body>, carrying .select2-container, not
   .select2-dropdown — a "body > ..." child combinator never matches it,
   silently no-opping this whole rule and leaving the dropdown to render
   below the modal/backdrop's z-index instead of above it. */
body .select2-container--open {
  z-index: 2000 !important;
}

/* jQuery-QueryBuilder's own root class is "query-builder" (kebab-case) —
   the pre-existing ".queryBuilder ..." rule in mtool.css never actually
   matches anything (typo'd class name). Without a real override, the
   global ".select2-container { width: 100% !important; }" rule collapses
   any select2 dropdown used as a rule value (e.g. the "Contact" advanced
   search field) to a near-zero width, since .rule-value-container is
   inline-block and sizes itself off its child's content. */
.query-builder .select2-container {
  width: auto !important;
  min-width: 300px;
}

/* Contact note forms: the "Specific user" (reminder_addr_user) field starts
   hidden (see reminder-addr-toggle.js) until "Reminder addressee" is set to
   "Specific user" — select2 measures 0 width when it initializes on a
   display:none ancestor, and the global ".select2-container { width: 100%
   !important; }" rule (100% of 0) leaves it visually broken/unusable even
   after the field becomes visible. Same fix as the query-builder rule above. */
.edit-contact-note .select2-container,
.contact-note .select2-container {
  width: auto !important;
  min-width: 250px;
}

.col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  pointer-events: auto;
  z-index: 60;
}

.col-resize-handle::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 4px;
  width: 2px;
  height: 60%;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.25;
  transition: opacity 0.15s ease;
}

.col-resize-handle:hover::after,
th.col-resize-active .col-resize-handle::after {
  opacity: 0.65;
}

body.col-resizing {
  cursor: col-resize !important;
  user-select: none;
}

body.col-resizing * {
  cursor: col-resize !important;
}

/* Forms */

/* Width belongs on the Select2 container. Forcing position/width on
   select.django-select2 overrides .select2-hidden-accessible and leaves the
   native <select> visible on top of (or instead of) the typeahead UI. */
.select2-container {
  width: 100% !important;
}

/* Collapsible card headers (see js/collapsible-card-header.js) */

.card-header--collapsible {
  cursor: pointer;
  user-select: none;
}

.card-header--collapsible:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.card-header--collapsible .card-header__toggle {
  pointer-events: none;
  line-height: 1;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.card-header__toggle .card-header__caret {
  display: inline-block;
  margin-left: 0.35em;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.card-header--collapsible[aria-expanded="true"] .card-header__caret {
  transform: rotate(180deg);
}

/* Model browser: show full field/model comments without column-resize truncation */
.model-browser-table th,
.model-browser-table td {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word;
  vertical-align: top;
}

.model-browser-detail-table th:first-child,
.model-browser-detail-table td:first-child {
  width: 420px;
  max-width: 420px;
}

.table-wrap .model-browser-list-table {
  table-layout: auto !important;
}

.model-browser-list-table th:nth-child(3),
.model-browser-list-table td:nth-child(3) {
  width: 420px;
  max-width: 420px;
}

.model-browser-list-table .model-browser-audit-col {
  width: 1%;
  min-width: 8rem;
  max-width: 10rem;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.model-browser-list-table .model-browser-audit-col .badge {
  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.2;
  text-align: center;
}