/* ==========================================================================
   EMITARA CHILD THEME — style.css  (FINAL)
   Drupal 11 + CiviCRM child theme of Tara.
   Loads after tara/global-styling via weight:9999 in emitara.libraries.yml
   ========================================================================== */

/* ==========================================================================
   1) FONTS — Open Sans (TTF files in themes/custom/emitara/fonts/)
   Note: woff2 paths are wrong in Tara's preload, use TTF directly
   ========================================================================== */
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   2) DESIGN TOKENS
   ========================================================================== */
:root {
  --emit-beige: #f6debb;
  --emit-beige-2: #fff8ed;
  --emit-red: #9b1226;
  --emit-green: #127475;
  --emit-green-2: #0c5354;
  --emit-dark: #020122;
  --emit-row-alt: rgba(235, 242, 246, 0.5);

  --r-sm: 6px;
  --r-md: 20px;
  --btn-h: 40px;

  --max-w: 1800px;
  --ease: 0.2s ease-in-out;
}

body,
p,
div,
span,
a:not(.helpicon),
li,
td,
th,
label,
blockquote,
caption,
input,
select,
textarea,
button,
h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.crm-page-title {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
}

i.fa,
i.fas,
i.far,
i.fal,
i.fab,
i[class*="fa-"],
i.crm-i,
.crm-i::before {
  font-family:
    "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
}

body {
  color: var(--emit-dark);
  font-size: 16px;
  line-height: 1.6;
}

*::selection {
  background: var(--emit-green) !important;
  color: #fff !important;
}
*::-moz-selection {
  background: var(--emit-green) !important;
  color: #fff !important;
}

a,
.page-civicrm a,
.page-civicrm .crm-container a {
  color: var(--emit-red);
  transition: color var(--ease);
}
a:hover,
a:focus,
.page-civicrm a:hover,
.page-civicrm .crm-container a:hover {
  color: var(--emit-green);
}
/*
.container, .main-wrapper .container, .page-civicrm .container {
  width: 100%; max-width: none !important;
  padding-left: 24px !important; padding-right: 24px !important; margin: 0;
}
*/
@media (min-width: 1801px) {
  .container,
  .main-wrapper .container,
  .page-civicrm .container {
    max-width: var(--max-w) !important;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ==========================================================================
   4) TYPOGRAPHY
   ========================================================================== */
h1,
h1.page-title,
.page-title-wrap h1,
.block-page-title-block h1,
.crm-page-title {
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  color: var(--emit-dark) !important;
  margin: 0 0 20px !important;
}
h2,
h3,
h4,
h5,
h6 {
  color: var(--emit-dark);
  font-weight: 700;
}
@media (max-width: 950px) {
  h1,
  h1.page-title,
  .crm-page-title {
    font-size: 28px !important;
  }
}
/* ==========================================================================
   5) BUTTONS
   ========================================================================== */
button,
.button,
.btn,
a.button,
a.btn,
input[type="submit"],
input[type="button"],
input[type="reset"],
input.form-submit,
.js-form-submit,
.page-civicrm #bootstrap-theme .btn,
.page-civicrm #bootstrap-theme .btn-primary,
.page-civicrm #bootstrap-theme .btn-default,
.page-civicrm .crm-container .btn,
.page-civicrm .crm-container .btn-primary,
.page-civicrm .crm-container .btn-default {
  /*
      	min-height:      var(--btn-h) !important;
  height:          var(--btn-h) !important;
  padding:         0 20px !important;
  border:          0 !important;
  */
  border-radius: var(--r-sm) !important;
  background: var(--emit-green) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: var(--btn-h) !important;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: none !important;
  transition: background var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 10px;
}
button:hover,
.btn:hover,
.button:hover,
a.button:hover,
a.btn:hover,
input[type="submit"]:hover,
.page-civicrm .crm-container .btn:hover {
  background: var(--emit-green-2) !important;
  color: #fff !important;
}
.page-civicrm .crm-container .btn-group > .btn.dropdown-toggle {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

/* Small buttons (btn-sm) — used inside forms/popups for Add/Copy etc. */
.btn-sm,
.btn.btn-sm,
.page-civicrm .crm-container .btn-sm,
.page-civicrm .crm-container .btn.btn-sm,
.page-civicrm .crm-container .af-repeat-add-btn {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 12px !important;
  line-height: 34px !important;
}

/* Views-header action links (e.g. AirFiles "Add/Replace"). The global .btn rule
   has its horizontal padding commented out (so it can't squash the small table
   checkbox/search buttons), so restore it just for these view-header links.
   NOT scoped to .page-civicrm — these Views pages (e.g. /em-airfiles) are Drupal
   routes without the page-civicrm body class. .view-header keeps it well-scoped. */
.view-header a.btn,
.view-header .btn {
  padding: 0 20px !important;
}

.page-civicrm .crm-search-display .form-inline {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 18px !important;
}
.page-civicrm .crm-search-display .form-inline > * {
  margin: 0 !important;
}

/* Push the right-side buttons group to the right */
.page-civicrm .crm-search-display .form-inline .form-group.pull-right,
.page-civicrm .crm-search-display .form-inline div[ng-include] {
  float: none !important;
  display: inline-flex !important;
  gap: 10px !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}
.page-civicrm .crm-search-display .form-inline .btn-group {
  margin: 0 !important;
  padding: 0 !important;
}
.page-civicrm .crm-search-display .form-inline .btn-group a.btn,
.page-civicrm .crm-search-display .form-inline .btn-group button.btn {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
/* Gear icon (settings) — positioned top-right of search display area */
.page-civicrm .af-admin-edit-form-link,
body.page-civicrm #bootstrap-theme .af-admin-edit-form-link,
body.page-civicrm .crm-container .af-admin-edit-form-link,
.page-civicrm div.pull-right.btn-group.af-admin-edit-form-link {
  float: right !important;
  position: relative !important;
  /*  display: inline-flex !important; */
  margin: 0 0 10px 0 !important;
  z-index: 20 !important;
}
/* The gear button itself — proper sizing */
.page-civicrm .af-admin-edit-form-link > .btn,
.page-civicrm .af-admin-edit-form-link > button,
body.page-civicrm #bootstrap-theme .af-admin-edit-form-link > .btn {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 12px !important;
}

/* Gear icon (settings dropdown) — fix overlapping content */
.page-civicrm .crm-search-display .crm-search-display-settings,
.page-civicrm .crm-search-display button[title*="Settings"],
.page-civicrm .crm-search-display .btn-group:last-child,
.page-civicrm .crm-search-display .dropdown:last-child {
  position: relative !important;
  z-index: 20 !important;
}

.page-civicrm .crm-search-display-table,
.page-civicrm .table-responsive,
.page-civicrm .crm-container .table-responsive {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (min-width: 1380px) {
  .page-civicrm .crm-search-display-table,
  .page-civicrm .table-responsive {
    overflow-x: visible !important;
  }
  .page-civicrm .crm-search-display-table table,
  .page-civicrm table.table {
    width: 100% !important;
    table-layout: fixed;
  }
}
@media (max-width: 1379px) {
  .page-civicrm .crm-search-display-table,
  .page-civicrm .table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  .page-civicrm .crm-search-display-table table,
  .page-civicrm table.table {
    min-width: 1200px !important;
    table-layout: auto;
  }
}
.page-civicrm .crm-search-display-table table,
.page-civicrm table.table {
  margin: 0 auto;
  border-collapse: collapse;
  border-spacing: 0;
  border: 0 !important;
  box-shadow: none !important;
}

table thead th,
.page-civicrm table.table thead th,
.page-civicrm .crm-search-display-table table thead th {
  background: var(--emit-beige) !important;
  color: var(--emit-dark) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  padding: 12px 10px !important;
  border: 0 !important;
  vertical-align: middle;
}

table tbody tr,
.page-civicrm table.table tbody tr {
  background: #fff !important;
}
table tbody tr:nth-child(even),
.page-civicrm table.table tbody tr:nth-child(even) {
  background: var(--emit-row-alt) !important;
}
table tbody td,
.page-civicrm table.table tbody td {
  background: transparent !important;
  color: var(--emit-dark) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  padding: 12px 10px !important;
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(155, 18, 38, 0.12) !important;
  vertical-align: top;
  word-wrap: break-word;
}

/* ==========================================================================

   13) TABLE FIRST COLUMN — select/checkbox controls
   Verified class: button.btn.btn-secondary-outline (NOT btn-default)
   No green bg, black border, aligned to bottom of header
   ========================================================================== */
.page-civicrm th.crm-search-result-select,
.page-civicrm td.crm-search-result-select {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  padding: 2px 2px !important;
  text-align: center !important;
  vertical-align: bottom !important;
}
.page-civicrm table.table thead th.crm-search-result-select {
  background: var(--emit-beige) !important;
  vertical-align: bottom !important;
}
.page-civicrm table.table tbody td.crm-search-result-select {
  background: transparent !important;
}
.page-civicrm .crm-search-result-select .btn-group,
.page-civicrm th.crm-search-result-select .btn-group {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Override green button rule for checkbox controls — transparent bg, #000 border
   MUST use #bootstrap-theme to beat the global button rule that uses ID selector */
.page-civicrm #bootstrap-theme .crm-search-result-select .btn-group > .btn,
.page-civicrm #bootstrap-theme .crm-search-result-select .btn-group > button,
.page-civicrm
  #bootstrap-theme
  .crm-search-result-select
  button.btn-secondary-outline,
.page-civicrm #bootstrap-theme .crm-search-result-select button.btn-default,
body.page-civicrm #bootstrap-theme .crm-search-result-select .btn,
body.page-civicrm #bootstrap-theme .crm-search-result-select button,
.page-civicrm th.crm-search-result-select .btn-group > .btn,
.page-civicrm th.crm-search-result-select .btn-group > button,
.page-civicrm td.crm-search-result-select .btn-group > .btn,
.page-civicrm td.crm-search-result-select .btn-group > button,
body.page-civicrm .crm-container .crm-search-result-select .btn,
body.page-civicrm .crm-container .crm-search-result-select button {
  background: transparent !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  color: var(--emit-dark) !important;
  min-height: 24px !important;
  height: 24px !important;
  line-height: 22px !important;
  padding: 0 3px !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.page-civicrm .crm-search-result-select button:hover,
body.page-civicrm .crm-container .crm-search-result-select .btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: var(--emit-dark) !important;
}
.page-civicrm .crm-search-result-select .btn-group > button:first-child,
.page-civicrm .crm-search-result-select .btn-group > .btn:first-child {
  width: 22px !important;
  flex: 0 0 22px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-right: 0 !important;
}
.page-civicrm .crm-search-result-select .btn-group > .dropdown-toggle {
  width: 14px !important;
  flex: 0 0 14px !important;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  padding: 0 !important;
}

/* Also align the sorting header cells to bottom */
.page-civicrm table.table thead th {
  vertical-align: bottom !important;
}

/* Sorting / column config buttons in table header — transparent bg, black border */
.page-civicrm #bootstrap-theme table thead th .btn,
.page-civicrm #bootstrap-theme table thead th button,
.page-civicrm #bootstrap-theme table thead th .btn-default,
.page-civicrm #bootstrap-theme table thead th .btn-xs,
.page-civicrm #bootstrap-theme table thead th .dropdown-toggle,
body.page-civicrm .crm-container table thead th .btn,
body.page-civicrm .crm-container table thead th button {
  background: transparent !important;
  border: 1px solid #000 !important;
  border-radius: 3px !important;
  color: #000 !important;
  min-height: 24px !important;
  height: 24px !important;
  line-height: 22px !important;
  padding: 0 4px !important;
  font-size: 11px !important;
  box-shadow: none !important;
}
.page-civicrm #bootstrap-theme table thead th .btn:hover,
body.page-civicrm .crm-container table thead th .btn:hover {
  background: rgba(0, 0, 0, 0.08) !important;
  color: #000 !important;
}
/* Icons inside sorting buttons — black */
.page-civicrm table thead th .btn i,
.page-civicrm table thead th .btn .crm-i,
.page-civicrm table thead th .btn .fa,
.page-civicrm table thead th .caret {
  color: #000 !important;
}

/* Table row action buttons (right side of each row) — dropdown z-index fix */
.page-civicrm table tbody td .btn-group {
  position: relative !important;
}
/* When open: the entire btn-group must be above ALL other rows */
.page-civicrm table tbody td .btn-group.open,
.page-civicrm #bootstrap-theme table td .btn-group.open {
  z-index: 9000 !important;
}
.page-civicrm table tbody td .btn-group.open > .dropdown-menu,
.page-civicrm #bootstrap-theme table td .btn-group.open > .dropdown-menu,
.page-civicrm .crm-container table td .btn-group.open > .dropdown-menu {
  z-index: 9001 !important;
  position: absolute !important;
  display: block !important;
}
/* Also the entire row must be above other rows when dropdown is open */
.page-civicrm table tbody tr:has(.btn-group.open) {
  position: relative !important;
  z-index: 9000 !important;
}
.page-civicrm table tbody td .btn-group .dropdown-menu {
  right: 0 !important;
  left: auto !important;
  min-width: 200px !important;
  background: #fff !important;
  border: 1px solid rgba(2, 1, 34, 0.12) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 20px rgba(2, 1, 34, 0.12) !important;
  padding: 6px 0 !important;
}
.page-civicrm table tbody td .btn-group .dropdown-menu > li > a {
  padding: 8px 16px !important;
  color: var(--emit-dark) !important;
  font-size: 13px !important;
  background: #fff !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  text-transform: none !important;
}
.page-civicrm table tbody td .btn-group .dropdown-menu > li > a:hover {
  background: var(--emit-beige-2) !important;
  color: var(--emit-green) !important;
}

/* 14a. Dialog container — visual styling only, sizing left to CiviCRM standard */
.page-civicrm .ui-dialog,
.crm-container .ui-dialog,
body .ui-dialog {
  z-index: 10050 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 18px 40px rgba(2, 1, 34, 0.18) !important;
}

/*.ui-widget-overlay, body .ui-widget-overlay { z-index: 10040 !important; } */

/* 14b. Titlebar — flex row so buttons sit side-by-side with consistent spacing.
   Using flex + position:static on the buttons (below) makes CiviCRM's inline
   style="right:2em"/"right:3.8em" inert (right only affects positioned elements),
   so no cache/cascade state can crowd the buttons again. */
.page-civicrm .ui-dialog .ui-dialog-titlebar,
.crm-container .ui-dialog-titlebar,
body .ui-dialog .ui-dialog-titlebar {
  border: 0 !important;
  background: var(--emit-beige) !important;
  color: var(--emit-dark) !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
/* jQuery UI clearfix pseudo-elements would become stray flex items — kill them */
.page-civicrm .ui-dialog .ui-dialog-titlebar::before,
.page-civicrm .ui-dialog .ui-dialog-titlebar::after,
body .ui-dialog .ui-dialog-titlebar::before,
body .ui-dialog .ui-dialog-titlebar::after {
  display: none !important;
}
.page-civicrm .ui-dialog .ui-dialog-title {
  color: var(--emit-dark) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 0 auto 0 0 !important; /* auto-right margin pushes the buttons to the right edge */
  padding: 0 !important;
  line-height: 60px !important;
}

/* 14c. Titlebar buttons (close, resize, print).
   position:relative (NOT static) keeps each button as the positioned ancestor for
   jQuery UI's absolutely-positioned icon span (.ui-button-icon, left:50%/top:50%),
   so the icon centers INSIDE the button. right:auto !important still neutralizes
   CiviCRM's inline style="right:3.8em" (important author beats non-important inline),
   so flex layout + the 8px gap still control position/spacing. */
.page-civicrm .ui-dialog .ui-dialog-titlebar-close,
.page-civicrm .ui-dialog .crm-dialog-titlebar-resize,
.page-civicrm .ui-dialog .crm-dialog-titlebar-print,
body .ui-dialog .ui-dialog-titlebar-close {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: var(--emit-green) !important;
  color: #fff !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Visual order: print | fullscreen | close. The close rule MUST stay first —
   resize & print ALSO carry .ui-dialog-titlebar-close, so listing close first
   lets the more specific resize/print rules win the source-order tiebreak. */
.page-civicrm .ui-dialog .ui-dialog-titlebar-close {
  order: 3 !important;
}
.page-civicrm .ui-dialog .crm-dialog-titlebar-resize {
  order: 2 !important;
}
.page-civicrm .ui-dialog .crm-dialog-titlebar-print {
  order: 1 !important;
}

/* 14d. Dialog content — standard CiviCRM sizing, just add padding */
.page-civicrm .ui-dialog .ui-dialog-content,
body .ui-dialog .ui-dialog-content {
  padding: 20px 24px !important;
  background: #fff !important;
}

/* 14e. Dropdowns INSIDE popups — z-index fix */
.ui-dialog .select2-container,
.ui-dialog .select2-drop,
.ui-dialog .select2-drop-active,
.ui-dialog .crm-container .select2-container,
body .select2-drop {
  z-index: 10060 !important;
}
.select2-drop,
.select2-drop-active,
body .select2-drop,
body .select2-drop-active {
  z-index: 10060 !important;
}
/* Also fix CiviCRM's own dropdown menus inside popups */
.ui-dialog .dropdown-menu,
.ui-dialog .crm-container .dropdown-menu {
  z-index: 10060 !important;
}

/* 14f. Buttons inside popups */
.page-civicrm .ui-dialog .ui-dialog-content .crm-submit-buttons,
.page-civicrm .ui-dialog .ui-dialog-content .form-actions {
  padding-top: 12px !important;
  margin-top: 12px !important;
}

/* 14e. FONT AWESOME ICONS IN jQuery UI DIALOGS
   Problem: .ui-icon applies background-image sprites from jquery-ui.min.css
   which hides Font Awesome ::before pseudo-elements (fa-times etc.)
   Fix: When .ui-icon also has a fa-* class, kill the sprite and restore FA */
.ui-dialog .ui-icon[class*="fa-"],
.ui-dialog .ui-button-icon[class*="fa-"],
.ui-dialog .ui-icon.fa-times,
.ui-dialog .ui-icon.fa-window-maximize,
.ui-dialog .ui-icon.fa-window-restore,
.ui-dialog .ui-icon.fa-print,
.ui-button .ui-icon[class*="fa-"],
.ui-widget-header .ui-icon[class*="fa-"],
body .ui-icon[class*="fa-"] {
  background-image: none !important;
  background-color: transparent !important;
  text-indent: 0 !important;
  overflow: visible !important;
  /* Restore Font Awesome rendering */
  font-family:
    "Font Awesome 5 Free", "Font Awesome 5 Pro", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  color: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Also fix the generic .ui-icon-closethick (jQuery UI's own close icon class) */
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon {
  background-image: none !important;
  text-indent: 0 !important;
  overflow: visible !important;
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-size: 16px !important;
  color: #fff !important;
}
/* If no fa-* class, provide fallback X via content */
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick::before {
  content: "\f00d"; /* fa-times */
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900;
}

/* ==========================================================================

   15) MISC
   ========================================================================== */
.message summary,
.page-civicrm #bootstrap-theme .alert-info {
  background-color: var(--emit-beige-2);
  color: var(--emit-dark);
}
li:has(a[href*="/civicrm/import/contact/xcm"]) {
  display: none !important;
}

/* Action-link buttons — need proper margin so they don't overlap content */
.page-civicrm .crm-container .action-link,
.page-civicrm .action-link,
.crm-container .action-link {
  height: auto !important;
  min-height: var(--btn-h) !important;
  margin-bottom: 14px !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
}

/* ==========================================================================
   16) MOBILE MENU — ≤950px
   Work with Tara's built-in mobile menu toggle system.
   Just adjust colors and sizing for our branding.
   ========================================================================== */
@media (max-width: 950px) {
  /* Header: let Tara handle stacking */
  .header-container .header-right {
    margin-left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }

  /* Menu items: reduce size to fit */
  nav#block-emitara-emtopmenu ul.menu > li,
  nav#block-emitara-myemit ul.menu > li,
  .primary-menu-wrapper nav ul.menu > li {
    min-width: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  nav#block-emitara-emtopmenu ul.menu > li > a,
  nav#block-emitara-emtopmenu ul.menu > li > span,
  nav#block-emitara-myemit ul.menu > li > a,
  .primary-menu-wrapper nav ul.menu > li > a,
  .primary-menu-wrapper nav ul.menu > li > span {
    font-size: 11px !important;
    padding: 6px 8px !important;
  }
  nav#block-emitara-emtopmenu ul.menu > li > a::before,
  nav#block-emitara-myemit ul.menu > li > a::before,
  .primary-menu-wrapper nav ul.menu > li > a::before,
  .primary-menu-wrapper nav ul.menu > li > span::before {
    font-size: 16px !important;
  }

  /* Nav bar: smaller height */
  nav#block-emitara-emtopmenu,
  nav#block-emitara-myemit,
  .primary-menu-wrapper nav.block-menu {
    min-height: 60px !important;
  }
  nav#block-emitara-emtopmenu ul.menu,
  nav#block-emitara-myemit ul.menu,
  .primary-menu-wrapper nav ul.menu {
    height: auto !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  /* Chevron smaller on mobile */
  nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > a::after,
  .primary-menu-wrapper nav ul.menu > li.menu-item-has-children > a::after {
    font-size: 6px !important;
  }
}

/* Additional: ensure select2 dropdown overlays properly on all viewports */
.select2-drop {
  z-index: 10060 !important;
}

/* Alert / status messages — push CiviCRM notifications below sticky header */
#crm-notification-container,
body #crm-notification-container,
.page-civicrm #crm-notification-container {
  z-index: 999999 !important;
}
/* Drupal messages also need to be visible */
.page-civicrm .messages,
.page-civicrm .alert,
.page-civicrm #bootstrap-theme .alert,
.page-civicrm .crm-container .alert,
body .messages--status,
body .messages--warning,
body .messages--error,
body .messages,
body .message {
  position: relative !important;
  z-index: 10000 !important;
}

.mit2-hero__text {
  max-width: 900px;
  margin: 20px auto 40px;
  padding: 0;
  background: transparent;
}
.mit2-hero__actions {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  font-size: 0 !important;
}
.mit2-hero__actions br {
  display: none !important;
}
/* ALL buttons as icon cards */
.mit2-hero__actions button,
.mit2-hero__actions .button--primary,
.mit2-hero__actions .button--secondary {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 180px !important;
  height: auto !important;
  padding: 30px 20px 24px !important;
  border-radius: 16px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  cursor: pointer !important;
  transition:
    transform 0.2s,
    box-shadow 0.2s !important;
  border: 1px solid rgba(18, 116, 117, 0.15) !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: var(--emit-green) !important;
  box-shadow: 0 1px 4px rgba(2, 1, 34, 0.04) !important;
  gap: 0 !important;
  flex: none !important;
}
.mit2-hero__actions button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(18, 116, 117, 0.12) !important;
}
/* Icon circle */
.mit2-hero__actions button::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 80px !important;
  height: 80px !important;
  border-radius: 50% !important;
  background: rgba(18, 116, 117, 0.08) !important;
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-size: 32px !important;
  color: var(--emit-green) !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
}
/* Icon assignments based on onclick href */
.mit2-hero__actions button[onclick*="events-dashboard"]::before,
.mit2-hero__actions button[onclick*="em-events"]::before {
  content: "\f073";
} /* fa-calendar */
.mit2-hero__actions button[onclick*="event/new"]::before {
  content: "\f271";
} /* fa-calendar-plus */
.mit2-hero__actions button[onclick*="suppliers"]::before {
  content: "\f2b5";
} /* fa-handshake */
.mit2-hero__actions button[onclick*="contact/add"]::before,
.mit2-hero__actions button[onclick*="/supplier'"]::before {
  content: "\f234";
} /* fa-user-plus */
.mit2-hero__actions button[onclick*="participants"]::before,
.mit2-hero__actions button[onclick*="event-participants"]::before {
  content: "\f0c0";
} /* fa-users */
.mit2-hero__actions button[onclick*="quick-participant"]::before {
  content: "\f234";
} /* fa-user-plus */

@media (max-width: 768px) {
  .mit2-hero__actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
  .mit2-hero__actions button {
    min-height: 140px !important;
    padding: 20px 14px 18px !important;
  }
  .mit2-hero__actions button::before {
    width: 60px !important;
    height: 60px !important;
    font-size: 24px !important;
    margin-bottom: 12px !important;
  }
}
@media (max-width: 480px) {
  .mit2-hero__actions {
    grid-template-columns: 1fr !important;
  }
}

/* 18) DRUPAL MENUS — style like CiviCRM menu with beige bg + icons
   Targets: nav#block-emitara-emtopmenu (EM Top Menu)
            nav#block-emitara-myemit (My EMIT)
            .primary-menu-wrapper nav
   ========================================================================== */

/* Container: beige bar matching CiviCRM menu style */
.primary-menu-wrapper,
.header-right .primary-menu-wrapper,
.header-right {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* Header container needs to be flex row with logo + menu — NO padding, NO gap */
.header-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  width: 100% !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
}
.header-container .site-branding-region,
.header-container .site-branding {
  flex: 0 0 auto !important;
 /* margin-top: 10px !important; */
}
/* Beige bg on header-right — white gap to logo via margin-left, beige to right edge */
.header-container .header-right {
  flex: 1 1 auto !important;
  margin-left: 150px !important; /* white gap between logo and beige */
  margin-right: 0 !important;
  padding: 0 30px 12px 150px !important; /* 150px left spacing for items, 30px right */
  background: var(--emit-beige) !important;
  border-bottom-left-radius: var(--r-md) !important;
}
@media (max-width: 1500px) {
  .header-container .header-right {
    margin-left: 60px !important;
    padding-left: 60px !important;
  }
}
@media (max-width: 950px) {
  .header-container .header-right {
    margin-left: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}

/*
.primary-menu-wrapper {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
*/
/*
nav#block-emitara-emtopmenu,
nav#block-emitara-myemit,
nav.menu-em-menu,
nav.menu-my-emit,
.primary-menu-wrapper nav.block-menu {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  min-height: 90px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;  
  overflow: visible !important;
  width: 100% !important;
}
*/

/*
nav#block-emitara-emtopmenu ul.menu,
nav#block-emitara-myemit ul.menu,
nav.menu-em-menu ul.menu,
.primary-menu-wrapper nav ul.menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: center !important; 
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 90px !important;
  gap: 0 !important;
}
*/

/*
nav#block-emitara-emtopmenu ul.menu > li,
nav#block-emitara-myemit ul.menu > li,
.primary-menu-wrapper nav ul.menu > li {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 130px !important;
  height: 90px !important;
  position: relative !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
} 
*/
/*
@media (max-width: 1400px) {
  nav#block-emitara-emtopmenu ul.menu > li,
  nav#block-emitara-myemit ul.menu > li,
  .primary-menu-wrapper nav ul.menu > li {
    min-width: 100px !important;
  }
}
@media (max-width: 1100px) {
  nav#block-emitara-emtopmenu ul.menu > li,
  nav#block-emitara-myemit ul.menu > li,
  .primary-menu-wrapper nav ul.menu > li {
    min-width: 80px !important;
  }
}
*/
/*
nav#block-emitara-emtopmenu ul.menu > li > a,
nav#block-emitara-emtopmenu ul.menu > li > span,
nav#block-emitara-myemit ul.menu > li > a,
nav#block-emitara-myemit ul.menu > li > span,
.primary-menu-wrapper nav ul.menu > li > a,
.primary-menu-wrapper nav ul.menu > li > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  padding: 4px 6px !important;
  text-decoration: none !important;
  color: var(--emit-dark) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  line-height: 1.15 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  transition: color var(--ease) !important;
  height: auto !important;
  min-height: auto !important;
  background: transparent !important;
  cursor: pointer !important;
}
*/
/* Hover: green text, NO black background */
/*
nav#block-emitara-emtopmenu ul.menu > li > a:hover,
nav#block-emitara-emtopmenu ul.menu > li > span:hover,
nav#block-emitara-myemit ul.menu > li > a:hover,
nav#block-emitara-myemit ul.menu > li > span:hover,
.primary-menu-wrapper nav ul.menu > li > a:hover,
.primary-menu-wrapper nav ul.menu > li > span:hover,
nav#block-emitara-emtopmenu ul.menu > li:hover > a,
nav#block-emitara-emtopmenu ul.menu > li:hover > span,
nav#block-emitara-myemit ul.menu > li:hover > a,
nav#block-emitara-myemit ul.menu > li:hover > span,
.primary-menu-wrapper nav ul.menu > li:hover > a,
.primary-menu-wrapper nav ul.menu > li:hover > span {
  color: var(--emit-green) !important;
  background: transparent !important;
  text-decoration: none !important;
}
*/
/* Icons via ::before — assign per menu item (both <a> and <span>) */
nav#block-emitara-emtopmenu ul.menu > li > a::before,
nav#block-emitara-emtopmenu ul.menu > li > span::before,
nav#block-emitara-myemit ul.menu > li > a::before,
nav#block-emitara-myemit ul.menu > li > span::before,
.primary-menu-wrapper nav ul.menu > li > a::before,
.primary-menu-wrapper nav ul.menu > li > span::before {
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  /*  font-size: 22px !important;
  color: var(--emit-green) !important;
  line-height: 1 !important;
  margin: 0 !important;
  */
}

/* Default icon for all items */
nav#block-emitara-emtopmenu ul.menu > li > a::before {
  content: "\f0c9";
} /* fa-bars */
nav#block-emitara-myemit ul.menu > li > a::before {
  content: "\f007";
} /* fa-user */
.primary-menu-wrapper nav ul.menu > li > a::before {
  content: "\f0c9";
} /* fa-bars (fallback) */
/* Default icon for span items (like Create Form) */
nav#block-emitara-emtopmenu ul.menu > li > span::before,
nav#block-emitara-myemit ul.menu > li > span::before,
.primary-menu-wrapper nav ul.menu > li > span::before {
  content: "\f15c";
} /* fa-file-alt */

/* Specific icons by link href or text */
nav ul.menu > li > a[href*="event/new"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="event/new"]::before {
  content: "\f271" !important;
} /* fa-calendar-plus */
nav ul.menu > li > a[href*="events-dashboard"]::before,
nav ul.menu > li > a[href*="em-events-dashboard"]::before,
nav
  ul.menu
  > li
  > a[data-drupal-link-system-path*="em-events-dashboard"]::before {
  content: "\f073" !important;
} /* fa-calendar */
nav ul.menu > li > a[href*="messages"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="messages"]::before {
  content: "\f0e0" !important;
} /* fa-envelope */
nav ul.menu > li > a[href*="event_announcements"]::before,
nav
  ul.menu
  > li
  > a[data-drupal-link-system-path*="event_announcements"]::before {
  content: "\f0a1" !important;
} /* fa-bullhorn */
nav ul.menu > li > a[href*="user/edit"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="user/edit"]::before {
  content: "\f013" !important;
} /* fa-cog */
nav ul.menu > li > a[href*="participant"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="participant"]::before {
  content: "\f0c0" !important;
} /* fa-users */
nav ul.menu > li > a[href*="supplier"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="supplier"]::before {
  content: "\f1b3" !important;
} /* fa-cubes */
nav ul.menu > li > a[href*="willcommen"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="willcommen"]::before {
  content: "\f015" !important;
} /* fa-home */
nav ul.menu > li > a[href*="afform"]::before,
nav ul.menu > li > a[href*="create-form"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="afform"]::before {
  content: "\f15c" !important;
} /* fa-file-alt */
/* Home — front page (logged-out menu) */
nav ul.menu > li > a[data-drupal-link-system-path="<front>"]::before {
  content: "\f015" !important;
} /* fa-home */
/* Login */
nav ul.menu > li > a[href*="user/login"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="user/login"]::before {
  content: "\f2f6" !important;
} /* fa-sign-in-alt */
/* Logout */
nav ul.menu > li > a[href*="user/logout"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="user/logout"]::before {
  content: "\f2f5" !important;
} /* fa-sign-out-alt */
/* Account */
nav ul.menu > li > a[href*="account"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="account"]::before {
  content: "\f007" !important;
} /* fa-user */
/* Events — client-dashboard */
nav ul.menu > li > a[href*="client-dashboard"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="client-dashboard"]::before {
  content: "\f073" !important;
} /* fa-calendar */
/* Messages — pmessage */
nav ul.menu > li > a[href*="pmessage"]::before,
nav ul.menu > li > a[data-drupal-link-system-path*="pmessage"]::before {
  content: "\f0e0" !important;
} /* fa-envelope */
/* Settings — participant-dashboard */
nav ul.menu > li > a[href*="participant-dashboard"]::before,
nav
  ul.menu
  > li
  > a[data-drupal-link-system-path*="participant-dashboard"]::before {
  content: "\f013" !important;
} /* fa-cog */
/* CiviCRM — only the main /civicrm link, not sub-paths */
nav ul.menu > li > a[href$="/civicrm"]::before,
nav ul.menu > li > a[data-drupal-link-system-path="civicrm"]::before {
  content: "\f085" !important;
} /* fa-cogs */
/* Home — first menu item in each nav block (overrides civicrm match for admin home) */
nav#block-emitara-eatopmenu ul.menu > li:first-child > a::before,
nav#block-emitara-clientmenu ul.menu > li:first-child > a::before,
nav#block-emitara-mainnavigation ul.menu > li:first-child > a::before,
nav#block-emitara-emtopmenu ul.menu > li:first-child > a::before,
nav#block-emitara-myemit ul.menu > li:first-child > a::before {
  content: "\f015" !important;
} /* fa-home */

/* Drupal menu submenus */
/*
nav#block-emitara-emtopmenu ul.submenu,
nav#block-emitara-myemit ul.submenu,
.primary-menu-wrapper nav ul.submenu,
nav#block-emitara-emtopmenu ul.menu ul,
.primary-menu-wrapper nav ul.menu ul {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 180px !important;
  width: max-content !important;
  background: #fff !important;
  border: 1px solid rgba(2,1,34,.08) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 24px rgba(2,1,34,.10) !important;
  padding: 8px 0 !important;
  z-index: 10020 !important;
  display: none !important;
  flex-direction: column !important;
  height: auto !important;
}
nav#block-emitara-emtopmenu ul.menu > li:hover > ul,
nav#block-emitara-myemit ul.menu > li:hover > ul,
.primary-menu-wrapper nav ul.menu > li:hover > ul {
  display: flex !important;
}
nav#block-emitara-emtopmenu ul.menu ul li,
.primary-menu-wrapper nav ul.menu ul li {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}
nav#block-emitara-emtopmenu ul.menu ul a,
.primary-menu-wrapper nav ul.menu ul a {
  display: block !important;
  padding: 9px 18px !important;
  font-size: 13px !important;
  color: var(--emit-dark) !important;
  text-transform: none !important;
  background: #fff !important;
  white-space: nowrap !important;
  min-height: 0 !important;
  height: auto !important;
  flex-direction: row !important;
}
nav#block-emitara-emtopmenu ul.menu ul a::before,
.primary-menu-wrapper nav ul.menu ul a::before {
  display: none !important;  
}
nav#block-emitara-emtopmenu ul.menu ul a:hover,
.primary-menu-wrapper nav ul.menu ul a:hover {
  background: var(--emit-beige-2) !important;
  color: var(--emit-green) !important;
}
*/
/* Drupal menu + counter badges (e.g. "Messages 2/4") */
/* The <a> is flex-column (icon above text). But "Messages 2/4" has
/* Messages link — CSS-only fix to get "Messages 2/4" on ONE line.
   Problem: flex-direction:column makes each text node a separate flex item.
   Fix: use display:block instead, so text flows inline naturally.
   ::before stays block (icon on its own line). */
nav#block-emitara-emtopmenu ul.menu > li > a[href*="/messages"],
nav#block-emitara-emtopmenu
  ul.menu
  > li
  > a[data-drupal-link-system-path="messages"],
nav#block-emitara-myemit ul.menu > li > a[href*="/messages"],
.primary-menu-wrapper nav ul.menu > li > a[href*="/messages"] {
  display: block !important;
  text-align: center !important;
  flex-direction: unset !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
}
nav#block-emitara-emtopmenu ul.menu > li > a[href*="/messages"]::before,
nav#block-emitara-myemit ul.menu > li > a[href*="/messages"]::before,
.primary-menu-wrapper nav ul.menu > li > a[href*="/messages"]::before {
  display: block !important;
  text-align: center !important;
  margin-bottom: 3px !important;
}
nav#block-emitara-emtopmenu ul.menu > li > a .pm-badge-unread,
nav#block-emitara-emtopmenu ul.menu > li > a .pm-badge-total,
nav#block-emitara-myemit ul.menu > li > a .pm-badge-unread,
nav#block-emitara-myemit ul.menu > li > a .pm-badge-total,
.primary-menu-wrapper nav ul.menu > li > a .pm-badge-unread,
.primary-menu-wrapper nav ul.menu > li > a .pm-badge-total {
  display: inline !important;
  font-size: inherit !important;
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  margin: 0 !important;
}
nav ul.menu > li > a .badge,
nav ul.menu > li > a .counter {
  display: inline !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Submenu indicator — replace "+" with chevron.
   The "+" comes from Tara theme (via ::after on li or a, or expand-sub element).
   Kill ALL sources and add chevron on li::after. */

/* Hide any expand-sub buttons/spans Tara injects */
nav#block-emitara-emtopmenu .expand-sub,
nav#block-emitara-myemit .expand-sub,
.primary-menu-wrapper .expand-sub,
nav#block-emitara-emtopmenu .sf-sub-indicator,
.primary-menu-wrapper .sf-sub-indicator,
nav#block-emitara-emtopmenu .menu-item__expand,
.primary-menu-wrapper .menu-item__expand {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  visibility: hidden !important;
}

/* Kill ::after on li — Tara might put "+" there */
nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children::after,
nav#block-emitara-myemit ul.menu > li.menu-item-has-children::after,
.primary-menu-wrapper nav ul.menu > li.menu-item-has-children::after {
  content: none !important;
  display: none !important;
}

/* Chevron on a::after — absolute to <a>, no effect on item position */
nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > a,
nav#block-emitara-myemit ul.menu > li.menu-item-has-children > a,
.primary-menu-wrapper nav ul.menu > li.menu-item-has-children > a,
nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > span,
nav#block-emitara-myemit ul.menu > li.menu-item-has-children > span,
.primary-menu-wrapper nav ul.menu > li.menu-item-has-children > span {
  position: relative !important;
}
nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > a::after,
nav#block-emitara-myemit ul.menu > li.menu-item-has-children > a::after,
.primary-menu-wrapper nav ul.menu > li.menu-item-has-children > a::after,
nav#block-emitara-emtopmenu ul.menu > li.menu-item-has-children > span::after,
nav#block-emitara-myemit ul.menu > li.menu-item-has-children > span::after,
.primary-menu-wrapper nav ul.menu > li.menu-item-has-children > span::after {
  content: "\f078" !important;
  font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
  font-weight: 900 !important;
  font-size: 7px !important;
  position: absolute !important;
  bottom: -4px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: var(--emit-green) !important;
  display: block !important;
  background: none !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  pointer-events: none !important;
}

19) AFFORM EDITOR — layout, buttons, inputs
   ========================================================================== */

/* Content area — remove unnecessary left gap/shift */
.page-civicrm .af-container,
.page-civicrm .af-form,
.page-civicrm .afform-container,
.page-civicrm .af-admin-container,
.page-civicrm #bootstrap-theme .af-container,
.page-civicrm #bootstrap-theme .af-admin-container {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* AfForm tabs — prevent overlap */
.page-civicrm .af-admin-list .nav-tabs,
.page-civicrm .afform-list-table .nav-tabs,
.page-civicrm #bootstrap-theme .nav-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  border-bottom: 2px solid var(--emit-beige) !important;
  margin-bottom: 16px !important;
}
.page-civicrm #bootstrap-theme .nav-tabs > li,
.page-civicrm .nav-tabs > li {
  flex: 0 0 auto !important;
  margin-bottom: -2px !important;
}
.page-civicrm #bootstrap-theme .nav-tabs > li > a,
.page-civicrm .nav-tabs > li > a {
  min-height: 36px !important;
  height: 36px !important;
  padding: 6px 16px !important;
  font-size: 13px !important;
  line-height: 24px !important;
  background: transparent !important;
  color: var(--emit-dark) !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  white-space: nowrap !important;
}
.page-civicrm #bootstrap-theme .nav-tabs > li.active > a,
.page-civicrm .nav-tabs > li.active > a {
  border-bottom-color: var(--emit-green) !important;
  color: var(--emit-green) !important;
  background: transparent !important;
  font-weight: 700 !important;
}
.page-civicrm #bootstrap-theme .nav-tabs > li > a:hover,
.page-civicrm .nav-tabs > li > a:hover {
  background: var(--emit-beige-2) !important;
  color: var(--emit-green) !important;
  border-bottom-color: var(--emit-green) !important;
}

/* AfForm buttons — differentiate from primary action buttons */
.page-civicrm .af-container .btn-default,
.page-civicrm .af-form .btn-default,
.page-civicrm #bootstrap-theme .af-container .btn-default,
.page-civicrm .afform-container .btn-default,
.page-civicrm .af-admin-container .btn-default,
.page-civicrm #bootstrap-theme .af-admin-container .btn-default {
  background: #fff !important;
  color: var(--emit-green) !important;
  border: 1px solid var(--emit-green) !important;
  min-height: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 14px !important;
}
.page-civicrm .af-container .btn-default:hover,
.page-civicrm #bootstrap-theme .af-container .btn-default:hover,
.page-civicrm #bootstrap-theme .af-admin-container .btn-default:hover {
  background: var(--emit-beige-2) !important;
  color: var(--emit-green-2) !important;
}

/* AfForm btn-info, btn-warning, btn-danger — smaller, not green */
.page-civicrm #bootstrap-theme .af-container .btn-info,
.page-civicrm #bootstrap-theme .af-admin-container .btn-info {
  background: #17a2b8 !important;
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}
.page-civicrm #bootstrap-theme .af-container .btn-danger,
.page-civicrm #bootstrap-theme .af-admin-container .btn-danger {
  background: var(--emit-red) !important;
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}
.page-civicrm #bootstrap-theme .af-container .btn-warning,
.page-civicrm #bootstrap-theme .af-admin-container .btn-warning {
  background: #e0a800 !important;
  color: #fff !important;
  min-height: 34px !important;
  height: 34px !important;
  font-size: 12px !important;
  padding: 0 12px !important;
}

/* AfForm inputs — softer borders and less padding */
.page-civicrm .af-container input[type="text"],
.page-civicrm .af-container input[type="email"],
.page-civicrm .af-container input[type="number"],
.page-civicrm .af-container input[type="url"],
.page-civicrm .af-container select,
.page-civicrm .af-container textarea,
.page-civicrm .af-form input[type="text"],
.page-civicrm .af-form select,
.page-civicrm .af-form textarea,
.page-civicrm .afform-container input,
.page-civicrm .afform-container select,
.page-civicrm .afform-container textarea,
.page-civicrm #bootstrap-theme .af-container input.form-control,
.page-civicrm #bootstrap-theme .af-container select.form-control,
.page-civicrm #bootstrap-theme .af-container textarea.form-control,
.page-civicrm #bootstrap-theme .af-admin-container input.form-control,
.page-civicrm #bootstrap-theme .af-admin-container select.form-control {
  border: 2px solid rgba(18, 116, 117, 0.35) !important;
  border-radius: 8px !important;
  padding: 6px 12px !important;
  height: 38px !important;
  min-height: 38px !important;
  font-size: 14px !important;
  line-height: normal !important;
}
.page-civicrm .af-container textarea,
.page-civicrm #bootstrap-theme .af-container textarea.form-control {
  height: auto !important;
  min-height: 80px !important;
}

/* AfForm lists / tables — Name/Page columns don't overlap */
.page-civicrm .af-admin-list table,
.page-civicrm .afform-list-table {
  table-layout: auto !important;
  width: 100% !important;
}
.page-civicrm .af-admin-list table td,
.page-civicrm .af-admin-list table th {
  white-space: normal !important;
  word-break: break-word !important;
  padding: 8px 10px !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   FORM STYLING — clean, modern form fields
   ========================================================================== */

/* All text inputs, selects, textareas */
.page-civicrm input[type="text"],
.page-civicrm input[type="email"],
.page-civicrm input[type="number"],
.page-civicrm input[type="url"],
.page-civicrm input[type="tel"],
.page-civicrm input[type="password"],
.page-civicrm input[type="search"],
.page-civicrm input[type="date"],
.page-civicrm select,
.page-civicrm textarea,
.page-civicrm .crm-container input[type="text"],
.page-civicrm .crm-container select,
.page-civicrm .crm-container textarea,
.page-civicrm #bootstrap-theme .form-control {
  background: #f7f8fa !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  color: var(--emit-dark) !important;
  transition:
    border-color 0.2s,
    box-shadow 0.2s !important;
  max-height: 42px !important;
}
/*
.page-civicrm textarea,
.page-civicrm .crm-container textarea {
  max-height: none !important;
  min-height: 100px !important;
}
*/
/* Focus state */
.page-civicrm input[type="text"]:focus,
.page-civicrm select:focus,
.page-civicrm textarea:focus,
.page-civicrm .crm-container input:focus,
.page-civicrm .crm-container select:focus {
  border-color: var(--emit-green) !important;
  box-shadow: 0 0 0 2px rgba(18, 116, 117, 0.12) !important;
  outline: none !important;
}

/* Select2 dropdowns — prevent double styling */
/* The .select2-container gets .form-control class which triggers our input styles.
   Override with higher specificity to reset the wrapper. */
.page-civicrm .form-control.select2-container,
.page-civicrm .crm-container .form-control.select2-container,
.page-civicrm #bootstrap-theme .form-control.select2-container,
.page-civicrm .select2-container,
.page-civicrm .crm-container .select2-container {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  max-height: none !important;
  height: auto !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
/* Style only the visible choice element inside */
.page-civicrm .select2-container .select2-choice,
.page-civicrm .select2-container--default .select2-selection {
  background: #f7f8fa !important;
  border: 1px solid #d0d5dd !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 4px 12px !important;
  line-height: 30px !important;
  display: flex !important;
  align-items: center !important;
}
.page-civicrm .select2-container .select2-choice:hover,
.page-civicrm .select2-container--default .select2-selection:hover {
  border-color: var(--emit-green) !important;
}

/* Form table rows — spacing */
.page-civicrm .crm-container table.form-layout td,
.page-civicrm .crm-container table.form-layout-compressed td {
  padding: 8px 6px !important;
  vertical-align: middle !important;
}
/* Label cells */
.page-civicrm .crm-container table.form-layout td.label,
.page-civicrm .crm-container table.form-layout-compressed td.label {
  font-weight: 600 !important;
  color: var(--emit-dark) !important;
  white-space: nowrap !important;
  padding-right: 12px !important;
}

/* Form section borders — subtle separators between rows */
.page-civicrm .crm-container table.form-layout > tbody > tr,
.page-civicrm .crm-container table.form-layout-compressed > tbody > tr {
  border-bottom: 1px solid #eef0f3 !important;
}

/* ==========================================================================
   PATCHES
   ========================================================================== */

/* 1. Chrome top space — remove ALL spacing on header chain 
header#header,
body header#header,
body.page-civicrm header#header,
body.page-civicrm .header,
body.page-civicrm div.header,
header#header .container,
body.page-civicrm header#header .container,
body.page-civicrm header#header div.header,
body header .container,
header .container {
  margin-top: 0 !important;
  margin-bottom: 30px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
*/
/* Header container — override Tara _header.scss padding: 0 0 20px 0 */
header .header-container,
header#header .header-container,
.header .header-container {
  padding: 0 !important;
  gap: 0 !important;
}
/* Header wrapper — no border/separator gap */
header#header {
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 10px !important; /* breadcrumb spacing */
}
/* CiviCRM dialog-off-canvas — don't add extra padding on non-CiviCRM pages */
body:not(.page-civicrm) .dialog-off-canvas-main-canvas {
  padding-top: 0 !important;
}

/* Fix Chrome top space — CiviCRM sets top:40px/30px on menu when below-cms-menu.
   This creates extra space in Chrome. Override to 0. */
@media (min-width: 768px) {
  body.crm-menubar-below-cms-menu > #civicrm-menu-nav ul#civicrm-menu {
    top: 0 !important;
  }
  body.crm-menubar-below-cms-menu > #civicrm-menu-nav #civicrm-menu {
    top: 0 !important;
  }
  /* Body padding should match ONLY the menu height — no extra offset */
  body.crm-menubar-visible.crm-menubar-below-cms-menu {
    padding-top: var(--crm-menubar-height) !important;
  }
}

/* 3. Buttons margin — action-link, toolbar buttons, submit buttons need spacing */
.page-civicrm .crm-container .crm-submit-buttons,
.page-civicrm .crm-submit-buttons,
.crm-container .crm-submit-buttons {
  margin-bottom: 14px !important;
  margin-top: 8px !important;
}
.page-civicrm .crm-container .action-link,
.page-civicrm .action-link,
.crm-container .action-link {
  height: auto !important;
  min-height: var(--btn-h) !important;
  margin-bottom: 14px !important;
}
/* Search task menu (ACTION dropdown) */
.page-civicrm .crm-search-tasks-menu,
.page-civicrm crm-search-tasks-menu,
.page-civicrm .crm-container crm-search-tasks-menu,
.page-civicrm .form-inline {
  margin-bottom: 12px !important;
}
/* Toolbar buttons above search displays */
.page-civicrm .crm-search-display .form-inline,
.page-civicrm .crm-container .form-inline {
  margin-bottom: 10px !important;
}

/* 5. Accordion headers — emit-green-2 background */
.page-civicrm .crm-container .crm-accordion-header,
.page-civicrm .crm-accordion-header,
.crm-container .crm-accordion-header,
.crm-container details[open] > summary,
.crm-container .crm-accordion-bold > summary,
.page-civicrm #bootstrap-theme .crm-accordion-header,
.page-civicrm details.crm-accordion-bold > summary {
  background-color: var(--emit-green-2) !important;
  background: var(--emit-green-2) !important;
  color: #fff !important;
}
.page-civicrm .crm-container .crm-accordion-header a,
.crm-container .crm-accordion-header a {
  color: #fff !important;
}

/* 1. ng-scope btn-group (select all/action) — no margin, no z-index */
.page-civicrm .crm-container .btn-group.ng-scope,
.page-civicrm .crm-container div.btn-group[ng-if*="settings.actions"] {
  margin-bottom: 0 !important;
  z-index: auto !important;
  position: static !important;
}
/* 1b. When dropdown is open, anchor it so the menu positions under the button */
.page-civicrm .crm-container .btn-group.ng-scope.open,
.page-civicrm .crm-container div.btn-group[ng-if*="settings.actions"].open {
  position: relative !important;
  z-index: 1000 !important;
}
/* Ensure the dropdown menu sits below the button (vertical only — let Bootstrap handle left/right) */
.page-civicrm .crm-container .btn-group.ng-scope.open > .dropdown-menu,
.page-civicrm
  .crm-container
  div.btn-group[ng-if*="settings.actions"].open
  > .dropdown-menu {
  top: 100% !important;
  bottom: auto !important;
}

/* 2. Form labels — more vertical spacing between form items */
.page-civicrm #bootstrap-theme label,
.page-civicrm .crm-container label,
label.crm-af-field-label {
  margin-top: 10px !important;
}

/* 3. Stacked form inputs — spacing between consecutive fields */
/*
.page-civicrm .crm-af-field + .crm-af-field,
.page-civicrm af-field + af-field,
.page-civicrm .crm-form-date-wrapper + .crm-form-date-wrapper,
.page-civicrm .form-group + .form-group {
  margin-top: 10px !important;
}
*/

/* 6. AF pane headers — emit-green-2 bg */
.af-container-style-pane > .af-title,
.page-civicrm .af-container-style-pane > .af-title,
.page-civicrm #bootstrap-theme .af-container-style-pane > .af-title {
  background-color: var(--emit-green-2) !important;
  background: var(--emit-green-2) !important;
  color: #fff !important;
  padding: 8px 14px !important;
  border-radius: 4px 4px 0 0 !important;
  position: relative;
}

/* 13. Fix004 — CiviMail send-test buttons: no overlap, align with button bar */
.page-civicrm button.crmMailing-btn-primary,
.page-civicrm button.crmMailing-btn {
  position: static !important;
  float: none !important;
  display: inline-block !important;
  vertical-align: bottom !important;
  margin-top: 15px !important;
  margin-bottom: 0 !important;
}

/* 14. Fix005 — inner padding for participant/contact forms and accordions */
.page-civicrm form.ng-isolate-scope > .af-container,
.page-civicrm form[ng-form] > .af-container {
  padding: 15px 20px !important;
}
/* Reset inner .af-container padding inside panes (14c handles pane padding) */
.page-civicrm fieldset.af-container-style-pane .af-container,
.page-civicrm details.af-container-style-pane .af-container {
  padding: 0 !important;
  margin: 0 !important;
}
.page-civicrm
  .crm-accordion-bold.crm-contactDetails-accordion
  > .crm-accordion-body,
.page-civicrm .crm-accordion-bold.crm-address-accordion > .crm-accordion-body,
.page-civicrm
  .crm-accordion-bold.crm-notesBlock-accordion
  > .crm-accordion-body {
  padding: 15px 20px !important;
}
/* 14b. Transparent table rows inside Fix005 containers only */
.page-civicrm form.ng-isolate-scope > .af-container table tr,
.page-civicrm form[ng-form] > .af-container table tr,
.page-civicrm .af-container.af-container-style-pane > .af-container table tr,
.page-civicrm
  .crm-accordion-bold.crm-contactDetails-accordion
  > .crm-accordion-body
  table
  tr,
.page-civicrm
  .crm-accordion-bold.crm-address-accordion
  > .crm-accordion-body
  table
  tr,
.page-civicrm
  .crm-accordion-bold.crm-notesBlock-accordion
  > .crm-accordion-body
  table
  tr {
  background: transparent !important;
  background-color: transparent !important;
}

/* 14c. AfForm pane/fieldset/details padding (Quick Participant Registration etc.) */
.page-civicrm fieldset.af-container.af-container-style-pane,
#bootstrap-theme fieldset.af-container.af-container-style-pane {
  padding: 0 !important;
  box-sizing: border-box !important;
}

.page-civicrm details.af-container.af-container-style-pane,
#bootstrap-theme details.af-container.af-container-style-pane {
  padding: 0px !important;
  box-sizing: border-box !important;
}
/* Ensure inner content respects pane boundaries */
.page-civicrm .af-container-style-pane af-field,
.page-civicrm .af-container-style-pane .crm-af-field {
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}
.page-civicrm .af-container-style-pane af-field input,
.page-civicrm .af-container-style-pane af-field select,
.page-civicrm .af-container-style-pane af-field .select2-container,
.page-civicrm .af-container-style-pane af-field .crm-form-date-wrapper {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Consistent vertical spacing between stacked fields in panes */
.page-civicrm .af-container-style-pane > af-field + af-field,
.page-civicrm .af-container-style-pane > .crm-af-field + .crm-af-field,
.page-civicrm .af-container-style-pane > af-field + fieldset,
.page-civicrm .af-container-style-pane > fieldset + af-field {
  margin-top: 15px !important;
}
/* Inner crm-af-field wrapper should not add extra indentation */
.page-civicrm .af-container-style-pane af-field > div.crm-af-field {
  margin-left: 0 !important;
  padding-left: 0 !important;
}
/* Labels within panes aligned flush left */
.page-civicrm .af-container-style-pane label.crm-af-field-label {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* 14d. Quick Participant Registration — outer div wrapper: no border, no padding-top */
.page-civicrm
  afform-quick-participant-registration
  div.af-container.af-container-style-pane {
  border: none !important;
  padding: 0 !important;
}

.crm-container .af-container.af-layout-cols {
  align-items: baseline;
}

#bootstrap-theme h4.af-title {
  background: var(--emit-green);
  color: #fff;
  padding: 1rem;
}

/* 18. WYSIWYG / CKEditor — reset toolbar buttons to default look */
.ck.ck-editor button,
.ck.ck-editor .ck-button,
.ck.ck-toolbar button,
.ck.ck-toolbar .ck-button,
.ck-editor button,
.ck-editor .ck-button,
.cke_toolbox button,
.cke_toolbox a.cke_button,
.js-text-format-wrapper .ck button,
.text-format-wrapper .ck button {
  min-height: unset !important;
  height: unset !important;
  padding: unset !important;
  border: unset !important;
  border-radius: unset !important;
  background: unset !important;
  color: unset !important;
  font-size: unset !important;
  font-weight: unset !important;
  line-height: unset !important;
  text-transform: unset !important;
  box-shadow: unset !important;
  display: unset !important;
  align-items: unset !important;
  gap: unset !important;
  margin-top: unset !important;
  margin-bottom: unset !important;
  margin: unset !important;
}
.ck.ck-editor button:hover,
.ck.ck-editor .ck-button:hover,
.ck.ck-toolbar button:hover,
.ck.ck-toolbar .ck-button:hover,
.ck-editor button:hover,
.ck-editor .ck-button:hover,
.js-text-format-wrapper .ck button:hover,
.text-format-wrapper .ck button:hover {
  background: unset !important;
  color: unset !important;
}

/* 19. Helpicon inside accordion headers — white color */
.crm-accordion-bold > summary a.helpicon,
.crm-accordion-bold > summary .helpicon,
.crm-accordion-header a.helpicon,
.crm-accordion-header .helpicon,
details.crm-accordion-bold > summary a.helpicon,
details.crm-accordion-bold > summary .helpicon {
  color: #fff !important;
}
.crm-accordion-bold > summary a.helpicon:hover,
.crm-accordion-bold > summary .helpicon:hover,
.crm-accordion-header a.helpicon:hover,
.crm-accordion-header .helpicon:hover,
details.crm-accordion-bold > summary a.helpicon:hover,
details.crm-accordion-bold > summary .helpicon:hover {
  color: #fff !important;
}

/* Node Preview  */
.node-preview-container {
  background: #a9a9fe;
  position: static;
}

/* civicrm/participant-dashboard  email buttons hide*/
body.page-civicrm-participant-dashboard
  #bootstrap-theme
  af-form[ng-form="afformMyDetails"]
  div[af-join="Email"]
  button.af-repeat-add-btn,
body.page-civicrm-participant-dashboard
  #bootstrap-theme
  af-form[ng-form="afformMyDetails"]
  div[af-join="Email"]
  button.af-repeat-copy-btn {
  display: none;
}

.role-event-manager #bootstrap-theme .af-admin-edit-form-link,
.role-event-manager #civicrm-menu-nav {
  display: none;
}
@media (min-width: 768px) {
  body.role-event-manager.crm-menubar-visible {
    padding-top: 0 !important;
  }
}

 /*
   EM extra hides
 */
 .page-civicrm-admin-afform.role-event-manager  #afGuiEditor-palette  .panel-body  fieldset   div.form-group:nth-of-type(3n),
.page-civicrm-admin-afform.role-event-manager .af-gui-entity-values {
  display: none;
}

/* Hide Tags, Placement Order, and Verify submission, matched by a unique
   descendant so other form-group containers are unaffected. */
.page-civicrm-admin-afform.role-event-manager .form-group:has(#afform_tags),
.page-civicrm-admin-afform.role-event-manager .form-group:has(#afform_placement_weight),
.page-civicrm-admin-afform.role-event-manager .form-group:has(input[ng-model="editor.afform.manual_processing"]) {
  display: none;
}