@charset "UTF-8";
:root {
  --datama-white-hex: #ffffff;
  --datama-white-rgb: 255, 255, 255;
  --datama-primary-hex: #00484a;
  --datama-primary-rgb: 0, 72, 74;
  --datama-primary-light-hex: #16d0b4;
  --datama-primary-light-rgb: 22, 208, 180;
  --datama-yellow-hex: #feda6a;
  --datama-yellow-rgb: 254, 218, 106;
  --color-white-hex: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-secondary-hex: #4286f4;
  --color-secondary-rgb: 66, 134, 244;
  --color-danger-hex: #f8663c;
  --color-danger-rgb: 248, 102, 60;
  --color-warning-hex: #f5b700;
  --color-warning-rgb: 245, 183, 0;
  --color-dark-hex: #1d1d1b;
  --color-dark-rgb: 29, 29, 27;
  --color-dark-thin-hex: #586f70;
  --color-dark-thin-rgb: 88, 111, 112;
  --color-grey-text-hex: #1f1f1f;
  --color-grey-text: 31, 31, 31;
  --color-gold-hex: #cfac03;
  --color-gold-rgb: 207, 176, 3;
  --studio-theme-editable: true;
}

:root {
  --color-light-rgb: var(--color-white-rgb);
  --color-bg-light-rgb: var(--color-white-rgb);
  --color-bg-dark-rgb: var(--color-dark-rgb);
  --font-family: var(--datama-font-sans, Roboto, Arial, sans-serif);
  --datama-font-sans: Roboto, Arial, sans-serif;
  --font-family-heading: var(--datama-font-heading, Montserrat, Roboto, Arial, sans-serif);
  --datama-font-heading: Montserrat, Roboto, Arial, sans-serif;
  --datama-math-font-family: "KaTeX_Math", "KaTeX_Main", "Latin Modern Math", "CMU Serif", Palatino, "Times New Roman", Times, serif;
  --datama-primary: rgb(var(--datama-primary-rgb));
  --datama-primary-light: rgb(var(--datama-primary-light-rgb));
  --datama-warning: rgb(var(--color-warning-rgb));
  /* Light chrome bridge alias (header story tabs use --color-datama). */
  --color-datama: var(--datama-primary);
  --color-primary: rgb(var(--datama-primary-rgb));
  --color-primary-light: rgb(var(--datama-primary-light-rgb));
  --color-warning: rgb(var(--color-warning-rgb));
  --color-secondary: rgb(var(--color-secondary-rgb));
  --color-danger: rgb(var(--color-danger-rgb));
  --color-white: rgb(var(--color-white-rgb));
  --color-dark: rgb(var(--color-dark-rgb));
  --color-light: rgb(var(--color-light-rgb));
  --color-gold: rgb(var(--color-gold-rgb));
  --color-bg-dark: rgb(var(--color-bg-dark-rgb));
  --color-bg-light: rgb(var(--color-bg-light-rgb));
  --color-bg-dark-opacity: rgba(var(--color-bg-dark-rgb), 0.2);
  --color-dark-grey: rgb(var(--color-dark-thin-rgb));
  --shadow-color: rgba(var(--color-dark-rgb), 0.25);
  --shadow-small: 0 0 5px var(--shadow-color);
  --shadow: 0 0 10px var(--shadow-color);
  --shadow-large: 0 0 15px var(--shadow-color);
  --border: 1px solid rgba(var(--color-dark-rgb), 0.1);
  --border-dark: 1px solid rgba(var(--color-dark-rgb), 0.25);
  --border-primary: 1px solid rgba(var(--datama-primary-rgb), 0.25);
  --border-secondary: 1px solid rgba(var(--color-secondary-rgb), 0.25);
  --border-radius: 10px;
  --border-radius-rounded: 50px;
  --border-square: 0;
  --hover: rgba(var(--color-dark-rgb), 0.1);
  --transition-out: 0.2s ease-out;
  --transition-in: 0.1s ease-in;
  --text-font-color: rgb(var(--color-grey-text));
  --quote-font-color: rgb(var(--color-dark-thin-rgb));
  --text-body: rgb(var(--color-dark-thin-rgb));
  --text-label: rgba(var(--color-dark-rgb), 0.75);
  --text-heading: var(--datama-primary);
  --text-structure: var(--datama-primary);
  --text-meta: rgba(var(--datama-primary-rgb), 0.75);
  --state-active-bg: rgba(var(--datama-primary-rgb), 0.1);
  --state-active-border: rgba(var(--datama-primary-rgb), 0.3);
  --state-active-text: var(--datama-primary);
  --state-hover-bg: rgba(var(--datama-primary-rgb), 0.06);
  --focus-border-color: rgba(var(--datama-primary-rgb), 0.45);
  --focus-ring: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.12);
  --caret-color: rgba(var(--datama-primary-rgb), 0.75);
  --caret-color-hover: var(--datama-primary);
  --caret-color-open: var(--datama-primary);
  --input-font-family: var(--font-family);
  --input-bg: rgba(var(--color-white-rgb), 1);
  --input-border-color: rgba(var(--color-dark-rgb), 0.08);
  --input-border: 1px solid var(--input-border-color);
  --input-padding-y: 0.5rem;
  --input-padding-x: 0.875rem;
  --input-padding-inline: var(--input-padding-x);
  --input-select-padding-inline-end: 2.25rem;
  --input-min-height: 33px;
  --input-font-size: 0.75rem;
  --input-line-height: 1rem;
  --input-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
  --input-value-font-weight: 600;
  --input-placeholder-color: rgba(var(--color-dark-rgb), 0.38);
  --input-placeholder-font-weight: 400;
  --input-hover-border-color: rgba(var(--color-dark-rgb), 0.14);
  --input-hover-bg: rgba(var(--color-dark-rgb), 0.035);
  --input-hover-shadow: 0 2px 6px 0 rgba(var(--color-dark-rgb), 0.08);
  --input-chrome-radius: 6px;
  --input-color-swatch-size: 1rem;
  --input-choice-size: 18px;
  --input-label-font-size: 0.75rem;
  --input-label-font-weight: 500;
  /* Studio form chrome (panel / fieldset / simple field). Alias input tokens. */
  --studio-form-font-family: var(--font-family);
  --studio-form-label-font-size: var(--input-label-font-size);
  --studio-form-label-font-weight: var(--input-label-font-weight);
  --studio-form-legend-font-size: 0.85rem;
  --studio-form-legend-font-weight: 600;
  --studio-form-input-min-height: var(--input-min-height);
  --studio-form-input-padding-y: var(--input-padding-y);
  --studio-form-input-padding-x: var(--input-padding-x);
  --studio-form-input-radius: var(--input-chrome-radius);
  --studio-form-input-border: var(--input-border);
  --studio-form-field-gap: var(--studio-space-2);
  --studio-form-create-gap: var(--studio-space-2);
  --studio-form-panel-padding: var(--studio-space-3);
  --datama-radius-sm: var(--input-chrome-radius);
  --datama-border-subtle: var(--input-border-color);
  --table-stripe-bg: rgba(var(--datama-primary-rgb), 0.03);
  --table-hover-bg: rgba(var(--datama-primary-rgb), 0.06);
  --table-border-color: rgba(var(--datama-primary-rgb), 0.12);
  --datama-stripe-color: var(--table-stripe-bg);
  --datama-hover-color: var(--table-hover-bg);
  --datama-border-color: var(--table-border-color);
  --icon-chrome-color: rgba(var(--datama-primary-rgb), 0.85);
  --icon-action-color: rgba(var(--datama-primary-rgb), 0.85);
  --icon-default-color: rgba(var(--color-dark-rgb), 0.7);
  --help-color: rgba(var(--color-dark-rgb), 0.28);
  --help-color-hover: rgba(var(--color-dark-rgb), 0.45);
  --help-color-active: var(--datama-primary);
  --help-bg-hover: rgba(var(--datama-primary-rgb), 0.08);
  --link-external-color: var(--color-secondary);
}

:root {
  --studio-space-0: 0;
  --datama-space-0: 0;
  --studio-space-1: 5px;
  --datama-space-1: 5px;
  --studio-space-2: 10px;
  --datama-space-2: 10px;
  --studio-space-3: 15px;
  --datama-space-3: 15px;
  --studio-space-4: 20px;
  --datama-space-4: 20px;
  --studio-space-5: 25px;
  --datama-space-5: 25px;
}

:root {
  --datama-story-slide-index: 0;
  --studio-display-shell-font-family: var(--font-family);
  --studio-display-shell-bg: var(--color-bg-light);
  --studio-display-shell-color: var(--text-body);
  --studio-display-ui-radius: var(--border-radius);
  --studio-display-ui-border: var(--border);
}

[data-theme=dark] {
  --text-body: rgba(var(--color-white-rgb), 0.75);
  --text-label: rgba(var(--color-white-rgb), 0.65);
  --text-heading: var(--datama-primary-light);
  --text-structure: var(--datama-primary-light);
  --text-meta: rgba(var(--datama-primary-light-rgb), 0.8);
  --text-font-color: rgba(var(--color-white-rgb), 0.9);
  --color-bg-light: rgb(var(--color-dark-rgb));
  --color-bg-light-rgb: var(--color-dark-rgb);
  --color-bg-dark: rgb(12, 12, 11);
  --color-bg-dark-rgb: 12, 12, 11;
  --shadow-color: rgba(0, 0, 0, 0.45);
  --border: 1px solid rgba(var(--color-white-rgb), 0.12);
  --border-dark: 1px solid rgba(var(--color-white-rgb), 0.22);
  --hover: rgba(var(--color-white-rgb), 0.08);
  --state-active-bg: rgba(var(--datama-primary-light-rgb), 0.12);
  --state-active-border: rgba(var(--datama-primary-light-rgb), 0.35);
  --state-active-text: var(--datama-primary-light);
  --state-hover-bg: rgba(var(--datama-primary-light-rgb), 0.08);
  --table-stripe-bg: rgba(var(--datama-primary-light-rgb), 0.06);
  --table-hover-bg: rgba(var(--datama-primary-light-rgb), 0.1);
  --table-border-color: rgba(var(--datama-primary-light-rgb), 0.15);
  --icon-default-color: rgba(var(--color-white-rgb), 0.65);
  --icon-chrome-color: rgba(var(--datama-primary-light-rgb), 0.9);
  --icon-action-color: rgba(var(--datama-primary-light-rgb), 0.9);
  --help-color: rgba(var(--color-white-rgb), 0.35);
  --help-color-hover: rgba(var(--color-white-rgb), 0.55);
  --help-color-active: var(--datama-primary-light);
  --help-bg-hover: rgba(var(--datama-primary-light-rgb), 0.1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.datama-studio,
.datama-light {
  font-family: var(--studio-display-shell-font-family);
  color: var(--studio-display-shell-color);
  background: var(--studio-display-shell-bg);
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

div[data-app=true] * {
  box-sizing: border-box;
}

div[data-app=true].no-events,
div[data-app=true].no-events * {
  pointer-events: none !important;
}

div[data-app=true] {
  position: relative;
  color: var(--text-body);
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 100vh;
  font-family: var(--font-family);
}

div[data-app=true] :is(button, input, select, textarea) {
  font-family: inherit;
}

div[data-app=true] :is(h1,
h2,
h3,
h4,
.header-title,
.datama-module-title,
.datama-dialog-title,
.datama-fieldset-title,
.datama-story-form-section-label) {
  font-family: var(--font-family-heading);
}

div[data-app=true].datama-light {
  height: 100vh;
  overflow: hidden;
}

div[data-app=true] > .datama-studio-overlays {
  position: absolute;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
}

div[data-app=true] > .datama-studio-overlays > * {
  pointer-events: auto;
}

.datama-light > .datama-light-header {
  order: 1;
}

.datama-light > .datama-light-header:not(.custom) {
  flex: 0 0 50px;
}

.datama-light > .datama-light-modules {
  order: 3;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--datama-story-canvas-bg, transparent);
}

.datama-light > .datama-light-footer {
  order: 5;
  flex: 0 0 30px;
  min-height: 30px;
}

.datama-light > .datama-light-footer.datama-light-footer-stories {
  flex: 0 0 40px;
  min-height: 40px;
  height: 40px;
}

/* Beat Light footer `padding: 0 10px !important` (appended later, lower specificity). */
div[data-app=true] .datama-light-footer.datama-light-footer-stories {
  padding: 0 !important;
}

.datama-light > .datama-light-footer.datama-light-footer-stories.datama-light-footer-stories-hidden {
  display: none;
  flex: 0 0 0;
  min-height: 0;
  height: 0;
}

/* Story footer tabs — native Studio layer (Light AIO header.css used to own these). */
.datama-story-tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
  flex: 1 1 auto;
  overflow: auto hidden;
  height: 100%;
}

.datama-story-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 10px;
  font-size: 13px;
  line-height: 40px;
  white-space: nowrap;
  color: rgba(var(--color-dark-rgb), 0.7);
}

.datama-story-tab + .datama-story-tab {
  border-left: 1px solid rgba(var(--color-dark-rgb), 0.12);
}

.datama-story-tab-add {
  font-size: 18px;
  font-weight: 500;
}

.datama-story-tab-delete {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  align-self: center;
  box-sizing: border-box;
  width: 20px;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}

.datama-story-tab:hover .datama-story-tab-delete {
  opacity: 1;
  pointer-events: auto;
}

.datama-story-tab-delete:hover {
  color: var(--datama-primary);
}

.datama-story-tab-delete svg {
  display: block;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  pointer-events: none;
}

/* Active state must beat Light header.css when still appended later. */
.datama-light > .datama-light-footer .datama-story-tab.active:not(.datama-story-tab-add) {
  color: var(--state-active-text);
  font-weight: 600;
  background: var(--state-active-bg);
  box-shadow: inset 0 2px 0 var(--datama-primary);
}

div[data-app=true] button,
div[data-app=true] a {
  cursor: pointer;
}

.datama-light .disabled:not(.dimension-pill):not(.kpi),
div[data-app=true] .disabled:not(.dimension-pill):not(.kpi) {
  opacity: 0.5;
  cursor: not-allowed;
}

.datama-warning-notice-shell--story-track {
  flex: 0 0 100%;
  width: 100%;
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  box-sizing: border-box;
  padding: 1.25rem var(--datama-story-pad-x, 1rem) 1.5rem;
}

.datama-warning-notice-shell--story-track > .datama-warning-notice {
  max-width: 40rem;
}

.datama-story-slot {
  display: flex;
  flex-direction: column;
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-height: 0;
  box-sizing: border-box;
  padding: var(--datama-story-pad-y, 0px) var(--datama-story-pad-x, 0px);
  overflow: visible;
}

.datama-story-slot-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background: var(--color-bg-light, #fff);
  border-radius: var(--datama-story-module-radius, 0px);
  border-width: var(--datama-story-module-border-width, 0px);
  border-style: solid;
  border-color: var(--datama-story-module-border-color, transparent);
  box-shadow: var(--datama-story-module-shadow, none);
  padding: var(--datama-story-module-pad-y, 0px) var(--datama-story-module-pad-x, 0px);
}

.datama-story-slot-body > .datama-module-slot-host {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.datama-story-slot-body .datama-module,
.datama-story-slot-body .datama-module-slot,
.datama-story-slot-body .datama-module-slot__content,
.datama-story-slot-body .datama-compare-waterfall-module {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.datama-light.datama-story-display-slide .datama-story-slot-chrome {
  display: none;
}

.datama-light.datama-story-display-scroll .datama-story-display-track {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
  box-sizing: border-box;
  overflow-y: auto;
}

.datama-light.datama-story-display-slide .datama-story-display-track {
  display: contents;
}

.datama-light.datama-story-display-slide > .datama-light-modules {
  overflow: hidden;
  position: relative;
}

.datama-light.datama-story-display-slide .datama-story-display-track {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  transform: translateX(calc(-1 * var(--datama-story-slide-index, 0) * 100%));
  transition: transform 0.28s ease;
}

.datama-light.datama-story-display-slide .datama-story-slot {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-width: 0;
}

.datama-story-slide-nav {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 8px;
  pointer-events: none;
}

.datama-light.datama-story-display-scroll .datama-story-slide-nav,
.datama-story-slide-nav[hidden] {
  display: none;
}

.datama-story-slide-nav .datama-story-slide-nav-button.datama-button.no-text {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  min-height: 36px;
  margin: 0;
  /* Beat `.datama-button.no-text { padding: 5px 10px }` from legacy chrome. */
  padding: 0;
  line-height: 0;
  border: 1px solid rgba(var(--color-dark-rgb), 0.16);
  border-radius: 50%;
  background: var(--color-bg-light, #fff);
  color: var(--color-dark);
  box-shadow: var(--shadow-small);
  cursor: pointer;
  transform: none;
  gap: 0;
}

.datama-story-slide-nav .datama-story-slide-nav-button.datama-button.no-text > .datama-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  line-height: 0;
}

.datama-story-slide-nav .datama-story-slide-nav-button.datama-button.no-text > .datama-button-icon > svg {
  display: block;
  width: 20px;
  height: 20px;
}

.datama-story-slide-nav .datama-story-slide-nav-button.datama-button.no-text:hover:not(:disabled) {
  border-color: var(--datama-primary);
  color: var(--datama-primary);
  transform: none;
}

.datama-story-slide-nav .datama-story-slide-nav-button.datama-button:disabled,
.datama-story-slide-nav .datama-story-slide-nav-button.datama-button.disabled {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}

.datama-story-slide-nav .datama-story-slide-nav-button.datama-story-slide-nav-add {
  position: absolute;
  right: 8px;
  top: calc(50% + 26px);
  border-color: var(--datama-primary);
  color: var(--datama-primary);
}

.datama-light.datama-light-presentation .datama-story-slide-nav-add {
  display: none;
}

.datama-light-modules:fullscreen {
  background: var(--color-bg-light, #ffffff);
}

.datama-light > .datama-story-master-bar {
  order: 2;
  flex: 0 0 auto;
  width: 100%;
}

.datama-story-master-bar {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 32px;
  max-height: 56px;
  position: relative;
  z-index: 2;
  background: transparent;
  border-bottom: var(--border);
  box-shadow: none;
}

.datama-story-master-hidden {
  display: none;
}

.datama-story-master-cards {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  padding: 2px 6px;
  overflow: auto hidden;
}

.datama-story-master-chip {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  max-width: 100%;
}

.datama-story-master-chip + .datama-story-master-chip {
  margin-left: 2px;
  padding-left: 10px;
  box-shadow: inset 1px 0 0 rgba(var(--color-dark-rgb), 0.12);
}

.datama-story-master-card {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  max-width: 100%;
  min-height: 28px;
  margin: 0;
  padding: 2px 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
  transition: background 0.12s ease;
}

.datama-story-master-card:hover:not(:disabled) {
  background: var(--hover);
}

.datama-story-master-card-icon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.datama-story-master-card-label {
  display: none;
}

.datama-story-master-card-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.datama-story-master-card-comparison .datama-story-master-card-body,
.datama-story-master-card-formula .datama-story-master-card-body {
  align-items: flex-start;
}

.datama-story-master-card-value {
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14rem;
}

.datama-story-master-card-value.datama-story-master-comparison {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 6px;
  row-gap: 2px;
  max-width: none;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.datama-story-master-comparison-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 4px;
  min-width: 0;
}

.datama-story-master-comparison-context {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(var(--color-dark-rgb), 0.55);
  white-space: nowrap;
  grid-column: 1;
}

.datama-story-master-comparison .datama-story-master-comparison-line {
  grid-column: 2;
}

.datama-story-master-pill {
  display: inline-flex;
  align-items: center;
  max-width: 360px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(var(--datama-primary-rgb), 0.18);
  background: var(--state-active-bg);
  color: var(--datama-primary);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datama-story-master-joiner {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: rgba(var(--color-dark-rgb), 0.45);
  padding: 0 2px;
  white-space: nowrap;
  flex: 0 0 auto;
}

.datama-story-master-chip-comparison,
.datama-story-master-chip-filters,
.datama-story-master-chip-whatif,
.datama-story-master-chip-events {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  max-width: min(56rem, 92vw);
}

.datama-story-master-comparison-editor,
.datama-story-master-whatif-editor,
.datama-story-master-calendar-editor {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  padding: 0;
}

.datama-story-master-filters-host {
  display: block;
  width: fit-content;
  max-width: min(56rem, 85vw);
  min-width: 0;
}

.datama-filters-form--master-bar {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: auto;
  max-width: min(56rem, 85vw);
}

.datama-filters-form--master-bar .datama-filters-form-list {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  width: auto;
}

.datama-filters-form--master-bar .datama-filters-form-empty {
  display: none !important;
}

.datama-filters-form--master-bar .datama-filters-form-toolbar {
  display: inline-flex;
  flex: 0 0 auto;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.datama-story-master-bar:hover .datama-filters-form--master-bar .datama-filters-form-toolbar,
.datama-story-master-bar:focus-within .datama-filters-form--master-bar .datama-filters-form-toolbar {
  opacity: 1;
  pointer-events: auto;
}

.datama-button.datama-button-master-bar-add-filter {
  min-width: 22px;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  border-radius: 999px;
  justify-content: center;
}
.datama-button.datama-button-master-bar-add-filter > .datama-button-icon {
  margin: 0;
}

.datama-filters-form--master-bar .datama-filters-form-pill {
  display: inline-flex;
  align-items: center;
  max-width: none;
  height: 22px;
  max-height: 22px;
  padding: 0 2px 0 6px;
  gap: 2px;
  overflow: visible;
}

.datama-story-master-comparison-line-edit {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
}

.datama-story-master-comparison-pill,
.datama-story-master-calendar-pill {
  display: inline-flex;
  align-items: center;
  max-width: none;
  height: 22px;
  max-height: 22px;
  padding: 0 2px 0 6px;
  gap: 2px;
  overflow: visible;
}

.datama-story-master-whatif-pill.datama-story-master-pill {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: min(22rem, 72vw);
  height: 22px;
  max-height: 22px;
  padding: 0 8px 0 8px;
  overflow: visible;
  line-height: 22px;
  font-size: 11px;
  font-weight: 600;
  text-overflow: unset;
}

.datama-story-master-whatif-pill-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  color: var(--datama-primary);
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datama-story-master-whatif-pill-kpi {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 22px;
  color: rgba(var(--datama-primary-rgb), 0.72);
  white-space: nowrap;
  max-width: 6rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datama-story-master-whatif-pill .datama-story-master-whatif-pill-value,
.datama-story-master-whatif-pill .datama-input-container.datama-input-with-unit {
  position: static;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 1px;
  width: auto;
  height: 22px;
  margin: 0;
}

.datama-story-master-whatif-pill .datama-input[type=number] {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--datama-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 0.1rem !important;
  min-width: 1.75rem !important;
  width: 2.25rem !important;
  max-width: 2.75rem !important;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}

.datama-story-master-whatif-pill .datama-input[type=number]::-webkit-outer-spin-button,
.datama-story-master-whatif-pill .datama-input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.datama-story-master-whatif-pill .datama-input-unit {
  position: static !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  flex: 0 0 auto;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 22px !important;
  color: var(--datama-primary) !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Compact clause controls inside master pills (Light __filters.css parity) */
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-operator {
  display: none !important;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-connector {
  flex: 0 0 auto;
  margin: 0 0.1rem;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 500;
  line-height: 22px;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.45));
  white-space: nowrap;
}

.datama-filters-form--master-bar .datama-filter-clause-row--pill-summary .datama-filter-pill-summary {
  display: none;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 14rem;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 600;
  line-height: 22px;
  color: var(--datama-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: text;
}
.datama-filters-form--master-bar .datama-filter-clause-row--pill-summary.datama-filter-clause-row--column-set:not(:focus-within) .datama-filter-pill-summary {
  display: inline-flex;
}
.datama-filters-form--master-bar .datama-filter-clause-row--pill-summary.datama-filter-clause-row--column-set:not(:focus-within) .datama-filter-clause-column,
.datama-filters-form--master-bar .datama-filter-clause-row--pill-summary.datama-filter-clause-row--column-set:not(:focus-within) .datama-comparison-row-controls {
  display: none !important;
}
.datama-filters-form--master-bar .datama-filter-clause-row--pill-summary.datama-filter-clause-row--column-set:focus-within .datama-filter-pill-summary {
  display: none !important;
}
.datama-filters-form--master-bar .datama-filter-clause-row--pill-summary.datama-filter-clause-row--column-set:not(:focus-within) .datama-filter-clause-column {
  display: none !important;
}
.datama-filters-form--master-bar .datama-filter-clause-row--pill-summary.datama-filter-clause-row--hide-operator .datama-filter-clause-operator, .datama-filters-form--master-bar .datama-filter-clause-row--pill-summary.datama-filter-clause-row--bound-operator .datama-filter-clause-operator {
  display: none !important;
}

.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  gap: 2px;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar.datama-filter-clause-row--leading-operator,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar.datama-filter-clause-row--leading-operator {
  grid-template-columns: unset;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-comparison-row-controls,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-comparison-row-controls-clause,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-comparison-row-controls,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-comparison-row-controls-clause {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-operator,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-values,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-column,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-filter-clause-operator,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-filter-clause-values,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-filter-clause-column {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  gap: 2px;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input-select,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input[type=text],
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input[type=number],
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input[type=date],
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input-select,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input[type=text],
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input[type=number],
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input[type=date] {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--datama-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 0.15rem !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input-select,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input-select {
  padding: 0 0.85rem 0 0.15rem !important;
  width: max-content !important;
  max-width: 11rem !important;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-operator .datama-input-select,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-filter-clause-operator .datama-input-select {
  max-width: 5.5rem !important;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-column .datama-input-select,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-filter-clause-column .datama-input-select {
  max-width: 7rem !important;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input-select > .datama-input-select-value,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input-select > .datama-input-select-value {
  line-height: 22px;
  min-width: 0;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input[type=date],
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input[type=date] {
  width: 5.75rem !important;
  max-width: 5.75rem !important;
  font-variant-numeric: tabular-nums;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input-select:hover,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input-select:focus,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input:hover,
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-input:focus,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input-select:hover,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input-select:focus,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input:hover,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-input:focus {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}
.datama-story-master-comparison-editor .datama-filter-clause-row--master-bar .datama-filter-clause-remove.datama-button.no-text,
.datama-filters-form--master-bar .datama-filter-clause-row--master-bar .datama-filter-clause-remove.datama-button.no-text {
  width: 1.1rem;
  height: 1.1rem;
  min-width: 1.1rem;
  min-height: 1.1rem;
  padding: 0;
  opacity: 0.55;
}

.datama-story-master-whatif-editor .datama-input,
.datama-story-master-whatif-editor .datama-input-select,
.datama-story-master-whatif-editor .datama-input[type=number],
.datama-story-master-calendar-editor .datama-input,
.datama-story-master-calendar-editor .datama-input-select,
.datama-story-master-calendar-editor .datama-input[type=number] {
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--datama-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-height: 22px !important;
  height: 22px !important;
  padding: 0 0.15rem !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.datama-story-master-whatif-editor .datama-input-select,
.datama-story-master-calendar-editor .datama-input-select {
  padding: 0 0.85rem 0 0.15rem !important;
  width: max-content !important;
  max-width: 14rem !important;
}
.datama-story-master-whatif-editor .datama-input-select > .datama-input-select-value,
.datama-story-master-calendar-editor .datama-input-select > .datama-input-select-value {
  line-height: 22px;
  min-width: 0;
}
.datama-story-master-whatif-editor .datama-input-with-unit,
.datama-story-master-calendar-editor .datama-input-with-unit {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: 22px;
}
.datama-story-master-whatif-editor .datama-input-unit,
.datama-story-master-calendar-editor .datama-input-unit {
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--datama-primary);
  padding: 0;
}
.datama-story-master-whatif-editor .datama-input-container,
.datama-story-master-calendar-editor .datama-input-container {
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.datama-story-master-whatif-editor .datama-input[type=number],
.datama-story-master-calendar-editor .datama-input[type=number] {
  width: 3.25rem !important;
  max-width: 3.25rem !important;
  font-variant-numeric: tabular-nums;
}

.datama-story-master-card-formula {
  max-height: 48px;
  align-items: center;
  padding-top: 1px;
  padding-bottom: 1px;
}

.datama-story-master-card-formula .datama-story-master-card-body {
  max-height: 44px;
  overflow: hidden;
}

.datama-story-master-card-formula .datama-story-master-card-value {
  overflow: visible;
  font-weight: 400;
  max-width: none;
  text-overflow: unset;
  white-space: nowrap;
  max-height: 40px;
}

.datama-story-master-math {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  max-height: 38px;
  color: var(--color-dark);
  font-family: "KaTeX_Math", var(--datama-math-font-family);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  line-height: 1;
}

.datama-story-master-math-total {
  font-size: 0.8125rem;
  font-weight: 400;
  font-style: italic;
  white-space: nowrap;
}

.datama-story-master-math-step {
  display: inline-flex;
  align-items: flex-end;
  vertical-align: middle;
  margin: 0 1px;
}

.datama-story-master-math-step-base {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.datama-story-master-math-step-braced {
  display: inline-flex;
  align-items: center;
  align-self: center;
  vertical-align: middle;
  color: var(--datama-primary);
}

.datama-story-master-math-brace-char {
  font-family: "KaTeX_Main", var(--datama-math-font-family);
  font-style: normal;
  font-weight: 400;
  font-size: 0.75rem;
  line-height: 1;
  flex: 0 0 auto;
  align-self: center;
  padding: 0;
}

.datama-story-master-math-step-inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0 1px;
  line-height: 1;
}

.datama-story-master-math-step-sub {
  display: inline-block;
  font-family: "KaTeX_Main", var(--datama-math-font-family);
  font-style: normal;
  font-size: 0.48rem;
  font-weight: 500;
  line-height: 1;
  margin-left: 2px;
  margin-bottom: 0.05em;
  max-width: 3.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(var(--color-dark-rgb), 0.72);
  flex: 0 1 auto;
  min-width: 0;
}

.datama-story-master-math-step-sup {
  position: absolute;
  top: -0.45em;
  right: 0.1em;
  font-family: "KaTeX_Main", var(--datama-math-font-family);
  font-style: normal;
  font-size: 0.48rem;
  font-weight: 600;
  line-height: 1;
  color: var(--datama-primary);
  pointer-events: none;
}

.datama-story-master-math-eq,
.datama-story-master-math-op,
.datama-story-master-math-paren,
.datama-story-master-math-unit {
  font-family: "KaTeX_Main", var(--datama-math-font-family);
  font-style: normal;
  color: var(--datama-primary);
}

.datama-story-master-math-eq {
  font-size: 0.875rem;
  font-weight: 400;
}

.datama-story-master-math-unit {
  font-size: 0.6875rem;
  font-weight: 600;
  padding-left: 1px;
}

.datama-story-master-math-row {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}

.datama-story-master-math-op {
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 0 1px;
}

.datama-story-master-math-term {
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}

.datama-story-master-math-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 1.1em;
}

.datama-story-master-math-frac-num,
.datama-story-master-math-frac-den {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
}

.datama-story-master-card-formula .datama-story-master-math-frac-num,
.datama-story-master-card-formula .datama-story-master-math-frac-den {
  font-size: 0.5625rem;
  line-height: 1;
  padding: 0 1px;
}

.datama-story-master-card-formula .datama-story-master-math-term,
.datama-story-master-card-formula .datama-story-master-math-total {
  font-size: 0.75rem;
}

.datama-story-master-card-formula .datama-story-master-math-op {
  font-size: 0.6875rem;
}

.datama-story-master-math-frac-bar {
  display: block;
  height: 0;
  border-top: 1px solid currentColor;
  margin: 0;
}

.datama-story-master-math-paren {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

.datama-story-master-math-sup {
  display: inline-flex;
  align-items: flex-start;
  font-size: 0.5625rem;
  margin-top: -4px;
}

.datama-story-master-card-unpin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 2px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(var(--color-dark-rgb), 0.55);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.datama-story-master-chip:hover .datama-story-master-card-unpin,
.datama-story-master-chip:focus-within .datama-story-master-card-unpin {
  opacity: 1;
  pointer-events: auto;
}

.datama-story-master-card-unpin:hover {
  background: var(--hover);
  color: var(--color-dark);
}

.datama-story-master-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: min(520px, 90vw);
  max-height: min(70vh, 640px);
  overflow: auto;
}

.datama-story-master-sections {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.datama-story-master-empty {
  margin: 0;
  opacity: 0.75;
}

.datama-story-master-readonly {
  pointer-events: none;
  opacity: 0.85;
}

/* Legacy __dialog.css sets min-width: 80% — override for What If master dialog. */
.datama-dialog.datama-dialog-what-if > .datama-dialog-container {
  width: min(100vw - 2rem, 40.5rem);
  min-width: min(100vw - 2rem, 34.5rem);
  max-width: 40.5rem;
  min-height: 0;
  max-height: min(100vh - 2rem, 52.5rem);
  height: auto;
}

.datama-dialog.datama-dialog-what-if > .datama-dialog-container > main {
  padding: 1.125rem 1.375rem 0.875rem;
  flex: 1 1 auto;
  min-height: 0;
}

.datama-dialog.datama-dialog-what-if > .datama-dialog-container > header {
  padding-left: 1rem;
  padding-right: 1rem;
}

.datama-dialog.datama-dialog-what-if > .datama-dialog-container > footer {
  display: flex;
  padding: 0.85rem 1rem 1rem;
  gap: 0.75rem;
}

.datama-dialog.datama-dialog-what-if > .datama-dialog-container > footer > .datama-button {
  margin: 0;
}

.datama-story-master-form:has(.datama-whatif-settings) {
  min-width: 0;
  width: 100%;
  max-height: none;
  overflow: visible;
  gap: 0.5rem;
}

.datama-story-master-form .datama-whatif-settings {
  width: 100%;
  min-width: 0;
  gap: 0.5rem;
}

.datama-dialog-story-master .datama-whatif-scenario-panels,
.datama-dialog-what-if .datama-whatif-scenario-panels {
  gap: 0.5rem;
  padding-inline: 1.125rem;
  padding-block: 0.375rem 0.125rem;
}

.datama-dialog-story-master .datama-whatif-scenario-add,
.datama-dialog-what-if .datama-whatif-scenario-add {
  padding-inline: 1.125rem;
}

.datama-dialog-story-master .datama-whatif-scenario-panels > .datama-panels-list > .datama-panel {
  width: 100%;
}

.datama-dialog-story-master .datama-whatif-scenario-panel > .datama-panel-header-container {
  padding: 0.65rem 1rem;
  min-height: 0;
}

.datama-dialog-story-master .datama-whatif-scenario-panel > .datama-panel-content,
.datama-dialog-what-if .datama-whatif-scenario-panel > .datama-panel-content {
  padding: 1.25rem 1.375rem 1.375rem;
  overflow: visible !important;
}

.datama-dialog-story-master .datama-whatif-scenario-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(var(--datama-primary-rgb), 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--datama-primary) 12%, var(--color-white));
}

.datama-dialog-story-master .datama-whatif-scenario-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  overflow: visible;
  color: rgb(var(--datama-primary-rgb));
}

.datama-dialog-story-master .datama-whatif-scenario-notice-icon svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  overflow: visible;
  fill: currentColor !important;
}

.datama-dialog-story-master .datama-whatif-scenario-notice-text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-body);
}

.datama-dialog-story-master .datama-whatif-scenario-notice-paragraph {
  margin: 0;
}

.datama-dialog-story-master .datama-whatif-fieldset-section {
  margin-bottom: 0.5rem !important;
}

.datama-dialog-story-master .datama-whatif-fieldset-section .datama-fieldset-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.datama-dialog-story-master .datama-whatif-scenario-title .datama-input-container,
.datama-dialog-story-master .datama-whatif-scenario-name-input {
  margin-bottom: 0;
  width: 100%;
}

.datama-dialog-story-master .datama-whatif-scenario-name-field,
.datama-dialog-story-master .datama-whatif-scenario-title .datama-input {
  width: 100%;
  min-width: 0;
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--text-body);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.18);
  border-radius: 0;
  padding: 0.15rem 0 0.25rem;
  min-height: 0;
  box-shadow: none;
}

.datama-dialog-story-master .datama-whatif-scenario-name-field:focus,
.datama-dialog-story-master .datama-whatif-scenario-title .datama-input:focus {
  outline: none;
  border-bottom-color: rgb(var(--datama-primary-rgb));
}

.datama-dialog-what-if .datama-fieldset-inline .datama-fieldset-container {
  padding: 0.35rem 0.75rem 0.65rem 1rem;
  gap: 0;
}

.datama-dialog-what-if .datama-whatif-fieldset-section .datama-fieldset-container {
  gap: 0.5rem;
}

.datama-dialog-what-if .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.75rem 0.35rem;
  align-items: center;
}

.datama-dialog-what-if .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row:not(:last-child) {
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
}

.datama-dialog-what-if .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row:last-child {
  border-bottom: none;
}

.datama-dialog-what-if .datama-whatif-fieldset-section .datama-input-container {
  margin-bottom: 0;
}

.datama-dialog-what-if .datama-whatif-kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 0;
  padding: 0.35rem 3rem 0.35rem 0.85rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.1);
  border-radius: 8px;
  background: rgba(var(--color-dark-rgb), 0.02);
}

.datama-dialog-what-if .datama-whatif-kpi-card .datama-whatif-kpi-delete {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
}

.datama-dialog-what-if .datama-whatif-kpi-card .datama-fieldset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0;
  min-height: var(--input-min-height);
  padding: 0.75rem 0.35rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
  box-sizing: border-box;
}

.datama-dialog-what-if .datama-whatif-kpi-card .datama-fieldset-row:last-child {
  border-bottom: none;
}

.datama-dialog-what-if .datama-whatif-kpi-card .datama-input-container {
  margin-bottom: 0;
}

.datama-dialog-story-master .datama-whatif-scenario-add,
.datama-dialog-story-master .datama-whatif-kpi-add {
  margin-top: 0;
}

.datama-dialog-what-if .datama-input-container {
  max-width: 100%;
}

.datama-dialog-what-if .datama-whatif-fieldset-section .datama-input-container,
.datama-dialog-what-if .datama-whatif-kpi-card .datama-input-container {
  margin-bottom: 0;
}

.datama-dialog-what-if .datama-fieldset-row {
  gap: 0.35rem 0.5rem;
}

.datama-dialog-what-if .datama-fieldset-label-container,
.datama-dialog-story-master .datama-whatif-fieldset-section .datama-fieldset-label-container {
  gap: 0.125rem;
}

.datama-dialog-what-if .datama-fieldset-label-container .datama-documentation,
.datama-dialog-story-master .datama-whatif-fieldset-section .datama-fieldset-label-container .datama-documentation {
  margin-left: 0.125rem;
}

.datama-dialog-what-if .datama-whatif-kpi-empty,
.datama-dialog-story-master .datama-whatif-kpi-empty {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(var(--color-dark-rgb), 0.72);
}

.datama-dialog-what-if .datama-fieldset-left {
  min-width: 0;
}

.datama-dialog-what-if .datama-fieldset-right {
  min-width: 0;
  justify-content: flex-end;
}

.datama-dialog-what-if .datama-fieldset-right .datama-input-container {
  width: 100%;
  max-width: 21rem;
  min-width: 8rem;
}

.datama-dialog-what-if .datama-fieldset-right .datama-input:not(.datama-input-switch),
.datama-dialog-what-if .datama-fieldset-right .datama-input-select {
  max-width: 100%;
  width: 100%;
  min-width: 0;
}

.datama-dialog-what-if .datama-whatif-scenario-panel > .datama-panel-content {
  overflow: visible !important;
}

div[data-app=true] .p-0 {
  padding: var(--studio-space-0) !important;
}

div[data-app=true] .pt-0 {
  padding-top: var(--studio-space-0) !important;
}

div[data-app=true] .pb-0 {
  padding-bottom: var(--studio-space-0) !important;
}

div[data-app=true] .pl-0 {
  padding-left: var(--studio-space-0) !important;
}

div[data-app=true] .pr-0 {
  padding-right: var(--studio-space-0) !important;
}

div[data-app=true] .m-0 {
  margin: var(--studio-space-0) !important;
}

div[data-app=true] .mt-0 {
  margin-top: var(--studio-space-0) !important;
}

div[data-app=true] .mb-0 {
  margin-bottom: var(--studio-space-0) !important;
}

div[data-app=true] .ml-0 {
  margin-left: var(--studio-space-0) !important;
}

div[data-app=true] .mr-0 {
  margin-right: var(--studio-space-0) !important;
}

div[data-app=true] .p-1 {
  padding: var(--studio-space-1) !important;
}

div[data-app=true] .pt-1 {
  padding-top: var(--studio-space-1) !important;
}

div[data-app=true] .pb-1 {
  padding-bottom: var(--studio-space-1) !important;
}

div[data-app=true] .pl-1 {
  padding-left: var(--studio-space-1) !important;
}

div[data-app=true] .pr-1 {
  padding-right: var(--studio-space-1) !important;
}

div[data-app=true] .m-1 {
  margin: var(--studio-space-1) !important;
}

div[data-app=true] .mt-1 {
  margin-top: var(--studio-space-1) !important;
}

div[data-app=true] .mb-1 {
  margin-bottom: var(--studio-space-1) !important;
}

div[data-app=true] .ml-1 {
  margin-left: var(--studio-space-1) !important;
}

div[data-app=true] .mr-1 {
  margin-right: var(--studio-space-1) !important;
}

div[data-app=true] .p-2 {
  padding: var(--studio-space-2) !important;
}

div[data-app=true] .pt-2 {
  padding-top: var(--studio-space-2) !important;
}

div[data-app=true] .pb-2 {
  padding-bottom: var(--studio-space-2) !important;
}

div[data-app=true] .pl-2 {
  padding-left: var(--studio-space-2) !important;
}

div[data-app=true] .pr-2 {
  padding-right: var(--studio-space-2) !important;
}

div[data-app=true] .m-2 {
  margin: var(--studio-space-2) !important;
}

div[data-app=true] .mt-2 {
  margin-top: var(--studio-space-2) !important;
}

div[data-app=true] .mb-2 {
  margin-bottom: var(--studio-space-2) !important;
}

div[data-app=true] .ml-2 {
  margin-left: var(--studio-space-2) !important;
}

div[data-app=true] .mr-2 {
  margin-right: var(--studio-space-2) !important;
}

div[data-app=true] .p-3 {
  padding: var(--studio-space-3) !important;
}

div[data-app=true] .pt-3 {
  padding-top: var(--studio-space-3) !important;
}

div[data-app=true] .pb-3 {
  padding-bottom: var(--studio-space-3) !important;
}

div[data-app=true] .pl-3 {
  padding-left: var(--studio-space-3) !important;
}

div[data-app=true] .pr-3 {
  padding-right: var(--studio-space-3) !important;
}

div[data-app=true] .m-3 {
  margin: var(--studio-space-3) !important;
}

div[data-app=true] .mt-3 {
  margin-top: var(--studio-space-3) !important;
}

div[data-app=true] .mb-3 {
  margin-bottom: var(--studio-space-3) !important;
}

div[data-app=true] .ml-3 {
  margin-left: var(--studio-space-3) !important;
}

div[data-app=true] .mr-3 {
  margin-right: var(--studio-space-3) !important;
}

div[data-app=true] .p-4 {
  padding: var(--studio-space-4) !important;
}

div[data-app=true] .pt-4 {
  padding-top: var(--studio-space-4) !important;
}

div[data-app=true] .pb-4 {
  padding-bottom: var(--studio-space-4) !important;
}

div[data-app=true] .pl-4 {
  padding-left: var(--studio-space-4) !important;
}

div[data-app=true] .pr-4 {
  padding-right: var(--studio-space-4) !important;
}

div[data-app=true] .m-4 {
  margin: var(--studio-space-4) !important;
}

div[data-app=true] .mt-4 {
  margin-top: var(--studio-space-4) !important;
}

div[data-app=true] .mb-4 {
  margin-bottom: var(--studio-space-4) !important;
}

div[data-app=true] .ml-4 {
  margin-left: var(--studio-space-4) !important;
}

div[data-app=true] .mr-4 {
  margin-right: var(--studio-space-4) !important;
}

div[data-app=true] .p-5 {
  padding: var(--studio-space-5) !important;
}

div[data-app=true] .pt-5 {
  padding-top: var(--studio-space-5) !important;
}

div[data-app=true] .pb-5 {
  padding-bottom: var(--studio-space-5) !important;
}

div[data-app=true] .pl-5 {
  padding-left: var(--studio-space-5) !important;
}

div[data-app=true] .pr-5 {
  padding-right: var(--studio-space-5) !important;
}

div[data-app=true] .m-5 {
  margin: var(--studio-space-5) !important;
}

div[data-app=true] .mt-5 {
  margin-top: var(--studio-space-5) !important;
}

div[data-app=true] .mb-5 {
  margin-bottom: var(--studio-space-5) !important;
}

div[data-app=true] .ml-5 {
  margin-left: var(--studio-space-5) !important;
}

div[data-app=true] .mr-5 {
  margin-right: var(--studio-space-5) !important;
}

div[data-app=true] .top-1 {
  top: var(--studio-space-1) !important;
}

div[data-app=true] .left-1 {
  left: var(--studio-space-1) !important;
}

div[data-app=true] .right-1 {
  right: var(--studio-space-1) !important;
}

div[data-app=true] .bottom-1 {
  bottom: var(--studio-space-1) !important;
}

div[data-app=true] .top-2 {
  top: var(--studio-space-2) !important;
}

div[data-app=true] .left-2 {
  left: var(--studio-space-2) !important;
}

div[data-app=true] .right-2 {
  right: var(--studio-space-2) !important;
}

div[data-app=true] .bottom-2 {
  bottom: var(--studio-space-2) !important;
}

div[data-app=true] .top-3 {
  top: var(--studio-space-3) !important;
}

div[data-app=true] .left-3 {
  left: var(--studio-space-3) !important;
}

div[data-app=true] .right-3 {
  right: var(--studio-space-3) !important;
}

div[data-app=true] .bottom-3 {
  bottom: var(--studio-space-3) !important;
}

div[data-app=true] .top-4 {
  top: var(--studio-space-4) !important;
}

div[data-app=true] .left-4 {
  left: var(--studio-space-4) !important;
}

div[data-app=true] .right-4 {
  right: var(--studio-space-4) !important;
}

div[data-app=true] .bottom-4 {
  bottom: var(--studio-space-4) !important;
}

div[data-app=true] .top-5 {
  top: var(--studio-space-5) !important;
}

div[data-app=true] .left-5 {
  left: var(--studio-space-5) !important;
}

div[data-app=true] .right-5 {
  right: var(--studio-space-5) !important;
}

div[data-app=true] .bottom-5 {
  bottom: var(--studio-space-5) !important;
}

div[data-app=true] .top-0 {
  top: 0 !important;
}

div[data-app=true] .left-0 {
  left: 0 !important;
}

div[data-app=true] .right-0 {
  right: 0 !important;
}

div[data-app=true] .bottom-0 {
  bottom: 0 !important;
}

div[data-app=true] .p-absolute {
  position: absolute;
}

div[data-app=true] .strong {
  font-weight: 600 !important;
}

div[data-app=true] .light {
  font-weight: 300 !important;
}

div[data-app=true] .w-100 {
  width: 100% !important;
}

div[data-app=true] .h-100 {
  height: 100% !important;
}

div[data-app=true] .d-flex {
  display: flex !important;
}

div[data-app=true] .flex-column {
  flex-direction: column !important;
}

div[data-app=true] .align-center {
  align-items: center !important;
}

div[data-app=true] .justify-center {
  justify-content: center !important;
}

div[data-app=true] .font-family {
  font-family: var(--font-family) !important;
}

div[data-app=true] .grow {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __input.css project project-deep-sky
 */
.datama-input-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

/* Responsive input containers - wrap on small screens */
@media (max-width: 900px) {
  .datama-input-container {
    gap: 0.5rem;
  }
  .datama-input-container .datama-input-label {
    width: 100%;
    margin-bottom: 0.25rem;
    margin-right: 0;
  }
  .datama-input-container .datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Special handling for number inputs with units */
  .datama-input-container.datama-input-with-unit .datama-input[type=number] {
    width: calc(100% - 3rem);
    max-width: calc(100% - 3rem);
  }
  /* Select inputs responsive */
  .datama-input-container .datama-input-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
@container (max-width: 200px) {
  .datama-input-container {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .datama-input-container .datama-input-label {
    width: 100%;
    margin-bottom: 0.25rem;
    margin-right: 0;
  }
  .datama-input-container .datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select),
  .datama-input-container .datama-input-select {
    width: 100%;
    min-width: 150px;
  }
}
.datama-input-container:not(.datama-input-container-light) {
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  margin-bottom: var(--studio-form-field-gap, var(--studio-space-2, 10px));
}

/* Color swatches align to field row height — no extra outer margin */
.datama-input[type=color] {
  margin: 0;
}

.datama-input.datama-input-switch {
  margin: 0.5rem;
}

/* Labels améliorés */
.datama-input-label {
  font-weight: var(--input-label-font-weight, 500);
  color: var(--text-label);
  font-size: var(--input-label-font-size, 0.75rem);
  min-width: 80px;
  white-space: nowrap;
  user-select: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Focus effect on labels */
.datama-input-container:focus-within .datama-input-label {
  color: var(--datama-primary);
}

/* Subtle container hover effect */
.datama-input-container:hover .datama-input-label {
  color: rgba(var(--color-dark-rgb), 1);
}

/* Help icon styling — muted until interaction
 * Specificity must beat `div[data-app="true"] a { color: primary }` */
div[data-app=true] a.datama-input-help-icon,
div[data-app=true] .datama-input-help-icon,
.datama-input-help-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--help-color);
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: help;
  flex-shrink: 0;
}

div[data-app=true] a.datama-input-help-icon:hover,
div[data-app=true] .datama-input-help-icon:hover,
.datama-input-help-icon:hover {
  color: var(--help-color-hover);
  background: var(--help-bg-hover);
  border-radius: 50%;
}

div[data-app=true] a.datama-input-help-icon:active,
div[data-app=true] .datama-input-help-icon:active,
.datama-input-help-icon:active {
  color: var(--help-color-active);
}

div[data-app=true] a.datama-input-help-icon svg,
div[data-app=true] a.datama-input-help-icon path,
div[data-app=true] .datama-input-help-icon svg,
div[data-app=true] .datama-input-help-icon path,
.datama-input-help-icon svg,
.datama-input-help-icon path {
  width: 14px;
  height: 14px;
  fill: currentColor;
  color: inherit;
}

/* Documentation control — icon-only help trigger (no button chrome)
 * Specificity must beat `div[data-app="true"] a { color: primary }` */
div[data-app=true] a.datama-documentation,
div[data-app=true] button.datama-documentation,
div[data-app=true] .datama-documentation,
.datama-documentation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: 0.375rem;
  padding: 0 !important;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;
  color: var(--datama-primary-light);
  text-decoration: none;
  line-height: 0;
  transition: color 0.15s ease;
  cursor: help;
  transform: none !important;
}

div[data-app=true] a.datama-documentation:hover,
div[data-app=true] button.datama-documentation:hover,
div[data-app=true] .datama-documentation:hover,
.datama-documentation:hover {
  color: rgb(var(--datama-primary-rgb));
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

div[data-app=true] a.datama-documentation:active,
div[data-app=true] button.datama-documentation:active,
div[data-app=true] .datama-documentation:active,
.datama-documentation:active {
  color: rgb(var(--datama-primary-rgb));
}

div[data-app=true] a.datama-documentation:focus,
div[data-app=true] button.datama-documentation:focus,
div[data-app=true] .datama-documentation:focus,
.datama-documentation:focus {
  outline: none;
  box-shadow: none !important;
}

div[data-app=true] a.datama-documentation svg,
div[data-app=true] a.datama-documentation path,
div[data-app=true] button.datama-documentation svg,
div[data-app=true] button.datama-documentation path,
div[data-app=true] .datama-documentation svg,
div[data-app=true] .datama-documentation path,
.datama-documentation svg,
.datama-documentation path {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: inherit;
}

/* When documentation is inside label - pure link style */
div[data-app=true] .datama-input-label .datama-documentation,
.datama-input-label .datama-documentation,
div[data-app=true] .datama-fieldset-label-container .datama-documentation,
.datama-fieldset-label-container .datama-documentation,
div[data-app=true] .datama-form__pro-tip .datama-documentation,
.datama-form__pro-tip .datama-documentation {
  margin-left: 0.35rem;
  margin-right: 0;
  flex-shrink: 0;
}

.datama-input-label .datama-documentation:focus {
  box-shadow: none !important;
  outline: none !important;
}

.datama-input-label .datama-documentation svg {
  width: 16px;
  height: 16px;
}

.datama-input {
  position: relative;
  width: fit-content;
  display: inline-block;
  padding-block: var(--input-padding-y);
  padding-inline: var(--input-padding-inline);
  background: var(--input-bg);
  color: var(--text-body);
  border: var(--input-border);
  border-radius: var(--input-chrome-radius, 6px);
  outline: none;
  min-width: 200px;
  max-width: 350px;
  min-height: var(--input-min-height);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  font-size: var(--input-font-size);
  font-family: var(--input-font-family, var(--font-family));
  line-height: var(--input-line-height);
  font-weight: var(--input-value-font-weight, 600);
  box-shadow: var(--input-shadow);
}

/* États des inputs améliorés - style Linear (text-like inputs only) */
.datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-light):focus {
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  background: var(--input-bg);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-light):hover:not(:focus):not(:disabled) {
  border-color: var(--input-hover-border-color);
  box-shadow: var(--input-hover-shadow);
  background: var(--input-hover-bg);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input::placeholder {
  color: var(--input-placeholder-color);
  font-style: normal;
  font-weight: var(--input-placeholder-font-weight, 400);
}

/* Cursor styles for different input types */
.datama-input[type=text],
.datama-input[type=number],
.datama-input[type=email],
.datama-input[type=tel],
.datama-input[type=password],
.datama-input[type=url] {
  cursor: text !important;
}

/* Bare number inputs: ~3 digits + spinners (with-unit overrides below). */
.datama-input[type=number]:not(.datama-input-light) {
  width: 4.75rem;
  min-width: 4.75rem;
  max-width: 5.5rem;
}

/* Date inputs should have pointer cursor and match text-input chrome */
.datama-input[type=date],
.datama-input[type=datetime-local] {
  cursor: pointer !important;
  font-family: var(--input-font-family, var(--font-family));
  font-weight: var(--input-value-font-weight, 600);
  -webkit-appearance: none;
  appearance: none;
}

textarea.datama-input {
  display: block;
  width: 100%;
  min-width: 200px;
  max-width: 350px;
  min-height: calc(var(--input-min-height) * 3);
  height: auto;
  resize: vertical;
  cursor: text !important;
}

/* Boxed date/datetime: same outer box as text inputs and custom selects */
.datama-input[type=date]:not(.datama-input-light),
.datama-input[type=datetime-local]:not(.datama-input-light) {
  height: var(--input-min-height);
  min-height: var(--input-min-height);
  line-height: var(--input-line-height);
  padding-block: var(--input-padding-y);
  padding-inline: var(--input-padding-inline);
}

.datama-input[type=color] {
  min-width: unset;
  width: var(--input-color-swatch-size, 1rem);
  height: var(--input-color-swatch-size, 1rem);
  min-height: var(--input-color-swatch-size, 1rem) !important;
  max-width: unset;
  padding: 0;
  cursor: pointer !important;
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: calc(var(--input-chrome-radius, 6px) / 2);
  transform-origin: center;
  box-sizing: border-box;
  margin: 0;
}

.datama-input[type=color]:hover:not(:disabled) {
  border-color: var(--input-hover-border-color);
  box-shadow: var(--input-hover-shadow);
  transform: none;
}

.datama-input[type=range] {
  cursor: pointer !important;
}

/* Number input avec spinners natifs - pas de règles spéciales nécessaires */
/* Number input with unit support */
.datama-input-container.datama-input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.datama-input-container.datama-input-with-unit .datama-input[type=number] {
  /* Compact: a few digits + unit suffix (e.g. "40 %"), not select-width. */
  padding-right: 1.75rem;
  width: 4.75rem;
  min-width: 4.75rem;
  max-width: 5.5rem;
}

.datama-input-unit {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--icon-chrome-color);
  pointer-events: none;
  z-index: 1;
  background: transparent;
  padding: 0;
  font-weight: 500;
}

/* Style pour les spinners WebKit (Chrome/Safari) - visibles uniquement au hover */
.datama-input[type=number]::-webkit-outer-spin-button,
.datama-input[type=number]::-webkit-inner-spin-button {
  opacity: 0;
  height: 20px;
  width: 16px;
  cursor: pointer;
  background: rgba(var(--color-dark-rgb), 0.1);
  border-radius: 3px;
  margin: 1px;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input[type=number]:hover::-webkit-outer-spin-button,
.datama-input[type=number]:hover::-webkit-inner-spin-button {
  opacity: 1;
}

.datama-input[type=number]:hover::-webkit-inner-spin-button:hover,
.datama-input[type=number]:hover::-webkit-outer-spin-button:hover {
  background: rgba(var(--datama-primary-rgb), 0.15);
}

/* Select inputs should have pointer cursor */
.datama-input-select {
  cursor: pointer !important;
}

/* Only clickable elements in select dropdown should have pointer cursor */
.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option,
.datama-input-select-dropdown > .datama-input-select-actions .datama-input-select-action-btn,
.datama-input-select-dropdown .datama-input-select-search-clear {
  cursor: pointer !important;
}

/* Search input should have text cursor */
.datama-input-select-dropdown .datama-input-select-search input {
  cursor: text !important;
}

/* Non-clickable elements in select dropdown should have default cursor */
.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-label,
.datama-input-select-dropdown .datama-input-select-message {
  cursor: default !important;
}

/* Special inputs should have pointer cursor */
.datama-input-radio,
.datama-input-checkbox,
.datama-input-radio-weighted,
.datama-input-checkbox-weighted,
.datama-input-radio *,
.datama-input-checkbox *,
.datama-input-radio-weighted *,
.datama-input-checkbox-weighted * {
  cursor: pointer !important;
}

/* Switch moderne - style Linear */
.datama-input.datama-input-switch {
  cursor: pointer;
  height: 20px !important;
  width: 44px !important;
  min-height: 20px !important;
  min-width: 44px !important;
  max-width: 35px !important;
  position: relative;
  background: rgba(var(--color-dark-rgb), 0.15);
  border: 1px solid rgba(var(--color-dark-rgb), 0.1);
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

.datama-input.datama-input-switch::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-white);
  transform: translateY(-50%);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.1), 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.06);
}

.datama-input.datama-input-switch[data-value=true] {
  background: var(--datama-primary);
  border-color: var(--datama-primary);
  box-shadow: inset 0 1px 2px 0 rgba(var(--datama-primary-rgb), 0.1);
}

.datama-input.datama-input-switch[data-value=true]::before {
  left: calc(100% - 17px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-white);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.15), 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.1);
}

.datama-input.datama-input-switch.datama-input-switch-dense {
  height: 14px !important;
  width: 28px !important;
  min-height: 14px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  margin: 0 !important;
  border-radius: 7px;
}

.datama-input.datama-input-switch.datama-input-switch-dense::before {
  width: 10px;
  height: 10px;
  left: 2px;
}

.datama-input.datama-input-switch.datama-input-switch-dense[data-value=true]::before {
  left: calc(100% - 12px);
}

.datama-input.datama-input-switch.datama-input-switch-dense:hover:not(.datama-input-disabled) {
  transform: none;
  box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

.datama-input.datama-input-switch.datama-input-switch-dense[data-value=true]:hover:not(.datama-input-disabled) {
  box-shadow: inset 0 1px 2px 0 rgba(var(--datama-primary-rgb), 0.1);
}

.datama-input.datama-input-switch:hover:not(.datama-input-disabled) {
  transform: scale(1.02);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05), 0 4px 8px 0 rgba(var(--color-dark-rgb), 0.08);
}

.datama-input.datama-input-switch:hover:not(.datama-input-disabled):not([data-value=true]) {
  background: rgba(var(--color-dark-rgb), 0.3);
}

.datama-input.datama-input-switch:hover:not(.datama-input-disabled)[data-value=true] {
  background: rgba(var(--datama-primary-rgb), 0.8);
}

/* Styles pour les range inputs */
.datama-input[type=range] {
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}

/* Container for range with track fill effect */
.datama-input-container.range-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.datama-input-container.range-container .range-slider {
  flex: 1;
  position: relative;
}

.datama-input-container.range-container .range-value-input {
  width: 80px;
  min-width: 80px;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 6px;
  font-size: 0.75rem;
  text-align: center;
  background: var(--color-white);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: text !important;
  font-weight: 400;
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
  min-height: 33px;
  line-height: 1.25rem;
}

.datama-input-container.range-container .range-value-input:focus {
  outline: none;
  border-color: var(--datama-primary);
  box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.08), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-container.range-container .range-value-input:hover {
  border-color: rgba(var(--color-dark-rgb), 0.12);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-container.range-container .range-slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 8px;
  background: linear-gradient(to right, var(--datama-primary) 0%, var(--datama-primary) var(--range-fill, 50%), rgba(var(--color-dark-rgb), 0.1) var(--range-fill, 50%), rgba(var(--color-dark-rgb), 0.1) 100%);
  border-radius: 4px;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 1;
}

.datama-input[type=range]::-webkit-slider-track {
  width: 100%;
  height: 8px;
  background: transparent;
  border-radius: 4px;
  border: none;
}

.datama-input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--datama-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
  margin-top: -4px;
  position: relative;
  z-index: 2;
  transition: all var(--transition-out);
}

.datama-input[type=range]::-webkit-slider-thumb:hover {
  background: rgba(var(--datama-primary-rgb), 0.9);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.4);
  transition: all var(--transition-in);
}

.datama-input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: rgba(var(--color-dark-rgb), 0.1);
  border-radius: 4px;
  border: none;
}

.datama-input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--datama-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
  transition: all var(--transition-out);
}

.datama-input[type=range]::-moz-range-thumb:hover {
  background: rgba(var(--datama-primary-rgb), 0.9);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.4);
  transition: all var(--transition-in);
}

.datama-input[type=range]:focus {
  outline: none;
}

.datama-input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.25), 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
}

.datama-input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.25), 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
}

.datama-input[type=date]::-webkit-calendar-picker-indicator,
.datama-input[type=datetime-local]::-webkit-calendar-picker-indicator {
  margin-left: -30px;
  margin-right: 10px;
  cursor: pointer;
}

.datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-light):hover:not(:focus):not(:disabled) {
  background: var(--input-hover-bg);
  transition: var(--transition-in);
}

.datama-input-select:not(.datama-input-select-light):not(.datama-input-emoji-picker) {
  cursor: pointer;
  box-sizing: border-box;
  padding-block: var(--input-padding-y);
  padding-inline-start: var(--input-padding-inline);
  padding-inline-end: var(--input-select-padding-inline-end);
  display: inline-flex;
  align-items: center;
  height: var(--input-min-height);
  min-height: var(--input-min-height);
  max-width: 400px;
  background: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-chrome-radius, 6px);
  font-size: var(--input-font-size);
  font-family: var(--input-font-family, var(--font-family));
  line-height: var(--input-line-height);
  font-weight: var(--input-value-font-weight, 600);
  box-shadow: var(--input-shadow);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-select:hover:not(.disabled):not(.datama-input-select-light) {
  border-color: var(--input-hover-border-color);
  background: var(--input-hover-bg);
  box-shadow: var(--input-hover-shadow);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-select:not(.datama-input-select-light):focus-within,
.datama-input-select:not(.datama-input-select-light).datama-input-select-open {
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  background: var(--input-bg);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-select:focus-visible {
  outline: none;
}

.datama-input:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select):focus-visible {
  outline: none;
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
}

.datama-input-select.datama-input-select-light {
  border: none !important;
  background: transparent;
  font-size: initial;
  min-width: unset;
  padding: 0 1.5rem 0 0;
  min-height: auto;
  box-shadow: none !important;
}

.datama-input-select.datama-input-select-light > .datama-input-select-value {
  align-items: center;
  height: 100%;
  display: flex;
  font-weight: 600;
}

.datama-input-select.datama-input-select-light.primary > .datama-input-select-value {
  color: var(--datama-primary);
}

.datama-input-select.datama-input-select-light:hover {
  background: rgba(var(--datama-primary-rgb), 0.05);
  border-radius: 4px;
}

/* Custom SVG caret (Studio selects) — aligned with Datama menu chevrons */
.datama-input-select-caret {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  pointer-events: none;
  color: var(--caret-color);
  transform: translateY(-50%);
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-select-caret svg,
.datama-input-select-caret path {
  width: 14px;
  height: 14px;
  display: block;
}

.datama-input-select:hover:not(.disabled) .datama-input-select-caret {
  color: var(--caret-color-hover);
}

.datama-input-select.datama-input-select-open .datama-input-select-caret {
  transform: translateY(-50%) rotate(180deg);
  color: var(--caret-color-open);
}

.datama-input-select::after {
  display: none;
}

.datama-input-select-dropdown {
  display: inline-block;
  position: absolute;
  width: max-content;
  min-width: 100%;
  top: calc(100% + 6px);
  left: 0;
  visibility: hidden;
  z-index: -1;
  opacity: 0;
  height: 0;
  overflow-y: auto;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.4;
  font-size: 0.75rem;
  font-family: var(--font-family);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(var(--color-dark-rgb), 0.05), 0 10px 15px -3px rgba(var(--color-dark-rgb), 0.08), 0 0 0 1px rgba(var(--color-dark-rgb), 0.06);
}

/* Smart positioning: prefer bottom, fallback to top when near viewport edge */
.datama-input-select-dropdown {
  /* Default: open downward and to the left */
  top: calc(100% + 6px);
  bottom: auto;
  left: 0;
  right: auto;
}

/* When dropdown would go off-screen at bottom, open upward */
.datama-input-select > .datama-input-select-dropdown.dropdown-upward {
  top: auto;
  bottom: calc(100% + 6px);
  margin-bottom: 6px;
  margin-top: 0;
}

/* When dropdown would go off-screen on the right, align to the right */
.datama-input-select > .datama-input-select-dropdown.dropdown-right-aligned {
  left: auto;
  right: 0;
}

/* When dropdown would go off-screen on both sides, center it */
.datama-input-select > .datama-input-select-dropdown.dropdown-centered {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Ensure upward positioning works when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-upward {
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
}

/* Ensure right-aligned positioning works when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-right-aligned {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* Ensure centered positioning works when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-centered {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Dropdown positioning classes */
.datama-input-select > .datama-input-select-dropdown.dropdown-right {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  position: absolute !important;
}

.datama-input-select > .datama-input-select-dropdown.dropdown-left {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  position: absolute !important;
}

.datama-input-select > .datama-input-select-dropdown.dropdown-left-side {
  left: auto !important;
  right: 100% !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-right: 4px !important;
}

.datama-input-select > .datama-input-select-dropdown.dropdown-right-side {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-left: 4px !important;
}

.datama-input-select-open > .datama-input-select-dropdown {
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  height: unset;
  max-height: 280px;
  min-height: 60px;
  visibility: visible;
  opacity: 1;
  z-index: 1500; /* Increased to appear above all panels and other elements */
  background: var(--color-white);
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
}

/* Ensure positioning classes work when dropdown is open */
.datama-input-select-open > .datama-input-select-dropdown.dropdown-right {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  position: absolute !important;
}

.datama-input-select-open > .datama-input-select-dropdown.dropdown-left {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  position: absolute !important;
}

.datama-input-select-open > .datama-input-select-dropdown.dropdown-left-side {
  left: auto !important;
  right: 100% !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-right: 4px !important;
}

.datama-input-select-open > .datama-input-select-dropdown.dropdown-right-side {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-left: 4px !important;
}

.datama-input-select > .datama-input-select-value {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  line-height: var(--input-line-height);
}

.datama-input-select-icon {
  width: 30px;
  height: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: var(--icon-chrome-color);
}

.datama-input-select-icon > svg,
.datama-input-select-icon .datama-icon,
.datama-input-select-icon .datama-icon path {
  fill: var(--icon-chrome-color);
  color: var(--icon-chrome-color);
}

.datama-input-select-icon > svg {
  margin: auto 0;
}

.datama-input-select-value-text,
.datama-input-select-option-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.datama-input-select-value-text {
  font-weight: var(--input-value-font-weight, 600);
}

.datama-input-select.datama-input-select-light > .datama-input-select-value {
  font-weight: var(--input-value-font-weight, 600);
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-label {
  font-style: italic;
  font-size: 0.9rem;
  padding: 3px 10px;
  order: 3;
  color: var(--text-structure);
  font-weight: 600;
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option {
  cursor: pointer !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem 2.5rem 0.5rem 0.875rem;
  position: relative;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.03);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 40px;
  display: flex;
  align-items: center;
  order: 3; /* Ensure options appear after search and messages */
  font-weight: 400;
  border-radius: 4px;
  margin: 2px 4px;
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option:hover {
  background: rgba(var(--datama-primary-rgb), 0.06);
  color: var(--datama-primary);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: transparent;
}

/* Full custom color hover (text + background) - default behavior */
.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 5%, transparent);
  color: var(--custom-color);
}

/* Bar-only custom color hover (no text/background change) */
.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.05);
  color: var(--datama-primary);
}

/* Override for bar-only mode - higher specificity */
.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option.custom-color-no-hover-text:hover:has(.figure.custom-color) {
  background: rgba(var(--datama-primary-rgb), 0.05) !important;
  color: var(--datama-primary) !important;
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option.has-custom-color.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.05) !important;
  color: var(--datama-primary) !important;
}

/* Fallback for older browser support - full color hover only */
.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option.custom-color-hover-text:hover:has(.figure.custom-color) {
  background: color-mix(in srgb, var(--custom-color) 5%, transparent);
  color: var(--custom-color);
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option.has-custom-color.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 5%, transparent);
  color: var(--custom-color);
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option:last-child {
  border-bottom: none;
  margin-bottom: 4px;
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option[data-selected=selected] {
  background: rgba(var(--datama-primary-rgb), 0.1);
  color: var(--datama-primary);
  font-weight: 500;
}

.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option[data-selected=selected]::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--datama-primary);
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
  animation: checkmark-appear-select 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkmark-appear-select {
  0% {
    transform: translateY(-50%) rotate(45deg) scale(0);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) rotate(45deg) scale(1);
    opacity: 1;
  }
}
.datama-input-select-dropdown .datama-input-select-group .datama-input-select-group-option[data-warning]::after {
  content: "⚠";
  font-size: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  right: unset;
}

/* États disabled et read-only améliorés */
.datama-input.datama-input-disabled:not([type=color]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group),
.datama-input-select.disabled,
.datama-input:disabled:not([type=color]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group) {
  cursor: not-allowed !important;
  opacity: 0.6;
  background: rgba(var(--color-dark-rgb), 0.05);
  border-color: rgba(var(--color-dark-rgb), 0.1);
  color: rgba(var(--color-dark-rgb), 0.6);
}

/* Read-only styles - exclude special inputs */
.datama-input.datama-input-read-only:not([type=color]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group),
.datama-input:read-only:not([type=color]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group) {
  cursor: default !important;
  background: rgba(var(--color-dark-rgb), 0.02);
  border-color: rgba(var(--color-dark-rgb), 0.15);
}

.datama-input.datama-input-disabled:hover:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select),
.datama-input-select.disabled:hover,
.datama-input:disabled:hover:not(.datama-input-button-group):not(.datama-input-switch):not(.datama-input-select),
.datama-input.datama-input-read-only:hover:not([type=color]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group),
.datama-input:read-only:hover:not([type=color]):not(.datama-input-switch):not(.datama-input-select):not(.datama-input-button-group) {
  border-color: rgba(var(--color-dark-rgb), 0.1);
  box-shadow: none;
}

/* Special disabled styles for color picker and switch */
.datama-input[type=color].datama-input-disabled,
.datama-input[type=color]:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.datama-input.datama-input-switch.datama-input-disabled,
.datama-input.datama-input-switch:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* Special disabled styles for select inputs */
.datama-input-select.datama-input-disabled,
.datama-input-select:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option {
  padding: 0 10px 0 22px;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option[data-selected=selected]::after {
  left: 8px;
  right: unset;
  transform: translateY(-50%) rotate(45deg);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option {
  display: flex;
  flex-wrap: nowrap;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .text-container {
  flex: 1;
  min-width: 0;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .text-container > .detail {
  font-size: 0.7rem;
  line-height: 0.5rem;
  padding-bottom: 2px;
  transition: 0.1s ease-out;
  opacity: 0;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure {
  min-width: 100px;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  padding-left: 10px;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure > .bar {
  margin: 0.4rem 0;
  height: 0.4rem;
  border-radius: 0.2rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(var(--datama-primary-rgb), 0.8);
  min-width: 0.3rem;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option.steps > .figure > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 0.8);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure.variant > .bar {
  background-color: rgba(var(--color-secondary-rgb), 0.8);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure.warning > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 0.8);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure.custom-color > .bar {
  background-color: var(--custom-color);
  opacity: 0.8;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option:hover > .figure > .bar {
  margin: 0.3rem 0;
  height: 0.6rem;
  border-radius: 0.3rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(var(--datama-primary-rgb), 1);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option:hover > .figure.variant > .bar {
  background-color: rgba(var(--color-secondary-rgb), 1);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option:hover > .figure.warning > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 1);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option.steps:hover > .figure > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 1);
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option:hover > .figure.custom-color > .bar {
  background-color: var(--custom-color);
  opacity: 1;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure > .text-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem; /* Add space between label text and value */
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure > .text-container > .value {
  font-size: 0.7rem;
  line-height: 0.5rem;
  display: inline-block;
  opacity: 0;
  transition: 0.1s ease-out;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option > .figure > .text-container > .value {
  width: 100%;
  text-align: right;
  font-weight: 600;
}

.datama-input.datama-input-select-weighted:hover .datama-input-select-group-option[data-selected=selected] > .figure > .text-container > .label,
.datama-input.datama-input-select-weighted:hover .datama-input-select-group-option[data-selected=selected] > .figure > .text-container > .value,
.datama-input.datama-input-select-weighted:hover .datama-input-select-group-option[data-selected=selected] > .text-container > .detail,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown.datama-input-select-anchor-hovered .datama-input-select-group-option[data-selected=selected] > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown.datama-input-select-anchor-hovered .datama-input-select-group-option[data-selected=selected] > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown.datama-input-select-anchor-hovered .datama-input-select-group-option[data-selected=selected] > .text-container > .detail {
  transition: 0.1s ease-out;
  opacity: 0;
}

.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:not(:hover) .datama-input-select-group-option[data-selected=selected] > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option:hover > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:hover .datama-input-select-group-option:hover[data-selected=selected] > .figure > .text-container > .label,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:not(:hover) .datama-input-select-group-option[data-selected=selected] > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option:hover > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:hover .datama-input-select-group-option:hover[data-selected=selected] > .figure > .text-container > .value,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:not(:hover) .datama-input-select-group-option[data-selected=selected] > .text-container > .detail,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group .datama-input-select-group-option:hover > .text-container > .detail,
.datama-input-select-dropdown.datama-input-select-weighted-dropdown .datama-input-select-group:hover .datama-input-select-group-option:hover[data-selected=selected] > .text-container > .detail {
  opacity: 1;
  transition: 0.1s ease-in;
}

/* === RADIO BUTTONS ET CHECKBOXES === */
.datama-input-radio-group,
.datama-input-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.datama-input-radio,
.datama-input-checkbox,
.datama-input-radio-weighted,
.datama-input-checkbox-weighted {
  display: flex;
  align-items: center;
  gap: var(--studio-space-2, 10px);
  padding: var(--input-padding-y) var(--input-padding-x);
  border-radius: var(--input-chrome-radius, 6px);
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border: var(--input-border);
  min-height: var(--input-min-height);
  background: var(--input-bg);
  box-shadow: var(--input-shadow);
}

.datama-input-radio:hover,
.datama-input-checkbox:hover,
.datama-input-radio-weighted:hover,
.datama-input-checkbox-weighted:hover {
  background: rgba(var(--datama-primary-rgb), 0.02);
  border-color: rgba(var(--datama-primary-rgb), 0.12);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-1px);
}

/* Style personnalisé pour les radio buttons et checkboxes - style Linear */
.datama-input-radio input[type=radio],
.datama-input-checkbox input[type=checkbox],
.datama-input-radio-weighted input[type=radio],
.datama-input-checkbox-weighted input[type=checkbox] {
  width: var(--input-choice-size, 18px);
  height: var(--input-choice-size, 18px);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid rgba(var(--color-dark-rgb), 0.2);
  background: var(--color-white);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

/* Radio buttons - circular */
.datama-input-radio input[type=radio],
.datama-input-radio-weighted input[type=radio] {
  border-radius: 50%;
}

/* Checkboxes - rounded square */
.datama-input-checkbox input[type=checkbox],
.datama-input-checkbox-weighted input[type=checkbox] {
  border-radius: 4px;
}

/* Hover states */
.datama-input-radio input[type=radio]:hover,
.datama-input-checkbox input[type=checkbox]:hover,
.datama-input-radio-weighted input[type=radio]:hover,
.datama-input-checkbox-weighted input[type=checkbox]:hover {
  border-color: var(--datama-primary);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.1);
}

/* Checked states */
.datama-input-radio input[type=radio]:checked,
.datama-input-checkbox input[type=checkbox]:checked,
.datama-input-radio-weighted input[type=radio]:checked,
.datama-input-checkbox-weighted input[type=checkbox]:checked {
  background: var(--datama-primary);
  border-color: var(--datama-primary);
  box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.3);
}

/* Radio dot */
.datama-input-radio input[type=radio]:checked::after,
.datama-input-radio-weighted input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-white);
  transform: translate(-50%, -50%);
}

/* Checkbox checkmark - modern SVG-like design */
.datama-input-checkbox input[type=checkbox]:checked::after,
.datama-input-checkbox-weighted input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 8px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  animation: checkmark-appear-checkbox 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkmark-appear-checkbox {
  0% {
    transform: translate(-50%, -60%) rotate(45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -60%) rotate(45deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
    opacity: 1;
  }
}
@keyframes checkmark-appear {
  0% {
    transform: translateY(-50%) rotate(45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) rotate(45deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(45deg) scale(1);
    opacity: 1;
  }
}
.datama-input-radio label,
.datama-input-checkbox label {
  cursor: pointer;
  font-weight: 500;
  color: var(--color-dark);
  flex: 1;
}

/* Weighted variants avec figure */
.datama-input-radio-weighted,
.datama-input-checkbox-weighted {
  align-items: flex-start;
  flex-wrap: wrap;
}

.datama-input-radio-weighted .text-container,
.datama-input-checkbox-weighted .text-container {
  flex: 1;
  min-width: 0;
}

.datama-input-radio-weighted .text-container .text,
.datama-input-checkbox-weighted .text-container .text {
  font-weight: 500;
  color: var(--color-dark);
  display: block;
  margin-bottom: 0.25rem;
}

.datama-input-radio-weighted .text-container .detail,
.datama-input-checkbox-weighted .text-container .detail {
  font-size: 0.75rem;
  color: rgba(var(--color-dark-rgb), 0.7);
  opacity: 0.8;
}

.datama-input-radio-weighted .figure,
.datama-input-checkbox-weighted .figure {
  min-width: 100px;
  margin-left: auto;
  text-align: right;
}

.datama-input-radio-weighted .figure .datama-label,
.datama-input-checkbox-weighted .figure .datama-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  opacity: 0.8;
  gap: 0.5rem; /* Add space between label text and value */
}

.datama-input-radio-weighted .figure .datama-label .value,
.datama-input-checkbox-weighted .figure .datama-label .value {
  font-weight: 600;
  color: var(--datama-primary);
}

.datama-input-radio-weighted .figure .bar,
.datama-input-checkbox-weighted .figure .bar {
  height: 4px;
  background: rgba(var(--color-dark-rgb), 0.15);
  border-radius: 2px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-radio-weighted:hover .figure .bar,
.datama-input-checkbox-weighted:hover .figure .bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--color-dark-rgb), 0.25);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom color support for radio and checkbox weighted */
.datama-input-radio-weighted .figure.custom-color .bar,
.datama-input-checkbox-weighted .figure.custom-color .bar {
  background: var(--custom-color);
  opacity: 0.8;
}

.datama-input-radio-weighted:hover .figure.custom-color .bar,
.datama-input-checkbox-weighted:hover .figure.custom-color .bar {
  background: var(--custom-color);
  opacity: 1;
}

/* Full custom color hover (text + background) - default behavior */
.datama-input-radio-weighted.custom-color-hover-text:hover,
.datama-input-checkbox-weighted.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 3%, transparent);
  border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

/* Bar-only custom color hover (no text/background change) */
.datama-input-radio-weighted.custom-color-no-hover-text:hover,
.datama-input-checkbox-weighted.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.03);
  border-color: rgba(var(--datama-primary-rgb), 0.1);
}

/* Override for bar-only mode - higher specificity */
.datama-input-radio-weighted.custom-color-no-hover-text:hover:has(.figure.custom-color),
.datama-input-checkbox-weighted.custom-color-no-hover-text:hover:has(.figure.custom-color) {
  background: rgba(var(--datama-primary-rgb), 0.03) !important;
  border-color: rgba(var(--datama-primary-rgb), 0.1) !important;
}

.datama-input-radio-weighted.has-custom-color.custom-color-no-hover-text:hover,
.datama-input-checkbox-weighted.has-custom-color.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.03) !important;
  border-color: rgba(var(--datama-primary-rgb), 0.1) !important;
}

/* Fallback for older browser support - full color hover only */
.datama-input-radio-weighted.custom-color-hover-text:hover:has(.figure.custom-color),
.datama-input-checkbox-weighted.custom-color-hover-text:hover:has(.figure.custom-color) {
  background: color-mix(in srgb, var(--custom-color) 3%, transparent);
  border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

.datama-input-radio-weighted.has-custom-color.custom-color-hover-text:hover,
.datama-input-checkbox-weighted.has-custom-color.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 3%, transparent);
  border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

/* États disabled pour radio/checkbox */
.datama-input-radio.datama-input-disabled,
.datama-input-checkbox.datama-input-disabled,
.datama-input-radio-weighted.datama-input-disabled,
.datama-input-checkbox-weighted.datama-input-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.datama-input-radio.datama-input-disabled input,
.datama-input-checkbox.datama-input-disabled input,
.datama-input-radio-weighted.datama-input-disabled input,
.datama-input-checkbox-weighted.datama-input-disabled input {
  cursor: not-allowed;
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
  /* Tres style elouan mais il faudrait faire un vrai sujet la dessus car ce n'est pas fonctionnel */
  /*.datama-input {*/
  /*    background: rgba(var(--color-white-rgb), 0.05);*/
  /*    color: var(--color-white);*/
  /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
  /*}*/
  /*.datama-input:focus {*/
  /*    background: rgba(var(--color-white-rgb), 0.1);*/
  /*    box-shadow: 0 0 0 3px rgba(var(--datama-primary-light-rgb), 0.3);*/
  /*}*/
  /*.datama-input-select {*/
  /*    background: rgba(var(--color-white-rgb), 0.05);*/
  /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
  /*}*/
  /*.datama-input-select-open > .datama-input-select-dropdown {*/
  /*    background: var(--color-dark);*/
  /*    border-color: rgba(var(--datama-primary-light-rgb), 0.3);*/
  /*    box-shadow: var(--shadow-large);*/
  /*}*/
}
/* === FONCTIONNALITÉS AVANCÉES DES SELECTS === */
/* Search input in dropdown — outside the scrolling option list. */
.datama-input-select-search {
  position: relative;
  flex: 0 0 auto;
  background: var(--color-white);
  border-bottom: 2px solid rgba(var(--color-dark-rgb), 0.1);
  padding: 0.375rem;
  z-index: 1000;
}

.datama-input-select-options {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
}

.datama-input-select-search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  padding-right: 2rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.2);
  border-radius: calc(var(--border-radius) / 2);
  outline: none;
  font-size: 0.75rem;
  font-family: inherit;
  background: var(--color-white);
  transition: all var(--transition-out);
}

.datama-input-select-search input:focus {
  border-color: var(--datama-primary);
  box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.1);
  transition: all var(--transition-in);
}

.datama-input-select-search input::placeholder {
  color: rgba(var(--color-dark-rgb), 0.5);
  font-style: italic;
}

/* Clear search button */
.datama-input-select-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(var(--color-dark-rgb), 0.5);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer !important;
  padding: 0.25rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-out);
}

.datama-input-select-search-clear:hover {
  background: rgba(var(--color-dark-rgb), 0.1);
  color: rgba(var(--color-dark-rgb), 0.8);
  transition: all var(--transition-in);
}

.datama-input-select-search-clear:active {
  transform: translateY(-50%) scale(0.95);
}

/* Select All / Deselect All buttons */
.datama-input-select-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  border-top: 2px solid rgba(var(--color-dark-rgb), 0.1);
  padding: 0.5rem 0.75rem;
  display: flex;
  gap: 0.5rem;
  z-index: 1001;
  order: 4; /* Ensure actions appear at the bottom */
  margin-top: auto; /* Push to bottom */
}

.datama-input-select-action-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--datama-primary);
  background: transparent;
  color: var(--datama-primary);
  border-radius: calc(var(--border-radius) / 2);
  cursor: pointer !important;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all var(--transition-out);
  text-align: center;
}

.datama-input-select-action-btn:hover {
  background: var(--datama-primary);
  color: var(--color-white);
  transition: all var(--transition-in);
}

.datama-input-select-action-btn:active {
  transform: scale(0.98);
}

/* Messages d'état */
.datama-input-select-message {
  padding: 1rem;
  text-align: center;
  color: rgba(var(--color-dark-rgb), 0.6);
  font-style: italic;
  font-size: 0.75rem;
  order: 2; /* Ensure message appears after search */
  z-index: 1; /* Lower z-index than actions */
}

.datama-input-select-message.no-results {
  color: rgba(var(--color-dark-rgb), 0.8);
}

.datama-input-select-message.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.datama-input-select-message.loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--datama-primary-rgb), 0.3);
  border-top: 2px solid var(--datama-primary);
  border-radius: 50%;
  animation: datama-spin 1s linear infinite;
}

/* Options masquées par la recherche */
.datama-input-select-group-option.hidden {
  display: none !important;
}

/* Ensure proper order for select group */
.datama-input-select-dropdown .datama-input-select-group {
  order: 3; /* Ensure group appears after search and messages */
}

/* Animation de spinner */
@keyframes datama-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Highlight des termes de recherche */
.datama-search-highlight {
  background: rgba(var(--datama-primary-rgb), 0.2);
  color: var(--datama-primary);
  font-weight: 600;
  border-radius: 2px;
  padding: 0 2px;
}

/* Compteur de sélection pour les selects multiples - style Linear */
.datama-input-select-counter {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--datama-primary);
  color: var(--color-white);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  min-height: unset !important;
  line-height: 18px !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  z-index: 150;
  transform: scale(0);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 4px 0 rgba(var(--datama-primary-rgb), 0.3), 0 0 0 2px var(--color-white);
  /* Force perfect circle with explicit constraints */
  flex-shrink: 0;
  flex-grow: 0;
  aspect-ratio: 1/1;
  line-height: 1;
}

.datama-input-select-counter.visible {
  transform: scale(1);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Styles pour les options avec icônes */
.datama-input-select-group-option.with-icon {
  padding-left: 2.5rem;
}

.datama-input-select-group-option.with-icon::before {
  content: attr(data-icon);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

/* === STYLES POUR LES INPUTS TITLE SIZE (WATERFALL) === */
/* Masquer par défaut les inputs Title Size */
.datama-input-container[id*=-tab-font-size-of-title-container],
.datama-input-container[id*=-tab-font-size-of-plot-title-container] {
  display: none;
}

/* Alignement et espacement des inputs Title Size */
.datama-input-container[id*=-tab-font-size-of-title-container] .datama-input {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin-left: 15px;
}

/* Styles spécifiques pour Plot Title Size */
.datama-input-container[id*=-tab-font-size-of-plot-title-container] .datama-input {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin-left: 15px;
}

/* Responsive behavior for Title Size inputs - same as other inputs */
@media (max-width: 768px) {
  .datama-input-container[id*=-tab-font-size-of-title-container] .datama-input,
  .datama-input-container[id*=-tab-font-size-of-plot-title-container] .datama-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    flex: 1 1 auto;
  }
}
/* Refresh button in select dropdown */
.datama-input-select-refresh-btn {
  position: absolute;
  right: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin: 0 0.5rem;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1;
}

.datama-input-select-refresh-btn:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(var(--datama-primary-rgb), 0.08);
  height: 100%;
  border-radius: 4px;
}

.datama-input-select:has(.datama-input-select-refresh-btn) .datama-input-select-caret {
  right: 2rem;
}

/* Refresh button standalone */
.datama-input-refresh-button {
  display: inline-flex;
  align-items: center;
  background: var(--datama-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.datama-input-refresh-button:hover:not(:disabled) {
  background: var(--datama-primary-dark);
  transform: scale(1.02);
}

.datama-input-refresh-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.datama-input-refresh-button .refresh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* === EMOJI PICKER INPUT === */
.datama-input.datama-input-select.datama-input-emoji-picker {
  /* Beat `.datama-input` (inline-block + padding) and `.datama-input-select` (caret gutter) */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  max-width: 1.75rem;
  padding: 0;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.datama-input.datama-input-select.datama-input-emoji-picker > .datama-input-emoji-picker-value {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1;
  overflow: visible;
  pointer-events: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.datama-input-emoji-picker > .datama-input-emoji-picker-value.datama-input-emoji-picker-empty {
  opacity: 0.35;
  filter: grayscale(1);
  font-size: 0.85rem;
}

.datama-input.datama-input-select.datama-input-emoji-picker::after,
.datama-input.datama-input-select.datama-input-emoji-picker .datama-input-select-caret {
  display: none;
}

.datama-input-emoji-picker > .datama-input-emoji-picker-dropdown {
  width: 264px;
}

.datama-input-select-open > .datama-input-emoji-picker-dropdown {
  max-height: 360px;
  display: flex;
  flex-direction: column;
}

.datama-input-emoji-picker-dropdown.datama-input-emoji-picker-searching .datama-input-emoji-picker-tabs {
  display: none;
}

.datama-input-emoji-picker-clear {
  cursor: pointer;
  font-size: 0.8rem;
  font-style: italic;
  padding: 0.375rem 0.875rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
  color: rgba(var(--color-dark-rgb), 0.7);
  text-align: left;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-emoji-picker-clear:hover {
  background: rgba(var(--datama-primary-rgb), 0.06);
  color: var(--datama-primary);
}

.datama-input-emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.datama-input-emoji-picker-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px 6px;
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
  overflow-x: auto;
  flex-shrink: 0;
  background: rgba(var(--color-dark-rgb), 0.02);
}

.datama-input-emoji-picker-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 5px 6px;
  border-radius: calc(var(--border-radius) / 2);
  opacity: 0.55;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.datama-input-emoji-picker-tab:hover {
  opacity: 0.85;
  background: rgba(var(--datama-primary-rgb), 0.08);
}

.datama-input-emoji-picker-tab.active {
  opacity: 1;
  background: rgba(var(--datama-primary-rgb), 0.12);
  box-shadow: inset 0 -2px 0 var(--datama-primary);
}

.datama-input-emoji-picker-option {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  padding: 5px 0;
  border-radius: calc(var(--border-radius) / 2);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-emoji-picker-option:hover {
  background: rgba(var(--datama-primary-rgb), 0.1);
  transform: scale(1.15);
}

.datama-input-emoji-picker-option[data-selected=selected] {
  background: rgba(var(--datama-primary-rgb), 0.15);
  box-shadow: inset 0 0 0 1px var(--datama-primary);
}

.datama-input-emoji-picker-no-result {
  grid-column: 1/-1;
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(var(--color-dark-rgb), 0.5);
  padding: 0.5rem;
  text-align: center;
}

/* Portaled select dropdown (mounted under div[data-app="true"] / .datama-light) */
div[data-app=true] .datama-input-select-dropdown {
  position: absolute;
  width: max-content;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  height: auto;
  overflow-y: auto;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.4;
  font-size: 0.75rem;
  font-family: var(--font-family);
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(var(--color-dark-rgb), 0.05), 0 10px 15px -3px rgba(var(--color-dark-rgb), 0.08), 0 0 0 1px rgba(var(--color-dark-rgb), 0.06);
  background: var(--color-white);
  color: var(--color-dark);
}

/*
 * Open state must not require a data-app ancestor: if the portal falls back to
 * document.body (detached trigger / host quirk), the dropdown still needs a
 * visible stacking level above panels (z-index 10) and dialogs (z-index 999).
 */
.datama-input-select-dropdown.datama-input-select-dropdown-open,
div[data-app=true] .datama-input-select-dropdown.datama-input-select-dropdown-open {
  height: unset;
  max-height: min(280px, 40vh);
  min-height: 60px;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: max-content;
  font-family: var(--font-family);
  background: var(--color-white);
  color: var(--color-dark);
}

/* Portaled emoji picker dropdown overrides */
div[data-app=true] .datama-input-emoji-picker-dropdown {
  width: 264px;
}

div[data-app=true] .datama-input-emoji-picker-dropdown.datama-input-select-dropdown-open {
  max-height: 360px;
}

/* === BUTTON GROUP === */
.datama-input.datama-input-button-group {
  min-width: unset;
  max-width: unset;
  min-height: unset;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.datama-input.datama-input-button-group:hover,
.datama-input.datama-input-button-group:focus,
.datama-input.datama-input-button-group.datama-input-read-only,
.datama-input.datama-input-button-group.datama-input-disabled {
  background: transparent;
  border: none;
  box-shadow: none;
}

.datama-input-button-group {
  display: inline-flex;
  align-items: center;
  /* Segmented active: mint track fill + dark teal glyph (see brand tokens). */
  --datama-button-group-active-bg: rgba(var(--datama-primary-light-rgb), 0.22);
  --datama-button-group-active-bg-hover: rgba(var(--datama-primary-light-rgb), 0.3);
  --datama-button-group-active-fg: var(--datama-primary);
  --datama-button-group-inactive-fg: rgba(var(--color-dark-rgb), 0.52);
}

.datama-input-button-group-buttons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.datama-input-button-group .datama-button {
  min-height: 30px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.datama-input-button-group .datama-button:hover,
.datama-input-button-group .datama-button:focus,
.datama-input-button-group .datama-button.active,
.datama-input-button-group .datama-button.active:hover {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.datama-input-button-group .datama-button.active {
  background-color: var(--datama-button-group-active-bg) !important;
  color: var(--datama-button-group-active-fg) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.datama-input-button-group .datama-button.active .datama-icon,
.datama-input-button-group .datama-button.active .datama-icon path,
.datama-input-button-group .datama-button.active .datama-button-icon svg,
.datama-input-button-group .datama-button.active .datama-button-icon svg path,
.datama-input-button-group .datama-button.active path {
  color: var(--datama-button-group-active-fg) !important;
  fill: var(--datama-button-group-active-fg) !important;
}

.datama-input-button-group .datama-button.active:hover {
  background-color: var(--datama-button-group-active-bg-hover) !important;
  color: var(--datama-button-group-active-fg) !important;
  transform: scale(1.02);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-button-group .datama-button:focus-visible {
  box-shadow: var(--focus-ring) !important;
}

.datama-input-button-group .datama-button:not(.active):hover {
  background-color: rgba(var(--color-dark-rgb), 0.04) !important;
  transform: translateY(-1px);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-input-button-group.datama-input-disabled,
.datama-input-button-group.datama-input-read-only {
  pointer-events: none;
  opacity: 0.6;
}

.datama-input-button-group-segmented .datama-input-button-group-buttons {
  align-items: center;
  gap: 14px;
}

.datama-input-button-group-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
}

/* Multi-button subgroups: light gray toggle track + static active fill on buttons.
 * A sliding indicator used to paint under .active and leaked a green halo (esp. single select). */
.datama-input-button-group-segment-toggle {
  position: relative;
}

.datama-input-button-group-segment-indicator {
  display: none !important;
}

.datama-input-button-group-segment:has(.datama-button + .datama-button) {
  background-color: rgba(var(--color-dark-rgb), 0.06);
  border-radius: 12px;
  padding: 0;
  gap: 0;
  align-items: stretch;
  min-height: 30px;
  height: 30px;
  overflow: hidden;
}

.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button {
  flex: 1 1 0;
  min-width: 30px;
  width: auto;
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  transform: none !important;
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: var(--datama-button-group-inactive-fg);
}

/* Single and multi selection share the same static fill (no second-layer indicator). */
.datama-input-button-group-segment-toggle .datama-button.active,
.datama-input-button-group-segment-toggle .datama-button.active:hover,
.datama-input-button-group-segment-toggle .datama-button.datama-input-button-group-segment-selected {
  background-color: var(--datama-button-group-active-bg) !important;
  color: var(--datama-button-group-active-fg) !important;
  border-radius: 12px !important;
  transform: none !important;
}

.datama-input-button-group-segment-toggle .datama-button.active .datama-icon,
.datama-input-button-group-segment-toggle .datama-button.active .datama-icon path,
.datama-input-button-group-segment-toggle .datama-button.datama-input-button-group-segment-selected .datama-icon,
.datama-input-button-group-segment-toggle .datama-button.datama-input-button-group-segment-selected .datama-icon path,
.datama-input-button-group-segment-toggle .datama-button.active .datama-button-icon svg,
.datama-input-button-group-segment-toggle .datama-button.active .datama-button-icon svg path,
.datama-input-button-group-segment-toggle .datama-button.datama-input-button-group-segment-selected .datama-button-icon svg,
.datama-input-button-group-segment-toggle .datama-button.datama-input-button-group-segment-selected .datama-button-icon svg path,
.datama-input-button-group-segment-toggle .datama-button.active path,
.datama-input-button-group-segment-toggle .datama-button.datama-input-button-group-segment-selected path {
  color: var(--datama-button-group-active-fg) !important;
  fill: var(--datama-button-group-active-fg) !important;
}

.datama-input-button-group-segment-toggle .datama-button.active:hover,
.datama-input-button-group-segment-toggle .datama-button.datama-input-button-group-segment-selected:hover {
  background-color: var(--datama-button-group-active-bg-hover) !important;
}

.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):not(:hover) {
  background: transparent !important;
  color: var(--datama-button-group-inactive-fg);
}

.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):not(:hover) .datama-button-icon svg,
.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):not(:hover) .datama-button-icon svg path,
.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):not(:hover) path {
  color: var(--datama-button-group-inactive-fg) !important;
  fill: var(--datama-button-group-inactive-fg) !important;
}

.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):hover {
  background-color: rgba(var(--color-dark-rgb), 0.05) !important;
  color: rgba(var(--color-dark-rgb), 0.72);
  transform: none !important;
}

.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):hover .datama-button-icon svg,
.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):hover .datama-button-icon svg path,
.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):hover path {
  color: rgba(var(--color-dark-rgb), 0.72) !important;
  fill: rgba(var(--color-dark-rgb), 0.72) !important;
}

.datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:focus-visible {
  box-shadow: var(--focus-ring) !important;
  z-index: 2;
}

/*
 * DATAMA SAS
 * Studio form layout: domain panel, fieldset subtitles, simple vs custom fields.
 */
.datama-form {
  font-family: var(--studio-form-font-family, var(--font-family));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--studio-form-field-gap, var(--studio-space-2, 10px));
  width: 100%;
  min-width: 0;
}

.datama-form__body {
  display: flex;
  flex-direction: column;
  gap: var(--studio-form-field-gap, var(--studio-space-2, 10px));
  min-width: 0;
}

.datama-form__field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--studio-space-1, 5px);
  min-width: 0;
}

.datama-form__custom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: var(--studio-form-field-gap, var(--studio-space-2, 10px));
}

.datama-form__create {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: var(--studio-form-create-gap, var(--studio-space-2, 10px));
}

.datama-form__pro-tip,
.datama-input-pro-tip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

.datama-form__pro-tip:empty,
.datama-input-pro-tip:empty {
  display: none;
}

.datama-form .datama-input-container,
.datama-form__custom .datama-input-container,
.datama-comparison-form .datama-input-container,
.datama-filters-form .datama-input-container,
.datama-compare-inputs-form .datama-input-container {
  margin-bottom: 0;
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
}

.datama-form textarea.datama-input,
.datama-form textarea.datama-form__control {
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: calc(var(--input-min-height) * 3);
  padding-block: var(--input-padding-y);
  padding-inline: var(--input-padding-inline);
  background: var(--input-bg);
  color: var(--text-body);
  border: var(--input-border);
  border-radius: var(--input-chrome-radius, 6px);
  font-family: var(--input-font-family, var(--font-family));
  font-size: var(--input-font-size);
  line-height: 1.4;
  font-weight: var(--input-value-font-weight, 600);
  box-sizing: border-box;
  box-shadow: var(--input-shadow);
  resize: vertical;
}

.plotter-panel .datama-form__create,
.plotter-panel .datama-comparison-form-create {
  align-self: flex-start;
  margin-top: var(--studio-form-create-gap, var(--studio-space-2, 10px));
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __fieldset.css project project-deep-sky
 */
.datama-fieldset.datama-story-pinned {
  border-color: color-mix(in srgb, var(--datama-primary) 50%, rgba(var(--color-dark-rgb), 0.12));
  box-shadow: inset 3px 0 0 var(--datama-primary);
}

.datama-fieldset {
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 12px;
  padding: 0;
  margin: 0 0 2rem 0;
  background: var(--color-white);
  box-shadow: 0 2px 8px 0 rgba(var(--color-dark-rgb), 0.08);
  overflow: visible;
  position: relative;
  container-type: inline-size;
}

.datama-fieldset-wrapper {
  margin-bottom: 2rem;
}

.datama-fieldset-title-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.datama-fieldset-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-structure) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.datama-fieldset-legend-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.datama-fieldset-legend {
  font-size: var(--studio-form-legend-font-size, 0.85rem);
  font-weight: var(--studio-form-legend-font-weight, 600);
  color: var(--text-meta);
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
}

.datama-fieldset-container {
  padding: 1rem 1.75rem 1.25rem;
  gap: 0.25rem;
  display: flex;
  flex-direction: column;
}

.datama-fieldset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.25rem;
  align-items: center;
  min-height: var(--input-min-height);
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
}

.datama-fieldset-row.datama-form__custom,
.datama-fieldset-container > .datama-form__custom {
  display: flex;
  grid-column: 1/-1;
  width: 100%;
  min-height: 0;
  padding: 0;
  border-bottom: none;
}

.datama-fieldset-row:last-child {
  border-bottom: none;
}

.datama-fieldset-left {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  justify-content: center;
}

.datama-fieldset-label-container {
  display: flex;
  align-items: center;
  gap: var(--studio-space-1, 5px);
}

/* Label container hosting a wrapped help tooltip (see DataMaHelpTooltip) */
.datama-fieldset-label-container.datama-help-tooltip:hover {
  color: var(--datama-primary);
}

.datama-fieldset-label {
  font-size: var(--studio-form-label-font-size, 0.75rem);
  font-weight: var(--studio-form-label-font-weight, 500);
  color: var(--text-label);
  line-height: 1.4;
  margin: 0;
  cursor: help;
}

.datama-fieldset-description {
  font-size: 0.8125rem;
  color: rgba(var(--color-dark-rgb), 0.7);
  line-height: 1.4;
  max-width: 400px;
  margin-top: 0;
}

.datama-fieldset-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 8rem;
}

/* Help icon styling for fieldset — muted until interaction
 * Specificity must beat `div[data-app="true"] a { color: primary }` */
div[data-app=true] a.datama-fieldset-help-icon,
div[data-app=true] .datama-fieldset-help-icon,
.datama-fieldset-help-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--help-color);
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: help;
  flex-shrink: 0;
}

div[data-app=true] a.datama-fieldset-help-icon:hover,
div[data-app=true] .datama-fieldset-help-icon:hover,
.datama-fieldset-help-icon:hover {
  color: var(--help-color-hover);
}

div[data-app=true] a.datama-fieldset-help-icon:active,
div[data-app=true] .datama-fieldset-help-icon:active,
.datama-fieldset-help-icon:active {
  color: var(--help-color-active);
}

div[data-app=true] a.datama-fieldset-help-icon svg,
div[data-app=true] a.datama-fieldset-help-icon path,
div[data-app=true] .datama-fieldset-help-icon svg,
div[data-app=true] .datama-fieldset-help-icon path,
.datama-fieldset-help-icon svg,
.datama-fieldset-help-icon path {
  width: 14px;
  height: 14px;
  fill: currentColor;
  color: inherit;
}

/* Documentation affordance next to title/legend — muted icon, not a far-right button */
div[data-app=true] .datama-fieldset-title-container .datama-documentation,
div[data-app=true] .datama-fieldset-legend-container .datama-documentation,
.datama-fieldset-title-container .datama-documentation,
.datama-fieldset-legend-container .datama-documentation {
  flex-shrink: 0;
  margin-left: 0.25rem;
}

div[data-app=true] .datama-fieldset-title-container .datama-documentation svg,
div[data-app=true] .datama-fieldset-title-container .datama-documentation path,
div[data-app=true] .datama-fieldset-legend-container .datama-documentation svg,
div[data-app=true] .datama-fieldset-legend-container .datama-documentation path,
.datama-fieldset-title-container .datama-documentation svg,
.datama-fieldset-title-container .datama-documentation path,
.datama-fieldset-legend-container .datama-documentation svg,
.datama-fieldset-legend-container .datama-documentation path {
  width: 14px;
  height: 14px;
  fill: currentColor;
  color: inherit;
}

/* Responsive behavior - stack on small screens */
@media (max-width: 700px) {
  .datama-fieldset-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .datama-fieldset-right {
    justify-content: flex-start;
    min-width: unset;
  }
  .datama-fieldset-left {
    min-height: auto;
  }
  .datama-fieldset-description {
    max-width: unset;
  }
  .datama-fieldset-container {
    padding: 1rem;
    gap: 1rem;
  }
}
/* Stack only in very narrow nested containers. Settings rails (~250px content) must
 * keep label + control on one row; 400px matched almost every plotter fieldset. */
@container (max-width: 220px) {
  .datama-fieldset-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .datama-fieldset-right {
    justify-content: flex-start;
  }
  .datama-fieldset-right .datama-input,
  .datama-fieldset-right .datama-input-select {
    max-width: 300px;
  }
}
/* Special styling for inputs inside fieldset */
.datama-fieldset .datama-input-container {
  margin-bottom: 0;
  width: fit-content;
}

/* Override input container gap to be more compact in fieldset */
.datama-fieldset .datama-input-container {
  gap: 0.75rem;
}

/* Ensure labels inside fieldset inputs are not displayed (we use our own) */
.datama-fieldset .datama-input-label {
  display: none;
}

/* Fix number input units positioning in fieldsets */
.datama-fieldset .datama-input-with-unit {
  display: flex;
  align-items: center;
  position: relative;
}

.datama-fieldset .datama-input-with-unit input {
  flex: 1;
  margin-right: 0;
}

.datama-fieldset .datama-input-unit {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--icon-chrome-color);
  pointer-events: none;
  z-index: 1;
  background: transparent;
  padding: 0;
}

/* Style inputs inside fieldset to match select style */
.datama-fieldset input,
.datama-fieldset select,
.datama-fieldset .datama-input:not(.datama-input-switch):not(.datama-input-button-group):not(.datama-input-light):not(.datama-input-select) {
  background: var(--input-bg);
  border: var(--input-border);
  color: var(--text-body);
  border-radius: var(--input-chrome-radius, 6px);
  padding-block: var(--input-padding-y);
  padding-inline: var(--input-padding-inline);
  font-family: var(--input-font-family, var(--font-family));
  font-size: var(--input-font-size);
  line-height: var(--input-line-height);
  font-weight: var(--input-value-font-weight, 600);
  box-sizing: border-box;
  height: var(--input-min-height);
  min-height: var(--input-min-height);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--input-shadow);
}

.datama-fieldset .datama-input-select:not(.datama-input-select-light) {
  min-width: 8.5rem;
  max-width: 14rem;
}

.datama-fieldset input:focus,
.datama-fieldset select:focus {
  outline: none;
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring);
}

.datama-fieldset input::placeholder,
.datama-fieldset .datama-input::placeholder {
  color: var(--input-placeholder-color);
  font-weight: var(--input-placeholder-font-weight, 400);
}

/* Ensure dropdowns in fieldsets appear above other fieldsets */
.datama-fieldset .datama-input-select-open > .datama-input-select-dropdown {
  z-index: 1500 !important; /* Same high z-index as regular dropdowns */
  position: absolute;
}

/* Ensure select containers have proper positioning context */
.datama-fieldset .datama-select-container,
.datama-fieldset .datama-input-container {
  position: relative;
  width: auto;
}

/* Fieldsets containing open selects should have higher z-index */
.datama-fieldset:has(.datama-input-select-open) {
  z-index: 100;
  position: relative;
}

/* Inputs in fieldset should maintain their normal styles - no additional overrides needed */
/* Market Equation container with fieldset-like styling */
.datama-market-equation-container {
  overflow-x: visible;
  overflow-y: visible;
  position: relative;
  z-index: 10;
  min-width: 0;
}

/* Full width market equation that extends beyond container (dialog only) */
.datama-dialog .datama-market-equation-fullwidth {
  box-sizing: border-box;
  padding: 0;
  margin: 0 -30px;
  max-width: calc(100% + 40px);
}

/* Remove borders from the Market Equation table inside the container */
.datama-market-equation-container #container-center-market-equation-table,
.datama-market-equation-container [id*=market-equation-table] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Inline FieldSet Layout - flat style without cards */
.datama-fieldset-inline {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-top: 1rem;
}

.datama-fieldset-wrapper-inline + .datama-fieldset-wrapper-inline,
.datama-fieldset-wrapper:has(.datama-fieldset-inline) + .datama-fieldset-wrapper:has(.datama-fieldset-inline) {
  margin-top: 1rem;
}

/*
 * Inline legend divider: prefer explicit wrapper class so Tableau CEF
 * (and other hosts without reliable :has()) still get the layout.
 * Keep :has() as a progressive-enhancement fallback for older markup.
 */
.datama-fieldset-wrapper-inline .datama-fieldset-legend-container,
.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container {
  position: relative;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
}

.datama-fieldset-wrapper-inline .datama-fieldset-legend-container::after,
.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.5px;
  background: rgba(var(--color-dark-rgb), 0.08);
  z-index: 0;
}

.datama-fieldset-wrapper-inline .datama-fieldset-legend,
.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend {
  background: var(--color-white);
  padding: 0 0.25rem 0 0.75rem;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 0;
}

/* Keep help icon with the legend text (covers the divider line) */
.datama-fieldset-wrapper-inline .datama-fieldset-legend-container .datama-documentation,
.datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container .datama-documentation {
  position: relative;
  z-index: 1;
  margin-left: 0.15rem;
}

.datama-fieldset-inline .datama-fieldset-container {
  padding: 0.25rem 0.5rem 0.75rem 1.5rem;
  gap: 0.125rem;
}

.datama-fieldset-inline .datama-fieldset-row {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0.125rem;
  min-height: var(--input-min-height);
  padding: 0.875rem 0.25rem;
  box-shadow: none;
  container-type: inline-size;
}

/* Direct rows only — nested rows (e.g. What If KPI cards) must not inherit negative margins. */
.datama-dialog .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row:not(:last-child) {
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
  margin-top: 0;
}

.datama-dialog .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row:last-child {
  margin-bottom: 0;
  margin-top: 0;
}

/* Dark mode for inline fieldset */
/* Pinnable fields (pin as shortcut attribute) */
.datama-fieldset-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(var(--color-dark-rgb), 0.35);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-fieldset-pin:hover {
  color: var(--datama-primary);
}

.datama-fieldset-pin.active {
  color: var(--datama-primary);
}

.datama-fieldset-pin svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Settings preview sentence (clustering, What If scenarios, …) */
.datama-settings-summary,
.datama-whatif-summary {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--datama-primary);
  background: rgba(var(--color-dark-rgb), 0.03);
  color: rgba(var(--color-dark-rgb), 0.65);
  font-size: 12px;
  line-height: 18px;
  font-style: italic;
}

/* Nested fieldsets used as subsections inside Clustering (Discrete / Continuous) */
.datama-fieldset .datama-fieldset-wrapper-nested {
  width: 100%;
  margin: 0.5rem 0 0 0;
}

.datama-fieldset .datama-fieldset-nested {
  box-shadow: none;
  margin: 0;
  background: rgba(var(--color-dark-rgb), 0.02);
}

.datama-fieldset-row:has(.datama-dimensions-hierarchy) {
  grid-template-columns: 1fr;
}
.datama-fieldset-row:has(.datama-dimensions-hierarchy) .datama-fieldset-left,
.datama-fieldset-row:has(.datama-dimensions-hierarchy) .datama-fieldset-right {
  justify-content: flex-start;
}

.datama-dimensions-hierarchy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 280px;
  max-width: 420px;
  width: 100%;
}
.datama-dimensions-hierarchy-row {
  display: flex;
  align-items: stretch;
}
.datama-dimensions-hierarchy-guide {
  position: relative;
  flex: 0 0 20px;
}
.datama-dimensions-hierarchy-guide::before {
  content: "";
  position: absolute;
  top: -4px;
  bottom: 0;
  left: 9px;
  border-left: 1px solid rgba(var(--color-dark-rgb), 0.15);
}
.datama-dimensions-hierarchy-guide.elbow::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 9px;
  width: 10px;
  height: calc(50% + 4px);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.15);
  border-bottom-left-radius: 6px;
}
.datama-dimensions-hierarchy-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 8px;
  background: var(--color-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.datama-dimensions-hierarchy-card:hover {
  border-color: rgba(var(--datama-primary-rgb), 0.45);
  box-shadow: 0 1px 3px rgba(var(--color-dark-rgb), 0.08);
}
.datama-dimensions-hierarchy-row[data-pinned=true] .datama-dimensions-hierarchy-card {
  border-color: rgba(var(--datama-primary-rgb), 0.55);
  background: rgba(var(--datama-primary-rgb), 0.04);
}
.datama-dimensions-hierarchy-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-dark);
}
.datama-dimensions-hierarchy-row[data-pinned=true] .datama-dimensions-hierarchy-label {
  font-weight: 600;
}
.datama-dimensions-hierarchy-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
.datama-dimensions-hierarchy-card:hover .datama-dimensions-hierarchy-actions {
  opacity: 1;
}

.datama-button.datama-dimensions-hierarchy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(var(--color-dark-rgb), 0.65);
  cursor: pointer;
  box-shadow: none;
  transform: none;
}
.datama-button.datama-dimensions-hierarchy-button:hover {
  background: rgba(var(--color-dark-rgb), 0.06);
  color: var(--color-dark);
  transform: none;
  box-shadow: none;
}
.datama-button.datama-dimensions-hierarchy-button.disabled {
  opacity: 0.25;
  pointer-events: none;
}
.datama-button.datama-dimensions-hierarchy-button svg {
  display: block;
  flex-shrink: 0;
}
.datama-button.datama-dimensions-hierarchy-button > .datama-button-icon {
  height: auto;
  margin: 0;
}

.datama-button.datama-dimensions-hierarchy-pin {
  color: rgba(var(--color-dark-rgb), 0.55);
  opacity: 1;
}
.datama-button.datama-dimensions-hierarchy-pin svg,
.datama-button.datama-dimensions-hierarchy-pin path {
  fill: currentColor;
}
.datama-button.datama-dimensions-hierarchy-pin.active {
  color: var(--state-active-text);
  background: var(--state-active-bg);
  border-color: var(--state-active-border);
  opacity: 1;
}

.datama-dimensions-hierarchy-card:hover .datama-button.datama-dimensions-hierarchy-pin {
  color: var(--color-dark);
}

.datama-dimensions-hierarchy-add-select {
  display: none;
}

div[data-app=true] .datama-divider {
  display: inline-block;
}

div[data-app=true] .datama-divider:not(.vertical) {
  border-top: var(--border);
  width: 100%;
  height: 1px;
  margin: var(--studio-space-1) 0;
}

div[data-app=true] .header-title,
div[data-app=true] .datama-module-title {
  font-size: 24px;
  color: var(--text-structure);
  font-weight: 600;
}

.datama-light-header:not(.custom) .datama-header-identity-title-row {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex: 0 0 auto;
  max-height: 28px;
  gap: 4px;
}

.datama-light-header:not(.custom) .datama-header-identity-emoji {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 16px;
  line-height: 1;
}

.datama-light-header:not(.custom) .datama-header-identity-title-row .datama-input-container-light {
  display: flex;
  align-items: center;
  min-width: 120px;
  max-width: 448px;
  flex: 1 1 auto;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.datama-light-header:not(.custom) .datama-header-identity-title-row .datama-input-light {
  box-sizing: border-box;
  width: 100%;
  min-width: 120px;
  max-width: 448px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  box-shadow: none;
  font-family: var(--font-family-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  color: inherit;
  outline: none;
}

.datama-light-header:not(.custom) .datama-header-identity-title-row .datama-input-light:hover {
  background: rgba(var(--color-dark-rgb, 0, 72, 74), 0.04);
}

.datama-light-header:not(.custom) .datama-header-identity-title-row .datama-input-light:focus,
.datama-light-header:not(.custom) .datama-header-identity-title-row .datama-input-light:focus-visible {
  background: rgba(var(--color-dark-rgb, 0, 72, 74), 0.06);
  border: 0;
  box-shadow: none;
}

.datama-light-header:not(.custom) .datama-header-identity-menus {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 0;
  gap: 0;
  line-height: 1;
}

/* File / Data / Help — native button reset (Light AIO header.css parity). */
.datama-light-header:not(.custom) .datama-header-menu-trigger {
  appearance: none;
  -webkit-appearance: none;
  height: 22px;
  margin: 0;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-meta);
  line-height: 1;
}

.datama-light-header:not(.custom) .datama-header-menu-trigger:hover {
  background: var(--hover);
}

.datama-light-header:not(.custom) .datama-header-logo-mark.has-datama-logo {
  box-sizing: border-box;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin: 6px;
  padding: 0;
  border-radius: var(--border-radius);
  background: var(--datama-primary);
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

.datama-light-header:not(.custom) .datama-header-logo-mark.has-datama-logo .datama-logo--letter {
  display: block;
  width: 13px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-white);
  overflow: visible;
}

.datama-light-header:not(.custom) .datama-header-logo-mark .datama-logo:not(.datama-logo--letter) {
  display: block;
  width: 38px;
  height: 38px;
}

.datama-light-header:not(.custom) .datama-header-logo-mark.has-datama-eyes {
  box-sizing: border-box;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin: 6px;
  padding: 0;
  border-radius: 50%;
  background: #16d0b4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 520px;
  transition: width 0.65s cubic-bezier(0.4, 0.2, 0.2, 1), height 0.65s cubic-bezier(0.4, 0.2, 0.2, 1), flex-basis 0.65s cubic-bezier(0.4, 0.2, 0.2, 1), border-radius 0.65s cubic-bezier(0.4, 0.2, 0.2, 1), background-color 0.35s ease;
}

.datama-light-header:not(.custom) .datama-header-logo-mark.has-datama-eyes-sleeping {
  overflow: visible;
}

.datama-light-header:not(.custom) .datama-header-logo-mark.has-datama-eyes-space-invaders,
.datama-light-header:not(.custom) .datama-header-logo-mark.datama-eyes--flip-animating {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
}

.datama-light-header:not(.custom) .datama-header-logo-mark .datama-eyes {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
  transform-origin: center center;
}

.datama-eyes {
  display: inline-block;
  position: relative;
  z-index: 2;
  width: 52px;
  height: 41px;
}

.datama-eyes-flip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.datama-eyes-flip__rotor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.datama-eyes--space-invaders .datama-eyes-flip__rotor {
  transform: rotateY(180deg);
}

.datama-eyes-flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.datama-eyes-flip__face--brand {
  border-radius: 50%;
  background: #16d0b4;
}

.datama-eyes-flip__face--invader {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  background: transparent;
  overflow: hidden;
  border-radius: 4px;
}

.datama-eyes-flip__face--invader .datama-eyes__invader-shape {
  flex: 0 0 auto;
  width: 64%;
  height: auto;
  aspect-ratio: 11/8;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.datama-eyes__row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: 0 0 auto;
  width: 52px;
  height: 41px;
  overflow: visible;
  position: relative;
  z-index: 3;
  margin: 0;
  transform: scale(var(--datama-eyes-row-scale, 1));
  transform-origin: center center;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
}

.datama-eyes--space-invaders {
  --datama-invader-width: 64%;
  --datama-invader-height: calc(var(--datama-invader-width) * 8 / 11);
  width: 100%;
  height: 100%;
}

.datama-eyes__invader-shape {
  display: block;
}

.datama-eyes--space-invaders .datama-eyes-flip {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  animation: datama-eyes-invader-drift 3.8s ease-in-out infinite alternate;
  will-change: transform;
}

.datama-eyes--space-invaders .datama-eyes__row {
  position: absolute;
  left: 50%;
  top: calc((100% - var(--datama-invader-height)) / 2 + var(--datama-invader-height) * 0.4375);
  transform: translate(-50%, -50%) rotateY(-180deg) scale(calc(var(--datama-eyes-row-scale, 1) * 0.76));
  transform-origin: center center;
}

@keyframes datama-eyes-invader-drift {
  from {
    transform: translateX(-7.5%);
  }
  to {
    transform: translateX(7.5%);
  }
}
.datama-eyes__eye {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.datama-eyes__eyebrow {
  display: block;
}

.datama-eyes__socket {
  position: relative;
  z-index: 2;
  width: 25px;
  height: 41px;
  transform-origin: 50% 50%;
  transition: transform 150ms cubic-bezier(0.34, 1.45, 0.64, 1);
  will-change: transform;
}

.datama-eyes__socket-shape {
  display: block;
}

.datama-eyes__ball {
  position: absolute;
  top: calc(50% - 7px);
  left: calc(50% - 7px);
  z-index: 3;
  will-change: transform, opacity;
  transition: opacity 90ms ease-out;
}

/* Easter egg: eye winks shut just before the pointer reaches the sclera. */
.datama-eyes__socket.is-winking {
  transform: scaleY(0.1);
}

.datama-eyes__socket.is-winking .datama-eyes__ball {
  opacity: 0;
}

.datama-eyes__sleep {
  position: absolute;
  z-index: 5;
  top: -4px;
  left: 50%;
  width: 36px;
  height: 28px;
  overflow: visible;
  pointer-events: none;
  transform: translateX(-50%);
}

.datama-eyes__sleep-z {
  position: absolute;
  bottom: 0;
  left: calc(50% + var(--sleep-z-shift, 0px));
  font-family: "Nunito Sans", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: #00484a;
  text-shadow: 0 0 1px #ffffff;
  opacity: 0;
  transform: translateX(-50%);
  animation: datama-eyes-sleep-z 2.6s ease-in-out forwards;
  animation-delay: var(--sleep-z-delay, 0s);
}

.datama-eyes--space-invaders .datama-eyes__sleep {
  top: 0;
}

@keyframes datama-eyes-sleep-z {
  0% {
    transform: translate(-50%, 0) scale(0.9);
    opacity: 0;
  }
  12% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.55;
  }
  100% {
    transform: translate(-50%, -26px) scale(1.08);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .datama-eyes__socket,
  .datama-eyes__ball {
    transition: none;
  }
  .datama-eyes-flip__rotor,
  .datama-eyes__row,
  .datama-light-header:not(.custom) .datama-header-logo-mark.has-datama-eyes {
    transition: none;
  }
  .datama-eyes--space-invaders .datama-eyes-flip {
    animation: none;
  }
  .datama-eyes__sleep-z {
    animation: none;
    display: none;
  }
}
.datama-light-header:not(.custom) .datama-header-license-key.is-editing {
  flex: 0 1 auto;
  min-width: 0;
}

.datama-light-header:not(.custom) .datama-header-license-key-editor {
  display: inline-flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  max-width: min(360px, 42vw);
  height: 34px;
  margin: 0 2px;
  padding: 0 2px 0 12px;
  box-sizing: border-box;
  border: 1px solid rgba(var(--datama-primary-rgb, 0, 72, 74), 0.22);
  border-radius: 999px;
  background: var(--background, #fff);
  box-shadow: 0 1px 2px rgba(22, 23, 24, 0.06);
}

.datama-light-header:not(.custom) .datama-header-license-key-editor .datama-input-container-light {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.datama-light-header:not(.custom) .datama-header-license-key-editor .datama-input-light {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 28px;
  line-height: 28px;
  margin: 0;
  padding: 0 4px 0 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  font-size: 13px;
}

.datama-light-header:not(.custom) .datama-header-license-key-editor .datama-input-light:focus,
.datama-light-header:not(.custom) .datama-header-license-key-editor .datama-input-light:focus-visible {
  outline: none;
  box-shadow: none;
}

.datama-light-header:not(.custom) .datama-header-license-key-editor button.datama-header-license-key-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  min-width: 28px;
  margin: 0 1px;
  padding: 0;
  line-height: 0;
  border: 0;
  border-radius: 50%;
}

.datama-light-header:not(.custom) .datama-header-license-key-editor button.datama-header-license-key-btn > .datama-button-icon {
  width: 16px;
  height: 16px;
}

.datama-light-header:not(.custom) .datama-header-license-key-editor button.datama-header-license-key-btn > .datama-button-icon > svg {
  width: 16px;
  height: 16px;
}

.datama-light-header:not(.custom) .datama-header-license-key-editor button.datama-header-license-key-btn.primary {
  background: rgba(var(--datama-primary-rgb, 0, 72, 74), 0.1);
  color: var(--datama-primary, #16d0b4);
}

.datama-light-header:not(.custom) .datama-header-license-key-editor button.datama-header-license-key-btn.primary:hover {
  background: rgba(var(--datama-primary-rgb, 0, 72, 74), 0.18);
}

.datama-light-header:not(.custom) .datama-header-license-key-editor button.datama-header-license-key-btn:not(.primary):hover {
  background: var(--hover, rgba(22, 23, 24, 0.06));
}

.datama-light-header:not(.custom) button.datama-header-action > .datama-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 0;
}

.datama-light-header:not(.custom) button.datama-header-action > .datama-button-icon > svg {
  display: block;
  width: 20px;
  height: 20px;
}

.datama-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--state-active-bg);
  color: var(--datama-primary);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  user-select: none;
}

button.datama-header-user-avatar-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  margin: 5px 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  line-height: 0;
}

button.datama-header-user-avatar-trigger:focus-visible {
  outline: 2px solid var(--datama-primary, #16d0b4);
  outline-offset: 2px;
}

button.datama-header-user-avatar-trigger .datama-header-user-avatar-inner.datama-avatar {
  pointer-events: none;
}

.datama-skeleton {
  box-sizing: border-box;
  width: calc(100% - 3rem);
  height: calc(100% - 3rem);
  min-height: 12rem;
  margin: 1.5rem;
  border-radius: 1rem;
  background: linear-gradient(110deg, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.16) 8%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.38) 18%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.16) 33%);
  background-size: 200% 100%;
  animation: datama-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes datama-skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.datama-module-slot-host {
  flex: 1 1 auto;
  min-height: 14rem;
  width: 100%;
}

.datama-module-slot {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  box-sizing: border-box;
}

.datama-module-slot__content {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.datama-module-slot--demo .plotter-visualization,
.datama-module-slot--demo .plotter-custom-view {
  position: relative;
}

.datama-module-slot--demo .plotter-visualization::after,
.datama-module-slot--demo .plotter-custom-view::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 86' fill='none'><path d='M0.3 43.11C0.3 19.72 19.26 0.76 42.65 0.76C66.04 0.76 85 19.72 85 43.11V85.46H42.65C19.26 85.46 0.3 66.5 0.3 43.11Z' fill='%2316D0B4'/><path d='M44.14 54.57C44.81 61.02 48.49 65.03 54.18 65.03H64.89V40.96C64.89 35.04 60.1 30.25 54.18 30.25C48.91 30.25 45.31 33.59 44.31 39.62L44.14 54.57Z' fill='%23fff'/><path d='M20.35 54.57C21.02 61.02 24.7 65.03 30.39 65.03H41.1V40.96C41.1 35.04 36.3 30.25 30.39 30.25C25.12 30.25 21.52 33.59 20.51 39.62L20.35 54.57Z' fill='%23fff'/><circle cx='27.14' cy='49.53' r='6.05' fill='%2300484A'/><circle cx='51.05' cy='49.53' r='6.05' fill='%2300484A'/><circle cx='52.5' cy='45.5' r='0.95' fill='%23fff'/><circle cx='28.87' cy='45.5' r='0.95' fill='%23fff'/><text x='98' y='54' fill='%2300484A' font-family='Montserrat,Arial,sans-serif' font-size='36' font-weight='700'>Datama</text></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(280px, 70%) auto;
  opacity: 0.14;
}

.datama-module-slot--loading {
  overflow: hidden;
}

.datama-module-slot--loading .datama-module-slot__content {
  visibility: hidden;
}

.datama-module-slot--loading > .datama-skeleton {
  position: absolute;
  inset: 1.5rem;
  z-index: 1;
  width: auto;
  height: auto;
  min-height: 0;
  margin: 0;
}

.datama-module-slot--error {
  display: flex;
  flex-direction: column;
}

.datama-module-slot--error .datama-module-slot__content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.datama-module-slot__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 24rem;
  margin: 0;
  padding: 1.5rem;
  text-align: center;
  color: inherit;
}

.datama-module-slot__error-face {
  font-size: 2.75rem;
  line-height: 1;
  opacity: 0.55;
}

.datama-module-slot__error-message {
  font-size: 1rem;
  line-height: 1.45;
  opacity: 0.8;
}

.datama-module-slot--recoverable-error {
  display: flex;
  flex-direction: column;
  min-height: inherit;
}

.datama-module-slot__recoverable-error {
  flex: 0 0 auto;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.25);
  background: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.08);
}

.datama-module-slot__recoverable-error-message {
  font-size: 0.875rem;
  line-height: 1.4;
  opacity: 0.85;
}

.datama-module-slot--recoverable-error .datama-module-slot__content {
  flex: 1 1 auto;
  min-height: 0;
}

.datama-module-slot--warning .datama-module-slot__content {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: inherit;
  padding: 1.25rem 1rem 1.5rem;
  box-sizing: border-box;
}

.datama-warning-notice-shell--module-slot {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

.datama-warning-notice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
  width: 100%;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(var(--color-warning-rgb), 0.42);
  border-radius: var(--datama-radius-sm, 12px);
  background: color-mix(in srgb, var(--datama-warning) 12%, var(--color-bg-light, #fff));
  color: var(--text-body);
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}

.datama-warning-notice__head {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.625rem;
  min-width: 0;
}

.datama-warning-notice__icon {
  display: block;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  line-height: 0;
  color: rgb(var(--color-warning-rgb));
  opacity: 0.92;
}

.datama-warning-notice__icon svg {
  display: block;
  width: 32px;
  height: 32px;
  transform: none;
}

.datama-warning-notice__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-body);
}

.datama-warning-notice__message {
  margin: 0;
  padding-left: calc(32px + 0.625rem);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-body);
  opacity: 0.92;
}

.datama-warning-notice__message u {
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-warning-rgb), 0.75);
  text-underline-offset: 0.12em;
}

.datama-module-slot--loading .datama-compare-waterfall-skeleton.datama-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 0%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 32%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.28) 50%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 68%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 100%);
  background-size: 220% 100%;
  animation: datama-compare-waterfall-shimmer 2.2s ease-in-out infinite;
}

@keyframes datama-compare-waterfall-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}
.datama-compare-waterfall-skeleton .datama-module-slot-skeleton__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 26rem);
  height: min(76%, 22rem);
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.datama-compare-waterfall-skeleton__chart {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  gap: 0.85rem;
}

.datama-compare-waterfall-skeleton__bars,
.datama-compare-plotter-skeleton__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.4rem, 1.6vw, 1.1rem);
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}

.datama-compare-waterfall-skeleton__bars::after,
.datama-compare-plotter-skeleton__bars::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.38);
  pointer-events: none;
}

.datama-compare-waterfall-skeleton__bar,
.datama-compare-plotter-skeleton__bar {
  flex: 1 1 0;
  width: auto;
  max-width: 3rem;
  min-width: 0;
  border-radius: 0.45rem 0.45rem 0.12rem 0.12rem;
  transform-origin: center bottom;
  background: linear-gradient(180deg, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.78), rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.34));
  animation: datama-compare-waterfall-bar 1.8s ease-in-out infinite;
}

.datama-compare-waterfall-skeleton__labels {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 1.6vw, 1.1rem);
  flex: 0 0 auto;
  width: 100%;
}

.datama-compare-waterfall-skeleton__label {
  flex: 1 1 0;
  max-width: 3rem;
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.28);
  animation: datama-compare-waterfall-label 1.8s ease-in-out infinite;
}

.datama-compare-waterfall-skeleton__bar:nth-child(1),
.datama-compare-plotter-skeleton__bar:nth-child(1) {
  height: 92%;
}

.datama-compare-waterfall-skeleton__bar:nth-child(2),
.datama-compare-plotter-skeleton__bar:nth-child(2) {
  height: 46%;
}

.datama-compare-waterfall-skeleton__bar:nth-child(3),
.datama-compare-plotter-skeleton__bar:nth-child(3) {
  height: 68%;
}

.datama-compare-waterfall-skeleton__bar:nth-child(4),
.datama-compare-plotter-skeleton__bar:nth-child(4) {
  height: 32%;
}

.datama-compare-waterfall-skeleton__bar:nth-child(5),
.datama-compare-plotter-skeleton__bar:nth-child(5) {
  height: 74%;
}

.datama-compare-waterfall-skeleton__bar:nth-child(6),
.datama-compare-plotter-skeleton__bar:nth-child(6) {
  height: 40%;
}

.datama-compare-waterfall-skeleton__bar:nth-child(7),
.datama-compare-plotter-skeleton__bar:nth-child(7) {
  height: 84%;
}

.datama-compare-waterfall-skeleton__bar:nth-child(1),
.datama-compare-waterfall-skeleton__label:nth-child(1) {
  animation-delay: 0s;
}

.datama-compare-waterfall-skeleton__bar:nth-child(2),
.datama-compare-waterfall-skeleton__label:nth-child(2) {
  animation-delay: 0.12s;
}

.datama-compare-waterfall-skeleton__bar:nth-child(3),
.datama-compare-waterfall-skeleton__label:nth-child(3) {
  animation-delay: 0.24s;
}

.datama-compare-waterfall-skeleton__bar:nth-child(4),
.datama-compare-waterfall-skeleton__label:nth-child(4) {
  animation-delay: 0.36s;
}

.datama-compare-waterfall-skeleton__bar:nth-child(5),
.datama-compare-waterfall-skeleton__label:nth-child(5) {
  animation-delay: 0.48s;
}

.datama-compare-waterfall-skeleton__bar:nth-child(6),
.datama-compare-waterfall-skeleton__label:nth-child(6) {
  animation-delay: 0.6s;
}

.datama-compare-waterfall-skeleton__bar:nth-child(7),
.datama-compare-waterfall-skeleton__label:nth-child(7) {
  animation-delay: 0.72s;
}

@keyframes datama-compare-waterfall-bar {
  0%, 100% {
    transform: scaleY(0.58);
  }
  45% {
    transform: scaleY(1);
  }
}
@keyframes datama-compare-waterfall-label {
  0%, 100% {
    opacity: 0.4;
  }
  45% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .datama-compare-waterfall-skeleton.datama-skeleton,
  .datama-compare-waterfall-skeleton__bar,
  .datama-compare-waterfall-skeleton__label {
    animation: none;
  }
}
.datama-module-slot--loading .datama-pivot-tree-skeleton.datama-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 0%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 32%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.28) 50%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 68%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 100%);
  background-size: 220% 100%;
  animation: datama-compare-waterfall-shimmer 2.2s ease-in-out infinite;
}

.datama-pivot-tree-skeleton .datama-module-slot-skeleton__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 22rem);
  height: min(70%, 18rem);
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.datama-pivot-tree-skeleton__chart {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.datama-pivot-tree-skeleton__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.datama-pivot-tree-skeleton__link {
  fill: none;
  stroke: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.38);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.datama-pivot-tree-skeleton__card {
  position: absolute;
  box-sizing: border-box;
  border-radius: 0.45rem;
  background: linear-gradient(180deg, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.78), rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.34));
  animation: datama-pivot-tree-card 1.8s ease-in-out infinite;
}

.datama-pivot-tree-skeleton__card--leaf {
  border-radius: 0.35rem;
  opacity: 0.8;
}

@keyframes datama-pivot-tree-card {
  0%, 100% {
    opacity: 0.55;
  }
  45% {
    opacity: 1;
  }
}
.datama-module-slot--loading .datama-detect-anomaly-skeleton.datama-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(100deg, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 0%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 32%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.28) 50%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 68%, rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.1) 100%);
  background-size: 220% 100%;
  animation: datama-compare-waterfall-shimmer 2.2s ease-in-out infinite;
}

.datama-detect-anomaly-skeleton .datama-module-slot-skeleton__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 28rem);
  height: min(70%, 18rem);
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

.datama-detect-anomaly-skeleton__chart {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.datama-detect-anomaly-skeleton__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.datama-detect-anomaly-skeleton__band {
  fill: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.24);
  animation: datama-detect-anomaly-band 1.8s ease-in-out infinite;
}

.datama-detect-anomaly-skeleton__baseline {
  stroke: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.38);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.datama-detect-anomaly-skeleton__line {
  fill: none;
  stroke: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.78);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.datama-detect-anomaly-skeleton__anomaly {
  fill: rgba(var(--color-warning-rgb, 245, 158, 11), 0.85);
  animation: datama-detect-anomaly-dot 1.8s ease-in-out infinite;
}

.datama-detect-anomaly-skeleton__anomaly:nth-of-type(2) {
  animation-delay: 0.3s;
}

@keyframes datama-detect-anomaly-band {
  0%, 100% {
    opacity: 0.55;
  }
  45% {
    opacity: 1;
  }
}
@keyframes datama-detect-anomaly-dot {
  0%, 100% {
    opacity: 0.45;
  }
  45% {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .datama-pivot-tree-skeleton.datama-skeleton,
  .datama-pivot-tree-skeleton__card,
  .datama-detect-anomaly-skeleton.datama-skeleton,
  .datama-detect-anomaly-skeleton__band,
  .datama-detect-anomaly-skeleton__anomaly {
    animation: none;
  }
}
/* Dev Tool sits next to the 40px avatar — match size so flex row stays level. */
.datama-light-header:not(.custom) button.datama-header-dev-tools.datama-debug-chrome {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex: 0 0 40px;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  margin: 5px 8px 5px 0;
  padding: 0;
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
}

.datama-light-header:not(.custom) button.datama-header-action.has-unread {
  position: relative;
}

.datama-light-header:not(.custom) button.datama-header-action.has-unread::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b31312;
  box-shadow: 0 0 0 1px var(--background, #fff);
}

.datama-debug-chrome {
  color-scheme: dark;
  --datama-debug-surface: rgb(14, 18, 17);
  --datama-debug-surface-raised: rgb(22, 28, 27);
  --datama-debug-border-color: rgba(var(--datama-white-rgb, 255, 255, 255), 0.14);
  --datama-debug-fg: rgba(var(--datama-white-rgb, 255, 255, 255), 0.92);
  --datama-debug-fg-muted: rgba(var(--datama-white-rgb, 255, 255, 255), 0.58);
  --datama-debug-accent: var(--datama-primary-light, #16d0b4);
  --datama-debug-track: rgba(var(--datama-white-rgb, 255, 255, 255), 0.1);
  --datama-debug-hover: rgba(var(--datama-white-rgb, 255, 255, 255), 0.1);
}

.datama-light-header:not(.custom) button.datama-header-action.datama-debug-chrome {
  --icon-action-color: var(--datama-debug-accent);
  color: var(--datama-debug-accent);
  background: var(--datama-debug-surface-raised);
  border: 1px solid var(--datama-debug-border-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.datama-light-header:not(.custom) button.datama-header-action.datama-debug-chrome:hover {
  background: rgb(28, 36, 34);
  border-color: rgba(var(--datama-primary-light-rgb, 22, 208, 180), 0.35);
}

.datama-light-header:not(.custom) button.datama-header-action.datama-debug-chrome > .datama-button-icon > svg {
  color: var(--datama-debug-accent);
}

.datama-light-header:not(.custom) button.datama-header-action.datama-debug-chrome > .datama-button-icon > svg path,
.datama-light-header:not(.custom) button.datama-header-action.datama-debug-chrome > .datama-button-icon > svg line,
.datama-light-header:not(.custom) button.datama-header-action.datama-debug-chrome > .datama-button-icon > svg circle,
.datama-light-header:not(.custom) button.datama-header-action.datama-debug-chrome > .datama-button-icon > svg polyline {
  stroke-width: 2.25;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome {
  position: absolute;
  z-index: 1100;
  width: min(28rem, 100% - 1.5rem);
  max-height: min(28rem, 100% - 5rem);
  display: flex;
  flex-direction: column;
  color: var(--datama-debug-fg);
  background: var(--datama-debug-surface);
  border: 1px solid var(--datama-debug-border-color);
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome.datama-timer-timeline-panel--hidden {
  display: none;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  height: 40px;
  max-height: 40px;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--datama-debug-border-color);
  background: var(--datama-debug-surface-raised);
  flex-shrink: 0;
}

div[data-app=true] .datama-timer-timeline-panel__title-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--datama-debug-fg);
  white-space: nowrap;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__page-label {
  font-size: 0.625rem;
  color: var(--datama-debug-fg-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

div[data-app=true] .datama-timer-timeline-panel__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn.datama-button.no-text {
  min-width: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--datama-debug-fg);
  --icon-action-color: var(--datama-debug-fg);
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn.datama-button.no-text:hover {
  background: var(--datama-debug-hover);
  border: none;
  box-shadow: none;
  color: var(--datama-debug-accent);
  --icon-action-color: var(--datama-debug-accent);
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn .datama-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 0;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn .datama-button-icon > svg {
  display: block;
  width: 20px;
  height: 20px;
  color: currentColor;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn .datama-button-icon > svg path,
div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn .datama-button-icon > svg line,
div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn .datama-button-icon > svg circle,
div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__icon-btn .datama-button-icon > svg polyline {
  stroke-width: 2.35;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__list {
  overflow: auto;
  padding: 0.35rem 0.5rem 0.5rem;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-stack {
  margin-bottom: 0.65rem;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-stack:last-child {
  margin-bottom: 0;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-stack__title {
  margin: 0 0 0.25rem 0.15rem;
  font-size: 0.6875rem;
  font-weight: 600;
  font-family: ui-monospace, monospace;
  color: var(--datama-debug-fg);
  letter-spacing: 0.02em;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-stack__rows {
  border-top: 1px solid var(--datama-debug-border-color);
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-panel__empty {
  margin: 0.75rem 1rem;
  font-size: 0.8125rem;
  color: var(--datama-debug-fg-muted);
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 0.35rem 0.5rem;
  align-items: center;
  padding: 0.35rem 0.25rem;
  font-size: 0.6875rem;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__label {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  min-width: 0;
  overflow: hidden;
  font-family: ui-monospace, monospace;
  color: var(--datama-debug-fg-muted);
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__collapse {
  flex: 0 0 auto;
  width: 1rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--datama-debug-fg-muted);
  font-size: 0.625rem;
  line-height: 1;
  cursor: pointer;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__collapse:hover {
  color: var(--datama-debug-fg);
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__collapse-spacer {
  flex: 0 0 1rem;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__track {
  position: relative;
  height: 0.55rem;
  background: var(--datama-debug-track);
  border-radius: 0.25rem;
  overflow: hidden;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  min-width: 2px;
  box-sizing: border-box;
  background: var(--datama-debug-accent);
  border-radius: 0.25rem;
  opacity: 0.9;
}

div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row--running .datama-timer-timeline-row__bar {
  opacity: 1;
  animation: datama-timer-timeline-pulse 1.2s ease-in-out infinite;
}

@keyframes datama-timer-timeline-pulse {
  0%, 100% {
    opacity: 0.65;
  }
  50% {
    opacity: 1;
  }
}
div[data-app=true] .datama-timer-timeline-panel.datama-debug-chrome .datama-timer-timeline-row__ms {
  font-variant-numeric: tabular-nums;
  color: var(--datama-debug-fg-muted);
  white-space: nowrap;
}

div[data-app=true] .datama-header-action.active {
  background: rgba(22, 208, 180, 0.18);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-panel {
  --layer-source-gutter-x: 0.75rem;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 40px;
  padding: 0.6rem 0;
  border-bottom: var(--border, 1px solid rgba(0, 0, 0, 0.12));
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar .datama-input-container {
  margin: 0;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__leading {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding-left: var(--layer-source-gutter-x, 0.75rem);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__trailing {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-left: auto;
  padding-right: var(--layer-source-gutter-x, 0.75rem);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__search {
  position: relative;
  min-width: 160px;
  max-width: 280px;
  width: min(280px, 100%);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__search .datama-input-container {
  width: 100%;
  margin-bottom: 0;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__search-icon {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.45;
  z-index: 1;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__search .datama-input {
  width: 100%;
  padding-left: 1.75rem;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__trailing .datama-input-button-group-segment:has(.datama-button + .datama-button) {
  min-height: 32px;
  height: 32px;
  border-radius: 999px;
  padding: 2px;
  box-sizing: border-box;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__trailing .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):not(.datama-input-button-group-segment-selected) {
  min-width: 4.5rem;
  padding: 0 0.85rem !important;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.52);
  background: transparent !important;
  transform: none !important;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__trailing .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button:not(.active):not(.datama-input-button-group-segment-selected):hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.72);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__trailing .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button.active,
:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__trailing .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button.active:hover,
:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-toolbar__trailing .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button.datama-input-button-group-segment-selected {
  min-width: 4.5rem;
  padding: 0 0.85rem !important;
  font-size: 12px;
  font-weight: 600;
  background: rgba(var(--datama-primary-rgb), 0.14) !important;
  color: var(--datama-primary) !important;
  border-radius: 999px !important;
  box-shadow: none;
  transform: none !important;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: var(--border, 1px solid rgba(0, 0, 0, 0.12));
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer__start {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: var(--layer-source-gutter-x, 0.75rem);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer__count {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer__created {
  font-size: 11px;
  opacity: 0.55;
  white-space: nowrap;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer__end {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-left: auto;
  padding-right: var(--layer-source-gutter-x, 0.75rem);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer__preview {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-footer__preview .datama-input[type=number] {
  text-align: center;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: rgba(0, 0, 0, 0.02);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__head {
  position: sticky;
  top: 0;
  z-index: 1;
  text-align: left;
  padding: 0.65rem var(--layer-source-gutter-x, 0.75rem);
  cursor: pointer;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 4px 8px -6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  font-family: var(--font-family-heading);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--text-label);
  transition: background-color 0.12s ease, color 0.12s ease;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__head:hover {
  background: rgb(255, 255, 255);
  color: rgba(var(--color-dark-rgb), 0.82);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__head-label {
  margin-right: 0.35rem;
  font: inherit;
  color: inherit;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__sort-chevrons {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  line-height: 0;
  gap: 0;
  opacity: 0;
  transition: opacity 0.12s ease;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__head:hover .datama-layer-source-table__sort-chevrons,
:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__head--sorted .datama-layer-source-table__sort-chevrons {
  opacity: 1;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__sort-chevron-up,
:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__sort-chevron-down {
  opacity: 0.35;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__head--sort-asc .datama-layer-source-table__sort-chevron-up,
:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table__head--sort-desc .datama-layer-source-table__sort-chevron-down {
  opacity: 1;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table td {
  padding: 0.45rem var(--layer-source-gutter-x, 0.75rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  vertical-align: middle;
  color: rgba(0, 0, 0, 0.88);
  background: var(--background, #fff);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table--sample tbody tr:nth-child(even) td {
  background: rgba(0, 0, 0, 0.018);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table--sample tbody tr:hover td {
  background: rgba(var(--datama-primary-rgb, 22, 208, 180), 0.06);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table--unique td:nth-child(even) {
  background: rgba(0, 0, 0, 0.018);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-table--unique tbody tr:hover td {
  background: rgba(var(--datama-primary-rgb, 22, 208, 180), 0.05);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-cell {
  display: block;
  min-height: 1.25em;
  line-height: 1.35;
  cursor: text;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-cell-input {
  width: 100%;
  border: none;
  background: transparent;
  font: inherit;
  padding: 0;
  margin: 0;
  color: inherit;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-empty {
  margin: 1rem;
  opacity: 0.7;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__label {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__nav {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.65rem;
  height: 1.65rem;
  padding: 0;
  border: var(--border, 1px solid rgba(0, 0, 0, 0.12));
  background: var(--background, #fff);
  border-radius: 0.35rem;
  color: var(--caret-color, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button:hover:not(:disabled) {
  background: rgba(var(--datama-primary-rgb, 22, 208, 180), 0.08);
  border-color: rgba(var(--datama-primary-rgb, 22, 208, 180), 0.35);
  color: var(--caret-color-hover, rgba(0, 0, 0, 0.75));
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button .datama-input-select-caret {
  position: static;
  width: 14px;
  height: 14px;
  pointer-events: none;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button .datama-input-select-caret.datama-layer-source-pager__caret--previous {
  transform: rotate(90deg);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button .datama-input-select-caret.datama-layer-source-pager__caret--next {
  transform: rotate(-90deg);
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button .datama-input-select-caret svg,
:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button .datama-input-select-caret path {
  width: 14px;
  height: 14px;
  display: block;
}

:is(div[data-app=true], .datama-dialog.datama-dialog-layer-source) .datama-layer-source-pager__button:disabled {
  opacity: 0.35;
  cursor: default;
}

/* DatamaProTip — local chrome only (orchestrator owns placement). */
.datama-pro-tip {
  box-sizing: border-box;
  z-index: 100000;
  max-width: 320px;
  width: max-content;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  background: var(--color-white, #fff);
  color: var(--color-dark, var(--text-body));
  box-shadow: 0 4px 16px rgba(var(--color-dark-rgb), 0.14);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s ease;
}

.datama-pro-tip.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.datama-dialog {
  font-family: var(--font-family);
  background: rgba(var(--color-dark-rgb), 0.35);
}

.datama-dialog > .datama-dialog-container {
  color: var(--text-body);
}

.datama-dialog > .datama-dialog-container > header > h2.datama-dialog-title {
  color: var(--text-heading);
  font-family: var(--font-family-heading);
  font-weight: 600;
}

/* What If / settings tabs: title + subtitle block in the absolute dialog header. */
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-tab-title-container {
  flex: 1;
  min-width: 0;
  margin-right: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-tab-title-container > .datama-tab-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text-structure);
}

.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-tab-title-container > .datama-tab-subtitle {
  margin: 0;
  max-width: 42rem;
}

/* Title + subtitle need more top inset than the single-line Light default (70px). */
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper:has(.datama-tab-subtitle) {
  padding-top: 5.5rem;
}

.datama-dialog.datama-dialog-story-catalog .datama-story-create-identity {
  display: flex;
  align-items: stretch;
  gap: 12px;
  min-width: 0;
}

/* Story catalog editors share one scrollable, responsive dialog layout. */
.datama-dialog.datama-dialog-story-catalog > .datama-dialog-container {
  width: min(860px, 100% - 32px);
  min-width: min(560px, 100% - 32px);
  max-width: min(900px, 100% - 32px);
  min-height: 0;
  height: min(780px, 100% - 32px);
  max-height: calc(100% - 32px);
}

.datama-dialog.datama-dialog-story-catalog > .datama-dialog-container > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 20px 28px;
  box-sizing: border-box;
}

.datama-story-create {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.datama-story-create-presets-label {
  margin: 2px 0 -4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-heading);
}

.datama-story-create-presets,
.datama-story-display-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.datama-story-create-preset {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border-color, rgba(var(--color-dark-rgb), 0.12));
  border-radius: var(--border-radius, 8px);
  background: var(--color-bg-light);
  color: var(--text-body);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.datama-story-create-preset:hover {
  border-color: rgba(var(--datama-primary-rgb), 0.45);
  background: rgba(var(--datama-primary-rgb), 0.035);
}

.datama-story-create-preset.active {
  border-color: var(--datama-primary, var(--color-primary));
  background: rgba(var(--datama-primary-rgb), 0.07);
  box-shadow: 0 0 0 1px rgba(var(--datama-primary-rgb), 0.16);
}

.datama-story-create-preset-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.datama-story-create-preset-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(var(--datama-primary-rgb), 0.08);
  color: var(--datama-primary, var(--color-primary));
}

.datama-story-create-preset-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.datama-story-create-preset-copy strong {
  font-size: 13px;
  font-weight: 600;
}

.datama-story-create-preset-demo-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-dark, #1d1d1b);
  background: rgba(var(--datama-primary-rgb, 22, 208, 180), 0.25);
  vertical-align: middle;
}

.datama-story-create-preset-category {
  font-size: 11px;
  color: var(--text-meta);
}

.datama-story-create-preset > p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-meta);
}

.datama-story-module-group-list {
  grid-template-columns: 1fr;
}

.datama-story-module-entry > .datama-story-create-preset {
  flex: 1 1 auto;
  width: 100%;
}

.datama-story-display-presets .datama-story-create-preset {
  min-height: 72px;
}

.datama-story-create-empty {
  grid-column: 1/-1;
  margin: 0;
  color: var(--text-meta);
}

.datama-dialog.datama-dialog-story-catalog > .datama-dialog-container > footer {
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
}

.datama-dialog.datama-dialog-story-catalog > .datama-dialog-container > footer > .datama-button {
  margin: 0;
}

@media (max-width: 640px) {
  .datama-dialog.datama-dialog-story-catalog > .datama-dialog-container {
    width: calc(100% - 16px);
    min-width: 0;
    max-width: none;
    height: calc(100% - 16px);
    max-height: calc(100% - 16px);
  }
  .datama-dialog.datama-dialog-story-catalog > .datama-dialog-container > main {
    padding: 16px;
  }
  .datama-story-create-presets,
  .datama-story-display-presets {
    grid-template-columns: 1fr;
  }
}
.datama-dialog.datama-dialog-story-catalog .datama-story-create-emoji {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
}

.datama-dialog.datama-dialog-story-catalog .datama-story-create-emoji .datama-input-container-light {
  display: flex;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0;
}

.datama-dialog.datama-dialog-story-catalog .datama-story-create-emoji .datama-input-light,
.datama-dialog.datama-dialog-story-catalog .datama-story-create-emoji .datama-story-create-emoji-input {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 48px;
  min-width: 48px;
  max-width: 48px;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0;
  border: var(--border);
  border-radius: 10px;
  background: var(--state-active-bg);
  color: var(--text-body);
  font-family: var(--font-family);
  font-size: 26px;
  line-height: 1;
  text-align: center;
  overflow: hidden;
}

.datama-dialog.datama-dialog-story-catalog .datama-story-create-fields {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.datama-dialog.datama-dialog-story-catalog .datama-story-create-fields .datama-input-container-light {
  display: flex;
  flex: 1 1 auto;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;
}

.datama-dialog.datama-dialog-story-catalog .datama-story-create-fields .datama-input-light {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  min-height: 48px;
  margin: 0;
  padding: 0 0.95rem;
  border: var(--border);
  border-radius: var(--border-radius);
  background: var(--color-bg-light);
  color: var(--text-body);
  font-family: var(--font-family);
  font-size: 1rem;
  line-height: 48px;
}

.datama-story-form-section-label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-heading);
}

.datama-story-module-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.datama-story-module-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.datama-story-module-group-label {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-meta);
}

.datama-story-module-entry {
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
}

.datama-story-module-entry > .datama-story-create-preset {
  flex: 1 1 auto;
  width: 100%;
}

.datama-story-module-entry > .datama-story-module-order-actions {
  flex-direction: column;
  align-self: center;
}

.datama-dialog > .datama-dialog-container > footer .datama-button.datama-button-danger {
  color: var(--color-danger);
  border-color: rgba(var(--color-danger-rgb), 0.35);
  background: var(--color-bg-light);
}

.datama-dialog > .datama-dialog-container > footer .datama-button.datama-button-danger:hover:not(:disabled) {
  background: rgba(var(--color-danger-rgb), 0.08);
  border-color: rgba(var(--color-danger-rgb), 0.5);
}

.datama-dialog.datama-dialog-layer-source > .datama-dialog-container {
  width: min(920px, 100% - 48px);
  min-width: min(640px, 100% - 48px);
  max-width: min(980px, 100% - 48px);
  min-height: 0;
  height: min(780px, 100% - 32px);
  max-height: calc(100% - 32px);
}

.datama-dialog.datama-dialog-layer-source > .datama-dialog-container > main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px 28px;
  box-sizing: border-box;
}

.datama-dialog.datama-dialog-layer-source .datama-layer-source-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.datama-dialog.datama-dialog-translation-pattern > .datama-dialog-container {
  width: min(920px, 100% - 48px);
  min-width: min(640px, 100% - 48px);
  max-width: min(980px, 100% - 48px);
  min-height: auto;
  height: auto;
  max-height: calc(100% - 48px);
}

.datama-dialog.datama-dialog-translation-pattern > .datama-dialog-container > footer .datama-translation-pattern-reset {
  margin-right: auto;
}

.datama-translation-pattern-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.datama-translation-pattern-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}

.datama-translation-pattern-column {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 6px;
}

.datama-translation-pattern-label {
  font-size: var(--studio-form-label-font-size, 0.75rem);
  font-weight: var(--studio-form-label-font-weight, 500);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-label);
}

.datama-translation-pattern-editor,
.datama-translation-pattern-preview {
  box-sizing: border-box;
  width: 100%;
  min-height: 140px;
  margin: 0;
  padding: var(--input-padding-y) var(--input-padding-x);
  border-radius: var(--studio-form-input-radius, var(--input-chrome-radius, 6px));
  font: inherit;
  font-size: var(--input-font-size);
  line-height: 1.55;
  color: var(--text-body);
  white-space: pre-wrap;
  word-break: break-word;
}

.datama-translation-pattern-editor {
  resize: vertical;
  border: var(--border);
  background: var(--color-bg-light, #fff);
  outline: none;
}

.datama-translation-pattern-editor:focus {
  border-color: var(--datama-primary);
  box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.12);
}

.datama-translation-pattern-editor.is-loading {
  opacity: 0.55;
}

.datama-translation-pattern-preview {
  border: var(--border);
  background: rgba(var(--color-dark-rgb), 0.03);
  overflow: auto;
}

.datama-translation-pattern-help {
  margin: 0 0 8px;
  font-size: 0.8rem;
  font-style: italic;
  font-weight: 300;
  color: var(--text-meta, rgba(var(--color-dark-rgb), 0.65));
}

.datama-translation-pattern-variables-title {
  margin: 0 0 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-heading, var(--text-body));
}

.datama-translation-pattern-table-scroll {
  max-height: 240px;
  overflow: auto;
}

.datama-translation-pattern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.datama-translation-pattern-table th {
  position: sticky;
  top: 0;
  padding: 6px 8px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-meta, rgba(var(--color-dark-rgb), 0.55));
  background: var(--color-bg-light, #fff);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.12);
}

.datama-translation-pattern-table td {
  padding: 5px 8px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
}

.datama-translation-pattern-var-toggle,
.datama-translation-pattern-var-toggle-spacer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-meta, #888);
  font-size: 9px;
  cursor: pointer;
}

.datama-translation-pattern-var-toggle-spacer {
  cursor: default;
}

.datama-translation-pattern-var-key {
  font-weight: 500;
}

.datama-translation-pattern-var-value {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-meta, #666);
}

.datama-translation-pattern-var-path {
  margin: 0;
  padding: 1px 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-meta, #999);
  cursor: pointer;
}

.datama-translation-pattern-var-path:hover,
.datama-translation-pattern-var-path.is-copied {
  background: rgba(var(--color-dark-rgb), 0.06);
  color: var(--text-body, #333);
}

.datama-translation-pattern-var-path.is-copied {
  background: #e8f5e9;
  color: #2e7d32;
}

.datama-var-type-badge {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.datama-var-type-string {
  background: #e8f5e9;
  color: #2e7d32;
}

.datama-var-type-number {
  background: #e3f2fd;
  color: #1565c0;
}

.datama-var-type-boolean {
  background: #fff3e0;
  color: #e65100;
}

.datama-var-type-object {
  background: #f3e5f5;
  color: #7b1fa2;
}

.datama-var-type-array {
  background: #fce4ec;
  color: #c62828;
}

.datama-var-type-element {
  background: #e0f2f1;
  color: #00695c;
}

.datama-var-type-null,
.datama-var-type-undefined {
  background: #f5f5f5;
  color: #9e9e9e;
}

.datama-translation-pattern-menu {
  position: fixed;
  z-index: 1200;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  max-width: 320px;
  max-height: 220px;
  overflow: auto;
  background: var(--color-bg-light, #fff);
  color: var(--text-body, #333);
  border: var(--border, 1px solid rgba(0, 0, 0, 0.12));
  border-radius: var(--border-radius, 6px);
  box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, 0.12));
}

.datama-translation-pattern-suggestion {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.datama-translation-pattern-suggestion--active,
.datama-translation-pattern-suggestion:hover {
  background: var(--hover, rgba(var(--color-dark-rgb), 0.06));
}

.datama-translation-pattern-suggestion-key {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.datama-translation-pattern-suggestion-value {
  flex: 0 0 auto;
  max-width: 90px;
  overflow: hidden;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--text-meta, #888);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.datama-translation-pattern-caret-mirror {
  position: fixed;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
}

@media screen and (max-width: 720px) {
  .datama-translation-pattern-columns {
    grid-template-columns: 1fr;
  }
}
div[data-app=true] .datama-tableau-configure {
  padding: var(--studio-space-3);
  box-sizing: border-box;
}

div[data-app=true] .datama-tableau-configure__title {
  margin: 0 0 var(--studio-space-2);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-body);
}

div[data-app=true] .datama-tableau-configure__intro {
  margin: 0 0 var(--studio-space-1);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(var(--color-dark-rgb), 0.85);
}

div[data-app=true] .datama-tableau-configure__promo {
  margin: 0 0 var(--studio-space-3);
  font-size: 0.75rem;
  line-height: 1.4;
  color: rgba(var(--color-dark-rgb), 0.55);
}

div[data-app=true] .datama-tableau-configure__section {
  margin-bottom: var(--studio-space-3);
}

div[data-app=true] .datama-tableau-configure__control-row {
  display: flex;
  align-items: center;
  gap: var(--studio-space-2);
  width: 100%;
}

div[data-app=true] .datama-tableau-configure__control-row--top {
  align-items: flex-start;
}

div[data-app=true] .datama-tableau-configure__section-label {
  flex: 0 0 9.5rem;
  margin: 0;
  padding-top: 0.5rem;
  color: rgb(var(--datama-primary-rgb));
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1.3;
}

div[data-app=true] .datama-tableau-configure__control-row--top .datama-tableau-configure__section-label {
  padding-top: 0.625rem;
}

div[data-app=true] .datama-tableau-configure__control {
  flex: 1 1 auto;
  min-width: 0;
}

div[data-app=true] .datama-tableau-configure__drop {
  flex: 0 0 auto;
}

div[data-app=true] .datama-tableau-configure__config-fade {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

div[data-app=true] .datama-tableau-configure__config-fade::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.75rem;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--color-white-rgb), 0), rgba(var(--color-white-rgb), 0.92) 55%, rgba(var(--color-white-rgb), 1));
  border-radius: 0 0 6px 6px;
}

div[data-app=true] .datama-tableau-configure__config-json {
  display: block;
  width: 100%;
  height: 5.5rem;
  min-height: 5.5rem;
  max-height: 5.5rem;
  resize: none;
  overflow: hidden;
  font-family: ui-monospace, monospace;
  font-size: 0.6875rem;
  line-height: 1.35;
}

div[data-app=true] .datama-tableau-configure__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--studio-space-2);
  margin-top: var(--studio-space-3);
  padding-top: var(--studio-space-3);
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
}

.datama-header-identity-menu.datama-context-menu {
  position: absolute;
  z-index: 10050;
  opacity: 0;
  visibility: hidden;
  background-color: var(--color-bg-light, #fff);
  width: max-content;
  min-width: 180px;
  margin: 0;
  padding: 6px;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  list-style: none;
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 20px;
  border: 1px solid rgba(var(--color-dark-rgb, 29, 29, 27), 0.08);
  border-radius: var(--border-radius, 10px);
  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
  color: var(--color-dark, #1d1d1b);
  cursor: default;
  transform: translateY(2px);
  overflow: visible;
  box-sizing: border-box;
}

.datama-header-identity-menu.datama-context-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.datama-header-identity-menu .datama-context-menu-element {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  position: relative;
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.1s ease-out;
  box-sizing: border-box;
}

.datama-header-identity-menu .datama-context-menu-element:hover {
  background: rgba(var(--color-dark-rgb, 29, 29, 27), 0.06);
}

.datama-header-identity-menu .datama-context-menu-element.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.datama-header-identity-menu .datama-context-menu-element.disabled:hover {
  background: none;
}

.datama-header-identity-menu .datama-context-menu-slot-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.datama-header-identity-menu .datama-context-menu-slot-icon svg {
  display: block;
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
}

.datama-header-identity-menu .datama-context-menu-slot-suffix {
  opacity: 0.55;
}

.datama-header-identity-menu .datama-context-menu-element-container {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.datama-header-identity-menu .datama-context-menu-submenu {
  padding-left: 12px;
  margin-top: 2px;
  margin-bottom: 4px;
  border-left: 2px solid rgba(var(--color-dark-rgb), 0.06);
}

.datama-header-identity-menu .datama-menu-item-submenu-trigger {
  width: 100%;
}

.datama-header-identity-menu .datama-menu-item-submenu-trigger.datama-menu-item-submenu-open > .datama-context-menu-slot-suffix svg {
  transform: rotate(180deg);
}

.datama-header-identity-menu .datama-locale-flag-icon {
  display: block;
  border-radius: 1px;
}

.datama-header-user-card {
  position: absolute;
  z-index: 10050;
  opacity: 0;
  visibility: hidden;
  box-sizing: border-box;
  width: 280px;
  max-width: min(280px, 100vw - 16px);
  margin: 0;
  padding: 12px;
  background-color: var(--color-bg-light, #fff);
  border: 1px solid rgba(var(--color-dark-rgb, 29, 29, 27), 0.08);
  border-radius: var(--border-radius, 10px);
  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-dark, #1d1d1b);
  cursor: default;
  transform: translateY(2px);
  overflow: auto;
}

.datama-header-user-card.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

.datama-header-user-card-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.datama-header-user-card-avatar-wrap {
  flex: 0 0 auto;
}

.datama-header-user-card-avatar.datama-avatar {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  font-size: 14px;
}

.datama-header-user-card-identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.datama-header-user-card-title {
  font-family: var(--font-family-heading);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}

.datama-header-user-card-subtitle {
  font-size: 12px;
  color: rgba(var(--color-dark-rgb, 29, 29, 27), 0.62);
  word-break: break-all;
}

.datama-header-user-card-status {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(var(--color-dark-rgb, 29, 29, 27), 0.72);
}

.datama-header-user-card-divider {
  height: 1px;
  margin: 12px 0 10px;
  background: rgba(var(--color-dark-rgb, 29, 29, 27), 0.08);
}

.datama-header-user-card-section-label {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--color-dark-rgb, 29, 29, 27), 0.5);
}

.datama-header-user-card-access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.datama-header-user-card-access-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  min-height: 28px;
  padding: 4px 6px;
  border-radius: 6px;
}

.datama-header-user-card-access-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--datama-primary, #16d0b4);
}

.datama-header-user-card-access-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.datama-header-user-card-access-label {
  font-weight: 500;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.datama-header-user-card-access-date {
  font-size: 12px;
  color: rgba(var(--color-dark-rgb, 29, 29, 27), 0.55);
  white-space: nowrap;
}

.datama-header-user-card-access-empty {
  padding: 4px 6px;
  font-size: 12px;
  color: rgba(var(--color-dark-rgb, 29, 29, 27), 0.55);
}

.datama-header-user-card-actions {
  display: flex;
  justify-content: stretch;
  margin-top: 4px;
}

.datama-header-user-card-refresh.datama-button {
  width: 100%;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __context_menu.css project project-deep-sky
 */
/*
 * DataMaContextMenu stylesheet (Linear / Shadcn inspired).
 *
 * Root node classes driven by `DataMaContextMenu`:
 * - `.show`                  : menu is visible
 * - `.expand-right`          : sub menus grow to the right (caret on the right side)
 * - `.expand-left`           : sub menus grow to the left (caret on the left side)
 * - `.expand-down`           : menu appears under the mouse, sub menus align top
 * - `.expand-up`             : menu appears above the mouse, sub menus align bottom
 *
 * Item slots (each one optional, in DOM order):
 * - `.datama-context-menu-slot-icon`          : item icon
 * - `.datama-context-menu-element-container`  : item text
 * - `.datama-context-menu-slot-numeric-input` : compact number input on a leaf item
 * - `.datama-context-menu-slot-color-swatch`  : right-aligned palette-style color chip (`colorSwatch`)
 * - `.datama-context-menu-slot-shortcut`      : keyboard shortcut keys (`kbd` children)
 * - `.datama-context-menu-slot-documentation` : "?" in a circle showing a documentation tip
 * - `.datama-context-menu-slot-checkbox`      : pin/checkbox input on a leaf item
 * - `.datama-context-menu-slot-switch`         : on/off switch on a leaf item
 * - `.datama-context-menu-slot-caret`         : caret for items holding sub items
 * - `.datama-context-menu-search`             : search slot (visible after the first typed key)
 * - `.selected` / `.active` on `.datama-context-menu-element` : current choice (button-group active look)
 */
div[data-app=true] .datama-context-menu {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  background-color: white;
  width: max-content;
  min-width: 200px;
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  list-style: none;
  font-family: var(--font-family);
  font-size: 13px;
  line-height: 20px;
  z-index: 999;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
  color: var(--color-dark);
  cursor: default;
  transform: translateY(2px);
  /* Root stays overflow:visible so flyout sub-menus are not clipped.
     max-height + overflow-y live on `.datama-context-menu-scroll`. */
  overflow: visible;
  /* UA styles `ul` with padding-inline-start: 40px. Light cleared that on every
     `ul` in `__fonts.css`, which is not part of this stylesheet. Flyout `top` /
     `right` are resolved against the padding edge while JS measures the border
     box — a non-zero root padding shifts every submenu into the card. */
  padding: 0;
}

div[data-app=true] .datama-context-menu.show {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
}

div[data-app=true] .datama-context-menu:focus {
  outline: none;
}

/* ------------------------------------------------------------------ */
/* Scroll body + flyout hosts                                         */
/* ------------------------------------------------------------------ */
div[data-app=true] .datama-context-menu > .datama-context-menu-scroll-wrap,
div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap {
  display: block;
  position: static;
  width: 100%;
  padding: 0 !important;
  margin: 0;
  border: none;
  background: transparent !important;
  list-style: none;
  min-height: 0;
}

div[data-app=true] .datama-context-menu > .datama-context-menu-scroll-wrap:hover,
div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover {
  background: transparent !important;
}

/*
 * Legacy `__waterfall.css` styles EVERY `li > ul` as an absolute submenu
 * (`left: 100%; display: none` until hover). The scroll body is `li > ul` by
 * necessity (root is a `ul`) — reset those rules so content is not shifted
 * into a blank "gutter" on the left.
 */
div[data-app=true] .datama-context-menu > .datama-context-menu-scroll-wrap > .datama-context-menu-scroll,
div[data-app=true] .datama-context-menu > .datama-context-menu-scroll-wrap:hover > .datama-context-menu-scroll {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  list-style: none;
  margin: 0;
  /* Inset matching flyouts. `!important` beats any legacy `li > ul { padding: 0 }`. */
  padding: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow-x: hidden;
  /* overflow-y / max-height set inline by viewport clamp */
}

div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap {
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
}

div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub {
  pointer-events: auto;
}

/*
 * Legacy `__waterfall.css` uses `li:hover > ul { display: inline-flex }`.
 * All flyouts are siblings under `li.flyouts-wrap`, so hovering any open
 * panel would otherwise reveal EVERY flyout at once. Visibility is owned
 * exclusively by the `.open` class (JS).
 */
div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub,
div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover > .datama-context-menu-sub {
  display: none !important;
}

div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap > .datama-context-menu-sub.open,
div[data-app=true] .datama-context-menu > .datama-context-menu-flyouts-wrap:hover > .datama-context-menu-sub.open {
  display: inline-flex !important;
}

/* ------------------------------------------------------------------ */
/* Search slot                                                        */
/* ------------------------------------------------------------------ */
div[data-app=true] .datama-context-menu .datama-context-menu-search {
  display: none;
  width: 100%;
  padding: 6px 8px 4px 8px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  pointer-events: auto;
}

div[data-app=true] .datama-context-menu .datama-context-menu-search.visible {
  display: block;
}

div[data-app=true] .datama-context-menu .datama-context-menu-search:hover {
  background: transparent !important;
}

div[data-app=true] .datama-context-menu .datama-context-menu-search > input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  line-height: 20px;
  color: var(--color-dark);
  padding: 0;
}

div[data-app=true] .datama-context-menu .datama-context-menu-search > input::placeholder {
  color: rgba(var(--color-dark-rgb), 0.45);
}

div[data-app=true] .datama-context-menu .datama-context-menu-search-empty {
  pointer-events: none;
  color: rgba(var(--color-dark-rgb), 0.45);
  font-style: italic;
}

div[data-app=true] .datama-context-menu .datama-context-menu-search-empty:hover {
  background: transparent !important;
}

div[data-app=true] .datama-context-menu.datama-context-menu-searching .datama-context-menu-sub {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Group dividers                                                     */
/* ------------------------------------------------------------------ */
div[data-app=true] .datama-context-menu .datama-context-menu-divider {
  width: 100%;
  position: relative;
  padding: 5px 8px 2px 8px;
  margin: 0;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  pointer-events: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-divider:not(.datama-context-menu-divider-first) {
  margin-top: 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

div[data-app=true] .datama-context-menu .datama-context-menu-divider:hover {
  background: transparent !important;
}

div[data-app=true] .datama-context-menu .datama-context-menu-divider > span {
  font-family: var(--font-family-heading);
  font-size: 10px;
  line-height: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-structure);
}

/* ------------------------------------------------------------------ */
/* Items and slots                                                    */
/* ------------------------------------------------------------------ */
div[data-app=true] .datama-context-menu .datama-context-menu-element {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  width: 100%;
  min-height: 30px;
  padding: 5px 8px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease-out;
}

div[data-app=true] .datama-context-menu .datama-context-menu-element:hover {
  background: rgba(var(--color-dark-rgb), 0.06);
}

/* Disabled leaf: dimmed, no hover background, click blocked in JS (#bindItemClick) —
   pointer-events stay enabled so the native `title` tooltip explains why. */
div[data-app=true] .datama-context-menu .datama-context-menu-element.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.disabled:hover {
  background: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active {
  background-color: var(--state-active-bg);
  color: var(--state-active-text);
  box-shadow: inset 0 0 0 1px var(--state-active-border);
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected::after,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active::after {
  content: none;
  display: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected:hover,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active:hover {
  background-color: rgba(var(--datama-primary-rgb), 0.15);
  box-shadow: inset 0 0 0 1px rgba(var(--datama-primary-rgb), 0.4);
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon {
  color: var(--state-active-text);
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon .datama-icon,
div[data-app=true] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-icon svg,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon .datama-icon,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-icon svg {
  fill: var(--state-active-text);
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-element-container,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-element-container {
  color: var(--state-active-text);
  font-weight: 500;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 20px;
  padding: 0 !important;
  color: var(--icon-action-color);
  transform: unset;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-icon .datama-icon,
div[data-app=true] .datama-context-menu .datama-context-menu-slot-icon svg {
  width: 20px;
  height: 20px;
  fill: var(--icon-action-color);
}

/* Palette-style color chip — right-aligned input slot (like switch / numeric). */
div[data-app=true] .datama-context-menu .datama-context-menu-slot-color-swatch {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  overflow: visible;
  cursor: pointer;
  gap: 2px;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-color-swatch--multi {
  width: auto;
  min-width: 20px;
  cursor: default;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-color-swatch--multi .datama-context-menu-color-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

div[data-app=true] .datama-context-menu .datama-context-menu-color-swatch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-color-swatch {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  flex: 0 0 auto;
  pointer-events: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-element:hover .datama-context-menu-color-swatch,
div[data-app=true] .datama-context-menu .datama-context-menu-element:focus-within .datama-context-menu-color-swatch {
  border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 4px rgba(var(--color-dark-rgb), 0.12);
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-color-swatch,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-color-swatch {
  border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(var(--datama-primary-rgb, 73, 158, 149), 0.35);
}

div[data-app=true] .datama-context-menu .datama-context-menu-element-container {
  display: inline-block;
  flex: 1 1 auto;
  white-space: nowrap;
  padding: 0;
  font-weight: 400;
  text-rendering: geometricprecision;
  color: inherit;
  text-decoration: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-shortcut {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  flex: 0 0 auto;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-shortcut > kbd {
  min-width: 16px;
  padding: 0 4px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(var(--color-dark-rgb), 0.04);
  font-family: inherit;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  color: rgba(var(--color-dark-rgb), 0.6);
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-documentation {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--color-dark-rgb), 0.35);
  border-radius: 50%;
  font-size: 9px;
  line-height: 12px;
  font-weight: 600;
  color: rgba(var(--color-dark-rgb), 0.55);
  cursor: help;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-documentation:hover {
  border-color: var(--datama-primary);
  color: var(--datama-primary);
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-caret {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 14px;
  color: var(--icon-action-color);
}

/* Items without shortcut still push the caret/documentation to the end */
div[data-app=true] .datama-context-menu .datama-context-menu-slot-caret:first-of-type,
div[data-app=true] .datama-context-menu .datama-context-menu-element-container + .datama-context-menu-slot-caret,
div[data-app=true] .datama-context-menu .datama-context-menu-element-container + .datama-context-menu-slot-documentation {
  margin-left: auto;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-checkbox {
  flex: 0 0 auto;
  margin-right: 8px;
  width: 14px;
  height: 14px;
  accent-color: var(--datama-primary, #0066cc);
  cursor: pointer;
}

/* Dense switch inside a row. Generic `.datama-input` is a 200px text field
   (min-width, padding, 0.5rem margin) and must not leak onto this slot. */
div[data-app=true] .datama-context-menu .datama-context-menu-slot-switch.datama-input-switch {
  box-sizing: border-box;
  flex: 0 0 28px;
  align-self: center;
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 16px !important;
  min-height: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 0 0 0 auto !important;
  border-radius: 999px;
  background: rgba(var(--color-dark-rgb), 0.22);
  cursor: pointer;
  transform: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-switch.datama-input-switch::before {
  width: 12px;
  height: 12px;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-switch.datama-input-switch[data-value=true] {
  background: var(--datama-primary);
  border-color: var(--datama-primary);
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-switch.datama-input-switch[data-value=true]::before {
  left: calc(100% - 14px);
  transform: translateY(-50%);
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-switch.datama-input-switch:hover:not(.datama-input-disabled) {
  transform: none;
}

div[data-app=true] .datama-context-menu .datama-context-menu-element-has-switch:hover {
  background: rgba(var(--color-dark-rgb), 0.06);
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-numeric-input {
  width: 44px;
  flex: 0 0 44px;
  margin-left: auto;
  padding: 0 4px;
  border: none;
  outline: none;
  border-radius: 6px;
  background: rgba(var(--color-dark-rgb), 0.06);
  font-family: inherit;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: inherit;
  -moz-appearance: textfield;
}

div[data-app=true] .datama-context-menu .datama-context-menu-slot-numeric-input::-webkit-outer-spin-button,
div[data-app=true] .datama-context-menu .datama-context-menu-slot-numeric-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

div[data-app=true] .datama-context-menu .datama-context-menu-element.selected .datama-context-menu-slot-numeric-input,
div[data-app=true] .datama-context-menu .datama-context-menu-element.active .datama-context-menu-slot-numeric-input {
  background: rgba(var(--datama-primary-rgb), 0.12);
  color: var(--datama-primary);
}

/* ------------------------------------------------------------------ */
/* Interest gauges (Split by…)                                        */
/* ------------------------------------------------------------------ */
/* Formerly in `__waterfall.css`, aimed at nested `li > ul`. Flyouts are now
   siblings of the scroll body, so those selectors never match. */
div[data-app=true] .datama-context-menu .datama-context-menu-element.has-interest-figure {
  padding-right: 148px;
}

div[data-app=true] .datama-context-menu .has-interest-figure > .datama-context-menu-element-container {
  min-width: 0;
  overflow: hidden;
}

div[data-app=true] .datama-context-menu .figure-label {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
}

div[data-app=true] .datama-context-menu .figure-label > .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px;
}

div[data-app=true] .datama-context-menu .figure-label > .detailed:empty {
  display: none;
}

div[data-app=true] .datama-context-menu .figure {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 8px;
  width: 132px;
  margin: 0;
  pointer-events: none;
}

div[data-app=true] .datama-context-menu .figure::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 6px;
  border-radius: 999px;
  background: rgba(var(--color-dark-rgb), 0.1);
  transform: translateY(-50%);
}

div[data-app=true] .datama-context-menu .figure > .bar {
  position: absolute;
  left: 0;
  top: 50%;
  display: block;
  height: 6px;
  max-width: 100%;
  border-radius: 999px;
  background: rgb(var(--datama-primary-rgb));
  transform: translateY(-50%);
}

div[data-app=true] .datama-context-menu .steps .figure > .bar {
  background: rgb(var(--color-secondary-rgb));
}

div[data-app=true] .datama-context-menu .figure > .datama-label {
  position: absolute;
  left: 0;
  right: 0;
  top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  height: 12px;
  opacity: 0;
  overflow: hidden;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  color: rgba(var(--color-dark-rgb), 0.55);
  transition: opacity var(--transition-in);
}

div[data-app=true] .datama-context-menu .figure > .datama-label > .datama-label-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div[data-app=true] .datama-context-menu .figure > .datama-label > .value {
  flex: 0 0 auto;
  font-weight: 600;
}

div[data-app=true] .datama-context-menu .has-interest-figure:hover .figure::before,
div[data-app=true] .datama-context-menu .has-interest-figure:hover .figure > .bar,
div[data-app=true] .datama-context-menu .has-interest-figure.selected .figure::before,
div[data-app=true] .datama-context-menu .has-interest-figure.selected .figure > .bar,
div[data-app=true] .datama-context-menu .has-interest-figure.active .figure::before,
div[data-app=true] .datama-context-menu .has-interest-figure.active .figure > .bar {
  top: 6px;
  transform: none;
}

div[data-app=true] .datama-context-menu .has-interest-figure:hover .figure > .datama-label,
div[data-app=true] .datama-context-menu .has-interest-figure.selected .figure > .datama-label,
div[data-app=true] .datama-context-menu .has-interest-figure.active .figure > .datama-label {
  opacity: 1;
}

/* While the pointer is in the list, only the hovered row keeps its score. */
div[data-app=true] .datama-context-menu .datama-context-menu-scroll:hover .has-interest-figure:not(:hover) .figure::before,
div[data-app=true] .datama-context-menu .datama-context-menu-scroll:hover .has-interest-figure:not(:hover) .figure > .bar,
div[data-app=true] .datama-context-menu .datama-context-menu-sub:hover .has-interest-figure:not(:hover) .figure::before,
div[data-app=true] .datama-context-menu .datama-context-menu-sub:hover .has-interest-figure:not(:hover) .figure > .bar {
  top: 50%;
  transform: translateY(-50%);
}

div[data-app=true] .datama-context-menu .datama-context-menu-scroll:hover .has-interest-figure:not(:hover) .figure > .datama-label,
div[data-app=true] .datama-context-menu .datama-context-menu-sub:hover .has-interest-figure:not(:hover) .figure > .datama-label {
  opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Sub menus (flyouts hosted outside the scroll body)                 */
/* ------------------------------------------------------------------ */
div[data-app=true] .datama-context-menu .datama-context-menu-sub {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 38px -10px rgba(22, 23, 24, 0.35), 0 10px 20px -15px rgba(22, 23, 24, 0.2);
  list-style: none;
  position: absolute;
  padding: 5px;
  left: 100%;
  top: -5px;
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  width: max-content;
  min-width: 160px;
  background-color: white;
  margin: 0;
  z-index: 1000;
}

div[data-app=true] .datama-context-menu .datama-context-menu-sub.open {
  display: inline-flex !important;
}

div[data-app=true] .datama-context-menu .datama-context-menu-sub.scrollable {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ------------------------------------------------------------------ */
/* Expansion direction (quadrant based)                               */
/* ------------------------------------------------------------------ */
/* Defaults used before JS positions flyouts; keep caret side flip. */
div[data-app=true] .datama-context-menu.expand-right .datama-context-menu-sub {
  left: 100%;
  right: unset;
}

div[data-app=true] .datama-context-menu.expand-left .datama-context-menu-sub {
  left: unset;
  right: 100%;
}

/* Caret moves to the expansion side */
div[data-app=true] .datama-context-menu.expand-left .datama-context-menu-slot-caret {
  order: -1;
  margin-left: 0;
  transform: scaleX(-1);
}

div[data-app=true] .datama-context-menu.expand-down .datama-context-menu-sub {
  top: -5px;
  bottom: unset;
}

div[data-app=true] .datama-context-menu.expand-up .datama-context-menu-sub {
  top: unset;
  bottom: -5px;
}

.datama-market-equation-container {
  --market-equation-cell-pad-x: 0.35rem;
  --market-equation-cell-pad-y: 0.25rem;
  --market-equation-input-max: 12rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 10;
  max-width: 100%;
  box-sizing: border-box;
}
.datama-market-equation-container > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.datama-market-equation-container .datama-table-container,
.datama-market-equation-container .datama-reactive-table-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  margin-bottom: 0;
}
.datama-market-equation-container .datama-table,
.datama-market-equation-container .datama-reactive-table {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  table-layout: fixed;
}
.datama-market-equation-container .datama-table > .datama-table-tbody > .datama-table-row .datama-table-td,
.datama-market-equation-container .datama-table > .datama-table-thead > .datama-table-row .datama-table-th,
.datama-market-equation-container .datama-table > .datama-table-tfoot > .datama-table-row > .datama-table-th {
  padding: var(--market-equation-cell-pad-y) var(--market-equation-cell-pad-x);
  min-width: 0;
}
.datama-market-equation-container .datama-table .datama-input-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.datama-market-equation-container .datama-table .datama-input-select:not(.datama-input-emoji-picker) {
  width: 100% !important;
  max-width: min(100%, var(--market-equation-input-max)) !important;
  min-width: 0 !important;
  padding-left: 0.5rem;
  padding-right: 1.75rem;
  box-sizing: border-box;
}
.datama-market-equation-container .datama-table .datama-input-select:not(.datama-input-emoji-picker) > .datama-input-select-value,
.datama-market-equation-container .datama-table .datama-input-select:not(.datama-input-emoji-picker) > .datama-input-select-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.datama-market-equation-container .datama-table .datama-input-emoji-picker {
  width: 1.75rem !important;
  min-width: 1.75rem !important;
  max-width: 1.75rem !important;
  height: 1.75rem;
  min-height: 1.75rem;
  padding: 0 !important;
  margin-inline: auto;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}
.datama-market-equation-container .datama-table .datama-input-emoji-picker > .datama-input-emoji-picker-value {
  overflow: visible;
  text-overflow: clip;
  line-height: 1;
}
.datama-market-equation-container .datama-table .datama-input:not(.datama-input-select):not(.datama-input-switch):not(.datama-input-button-group) {
  width: 100% !important;
  max-width: min(100%, var(--market-equation-input-max)) !important;
  min-width: 0 !important;
  padding: 0.25rem 0.4rem;
  box-sizing: border-box;
}
.datama-market-equation-container .datama-table .datama-input[data-key=unit],
.datama-market-equation-container .datama-table .datama-input[data-key=totalStepUnit] {
  padding: 0.25rem 0.35rem;
  text-align: center;
}
.datama-market-equation-container .datama-table-tfoot .datama-table-row:not(.small) .datama-table-th:first-child .datama-market-equation-total-formula .datama-input-container,
.datama-market-equation-container .datama-table-tfoot .datama-table-row:not(.small) .datama-table-th:first-child .datama-market-equation-total-formula .datama-input:not(.datama-input-select) {
  flex: 1 1 auto;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.datama-market-equation-container > .datama-market-equation-steps-container {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
  height: 50px;
  width: max-content;
  min-width: 100%;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  overflow: visible;
}
.datama-market-equation-container > .datama-market-equation-steps-container > .datama-market-equation-parenthesis,
.datama-market-equation-container > .datama-market-equation-steps-container > .datama-market-equation-operator {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 0.5rem;
  font-size: 24px;
  font-weight: 500;
  color: var(--datama-primary);
}

.datama-market-equation-total-formula {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.datama-market-equation-total-label {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--text-structure, var(--color-dark));
  white-space: nowrap;
}

.datama-market-equation-operand-container {
  margin: 0 0.25rem;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--color-white);
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
  min-width: 120px;
}
.datama-market-equation-operand-container::before, .datama-market-equation-operand-container::after {
  position: absolute;
  content: "";
  top: 0;
  bottom: 0;
  width: 4px;
  border: 1px solid rgba(var(--datama-primary-rgb), 0.2);
  border-radius: 6px;
}
.datama-market-equation-operand-container::before {
  left: 0;
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.datama-market-equation-operand-container::after {
  right: 0;
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.datama-market-equation-value-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem;
}
.datama-market-equation-value-container > * {
  display: inline-block;
  box-sizing: border-box;
}
.datama-market-equation-value-container > .datama-market-equation-value {
  flex: 1;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-dark);
  text-align: center;
}
.datama-market-equation-value-container > .datama-market-equation-operator {
  padding: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--datama-primary);
  min-width: 16px;
  text-align: center;
}
.datama-market-equation-value-container > .datama-market-equation-operator + .datama-market-equation-value {
  flex: 1;
  padding: 0.25rem 0.5rem;
}

.datama-market-equation-editor {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 0.8125rem;
}
.datama-market-equation-editor-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.datama-market-equation-editor-outline {
  display: flex;
  flex-direction: column;
  flex: 1 1 340px;
  min-width: 300px;
}
.datama-market-equation-editor-row {
  display: flex;
  align-items: stretch;
}
.datama-market-equation-editor-guide {
  position: relative;
  flex: 0 0 20px;
}
.datama-market-equation-editor-guide::before {
  content: "";
  position: absolute;
  top: -8px;
  bottom: 0;
  left: 9px;
  border-left: 1px solid rgba(var(--color-dark-rgb), 0.15);
}
.datama-market-equation-editor-guide.elbow::after {
  content: "";
  position: absolute;
  top: -8px;
  left: 9px;
  width: 10px;
  height: calc(50% + 8px);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.15);
  border-bottom-left-radius: 6px;
}
.datama-market-equation-editor-operator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: rgba(var(--datama-primary-rgb), 0.75);
}
.datama-market-equation-editor-operator.complex {
  color: rgba(var(--color-dark-rgb), 0.4);
  font-style: italic;
}
.datama-market-equation-editor-operator-select {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: rgba(var(--datama-primary-rgb), 0.75);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  width: 22px;
  height: 22px;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.datama-market-equation-editor-operator-select:hover, .datama-market-equation-editor-operator-select:focus {
  border-color: rgba(var(--datama-primary-rgb), 0.4);
  background: rgba(var(--datama-primary-rgb), 0.06);
  color: var(--datama-primary);
}
.datama-market-equation-editor-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 8px;
  background: var(--color-white);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.datama-market-equation-editor-card:hover {
  border-color: rgba(var(--datama-primary-rgb), 0.45);
  box-shadow: 0 1px 3px rgba(var(--color-dark-rgb), 0.08);
}
.datama-market-equation-editor-row[data-selected=true] .datama-market-equation-editor-card {
  border-color: rgba(var(--datama-primary-rgb), 0.65);
  background: rgba(var(--datama-primary-rgb), 0.04);
}
.datama-market-equation-editor-card[data-type=non-simplifiable] {
  border-left-width: 3px;
  border-left-color: rgba(var(--color-dark-rgb), 0.35);
}
.datama-market-equation-editor-card[data-type=simplifiable], .datama-market-equation-editor-card[data-type=total] {
  border-left-width: 3px;
  border-left-color: rgba(var(--datama-primary-rgb), 0.55);
}
.datama-market-equation-editor-emoji {
  display: inline-flex;
  align-items: center;
  font-size: 0.8125rem;
}
.datama-market-equation-editor-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  line-height: 20px;
  color: var(--color-dark);
  cursor: pointer;
  padding: 0;
}
.datama-market-equation-editor-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.datama-market-equation-editor-card:hover .datama-market-equation-editor-actions, .datama-market-equation-editor-card:focus-within .datama-market-equation-editor-actions {
  opacity: 1;
  pointer-events: auto;
}
.datama-button.datama-market-equation-editor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(var(--color-dark-rgb), 0.88);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
}
.datama-button.datama-market-equation-editor-button:hover {
  background: rgba(var(--color-dark-rgb), 0.06);
  color: var(--color-dark);
}
.datama-button.datama-market-equation-editor-button.disabled {
  color: rgba(var(--color-dark-rgb), 0.16);
  cursor: not-allowed;
  font-weight: 400;
}
.datama-button.datama-market-equation-editor-button.disabled:hover {
  background: transparent;
  color: rgba(var(--color-dark-rgb), 0.16);
}
.datama-button.datama-market-equation-editor-button svg {
  display: block;
  flex-shrink: 0;
}
.datama-button.datama-market-equation-editor-button > .datama-button-icon {
  height: auto;
  margin: 0;
}
.datama-button.datama-market-equation-editor-button > .datama-button-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  line-height: 1;
  min-width: 0.75rem;
}

.datama-market-equation-editor-inserter {
  position: relative;
  height: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.datama-market-equation-editor-inserter .datama-button.datama-market-equation-editor-inserter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-height: 18px;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 0;
  border: 1px solid rgba(var(--datama-primary-rgb), 0.45);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--datama-primary);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.datama-market-equation-editor-inserter .datama-button.datama-market-equation-editor-inserter-button svg {
  display: block;
}
.datama-market-equation-editor-inserter:hover .datama-button.datama-market-equation-editor-inserter-button {
  opacity: 1;
  transform: scale(1);
}
.datama-market-equation-editor-detail {
  flex: 1 1 280px;
  min-width: 260px;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 10px;
  background: var(--color-white);
  box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.06);
  position: sticky;
  top: 0;
  max-height: 420px;
  overflow-y: auto;
}
.datama-market-equation-editor-detail .datama-input-select-value-text,
.datama-market-equation-editor-detail .datama-input:not(.datama-input-select):not(.datama-input-switch):not(.datama-input-button-group) {
  text-transform: none;
}
.datama-market-equation-editor-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.datama-market-equation-editor-detail-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-dark);
}
.datama-market-equation-editor-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.datama-market-equation-editor-field-label-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.datama-market-equation-editor-field-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: normal;
  color: rgba(var(--color-dark-rgb), 0.72);
}
.datama-market-equation-editor-field-label.datama-help-tooltip {
  cursor: help;
}
.datama-market-equation-editor-field-shortcuts {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.datama-market-equation-editor-field-error {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #b42318;
}
.datama-market-equation-editor-field-status {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.3;
}
.datama-market-equation-editor-field-status.is-error {
  color: #b42318;
}
.datama-market-equation-editor-field-status.is-warning {
  color: #a87b2c;
}
.datama-market-equation-editor-field.has-error .datama-input, .datama-market-equation-editor-field.has-error .datama-market-equation-editor-sentence {
  border-color: #b42318;
}
.datama-market-equation-editor-field.has-warning .datama-input, .datama-market-equation-editor-field.has-warning .datama-market-equation-editor-sentence {
  border-color: #f0d19a;
  background-color: rgba(250, 236, 205, 0.45);
}
.datama-market-equation-editor-card[data-validation=error] {
  border-color: #f97066;
  box-shadow: inset 3px 0 0 #f04438;
}
.datama-market-equation-editor-card[data-validation=warning] {
  border-color: #f0d19a;
  box-shadow: inset 3px 0 0 #e8c078;
}
.datama-market-equation-editor-validation {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 8px;
}
.datama-market-equation-editor-validation-panel {
  border-radius: 6px;
  padding: 8px 10px;
  border: 1px solid transparent;
}
.datama-market-equation-editor-validation-panel.is-error {
  background: rgba(240, 68, 56, 0.08);
  border-color: rgba(240, 68, 56, 0.35);
  color: #b42318;
}
.datama-market-equation-editor-validation-panel.is-warning {
  background: rgba(250, 236, 205, 0.65);
  border-color: rgba(232, 192, 120, 0.55);
  color: #a87b2c;
}
.datama-market-equation-editor-validation-title {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 4px;
}
.datama-market-equation-editor-validation-list {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.72rem;
  line-height: 1.35;
}
.datama-market-equation-editor-detail-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.datama-market-equation-editor-detail-divider::before, .datama-market-equation-editor-detail-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
}
.datama-market-equation-editor-detail-divider-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(var(--color-dark-rgb), 0.35);
}
.datama-market-equation-editor-sentence {
  padding: 8px 10px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: var(--border-radius, 6px);
  font-size: 0.8125rem;
  line-height: 1.9;
  min-height: 38px;
  background: var(--color-white);
  color: rgb(var(--color-dark-rgb));
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  word-break: break-word;
}
.datama-market-equation-editor-sentence:focus {
  border-color: var(--datama-primary);
  box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.12);
}
.datama-market-equation-editor-sentence-chip {
  display: inline-block;
  padding: 0 7px;
  margin: 0 1px;
  border-radius: 10px;
  background: rgba(var(--datama-primary-rgb), 0.1);
  border: 1px solid rgba(var(--datama-primary-rgb), 0.25);
  color: var(--datama-primary);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}
.datama-market-equation-editor-formula-hint {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.35;
  color: rgba(var(--color-dark-rgb), 0.45);
}
.datama-market-equation-editor--insert-mode .datama-market-equation-editor-row[data-equation-insert-target=true] .datama-market-equation-editor-card {
  cursor: copy;
  border-color: rgba(var(--datama-primary-rgb), 0.55);
  box-shadow: inset 0 0 0 1px rgba(var(--datama-primary-rgb), 0.2);
}
.datama-market-equation-editor--insert-mode .datama-market-equation-editor-row[data-equation-insert-target=true] .datama-market-equation-editor-label {
  color: var(--datama-primary);
}
.datama-dialog .datama-market-equation-fullwidth:has(.datama-market-equation-editor) {
  margin: 0;
  max-width: 100%;
}

.datama-market-equation-editor-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  padding: 0 4px 4px 0;
}

.datama-comparison-form {
  --datama-comparison-section-gap: var(--studio-form-field-gap, var(--studio-space-2, 10px));
  --datama-comparison-inline-inset: 0.5rem;
  font-family: var(--studio-form-font-family, var(--font-family));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--datama-comparison-section-gap);
  width: 100%;
  min-width: 0;
}
.datama-comparison-form .datama-fieldset-wrapper {
  margin-bottom: 0;
}
.datama-comparison-form .datama-fieldset-wrapper-inline + .datama-fieldset-wrapper-inline,
.datama-comparison-form .datama-fieldset-wrapper:has(.datama-fieldset-inline) + .datama-fieldset-wrapper:has(.datama-fieldset-inline) {
  margin-top: 0;
}
.datama-comparison-form .datama-fieldset-inline .datama-fieldset-container {
  padding: var(--datama-space-1, 4px) var(--datama-space-2, 8px) var(--datama-space-3, 12px);
  gap: var(--datama-comparison-section-gap);
}
.datama-comparison-form .datama-fieldset-wrapper-inline .datama-fieldset-legend-container,
.datama-comparison-form .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container {
  margin-bottom: 2px;
}
.datama-comparison-form .datama-form__create {
  margin-top: 0;
}

.datama-comparison-form-entries {
  display: flex;
  flex-direction: column;
  gap: var(--datama-comparison-section-gap, var(--datama-space-3, 12px));
  align-content: start;
  width: 100%;
}

.datama-comparison-entry-tile {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--datama-comparison-section-gap, var(--datama-space-3, 12px));
  overflow: visible;
  border: 1px solid var(--datama-border-subtle, rgba(0, 0, 0, 0.1));
  border-radius: var(--datama-radius-sm, 4px);
  padding: var(--datama-space-2, 8px) var(--datama-space-2, 8px) var(--datama-space-3, 12px);
  background: var(--datama-surface-raised, #fff);
  font-family: var(--font-family);
  transition: background var(--transition-out, 0.2s ease-out), border-color var(--transition-out, 0.2s ease-out), box-shadow var(--transition-out, 0.2s ease-out);
}
.datama-comparison-entry-tile:hover, .datama-comparison-entry-tile:focus-within {
  border-color: rgba(var(--datama-primary-rgb, 0, 102, 204), 0.35);
  box-shadow: 0 0 0 1px rgba(var(--datama-primary-rgb, 0, 102, 204), 0.12);
}
.datama-comparison-entry-tile .datama-comparison-entry-sentence-head {
  position: relative;
  z-index: 0;
}
.datama-comparison-entry-tile .datama-comparison-entry-delete.datama-button.no-text {
  position: absolute;
  top: 0.35rem;
  right: 0.35rem;
  z-index: 5;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  margin: 0;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  color: var(--datama-text-muted, rgba(0, 0, 0, 0.55));
  background: var(--datama-surface-raised, #fff);
  border: 1px solid var(--datama-border-subtle, rgba(0, 0, 0, 0.12));
  border-radius: var(--datama-radius-sm, 4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: opacity var(--transition-out, 0.2s ease-out), color var(--transition-out, 0.2s ease-out), border-color var(--transition-out, 0.2s ease-out), background var(--transition-out, 0.2s ease-out);
}
.datama-comparison-entry-tile .datama-comparison-entry-delete.datama-button.no-text > .datama-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 0;
  pointer-events: none;
}
.datama-comparison-entry-tile .datama-comparison-entry-delete.datama-button.no-text > .datama-button-icon > svg {
  display: block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  overflow: visible;
}
.datama-comparison-entry-tile .datama-comparison-entry-delete.datama-button.no-text > .datama-button-icon > svg path {
  fill: currentColor;
}
.datama-comparison-entry-tile.datama-comparison-entry-tile--deletable .datama-comparison-entry-sentence-head {
  padding-right: 2rem;
}
.datama-comparison-entry-tile.datama-comparison-entry-tile--deletable {
  /* Same specificity as hidden rule (.tile .delete.datama-button.no-text) or display:none wins. */
}
.datama-comparison-entry-tile.datama-comparison-entry-tile--deletable .datama-comparison-entry-delete.datama-button.no-text {
  display: inline-flex;
  opacity: 0.55;
  pointer-events: auto;
}
.datama-comparison-entry-tile.datama-comparison-entry-tile--deletable:hover .datama-comparison-entry-delete.datama-button.no-text, .datama-comparison-entry-tile.datama-comparison-entry-tile--deletable:focus-within .datama-comparison-entry-delete.datama-button.no-text, .datama-comparison-entry-tile.datama-comparison-entry-tile--deletable .datama-comparison-entry-delete.datama-button.no-text:hover, .datama-comparison-entry-tile.datama-comparison-entry-tile--deletable .datama-comparison-entry-delete.datama-button.no-text:focus-visible {
  opacity: 1;
  color: var(--datama-danger, #c62828);
  border-color: rgba(198, 40, 40, 0.35);
  background: rgba(198, 40, 40, 0.06);
}

.datama-comparison-row {
  display: grid;
  grid-template-columns: minmax(88px, 110px) 1fr;
  align-items: center;
  gap: var(--datama-space-2, 8px) var(--datama-space-3, 12px);
  margin-bottom: var(--datama-space-2, 8px);
}

.datama-comparison-row-label {
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.52));
}

.datama-comparison-row-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
}

.datama-comparison-row-controls-clause {
  flex-wrap: wrap;
  gap: var(--datama-space-1, 4px);
}

.datama-comparison-row-controls .datama-input-select {
  min-width: 160px;
  max-width: 100%;
}

.datama-comparison-entry-tile .datama-comparison-row-controls .datama-input-select {
  min-width: 0;
}

.datama-comparison-entry-sentence-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--datama-space-1, 4px) var(--datama-space-2, 8px);
  margin-bottom: var(--datama-space-2, 8px);
  min-width: 0;
  width: 100%;
}

.datama-comparison-sentence-text {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.52));
  white-space: nowrap;
}

.datama-comparison-entry-sentence-head .datama-input-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 4.5rem;
  max-width: 10rem;
}

.datama-comparison-sentence-vs {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: left;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.45));
}

.datama-comparison-entry-advanced-toolbar {
  display: flex;
  justify-content: flex-start;
  margin-top: var(--datama-space-2, 8px);
}

.datama-comparison-entry-advanced-filters {
  width: 100%;
  min-width: 0;
  margin-top: var(--datama-space-1, 4px);
}

.datama-comparison-entry-advanced-filters .datama-filters-form {
  gap: var(--datama-space-1, 4px);
}

.datama-comparison-entry-dimension {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--datama-space-1, 4px);
  min-height: 0;
  overflow: visible;
  width: 100%;
}

.datama-comparison-entry-tile .datama-filter-clause-row {
  margin-bottom: var(--datama-space-1, 4px);
}

.datama-comparison-entry-tile .datama-comparison-row {
  grid-template-columns: minmax(4.25rem, max-content) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--datama-space-2, 8px);
  margin-bottom: 0;
}

.datama-comparison-entry-tile .datama-comparison-row--compare-by {
  grid-template-columns: max-content minmax(0, 1fr);
  margin-bottom: var(--datama-space-2, 8px);
  padding-right: 1.5rem;
}
.datama-comparison-entry-tile .datama-comparison-row--compare-by .datama-comparison-row-label {
  white-space: nowrap;
  padding-right: var(--datama-space-2, 8px);
}
.datama-comparison-entry-tile .datama-comparison-row--compare-by .datama-comparison-row-controls {
  justify-content: flex-end;
}
.datama-comparison-entry-tile .datama-comparison-row--compare-by .datama-input-select {
  flex: 0 1 auto;
  width: auto;
  min-width: 4.5rem;
  max-width: 6.75rem;
  margin-left: auto;
}

.datama-comparison-entry-tile .datama-comparison-row-controls {
  justify-content: flex-end;
  min-width: 0;
}

/* Light Start/End: operator + value(s) on one row (date range stays inline). */
.datama-comparison-entry-tile .datama-comparison-row-controls-clause {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--datama-space-1, 4px);
  min-width: 0;
}

/* Values / operators: same sans stack, slightly stronger than row labels. */
.datama-comparison-entry-tile .datama-input-select.datama-input-select-light {
  padding: 0.125rem 1.125rem 0.125rem 0.25rem;
  min-height: 0;
  font-family: var(--font-family);
  font-size: 0.8125rem;
}
.datama-comparison-entry-tile .datama-input-select.datama-input-select-light > .datama-input-select-value {
  font-weight: 500;
  color: var(--text-body, rgba(var(--color-dark-rgb, 0, 0, 0), 0.88));
}
.datama-comparison-entry-tile .datama-input-select.datama-input-select-light:hover:not(.disabled) {
  background: rgba(var(--color-dark-rgb, 0, 0, 0), 0.04);
  border-radius: 4px;
}

.datama-comparison-entry-tile .datama-input:not(.datama-input-switch):not(.datama-input-select):not(.datama-input-light) {
  min-width: 0;
  max-width: none;
  font-family: var(--input-font-family, var(--font-family));
  font-size: var(--input-font-size);
  font-weight: var(--input-value-font-weight, 600);
}

.datama-comparison-entry-tile .datama-input-select:not(.datama-input-select-light) {
  min-width: 0;
  max-width: none;
  font-family: var(--input-font-family, var(--font-family));
  font-size: var(--input-font-size);
  font-weight: var(--input-value-font-weight, 600);
}

/* Boxed operator select + value inputs share one row height in comparison tiles */
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--master-bar) .datama-filter-clause-operator .datama-input-select:not(.datama-input-select-light),
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--master-bar) .datama-filter-clause-values .datama-input:not(.datama-input-light):not(.datama-input-select) {
  height: var(--input-min-height);
  min-height: var(--input-min-height);
  box-sizing: border-box;
  line-height: var(--input-line-height);
}

.datama-comparison-entry-tile .datama-filter-clause-row--sentence.datama-filter-clause-row--leading-operator {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--datama-space-1, 4px);
  grid-template-columns: unset;
  width: 100%;
}
.datama-comparison-entry-tile .datama-filter-clause-row--sentence.datama-filter-clause-row--leading-operator .datama-filter-clause-operator {
  flex: 0 1 auto;
}
.datama-comparison-entry-tile .datama-filter-clause-row--sentence.datama-filter-clause-row--leading-operator .datama-comparison-row-controls {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}
.datama-comparison-entry-tile .datama-filter-clause-row--sentence.datama-filter-clause-row--leading-operator .datama-filter-clause-values {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.datama-filter-clause-connector {
  flex: 0 0 auto;
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.52));
  white-space: nowrap;
}

.datama-filter-clause-row--sentence-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--datama-space-1, 4px);
  width: 100%;
  grid-template-columns: unset;
  margin-bottom: var(--datama-space-1, 4px);
}
.datama-filter-clause-row--sentence-filter .datama-filter-clause-where {
  font-family: var(--font-family);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.52));
  white-space: nowrap;
}
.datama-filter-clause-row--sentence-filter .datama-filter-clause-column .datama-input-select {
  min-width: 4.5rem;
  max-width: 10rem;
}
.datama-filter-clause-row--sentence-filter .datama-comparison-row-controls {
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
}
.datama-filter-clause-row--sentence-filter .datama-filter-clause-values {
  flex: 0 1 auto;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.datama-filter-clause-row--sentence-filter .datama-comparison-row-controls {
  flex: 0 1 auto;
  justify-content: flex-start;
}

.datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter,
.datama-comparison-entry-tile .datama-filters-form .datama-filter-clause-row--sentence-filter {
  flex-wrap: wrap;
  justify-content: flex-start;
}
.datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter .datama-comparison-row-controls,
.datama-comparison-entry-tile .datama-filters-form .datama-filter-clause-row--sentence-filter .datama-comparison-row-controls {
  flex: 0 1 auto;
  justify-content: flex-start;
  width: auto;
  max-width: 100%;
}
.datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter .datama-filter-clause-values,
.datama-comparison-entry-tile .datama-filters-form .datama-filter-clause-row--sentence-filter .datama-filter-clause-values {
  flex: 0 1 auto;
  justify-content: flex-start;
}
.datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter .datama-filter-clause-values > .datama-input-container,
.datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter .datama-filter-clause-values > .datama-input-select,
.datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter .datama-filter-clause-values > .datama-input:not(.datama-input-select),
.datama-comparison-entry-tile .datama-filters-form .datama-filter-clause-row--sentence-filter .datama-filter-clause-values > .datama-input-container,
.datama-comparison-entry-tile .datama-filters-form .datama-filter-clause-row--sentence-filter .datama-filter-clause-values > .datama-input-select,
.datama-comparison-entry-tile .datama-filters-form .datama-filter-clause-row--sentence-filter .datama-filter-clause-values > .datama-input:not(.datama-input-select) {
  flex: 0 1 auto;
  width: auto;
  min-width: 4.5rem;
  max-width: 10rem;
}

.datama-filters-form .datama-filter-clause-row--sentence-filter .datama-input-select.datama-input-select-light {
  padding: 0.125rem 1.125rem 0.125rem 0.25rem;
  min-height: 0;
  font-size: 0.8125rem;
}

.datama-comparison-entry-tile .datama-filter-clause-row--leading-operator {
  grid-template-columns: minmax(7.5rem, max-content) minmax(0, 1fr);
}
.datama-comparison-entry-tile .datama-filter-clause-row--leading-operator .datama-filter-clause-operator {
  flex: 0 1 auto;
  align-self: center;
  min-width: 0;
  max-width: none;
  width: max-content;
}
.datama-comparison-entry-tile .datama-filter-clause-row--leading-operator .datama-filter-clause-operator .datama-input-select {
  width: max-content;
  min-width: 7.5rem;
  max-width: 11rem;
}
.datama-comparison-entry-tile .datama-filter-clause-row--leading-operator .datama-filter-clause-operator .datama-input-select.datama-input-select-light > .datama-input-select-value {
  overflow: visible;
  text-overflow: clip;
}
.datama-comparison-entry-tile .datama-filter-clause-row--leading-operator .datama-filter-clause-operator .datama-input-select-value-text {
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.datama-comparison-entry-tile .datama-filter-clause-row--leading-operator .datama-comparison-row-controls {
  justify-content: flex-end;
  min-width: 0;
}

.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--leading-operator):not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-operator {
  flex: 0 0 auto;
  width: auto;
  max-width: 38%;
}
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--leading-operator):not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-operator .datama-input-select {
  min-width: 4.75rem;
  width: auto;
  max-width: 100%;
}

.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: var(--datama-space-1, 4px);
}
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values > .datama-input-container,
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values > .datama-input-select,
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values > .datama-input[type=date],
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values > .datama-input[type=number] {
  flex: 1 1 0;
  min-width: 0;
  max-width: 9rem;
  width: auto;
}
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values .datama-input[type=date]:not(.datama-input-light) {
  min-width: 0;
  font-family: var(--input-font-family, var(--font-family));
  font-size: var(--input-font-size);
  font-weight: var(--input-value-font-weight, 600);
  line-height: var(--input-line-height);
}
.datama-comparison-entry-tile .datama-filter-clause-row--full-operator:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values .datama-input[type=date]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding: 0;
  opacity: 0.85;
}

/* Plotter panel field rules use flex-basis 12rem; keep clause values compact in tiles. */
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile {
  font-family: var(--font-family);
}
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile .datama-comparison-row-label {
  font-weight: 400;
}
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile .datama-comparison-entry-sentence-head .datama-input-select {
  flex: 0 1 auto;
  width: auto;
  max-width: 10rem;
}
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile .datama-input-select.datama-input-select-light > .datama-input-select-value {
  font-weight: 500;
}
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter .datama-filter-clause-values .datama-input-container {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 10rem;
  width: auto;
  margin: 0;
}
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile .datama-filter-clause-row--sentence-filter .datama-filter-clause-values .datama-input:not(.datama-input-select) {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 10rem;
  width: auto;
}
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile .datama-filter-clause-row:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values .datama-input-container {
  display: block;
  flex: 1 1 0;
  min-width: 0;
  max-width: 9rem;
  width: auto;
  margin: 0;
}
.plotter .plotter-panel .datama-comparison-form .datama-comparison-entry-tile .datama-filter-clause-row:not(.datama-filter-clause-row--sentence-filter) .datama-filter-clause-values .datama-input:not(.datama-input-select) {
  flex: 1 1 0;
  min-width: 0;
  max-width: 9rem;
  width: 100%;
}

.datama-comparison-reverse-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}
.datama-comparison-reverse-row .datama-comparison-sentence-vs {
  flex: 0 0 auto;
  align-self: center;
}

.datama-comparison-entry-tile .datama-comparison-reverse-button.datama-button.no-text {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.375rem;
  height: 1.375rem;
  width: 1.375rem;
  padding: 0;
  margin: 0 0 0 10px;
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.55));
  background: var(--datama-surface-raised, #fff);
  border: 1px solid var(--datama-border-subtle, rgba(0, 0, 0, 0.12));
  border-radius: var(--datama-radius-sm, 4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: opacity var(--transition-out, 0.2s ease-out), color var(--transition-out, 0.2s ease-out), border-color var(--transition-out, 0.2s ease-out), background var(--transition-out, 0.2s ease-out);
}
.datama-comparison-entry-tile .datama-comparison-reverse-button.datama-button.no-text > .datama-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 0;
  pointer-events: none;
}
.datama-comparison-entry-tile .datama-comparison-reverse-button.datama-button.no-text > .datama-button-icon > svg {
  display: block;
  width: 0.75rem;
  height: 0.75rem;
}
.datama-comparison-entry-tile .datama-comparison-reverse-button.datama-button.no-text:hover, .datama-comparison-entry-tile .datama-comparison-reverse-button.datama-button.no-text:focus-visible {
  color: var(--text-body, rgba(var(--color-dark-rgb, 0, 0, 0), 0.85));
  border-color: rgba(var(--color-dark-rgb, 0, 0, 0), 0.2);
  background: rgba(var(--color-dark-rgb, 0, 0, 0), 0.04);
}

.datama-comparison-entry-tile:hover .datama-comparison-reverse-button.datama-button.no-text,
.datama-comparison-entry-tile:focus-within .datama-comparison-reverse-button.datama-button.no-text,
.datama-comparison-entry-tile .datama-comparison-reverse-button.datama-button.no-text:hover,
.datama-comparison-entry-tile .datama-comparison-reverse-button.datama-button.no-text:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.datama-filter-clause-operator {
  flex: 0 0 auto;
}
.datama-filter-clause-operator .datama-input-select {
  min-width: 52px;
  width: auto;
}

.datama-filter-clause-values {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--datama-space-1, 4px);
  min-width: 0;
}
.datama-filter-clause-values .datama-input-select,
.datama-filter-clause-values .datama-input-container-light,
.datama-filter-clause-values input[type=date],
.datama-filter-clause-values input[type=number] {
  min-width: 120px;
  max-width: 100%;
}

.datama-comparison-entry-metric {
  display: flex;
  flex-direction: column;
  gap: var(--datama-space-2, 8px);
  width: 100%;
  min-width: 0;
}

.datama-comparison-metric-peers {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--datama-space-2, 8px);
  min-height: 0;
  overflow-y: auto;
}

.datama-metric-peer-tile {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--datama-space-2, 8px);
  width: 100%;
  min-width: 0;
  padding: var(--datama-space-2, 8px);
  border: 1px solid var(--datama-border-subtle, rgba(0, 0, 0, 0.1));
  border-radius: var(--datama-radius-sm, 4px);
  background: var(--datama-surface-raised, #fff);
}

.datama-metric-peer-tile-metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--datama-space-1, 4px) var(--datama-space-2, 8px);
  min-width: 0;
  width: 100%;
}
.datama-metric-peer-tile-metrics .datama-input-select.inline {
  flex: 0 1 auto;
  min-width: 4.5rem;
  max-width: 10rem;
}
.datama-metric-peer-tile-metrics .datama-comparison-reverse-row {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--datama-space-1, 4px);
}

.datama-metric-peer-tile-name {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.datama-metric-peer-tile-name .datama-input-container {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.datama-metric-peer-tile-name .datama-input-label {
  flex: 0 0 auto;
  white-space: nowrap;
}

.datama-metric-peer-tile-remove.datama-button.no-text {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  z-index: 2;
  opacity: 0.55;
}

.datama-metric-peer-tile:hover .datama-metric-peer-tile-remove.datama-button.no-text,
.datama-metric-peer-tile:focus-within .datama-metric-peer-tile-remove.datama-button.no-text {
  opacity: 1;
}

.datama-comparison-entry-segment-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.datama-comparison-entry-segment-row .datama-input-container {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  flex-wrap: nowrap;
}
.datama-comparison-entry-segment-row .datama-input-label {
  flex: 0 0 auto;
  min-width: 6.5rem;
}

.datama-comparison-entry-tile .datama-fieldset-wrapper {
  margin-bottom: 0;
}
.datama-comparison-entry-tile .datama-fieldset-wrapper-inline + .datama-fieldset-wrapper-inline,
.datama-comparison-entry-tile .datama-fieldset-wrapper:has(.datama-fieldset-inline) + .datama-fieldset-wrapper:has(.datama-fieldset-inline) {
  margin-top: var(--datama-space-2, 8px);
}
.datama-comparison-entry-tile .datama-fieldset-inline .datama-fieldset-container {
  padding: 2px 0 var(--datama-space-2, 8px) var(--datama-comparison-inline-inset, 0.5rem);
  gap: var(--datama-space-1, 4px);
}
.datama-comparison-entry-tile .datama-fieldset-wrapper-inline .datama-fieldset-legend-container,
.datama-comparison-entry-tile .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container {
  margin-bottom: 2px;
}
.datama-comparison-entry-tile .datama-comparison-entry-advanced-toolbar {
  margin-top: 0;
}
.datama-comparison-entry-tile .datama-form__create {
  padding-left: var(--datama-comparison-inline-inset, 0.5rem);
}
.datama-comparison-entry-tile > .datama-fieldset-wrapper[id*=-comparison-filters-] {
  margin-top: 0;
}
.datama-comparison-entry-tile > .datama-fieldset-wrapper[id*=-comparison-filters-] .datama-fieldset-legend-container {
  margin-top: 2px;
  margin-bottom: var(--datama-space-1, 4px);
}
.datama-comparison-entry-tile > .datama-fieldset-wrapper[id*=-comparison-filters-] .datama-fieldset-inline .datama-fieldset-container {
  padding-top: var(--datama-space-1, 4px);
  padding-bottom: var(--datama-space-2, 8px);
  gap: var(--datama-space-2, 8px);
}
.datama-comparison-entry-tile > .datama-fieldset-wrapper[id*=-comparison-filters-] .datama-comparison-entry-advanced-toolbar {
  padding-bottom: var(--datama-space-1, 4px);
}

.datama-input-select-no-results {
  padding: 8px 12px;
  font-size: 0.85rem;
  opacity: 0.7;
}

.datama-filters-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--datama-space-2, 8px);
  width: 100%;
}

.datama-filters-form-list {
  display: flex;
  flex-direction: column;
  gap: var(--datama-space-2, 8px);
  width: 100%;
}

.datama-filters-form-toolbar {
  display: flex;
  justify-content: flex-start;
}

.datama-filters-form-empty {
  margin: 0;
  padding: var(--datama-space-2, 8px) 0 var(--datama-space-1, 4px);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-label, rgba(var(--color-dark-rgb, 0, 0, 0), 0.45));
}

.datama-button.datama-button-add-filter {
  gap: 0.25rem;
}
.datama-button.datama-button-add-filter:not(.no-text) > .datama-button-icon {
  margin: 0 2px 0 -2px;
}

.datama-button.datama-button-dense {
  min-height: 28px;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  gap: 0.35rem;
}

.datama-button.datama-button-dense:not(.no-text) > .datama-button-icon {
  margin: 0 0.2rem 0 0;
}

.datama-button-icon-filter-add {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.datama-button-icon-filter-add-badge {
  position: absolute;
  right: -0.35rem;
  bottom: -0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.65rem;
  height: 0.65rem;
  padding: 0 0.1rem;
  border-radius: 999px;
  font-size: 0.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--color-white);
  background: rgb(var(--datama-primary-rgb));
  border: 1px solid var(--color-white);
  pointer-events: none;
}

.plotter-panel .datama-form__create .datama-button:not(.no-text),
.plotter-panel .datama-comparison-form-create .datama-button:not(.no-text) {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.625rem;
}

.plotter-panel .datama-form__create .datama-button:not(.no-text) > .datama-button-icon,
.plotter-panel .datama-comparison-form-create .datama-button:not(.no-text) > .datama-button-icon {
  margin: 0 0.25rem 0 0;
}

.datama-comparison-form-toolbar--reference {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.datama-comparison-form-toolbar--reference.datama-fieldset-container {
  gap: 0;
}
.datama-comparison-form-toolbar--reference > .datama-fieldset-row {
  min-height: var(--input-min-height);
}
.datama-comparison-form-toolbar--reference > .datama-fieldset-row .datama-fieldset-right > .datama-input-switch,
.datama-comparison-form-toolbar--reference > .datama-fieldset-row .datama-fieldset-right > .datama-input-select {
  flex: 0 1 auto;
}

.datama-filter-clause-row--columnar {
  grid-template-columns: minmax(100px, 140px) 1fr;
  align-items: center;
}

.datama-filter-clause-column {
  min-width: 0;
}

.datama-filter-clause-column .datama-input-select {
  min-width: 100px;
  max-width: 100%;
}

.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  margin-left: var(--datama-space-1, 4px);
  line-height: 0;
  opacity: 0;
  pointer-events: none;
  color: var(--color-danger);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--datama-radius-sm, 4px);
  transition: opacity var(--transition-out, 0.2s ease-out), color var(--transition-out, 0.2s ease-out), border-color var(--transition-out, 0.2s ease-out), background var(--transition-out, 0.2s ease-out);
}
.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text > .datama-button-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  line-height: 0;
  pointer-events: none;
}
.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text > .datama-button-icon > svg {
  display: block;
  flex-shrink: 0;
  width: 0.875rem;
  height: 0.875rem;
  overflow: visible;
}
.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text > .datama-button-icon > svg path {
  fill: currentColor;
}
.datama-filter-clause-row:hover .datama-filter-clause-remove.datama-button.no-text, .datama-filter-clause-row:focus-within .datama-filter-clause-remove.datama-button.no-text,
.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text:hover,
.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text:focus-visible {
  opacity: 1;
  pointer-events: auto;
  color: var(--color-danger);
  border-color: rgba(var(--color-danger-rgb), 0.35);
  background: rgba(var(--color-danger-rgb), 0.08);
}
.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text:hover,
.datama-filter-clause-row .datama-filter-clause-remove.datama-button.no-text:focus-visible {
  border-color: rgba(var(--color-danger-rgb), 0.5);
  background: rgba(var(--color-danger-rgb), 0.12);
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 *
 * Plotter-owned chrome widget styles. Duplicated from Light
 * (`src/assets/css/modules/configuration/__generic.css + __fonts.css`) with `plotter-*` / `plotter-ui-*`
 * class names so Light CSS cannot style Plotter widgets.
 * `.plotter-ui-panel` avoids colliding with the side chrome `.plotter-panel`.
 *
 * Generated for file : __ui.css project project-deep-sky
 */
/* Plotter divider (toolbar / panel separators). */
.plotter-divider {
  display: inline-block;
}

.plotter-divider:not(.vertical) {
  border-top: var(--border);
  width: 100%;
  height: 1px;
  margin: 5px 0;
  min-width: 10px;
}

.plotter-divider.vertical {
  border-left: var(--border);
  width: 1px;
  height: 1rem !important;
  margin: 2px 10px !important;
  line-height: unset !important;
  min-height: 10px;
  align-self: center;
}

.plotter-divider.plotter-divider-half:not(.vertical) {
  width: 50%;
  margin: 5px 0 5px 50%;
  transform: translateX(-50%);
}

.plotter-divider.plotter-divider-half.vertical {
  height: 50%;
  margin: 50% 5px 0;
  transform: translateY(-50%);
}

/* PlotterIcons roots are <svg class="plotter-icon">. */
.plotter-icon,
svg.plotter-icon {
  display: block;
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  fill: var(--icon-default-color);
  color: var(--icon-default-color);
}

svg.plotter-icon path {
  display: unset;
  height: auto;
  width: auto;
  fill: inherit;
  color: inherit;
}

/* CSS `fill` beats SVG presentation attributes — keep stroke-only glyphs hollow
 * (e.g. font-size-svg / cog-svg) instead of filling closed outlines. */
svg.plotter-icon path[fill=none] {
  fill: none;
}

.plotter-badge {
  transform: scale(0.5);
  position: absolute;
  bottom: -5px;
  right: -10px;
  font-size: 20px;
  line-height: 20px;
  height: fit-content;
  padding: 5px;
  background: var(--color-white);
  border-radius: 50%;
}

/* Portaled Plotter selects must stay out of the plot flex column. */
.plotter > .plotter-input-select-dropdown {
  flex: none;
  width: max-content;
  max-width: none;
  position: absolute;
  z-index: 1500;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 *
 * Plotter-owned chrome widget styles. Duplicated from Light
 * (`src/assets/css/modules/__button.css`) with `plotter-*` / `plotter-ui-*`
 * class names so Light CSS cannot style Plotter widgets.
 * `.plotter-ui-panel` avoids colliding with the side chrome `.plotter-panel`.
 *
 * Generated for file : __ui-button.css project project-deep-sky
 */
.plotter-button {
  position: relative;
  width: fit-content;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 6px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  background: rgba(var(--color-white-rgb), 1);
  color: var(--color-dark);
  cursor: pointer;
  justify-items: center;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  font-size: 0.75rem;
  font-weight: 500;
  min-height: 36px;
  gap: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

.plotter-button:hover:not(:disabled) {
  border-color: rgba(var(--color-dark-rgb), 0.12);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transform: translateY(-1px);
}

.plotter-button:hover > *,
.plotter-button:hover path {
  transition: 0.1s ease-in;
}

.plotter-button > .plotter-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  height: 100%;
}

.plotter-button:not(.no-text) > .plotter-button-icon {
  margin: 0 5px 0 -5px;
}

.plotter-button > .plotter-button-icon svg {
  display: block;
}

.plotter-button.no-text {
  padding: 5px 10px;
}

.plotter-button.primary,
.plotter-button.primary path {
  color: rgb(var(--datama-primary-rgb));
  fill: rgb(var(--datama-primary-rgb));
}

.plotter-button.transparent {
  background: transparent;
  border: 0;
  color: rgb(var(--color-dark-rgb));
}

.plotter-button.transparent:hover {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.plotter-button.secondary,
.plotter-button.secondary path {
  color: rgba(var(--color-dark-rgb), 0.75);
  fill: rgba(var(--color-dark-rgb), 0.75);
}

.plotter-button.primary:not(.no-hover):hover {
  background: var(--state-hover-bg);
  border-color: var(--datama-primary);
  box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}

.plotter-button.secondary:not(.no-hover):hover {
  background: rgba(var(--color-dark-rgb), 0.06) !important;
  border-color: rgba(var(--color-dark-rgb), 0.12);
}

.plotter-button.bg-primary,
.plotter-button.bg-primary path {
  background: var(--datama-primary);
  color: var(--color-white);
  fill: var(--color-white);
  border-color: var(--datama-primary);
}

.plotter-button.bg-primary .plotter-icon,
.plotter-button.bg-primary .plotter-icon path,
.plotter-button.bg-primary svg,
.plotter-button.bg-primary svg path {
  color: var(--color-white);
  fill: var(--color-white);
}

.plotter-button.bg-primary:not(.no-hover):hover {
  background: rgba(var(--datama-primary-rgb), 0.9);
  border-color: rgba(var(--datama-primary-rgb), 0.9);
  box-shadow: 0 2px 4px 0 rgba(var(--datama-primary-rgb), 0.25);
}

.plotter-button.outline-primary {
  background: transparent;
  border: 1px solid var(--datama-primary);
  color: var(--datama-primary);
}

.plotter-button.outline-primary:not(.no-hover):hover {
  background: var(--state-hover-bg);
  border-color: var(--datama-primary);
  box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}

/* Tinted active state — button groups, toggles, tabs */
.plotter-button.active:not(.bg-primary) {
  background-color: var(--state-active-bg) !important;
  border-color: var(--state-active-border) !important;
  color: var(--state-active-text) !important;
}

.plotter-button.active:not(.bg-primary) .plotter-icon,
.plotter-button.active:not(.bg-primary) .plotter-icon path,
.plotter-button.active:not(.bg-primary) path {
  color: var(--state-active-text) !important;
  fill: var(--state-active-text) !important;
}

.plotter-button.active:not(.bg-primary):hover {
  background-color: rgba(var(--datama-primary-rgb), 0.15) !important;
  border-color: rgba(var(--datama-primary-rgb), 0.4) !important;
}

/* Highlight for buttons */
.plotter-button.highlight {
  box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 1);
  background-color: rgba(var(--datama-primary-rgb), 1) !important;
  border-radius: 2px;
}
.plotter-button.highlight .plotter-button-icon path {
  fill: rgb(var(--color-white-rgb)) !important;
}

/* GitHub-style split: primary action + caret + variant menu */
.plotter-button-split {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  width: fit-content;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

.plotter-button-split:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
}

.plotter-button-split > .plotter-button {
  box-shadow: none;
  margin: 0;
}

.plotter-button-split > .plotter-button:hover:not(:disabled) {
  transform: none;
}

.plotter-button-split.plotter-button-split-has-actions > .plotter-button-main {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: 0;
}

.plotter-button-split.plotter-button-split-has-actions > .plotter-button-caret {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  min-width: 2rem;
  border-left: 1px solid rgba(var(--color-dark-rgb), 0.12);
}

.plotter-button-split.bg-primary.plotter-button-split-has-actions > .plotter-button-caret {
  border-left-color: rgba(var(--color-white-rgb), 0.28);
}

.plotter-button-split:not(.plotter-button-split-has-actions) > .plotter-button-caret {
  display: none;
}

.plotter-button-split.disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.plotter-button-menu {
  position: absolute;
  z-index: 10000;
  box-sizing: border-box;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: rgba(var(--color-white-rgb), 1);
  color: var(--color-dark);
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(var(--color-dark-rgb), 0.12);
}

.plotter-button-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--color-dark);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  text-align: left;
}

.plotter-button-menu-item:hover:not(:disabled) {
  background: rgba(var(--color-dark-rgb), 0.06);
}

.plotter-button-menu-item:disabled,
.plotter-button-menu-item.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.plotter-button-menu-item > .plotter-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plotter-button-menu-item > .plotter-button-icon svg {
  display: block;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 *
 * Plotter-owned chrome widget styles. Duplicated from Light
 * (`src/assets/css/modules/__input.css`) with `plotter-*` class names so Light CSS cannot style
 * Plotter widgets. Keep this file a class-renamed copy of the Light source —
 * do not delete rules or comments. An unclosed comment previously dropped
 * relative positioning on the Plotter input root class, so the select caret
 * sat outside the trigger.
 *
 * Generated for file : __ui-input.css project project-deep-sky
 */
.plotter-input-container {
  position: relative;
  display: flex;
  justify-content: flex-start;
  width: fit-content;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
}

/* Responsive input containers - wrap on small screens */
@media (max-width: 900px) {
  .plotter-input-container {
    gap: 0.5rem;
  }
  .plotter-input-container .plotter-input-label {
    width: 100%;
    margin-bottom: 0.25rem;
    margin-right: 0;
  }
  .plotter-input-container .plotter-input:not(.plotter-input-button-group):not(.plotter-input-switch):not(.plotter-input-select) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  /* Special handling for number inputs with units */
  .plotter-input-container.plotter-input-with-unit .plotter-input[type=number] {
    width: calc(100% - 3rem);
    max-width: calc(100% - 3rem);
  }
  /* Select inputs responsive */
  .plotter-input-container .plotter-input-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
@container (max-width: 200px) {
  .plotter-input-container {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .plotter-input-container .plotter-input-label {
    width: 100%;
    margin-bottom: 0.25rem;
    margin-right: 0;
  }
  .plotter-input-container .plotter-input:not(.plotter-input-button-group):not(.plotter-input-switch):not(.plotter-input-select),
  .plotter-input-container .plotter-input-select {
    width: 100%;
    min-width: 150px;
  }
}
.plotter-input-container:not(.plotter-input-container-light) {
  font-size: 14px;
  line-height: 21px;
  margin-bottom: 1.5rem;
}

/* Add margin to inputs with scale effects to prevent cropping */
.plotter-input[type=color] {
  margin: 0.5rem;
}

.plotter-input.plotter-input-switch {
  margin: 0.5rem;
}

/* Labels améliorés */
.plotter-input-label {
  font-weight: 500;
  color: var(--text-label);
  font-size: 0.75rem;
  min-width: 80px;
  white-space: nowrap;
  user-select: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Focus effect on labels */
.plotter-input-container:focus-within .plotter-input-label {
  color: var(--datama-primary);
}

/* Subtle container hover effect */
.plotter-input-container:hover .plotter-input-label {
  color: rgba(var(--color-dark-rgb), 1);
}

/* Help icon styling — muted until interaction
 * Specificity must beat `div[data-app="true"] a { color: primary }` */
div[data-app=true] a.plotter-input-help-icon,
div[data-app=true] .plotter-input-help-icon,
.plotter-input-help-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--help-color);
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: help;
  flex-shrink: 0;
}

div[data-app=true] a.plotter-input-help-icon:hover,
div[data-app=true] .plotter-input-help-icon:hover,
.plotter-input-help-icon:hover {
  color: var(--help-color-hover);
  background: var(--help-bg-hover);
  border-radius: 50%;
}

div[data-app=true] a.plotter-input-help-icon:active,
div[data-app=true] .plotter-input-help-icon:active,
.plotter-input-help-icon:active {
  color: var(--help-color-active);
}

div[data-app=true] a.plotter-input-help-icon svg,
div[data-app=true] a.plotter-input-help-icon path,
div[data-app=true] .plotter-input-help-icon svg,
div[data-app=true] .plotter-input-help-icon path,
.plotter-input-help-icon svg,
.plotter-input-help-icon path {
  width: 14px;
  height: 14px;
  fill: currentColor;
  color: inherit;
}

/* Documentation control — icon-only help trigger (no button chrome) */
div[data-app=true] a.plotter-documentation,
div[data-app=true] button.plotter-documentation,
div[data-app=true] .plotter-documentation,
.plotter-documentation {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: 0.375rem;
  padding: 0 !important;
  min-width: 0;
  min-height: 0 !important;
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  appearance: none;
  -webkit-appearance: none;
  color: var(--datama-primary-light);
  text-decoration: none;
  line-height: 0;
  transition: color 0.15s ease;
  cursor: help;
  transform: none !important;
}

div[data-app=true] a.plotter-documentation:hover,
div[data-app=true] button.plotter-documentation:hover,
div[data-app=true] .plotter-documentation:hover,
.plotter-documentation:hover {
  color: rgb(var(--datama-primary-rgb));
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}

div[data-app=true] a.plotter-documentation:active,
div[data-app=true] button.plotter-documentation:active,
div[data-app=true] .plotter-documentation:active,
.plotter-documentation:active {
  color: rgb(var(--datama-primary-rgb));
}

div[data-app=true] a.plotter-documentation svg,
div[data-app=true] a.plotter-documentation path,
div[data-app=true] button.plotter-documentation svg,
div[data-app=true] button.plotter-documentation path,
div[data-app=true] .plotter-documentation svg,
div[data-app=true] .plotter-documentation path,
.plotter-documentation svg,
.plotter-documentation path {
  width: 16px;
  height: 16px;
  fill: currentColor;
  color: inherit;
}

div[data-app=true] .plotter-input-label .plotter-documentation,
.plotter-input-label .plotter-documentation,
div[data-app=true] .plotter-fieldset-label-container .plotter-documentation,
.plotter-fieldset-label-container .plotter-documentation {
  margin-left: 0.35rem;
  margin-right: 0;
  flex-shrink: 0;
}

.plotter-input-label .plotter-documentation:focus {
  box-shadow: none !important;
  outline: none !important;
}

.plotter-input-label .plotter-documentation svg {
  width: 16px;
  height: 16px;
}

.plotter-input {
  position: relative;
  width: fit-content;
  display: inline-block;
  padding: 0.5rem 0.875rem;
  background: rgba(var(--color-white-rgb), 1);
  color: var(--text-body);
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 6px;
  outline: none;
  min-width: 200px;
  max-width: 350px;
  min-height: 33px; /* Slightly taller like Linear */
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
  font-size: 0.75rem;
  font-family: var(--font-family);
  line-height: 1rem;
  font-weight: 400;
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

/* États des inputs améliorés - style Linear (text-like inputs only) */
.plotter-input:not(.plotter-input-button-group):not(.plotter-input-switch):not(.plotter-input-select):focus {
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  background: rgba(var(--color-white-rgb), 1);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input:not(.plotter-input-button-group):not(.plotter-input-switch):not(.plotter-input-select):hover:not(:focus):not(:disabled) {
  border-color: rgba(var(--color-dark-rgb), 0.12);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  background: rgba(var(--color-white-rgb), 1);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input::placeholder {
  color: rgba(var(--color-dark-rgb), 0.4);
  font-style: normal;
  font-weight: 400;
}

/* Cursor styles for different input types */
.plotter-input[type=text],
.plotter-input[type=number],
.plotter-input[type=email],
.plotter-input[type=tel],
.plotter-input[type=password],
.plotter-input[type=url] {
  cursor: text !important;
}

/* Date inputs should have pointer cursor */
.plotter-input[type=date],
.plotter-input[type=datetime-local] {
  cursor: pointer !important;
}

.plotter-input[type=color] {
  min-width: unset;
  width: 40px;
  height: 30px;
  min-height: unset !important;
  min-width: unset !important;
  max-width: unset;
  padding: 1px 8px;
  cursor: pointer !important;
  transition: all var(--transition-out);
  border-radius: var(--border-radius);
  transform-origin: center;
}

.plotter-input[type=color]:hover {
  transform: scale(1.1);
  transition: all var(--transition-in);
}

.plotter-input[type=range] {
  cursor: pointer !important;
}

/* Number input avec spinners natifs - pas de règles spéciales nécessaires */
/* Number input with unit support */
.plotter-input-container.plotter-input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.plotter-input-container.plotter-input-with-unit .plotter-input[type=number] {
  padding-right: 3rem; /* Even more space for proper separation */
  width: 200px; /* Force consistent width for inputs with units */
  min-width: 200px;
  max-width: 200px;
}

.plotter-input-unit {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--icon-chrome-color);
  pointer-events: none;
  z-index: 1;
  background: transparent;
  padding: 0;
  font-weight: 500;
}

/* Style pour les spinners WebKit (Chrome/Safari) - visibles uniquement au hover */
.plotter-input[type=number]::-webkit-outer-spin-button,
.plotter-input[type=number]::-webkit-inner-spin-button {
  opacity: 0;
  height: 20px;
  width: 16px;
  cursor: pointer;
  background: rgba(var(--color-dark-rgb), 0.1);
  border-radius: 3px;
  margin: 1px;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input[type=number]:hover::-webkit-outer-spin-button,
.plotter-input[type=number]:hover::-webkit-inner-spin-button {
  opacity: 1;
}

.plotter-input[type=number]:hover::-webkit-inner-spin-button:hover,
.plotter-input[type=number]:hover::-webkit-outer-spin-button:hover {
  background: rgba(var(--datama-primary-rgb), 0.15);
}

/* Select inputs should have pointer cursor */
.plotter-input-select {
  cursor: pointer !important;
}

/* Only clickable elements in select dropdown should have pointer cursor */
.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option,
.plotter-input-select-dropdown > .plotter-input-select-actions .plotter-input-select-action-btn,
.plotter-input-select-dropdown .plotter-input-select-search-clear {
  cursor: pointer !important;
}

/* Search input should have text cursor */
.plotter-input-select-dropdown .plotter-input-select-search input {
  cursor: text !important;
}

/* Non-clickable elements in select dropdown should have default cursor */
.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-label,
.plotter-input-select-dropdown .plotter-input-select-message {
  cursor: default !important;
}

/* Special inputs should have pointer cursor */
.plotter-input-radio,
.plotter-input-checkbox,
.plotter-input-radio-weighted,
.plotter-input-checkbox-weighted,
.plotter-input-radio *,
.plotter-input-checkbox *,
.plotter-input-radio-weighted *,
.plotter-input-checkbox-weighted * {
  cursor: pointer !important;
}

/* Switch moderne - style Linear */
.plotter-input.plotter-input-switch {
  cursor: pointer;
  height: 20px !important;
  width: 44px !important;
  min-height: 20px !important;
  min-width: 44px !important;
  max-width: 35px !important;
  position: relative;
  background: rgba(var(--color-dark-rgb), 0.15);
  border: 1px solid rgba(var(--color-dark-rgb), 0.1);
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

.plotter-input.plotter-input-switch::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-white);
  transform: translateY(-50%);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.1), 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.06);
}

.plotter-input.plotter-input-switch[data-value=true] {
  background: var(--datama-primary);
  border-color: var(--datama-primary);
  box-shadow: inset 0 1px 2px 0 rgba(var(--datama-primary-rgb), 0.1);
}

.plotter-input.plotter-input-switch[data-value=true]::before {
  left: calc(100% - 17px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--color-white);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.15), 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.1);
}

.plotter-input.plotter-input-switch.plotter-input-switch-dense {
  height: 14px !important;
  width: 28px !important;
  min-height: 14px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  margin: 0 !important;
  border-radius: 7px;
}

.plotter-input.plotter-input-switch.plotter-input-switch-dense::before {
  width: 10px;
  height: 10px;
  left: 2px;
}

.plotter-input.plotter-input-switch.plotter-input-switch-dense[data-value=true]::before {
  left: calc(100% - 12px);
}

.plotter-input.plotter-input-switch.plotter-input-switch-dense:hover:not(.plotter-input-disabled) {
  transform: none;
  box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

.plotter-input.plotter-input-switch.plotter-input-switch-dense[data-value=true]:hover:not(.plotter-input-disabled) {
  box-shadow: inset 0 1px 2px 0 rgba(var(--datama-primary-rgb), 0.1);
}

.plotter-input.plotter-input-switch:hover:not(.plotter-input-disabled) {
  transform: scale(1.02);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: inset 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05), 0 4px 8px 0 rgba(var(--color-dark-rgb), 0.08);
}

.plotter-input.plotter-input-switch:hover:not(.plotter-input-disabled):not([data-value=true]) {
  background: rgba(var(--color-dark-rgb), 0.3);
}

.plotter-input.plotter-input-switch:hover:not(.plotter-input-disabled)[data-value=true] {
  background: rgba(var(--datama-primary-rgb), 0.8);
}

/* Styles pour les range inputs */
.plotter-input[type=range] {
  padding: 0.75rem 0;
  background: transparent;
  border: none;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
}

/* Container for range with track fill effect */
.plotter-input-container.range-container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.plotter-input-container.range-container .range-slider {
  flex: 1;
  position: relative;
}

.plotter-input-container.range-container .range-value-input {
  width: 80px;
  min-width: 80px;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 6px;
  font-size: 0.75rem;
  text-align: center;
  background: var(--color-white);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: text !important;
  font-weight: 400;
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
  min-height: 33px;
  line-height: 1.25rem;
}

.plotter-input-container.range-container .range-value-input:focus {
  outline: none;
  border-color: var(--datama-primary);
  box-shadow: 0 0 0 3px rgba(var(--datama-primary-rgb), 0.08), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-container.range-container .range-value-input:hover {
  border-color: rgba(var(--color-dark-rgb), 0.12);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-container.range-container .range-slider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  right: 12px;
  height: 8px;
  background: linear-gradient(to right, var(--datama-primary) 0%, var(--datama-primary) var(--range-fill, 50%), rgba(var(--color-dark-rgb), 0.1) var(--range-fill, 50%), rgba(var(--color-dark-rgb), 0.1) 100%);
  border-radius: 4px;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 1;
}

.plotter-input[type=range]::-webkit-slider-track {
  width: 100%;
  height: 8px;
  background: transparent;
  border-radius: 4px;
  border: none;
}

.plotter-input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: var(--datama-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
  margin-top: -4px;
  position: relative;
  z-index: 2;
  transition: all var(--transition-out);
}

.plotter-input[type=range]::-webkit-slider-thumb:hover {
  background: rgba(var(--datama-primary-rgb), 0.9);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.4);
  transition: all var(--transition-in);
}

.plotter-input[type=range]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: rgba(var(--color-dark-rgb), 0.1);
  border-radius: 4px;
  border: none;
}

.plotter-input[type=range]::-moz-range-thumb {
  -moz-appearance: none;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  background: var(--datama-primary);
  cursor: pointer;
  border: 3px solid var(--color-white);
  box-shadow: 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
  transition: all var(--transition-out);
}

.plotter-input[type=range]::-moz-range-thumb:hover {
  background: rgba(var(--datama-primary-rgb), 0.9);
  transform: scale(1.15);
  box-shadow: 0 4px 12px rgba(var(--color-dark-rgb), 0.4);
  transition: all var(--transition-in);
}

.plotter-input[type=range]:focus {
  outline: none;
}

.plotter-input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.25), 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
}

.plotter-input[type=range]:focus::-moz-range-thumb {
  box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.25), 0 2px 6px rgba(var(--color-dark-rgb), 0.3);
}

.plotter-input[type=date]::-webkit-calendar-picker-indicator,
.plotter-input[type=datetime-local]::-webkit-calendar-picker-indicator {
  margin-left: -30px;
  margin-right: 10px;
  cursor: pointer;
}

.plotter-input:not(.plotter-input-button-group):not(.plotter-input-switch):not(.plotter-input-select):hover {
  background: rgba(var(--color-dark-rgb), 0.05);
  transition: var(--transition-in);
}

.plotter-input-select {
  cursor: pointer;
  padding: 0.5rem 2.5rem 0.5rem 0.875rem;
  display: flex;
  align-items: center;
  min-height: 33px;
  max-width: 400px;
  background: rgba(var(--color-white-rgb), 1);
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 6px;
  font-weight: 400;
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-select:hover:not(.disabled) {
  border-color: rgba(var(--color-dark-rgb), 0.12);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-select:focus-within,
.plotter-input-select.plotter-input-select-open {
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring), 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-select.plotter-input-select-light {
  border: none !important;
  background: transparent;
  font-size: initial;
  min-width: unset;
  padding: 0 1.5rem 0 0;
  min-height: auto;
  box-shadow: none !important;
}

.plotter-input-select.plotter-input-select-light > .plotter-input-select-value {
  align-items: center;
  height: 100%;
  display: flex;
  font-weight: 600;
}

.plotter-input-select.plotter-input-select-light.primary > .plotter-input-select-value {
  color: var(--datama-primary);
}

.plotter-input-select.plotter-input-select-light.primary::after {
  border-top-color: var(--caret-color);
}

.plotter-input-select.plotter-input-select-light:hover {
  background: rgba(var(--datama-primary-rgb), 0.05);
  border-radius: 4px;
}

/* Icône de dropdown améliorée - style Linear */
.plotter-input-select::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  height: 0;
  width: 0;
  text-align: center;
  pointer-events: none !important;
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border: 4px solid transparent;
  border-top: 5px solid var(--caret-color);
  transform: translateY(-50%);
}

.plotter-input-select:hover:not(.disabled)::after {
  border-top-color: var(--caret-color-hover);
}

.plotter-input-select.plotter-input-select-open::after {
  transform: translateY(-50%) rotate(180deg);
  border-top-color: var(--caret-color-open);
}

.plotter-input-select-dropdown {
  display: inline-block;
  position: absolute;
  width: max-content;
  min-width: 100%;
  top: calc(100% + 6px);
  left: 0;
  visibility: hidden;
  z-index: -1;
  opacity: 0;
  height: 0;
  overflow-y: auto;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.4;
  font-size: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(var(--color-dark-rgb), 0.05), 0 10px 15px -3px rgba(var(--color-dark-rgb), 0.08), 0 0 0 1px rgba(var(--color-dark-rgb), 0.06);
}

/* Smart positioning: prefer bottom, fallback to top when near viewport edge */
.plotter-input-select-dropdown {
  /* Default: open downward and to the left */
  top: calc(100% + 6px);
  bottom: auto;
  left: 0;
  right: auto;
}

/* When dropdown would go off-screen at bottom, open upward */
.plotter-input-select > .plotter-input-select-dropdown.dropdown-upward {
  top: auto;
  bottom: calc(100% + 6px);
  margin-bottom: 6px;
  margin-top: 0;
}

/* When dropdown would go off-screen on the right, align to the right */
.plotter-input-select > .plotter-input-select-dropdown.dropdown-right-aligned {
  left: auto;
  right: 0;
}

/* When dropdown would go off-screen on both sides, center it */
.plotter-input-select > .plotter-input-select-dropdown.dropdown-centered {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

/* Ensure upward positioning works when dropdown is open */
.plotter-input-select-open > .plotter-input-select-dropdown.dropdown-upward {
  top: auto !important;
  bottom: calc(100% + 6px) !important;
  margin-bottom: 6px !important;
  margin-top: 0 !important;
}

/* Ensure right-aligned positioning works when dropdown is open */
.plotter-input-select-open > .plotter-input-select-dropdown.dropdown-right-aligned {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
}

/* Ensure centered positioning works when dropdown is open */
.plotter-input-select-open > .plotter-input-select-dropdown.dropdown-centered {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}

/* Dropdown positioning classes */
.plotter-input-select > .plotter-input-select-dropdown.dropdown-right {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  position: absolute !important;
}

.plotter-input-select > .plotter-input-select-dropdown.dropdown-left {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  position: absolute !important;
}

.plotter-input-select > .plotter-input-select-dropdown.dropdown-left-side {
  left: auto !important;
  right: 100% !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-right: 4px !important;
}

.plotter-input-select > .plotter-input-select-dropdown.dropdown-right-side {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-left: 4px !important;
}

.plotter-input-select-open > .plotter-input-select-dropdown {
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  height: unset;
  max-height: 280px;
  min-height: 60px;
  visibility: visible;
  opacity: 1;
  z-index: 1500; /* Increased to appear above all panels and other elements */
  background: var(--color-white);
  color: var(--color-dark);
  display: flex;
  flex-direction: column;
}

/* Ensure positioning classes work when dropdown is open */
.plotter-input-select-open > .plotter-input-select-dropdown.dropdown-right {
  left: auto !important;
  right: 0 !important;
  transform: none !important;
  position: absolute !important;
}

.plotter-input-select-open > .plotter-input-select-dropdown.dropdown-left {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
  position: absolute !important;
}

.plotter-input-select-open > .plotter-input-select-dropdown.dropdown-left-side {
  left: auto !important;
  right: 100% !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-right: 4px !important;
}

.plotter-input-select-open > .plotter-input-select-dropdown.dropdown-right-side {
  left: 100% !important;
  right: auto !important;
  top: 0 !important;
  transform: none !important;
  position: absolute !important;
  margin-left: 4px !important;
}

.plotter-input-select > .plotter-input-select-value {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.plotter-input-select-icon {
  width: 30px;
  height: 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: var(--icon-chrome-color);
}

.plotter-input-select-icon > svg,
.plotter-input-select-icon .plotter-icon,
.plotter-input-select-icon .plotter-icon path {
  fill: var(--icon-chrome-color);
  color: var(--icon-chrome-color);
}

.plotter-input-select-icon > svg {
  margin: auto 0;
}

.plotter-input-select-value-text,
.plotter-input-select-option-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-label {
  font-style: italic;
  font-size: 0.9rem;
  padding: 3px 10px;
  order: 3;
  color: var(--text-structure);
  font-weight: 600;
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option {
  cursor: pointer !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.5rem 2.5rem 0.5rem 0.875rem;
  position: relative;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.03);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 40px;
  display: flex;
  align-items: center;
  order: 3; /* Ensure options appear after search and messages */
  font-weight: 400;
  border-radius: 4px;
  margin: 2px 4px;
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option:hover {
  background: rgba(var(--datama-primary-rgb), 0.06);
  color: var(--datama-primary);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: transparent;
}

/* Full custom color hover (text + background) - default behavior */
.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 5%, transparent);
  color: var(--custom-color);
}

/* Bar-only custom color hover (no text/background change) */
.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.05);
  color: var(--datama-primary);
}

/* Override for bar-only mode - higher specificity */
.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option.custom-color-no-hover-text:hover:has(.figure.custom-color) {
  background: rgba(var(--datama-primary-rgb), 0.05) !important;
  color: var(--datama-primary) !important;
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option.has-custom-color.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.05) !important;
  color: var(--datama-primary) !important;
}

/* Fallback for older browser support - full color hover only */
.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option.custom-color-hover-text:hover:has(.figure.custom-color) {
  background: color-mix(in srgb, var(--custom-color) 5%, transparent);
  color: var(--custom-color);
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option.has-custom-color.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 5%, transparent);
  color: var(--custom-color);
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option:last-child {
  border-bottom: none;
  margin-bottom: 4px;
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option[data-selected=selected] {
  background: rgba(var(--datama-primary-rgb), 0.1);
  color: var(--datama-primary);
  font-weight: 500;
}

.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option[data-selected=selected]::after {
  content: "";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--datama-primary);
  border-width: 0 2px 2px 0;
  transform: translateY(-50%) rotate(45deg);
  animation: checkmark-appear-select 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes checkmark-appear-select {
  0% {
    transform: translateY(-50%) rotate(45deg) scale(0);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) rotate(45deg) scale(1);
    opacity: 1;
  }
}
.plotter-input-select-dropdown > .plotter-input-select-group > .plotter-input-select-group-option[data-warning]::after {
  content: "⚠";
  font-size: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 5px;
  right: unset;
}

/* États disabled et read-only améliorés */
.plotter-input.plotter-input-disabled:not([type=color]):not(.plotter-input-switch):not(.plotter-input-select):not(.plotter-input-button-group),
.plotter-input-select.disabled,
.plotter-input:disabled:not([type=color]):not(.plotter-input-switch):not(.plotter-input-select):not(.plotter-input-button-group) {
  cursor: not-allowed !important;
  opacity: 0.6;
  background: rgba(var(--color-dark-rgb), 0.05);
  border-color: rgba(var(--color-dark-rgb), 0.1);
  color: rgba(var(--color-dark-rgb), 0.6);
}

/* Read-only styles - exclude special inputs */
.plotter-input.plotter-input-read-only:not([type=color]):not(.plotter-input-switch):not(.plotter-input-select):not(.plotter-input-button-group),
.plotter-input:read-only:not([type=color]):not(.plotter-input-switch):not(.plotter-input-select):not(.plotter-input-button-group) {
  cursor: default !important;
  background: rgba(var(--color-dark-rgb), 0.02);
  border-color: rgba(var(--color-dark-rgb), 0.15);
}

.plotter-input.plotter-input-disabled:hover:not(.plotter-input-button-group):not(.plotter-input-switch):not(.plotter-input-select),
.plotter-input-select.disabled:hover,
.plotter-input:disabled:hover:not(.plotter-input-button-group):not(.plotter-input-switch):not(.plotter-input-select),
.plotter-input.plotter-input-read-only:hover:not([type=color]):not(.plotter-input-switch):not(.plotter-input-select):not(.plotter-input-button-group),
.plotter-input:read-only:hover:not([type=color]):not(.plotter-input-switch):not(.plotter-input-select):not(.plotter-input-button-group) {
  border-color: rgba(var(--color-dark-rgb), 0.1);
  box-shadow: none;
}

/* Special disabled styles for color picker and switch */
.plotter-input[type=color].plotter-input-disabled,
.plotter-input[type=color]:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.plotter-input.plotter-input-switch.plotter-input-disabled,
.plotter-input.plotter-input-switch:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* Special disabled styles for select inputs */
.plotter-input-select.plotter-input-disabled,
.plotter-input-select:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown > .plotter-input-select-group > .plotter-input-select-group-option {
  padding: 0 10px 0 22px;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown > .plotter-input-select-group > .plotter-input-select-group-option[data-selected=selected]::after {
  left: 8px;
  right: unset;
  transform: translateY(-50%) rotate(45deg);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option {
  display: flex;
  flex-wrap: nowrap;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .text-container {
  flex: 1;
  min-width: 0;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .text-container > .detail {
  font-size: 0.7rem;
  line-height: 0.5rem;
  padding-bottom: 2px;
  transition: 0.1s ease-out;
  opacity: 0;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure {
  min-width: 100px;
  display: flex;
  flex-direction: column;
  margin-left: auto;
  padding-left: 10px;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure > .bar {
  margin: 0.4rem 0;
  height: 0.4rem;
  border-radius: 0.2rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(var(--datama-primary-rgb), 0.8);
  min-width: 0.3rem;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option.steps > .figure > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 0.8);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure.variant > .bar {
  background-color: rgba(var(--color-secondary-rgb), 0.8);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure.warning > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 0.8);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure.custom-color > .bar {
  background-color: var(--custom-color);
  opacity: 0.8;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option:hover > .figure > .bar {
  margin: 0.3rem 0;
  height: 0.6rem;
  border-radius: 0.3rem;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: rgba(var(--datama-primary-rgb), 1);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option:hover > .figure.variant > .bar {
  background-color: rgba(var(--color-secondary-rgb), 1);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option:hover > .figure.warning > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 1);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option.steps:hover > .figure > .bar {
  background-color: rgba(var(--datama-yellow-rgb), 1);
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option:hover > .figure.custom-color > .bar {
  background-color: var(--custom-color);
  opacity: 1;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure > .text-container {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem; /* Add space between label text and value */
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure > .text-container > .label,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure > .text-container > .value {
  font-size: 0.7rem;
  line-height: 0.5rem;
  display: inline-block;
  opacity: 0;
  transition: 0.1s ease-out;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option > .figure > .text-container > .value {
  width: 100%;
  text-align: right;
  font-weight: 600;
}

.plotter-input.plotter-input-select-weighted:hover .plotter-input-select-group-option[data-selected=selected] > .figure > .text-container > .label,
.plotter-input.plotter-input-select-weighted:hover .plotter-input-select-group-option[data-selected=selected] > .figure > .text-container > .value,
.plotter-input.plotter-input-select-weighted:hover .plotter-input-select-group-option[data-selected=selected] > .text-container > .detail,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown.plotter-input-select-anchor-hovered .plotter-input-select-group-option[data-selected=selected] > .figure > .text-container > .label,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown.plotter-input-select-anchor-hovered .plotter-input-select-group-option[data-selected=selected] > .figure > .text-container > .value,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown.plotter-input-select-anchor-hovered .plotter-input-select-group-option[data-selected=selected] > .text-container > .detail {
  transition: 0.1s ease-out;
  opacity: 0;
}

.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group:not(:hover) > .plotter-input-select-group-option[data-selected=selected] > .figure > .text-container > .label,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option:hover > .figure > .text-container > .label,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group:hover > .plotter-input-select-group-option:hover[data-selected=selected] > .figure > .text-container > .label,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group:not(:hover) > .plotter-input-select-group-option[data-selected=selected] > .figure > .text-container > .value,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option:hover > .figure > .text-container > .value,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group:hover > .plotter-input-select-group-option:hover[data-selected=selected] > .figure > .text-container > .value,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group:not(:hover) > .plotter-input-select-group-option[data-selected=selected] > .text-container > .detail,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group > .plotter-input-select-group-option:hover > .text-container > .detail,
.plotter-input-select-dropdown.plotter-input-select-weighted-dropdown .plotter-input-select-group:hover > .plotter-input-select-group-option:hover[data-selected=selected] > .text-container > .detail {
  opacity: 1;
  transition: 0.1s ease-in;
}

/* === RADIO BUTTONS ET CHECKBOXES === */
.plotter-input-radio-group,
.plotter-input-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plotter-input-radio,
.plotter-input-checkbox,
.plotter-input-radio-weighted,
.plotter-input-checkbox-weighted {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  min-height: 48px;
  background: rgba(var(--color-white-rgb), 1);
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

.plotter-input-radio:hover,
.plotter-input-checkbox:hover,
.plotter-input-radio-weighted:hover,
.plotter-input-checkbox-weighted:hover {
  background: rgba(var(--datama-primary-rgb), 0.02);
  border-color: rgba(var(--datama-primary-rgb), 0.12);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateY(-1px);
}

/* Style personnalisé pour les radio buttons et checkboxes - style Linear */
.plotter-input-radio input[type=radio],
.plotter-input-checkbox input[type=checkbox],
.plotter-input-radio-weighted input[type=radio],
.plotter-input-checkbox-weighted input[type=checkbox] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid rgba(var(--color-dark-rgb), 0.2);
  background: var(--color-white);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.05);
}

/* Radio buttons - circular */
.plotter-input-radio input[type=radio],
.plotter-input-radio-weighted input[type=radio] {
  border-radius: 50%;
}

/* Checkboxes - rounded square */
.plotter-input-checkbox input[type=checkbox],
.plotter-input-checkbox-weighted input[type=checkbox] {
  border-radius: 4px;
}

/* Hover states */
.plotter-input-radio input[type=radio]:hover,
.plotter-input-checkbox input[type=checkbox]:hover,
.plotter-input-radio-weighted input[type=radio]:hover,
.plotter-input-checkbox-weighted input[type=checkbox]:hover {
  border-color: var(--datama-primary);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.1);
}

/* Checked states */
.plotter-input-radio input[type=radio]:checked,
.plotter-input-checkbox input[type=checkbox]:checked,
.plotter-input-radio-weighted input[type=radio]:checked,
.plotter-input-checkbox-weighted input[type=checkbox]:checked {
  background: var(--datama-primary);
  border-color: var(--datama-primary);
  box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.3);
}

/* Radio dot */
.plotter-input-radio input[type=radio]:checked::after,
.plotter-input-radio-weighted input[type=radio]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-white);
  transform: translate(-50%, -50%);
}

/* Checkbox checkmark - modern SVG-like design */
.plotter-input-checkbox input[type=checkbox]:checked::after,
.plotter-input-checkbox-weighted input[type=checkbox]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 8px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  animation: checkmark-appear-checkbox 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkmark-appear-checkbox {
  0% {
    transform: translate(-50%, -60%) rotate(45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -60%) rotate(45deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -60%) rotate(45deg) scale(1);
    opacity: 1;
  }
}
@keyframes checkmark-appear {
  0% {
    transform: translateY(-50%) rotate(45deg) scale(0);
    opacity: 0;
  }
  50% {
    transform: translateY(-50%) rotate(45deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translateY(-50%) rotate(45deg) scale(1);
    opacity: 1;
  }
}
.plotter-input-radio label,
.plotter-input-checkbox label {
  cursor: pointer;
  font-weight: 500;
  color: var(--color-dark);
  flex: 1;
}

/* Weighted variants avec figure */
.plotter-input-radio-weighted,
.plotter-input-checkbox-weighted {
  align-items: flex-start;
  flex-wrap: wrap;
}

.plotter-input-radio-weighted .text-container,
.plotter-input-checkbox-weighted .text-container {
  flex: 1;
  min-width: 0;
}

.plotter-input-radio-weighted .text-container .text,
.plotter-input-checkbox-weighted .text-container .text {
  font-weight: 500;
  color: var(--color-dark);
  display: block;
  margin-bottom: 0.25rem;
}

.plotter-input-radio-weighted .text-container .detail,
.plotter-input-checkbox-weighted .text-container .detail {
  font-size: 0.75rem;
  color: rgba(var(--color-dark-rgb), 0.7);
  opacity: 0.8;
}

.plotter-input-radio-weighted .figure,
.plotter-input-checkbox-weighted .figure {
  min-width: 100px;
  margin-left: auto;
  text-align: right;
}

.plotter-input-radio-weighted .figure .datama-label,
.plotter-input-checkbox-weighted .figure .datama-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  margin-bottom: 0.25rem;
  opacity: 0.8;
  gap: 0.5rem; /* Add space between label text and value */
}

.plotter-input-radio-weighted .figure .datama-label .value,
.plotter-input-checkbox-weighted .figure .datama-label .value {
  font-weight: 600;
  color: var(--datama-primary);
}

.plotter-input-radio-weighted .figure .bar,
.plotter-input-checkbox-weighted .figure .bar {
  height: 4px;
  background: rgba(var(--color-dark-rgb), 0.15);
  border-radius: 2px;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-radio-weighted:hover .figure .bar,
.plotter-input-checkbox-weighted:hover .figure .bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--color-dark-rgb), 0.25);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom color support for radio and checkbox weighted */
.plotter-input-radio-weighted .figure.custom-color .bar,
.plotter-input-checkbox-weighted .figure.custom-color .bar {
  background: var(--custom-color);
  opacity: 0.8;
}

.plotter-input-radio-weighted:hover .figure.custom-color .bar,
.plotter-input-checkbox-weighted:hover .figure.custom-color .bar {
  background: var(--custom-color);
  opacity: 1;
}

/* Full custom color hover (text + background) - default behavior */
.plotter-input-radio-weighted.custom-color-hover-text:hover,
.plotter-input-checkbox-weighted.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 3%, transparent);
  border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

/* Bar-only custom color hover (no text/background change) */
.plotter-input-radio-weighted.custom-color-no-hover-text:hover,
.plotter-input-checkbox-weighted.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.03);
  border-color: rgba(var(--datama-primary-rgb), 0.1);
}

/* Override for bar-only mode - higher specificity */
.plotter-input-radio-weighted.custom-color-no-hover-text:hover:has(.figure.custom-color),
.plotter-input-checkbox-weighted.custom-color-no-hover-text:hover:has(.figure.custom-color) {
  background: rgba(var(--datama-primary-rgb), 0.03) !important;
  border-color: rgba(var(--datama-primary-rgb), 0.1) !important;
}

.plotter-input-radio-weighted.has-custom-color.custom-color-no-hover-text:hover,
.plotter-input-checkbox-weighted.has-custom-color.custom-color-no-hover-text:hover {
  background: rgba(var(--datama-primary-rgb), 0.03) !important;
  border-color: rgba(var(--datama-primary-rgb), 0.1) !important;
}

/* Fallback for older browser support - full color hover only */
.plotter-input-radio-weighted.custom-color-hover-text:hover:has(.figure.custom-color),
.plotter-input-checkbox-weighted.custom-color-hover-text:hover:has(.figure.custom-color) {
  background: color-mix(in srgb, var(--custom-color) 3%, transparent);
  border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

.plotter-input-radio-weighted.has-custom-color.custom-color-hover-text:hover,
.plotter-input-checkbox-weighted.has-custom-color.custom-color-hover-text:hover {
  background: color-mix(in srgb, var(--custom-color) 3%, transparent);
  border-color: color-mix(in srgb, var(--custom-color) 10%, transparent);
}

/* États disabled pour radio/checkbox */
.plotter-input-radio.plotter-input-disabled,
.plotter-input-checkbox.plotter-input-disabled,
.plotter-input-radio-weighted.plotter-input-disabled,
.plotter-input-checkbox-weighted.plotter-input-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.plotter-input-radio.plotter-input-disabled input,
.plotter-input-checkbox.plotter-input-disabled input,
.plotter-input-radio-weighted.plotter-input-disabled input,
.plotter-input-checkbox-weighted.plotter-input-disabled input {
  cursor: not-allowed;
}

/* === DARK MODE SUPPORT === */
@media (prefers-color-scheme: dark) {
  /* Tres style elouan mais il faudrait faire un vrai sujet la dessus car ce n'est pas fonctionnel */
  /*.plotter-input {*/
  /*    background: rgba(var(--color-white-rgb), 0.05);*/
  /*    color: var(--color-white);*/
  /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
  /*}*/
  /*.plotter-input:focus {*/
  /*    background: rgba(var(--color-white-rgb), 0.1);*/
  /*    box-shadow: 0 0 0 3px rgba(var(--datama-primary-light-rgb), 0.3);*/
  /*}*/
  /*.plotter-input-select {*/
  /*    background: rgba(var(--color-white-rgb), 0.05);*/
  /*    border-color: rgba(var(--color-white-rgb), 0.2);*/
  /*}*/
  /*.plotter-input-select-open > .plotter-input-select-dropdown {*/
  /*    background: var(--color-dark);*/
  /*    border-color: rgba(var(--datama-primary-light-rgb), 0.3);*/
  /*    box-shadow: var(--shadow-large);*/
  /*}*/
}
/* === FONCTIONNALITÉS AVANCÉES DES SELECTS === */
/* Search input in dropdown */
.plotter-input-select-search {
  position: sticky;
  top: 0;
  background: var(--color-white);
  border-bottom: 2px solid rgba(var(--color-dark-rgb), 0.1);
  padding: 0.375rem;
  z-index: 1000;
  position: relative;
}

.plotter-input-select-search input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  padding-right: 2rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.2);
  border-radius: calc(var(--border-radius) / 2);
  outline: none;
  font-size: 0.75rem;
  background: var(--color-white);
  transition: all var(--transition-out);
}

.plotter-input-select-search input:focus {
  border-color: var(--datama-primary);
  box-shadow: 0 0 0 2px rgba(var(--datama-primary-rgb), 0.1);
  transition: all var(--transition-in);
}

.plotter-input-select-search input::placeholder {
  color: rgba(var(--color-dark-rgb), 0.5);
  font-style: italic;
}

/* Clear search button */
.plotter-input-select-search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(var(--color-dark-rgb), 0.5);
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer !important;
  padding: 0.25rem;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-out);
}

.plotter-input-select-search-clear:hover {
  background: rgba(var(--color-dark-rgb), 0.1);
  color: rgba(var(--color-dark-rgb), 0.8);
  transition: all var(--transition-in);
}

.plotter-input-select-search-clear:active {
  transform: translateY(-50%) scale(0.95);
}

/* Select All / Deselect All buttons */
.plotter-input-select-actions {
  position: sticky;
  bottom: 0;
  background: var(--color-white);
  border-top: 2px solid rgba(var(--color-dark-rgb), 0.1);
  padding: 0.5rem 0.75rem;
  display: flex;
  gap: 0.5rem;
  z-index: 1001;
  order: 4; /* Ensure actions appear at the bottom */
  margin-top: auto; /* Push to bottom */
}

.plotter-input-select-action-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--datama-primary);
  background: transparent;
  color: var(--datama-primary);
  border-radius: calc(var(--border-radius) / 2);
  cursor: pointer !important;
  font-size: 0.75rem;
  font-weight: 500;
  transition: all var(--transition-out);
  text-align: center;
}

.plotter-input-select-action-btn:hover {
  background: var(--datama-primary);
  color: var(--color-white);
  transition: all var(--transition-in);
}

.plotter-input-select-action-btn:active {
  transform: scale(0.98);
}

/* Messages d'état */
.plotter-input-select-message {
  padding: 1rem;
  text-align: center;
  color: rgba(var(--color-dark-rgb), 0.6);
  font-style: italic;
  font-size: 0.75rem;
  order: 2; /* Ensure message appears after search */
  z-index: 1; /* Lower z-index than actions */
}

.plotter-input-select-message.no-results {
  color: rgba(var(--color-dark-rgb), 0.8);
}

.plotter-input-select-message.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.plotter-input-select-message.loading::before {
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid rgba(var(--datama-primary-rgb), 0.3);
  border-top: 2px solid var(--datama-primary);
  border-radius: 50%;
  animation: datama-spin 1s linear infinite;
}

/* Options masquées par la recherche */
.plotter-input-select-group-option.hidden {
  display: none !important;
}

/* Ensure proper order for select group */
.plotter-input-select-dropdown > .plotter-input-select-group {
  order: 3; /* Ensure group appears after search and messages */
}

/* Animation de spinner */
@keyframes datama-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Highlight des termes de recherche */
.datama-search-highlight {
  background: rgba(var(--datama-primary-rgb), 0.2);
  color: var(--datama-primary);
  font-weight: 600;
  border-radius: 2px;
  padding: 0 2px;
}

/* Compteur de sélection pour les selects multiples - style Linear */
.plotter-input-select-counter {
  position: absolute;
  top: -10px;
  right: -10px;
  background: var(--datama-primary);
  color: var(--color-white);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  min-height: unset !important;
  line-height: 18px !important;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  font-weight: 600;
  z-index: 150;
  transform: scale(0);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 2px 4px 0 rgba(var(--datama-primary-rgb), 0.3), 0 0 0 2px var(--color-white);
  /* Force perfect circle with explicit constraints */
  flex-shrink: 0;
  flex-grow: 0;
  aspect-ratio: 1/1;
  line-height: 1;
}

.plotter-input-select-counter.visible {
  transform: scale(1);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Styles pour les options avec icônes */
.plotter-input-select-group-option.with-icon {
  padding-left: 2.5rem;
}

.plotter-input-select-group-option.with-icon::before {
  content: attr(data-icon);
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

/* === STYLES POUR LES INPUTS TITLE SIZE (WATERFALL) === */
/* Masquer par défaut les inputs Title Size */
.plotter-input-container[id*=-tab-font-size-of-title-container],
.plotter-input-container[id*=-tab-font-size-of-plot-title-container] {
  display: none;
}

/* Alignement et espacement des inputs Title Size */
.plotter-input-container[id*=-tab-font-size-of-title-container] .plotter-input {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin-left: 15px;
}

/* Styles spécifiques pour Plot Title Size */
.plotter-input-container[id*=-tab-font-size-of-plot-title-container] .plotter-input {
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin-left: 15px;
}

/* Responsive behavior for Title Size inputs - same as other inputs */
@media (max-width: 768px) {
  .plotter-input-container[id*=-tab-font-size-of-title-container] .plotter-input,
  .plotter-input-container[id*=-tab-font-size-of-plot-title-container] .plotter-input {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    flex: 1 1 auto;
  }
}
/* Refresh button in select dropdown */
.plotter-input-select-refresh-btn {
  position: absolute;
  right: -0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  margin: 0 0.5rem;
  transition: opacity 0.2s, transform 0.2s;
  line-height: 1;
}

.plotter-input-select-refresh-btn:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(var(--datama-primary-rgb), 0.08);
  height: 100%;
  border-radius: 4px;
}

.plotter-input-select:has(.plotter-input-select-refresh-btn)::after {
  right: 2rem;
}

/* Refresh button standalone */
.plotter-input-refresh-button {
  display: inline-flex;
  align-items: center;
  background: var(--datama-primary);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.plotter-input-refresh-button:hover:not(:disabled) {
  background: var(--datama-primary-dark);
  transform: scale(1.02);
}

.plotter-input-refresh-button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.plotter-input-refresh-button .refresh-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}

/* === EMOJI PICKER INPUT === */
.plotter-input.plotter-input-select.plotter-input-emoji-picker {
  /* Beat `.plotter-input` (inline-block + padding) and `.plotter-input-select` (caret gutter) */
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  width: 1.75rem;
  height: 1.75rem;
  min-height: 1.75rem;
  max-width: 1.75rem;
  padding: 0;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
}

.plotter-input.plotter-input-select.plotter-input-emoji-picker > .plotter-input-emoji-picker-value {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  font-size: 1.1rem;
  line-height: 1;
  overflow: visible;
  pointer-events: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.plotter-input-emoji-picker > .plotter-input-emoji-picker-value.plotter-input-emoji-picker-empty {
  opacity: 0.35;
  filter: grayscale(1);
  font-size: 0.85rem;
}

.plotter-input.plotter-input-select.plotter-input-emoji-picker::after {
  display: none;
}

.plotter-input-emoji-picker > .plotter-input-emoji-picker-dropdown {
  width: 264px;
}

.plotter-input-select-open > .plotter-input-emoji-picker-dropdown {
  max-height: 360px;
  display: flex;
  flex-direction: column;
}

.plotter-input-emoji-picker-dropdown.plotter-input-emoji-picker-searching .plotter-input-emoji-picker-tabs {
  display: none;
}

.plotter-input-emoji-picker-clear {
  cursor: pointer;
  font-size: 0.8rem;
  font-style: italic;
  padding: 0.375rem 0.875rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
  color: rgba(var(--color-dark-rgb), 0.7);
  text-align: left;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-emoji-picker-clear:hover {
  background: rgba(var(--datama-primary-rgb), 0.06);
  color: var(--datama-primary);
}

.plotter-input-emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  padding: 6px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}

.plotter-input-emoji-picker-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  padding: 4px 6px;
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
  overflow-x: auto;
  flex-shrink: 0;
  background: rgba(var(--color-dark-rgb), 0.02);
}

.plotter-input-emoji-picker-tab {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 5px 6px;
  border-radius: calc(var(--border-radius) / 2);
  opacity: 0.55;
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.plotter-input-emoji-picker-tab:hover {
  opacity: 0.85;
  background: rgba(var(--datama-primary-rgb), 0.08);
}

.plotter-input-emoji-picker-tab.active {
  opacity: 1;
  background: rgba(var(--datama-primary-rgb), 0.12);
  box-shadow: inset 0 -2px 0 var(--datama-primary);
}

.plotter-input-emoji-picker-option {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  line-height: 1;
  padding: 5px 0;
  border-radius: calc(var(--border-radius) / 2);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-emoji-picker-option:hover {
  background: rgba(var(--datama-primary-rgb), 0.1);
  transform: scale(1.15);
}

.plotter-input-emoji-picker-option[data-selected=selected] {
  background: rgba(var(--datama-primary-rgb), 0.15);
  box-shadow: inset 0 0 0 1px var(--datama-primary);
}

.plotter-input-emoji-picker-no-result {
  grid-column: 1/-1;
  font-size: 0.8rem;
  font-style: italic;
  color: rgba(var(--color-dark-rgb), 0.5);
  padding: 0.5rem;
  text-align: center;
}

/* Portaled select dropdown (mounted under div[data-app="true"] / .datama-light) */
div[data-app=true] .plotter-input-select-dropdown {
  position: absolute;
  width: max-content;
  z-index: -1;
  visibility: hidden;
  opacity: 0;
  height: auto;
  overflow-y: auto;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  line-height: 1.4;
  font-size: 0.75rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(var(--color-dark-rgb), 0.05), 0 10px 15px -3px rgba(var(--color-dark-rgb), 0.08), 0 0 0 1px rgba(var(--color-dark-rgb), 0.06);
  background: var(--color-white);
  color: var(--color-dark);
}

/*
 * Open state must not require a data-app ancestor: if the portal falls back to
 * document.body (detached trigger / host quirk), the dropdown still needs a
 * visible stacking level above panels (z-index 10) and dialogs (z-index 999).
 */
.plotter-input-select-dropdown.plotter-input-select-dropdown-open,
div[data-app=true] .plotter-input-select-dropdown.plotter-input-select-dropdown-open {
  height: unset;
  max-height: 280px;
  min-height: 60px;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  position: absolute;
  width: max-content;
  background: var(--color-white);
  color: var(--color-dark);
}

/* Portaled emoji picker dropdown overrides */
div[data-app=true] .plotter-input-emoji-picker-dropdown {
  width: 264px;
}

div[data-app=true] .plotter-input-emoji-picker-dropdown.plotter-input-select-dropdown-open {
  max-height: 360px;
}

/* === BUTTON GROUP === */
.plotter-input.plotter-input-button-group {
  min-width: unset;
  max-width: unset;
  min-height: unset;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

.plotter-input.plotter-input-button-group:hover,
.plotter-input.plotter-input-button-group:focus,
.plotter-input.plotter-input-button-group.plotter-input-read-only,
.plotter-input.plotter-input-button-group.plotter-input-disabled {
  background: transparent;
  border: none;
  box-shadow: none;
}

.plotter-input-button-group {
  display: inline-flex;
  align-items: center;
}

.plotter-input-button-group-buttons {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}

.plotter-input-button-group .plotter-button {
  min-height: 30px;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.plotter-input-button-group .plotter-button:hover,
.plotter-input-button-group .plotter-button:focus,
.plotter-input-button-group .plotter-button.active,
.plotter-input-button-group .plotter-button.active:hover {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.plotter-input-button-group .plotter-button.active {
  background-color: var(--state-active-bg) !important;
  color: var(--state-active-text) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.plotter-input-button-group .plotter-button.active .plotter-icon,
.plotter-input-button-group .plotter-button.active .plotter-icon path {
  color: var(--state-active-text) !important;
  fill: var(--state-active-text) !important;
}

.plotter-input-button-group .plotter-button.active:hover {
  background-color: rgba(var(--datama-primary-rgb), 0.15) !important;
  transform: scale(1.02);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-button-group .plotter-button:not(.active):hover {
  background-color: rgba(var(--color-dark-rgb), 0.04) !important;
  transform: translateY(-1px);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-input-button-group.plotter-input-disabled,
.plotter-input-button-group.plotter-input-read-only {
  pointer-events: none;
  opacity: 0.6;
}

.plotter-input-button-group-segmented .plotter-input-button-group-buttons {
  align-items: center;
  gap: 14px;
}

.plotter-input-button-group-segment {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: none;
}

/* Multi-button subgroups: light gray toggle track + static active fill on buttons.
 * A sliding indicator used to paint under .active and leaked a green halo (esp. single select). */
.plotter-input-button-group-segment-toggle {
  position: relative;
}

.plotter-input-button-group-segment-indicator {
  display: none !important;
}

.plotter-input-button-group-segment:has(.plotter-button + .plotter-button) {
  background-color: rgba(var(--color-dark-rgb), 0.06);
  border-radius: 12px;
  padding: 0;
  gap: 0;
  align-items: stretch;
  min-height: 30px;
  height: 30px;
  overflow: hidden;
}

.plotter-input-button-group-segment:has(.plotter-button + .plotter-button) .plotter-button {
  flex: 1 1 0;
  min-width: 30px;
  width: auto;
  min-height: 0 !important;
  height: 100% !important;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 6px !important;
  border-radius: 0 !important;
  box-sizing: border-box;
  transform: none !important;
  position: relative;
  z-index: 1;
  background: transparent !important;
  color: rgb(var(--color-dark-rgb));
}

/* Single and multi selection share the same static fill (no second-layer indicator). */
.plotter-input-button-group-segment-toggle .plotter-button.active,
.plotter-input-button-group-segment-toggle .plotter-button.active:hover,
.plotter-input-button-group-segment-toggle .plotter-button.plotter-input-button-group-segment-selected {
  background-color: var(--state-active-bg) !important;
  color: var(--state-active-text) !important;
  border-radius: 12px !important;
  transform: none !important;
}

.plotter-input-button-group-segment-toggle .plotter-button.active .plotter-icon,
.plotter-input-button-group-segment-toggle .plotter-button.active .plotter-icon path,
.plotter-input-button-group-segment-toggle .plotter-button.plotter-input-button-group-segment-selected .plotter-icon,
.plotter-input-button-group-segment-toggle .plotter-button.plotter-input-button-group-segment-selected .plotter-icon path {
  color: var(--state-active-text) !important;
  fill: var(--state-active-text) !important;
}

.plotter-input-button-group-segment:has(.plotter-button + .plotter-button) .plotter-button:not(.active):not(:hover) {
  background: transparent !important;
}

.plotter-input-button-group-segment:has(.plotter-button + .plotter-button) .plotter-button:not(.active):hover {
  background-color: rgba(var(--color-dark-rgb), 0.05) !important;
  transform: none !important;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 *
 * Plotter-owned chrome widget styles. Duplicated from Light
 * (`src/assets/css/modules/__fieldset.css`) with `plotter-*` class names so Light CSS cannot style
 * Plotter widgets. Keep this file a class-renamed copy of the Light source —
 * do not delete rules or comments. An unclosed comment previously dropped
 * selectors after the documentation block.
 *
 * Generated for file : __ui-fieldset.css project project-deep-sky
 */
.plotter-fieldset.datama-story-pinned {
  border-color: color-mix(in srgb, var(--datama-primary) 50%, rgba(var(--color-dark-rgb), 0.12));
  box-shadow: inset 3px 0 0 var(--datama-primary);
}

.plotter-fieldset {
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 12px;
  padding: 0;
  margin: 0 0 2rem 0;
  background: var(--color-white);
  box-shadow: 0 2px 8px 0 rgba(var(--color-dark-rgb), 0.08);
  overflow: visible;
  position: relative;
  container-type: inline-size;
}

.plotter-fieldset-wrapper {
  margin-bottom: 2rem;
}

.plotter-fieldset-title-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.plotter-fieldset-title {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--text-structure) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.plotter-fieldset-legend-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.plotter-fieldset-legend {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-meta);
  margin: 0;
  line-height: 1.5;
  max-width: 600px;
}

.plotter-fieldset-container {
  padding: 0.75rem 2rem;
  gap: 0.35rem;
  display: flex;
  flex-direction: column;
}

.plotter-fieldset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  min-height: 44px;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
}

.plotter-fieldset-row:last-child {
  border-bottom: none;
}

.plotter-fieldset-left {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  justify-content: center;
}

.plotter-fieldset-label-container {
  display: flex;
  align-items: center;
}

/* Label container hosting a wrapped help tooltip (see DataMaHelpTooltip) */
.plotter-fieldset-label-container.datama-help-tooltip:hover {
  color: var(--datama-primary);
}

.plotter-fieldset-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-label);
  line-height: 1.4;
  margin: 0;
  cursor: help;
}

.plotter-fieldset-description {
  font-size: 0.8125rem;
  color: rgba(var(--color-dark-rgb), 0.7);
  line-height: 1.4;
  max-width: 400px;
  margin-top: 0;
}

.plotter-fieldset-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-width: 8rem;
}

/* Help icon styling for fieldset — muted until interaction
 * Specificity must beat `div[data-app="true"] a { color: primary }` */
div[data-app=true] a.plotter-fieldset-help-icon,
div[data-app=true] .plotter-fieldset-help-icon,
.plotter-fieldset-help-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--help-color);
  text-decoration: none;
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: help;
  flex-shrink: 0;
}

div[data-app=true] a.plotter-fieldset-help-icon:hover,
div[data-app=true] .plotter-fieldset-help-icon:hover,
.plotter-fieldset-help-icon:hover {
  color: var(--help-color-hover);
}

div[data-app=true] a.plotter-fieldset-help-icon:active,
div[data-app=true] .plotter-fieldset-help-icon:active,
.plotter-fieldset-help-icon:active {
  color: var(--help-color-active);
}

div[data-app=true] a.plotter-fieldset-help-icon svg,
div[data-app=true] a.plotter-fieldset-help-icon path,
div[data-app=true] .plotter-fieldset-help-icon svg,
div[data-app=true] .plotter-fieldset-help-icon path,
.plotter-fieldset-help-icon svg,
.plotter-fieldset-help-icon path {
  width: 14px;
  height: 14px;
  fill: currentColor;
  color: inherit;
}

/* Documentation affordance next to title/legend — muted icon, not a far-right button */
div[data-app=true] .plotter-fieldset-title-container .plotter-documentation,
div[data-app=true] .plotter-fieldset-legend-container .plotter-documentation,
.plotter-fieldset-title-container .plotter-documentation,
.plotter-fieldset-legend-container .plotter-documentation {
  flex-shrink: 0;
  margin-left: 0.25rem;
}

div[data-app=true] .plotter-fieldset-title-container .plotter-documentation svg,
div[data-app=true] .plotter-fieldset-title-container .plotter-documentation path,
div[data-app=true] .plotter-fieldset-legend-container .plotter-documentation svg,
div[data-app=true] .plotter-fieldset-legend-container .plotter-documentation path,
.plotter-fieldset-title-container .plotter-documentation svg,
.plotter-fieldset-title-container .plotter-documentation path,
.plotter-fieldset-legend-container .plotter-documentation svg,
.plotter-fieldset-legend-container .plotter-documentation path {
  width: 14px;
  height: 14px;
  fill: currentColor;
  color: inherit;
}

/* Responsive behavior - stack on small screens */
@media (max-width: 700px) {
  .plotter-fieldset-row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .plotter-fieldset-right {
    justify-content: flex-start;
    min-width: unset;
  }
  .plotter-fieldset-left {
    min-height: auto;
  }
  .plotter-fieldset-description {
    max-width: unset;
  }
  .plotter-fieldset-container {
    padding: 1rem;
    gap: 1rem;
  }
}
/* Stack only in very narrow nested containers. Settings rails (~250px content) must
 * keep label + control on one row; 400px matched almost every plotter fieldset. */
@container (max-width: 220px) {
  .plotter-fieldset-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .plotter-fieldset-right {
    justify-content: flex-start;
  }
  .plotter-fieldset-right .plotter-input,
  .plotter-fieldset-right .plotter-input-select {
    max-width: 300px;
  }
}
/* Special styling for inputs inside fieldset */
.plotter-fieldset .plotter-input-container {
  margin-bottom: 0;
  width: fit-content;
}

/* Override input container gap to be more compact in fieldset */
.plotter-fieldset .plotter-input-container {
  gap: 0.75rem;
}

/* Ensure labels inside fieldset inputs are not displayed (we use our own) */
.plotter-fieldset .plotter-input-label {
  display: none;
}

/* Fix number input units positioning in fieldsets */
.plotter-fieldset .plotter-input-with-unit {
  display: flex;
  align-items: center;
  position: relative;
}

.plotter-fieldset .plotter-input-with-unit input {
  flex: 1;
  margin-right: 0;
}

.plotter-fieldset .plotter-input-unit {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--icon-chrome-color);
  pointer-events: none;
  z-index: 1;
  background: transparent;
  padding: 0;
}

/* Style inputs inside fieldset to match select style */
.plotter-fieldset input,
.plotter-fieldset select {
  background: var(--color-white);
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  color: var(--color-dark);
  border-radius: 6px;
  padding: 0.25rem 1rem;
  font-size: 0.75rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
}

.plotter-fieldset input:focus,
.plotter-fieldset select:focus {
  outline: none;
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring);
}

.plotter-fieldset input::placeholder {
  color: rgba(var(--color-dark-rgb), 0.5);
}

/* Ensure dropdowns in fieldsets appear above other fieldsets */
.plotter-fieldset .plotter-input-select-open > .plotter-input-select-dropdown {
  z-index: 1500 !important; /* Same high z-index as regular dropdowns */
  position: absolute;
}

/* Ensure select containers have proper positioning context */
.plotter-fieldset .datama-select-container,
.plotter-fieldset .plotter-input-container {
  position: relative;
  width: auto;
}

/* Fieldsets containing open selects should have higher z-index */
.plotter-fieldset:has(.plotter-input-select-open) {
  z-index: 100;
  position: relative;
}

/* Inputs in fieldset should maintain their normal styles - no additional overrides needed */
/* Market Equation container with fieldset-like styling */
.datama-market-equation-container {
  overflow-x: visible;
  overflow-y: visible;
  position: relative;
  z-index: 10;
  min-width: 0;
}

/* Full width market equation that extends beyond container (dialog only) */
.datama-dialog .datama-market-equation-fullwidth {
  box-sizing: border-box;
  padding: 0;
  margin: 0 -30px;
  max-width: calc(100% + 40px);
}

/* Remove borders from the Market Equation table inside the container */
.datama-market-equation-container #container-center-market-equation-table,
.datama-market-equation-container [id*=market-equation-table] {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Inline FieldSet Layout - flat style without cards */
.plotter-fieldset-inline {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin-top: 1rem;
}

/*
 * Inline legend divider: prefer explicit wrapper class so Tableau CEF
 * (and other hosts without reliable :has()) still get the layout.
 * Keep :has() as a progressive-enhancement fallback for older markup.
 */
.plotter-fieldset-wrapper-inline .plotter-fieldset-legend-container,
.plotter-fieldset-wrapper:has(.plotter-fieldset-inline) .plotter-fieldset-legend-container {
  position: relative;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.plotter-fieldset-wrapper-inline .plotter-fieldset-legend-container::after,
.plotter-fieldset-wrapper:has(.plotter-fieldset-inline) .plotter-fieldset-legend-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 0.5px;
  background: rgba(var(--color-dark-rgb), 0.08);
  z-index: 0;
}

.plotter-fieldset-wrapper-inline .plotter-fieldset-legend,
.plotter-fieldset-wrapper:has(.plotter-fieldset-inline) .plotter-fieldset-legend {
  background: var(--color-white);
  padding: 0 0.25rem 0 0.75rem;
  border: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-dark);
  display: inline-block;
  position: relative;
  z-index: 1;
  margin: 0;
}

/* Keep help icon with the legend text (covers the divider line) */
.plotter-fieldset-wrapper-inline .plotter-fieldset-legend-container .plotter-documentation,
.plotter-fieldset-wrapper:has(.plotter-fieldset-inline) .plotter-fieldset-legend-container .plotter-documentation {
  position: relative;
  z-index: 1;
  margin-left: 0.15rem;
}

.plotter-fieldset-inline .plotter-fieldset-container {
  padding: 0.75rem 2rem;
}

.plotter-fieldset-inline .plotter-fieldset-row {
  background: transparent;
  border: none;
  border-radius: 0;
  margin-bottom: 0.75rem;
  box-shadow: none;
  container-type: inline-size;
}

.datama-dialog .plotter-fieldset-inline .plotter-fieldset-row:not(:last-child) {
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
  margin-top: -1rem;
}

.datama-dialog .plotter-fieldset-inline .plotter-fieldset-row:last-child {
  margin-bottom: 0;
  margin-top: -16px;
}

/* Dark mode for inline fieldset */
/* Pinnable fields (pin as shortcut attribute) */
.plotter-fieldset-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.25rem;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(var(--color-dark-rgb), 0.35);
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-fieldset-pin:hover {
  color: var(--datama-primary);
}

.plotter-fieldset-pin.active {
  color: var(--datama-primary);
}

.plotter-fieldset-pin svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Settings preview sentence (clustering, What If scenarios, …) */
.datama-settings-summary,
.datama-whatif-summary {
  display: block;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-left: 2px solid var(--datama-primary);
  background: rgba(var(--color-dark-rgb), 0.03);
  color: rgba(var(--color-dark-rgb), 0.65);
  font-size: 12px;
  line-height: 18px;
  font-style: italic;
}

/* Nested fieldsets used as subsections inside Clustering (Discrete / Continuous) */
.plotter-fieldset .plotter-fieldset-wrapper-nested {
  width: 100%;
  margin: 0.5rem 0 0 0;
}

.plotter-fieldset .plotter-fieldset-nested {
  box-shadow: none;
  margin: 0;
  background: rgba(var(--color-dark-rgb), 0.02);
}

/*
 * Host Light analysis fieldsets (`DataMaFieldSet`) keep `.datama-fieldset*` classes.
 * Re-use Studio layer rules so `dist/plotter/plotter.css` styles injected analysis
 * settings without Light `__fieldset.css`. Studio app also loads `_layer-fieldset.scss`
 * via `datama-studio.scss`; duplicate rules in the combined bundle are harmless.
 */
/* Host analysis sections: transparent wrapper so fieldsets layout like panel children. */
.plotter .plotter-panel .datama-studio-analysis-section {
  display: contents;
}

.plotter .plotter-panel .datama-market-equation-editor-body {
  flex-direction: column;
}

.plotter .plotter-panel .datama-market-equation-editor-outline {
  min-width: 0;
  flex: 1 1 100%;
}

/* Injected analysis forms use Studio `.datama-documentation` (not plotter-documentation). */
.plotter .plotter-panel .datama-documentation {
  padding: 0 !important;
  min-height: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  color: var(--datama-primary-light);
  transform: none !important;
}

.plotter .plotter-panel .datama-documentation:hover,
.plotter .plotter-panel .datama-documentation:focus {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgb(var(--datama-primary-rgb));
  transform: none !important;
}

.plotter .plotter-panel .datama-whatif-summary {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: rgba(var(--color-dark-rgb), 0.72);
}

.datama-whatif-scenario-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(var(--datama-primary-rgb), 0.22);
  border-radius: 8px;
  background: color-mix(in srgb, var(--datama-primary) 12%, var(--color-white));
}

.datama-whatif-scenario-notice-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin-top: 0.15rem;
  overflow: visible;
  color: rgb(var(--datama-primary-rgb));
}

.datama-whatif-scenario-notice-icon svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0;
  overflow: visible;
  fill: currentColor !important;
}

.datama-whatif-scenario-notice-text {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-body);
}

.datama-whatif-scenario-notice-paragraph {
  margin: 0;
}

.datama-whatif-scenario-panels {
  padding-inline: 1.125rem;
  padding-block: 0.375rem 0.125rem;
}

.datama-whatif-scenario-add {
  padding-inline: 1.125rem;
}

.datama-whatif-settings {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  min-width: 0;
}

.datama-whatif-scenario-panels {
  width: 100%;
}

.datama-whatif-scenario-panel > .datama-panel-header-container {
  cursor: pointer;
  gap: 0.5rem;
  padding: 0.65rem 2.75rem 0.65rem 1rem;
}

.datama-whatif-scenario-panel > .datama-panel-content {
  padding: 1.25rem 1.375rem 1.375rem;
  overflow: visible !important;
}

.datama-whatif-kpi-empty {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: rgba(var(--color-dark-rgb), 0.72);
}

.datama-whatif-fieldset-section .datama-fieldset-label-container {
  gap: 0.125rem;
}

.datama-whatif-fieldset-section .datama-fieldset-label-container .datama-documentation {
  margin-left: 0.125rem;
}

.plotter .plotter-panel .datama-whatif-fieldset-section {
  margin-bottom: 0.5rem !important;
}

.plotter .plotter-panel .datama-whatif-fieldset-section .datama-fieldset-container {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.datama-whatif-scenario-header {
  flex-wrap: nowrap;
}

.datama-whatif-scenario-title {
  min-width: 0;
  flex: 1 1 auto;
}

.datama-whatif-scenario-title .datama-input-container {
  margin-bottom: 0;
  width: 100%;
}

.datama-whatif-scenario-title .datama-input-label {
  display: none;
}

.datama-whatif-scenario-name-field,
.datama-whatif-scenario-title .datama-input {
  width: 100%;
  min-width: 0;
  font-size: 0.925rem;
  font-weight: 600;
  color: var(--text-body);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.18);
  border-radius: 0;
  padding: 0.15rem 0 0.25rem;
  min-height: 0;
  box-shadow: none;
}

.datama-whatif-scenario-name-field:focus,
.datama-whatif-scenario-title .datama-input:focus {
  outline: none;
  border-bottom-color: rgb(var(--datama-primary-rgb));
}

.datama-whatif-scenario-header-actions,
.datama-whatif-scenario-header-trailing-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.datama-whatif-scenario-header-actions .datama-input-container {
  margin-bottom: 0;
}

.datama-whatif-scenario-header-actions .datama-input-label {
  display: none;
}

/* What If scenario panels mount outside `.datama-panels` — mirror accordion chevron. */
.datama-whatif-scenario-panel > .datama-panel-header-container > .datama-panel-header-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: 0.5rem;
  color: var(--caret-color);
  pointer-events: none;
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.datama-whatif-scenario-panel > .datama-panel-header-container > .datama-panel-header-caret svg,
.datama-whatif-scenario-panel > .datama-panel-header-container > .datama-panel-header-caret path {
  width: 14px;
  height: 14px;
  display: block;
}

.datama-whatif-scenario-panel > .datama-panel-header-container:hover > .datama-panel-header-caret {
  color: var(--caret-color-hover);
}

.datama-whatif-scenario-panel:not(.datama-panel-close) > .datama-panel-header-container > .datama-panel-header-caret {
  color: var(--caret-color-open);
}

.datama-whatif-scenario-panel.datama-panel-close > .datama-panel-header-container > .datama-panel-header-caret {
  transform: none;
}

.datama-whatif-scenario-panel > .datama-panel-header-container:has(.datama-panel-header-caret)::after {
  content: none;
  display: none;
}

.datama-whatif-scenario-delete.datama-button.no-text,
.datama-whatif-kpi-delete.datama-button.no-text {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  min-width: 1.75rem;
  min-height: 1.75rem;
  padding: 0;
  color: var(--datama-danger, #c62828);
  background: var(--color-white);
  border: 1px solid rgba(198, 40, 40, 0.45);
  border-radius: var(--datama-radius-sm, 4px);
}

.datama-whatif-scenario-delete.datama-button.no-text:hover,
.datama-whatif-kpi-delete.datama-button.no-text:hover {
  color: var(--datama-danger, #c62828);
  border-color: rgba(198, 40, 40, 0.65);
  background: rgba(198, 40, 40, 0.06);
}

.datama-whatif-kpi-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0.25rem 3rem 0.25rem 0.85rem;
  margin-bottom: 0.5rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.1);
  border-radius: 8px;
  background: rgba(var(--color-dark-rgb), 0.02);
}

.datama-whatif-kpi-card .datama-whatif-kpi-delete {
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 2;
}

.datama-whatif-kpi-card .datama-fieldset-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0;
  min-height: var(--input-min-height);
  padding: 0.75rem 0.35rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
  box-sizing: border-box;
}

.datama-whatif-kpi-card .datama-fieldset-row:last-child {
  border-bottom: none;
}

.datama-whatif-kpi-card .datama-input-container {
  margin-bottom: 0;
}

.plotter .plotter-panel .datama-whatif-fieldset-section .datama-fieldset-inline .datama-fieldset-container {
  padding: 0.35rem 0.75rem 0.65rem 1rem;
  gap: 0;
}

.plotter .plotter-panel .datama-whatif-fieldset-section .datama-fieldset-inline .datama-fieldset-container {
  gap: 0.5rem;
}

.plotter .plotter-panel .datama-whatif-fieldset-section .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0.75rem 0.35rem;
  align-items: center;
}

.plotter .plotter-panel .datama-whatif-fieldset-section .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row:not(:last-child) {
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
}

.plotter .plotter-panel .datama-whatif-fieldset-section .datama-fieldset-inline .datama-fieldset-container > .datama-fieldset-row:last-child {
  border-bottom: none;
}

.datama-whatif-fieldset-section .datama-fieldset-row .datama-fieldset-right {
  justify-content: flex-end;
}

.datama-whatif-fieldset-section .datama-fieldset-row .datama-fieldset-right .datama-input-container {
  width: 100%;
  max-width: 14rem;
  min-width: 8rem;
}

.datama-whatif-fieldset-section .datama-fieldset-row .datama-fieldset-right .datama-input:not(.datama-input-switch),
.datama-whatif-fieldset-section .datama-fieldset-row .datama-fieldset-right .datama-input-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.datama-whatif-scenario-add,
.datama-whatif-kpi-add {
  margin-top: 0.25rem;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 *
 * Plotter-owned chrome widget styles. Duplicated from Light
 * (`src/assets/css/modules/__panels.css`) with `plotter-*` / `plotter-ui-*`
 * class names so Light CSS cannot style Plotter widgets.
 * `.plotter-ui-panel` avoids colliding with the side chrome `.plotter-panel`.
 *
 * Generated for file : __ui-panels.css project project-deep-sky
 */
.plotter-ui-panels-search {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.plotter-ui-panels-search--sticky {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--color-white);
  padding-top: 0.65rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  box-shadow: 0 -28px 36px 28px var(--color-white), 0 10px 24px 12px var(--color-white);
}

.plotter-ui-panels-search--sticky::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1.25rem;
  height: 1.25rem;
  background: linear-gradient(to top, var(--color-white), transparent);
  pointer-events: none;
}

.plotter-ui-panels-search--sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.75rem;
  height: 0.75rem;
  background: linear-gradient(to bottom, var(--color-white), transparent);
  pointer-events: none;
}

.plotter-ui-panels-scope-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Keep rubrique titles clear of the sticky search bar on rail navigation. */
  scroll-margin-top: 3.75rem;
}

.plotter-ui-panels-scope-section--solo {
  gap: 0;
}

.plotter-ui-panels-scope-heading {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.15rem 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-structure);
  border-bottom: 1px solid rgba(var(--datama-primary-rgb), 0.12);
}

.plotter-ui-panels-scope-heading-actions {
  margin-left: auto;
}

.plotter-ui-panels-scope-heading-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-chrome-color);
}

.plotter-ui-panels-scope-heading-icon .plotter-icon,
.plotter-ui-panels-scope-heading-icon svg {
  width: 0.95rem !important;
  height: 0.95rem !important;
  fill: currentColor !important;
}

.plotter-ui-panels-scope-title {
  line-height: 1.2;
}

.plotter-ui-panels-search-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.plotter-ui-panels-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  color: var(--icon-chrome-color);
  pointer-events: none;
  z-index: 1;
}

.plotter-ui-panels-search-icon .plotter-icon,
.plotter-ui-panels-search-icon svg {
  width: 1rem !important;
  height: 1rem !important;
  fill: currentColor !important;
}

.plotter-ui-panels-search input {
  width: 100%;
  padding: 0.6rem 2.25rem 0.6rem 2.5rem;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 8px;
  outline: none;
  font-size: 0.875rem;
  color: var(--color-dark);
  background: var(--color-white);
  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-ui-panels-search-field:focus-within .plotter-ui-panels-search-icon {
  color: var(--icon-action-color);
}

.plotter-ui-panels-search-field:focus-within input {
  border-color: var(--focus-border-color);
  box-shadow: var(--focus-ring);
}

.plotter-ui-panels-search input::placeholder {
  color: rgba(var(--color-dark-rgb), 0.45);
}

.plotter-ui-panels-search-clear {
  position: absolute;
  top: 50%;
  right: 0.65rem;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border: none;
  border-radius: 999px;
  background: rgba(var(--color-dark-rgb), 0.06);
  color: rgba(var(--color-dark-rgb), 0.55);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.plotter-ui-panels-search-clear:hover {
  background: rgba(var(--color-dark-rgb), 0.1);
  color: var(--color-dark);
}

.plotter-ui-panels-search-empty {
  padding: 0.35rem 0.15rem 0;
  font-size: 0.825rem;
  color: rgba(var(--color-dark-rgb), 0.55);
}

.plotter-ui-panels.plotter-ui-panels-searching > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching > .plotter-ui-panels-list > .plotter-ui-panels-scope-section.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .plotter-ui-panel.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .datama-panel.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .plotter-fieldset-wrapper.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .plotter-fieldset.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .plotter-fieldset-row.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .datama-fieldset-wrapper.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .datama-fieldset.plotter-ui-panel-search-hidden,
.plotter-ui-panels.plotter-ui-panels-searching .datama-fieldset-row.plotter-ui-panel-search-hidden {
  display: none !important;
}

.plotter-ui-panels-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plotter-ui-panels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.plotter-ui-panels > .plotter-ui-panel,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  overflow: visible;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

/* Closed panels — clip fading content and keep a solid surface */
.plotter-ui-panels > .plotter-ui-panel.plotter-ui-panel-close,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close {
  overflow: hidden;
  background: var(--color-white);
}

.plotter-ui-panels > .plotter-ui-panel:hover,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:hover {
  border-color: rgba(var(--color-dark-rgb), 0.12);
  box-shadow: 0 2px 6px 0 rgba(var(--color-dark-rgb), 0.08);
}

.plotter-ui-panels > .plotter-ui-panel:has(.plotter-input-select-open),
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:has(.plotter-input-select-open) {
  z-index: 10;
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 0.925rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  background: var(--color-white);
  color: var(--text-body);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon {
  margin-left: -0.25rem;
  margin-right: 0.5rem;
  color: var(--icon-action-color);
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon .plotter-icon,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon .plotter-icon,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon svg,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon svg {
  fill: var(--icon-action-color) !important;
  color: var(--icon-action-color);
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon *,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-icon * {
  font-size: 0.9rem !important;
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header {
  flex: 1;
  margin-right: auto;
  margin-left: 0;
  color: var(--text-body);
}

.plotter-ui-panels > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container {
  background: color-mix(in srgb, var(--datama-primary) 10%, var(--color-white));
  border-bottom-color: var(--state-active-border);
  color: var(--text-body);
}

.plotter-ui-panels > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container:hover,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container:hover {
  background: color-mix(in srgb, var(--datama-primary) 6%, var(--color-white));
  color: var(--text-body);
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-content,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-content {
  width: 100%;
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  background: var(--color-white);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: none;
  opacity: 1;
  visibility: visible;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Stack above siblings while open; keep overflow so scroll position is preserved. */
.plotter-ui-panels > .plotter-ui-panel:has(.plotter-ui-panel-content .plotter-input-select-open),
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:has(.plotter-ui-panel-content .plotter-input-select-open) {
  z-index: 100;
}

.plotter-ui-panels > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-content,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-content {
  height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}

.plotter-ui-panels > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container {
  background: var(--color-white);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.plotter-ui-panels > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container:hover,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container:hover {
  background: color-mix(in srgb, var(--color-dark) 3%, var(--color-white));
  color: var(--text-body);
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container {
  position: relative;
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-actions,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-actions,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-actions,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.5rem;
  z-index: 1;
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: 0.5rem;
  color: var(--caret-color);
  pointer-events: none;
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret svg,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret svg,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-caret svg,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-caret svg,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret path,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret path,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-caret path,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-caret path {
  width: 14px;
  height: 14px;
  display: block;
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container:hover > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container:hover > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container:hover > .datama-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container:hover > .datama-panel-header-caret {
  color: var(--caret-color-hover);
}

.plotter-ui-panels > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container > .datama-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel:not(.plotter-ui-panel-close) > .plotter-ui-panel-header-container > .datama-panel-header-caret {
  color: var(--caret-color-open);
}

.plotter-ui-panels > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container > .plotter-ui-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container > .datama-panel-header-caret,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel.plotter-ui-panel-close > .plotter-ui-panel-header-container > .datama-panel-header-caret {
  transform: none;
}

.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-trailing-actions,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .plotter-ui-panel-header-trailing-actions,
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-trailing-actions,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-trailing-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.35rem;
  z-index: 1;
}

/* Permettre l'overflow pour les dropdowns une fois l'animation terminée */
.plotter-ui-panel-content.allow-overflow {
  overflow: visible !important;
}

/*
 * Host Light analysis panels (`DataMaPanel`) keep `.datama-panel*` classes.
 * Style them here when they sit inside PlotterUiPanels so Light `__panels.css`
 * is not required. Host groups mount as direct children of `.plotter-ui-panels-scope-section`.
 * Do not use `.plotter-ui-panels .datama-panels` — that also matches nested Light accordions
 * inside panel content (What If, …) and breaks their headers with Plotter caret chrome.
 */
.plotter-ui-panels-scope-section > .datama-panels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  min-width: 0;
}

.plotter-ui-panels > .datama-panel, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
  overflow: visible;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.plotter-ui-panels > .datama-panel.datama-panel-close, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel.datama-panel-close, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel.datama-panel-close {
  overflow: hidden;
  background: var(--color-white);
}

.plotter-ui-panels > .datama-panel:hover, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:hover, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel:hover, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel:hover {
  border-color: rgba(var(--color-dark-rgb), 0.12);
  box-shadow: 0 2px 6px 0 rgba(var(--color-dark-rgb), 0.08);
}

.plotter-ui-panels > .datama-panel:has(.datama-input-select-open), .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:has(.datama-input-select-open), .plotter-ui-panels-scope-section > .datama-panels > .datama-panel:has(.datama-input-select-open), .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel:has(.datama-input-select-open) {
  z-index: 10;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 100%;
  padding: 1rem 1.25rem;
  font-size: 0.925rem;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  background: var(--color-white);
  color: var(--text-body);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: relative;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon {
  margin-left: -0.25rem;
  margin-right: 0.5rem;
  color: var(--icon-action-color);
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon,
.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg {
  fill: var(--icon-action-color) !important;
  color: var(--icon-action-color);
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon *, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon *, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon *, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon * {
  font-size: 0.9rem !important;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header {
  flex: 1;
  margin-right: auto;
  margin-left: 0;
  color: var(--text-body);
}

.plotter-ui-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container {
  background: color-mix(in srgb, var(--datama-primary) 10%, var(--color-white));
  border-bottom-color: var(--state-active-border);
  color: var(--text-body);
}

.plotter-ui-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover {
  background: color-mix(in srgb, var(--datama-primary) 6%, var(--color-white));
  color: var(--text-body);
}

.plotter-ui-panels > .datama-panel > .datama-panel-content, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-content, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-content, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-content {
  width: 100%;
  padding: 1rem 1.25rem 1.25rem 1.25rem;
  background: var(--color-white);
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-height: none;
  opacity: 1;
  visibility: visible;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-ui-panels > .datama-panel:has(.datama-panel-content .datama-input-select-open), .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:has(.datama-panel-content .datama-input-select-open), .plotter-ui-panels-scope-section > .datama-panels > .datama-panel:has(.datama-panel-content .datama-input-select-open), .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel:has(.datama-panel-content .datama-input-select-open) {
  z-index: 100;
}

.plotter-ui-panels > .datama-panel.datama-panel-close > .datama-panel-content, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-content, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel.datama-panel-close > .datama-panel-content, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-content {
  height: 0;
  max-height: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.3s;
}

.plotter-ui-panels > .datama-panel.datama-panel-close > .datama-panel-header-container, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container {
  background: var(--color-white);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.plotter-ui-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:hover, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:hover, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:hover, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:hover {
  background: color-mix(in srgb, var(--color-dark) 3%, var(--color-white));
  color: var(--text-body);
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container:has(.datama-panel-header-caret)::after, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container:has(.datama-panel-header-caret)::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container:has(.datama-panel-header-caret)::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:has(.datama-panel-header-caret)::after {
  content: none;
  display: none;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-actions, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-actions, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-actions, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.5rem;
  z-index: 1;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-left: 0.5rem;
  color: var(--caret-color);
  pointer-events: none;
  transform: rotate(180deg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret svg, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret svg, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret svg, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret svg,
.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret path, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret path, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret path, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret path {
  width: 14px;
  height: 14px;
  display: block;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container:hover > .datama-panel-header-caret, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container:hover > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container:hover > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:hover > .datama-panel-header-caret {
  color: var(--caret-color-hover);
}

.plotter-ui-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container > .datama-panel-header-caret {
  color: var(--caret-color-open);
}

.plotter-ui-panels > .datama-panel.datama-panel-close > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container > .datama-panel-header-caret, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container > .datama-panel-header-caret {
  transform: none;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-trailing-actions, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-trailing-actions, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-trailing-actions, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-trailing-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.35rem;
  z-index: 1;
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 0;
  height: 0;
  border-bottom: 5px solid var(--caret-color);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-bottom-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-ui-panels > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after {
  border-bottom-color: var(--caret-color-hover);
}

.plotter-ui-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after {
  border-bottom-color: var(--caret-color-open);
}

.plotter-ui-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after {
  transform: translateY(-50%) rotate(180deg);
}

.plotter-ui-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after, .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after, .plotter-ui-panels-scope-section > .datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after {
  border-bottom-color: var(--caret-color-hover);
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __plotter.css project project-deep-sky
 */
.plotter {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

.plotter.plotter-layout-root {
  display: grid;
}

.plotter .plotter-context-menu {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.plotter .plotter-context-menu > .datama-context-menu {
  pointer-events: auto;
}

.plotter .plotter-shortcut-on-hover {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}

.plotter .plotter-shortcuts:hover .plotter-shortcut-on-hover {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.plotter .plotter-panel.fullscreen {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100% !important;
  height: 100%;
  max-height: 100%;
  z-index: 9999;
  background-color: var(--datama-background-color, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.plotter .plotter-panel.fullscreen > .plotter-panel-actions {
  flex: 0 0 30px;
  width: 30px;
  z-index: 3;
  background-color: var(--datama-background-color, #fff);
}

.plotter .plotter-panel.fullscreen > .plotter-panel-content {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: clip;
  overflow-y: auto;
}

/* Hide resize handle/affordance when panel is fullscreen */
/* Hide drag handle in quick-actions when fullscreen */
.plotter .plotter-panel.fullscreen > .plotter-panel-actions::before {
  display: none !important;
}

.plotter-plot .domain {
  display: none;
}

.plotter-plot {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.plotter-plot .overlay {
  width: 100% !important;
}

/* Body-level width probe (`PlotterText.computeRenderWidth`). Keep it out of
   flow and unpainted — `display:none` would make `clientWidth` 0. */
#plotter-testing-text,
.plotter-testing-text {
  position: absolute !important;
  visibility: hidden;
  height: auto;
  width: auto;
  white-space: nowrap;
  z-index: -1;
  top: 0;
  left: 0;
}

/*
 * Plotter layout regions, split panes, and chrome placement.
 */
.plotter-layout-root {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "top top top" "left center right" "bottom bottom bottom";
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 0;
}

.plotter-region {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Title and shortcut toolbar share one row: stacking them added a blank band above the
 * chart that grew as the window shrank.
 *
 * The toolbar is taken out of flow and pinned to the top-right corner, and the title
 * reserves room for it with a float spacer (`--plotter-shortcuts-width`, measured in
 * Plotter.js) — except when shortcuts are hover-only, where reservation is 0 so the title
 * stays full-width and the toolbar covers trailing words on hover. That way the title wraps
 * *around* a always-visible toolbar on its first line and uses the full width below it,
 * instead of being squeezed into a column narrow enough to turn a one-line insight into six.
 * When the row is genuinely too narrow for both, the toolbar sits on top of the title and
 * Plotter toggles `.plotter-shortcuts-over-title` for an opaque background (see
 * __shortcuts.css) — covering a few words legibly beats interleaving two texts. */
.plotter-region-top {
  grid-area: top;
  display: block;
  position: relative;
  flex-shrink: 0;
  min-height: 0;
  /* Stacking context for the absolute shortcut toolbar without an isolated blend group. */
  z-index: 0;
  /* Breathing room under the absolute shortcut toolbar before chart / side comment. */
  padding-bottom: 20px;
}

.plotter-region-left {
  grid-area: left;
  flex-direction: column;
}

.plotter-region-center {
  grid-area: center;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.plotter-region-center > .plotter-split-root {
  flex: 1 1 auto;
  min-height: 0;
}

.plotter-region-center.plotter-region-center-scrollable {
  overflow-y: auto;
  overflow-x: hidden;
}

.plotter-split-root.plotter-split-grid-stack {
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.plotter-region-right {
  grid-area: right;
  flex-direction: column;
}

.plotter-region-bottom {
  grid-area: bottom;
  flex-direction: column;
}

.plotter-split-root {
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
}

.plotter-split-root.plotter-split-grid {
  display: grid;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.plotter-split-root.plotter-split-grid-intrinsic {
  height: auto;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.plotter-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.plotter-split-grid-intrinsic .plotter-pane {
  height: auto;
}

.plotter-split-grid-intrinsic .plotter-pane.plotter-pane-chart .plotter-visualization {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

.plotter-split-grid-intrinsic .plotter-pane.plotter-pane-table .plotter-visualization.plotter-table-active,
.plotter-split-grid-intrinsic .plotter-pane.plotter-pane-table .plotter-table-view {
  flex: 0 1 auto;
  height: auto;
  min-height: 0;
}

.plotter-pane-resize-handle {
  position: absolute;
  z-index: 4;
  background: transparent;
  touch-action: none;
}

.plotter-pane-resize-handle-col {
  width: 8px;
  cursor: col-resize;
}

.plotter-pane-resize-handle-row {
  left: 0;
  right: 0;
  height: 8px;
  cursor: row-resize;
}

.plotter-pane-resize-handle:hover,
.plotter.plotter-pinned-resizing .plotter-pane-resize-handle {
  background: color-mix(in srgb, var(--datama-primary, #0066cc) 35%, transparent);
}

.plotter.plotter-pinned-resizing {
  cursor: inherit;
}

.plotter.plotter-pinned-resizing .plotter-pane-resize-handle-col {
  cursor: col-resize;
}

.plotter.plotter-pinned-resizing .plotter-pane-resize-handle-row {
  cursor: row-resize;
}

.plotter-pane.plotter-pane-span-row {
  grid-column: 1/-1;
}

.plotter-pane.plotter-pane-custom {
  justify-content: flex-start;
  align-items: stretch;
}

.plotter-pane.plotter-pane-custom .plotter-custom-view {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.plotter-pane .plotter-visualization {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.plotter-pane .plotter-table-view {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.plotter-split-grid-intrinsic .plotter-custom-view {
  max-height: none;
}

.plotter-custom-view {
  display: flex;
  flex-direction: column;
  line-height: 1.45;
  width: 100%;
  min-height: 0;
  flex: 0 1 auto;
  height: auto;
  max-height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.plotter-custom-view .datama-module-comment p,
.plotter-custom-view .datama-module-comment ul,
.plotter-custom-view .datama-module-comment ol,
.plotter-custom-view .datama-module-comment li,
.plotter-hover p,
.plotter-hover ul,
.plotter-hover ol,
.plotter-hover li {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.45;
}

.plotter-custom-view .datama-module-comment ul > li::after {
  line-height: 1.45;
}

.plotter-custom-view .datama-module-comment p + p,
.plotter-custom-view .datama-module-comment p + ul,
.plotter-custom-view .datama-module-comment p + ol,
.plotter-custom-view .datama-module-comment ul + p,
.plotter-custom-view .datama-module-comment ol + p,
.plotter-custom-view .datama-module-comment li + li,
.plotter-hover p + p,
.plotter-hover li + li {
  margin-top: 0.2rem;
}

.plotter-custom-view .datama-module-comment ul,
.plotter-custom-view .datama-module-comment ol,
.plotter-hover ul,
.plotter-hover ol {
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  padding-left: 1.15rem;
}

.plotter-custom-view .datama-module-comment li > p,
.plotter-custom-view .datama-module-comment li > ul,
.plotter-custom-view .datama-module-comment li > ol,
.plotter-hover li > p,
.plotter-hover li > ul,
.plotter-hover li > ol {
  margin-top: 0;
  margin-bottom: 0;
}

.plotter-shortcuts .datama-icon,
.plotter-shortcuts .plotter-icon {
  font-size: 20px;
}

.plotter-legends-horizontal .plotter-legends-layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.plotter-legends-horizontal .plotter-legends-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.plotter-legends-horizontal .plotter-legend {
  display: inline-flex;
  align-items: center;
  margin: 0;
}

/* Current view indicator in shortcut button-group (pinned = active). */
.plotter-shortcuts .datama-input-button-group-buttons button.plotter-view-current:not(.active),
.plotter-shortcuts .plotter-input-button-group-buttons button.plotter-view-current:not(.active) {
  background-color: rgba(var(--datama-primary-rgb), 0.08) !important;
  outline: none;
  border: none !important;
}

/* Difference arrows (think-cell style chart decorations) */
.plotter-plot.plotter-difference-picking {
  cursor: crosshair;
}

.plotter-plot.plotter-difference-picking .plotter-traces path.plotter-trace-element-path {
  cursor: crosshair;
}

/*
 * Hit-testing must stay on the stroke / label / heads only. An SVG <g> with
 * listeners (or cursor) can otherwise use its bounding box — for a total
 * bracket that fills the whole rectangle under the lane and blocks Split by
 * on the bars the arrow spans.
 */
.plotter-plot .plotter-difference {
  pointer-events: none;
}

.plotter-plot .plotter-difference .plotter-difference-line,
.plotter-plot .plotter-difference .plotter-difference-extension {
  pointer-events: none;
}

.plotter-plot .plotter-difference .plotter-difference-line-hit {
  pointer-events: stroke;
  cursor: grab;
}

.plotter-plot .plotter-difference .plotter-difference-line-hit:active {
  cursor: grabbing;
}

.plotter-plot .plotter-difference .plotter-difference-head,
.plotter-plot .plotter-difference .plotter-difference-label-bubble,
.plotter-plot .plotter-difference .plotter-difference-label-text {
  pointer-events: visiblePainted;
  cursor: pointer;
}

/* CAGR arrows are fully determined by their anchors: nothing to drag and the
   label content is fixed (the per-period rate). */
.plotter-plot .plotter-difference[data-difference-kind=cagr] .plotter-difference-line-hit,
.plotter-plot .plotter-difference[data-difference-kind=cagr] .plotter-difference-line-hit:active,
.plotter-plot .plotter-difference[data-difference-kind=cagr] .plotter-difference-label-bubble,
.plotter-plot .plotter-difference[data-difference-kind=cagr] .plotter-difference-label-text {
  cursor: default;
}

.plotter-plot .plotter-difference .plotter-difference-label-text {
  user-select: none;
}

.plotter-plot .plotter-difference-preview {
  pointer-events: none;
  opacity: 0.8;
}

/* Picking affordances: only the source trace can receive the second anchor,
   other traces are muted and click-through; candidates highlight on hover. */
.plotter-plot .plotter-traces.plotter-difference-picking-muted {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}

/* A waterfall holds a single trace, so muting the other traces shows nothing:
   fade every candidate element of the source trace instead, and keep only the
   hovered target (and the already picked source) fully opaque, so the landing
   element of the preview arrow is unambiguous. */
.plotter-plot.plotter-difference-picking .plotter-traces:not(.plotter-difference-picking-muted) path.plotter-trace-element-path {
  opacity: 0.3;
  transition: opacity 0.15s ease-out;
}

.plotter-plot.plotter-difference-picking .plotter-traces:not(.plotter-difference-picking-muted) path.plotter-trace-element-path:hover,
.plotter-plot.plotter-difference-picking .plotter-traces:not(.plotter-difference-picking-muted) path.plotter-difference-picking-from {
  opacity: 1;
}

.plotter-plot.plotter-difference-picking .plotter-traces:not(.plotter-difference-picking-muted) path.plotter-trace-element-path:hover {
  stroke: var(--color-dark, #0f172a);
  stroke-width: 2px;
}

.plotter-plot .plotter-traces path.plotter-difference-picking-from {
  stroke: var(--color-dark, #0f172a);
  stroke-width: 2px;
  stroke-dasharray: 4, 3;
}

/* Calculation detail tooltip (start anchor, end anchor, delta) */
.plotter .plotter-difference-tooltip {
  position: absolute;
  z-index: 11;
  opacity: 0;
  pointer-events: none;
  background-color: var(--color-white, #ffffff);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(var(--color-dark-rgb), 0.25);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  white-space: nowrap;
  transition: opacity 0.1s ease-in;
}

.plotter .plotter-difference-tooltip.show {
  opacity: 1;
}

.plotter .plotter-difference-tooltip .plotter-difference-tooltip-delta {
  margin-top: 3px;
  padding-top: 3px;
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.15);
  font-weight: 600;
}

.plotter .plotter-annotation {
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  text-align: center;
}

.plotter .plotter-annotation > div {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

.plotter .plotter-annotation > div > * {
  pointer-events: all;
}

.plotter .plotter-annotation > .plotter-annotation-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.plotter .plotter-annotation > .plotter-annotation-top,
.plotter .plotter-annotation > .plotter-annotation-top-trace,
.plotter .plotter-annotation > .plotter-annotation-positive {
  position: absolute;
  top: 0;
}

.plotter .plotter-annotation > .plotter-annotation-bottom,
.plotter .plotter-annotation > .plotter-annotation-bottom-trace,
.plotter .plotter-annotation > .plotter-annotation-negative {
  position: absolute;
  bottom: 0;
}

.plotter-header {
  display: flex;
  flex-direction: column;
  /* Shares the top row with the shortcut toolbar. Zero flex-basis so the long insight
   * title never bids for intrinsic width and squeeze the toolbar out of the row: the
   * header simply takes whatever is left. */
  flex: 1 1 0;
  min-width: 0;
  /* Keep title clear of the app header border / soft edge bleed. */
  padding-top: 6px;
}

.plotter-header .plotter-title {
  line-height: 1.5rem;
  font-size: var(--plotter-header-font-size, 18px);
  font-weight: var(--plotter-header-font-weight, 400);
  font-family: var(--plotter-header-font-family, var(--font-family-heading, inherit));
  color: var(--plotter-header-font-color, inherit);
  /* Block, not flex: the toolbar reserves its corner with a right float (see
   * __shortcuts.css), and floats are ignored inside a flex container. Text flow also lets
   * a one-element insight title wrap instead of overflowing its track. */
  display: block;
  min-width: 0;
}

.plotter-header .plotter-title > * {
  width: unset !important;
  /* Fragments stay in the text flow so the title wraps as one sentence. Forcing `nowrap`
   * here is what made a long insight title overrun the row and slide under the toolbar.
   * `!important` beats `div[data-app="true"] .datama-translated { display: inline-block }`,
   * which otherwise clears below the shortcuts float and leaves an empty first line. */
  display: inline !important;
}

.plotter-header .plotter-title > .datama-input-container,
.plotter-header .plotter-title > .plotter-input-container,
.plotter-header .plotter-title .datama-input-select,
.plotter-header .plotter-title .plotter-input-select {
  /* Interactive fragments are the exception: they must not be split across lines.
   * `!important` keeps this above `.plotter-title > * { display: inline !important }`, which
   * otherwise downgrades selects to plain inline and lets each one span the full title width. */
  display: inline-flex !important;
  vertical-align: baseline;
  flex-wrap: nowrap;
  white-space: nowrap;
  width: auto !important;
  max-width: 100%;
}

.plotter-shortcuts .datama-input-select,
.plotter-shortcuts .plotter-input-select {
  width: auto;
}

.plotter-shortcuts .datama-input-container,
.plotter-shortcuts .plotter-input-container {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 0.25rem;
}

.plotter-header .plotter-title > .datama-translated {
  font-weight: inherit;
}

.plotter-header .plotter-title .datama-input-select.datama-input-select-light,
.plotter-header .plotter-title .plotter-input-select.plotter-input-select-light {
  padding: 0 1rem 0 0;
}

.plotter-header .plotter-title .datama-input-select::after,
.plotter-header .plotter-title .plotter-input-select::after {
  right: 0.25rem;
  transform: unset;
}

.plotter-hover {
  line-height: 20px;
}

.plotter-hover p {
  margin-bottom: 0 !important;
}

.plotter-hover .datama-translated {
  display: inline;
}

.plotter-hover main > div {
  width: 100%;
}

/* Add edit icon to editable labels */
.plotter-editable-label {
  position: relative;
  cursor: pointer;
}

.plotter-editable-label:hover::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23333'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity 0.15s ease;
}

.plotter-header .plotter-title .datama-input-select.datama-input-select-light > .datama-input-select-value,
.plotter-header .plotter-title .plotter-input-select.plotter-input-select-light > .plotter-input-select-value {
  font-weight: inherit;
  font-size: inherit;
}

.plotter-header .plotter-subtitle {
  line-height: 1.25rem;
  font-size: var(--plotter-header-font-size, 14px);
  font-weight: var(--plotter-header-font-weight, 400);
  font-family: var(--plotter-header-font-family, inherit);
  color: var(--plotter-header-font-color, inherit);
  margin-top: 2px;
  margin-bottom: 0;
}

.plotter-header .plotter-subtitle:empty {
  display: none;
}

/* High covariance caution note appended to the slide subtitle (DEV-8929) */
.plotter-header .plotter-subtitle .datama-compare-covariance-warning {
  display: block;
  margin-top: 4px;
  padding: 4px 8px;
  border-left: 3px solid #e0a800;
  border-radius: 3px;
  background: rgba(255, 193, 7, 0.18);
  color: rgba(var(--color-dark-rgb), 0.8);
  font-style: italic;
  font-size: calc(var(--plotter-header-font-size, 14px) - 1px);
  line-height: 1.25rem;
}

.plotter-header .plotter-subtitle .datama-compare-covariance-warning a {
  color: inherit;
  text-decoration: underline;
}

.plotter-shortcuts {
  display: flex;
  /* Pinned to the top-right of the title row and out of flow, so a long insight title can
   * never squeeze it (nor be squeezed by it). The title reserves its width through a float
   * spacer; below that width the toolbar may cover the title — opaque chrome is toggled
   * then via `.plotter-shortcuts-over-title` (see Plotter#watchShortcutToolbarWidth). */
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: max-content;
  max-width: 100%;
  justify-content: flex-end;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  flex: 0 0 auto;
  line-height: 40px;
  font-size: 20px;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  /* One row, always. Wrapping to a second row put icons in the middle of the title with
   * only the first row's background behind them. Overflow scrolls inside
   * `.plotter-shortcuts-main` so the Settings toggle can stay pinned outside that strip. */
  overflow-x: hidden;
  overflow-y: hidden;
  /* Transparent by default so colored viz surfaces stay uninterrupted. Opaque chrome is
   * applied only while title content sits under the toolbar (class below). */
  background: transparent;
  contain: layout style paint;
}

/* Opaque surface + leading-edge fade: only when shortcuts cover slide-title content.
 * Prefer the host viz surface (`--datama-background-color`) over pure white so the strip
 * matches colored / gray dashboards instead of flashing a white patch. */
.plotter-shortcuts.plotter-shortcuts-over-title {
  background: var(--plotter-surface-color, var(--datama-background-color, var(--color-light, #fff)));
  padding-left: 14px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px);
  mask-image: linear-gradient(to right, transparent 0, #000 14px);
}

.plotter-shortcuts-main::-webkit-scrollbar {
  display: none;
}

/* Title-side reservation: a right float the toolbar sits on top of. Lines that would run
 * into the toolbar move below it; the rest of the title keeps the full width.
 * When shortcuts are hover-only, Plotter publishes width/height 0 so the title stays on
 * one full-width line; the toolbar may cover trailing words on hover (opaque chrome only
 * while `.plotter-shortcuts-over-title` is active). */
.plotter-region-top .plotter-header .plotter-title::before {
  content: "";
  float: right;
  width: var(--plotter-shortcuts-width, 0px);
  max-width: 100%;
  height: var(--plotter-shortcuts-reserve-height, 40px);
}

.plotter-shortcuts.plotter-shortcuts-hover-only {
  opacity: 0;
  transition: opacity 0.1s ease-out;
}

.plotter-layout-root:has(.plotter-region-top:hover) .plotter-shortcuts.plotter-shortcuts-hover-only,
.plotter-layout-root:has(.plotter-region-center:hover) .plotter-shortcuts.plotter-shortcuts-hover-only {
  opacity: 1;
  transition: opacity 0.2s ease-in;
}

.plotter-shortcuts > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important; /* Remove margins since we use gap */
  margin-right: 0 !important; /* Remove margins since we use gap */
  display: flex;
  flex-wrap: nowrap;
  gap: 4px; /* Add small gap within each shortcut item */
  flex-shrink: 1; /* Allow items to shrink when space is limited */
  min-width: 0; /* Allow items to shrink below their content width */
  align-items: center; /* Ensure vertical alignment within each item */
}

.plotter-shortcuts > .datama-button > .datama-button-text,
.plotter-shortcuts > .plotter-button > .plotter-button-text {
  font-size: 0.8rem;
  align-self: center;
}

/* Add margin bottom to buttons for alignment with selects */
.plotter-shortcuts .datama-button,
.plotter-shortcuts .plotter-button {
  margin-bottom: 4px;
}

.plotter-shortcuts .datama-input-container,
.plotter-shortcuts .plotter-input-container {
  margin-bottom: 4px;
}

/* Button group for desktop - make it transparent to layout */
.plotter-shortcuts-button-group {
  display: contents; /* Make it transparent on desktop */
}

/* Show dividers in button group on both desktop and mobile */
.plotter-shortcuts-button-group .datama-divider,
.plotter-shortcuts-button-group .plotter-divider,
.plotter-shortcuts-content > .datama-divider,
.plotter-shortcuts-content > .plotter-divider {
  width: 1px;
  height: 20px;
  background-color: rgba(var(--color-dark-rgb), 0.2);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Hide mobile separator on desktop */
.plotter-shortcuts-separator {
  display: none;
}

/* Style for active toggle buttons in shortcuts (standalone buttons only;
 * segmented subgroup toggles use static fill in __input.css — do not stack a second layer). */
.plotter-shortcuts .datama-button.active:not(.datama-input-button-group-segment-selected),
.plotter-shortcuts .plotter-button.active:not(.plotter-input-button-group-segment-selected) {
  background-color: var(--state-active-bg) !important;
  border-color: var(--state-active-border) !important;
  color: var(--state-active-text) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.plotter-shortcuts .datama-button.active:not(.datama-input-button-group-segment-selected) .datama-icon,
.plotter-shortcuts .plotter-button.active:not(.plotter-input-button-group-segment-selected) .plotter-icon,
.plotter-shortcuts .datama-button.active:not(.datama-input-button-group-segment-selected) .datama-icon path,
.plotter-shortcuts .plotter-button.active:not(.plotter-input-button-group-segment-selected) .plotter-icon path {
  color: var(--state-active-text) !important;
  fill: var(--state-active-text) !important;
}

.plotter-shortcuts .datama-button.active:not(.datama-input-button-group-segment-selected):hover,
.plotter-shortcuts .plotter-button.active:not(.plotter-input-button-group-segment-selected):hover {
  background-color: rgba(var(--datama-primary-rgb), 0.15) !important;
  border-color: rgba(var(--datama-primary-rgb), 0.4) !important;
  transform: scale(1.02);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-shortcuts .datama-input-button-group-segment-toggle .datama-button.active,
.plotter-shortcuts .plotter-input-button-group-segment-toggle .plotter-button.active,
.plotter-shortcuts .datama-input-button-group-segment-toggle .datama-button.active:hover,
.plotter-shortcuts .plotter-input-button-group-segment-toggle .plotter-button.active:hover {
  background-color: var(--state-active-bg) !important;
  border-radius: 12px !important;
  transform: none !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

.plotter-shortcuts .datama-input-button-group,
.plotter-shortcuts .plotter-input-button-group {
  display: contents;
}

.plotter-shortcuts-button-group .datama-input-container:has(.datama-input-button-group),
.plotter-shortcuts-button-group .plotter-input-container:has(.plotter-input-button-group),
.plotter-shortcuts .datama-input-container:has(.datama-input-button-group),
.plotter-shortcuts .plotter-input-container:has(.plotter-input-button-group) {
  display: contents;
}

.plotter-shortcuts-button-group .datama-input-container:has(.datama-input-button-group) > .datama-input-label,
.plotter-shortcuts-button-group .plotter-input-container:has(.plotter-input-button-group) > .plotter-input-label,
.plotter-shortcuts .datama-input-container:has(.datama-input-button-group) > .datama-input-label,
.plotter-shortcuts .plotter-input-container:has(.plotter-input-button-group) > .plotter-input-label {
  display: none;
}

.plotter-shortcuts .datama-input-button-group-buttons,
.plotter-shortcuts .plotter-input-button-group-buttons {
  display: contents;
}

.plotter-shortcuts .datama-input-button-group-segmented .datama-input-button-group-buttons,
.plotter-shortcuts .plotter-input-button-group-segmented .plotter-input-button-group-buttons {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  /* The segmented group is the one control that still wrapped inside the toolbar, which
   * is what pushed the toolbar to ~74px and spilled icons over the title. */
  flex-wrap: nowrap;
}

.plotter-shortcuts .datama-input-button-group-segmented,
.plotter-shortcuts .plotter-input-button-group-segmented {
  display: inline-flex;
  align-items: center;
}

.plotter-shortcuts .datama-input-button-group-segmented .datama-input-button-group-segment .datama-button,
.plotter-shortcuts .plotter-input-button-group-segmented .plotter-input-button-group-segment .plotter-button {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.plotter-shortcuts .datama-input-button-group-segment:has(.datama-button + .datama-button),
.plotter-shortcuts .plotter-input-button-group-segment:has(.plotter-button + .plotter-button) {
  border-radius: 12px;
  min-width: 64px;
  height: 30px;
  min-height: 30px;
}

.plotter-shortcuts .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button,
.plotter-shortcuts .plotter-input-button-group-segment:has(.plotter-button + .plotter-button) .plotter-button {
  flex: 1 1 0;
  min-width: 30px;
  min-height: 0 !important;
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

.plotter-shortcuts .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button.active,
.plotter-shortcuts .plotter-input-button-group-segment:has(.plotter-button + .plotter-button) .plotter-button.active,
.plotter-shortcuts .datama-input-button-group-segment:has(.datama-button + .datama-button) .datama-button.active:hover,
.plotter-shortcuts .plotter-input-button-group-segment:has(.plotter-button + .plotter-button) .plotter-button.active:hover {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: none !important;
}

.plotter-shortcuts > .datama-input,
.plotter-shortcuts > .plotter-input {
  line-height: 40px;
}

div[data-app=true] .plotter-shortcuts .datama-input-label,
div[data-app=true] .plotter-shortcuts .plotter-input-label {
  margin-right: 5px !important;
  margin-left: 5px !important;
}

.plotter-shortcuts > .datama-input-container > *:not(.datama-input-select-counter),
.plotter-shortcuts > .plotter-input-container > *:not(.plotter-input-select-counter) {
  display: inline-block;
  min-width: unset;
  line-height: 30px;
  min-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

/* Disable counter completely in plotter shortcuts */
.plotter-shortcuts .datama-input-select-counter,
.plotter-shortcuts .plotter-input-select-counter {
  display: none !important; /* Hide counter in shortcuts */
}

/* Hover effects for all buttons in shortcuts, including inactive ones */
.plotter-shortcuts .datama-button:not(.active):hover,
.plotter-shortcuts .plotter-button:not(.active):hover {
  background-color: rgba(var(--color-dark-rgb), 0.04) !important;
  border-color: rgba(var(--color-dark-rgb), 0.12) !important;
  transform: translateY(-1px);
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.plotter-shortcuts .datama-button:not(.active):hover .datama-icon,
.plotter-shortcuts .plotter-button:not(.active):hover .plotter-icon,
.plotter-shortcuts .datama-button:not(.active):hover .datama-icon path,
.plotter-shortcuts .plotter-button:not(.active):hover .plotter-icon path {
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Shortcut toolbar — inline on the title row. */
.plotter-shortcuts-content {
  display: flex;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  /* Single row: a wrapped toolbar spilled its second row over the title, outside the
   * opaque background that is supposed to hide what it covers. */
  flex-wrap: nowrap;
  z-index: 1;
}

/* Scrollable selects + action icons. Settings (`.plotter-table-view-toggle`) is a sibling
 * after this strip so it stays visible when the row is narrower than the controls.
 * Flex overflow would otherwise treat `justify-content: flex-end` as flex-start and clip
 * the trailing Settings control off the right edge (scrollbar is hidden). */
.plotter-shortcuts-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.plotter-shortcuts-content > .plotter-divider,
.plotter-shortcuts-content > .datama-divider,
.plotter-shortcuts-content > .plotter-table-view-toggle {
  flex: 0 0 auto;
}

/* Responsive layout for shortcuts */
@media screen and (max-width: 1024px) {
  .plotter-shortcuts-content,
  .plotter-shortcuts-main,
  .plotter-shortcuts-content * {
    gap: 4px;
    row-gap: 0;
  }
}
/* What If pinned impact — compact inline control (not a full-width select shortcut). */
.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-width: none;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 8px 0 6px;
  min-height: 30px;
}

.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-label {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 8rem;
  margin: 0 2px 0 0 !important;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  position: static;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}

.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number] {
  width: 4.25rem;
  min-width: 3.75rem;
  max-width: 5.5rem;
  min-height: 24px;
  height: 24px;
  padding: 0 0 0 2px;
  margin: 0;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  text-align: right;
  flex: 0 0 auto;
  box-sizing: border-box;
}

.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number]:hover,
.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number]:focus,
.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number]:focus-visible {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Keep native steppers visible in the toolbar (hover-only opacity is too easy to miss). */
.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number]::-webkit-outer-spin-button,
.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
  height: 18px;
  width: 14px;
  cursor: pointer;
  background: rgba(var(--color-dark-rgb), 0.1);
  border-radius: 2px;
  margin: 0 0 0 1px;
}

.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number]::-webkit-inner-spin-button:hover,
.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-container.datama-input-with-unit .datama-input[type=number]::-webkit-outer-spin-button:hover {
  background: rgba(var(--datama-primary-rgb), 0.15);
}

.plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-unit {
  position: static;
  transform: none;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  flex: 0 0 auto;
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  /* Narrow viewports keep the single-row toolbar (see `.plotter-shortcuts`): it is pinned
   * over the title, so growing taller here would bury more of the insight than it saves. */
  .plotter-shortcuts-button-group {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    align-items: center;
  }
  .plotter-shortcuts-button-group .datama-button,
  .plotter-shortcuts-button-group .plotter-button {
    flex: 0 0 auto;
    margin: 0 !important;
  }
  /* Show and style dividers in button group for narrow viewports */
  .plotter-shortcuts-button-group .datama-divider,
  .plotter-shortcuts-button-group .plotter-divider,
  .plotter-shortcuts-content > .datama-divider,
  .plotter-shortcuts-content > .plotter-divider {
    display: block !important;
    width: 1px;
    height: 20px;
    background-color: rgba(var(--color-dark-rgb), 0.2);
    margin: 0 8px;
    flex-shrink: 0;
  }
  /* Separator between selects and buttons. Vertical like its desktop siblings: as a
   * full-width horizontal rule it stretched the single-row toolbar across the whole row,
   * so the title could never share the line with it. */
  .plotter-shortcuts-separator {
    display: block !important;
    width: 1px;
    height: 20px;
    background-color: rgba(var(--color-dark-rgb), 0.2);
    margin: 0 4px;
    flex-shrink: 0;
  }
  .plotter-shortcuts .datama-input-container:has([id*=-step]),
  .plotter-shortcuts .plotter-input-container:has([id*=-step]) {
    padding-left: 0;
    padding-top: 1rem;
  }
  .plotter-shortcuts .datama-input-container:has([id*=-metric]),
  .plotter-shortcuts .plotter-input-container:has([id*=-metric]) {
    padding-right: 0;
    padding-bottom: 1rem;
  }
}
.plotter-plot {
  cursor: crosshair;
  position: relative;
  contain: layout paint;
}

/* Chart title / subtitle bands (HTML): reserved above/below scales so axes and marks do not overlap. */
.plotter-visualization {
  position: relative;
  contain: layout paint;
}

.plotter-trace-title,
.plotter-trace-subtitle {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  pointer-events: auto;
  line-height: 1.25;
  color: inherit;
  /* Keep bands readable while SVG marks use data-hover dimming. */
  opacity: 1 !important;
}

.plotter-trace-title[data-align=left],
.plotter-trace-subtitle[data-align=left] {
  justify-content: flex-start;
  text-align: left;
}

.plotter-trace-title[data-align=center],
.plotter-trace-subtitle[data-align=center] {
  justify-content: center;
  text-align: center;
}

.plotter-trace-title[data-align=right],
.plotter-trace-subtitle[data-align=right] {
  justify-content: flex-end;
  text-align: right;
}

.plotter-trace-title > *,
.plotter-trace-subtitle > * {
  min-width: 0;
  max-width: 100%;
}

.plotter-plot .plotter-highlight {
  background: currentColor;
  transition: 0.2s ease-in;
}

.plotter-plot .plotter-highlight * {
  color: white;
  transition: 0.2s ease-in;
}

/*
 * Compare cross-view sync on waterfall bars: soft drop-shadow "halo" around the filled path.
 * stroke-width alone is invisible when the bar stroke matches fill / is transparent.
 */
.plotter-plot path.plotter-trace-element-path.plotter-sync-highlight {
  opacity: 1;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 2px;
  paint-order: stroke fill;
}

/*
 * Hierarchy axis tick label soft primary fill (#00484A @ 35%).
 * Applied on `g.plotter-axis-tick` by DataMaComparePlotterHoverSync.
 * Target only `.plotter-tick-text` (the foreignObject container) — nested
 * `.plotter-tick-text-label` / `.plotter-tick-text-rotated` must not get a second fill.
 */
.plotter-plot g.plotter-axis-tick.plotter-sync-tick-highlight .plotter-tick-text {
  background-color: rgba(var(--datama-primary-rgb), 0.35);
  border-radius: 2px;
}

.plotter-traces[data-trace=events] .plotter-trace-element-cursor {
  pointer-events: none;
}

.plotter-traces[data-trace=areas] .plotter-trace-element-dot {
  cursor: pointer;
}

.plotter-trace-element,
.plotter-line {
  cursor: pointer;
}

.plotter *[data-hover=out]:not([opacity="0"]) {
  opacity: 0.1;
}

.plotter *[data-hover=in]:not([opacity="0"]):not([opacity="1"]),
.plotter *[data-hover=scope]:not([opacity="0"]) {
  opacity: 0.5;
}

.plotter *[data-hover=in],
.plotter *.plotter-lock {
  stroke-width: 1.5px;
  stroke-opacity: 1;
}

.plotter-hover {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 10;
  contain: layout style;
  overflow: visible;
}

.plotter-hover .plotter-hover-element {
  position: absolute;
  opacity: 1;
  transition: opacity 0.1s ease-in;
  background-color: var(--color-white);
  border: 1px solid rgba(var(--color-dark-rgb), 0.25);
  min-width: 200px;
  white-space: pre-wrap;
  padding: 5px 10px;
  border-radius: 6px;
}

.plotter-hover .plotter-hover-element.plotter-lock {
  pointer-events: all;
}

.plotter-hover .plotter-hover-element.hide:not(.plotter-lock) {
  z-index: -1;
  opacity: 0;
  transition: 0.2s ease-out opacity;
}

.plotter-hover-dim1 {
  margin-bottom: 4px;
}

.plotter-hover-dim2 {
  margin-bottom: 6px;
  font-size: 0.95em;
  display: flex;
  align-items: center;
  gap: 6px;
}

.plotter-hover-color-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.plotter-hover-metric {
  margin-top: 2px;
  margin-bottom: 4px;
  font-size: 0.95em;
}

.plotter-hover-metric:last-child {
  margin-bottom: 0;
}

.plotter-hover-metric-secondary {
  font-style: italic;
}

.plotter .plotter-panel .hidden {
  display: none !important;
}

.plotter-hover .plotter-hover-element::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 5px;
  background-color: var(--color-white);
}

.plotter-hover .plotter-hover-element.bottom.left::after {
  bottom: calc(100% - 4px);
  left: 0;
  border-radius: 5px;
  border-top: 4px solid rgba(var(--color-dark-rgb), 0.5);
  border-right: 4px solid transparent;
}

.plotter-hover .plotter-hover-element.bottom.right {
  transform: translateX(-100%);
}

.plotter-hover .plotter-hover-element.bottom.right::after {
  bottom: calc(100% - 4px);
  right: 0;
  border-top: 4px solid rgba(var(--color-dark-rgb), 0.5);
  border-left: 4px solid transparent;
}

.plotter-hover .plotter-hover-element.top.left {
  transform: translateY(-100%);
}

.plotter-hover .plotter-hover-element.top.left::after {
  top: calc(100% - 4px);
  left: 0;
  border-bottom: 4px solid rgba(var(--color-dark-rgb), 0.5);
  border-right: 4px solid transparent;
}

.plotter-hover .plotter-hover-element.top.right {
  transform: translate(-100%, -100%);
}

.plotter-hover .plotter-hover-element.top.right::after {
  top: calc(100% - 4px);
  right: 0;
  border-bottom: 4px solid rgba(var(--color-dark-rgb), 0.5);
  border-left: 4px solid transparent;
}

/* PlotterInputs styles - make it extend to the footer */
.plotter-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  width: 60%;
  background-color: var(--datama-background-color, #fff);
  /*border-left: 1px solid var(--datama-border-color, #e0e0e0);*/
  z-index: 10;
  overflow: hidden;
  transition: transform 0.3s ease;
  border-left: 1px solid rgba(var(--color-dark-rgb), 0.08);
  contain: layout paint;
  padding-left: 0;
}

/*
 * Panel width resize affordance: slim double vertical border on the left edge
 * of the actions rail (classic sash grip). Kept narrow and non-interactive so
 * it never covers or intercepts the settings navigation buttons.
 */
.plotter-panel > .plotter-panel-actions::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  box-sizing: border-box;
  border-left: 1px solid rgba(var(--color-dark-rgb), 0.28);
  border-right: 1px solid rgba(var(--color-dark-rgb), 0.28);
  border-radius: 1px;
  background: transparent;
  cursor: ew-resize;
  pointer-events: none;
  z-index: 1;
  opacity: 0.75;
  transition: border-color 0.15s ease, opacity 0.15s ease;
}

.plotter-panel:hover > .plotter-panel-actions::before,
.plotter-panel > .plotter-panel-actions:hover::before {
  border-left-color: rgba(var(--datama-primary-rgb), 0.55);
  border-right-color: rgba(var(--datama-primary-rgb), 0.55);
  opacity: 1;
}

/* Wider left-edge hit cursor without covering action icons */
.plotter-panel:not(.fullscreen) > .plotter-panel-actions {
  cursor: ew-resize;
}

.plotter-panel:not(.fullscreen) > .plotter-panel-actions > button,
.plotter-panel:not(.fullscreen) > .plotter-panel-actions > a.datama-button,
.plotter-panel:not(.fullscreen) > .plotter-panel-actions > a.plotter-button {
  cursor: pointer;
}

/* Remove the glow effect */
.plotter-panel::after {
  display: none;
}

.plotter-panel:not(.collapsed) {
  visibility: visible;
}

.plotter-panel.collapsed {
  transform: translateX(105%);
  visibility: hidden;
  pointer-events: none;
}

/* Settings tree is built while collapsed; skip accordion transitions until the slide starts. */
.plotter-panel.collapsed .plotter-ui-panel,
.plotter-panel.collapsed .plotter-ui-panel-content,
.plotter-panel.collapsed .plotter-ui-panel-header-caret,
.plotter-panel.collapsed .datama-panel-header-caret {
  transition: none !important;
}

.plotter .plotter-panel .plotter-panel-actions {
  flex: 0 0 30px;
  width: 30px;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--color-dark-rgb), 0.35) transparent;
  box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.1);
  z-index: 2;
}

.plotter .plotter-panel .plotter-panel-actions::-webkit-scrollbar {
  width: 4px;
}

.plotter .plotter-panel .plotter-panel-actions::-webkit-scrollbar-thumb {
  background: rgba(var(--color-dark-rgb), 0.35);
  border-radius: 2px;
}

.plotter .plotter-panel .plotter-panel-content {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  padding: 10px;
  background-color: var(--datama-background-color, #fff);
}

/*
 * When a select is open inside the settings rail, raise stacking only.
 * Do not change overflow on .plotter-panel-content: browsers reset scrollTop
 * when overflow switches away from auto/scroll. Dropdowns are portaled to the
 * Studio `DatamaNode` frame root via `DatamaSelectInput` / `resolveDomPortalRoot`.
 */
.plotter-panel:has(.datama-input-select-open),
.plotter-panel:has(.plotter-input-select-open) {
  z-index: 20;
}

.plotter .plotter-panel .plotter-settings-page {
  min-height: min-content;
  min-width: 0;
  max-width: 100%;
}

/* Settings rail: keep the legend, its help icon, and the divider on one row,
 * and keep each field label beside its control. */
.plotter .plotter-panel .datama-fieldset,
.plotter .plotter-panel .plotter-fieldset,
.plotter .plotter-panel .datama-fieldset-inline .datama-fieldset-row,
.plotter .plotter-panel .plotter-fieldset-inline .plotter-fieldset-row {
  container-type: normal;
}

.plotter .plotter-panel .datama-fieldset-row,
.plotter .plotter-panel .plotter-fieldset-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0;
}

.plotter .plotter-panel .datama-fieldset-inline .datama-fieldset-row,
.plotter .plotter-panel .plotter-fieldset-inline .plotter-fieldset-row {
  margin-top: 0;
  margin-bottom: 0;
}

.plotter .plotter-panel .datama-fieldset-container,
.plotter .plotter-panel .plotter-fieldset-container,
.plotter .plotter-panel .datama-fieldset-inline .datama-fieldset-container,
.plotter .plotter-panel .plotter-fieldset-inline .plotter-fieldset-container {
  padding: 0.25rem 0.5rem 0.35rem 1.35rem;
  gap: 0.25rem;
}

.plotter .plotter-panel .datama-fieldset-wrapper-inline .datama-fieldset-legend,
.plotter .plotter-panel .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend {
  padding-left: 0.5rem;
}

.plotter .plotter-panel .datama-fieldset-left,
.plotter .plotter-panel .plotter-fieldset-left,
.plotter .plotter-panel .datama-fieldset-label,
.plotter .plotter-panel .plotter-fieldset-label {
  min-width: 0;
}

.plotter .plotter-panel .datama-fieldset-label,
.plotter .plotter-panel .plotter-fieldset-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plotter .plotter-panel .datama-fieldset-right,
.plotter .plotter-panel .plotter-fieldset-right {
  justify-content: flex-end;
  align-items: center;
  min-width: 8rem;
}

.plotter .plotter-panel .datama-fieldset-right > .datama-input-container,
.plotter .plotter-panel .plotter-fieldset-right > .plotter-input-container,
.plotter .plotter-panel .datama-fieldset-right > .datama-input-container-light {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  width: auto;
  min-width: 8rem;
  margin: 0;
  gap: 0.35rem;
}

/* Number (+ optional unit) stays compact — do not stretch to select width. */
.plotter .plotter-panel .datama-fieldset-right > .datama-input-container.datama-input-with-unit,
.plotter .plotter-panel .plotter-fieldset-right > .plotter-input-container.plotter-input-with-unit,
.plotter .plotter-panel .datama-fieldset-right > .datama-input-container:has(> .datama-input[type=number]),
.plotter .plotter-panel .plotter-fieldset-right > .plotter-input-container:has(> .plotter-input[type=number]) {
  min-width: 0;
  width: auto;
  justify-content: flex-end;
}

.plotter .plotter-panel .datama-fieldset-right .datama-input-select,
.plotter .plotter-panel .plotter-fieldset-right .plotter-input-select,
.plotter .plotter-panel .datama-fieldset-right .datama-input:not([type=number]),
.plotter .plotter-panel .plotter-fieldset-right .plotter-input:not([type=number]) {
  min-width: 8rem;
  box-sizing: border-box;
}

.plotter .plotter-panel .datama-fieldset-right .datama-input[type=number],
.plotter .plotter-panel .plotter-fieldset-right .plotter-input[type=number] {
  width: 4.75rem;
  min-width: 4.75rem;
  max-width: 5.5rem;
  box-sizing: border-box;
}

.plotter .plotter-panel .datama-fieldset-right .datama-input-container.datama-input-with-unit .datama-input-unit,
.plotter .plotter-panel .plotter-fieldset-right .plotter-input-container.plotter-input-with-unit .plotter-input-unit {
  right: 0.55rem;
}

/* Fieldset rows already show `.datama-fieldset-label`. The panel's block-label
 * rule must not reprint that caption under the control. */
.plotter .plotter-panel .datama-fieldset-right > .datama-input-container > .datama-input-label,
.plotter .plotter-panel .plotter-fieldset-right > .plotter-input-container > .plotter-input-label {
  display: none;
}

/* Inline legend: title + help icon + rule share one horizontal line. */
.plotter .plotter-panel .datama-fieldset-wrapper-inline .datama-fieldset-legend-container,
.plotter .plotter-panel .plotter-fieldset-wrapper-inline .plotter-fieldset-legend-container,
.plotter .plotter-panel .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container,
.plotter .plotter-panel .plotter-fieldset-wrapper:has(.plotter-fieldset-inline) .plotter-fieldset-legend-container {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  margin-bottom: 0.5rem;
}

.plotter .plotter-panel .datama-fieldset-wrapper-inline .datama-fieldset-legend,
.plotter .plotter-panel .plotter-fieldset-wrapper-inline .plotter-fieldset-legend,
.plotter .plotter-panel .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend,
.plotter .plotter-panel .plotter-fieldset-wrapper:has(.plotter-fieldset-inline) .plotter-fieldset-legend {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plotter .plotter-panel .datama-fieldset-wrapper-inline .datama-fieldset-legend-container::after,
.plotter .plotter-panel .plotter-fieldset-wrapper-inline .plotter-fieldset-legend-container::after,
.plotter .plotter-panel .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container::after,
.plotter .plotter-panel .plotter-fieldset-wrapper:has(.plotter-fieldset-inline) .plotter-fieldset-legend-container::after {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  flex: 1 1 auto;
  align-self: center;
  width: auto;
  height: 1px;
  margin: 0;
  transform: none;
}

/* Dense switches. The simplified app switch (::after) must not stack on the real knob. */
div[data-app=true] .plotter-panel .datama-input.datama-input-switch,
.plotter .plotter-panel .datama-input.datama-input-switch,
div[data-app=true] .plotter-panel .plotter-input.plotter-input-switch,
.plotter .plotter-panel .plotter-input.plotter-input-switch {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  height: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 7px;
  flex: 0 0 28px;
  transform: none;
}

div[data-app=true] .plotter-panel .datama-input-switch::after,
.plotter .plotter-panel .datama-input-switch::after {
  content: none;
}

div[data-app=true] .plotter-panel .datama-input.datama-input-switch::before,
.plotter .plotter-panel .datama-input.datama-input-switch::before,
div[data-app=true] .plotter-panel .plotter-input.plotter-input-switch::before,
.plotter .plotter-panel .plotter-input.plotter-input-switch::before {
  width: 10px;
  height: 10px;
  left: 2px;
}

div[data-app=true] .plotter-panel .datama-input.datama-input-switch[data-value=true]::before,
.plotter .plotter-panel .datama-input.datama-input-switch[data-value=true]::before,
div[data-app=true] .plotter-panel .plotter-input.plotter-input-switch[data-value=true]::before,
.plotter .plotter-panel .plotter-input.plotter-input-switch[data-value=true]::before {
  left: calc(100% - 12px);
}

div[data-app=true] .plotter-panel .datama-input-switch:hover,
.plotter .plotter-panel .datama-input-switch:hover,
.plotter .plotter-panel .plotter-input-switch:hover {
  transform: none;
}

/* Selects stay inside the row: caret must not cover the value. */
div[data-app=true] .plotter-panel .datama-input-select,
.plotter .plotter-panel .datama-input-select,
.plotter .plotter-panel .plotter-input-select {
  position: relative;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0.35rem 1.5rem 0.35rem 0.75rem;
  font-size: 0.75rem;
}

.plotter .plotter-panel .datama-input-select > .datama-input-select-value,
.plotter .plotter-panel .plotter-input-select > .plotter-input-select-value,
.plotter .plotter-panel .datama-input-select-value-text,
.plotter .plotter-panel .plotter-input-select-value-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plotter .plotter-panel .datama-panels,
.plotter .plotter-panel .plotter-ui-panels,
.plotter .plotter-panel .datama-panels > .datama-panel,
.plotter .plotter-panel .plotter-ui-panels > .plotter-ui-panel,
.plotter .plotter-panel .plotter-ui-panels > .datama-panel,
.plotter .plotter-panel .datama-panels > .datama-panels-list > .datama-panel,
.plotter .plotter-panel .plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel,
.plotter .plotter-panel .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel {
  min-width: 0;
  max-width: 100%;
}

.plotter .plotter-panel .datama-panels > .datama-panel > .datama-panel-content,
.plotter .plotter-panel .plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-content,
.plotter .plotter-panel .plotter-ui-panels > .datama-panel > .datama-panel-content,
.plotter .plotter-panel .datama-panels > .datama-panels-list > .datama-panel > .datama-panel-content,
.plotter .plotter-panel .plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-content,
.plotter .plotter-panel .plotter-ui-panels > .plotter-ui-panels-list > .datama-panel > .datama-panel-content {
  min-width: 0;
  max-width: 100%;
  overflow-x: clip !important;
}

.plotter .plotter-panel .datama-panels-search-field,
.plotter .plotter-panel .plotter-ui-panels-search-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.plotter .plotter-panel .datama-panels-search-field input,
.plotter .plotter-panel .plotter-ui-panels-search-field input {
  flex: 1 1 auto;
  min-width: 0;
}

.plotter .plotter-panel .plotter-settings-search-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.5rem;
}

.plotter .plotter-panel .plotter-settings-apply-button,
.plotter .plotter-panel .plotter-settings-master-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Studio: single Save & Apply — standalone Save stays out of the chrome. */
.plotter .plotter-panel .plotter-settings-save-button {
  display: none !important;
}

.plotter .plotter-panel .plotter-settings-apply-button .datama-button-icon,
.plotter .plotter-panel .plotter-settings-apply-button .plotter-button-icon,
.plotter .plotter-panel .plotter-settings-master-button .datama-button-icon,
.plotter .plotter-panel .plotter-settings-master-button .plotter-button-icon {
  margin: 0;
}

.plotter .plotter-panel .plotter-settings-apply-button .datama-button-icon svg,
.plotter .plotter-panel .plotter-settings-apply-button .plotter-button-icon svg,
.plotter .plotter-panel .plotter-settings-master-button .datama-button-icon svg,
.plotter .plotter-panel .plotter-settings-master-button .plotter-button-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.plotter .plotter-panel .datama-panel-header-icon svg,
.plotter .plotter-panel .plotter-ui-panel-header-icon svg,
.plotter .plotter-panel .datama-panels-scope-heading-icon svg,
.plotter .plotter-panel .plotter-ui-panels-scope-heading-icon svg {
  display: block;
  flex-shrink: 0;
  overflow: hidden;
}

.plotter .plotter-panel .plotter-settings-apply-button[hidden],
.plotter .plotter-panel .plotter-settings-master-button[hidden] {
  display: none !important;
}

.plotter .plotter-panel .datama-panels-search--sticky,
.plotter .plotter-panel .plotter-ui-panels-search--sticky {
  background: var(--datama-background-color, var(--color-white));
  box-shadow: 0 10px 20px 10px var(--datama-background-color, var(--color-white));
}

.plotter .plotter-panel .datama-panels-search--sticky::after,
.plotter .plotter-panel .plotter-ui-panels-search--sticky::after {
  background: linear-gradient(to bottom, var(--datama-background-color, var(--color-white)), transparent);
}

.plotter .plotter-waterfall-pillars-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.plotter .plotter-waterfall-pillars-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.plotter .plotter-waterfall-pillars-empty {
  margin: 0;
  color: rgba(var(--datama-text-rgb, 0, 0, 0), 0.55);
  font-size: 12px;
}

.plotter .plotter-waterfall-pillars-delete {
  margin-bottom: 2px;
}

.plotter .plotter-panel .plotter-panel-actions > button,
.plotter .plotter-panel .plotter-panel-actions > a.datama-button,
.plotter .plotter-panel .plotter-panel-actions > a.plotter-button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  line-height: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plotter .plotter-panel .plotter-panel-actions > .plotter-panel-actions-divider {
  /* Slightly thicker/darker than chrome borders to mark the quick-actions vs scopes group. */
  --plotter-panel-actions-divider-border: 2px solid rgba(var(--color-dark-rgb), 0.22);
  flex: 0 0 auto;
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  min-width: 0;
  border-top: var(--plotter-panel-actions-divider-border);
}

.plotter .plotter-panel .plotter-panel-actions > button:hover,
.plotter .plotter-panel .plotter-panel-actions > a.datama-button:hover,
.plotter .plotter-panel .plotter-panel-actions > a.plotter-button:hover {
  background-color: rgba(var(--datama-primary-rgb), 0.1);
  transition: 0.1s ease-in;
}

.plotter .plotter-panel .plotter-panel-actions > a.datama-button.disabled,
.plotter .plotter-panel .plotter-panel-actions > a.plotter-button.disabled {
  pointer-events: none;
  opacity: 0.35;
}

.plotter .plotter-panel .plotter-panel-actions > button.disabled {
  pointer-events: none;
  opacity: 0.35;
}

.plotter .plotter-panel .plotter-panel-actions > .datama-button > .datama-button-icon,
.plotter .plotter-panel .plotter-panel-actions > .plotter-button > .plotter-button-icon {
  margin: 0;
}

.plotter .plotter-panel .plotter-panel-actions > .datama-button > .datama-button-icon svg,
.plotter .plotter-panel .plotter-panel-actions > .plotter-button > .plotter-button-icon svg {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  overflow: hidden;
}

/* Increase font size for quick actions buttons */
.plotter .plotter-panel .plotter-panel-actions .datama-button,
.plotter .plotter-panel .plotter-panel-actions .plotter-button {
  font-size: 1rem;
}

/* Dynamic width for the header based on panel state and width.
 * The shortcut toolbar is *not* sized here: it is pinned to the top-right corner and hugs
 * its content (see __shortcuts.css). Forcing `width: 100%` on it stretched it across the
 * whole row, so the title could never share the line. The panel is an overlay, so the
 * toolbar is moved aside with `right` instead. */
.plotter-header {
  width: 100%; /* Default to full width */
}

/* Adjust chrome when inputs panel is open.
 * The panel is an absolute overlay — do not shrink `.plotter-plot` or translate
 * `.plotter-legends` (legacy push layout). Chart geometry stays full-width. */
.plotter.panel-open .plotter-header {
  width: calc(100% - var(--plotter-panel-width, 60%));
  padding-right: 8px;
}

.plotter.panel-open .plotter-shortcuts {
  right: calc(var(--plotter-panel-width, 60%) + 8px);
}

/* When panel is collapsed, allow header and shortcuts to use full width */
.plotter.panel-closed .plotter-header,
.plotter:not(.panel-open):not(.panel-closed) .plotter-header {
  width: 100%;
}

.plotter-panel .datama-input-container,
.plotter-panel .plotter-input-container {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.plotter-panel .datama-input-label,
.plotter-panel .plotter-input-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #333;
  text-align: left;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
  margin-top: 15px;
}

/*
 * Story pin lives in the section header. Studio replaces the "Pinned" caption
 * with a lock icon; keep switch + icon on one line beside the section title.
 */
.plotter-panel .datama-panel-header-actions,
.plotter-panel .datama-fieldset-legend-actions,
.plotter-panel .plotter-ui-panels-scope-heading-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.5rem;
  z-index: 1;
}

/* Header actions sit before the in-flow chevron caret — no absolute gutter. */
.plotter-ui-panels > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-actions,
.plotter-ui-panels > .plotter-ui-panels-list > .plotter-ui-panel > .plotter-ui-panel-header-container > .datama-panel-header-actions {
  margin-right: 0;
}

.plotter-panel .datama-story-pin-action {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  user-select: none;
  cursor: pointer;
}

.plotter-panel .datama-story-pin-action .datama-input-container {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
}

.plotter-panel .datama-story-pin-action .datama-input-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 0;
  color: var(--text-body);
  cursor: pointer;
}

.plotter-panel .datama-story-pin-action .datama-input-label svg {
  display: block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  fill: currentColor;
}

.plotter-panel .datama-story-pin-action-active .datama-input-label {
  color: var(--datama-primary);
}

/*
 * Compare waterfall settings embed labelled widgets (comparison definition,
 * filter clauses) inside fieldsets. The block layout above stacks every
 * caption under a full-width control. Keep label and control on one row,
 * the same way Light restores Start/End inside the plotter panel.
 */
.plotter-panel .datama-comparison-form .datama-input-container,
.plotter-panel .datama-filter-clause-form .datama-input-container,
.plotter-panel .datama-comparison-entry-form .datama-input-container,
.plotter-panel .datama-filters-form .datama-input-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 0.35rem 0;
  gap: 0.5rem;
}

.plotter-panel .datama-comparison-form .datama-input-container:has(> .datama-input-switch),
.plotter-panel .datama-filter-clause-form .datama-input-container:has(> .datama-input-switch),
.plotter-panel .datama-comparison-entry-form .datama-input-container:has(> .datama-input-switch),
.plotter-panel .datama-filters-form .datama-input-container:has(> .datama-input-switch) {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.plotter-panel .datama-comparison-form .datama-input-label,
.plotter-panel .datama-filter-clause-form .datama-input-label,
.plotter-panel .datama-comparison-entry-form .datama-input-label,
.plotter-panel .datama-filters-form .datama-input-label {
  display: flex;
  flex: 1 1 auto;
  width: auto;
  min-width: 5.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-label);
}

.plotter-panel .datama-comparison-form .datama-input-select,
.plotter-panel .datama-filter-clause-form .datama-input-select,
.plotter-panel .datama-comparison-entry-form .datama-input-select,
.plotter-panel .datama-filters-form .datama-input-select,
.plotter-panel .datama-comparison-form .datama-input:not(.datama-input-switch):not(.datama-input-select),
.plotter-panel .datama-filter-clause-form .datama-input:not(.datama-input-switch):not(.datama-input-select),
.plotter-panel .datama-comparison-entry-form .datama-input:not(.datama-input-switch):not(.datama-input-select),
.plotter-panel .datama-filters-form .datama-input:not(.datama-input-switch):not(.datama-input-select) {
  flex: 0 1 12rem;
  width: auto;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plotter-panel .datama-comparison-form-toolbar,
.plotter-panel .datama-comparison-entry-form-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--studio-form-field-gap, 0.625rem);
  margin: 0;
}

.plotter-panel .datama-comparison-form-toolbar--reference.datama-fieldset-container {
  padding-top: 0.075rem;
  padding-bottom: 0.35rem;
  gap: 0;
}

.plotter-panel .datama-comparison-form-toolbar--reference > .datama-fieldset-row {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  min-height: 36px;
  padding: 0.35rem 0;
  margin: 0;
}

.plotter-panel .datama-comparison-form .datama-fieldset-inline .datama-fieldset-container {
  padding: 0.25rem 0.5rem 0.65rem 0.85rem;
  gap: var(--studio-form-field-gap, 0.625rem);
}

.plotter-panel .datama-comparison-form .datama-fieldset-wrapper-inline .datama-fieldset-legend-container,
.plotter-panel .datama-comparison-form .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container,
.plotter-panel .datama-comparison-entry-tile .datama-fieldset-wrapper-inline .datama-fieldset-legend-container,
.plotter-panel .datama-comparison-entry-tile .datama-fieldset-wrapper:has(.datama-fieldset-inline) .datama-fieldset-legend-container {
  margin-bottom: 0.25rem;
}

.plotter-panel .datama-comparison-entry-tile {
  gap: var(--studio-form-field-gap, 0.625rem);
}

.plotter-panel .datama-comparison-entry-tile > .datama-fieldset-wrapper[id*=-comparison-filters-] .datama-fieldset-legend-container {
  margin-top: 0.125rem;
  margin-bottom: 0.25rem;
}
.plotter-panel .datama-comparison-entry-tile > .datama-fieldset-wrapper[id*=-comparison-filters-] .datama-fieldset-inline .datama-fieldset-container {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
}

.plotter-panel .datama-comparison-form-toolbar > .datama-button,
.plotter-panel .datama-comparison-entry-form-header > .datama-button {
  align-self: flex-start;
  margin-top: 0.15rem;
}

.plotter-panel .datama-input-radio-group,
.plotter-panel .plotter-input-radio-group,
.plotter-panel .datama-input-checkbox-group,
.plotter-panel .plotter-input-checkbox-group {
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(73, 158, 149, 0.5) transparent;
}

.plotter-panel .datama-input-radio,
.plotter-panel .plotter-input-radio,
.plotter-panel .datama-input-checkbox,
.plotter-panel .plotter-input-checkbox {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 10px 0;
  margin: 0 0 8px 0 !important;
  min-height: unset !important;
  max-height: unset !important;
  height: auto !important;
}

.plotter-panel .datama-input-radio input,
.plotter-panel .plotter-input-radio input,
.plotter-panel .datama-input-checkbox input,
.plotter-panel .plotter-input-checkbox input {
  margin-right: 8px;
  accent-color: #499e95;
}

.plotter-panel .datama-input-radio-weighted,
.plotter-panel .plotter-input-radio-weighted,
.plotter-panel .datama-input-checkbox-weighted,
.plotter-panel .plotter-input-checkbox-weighted {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px;
  border-radius: 3px;
  transition: background-color 0.2s;
  cursor: pointer;
}

.plotter-panel .datama-input-radio-weighted:hover,
.plotter-panel .plotter-input-radio-weighted:hover,
.plotter-panel .datama-input-checkbox-weighted:hover,
.plotter-panel .plotter-input-checkbox-weighted:hover {
  background-color: rgba(73, 158, 149, 0.1);
}

.plotter-panel .datama-input-radio-weighted input,
.plotter-panel .plotter-input-radio-weighted input,
.plotter-panel .datama-input-checkbox-weighted input,
.plotter-panel .plotter-input-checkbox-weighted input {
  margin-right: 8px;
  accent-color: #499e95;
}

.plotter-panel .datama-input-radio-weighted .text-container,
.plotter-panel .plotter-input-radio-weighted .text-container,
.plotter-panel .datama-input-checkbox-weighted .text-container,
.plotter-panel .plotter-input-checkbox-weighted .text-container {
  flex: 1;
}

.plotter-panel .datama-input-radio-weighted .text,
.plotter-panel .plotter-input-radio-weighted .text,
.plotter-panel .datama-input-checkbox-weighted .text,
.plotter-panel .plotter-input-checkbox-weighted .text {
  display: block;
  font-weight: 500;
}

.plotter-panel .datama-input-radio-weighted .detail,
.plotter-panel .plotter-input-radio-weighted .detail,
.plotter-panel .datama-input-checkbox-weighted .detail,
.plotter-panel .plotter-input-checkbox-weighted .detail {
  display: block;
  font-size: 0.8em;
  color: #666;
}

.plotter-panel .datama-input-radio-weighted .figure,
.plotter-panel .plotter-input-radio-weighted .figure,
.plotter-panel .datama-input-checkbox-weighted .figure,
.plotter-panel .plotter-input-checkbox-weighted .figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: 10px;
}

.plotter-panel .datama-input-radio-weighted .figure .datama-label,
.plotter-panel .plotter-input-radio-weighted .figure .datama-label,
.plotter-panel .datama-input-checkbox-weighted .figure .datama-label,
.plotter-panel .plotter-input-checkbox-weighted .figure .datama-label {
  font-size: 0.8em;
  margin-bottom: 2px;
  color: #499e95;
}

.plotter-panel .datama-input-radio-weighted .figure .bar,
.plotter-panel .plotter-input-radio-weighted .figure .bar,
.plotter-panel .datama-input-checkbox-weighted .figure .bar,
.plotter-panel .plotter-input-checkbox-weighted .figure .bar {
  height: 4px;
  background-color: #499e95;
  border-radius: 2px;
}

/* Match height with datama-light-modules */
.datama-module .plotter-panel {
  height: 100%;
}

/* Make the entire input clickable */
.plotter-panel .datama-input-radio label,
.plotter-panel .plotter-input-radio label,
.plotter-panel .datama-input-checkbox label,
.plotter-panel .plotter-input-checkbox label {
  cursor: pointer;
  flex: 1;
}

/* Ensure the panel is properly positioned in the datama-light-modules context */
.datama-light-modules .plotter {
  position: relative;
  height: 100%;
}

/* Ensure the panel matches the height of datama-light-modules */
.datama-light-modules .plotter .plotter-panel {
  position: absolute; /* Use fixed positioning to ignore container boundaries */
  top: 0; /* Adjust based on header height */
  bottom: 0; /* Adjust based on footer height */
  max-height: 100%;
}

/* Match height with datama-module */
.datama-module .plotter-panel {
  height: 100%;
}

/* Make sure the plotter container takes full height in datama-light-modules */
.datama-light-modules .plotter {
  height: 100%;
}

/* Styling for inputs in shortcuts */
.plotter-shortcuts .shortcut-input {
  display: flex;
  align-items: center;
  margin: 0 5px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  padding: 0 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  max-width: 250px;
  min-width: 100px; /* Set minimum width */
  min-height: 32px;
  flex-shrink: 1; /* Allow shrinking */
  flex-grow: 0; /* Don't grow beyond content */
}

.plotter-shortcuts .shortcut-input .datama-input-label,
.plotter-shortcuts .shortcut-input .plotter-input-label {
  font-size: 12px;
  margin: 0 5px 0 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 80px;
}

.plotter-shortcuts .shortcut-input .datama-input-select,
.plotter-shortcuts .shortcut-input .plotter-input-select,
.plotter-shortcuts .shortcut-input select {
  font-size: 12px;
  max-width: 150px;
  min-width: 80px; /* Minimum width to remain usable */
  min-height: 28px;
  padding: 2px 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  flex-shrink: 1; /* Allow select to shrink */
  overflow: hidden; /* Prevent text overflow */
  text-overflow: ellipsis; /* Add ellipsis to select content */
}

/* Style for multiple select */
.plotter-shortcuts .shortcut-input .datama-input-select[multiple],
.plotter-shortcuts .shortcut-input .plotter-input-select[multiple],
.plotter-shortcuts .shortcut-input select[multiple] {
  height: auto;
  max-height: 100px;
}

/* Compact dropdown in shortcuts */
.plotter-shortcuts .shortcut-input .datama-input-select-dropdown,
.plotter-shortcuts .shortcut-input .plotter-input-select-dropdown {
  max-height: 200px;
  overflow-y: auto;
}

/* Resize handle for plotter inputs - make it very visible */
.plotter-panel-resize-handle {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 10px !important;
  height: 100% !important;
  cursor: ew-resize !important;
  background-color: rgba(73, 158, 149, 0.3) !important;
  border-left: 3px solid rgba(73, 158, 149, 0.8) !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

/* Add a visual indicator inside the handle */
.plotter-panel-resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 3px;
  width: 2px;
  height: 30px;
  background-color: rgba(73, 158, 149, 0.8);
  transform: translateY(-50%);
}

/* Make sure the resize handle is visible on hover */
.plotter-panel:hover .plotter-panel-resize-handle {
  background-color: rgba(73, 158, 149, 0.5) !important;
  border-left: 3px solid rgb(73, 158, 149) !important;
}

/* Style for when resizing is happening */
.plotter.resizing {
  cursor: ew-resize !important;
  user-select: none;
}

.plotter.resizing * {
  cursor: ew-resize !important;
}

/* Adjust the toggle button position to match original style */
.plotter-panel-toggle {
  display: flex;
  left: 0;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: center;
  box-shadow: none;
  background: transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid var(--datama-primary, #499e95);
  transform: translate(-20px, 10px) rotate(180deg) scale(0.7);
  cursor: pointer;
  transition: right 0.3s ease;
}

.plotter-panel-toggle::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -20px;
  width: 40px;
  height: 40px;
}

/* Add a class for when resizing is happening to remove transition */
.plotter-panel-toggle.resizing {
  transition: none;
}

/* Style for the toggle button when panel is collapsed */
.plotter-panel.collapsed + .plotter-panel-toggle {
  right: 0;
}

.datama-light-modules .plotter .plotter-panel.collapsed + .plotter-panel-toggle {
  opacity: 0;
  pointer-events: none;
}

.panel-closed .plotter-plot {
  transition: none;
}

/* Ensure scrollable containers have enough height for 3 items */
.plotter-panel .datama-input-radio-group,
.plotter-panel .plotter-input-radio-group,
.plotter-panel .datama-input-checkbox-group,
.plotter-panel .plotter-input-checkbox-group {
  max-height: 220px !important; /* Increased to accommodate larger items */
  overflow-y: auto;
  padding-right: 8px;
  margin-bottom: 10px;
  border-radius: 4px;
}

/* Improved scrollbar styling */
.plotter-panel .datama-input-radio-group,
.plotter-panel .plotter-input-radio-group,
.plotter-panel .datama-input-checkbox-group,
.plotter-panel .plotter-input-checkbox-group {
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 200, 200, 0.3) transparent;
}

/* Webkit scrollbar styling - more elegant and subtle */
.plotter-panel .datama-input-radio-group::-webkit-scrollbar,
.plotter-panel .plotter-input-radio-group::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar,
.plotter-panel .plotter-input-checkbox-group::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* Hide scrollbar buttons */
.plotter-panel .datama-input-radio-group::-webkit-scrollbar-button,
.plotter-panel .plotter-input-radio-group::-webkit-scrollbar-button,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-button,
.plotter-panel .plotter-input-checkbox-group::-webkit-scrollbar-button {
  display: none;
}

.plotter-panel .datama-input-radio-group::-webkit-scrollbar-track,
.plotter-panel .plotter-input-radio-group::-webkit-scrollbar-track,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-track,
.plotter-panel .plotter-input-checkbox-group::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.plotter-panel .datama-input-radio-group::-webkit-scrollbar-thumb,
.plotter-panel .plotter-input-radio-group::-webkit-scrollbar-thumb,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-thumb,
.plotter-panel .plotter-input-checkbox-group::-webkit-scrollbar-thumb {
  background-color: rgba(200, 200, 200, 0.3);
  border-radius: 10px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.plotter-panel .datama-input-radio-group::-webkit-scrollbar-thumb:hover,
.plotter-panel .plotter-input-radio-group::-webkit-scrollbar-thumb:hover,
.plotter-panel .datama-input-checkbox-group::-webkit-scrollbar-thumb:hover,
.plotter-panel .plotter-input-checkbox-group::-webkit-scrollbar-thumb:hover {
  background-color: rgba(150, 150, 150, 0.5);
}

/* Firefox scrollbar styling */
@supports (scrollbar-width: thin) {
  .plotter-panel .datama-input-radio-group,
  .plotter-panel .plotter-input-radio-group,
  .plotter-panel .datama-input-checkbox-group,
  .plotter-panel .plotter-input-checkbox-group {
    scrollbar-width: thin;
    scrollbar-color: rgba(200, 200, 200, 0.3) transparent;
  }
}
/* Plotter inputs container for regular inputs */
.plotter-panel-container {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-bottom: 1px solid var(--datama-border-color, #e0e0e0);
}

.plotter-panel .datama-input-container,
.plotter-panel .plotter-input-container {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.plotter *[data-hidden=true],
.datama-waterfall-container *[data-hidden=true] {
  display: none;
}

.plotter-views-settings-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.plotter-views-settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 4px;
  border-bottom: 1px solid rgba(var(--datama-primary-rgb), 0.12);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-structure);
}

.plotter-views-settings-header-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
}

.plotter-views-settings-header-width {
  min-width: 108px;
}

.plotter-views-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
}

.plotter-views-settings-row:last-child {
  border-bottom: none;
}

.plotter-views-settings-row.active {
  background: var(--state-active-bg);
}

.plotter-views-settings-row.active .plotter-views-settings-name {
  color: var(--state-active-text);
  font-weight: 600;
}

.plotter-views-settings-identity {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
}

.plotter-views-settings-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.plotter-views-settings-icon svg {
  width: 16px;
  height: 16px;
}

.plotter-views-settings-name {
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plotter-views-settings-switches {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.plotter-views-settings-width .datama-input-select,
.plotter-views-settings-width .plotter-input-select {
  min-width: 108px;
}

.plotter-views-settings-width-placeholder {
  display: inline-block;
  flex: 0 0 108px;
  width: 108px;
}

.plotter-views-settings-switches .datama-input-select,
.plotter-views-settings-switches .plotter-input-select {
  min-width: 96px;
}

/* WYSIWYG views layout editor (pin mode settings) */
.plotter-views-layout-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.plotter-views-layout-editor__section-title {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(var(--color-dark-rgb), 0.55);
  margin-top: 4px;
}

.plotter-views-layout-editor__preview {
  --plotter-views-editor-row-height: 56px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--plotter-views-editor-row-height);
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 4px;
  background-color: rgba(var(--color-dark-rgb), 0.03);
  background-image: repeating-linear-gradient(to right, rgba(var(--color-dark-rgb), 0.06) 0, rgba(var(--color-dark-rgb), 0.06) 1px, transparent 1px, transparent 8.3333333333%);
  min-height: calc(var(--plotter-views-editor-row-height) + 16px);
}

.plotter-views-layout-editor__preview--multi-row {
  grid-auto-rows: unset;
}

.plotter-views-layout-editor__preview--resizing-row {
  cursor: row-resize;
}

.plotter-views-layout-editor__preview--resizing {
  cursor: col-resize;
}

.plotter-views-layout-editor__pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
}

.plotter-views-layout-editor__card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(var(--color-dark-rgb), 0.14);
  border-radius: 4px;
  background: var(--datama-background, #fff);
  min-width: 0;
  overflow: hidden;
}

.plotter-views-layout-editor__card--pinned {
  height: 100%;
  min-height: calc(var(--plotter-views-editor-row-height) - 8px);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.plotter-views-layout-editor__card--pinned:hover {
  background-color: rgba(var(--color-dark-rgb), 0.04);
  box-shadow: 0 1px 4px rgba(var(--color-dark-rgb), 0.08);
}

.plotter-views-layout-editor__card--pool {
  flex: 0 1 auto;
  min-width: 72px;
  max-width: 96px;
  min-height: 72px;
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.plotter-views-layout-editor__card--pool:hover {
  background-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.08);
  box-shadow: 0 1px 4px rgba(var(--color-dark-rgb), 0.08);
}

.plotter-views-layout-editor__card--dragging {
  opacity: 0.45;
}

.plotter-views-layout-editor__card--drop-target {
  outline: 2px solid var(--datama-primary, #499e95);
  outline-offset: -2px;
}

.plotter-views-layout-editor__card--resize-preview {
  outline: 1px dashed var(--datama-primary, #499e95);
}

.plotter-views-layout-editor__card-body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  padding: 8px;
  min-height: 0;
  height: 100%;
}

.plotter-views-layout-editor__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.plotter-views-layout-editor__card-icon svg {
  width: 28px;
  height: 28px;
}

.plotter-views-layout-editor__pin-toggle {
  position: absolute;
  top: 2px;
  right: 2px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 3px;
  background: rgba(var(--datama-background-rgb, 255, 255, 255), 0.85);
  color: rgba(var(--color-dark-rgb), 0.55);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.plotter-views-layout-editor__pin-toggle:hover:not(:disabled) {
  color: var(--datama-primary, #499e95);
  background: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.12);
}

.plotter-views-layout-editor__pin-toggle:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.plotter-views-layout-editor__pin-toggle svg {
  width: 14px;
  height: 14px;
}

.plotter-views-layout-editor__pool-add-hint {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  color: var(--datama-primary, #499e95);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.plotter-views-layout-editor__card--pool:hover .plotter-views-layout-editor__pool-add-hint {
  opacity: 1;
}

.plotter-views-layout-editor__resize-handle {
  position: absolute;
  top: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 1;
}

.plotter-views-layout-editor__resize-handle--left {
  left: 0;
}

.plotter-views-layout-editor__resize-handle--right {
  right: 0;
}

.plotter-views-layout-editor__resize-handle--row {
  left: 0;
  right: 0;
  top: auto;
  width: auto;
  height: 8px;
  cursor: row-resize;
  z-index: 2;
}

.plotter-views-layout-editor__resize-handle--row::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 2px;
}

.plotter-views-layout-editor__resize-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 24px;
  border-radius: 1px;
  background: rgba(var(--color-dark-rgb), 0.2);
}

.plotter-views-layout-editor__resize-handle--left::after {
  left: 2px;
}

.plotter-views-layout-editor__resize-handle--right::after {
  right: 2px;
}

.plotter-views-layout-editor__resize-handle:hover::after {
  background: var(--datama-primary, #499e95);
}

/* Colors settings scope — editable palette swatch preview */
.plotter-colors-swatch-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px 12px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(var(--color-dark-rgb), 0.03), rgba(var(--color-dark-rgb), 0.015));
}

.plotter-colors-swatch-preview__header {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(var(--color-dark-rgb), 0.72);
}

.plotter-colors-swatch-preview__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.plotter-colors-swatch-preview__group-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(var(--color-dark-rgb), 0.48);
}

.plotter-colors-swatch-preview__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 6px;
}

.plotter-colors-swatch {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 34px;
  margin: 0;
  cursor: pointer;
}

.plotter-colors-swatch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
}

.plotter-colors-swatch__chip {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  box-sizing: border-box;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.plotter-colors-swatch:hover .plotter-colors-swatch__chip,
.plotter-colors-swatch:focus-within .plotter-colors-swatch__chip {
  transform: translateY(-1px) scale(1.06);
  border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(var(--color-dark-rgb), 0.14);
}

.plotter-colors-swatch__caption {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  line-height: 1.1;
  color: rgba(var(--color-dark-rgb), 0.55);
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.plotter-colors-swatch__input--programmatic {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

.plotter-colors-swatch--reorderable {
  cursor: grab;
}

.plotter-colors-swatch--reorderable:active {
  cursor: grabbing;
}

.plotter-colors-swatch--dragging {
  opacity: 0.45;
}

.plotter-colors-swatch--drop-target .plotter-colors-swatch__chip {
  border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.85);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px rgba(var(--datama-primary-rgb, 73, 158, 149), 0.35);
}

.plotter-colors-swatch--add {
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
}

.plotter-colors-swatch__remove {
  position: absolute;
  top: -5px;
  right: -5px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(var(--datama-background-rgb, 255, 255, 255), 0.95);
  color: rgba(var(--color-dark-rgb), 0.55);
  box-shadow: 0 0 0 1px rgba(var(--color-dark-rgb), 0.16);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease, color 0.12s ease, background-color 0.12s ease;
}

.plotter-colors-swatch--reorderable:hover .plotter-colors-swatch__remove,
.plotter-colors-swatch--reorderable:focus-within .plotter-colors-swatch__remove {
  opacity: 1;
  pointer-events: auto;
}

.plotter-colors-swatch__remove:hover,
.plotter-colors-swatch__remove:focus-visible {
  color: #fff;
  background: rgba(var(--datama-danger-rgb, 221, 75, 57), 0.95);
  box-shadow: none;
}

.plotter-colors-swatch__remove svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: currentColor;
}

.plotter-colors-swatch__chip--add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-style: dashed;
  border-color: rgba(var(--color-dark-rgb), 0.28);
  color: rgba(var(--color-dark-rgb), 0.55);
  box-shadow: none;
}

.plotter-colors-swatch--add:hover .plotter-colors-swatch__chip--add,
.plotter-colors-swatch--add:focus-visible .plotter-colors-swatch__chip--add {
  border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.65);
  color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.95);
  background: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.08);
  transform: translateY(-1px) scale(1.06);
}

.plotter-colors-swatch__chip--add svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* Settings panel: Color swatch + Conditional toggle (top-line pattern) */
.plotter-settings-semantic-color {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.plotter-settings-semantic-color__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.plotter-settings-semantic-color__toggle-label {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(var(--color-dark-rgb), 0.72);
  white-space: nowrap;
}

.plotter-settings-semantic-color__chip {
  pointer-events: none;
}

.plotter-settings-semantic-color__chip--semantic {
  background-image: linear-gradient(135deg, #22c55e 0%, #149588 35%, #3b82f6 70%, #a855f7 100%) !important;
  border-color: rgba(var(--datama-primary-rgb, 73, 158, 149), 0.45);
}

.plotter-settings-semantic-color[data-semantic=true] .plotter-colors-swatch {
  cursor: default;
}

.plotter-settings-semantic-color[data-semantic=true] .plotter-colors-swatch__input {
  pointer-events: none;
  cursor: default;
}

/*
 * Fieldset chrome (padding / border / min-width) would otherwise inflate the
 * invisible native color input past the 28px chip and swallow clicks.
 */
.plotter-fieldset input.plotter-colors-swatch__input {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  min-width: 0;
  width: 100%;
  height: 28px;
  border-radius: 8px;
}

.plotter-legends {
  padding: 12px;
  min-width: 80px; /* Minimum width to prevent text crushing */
}

.plotter-legends-layout {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.plotter-legends-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  flex-shrink: 0;
  opacity: 0;
}

.plotter-legends-layout:hover .plotter-legends-actions {
  opacity: 1;
}

.plotter-legends-list {
  min-width: 0;
  flex: 1;
}

.plotter-legend-sort-control {
  margin: 0;
  padding: 2px;
  border: none;
  border-radius: 6px;
  background: rgba(var(--color-dark-rgb), 0.05);
  color: rgba(var(--color-dark-rgb), 0.9);
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: background-color 0.15s ease-in, border-color 0.15s ease-in, color 0.15s ease-in;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plotter-legend-sort-control:hover {
  background-color: rgba(var(--color-dark-rgb), 0.04);
}

.plotter-legend-sort-control {
  background-color: rgba(var(--datama-primary-rgb), 0.1);
  color: var(--datama-primary);
}

.plotter-legend-sort-control:hover {
  background-color: rgba(var(--datama-primary-rgb), 0.15);
}

.plotter-legend-sort-control > svg,
.plotter-legend-sort-control > svg path {
  display: block;
  width: 16px;
  height: 16px;
  color: var(--datama-primary);
  fill: var(--datama-primary);
}

.plotter-legends .plotter-legend {
  margin-bottom: 6px;
  line-height: 22px;
  display: flex;
  align-items: center;
  min-height: 22px;
}

.plotter-legends .plotter-legend > svg {
  min-width: 20px;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  padding: 1px;
  margin-right: 8px;
  flex-shrink: 0; /* Prevents icon size reduction */
}

.plotter-legends .plotter-legend > span {
  display: inline-block;
  font-size: 14px;
  max-height: 44px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-wrap: break-word;
  line-height: 1.2;
}

.plotter-legend-eye {
  margin-left: 8px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex: 1; /* Allows eye icon to take available space */
}

.plotter-legend-eye:hover {
  opacity: 1;
}

.plotter-axis-sort-icon {
  opacity: 0;
  pointer-events: none;
}

.plotter-axis-sort-icon.is-active-sort {
  opacity: 1;
}

.plotter-axis-header:hover .plotter-axis-sort-icon {
  opacity: 1;
}

.legend-disabled {
  opacity: 0.5 !important;
}

.plotter-tree-card-label-fo:hover:not(.plotter-waterfall-value-label-fo),
.plotter-trace-element-path:hover {
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.5s ease-in-out;
}

/* Waterfall labels are context-menu targets only: no hover glow / text selection. */
.plotter-waterfall-value-label-fo,
.plotter-waterfall-value-label-fo:hover,
.plotter-waterfall-value-label,
.plotter-waterfall-top-line-label {
  box-shadow: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Responsive legends - Size adaptation based on screen */
@media screen and (max-width: 1200px) {
  .plotter-legends {
    padding: 10px;
    min-width: 70px;
  }
  .plotter-legends .plotter-legend > span {
    font-size: 13px;
    max-height: 40px;
  }
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .datama-input-label,
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .plotter-input-label {
    max-width: 60px; /* Reduce label width on medium screens */
  }
}
@media screen and (max-width: 900px) {
  .plotter-legends {
    padding: 8px;
    min-width: 60px;
  }
  .plotter-legends .plotter-legend > span {
    font-size: 12px;
    max-height: 36px;
  }
  .plotter-legends .plotter-legend > svg {
    width: 18px;
    height: 18px;
    margin-right: 6px;
  }
}
@media screen and (max-width: 600px) {
  .plotter-legends {
    padding: 6px;
    min-width: 50px;
  }
  .plotter-legends .plotter-legend > span {
    font-size: 11px;
    max-height: 32px;
    -webkit-line-clamp: 1; /* Single line on very small screens */
    line-clamp: 1;
  }
  .plotter-legends .plotter-legend > svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }
}
/* Responsive label collapsing for shortcuts - Progressive approach */
@media screen and (max-width: 900px) {
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .datama-input-label,
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .plotter-input-label {
    max-width: 40px; /* Further reduce label width */
    font-size: 11px; /* Slightly smaller font */
  }
  div[data-app=true] .plotter .plotter-shortcuts * {
    line-height: 20px !important;
    font-size: 10px !important;
  }
}
@media screen and (max-width: 767px) {
  div[data-app=true] .plotter .plotter-title * {
    line-height: 26px !important;
    font-size: 18px !important;
  }
  div[data-app=true] .plotter .plotter-subtitle * {
    line-height: 20px !important;
    font-size: 16px !important;
  }
  div[data-app=true] .plotter .plotter-shortcuts {
    line-height: 20px !important;
    font-size: 14px !important;
    gap: 6px !important; /* Reduce gap on mobile */
    /* No bottom margin: the toolbar shares the title row, so a margin here would
     * re-open the blank band above the chart it used to create. */
  }
  div[data-app=true] .plotter .plotter-shortcuts .datama-input-container,
  div[data-app=true] .plotter .plotter-shortcuts .plotter-input-container {
    margin: 0 !important;
    height: auto; /* Allow height to adapt */
    min-height: 20px; /* Set minimum height */
  }
  div[data-app=true] .plotter .plotter-footer {
    line-height: 18px;
    font-size: 14px;
  }
  /* Very aggressive label reduction on mobile */
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .datama-input-label,
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .plotter-input-label {
    max-width: 20px; /* Very small labels */
    font-size: 10px;
  }
}
@media screen and (max-width: 1200px) {
  .plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-label {
    max-width: 7rem;
  }
}
@media screen and (max-width: 900px) {
  .plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-label {
    max-width: 5.5rem;
    font-size: 11px;
  }
}
@media screen and (max-width: 600px) {
  /* Hide labels completely on very small screens and rely on tooltips */
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .datama-input-label,
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) .plotter-input-label {
    display: none;
  }
  .plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut {
    max-width: none;
    padding: 0 4px;
  }
  .plotter-shortcuts .datama-input-container.shortcut-input.datama-whatif-shortcut .datama-input-label {
    display: block;
    max-width: 4.5rem;
    font-size: 10px;
  }
  /* Make selects more compact */
  .plotter-shortcuts .shortcut-input:not(.datama-whatif-shortcut) {
    max-width: 120px; /* Smaller containers */
    padding: 0 4px; /* Less padding */
  }
  .plotter-shortcuts .shortcut-input .datama-input-select,
  .plotter-shortcuts .shortcut-input .plotter-input-select,
  .plotter-shortcuts .shortcut-input select {
    max-width: 110px; /* Smaller selects */
    font-size: 11px; /* Smaller font */
  }
  div[data-app=true] .plotter .plotter-title * {
    line-height: 20px !important;
    font-size: 14px !important;
  }
  div[data-app=true] .plotter .plotter-subtitle * {
    line-height: 20px !important;
    font-size: 12px !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  div[data-app=true] .plotter .plotter-title {
    line-height: 30px;
    font-size: 20px;
  }
  div[data-app=true] .plotter .plotter-subtitle {
    line-height: 24px;
    font-size: 18px;
  }
  div[data-app=true] .plotter .plotter-shortcuts {
    line-height: 20px !important;
    font-size: 14px !important;
  }
  div[data-app=true] .plotter .plotter-shortcuts .datama-input-container,
  div[data-app=true] .plotter .plotter-shortcuts .plotter-input-container {
    margin: 0 !important;
    margin-right: 5px !important;
    height: 20px;
  }
  div[data-app=true] .plotter .plotter-footer {
    line-height: 22px;
    font-size: 15px;
  }
}
/*
 * DATAMA SAS
 * --------------
 * Styles for the native Plotter Table view (PlotterTableLayer) and its settings editor.
 * Covers the HTML table, per-column search/sort/collapse controls, pagination,
 * in-cell gauges (placement/style) and indicators (arrow/chevron).
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 */
/* When the Table view is active, hide the SVG plot and legend decorations. */
.plotter-visualization.plotter-table-active > svg,
.plotter-visualization.plotter-table-active .plotter-legends {
  display: none !important;
}

/* Fill the plotter-visualization area; the scroll wrapper handles overflow. */
.plotter-visualization.plotter-table-active {
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  position: relative;
}

.plotter-visualization.plotter-table-active .plotter-table-view {
  flex: 1 1 auto;
}

/* CSV export overlays the table so `.plotter-table-view` still fills the visualization. */
.plotter-table-view-toolbar {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 6;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.plotter-table-view-toolbar > * {
  pointer-events: auto;
}

.plotter-table-view {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-family: var(--font-family);
  font-size: var(--plotter-table-font-size-cell, 14px);
  --plotter-table-column-max-width: 250px;
  --plotter-table-border-table-width: 1px;
  --plotter-table-border-table-opacity: 0.12;
  --plotter-table-border-table-color: rgba(var(--color-dark-rgb), 0.12);
  --plotter-table-border-column-width: 1px;
  --plotter-table-border-column-opacity: 0.08;
  --plotter-table-border-column-color: rgba(var(--color-dark-rgb), 0.08);
  --plotter-table-border-row-width: 1px;
  --plotter-table-border-row-opacity: 0.08;
  --plotter-table-border-row-color: rgba(var(--color-dark-rgb), 0.08);
  --plotter-table-stripe-color: rgba(var(--color-dark-rgb), 0.04);
  --plotter-table-stripe-opacity: 0.04;
  --plotter-table-cell-padding-y: 10px;
  --plotter-table-cell-padding-x: 16px;
  --plotter-table-font-size-cell: 14px;
  --plotter-table-font-weight-cell: 500;
  --plotter-table-font-size-header: 14px;
  --plotter-table-font-weight-header: 600;
  --plotter-table-font-size-footer: 14px;
  --plotter-table-font-weight-footer: 600;
  --plotter-table-tree-line-width: 1px;
  --plotter-table-tree-line-opacity: 0.25;
  --plotter-table-tree-line-color: rgba(var(--color-dark-rgb), 0.25);
  --plotter-table-group-bracket-width: 1px;
  --plotter-table-group-bracket-opacity: 0.2;
  --plotter-table-group-bracket-color: rgba(var(--color-dark-rgb), 0.2);
  --plotter-table-tree-indent-step: 16px;
  --plotter-table-color-positive: var(--datama-increase, #2f9e44);
  --plotter-table-color-negative: var(--datama-decrease, #d64545);
}

/* Scrollable table area: horizontal/vertical overflow stays inside this wrapper. */
.plotter-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}

.plotter-table {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

.plotter-table-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--plotter-table-header-bg, var(--color-white, #fff));
}

.plotter-table-th-frozen,
.plotter-table-td-frozen {
  position: sticky;
  z-index: 3;
  background-color: var(--plotter-table-header-bg, var(--color-white, #fff));
}

.plotter-table-th-frozen {
  z-index: 5;
}

.plotter-table-td-frozen {
  z-index: 2;
  background-color: var(--color-white, #fff);
}

.plotter-table--striped .plotter-table-body .plotter-table-row--striped > .plotter-table-td-frozen {
  background-color: var(--plotter-table-stripe-color);
}

.plotter-table-th {
  position: relative;
}

.plotter-table-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
}

.plotter-table-th-label-stack {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  min-width: 0;
}

.plotter-table-th-subtitle {
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(var(--color-dark-rgb), 0.5);
  line-height: 1.2;
}

.plotter-table-sort-priority {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  font-size: 10px;
  line-height: 14px;
  background: rgba(var(--color-dark-rgb), 0.12);
}

.plotter-table-row--highlighted {
  background-color: rgba(var(--color-primary-rgb, 59, 130, 246), 0.14);
}

.plotter-table-row--selectable {
  cursor: pointer;
}

.plotter-table-row--active {
  background-color: var(--state-active-bg);
  box-shadow: inset 0 0 0 1px var(--state-active-border);
  color: var(--state-active-text);
}

.plotter-table-hover {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  max-width: min(420px, 90%);
}

.plotter-table-subtotal-row {
  font-weight: 600;
  background-color: rgba(var(--color-dark-rgb), 0.03);
}

.plotter-table-sparkline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 6px;
}

.plotter-table-sparkline-bar {
  opacity: 0.85;
}

.plotter-table-sparkline-zero-line {
  stroke: rgba(var(--color-dark-rgb), 0.35);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.plotter-table-sparkline-line {
  vector-effect: non-scaling-stroke;
}

.plotter-table-gauge-background-diverging {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.plotter-table-gauge-background-diverging .plotter-table-gauge-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
}

.plotter-table-gauge-background-diverging .plotter-table-gauge-fill-positive,
.plotter-table-gauge-background-diverging .plotter-table-gauge-fill-negative {
  opacity: 0.25;
}

.plotter-table-gauge-circular {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.plotter-table-gauge-circular-svg {
  display: block;
  overflow: visible;
}

.plotter-table-gauge-circular-rings {
  transform: none;
}

.plotter-table-gauge-circular-track,
.plotter-table-gauge-circular-progress {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.plotter-table-gauge-circular-track {
  stroke: rgba(var(--color-dark-rgb), 0.12);
}

.plotter-table-gauge-circular-progress {
  stroke-linecap: round;
}

.plotter-table-gauge-circular-progress.plotter-table-gauge-fill-positive {
  stroke: var(--plotter-table-color-positive, var(--datama-increase, #2f9e44));
}

.plotter-table-gauge-circular-progress.plotter-table-gauge-fill-negative {
  stroke: var(--plotter-table-color-negative, var(--datama-decrease, #d64545));
}

.plotter-table-foot {
  background-color: var(--plotter-table-footer-bg, var(--color-white, #fff));
}

.plotter-table-th {
  padding: var(--plotter-table-cell-padding-y) var(--plotter-table-cell-padding-x);
  vertical-align: bottom;
  font-size: var(--plotter-table-font-size-header);
  font-weight: var(--plotter-table-font-weight-header);
  white-space: nowrap;
  background-color: var(--plotter-table-header-bg, var(--color-white, #fff));
}

.plotter-table-th-leaf {
  max-width: var(--plotter-table-column-max-width);
  overflow: hidden;
}

/* Discrete header: per-column controls appear on hover only. */
.plotter-table-th-leaf .plotter-table-th-content {
  width: 100%;
  min-width: 0;
}

.plotter-table-th-leaf[data-align=left] .plotter-table-th-content,
.plotter-table-th-leaf:not([data-align]) .plotter-table-th-content {
  justify-content: flex-start;
}

.plotter-table-th-leaf[data-align=center] .plotter-table-th-content {
  justify-content: center;
}

.plotter-table-th-leaf[data-align=right] .plotter-table-th-content {
  justify-content: flex-end;
}

.plotter-table-th-label-host .plotter-table-th-actions {
  align-self: center;
  margin-left: 2px;
}

.plotter-table-th-leaf .plotter-table-th-label-host {
  flex: 0 1 auto;
  max-width: 100%;
}

.plotter-table-th-actions {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.plotter-table-th:hover .plotter-table-th-actions,
.plotter-table-th-actions:has(.plotter-table-search-trigger:focus) {
  opacity: 1;
  pointer-events: auto;
}

.plotter-table-th-group .plotter-table-th-actions {
  margin-left: 6px;
}

/* Group header cell (parent label spanning several leaf columns). */
.plotter-table-th-group {
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  color: rgba(var(--color-dark-rgb), 0.75);
}

.plotter-table-th-group .plotter-table-th-content {
  justify-content: center;
}

.plotter-table-th-group-label {
  display: block;
}

.plotter-table-th-content {
  display: flex;
  align-items: center;
  gap: 4px;
}

.plotter-table-th-label-host {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.plotter-table-th-label-host--hidden {
  display: none;
}

.plotter-table-th-label {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plotter-table-th-unit {
  flex: 0 0 auto;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.2;
  color: rgba(var(--color-dark-rgb), 0.45);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.plotter-table-th-label--sortable {
  cursor: pointer;
}

.plotter-table-th-label--sortable:hover {
  color: var(--datama-primary, #499e95);
}

.plotter-table-th-label--sorted-asc,
.plotter-table-th-label--sorted-desc {
  color: var(--datama-primary, #499e95);
}

/* Header control buttons rendered with @datama/icons glyphs. */
.plotter-table-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 2px;
  border-radius: 3px;
  color: rgba(var(--color-dark-rgb), 0.55);
  line-height: 0;
}

.plotter-table-icon-button svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: currentColor;
}

.plotter-table-icon-button:hover {
  color: var(--datama-primary, #499e95);
  background-color: rgba(var(--color-dark-rgb), 0.06);
}

.plotter-table-sort.plotter-table-sort-asc,
.plotter-table-sort.plotter-table-sort-desc {
  color: var(--datama-primary, #499e95);
}

/* Per-column search input, revealed when the column name is clicked.
   The search icon is shown inside the input field only. */
.plotter-table-search-wrapper {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
}

.plotter-table-search-wrapper.open {
  display: flex;
}

.plotter-table-search-field {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  font-size: 12px;
  padding: 2px 4px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.2);
  border-radius: 3px;
  background-color: var(--color-white, #fff);
}

.plotter-table-search-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: rgba(var(--color-dark-rgb), 0.45);
  line-height: 0;
}

.plotter-table-search {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-size: 12px;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
}

.plotter-table-body .plotter-table-td {
  font-size: var(--plotter-table-font-size-cell);
  font-weight: var(--plotter-table-font-weight-cell);
}

.plotter-table-body .plotter-table-row--hover {
  background-color: rgba(var(--datama-primary-rgb), 0.06);
}

.plotter-table-td {
  padding: var(--plotter-table-cell-padding-y) var(--plotter-table-cell-padding-x);
  position: relative;
  max-width: var(--plotter-table-column-max-width);
  overflow: hidden;
  white-space: nowrap;
}

/* Display modifiers: borders */
.plotter-table--border-table {
  border: var(--plotter-table-border-table-width) solid var(--plotter-table-border-table-color);
}

.plotter-table--border-rows .plotter-table-body .plotter-table-row > .plotter-table-td {
  border-bottom: var(--plotter-table-border-row-width) solid var(--plotter-table-border-row-color);
}

.plotter-table--border-columns .plotter-table-th,
.plotter-table--border-columns .plotter-table-td {
  border-right: var(--plotter-table-border-column-width) solid var(--plotter-table-border-column-color);
}

.plotter-table--border-columns .plotter-table-th:last-child,
.plotter-table--border-columns .plotter-table-td:last-child {
  border-right: none;
}

/* Display modifiers: striped rows */
.plotter-table--striped .plotter-table-body .plotter-table-row--striped > .plotter-table-td {
  background-color: var(--plotter-table-stripe-color);
}

/* Display modifiers: column group brackets */
.plotter-table--group-brackets .plotter-table-th-group-bracket-start,
.plotter-table--group-brackets .plotter-table-th-group-start,
.plotter-table--group-brackets .plotter-table-td-group-start {
  border-left: var(--plotter-table-group-bracket-width) solid var(--plotter-table-group-bracket-color);
}

.plotter-table--group-brackets .plotter-table-th-group-bracket-end,
.plotter-table--group-brackets .plotter-table-th-group-end,
.plotter-table--group-brackets .plotter-table-td-group-end {
  border-right: var(--plotter-table-group-bracket-width) solid var(--plotter-table-group-bracket-color);
}

.plotter-table--group-brackets .plotter-table-th-group {
  box-shadow: inset 0 calc(-1 * var(--plotter-table-group-bracket-width)) 0 0 var(--plotter-table-group-bracket-color);
}

/* Display modifiers: row tree lines */
.plotter-table--tree-lines .plotter-table-tree-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.plotter-table--tree-lines .plotter-table-tree-indent {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  height: 1.25em;
}

.plotter-table--tree-lines .plotter-table-tree-guide {
  display: inline-block;
  width: var(--plotter-table-tree-indent-step);
  flex: 0 0 var(--plotter-table-tree-indent-step);
  position: relative;
}

.plotter-table--tree-lines .plotter-table-tree-guide-continue::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--plotter-table-tree-line-width);
  margin-left: calc(var(--plotter-table-tree-line-width) / -2);
  background-color: var(--plotter-table-tree-line-color);
  opacity: var(--plotter-table-tree-line-opacity);
}

.plotter-table--tree-lines .plotter-table-tree-branch {
  display: inline-block;
  width: var(--plotter-table-tree-indent-step);
  flex: 0 0 var(--plotter-table-tree-indent-step);
  position: relative;
}

.plotter-table--tree-lines .plotter-table-tree-branch::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 50%;
  left: 50%;
  width: var(--plotter-table-tree-line-width);
  margin-left: calc(var(--plotter-table-tree-line-width) / -2);
  background-color: var(--plotter-table-tree-line-color);
  opacity: var(--plotter-table-tree-line-opacity);
}

.plotter-table--tree-lines .plotter-table-tree-branch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  height: var(--plotter-table-tree-line-width);
  margin-top: calc(var(--plotter-table-tree-line-width) / -2);
  background-color: var(--plotter-table-tree-line-color);
  opacity: var(--plotter-table-tree-line-opacity);
}

.plotter-table--tree-lines .plotter-table-tree-branch-last::before {
  bottom: 50%;
}

.plotter-table-foot-row > .plotter-table-td-foot {
  font-size: var(--plotter-table-font-size-footer);
  font-weight: var(--plotter-table-font-weight-footer);
}

.plotter-table-cell-text {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Accordion / hierarchy group rows. */
.plotter-table-accordion-row,
.plotter-table-group-row {
  background-color: rgba(var(--color-dark-rgb), 0.04);
}

.plotter-table-foot {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background-color: var(--color-white, #fff);
}

.plotter-table-foot-row > .plotter-table-td-foot {
  font-size: var(--plotter-table-font-size-footer);
  font-weight: var(--plotter-table-font-weight-footer);
}

.plotter-table-value-colorized.plotter-table-value-positive .plotter-table-cell-text {
  color: var(--plotter-table-color-positive, var(--datama-increase, #2f9e44));
}

.plotter-table-value-colorized.plotter-table-value-negative .plotter-table-cell-text {
  color: var(--plotter-table-color-negative, var(--datama-decrease, #d64545));
}

/* Hierarchy label cell: indentation + expand chevron + text. */
.plotter-table-td-label .plotter-table-label-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  min-width: 0;
}

.plotter-table-td-label .plotter-table-label-content .plotter-table-cell-text {
  flex: 1 1 auto;
  min-width: 0;
}

.plotter-table-group-row > .plotter-table-td-label {
  font-weight: 600;
}

.plotter-table-row-toggle svg {
  transition: transform 0.15s ease;
}

.plotter-table-row-toggle-spacer {
  display: inline-block;
  width: 18px;
  flex: 0 0 18px;
}

/* Total row: bold with subtle contrasted background. */
.plotter-table-total-row {
  font-weight: 700;
  background-color: rgba(var(--color-dark-rgb), 0.03);
}

.plotter-table-value {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

.plotter-table-kpi-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
}

.plotter-table-kpi-footer-label {
  font-size: 0.75em;
  font-style: italic;
  font-weight: 400;
  color: rgba(var(--color-dark-rgb), 0.55);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plotter-table-peer-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
  max-width: 100%;
  min-width: 0;
}

.plotter-table-td-label .plotter-table-label-content--peers {
  align-items: flex-start;
}

.plotter-table-td-label .plotter-table-label-content .plotter-table-peer-stack {
  flex: 1 1 auto;
  min-width: 0;
}

.plotter-table-cell-peer-text {
  display: block;
  font-size: 0.85em;
  font-style: italic;
  font-weight: 400;
  color: rgba(var(--color-dark-rgb), 0.55);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plotter-table-empty {
  text-align: center;
  padding: 16px;
  color: rgba(var(--color-dark-rgb), 0.5);
  font-style: italic;
}

/* Gauges */
.plotter-table-gauge {
  pointer-events: none;
}

.plotter-table-gauge-background {
  position: absolute;
  z-index: 0;
  border-radius: 3px;
}

.plotter-table-gauge-background-horizontal {
  left: 0;
  top: 0;
  bottom: 0;
  height: auto;
}

.plotter-table-gauge-background-vertical {
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
}

.plotter-table-gauge-edge {
  position: absolute;
  z-index: 0;
  background-color: rgba(var(--color-dark-rgb), 0.08);
  overflow: hidden;
}

.plotter-table-gauge-top {
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.plotter-table-gauge-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
}

.plotter-table-gauge-left {
  top: 0;
  bottom: 0;
  left: 0;
  width: 6px;
}

.plotter-table-gauge-right {
  top: 0;
  bottom: 0;
  right: 0;
  width: 6px;
}

.plotter-table-gauge-fill {
  display: block;
  border-radius: 3px;
}

.plotter-table-gauge-edge .plotter-table-gauge-fill {
  position: absolute;
}

.plotter-table-gauge-top .plotter-table-gauge-fill,
.plotter-table-gauge-bottom .plotter-table-gauge-fill {
  left: 0;
  top: 0;
  height: 100%;
}

.plotter-table-gauge-left .plotter-table-gauge-fill,
.plotter-table-gauge-right .plotter-table-gauge-fill {
  left: 0;
  bottom: 0;
  width: 100%;
}

.plotter-table-gauge-fill-positive {
  background-color: var(--plotter-table-color-positive, var(--datama-increase, #2f9e44));
}

.plotter-table-gauge-fill-negative {
  background-color: var(--plotter-table-color-negative, var(--datama-decrease, #d64545));
}

.plotter-table-gauge-background.plotter-table-gauge-fill-positive,
.plotter-table-gauge-background.plotter-table-gauge-fill-negative {
  opacity: 0.25;
}

/* Diverging gauge: bar centered on the baseline, growing left (negative) or
   right (positive), with a visible median axis. */
.plotter-table-gauge-diverging {
  position: relative;
  display: block;
  height: 12px;
  width: 100%;
  margin-top: 4.5px;
  background-color: rgba(var(--color-dark-rgb), 0.06);
  border-radius: 4.5px;
  overflow: hidden;
}

.plotter-table-gauge-diverging::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(var(--color-dark-rgb), 0.28);
}

.plotter-table-gauge-diverging .plotter-table-gauge-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 3px;
}

/* Overlay gauge: diverging pill behind the cell value, centered vertically. */
.plotter-table-gauge-overlay {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(1em + 9px);
  z-index: 0;
}

.plotter-table-gauge-overlay .plotter-table-gauge-fill {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 999px;
}

.plotter-table-gauge-overlay .plotter-table-gauge-fill-positive,
.plotter-table-gauge-overlay .plotter-table-gauge-fill-negative {
  opacity: 0.35;
}

/* Indicators */
.plotter-table-indicator {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  line-height: 1;
}

.plotter-table-indicator svg {
  display: block;
}

.plotter-table-indicator svg path {
  fill: none;
  stroke: currentColor;
}

/* Pagination (Material-like, bottom-right) — outside the scroll wrapper. */
.plotter-table-pagination {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  padding: 8px 12px;
  background-color: var(--color-white, #fff);
  border-top: 1px solid rgba(var(--color-dark-rgb), 0.08);
  font-size: 12px;
}

.plotter-table-pagination-per-page {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(var(--color-dark-rgb), 0.7);
}

.plotter-table-pagination-select {
  border: 1px solid rgba(var(--color-dark-rgb), 0.2);
  background: transparent;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 12px;
  cursor: pointer;
}

.plotter-table-pagination .plotter-table-icon-button {
  padding: 4px;
}

.plotter-table-pagination .plotter-table-icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.plotter-table-page-info {
  font-size: 12px;
  color: rgba(var(--color-dark-rgb), 0.7);
  min-width: 80px;
  text-align: right;
}

/* Table settings editor (side panel scope) */
.plotter-table-settings-fieldset {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
}

.plotter-table-settings-legend {
  font-weight: 600;
  margin-bottom: 6px;
}

.plotter-table-settings-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.plotter-table-settings-column {
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}

.plotter-table-settings-column-header {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

.plotter-table-settings-column-header > .datama-input,
.plotter-table-settings-column-header > .plotter-input {
  flex: 1;
}

.plotter-table-settings-column-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.plotter-table-settings-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plotter-table-settings-field-label {
  font-size: 11px;
  color: rgba(var(--color-dark-rgb), 0.6);
}

.plotter-table-settings-empty {
  color: rgba(var(--color-dark-rgb), 0.5);
  font-style: italic;
  padding: 8px 0;
}

/* Row hierarchy / Column groups list editors (ordered add/remove rows). */
.plotter-table-settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 6px;
}

.plotter-table-settings-list-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.plotter-table-settings-list-row > .datama-input,
.plotter-table-settings-list-row > .plotter-input,
.plotter-table-settings-list-row > select {
  flex: 1;
  min-width: 0;
}

.plotter-table-settings-group {
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
}

.plotter-table-settings-group-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.plotter-table-settings-group-header > .datama-input,
.plotter-table-settings-group-header > .plotter-input {
  flex: 1;
}

.plotter-table-settings-multiselect {
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  border: 1px solid rgba(var(--color-dark-rgb), 0.2);
  border-radius: 4px;
  font-size: 12px;
  padding: 2px;
}

/* Settings matrix (Conditional Formatting style) */
.plotter-table-settings-matrix-wrapper {
  --plotter-table-settings-matrix-font-size: 12px;
  --plotter-table-settings-matrix-line-height: 1.25;
  --plotter-table-settings-matrix-icon-size: 14px;
  --plotter-table-settings-matrix-control-height: 28px;
  margin-bottom: 12px;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  overscroll-behavior-x: contain;
}

.plotter-table-settings-matrix {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--plotter-table-settings-matrix-font-size);
  line-height: var(--plotter-table-settings-matrix-line-height);
}

.plotter-table-settings-matrix-th {
  padding: 6px 6px;
  text-align: center;
  font-weight: 600;
  font-size: var(--plotter-table-settings-matrix-font-size);
  color: rgba(var(--color-dark-rgb), 0.65);
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.12);
  white-space: nowrap;
  vertical-align: middle;
}

.plotter-table-settings-matrix-th-type {
  text-align: left;
  padding-left: 8px;
}

.plotter-table-settings-matrix-cell {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
  vertical-align: middle;
  text-align: center;
}

.plotter-table-settings-matrix-cell-type {
  text-align: left;
  min-width: 132px;
  max-width: 168px;
}

.plotter-table-settings-matrix-cell-drag {
  width: 24px;
  padding-left: 4px;
  padding-right: 2px;
}

.plotter-table-settings-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: rgba(var(--color-dark-rgb), 0.35);
  font-size: var(--plotter-table-settings-matrix-font-size);
  line-height: 1;
  user-select: none;
  letter-spacing: -2px;
}

.plotter-table-settings-drag-handle:active {
  cursor: grabbing;
}

.plotter-table-settings-matrix-row--disabled {
  opacity: 0.45;
}

.plotter-table-settings-matrix-row--disabled .plotter-table-settings-matrix-cell-type {
  color: rgba(var(--color-dark-rgb), 0.45);
  font-style: italic;
}

.plotter-table-settings-matrix-row--dragging {
  opacity: 0.6;
  background-color: rgba(var(--datama-primary-rgb), 0.08);
}

.plotter-table-settings-matrix-detail-cell {
  min-width: 0;
  padding-left: 8px;
  padding-right: 8px;
}

.plotter-table-settings-matrix-detail-cell .datama-fieldset,
.plotter-table-settings-matrix-detail-cell .plotter-fieldset {
  min-width: 0;
}

.plotter-table-settings-matrix-input {
  width: var(--plotter-table-settings-matrix-icon-size);
  height: var(--plotter-table-settings-matrix-icon-size);
  margin: 0;
  cursor: pointer;
  accent-color: var(--datama-primary, #499e95);
  vertical-align: middle;
}

.plotter-table-settings-matrix-empty {
  text-align: center;
  color: rgba(var(--color-dark-rgb), 0.5);
  font-style: italic;
  padding: 12px 8px;
}

.plotter-table-settings-matrix-th-icon {
  width: 40px;
  padding: 6px 4px;
  text-align: center;
}

.plotter-table-settings-matrix-th-icon .datama-icon,
.plotter-table-settings-matrix-th-icon .plotter-icon,
.plotter-table-settings-matrix-th-icon svg {
  display: block;
  width: var(--plotter-table-settings-matrix-icon-size);
  height: var(--plotter-table-settings-matrix-icon-size);
  margin: 0 auto;
  opacity: 0.72;
  color: rgba(var(--color-dark-rgb), 0.72);
}

.plotter-table-settings-matrix-th-gauge .datama-icon,
.plotter-table-settings-matrix-th-gauge .plotter-icon,
.plotter-table-settings-matrix-th-gauge svg,
.plotter-table-settings-matrix-th-indicator .datama-icon,
.plotter-table-settings-matrix-th-indicator .plotter-icon,
.plotter-table-settings-matrix-th-indicator svg,
.plotter-table-settings-matrix-th-colors .datama-icon,
.plotter-table-settings-matrix-th-colors .plotter-icon,
.plotter-table-settings-matrix-th-colors svg {
  width: 20px;
  height: 20px;
}

.plotter-table-settings-matrix-cell-remove {
  width: 28px;
  padding: 4px 2px;
}

.plotter-table-settings-matrix-remove-button,
.plotter-table-settings-matrix-add-button {
  min-width: 0;
  min-height: var(--plotter-table-settings-matrix-control-height);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.plotter-table-settings-matrix-remove-button svg,
.plotter-table-settings-matrix-add-button svg,
.plotter-table-settings-matrix-remove-button .datama-icon,
.plotter-table-settings-matrix-remove-button .plotter-icon,
.plotter-table-settings-matrix-add-button .datama-icon,
.plotter-table-settings-matrix-add-button .plotter-icon {
  width: var(--plotter-table-settings-matrix-icon-size);
  height: var(--plotter-table-settings-matrix-icon-size);
}

.plotter-table-settings-matrix-cell-preset {
  min-width: 108px;
  max-width: 148px;
}

/* Unified compact selects inside the matrix (column, gauge, indicator, add). */
.plotter-table-settings-matrix-wrapper .datama-input-select,
.plotter-table-settings-matrix-wrapper .plotter-input-select {
  width: 100%;
  max-width: 148px;
  min-height: var(--plotter-table-settings-matrix-control-height);
  font-size: var(--plotter-table-settings-matrix-font-size);
  line-height: var(--plotter-table-settings-matrix-line-height);
  padding: 4px 1.25rem 4px 6px;
}

.plotter-table-settings-matrix-wrapper .datama-input-select.datama-input-select-light,
.plotter-table-settings-matrix-wrapper .plotter-input-select.plotter-input-select-light {
  font-size: var(--plotter-table-settings-matrix-font-size);
  min-height: var(--plotter-table-settings-matrix-control-height);
  padding: 4px 1.25rem 4px 6px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.08);
  border-radius: 4px;
  background: rgba(var(--color-white-rgb), 1);
}

.plotter-table-settings-matrix-wrapper .datama-input-select > .datama-input-select-value,
.plotter-table-settings-matrix-wrapper .plotter-input-select > .plotter-input-select-value {
  font-size: var(--plotter-table-settings-matrix-font-size);
  font-weight: 500;
  line-height: var(--plotter-table-settings-matrix-line-height);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plotter-table-settings-matrix-wrapper .datama-input-select.datama-input-select-light > .datama-input-select-value,
.plotter-table-settings-matrix-wrapper .plotter-input-select.plotter-input-select-light > .plotter-input-select-value {
  font-size: var(--plotter-table-settings-matrix-font-size);
  font-weight: 500;
}

.plotter-table-settings-matrix-wrapper .datama-input-select::after,
.plotter-table-settings-matrix-wrapper .plotter-input-select::after {
  right: 0.5rem;
  border-width: 3px;
  border-top-width: 4px;
}

.plotter-table-settings-matrix-cell-type .datama-input-select,
.plotter-table-settings-matrix-cell-type .plotter-input-select {
  max-width: 160px;
}

.plotter-table-settings-matrix-add {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  min-height: var(--plotter-table-settings-matrix-control-height);
}

.plotter-table-settings-matrix-add .datama-input-select,
.plotter-table-settings-matrix-add .plotter-input-select {
  flex: 1;
  max-width: 200px;
}

.plotter-table-settings-accordion {
  margin-top: 8px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.1);
  border-radius: 6px;
  padding: 0 8px 8px;
}

.plotter-table-settings-accordion-summary {
  cursor: pointer;
  font-weight: 600;
  padding: 8px 0;
  list-style: none;
  color: rgba(var(--color-dark-rgb), 0.8);
}

.plotter-table-settings-accordion-summary::-webkit-details-marker {
  display: none;
}

.plotter-table-settings-accordion-body {
  padding-top: 4px;
}

/* Table display preset settings */
.plotter-table-settings-display {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Detect scores table custom cells */
.plotter-table-detect-kpi,
.plotter-table-detect-impact {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plotter-table-detect-kpi-title,
.plotter-table-detect-impact-label {
  font-weight: 600;
  font-size: 14px;
}

.plotter-table-detect-kpi-subtitle,
.plotter-table-detect-impact-label--total {
  font-size: 12px;
  color: rgba(var(--color-dark-rgb), 0.66);
}

.plotter-table-detect-kpi-subtitle--total,
.plotter-table-detect-impact-label--total {
  font-style: italic;
}

.plotter-table-detect-impact-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plotter-table-detect-impact-value {
  width: 72px;
  font-size: 12px;
  text-align: left;
}

.plotter-table-detect-impact-track {
  flex-grow: 1;
  background-color: rgba(var(--color-dark-rgb), 0.08);
  height: 6px;
  border-radius: 3px;
}

.plotter-table-detect-impact-fill {
  height: 6px;
  border-radius: 3px;
}

/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2026 DATAMA SAS, All rights reserved.
 * Generated for file : __tooltip.css project project-deep-sky
 */
/* Hosts that expose a DataMaHelpTooltip / Plotter help tooltip */
.datama-help-tooltip {
  cursor: help;
}

/* Floating popup portaled under the Studio instance overlay host */
.datama-help-tooltip-popup {
  position: absolute;
  z-index: 100000;
  left: 0;
  top: 0;
  box-sizing: border-box;
  max-width: 320px;
  width: max-content;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(var(--color-dark-rgb), 0.12);
  background: var(--color-white);
  color: var(--color-dark);
  box-shadow: 0 4px 16px rgba(var(--color-dark-rgb), 0.14);
  font-family: var(--font-family);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(2px);
  transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s ease;
}

.datama-help-tooltip-popup.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.datama-plot {
  font-family: var(--font-family, Roboto, Arial, sans-serif);
}

div[data-app=true] .plotter-shortcuts .datama-input-label,
div[data-app=true] .plotter-shortcuts .datama-input-select,
div[data-app=true] .plotter-shortcuts .plotter-input-label,
div[data-app=true] .plotter-shortcuts .plotter-input-select,
.plotter .plotter-shortcuts .plotter-input-label,
.plotter .plotter-shortcuts .plotter-input-select {
  min-width: unset;
  margin: 0 !important;
  font-weight: 600;
  font-size: 0.75rem;
}

/*
 * DATAMA SAS
 * --------------
 * Compare hierarchy tree cards (Waterfall tree view).
 * Port of Light `parts/compare.css`: wireframe grids + flex header / mid / footer.
 * Class prefix: .datama-compare-tree-card / __slot / __name / __main / …
 * Keep this file in sync with Light `parts/compare.css`.
 */
/* ---- Card shell ---- */
.datama-compare-tree-card {
  /* Defaults mirrored from wireframe :root (sizes/pad); chrome stays transparent for Plotter path. */
  --compare-tree-card-pad: 8px 12px;
  --compare-tree-card-radius: 0;
  --compare-tree-card-border: none;
  --compare-tree-card-shadow: none;
  --compare-tree-text: inherit;
  --compare-tree-positive: #16a34a;
  --compare-tree-negative: #dc2626;
  --compare-tree-size-name: 1;
  --compare-tree-size-main: 1.2;
  --compare-tree-size-sub: 0.85;
  --compare-tree-size-spark: 1;
  --compare-tree-size-indicator: 1;
  --compare-tree-size-emoji: 1;
  --compare-tree-size-gauge: 1;
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: var(--compare-tree-card-pad);
  border-radius: var(--compare-tree-card-radius);
  border: none;
  background: transparent;
  box-shadow: none;
  color: var(--compare-tree-text);
  gap: 4px;
  font-size: 13px;
  font-family: var(--font-family);
  --compare-tree-card-current: #2563eb;
  --compare-tree-card-semantic: var(--compare-tree-card-current);
  container-type: size;
  container-name: compare-treecard;
  pointer-events: all;
  cursor: pointer;
}

.datama-compare-tree-card[data-trend=down] {
  --compare-tree-card-current: var(--compare-tree-negative);
  --compare-tree-card-semantic: var(--compare-tree-negative);
}

.datama-compare-tree-card[data-trend=up] {
  --compare-tree-card-current: var(--compare-tree-positive);
  --compare-tree-card-semantic: var(--compare-tree-positive);
}

.datama-compare-tree-card__slot {
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  z-index: 1;
  overflow: hidden;
}

.datama-compare-tree-card__slot[hidden] {
  display: none !important;
}

.datama-compare-tree-card__name {
  grid-area: name;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  font-size: calc(0.85rem * var(--compare-tree-size-name));
  line-height: 1.2;
  color: var(--compare-tree-slot-name-color, inherit);
  overflow-wrap: anywhere;
  word-break: break-word;
  align-self: start;
  justify-self: stretch;
  width: 100%;
  min-height: 0;
  /* Cap height to clamped lines — avoids mid-glyph crop when row is between N and N+1 lines. */
  max-height: 2.4em;
}

/* Landscape / wide: single-line ellipsis (never mid-glyph vertical crop). */
.datama-compare-tree-card[data-aspect=landscape] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect=wide] .datama-compare-tree-card__name {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.2;
  min-height: 0;
  max-height: 1.2em;
  align-self: center;
}

/* Portrait / tall / square: up to 3 lines, height locked to clamp (no empty name band). */
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect=square] .datama-compare-tree-card__name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  white-space: normal;
  line-height: 1.2;
  min-height: 0;
  max-height: 3.6em;
  align-self: start;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=square] .datama-compare-tree-card__name {
  -webkit-line-clamp: 2;
  max-height: 2.4em;
}

/* Main KPI: block + ellipsis (flex breaks text-overflow). */
.datama-compare-tree-card__main {
  grid-area: main;
  display: block;
  font-weight: 700;
  font-size: calc(1.1rem * var(--compare-tree-size-main));
  line-height: 1.15;
  color: var(--compare-tree-slot-main-color, inherit);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  min-height: 0;
  max-height: 1.15em;
  align-self: center;
  text-align: center;
}

.datama-compare-tree-card__sub {
  grid-area: sub;
  display: flex;
  flex-wrap: nowrap;
  align-content: center;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
}

.datama-compare-tree-card__sub-kpi {
  /* Size to the value. Shrinking with ellipsis produced pills that were
   * mostly "…" — hide extras instead (see nth-child / container rules). */
  display: block;
  flex: 0 0 auto;
  min-width: 0;
  height: 1.35rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.03);
  font-size: calc(0.68rem * var(--compare-tree-size-sub));
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.35rem;
  text-align: center;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  color: var(--compare-tree-slot-sub-color, inherit);
  box-sizing: border-box;
}

/* ---- Sub KPI display modes ---- */
.datama-compare-tree-card[data-sub-display=pills] .datama-compare-tree-card__sub {
  gap: 0.25rem;
}

/* Non-pill modes flow as a single inline text line so the CONTAINER
 * can ellipsize at its right edge instead of clipping mid-glyph
 * when the aggregated content is wider than the sub slot. */
.datama-compare-tree-card[data-sub-display=bullet] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-sub-display=dense] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-sub-display=text] .datama-compare-tree-card__sub {
  display: block;
  gap: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  min-width: 0;
}

.datama-compare-tree-card[data-sub-display=bullet] .datama-compare-tree-card__sub-kpi,
.datama-compare-tree-card[data-sub-display=dense] .datama-compare-tree-card__sub-kpi,
.datama-compare-tree-card[data-sub-display=text] .datama-compare-tree-card__sub-kpi {
  display: inline;
  height: auto;
  max-width: none;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}

.datama-compare-tree-card[data-sub-display=bullet] .datama-compare-tree-card__sub-kpi {
  font-weight: 600;
}

.datama-compare-tree-card[data-sub-display=bullet] .datama-compare-tree-card__sub-kpi + .datama-compare-tree-card__sub-kpi::before {
  content: "•";
  display: inline;
  margin: 0 0.35rem;
  opacity: 0.45;
  font-weight: 700;
}

.datama-compare-tree-card[data-sub-display=dense] .datama-compare-tree-card__sub-kpi {
  font-size: calc(0.62rem * var(--compare-tree-size-sub));
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.datama-compare-tree-card[data-sub-display=dense] .datama-compare-tree-card__sub-kpi + .datama-compare-tree-card__sub-kpi::before {
  content: "|";
  display: inline;
  margin: 0 0.28rem;
  opacity: 0.35;
  font-weight: 500;
  text-transform: none;
}

.datama-compare-tree-card[data-sub-display=text] .datama-compare-tree-card__sub-kpi {
  font-size: calc(0.7rem * var(--compare-tree-size-sub));
  font-weight: 500;
  letter-spacing: 0;
}

.datama-compare-tree-card[data-sub-display=text] .datama-compare-tree-card__sub-kpi + .datama-compare-tree-card__sub-kpi::before {
  content: ", ";
  display: inline;
  opacity: 0.75;
  font-weight: 400;
}

/* Pills stay fully readable (no ellipsis). Show as many as fit: JS
 * clips extras via countFittingTreeCardPills; container queries below
 * are the fallback before layout is measured.
 * Bullet / dense / text modes stay uncapped (line ellipsis). */
/* Centered portrait/tall grids must still stretch text/sub rows full width. */
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect=square] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect=square] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect=square] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect=landscape] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-aspect=wide] .datama-compare-tree-card__name {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__sub {
  justify-content: flex-start;
}

.datama-compare-tree-card__spark {
  grid-area: spark;
  display: flex;
  align-items: center;
  justify-content: stretch;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 3.25rem;
  overflow: hidden;
  align-self: stretch;
}

.datama-compare-tree-card__spark svg {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 3.25rem;
  overflow: hidden;
}

/* Portrait / tall / square: keep spark compact — few points, no empty 1fr chart band. */
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect=square] .datama-compare-tree-card__spark {
  max-width: 100%;
  max-height: 1.75rem;
  height: 1.75rem;
  justify-self: stretch;
}

.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__spark svg,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__spark svg,
.datama-compare-tree-card[data-aspect=square] .datama-compare-tree-card__spark svg {
  max-height: 1.75rem;
}

.datama-compare-tree-card__indicator {
  flex: 0 0 auto;
  width: max-content;
  max-width: 2.5rem;
  grid-area: indicator;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: calc(0.95rem * var(--compare-tree-size-indicator));
  color: var(--compare-tree-slot-indicator-color, var(--compare-tree-card-current));
  line-height: 1;
}

.datama-compare-tree-card__indicator-pill {
  width: calc(10px * var(--compare-tree-size-indicator));
  height: calc(10px * var(--compare-tree-size-indicator));
  border-radius: 999px;
  background: var(--compare-tree-slot-indicator-color, var(--compare-tree-card-current));
}

.datama-compare-tree-card__emoji {
  flex: 0 0 auto;
  width: max-content;
  max-width: 2rem;
  grid-area: emoji;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: calc(1.25rem * var(--compare-tree-size-emoji));
  line-height: 1;
}

/* Gauge overlays */
.datama-compare-tree-card__gauge {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--compare-tree-slot-gauge-color, var(--compare-tree-card-current));
}

.datama-compare-tree-card__gauge[data-format=bar][data-side=left],
.datama-compare-tree-card__gauge[data-format=bar][data-side=right] {
  top: 0;
  width: 6px;
  height: calc(var(--compare-tree-gauge-value, 0.5) * 100%);
  background: currentColor;
  border-radius: 6px;
}

.datama-compare-tree-card__gauge[data-format=bar][data-side=left] {
  left: 0;
  bottom: 0;
  top: auto;
}

.datama-compare-tree-card__gauge[data-format=bar][data-side=right] {
  right: 0;
  bottom: 0;
  top: auto;
}

.datama-compare-tree-card__gauge[data-format=bar][data-side=top],
.datama-compare-tree-card__gauge[data-format=bar][data-side=bottom] {
  left: 0;
  height: 6px;
  width: calc(var(--compare-tree-gauge-value, 0.5) * 100%);
  background: currentColor;
  border-radius: 6px;
}

.datama-compare-tree-card__gauge[data-format=bar][data-side=top] {
  top: 0;
}

.datama-compare-tree-card__gauge[data-format=bar][data-side=bottom] {
  bottom: 0;
}

.datama-compare-tree-card__gauge[data-format=background] {
  inset: 0;
  opacity: var(--compare-tree-gauge-opacity, 0.35);
}

.datama-compare-tree-card__gauge[data-format=background][data-direction=vertical] {
  background: linear-gradient(to top, currentColor 0%, currentColor calc(var(--compare-tree-gauge-value, 0.5) * 100%), transparent calc(var(--compare-tree-gauge-value, 0.5) * 100%));
}

.datama-compare-tree-card__gauge[data-format=background][data-direction=horizontal] {
  background: linear-gradient(to right, currentColor 0%, currentColor calc(var(--compare-tree-gauge-value, 0.5) * 100%), transparent calc(var(--compare-tree-gauge-value, 0.5) * 100%));
}

.datama-compare-tree-card__gauge[data-format=circular] {
  grid-area: gauge;
  position: relative;
  inset: auto;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.datama-compare-tree-card__gauge[data-format=circular] svg {
  transform: rotate(-90deg);
}

.datama-compare-tree-card__gauge[data-format=circular] .track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 3.5;
}

.datama-compare-tree-card__gauge[data-format=circular] .value {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.5;
  stroke-linecap: round;
  opacity: var(--compare-tree-gauge-opacity, 0.9);
}

/* Progressive layouts — size × aspect (pixel-perfect small formats) */
/* Shared: keep content clear of left gauge bar */
.datama-compare-tree-card[data-show-gauge=true][data-gauge-format=bar] {
  padding-left: 10px;
}

.datama-compare-tree-card[data-breakpoint=micro][data-show-gauge=true][data-gauge-format=bar],
.datama-compare-tree-card[data-breakpoint=xs][data-show-gauge=true][data-gauge-format=bar] {
  padding-left: 8px;
}

/* ---- micro ---- */
.datama-compare-tree-card[data-breakpoint=micro][data-aspect=portrait],
.datama-compare-tree-card[data-breakpoint=micro][data-aspect=tall] {
  grid-template-areas: "main" "name";
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 2px 3px 2px 8px;
  gap: 1px;
  align-content: center;
}

.datama-compare-tree-card[data-breakpoint=micro][data-aspect=square] {
  grid-template-areas: "main";
  grid-template-rows: minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  padding: 2px 2px 2px 10px;
  gap: 0;
}

.datama-compare-tree-card[data-breakpoint=micro][data-aspect=landscape],
.datama-compare-tree-card[data-breakpoint=micro][data-aspect=wide] {
  grid-template-areas: "name main";
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr) max-content;
  padding: 1px 4px 1px 8px;
  gap: 4px;
  align-items: center;
  align-content: center;
}

.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__name {
  display: block;
  -webkit-line-clamp: unset;
  -webkit-box-orient: unset;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: calc(0.55rem * var(--compare-tree-size-name));
  max-height: 1.2em;
  min-height: 0;
  align-self: center;
}

.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__main {
  font-size: calc(0.62rem * var(--compare-tree-size-main));
  max-height: 1.15em;
}

/* ---- xs ---- */
.datama-compare-tree-card[data-breakpoint=xs][data-aspect=portrait],
.datama-compare-tree-card[data-breakpoint=xs][data-aspect=tall] {
  grid-template-areas: "emoji" "main" "name";
  grid-template-rows: auto auto auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 3px 4px 3px 8px;
  justify-items: center;
  text-align: center;
  align-content: center;
  row-gap: 2px;
}

.datama-compare-tree-card[data-breakpoint=xs][data-aspect=portrait][data-emoji=false],
.datama-compare-tree-card[data-breakpoint=xs][data-aspect=tall][data-emoji=false] {
  grid-template-areas: "main" "name";
  grid-template-rows: auto auto;
}

.datama-compare-tree-card[data-breakpoint=xs][data-aspect=square] {
  grid-template-areas: "name" "main";
  grid-template-rows: auto auto;
  grid-template-columns: minmax(0, 1fr);
  padding: 4px 4px 4px 8px;
  text-align: center;
  align-content: center;
  row-gap: 2px;
}

.datama-compare-tree-card[data-breakpoint=xs][data-aspect=landscape] {
  grid-template-areas: "emoji name main indicator";
  grid-template-rows: auto;
  grid-template-columns: auto minmax(0, 1fr) max-content max-content;
  padding: 2px 6px 2px 8px;
  align-items: center;
  align-content: center;
  column-gap: 4px;
}

.datama-compare-tree-card[data-breakpoint=xs][data-aspect=wide] {
  grid-template-areas: "name main indicator";
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  padding: 1px 8px 1px 8px;
  align-items: center;
  align-content: center;
  column-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint=xs] .datama-compare-tree-card__name {
  font-size: calc(0.65rem * var(--compare-tree-size-name));
  -webkit-line-clamp: 2;
  max-height: 2.4em;
}

.datama-compare-tree-card[data-breakpoint=xs][data-aspect=landscape] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint=xs][data-aspect=wide] .datama-compare-tree-card__name {
  display: block;
  -webkit-line-clamp: unset;
  white-space: nowrap;
  max-height: 1.2em;
}

.datama-compare-tree-card[data-breakpoint=xs] .datama-compare-tree-card__main {
  font-size: calc(0.78rem * var(--compare-tree-size-main));
}

/* ---- sm ---- */
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait],
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall] {
  grid-template-areas: "emoji main indicator" "name name name" "sub sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto;
  padding: 6px 8px 6px 12px;
  justify-items: stretch;
  text-align: left;
  row-gap: 4px;
  column-gap: 4px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall] .datama-compare-tree-card__main {
  text-align: left;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=square] {
  grid-template-areas: "emoji name name" "main main indicator" "sub sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto;
  padding: 6px 8px 6px 12px;
  row-gap: 4px;
  column-gap: 4px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=landscape] {
  grid-template-areas: "emoji name main indicator" "sub sub sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  grid-template-rows: auto auto;
  padding: 6px 10px 6px 12px;
  align-items: center;
  align-content: center;
  row-gap: 4px;
  column-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=wide] {
  grid-template-areas: "emoji name main indicator sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content minmax(0, 0.9fr);
  grid-template-rows: auto;
  padding: 4px 10px 4px 12px;
  align-items: center;
  align-content: center;
  column-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__name {
  font-size: calc(0.72rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall] .datama-compare-tree-card__name {
  -webkit-line-clamp: 2;
  align-self: stretch;
}

.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__main {
  font-size: calc(0.95rem * var(--compare-tree-size-main));
}

/* ---- md ---- */
.datama-compare-tree-card[data-breakpoint=md][data-aspect=portrait],
.datama-compare-tree-card[data-breakpoint=md][data-aspect=tall] {
  grid-template-areas: "emoji main indicator" "name name name" "spark spark sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto minmax(1.5rem, 1fr);
  padding: 8px 10px 8px 12px;
  justify-items: stretch;
  text-align: left;
  row-gap: 4px;
  column-gap: 6px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=portrait] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint=md][data-aspect=tall] .datama-compare-tree-card__main {
  text-align: left;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=portrait] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=md][data-aspect=tall] .datama-compare-tree-card__spark {
  width: auto;
  max-width: none;
  height: 1.65rem;
  justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=portrait][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=md][data-aspect=tall][data-gauge-format=circular] {
  grid-template-areas: "emoji main gauge" "name name name" "spark spark indicator";
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=square] {
  grid-template-areas: "emoji name indicator" "main main spark" "sub sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto;
  padding: 8px 8px 8px 12px;
  row-gap: 4px;
  column-gap: 6px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=square] .datama-compare-tree-card__spark {
  width: 4.5rem;
  max-width: 4.5rem;
  height: 1.75rem;
  align-self: center;
  justify-self: end;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=square] .datama-compare-tree-card__main {
  text-align: left;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=landscape],
.datama-compare-tree-card[data-breakpoint=md][data-aspect=wide] {
  grid-template-areas: "emoji name main indicator" "spark spark sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  grid-template-rows: auto auto;
  padding: 8px 12px 8px 12px;
  align-items: center;
  align-content: center;
  column-gap: 8px;
  row-gap: 6px;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=wide] {
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=landscape] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=md][data-aspect=wide] .datama-compare-tree-card__spark {
  width: auto;
  max-width: none;
  height: 1.5rem;
  justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint=md] .datama-compare-tree-card__name {
  font-size: calc(0.78rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=md] .datama-compare-tree-card__main {
  font-size: calc(1rem * var(--compare-tree-size-main));
}

/* ---- lg ---- */
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=portrait],
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=tall] {
  grid-template-areas: "emoji main indicator" "name name name" "spark spark sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto minmax(1.75rem, 1fr);
  padding: 10px 12px 10px 14px;
  justify-items: stretch;
  text-align: left;
  row-gap: 6px;
  column-gap: 8px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=portrait] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=tall] .datama-compare-tree-card__main {
  text-align: left;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=portrait] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=tall] .datama-compare-tree-card__spark {
  width: auto;
  max-width: none;
  height: 1.75rem;
  justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=portrait][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=tall][data-gauge-format=circular] {
  grid-template-areas: "emoji main gauge" "name name name" "spark spark indicator";
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=square] {
  grid-template-areas: "emoji name indicator" "main main spark" "sub sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto;
  padding: 10px 12px 10px 14px;
  row-gap: 6px;
  column-gap: 8px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=square] .datama-compare-tree-card__spark {
  width: 5rem;
  max-width: 5rem;
  height: 1.75rem;
  align-self: center;
  justify-self: end;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=square] .datama-compare-tree-card__main {
  text-align: left;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=landscape],
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=wide] {
  grid-template-areas: "emoji name main indicator" "spark spark sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  grid-template-rows: auto auto;
  padding: 10px 14px 10px 14px;
  align-items: center;
  align-content: center;
  column-gap: 10px;
  row-gap: 8px;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=wide] {
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=landscape] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=wide] .datama-compare-tree-card__spark {
  width: auto;
  max-width: none;
  height: 1.5rem;
  justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint=lg][data-aspect=landscape][data-gauge-format=circular] {
  grid-template-areas: "emoji name main gauge" "spark spark sub indicator";
}

.datama-compare-tree-card[data-breakpoint=lg] .datama-compare-tree-card__name {
  font-size: calc(0.85rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=lg] .datama-compare-tree-card__main {
  font-size: calc(1.15rem * var(--compare-tree-size-main));
}

/* ---- xl ---- */
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=portrait],
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=tall] {
  grid-template-areas: "emoji main indicator" "name name name" "spark spark sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto minmax(2rem, 1fr);
  padding: 12px 14px 12px 16px;
  justify-items: stretch;
  text-align: left;
  row-gap: 6px;
  column-gap: 8px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=portrait] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=tall] .datama-compare-tree-card__main {
  text-align: left;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=portrait] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=tall] .datama-compare-tree-card__spark {
  width: auto;
  max-width: none;
  height: 2rem;
  justify-self: stretch;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=square] {
  grid-template-areas: "emoji name indicator" "main main spark" "sub sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-rows: auto auto auto;
  padding: 12px 14px 12px 16px;
  row-gap: 6px;
  column-gap: 8px;
  align-content: start;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=square] .datama-compare-tree-card__spark {
  width: 5.5rem;
  max-width: 5.5rem;
  height: 1.85rem;
  align-self: center;
  justify-self: end;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=square] .datama-compare-tree-card__main {
  text-align: left;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=landscape],
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=wide] {
  grid-template-areas: "emoji name main indicator" "spark spark sub sub";
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
  grid-template-rows: auto auto;
  padding: 12px 16px 12px 16px;
  align-items: center;
  align-content: center;
  column-gap: 10px;
  row-gap: 8px;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=wide] {
  grid-template-columns: max-content minmax(0, 1fr) max-content max-content;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=landscape] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=wide] .datama-compare-tree-card__spark {
  width: auto;
  max-width: none;
  height: 1.5rem;
  justify-self: stretch;
  align-self: center;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=landscape] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=wide] .datama-compare-tree-card__sub {
  justify-self: stretch;
  width: 100%;
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=landscape][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=wide][data-gauge-format=circular] {
  grid-template-areas: "emoji name main gauge" "spark spark sub indicator";
}

.datama-compare-tree-card[data-breakpoint=xl] .datama-compare-tree-card__name {
  font-size: calc(0.95rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=xl] .datama-compare-tree-card__main {
  font-size: calc(1.25rem * var(--compare-tree-size-main));
}

/* ---- Circular gauge grid variants (missing coverage) ----
 * The circular gauge needs a real `gauge` grid area; otherwise it
 * gets auto-placed and creates an implicit row/column, breaking the
 * layout. These variants complete the matrix so any breakpoint x
 * aspect combination that keeps a small trend indicator can promote
 * that spot to the circular gauge. When circular is shown next to a
 * trend indicator that would duplicate meaning, hide the indicator
 * (circular already conveys value + trend). */
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall][data-gauge-format=circular] {
  grid-template-areas: "emoji main gauge" "name name name" "sub sub sub";
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait][data-gauge-format=circular] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall][data-gauge-format=circular] .datama-compare-tree-card__indicator {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=square][data-gauge-format=circular] {
  grid-template-areas: "emoji name name" "main main gauge" "sub sub sub";
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=square][data-gauge-format=circular] .datama-compare-tree-card__indicator {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=landscape][data-gauge-format=circular] {
  grid-template-areas: "emoji name main gauge" "sub sub sub sub";
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=wide][data-gauge-format=circular] {
  grid-template-areas: "emoji name main gauge sub";
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=landscape][data-gauge-format=circular] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=wide][data-gauge-format=circular] .datama-compare-tree-card__indicator {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=square][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=lg][data-aspect=square][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=square][data-gauge-format=circular] {
  grid-template-areas: "emoji name gauge" "main main spark" "sub sub sub";
}

.datama-compare-tree-card[data-breakpoint=md][data-aspect=landscape][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=md][data-aspect=wide][data-gauge-format=circular] {
  grid-template-areas: "emoji name main gauge" "spark spark sub indicator";
}

.datama-compare-tree-card[data-breakpoint=xl][data-aspect=portrait][data-gauge-format=circular],
.datama-compare-tree-card[data-breakpoint=xl][data-aspect=tall][data-gauge-format=circular] {
  grid-template-areas: "emoji main gauge" "name name name" "spark spark indicator";
}

/* Circular gauge cell: keep the SVG round and bounded by its cell,
 * driven by a dedicated --compare-tree-size-gauge (defaulted from spark size
 * for backward compat when JS didn't set it). Prevents the SVG from
 * exploding past the cell on medium+ cards. */
.datama-compare-tree-card__gauge[data-format=circular] svg {
  width: 100%;
  height: 100%;
  max-width: calc(2rem * var(--compare-tree-size-gauge, var(--compare-tree-size-spark, 1)));
  max-height: calc(2rem * var(--compare-tree-size-gauge, var(--compare-tree-size-spark, 1)));
}

/* Micro / xs breakpoints have no gauge grid area at all — most demos
 * use bar or background gauges there. If a user forces circular, we
 * fall back to an absolutely-positioned pill in the top-right so it
 * never breaks the row/column structure. */
.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__gauge[data-format=circular],
.datama-compare-tree-card[data-breakpoint=xs] .datama-compare-tree-card__gauge[data-format=circular] {
  position: absolute;
  top: 2px;
  right: 2px;
  width: auto;
  height: auto;
}

.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__gauge[data-format=circular] svg,
.datama-compare-tree-card[data-breakpoint=xs] .datama-compare-tree-card__gauge[data-format=circular] svg {
  width: 16px;
  height: 16px;
  max-width: 16px;
  max-height: 16px;
}

/* =================================================================
 * FLEX LAYOUT for sm / md / lg / xl cards
 *
 * ROOT CAUSE OF PREVIOUS BUGS
 * ---------------------------
 * The old design used a single CSS grid per breakpoint x aspect.
 * Sparkline / sub pills placed in a shared column pushed that
 * column past its share via max-content contribution, and the main
 * KPI column then collapsed to 0 px (measured in md-portrait /
 * xl-portrait via Playwright: `main.clientWidth === 0`). Name was
 * also crushed on xl-landscape (~124 px).
 *
 * FIX
 * ---
 * DOM is now grouped into header / (mid) / footer FLEX rows. Row
 * tracks live in a flex column on the card; column tracks live
 * inside each row's own flex context. No grid column is ever
 * shared between header and footer, so sub pills or long
 * sparklines cannot starve the main slot anymore.
 *
 * The legacy per-breakpoint grid templates are neutralised for sm+
 * (`grid-template-*: none !important`) but kept in the stylesheet
 * for micro / xs which still rely on them.
 * ================================================================= */
.datama-compare-tree-card[data-breakpoint=sm],
.datama-compare-tree-card[data-breakpoint=md],
.datama-compare-tree-card[data-breakpoint=lg],
.datama-compare-tree-card[data-breakpoint=xl] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 4px;
  grid-template-areas: none !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

/* Short landscape / wide: name + main share the header, pills sit directly
 * underneath. Do not pin the footer to the bottom — that leftover height
 * is a hollow band, not a useful name row (stacked layouts own that gap). */
.datama-compare-tree-card[data-layout-signature=inline] {
  justify-content: center;
  gap: 3px;
}

.datama-compare-tree-card__header,
.datama-compare-tree-card__mid,
.datama-compare-tree-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.datama-compare-tree-card__header > .datama-compare-tree-card__emoji,
.datama-compare-tree-card__header > .datama-compare-tree-card__indicator {
  flex: 0 0 auto;
  align-self: center;
}

.datama-compare-tree-card__header > .datama-compare-tree-card__name {
  flex: 1 1 0;
  min-width: 0;
  align-self: center;
}

.datama-compare-tree-card__header > .datama-compare-tree-card__main {
  flex: 0 1 auto;
  min-width: 0;
  justify-content: flex-start;
}

/* Stacked aspects (no name in the header): let main grow so it
 * claims horizontal space and never collapses. */
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature=stacked][data-aspect=landscape] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature=stacked][data-aspect=wide] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
  flex: 1 1 auto;
  min-width: 3.25rem;
}

.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
  font-size: calc(0.7rem * var(--compare-tree-size-main));
  letter-spacing: -0.02em;
  flex: 1 0 auto;
  min-width: 0;
}

.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__sub-kpi {
  height: 1.15rem;
  line-height: 1.15rem;
  padding: 0 0.32rem;
  font-size: calc(0.58rem * var(--compare-tree-size-sub));
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait] .datama-compare-tree-card__header > .datama-compare-tree-card__emoji,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall] .datama-compare-tree-card__header > .datama-compare-tree-card__emoji {
  /* Narrow cards: keep emoji out of the KPI flex fight. */
  position: absolute;
  top: 4px;
  left: 10px;
  font-size: calc(0.85rem * var(--compare-tree-size-emoji));
  pointer-events: none;
  z-index: 2;
}

.datama-compare-tree-card[data-breakpoint=sm][data-aspect=portrait] .datama-compare-tree-card__header,
.datama-compare-tree-card[data-breakpoint=sm][data-aspect=tall] .datama-compare-tree-card__header {
  padding-left: 1.1rem;
}

.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__header > .datama-compare-tree-card__emoji {
  font-size: calc(1rem * var(--compare-tree-size-emoji));
}

/* Short landscape / wide (inline): main sizes to its value so the name
 * receives leftover width (sm's `flex: 1 0 auto` otherwise splits the
 * row 50/50 and ellipsizes "Revenue Total" to "Reve..."). `text-align`
 * is required because `__main` is `display: block` — justify-content
 * does not apply. */
.datama-compare-tree-card[data-layout-signature=inline][data-aspect=landscape] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature=inline][data-aspect=wide] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
  flex: 0 0 auto;
  justify-content: flex-end;
  text-align: right;
}

/* Tall landscape / wide (stacked): main grows left in the header. */
.datama-compare-tree-card[data-layout-signature=stacked][data-aspect=landscape] .datama-compare-tree-card__header > .datama-compare-tree-card__main,
.datama-compare-tree-card[data-layout-signature=stacked][data-aspect=wide] .datama-compare-tree-card__header > .datama-compare-tree-card__main {
  justify-content: flex-start;
}

/* Standalone name (stacked layouts) fills the middle vertical band
 * with a proper multi-line clamp aligned with its line-height. Last
 * visible line ends with ellipsis, never a mid-glyph crop.
 * Centered + larger than the inline header name — it is the secondary
 * hero under the main KPI (portrait / tall / tall landscape). */
.datama-compare-tree-card[data-breakpoint=sm] > .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint=md] > .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint=lg] > .datama-compare-tree-card__name,
.datama-compare-tree-card[data-breakpoint=xl] > .datama-compare-tree-card__name {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  line-height: 1.25;
  max-height: 3.75em;
  text-align: center;
  white-space: normal;
  font-size: calc(1rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=sm] > .datama-compare-tree-card__name {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-height: 2.5em;
  font-size: calc(0.9rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=md] > .datama-compare-tree-card__name {
  font-size: calc(1.05rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=lg] > .datama-compare-tree-card__name {
  font-size: calc(1.15rem * var(--compare-tree-size-name));
}

.datama-compare-tree-card[data-breakpoint=xl] > .datama-compare-tree-card__name {
  font-size: calc(1.25rem * var(--compare-tree-size-name));
}

/* Mid row (square) — main grows to fill, spark stays bounded.
 * !important on width / max-width defeats the legacy grid-context
 * rules (specificity 0,4,0) that hard-pinned spark to 5.5-7 rem
 * inside a grid column shared with emoji/main. */
.datama-compare-tree-card__mid {
  flex: 1 1 auto;
  min-height: 0;
  align-items: center;
}

.datama-compare-tree-card__mid > .datama-compare-tree-card__main {
  flex: 1 1 auto;
  min-width: 3.25rem;
  justify-content: flex-start;
  text-align: left;
}

.datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
  flex: 0 1 auto;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 5.5rem !important;
  height: 1.5rem !important;
  justify-self: stretch !important;
}

/* Footer pinned to bottom so leftover height is a purposeful gap
 * between name and footer (or absorbed by a growing spark), not a
 * hollow band under the whole card. Inline layouts skip this — the
 * name already lives in the header, so auto-margin is just empty space. */
.datama-compare-tree-card__footer {
  margin-top: auto;
  flex: 0 0 auto;
  align-items: flex-end;
  min-width: 0;
  overflow: hidden;
}

.datama-compare-tree-card[data-layout-signature=inline] .datama-compare-tree-card__footer {
  margin-top: 0;
}

.datama-compare-tree-card__footer > .datama-compare-tree-card__spark {
  flex: 0 1 auto;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 5.5rem !important;
  height: 1.5rem !important;
  max-height: 3.25rem;
  justify-self: stretch !important;
  align-self: flex-end;
}

.datama-compare-tree-card__footer > .datama-compare-tree-card__sub {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  align-self: center;
}

/* Portrait / tall: grow footer so spark can use leftover vertical room. */
.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__footer,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__footer {
  flex: 1 1 auto;
  align-items: flex-end;
  min-height: 0;
}

.datama-compare-tree-card[data-aspect=portrait] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-aspect=tall] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark {
  height: 100% !important;
  max-height: 3.25rem;
  align-self: stretch;
}

/* Per-breakpoint spark cap so it never dominates its row. */
.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
  max-width: 4.5rem !important;
  height: 1.35rem !important;
}

.datama-compare-tree-card[data-breakpoint=lg] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=lg] .datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
  max-width: 6.5rem !important;
  height: 1.6rem !important;
}

.datama-compare-tree-card[data-breakpoint=xl] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=xl] .datama-compare-tree-card__mid > .datama-compare-tree-card__spark {
  max-width: 7rem !important;
  height: 1.75rem !important;
}

/* When sub is hidden, spark reclaims the row width. */
.datama-compare-tree-card[data-show-sub=false] .datama-compare-tree-card__footer > .datama-compare-tree-card__spark {
  max-width: 100%;
  flex: 1 1 auto;
}

/* Collapse footer when both children are disabled — avoids the
 * empty band at the bottom of the card. */
.datama-compare-tree-card[data-show-spark=false][data-show-sub=false] .datama-compare-tree-card__footer {
  display: none;
}

.datama-compare-tree-card[data-show-main=false][data-show-spark=false] .datama-compare-tree-card__mid {
  display: none;
}

/* Neutralise legacy `grid-area` on slots for sm+ so no stale rule
 * accidentally forces auto-placement inside the flex containers. */
.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__slot,
.datama-compare-tree-card[data-breakpoint=md] .datama-compare-tree-card__slot,
.datama-compare-tree-card[data-breakpoint=lg] .datama-compare-tree-card__slot,
.datama-compare-tree-card[data-breakpoint=xl] .datama-compare-tree-card__slot {
  grid-area: auto;
}

/* Neutralise legacy `width: 100%` / `justify-self: stretch` that was
 * meant for grid stretching. Inside header/mid/footer flex rows we
 * want each slot to size on its own flex-basis / min-width chain,
 * otherwise every slot would try to be 100% wide and push the
 * others out of the row. Standalone name (direct child of card)
 * keeps its `width: 100%` because it lives in the card flex column
 * where the cross-axis stretch is desired. */
.datama-compare-tree-card__header > .datama-compare-tree-card__slot,
.datama-compare-tree-card__mid > .datama-compare-tree-card__slot,
.datama-compare-tree-card__footer > .datama-compare-tree-card__slot {
  width: auto;
  justify-self: auto;
  max-width: 100%;
}

/* Re-apply width:100% only for the slots that are FILL items inside
 * the row (name in header, sub in footer, main in mid). Their
 * flex-basis is 0 so the width serves as the initial target that
 * flex-grow will hand actual pixels to. */
.datama-compare-tree-card__footer > .datama-compare-tree-card__sub,
.datama-compare-tree-card__mid > .datama-compare-tree-card__main {
  width: 100%;
}

/* Circular gauge in the flex world: lives IN the header/mid row as a
 * flex item (never absolute overlay). That reserves horizontal room
 * so name / main cannot be painted underneath the ring. Indicator is
 * hidden when circular is shown (ring already conveys value + trend). */
.datama-compare-tree-card__header > .datama-compare-tree-card__gauge[data-format=circular],
.datama-compare-tree-card__mid > .datama-compare-tree-card__gauge[data-format=circular] {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  align-self: center;
  grid-area: auto;
  z-index: 1;
  width: calc(1.75rem * var(--compare-tree-size-gauge, 1));
  height: calc(1.75rem * var(--compare-tree-size-gauge, 1));
  min-width: calc(1.75rem * var(--compare-tree-size-gauge, 1));
  min-height: calc(1.75rem * var(--compare-tree-size-gauge, 1));
  max-width: calc(2rem * var(--compare-tree-size-gauge, 1));
  max-height: calc(2rem * var(--compare-tree-size-gauge, 1));
}

.datama-compare-tree-card__header > .datama-compare-tree-card__gauge[data-format=circular] svg,
.datama-compare-tree-card__mid > .datama-compare-tree-card__gauge[data-format=circular] svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Bar / background gauges stay absolute overlays relative to the card
 * (position:absolute removes them from the flex flow automatically). */
.datama-compare-tree-card[data-breakpoint=sm][data-gauge-format=circular] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=md][data-gauge-format=circular] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=lg][data-gauge-format=circular] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=xl][data-gauge-format=circular] .datama-compare-tree-card__indicator {
  display: none !important;
}

/* Slot visibility driven by settings (`data-show-*`).
 * Size-tier hides below still apply when a slot is enabled: compact
 * templates (micro / xs) have no sub/spark track, so honoring
 * `data-show-sub="true"` (the default) painted pills outside the card. */
.datama-compare-tree-card[data-show-spark=false] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-show-sub=false] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-show-indicator=false] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-show-emoji=false] .datama-compare-tree-card__emoji,
.datama-compare-tree-card[data-show-name=false] .datama-compare-tree-card__name,
.datama-compare-tree-card[data-show-main=false] .datama-compare-tree-card__main,
.datama-compare-tree-card[data-show-gauge=false] .datama-compare-tree-card__gauge {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=micro] .datama-compare-tree-card__emoji,
.datama-compare-tree-card[data-layout-signature=compact] .datama-compare-tree-card__sub,
.datama-compare-tree-card[data-layout-signature=compact] .datama-compare-tree-card__spark {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=micro][data-aspect=square] .datama-compare-tree-card__name {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=xs] .datama-compare-tree-card__spark,
.datama-compare-tree-card[data-breakpoint=xs] .datama-compare-tree-card__sub {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=xs][data-aspect=portrait] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=xs][data-aspect=tall] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=xs][data-aspect=square] .datama-compare-tree-card__indicator,
.datama-compare-tree-card[data-breakpoint=xs][data-aspect=square] .datama-compare-tree-card__emoji {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=xs][data-aspect=wide] .datama-compare-tree-card__emoji {
  display: none !important;
}

.datama-compare-tree-card[data-breakpoint=sm] .datama-compare-tree-card__spark {
  display: none !important;
}

/* Drop chrome before cropping text on very short / narrow cards.
 * Sub KPIs stay visible on typical sm equation cards (~70–90px tall);
 * only spark / emoji / extra pills yield. */
@container compare-treecard (max-height: 48px) {
  .datama-compare-tree-card__indicator,
  .datama-compare-tree-card__emoji {
    display: none !important;
  }
}
@container compare-treecard (max-width: 100px) {
  .datama-compare-tree-card[data-sub-display=pills] .datama-compare-tree-card__sub-kpi:nth-child(n+2) {
    display: none !important;
  }
}
@container compare-treecard (max-width: 72px) {
  .datama-compare-tree-card[data-sub-display=pills] .datama-compare-tree-card__sub {
    display: none !important;
  }
}
.datama-lite {
  --shadow-small: none;
  --shadow: none;
  --shadow-large: none;
  --input-shadow: none;
  --input-hover-shadow: none;
  --compare-tree-card-shadow: none;
}

.datama-lite *,
.datama-lite *::before,
.datama-lite *::after {
  box-shadow: none !important;
  text-shadow: none !important;
  transition-property: opacity, transform, color, background-color, border-color, fill, stroke !important;
}

.datama-lite svg * {
  filter: none !important;
}

.datama-lite .plotter-panel {
  transition: none !important;
}

.datama-lite .plotter-ui-panels-scope-section,
.datama-lite .datama-panels-scope-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

.datama-lite .plotter-shortcuts.plotter-shortcuts-over-title {
  -webkit-mask-image: none;
  mask-image: none;
}

.datama-lite .datama-header-logo-badge.pulse {
  animation: none;
}

.datama-lite .datama-skeleton,
.datama-lite .datama-skeleton *,
.datama-lite .datama-compare-plotter-skeleton__bar {
  animation: none !important;
}

.datama-lite .datama-eyes,
.datama-lite .datama-eyes * {
  animation: none !important;
}

.datama-lite .datama-eyes-flip__rotor {
  transition: none !important;
}
/* === Vendored chrome (src/assets/css/legacy-chrome) === */

/* --- parts/header.css --- */
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : header.css project project-deep-sky
 */

/*
 * Factory BI chrome only. Host-replaced headers add class `custom`
 * (`DATAMA_LIGHT_HEADER_CUSTOM_CLASS` in DataMaHeader.js). Those rules must
 * not run a second time after Light CSS loads, or they squash host layout
 * (40px bar, 20px buttons) on top of the Vue / host chrome.
 */
.datama-light-header:not(.custom) {
    flex: 0 0 40px;
    height: 40px;
    display: flex;
    justify-content: flex-start;
    border-bottom: var(--border);
}
.datama-light-header:not(.custom) .datama-header-license-key {
    display: flex;
    align-items: center;
    align-self: center;
    height: 100%;
    flex-shrink: 0;
}
.datama-light-header:not(.custom) .datama-header-logo {
    cursor: pointer;
    font-size: 20px;
    line-height: 20px;
    position: relative;
    /*border-right: var(--border);*/
}
.datama-light-header:not(.custom) .datama-header-logo + button {
    border-left: unset !important;
}

.datama-light-header:not(.custom) .datama-header-logo .datama-image {
    padding: 0 10px;
    margin-top: 7px;
    height: 26px;
    width: auto;
}

.datama-light-header:not(.custom) button.datama-button,
.datama-light-header:not(.custom) a.datama-button {
    background: transparent;
    border: 0;
    cursor: pointer;
    line-height: 40px;
    font-size: 20px !important;
    text-transform: capitalize;
    white-space: nowrap;
    transition: var(--transition-out);
    border-radius: 0;
    color: inherit;
}

/* DataMaIconsNew solid glyphs use fill="currentColor"; inherit header text color when idle */
.datama-light-header:not(.custom) button.datama-button .datama-button-icon svg {
    color: inherit;
}
.datama-light-header:not(.custom) button.datama-button:hover,
.datama-light-header:not(.custom) a.datama-button:hover,
.datama-light-header:not(.custom) .datama-header-logo:hover {
    background: var(--hover);
    transition: var(--transition-in);
}

/* Disabled header actions (demo / no license): gray chip, keep icon as-is */
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled {
    opacity: 1;
    cursor: not-allowed;
    background: rgba(var(--color-dark-rgb), 0.12);
}
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled:hover,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled:hover {
    background: rgba(var(--color-dark-rgb), 0.12);
    transform: none;
    box-shadow: none;
}
/*
 * A disabled Save button still receives `.highlight` from the many "settings changed"
 * call sites. That rule paints the primary background with `!important`, which would make
 * a demo-mode button that does nothing look like the primary call to action. Keep it gray.
 */
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled.highlight,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled.highlight {
    background-color: rgba(var(--color-dark-rgb), 0.12) !important;
    box-shadow: none;
}
.datama-light .datama-light-header:not(.custom) button.datama-button.disabled.highlight .datama-button-icon path,
div[data-app="true"] .datama-light-header:not(.custom) button.datama-button.disabled.highlight .datama-button-icon path {
    fill: currentColor !important;
}

.datama-light-header:not(.custom) button > span.datama-button-text {
    align-self: center;
    margin-left: 5px;
    font-size: 16px;
}

.datama-light-header.custom {
    /* Datama brand stack (Montserrat). Do not use --font-sans: host Tailwind may
     * define that token as the system UI family and override inherited Montserrat. */
    font-family: var(--font-family, inherit);
}

/* Badge styles for logo */
.datama-header-logo-badge {
    position: absolute;
    bottom: 6px;
    right: 0px;
    background: var(--accent, #00484A);
    color: white;
    border-radius: 12px;
    min-width: 12px;
    height: 12px;
    padding: 0 4px;
    font-size: 8px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    border: 2px solid var(--background, #ffffff);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.datama-header-logo-badge.pulse {
    animation: datama-badge-pulse 2s infinite;
}

@keyframes datama-badge-pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Logo quick-links menu (.datama-header-logo-menu)                   */
/* Datama visiting-card dropdown anchored under the header logo       */
/* ------------------------------------------------------------------ */

div[data-app="true"] .datama-context-menu.datama-header-logo-menu {
    min-width: 200px;
    padding: 4px 6px 8px;
    border: 1px solid rgba(var(--datama-primary-rgb), 0.12);
    border-radius: 12px;
    box-shadow:
        0 12px 40px -12px rgba(0, 72, 74, 0.28),
        0 8px 16px -12px rgba(22, 23, 24, 0.18);
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-search,
div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-search.visible {
    display: none !important;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-divider-first {
    display: none;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-divider:not(.datama-context-menu-divider-first) {
    width: 50%;
    margin: 6px auto 4px;
    padding: 0;
    border-top: 1px solid rgba(var(--datama-primary-rgb), 0.18);
    justify-content: center;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-context-menu-divider > span {
    display: none;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand {
    cursor: default;
    pointer-events: none;
    min-height: auto;
    justify-content: center;
    padding: 12px 16px 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(var(--datama-primary-rgb), 0.08);
    border-radius: 8px 8px 0 0;
    /* Override global `.disabled` opacity so the full logo stays crisp */
    opacity: 1 !important;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand:hover {
    background: transparent;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand .datama-context-menu-element-container {
    display: none;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand .datama-context-menu-slot-icon {
    width: 100%;
    height: auto;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-brand-image {
    display: block;
    height: 32px;
    width: auto;
    max-width: 148px;
    padding: 0;
    margin: 0 auto;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link {
    color: var(--color-primary);
    border-radius: 8px;
    padding: 7px 10px;
    min-height: 34px;
    font-weight: 500;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link:hover {
    background: rgba(var(--datama-primary-rgb), 0.07);
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-element-container {
    order: 1;
    color: var(--color-primary);
    font-weight: 500;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon {
    order: 2;
    margin-left: auto;
    font-size: 12px;
    opacity: 0.45;
    color: var(--color-primary);
    transition: opacity 0.12s ease-out;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link:hover .datama-context-menu-slot-icon {
    opacity: 0.75;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon .datama-icon,
div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon svg,
div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-link .datama-context-menu-slot-icon path {
    color: var(--color-primary);
    fill: var(--color-primary);
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-version {
    cursor: default;
    pointer-events: none;
    justify-content: center;
    padding: 6px 10px 4px;
    min-height: auto;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-version:hover {
    background: transparent;
}

div[data-app="true"] .datama-context-menu.datama-header-logo-menu .datama-header-logo-menu-version .datama-context-menu-element-container {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    color: var(--text-meta);
    text-align: center;
    width: 100%;
}
/* --- parts/footer.css --- */
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : footer.css project project-deep-sky
 */
.datama-official-footer-link {
    text-decoration: unset;
}
div[data-app="true"] .datama-light-footer {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding: 0 10px !important;
    flex: 0 0 30px;
    min-height: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow-x: hidden;
    overflow-y: hidden;
}
div[data-app="true"] .datama-light-footer:empty {
    display: none;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0;
    height: 30px;
    line-height: 30px;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
    align-self: center;
    margin-right: auto;
}
div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
    white-space: nowrap;
    align-self: center;
    text-decoration: none;
}
@media screen and (max-width: 400px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 5px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .65rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: .70rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
@media screen  and (min-width: 401px) and (max-width: 600px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 5px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .65rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: .70rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
@media screen and (min-width: 600px) and (max-width: 800px) {
    div[data-app="true"] .datama-light-footer {
        padding: 0 10px !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > span {
        line-height: 15px;
        font-size: .75rem !important;
        font-weight: 400 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > a {
        font-size: 1rem !important;
        font-weight: 500 !important;
    }
    div[data-app="true"] .datama-light-footer .datama-footer-message .datama-light-footer-demo > .datama-divider {
        height: 15px !important;
        margin-top: 8px !important;
    }
}
/* --- modules/__button.css --- */
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __button.css project project-deep-sky
 */

.datama-button {
    position: relative;
    width: fit-content;
    padding: 0.5rem 0.875rem;
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 6px;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    background: rgba(var(--color-white-rgb), 1);
    color: var(--color-dark);
    cursor: pointer;
    justify-items: center;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: none;
    font-size: 0.75rem;
    font-weight: 500;
    min-height: 36px;
    gap: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(var(--color-dark-rgb), 0.03);
}

.datama-button:hover:not(:disabled) {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    transform: translateY(-1px);
}
.datama-button:hover > *,
.datama-button:hover path {
    transition: .1s ease-in;
}
.datama-button > .datama-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    height: 100%;
}

.datama-button:not(.no-text) > .datama-button-icon {
    margin: 0 5px 0 -5px;
}
.datama-button > .datama-button-icon svg {
    display: block;
}

.datama-button.no-text {
    padding: 5px 10px;
}
.datama-button.primary,
.datama-button.primary path {
    color: rgb(var(--datama-primary-rgb));
    fill: rgb(var(--datama-primary-rgb));
}
.apply-advanced-settings,
.apply-advanced-settings .datama-icon,
.apply-advanced-settings .datama-icon path,
.apply-advanced-settings svg,
.apply-advanced-settings svg path {
   fill: var(--color-white) !important;
   color: var(--color-white) !important;
}

.datama-button.transparent {
    background: transparent;
    border: 0;
    color: rgb(var(--color-dark-rgb));
}

.datama-button.transparent:hover {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* Ensure transparent buttons in tables have no borders */
.datama-table .datama-button.transparent,
.datama-table .datama-button.transparent:focus,
.datama-table .datama-button.transparent:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 3px !important;
}

.datama-table .datama-button.transparent:hover {   
    background: rgba(var(--datama-primary-rgb), 0.05) !important;
}

.datama-button.secondary,
.datama-button.secondary path {
    color: rgba(var(--color-dark-rgb), 0.75);
    fill: rgba(var(--color-dark-rgb), 0.75);
}
.datama-button.primary:not(.no-hover):hover {
    background: var(--state-hover-bg);
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}
.datama-button.secondary:not(.no-hover):hover {
    background: rgba(var(--color-dark-rgb), 0.06) !important;
    border-color: rgba(var(--color-dark-rgb), 0.12);
}
.datama-button.bg-primary,
.datama-button.bg-primary path {
    background: var(--datama-primary);
    color: var(--color-white);
    fill: var(--color-white);
    border-color: var(--datama-primary);
}
.datama-button.bg-primary .datama-icon,
.datama-button.bg-primary .datama-icon path,
.datama-button.bg-primary svg,
.datama-button.bg-primary svg path {
    color: var(--color-white);
    fill: var(--color-white);
}
.datama-button.bg-primary:not(.no-hover):hover {
    background: rgba(var(--datama-primary-rgb), 0.9);
    border-color: rgba(var(--datama-primary-rgb), 0.9);
    box-shadow: 0 2px 4px 0 rgba(var(--datama-primary-rgb), 0.25);
}
.datama-button.outline-primary {
    background: transparent;
    border: 1px solid var(--datama-primary);
    color: var(--datama-primary);
}
.datama-button.outline-primary:not(.no-hover):hover {
    background: var(--state-hover-bg);
    border-color: var(--datama-primary);
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 0.15);
}

/* Tinted active state — button groups, toggles, tabs */
.datama-button.active:not(.bg-primary) {
    background-color: var(--state-active-bg) !important;
    border-color: var(--state-active-border) !important;
    color: var(--state-active-text) !important;
}

.datama-button.active:not(.bg-primary) .datama-icon,
.datama-button.active:not(.bg-primary) .datama-icon path,
.datama-button.active:not(.bg-primary) path {
    color: var(--state-active-text) !important;
    fill: var(--state-active-text) !important;
}

.datama-button.active:not(.bg-primary):hover {
    background-color: rgba(var(--datama-primary-rgb), 0.15) !important;
    border-color: rgba(var(--datama-primary-rgb), 0.4) !important;
}

/* External documentation links */
.datama-button.datama-link-external,
.datama-button.datama-link-external path {
    color: var(--link-external-color);
    fill: var(--link-external-color);
}

.datama-button.datama-link-external:not(.no-hover):hover {
    background: rgba(var(--color-secondary-rgb), 0.08);
    border-color: rgba(var(--color-secondary-rgb), 0.25);
}

/* Highlight for buttons — flat selectors only (Tableau CEF has no CSS nesting).
 * Nested fill rules are ignored there, so the glyph stayed dark on primary. */
.datama-button.highlight {
    box-shadow: 0 1px 3px 0 rgba(var(--datama-primary-rgb), 1);
    background-color: rgba(var(--datama-primary-rgb), 1) !important;
    border-radius: 2px;
    color: var(--color-white);
}

.datama-button.highlight .datama-button-icon,
.datama-button.highlight .datama-icon,
.datama-button.highlight svg {
    color: var(--color-white);
}

.datama-button.highlight .datama-button-icon path,
.datama-button.highlight .datama-icon path,
.datama-button.highlight svg path {
    fill: var(--color-white) !important;
}

/* --- modules/__dialog.css --- */
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __dialog.css project project-deep-sky
 */

.datama-dialog {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.datama-dialog-open {
    visibility: visible;
    opacity: 1;
    z-index: 999;
    transition: var(--transition-in);
}
.datama-dialog-hidden {
    visibility: hidden;
    opacity: 0;
    z-index: -1;
    transition: var(--transition-out);
}

.datama-dialog > .datama-dialog-container {
    box-shadow: var(--shadow-large);
    border: var(--border);
    border-radius: var(--border-radius);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 85%;
    min-width: 80%;
    max-width: 90%;
    min-height: 60%;
    max-height: 90%;
    transform: translate(-50%, -50%);
    background: var(--color-bg-light);
    color: var(--color-dark);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    container-type: inline-size;
}

.datama-dialog.no-border > .datama-dialog-container {
    border: unset !important;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container {
    width: min(480px, calc(100% - 32px));
    min-width: min(360px, calc(100% - 32px));
    max-width: min(520px, calc(100% - 32px));
    min-height: 280px;
    max-height: calc(100% - 32px);
    height: auto;
    overflow: hidden;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 14px 16px;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header > .datama-dialog-icon {
    width: 24px;
    height: 24px;
    margin: 0;
    line-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-dark);
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header > .datama-dialog-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > header > h2 {
    flex: 1;
    min-width: 0;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main {
    flex: 1 1 auto;
    padding: 20px 24px;
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline {
    border: none;
    box-shadow: none;
    background: transparent;
    margin: 0;
    padding: 0;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-container,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline .datama-fieldset-container {
    padding: 0;
    gap: 0;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-row,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline .datama-fieldset-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: stretch;
    min-height: 0;
    margin: 0 !important;
    padding: 0 0 16px;
    border: none;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.08);
    box-shadow: none;
    background: transparent;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-row:last-child,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-inline .datama-fieldset-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin: 0 !important;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-left,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-right {
    width: 100%;
    justify-content: flex-start;
    align-items: stretch;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-dark);
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-help-icon {
    display: none;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input-container,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-select-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100%;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input-label {
    display: none;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-input-select,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main input,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-right .datama-input,
.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > main .datama-fieldset-right .datama-input-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 24px 20px;
    flex-shrink: 0;
    box-sizing: border-box;
    border-top: 1px solid rgba(var(--color-dark-rgb), 0.05);
}

.datama-dialog.datama-dialog-compact-form > .datama-dialog-container > footer > .datama-button {
    margin: 0;
    flex: 0 0 auto;
}

.datama-dialog > .datama-dialog-container > header *,
.datama-dialog > .datama-dialog-container > footer * {
    font-size: 16px !important;
}

.datama-dialog > .datama-dialog-container .datama-light-version {
    display: block;
    position: absolute;
    bottom: 4px;
    left: 4px;
    z-index: 2;
    color: var(--color-bg-light);
    font-size: 12px;
    word-wrap: break-word;
    width: min-content;
}

.datama-dialog > .datama-dialog-container > header .datama-divider.vertical,
.datama-dialog > .datama-dialog-container > footer .datama-divider.vertical {
    height: 15px !important;
    margin-top: 7.5px !important;
}
.datama-dialog > .datama-dialog-container > header,
.datama-dialog > .datama-dialog-container > footer {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
}

.datama-dialog > .datama-dialog-container > header {
    padding: 0 30px 0 10px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    min-width: 0;
    flex-shrink: 0;
}
.datama-dialog > .datama-dialog-container > footer {
    padding-bottom: 10px;
}
.datama-dialog > .datama-dialog-container > footer:empty {
    display: none;
}
.datama-dialog > .datama-dialog-container > header {
    border-bottom: 1px solid rgba(var(--color-dark-rgb), .05);
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon * {
    font-size: 14px !important;
    line-height: 14px;
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon {
    line-height: 30px;
    margin: 0 10px 0 -5px;
    width: 20px;
    display: flex;
    justify-content: center;
}
.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon + button,
.datama-dialog > .datama-dialog-container > header > h2 + button {
    margin-left: auto !important;
}
.datama-dialog > .datama-dialog-container > header > h2 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    margin: 0;
    letter-spacing: .5px;
    flex: 1;
}
.datama-dialog > .datama-dialog-container > header > button {
    padding: 0;
    border: none;
    background: transparent;
    font-size: 16px !important;
    width: 30px;
    height: 30px;
    line-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    margin-left: 8px;
}

.datama-dialog > .datama-dialog-container > header > .datama-dialog-icon + button,
.datama-dialog > .datama-dialog-container > header > h2 + button {
    margin-left: auto !important;
}

/* Fix icon centering and cropping in dialog header buttons */
.datama-dialog > .datama-dialog-container > header > button svg,
.datama-dialog > .datama-dialog-container > header > button .datama-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.datama-dialog > .datama-dialog-container > header button:hover {
    background: var(--hover);
}

.datama-dialog > .datama-dialog-container > main {
    /*display: flex;*/
    /*flex-direction: column;*/
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
}
.datama-dialog > .datama-dialog-container > main > h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .5px;
}
.datama-dialog > .datama-dialog-container > main label {
    display: inline-block;
    font-weight: 500;
    margin-right: 10px;
}





.datama-dialog > .datama-dialog-container > main > .datama-tabs-container {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}


.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-content {
    padding-right: 10px;
    padding-left: 10px;
    flex: 1;
    overflow-y: auto;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 20px 30px 0 30px;
    box-sizing: border-box;
    z-index: 10;
}
div[data-app="true"] .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header button {
    padding: 2px !important;
    margin: 0 !important;
    width: 36px;
    height: 36px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border:transparent !important; 
}
div[data-app="true"] .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header .datama-divider {
    margin: 5px 8px !important;
    height: 28px !important;
    align-self: center !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab .datama-tab-header .datama-tab-icon {
    display: none;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab {
    padding: 0;
    display: flex;
    justify-content: center;
    background: #fbfcfd;
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
    max-width: 800px;
    width: 100%;
    padding: 70px 30px 20px 30px;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Ensure fieldsets and form elements maintain their white background */
.datama-dialog .datama-fieldset,
.datama-dialog .datama-reactive-table-container,
.datama-dialog .datama-button-group {
    background: var(--color-white);
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer > .datama-tab-content-wrapper {
    padding-bottom: 80px;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs {
    background: var(--datama-primary);
    width: unset;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item {
    display: flex;
    justify-content: center;
    padding: 0 10px !important;
    margin: 5px 0;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge {
    background: transparent;
    border: 1px solid transparent;
    transform: scale(.75) !important;
    right: -10px;
    bottom: -5px;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button .datama-badge path {
    color: red !important;
    fill: red !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button {
    font-size: 20px;
    line-height: 20px;
    border-radius: 0 !important;
    text-align: center;
    padding: 10px 0;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item.disabled {
    background: rgba(0,0,0,0.25);
    opacity: 1 !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button path {
    color: rgba(var(--datama-white-rgb), .5) !important;
    fill: rgba(var(--datama-white-rgb), .5) !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active path {
    color: rgba(var(--datama-white-rgb), 1) !important;
    fill: rgba(var(--datama-white-rgb), 1) !important;
}

.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active {
    border-left: 2px solid rgba(var(--datama-white-rgb), 1);
    padding-left: 5px !important;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
    display: flex !important;
    grid-template-columns: unset !important;
    font-size: 20px;
    line-height: 20px;
    border-radius: 0px !important;
    width: 40px;
    text-align: center;
}
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
.datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
    display: none !important;
}



.datama-dialog > .datama-dialog-container .datama-tab-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    margin-bottom: 1rem !important;
}
.datama-dialog > .datama-dialog-container .datama-tab-header .datama-tab-title {
    font-size: 1.05rem;
    margin-left: 0;
    margin-right: auto;
    font-weight: 600;
    margin-bottom: 0;
    flex: 1;
    color: var(--text-structure);
}

.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button {
    margin-left: 8px;
}
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button .datama-button-icon {
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fix SVG sizing in dialog tab header buttons */
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button .datama-button-icon svg,
.datama-dialog > .datama-dialog-container .datama-tab-header > .datama-button svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0;
}
.datama-dialog > .datama-dialog-container .datama-tab-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 60px;
    padding: 15px 0 !important;
    align-items: center;
    display: flex;
    justify-content: center;
    background: #fbfcfd;
    border-top: var(--border);
}

.datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
    width: 100%;
    padding: 0 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.datama-dialog > .datama-dialog-container .datama-tab-content *:not(.datama-panels):not(.datama-panels *) {
    font-size: .75rem !important;
}
.datama-dialog > .datama-dialog-container .datama-tab-content > h3 {
    font-size: .9rem !important;
    line-height: 1rem;
    margin-bottom: .25rem;
}
.datama-dialog > .datama-dialog-container .datama-tab-content .datama-section {
    padding: 10px 10px;
}
@media screen and (max-width: 400px) {
    .datama-dialog > .datama-dialog-container .datama-tab {
        padding: 5px 20px !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 80px - 1rem) !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button {
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button > span {
        font-size: .75rem;
        line-height: 18px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button .datama-button-icon {
        height: 15px;
        margin-top: 2px;
    }
    
    /* Remove container constraint on mobile */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        max-width: none;
        padding: 20px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
        max-width: none;
        padding: 0 20px;
    }
    
    /* Remove horizontal padding from specific containers */
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab,
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Add padding to header in mobile and prevent overflow */
    .datama-dialog > .datama-dialog-container .datama-tab-header {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0 !important;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Adjust content padding for mobile */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        padding: 70px 20px 20px 20px;
    }
}
@media screen and (min-width: 401px) and (max-width: 900px) {
    .datama-dialog > .datama-dialog-container .datama-tab {
        padding: 5px 20px !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 90px - 1rem) !important;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button {
        height: 20px;
        line-height: 20px;
        padding: 0 10px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button > span {
        font-size: .75rem;
        line-height: 18px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer > button .datama-button-icon {
        height: 15px;
        margin-top: 2px;
    }
    
    /* Remove container constraint on tablet */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        max-width: none;
        padding: 20px;
    }
    .datama-dialog > .datama-dialog-container .datama-tab-footer .datama-tab-footer-content {
        max-width: none;
        padding: 0 20px;
    }
    
    /* Remove horizontal padding from specific containers */
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab,
    #container-center-advanced-settings-tabs-tab-container-center-settings-tab-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Add padding to header in tablet and prevent overflow */
    .datama-dialog > .datama-dialog-container .datama-tab-header {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-left: 0;
        margin-right: 0 !important;
        padding: 20px 20px 0 20px;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* Adjust content padding for tablet */
    .datama-dialog > .datama-dialog-container > main > .datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-content-wrapper {
        padding: 70px 20px 20px 20px;
    }
}
@media screen and (min-width: 800px) {
    .datama-dialog > .datama-dialog-container .datama-tab-content {
        height: calc(100% - 80px - 1rem) !important;
    }
}
/* --- modules/__image.css --- */
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2024 DATAMA SAS, All rights reserved.
 * Generated for file : __image.css project project-deep-sky
 */

.datama-image {
    transition: var(--transition-in);
    box-sizing: border-box;
    justify-items: center;
    justify-content: center;
    text-align: center;
    display: flex;
}
.datama-image.small {
    margin: 0 auto;
    width: 30%;
    max-width: 30%;
}
.datama-image.medium {
    margin: 0 auto;
    width: 60%;
    max-width: 60%;
}
.datama-image.large {
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
}
/* --- modules/__tabs.css --- */
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __tabs.css project project-deep-sky
 */

.datama-tabs-container {
    display: grid;
    overflow: auto;
}
.datama-tabs-container.horizontal {
    /*justify-content: flex-start;*/
    /*flex-wrap: nowrap;*/
    grid-template-areas: "menu contents";
    grid-template-columns: fit-content(300px) 1fr;
    grid-template-rows: 1fr;
}
.datama-tabs-container.vertical {
    grid-template-areas: "menu" "contents";
    grid-template-rows: fit-content(60px) 1fr;
    grid-template-columns: 1fr;
    /*flex-direction: column;*/
    /*justify-content: flex-start;*/
}
.datama-tabs-container > .datama-tabs {
    margin: 0;
    padding: 5px 0 0 0;
    list-style: none;
    text-align: left;
    border-right: var(--border);
}
.datama-tabs-container.vertical > .datama-tabs {
    display: flex;
    justify-content: right;
}
.datama-tabs-container.vertical.center > .datama-tabs {
    justify-content: center;
}
.datama-tabs-container.vertical.right > .datama-tabs {
    justify-content: flex-end;
}
.datama-tabs-container.vertical.left > .datama-tabs {
    justify-content: flex-start;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item {
    padding: 5px 10px;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
    display: grid;
    grid-template-areas: "icon text documentation";
    grid-template-columns: 30px 0 0;
    grid-template-rows: 1fr;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
    text-align: center;
    grid-area: icon;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon > span.datama-icon{
    display: inline-block;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation {
    text-align: left;
    grid-area: documentation;
    opacity: 0;
    transition: .2s ease-out;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item:hover > .datama-button > .datama-documentation {
    transition: .1s ease-in;
    opacity: 1;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
    text-align: left;
    grid-area: text;
    width: 100%;
    padding: 0 5px;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button {
    background: transparent;
    border: none;
    font-size: 16px;
    line-height: 1rem;
    font-weight: 500;
    padding: 0;
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active {
    background: var(--state-active-bg);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px var(--state-active-border);
}

.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active > span,
.datama-tabs-container > .datama-tabs > .datama-tabs-item > button.active path {
    color: var(--state-active-text);
    fill: var(--state-active-text);
}
.datama-tabs-container > .datama-tabs-content {
    max-height: 100%;
    overflow-y: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab {
    position: relative;
    height: 100%;
    padding: 5px 20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer > .datama-tab-content {
    height: calc(100% - 82px - 1rem);
    overflow: auto;
    margin-right: -20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-header > .datama-tab-content {
    height: calc(100% - 70px - 1rem);
    overflow: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab.datama-tab-has-footer.datama-tab-has-header > .datama-tab-content {
    height: calc(100% - 128px - 1rem);
    overflow: auto;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    margin-bottom: 1rem;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header > .datama-tab-icon {
    margin-left: 0;
    margin-right: 0;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header > .datama-tab-title {
    margin-left: 0;
    margin-right: auto;
    font-weight: 600;
    margin-bottom: 0;
    color: var(--text-structure);
}
.datama-tab-subtitle {
    color: var(--text-meta);
    font-size: 0.75rem; 
    margin-bottom: 0;
    margin-top: 0.25rem;
    line-height: 1.25rem;
    font-weight: 400;
}

.waterfall-font-category {
    color: var(--color-primary);
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin: 0.5rem 0 1rem 0;
    letter-spacing: 0.5px;
    position: relative;
    display: inline-block;

}

.waterfall-font-category::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 80%;
    transform: translateX(-50%);
    width: 150px;
    height: 1px;
    background-color: var(--color-primary);
    opacity: 0.6;

}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button {
    border: 0;
    font-size: 20px;
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button,
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-header button path {
    color: var(--color-primary);
    fill: var(--color-primary);
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    background: var(--color-white);
    border-top: var(--border);
}
.datama-tabs-container > .datama-tabs-content > .datama-tab > .datama-tab-footer button {
    font-size: 16px;
}
.datama-tabs-item .datama-documentation {
    padding: 2px;
    width: 24px;
    height: 24px;
    font-size: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    transition: 0.2s ease-out;
    background: transparent;
    border: none;
}
.datama-tabs-item .datama-documentation path {
    fill: var(--help-color);
}
.datama-tabs-item .datama-documentation:hover path {
    fill: var(--help-color-hover);
    transition: 0.1s ease-in;
}
.datama-tabs-item .datama-documentation:active path {
    fill: var(--help-color-active);
}
.datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
    margin: 0;
}
/* RESPONSIVE */
@media screen and (max-width: 767px) {
    .datama-tabs-container > .datama-tabs {
        width: 40px;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-icon {
        grid-area: icon;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
        display: none;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 0 10px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .datama-tabs-container > .datama-tabs {
        width: 40px;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item {
        padding: .5rem 0 ;
        display: flex;
        justify-content: center;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button {
        display: flex;
        justify-content: center;
        grid-template-areas: none;
    }
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-documentation,
    .datama-tabs-container > .datama-tabs > .datama-tabs-item > .datama-button > .datama-button-text {
        display: none;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 0 10px;
    }
}
@media screen and (min-width: 1200px) {
    .datama-tabs-container > .datama-tabs > .datama-tabs-item .datama-button {
        grid-template-columns: 30px 1fr 20px;
        width: 100%;
        text-align: left;
    }
    .datama-tabs-container > .datama-tabs-content > .datama-tab {
        padding: 5px 20px;
    }
}
/* --- modules/__panels.css --- */
/*
 * DATAMA SAS
 * --------------
 * NOTICE:  All information contained herein is, and remains
 * the property of DataMa SAS and/or some open source packages used
 * if any.  The intellectual and technical concepts contained
 * herein are proprietary to DataMa SAS
 * and its suppliers and may be covered by French and Foreign Patents,
 * patents in process, and are protected by trade secret or copyright law.
 * Dissemination of this information or reproduction of this material
 * is strictly forbidden unless prior written permission is obtained
 * from DataMa SAS.
 * Notice created by Django <django@datama.fr>, Wazhabits <anatole@datama.fr> updated by Anatole Piveteau
 * Copyright (c) 2025 DATAMA SAS, All rights reserved.
 * Generated for file : __panels.css project project-deep-sky
 */

.datama-panels-search {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}
.datama-panels-search--sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--color-white);
    padding-top: 0.15rem;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
    box-shadow: 0 10px 20px 10px var(--color-white);
}
.datama-panels-search--sticky::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.75rem;
    height: 0.75rem;
    background: linear-gradient(to bottom, var(--color-white), transparent);
    pointer-events: none;
}
.datama-panels-scope-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Keep rubrique titles clear of the sticky search bar on rail navigation. */
    scroll-margin-top: 3.75rem;
}
.datama-panels-scope-section--solo {
    gap: 0;
}
.datama-panels-scope-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.15rem 0.2rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-structure);
    border-bottom: 1px solid rgba(var(--datama-primary-rgb), 0.12);
}
.datama-panels-scope-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-chrome-color);
}
.datama-panels-scope-heading-icon .datama-icon,
.datama-panels-scope-heading-icon svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
    fill: currentColor !important;
}
.datama-panels-scope-title {
    line-height: 1.2;
}
.datama-panels-search-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.datama-panels-search-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    color: var(--icon-chrome-color);
    pointer-events: none;
    z-index: 1;
}
.datama-panels-search-icon .datama-icon,
.datama-panels-search-icon svg {
    width: 1rem !important;
    height: 1rem !important;
    fill: currentColor !important;
}
.datama-panels-search input {
    width: 100%;
    padding: 0.6rem 2.25rem 0.6rem 2.5rem;
    border: 1px solid rgba(var(--color-dark-rgb), 0.12);
    border-radius: 8px;
    outline: none;
    font-size: 0.875rem;
    color: var(--color-dark);
    background: var(--color-white);
    transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels-search-field:focus-within .datama-panels-search-icon {
    color: var(--icon-action-color);
}
.datama-panels-search-field:focus-within input {
    border-color: var(--focus-border-color);
    box-shadow: var(--focus-ring);
}
.datama-panels-search input::placeholder {
    color: rgba(var(--color-dark-rgb), 0.45);
}
.datama-panels-search-clear {
    position: absolute;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border: none;
    border-radius: 999px;
    background: rgba(var(--color-dark-rgb), 0.06);
    color: rgba(var(--color-dark-rgb), 0.55);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.datama-panels-search-clear:hover {
    background: rgba(var(--color-dark-rgb), 0.1);
    color: var(--color-dark);
}
.datama-panels-search-empty {
    padding: 0.35rem 0.15rem 0;
    font-size: 0.825rem;
    color: rgba(var(--color-dark-rgb), 0.55);
}
.datama-panels.datama-panels-searching > .datama-panels-list > .datama-panel.datama-panel-search-hidden,
.datama-panels.datama-panels-searching > .datama-panels-list > .datama-panels-scope-section.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-panel.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-fieldset-wrapper.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-fieldset.datama-panel-search-hidden,
.datama-panels.datama-panels-searching .datama-fieldset-row.datama-panel-search-hidden {
    display: none !important;
}
.datama-panels-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.datama-panels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.datama-panels > .datama-panel,
.datama-panels > .datama-panels-list > .datama-panel {
    width: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-white);
    border: 1px solid rgba(var(--color-dark-rgb), 0.08);
    border-radius: 8px;
    box-shadow: 0 1px 3px 0 rgba(var(--color-dark-rgb), 0.05);
    overflow: visible;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

/* Closed panels — clip fading content and keep a solid surface */
.datama-panels > .datama-panel.datama-panel-close,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close {
    overflow: hidden;
    background: var(--color-white);
}
.datama-panels > .datama-panel:hover,
.datama-panels > .datama-panels-list > .datama-panel:hover {
    border-color: rgba(var(--color-dark-rgb), 0.12);
    box-shadow: 0 2px 6px 0 rgba(var(--color-dark-rgb), 0.08);
}
.datama-panels > .datama-panel:has(.datama-input-select-open),
.datama-panels > .datama-panels-list > .datama-panel:has(.datama-input-select-open) {
    z-index: 10;
}
.datama-panels > .datama-panel > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 0.925rem;
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    background: var(--color-white);
    color: var(--text-body);
    transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon {
    margin-left: -.25rem;
    margin-right: .5rem;
    color: var(--icon-action-color);
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon .datama-icon,
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon svg {
    fill: var(--icon-action-color) !important;
    color: var(--icon-action-color);
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon *,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-icon * {
    font-size: .9rem !important;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header {
    flex: 1;
    margin-right: auto;
    margin-left: 0;
    color: var(--text-body);
}
.datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container {
    background: color-mix(in srgb, var(--datama-primary) 10%, var(--color-white));
    border-bottom-color: var(--state-active-border);
    color: var(--text-body);
}

.datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover,
.datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:hover {
    background: color-mix(in srgb, var(--datama-primary) 6%, var(--color-white));
    color: var(--text-body);
}

.datama-panels > .datama-panel > .datama-panel-content,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-content {
    width: 100%;
    padding: 1rem 1.25rem 1.25rem 1.25rem;
    background: var(--color-white);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    max-height: none;
    opacity: 1;
    visibility: visible;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Stack above siblings while open; keep overflow so scroll position is preserved. */
.datama-panels > .datama-panel:has(.datama-panel-content .datama-input-select-open),
.datama-panels > .datama-panels-list > .datama-panel:has(.datama-panel-content .datama-input-select-open) {
    z-index: 100;
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-content,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-content {
    height: 0;
    max-height: 0;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.3s;
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container {
    background: var(--color-white);
    border-bottom: 1px solid rgba(var(--color-dark-rgb), 0.06);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:hover,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:hover {
    background: color-mix(in srgb, var(--color-dark) 3%, var(--color-white));
    color: var(--text-body);
}
.datama-panels > .datama-panel > .datama-panel-header-container,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container {
    position: relative;
}
/* Drop legacy CSS triangle when a chevron caret is present. */
.datama-panels > .datama-panel > .datama-panel-header-container:has(.datama-panel-header-caret)::after,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:has(.datama-panel-header-caret)::after {
    content: none;
    display: none;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-actions,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 0.5rem;
    z-index: 1;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin-left: 0.5rem;
    color: var(--caret-color);
    pointer-events: none;
    transform: rotate(180deg);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret svg,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret svg,
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret path,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-caret path {
    width: 14px;
    height: 14px;
    display: block;
}
.datama-panels > .datama-panel > .datama-panel-header-container:hover > .datama-panel-header-caret,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:hover > .datama-panel-header-caret {
    color: var(--caret-color-hover);
}
.datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container > .datama-panel-header-caret,
.datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container > .datama-panel-header-caret {
    color: var(--caret-color-open);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container > .datama-panel-header-caret,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container > .datama-panel-header-caret {
    transform: none;
}
.datama-panels > .datama-panel > .datama-panel-header-container > .datama-panel-header-trailing-actions,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container > .datama-panel-header-trailing-actions {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: 0.35rem;
    z-index: 1;
}
/* Legacy fallback: CSS triangle caret when no chevron node is mounted. */
.datama-panels > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom: 5px solid var(--caret-color);
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-bottom-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.datama-panels > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after,
.datama-panels > .datama-panels-list > .datama-panel > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after {
    border-bottom-color: var(--caret-color-hover);
}
.datama-panels > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after,
.datama-panels > .datama-panels-list > .datama-panel:not(.datama-panel-close) > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after {
    border-bottom-color: var(--caret-color-open);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret))::after {
    transform: translateY(-50%) rotate(180deg);
}
.datama-panels > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after,
.datama-panels > .datama-panels-list > .datama-panel.datama-panel-close > .datama-panel-header-container:not(:has(.datama-panel-header-caret)):hover::after {
    border-bottom-color: var(--caret-color-hover);
}

/* Permettre l'overflow pour les dropdowns une fois l'animation terminée */
.datama-panel-content.allow-overflow {
    overflow: visible !important;
}