@charset "UTF-8";
/**
* Description: Overrides until better permanent solutions are implemented
* Author: Luka Ivas
* Last update: Wed, December 3 2025
* Version: 25.11
*/

/* TODO: Clean up HTML and CSS so Bootstrap.min.css and bootstrap icons can be removed */
button,
.button {
  outline: none !important;
} /* TODO: do with borders in styles.css */

/*Related to Dx-drop-down-button color and font size*/
.dx-button-mode-text .dx-icon {
  color: inherit; /* white/* !important messed up modal X button - L. */
  font-size: var(--text-M);
}

/* BUG 5084: temporary fix, remove after Step 3 & 4 are aligned */
/* #7143 adjusting padding of filter box to improve usability on lower resolutions */
/* TODO: verify if it holds up in all cases, then move to styles.css */

.kpi_filter .filter_box {
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

	.kpi_filter .grid_column:has(.filter_box):first-child {
		padding-left: var(--gap-ML);
	}

	.kpi_filter .grid_column:has(.filter_box):last-child {
		padding-right: var(--gap-ML);
	}

.filter_box {
  row-gap: var(--gap-M);
}

	.filter_box .dx-texteditor-input {
		font-size: var(--text-XS);
		line-height: var(--line-height-XS);
	}

	.filter_box .dx-lookup {
		margin: 0 !important;
	}

/* Removing container for bugged fixed position in S&OP modals */
.remove-container {
  container: none !important; /* Nani? :) */
}

/* TODO: Remove when permanent fix is implemented in Step 4 */
.dx-header-row,
.dx-datagrid-headers .dx-row {
  background-color: var(--table_head-background) !important;
} /* [FIXED] #5676 - Roxtec Demand review table > Header > second row getting colored from .dx-row */

.dx-header-row > td {
  border-bottom: 1px solid var(--stroke-1);
}
/* TODO: figure out limitation for generic-universal table cell max-width, either CSS or config */

.dx-row {
  background-color: var(--table_cell-background-1);
}

.dx-row > td {
  border-right: 1px solid grey;
  font-size: var(--text-S);
  line-height: var(--line-height-S);
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
  white-space: normal;
} /* [FIXED] tripple grid height in S&OP #5469 - override in SolveGaps.css */

.dx-row > td.remove-border-left {
  border-left: none;
}
.dx-row > td.remove-border-right {
  border-right: none;
}

/* #6108 */
#genSetGrid .dx-row > td {
  white-space: nowrap;
}
/* TODO: Replace admin tables with basic table, then remove */

/* QUICKFIX for editable columns in basic_table and pivot_grid when text in column wraps */
.dx-row > td:has(.dx-texteditor) {
  padding-bottom: 0;
  padding-top: 0;
  vertical-align: top !important;
}

/* Adjusted for #7021 */
.table_pivot .dx-row > td:has(.dx-texteditor) {
  vertical-align: middle !important;
}

.dx-datagrid-rowsview .dx-texteditor-input {
  min-height: 40px;
}

.is-editable {
  transition: background-color var(--animation-300);
}

.is-editable:has(input) {
  background-color: var(--neutral-100) !important;
}

/* TODO: clean up */

.dx-row > td:first-of-type,
.table_pivot .dx-row > td:nth-of-type(2) {
  padding-left: var(--gap-M);
  /* background-color: red !important; */
}

.dx-row > td:last-of-type {
  padding-right: var(--gap-M);
  vertical-align: middle;
  white-space: nowrap;
  /* background-color: red !important; */
}

.dx-row > td:last-of-type .table-data-control {
  justify-content: flex-end;
}

.dx-master-detail-row .table-control,
.dx-master-detail-row .table-control button,
.dx-master-detail-row .dx-row > td {
  font-size: var(--text-S);
}

.dx-master-detail-row .dx-row > td:last-of-type {
  /* background-color: yellow !important; */
  text-align: left;
  white-space: normal;
}

.audit-grid .dx-row > td:last-of-type {
  /* background-color: green !important; */
  padding-right: var(--gap-M);
  white-space: normal;
}

.is-code[role="gridcell"] {
  font-family: var(--font-family-code);
  font-size: var(--text-S);
} /* TODO: make it a wrapper around the code, remove role, move to helpers */

.dx-row > td:last-of-type .table-control {
  justify-content: flex-end;
}

.dx-master-detail-row .dx-row > td:last-of-type .table-control {
  justify-content: flex-start;
}

.dx-header-row:has(.table-control) .dx-column-indicators {
  display: none;
} /* Can be fixed better by adding .is-hidden to .dx-column-indicators */

.dx-row-alt {
  background-color: var(--table_cell-background-2);
}

.dx-master-detail-cell .dx-gridbase-container {
  background-color: #f8f8f8;
}

.dx-master-detail-cell .dx-gridbase-container .dx-row {
  background-color: var(--table_head-background);
} /* table in an expandable table row*/

/* From audit.css */
.dx-datagrid-rowsview .dx-row > .dx-master-detail-cell {
  padding: 0;
}

.dx-master-detail-row .dx-datagrid tr:not(.dx-row-alt) > td,
.dx-datagrid tr:not(.dx-row-alt) > tr > td {
  background-color: var(--table_background-head);
}

.dx-master-detail-row .dx-datagrid tr.dx-header-row > td,
.dx-master-detail-row .dx-datagrid tr.dx-header-row > tr > td,
.dx-master-detail-row tr.dx-row.dx-column-lines.dx-header-row {
  background-color: #f2f2f2;
}
.dx-master-detail-row .dx-datagrid .dx-header-row > td {
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.5) inset;
  -moz-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.5) inset;
}
.dx-master-detail-row .dx-datagrid .dx-data-row:nth-last-child(2) > td {
  box-shadow: 0px -6px 10px -10px rgba(0, 0, 0, 0.25) inset;
  -webkit-box-shadow: 0px -6px 10px -10px rgba(0, 0, 0, 0.25) inset;
  -moz-box-shadow: 0px -6px 10px -10px rgba(0, 0, 0, 0.25) inset;
}
/* TODO: revise */
/* end of audit.css */

.dx-overlay-shader .dx-popup-content {
  box-sizing: border-box;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
} /*TODO: add class .modal_block to overcome styling issues */

.total-column-header {
  background-color: var(--table_total-background-1);
}

.table_pivot .dx-datagrid-headers .dx-row {
  border-bottom: 1px solid var(--stroke-2);
}

/* .table_pivot .dx-datagrid-headers .dx-datagrid-content, */
.dx-datagrid-headers .dx-datagrid-content {
  border-bottom: 1px solid var(--stroke-2);
}

.table_pivot:not(.dx-total-grid) .dx-row {
  background-color: var(--table_cell-background-2);
}

.table_pivot:not(.dx-total-grid) td.total-column {
  background-color: var(--table_total-background-1);
}

.table_pivot .dx-row > td:first-of-type {
  padding-left: var(--gap-M); /* doesn't work */
}

.table_pivot .dx-row > td:last-of-type {
  padding-right: var(--gap-M);
}

.dx-cell-modified {
  font-weight: bold;
}

.table_pivot.dx-total-grid .dx-row {
  background-color: var(--table_total-background-1);
}

.table_pivot.dx-total-grid td.total-column {
  background-color: var(--table_total-background-2);
}

.dx-popup-wrapper > .dx-overlay-content {
}

.dx-overlay-shader > .dx-overlay-content {
  border-radius: 4px;
}

.dx-popup-title {
  background-color: var(--surface-4);
  border-bottom: 0 none;
}

.dx-popup-title.dx-toolbar .dx-toolbar-label {
  font-size: var(--text-M);
  font-weight: bold;
  line-height: var(--line-height-M);
}

.dx-popup-title .dx-icon {
  color: var(--body-text-color);
}

/*End OWPFIlterModal.js*/
.dx-popup-title .dx-icon {
  color: var(--body-text-color);
}

/* TODO: Calendar overlay - to unify styling for component: 
- either .calendar_popup has to be default wrapper everywhere (rename to .popup_container)
- OR .calendar_toolbar has to be rendered in .dx-calendar, thus removing the need for .calendar_popup wrapper 
*/
.calendar_popup {
  background-color: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 2px;
  box-shadow: var(--shadow-1);
  padding-top: var(--gap-S);
  position: absolute;
  z-index: 1050; /* TODO: when commenting out z-index popup hides under the table result, investigate and tweak z-index to lower value */
}

.calendar_popup:has(.popup_toolbar) {
  padding-top: 0;
}

.calendar_popup > .dx-calendar {
  background-color: transparent;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0;
}

.calendar_popup .dx-list-search {
  margin-left: var(--gap-S);
  margin-right: var(--gap-S);
} /* TODO: change parent class to dropdown generic in all instances */

/* From DFIStyle.css */
.dx-datebox-calendar .dx-dropdowneditor-icon::before {
  content: "\f108" !important;
  font-family: "Opticons" !important;
} /*TODO: remove when custom dropdown is implemented */

/* For WebKit based browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  padding-left: 4px;
}
::-webkit-scrollbar-thumb {
  background: #000;
}
::-webkit-scrollbar-thumb:hover {
  background: #2d2d2d;
}
::-webkit-scrollbar-track {
  background: var(--legacy-beige);
}
/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #000 var(--legacy-beige);
}
*::-moz-scrollbar-thumb {
  background: #000;
}
*::-moz-scrollbar-thumb:hover {
  background: #2d2d2d;
}
*::-moz-scrollbar-track {
  background: var(--legacy-beige);
}

#auditInput {
  min-width: 284px;
}

/* Super hacky way to adjust spacing / hide external logic toolbar */
.container_block:has(.toolbar) {
  margin-top: var(--gap-ML);
}

.container_block:has(.external-logic_container) .toolbar {
  margin-bottom: 0;
}

.container_block:has(.toolbar-element:empty):has(.external-logic_container) {
  display: none;
} /* TODO: 
    1. Place <div class="toolbar">...</div> outside of <section class="container_block">...</section> and delete <section> 
    2. Place modal box template near the end of </body> tag, inject content (title, modal window body) to the modal box
    3. Clean up HTML and CSS
  */

/* OLD stylesheets DFIStyles.css causing tooltip to be above .popup_container */
.dxc-tooltip {
  z-index: 4 !important;
} /* Revisit when DFI styles is removed */ 

/* #7127 - tooltip now showing in graph modals */
.modal_container:has(dialog[open]) ~ .dxc-tooltip {
  z-index: 8 !important;
} /*TODO: when dxselect boxes are replaced with dropdown.js: 1) Change showModal() for dialog | 2) Remove z-index: 8 from dialog | 3) Remove this


/* Bad way to fix it, but it works for now */
.dxc-tooltip * {
  font-family: var(--font-family-default);
} /* TODO: Find where is Segoe UI font set (possibly inline in vue bundle), and remove it */

.popup_container .form_item_label {
  width: auto;
} /* TODO: delete once filter_box is sorted, remove width: 100% in styles.css */

.dx-dropdowneditor-input-wrapper {
  flex: 1 1 auto;
} /*TODO: aligns the dx-select to stretch full width of container, TEST */

/*
#5391 - modal height is hardcoded, but inner elements aren't responsive properly. 
#5466 - Modal and Popup using same classes
#5473 - Table filter Popup
 TODO: 
  1. Align all modals, create a unified HTML structure without DevExtreme in GlobalModal.js, delete below. 
  2. Separate HTML structure and CSS classes for Modal and Popup */
.dx-overlay-shader:not(#massCreationPopupId):not(#chartComponentPopupId):has(.dx-overlay-content) .dx-overlay-content,
.dx-overlay-shader:not(#massCreationPopupId):not(#chartComponentPopupId):has(.dx-overlay-content)
  .dx-overlay-content
  .dx-popup-content {
  height: auto !important;
}

/* TODO: Clean up AddMultiRows.js, align all to top, delete below */

.mass-progress-bar + section {
  height: 440px;
  margin-bottom: auto !important;
  overflow-y: auto !important;
}
.popup-body {
  min-height: 100px;
}
/* TODO: remove after modals alignment */

/* #5266 - link color inherited from bootstrap.css in other apps */
.navigation-item_block,
.navigation-item_block:hover {
  text-decoration: none;
  color: var(--body-text-color);
}
/*TODO: remove color and underline from anchor tag, or remove bootstrap, then delete above */

/* Notification center top navbar added margin from Bootstrap */
.top_navbar ol:not(.form_message) {
  margin-bottom: 0;
}
/* TODO: remove when bootstrap.css and _reboot.css is removed */

/* From NotificationsCentre.css */

#notificationCentreApp h6 {
  margin-bottom: 25px;
}

.legacy-notif-none {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
}

.legacy-notif-none-icon-big {
  height: 190px;
  width: 190px;
}

#notificationCentreApp .legacy-notif-sidebar {
  background: white;
  min-height: calc(100vh - 390px);
}

.legacy-notif-list {
  overflow-y: auto;
  position: relative;
  height: 100%;
  margin-top: var(--gap-S);
  display: flex;
  flex-direction: column;
  gap: var(--gap-XS);
}

#notificationCentreApp .legacy-btn-filter {
  display: flex;
  /*margin-bottom: 20px; */
}

#notificationCentreApp .legacy-notif-icon {
  height: 50px;
  width: 50px;
}

#notificationCentreApp .legacy-notif-icon-big {
  height: 90px;
  width: 90px;
}

#notificationCentreApp .legacy-notif-title {
  font-size: 16px;
  margin-left: 0;
}

#notificationCentreApp .legacy-notif-body {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 5px;
}

#notificationCentreApp .legacy-notif-filter-btn {
  text-align: center;
}

#notificationCentreApp .legacy-notif-filter-btn:not(:last-child) {
  margin-right: 10px;
}

#notificationCentreApp .legacy-notif-col {
  padding-left: 0;
}

#notificationCentreApp .legacy-notif-new-hidden {
  visibility: hidden;
}

#notificationCentreApp .col-1 {
  padding-left: 0;
}

#notificationCentreApp .col {
  padding-left: 50px;
  width: min-content;
  height: calc(100vh - 560px);
  overflow: auto;
}

#notificationCentreApp .legacy-notif-active {
  background-color: var(--common_background--active);
}
/* TODO: Cleanup  and remove */

/* Tomas' styles for split_button */
.split-action_button .dx-button-mode-text .dx-button-content .dx-icon {
  font-size: 0.5rem;
}
.split-action_button.dx-dropdownbutton:not(.dx-dropdownbutton-has-arrow)
  .dx-button-has-icon:not(.dx-button-has-text)
  .dx-button-content {
  padding-left: 0px;
  padding-right: 0px;
}
.split-action_button .dx-button-has-icon .dx-icon {
  width: auto;
}
/* TODO: replace with .split_button HTML and CSS once we're aligned with that element */

/* BUG 5777 hit area fix */
.split-action_button.dx-dropdownbutton {
  padding-left: 0;
  padding-right: 0;
  width: 27px;
}

.split-action_button .dx-buttongroup {
  width: 100%;
}

/* TODO: remove once DX button is replaced with custom HTML */

/* BAT_NEXT title above the table */
.grid-title {
  font-size: var(--text-size-450);
  margin-bottom: var(--gap-M);
  font-weight: bold;
} /* TODO: Redo with H3 element and generic class within Toolbar component */

.form_bottom_margin {
  margin-bottom: var(--gap-S);
}

/*TODO: clean up Notifications center from these classes */

/* BUG 5928 background from useragent fix */
.action_button-alternative {
  background-color: transparent;
  line-height: 1rem;
  transition: color var(--animation-300);
}

.action_button-alternative[data-action="delete"]:focus,
.action_button-alternative[data-action="delete"]:hover {
  color: var(--error);
}

/* TODO: change classname, define bg color */

.dx-datagrid-pager {
  column-gap: var(--gap-M);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: var(--gap-XS);
  margin-top: var(--gap-S);
  row-gap: var(--gap-S);
  user-select: none;
  -webkit-touch-callout: none;
}

.dx-page-sizes {
  margin-right: auto;
}

.dx-page-sizes,
.dx-page-indexes {
  display: inline-flex;
  gap: var(--gap-XS);
}

.dx-pages {
  align-items: center;
  column-gap: var(--gap-M);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--gap-S);
}

.dx-pages .dx-info {
  color: var(--neutral-500);
  font-size: var(--text-S);
}

.dx-page,
.dx-page-size {
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--stroke-2);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-S);
  height: var(--gap-L);
  justify-content: center;
  min-width: var(--gap-L);
  padding-bottom: 0;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: 0;
  transition: background-color var(--animation-300);
}

.dx-page:hover,
.dx-page-size:hover {
  background-color: var(--common_background--hover);
}

.dx-page:active,
.dx-page:focus,
.dx-page-size:active,
.dx-page-size:focus {
  background-color: var(--common_background--active);
}

.dx-pager .dx-selection {
  background-color: var(--action_button-background--active);
  border: 1px solid var(--action_button-border--active);
  color: var(--action_button-color--active);
}

/* BUG 6006 */
textarea {
  resize: none;
} /* TODO: remove once all textareas have same html structure: .form_field > textarea  */

/*For general settings grid, need to visualise for application consultants that rows are set to be deleted in batch editing mode US #5771 */
#genSetGrid .dx-datagrid-rowsview .dx-row-removed {
  text-decoration: line-through;
}
/*TODO: replace admin tables with basic_table, make this rule generic

/* AddMultipleRows.js styles */
#massCreationPopupId .mass-input-wrapper {
  position: relative;
  padding-bottom: 1.3rem;
}
#massCreationPopupId .mass-validation-block {
  margin: 0;
  position: absolute;
  bottom: 0;
}
/* TODO: align modal structure, make modal containers generic then remove above */

.mass-section {
  overflow-y: hidden !important;
}

.toolbar_helper_text {
  align-items: center;
  display: flex;
  font-size: var(--text-S);
  gap: var(--gap-S);
  margin-bottom: var(--gap-S);
}

.toolbar_helper_text i {
  font-size: var(--text-M);
}
/* TODO: rewise error flow for basic table, then remove this */

/* From BAT_NEXT */

.grid-data-negative {
  background-color: var(--red-200);
}

.grid-data-neutral {
  background-color: var(--table_cell-background-2);
}

.grid-data-positive {
  background-color: var(--green-200);
}

.grid-summary-negative {
  background-color: var(--red-400) !important;
}

.grid-summary-neutral {
  background-color: var(--table_cell-background-2) !important;
}

.grid-summary-positive {
  background-color: var(--green-400) !important;
}

.grid-totalcol-negative {
  background-color: var(--red-300) !important;
}

.grid-totalcol-neutral {
  background-color: var(--table_cell-background-2);
}

.grid-totalcol-positive {
  background-color: var(--green-300) !important;
}

.total-grid-scroll-spacer {
  background: var(--table_total-background-1);
  z-index: 1;
}
/* TODO: revise the class naming and move back under helpers in styles.css once done */

/* WORKSHOP MODAL */
:root {
  --modal_backdrop: rgba(255, 255, 255, 0.8);
  --modal_background: var(--surface-1);
  --modal_border: var(--stroke-1);
  --modal_border-radius: calc(var(--gap-XS) / 2);
  --modal_width-minimum: 300px;
  --modal_height-minimum: 300px;
  --modal_height-maximum: 76vh;
  --modal_width-default: 450px;
  --modal_width-S: 300px;
  --modal_width-L: 600px;
  --modal_width-XL: 1000px;
  --modal_width-fullscreen: 100%;
}

.modal_container {
  align-items: center;
  background-color: transparent;
  display: none;
  flex: 1 1 auto;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition-property: opacity background-color display overlay;
  transition-duration: 0.3s;
  transition-behavior: allow-discrete;
  width: 100%;
}

.modal_container:has(dialog[open]) {
  background-color: var(--modal_backdrop);
  display: flex;
  opacity: 1;
  pointer-events: auto;
  z-index: 8; /* testing, fixes the app_card settings overlay going over modals. Old value 9 */

  @starting-style {
    background-color: transparent;
  }
}

.modal_window {
  background-color: var(--modal_background);
  border: 1px solid var(--modal_border);
  border-radius: var(--modal_border-radius);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  height: fit-content;
  min-height: var(--modal_height-minimum);
  min-width: var(--modal_width-minimum);
  position: relative;
  width: var(--modal_width-default);
  translate: 0 var(--gap-M);
}

.modal_window[open] {
  display: flex;
  opacity: 1;
  pointer-events: auto;
  transition-property: opacity, translate, display;
  transition-duration: 0.3s;
  transition-behavior: allow-discrete;
  transition-delay: 0.3s;
  translate: 0 0;

  @starting-style {
    opacity: 0;
    translate: 0 var(--gap-M);
  }
}

.size-S {
  width: var(--modal_width-S);
}

.size-L {
  width: var(--modal_width-L);
}

.size-XL {
  width: var(--modal_width-XL);
}

.size-fullscreen {
  margin-left: var(--gap-M);
  margin-right: var(--gap-M);
  width: var(--modal_width-fullscreen);
}

.modal_window.is-warning {
  border: 1px solid var(--warning);
}

.modal_window.is-warning .modal_header {
  background-color: var(--warning);
}

.modal_window.is-error {
  border-color: var(--error);
}

.modal_window.is-error .modal_header {
  background-color: var(--error);
}

.modal_window.is-error .modal_title {
  color: var(--neutral-100);
}
/* Hacky, make it prettier */
.modal_window.is-error .modal_header .action_button {
  color: var(--neutral-100);
}

.modal_window.is-success {
  border-color: var(--success);
}

.modal_window.is-success .modal_header {
  background-color: var(--success);
}

.modal_window.is-information {
  border-color: var(--information);
}

.modal_window.is-information .modal_header {
  background-color: var(--information);
}

.modal_window.is-resizable {
  resize: both;
}

.modal_header {
  align-items: center;
  background-color: var(--modal_title-background);
  border: 0 none;
  display: flex;
  flex: 0 0 auto;
  height: var(--gap-XL);
  justify-content: flex-start;
  padding-bottom: 0;
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: 0;
}

.modal_header .modal_title {
  align-items: center;
  color: var(--modal_title-color);
  display: -webkit-box;
  flex: 1 1 auto;
  font-size: var(--text-M);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  /* overrides for styles.css TODO: Clean up */
  background-color: transparent;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}

.modal_content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-M);
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
  -webkit-user-drag: none;

  /* Experimental */
  max-height: var(--modal_height-maximum);
  overflow-y: auto;
  position: relative;
}

  .modal_content_fixed-height {
    display: flex;
    flex-direction: column;
    gap: var(--gap-M);
  } /* Inside wrapper of .modal_content - makes modals responsive on low res screens */


/* Overrides to test and clean up */

.modal_content:not(:has(.toolbar)) .form_item_group {
  align-items: flex-start;
}

.modal_content:not(:has(.toolbar)) .form_control {
  flex: 1 1 auto;
}

	/* Override for above - i.e.: Workflow Configure steps modal has extra vertical spacing */
	/* TODO: R&D better solution, then remove .step-grow from templates and test */
	.stop-grow {
		flex-grow: 0 !important;
	}

.modal_content .form_item_group:has(:not(.form_control) + button) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}
/*TODO: test on other cases that have .form_group */

.modal_content .form_item_group > .form_control:has(label) + button {
  margin-top: 21px; /* TODO: hacky, test and rework */
}

.modal_content .form_field {
  position: relative;
}

.modal_content .form_field input {
  width: 100%;
}

/* #7170: fix for toolbar form group in the modal */
.modal_content .toolbar .form_item_group {
  display: flex !important;
}

/* end of Overrides to test and clean up */

.modal_footer {
  margin-top: auto;
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-S);
}

/* moved to styles.css, below for reference *
.filter_selection {
  min-height: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

/* #6355 #6548 */

.destructive_button:disabled {
  color: white !important;
  opacity: 0.5;
}

/* TODO: merge into styles.css */

/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: var(--gap-M);
  padding-top: var(--gap-M);
  width: 80%;
}

.step {
  display: flex;
  align-items: center;
  font-size: var(--text-S);
}
.step:not(:last-child) {
  flex-grow: 1;
}

.step:not(:last-child)::after {
  content: "";
  height: 2px;
  flex: 1;
  background: var(--neutral-390);
  margin: 0 10px;
}

.step_icon {
  aspect-ratio: 1 / 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  /* background: lightgray; */
  border: 1px solid var(--neutral-390);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
}

.step_icon-checked {
  font-size: 8px;
}

/* TODO: Cleanup. Let's try not to c/p styles, we only need overriding props :) */
/* Limiting to .stepper to ensure no conflicts with radio buttons */

.stepper input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--brand-900); /* Default border color */
  border-radius: 50%;
  position: relative;
}

.stepper input[type="radio"]:checked {
  border-color: var(--brand-900); /* Border color when checked */
}

.stepper input[type="radio"]:checked::before {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: var(--brand-900); /* Inner circle color when checked */
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.step.is-completed .step_icon {
  background: #9bcabb;
}
.step span {
  margin-left: 5px;
}

/* NEW LAYOUT FOR APP CARDS */

:root {
  --app_card-column-width: 350px;
}

/* Main container for App cards */
.grid_container_new {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* width: 100%; breaks layout */
}

/* wrapper -> the flex item */
.grid_column_new {
  display: contents;
  flex: 0 1 auto; /* allow shrink when needed */
  min-width: var(--app_card-column-width); /* minimum card width */
  /* box-sizing: border-box; applied through * rule in styles.css */
}

/* the card itself (content-driven but not overflowing) */
.app_card_new {
  display: inline-block; /* shrink-to-fit */
  min-height: 260px; /* makes it pretty */
  width: max-content; /* size to content width */
  max-width: 100%; /* never overflow the flex item / container */
  min-width: var(--app_card-column-width);
  box-sizing: border-box;
  height: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-1);
  box-shadow: var(--shadow-3);
  color: var(--neutral-900);
  height: 100%;
  transition: all 0.2s ease-in-out;
}

	.app_card_new:has(.app_card-heading) {
		width: var(--app_card-column-width);
	}

.app_card_new .visually-hidden_toggle:checked ~ .app_card-header .show-more_toggle i {
  transform: rotate(0);
}

.app_card_new::after {
  opacity: 1;
}

.app_card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* if card has an inner scrollable area (prevents card from forcing height) */
/* .app_card-body, */
.scroll-vertical {
  flex: 1 1 auto;
  min-height: 0; /* flex children that should be scrollable */
  overflow: auto; /* scroll instead of grow */
}

/* Wrapper inside the app card content*/
.group_container {
  column-gap: var(--gap-M);
  display: inline-flex;
  flex: 1 1 auto; /* stretches to full height of parent */
  flex-direction: row;
}

.group_column {
  display: flex;
  flex-direction: column;
  min-width: var(--app-card_column-width);
  row-gap: calc(var(--gap-XS) / 4);
  width: fit-content;
}

.group_column-title {
  /* (optional) make header same row height as steps */
  padding: 0;
  font-size: var(--text-S);
  height: 2rem; /* matches .workflow_step height */
  display: flex;
  align-items: center;
  font-weight: bold;
}

/* If a group has no .workflow_step, reserve one step row of space below it * Showing (.app-preview-heading) .app_card-heading instead *
.workflow_group-container:not(:has(.workflow_step))::after {
  content: "";
  display: block;
  height: 2rem; /* same as .workflow_step height */
/* margin-bottom: 0.1rem; /* same as step’s bottom margin for alignment *
} */

.workflow_item {
  align-items: center;
  column-gap: var(--gap-S);
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  height: 2rem;
  justify-content: space-between;
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
}

.workflow_title {
  display: block;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

/* extra div that's not needed
.workflow_step-progress-container {
  align-items: center;
  display: flex;
  gap: var(--gap-S);
}
*/

.workflow_progress {
  border: 1px solid transparent;
  cursor: pointer;
  font-size: var(--text-XS);
  font-weight: bold;
  padding: calc(var(--gap-XS) / 2) var(--gap-XS);
  transition: border-color var(--animation-300);
}

.workflow_progress:hover {
  border-color: var(--body-text-color);
}

.workflow_icon {
  font-size: var(--text-M);
}

.is-inactive {
  background-color: var(--neutral-200); /* To be Revised? */
  font-size: var(--text-XS);
}

.is-current {
  background-color: var(--accent-2); /* To be Revised? */
  color: var(--neutral-100);
  font-size: var(--text-S);
}

.is-current .workflow_progress:hover {
  border-color: var(--neutral-100);
}

.is-inactive .workflow_icon {
  color: var(--neutral-500);
}

/* Temporary solution to hide the grid under a popup component */
.dx-datagrid.dx-gridbase-container {
  z-index: 0;
}

/* #6568 task hiding validation message from toolbar input */ /* Hide the clear action button inside v-input */
.hide-validation-feedback .form_message,
.hide-validation-feedback .form_field button {
  display: none;
}
/* TODO: add condition to input.js to not display message, adjust form message in toolbar */

/* #6609 - KPI boxes conditional size value */
:root {
  --conditional-text-size-1: var(--text-size-900);
  --conditional-text-size-2: var(--text-size-800);
  --conditional-text-size-3: var(--text-size-700);
}

.kpi_value {
  line-height: normal;
  word-wrap: break-word;
}

.conditional-text-size-1 {
  font-size: var(--conditional-text-size-1);
}

.conditional-text-size-2 {
  font-size: var(--conditional-text-size-2);
}

.conditional-text-size-3 {
  font-size: var(--conditional-text-size-3);
}

/* #7040 KPI box sizing adjustment in other containers */
.grid_column .grid_column .kpi_value.conditional-text-size-1,
.grid_column .grid_column .kpi_value.conditional-text-size-2 {
  font-size: calc(var(--conditional-text-size-2) / 1.33);
}

.grid_column .grid_column .kpi_value.conditional-text-size-3 {
  font-size: calc(var(--conditional-text-size-3) / 1.66);
}

.kpi_size-xs .kpi_value {
  font-size: calc(var(--conditional-text-size-3) / 1.33);
}

/* TODO: check and move to styles.css */
.cell-editing-grid_container .dx-overlay-content:has(.dx-icon-revert) {
  display: none;
}

/* #6568 task hiding validation message from toolbar input */
.hide-validation-feedback .form_message {
  display: none;
}
/* TODO: add condition to input.js to not display message, adjust form message in toolbar */

/* #6455 - Controls to sort by Code or Description in DX-Popup element
New version, temporary solution till custom popup.js */

.dx-popup-title.dx-toolbar:has([data-override="segmented-button"]) {
  background-color: var(--surface-2);
  padding: 0 var(--gap-M);
}

/* Segmented button */
[data-override="segmented-button"] .dx-button {
  padding: 0;
}

[data-override="segmented-button"] .dx-button-content {
  align-items: center;
  background-color: var(--action_button-background);
  border: 1px solid var(--stroke-1);
  border-radius: 0 !important;
  color: var(--action_button-color);
  display: inline-flex;
  flex-wrap: nowrap;
  font-size: var(--text-XS);
  height: 20px;
  justify-content: center;
  min-width: 60px;
  padding-bottom: 0;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: 0;
  transition: background-color var(--animation-300), border var(--animation-300), color var(--animation-300);
}

[data-override="segmented-button"] .dx-button-content:focus,
[data-override="segmented-button"] .dx-button-content:hover {
  background-color: var(--action_button-background--hover);
  border: 1px solid var(--action_button-border--hover);
  color: var(--action_button-border--hover);
}

[data-override="segmented-button"] .dx-button-content:active,
[data-override="segmented-button"] .dx-button-content:checked,
[data-override="segmented-button"] .dx-item-selected .dx-button-content {
  background-color: var(--action_button-background--active);
  border: 1px solid var(--action_button-border--active);
  color: var(--action_button-color--active);
}

/* Sorting button */
.dx-toolbar:has([data-override="segmented-button"]) .action_button .dx-button-content {
  align-items: center;
  display: flex;
}

.dx-toolbar:has([data-override="segmented-button"]) .dx-button-content i {
  font-size: var(--text-S);
}
/* end of #6455
TODO: Once Dropdown.js is done, add segmented button next to Select all, per original design (brownie points if added through buttons.js). */

.dx-dropdownbutton-popup-wrapper .dx-popup-content {
  padding-bottom: var(--gap-S);
  padding-top: var(--gap-XS);
  padding-left: 0;
  padding-right: 0;
}

/* Color for "This action can't be undone" in Delete modals, should be renamed to something more descriptive */
.is-invalid {
  color: var(--error);
}

/* Hack to make date pickers prettier in modals, needs rethinking */
.modal_content .form_control .time-frame-selector {
  max-width: 100%;
}

/* Add comment in pivot grid, needs analysis */
.modal_content .form_field textarea {
  height: 100%;
}

/* Hack for dx select boxes in modals. 
When Run is pressed and validation executes, dx selectbox classes are removed and instead input-error class which doesn't have a border, thus border is not shown.
It seems that validation is broken on "Add assumption" modal. When first dropdown is filled, input-success class is set to other 2 dropdowns, but it won't trigger Run unless all 3 dropdowns are filled.
Below is a temporary hack, this will be automatically be fixed with dropdown.js */

.modal_content .form_item_label + .input-success {
  border: 1px solid #707070;
}

.modal_content .form_item_label + .input-error {
  border: 1px solid var(--error);
}

/* When tabs are at the top in modal content, we don't want the margin  */
.modal_content > .tabs_block {
  margin-top: 0;
}

.modal_content .tabs_panel {
  height: calc(100% - (2 * var(--gap-M)));
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
}

/* 6736 - Form_option checkbox issue
TODO: Needs more testing, and check if it brakes on zoom levels with indeterminate state 
Doublecheck after Llew publishes Dropdown.js */

.form_option input[type="checkbox"]:checked:not(:indeterminate):not(:disabled)::before {
  height: 100%;
  line-height: 1rem;
  width: 100%;
}

/*	Dropdown.js hacks	
TODO: to be revised and moved to styles.css when ready */

.popup_container {
  min-width: 90px; /* override for 6071 to ensure popup isnt too wide */
}

.form_field input {
  flex: auto; /* testing falling out of container */
  width: 100%;
}

.form_field .action_button-alternative {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  padding-right: 8px;
  margin-right: 0;
  width: 24px;
}

.form_field input:has(+ button) {
  /* background: yellow; */
}

.form_field .oi-caret-down {
  font-size: 6px;
}

/*	end of Dropdown.js hacks	*/

/* #7003 - experimental */
/* Doesn't work well on low res 
.modal_window.is-resizable,
.modal_window.is-resizable .modal_content {
 	max-height: fit-content;
}
*/
.app_card-body:has(.app_card-heading) {
  justify-content: center;
}

/*	#6482 Homepage and Notification Center styling tweaks	
TODO: REWORK where the .welcome_bar is loading (should be outside of page_container with full width). Then cleanup the hacks below and port the changes to styles.css */

[data-location="homepage"] .main_container,
[data-location="notifications"] .main_container {
  background-image: url("../img/homepage-cover.jpg");
  padding-left: 0;
  padding-right: 0;
}

[data-location="homepage"] .top_navbar,
[data-location="notifications"] .top_navbar {
  margin-bottom: var(--gap-XS);
}

.current-app_title {
  font-size: var(--text-S);
}

.welcome_bar.toolbar {
  background-color: var(--accent-2);
  margin-top: 0;
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-L);
  padding-right: var(--gap-L);
  padding-top: var(--gap-S);
}

.welcome_bar .primary_button {
  border: 1px solid transparent;
}

.welcome_bar .primary_button:not(:hover, :focus) {
  border: 1px solid white;
}

[data-location="homepage"] .page_container > .grid_container_new,
[data-location="notifications"] .page_container > .panel_container {
  margin-left: var(--gap-L);
  margin-right: var(--gap-L);
}

[data-location="notifications"] .toolbar {
  padding-left: var(--gap-L);
  padding-right: var(--gap-L);
}

[data-location="homepage"] footer,
[data-location="notifications"] footer {
  background-color: var(--surface-4);
}

[data-location="homepage"] .footer_inner,
[data-location="notifications"] .footer_inner {
  color: var(--body-text-color);
}

:not([data-location="homepage"]) .top_navbar-icon-menu,
:not([data-location="notifications"]) .top_navbar-icon-menu {
  display: flex;
}

/*	end of Homepage and Notification Center styling tweaks	*/

/* override for selected checkboxes background in Popup.js *
/* TODO see if this can be simplified to cover single and multiselect checkboxes in all components */
.popup_container .popup-item_block:has(.form_option input:checked) {
  background-color: transparent;
  color: inherit;
}

.popup_container .popup-item_block:has(.form_option input:checked):hover {
  background-color: var(--common_background--hover);
}

.popup_container .popup-item_block:has(.form_option input:checked):active,
.popup_container .popup-item_block:has(.form_option input:checked):focus {
  background-color: var(--common_background--active);
}

/*Not a good approach, interferes with standardization effort - L. */
.toolbar-margin-top-configuration-alignment {
  margin-top: 18.5px;
}
/*TODO: rework, delete from HTML, delete from CSS */

/* #7099 Needed for delete confirmation modal in External Logic due to length of procedure name sometimes being very long and unbroken. */
/* Also tried with overflow-wrap: anywhere, but that will always break at the dot after the procedure schema. */
.long-string-no-spaces {
  line-break: anywhere;
}

/* Toolbar: Since column gap between groups or solo elements has been decreased, we need to reduce the column gap of elements inside .form_item_group to preserve visual hierarchy */ 
.toolbar .form_item_group {
	column-gap: calc(var(--gap-M) - var(--gap-XS));
}