/*
  RiverEdge — responsive.css
  Loaded at weight 150 (after river.css at 100, after RiverLea core at -100…-99).

  Sections:
  1.  Navigation menu — larger font, touch target, toggle button
  2.  Full-width contact summary — override Claro's --crm-page-padding
  3.  Drupal regions — hide highlighted/help on contact pages
  4.  Shortcuts section removal
  5.  Touch-friendly tap targets (global)
  6.  Mobile: general layout (incl. contact merge horizontal scroll)
  7.  Mobile: tables → card stacks
  8.  Mobile: contact tabs → hamburger menu
  9.  Per-user dark/light mode — html[data-riveredge-theme] overrides
*/


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   1. Navigation menu
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Nav bar lives outside .crm-container so --crm-font is never applied to it
   by RiverLea core. Apply it explicitly here. */
#civicrm-menu-nav {
  font-family: var(--crm-font);
}

#civicrm-menu li li a {
	padding: 8px 36px 8px 10px !important;
}

#civicrm-menu > li > ul > li:first-child > a {
  padding-top: 12px !important;
}


/* Larger font on menu links */
#civicrm-menu > li > a,
#civicrm-menu > li > span {
  font-size: .84rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
}
#civicrm-menu-nav {
  font-size: .84rem;
}

/* Inline-edit WYSIWYG (Summernote) on contact summary —
   The editor sits inside table.crm-inline-edit-form > td.html-adjust.
   width:100% on the editor resolves to 100% of the td, which itself expands
   to the toolbar's intrinsic ~2200px.  Fix by constraining the whole chain:
   form → table (fixed layout) → td → editor. */
.crm-inline-edit.form:has(.note-editor) {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box;
}
.crm-inline-edit.form:has(.note-editor) table.crm-inline-edit-form {
  width: 100% !important;
  table-layout: fixed !important;
}
.crm-inline-edit.form:has(.note-editor) td.html-adjust {
  width: 100% !important;
  white-space: normal !important;
}
.crm-inline-edit.form .note-editor.note-frame {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  overflow-x: auto;
}
.crm-inline-edit.form {
  max-width: 100% !important;
  min-width: 100% !important;
}

/* Entity view pages (contribution, contact, event, etc.) —
   table.crm-info-panel has no label-column width in RiverLea, so td.label
   collapses to text-width and the value cell spans the rest of the 100%-wide
   table, pushing values to the far right.  A fixed width keeps them tight. */
.crm-container table.crm-info-panel td.label {
  width: var(--crm-input-label-width);
  min-width: var(--crm-input-label-width);
  white-space: nowrap;
}
/* Hide the AI auto-generate button */
.generate-text-button {
  display: none !important;
}

/* Also cover div-based view layouts (.crm-section .label/.content) used by
   some other entity view pages. */
.crm-container .crm-summary-group .crm-section .label {
  width: var(--crm-input-label-width) !important;
}
.crm-container .crm-summary-group .crm-section .content {
  margin-left: var(--crm-input-label-width) !important;
}

/* Afform filter select2 boxes — RiverLea fixes all .select2-container to
   --crm-input-width (15em) with !important. For SearchKit afform filter
   fields the inputs should fill their column, not be capped at that width. */
.afform-directive .select2-container {
  width: 100% !important;
  max-width: 100%;
}

/* Dashboard inactive-dashlet header — restore normal font size */
.crm-container .crm-inactive-dashlet .crm-dashlet-header h3 {
  font-size: 100% !important;
}

/* SearchKit select-all + dropdown — styled as a joined split button */
#bootstrap-theme th.crm-search-result-select .btn-group {
  display: inline-flex;
  gap: 0;
}
#bootstrap-theme th.crm-search-result-select button.btn {
  background: var(--crm-container-bg-color);
  color: var(--crm-text-color);
  border: 1px solid var(--crm-input-border-color);
  padding: 0.25rem 0.5rem;
  line-height: 1.4;
  border-radius: 0;
}
#bootstrap-theme th.crm-search-result-select button.btn:first-child {
  border-radius: var(--crm-btn-radius) 0 0 var(--crm-btn-radius);
  border-right-width: 0;
}
#bootstrap-theme th.crm-search-result-select button.btn.dropdown-toggle {
  border-radius: 0 var(--crm-btn-radius) var(--crm-btn-radius) 0;
  padding-inline: 0.4rem;
}
#bootstrap-theme th.crm-search-result-select button.btn:hover,
#bootstrap-theme th.crm-search-result-select button.btn:focus {
  background: var(--crm-c-gray-100);
  color: var(--crm-text-color);
}
#bootstrap-theme th.crm-search-result-select button.btn i.crm-i {
  color: var(--crm-text-color);
}

/* Contact summary Actions + Edit buttons — use primary colour instead of secondary */
#crm-contact-actions-link.button,
#crm-contact-actions-link.button:link,
#crm-contact-actions-link.button:visited,
.crm-container a.button.edit,
.crm-container a.button.edit:link,
.crm-container a.button.edit:visited {
  background: var(--crm-primary-color);
  color: var(--crm-primary-text-color);
}
#crm-contact-actions-link.button:hover,
#crm-contact-actions-link.button:focus,
.crm-container a.button.edit:hover,
.crm-container a.button.edit:focus {
  background: var(--crm-primary-hover-color);
  color: var(--crm-primary-text-color);
}

/* Contact Actions dropdown — the panel sits inside the dark contact header,
   so it inherits light text.  Reset to standard text/link colours. */
#crm-contact-actions-list {
  color: var(--crm-text-color) !important;
  background: var(--crm-dropdown-bg-color, var(--crm-container-bg-color)) !important;
}
#crm-contact-actions-list a {
  color: var(--crm-link-color) !important;
}
#crm-contact-actions-list a:hover {
  color: var(--crm-link-hover-color) !important;
}


/*
 * Dark mode toggle wrapper — appended to <body> by JS to avoid any parent
 * overflow or z-index issues.  Uses position:fixed so it always sits at the
 * top-right of the viewport, inside the nav bar area.
 *
 * --crm-menubar-bottom is set by crm.menubar.js to the pixel height of the
 * menu bar (menu height + top offset), so we can size the wrapper to match.
 */
#riveredge-theme-toggle-wrapper {
  position: fixed;
  top: 0;
  right: 3rem;          /* leaves room for CiviCRM's own right-edge icons */
  height: var(--crm-menubar-bottom, 42px);
  display: flex;
  align-items: center;
  z-index: 9999;
  pointer-events: all;
}

#riveredge-theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  height: 100%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: none;
  white-space: nowrap;
  font-family: inherit;
}

#riveredge-theme-toggle:hover,
#riveredge-theme-toggle:focus {
  background: rgba(255, 255, 255, 0.12);
  outline: none;
}

.riveredge-toggle-icon {
  font-size: 1.1em;
}

/* CiviCRM's menubar CSS sets #civicrm-menu-nav to position:fixed at ≤767px
   but then overrides it back to position:absolute at ≤609px (crm-menubar.*.css).
   Restore fixed so the nav stays visible while scrolling on all mobile sizes.
   Also restore an opaque background: crm-menubar.css sets background:transparent
   on mobile, which lets Drupal page elements show through the nav bar. */
@media (max-width: 767px) {
  nav#civicrm-menu-nav {
    position: fixed !important;
    background-color: var(--crm-menubar-color, #222831) !important;
  }

  /* Hide Drupal toolbar-tab (user account tray) on mobile — it appears above
     CRM content and serves no useful purpose on small screens. */
  .toolbar-tab {
    display: none !important;
  }

  /* The toolbar-tab previously acted as a spacer between the fixed nav bar and
     the contact name block. Restore that gap now that the tab is hidden. */
  .crm-summary-contactname-block {
    margin-top: 1.5rem;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   2. Dialog titlebar — print icon alignment
   RiverLea makes the titlebar a flex container (align-items:center) and forces
   position:relative on .ui-button elements. The print <a> is a flex item but
   has display:block, so its inner icon <div> isn't vertically centred within
   the <a> itself. Making the <a> a flex container fixes this.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.crm-container.ui-dialog .ui-dialog-titlebar a.crm-dialog-titlebar-print {
  display: flex !important;
  align-items: center;
}

/* jQuery UI auto-focuses the close button on dialog open (programmatic focus).
   :focus-visible only triggers on keyboard navigation, so this hides the ring
   for mouse/programmatic focus while keeping it for keyboard users. */
.crm-container.ui-dialog .ui-dialog-titlebar .ui-button:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. Full-width contact summary
   --crm-page-padding: 3rem is set by #block-claro-content in RiverLea _cms.css.
   We override it here with higher specificity.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Override Claro's page padding on ALL CiviCRM pages inside the block */
#block-claro-content:has(.crm-contact-page) {
  --crm-page-padding: 0 !important;
  padding: 0 !important;
}

/* Broader fallback for browsers without :has() or non-Claro themes */
.crm-contact-page {
  --crm-page-padding: 0;
}

/* Ensure the content wrapper fills the viewport width */
.crm-contact-page #crm-main-content-wrapper {
  max-width: none;
  width: 100%;
  padding-inline: 0;
}

.crm-contact-page .crm-container {
  padding-inline: 0;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   3. Drupal regions — hide highlighted/help on contact pages only
   These are Drupal block regions that appear outside of #crm-main.
   `:has()` targets the <body> when it contains a .crm-contact-page child.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Drupal content-header (blank section above CiviCRM content on contact pages) */
body:has(.crm-contact-page) header.content-header {
  display: none !important;
}

/* Claro region IDs (adjust if your Drupal theme differs) */
body:has(.crm-contact-page) #block-claro-highlighted,
body:has(.crm-contact-page) #block-claro-help,
body:has(.crm-contact-page) .region-highlighted,
body:has(.crm-contact-page) .region-help,
body:has(.crm-contact-page) [id$="-highlighted"],
body:has(.crm-contact-page) [id$="-help"],
body:has(.crm-contact-page) [class*="region-help"],
body:has(.crm-contact-page) [class*="region-highlighted"] {
  display: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   4. Shortcuts section removal
   Inspect your contact page HTML to confirm which element to target.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Page title — small top breathing room */
.page-title {
  margin-top: 0.5rem !important;
  font-size: 1.7rem !important;
}

/* Hide the Drupal "add to shortcuts" star */
a.shortcut-action.shortcut-action--add {
  display: none !important;
}

.crm-contact-page #shortcuts,
.crm-contact-page .crm-shortcuts-container,
.crm-contact-page .crm-shortcuts,
.crm-contact-page .crm-contact-shortcuts,
.crm-contact-page #crm-shortcuts {
  display: none !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   5. Touch-friendly tap targets
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.crm-container .crm-button,
.crm-container input[type="submit"],
.crm-container input[type="button"],
.crm-container input[type="reset"],
.crm-container button,
.crm-container .ui-button {
  min-height: 34px;
  min-width: 44px;
}

.crm-container input[type="text"],
.crm-container input[type="email"],
.crm-container input[type="tel"],
.crm-container input[type="url"],
.crm-container input[type="search"],
.crm-container input[type="number"],
.crm-container input[type="password"],
.crm-container select,
.crm-container textarea {
  min-height: 34px;
  padding-block: 0.5rem;
}

.crm-container .crm-form-checkbox label,
.crm-container .crm-form-radio label {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.25rem;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6. Mobile: general layout  (≤ 768 px)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {
  .crm-container {
    overflow-x: hidden;
  }

  .crm-container .crm-submit-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .crm-container select {
    max-width: 100%;
    width: 100%;
  }

  /* Full-width dialogs on mobile */
  .ui-dialog {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .ui-dialog .ui-dialog-content {
    max-height: 75vh;
    overflow-y: auto;
  }

  #block-claro-content .crm-container:not(.crm-public) .form-item, #block-claro-content .crm-container .button {
    margin-bottom: 10px;
    width: 100%;
  }

  /* ── Mobile form layout: stack labels above fields ────────────────────── */
  /* CiviCRM uses table-based forms with inline width styles on td.label.
     !important overrides those inline widths so labels go full-width. */
  .crm-container table.form-layout,
  .crm-container table.form-layout-compressed {
    display: block !important;
    width: 100% !important;
  }

  .crm-container table.form-layout tbody,
  .crm-container table.form-layout tr,
  .crm-container table.form-layout-compressed tbody,
  .crm-container table.form-layout-compressed tr {
    display: block !important;
    width: 100% !important;
  }

  .crm-container table.form-layout td,
  .crm-container table.form-layout-compressed td {
    display: block !important;
    width: 100% !important; /* beats inline style="width:Xem" on td.label */
    box-sizing: border-box;
    padding-inline: 0;
  }

  /* Remove top padding on content cell — label above provides spacing */
  .crm-container table.form-layout td.content,
  .crm-container table.form-layout-compressed td.content {
    padding-top: 0.2rem;
  }

  /* Labels left-aligned (desktop centres them to align with the field on the right) */
  .crm-container table.form-layout td.label,
  .crm-container table.form-layout-compressed td.label,
  .crm-container .crm-section > .label {
    text-align: left !important;
  }

  /* Div-based .crm-section forms */
  .crm-container .crm-section > .label,
  .crm-container .crm-section > .content {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  /* Inputs / selects / textareas fill their cell */
  .crm-container td.content input:not([type=checkbox]):not([type=radio]),
  .crm-container td.content select,
  .crm-container td.content textarea,
  .crm-container .crm-section .content input:not([type=checkbox]):not([type=radio]),
  .crm-container .crm-section .content select,
  .crm-container .crm-section .content textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* .huge / .large / .medium width classes use fixed --crm-input-*-width values
     that exceed the mobile viewport; cap them to the available width instead. */
  .crm-container .huge,
  .crm-container .large,
  .crm-container .medium {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Claro page padding override on smaller viewports too */
  #block-claro-content:has(.crm-contact-page) {
    --crm-page-padding: 0 !important;
  }

  nav#civicrm-menu-nav .crm-menubar-toggle-btn {
	  margin-top: 5px;
    padding-right: 10px;
  }

  /* btn-slide dropdowns (e.g. Configure/Participants on event manage) —
     right-align the panel so it doesn't overflow off the left edge. */
  .btn-slide {
    position: relative;
  }
  .btn-slide ul.panel {
    left: 0 !important;
    right: 0;
    min-width: max-content;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   6b. Action-link accordion  (mobile only)
   JS wraps .action-link children in .riveredge-action-body and prepends a
   .riveredge-action-toggle button.  Desktop: toggle hidden, body visible as
   normal inline flow.  Mobile: toggle shown, body collapsed until opened.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Desktop: hide toggle, body acts as transparent wrapper so the <a> buttons
   remain in their normal inline flow inside .action-link.
   !important needed because .crm-container button rules can override display:none. */
.riveredge-action-toggle {
  display: none !important;
}
.riveredge-action-body {
  display: contents;
}

@media (max-width: 768px) {
  /* Toggle button — full-width, styled like a CiviCRM accordion header */
  .riveredge-action-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    background: var(--crm-accordion-header-bg-color);
    color: var(--crm-accordion-header-color, var(--crm-text-color));
    border: none;
    border-radius: var(--crm-l-radius);
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    font-family: inherit;
    text-align: left;
  }

  .riveredge-action-toggle:hover,
  .riveredge-action-toggle:focus {
    background: #005893;
    outline: none;
  }

  html[data-riveredge-theme="light"] .riveredge-action-toggle:hover,
  html[data-riveredge-theme="light"] .riveredge-action-toggle:focus {
    background: var(--crm-c-gray-300, #cad5d7);
  }

  .riveredge-action-caret {
    margin-left: auto;
    transition: transform 0.2s ease;
  }

  .riveredge-action-toggle[aria-expanded="true"] .riveredge-action-caret {
    transform: rotate(180deg);
  }

  /* Body — hidden when collapsed, flex column when open */
  .riveredge-action-body {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }

  .riveredge-action-body.open {
    display: flex;
  }

  /* Each button fills the full width on mobile */
  .riveredge-action-body .button,
  .riveredge-action-body a.button,
  .riveredge-action-body a.crm-popup.button {
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
  }

  /* ── Contact merge: horizontal scroll + sticky label column ────────────── */
  /* .crm-container has overflow-x:hidden above — punch through it for merge */
  .crm-contact-merge-form-block {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .crm-contact-merge-form-block table.row-highlight {
    min-width: 560px;
    width: 100%;
  }
  /* Sticky field-label column so users always know what row they're on */
  .crm-contact-merge-form-block table.row-highlight td:first-child,
  .crm-contact-merge-form-block table.row-highlight th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--crm-container-bg-color);
    /* section-header rows (tr.no-data) have an inline bg override handled by JS */
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   7. Mobile: tables → card stacks  (≤ 768 px)
   JS in riveredge.js stamps data-label attributes on each <td>.
   These selectors must match TABLE_SEL in riveredge.js.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 768px) {

  /* Shared rule applied to all CiviCRM data tables.
     table.table covers SearchKit displays (Bootstrap class).
     table.selector covers custom CiviCRM tab tables. */
  .crm-container table.dataTable thead,
  .crm-container table.display thead,
  .crm-container table.crm-ajax-table thead,
  .crm-container table.crm-data-table thead,
  .crm-container table.crm-entity-table thead,
  .crm-container table.crm-results-table thead,
  .crm-container table.table thead,
  .crm-container table.selector thead {
    display: none !important;
  }

  /* table.selector puts header th elements in the first tbody row; hide it on mobile */
  .riveredge-label-row {
    display: none !important;
  }

  .crm-container table.dataTable,
  .crm-container table.display,
  .crm-container table.crm-ajax-table,
  .crm-container table.crm-data-table,
  .crm-container table.crm-entity-table,
  .crm-container table.crm-results-table,
  .crm-container table.table,
  .crm-container table.selector {
    display: block !important;
    border: none !important;
    width: 100% !important;
    padding-bottom: 120px;
  }

  .crm-container table.dataTable tbody,
  .crm-container table.display tbody,
  .crm-container table.crm-ajax-table tbody,
  .crm-container table.crm-data-table tbody,
  .crm-container table.crm-entity-table tbody,
  .crm-container table.crm-results-table tbody,
  .crm-container table.table tbody,
  .crm-container table.selector tbody {
    display: block !important;
    width: 100% !important;
  }

  /* Each row is a card */
  .crm-container table.dataTable tbody tr,
  .crm-container table.display tbody tr,
  .crm-container table.crm-ajax-table tbody tr,
  .crm-container table.crm-data-table tbody tr,
  .crm-container table.crm-entity-table tbody tr,
  .crm-container table.crm-results-table tbody tr,
  .crm-container table.table tbody tr,
  .crm-container table.selector tbody tr {
    display: block !important;
    margin-bottom: 1rem !important;
    border: 1px solid var(--crm-border-color) !important;
    border-radius: var(--crm-l-radius) !important;
    background: var(--crm-container-bg-color) !important;
    box-shadow: var(--crm-shadow-block);
    overflow: visible !important; /* must be visible so action dropdowns aren't clipped */
    width: 100% !important;
  }

  /* Each cell is a labelled row */
  .crm-container table.dataTable tbody td,
  .crm-container table.display tbody td,
  .crm-container table.crm-ajax-table tbody td,
  .crm-container table.crm-data-table tbody td,
  .crm-container table.crm-entity-table tbody td,
  .crm-container table.crm-results-table tbody td,
  .crm-container table.table tbody td,
  .crm-container table.selector tbody td {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 0.2rem !important;
    padding: 0.5rem 0.75rem !important;
    border: none !important;
    border-bottom: 1px solid var(--crm-border-color) !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .crm-container table.dataTable tbody td:last-child,
  .crm-container table.display tbody td:last-child,
  .crm-container table.crm-ajax-table tbody td:last-child,
  .crm-container table.crm-data-table tbody td:last-child,
  .crm-container table.crm-entity-table tbody td:last-child,
  .crm-container table.crm-results-table tbody td:last-child,
  .crm-container table.table tbody td:last-child,
  .crm-container table.selector tbody td:last-child {
    border-bottom: none !important;
  }

  /* The column label — set via data-label by JS */
  .crm-container table.dataTable tbody td::before,
  .crm-container table.display tbody td::before,
  .crm-container table.crm-ajax-table tbody td::before,
  .crm-container table.crm-data-table tbody td::before,
  .crm-container table.crm-entity-table tbody td::before,
  .crm-container table.crm-results-table tbody td::before,
  .crm-container table.table tbody td::before,
  .crm-container table.selector tbody td::before {
    content: attr(data-label) ": ";
    font-weight: bold;
    font-size: 0.78em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.65;
    flex: 0 0 100%;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Suppress label when data-label is blank (e.g. action/checkbox column) */
  .crm-container table.dataTable tbody td[data-label=""]::before,
  .crm-container table.display tbody td[data-label=""]::before,
  .crm-container table.crm-ajax-table tbody td[data-label=""]::before,
  .crm-container table.crm-data-table tbody td[data-label=""]::before,
  .crm-container table.crm-entity-table tbody td[data-label=""]::before,
  .crm-container table.crm-results-table tbody td[data-label=""]::before,
  .crm-container table.table tbody td[data-label=""]::before,
  .crm-container table.selector tbody td[data-label=""]::before {
    display: none !important;
  }

  /* SearchKit action dropdowns — keep btn-group as positioning context so
     the dropdown opens relative to the button, not some distant ancestor.
     Right-align the menu so it doesn't overflow off the left edge of the card. */
  .crm-container table.table tbody td .btn-group {
    position: relative !important;
  }
  .crm-container table.table tbody td .btn-group .dropdown-menu {
    left: 0 !important;
    min-width: 160px;
  }

  /* DataTables helper rows (sorting, empty message) — don't turn into cards */
  .crm-container table.dataTable tbody tr.dataTables_empty,
  .crm-container table.display tbody tr.dataTables_empty {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  /* DataTables wrapper — prevent horizontal scroll at the container level */
  .crm-container .dataTables_wrapper {
    overflow-x: hidden;
  }

  /* DataTables pagination — stack it */
  .crm-container .dataTables_wrapper .dataTables_info,
  .crm-container .dataTables_wrapper .dataTables_paginate {
    display: block;
    text-align: center;
    margin-top: 0.5rem;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   8. Mobile: contact tabs → hamburger menu  (≤ 767 px)
   JS builds .riveredge-tab-bar / .riveredge-tab-menu, hides the native tab
   nav, and sets display on the active panel. CSS styles the bar and dropdown.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 767px) {

  /* Switch the side-tab grid to a simple block so the hamburger bar is full-width */
  .crm-contact-page #mainTabContainer.riveredge-hamburger-active {
    display: block !important;
  }

  /* Hide native tab nav; .riveredge-tab-bar replaces it */
  .crm-contact-page #mainTabContainer.riveredge-hamburger-active .crm-contact-tabs-list,
  .crm-contact-page #mainTabContainer.riveredge-hamburger-active .ui-tabs-nav {
    display: none !important;
  }

  /* All panels hidden by default; JS sets display:'block' on the active one */
  .crm-contact-page #mainTabContainer.riveredge-hamburger-active .ui-tabs-panel {
    display: none;
    padding: 0;
    border: none;
  }

  /* ── Bar ──────────────────────────────────────────────────────────────── */
  .riveredge-tab-bar {
    position: relative;
    border-bottom: 1px solid var(--crm-border-color);
  }

  /* ── Hamburger button ─────────────────────────────────────────────────── */
  .riveredge-tab-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0 1rem;
    background: var(--crm-accordion-header-bg-color);
    color: var(--crm-accordion-header-color);
    border: none;
    cursor: pointer;
    font-weight: bold;
    font-size: 1rem;
    font-family: inherit;
    text-align: left;
  }

  .riveredge-tab-btn:hover,
  .riveredge-tab-btn:focus {
    background: var(--crm-accordion-header-bg-active-color);
    outline: none;
  }

  .riveredge-tab-hamburger {
    font-size: 1.25em;
    flex-shrink: 0;
    line-height: 1;
  }

  .riveredge-tab-current {
    flex: 1;
  }

  .riveredge-tab-caret {
    flex-shrink: 0;
    font-size: 0.8em;
    opacity: 0.55;
    transition: transform 0.2s ease;
  }

  .riveredge-tab-btn[aria-expanded="true"] .riveredge-tab-caret {
    transform: rotate(180deg);
  }

  /* ── Dropdown ─────────────────────────────────────────────────────────── */
  /* position:fixed + JS-computed top/left/width avoids ancestor grid/overflow clipping */
  .riveredge-tab-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    position: fixed;
    z-index: 9000;
    background: var(--crm-container-bg-color);
    border: 1px solid var(--crm-border-color);
    box-shadow: var(--crm-shadow-block);
  }

  .riveredge-tab-menu.open {
    display: block;
  }

  .riveredge-tab-item {
    display: flex;
    align-items: center;
    padding: 0 1rem;
    min-height: 48px;
    color: var(--crm-text-color);
    text-decoration: none;
    border-bottom: 1px solid var(--crm-border-color);
  }

  .riveredge-tab-menu li:last-child .riveredge-tab-item {
    border-bottom: none;
  }

  .riveredge-tab-item:hover,
  .riveredge-tab-item:focus {
    background: var(--crm-layer2-bg-color);
    color: var(--crm-text-color);
    outline: none;
  }

  .riveredge-tab-item.riveredge-tab-item-active {
    font-weight: bold;
    color: var(--crm-link-color);
    background: var(--crm-layer1-bg-color);
  }
}

/* Light mode: the default hover var (--crm-layer2-bg-color = #ebeff0) is
   barely different from the button's own bg (--crm-layer1-bg-color = #f3f6f7)
   and actually lighter — use gray-300 for a clearly visible focus/hover state. */
@media (max-width: 767px) {
  html[data-riveredge-theme="light"] .riveredge-tab-btn:hover,
  html[data-riveredge-theme="light"] .riveredge-tab-btn:focus {
    background: #005893;
  }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   9. Per-user dark / light mode overrides
   Applied when JS sets html[data-riveredge-theme="dark|light"].
   This lets the user override the OS preference even when the RiverLea
   backend setting is 'inherit' (which wraps dark vars in @media).
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Force DARK ──────────────────────────────────────────────────────────── */
html[data-riveredge-theme="dark"] {
  color-scheme: dark;

  /* CiviCRM menubar variables (crm-menubar.css uses these for nav link bg/text) */
  --crm-menubar-item-color: transparent;
  --crm-menubar-text-color: #f0f2f5;

  /* Core dark vars */
  --crm-text-color: var(--crm-text-light-color);
  --crm-border-color: var(--crm-c-gray-500);
  --crm-paper: var(--crm-c-gray-900);
  --crm-ink: var(--crm-text-light-color);
  --crm-code-bg-color: var(--crm-layer1-bg-color);
  --crm-shadow-popup: 0 3px 18px 0 rgb(0, 0, 0);
  --crm-heading-color: var(--crm-text-light-color);
  --crm-primary-ink-color: var(--crm-c-gray-300);
  --crm-secondary-ink-color: #cdcdcd;
  --crm-success-ink-color: var(--crm-success-light-color);
  --crm-warning-ink-color: var(--crm-warning-light-color);
  --crm-danger-ink-color: var(--crm-danger-light-color);
  --crm-info-ink-color: var(--crm-info-light-color);
  --crm-tabs-bg-color: var(--crm-layer2-bg-color);
  --crm-contact-label-bg-color: transparent;
  --crm-dialog-header-border-color: transparent;

  /* RiverEdge dark stream overrides */
  --crm-c-gray-800: #1e2129;
  --crm-c-gray-700: #2d3140;
  --crm-c-gray-600: #55596a;
  --crm-c-gray-500: #9a9ba8;
  --crm-text-light-color: #f0f2f5;
  --crm-text-dark-color: #2a2933;
  --crm-link-color: var(--crm-c-amber);
  --crm-link-hover-color: var(--crm-c-amber-light);
  --crm-focus-color: var(--crm-link-color);
  --crm-page-bg-color: #1c1f2b;
  --crm-container-bg-color: #242836;
  --crm-layer1-bg-color: #2b2f3e;
  --crm-layer2-bg-color: #333748;
  --crm-shadow-block: 0 3px 18px 0 rgba(0, 0, 0, .6);
  --crm-heading-bg-color: var(--crm-secondary-color);
  --crm-accordion-body-bg-color: var(--crm-layer1-bg-color);
  --crm-form-block-bg-color: var(--crm-container-bg-color);
  --crm-input-border-color: var(--crm-c-gray-500);
  /* Table row hover — must be a dark-palette value; the default is
     --crm-c-yellow-light which renders as light-on-light in dark mode. */
  --crm-table-row-hover-color: #3a3f58;
  /* Alert success — dark bg with readable light-green text */
  --crm-alert-success-bg-color: #1c3d2a;
  --crm-alert-success-border-color: #2d6645;
  --crm-alert-success-text-color: #88dca8;
  /* Alert info — dark blue bg with readable light-blue text */
  --crm-alert-info-bg-color: #0f2a3d;
  --crm-alert-info-border-color: #1e5278;
  --crm-alert-info-text-color: #7ec8f0;
  --crm-input-bg-color: #262a38;
  --crm-contact-header-bg-color: var(--crm-layer2-bg-color);
  --crm-contact-header2-bg-color: #1c1f2b;
  --crm-contact-block-bg-color: var(--crm-container-bg-color);
  --crm-contact-tabs-bg-color: var(--crm-layer1-bg-color);
  --crm-contact-panel-bg-color: var(--crm-container-bg-color);
  --crm-contact-tab-hover-bg-color: var(--crm-layer2-bg-color);
  --crm-contact-box-shadow: inset 0 5px 18px -5px rgba(0, 0, 0, .75);
  --crm-contact-edit-border: 1px solid var(--crm-link-hover-color);
  --crm-dialog-body-bg-color: var(--crm-container-bg-color);
  --crm-dashlet-header-bg-color: var(--crm-layer1-bg-color);
  --crm-dropdown-bg-color: var(--crm-container-bg-color);
  --crm-dropdown2-bg-color: var(--crm-container-bg-color);
  --crm-notify-bg-color: var(--crm-container-bg-color);
  --crm-wizard-bg-color: var(--crm-container-bg-color);
  --crm-panel-bg-color: var(--crm-container-bg-color);
  --crm-panel-border-col: var(--crm-c-gray-500);
}

/* CiviCRM nav bar — forced dark. */
html[data-riveredge-theme="dark"] body #civicrm-menu-nav,
html[data-riveredge-theme="dark"] body #civicrm-menu {
  background-color: #151821 !important;
  border-bottom-color: #333748 !important;
}

/* Submenu dropdowns — clearly lighter than the page (#12141a) and containers
   (#1a1d25) so they read as a floating panel, not a page takeover.
   Box-shadow kept modest: a 32 px / 0.85 spread was making the surrounding
   near-black page content visually vanish (dark + strong shadow = void). */
html[data-riveredge-theme="dark"] body #civicrm-menu ul {
  background-color: #363b50 !important;
  border: 1px solid #4e5470 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55) !important;
}

/* SmartMenus scroll arrows — CiviCRM's sm-civicrm theme has no CSS for these,
   so they default to position:static and fall into normal document flow.
   That expands the nav <li> and lets the arrows overflow the fixed nav bar,
   covering page content as invisible-but-layout-occupying ghost elements.
   position:absolute keeps them as overlays that don't disturb flow or layout. */
.sm-civicrm .scroll-up,
.sm-civicrm .scroll-down {
  position: absolute;
  display: none;
  overflow: hidden;
  height: 20px;
  background: var(--crm-menubar-color, #222831);
}
html[data-riveredge-theme="dark"] .sm-civicrm .scroll-up,
html[data-riveredge-theme="dark"] .sm-civicrm .scroll-down {
  background: #363b50;
}

/* All nav links + toggle text */
html[data-riveredge-theme="dark"] body #civicrm-menu-nav a,
html[data-riveredge-theme="dark"] body #civicrm-menu-nav a:visited,
html[data-riveredge-theme="dark"] body #civicrm-menu-nav span,
html[data-riveredge-theme="dark"] body #riveredge-theme-toggle-wrapper,
html[data-riveredge-theme="dark"] body #riveredge-theme-toggle {
  color: #f0f2f5 !important;
}

html[data-riveredge-theme="dark"] body #civicrm-menu-nav a:hover,
html[data-riveredge-theme="dark"] body #civicrm-menu-nav a:focus,
html[data-riveredge-theme="dark"] body #riveredge-theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
}

/* Any item with .highlighted (SmartMenus sets this on the hovered/focused item
   and its open ancestors). Without this, the PHP $highlightColor (typically a
   light accent) bleeds through at every level in dark mode. */
html[data-riveredge-theme="dark"] body #civicrm-menu a.highlighted {
  background-color: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

/* Drupal page background — forced dark.
   Only override background; let CSS variables handle text colour so we
   don't clobber the dark contact header's white text via inheritance. */
html[data-riveredge-theme="dark"] body,
html[data-riveredge-theme="dark"] #page,
html[data-riveredge-theme="dark"] main,
html[data-riveredge-theme="dark"] .layout-container,
html[data-riveredge-theme="dark"] #block-claro-content {
  background-color: #12141a !important;
}

/* Danger/error rows (e.g. contact merge) — muted dark red instead of
   the default bright pink which is jarring in dark mode. */
html[data-riveredge-theme="dark"] {
  --crm-alert-danger-bg-color: #3d1520;
  --crm-alert-danger-text-color: #f0aabb;
  /* SearchKit draggable field rows use --crm-drag-bg-color */
  --crm-drag-bg-color: #282c38;
}

/* Select2 multi-value search input — select2's stylesheet hardcodes
   background:white on .select2-input; override it for dark mode. */
html[data-riveredge-theme="dark"] .select2-container-multi .select2-choices .select2-input {
  background-color: #242836 !important;
  color: #f0f2f5 !important;
}

/* Summernote editable area — light background so inherited dark text colours
   stay readable when editing.
   .note-editable.valid covers form-validated instances (e.g. event edit). */
html[data-riveredge-theme="dark"] .note-editable,
html[data-riveredge-theme="dark"] .note-editable.valid {
  background: #888a8f !important;
  color: #1a1a1a !important;
}


/* CiviCRM content containers — slightly lighter than page bg */
html[data-riveredge-theme="dark"] .crm-container,
html[data-riveredge-theme="dark"] #crm-main,
html[data-riveredge-theme="dark"] .crm-content-block {
  background-color: #1a1d25 !important;
}

/* ── Force LIGHT (override OS dark preference) ───────────────────────────── */
html[data-riveredge-theme="light"] {
  color-scheme: light;

  --crm-text-color: #34303b;
  --crm-border-color: #cad5d7;
  --crm-paper: #fff;
  --crm-ink: #0a0a0a;
  --crm-layer1-bg-color: #f3f6f7;
  --crm-layer2-bg-color: #ebeff0;
  --crm-page-bg-color: #e8eef0;
  --crm-container-bg-color: #fff;
  --crm-link-color: #005893;
  --crm-link-hover-color: #043b60;
  --crm-focus-color: #005893;
  --crm-input-bg-color: #fff;
  --crm-input-border-color: #c2cfd8;
  --crm-shadow-block: 0 3px 18px 0 rgba(48, 40, 40, .25);
  --crm-shadow-popup: 0 3px 18px 0 rgba(48, 40, 40, .25);
  --crm-heading-bg-color: var(--crm-layer2-bg-color);
  --crm-heading-color: var(--crm-text-dark-color);
  --crm-contact-header-bg-color: #222831;
  --crm-contact-header2-bg-color: #393a3f;
  --crm-contact-block-bg-color: #fff;
  --crm-contact-tabs-bg-color: #fff;
  --crm-contact-tab-hover-bg-color: #ebeff0;
  --crm-contact-label-bg-color: #fff;
  --crm-contact-box-shadow: inset 0 3px 18px -5px rgba(0, 0, 0, .25);
  --crm-accordion-body-bg-color: transparent;
  --crm-form-block-bg-color: transparent;
  --crm-dropdown-bg-color: #fff;
  --crm-dropdown2-bg-color: #fff;
  /* RiverLea defaults --crm-dropdown-color to --crm-text-light-color (#f0f2f5)
     which is designed for dark-nav dropdowns but is invisible on white bg. */
  --crm-dropdown-color: #34303b;
  --crm-notify-bg-color: #fff;
  --crm-dialog-body-bg-color: #fff;
  --crm-dashlet-header-bg-color: var(--crm-secondary-color);
  --crm-panel-bg-color: #fff;
  --crm-wizard-bg-color: #fff;
  --crm-tabs-bg-color: #f3f6f7;
}

/* CiviCRM nav bar — forced light.
   The stream gives the nav a dark bg via CSS variables, but crm-menubar.css
   overrides it to background:transparent on mobile. Force it opaque so the
   Drupal page content doesn't show through on small screens. */
html[data-riveredge-theme="light"] body #civicrm-menu-nav {
  background-color: #222831 !important;
}

/* Drupal page background — forced light */
html[data-riveredge-theme="light"] body,
html[data-riveredge-theme="light"] #page,
html[data-riveredge-theme="light"] main,
html[data-riveredge-theme="light"] .layout-container,
html[data-riveredge-theme="light"] #block-claro-content {
  background-color: #e8eef0 !important;
}

html[data-riveredge-theme="light"] .crm-container,
html[data-riveredge-theme="light"] #crm-main,
html[data-riveredge-theme="light"] .crm-content-block {
  background-color: #fff !important;
}