/* 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;
  }


/* Style the header container */
.header-container {
  background-color: none;
  position: relative;
  display: flex;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  align-items: center;
  justify-content: center;
}

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

.header-left, .header-right {
  flex: 1;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  gap: 10px;
}

.header-left {
  justify-content: flex-start;
}

.header-right {
  justify-content: flex-end;
}

.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}


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



  /* 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-orders {
  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%;
}

.user-extra-information {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  justify-content: center;
  font-size: var(--font-size-small);
}

.user-extra-information p {
  margin: 0;
  padding: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.header-left .user-extra-information {
  display: none;
}

@media (min-width: 600px) {
  .header-left .user-extra-information {
    display: flex;
  }
}



/* 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;
}

/* 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 */
.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_secondary) !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;
 
}


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

.order-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 field which is shown in the datepicker */
.datepicker {
  z-index: 9999 !important;  /* Higher than navbar */
  border-radius: 10px !important; /* Add rounded corners */
  box-shadow: none !important; /* Remove shadow */

}

/* 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_primary);
}


/* Ensure only the hovered month is affected */
/* 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_primary);
}


/* 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 */
}

.datepicker {
  background-color: var(--clr_bg_tertiary) !important;
}
/* 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;
}



.datepicker {
  background-color: var(--clr_bg_tertiary) !important;
}
/* 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%;
}

/* 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);
  }

  .header-content-wrapper {
    flex-wrap: nowrap;
  }

  .header-left, .header-right {
    flex: 0 0 auto;
    min-width: 40px;
  }

  .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-orders {
    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 */
  .user-profile-new {
    padding: 10px;
  }

  .user-profile-new .nav-tabs > li > a {
    padding: 12px 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 Tabs */
.user-profile-new {
  max-width: 708px;
  margin: 0 auto;
  padding: 0;
}

.user-profile-new .nav-tabs {
  border: none !important;
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  width: 100%;
}

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

.user-profile-new .nav-tabs > li > a {
  background: var(--clr_bg_tertiary);
  color: var(--clr_text_primary);
  border: none !important;
  border-radius: 0;
  padding: 15px 20px;
  margin: 0;
  text-align: center;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.user-profile-new .nav-tabs > li:not(.active) > a {
  background: var(--clr_bg_tertiary);
  color: var(--clr_text_tertiary);
}

.user-profile-new .nav-tabs > li:not(.active) > a:hover {
  background: color-mix(in srgb, var(--clr_interaction1) 20%, var(--clr_bg_tertiary));
  color: var(--clr_text_tertiary);
}

.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: var(--clr_interaction1);
  color: var(--clr_text_secondary);
  border: none !important;
}

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

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

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

.order-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;
  gap: 15px;
}

/* 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);
}

.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;
}

/* 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 */
.order-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 */
}

.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_secondary) !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_secondary) !important;
}

/* 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);
}