@charset "UTF-8";
/*
 * 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.
 */
/*
 * 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);
}

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