/* Hide the input element but keep shinyvalidate error messages visible */
.hidden-validation-input .form-group {
  margin-bottom: 0;
}
.hidden-validation-input .form-group > label,
.hidden-validation-input .form-group > input {
  display: none;
}

/* Channel Selection label, icon and required star turn danger when no channel is selected */
.channel-error .tooltip-label-text,
.channel-error i.fa-solid,
.channel-error span > span {
  color: var(--clr_danger);
}

.briefing-separator {
  margin: 20px 0;
  border: var(--input_border);
  border-top: 1px solid var(--clr_text_secondary);
  opacity: 0.2;
}

.btn-delete-mini {
  color: var(--clr_danger) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Styling for specific parts of the App*/
html {
  overflow-y: scroll;
}

.content-container {
  max-width: 708px;
  align-items: flex-start;
  margin: 0 auto; /* Centers the content */
  background-color: none; /* Optional: background color for the content */
  padding: 0 0 ; /* Padding inside the content area */
  margin-bottom: var(--footer_height); /* Space for the footer */

}

.impressum-container {
  padding: 0;
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_secondary) !important;
  padding-bottom: var(--footer_height); /* Space for the footer */
  display: flex; /* Use flexbox for layout */
  border-radius: 10px;
  justify-content: space-between; /* Space between columns */
}

/* styling of the relation between the container for commen and method input (ui-components.) */
.input-container {
    display: flex; 
    padding: 0;
    width: 100%;
    font-family: var(--font-primary);
    height: auto; /* Changed from fixed height */
    min-height: var(--size_input_field);
    overflow: visible; /* Allow content to be visible */
}

/* styling of the method intput field in the order ui */
.briefing_details {
  flex: 0 0 50%;
  padding: var(--input_padding);

}

.title_briefing_details {
  height: 35px; /* Fixed height */
  margin: 0; /* Remove margins */
  padding: 0; /* Remove padding */
  display: flex; /* Flexbox for alignment */
  align-items: flex-start; /* Align items to the top */
  justify-content: flex-start; /* Align items to the left */
  font-family: var(--font-primary);
}


/* Add this new style for input wrappers */
.input-wrapper {
  flex:1;
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start; /* Center items vertically */
  justify-content: flex-start; /* Align items to the left horizontally */
  gap: 0px;
}


.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  width: 100%;
}


.footer-container {
  margin: 0;
  width: 100%;
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_secondary) !important;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: var(--footer_height);
  font-size: var(--font-size-small);
}

.footer-text {
  display: flex;
  align-items: center;
  color: var(--clr_text_secondary);
}

.footer-text .tr-btn.tr-btn-inline {
  color: var(--clr_text_secondary);
}

.footer-text .tr-btn.tr-btn-inline:hover,
.footer-text .tr-btn.tr-btn-inline:focus {
  color: var(--clr_interaction1);
}

.footer-text p {
  margin: 0;
  padding: 0;
}


.footer-version {
  margin: 0 !important;
  padding: 5px !important;
  color: var(--clr_text_secondary);
  font-size: var(--font-size-very-small);
  position: fixed;
  bottom: 0;
  right: 0;
  text-align: right;
}



.footer-content {
  max-width: 708px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.container-fluid {
  margin: 0 0 !important;
  padding: 0 0 !important;
}


/* styling of the navbar */

  .navbar {
    background-color: var(--clr_bg_secondary) !important;
    border: var(--input_border) !important;
    padding: 0 var(--input_padding);
    margin: 20 5px !important;
    z-index: 1000;
    height: 80px;

  }

  .navbar-nav > li > a {
    color: var(--clr_text_secondary) !important;
    transition: all 0.3s ease;
  }
  .navbar-nav > li.active > a {
    color: var(--clr_interaction1) !important;
    background-color: transparent !important;
    border-bottom: 2px solid var(--clr_interaction1) !important;
  }

  .navbar-brand {
    color: var(--clr_text_secondary) !important;
    pointer-events: none;  /* Prevents hover effects */
    cursor: default;      /* Changes cursor to default instead of pointer */
  }
  
.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--clr_text_secondary) !important;
  background-color: transparent !important;
  }

  .navbar-nav > li > a:hover {
    color: var(--clr_interaction1) !important;
    background-color: transparent !important;
  }


/* Generic three-section bar: left | center | right, full width. Reused by the
   page header (header_ui / impressum_ui) and the campaign page top bar. */
.tr-bar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}

.tr-bar-left, .tr-bar-right {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.tr-bar-left { justify-content: flex-start; }
.tr-bar-right { justify-content: flex-end; }

.tr-bar-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Style the header container (shared top-level header: logo left, compact
   login info + user icon right, Creation/Management tab bar underneath). */
.header-container {
  background-color: none;
  position: relative;
  display: flex;
  width: 100%;
  padding: 10px 0 0 0;
  margin: 0;
  align-items: center;
  justify-content: center;
}

/* Same width as .content-container so the header lines up with the pages. */
.header-main-wrapper {
  max-width: 708px;
  width: 100%;
  padding: 0;
}

.tr-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
}

.header-logo-link {
  display: inline-flex;
  align-items: center;
}

.header-logo {
  height: 50px;
  object-fit: contain;
  padding: 5px 10px 5px 0;
}

/* Login info + user-icon button, right-aligned as one small group. */
.header-user-area {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Email + company, stacked, small and right-aligned against the user button.
   ONE rule on purpose: this block used to carry a second, generic class
   (`user-extra-information`) that re-declared align-items and font-size at the
   same specificity ~190 lines further down — so the generic rule won the tie
   and neither the smaller font nor the right alignment ever applied. */
.header-login-compact {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-end;
  justify-content: center;
  font-size: var(--font-size-very-small);
  color: var(--clr_text_primary);
}

/* One line each: text first, then its icon (nearest the user-area button). */
.header-login-compact p {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  line-height: 1.3;
  white-space: nowrap;
}

/* Main navigation: two route tabs filling the row, ticket button on the
   Management tab. Anchors, not tabsetPanel — the tabs switch router pages.
   Small-button height, with air between the baseline and the page content. */
.tr-main-tabs {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-bottom: 2px solid var(--clr_text_primary);
  margin-bottom: var(--small_padding);
}

.tr-main-tab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--button_height_small);
  padding: 0 6px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--clr_text_primary);
  text-decoration: none;
  cursor: pointer;
}

/* Text colours pair with their background by index (TextSecondary on
   BgSecondary, TextTertiary on BgTertiary): in the TR palette all three text
   colours are identical so nothing changes, but mprt has a BLACK BgSecondary
   with a light TextSecondary — the old text_primary-on-bg_secondary hover was
   unreadable there. */
.tr-main-tab:hover,
.tr-main-tab:focus {
  color: var(--clr_text_secondary);
  text-decoration: none;
  filter: brightness(95%);
  background-color: var(--clr_bg_secondary);
}

/* Selected tab: the subtle background fill stays, but it alone is invisible
   in palettes where BgTertiary equals BgPrimary (mprt) — a slim interaction1
   underline marks the active tab in every palette. Inset box-shadow, not a
   border, so the tab's box does not grow. */
.tr-main-tab-active,
.tr-main-tab-active:hover,
.tr-main-tab-active:focus {
  background-color: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
  box-shadow: inset 0 -3px 0 var(--clr_interaction1);
  filter: none;
}

/* Management tab wrapper: the tab anchor fills it, the ticket button is
   overlaid on the tab's right edge (sibling, not child, of the anchor so a
   ticket click never triggers the tab navigation). */
.tr-main-tab-wrap {
  position: relative;
  flex: 1 1 0;
  display: flex;
}

.tr-main-tab-wrap .tr-main-tab {
  flex: 1 1 auto;
}

/* The user area's Profile | Admin Tools tabs wear the same dress as the
   Creation | Management bar (per feedback): full-width flex tabs over the
   2px baseline, text paired with its background by palette index, and the
   interaction1 underline on the active tab. Without the admin right there is
   only Profile, which then reads as one full-width title over the line. */
.user-profile-new .nav-tabs {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-bottom: 2px solid var(--clr_text_primary);
  margin-bottom: var(--small_padding);
}

.user-profile-new .nav-tabs > li {
  flex: 1 1 0;
  float: none;
  margin: 0;
}

.user-profile-new .nav-tabs > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--button_height_small);
  margin: 0;
  padding: 0 6px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--clr_text_primary);
  background: transparent;
  border: none;
  border-radius: 0;
  text-decoration: none;
}

.user-profile-new .nav-tabs > li > a:hover,
.user-profile-new .nav-tabs > li > a:focus {
  color: var(--clr_text_secondary);
  background-color: var(--clr_bg_secondary);
  border: none;
  filter: brightness(95%);
}

.user-profile-new .nav-tabs > li.active > a,
.user-profile-new .nav-tabs > li.active > a:hover,
.user-profile-new .nav-tabs > li.active > a:focus {
  background-color: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
  box-shadow: inset 0 -3px 0 var(--clr_interaction1);
  border: none;
  filter: none;
}

.tr-main-tab-ticket {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 12px;
  display: flex;
  align-items: center;
  z-index: 2;
}

/* Small top bar above user-area / impressum content: just the back arrow. */
.user-site-topbar {
  display: flex;
  align-items: center;
  padding: 6px 0;
}



  /* button styling */

  /* button styling */
  .btn-default.btn-file { background-color: var(--clr_bg_primary) !important;
    border-color: var(--clr_text_primary) !important;
    color: var(--clr_text_primary) !important;
    border-radius: 3px !important;
    height: var(--input_height) !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    line-height: normal;
    }

    /*----------------------------------*/

    .bootstrap-select.form-control {
      border-radius: 3px !important;   /* make the outer box round */
      border: none !important;           /* kill the extra wrapper border */
      width: 100% !important;
    }

  /* styling of the dropdown selction when not selected */
.bootstrap-select > .dropdown-toggle.btn {
  border-radius: 3px !important;
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border) !important;
  outline: none !important;
  overflow: hidden;
  height: var(--input_height) !important;
  width: 100% !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  line-height: normal;
  box-shadow: var(--input_shadow) !important;
}

/* Focus and open states for bootstrap-select dropdown */
.bootstrap-select > .dropdown-toggle.btn:focus,
.bootstrap-select.open > .dropdown-toggle.btn,
.bootstrap-select.show > .dropdown-toggle.btn {
  border: var(--input_border_focus) !important;
  box-shadow: none !important;
}

/* User profile styling - 2 column layout: Orders left, User Setup right */
.user-profile {
  align-items: flex-start;
  margin: 0 auto; /* Centers the content */
  background-color: none; /* Optional: background color for the content */
  padding: 0 0 ; /* Padding inside the content area */
  display: flex;
  flex-direction: row;
}

.user-column-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Align inputs at the top */
  flex-grow: 1; /* Makes the content area fill the available space */
  margin: auto;
  position: relative;
  min-height: 300px;
}

/* User columns (Profile and Preferences) stacked vertically */
.user-column {
  flex: none;
  width: 100%;
  max-width: 100%;
  padding: var(--input_padding);
  margin: 0;
  min-height: auto;
}

/* Orders column takes 50% */
.user-column-creations {
  flex: 1;
  max-width: 50%;
  padding: var(--input_padding);
  margin: 0;
}

/* Container for user setup (Profile + Preferences stacked) */
.user-setup-container {
  flex: 1;
  max-width: 50%;
  display: flex;
  flex-direction: column;
}

.user-column-header {
  padding: var(--input_padding) 0;
  margin: 0;
  display: flex;
}
.spacer{
  flex-grow: 1;
}
.user-button-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align buttons to the left */
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 70px; /* Space between buttons and footer */
  width: 100%;
}

/* On narrow screens keep only the user icon; the compact login text hides.
   Later in the file than .header-login-compact's `display: flex`, so this
   wins the tie — keep it below that rule. */
@media (max-width: 599px) {
  .header-login-compact {
    display: none;
  }
}



/* Apply text color */
table.dataTable {
  color: var(--clr_text_primary) !important;
}

.dataTables_filter input {
  border-radius: 25px !important;
  padding: 5px 10px !important;
  border: var(--input_border_solid) !important;
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
}

/* Target ONLY the Previous and Next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
  background-color: var(--clr_bg_primary) !important;
  border-color: var(--clr_interaction1) !important;
  color: var(--clr_interaction1) !important;
  border-radius: 3px !important; /* Rounded corners */

  width: 120px;
  height: 35px;
}

/* Target ONLY the Previous and Next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled {
  background-color: var(--clr_bg_primary) !important;
  color: color-mix(in srgb, var(--clr_text_primary) 80%, black) !important;
  border-color: color-mix(in srgb, var(--clr_text_primary) 80%, black) !important;
}

/* Target ONLY the Previous and Next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next.disabled:hover {
  background-color: var(--clr_bg_primary) !important;
  color: color-mix(in srgb, var(--clr_text_primary) 80%, black) !important;
  border-color: color-mix(in srgb, var(--clr_text_primary) 80%, black) !important;
}

/* Hover effect ONLY for Previous and Next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.previous:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.next:hover {
  background-color: color-mix(in srgb, var(--clr_bg_primary) 50%, black) !important;
  border-color: color-mix(in srgb, var(--clr_interaction1) 50%, black) !important;
}



.dataTables_wrapper .dataTable_info {
  color: var(--clr_text_primary) !important;
  font-size: var(--font-size-very-small) !important;
}

/* Target the pagination number buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: transparent !important; /* No background */
  color: var(--clr_text_primary) !important; /* Text color */
  border: var(--input_border) !important; /* Remove border */
  padding: 5px 10px !important;
}

/* Active (selected) pagination number */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  text-decoration: underline !important;
  color: var(--clr_interaction1) !important;
}

/* Hover effect for pagination number buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.previous):not(.next):hover {
  background-color: transparent !important; /* Keep it transparent */
  color: var(--clr_interaction1) !important; /* Highlight on hover */
}

/* Custom scrollbar for DT table */
.dataTables_wrapper .dataTables_scrollBody {
  scrollbar-width: thin; /* For Firefox */
  scrollbar-color: var(--clr_text_tertiary) var(--clr_bg_tertiary); /* Handle and track color */
  max-height: 500px !important; /* Ensure height restriction */
}

/* Webkit (Chrome, Edge, Safari) */
.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar {
  width: 8px !important; /* Scrollbar width */
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-track {
  background: var(--clr_text_primary) !important; /* Track background */
  border-radius: 10px !important;
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: var(--clr_text_primary) !important; /* Scrollbar handle */
  border-radius: 10px !important;
}

.dataTables_wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: var(--clr_text_primary) !important; /* Darker handle on hover */
}



.circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  margin: auto;
}

.flex{
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


.welcome-section {
  text-align: center;
  margin-bottom: 30px;
}



.account-section {
  background-color: var(--clr_bg_primary);
  padding: 25px;
  align-items: center;
  text-align: center;

}

.account-section h3 {
  color: var(--clr_text_primary);
  margin-bottom: 25px;
  font-family: var(--font-primary);
}

.profile-field {
  margin: 0 auto;
  max-width: 500px;
  margin-bottom: 20px;
}

.profile-field label {
  display: block;
  text-align: center;
  margin-bottom: 5px;
}

.profile-field .form-control,
.profile-field .selectize-control {
  margin: 0 auto;
}




 .save-section {
  margin-top: 30px;
  text-align: center;
} 

/* Default State - Persist alignment and height */
.selectize-input {
  display: flex;
  align-items: center;
  height: var(--input_height) !important;
  box-sizing: border-box;
  line-height: normal;
  overflow: hidden;
  border: var(--input_border) !important;
  /* selectize switches the box to `display: inline-block` once it is focused /
     active. As an inline-block it then sits on a text baseline, and the room
     left below it for descenders makes the control ~7px taller — which pushed
     the whole campaign toolbar around the moment the filter was clicked.
     Aligning to the top of the line box removes that phantom space. */
  vertical-align: top;
}

/* Focus State - Keep border */
.selectize-input.focus,
.selectize-input.active {
  display: flex;
  align-items: center;
  height: var(--input_height) !important;
  box-sizing: border-box;
  border: var(--input_border_focus) !important;
  box-shadow: none !important;
}

/* Selected Items (tags) - use secondary-bg for selected state */
.selectize-input .item {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  margin: 2px;
  border-radius: 3px;
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_secondary) !important;
  max-width: calc(100% - 30px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dropdown Open State - Show focus border when open */
.selectize-input.dropdown-active {
  display: flex;
  align-items: center;
  height: var(--input_height) !important;
  box-sizing: border-box;
  border: var(--input_border_focus) !important;
  box-shadow: none !important;
}

/* Ensure alignment in open state */
.selectize-input.dropdown-active .item {
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 30px);
  box-sizing: border-box;
  padding: 2px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Disabled State */
.selectize-input.disabled {
  background-color: var(--disabled_bg, #f5f5f5);
  color: var(--disabled_text, #999);
  cursor: not-allowed;
}

/* Ensure placeholder text aligns properly */
.selectize-input::after {
  line-height: var(--input_height) !important;
  align-items: center;
  display: flex;
}

/* Consistent style for container after losing focus */
.selectize-input.focus.dropdown-active,
.selectize-input:not(.focus):not(.active) {
  display: flex;
  align-items: center;
  height: var(--input_height) !important;
  padding: 0 10px;
  box-sizing: border-box;
}

/* Reset and style the custom checkbox - match radio button style */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: var(--input_border);
  border-radius: 2px;
  background-color: var(--clr_bg_tertiary);
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  outline: none;
  box-sizing: border-box;
}







/* Remove focus ring from checkbox wrapper/label */
.checkbox input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus-visible,
.shiny-input-container input[type="checkbox"]:focus,
.shiny-input-container input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* Adding the checkmark correctly without additional border effects */
input[type="checkbox"]:checked::after {
  content: '✔';
  line-height: 1;
  color: var(--clr_text_tertiary) !important; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}


/* Input field styling - including dropdowns and date selectors */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
select,
.selectize-input
 {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border) !important;
  border-radius: 3px !important;
  resize: none;
  height: var(--input_height) !important;
  box-sizing: border-box;
  box-shadow: var(--input_shadow) !important;
}

textarea{
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border) !important;
  border-radius: 3px !important;
  resize: vertical;
  box-sizing: border-box;
  height: 164px !important;
  box-shadow: var(--input_shadow) !important;
}

#support_message {
  border-radius: 0px !important;
}

/* changes color of placeholder text */
login-input-wrapper input::placeholder,
.input-wrapper input::placeholder {
  color: var(--clr_text_tertiary) !important; 
  opacity: 0.5 !important; 
}

/* Style select dropdowns */
select option {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border-radius: 3px !important;
}

/* Selected options use secondary-bg */
select option:checked,
select option:selected {
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_secondary) !important;
}

/* Selectize dropdown items - selected state */
.selectize-dropdown .option.selected,
.selectize-dropdown .option.active {
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_secondary) !important;
}

/* Picker input selected items — dark text on the light selection tint (see
   the .tr-domain-list-wrapper rules for why not --clr_text_secondary). */
.bootstrap-select .dropdown-menu li.selected a,
.bootstrap-select .dropdown-menu li.active a {
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_tertiary) !important;
}

/* Picker input selected badge/tag */
.bootstrap-select .filter-option-inner-inner {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Change color of "to" */
.input-group-addon,
.input-group-prepend,
.input-group-append span{
  color: var(--clr_text_primary) !important;
}




/* Style date inputs (the visible input field) */
/* adds the margin to the date-inputs, but not to the "to" */
.input-group .form-control {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border-radius: 3px !important;
  height: var(--input_height) !important;
 
}


.creation-history-container {
  padding: 10px;
  border-bottom: 1px solid var(--clr_text_primary) !important; /* Adds a dividing line */
}

.creation-history-container:last-child {
  border-bottom: none !important; /* Remove border for the last section */
}





/* Style input labels */
label {
  color: var(--clr_text_primary) ;
  font-family: var(--font-primary);
}

/* Style tooltip label text to match regular labels */
.tooltip-label-text {
  font-weight: 700;
}

/* Style focused inputs */
input:focus,
select:focus,
textarea:focus,
.form-control:focus {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border_focus) !important;
  box-shadow: none !important;
}



/* Style the date range separator */
.daterangepicker td.in-range,
.input-daterange .input-group-addon {
  background-color: transparent !important;
  color: var(--clr_text_primary) !important;
  border-radius: 3px !important;
 border-width: 0px !important;
}

.input-daterange{
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;

}



/* The calendar panel. It is a bg_tertiary surface, so everything written on it
   is text_tertiary (Text N on Background N) — the day numbers, the weekday
   headers and the month/year/decade lists below all follow that, and the panel
   sets the colour once so anything not listed inherits it too. It used to say
   text_primary, the PAGE background's partner, which left the whole calendar
   blank in a shop where the two differ (groupm: both #F2F2F2). */
.datepicker {
  z-index: 9999 !important;  /* Higher than navbar */
  border-radius: 10px !important; /* Add rounded corners */
  box-shadow: none !important; /* Remove shadow */
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary);
}

/* Active and highlighted date styling */
.datepicker table tr td.active,
.datepicker table tr td.active.highlighted {
  background-color: var(--clr_bg_primary) !important;
  color: var(--clr_text_primary) !important;
  text-shadow: none !important;
}

/* Hover state for dates */
.datepicker table tr td:hover,
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
  background-color: var(--clr_bg_primary) !important;
  color: var(--clr_interaction2) !important;
}

/* Styling for today */
.datepicker table tr td.today {
  background-color: var(--clr_text_secondary) !important;
  color: var(--clr_bg_secondary) !important;
}
/* styling of the numbers text in the datepicker */
.datepicker table tr td,         /* Normal day numbers */
.datepicker table tr th,         /* Column headers (Su, Mo, etc.) */
.datepicker .datepicker-months span, /* Month names */
.datepicker .datepicker-years span,  /* Year selection */
.datepicker .datepicker-decades span, /* Decade selection */
.datepicker .datepicker-centuries span{
  color: var(--clr_text_tertiary);
}


/* Ensure only the hovered month is affected */
.datepicker .datepicker-months span.month:hover,
.datepicker .datepicker-years span.year:hover,
.datepicker .datepicker-decades span.decade:hover,
.datepicker .datepicker-centuries span.century:hover {
  background-color: var(--clr_text_secondary) !important;
  color: var(--clr_interaction1) !important;
  display: inline-block; /* Ensures correct hover behavior */
}

/* Ensure only hovered elements change color, not the entire tbody */
.datepicker table tr:hover {
  background-color: transparent !important;
}
/* Also ensure individual date cells change correctly */

.datepicker table tr td.day:hover {
  background-color: var(--clr_bg_primary) !important;
  color: var(--clr_interaction1) !important;
}



/* Fix the issue by preventing hover effect from applying to all elements */
.datepicker table tr td:hover,
.datepicker .datepicker-months span.month:not(:hover),
.datepicker .datepicker-years span.year:not(:hover),
.datepicker .datepicker-decades span.decade:not(:hover),
.datepicker .datepicker-centuries span.century:not(:hover) {
  background-color: var(--clr_bg_tertiary) !important; /* Keeps other elements unchanged */
  color: var(--clr_text_tertiary) !important;
}

/* Ensure tbody does not change color on hover */
.datepicker table tbody:hover {
  background-color: var(--clr_bg_tertiary) !important;
}


/* Styling for active month/year selection */
.datepicker .datepicker-months span.month.active,
.datepicker .datepicker-years span.year.active,
.datepicker .datepicker-decades span.decade.active,
.datepicker .datepicker-centuries span.century.active {
  background-color: var(--clr_bg_primary) !important;
  color: var(--clr_text_primary) !important;
}

/* styling of the date input field: resize it to the width of the container */
.input-field,
.input-field .selectize-control  {
  width: 100%;

}


/* Dropdown styling */
select,
.selectize-input,
.selectize-dropdown{
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border) !important;
}

.selectize-dropdown {
  z-index: 1000 !important;
}

/* Selected items in multiselect */
.selectize-input .item {
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_secondary) !important;
  border: none !important;
  border-radius: 3px !important;
  padding: 2px 8px !important;
}

/* Remove item button (x) in selected items */
.selectize-input .item .remove {
  color: var(--clr_text_primary) !important;
  border-left: 1px solid rgba(var(--clr_text_primary_rgb), 0.2) !important;
  padding-left: 5px !important;
  margin-left: 5px !important;
  
  border-radius: 3px !important;
}

/* Dropdown options */
.selectize-dropdown-content .option {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  
  border-radius: 3px !important;
}

/* Hover state for options */
.selectize-dropdown-content .option:hover,
.selectize-dropdown-content .active {
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_secondary) !important;
}

/* Selected option in the field */
/* select:focus,
.selectize-input.focus {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_secondary) !important;
  border: var(--input_border) !important;
  box-shadow: 0 0 0 0.2rem rgba(var(--clr_interaction1_rgb), 0.25) !important;
} */


.selectize-input.focus > input {
  color: var(--clr_text_tertiary) !important;
  background: transparent !important;
  border: none !important;
}

.selectize-input > input {
  color: var(--clr_text_tertiary) !important;
  background: transparent !important;
  border: none !important;
}

/* Dropdown arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 2l4 4 4-4z' fill='%23888888'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.75rem center !important;
  background-size: 8px 8px !important;
  padding-right: 1.5rem !important;
}

/* Style readonly inputs */
input[readonly],
.readonly-input,
input[disabled],
select[disabled] {
  background-color: color-mix(in srgb, var(--clr_bg_tertiary) 70%, black) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border) !important;
  opacity: 0.8;
  border-radius: 3px;
  box-shadow: var(--input_shadow) !important;
}

/* Focus effects for readonly/disabled inputs */
input[readonly]:focus,
.readonly-input:focus,
input[disabled]:focus,
select[disabled]:focus {
  border: var(--input_border) !important;
  box-shadow: var(--input_shadow) !important;
}

.btn-default.btn-file { background-color: var(--clr_bg_primary) !important;
border-color: var(--clr_text_primary) !important;
color: var(--clr_text_primary) !important;
border-radius: 3px !important;
height: var(--input_height) !important;
box-sizing: border-box;
display: flex;
align-items: center;
line-height: normal;
}
/* Modal styling */
.modal-content {
  background-color: var(--clr_bg_primary) !important;
  color: var(--clr_text_primary) !important;
  border-radius: 3px !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.8) !important; /* Enhanced shadow */
  position: relative;
  z-index: 1051;
  border: var(--input_border_solid) !important;
}

.modal-header {
  border-bottom: 1px solid var(--clr_text_primary) !important;
}

.modal-footer {
  border-top: 1px solid var(--clr_text_primary) !important;
}

.modal-title {
  color: var(--clr_text_primary) !important;
}

/* Modal styles */
.modal-success {
  border: 2px solid var(--clr_success);
}

.modal-failure {
  border: 2px solid var(--clr_danger);
}

/* Modal backdrop styling */
.modal-backdrop.in {
  opacity: 0.9 !important; /* Much darker background */
  background-color: rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(8px) !important; /* Increased blur */
  -webkit-backdrop-filter: blur(8px) !important;
}

/* Ensure backdrop is behind modal but above other content */
.modal {
  z-index: 1050;
}

.modal.in {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* creates sace between the label. The checkboxes move with them */
.psych-wrapper .shiny-form-group,
.psych-wrapper .shiny-options-group {
  display: flex;
  gap: 25px; 
  align-items: flex-end;
  margin: 0px 0px ;
  width: 100% !important;
  padding-right: 100px !important;
}

#briefing_details_1-psychographics_ERH-label,
#briefing_details_1-psychographics_ERH .shiny-options-group,
#briefing_details_1-psychographics_ERH {
  width: 100%;

}



/*padding ändert nur das aussehen der Checkboxen selbst */
 .psych-wrapper .shiny-input-container input[type="checkbox"] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  appearance: none;
  -webkit-appearance: none; 
  border: 2px solid var(--clr_text_primary);
  background-color: var(--clr_bg_secondary) !important;
  outline: none;
  margin:0px 0px !important; 
  gap: 20px !important;
   
}




.psych-wrapper .shiny-input-container .checkbox label {
  margin: 0px 0px	 ; /*changing this moves the label and boxes as ones */
  padding: 0px 0px ; 
  line-height: 20px ;
  align-items: space-between !important;
  /*gap: 10px !important; bringt michts */
}

.psych-wrapper .shiny-input-container .checkbox span,
.psych-wrapper .shiny-options-group .checkbox span {
  margin: 0px 0px	 ; /*changing this moves the label and boxes as ones */
  padding: 0px 0px ; 
  padding-left: 26px !important;
  line-height: 20px ;
  /*gap: 10px !important; bringt michts */
}


/* When the checkbox is focused but not checked (way from checked to unchecked) */
.psych-wrapper .shiny-input-container input[type="checkbox"]:hover {
  background-color: none !important; 
  border-color: var(--clr_interaction1) !important;
}
/* When the checkbox is focused but not checked (way from checked to unchecked) */
.psych-wrapper .shiny-input-container input[type="checkbox"]:not(:checked):hover:focus {
  background-color: none !important; 
  border-color: var(--clr_interaction1) !important;
}


/* When the checkbox is focused but not checked (way from checked to unchecked) */
.psych-wrapper .shiny-input-container input[type="checkbox"]:focus:not(:checked) {
  background-color: var(--clr_bg_secondary) !important; 
  border-color: var(--clr_text_primary) !important;
}
/* When the checkbox is active (clicked down) and checked */
.psych-wrapper .shiny-input-container input[type="checkbox"]:active:checked {
  background-color: none !important; 
  border-color: var(--clr_text_primary) !important;
}

 .psych-wrapper .shiny-input-container input[type="checkbox"]:checked {
  background-color: var(--clr_interaction1) !important; 
  border-color: var(--clr_bg_primary) !important;
} 
/* When the checkbox is focused and checked */
.psych-wrapper .shiny-input-container input[type="checkbox"]:focus:checked {
  background-color: var(--clr_interaction1) !important; 
  border-color: var(--clr_bg_primary) !important;
}
/* When the checkbox is active (clicked down) but not checked */
.psych-wrapper .shiny-input-container input[type="checkbox"]:active:not(:checked) {
background-color: var(--clr_interaction1) !important; 
  border-color: var(--clr_interaction1) !important;
}
#common_input_1-second_view,
#common_input_1-first_view {
  width: 100%;
  padding: var(--input_padding);
  margin: 0;
  max-height: calc(100vh - 100px); /* Adjust for header/footer space */
  overflow-y: auto; /* Enable vertical scrolling */
  overflow-x: hidden; /* Prevent horizontal scrolling */
}




/* Remove focus outline and inner shadow */
input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: var(--input_border) !important;
}

/* Remove focus ring from checkbox wrapper/label */
.checkbox input[type="checkbox"]:focus,
.checkbox input[type="checkbox"]:focus-visible,
.shiny-input-container input[type="checkbox"]:focus,
.shiny-input-container input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}



.login-container {
  width: 50%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center !important;
  padding: 60px 80px;
  margin-left: 0;
  align-items: flex-start !important;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  background-color: var(--clr_bg_primary);
}

.login-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: fit-content;
  height: fit-content;
}

.login-logo {
  height: 70px;
  padding: 0;
  margin: 0;
  text-align: left;
  display: flex;
  align-items: center;
}

.login-logo img {
  display: block;
  height: 70px;
  width: auto;
  object-fit: contain;
}

.login-header {
  width: 538px;
  height: 214px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.login-heading {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-very-large);
  line-height: 110%;
  letter-spacing: 0%;
  margin: 0;
  padding: 0;
  color: var(--clr_text_primary);
  font-size: 3em;
}

.login-subtitle {
  font-family: var(--font-primary);
  font-size: var(--font-size-large);
  line-height: 132%;
  letter-spacing: 0%;
  margin: 0;
  padding: 0;
  color: var(--clr_text_primary);
  align-self: flex-end;
}



.login-footer {
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
  width: fit-content;
}

.login-footer .login-footer-button {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--clr_interaction1) !important;
  text-decoration: underline !important;
  border: none !important;
  cursor: pointer;
  font-size: var(--font-size-very-small);
  font-family: var(--font-primary);
  width: auto !important;
  height: auto !important;
  display: inline !important;
  min-width: 0 !important;
}

.login-footer .login-footer-button:hover {
  color: var(--clr_interaction1) !important; 
  text-decoration: underline !important;
  background-color: transparent !important;
}

.login-footer .login-footer-text {
  margin: 0;
  padding: 0;
  font-size: var(--font-size-very-small) !important;
  font-family: var(--font-primary);
  display: inline;
}

.login-wrapper {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100vh;
}

.login-picture {
  width: 50%;
  height: 100vh;
  order: 2;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
}

.login-body {
  width: 373px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start;
  margin: 0;
}

.login-body > label {
  text-align: left !important;
  width: 100%;
  margin: 0;
}

.login-body input {
  width: 100%;
}

.login-body > .shiny-input-container {
  width: 100%;
  margin: 0;
}


 .progress-bar {
  background-color: var(--clr_bg_primary  ) !important;
  color: var(--clr_text_primary) !important;
  border-color: var(--clr_interaction1) !important;
  }


.column-left, .column-right {
    width: 48%; /* Set width for each column */
    padding: 10px; /* Add padding inside each column */
    box-sizing: border-box; /* Include padding in width calculation */
}

/* Optional: Add some styling for headings and paragraphs */
.column-left h2, .column-right h2 {
    margin-top: 0; /* Remove top margin for headings */
}

.column-left p, .column-right p {
    margin: 5px 0; /* Add margin for paragraphs */
}

.fa-info-circle {
  color: var(--clr_text_primary) !important;
}

.input-error-message {
  color: var(--clr_danger) !important;
  font-size: var(--font-size-very-small) !important;
  padding: 0 !important;
  margin: 0 0 15px !important;
  gap: 0 !important;
  min-height: 0 !important;
  line-height: 1.2;
}

.input-error-message:empty {
  display: none !important; /* Hide the element entirely when it has no content */
}

.input-error-message .shiny-html-output {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.input-error-message .shiny-html-output:empty {
  display: none !important;
}

/* shinyvalidate error messages */
.has-error .control-label,
.has-error .help-block,
.has-error .checkbox label,
.has-error .radio label {
  color: var(--clr_danger) !important;
}

.shiny-validation-message {
  color: var(--clr_danger) !important;
  font-size: var(--font-size-small) !important;
}

/* Hint text - small informational text */
.hint-text {
  color: var(--clr_text_primary) !important;
  font-size: var(--font-size-very-small) !important;
  padding: 0 !important;
  margin: 0 0 15px !important;
  line-height: 1.4;
}

/* Warning message - like error but warning color */
.warning-message {
  color: var(--clr_warning) !important;
  font-size: var(--font-size-very-small) !important;
  padding: 0 !important;
  margin: 0 0 15px !important;
  gap: 0 !important;
  min-height: 0 !important;
  line-height: 1.2;
}

.warning-message:empty {
  display: none !important;
}

.warning-message .shiny-html-output {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.warning-message .shiny-html-output:empty {
  display: none !important;
}

.define-key-motivation {
  color: var(--clr_interaction1);
}

/* Two-column layout for targeting and segment inputs */
.targeting-input {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 40px !important;
  align-items: start;
}

.targeting-left-column {
  flex: 0 0 60%;
  max-width: 60%;
}

.targeting-right-column {
  flex: 0 0 40%;
  max-width: 40%;
}

.segment-input {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 74px;
  align-items: start;
  position: relative;
}

.segment-input-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0px;
  max-width: 317px;
  overflow: visible;
}

.segment-column-heading {
  font-size: var(--font-size-large);
  font-weight: 900;
  margin: 0 0 16px 0;
}

/* Ensure input wrappers in segment columns don't extend beyond column bounds */
.segment-input-column > .input-wrapper {
  max-width: 100%;
}

.segment-input .input-wrapper {
  flex-direction: column;
  gap: 4px;
}

.sentiment-wrapper {
  flex-direction: row !important;
  gap: 10px !important;
}

/* Soft line separator between columns in segment input */
.segment-input::before {
  content: '';
  position: absolute;
  left: 50%; 
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--clr_text_primary);
  opacity: 0.3;
  transform: translateX(-50%);
}



.form-group .shiny-input-container,
#segment_input_1-pushtargets_selector {
  width: 100% !important;
}


/* Group Date Range and Never Expires together */
.input-group-dates {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

/* Group checkboxes vertically */
.input-group-checkboxes {
  display: flex;
  flex-direction: column !important;
  gap: 0;
  align-items: flex-start;
}

.input-group-checkboxes .checkbox {
  display: block;
  width: 100%;
  margin: 0;
}




/* Ensure bootstrap-select (pickerInput) and selectInput take full width in segment-input */
/* .segment-input .input-wrapper .bootstrap-select,
.segment-input .input-wrapper .bootstrap-select button,
.segment-input .input-wrapper select,
.segment-input .input-wrapper .form-control,
.segment-input .input-wrapper .selectize-control,
.segment-input .input-wrapper .selectize-input {
  width: 100% !important;
} */

/* Fix domain list / pickerInput click area extending beyond visible bounds */
.segment-input .input-wrapper .shiny-input-container {
  max-width: 100%;
  overflow: visible;
}

.segment-input .input-wrapper .bootstrap-select.form-control {
  max-width: 100%;
}

#input_wrapper-segment_input-pushtargets_selector {
  width: 100% !important;
}

/* Prevent global button sizing from affecting dropdowns and checkboxes */
.bootstrap-select button.dropdown-toggle,
.checkbox button,
.checkbox label button,
.shiny-input-checkboxgroup button {
  width: auto !important;
  height: auto !important;
}


/* Footer support button - compact size override */
.footer-support-btn {
  width: 120px !important;
  height: 25px !important;
  font-size: var(--font-size-small) !important;
  padding: 0 15px !important;
}

/* Add input modal buttons - height handled by .btn base class */
.add-input-modal-buttons .btn-add-input {
  width: 100% !important;
}

/* Ensure navigation buttons container */
.nav-buttons {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  width: 100%;
  margin-top: 30px;
  margin-bottom: 70px;
  padding-top: 20px;
  gap: 16px;
}

/* Back button aligned left when both buttons exist */
.nav-buttons button:first-child:not(:last-child) {
  margin-right: auto;
}

/* Next/Summary button always aligned right */
.nav-buttons button:last-child {
  margin-left: 0;
}

/* Add Input button styling */
.add-input-button-container {
  margin-top: 20px;
  width: 100%;
  display: flex;
  justify-content: flex-start;
}


/* Add Input Modal Styling */
.add-input-modal-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.btn-add-input {
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  background-color: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
  border: var(--input_border_solid);
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.btn-add-input:hover {
  background-color: color-mix(in srgb, var(--clr_bg_tertiary) 85%, black);
}

.btn-add-input i {
  margin-right: 10px;
}

.add-input-modal-feedback {
  min-height: 50px;
}



/* Table alignment in modals */
.borderless-table {
  border-collapse: collapse;
  width: 100%;
}

.borderless-table td, 
.borderless-table th {
  border: none !important;
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;  /* Align content to top */
}

.borderless-table td:first-child {
  width: 30%;  /* Fixed width for first column */
  white-space: nowrap;  /* Prevent label wrapping */
}

.borderless-table td:last-child {
  width: 70%;  /* Remaining space for content */
}

/* Ensure HTML content in cells aligns properly */
.borderless-table td span,
.borderless-table td p {
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Summary subheading rows (Campaign / Segment) */
.summary-subheading td {
  padding-top: 16px !important;
  padding-bottom: 2px !important;
  font-size: var(--font-size-small);
  color: var(--clr_text_primary);
  border-bottom: 1px solid var(--clr_text_primary) !important;
  opacity: 0.7;
}

/* Section heading with line (standalone, non-table) */
.section-heading-lined {
  padding-top: 12px;
  padding-bottom: 4px;
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--clr_text_primary);
  border-bottom: 1px solid var(--clr_text_primary);
  opacity: 0.7;
  margin-bottom: 8px;
}

.section-heading-lined:first-child {
  padding-top: 0;
}

/* Summary warning text - smaller and italic (color via data-color) */
.summary-warning {
  font-size: var(--font-size-very-small) !important;
  font-style: italic;
  display: block;
  margin-top: 2px;
}

/* ########################### */
/* Removed toggle buttons CSS - replaced with switches */

.psych-context-input-wrapper .form-group {
  margin-bottom: 0;
  flex: 1;
}

.psych-context-input-wrapper textarea {
  height: 200px !important;
}

/* Product description textarea height */
.product-description-block textarea {
  height: 195px !important;
  box-shadow: 0 0 0 0 !important;
}

/* Text input switches container styling */
.text-input-switches {
  min-width: 200px;
  padding: var(--input_padding);
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Material switch label on separate row */
.text-input-switches .material-switch {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.text-input-switches .material-switch label {
  display: block;
  width: 100%;
  margin-bottom: 8px;
  order: -1; /* Put label before the switch */
}

.text-input-switches .material-switch .switch {
  order: 1; /* Put switch after the label */
}

.material-switch>label.switch:before {
  background-color: var(--clr_text_primary) !important;
}

/* Text input switches styling */
.text-input-switches .bootstrap-switch {
  background-color: var(--clr_bg_tertiary) !important;
  border-color: var(--clr_bg_tertiary) !important;
}

.text-input-switches .bootstrap-switch.bootstrap-switch-on {
  border-color: var(--clr_success) !important;
}

.text-input-switches .bootstrap-switch.bootstrap-switch-off {
  border-color: var(--clr_interaction2) !important;
}

.text-input-switches .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
  background-color: var(--clr_success) !important;
  color: var(--clr_text_primary) !important;
}

.text-input-switches .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
  background-color: var(--clr_interaction2) !important;
  color: var(--clr_text_primary) !important;
}

.text-input-switches .bootstrap-switch .bootstrap-switch-label {
  background-color: var(--clr_bg_tertiary) !important;
}

/* CIRCLE when OFF */
.material-switch label.switch::after {
  border: var(--input_border) !important;
}

/* BAR when ON */
.material-switch input:checked + label.switch:before {
  background-color: var(--clr_interaction2) !important;
}

/* CIRCLE when ON */
.material-switch input:checked + label.switch:after {
  background-color: var(--clr_interaction2) !important;
  box-shadow: 0 0 0 0 !important;
  border: none !important;
}

/* Warning message under product description */
.product-description-block .input-error-message {
  color: var(--clr_danger);
  font-weight: bold;
  margin-top: 5px;
}

.product-description-block-content {
  display: flex;
}

.product-description-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-desc-textarea{
  flex:0 0 70%;
}

/* AI-Help: button overlapping the bottom-left corner of the Segment
   Description textarea, and the Brand/Url flyout panel it reveals below. */
.ai-help-textarea-wrapper {
  position: relative;
  margin-bottom: 18px;
}

/* !important throughout: general.css loads AFTER custom.css and its
   `.tr-btn.tr-btn-small`/`:active` rule sets `min-width: 164px` at the exact
   same specificity as this one — on that tie general.css wins, so the button
   silently snapped to 164px wide the moment it was pressed. Pinning the whole
   box model here (not just min-width) means no later same-specificity rule,
   for any interaction state, can resize this precisely-positioned overlay. */
.tr-btn.ai-help-toggle-btn,
.tr-btn.ai-help-toggle-btn:hover,
.tr-btn.ai-help-toggle-btn:focus,
.tr-btn.ai-help-toggle-btn:active {
  position: absolute;
  left: 10px;
  bottom: -8px;
  z-index: 2;
  width: auto !important;
  min-width: 0 !important;
  height: var(--button_height_small) !important;
  padding: 0 var(--small_padding) !important;
  box-sizing: border-box !important;
  color: var(--clr_text_secondary);
  /* Success colour per feedback (was --clr_color3, which is identical to
     success in the TR palette but a plain grey in mprt's). */
  background-color: var(--clr_success);
  /* Full shorthand + !important: general.css's later `.tr-btn.tr-btn-small`
     rule sets the whole `border` shorthand at the same specificity, which
     would silently override a plain border value on the cascade tie. Same
     border as every other button (`--input_border`). */
  border: var(--input_border) !important;
}

.tr-btn.ai-help-toggle-btn:hover {
  filter: brightness(90%);
}

.ai-help-panel {
  margin-top: 4px;
  padding: 12px;
  border: var(--input_border);
  border-radius: 3px;
  background-color: var(--clr_bg_secondary);
  /* Text pairs with its background by index: this is a BgSecondary surface,
     so everything written on it uses TextSecondary (mprt: light on black;
     identical hex in the TR palette). The inputs keep their own surface. */
  color: var(--clr_text_secondary);
}

.ai-help-panel label,
.ai-help-panel .control-label {
  color: var(--clr_text_secondary);
}

.ai-help-panel-row {
  display: flex;
  gap: 12px;
}

.ai-help-panel-field {
  flex: 1;
}

/* Media query for screens smaller than 940px */
@media screen and (max-width: 720px) {
  
  .input-wrapper-container .nav-tabs > li{
    flex: 0 0 55px !important;
  }
  .login-picture {
    display: none; /* Hide the login picture */
  }
  
  .login-container {
    width: 100%; /* Ensure the login container takes full width */
    padding: 40px 20px;
  }
  
  .login-content {
    width: 100%;
  }
  
  .login-header {
    width: 100%;
    height: auto;
  }
  
  .login-body {
    width: 100%;
  }
  

  
  .input-container {
    flex-direction: column; /* Stack children vertically */
  }

  .briefing_details,
  .common_input {
    flex: 1 1 100%; /* Take full width */
    width: 100%;
    max-width: 100%;
  }

  .input-wrapper {
    flex-direction: column; /* Stack inputs vertically */
    gap: 0px !important;
  }

  .input-wrapper > * {
    width: 100% !important; /* Force all children to full width */
    margin:16px 0;
  }

  /* Adjust sentiment input group */
  .input-wrapper .selectize-control,
  .input-wrapper input[type="number"] {
    width: 100% !important;
  }

  /* Ensure buttons stack properly */
  .button-group {
    flex-direction: column;
    gap: 10px;
  }

  .button-group button {
    width: 100%;
  }
  
  /* Mobile responsive for targeting and segment inputs */
  .targeting-input,
  .segment-input {
    flex-direction: column;
    gap: 20px;
  }

  .segment-input-column {
    width: 100%;
    max-width: 100%;
  }

  /* Hide the vertical divider between segment columns on mobile */
  .segment-input::before {
    display: none;
  }

  /* Adjust header height for mobile */
  .header-container {
    min-height: 80px;
    padding: 10px var(--input_padding) 0;
  }

  .tr-header-bar {
    flex-wrap: nowrap;
  }

  .navbar {
    height: auto; /* Allow navbar to expand */
    min-height: 80px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .navbar-nav {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

 

  /* Content container adjustments */
  .content-container {
    margin-bottom: 0; /* Remove margin since footer isn't fixed */
    min-height: calc(100vh - 220px); /* Account for header and footer */
    padding: 0 15px; /* Add horizontal margin so inputs don't touch screen edges */
    box-sizing: border-box;
  }

  /* Input container adjustments */
  .input-container {
    flex-direction: column;
    gap: 20px;
  }

  /* Ensure proper spacing between sections */
  #common_input_1-second_view,
  #common_input_1-first_view {
    max-height: none; /* Remove max height restriction */
    overflow: visible; /* Allow content to flow naturally */
  }
  body{
    background-position: center calc(100% - var(--footer_height));
  }
  
  .user-profile {
  
    margin: 0 auto; /* Centers the content */
    background-color: none; /* Optional: background color for the content */
    padding: 0 0 ; /* Padding inside the content area */
    display: block !important;
    flex-direction: none;
  }
  
  .user-column {
    flex: 0;
    max-width: 100%;
    padding: var(--input_padding);
    margin: 0;
  
  }
  .user-column-creations {
    flex: 0;
    max-width: 100%;
    padding: var(--input_padding);
    margin: 0;
  }

  /* Arrow tabs - stack vertically on mobile */
  .input-wrapper-container .nav-tabs {
    width: 100% !important;
    flex-direction: column;
    gap: 0;
    margin: 0 0 10px 0;
    padding: 0;
  }

  .input-wrapper-container .nav-tabs > li {
    flex: none;
    width: 100%;
    margin: 0 !important;
    padding: 0;
  }

  .input-wrapper-container .nav-tabs > li > a {
    width: 100%;
    height: 36px;
    clip-path: none;
    border-radius: 0;
    padding: 0 16px;
    margin: 0;
  }

  .input-wrapper-container .nav-tabs > li:first-child > a {
    clip-path: none;
    border-radius: 6px 6px 0 0;
    padding: 0 16px;
  }

  .input-wrapper-container .nav-tabs > li:last-child > a {
    clip-path: none;
    border-radius: 0 0 6px 6px;
    padding: 0 16px;
  }

  /* Targeting columns full width on mobile */
  .targeting-left-column,
  .targeting-right-column {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
  }

  /* User profile tabs (the tab anchors keep their compact main-tab-bar
     sizing from the desktop rules) */
  .user-profile-new {
    padding: 10px;
  }

  .user-tab-content {
    padding: 15px 10px;
  }
}

/* Channel Selection Checkboxes */
.channel-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

/* Slider container sizing - matching main app */
.psych-context-slider-wrapper .irs {
  height: 52px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Align inner content to top */
.psych-context-slider-wrapper .irs-inner {
  top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Slider bar and line styling - matching main app, aligned to top */
.psych-context-slider-wrapper .irs-bar,
.psych-context-slider-wrapper .irs-line,
.psych-context-slider-wrapper .irs-line::before {
  background: var(--clr_interaction2) !important;
  border-color: var(--clr_interaction2) !important;
  height: 22px !important;
  border-radius: 20px !important;
  opacity: 0.5 !important;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, .5);
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
  top: 0 !important;
}

/* Slider handle styling - matching main app, aligned to top with bar */
.psych-context-slider-wrapper .irs--shiny .irs-handle {
  background-color: var(--clr_interaction2) !important;
  border-color: var(--clr_interaction2) !important;
  top: 0 !important;
  height: 22px !important;
  width: 22px !important;
  border-radius: 50% !important;
}

/* Value labels styling - matching main app */
.psych-context-slider-wrapper .irs-single,
.psych-context-slider-wrapper .irs-from,
.psych-context-slider-wrapper .irs-to {
  background: none !important;
  color: var(--clr_text_primary) !important;
  border-radius: 50% !important;
  padding: 8px;
  height: 30px;
  width: 30px;
}

/* Hide value labels by default (show when .show-value class is present) */
.psych-context-slider-wrapper .irs-single,
.psych-context-slider-wrapper .irs-from,
.psych-context-slider-wrapper .irs-to {
  display: none !important;
}

/* Show value labels when show-value class is present */
.psych-context-slider-wrapper.show-value .irs-single,
.psych-context-slider-wrapper.show-value .irs-from,
.psych-context-slider-wrapper.show-value .irs-to {
  display: block !important;
}

/* Hide min/max labels - matching main app */
.psych-context-slider-wrapper .irs-min,
.psych-context-slider-wrapper .irs-max {
  display: none !important;
}

/* Hide grid poles - matching main app */
.psych-context-slider-wrapper .irs-grid-pol.small,
.psych-context-slider-wrapper .irs-grid-pol {
  display: none;
}

/* Hide single bar - matching main app */
.psych-context-slider-wrapper .irs--shiny .irs-bar--single {
  display: none;
}

/* Remove margin-bottom only for this specific slider */
.psych-context-slider-wrapper .form-group,
.psych-context-slider-wrapper .shiny-input-container {
  margin-bottom: 0 !important;
}

.irs--shiny .irs-line::before {
  display: none;
}

.psych-context-slider-wrapper .irs {
  height: 28px !important;
}

/* Adjust spacing when show-value is enabled - push bar and handle down */
.psych-context-slider-wrapper.show-value .irs {
  position: relative;
}

.psych-context-slider-wrapper.show-value .irs-bar,
.psych-context-slider-wrapper.show-value .irs-line,
.psych-context-slider-wrapper.show-value .irs-line::before {
  top: 12px !important;
  overflow: hidden;
}

.psych-context-slider-wrapper.show-value .irs--shiny .irs-handle {
  top: 12px !important;
}

/* Position value label above the bar */
.psych-context-slider-wrapper.show-value .irs-single,
.psych-context-slider-wrapper.show-value .irs-from,
.psych-context-slider-wrapper.show-value .irs-to {
  top: -15px !important;
  bottom: auto !important;
  margin: 9px !important;
  white-space: nowrap;
  min-width: fit-content;
  position: absolute;
}

/* Left-align for first half (including middle) - start of text is fixed, extends to the right */
.psych-context-slider-wrapper.show-value .irs-single.slider-label-left-align,
.psych-context-slider-wrapper.show-value .irs-from.slider-label-left-align,
.psych-context-slider-wrapper.show-value .irs-to.slider-label-left-align {
  text-align: left !important;
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  padding-right: 0 !important;
}

/* Right-align for second half - end of text is fixed, extends to the left */
.psych-context-slider-wrapper.show-value .irs-single.slider-label-right-align,
.psych-context-slider-wrapper.show-value .irs-from.slider-label-right-align,
.psych-context-slider-wrapper.show-value .irs-to.slider-label-right-align {
  text-align: right !important;
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  margin-left: auto !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
}

.psych-context-slider-wrapper.show-value{
  margin-top:8px !important;
}

.psych-context-slider-wrapper {
  margin-bottom: 15px !important;
}

/* Slider label container ###*/
.psych-context-slider-labels { 
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}

/* Slider labels - make them smaller */
.psych-context-slider-label-left,
.psych-context-slider-label-right {
  font-size: var(--font-size-small) !important;
  color: var(--clr_text_primary) !important;
}

/* Ensure right label is aligned to the right */
.psych-context-slider-label-right {
  text-align: right;
  margin-left: auto;
}

.channel-checkboxes .checkbox,
.checkbox-disabled-wrapper .checkbox {
  margin: 0;
}

/* Remove focus styling from channel checkboxes */
.channel-checkboxes input[type="checkbox"]:focus,
.channel-checkboxes input[type="checkbox"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--clr_text_primary) !important;
}

.checkbox-disabled-wrapper input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Reset and style the custom radio button - make them square like checkboxes */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: var(--input_border);
  border-radius: 2px;
  background-color: var(--clr_bg_tertiary);
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

/* Remove focus outline and inner shadow */
input[type="radio"]:focus,
input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: var(--input_border) !important;
  box-sizing: border-box;
}

/* Remove focus ring from radio wrapper/label */
.radio input[type="radio"]:focus,
.radio input[type="radio"]:focus-visible,
.shiny-input-container input[type="radio"]:focus,
.shiny-input-container input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Adding the checkmark when selected (same as checkbox) */
input[type="radio"]:checked::after {
  content: '✔';
  line-height: 1;
  color: var(--clr_text_primary) !important; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Channel Selection Radio Buttons - apply same styling as checkboxes */
.channel-checkboxes input[type="radio"]:focus,
.channel-checkboxes input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--clr_text_primary) !important;
}

.checkbox-disabled-wrapper input[type="radio"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Further options container radio buttons styling */
.further-options-container input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: var(--input_border);
  border-radius: 2px;
  background-color: var(--clr_bg_tertiary);
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  outline: none;
  box-sizing: border-box;
}

.further-options-container input[type="radio"]:focus,
.further-options-container input[type="radio"]:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: var(--input_border) !important;
  box-sizing: border-box;
}

.further-options-container input[type="radio"]:checked::after {
  content: '✔';
  line-height: 1;
  color: var(--clr_text_tertiary) !important; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* Radio button labels styling - match checkbox labels */
.further-options-container .radio label,
.further-options-container .shiny-input-container .radio label {
  margin: 0;
  padding: 0;
  padding-left: 26px !important;
  line-height: 20px;
}

.further-options-container .radio,
.further-options-container .shiny-input-container .radio {
  margin: 0;
}

/* Arrow-style tabs for Briefing/Targeting/Segment */
.input-wrapper-container .nav-tabs {
  border: none;
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  width: 710px;
  position: relative;
}

.input-wrapper-container .nav-tabs > li {
  flex: 0 0 242px;
  margin: 0;
  position: relative;
}

/* Overlap the tabs - shift them left */
.input-wrapper-container .nav-tabs > li:nth-child(2) {
  margin-left: -8px;
  z-index: 2;
}

.input-wrapper-container .nav-tabs > li:nth-child(3) {
  margin-left: -8px;
  z-index: 1;
}

.further-options-container 
.shiny-input-radiogroup label ~ .shiny-options-group {
    margin-top: 0;
}

.input-wrapper-container .nav-tabs > li > a {
  border: none !important;
  border-radius: 0;
  width: 242px;
  height: 52px;
  padding: 0 40px 0 30px;
  margin: 0;
  position: relative;
  z-index: 1;
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%, 30px 50%);
  transition: background 0.3s ease, opacity 0.3s ease;
  text-align: center;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.input-wrapper-container .nav-tabs > li:first-child > a {
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
  padding: 0 40px 0 20px;
}

.input-wrapper-container .nav-tabs > li:last-child > a {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 30px 50%);
  padding: 0 20px 0 40px;
}

/* Inactive tab colors with 40% opacity */
.input-wrapper-container .nav-tabs > li:nth-child(1):not(.active) > a {
  background: color-mix(in srgb, var(--clr_color1) 40%, var(--clr_bg_tertiary));
  color: var(--clr_text_primary);
}

.input-wrapper-container .nav-tabs > li:nth-child(2):not(.active) > a {
  background: color-mix(in srgb, var(--clr_color2) 40%, var(--clr_bg_tertiary));
  color: var(--clr_text_primary);
}

.input-wrapper-container .nav-tabs > li:nth-child(3):not(.active) > a {
  background: color-mix(in srgb, var(--clr_color3) 40%, var(--clr_bg_tertiary));
  color: var(--clr_text_primary);
}

/* Active tab colors - full opacity */
.input-wrapper-container .nav-tabs > li:nth-child(1).active > a,
.input-wrapper-container .nav-tabs > li:nth-child(1).active > a:hover,
.input-wrapper-container .nav-tabs > li:nth-child(1).active > a:focus {
  background: var(--clr_color1);
  color: var(--clr_text_primary);
  font-weight: 900;
}

.input-wrapper-container .nav-tabs > li:nth-child(2).active > a,
.input-wrapper-container .nav-tabs > li:nth-child(2).active > a:hover,
.input-wrapper-container .nav-tabs > li:nth-child(2).active > a:focus {
  background: var(--clr_color2);
  color: var(--clr_text_primary);
  font-weight: 900;
}

.input-wrapper-container .nav-tabs > li:nth-child(3).active > a,
.input-wrapper-container .nav-tabs > li:nth-child(3).active > a:hover,
.input-wrapper-container .nav-tabs > li:nth-child(3).active > a:focus {
  background: var(--clr_color3);
  color: var(--clr_text_primary);
  font-weight: 900;
}

/* Hover states for tabs - 80% brightness (not for active tab) */
.input-wrapper-container .nav-tabs > li:not(.active) > a:hover {
  filter: brightness(80%);
}


/* User Profile container (the tab STYLING lives with the main-tab-bar rules
   near .tr-main-tabs — the Profile | Admin Tools tabs wear the same dress as
   Creation | Management; the old interaction1-filled tab block that lived
   here was removed, it silently won the cascade over that shared look). */
.user-profile-new {
  max-width: 708px;
  margin: 0 auto;
  padding: 0;
}

.user-tab-content {
  padding: 0;
  padding-bottom: 50px; /* Space between content and footer */
  background-color: transparent;
}

.creation-table-wrapper {
  position: relative;
}

.creation-table-wrapper .dataTables_filter {
  float: left !important;
  text-align: left !important;
}

.creation-table-wrapper .user-tab-header-actions {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  margin: 0;
}

.user-profile-inputs,
.user-preferences-inputs {
  display: flex;
  flex-direction: column;
}

/* Collapse panels styling - reusable for any options collapse */
.tr-panel-group {
  margin-bottom: 0;
}

/* This resets Bootstrap's .panel styles while keeping the JS functionality, and the .tr-panel styles will apply on top of it. */
.tr-panel.panel {
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}


.tr-panel {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
  padding: var(--small_padding) 0;
}

.tr-panel-heading {
  border: none ;
  border-radius: 3px ;
  padding: 0 ;
  box-shadow: none ;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  height: var(--input_height);
}

/* Static heading bar used by campaign_page_panel: a single flex row holding
   the title and any sibling action button (e.g. the Campaign Data reset
   button). No collapse trigger / caret — the panels are static and their
   content is always visible. The `tr-panel-heading-extra` is pushed to the
   right edge of the bar. */
.tr-panel-heading-trigger {
  display: flex;
  align-items: center;
  gap: var(--small_padding);
  padding: 0 var(--small_padding);
  background-color: var(--clr_interaction2);
  color: var(--clr_text_primary);
  text-decoration: none;
  cursor: default;
}

.tr-panel-heading-trigger > .tr-panel-title {
  flex: 0 0 auto;
  margin: 0;
  font-weight: 500;
}

.tr-panel-heading-trigger > .tr-panel-heading-extra {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
}

.tr-panel-title {
  font-weight: 500;
  margin: 0;
}

.tr-panel-title > a,
.tr-panel-title > a:hover,
.tr-panel-title > a:focus,
.tr-panel-title > a:active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--small_padding);
  height: var(--input_height);
  background-color: var(--clr_interaction2);
  color: var(--clr_text_primary);
  text-decoration: none;
}

.tr-panel-title > a:hover {
  opacity: 0.9;
}

.tr-panel-collapse {
  border: none !important;
  box-shadow: none;
}

.tr-panel-body {
  padding: var(--small_padding) 0;
  border: none !important;
  background-color: transparent;
}

/* Remove the default caret/arrow and add custom one */
.tr-panel-title > a::after {
  content: '\25B6';
  color: var(--clr_text_primary);
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}

.tr-panel-title > a[aria-expanded="true"]::after {
  transform: rotate(90deg);
}

/* ########################### */
/* Preloaded Field Styling */
/* ########################### */

/* Preloaded field styling - slightly darker background based on bg_primary */
.field-preloaded input[type="text"],
.field-preloaded input[type="number"],
.field-preloaded select,
.field-preloaded textarea,
.field-preloaded .selectize-input,
.field-preloaded .autonumeric-input,
.input-wrapper.field-preloaded input[type="text"],
.input-wrapper.field-preloaded input[type="number"],
.input-wrapper.field-preloaded select,
.input-wrapper.field-preloaded textarea,
.input-wrapper.field-preloaded .selectize-input,
.input-wrapper.field-preloaded .autonumeric-input {
  background-color: color-mix(in srgb, var(--clr_bg_tertiary) 85%, black) !important;
  border-left: 3px solid var(--clr_text_secondary) !important;
}

/* Preloaded field that is locked (read-only) */
.field-preloaded-locked input[type="text"],
.field-preloaded-locked input[type="number"],
.field-preloaded-locked select,
.field-preloaded-locked textarea,
.field-preloaded-locked .selectize-input,
.field-preloaded-locked .autonumeric-input,
.input-wrapper.field-preloaded-locked input[type="text"],
.input-wrapper.field-preloaded-locked input[type="number"],
.input-wrapper.field-preloaded-locked select,
.input-wrapper.field-preloaded-locked textarea,
.input-wrapper.field-preloaded-locked .selectize-input,
.input-wrapper.field-preloaded-locked .autonumeric-input {
  background-color: color-mix(in srgb, var(--clr_bg_tertiary) 75%, black) !important;
  border-left: 3px solid var(--clr_text_secondary) !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}



/* Custom styling for Separate Segments switch */
.separate-segments-switch-wrapper .bootstrap-switch {
  background-color: var(--clr_bg_tertiary) !important;
  border-color: var(--clr_bg_tertiary) !important;
}

.separate-segments-switch-wrapper .bootstrap-switch.bootstrap-switch-on {
  border-color: var(--clr_success) !important;
}

.separate-segments-switch-wrapper .bootstrap-switch.bootstrap-switch-off {
  border-color: var(--clr_interaction2) !important;
}

.separate-segments-switch-wrapper .bootstrap-switch.bootstrap-switch-on .bootstrap-switch-handle-on {
  background-color: var(--clr_success) !important;
  color: var(--clr_text_primary) !important;
}

.separate-segments-switch-wrapper .bootstrap-switch.bootstrap-switch-off .bootstrap-switch-handle-off {
  background-color: var(--clr_interaction2) !important;
  color: var(--clr_text_primary) !important;
}

.separate-segments-switch-wrapper .bootstrap-switch .bootstrap-switch-label {
  background-color: var(--clr_bg_tertiary) !important;
}

/* Ensure bootstrap-select search box always has a border */
.bs-searchbox .form-control,
.bs-searchbox .form-control:focus,
.bs-searchbox .form-control:active {
  border: var(--input_border) !important;
  box-shadow: none !important;
}

/* ########################### */
/* Inline Style Replacements */
/* ########################### */

/* Geo targeting warning margin */
.geo-targeting-warning {
  margin-bottom: 10px;
}


.further-options-container {
  margin-left: 25px;
  padding: 5px;
  border-left: 2px solid var(--clr_interaction2);
}

/* Separate segments switch wrapper */
.separate-segments-switch-wrapper {
  margin-top: 15px;
  border-top: 1px solid var(--border_color);
  padding-top: 10px;
}

/* Modal title styles */
.modal-title-accent {
  color: var(--clr_interaction1);
}

.modal-title-success {
  color: var(--clr_success);
}

.modal-title-danger {
  color: var(--clr_danger);
}

.modal-title-center {
  text-align: center;
}

.modal-icon-center {
  text-align: center;
  margin-bottom: 12px;
}

.modal-icon-success {
  color: var(--clr_success);
  font-size: var(--font-size-very-large);
  margin-bottom: 15px;
}

.modal-icon-danger {
  color: var(--clr_danger);
  font-size: var(--font-size-very-large);
  margin-bottom: 15px;
}

.modal-message-bold-danger {
  color: var(--clr_danger);
  font-weight: bold;
}

.modal-error-list {
  text-align: left;
  padding: 10px 20px;
}

/* Secondary hint under a modal's main message (e.g. "you will continue at
   <other shop>"). Colour is deliberately `inherit`, not text_primary: the modal
   is its own surface, and naming the page-level colour here is exactly the
   pairing bug that blanked labels on bg_tertiary surfaces in the groupm theme. */
.modal-message-hint {
  display: block;
  margin-top: 10px;
  font-size: var(--font-size-very-small);
  color: inherit;
  opacity: 0.75;
  line-height: 1.4;
}

/* Feed modal item */
.feed-item {
  border: 1px solid color-mix(in srgb, var(--clr_text_primary) 20%, transparent);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
}


/* File upload display */
.file-uploaded-display {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--clr_bg_primary);
  border-radius: 5px;
  border: var(--input_border);
  margin-bottom: 10px;
}

.file-uploaded-display-content {
  flex: 1;
}

.file-uploaded-label {
  display: block;
  margin-bottom: 5px;
}

.file-uploaded-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.file-uploaded-icon {
  color: var(--clr_interaction1);
}

.file-uploaded-name {
  color: var(--clr_text_primary);
  font-weight: 500;
}

.file-uploaded-size {
  color: var(--clr_text_secondary);
}

/* Flex layouts */
.flex-row-center {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
}

.flex-1 {
  flex: 1;
}

.tr-text-muted {
  color: var(--clr_text_primary);
  opacity: 0.7;
  font-size: var(--font-size-small);
}

.flex-row-center-gap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.flex-row-center-gap-margin {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

/* Textarea width */
.textarea-width-80 {
  width: 80%;
}

.textarea-width-20 {
  width: 20%;
}

/* Added inputs display */
.added-inputs-container {
  margin-top: 15px;
  padding: 10px;
  background-color: var(--clr_bg_secondary);
  color: var(--clr_text_secondary);
  border-radius: 3px;
}

.added-inputs-title {
  margin: 0;
  font-weight: bold;
}

.added-inputs-list {
  margin: 5px 0 0 0;
  padding-left: 0;
}

.added-input-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}

.added-input-check {
  color: var(--clr_interaction1);
}

/* Status badge */
.status-badge-container {
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: var(--clr_bg_secondary);
  color: var(--clr_text_secondary);
}

.status-badge-bold {
  font-weight: bold;
}

/* SSP Deal Settings */
.dsp-fields-container {
  margin-top: 10px;
  padding: 10px;
  background-color: var(--clr_bg_secondary);
  color: var(--clr_text_secondary);
  border-radius: 4px;
}

.dsp-fields-title {
  font-weight: bold;
  margin-bottom: 10px;
}

/* text-danger, text-accent, text-success replaced by data-color attribute */

/* User details footer */
.user-details-footer {
  font-size: var(--font-size-small);
  text-align: center;
}

/* Icon font sizes */
.icon-size-large {
  font-size: var(--font-size-very-large);
}



.impressum-copyright {
  font-size: var(--font-size-very-small);
  color: var(--clr_text_secondary);
}

/* Footer separator */
.footer-separator {
  margin: 0 8px;
  white-space: pre;
}

/* Order summary title */
.creation-summary-title {
  text-align: center;
  color: var(--clr_interaction1);
}

/* Loading spinner */
.loading-spinner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.6);
  z-index: 9999;
  text-align: center;
}

.loading-spinner-content {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

/* Hidden UI elements */
.ui-hidden {
  display: none;
}

/* Modal info text */
.modal-info-text {
  color: var(--clr_interaction1);
  font-style: italic;
}

.modal-info-text-small {
  font-size: var(--font-size-small);
  font-style: italic;
  color: var(--clr_text_primary);
}


/* Custom styling for domain list dropdown */
.tr-domain-list-wrapper .bootstrap-select {
  width: 100% !important;
}

/* Fix for underlying select element interfering with the dropdown */
.tr-domain-list-wrapper .bootstrap-select select {
  position: absolute !important;
  bottom: 0;
  left: 50%;
  display: block !important;
  width: 0px !important;
  height: 0px !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: none !important;
  z-index: -1 !important;
  box-shadow: none !important;
}

.tr-domain-list-wrapper .bootstrap-select .dropdown-menu {
  padding: 0 !important;
  margin: 0 !important;
  border: var(--input_border) !important;
  border-radius: 3px !important;
  box-shadow: var(--input_shadow) !important;
  background-color: var(--clr_bg_tertiary) !important;
  max-height: 300px !important; /* Limit height */
  min-width: 300px !important;
}

.tr-domain-list-wrapper .bootstrap-select .dropdown-menu.inner {
  max-height: 250px !important; /* Limit inner height */
  overflow-y: auto !important;
}

.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li a {
  padding: 8px 12px !important;
  color: var(--clr_text_tertiary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important; /* Space between checkmark and text */
}

/* Hover/selected keep the dropdown's normal (dark) text: bootstrap flips the
   active option's title to white and --clr_text_secondary is a light colour in
   some shop palettes, both unreadable on the light --clr_bg_secondary tint. */
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li a:hover,
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li a:focus {
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_tertiary) !important;
  outline: none !important;
}

.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li.selected a,
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li.active a {
  background-color: var(--clr_bg_secondary) !important;
  color: var(--clr_text_tertiary) !important;
}

/* The library forces the subtext white on active rows
   (`li.active small { color: rgba(255,255,255,.5) !important }`) — keep the
   description readable; higher specificity wins the !important tie. */
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li.selected small,
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li.active small {
  color: var(--clr_text_tertiary) !important;
  opacity: 0.75;
}

/* Ensure checkmark is visible and aligned */
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li a span.check-mark {
  position: static !important; /* Reset absolute positioning if any */
  margin-right: 0 !important;
  display: inline-block !important;
  width: 16px !important; /* Fixed width for alignment */
  text-align: center !important;
}

/* Hide checkmark for unselected items if needed, or style it */
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li:not(.selected) a span.check-mark {
  opacity: 0; /* Hide but keep space */
}

.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li.selected a span.check-mark {
  opacity: 1;
  color: var(--clr_interaction1) !important;
}

/* Search box styling */
.tr-domain-list-wrapper .bs-searchbox {
  padding: 8px !important;
  background-color: var(--clr_bg_tertiary) !important;
  border-bottom: 1px solid var(--input_border_color) !important;
}

.tr-domain-list-wrapper .bs-searchbox .form-control {
  margin-bottom: 0 !important;
  width: 100% !important;
}

/* Button styling override */
.tr-picker-btn {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border) !important;
  border-radius: 3px !important;
  height: var(--input_height) !important;
  box-shadow: var(--input_shadow) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important; /* Align text left, caret right */
  width: 100% !important;
}

.tr-picker-btn:focus,
.tr-picker-btn:active,
.tr-picker-btn[aria-expanded="true"] {
  border: var(--input_border_focus) !important;
  outline: none !important;
  box-shadow: none !important;
}

.tr-picker-btn .filter-option {
  flex: 1 !important;
  text-align: left !important;
  overflow: hidden !important;
}

.tr-picker-btn .bs-caret {
  margin-left: 10px !important;
}

/* Stack subtext under the option name in the dropdown list.
   bootstrap-select wraps the subtext in <small class="text-muted"> inside .text;
   making .text a column-flex container puts name and subtext on separate lines. */
.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li a .text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.2 !important;
}

.tr-domain-list-wrapper .bootstrap-select .dropdown-menu li a .text-muted {
  display: block !important;
  margin-left: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  font-size: 0.8em !important;
  margin-top: 2px !important;
}

/* ===== DOOH Feature Selection Module ===== */

.dooh-feature-selection-wrapper {
  width: 100%;
  margin-top: 10px;
}

.dooh-feature-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.dooh-feature-search-wrapper {
  flex: 1;
  min-width: 0;
  overflow: visible;
  position: relative;
}

.dooh-feature-search-wrapper .bootstrap-select .dropdown-menu {
  width: 100% !important;
  right: 0 !important;
  left: auto !important;
}

.dooh-feature-search-wrapper .form-group {
  margin-bottom: 0;
}

.dooh-feature-count {
  font-size: var(--font-size-very-small);
  margin: 0 0 6px 0;
}

.dooh-feature-count-ok {
  color: var(--clr_text_secondary);
}

.dooh-feature-count-error {
  color: var(--clr_danger);
}

.dooh-feature-count-hint {
  font-style: italic;
}

.dooh-feature-table-wrapper {
  width: 100%;
}

.dooh-feature-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--clr_bg_tertiary) 60%, transparent);
}

.dooh-feature-row-header {
  font-weight: 400;
  border-bottom: var(--input_border_solid);
  padding-bottom: 4px;
  margin-bottom: 2px;
}

.dooh-feature-row-header .dooh-feature-col-name,
.dooh-feature-row-header .dooh-feature-col-weight {
  font-size: 16px;
  font-weight: 400;
}

.dooh-feature-col-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-small);
}

.dooh-feature-col-weight {
  width: 90px;
  flex-shrink: 0;
}

.dooh-feature-col-weight .form-group {
  margin-bottom: 0;
}

.dooh-feature-col-weight input[type="number"] {
  height: 28px;
  padding: 2px 6px;
  font-size: var(--font-size-very-small);
  text-align: center;
}

.dooh-feature-col-delete {
  width: 24px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

/* DOOH Summary Table (in order confirmation modal) */
.dooh-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-small);
}

.dooh-summary-table th {
  font-weight: 600;
  text-align: left;
  padding: 2px 8px;
  border-bottom: var(--input_border_solid);
}

.dooh-summary-table td {
  padding: 2px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--clr_bg_tertiary) 60%, transparent);
}

/* ########################### */
/* virtualSelectInput (Campaign Manager Email)                               */
/* ########################### */
/* The widget ships its own look (square corners, its own greys), which stood
   out next to every other input in the form. These rules put it on the app's
   input styling: same height, radius, border, focus border, background and
   text colours, and the same "selected item" chip as the selectize inputs. */

.vscomp-wrapper .vscomp-toggle-button {
  /* min-height (not height): with several mails selected the tags wrap onto
     more than one line, and a fixed height clipped the box while the tag
     row itself kept growing, so the tags rendered outside the border. */
  min-height: var(--input_height);
  box-sizing: border-box;
  border: var(--input_border);
  border-radius: 3px;
  background-color: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
  box-shadow: var(--input_shadow);
  padding: 0 var(--small_padding);
}

.vscomp-wrapper.focused .vscomp-toggle-button,
.vscomp-wrapper:focus .vscomp-toggle-button,
.vscomp-wrapper:not(.closed) .vscomp-toggle-button {
  border: var(--input_border_focus);
  box-shadow: none;
}

/* The chips carrying the selected mails — same pill as a selectize item.
   Selector mirrors the library's own `.show-value-as-tags .vscomp-value-tag`
   specificity (its rules are injected via JS, so a plain descendant
   selector can lose the cascade); max-width/ellipsis truncates a long
   mail address instead of stretching the chip past the input. */
.vscomp-wrapper.show-value-as-tags .vscomp-value-tag {
  background-color: var(--clr_bg_secondary);
  color: var(--clr_text_secondary);
  border: none;
  border-radius: 3px;
  padding: 2px 8px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vscomp-wrapper .vscomp-arrow,
.vscomp-wrapper .vscomp-clear-icon {
  color: var(--clr_text_tertiary);
}

/* Dropdown: same surface, border and hover/selected colours as the selectize
   dropdowns, so both kinds of picker behave alike visually. */
.vscomp-dropbox-container .vscomp-dropbox {
  background-color: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
  border: var(--input_border);
  border-radius: 3px;
  box-shadow: var(--input_shadow);
}

.vscomp-dropbox-container .vscomp-option.focused,
.vscomp-dropbox-container .vscomp-option:hover,
.vscomp-dropbox-container .vscomp-option.selected {
  background-color: var(--clr_bg_secondary);
  color: var(--clr_text_secondary);
}

.vscomp-dropbox-container .vscomp-search-input {
  background-color: var(--clr_bg_tertiary) !important;
  color: var(--clr_text_tertiary) !important;
  border: var(--input_border) !important;
  border-radius: 3px !important;
}

/* ########################### */
/* User site — shared card system                                            */
/* ########################### */
/* One card pattern for every list entry in the user part (campaign card,
   segment card, ticket card): a surface (`.tr-card`) holding a horizontal
   row (`.tr-card-row`) of a content column (`.tr-card-main`) and one or more
   action columns (`.tr-card-actions`) of stacked small buttons. The cards
   differ only in what they put inside, so the whole user site reads as the
   same component repeated. Bootstrap's grid is not used here: its float-based
   columns cannot vertically align a content block against an action stack. */

.tr-card {
  background-color: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
  border: var(--input_border);
  border-radius: 3px;
  padding: var(--small_padding);
  margin-bottom: var(--small_padding);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tr-card:last-child {
  margin-bottom: 0;
}

/* Page-level text defaults (`label`, `.hint-text`) name `--clr_text_primary`,
   which is right where they were written: on the page background. Inside a
   card they are wrong by construction — a card is a bg_tertiary surface, so
   its partner is text_tertiary, set once on `.tr-card` above. Re-pointing them
   at the card's own colour here beats patching every page-level rule that can
   land inside a card (Admin Tools' toggle labels and hint lines are one such
   case; in groupm they were white on the near-white card). `!important`
   because `.hint-text` carries one. */
.tr-card label,
.tr-card .hint-text {
  color: inherit !important;
}

/* Cards that lead somewhere (campaign card) lift on hover. */
.tr-card-clickable:hover,
.tr-card-clickable:focus-within {
  border-color: var(--clr_interaction1);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--clr_text_tertiary) 15%, transparent);
}

.tr-card-row {
  display: flex;
  align-items: flex-start;
  gap: var(--small_padding);
  width: 100%;
}

.tr-card-row-center {
  align-items: center;
}

.tr-card-main {
  flex: 1 1 auto;
  min-width: 0;               /* lets long segment names wrap instead of pushing */
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* A column of stacked actions. Fixed width so every card's buttons line up in
   the same place — the user learns one position per action. */
.tr-card-actions {
  flex: 0 0 170px;
  display: flex;
  flex-direction: column;
  gap: var(--small_padding);
}

/* A disabled card button is wrapped in this span to carry a reason tooltip
   (a disabled <button> can't hold its own hover title reliably). The span,
   not the button, is now the flex child of .tr-card-actions, so make it a
   flex box too and let the button stretch to the column width like its
   unwrapped siblings. */
.tr-card-actions .tr-btn-tooltip-wrap {
  display: flex;
}
.tr-card-actions .tr-btn-tooltip-wrap > .tr-btn {
  flex: 1 1 auto;
}

.tr-card-title {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.tr-card-title-row {
  display: flex;
  align-items: center;
  gap: var(--small_padding);
  flex-wrap: wrap;
}

/* The text bits below inherit their colour instead of naming one. Text N
   always sits on Background N, and these classes appear on two different
   surfaces: inside a `.tr-card` (bg_tertiary, so text_tertiary, set once on
   `.tr-card` above) and inside a modal body (bg_primary, so text_primary).
   The old fixed `--clr_text_primary` was therefore invisible on every card
   whose palette pairs differently — in groupm both the card and text_primary
   are #F2F2F2. Inheriting keeps each copy paired with what it sits on. */
.tr-card-meta {
  font-size: var(--font-size-small);
  color: inherit;
  margin: 0;
}

/* The line above the title (creation date) — quietest text on the card. */
.tr-card-meta-top {
  font-size: var(--font-size-very-small);
  color: inherit;
  opacity: 0.7;
  margin: 0;
}

.tr-card-note {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: inherit;
  opacity: 0.8;
}

/* Status of a single entity (segment status): coloured dot + its name. */
.tr-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.tr-status-chip .circle {
  width: 12px;
  height: 12px;
  margin: 0;
  flex: 0 0 12px;
}

/* Segment card: a segment still referenced by an active order but removed
   from CAIT's own `segments` collection — deliberately plain black, not a
   themed status colour, since it flags a data problem rather than a state. */
.segment-missing-icon {
  color: #000;
  font-size: var(--font-size-small);
  cursor: help;
}

/* ########################### */
/* User site — campaign list                                                 */
/* ########################### */

.campaign-card {
  display: flex;
  align-items: center;
  gap: var(--small_padding);
}

.campaign-card-dates {
  flex: 0 0 148px;             /* holds "02.11.2026 - 13.12.2026" on one line */
  font-size: var(--font-size-small);
  color: var(--clr_text_tertiary);
  opacity: 0.8;
  margin: 0;
  white-space: nowrap;
}

/* The whole middle column is the link to the campaign page. Reset the anchor
   look — the card itself is the affordance (hover border), not blue text. */
.campaign-card-link,
.campaign-card-link:hover,
.campaign-card-link:focus {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  color: inherit;              /* the card's text colour, not anchor blue */
  text-decoration: none;
}

.campaign-card-link:hover .campaign-card-name {
  color: var(--clr_interaction1);
}

.campaign-card-name {
  margin: 0;
  font-size: 1em;
  font-weight: 700;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

.campaign-card-segments {
  margin: 2px 0 0;
  font-size: var(--font-size-small);
  color: var(--clr_text_tertiary);
  opacity: 0.75;
  overflow-wrap: anywhere;
  /* A campaign can carry dozens of segments (1CTX: 67) — without a clamp one
     card grows taller than the viewport and buries the rest of the list. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The three status symbols (tickets / time phase / delivery). Fixed cells so
   the icons sit in the same column on every card and on the campaign page. */
.campaign-card-status {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--small_padding);
}

.campaign-card-status-cell {
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Campaigns with open tickets sort first (mod_user_site.R) and get a
   warning-coloured accent so they stand out at a glance in the list. */
.campaign-card-has-tickets {
  border-left: 4px solid var(--clr_warning);
}

/* Icon + label layout; the colour is set by the button rule further down. */
.tr-ticket-indicator {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--font-size-small);
  white-space: nowrap;
}

/* The order-page header badge reads at a glance, so it's a size step up from
   the small card-level indicator. */
.tr-ticket-indicator-header {
  font-size: 1.1em;
  gap: 8px;
}

/* Icon and label share the same size and a 1.0 line-height so their optical
   centres coincide — a larger icon em-box made the text look low. */
.tr-ticket-indicator-header,
.tr-ticket-indicator-header .fa-ticket {
  line-height: 1;
}

.tr-ticket-indicator-header .fa-ticket {
  font-size: 1em;
}

/* Header ticket button: the see-through inline look of the user button, but
   icon + text in the interaction colour so it reads as the one actionable
   thing on the tab bar rather than another tab label.
   NOT a `data-color` — that applies the FILLED .tr-btn treatment and would
   paint the whole button pink. Three classes so this outranks general.css's
   `.tr-btn.tr-btn-inline` colour (that file loads after custom.css) in every
   interaction state. */
.tr-btn.tr-btn-inline.tr-ticket-indicator,
.tr-btn.tr-btn-inline.tr-ticket-indicator:hover,
.tr-btn.tr-btn-inline.tr-ticket-indicator:focus,
.tr-btn.tr-btn-inline.tr-ticket-indicator:active {
  color: var(--clr_interaction2);
  background: none;
  border: none;
  /* Re-pin the indicator's flex centering at button strength: the plain
     .tr-ticket-indicator rule loses the cascade tie to general.css's .tr-btn
     (loaded later), which left the label text sitting below the icon. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tr-btn.tr-btn-inline.tr-ticket-indicator:hover {
  filter: brightness(90%);
}

/* Campaign-list toolbar: search bar + runtime switch + refresh icon */
.campaign-toolbar {
  display: flex;
  align-items: center;
  gap: var(--small_padding);
  padding: var(--small_padding);
  margin-bottom: var(--small_padding);
  background-color: var(--clr_interaction2);
  border-radius: 3px;
}

.campaign-toolbar-search {
  position: relative;
  flex: 1;
  min-width: 0;
}

.campaign-toolbar-search .form-group,
.campaign-toolbar-search .shiny-input-container {
  margin-bottom: 0;
  width: 100%;
}

.campaign-toolbar-search input.form-control {
  padding-left: 32px;
  height: var(--input_height);
}

.campaign-toolbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  /* The magnifier sits INSIDE the search field, a bg_tertiary surface, so it
     takes the field's own text colour. As text_primary it was invisible in
     groupm, where text_primary and the field are both #F2F2F2. */
  color: var(--clr_text_tertiary);
  pointer-events: none;
  z-index: 1;
}

.campaign-toolbar-runtime {
  display: flex;
  align-items: center;
}

.campaign-toolbar-runtime .bootstrap-switch {
  margin: 0;
}

.campaign-toolbar-runtime .form-group,
.campaign-toolbar-runtime .shiny-input-container {
  margin-bottom: 0;
}

.campaign-toolbar-runtime select.form-control {
  height: var(--input_height);
}

.tr-btn.tr-btn-icon {
  width: var(--input_height);
  height: var(--input_height);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--clr_text_primary);
}

/* Visual marker for fields whose current value differs from the baseline
   (campaign data panel). Toggled by mod_user_campaign_page_server. */
.input-wrapper.field-changed {
  border-left: 3px solid var(--clr_interaction1);
  padding-left: var(--small_padding);
}

/* .input-wrapper is a flex ROW, which is right for the one-control-per-wrapper
   case it was built for. The briefing modal's psychography editor holds three
   things that belong under each other (label, the 3x3 matrix, the weight
   slider) — this modifier stacks them instead of lining them up side by side. */
.input-wrapper.input-wrapper-stacked {
  flex-direction: column;
  gap: var(--small_padding);
}

/* Campaign page top bar (above the cards). Uses the generic .tr-bar layout
   for the back-arrow | name | status three-section split; only the
   right-hand stack (created-date over the status icons) needs extra rules. */
.campaign-page-topbar {
  margin-bottom: var(--small_padding);
}

/* The headline is an h3, whose bootstrap default margins (20px top / 10px
   bottom) pushed it below the vertical center the arrow and the status stack
   sit on — the bar's align-items:center can only center the OUTER box. */
.campaign-page-topbar .tr-bar-center h3 {
  margin: 0;
}

/* The centered title must not push the bar apart on long campaign names
   (the reload button lives at the bar's right edge, next to the status
   stack, matching the Management overview's reload placement). */
.campaign-page-topbar .tr-bar-center {
  gap: var(--small_padding);
  flex-wrap: nowrap;
  min-width: 0;
}
.campaign-page-topbar .tr-bar-center .shiny-html-output {
  min-width: 0;
}

.campaign-page-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.campaign-page-created {
  font-size: var(--font-size-small);
  white-space: nowrap;
}

.campaign-page-status-icons {
  display: flex;
  align-items: center;
  gap: var(--small_padding);
}

/* ########################### */
/* User site — campaign page                                                 */
/* ########################### */

/* The page is a stack of panels (Ticket / Campaign Data / Segments). Each
   panel keeps the order UI's heading bar (`.tr-panel-heading-trigger`) so the
   two pages read as one system; only the spacing around them is set here. */
.campaign-page-content .tr-panel {
  padding: 0;
  margin-bottom: calc(var(--small_padding) * 2);
}

.campaign-page-content .tr-panel-heading-trigger {
  border-radius: 3px 3px 0 0;
}

.campaign-page-content .tr-panel-body {
  padding: var(--small_padding) 0 0;
}

/* Panel body with nothing in it yet ("No open tickets…"). */
.tr-panel-body .hint-text {
  margin: 0;
  padding: var(--small_padding) 0;
}

/* What the system found (reason + measured numbers) is one block, set apart
   from the ask above it and the call to action below it. */
.ticket-card-finding {
  margin: var(--small_padding) 0;
}

.ticket-card .tr-card-note {
  margin-top: var(--small_padding);
}

/* A ticket asks a question, so its action column holds a small form (answer
   options + free-text) rather than one or two buttons — it needs more room
   than the segment card's button stack. */
.ticket-card-actions {
  flex: 0 0 320px;
}

/* Metadata-verify's answer is one short sentence and a single button, not a
   multi-field form — let it read as one column instead of a side rail: the
   finding text spans the full card width, with the button underneath it. */
.ticket-card-metadata-verify {
  flex-direction: column;
}

.ticket-card-metadata-verify .ticket-card-actions {
  flex: 1 1 100%;
  width: 100%;
}

.ticket-card-actions .form-group,
.ticket-card-actions .shiny-input-container {
  margin-bottom: var(--small_padding);
  width: 100%;
}

/* The metadata-verify answer is a full sentence ("The campaign data on file is
   correct") — let it wrap instead of overflowing the small button. */
.ticket-card-actions .tr-btn.tr-btn-small {
  height: auto;
  min-height: var(--button_height_small);
  padding: 6px var(--small_padding);
  white-space: normal;
  line-height: 1.25;
}

/* Reset arrow in the Campaign Data heading bar — same size as the toolbar's
   refresh icon so "undo this panel" and "reload that list" look alike. */
.campaign-page-reset.tr-btn.tr-btn-inline {
  width: var(--input_height);
  height: var(--input_height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* Campaign Data form: two columns, and its actions right-aligned under them. */
.campaign-data-form {
  display: flex;
  gap: calc(var(--small_padding) * 3);
  align-items: flex-start;
}

.campaign-data-column {
  flex: 1 1 50%;
  min-width: 0;
}

.campaign-data-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--small_padding);
}

.campaign-data-actions .tr-btn.tr-btn-small {
  width: 164px;                /* same footprint as the default button */
}

@media screen and (max-width: 720px) {
  .campaign-data-form {
    flex-direction: column;
    gap: 0;
  }
  .campaign-data-column {
    flex: 1 1 100%;
    width: 100%;
  }
  .tr-card-row {
    flex-direction: column;
  }
  .tr-card-actions {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* ########################### */
/* User site — boosting scale                                                */
/* ########################### */
/* The boosting slider shows two things at once: the FULL goal scale (a long
   grey track) and the levels the user may currently pick (a shorter pink bar
   drawn on top of it), with the handle starting on the current level. It
   reuses the order UI's slider widget (`slider_psych_context`) and only
   re-colours it inside `.boost-scale`, so the shape stays familiar.
   The pink bar is injected into the ion.rangeSlider container by
   `boost_allowed_range_bar()`, which positions it in % of the track. */

.boost-scale {
  position: relative;
  width: 100%;
  margin-bottom: var(--small_padding);
}

/* Full scale = grey track. Overrides the order UI's pink line (same
   !important, higher specificity). */
.boost-scale .psych-context-slider-wrapper .irs-line,
.boost-scale .psych-context-slider-wrapper .irs-line::before {
  background: var(--clr_track) !important;
  border-color: var(--clr_track) !important;
  opacity: 1 !important;
  box-shadow: none !important;
}

/* The library's own left-fill bar would colour everything up to the handle —
   it says nothing here and is replaced by the allowed-range bar. */
.boost-scale .psych-context-slider-wrapper .irs-bar {
  display: none !important;
}

/* Currently selectable levels. Sits on the grey track with the same translucent
   pink treatment as the order UI's slider bar (opacity + inset shadow), so the
   two read as the same material. Pixel values per explicit request: the bar
   covers the track (track: top 12px, height 22px) with fully rounded ends. */
.boost-scale-range {
  position: absolute;
  top: 12px;
  height: 21px;
  border-radius: 100px;
  background-color: var(--clr_interaction2);
  opacity: 0.5;
  box-shadow: inset 0 0 10px color-mix(in srgb, var(--clr_text_primary) 50%, transparent);
  pointer-events: none;
  z-index: 1;
}

/* The handle keeps the order UI's pink; it only needs to stay above the
   selectable-range bar. */
.boost-scale .psych-context-slider-wrapper .irs--shiny .irs-handle {
  z-index: 3;
}

.boost-legend {
  display: flex;
  align-items: center;
  gap: var(--small_padding);
  flex-wrap: wrap;
  font-size: var(--font-size-very-small);
  color: var(--clr_text_primary);
  margin-bottom: var(--small_padding);
}

.boost-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.boost-legend-swatch {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-radius: 4px;
}

.boost-legend-swatch-scale  { background-color: var(--clr_track); }
.boost-legend-swatch-range  {
  background-color: var(--clr_interaction2);
  opacity: 0.5;
}

/* ########################### */
/* User site — modals                                                        */
/* ########################### */
/* Every user-site modal (URL sample, boost, briefing input, confirm) is built
   from the same three pieces: `.section-heading-lined` section titles, a
   `.modal-section` block per area, and small buttons for in-body actions. */

.modal-section {
  margin-bottom: calc(var(--small_padding) * 1.5);
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-action {
  margin-top: var(--small_padding);
}

/* A single small value (e.g. the URL sample size) should not run the width of
   the modal — text inputs and matrices still do. */
.modal-input-narrow {
  max-width: 164px;
}

.modal-input-narrow .form-group {
  margin-bottom: 0;
}

/* Scrollable result list (URL sample, briefing text, boosting history). */
.modal-scroll-list {
  max-height: 260px;
  overflow-y: auto;
  margin: 0;
  padding-left: 20px;
}

.modal-scroll-list li {
  font-size: var(--font-size-small);
  overflow-wrap: anywhere;
}

/* Enumerations use a dash instead of the round bullet dot (per feedback);
   covers every user-site list (modal lists + admin reactivation results). */
.modal-scroll-list li::marker,
.admin-reactivate-campaigns li::marker {
  content: "-  ";
}

/* Admin Tools: each task/use-case sits on its own .tr-card surface. The
   shared .tr-card-title has margin 0 (cards manage their own gaps), so give
   the title air before the task's hint text. */
.admin-tools-section .tr-card-title {
  margin-bottom: 6px;
}

/* Inside a card the button group's 70px "space to the footer" margin is just
   dead space at the card's bottom edge. */
.admin-tools-section .user-button-group {
  margin-bottom: 0;
}

/* Group a label ("Text:", "Url:") with the list/text directly below it:
   pull the label onto its content and push it away from the previous block. */
.modal-info-text-small:has(+ .modal-scroll-list),
.modal-info-text-small:has(+ .modal-scroll-text) {
  margin-bottom: 2px;
}

.modal-scroll-list + .modal-info-text-small,
.modal-scroll-text + .modal-info-text-small {
  margin-top: 14px;
}

/* Scrollable free text (the Product-AI text of an older segment). */
.modal-scroll-text {
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: var(--font-size-small);
  padding: var(--small_padding);
  background-color: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
  border: var(--input_border);
  border-radius: 3px;
}

/* Full-width notice inside a modal (e.g. "this campaign is just starting").
   A modifier class carries the colour, not `data-color`: that attribute is
   reserved for text colour on non-buttons (general.css forces a transparent
   background on it), which would cancel the banner's fill. */
.modal-banner {
  display: flex;
  align-items: center;
  gap: var(--small_padding);
  padding: var(--small_padding) calc(var(--small_padding) * 1.5);
  border-radius: 3px;
  margin-bottom: calc(var(--small_padding) * 1.5);
  font-size: var(--font-size-small);
  font-weight: 700;
  color: var(--clr_text_secondary);
}

.modal-banner-warning { background-color: var(--clr_warning); }
.modal-banner-danger  { background-color: var(--clr_danger); }

/* ion.rangeSlider keeps its bound input in the DOM, sized to 0x0. The app's
   global `input[type=…]` rules give it a 1px border anyway, which renders as a
   small grey dot next to every slider. Needs the `input` type in the selector
   to outweigh those rules. */
input.irs-hidden-input {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Inline hint under an action (why a button is disabled, why a value snapped
   back). Coloured via data-color like every other non-button element. */
.tr-inline-hint {
  font-size: var(--font-size-small);
  margin: 6px 0 0;
  line-height: 1.3;
}