table td {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Colorful palette icon */
.colorful-palette {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: colorful-gradient 3s ease infinite;
}

@keyframes colorful-gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.modal-body {
    overflow: visible !important;
    position: relative;
}
/* Scrollable modals: body must scroll so footer/actions stay in view (global overflow:visible breaks BS).
   Same idea as summary analytics popups that force overflow-y on .modal-body. */
.modal-dialog-scrollable .modal-body {
    overflow-y: auto !important;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden !important;
}

/*
 * Bootstrap multiselect inside modals: .modal-footer follows .modal-body in DOM, so the open
 * menu can paint underneath the footer; scrollable modals also clip overflow. Raise stacking and
 * let the list picker escape the body for custom-field (and similar) popups.
 */
.modal .multiselect-container.dropdown-menu.show {
    z-index: 1070 !important;
}
.modal .multiselect-native-select .btn-group:has(.multiselect-container.dropdown-menu.show) {
    position: relative;
    z-index: 1070 !important;
}
/* Non-#modal hosts only: #modal .custom-field-modal uses scrollable body (see block below). */
.custom-field-modal.modal-dialog-scrollable .modal-body,
.verify-list-modal.modal-dialog-scrollable .modal-body {
    overflow: visible !important;
}
/* Let list multiselect (Popper fixed) paint past modal-content; otherwise overflow:hidden clips it */
.custom-field-modal.modal-dialog-scrollable .modal-content,
.verify-list-modal.modal-dialog-scrollable .modal-content {
    overflow: visible !important;
}
/* Above #modal (1055) and backdrop when menu uses fixed positioning */
#modal .custom-field-modal .multiselect-container.dropdown-menu.show,
#modal .bulk-update-modal .multiselect-container.dropdown-menu.show,
#modal .verify-list-modal .multiselect-container.dropdown-menu.show {
    z-index: 12000 !important;
}

.select2-container {
    z-index: 1000 !important;
}
.table-responsive {
    overflow: visible; /* Ensures the dropdown menu stays visible even if it's outside the table */
}
.dataTables_empty {
        text-align: center;
}
.text-muted {
    color: #212B37 !important;
}
.sticky{
    z-index: 103 !important;
}
.cke_source {
    color: 000000;
}
.dropdown-menu{
    z-index: 1000 !important;
}

/* Groups move modal dropdown styling */
#modal-group-move .select2-container {
    z-index: 9999 !important; /* Ensure dropdown is visible in modal */
}
#modal-group-move .select2-dropdown {
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999 !important;
    position: absolute !important;
}
#modal-group-move .select2-results__options {
    max-height: 150px;
    overflow-y: auto;
}
#modal-group-move .select2-results__option {
    padding: 0.5rem 0.75rem;
}

/* Bulk update modal Choices.js multiselect styling */
#modal .choices {
    z-index: 9999 !important;
    position: relative;
}
#modal .choices__list--dropdown .choices__item {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
    border-bottom: 1px solid #f8f9fa !important;
}
#modal .choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: #0d6efd !important;
    color: #fff !important;
}
#modal .choices__list--multiple .choices__item {
    background-color: #0d6efd !important;
    color: #fff !important;
    border: 1px solid #0d6efd !important;
    border-radius: 0.25rem !important;
    padding: 0.25rem 0.5rem !important;
    margin: 0.125rem !important;
    font-size: 0.75rem !important;
}
#modal .choices__list--multiple .choices__item .choices__button {
    background-color: transparent !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
    font-weight: bold !important;
}
#modal .choices__inner {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem !important;
    padding: 0.375rem 0.75rem !important;
    min-height: 2.5rem !important;
    background-color: #fff !important;
}
#modal .choices__input {
    background-color: transparent !important;
    color: #495057 !important;
    font-size: 0.875rem !important;
}

/* Send test email modal Choices.js styling - simple approach like custom fields */
#modal .choices__list--dropdown, 
#modal .choices__list[aria-expanded] {
    z-index: 10000 !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

#modal-group-move .select2-results__option--highlighted {
    background-color: #007bff;
    color: white;
}
#modal-group-move .select2-container--default .select2-results > .select2-results__options {
    max-height: 150px;
    overflow-y: auto;
}
#modal-group-move .select2-dropdown--below {
    z-index: 9999 !important;
}
#modal-group-move .form-group {
    overflow: visible !important;
}
#modal-group-move .modal-content {
    overflow: visible !important;
}
#modal-group-move .modal-body {
    overflow: visible !important;
}

/* GLOBAL: Completely disable Select2 for group dropdowns everywhere - use regular select */
.select2-container--group_id {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

.select2-dropdown--group_id {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* Force group select elements to be visible everywhere */
select[name="group_id"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}


/* Completely disable Select2 in ALL modals - use regular select */
#modal .select2-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}
/* Do not override Select2's hidden original <select> (avoid stacking / click issues). */
#modal select:not(.select2-hidden-accessible) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}


/* Specifically target group dropdowns in modals */
#modal select[name="group_id"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

/* Hide any Select2 elements that might be created */
#modal .select2-container--group_id {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

#modal .select2-dropdown--group_id {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* Prevent Select2 on modals with no-select2 class */
#modal.no-select2 .select2-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

#modal.no-select2 select:not(.select2-hidden-accessible) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

/* Hide Select2 menus in #modal except whitelisted (custom-field type icons: cf-type only). */
#modal .select2-dropdown:not(.select2-dropdown--cf-type) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* Shortcode modal dropdown styling - only for non-group dropdowns */
#modal .select2-container:not(.select2-container--group_id) {
    z-index: 99999 !important; /* Very high z-index to ensure it's above everything */
}
/* Do not force position:fixed on cf-type — breaks Select2 attachBody + option clicks. */
#modal .select2-dropdown:not(.select2-dropdown--group_id):not(.select2-dropdown--cf-type) {
    max-height: 300px;
    overflow-y: auto;
    z-index: 99999 !important;
    position: fixed !important; /* Use fixed positioning for better control */
}
#modal .select2-results__options {
    max-height: 250px;
    overflow-y: auto;
}
#modal .select2-results__option {
    padding: 8px 12px;
    font-size: 14px;
}
#modal .select2-results__option--highlighted {
    background-color: #007bff;
    color: white;
}
#modal .select2-container--default .select2-results > .select2-results__options {
    max-height: 250px;
    overflow-y: auto;
}
#modal .select2-dropdown--below {
    z-index: 99999 !important;
}
#modal .custom-field-modal .select2-container--cf-type {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
}
#modal .custom-field-modal .select2-dropdown.select2-dropdown--cf-type {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    position: absolute !important;
}
#modal .custom-field-modal .cf-type-option {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
#modal .custom-field-modal .cf-type-option__icon {
    font-size: 0.95rem;
    line-height: 1;
    color: var(--primary-color, #0d6efd);
    opacity: 0.95;
}
/* Popovers use container:body; must sit above .modal (1055) and backdrop (1050). */
body.modal-open .popover {
    z-index: 11050 !important;
}
#modal .form-group {
    overflow: visible !important;
}
#modal .modal-content {
    overflow: visible !important;
}
#modal .modal-body {
    overflow: visible !important;
}

/*
 * All #modal AJAX dialogs using .modal-dialog-scrollable: height follows content on large screens; max-height
 * caps to viewport; inner .modal-body scrolls with styled scrollbars when content is tall. .modal-content
 * overflow visible keeps Select2 / multiselect usable. Exclude .modal-fullscreen.
 */
#modal .modal-dialog.modal-dialog-scrollable.modal-dialog-centered:not(.modal-fullscreen) {
    align-items: stretch !important;
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) {
    height: auto !important;
    max-height: calc(100vh - (var(--bs-modal-margin, 0.5rem) * 2)) !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: auto !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: visible !important;
}
/* When the partial wraps header/body/footer in a <form> (no-op if no form — AI Studio is header/body/footer only). */
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-content > form {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: auto !important;
    max-height: 100% !important;
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-header {
    flex-shrink: 0 !important;
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: rgba(33, 37, 41, 0.45) rgba(33, 37, 41, 0.08);
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar {
    width: 12px;
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-track {
    background: rgba(33, 37, 41, 0.06);
    border-radius: 6px;
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-thumb {
    background: rgba(33, 37, 41, 0.4);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(33, 37, 41, 0.55);
    border: 2px solid transparent;
    background-clip: padding-box;
}
html[data-theme-mode="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body,
html[data-bs-theme="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body {
    scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.08);
}
html[data-theme-mode="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-track,
html[data-bs-theme="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.07);
}
html[data-theme-mode="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-thumb,
html[data-bs-theme="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
}
html[data-theme-mode="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-thumb:hover,
html[data-bs-theme="dark"] #modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}
#modal .modal-dialog.modal-dialog-scrollable:not(.modal-fullscreen) .modal-footer {
    flex-shrink: 0 !important;
}
/* Same surface as .modal-content / other #modal scrollable dialogs (custom-field-modal, bulk-update-modal): Velzone --custom-white, not --bs-body-bg (often light when only data-theme-mode=dark). */
#modal .ai-content-studio-modal .modal-footer {
    background-color: var(--custom-white);
    border-block-start: 1px solid var(--default-border);
}
#modal .ai-content-studio-modal #content_html_chatgpt {
    max-height: min(36vh, 18rem);
    min-height: 6.5rem;
    overflow-y: auto;
    resize: vertical;
    box-sizing: border-box;
}

/* Ajax modal host: same intent as inline style on #modal-data (belt + suspenders). */
#modal.modal #modal-data {
    height: 100% !important;
    min-height: 100% !important;
    box-sizing: border-box !important;
    /* BS .modal uses pointer-events:none; ensure injected dialog subtree receives clicks (Select2, controls). */
    pointer-events: auto !important;
}

/* Ensure the modal itself has proper z-index */
#modal {
    z-index: 1055 !important;
}
#modal .modal-dialog {
    z-index: 1056 !important;
}
#modal .modal-content {
    z-index: 1057 !important;
}

/* PMTA Create - Smaller dropdown text */
.pmtas .dropdown-menu .dropdown-item {
    font-size: 0.875rem !important;
    padding: 0.375rem 0.75rem !important;
}

.pmtas .dropdown-menu .dropdown-header {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.75rem !important;
}

/* Webform: drag to reorder custom fields */
.cursor-grab { cursor: grab; }
.cursor-grab:active { cursor: grabbing; }
.webform-fields-sortable .webform-field-item:last-child { border-bottom: none !important; }
.webform-field-drag-handle {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  color: #6c757d;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}
.webform-field-drag-handle:active { cursor: grabbing; }
.webform-field-drag-handle:hover {
  background-color: #e9ecef;
  color: #0d6efd;
  border-color: rgba(13, 110, 253, 0.3);
}
.webform-field-drag-handle i {
  pointer-events: none;
  font-size: 1.25rem;
}
.webform-fields-sortable .webform-field-item.opacity-50 { opacity: 0.5; }

/* Analytics sidebar submenu: dashboard-style compact grey uppercase labels */
.app-sidebar .sidebar-analytics-submenu > li.side-menu__label1 {
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--default-border, rgba(0, 0, 0, 0.08));
    pointer-events: none;
}
.app-sidebar .sidebar-analytics-submenu > li.side-menu__label1 a {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--text-muted, #6c757d) !important;
    background: transparent !important;
    padding-top: 0.35rem !important;
    padding-bottom: 0 !important;
    cursor: default !important;
}
.app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link {
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--text-muted, #6c757d) !important;
    padding-top: 0.45rem !important;
    padding-bottom: 0.45rem !important;
}
.app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link:hover {
    color: var(--primary-color, #0d6efd) !important;
}
.app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link.active {
    color: var(--primary-color, #0d6efd) !important;
    font-weight: 700 !important;
}
[data-theme-mode="dark"] .app-sidebar .sidebar-analytics-submenu > li.side-menu__label1,
[data-bs-theme="dark"] .app-sidebar .sidebar-analytics-submenu > li.side-menu__label1 {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
[data-theme-mode="dark"] .app-sidebar .sidebar-analytics-submenu > li.side-menu__label1 a,
[data-bs-theme="dark"] .app-sidebar .sidebar-analytics-submenu > li.side-menu__label1 a {
    color: rgba(255, 255, 255, 0.45) !important;
}
[data-theme-mode="dark"] .app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link,
[data-bs-theme="dark"] .app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link {
    color: rgba(255, 255, 255, 0.55) !important;
}
[data-theme-mode="dark"] .app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link:hover,
[data-theme-mode="dark"] .app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link.active,
[data-bs-theme="dark"] .app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link:hover,
[data-bs-theme="dark"] .app-sidebar .sidebar-analytics-submenu > li.slide:not(.side-menu__label1) .side-menu__item.sidebar-analytics-link.active {
    color: var(--primary-color, #6ea8fe) !important;
}

/* Sidebar: emphasize hovered item text */
.app-sidebar .side-menu__item:hover,
.app-sidebar .slide-menu .side-menu__item:hover {
    font-weight: 700 !important;
}
/* Keep active item as strong as hover */
.app-sidebar .side-menu__item.active,
.app-sidebar .slide-menu .side-menu__item.active {
    font-weight: 700 !important;
}
/* Main menu hover should match submenu highlight behavior */
.app-sidebar .main-menu > .slide > .side-menu__item:hover,
.app-sidebar .main-menu > .slide.has-sub:hover > .side-menu__item {
    background-color: var(--default-background) !important;
    color: var(--primary-color, #0d6efd) !important;
    border-color: rgba(var(--primary-rgb, 13, 110, 253), 0.2) !important;
}
.app-sidebar .main-menu > .slide > .side-menu__item:hover .side-menu__label,
.app-sidebar .main-menu > .slide > .side-menu__item:hover .side-menu__icon,
.app-sidebar .main-menu > .slide > .side-menu__item:hover .side-menu__angle {
    color: var(--primary-color, #0d6efd) !important;
}

/* --------------------------------------------------------------------------
   Unified single-line field height — cards & modals (inputs, selects, Select2, Choices)
   Aligns native .form-control / .form-select with Select2-enhanced selects (~BS5 default).
   -------------------------------------------------------------------------- */
:root {
    /* Single-line control height — Select2 + native fields share this */
    --relayzo-field-height: 36px;
    --relayzo-select2-line-height: 28px;
    --relayzo-field-py: 0.25rem;
    --relayzo-field-px: 0.65rem;
}

.card-body .form-control:not(textarea),
.card-body .form-select,
.modal-body .form-control:not(textarea),
.modal-body .form-select {
    min-height: var(--relayzo-field-height);
    padding-top: var(--relayzo-field-py);
    padding-bottom: var(--relayzo-field-py);
}

.card-body .input-group-text,
.modal-body .input-group-text {
    min-height: var(--relayzo-field-height);
    display: inline-flex;
    align-items: center;
}

.card-body .input-group > .select2-container,
.modal-body .input-group > .select2-container {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

/*
 * Select2 single — 36px; must beat styles.css (.select2-container … height: 2.37rem !important)
 * and rendered line-height / border on .select2-selection__rendered.
 */
.select2-container .select2-selection--single,
.select2-container.select2-container--default .select2-selection--single {
    min-height: var(--relayzo-field-height) !important;
    max-height: var(--relayzo-field-height) !important;
    height: var(--relayzo-field-height) !important;
    padding: 0 !important;
    border: 1px solid var(--bs-border-color, var(--input-border, #dee2e6)) !important;
    border-radius: var(--bs-border-radius, 0.375rem) !important;
    background-color: var(--form-control-bg, var(--bs-body-bg, #fff)) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/*
 * Inner label box — styles.css sets line-height: 2.33rem !important on this node;
 * explicit height + line-height (as in DevTools) is required for it to take effect.
 */
.select2-container.select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered,
span.select2-container .select2-selection--single .select2-selection__rendered {
    height: var(--relayzo-field-height) !important;
    min-height: var(--relayzo-field-height) !important;
    max-height: var(--relayzo-field-height) !important;
    line-height: var(--relayzo-select2-line-height) !important;
    padding-left: var(--relayzo-field-px) !important;
    padding-right: 1.65rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-inline-start: var(--relayzo-field-px) !important;
    padding-inline-end: 1.65rem !important;
    margin: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--default-text-color, #444) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.select2-container .select2-selection--single .select2-selection__arrow,
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    min-height: 0 !important;
    top: 0 !important;
    right: 6px;
    display: flex !important;
    align-items: center !important;
}

[dir="rtl"] .select2-container .select2-selection--single .select2-selection__arrow,
[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 6px;
}

/* Choices.js — closed state matches same vertical rhythm */
.card-body .choices .choices__inner,
.modal-body .choices .choices__inner {
    min-height: var(--relayzo-field-height);
    padding-top: var(--relayzo-field-py);
    padding-bottom: var(--relayzo-field-py);
    padding-left: var(--relayzo-field-px);
    padding-right: var(--relayzo-field-px);
    font-size: 1rem;
    line-height: 1.5;
    border-radius: var(--bs-border-radius, 0.375rem);
}

/*
 * Bootstrap Multiselect trigger (plugin adds text-center by default):
 * button.multiselect.form-select.dropdown-toggle.custom-select.text-center
 */
button.multiselect.form-select.dropdown-toggle.custom-select {
    min-height: var(--relayzo-field-height) !important;
    height: var(--relayzo-field-height) !important;
    max-height: var(--relayzo-field-height) !important;
    padding-top: var(--relayzo-field-py) !important;
    padding-bottom: var(--relayzo-field-py) !important;
    padding-left: var(--relayzo-field-px) !important;
    padding-right: 1.65rem !important;
    line-height: var(--relayzo-select2-line-height) !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

button.multiselect.form-select.dropdown-toggle.custom-select.text-center {
    justify-content: center !important;
}

button.multiselect.form-select.dropdown-toggle.custom-select.text-start {
    justify-content: flex-start !important;
}

button.multiselect.form-select.dropdown-toggle.custom-select.text-end {
    justify-content: flex-end !important;
}

button.multiselect.form-select.dropdown-toggle.custom-select .multiselect-selected-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button.multiselect.form-select.dropdown-toggle.custom-select.text-center .multiselect-selected-text {
    text-align: center;
}

button.multiselect.form-select.dropdown-toggle.custom-select.text-start .multiselect-selected-text {
    text-align: start;
}

button.multiselect.form-select.dropdown-toggle.custom-select.text-end .multiselect-selected-text {
    text-align: end;
}

/* Contact / list detail modals — scoped scroll; do not target global .modal-body */
#modal .contact-detail-dialog,
#modal .list-detail-dialog,
#modal .campaign-summary-dialog {
    max-height: calc(100vh - 2rem);
    margin: 0.5rem auto;
}

#modal .contact-detail-dialog .modal-content,
#modal .list-detail-dialog .modal-content,
#modal .campaign-summary-dialog .modal-content {
    max-height: calc(100vh - 2rem);
    overflow: hidden !important;
}

#modal .contact-detail-dialog .contact-detail-body,
#modal .list-detail-dialog .list-detail-body,
#modal .campaign-summary-dialog .campaign-summary-body {
    max-height: none;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-secondary-color, #888) var(--bs-light-bg-subtle, #f0f0f0);
    overscroll-behavior: contain;
    font-size: 0.875rem;
}

#modal .contact-detail-dialog .contact-detail-dl dt,
#modal .list-detail-dialog .contact-detail-dl dt,
#modal .campaign-summary-dialog .contact-detail-dl dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

html[data-theme-mode="dark"] #modal .contact-detail-dialog .contact-detail-dl dt,
html[data-theme-mode="dark"] #modal .list-detail-dialog .contact-detail-dl dt,
html[data-theme-mode="dark"] #modal .campaign-summary-dialog .contact-detail-dl dt,
html[data-bs-theme="dark"] #modal .contact-detail-dialog .contact-detail-dl dt,
html[data-bs-theme="dark"] #modal .list-detail-dialog .contact-detail-dl dt,
html[data-bs-theme="dark"] #modal .campaign-summary-dialog .contact-detail-dl dt {
    color: rgba(255, 255, 255, 0.9) !important;
}

#modal .contact-detail-dialog .contact-detail-dl dd,
#modal .list-detail-dialog .contact-detail-dl dd,
#modal .campaign-summary-dialog .contact-detail-dl dd {
    font-size: 0.9375rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    word-break: break-word;
}

#modal .contact-detail-dialog .contact-detail-dl dd + dt,
#modal .list-detail-dialog .contact-detail-dl dd + dt,
#modal .campaign-summary-dialog .contact-detail-dl dd + dt {
    margin-top: 0.15rem;
}

#modal .contact-detail-dialog .contact-detail-field-list .list-group-item,
#modal .list-detail-dialog .contact-detail-field-list .list-group-item {
    background: transparent;
}

#modal .list-detail-dialog .list-detail-metric-value a {
    color: inherit;
}

#modal .list-detail-dialog .list-detail-metric-value a:hover {
    color: var(--bs-primary);
}

html[data-theme-mode="dark"] #modal .contact-detail-dialog .text-secondary,
html[data-theme-mode="dark"] #modal .list-detail-dialog .text-secondary,
html[data-bs-theme="dark"] #modal .contact-detail-dialog .text-secondary,
html[data-bs-theme="dark"] #modal .list-detail-dialog .text-secondary {
    color: rgba(255, 255, 255, 0.82) !important;
}

#modal .campaign-summary-dialog .campaign-summary-async {
    min-height: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.35;
}

#modal .campaign-summary-dialog a.campaign-summary-metric-link {
    color: var(--primary-color, var(--bs-primary)) !important;
    font-weight: 600;
    text-decoration: none;
}

#modal .campaign-summary-dialog a.campaign-summary-metric-link:hover {
    color: var(--bs-primary) !important;
    text-decoration: underline;
    opacity: 0.88;
}

/* Keep summary popup metric text aligned with detail-tab typography */
#modal .campaign-summary-dialog .contact-detail-status-bar .fs-16 {
    font-size: 0.9375rem !important;
    line-height: 1.35;
}

/* Scheduled campaign / split-test scheduled breakdown modal */
#modal .scheduled-detail-dialog {
    max-height: calc(100vh - 2rem);
    margin: 0.5rem auto;
}

#modal .scheduled-detail-dialog .modal-content {
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#modal .scheduled-detail-dialog .modal-header,
#modal .scheduled-detail-dialog .modal-footer {
    flex-shrink: 0;
}

#modal .scheduled-detail-dialog .scheduled-detail-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bs-secondary-color, #888) var(--bs-light-bg-subtle, #f0f0f0);
}

/* Campaign analytics full-page summary tab (analatics/campaigns/summary — AJAX into .card-body) */
.card-body .campaign-analytics-summary .contact-detail-dl dt {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bs-secondary-color);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.card-body .campaign-analytics-summary .contact-detail-dl dd {
    font-size: 0.9375rem;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    word-break: break-word;
}

.card-body .campaign-analytics-summary .contact-detail-dl dd + dt {
    margin-top: 0.15rem;
}

.card-body .campaign-analytics-summary .campaign-analytics-async {
    min-height: 1.25rem;
}

.card-body .campaign-analytics-summary a.campaign-analytics-scheduled-link {
    color: var(--primary-color, var(--bs-primary)) !important;
    font-weight: 600;
    text-decoration: none;
}

.card-body .campaign-analytics-summary a.campaign-analytics-scheduled-link:hover {
    color: var(--bs-primary) !important;
    text-decoration: underline;
    opacity: 0.88;
}

.card-body .campaign-analytics-summary .campaign-analytics-chart-pie {
    min-height: 260px;
}

.card-body .campaign-analytics-summary .campaign-analytics-pie-canvas {
    max-height: 280px;
    width: 100% !important;
    height: auto !important;
}

.card-body .campaign-analytics-summary .campaign-analytics-world-map {
    height: 300px;
    width: 100%;
}

.card-body .campaign-analytics-summary .campaign-analytics-map-loading {
    min-height: 300px;
}

/*
 * Analytics stat detail tabs (campaigns / drips / triggers / split tests).
 * Class-only scope (no parent wrapper) + #pills-tab so rules win over theme .nav-item / BS .nav-link.
 */
ul#pills-tab.nav-pills.analytics-detail-tabs {
    gap: 0.35rem !important;
    margin-bottom: 0.75rem !important;
    row-gap: 0.35rem !important;
    font-size: 0.8125rem;
}

ul#pills-tab.nav-pills.analytics-detail-tabs .nav-item {
    margin: 0 !important;
    margin-inline-end: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: inherit;
}

ul#pills-tab.nav-pills.analytics-detail-tabs button.nav-link {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    line-height: 1.2 !important;
    padding: 0.38rem 0.8rem !important;
    border-radius: 0.42rem !important;
    min-height: 2rem !important;
    min-width: 0 !important;
}

ul#pills-tab.nav-pills.analytics-detail-tabs button.nav-link.active,
ul#pills-tab.nav-pills.analytics-detail-tabs button.nav-link:focus-visible {
    font-size: 0.8125rem !important;
    padding: 0.38rem 0.8rem !important;
    line-height: 1.2 !important;
}

@media (min-width: 768px) {
    ul#pills-tab.nav-pills.analytics-detail-tabs {
        font-size: 0.875rem;
    }

    ul#pills-tab.nav-pills.analytics-detail-tabs button.nav-link,
    ul#pills-tab.nav-pills.analytics-detail-tabs button.nav-link.active {
        font-size: 0.875rem !important;
        padding: 0.42rem 0.9rem !important;
        line-height: 1.2 !important;
    }
}

/* App shell footer */
.app-footer-refined.footer {
    border-block-start-color: var(--default-border, var(--bs-border-color)) !important;
}

.app-footer-refined .footer-copy {
    line-height: 1.5;
}

.app-footer-refined .footer-version-sep {
    opacity: 0.45;
    user-select: none;
}

.app-footer-refined .footer-version-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--primary-color, #0d6efd);
}

/* Form section headings (lists, contacts, webforms, modals, etc.) */
.list-form-sec-label {
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    display: block;
    margin-bottom: 1rem !important;
}
/* Inline heading row (e.g. beside popover / select-all) — no extra margin on the label itself */
.list-form-sec-label.mb-0 {
    margin-bottom: 0 !important;
}

/* Select2: scroll long option lists + visible scrollbar (delivery server type, etc.) */
.select2-dropdown.select2-dropdown--relayzo-scroll .select2-results > .select2-results__options {
    max-height: min(50vh, 320px) !important;
    overflow-y: auto !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(80, 90, 110, 0.55) rgba(0, 0, 0, 0.06);
}
.select2-dropdown.select2-dropdown--relayzo-scroll .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 10px;
}
.select2-dropdown.select2-dropdown--relayzo-scroll .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 6px;
}
.select2-dropdown.select2-dropdown--relayzo-scroll .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.28);
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
html[data-theme-mode="dark"] .select2-dropdown.select2-dropdown--relayzo-scroll .select2-results > .select2-results__options {
    scrollbar-color: rgba(255, 255, 255, 0.45) rgba(255, 255, 255, 0.08);
}
html[data-theme-mode="dark"] .select2-dropdown.select2-dropdown--relayzo-scroll .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
}
html[data-theme-mode="dark"] .select2-dropdown.select2-dropdown--relayzo-scroll .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.32);
}

/* Global status pill (reusable across listing pages: yes/no, active/inactive) */
.rz-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem 0.2rem 0.42rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid rgba(100, 116, 139, 0.3);
    background: rgba(100, 116, 139, 0.12);
    color: #334155 !important;
    vertical-align: middle;
    text-decoration: none !important;
}
.rz-status-pill__icon {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    line-height: 1;
    color: currentColor !important;
    opacity: 0.95;
    flex-shrink: 0;
}
.rz-status-pill__text {
    display: inline-block !important;
    white-space: nowrap;
    color: inherit !important;
    opacity: 1 !important;
}
.rz-status-pill--icon-only {
    padding: 0.2rem 0.34rem !important;
    min-width: 1.45rem;
    justify-content: center;
}
.rz-status-pill--icon-only .rz-status-pill__text {
    display: none !important;
}

.rz-status-pill.is-yes,
.rz-status-pill.is-active {
    color: #166534 !important;
    background: rgba(34, 197, 94, 0.14) !important;
    border-color: rgba(22, 163, 74, 0.35) !important;
}
.rz-status-pill.is-no,
.rz-status-pill.is-inactive {
    color: #9a3412 !important;
    background: rgba(249, 115, 22, 0.13) !important;
    border-color: rgba(234, 88, 12, 0.32) !important;
}
.rz-status-pill.is-warning {
    color: #991b1b !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
}
.rz-status-pill.is-generic {
    color: #334155 !important;
    background: rgba(100, 116, 139, 0.12) !important;
    border-color: rgba(100, 116, 139, 0.3) !important;
}

html[data-theme-mode="dark"] .rz-status-pill,
html[data-bs-theme="dark"] .rz-status-pill {
    color: rgba(255, 255, 255, 0.9) !important;
    background: rgba(148, 163, 184, 0.18) !important;
    border-color: rgba(203, 213, 225, 0.3) !important;
}
html[data-theme-mode="dark"] .rz-status-pill.is-yes,
html[data-theme-mode="dark"] .rz-status-pill.is-active,
html[data-bs-theme="dark"] .rz-status-pill.is-yes,
html[data-bs-theme="dark"] .rz-status-pill.is-active {
    color: #dcfce7 !important;
    background: rgba(34, 197, 94, 0.28) !important;
    border-color: rgba(134, 239, 172, 0.5) !important;
}
html[data-theme-mode="dark"] .rz-status-pill.is-no,
html[data-theme-mode="dark"] .rz-status-pill.is-inactive,
html[data-bs-theme="dark"] .rz-status-pill.is-no,
html[data-bs-theme="dark"] .rz-status-pill.is-inactive {
    color: #ffedd5 !important;
    background: rgba(249, 115, 22, 0.3) !important;
    border-color: rgba(251, 146, 60, 0.52) !important;
}
html[data-theme-mode="dark"] .rz-status-pill.is-warning,
html[data-bs-theme="dark"] .rz-status-pill.is-warning {
    color: #fee2e2 !important;
    background: rgba(239, 68, 68, 0.28) !important;
    border-color: rgba(252, 165, 165, 0.5) !important;
}
html[data-theme-mode="dark"] .rz-status-pill.is-generic,
html[data-bs-theme="dark"] .rz-status-pill.is-generic {
    color: #e2e8f0 !important;
    background: rgba(148, 163, 184, 0.26) !important;
    border-color: rgba(203, 213, 225, 0.42) !important;
}

/* DataTable-specific hardening against inherited text utilities */
.table .rz-status-pill,
.dataTable .rz-status-pill,
#data .rz-status-pill {
    color: inherit !important;
}
.table .rz-status-pill.is-yes,
.dataTable .rz-status-pill.is-yes,
#data .rz-status-pill.is-yes,
.table .rz-status-pill.is-active,
.dataTable .rz-status-pill.is-active,
#data .rz-status-pill.is-active {
    color: #166534 !important;
}
.table .rz-status-pill.is-no,
.dataTable .rz-status-pill.is-no,
#data .rz-status-pill.is-no,
.table .rz-status-pill.is-inactive,
.dataTable .rz-status-pill.is-inactive,
#data .rz-status-pill.is-inactive {
    color: #9a3412 !important;
}

/* Contacts/DataTable: keep status pills bright in dark mode */
html[data-theme-mode="dark"] .table .rz-status-pill.is-yes,
html[data-theme-mode="dark"] .dataTable .rz-status-pill.is-yes,
html[data-theme-mode="dark"] #data .rz-status-pill.is-yes,
html[data-theme-mode="dark"] .table .rz-status-pill.is-active,
html[data-theme-mode="dark"] .dataTable .rz-status-pill.is-active,
html[data-theme-mode="dark"] #data .rz-status-pill.is-active,
html[data-bs-theme="dark"] .table .rz-status-pill.is-yes,
html[data-bs-theme="dark"] .dataTable .rz-status-pill.is-yes,
html[data-bs-theme="dark"] #data .rz-status-pill.is-yes,
html[data-bs-theme="dark"] .table .rz-status-pill.is-active,
html[data-bs-theme="dark"] .dataTable .rz-status-pill.is-active,
html[data-bs-theme="dark"] #data .rz-status-pill.is-active {
    color: #dcfce7 !important;
}

html[data-theme-mode="dark"] .table .rz-status-pill.is-no,
html[data-theme-mode="dark"] .dataTable .rz-status-pill.is-no,
html[data-theme-mode="dark"] #data .rz-status-pill.is-no,
html[data-theme-mode="dark"] .table .rz-status-pill.is-inactive,
html[data-theme-mode="dark"] .dataTable .rz-status-pill.is-inactive,
html[data-theme-mode="dark"] #data .rz-status-pill.is-inactive,
html[data-bs-theme="dark"] .table .rz-status-pill.is-no,
html[data-bs-theme="dark"] .dataTable .rz-status-pill.is-no,
html[data-bs-theme="dark"] #data .rz-status-pill.is-no,
html[data-bs-theme="dark"] .table .rz-status-pill.is-inactive,
html[data-bs-theme="dark"] .dataTable .rz-status-pill.is-inactive,
html[data-bs-theme="dark"] #data .rz-status-pill.is-inactive {
    color: #ffedd5 !important;
}

html[data-theme-mode="dark"] .table .rz-status-pill.is-warning,
html[data-theme-mode="dark"] .dataTable .rz-status-pill.is-warning,
html[data-theme-mode="dark"] #data .rz-status-pill.is-warning,
html[data-bs-theme="dark"] .table .rz-status-pill.is-warning,
html[data-bs-theme="dark"] .dataTable .rz-status-pill.is-warning,
html[data-bs-theme="dark"] #data .rz-status-pill.is-warning {
    color: #fee2e2 !important;
}